:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1d1d1f;background:#f5f5f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(255, 255, 255, .82);--panel-solid: #ffffff;--line: rgba(0, 0, 0, .1);--line-strong: rgba(0, 0, 0, .16);--text-soft: #6e6e73;--accent: #0071e3;--accent-strong: #0068d1;--danger: #d92d20;--warning: #b54708;--success: #087443;--shadow: 0 18px 50px rgba(0, 0, 0, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{border:0}.shell{display:grid;grid-template-columns:292px minmax(0,1fr);height:100vh;overflow:hidden}.sidebar{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:#f5f5f7e0;backdrop-filter:blur(28px)}.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 14px}.brand-mark{display:grid;width:38px;height:38px;place-items:center;color:#fff;background:linear-gradient(135deg,#111827,#0071e3);border-radius:8px;box-shadow:0 12px 24px #0071e33d}h1,h2,p{margin:0}h1{font-size:17px;line-height:1.2}.brand p,.selection-info span,.hint-row,.statusbar,.thumb-meta,.empty-list p,.empty-stage p{color:var(--text-soft)}.brand p{margin-top:2px;font-size:12px}.import-zone{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;padding:0 14px 14px}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;height:40px;gap:8px;border-radius:8px;cursor:pointer;transition:background-color .12s ease,color .12s ease,border-color .12s ease,transform .12s ease}.primary-button{color:#fff;background:var(--accent);padding:0 15px;font-weight:650}.primary-button:hover:not(:disabled){background:var(--accent-strong)}.ghost-button{color:#1d1d1f;background:#ffffffad;border:1px solid var(--line);padding:0 13px}.ghost-button:hover:not(:disabled){background:#fff;border-color:var(--line-strong)}.primary-button:active:not(:disabled),.ghost-button:active:not(:disabled){transform:scale(.98)}.primary-button:disabled,.ghost-button:disabled{cursor:not-allowed;opacity:.42}.icon-button{width:40px;padding:0}.thumb-list{display:grid;align-content:start;gap:10px;min-height:0;overflow:auto;padding:0 12px 18px}.thumb-item{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 10px;width:100%;min-height:82px;padding:8px;text-align:left;background:#ffffffb8;border:1px solid transparent;border-radius:8px;cursor:pointer}.thumb-item:hover,.thumb-item.selected{background:#fff;border-color:#0071e357}.thumb-item.selected{box-shadow:0 0 0 3px #0071e31f}.thumb-item img{grid-row:1 / 3;width:82px;height:64px;object-fit:cover;border-radius:6px;background:linear-gradient(45deg,#e5e5ea 25%,transparent 25%),linear-gradient(-45deg,#e5e5ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5ea 75%),linear-gradient(-45deg,transparent 75%,#e5e5ea 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.thumb-title{align-self:end;overflow:hidden;color:#1d1d1f;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.thumb-meta{align-self:start;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.thumb-remove{position:absolute;top:6px;right:6px;display:grid;width:24px;height:24px;place-items:center;color:#1d1d1f;background:#ffffffe0;border:1px solid var(--line);border-radius:999px}.state-pill,.toolbar-pill{display:inline-flex;align-items:center;gap:5px;width:max-content;color:var(--success);background:#0874431a;border-radius:999px;font-size:11px;font-weight:700}.state-pill{position:absolute;left:14px;bottom:16px;padding:3px 7px}.state-pill.dirty,.toolbar-pill.dirty{color:var(--warning);background:#b547081c}.workspace{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;background:radial-gradient(circle at 94% 0%,rgba(0,113,227,.08),transparent 26%),linear-gradient(180deg,#fbfbfd,#f5f5f7)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:14px 20px;border-bottom:1px solid var(--line)}.selection-info{display:flex;flex-wrap:wrap;align-items:center;min-width:0;gap:8px 12px}.selection-info strong{overflow:hidden;max-width:min(520px,48vw);text-overflow:ellipsis;white-space:nowrap}.selection-info span{font-size:13px}.toolbar-pill{padding:5px 9px}.toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.stage{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;padding:12px 20px 8px}.canvas-frame{display:grid;min-width:0;min-height:0;height:100%;place-items:center;overflow:auto;padding:18px;background:linear-gradient(45deg,rgba(0,0,0,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.035) 75%),#ffffffb3;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}canvas{display:block;max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 8px 28px #0000002e;cursor:crosshair;touch-action:none}.hint-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;min-height:22px;font-size:12px}.empty-stage,.empty-list{display:grid;place-items:center;text-align:center}.empty-stage{align-self:center;justify-self:center;gap:14px;max-width:420px;padding:26px}.empty-stage h2{font-size:22px}.empty-stage p,.empty-list p{line-height:1.6}.empty-visual{position:relative;width:168px;height:118px}.empty-visual div{position:absolute;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:linear-gradient(135deg,rgba(0,113,227,.12),transparent),#fff;box-shadow:0 18px 38px #0000001f}.empty-visual div:nth-child(1){inset:26px 42px 0 0}.empty-visual div:nth-child(2){inset:10px 20px 16px 26px}.empty-visual div:nth-child(3){inset:0 0 34px 62px}.empty-list{min-height:220px;gap:10px;padding:20px;border:1px dashed var(--line-strong);border-radius:8px;background:#ffffff7a}.statusbar{display:flex;justify-content:space-between;gap:16px;min-height:42px;padding:11px 20px;border-top:1px solid var(--line);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:820px){.shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.sidebar{max-height:296px;border-right:0;border-bottom:1px solid var(--line)}.thumb-list{display:flex;overflow-x:auto;padding-bottom:12px}.thumb-item{min-width:244px}.toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%;justify-content:stretch}.toolbar-actions>button{flex:1}canvas{max-height:calc(100vh - 438px)}}@media(prefers-color-scheme:dark){:root{color:#f5f5f7;background:#111113;--panel: rgba(28, 28, 30, .82);--panel-solid: #1c1c1e;--line: rgba(255, 255, 255, .12);--line-strong: rgba(255, 255, 255, .2);--text-soft: #a1a1a6;--shadow: 0 18px 50px rgba(0, 0, 0, .34)}.sidebar{background:#161618e6}.workspace{background:radial-gradient(circle at 94% 0%,rgba(0,113,227,.13),transparent 26%),linear-gradient(180deg,#171719,#101012)}.ghost-button,.thumb-item,.empty-list{color:#f5f5f7;background:#262628b8}.ghost-button:hover:not(:disabled),.thumb-item:hover,.thumb-item.selected{background:#242426}.thumb-title{color:#f5f5f7}.thumb-remove{color:#f5f5f7;background:#1c1c1ee6}.canvas-frame{background:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.04) 75%),#1c1c1ed1;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.empty-visual div{border-color:#ffffff1f;background:linear-gradient(135deg,rgba(0,113,227,.18),transparent),#242426}}