/* A selected window owns the mouse wheel; click empty canvas to return to panning. */
.readable-ui .wall-canvas .canvas-window.is-wheel-selected{border-color:#3f79be;box-shadow:0 0 0 2px #79a6db,0 10px 32px #25311e26}

.readable-ui .canvas-editor-link{display:inline-flex;align-items:center;white-space:nowrap}.readable-ui .canvas-editor-link a{font-size:11px;line-height:1.4;padding:3px 4px}

.readable-ui .canvas-source{flex:0 0 auto;font-size:11px;font-weight:600;line-height:1.4;border-radius:4px;padding:1px 5px;white-space:nowrap;color:#58636d;background:#edf0f1}.readable-ui .canvas-source[data-source="self"]{color:#44703b;background:#e7f3e4}.readable-ui .canvas-source[data-source="peer"]{color:#315d94;background:#e6effb}

.readable-ui .canvas-window-header .canvas-snippet-button{white-space:nowrap;min-height:24px;padding:2px 6px;border:1px solid #e0e6d9;border-radius:5px;background:#f7faf4;color:#58704a;font-size:11px;line-height:1.4}

/* Author lanes stay behind draggable windows and move with the canvas. */
.wall-canvas .canvas-window[hidden]{display:none!important}
.wall-canvas .canvas-author-lanes{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
.wall-canvas .canvas-author-lane{position:absolute;box-sizing:border-box;border:2px solid #d4ded1;border-radius:14px;background:#eaf2e780;pointer-events:none}
.wall-canvas .canvas-author-lane.snow{border-color:#d7def0;background:#edf0fa80}
.wall-canvas .canvas-author-lane.other{border-color:#e2dcd3;background:#f6f0e980}
.wall-canvas .canvas-author-lane strong{position:absolute;top:14px;left:18px;color:#53664b;font-size:19px;font-weight:700;white-space:nowrap}
.wall-canvas .canvas-author-lane.snow strong{color:#52617c}

/* Lead with template and idea, with the product in a quieter second row. */
.readable-ui .canvas-window-heading{min-width:0;flex:1}
.readable-ui .canvas-top-classification{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.35;font-weight:700;color:#263b27}
.readable-ui .canvas-context .canvas-window-title,.readable-ui .canvas-editor-properties summary .canvas-window-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500;color:#687260}
.readable-ui .canvas-context .canvas-window-title{flex:1}
.readable-ui .canvas-editor-properties summary .canvas-window-title{display:inline-block;max-width:100%;vertical-align:middle}

/* Motion affects feedback only, never the position or size of canvas windows. */
.readable-ui .topbar{position:relative}
.readable-ui .ux-loading-bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none;font-size:0;z-index:5}
.readable-ui .ux-loading-bar[hidden]{display:none!important}
.readable-ui .ux-loading-bar::after{content:'';display:block;height:100%;width:28%;background:#6e9874;transform:translateX(-100%);animation:ux-loading 1.1s ease-in-out infinite}
.readable-ui .canvas-window-footer button[data-canvas-action="save"]:disabled,
.readable-ui .quick-create-modal #quick-save:disabled{display:inline-flex;align-items:center;gap:5px}
.readable-ui .canvas-window-footer button[data-canvas-action="save"]:disabled::before,
.readable-ui .quick-create-modal #quick-save:disabled::before{content:'';width:11px;height:11px;flex:none;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ux-spin .7s linear infinite}
.readable-ui .wall-reference-search.ui-is-loading .wall-search-summary::before{content:'';display:inline-block;width:9px;height:9px;margin-right:5px;border:1.5px solid #8c9b83;border-right-color:transparent;border-radius:50%;animation:ux-spin .7s linear infinite;vertical-align:-1px}
@keyframes ux-loading{to{transform:translateX(460%)}}
@keyframes ux-spin{to{transform:rotate(360deg)}}
@keyframes ux-modal-in{from{opacity:0}to{opacity:1}}
@keyframes ux-modal-card-in{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:no-preference){
 .readable-ui .modal-backdrop:not(.hidden){animation:ux-modal-in .15s ease-out}
 .readable-ui .modal-backdrop:not(.hidden)>.modal{animation:ux-modal-card-in .16s ease-out}
 .readable-ui :is(.primary,.secondary,.ghost,.nav-item,.pill,.tab-btn,.wall-search-pick){transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .1s ease}
 .readable-ui :is(.primary,.secondary,.ghost,.nav-item,.pill,.tab-btn,.wall-search-pick):not(:disabled):active{transform:scale(.98)}
 .readable-ui .wall-canvas .canvas-window{transition:border-color .14s ease,box-shadow .14s ease}
}
@media (prefers-reduced-motion:reduce){
 .readable-ui .ux-loading-bar::after{width:100%;transform:none;animation:none}
 .readable-ui .canvas-window-footer button[data-canvas-action="save"]:disabled::before,
 .readable-ui .quick-create-modal #quick-save:disabled::before,
 .readable-ui .wall-reference-search.ui-is-loading .wall-search-summary::before{animation:none}
}


/* 爆款星标突出框体，但正文保持原有的高对比度与可读性。 */
.readable-ui .wall-canvas .canvas-window.is-starred-script{border:2px solid #d99a30;box-shadow:0 0 0 2px #eebd5b44,0 8px 28px #8b5c201a}
.readable-ui .wall-canvas .canvas-window.is-starred-script .canvas-window-header{background:#fff6df;border-bottom-color:#f0d49a}
.readable-ui .wall-canvas .canvas-window.is-starred-script.is-wheel-selected{border-color:#d18b1d;box-shadow:0 0 0 2px #79a6db,0 0 0 4px #e9bd68,0 10px 32px #25311e26}
.readable-ui .canvas-star-button,.readable-ui .canvas-star-badge{display:inline-flex;align-items:center;gap:3px;min-height:25px;padding:2px 6px;border:1px solid #dfc17e;border-radius:6px;background:#fffaf0;color:#805514;font-size:11px;line-height:1.3;white-space:nowrap}
.readable-ui .canvas-star-button[aria-pressed=true],.readable-ui .canvas-star-badge{background:#ffeab4;color:#754604;border-color:#e1b052;font-weight:700}
.readable-ui .canvas-star-button:hover:not(:disabled){background:#ffedc7;border-color:#bf872a}
.readable-ui .canvas-star-button:focus-visible{outline:2px solid #345f9a;outline-offset:2px}
.readable-ui .canvas-star-button span:first-child{font-size:15px;line-height:1}
.readable-ui .canvas-context [data-script-created],.readable-ui .canvas-editor-properties summary [data-script-created]{display:inline-block;flex:0 0 auto;color:#626e5b;font-size:11px;white-space:nowrap}
.readable-ui [data-script-created][hidden]{display:none!important}
.readable-ui .canvas-editor-properties summary{display:flex;align-items:center;gap:8px}
.readable-ui .canvas-editor-properties summary .canvas-window-title{flex:1;min-width:0}
.readable-ui .wall-search-result.is-starred-script{border-color:#dfa83f;background:#fffaf0;box-shadow:inset 3px 0 #dc9c29}
.readable-ui .wall-search-star{display:inline-block;border-radius:4px;background:#ffe9b3;color:#754604;padding:1px 4px;font-size:11px;font-weight:700}

/* Search only marked scripts; compact native control remains aligned and clickable. */
.readable-ui .floating-reference-search .wall-search-star-filter{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 8px;border:1px solid #e1d2ae;border-radius:6px;background:#fffaf0;color:#735319;font-size:12px;line-height:1.4;cursor:pointer;white-space:nowrap}
.readable-ui .floating-reference-search .wall-search-star-filter[hidden]{display:none!important}
.readable-ui .floating-reference-search .wall-search-star-filter input[type="checkbox"]{display:block;flex:0 0 auto;width:15px;height:15px;min-width:15px;min-height:15px;margin:0;padding:0;accent-color:#a76c0c;cursor:pointer}
.readable-ui .floating-reference-search .wall-search-star-filter:focus-within{outline:2px solid #345f9a;outline-offset:2px}