/* Studio polish. All painting behavior and local saves are unchanged. */
:root { --bg:#f2f0fa; --panel-2:#f7f6fc; --line:#e2dfef; --shadow:0 3px 8px #201a430a,0 18px 42px #201a4312; }
body { background:radial-gradient(ellipse at 0 0,#fff0f4 0,transparent 46%),radial-gradient(ellipse at 100% 100%,#e4f5f4 0,transparent 45%),var(--bg); }
.top { border-bottom:1px solid var(--line); margin-bottom:14px; background:color-mix(in srgb,var(--panel) 88%,transparent); padding:14px 20px; }
.brand { font-size:26px; }
.top-actions .btn { border-radius:12px; box-shadow:0 2px 3px #201a4305; }
.top-actions #btnPages { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.studio { gap:20px; padding:0 20px 20px; grid-template-columns:minmax(0,1fr) 348px; }
.stage { border-radius:22px; background:radial-gradient(ellipse at 50% 20%,var(--panel) 0,var(--panel-2) 72%); }
.stagebar { padding:12px 14px 4px 22px; min-height:64px; }
.docname { flex-wrap:wrap; row-gap:3px; }
.docname span { font-size:20px; }
.docname small { font-size:12px; }
.viewport { padding:24px; }
#paper { box-shadow:0 4px 9px #1915350b,0 18px 40px #19153519; }
.panel { border-radius:22px; padding:22px; gap:18px; box-shadow:0 5px 20px #201a4305; }
.mode-row { border-bottom:1px solid var(--line); padding-bottom:16px; }
.tool { border-radius:15px; padding-block:14px 12px; }
.sw { border-radius:13px; }
.sw[aria-pressed="true"]::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:21px; font-weight:700; text-shadow:0 1px 4px #000; }
.panel .hint { line-height:1.55; }
.sheet { border-radius:24px; width:min(1040px,100%); }
.sheet header { padding:20px 24px; }
.sheet h2 { font-size:25px; margin-bottom:4px; }
.cards { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:18px; }
.card { border:1px solid var(--line); background:var(--panel); padding:12px; border-radius:16px; box-shadow:0 3px 12px #201a4306; transition:transform .15s,border-color .15s; }
.card:hover { transform:translateY(-2px); }
.card .page-open b { display:block; font-family:var(--font-display); font-size:16px; margin:12px 0 5px; }
.card img { object-fit:contain; border-radius:9px; }
.card.locked img { opacity:1; }
.card .pill { font-size:10px; top:19px; right:19px; background:#272344; color:white; }
.card .fav { position:absolute; bottom:12px; right:10px; width:32px; height:32px; border-radius:50%; font-size:24px; color:var(--muted); background:var(--panel); }
.card small { padding-right:25px; font-size:11px; }
.card .fav.on { color:#bd3566; }
.filterbar { flex-wrap:wrap; padding:16px 24px 0; }
.filterbar input { flex-basis:240px; }
.catbar { padding-inline:24px; }
.catchip { border-radius:999px; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#11131c; --panel-2:#222637; --line:#2d3246; } }
:root[data-theme="dark"] { --bg:#11131c; --panel-2:#222637; --line:#2d3246; }
:root[data-theme="dark"] body { background:var(--bg); }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) body { background:var(--bg); } }
@media(max-width:900px) { .studio { grid-template-columns:minmax(0,1fr) 320px; } .panel { padding:16px; } }
@media(max-width:760px) { .studio { display:flex; flex-direction:column; padding:0 12px 16px; gap:14px; } .top { padding:10px 12px; margin-bottom:12px; } .stage { border-radius:18px; flex:none; } .stagebar { min-height:52px; padding:8px 10px 0 14px; } .docname span { font-size:17px; } .viewport { padding:18px; } .panel { border-radius:18px; padding:18px; } .sheet header { padding:16px; } .sheet h2 { font-size:21px; } .filterbar { padding:12px 14px 0; } .filterbar input { flex-basis:100%; } .filterbar select { flex:1; min-width:0; } .catbar { padding-inline:14px; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .card { padding:8px; } .card .page-open b { font-size:14px; } .card .pill { top:12px; right:12px; } }
@media(prefers-reduced-motion:reduce) { .card { transition:none; } }
.card img,.card canvas { height:auto; }
.card .fav { top:auto; }
.card .fav { left:auto; }