/* Tilvar panel. Five original themes (gold/cyan "hex" look, blossom, toxic, crimson, silver). No sound, motion respects reduced-motion. */
:root{--r:14px;--font:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
:root,:root[data-theme=hex]{--bg:#010a13;--bg2:#0a1428;--panel:#0b1a2e;--panel2:#10233b;--line:#3a2e14;--line2:#c8aa6e;--fg:#f0e6d2;--mute:#a09b8c;--acc:#0ac8b9;--acc2:#c8aa6e;--on-acc:#031a1a;--ok:#5be3a6;--warn:#f0b840;--bad:#ff6b6b;--glow:rgba(10,200,185,.35);--grad:linear-gradient(135deg,#c8aa6e,#0ac8b9)}
:root[data-theme=blossom]{--bg:#150e27;--bg2:#221640;--panel:#2a1c4d;--panel2:#35245f;--line:#5a3f8f;--line2:#ff9bd5;--fg:#fff0fa;--mute:#c4aee0;--acc:#ff8fd8;--acc2:#8de6ff;--on-acc:#3a0d2e;--ok:#8ff0b8;--warn:#ffd36e;--bad:#ff7a9a;--glow:rgba(255,143,216,.4);--grad:linear-gradient(135deg,#ff8fd8,#8de6ff)}
:root[data-theme=toxic]{--bg:#050d09;--bg2:#0b1a13;--panel:#0f2419;--panel2:#153322;--line:#24583a;--line2:#b6ff3c;--fg:#e9ffe6;--mute:#8fb59b;--acc:#b6ff3c;--acc2:#ff3cf0;--on-acc:#102008;--ok:#6dffa8;--warn:#ffe14d;--bad:#ff5c7a;--glow:rgba(182,255,60,.32);--grad:linear-gradient(135deg,#b6ff3c,#ff3cf0)}
:root[data-theme=crimson]{--bg:#0d0405;--bg2:#1a0709;--panel:#240b0e;--panel2:#331015;--line:#5c1f26;--line2:#e0b46a;--fg:#fbe9e3;--mute:#c29b95;--acc:#ff5252;--acc2:#e0b46a;--on-acc:#2a0507;--ok:#7ae3a0;--warn:#ffc04d;--bad:#ff8a8a;--glow:rgba(255,82,82,.35);--grad:linear-gradient(135deg,#e0b46a,#ff5252)}
:root[data-theme=silver]{--bg:#e9eef7;--bg2:#f6f8fc;--panel:#ffffff;--panel2:#eef2fa;--line:#c9d4e8;--line2:#b48a2c;--fg:#182640;--mute:#5d6b86;--acc:#2a6fdb;--acc2:#b48a2c;--on-acc:#ffffff;--ok:#12874f;--warn:#a86400;--bad:#c62828;--glow:rgba(42,111,219,.25);--grad:linear-gradient(135deg,#b48a2c,#2a6fdb)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--fg);font:15px/1.55 var(--font)}
body{background:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 110%,color-mix(in srgb,var(--acc2) 12%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17zM28 62v35M2 47 0 48M54 47l2 1' fill='none' stroke='%23c8aa6e' stroke-width='1.2'/%3E%3C/svg%3E")}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;position:relative}
aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:18px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--bg2) 96%,transparent));border-right:1px solid var(--line)}
aside::after{content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;background:linear-gradient(180deg,transparent,var(--line2),transparent);opacity:.55}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px}
.mascot{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 12px var(--glow));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-2deg)}}
.wordmark{font-size:24px;font-weight:800;letter-spacing:.6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05}
.tag{font-size:11.5px;color:var(--mute)}
nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
nav button{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--mute);padding:10px 12px;border-radius:10px;cursor:pointer;font:inherit;text-align:left;position:relative;transition:.15s}
nav button .ic{font-size:17px;width:22px;text-align:center}
nav button:hover{background:color-mix(in srgb,var(--panel2) 80%,transparent);color:var(--fg)}
nav button.on{color:var(--fg);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 22%,transparent),transparent);box-shadow:inset 3px 0 0 var(--acc)}
.side-foot{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--mute);border-top:1px solid var(--line);padding-top:12px}
.dots{display:flex;gap:7px}.dots i{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--line)}
.dots i.on{border-color:var(--fg)}
.badge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--panel2);color:var(--mute);border:1px solid var(--line)}
.badge.ok{color:var(--ok)}.badge.bad{color:var(--bad)}
.dev{color:var(--fg);font-weight:600}.dev b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
main{padding:26px clamp(16px,3vw,40px) 60px;max-width:1240px;width:100%}
h2{margin:0 0 16px;font-size:22px;display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent);opacity:.5}
section{display:none;animation:in .25s ease}section.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.card::before,.card::after{content:"";position:absolute;top:-4px;width:8px;height:8px;background:var(--line2);transform:rotate(45deg);opacity:.85}
.card::before{left:14px}.card::after{right:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
label{color:var(--mute);font-size:13px;display:flex;align-items:center;gap:8px}
select,input[type=text],input[type=url],textarea{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;outline:none;transition:.15s}
select:focus,input:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
textarea{width:100%;min-height:200px;resize:vertical}input[type=text],input[type=url]{flex:1;min-width:200px}
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--fg);padding:8px 14px;border-radius:10px;transition:.15s}
.btn:hover{border-color:var(--acc);box-shadow:0 0 14px var(--glow)}
.btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 92%,#fff),var(--acc));color:var(--on-acc);border:0;font-weight:700;padding:10px 22px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.btn.pri:hover{filter:brightness(1.1);box-shadow:none}.btn.pri:disabled{opacity:.5;cursor:wait}
.btn.sm{padding:4px 10px;font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.out{white-space:pre-wrap;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:200px;overflow:auto}
.out.empty{color:var(--mute)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.chip{font-size:12px;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.chip.info{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.small{font-size:12.5px;color:var(--mute)}
.drop{border:2px dashed var(--line2);border-radius:var(--r);padding:44px;text-align:center;color:var(--mute);cursor:pointer;transition:.2s;opacity:.85}
.drop:hover,.drop.hot{border-color:var(--acc);color:var(--fg);background:color-mix(in srgb,var(--acc) 8%,transparent);opacity:1}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}th{color:var(--mute);font-weight:500;font-size:12.5px}
tr.click{cursor:pointer}tr.click:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.bar{height:7px;background:var(--bg2);border-radius:99px;overflow:hidden;min-width:100px}.bar i{display:block;height:100%;background:var(--grad);transition:width .4s}
.st-done{color:var(--ok)}.st-error,.st-cancelled{color:var(--bad)}.st-running{color:var(--acc)}.st-queued{color:var(--mute)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
/* chat */
.chat{display:grid;grid-template-columns:240px 1fr;gap:16px;height:calc(100vh - 150px);min-height:460px}
.threads{overflow:auto;display:flex;flex-direction:column;gap:6px}
.thread{padding:9px 11px;border-radius:10px;cursor:pointer;border:1px solid transparent;background:var(--panel2)}
.thread:hover{border-color:var(--line2)}.thread.on{border-color:var(--acc);box-shadow:0 0 12px var(--glow)}
.thread b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.convo{display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:6px 4px 12px}
.bubble{max-width:78%;padding:10px 14px;border-radius:18px 18px 18px 5px;background:var(--panel2);border:1px solid var(--line);white-space:pre-wrap;position:relative}
.bubble.me{align-self:flex-end;border-radius:18px 18px 5px 18px;background:var(--grad);color:var(--on-acc);border:0;font-weight:500}
.bubble .cp{position:absolute;right:-6px;bottom:-10px;opacity:0}.bubble:hover .cp{opacity:1}
.typing i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--acc);animation:dot 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-5px);opacity:.4}}
.composer{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px}.composer textarea{min-height:52px;max-height:150px}
.empty-state{margin:auto;text-align:center;color:var(--mute);max-width:360px}.empty-state svg{width:96px;height:96px;margin-bottom:8px;animation:bob 4s ease-in-out infinite}
/* history + stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stat span{font-size:12.5px;color:var(--mute)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pill{padding:5px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel2);color:var(--mute);cursor:pointer;font:inherit;font-size:13px}.pill.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}
.h-item{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin-bottom:10px}
.h-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:12.5px;color:var(--mute)}
.kind{padding:1px 9px;border-radius:99px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);font-weight:600}
.h-io{display:grid;grid-template-columns:1fr 1fr;gap:14px}.h-io div{white-space:pre-wrap;overflow:hidden;max-height:5.4em}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--acc);color:var(--on-acc);padding:8px 18px;border-radius:99px;font-weight:600;box-shadow:0 8px 24px var(--glow);z-index:20}
pre{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-size:13px}code{background:var(--bg2);padding:1px 6px;border-radius:6px}
@media(max-width:900px){.app{grid-template-columns:1fr}aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}nav{flex-direction:row;flex:1 1 100%;overflow:auto;order:3}nav button{white-space:nowrap}.side-foot{flex-direction:row;align-items:center;border:0;padding:0}.grid2,.h-io,.seg{grid-template-columns:1fr}.chat{grid-template-columns:1fr;height:auto}.threads{flex-direction:row;overflow:auto}.thread{min-width:150px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- ornament strips (one per theme) + cultural themes: steppe (Turkic/Mongolic), sakura (Japan), dancheong (Korea), manju (Manchu) ---- */
.strip{height:20px;margin:-8px 0 20px;background:var(--strip,none) repeat-x left center;opacity:.9}
.band{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:24px;margin:16px 0}
.band span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.oldturkic{font-family:"Noto Sans Old Turkic","Segoe UI Historic","Segoe UI Symbol",sans-serif}
:root,:root[data-theme=hex]{--strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath d='M14 3l7 7-7 7-7-7z' fill='none' stroke='%23c8aa6e' stroke-width='1.3'/%3E%3Ccircle cx='14' cy='10' r='1.6' fill='%230ac8b9'/%3E%3C/svg%3E")}
:root[data-theme=blossom]{--strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cg fill='%23ff8fd8'%3E%3Ccircle cx='8' cy='10' r='2.6'/%3E%3Ccircle cx='22' cy='10' r='2.6' fill='%238de6ff'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=toxic]{--strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'%3E%3Cpath d='M0 14l7-8 8 8 8-8 7 8' fill='none' stroke='%23b6ff3c' stroke-width='1.6'/%3E%3C/svg%3E")}
:root[data-theme=crimson]{--strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cpath d='M4 5l8 5-8 5M14 5l8 5-8 5' fill='none' stroke='%23e0b46a' stroke-width='1.5'/%3E%3C/svg%3E")}
:root[data-theme=silver]{--strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'%3E%3Cpath d='M12 4l6 6-6 6-6-6z' fill='none' stroke='%23b48a2c' stroke-width='1.2'/%3E%3C/svg%3E")}
/* Steppe: ram's-horn (koç boynuzu) spirals + yurt lattice (kerege) */
:root[data-theme=steppe]{--bg:#091421;--bg2:#0f2036;--panel:#12283f;--panel2:#183350;--line:#2c4a6a;--line2:#d9a441;--fg:#f3ecd9;--mute:#9db1c7;--acc:#3fb6c9;--acc2:#d9a441;--on-acc:#04222a;--ok:#6fe0a8;--warn:#f0b840;--bad:#ff7b6b;--glow:rgba(63,182,201,.35);--grad:linear-gradient(135deg,#d9a441,#3fb6c9);
  --strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='20' viewBox='0 0 44 20'%3E%3Cg fill='none' stroke='%23d9a441' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M22 10c0-6-9-7-10-1-.8 4.5 4.5 6 6 2.5 1-2.5-1.5-4-3-2.5'/%3E%3Cpath d='M22 10c0-6 9-7 10-1 .8 4.5-4.5 6-6 2.5-1-2.5 1.5-4 3-2.5'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=steppe] body::before{background-image:repeating-linear-gradient(45deg,rgba(217,164,65,.6) 0 1px,transparent 1px 34px),repeating-linear-gradient(-45deg,rgba(217,164,65,.6) 0 1px,transparent 1px 34px);opacity:.07}
/* Sakura: seigaiha waves on sumi ink */
:root[data-theme=sakura]{--bg:#150e17;--bg2:#1f1422;--panel:#271a2b;--panel2:#33233a;--line:#5a3a58;--line2:#f6c1d1;--fg:#fff2f6;--mute:#cfaebd;--acc:#f28ab2;--acc2:#9fd8cb;--on-acc:#3a0f22;--ok:#9fe8c0;--warn:#ffd68a;--bad:#ff8fa8;--glow:rgba(242,138,178,.38);--grad:linear-gradient(135deg,#f28ab2,#9fd8cb);
  --strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cg fill='none' stroke='%23f6c1d1' stroke-width='1.2'%3E%3Cpath d='M0 18a13 13 0 0 1 26 0M4 18a9 9 0 0 1 18 0M8 18a5 5 0 0 1 10 0'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme=sakura] body::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 26 20'%3E%3Cg fill='none' stroke='%23f6c1d1' stroke-width='.6'%3E%3Cpath d='M0 18a13 13 0 0 1 26 0M4 18a9 9 0 0 1 18 0M8 18a5 5 0 0 1 10 0'/%3E%3C/g%3E%3C/svg%3E");opacity:.09}
/* Dancheong: the five traditional Korean colours (obangsaek) */
:root[data-theme=dancheong]{--bg:#090d16;--bg2:#101726;--panel:#141d30;--panel2:#1b2740;--line:#2c3a5a;--line2:#f7c800;--fg:#f6f2e6;--mute:#9dabc4;--acc:#f7c800;--acc2:#2e86ff;--on-acc:#231b00;--ok:#5fe3a0;--warn:#ffb84d;--bad:#ff6b6b;--glow:rgba(247,200,0,.32);--grad:linear-gradient(90deg,#0d52bd,#e60012,#f7c800,#f5f5f5);
  --strip:repeating-linear-gradient(90deg,#0d52bd 0 16px,#e60012 16px 32px,#f7c800 32px 48px,#f5f5f5 48px 64px,#222 64px 80px)}
:root[data-theme=dancheong] .strip{height:6px;margin:0 0 24px;background-size:auto;border-radius:3px}
:root[data-theme=dancheong] body::before{background-image:linear-gradient(rgba(247,200,0,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(247,200,0,.5) 1px,transparent 1px);background-size:44px 44px;opacity:.05}
/* Manju: imperial yellow and jade, cloud (ruyi) waves */
:root[data-theme=manju]{--bg:#08181f;--bg2:#0e2530;--panel:#11303d;--panel2:#173d4d;--line:#2c5a6b;--line2:#f2c230;--fg:#fbf3d9;--mute:#a9c1c9;--acc:#f2c230;--acc2:#3fb8a8;--on-acc:#2b2000;--ok:#67e3ad;--warn:#ffcf5a;--bad:#ff7d6e;--glow:rgba(242,194,48,.33);--grad:linear-gradient(135deg,#f2c230,#3fb8a8);
  --strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 32 20'%3E%3Cpath d='M0 14c5 0 5-8 10-8s5 8 10 8 5-8 12-8' fill='none' stroke='%23f2c230' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-theme=manju] body::before{background-image:radial-gradient(circle,rgba(242,194,48,.7) 1px,transparent 1.5px);background-size:26px 26px;opacity:.06}

/* ---- accounts, contribution, login ---- */
.overlay{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.on{display:flex}.login-card{width:min(400px,100%);margin:0}
.col{display:flex;flex-direction:column;gap:10px;margin-top:12px}.col input{width:100%}
input[type=password]{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;outline:none}
input[type=password]:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.err{color:var(--bad);font-size:13px;min-height:1.2em;margin-top:6px}
.btn.coffee{background:linear-gradient(135deg,#ffb84d,#ff7a59);color:#3a1600;border:0;font-weight:700;text-decoration:none;text-align:center}
.btn.coffee:hover{filter:brightness(1.08);box-shadow:0 0 16px rgba(255,140,80,.5)}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.tier-badge{display:inline-block;padding:2px 12px;border-radius:99px;font-weight:700;background:var(--grad);color:var(--on-acc)}
.quota{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden;margin:8px 0}.quota i{display:block;height:100%;background:var(--grad)}
.tier-table th,.tier-table td{text-align:center}.tier-table td:first-child,.tier-table th:first-child{text-align:left}.tier-table .me{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;word-break:break-all}
.guest-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:12px;padding:8px 14px;margin:0 0 16px;font-size:13.5px}

/* ---- workspace: editor, palette, appearance ---- */
.editor .ed-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);border-left:3px solid transparent;padding-left:10px}
.editor .ed-row.ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 5%,transparent)}
.ed-src{white-space:pre-wrap;color:var(--mute)}.ed-tgt textarea{min-height:44px;width:100%}
.ed-tools{display:flex;gap:8px;margin-top:6px}.ed-tm{margin-top:6px;font-size:12.5px}.tm-hit{padding:5px 8px;border-radius:8px;background:var(--bg2);margin-top:4px;border:1px solid var(--line)}.tm-hit b{color:var(--acc)}
@media(max-width:800px){.editor .ed-row{grid-template-columns:1fr}}
.pal-card{width:min(560px,100%);margin:0;padding:10px;align-self:flex-start;margin-top:12vh}.pal-card input{width:100%;font-size:16px}
#pal-list{margin-top:8px;max-height:52vh;overflow:auto}.pal-item{padding:9px 12px;border-radius:9px;cursor:pointer}.pal-item.on,.pal-item:hover{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:10px}
.theme-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer;font:inherit;font-size:12.5px}
.theme-card i{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 2px var(--line)}.theme-card.on{border-color:var(--acc);box-shadow:0 0 14px var(--glow)}
:root[data-theme=contrast]{--bg:#000;--bg2:#0a0a0a;--panel:#000;--panel2:#111;--line:#fff;--line2:#ffff00;--fg:#fff;--mute:#e6e6e6;--acc:#ffff00;--acc2:#00ffff;--on-acc:#000;--ok:#00ff88;--warn:#ffb000;--bad:#ff6b6b;--glow:rgba(255,255,0,.5);--grad:linear-gradient(135deg,#ffff00,#00ffff)}
:root[data-theme=contrast] .card,:root[data-theme=contrast] .btn,:root[data-theme=contrast] select,:root[data-theme=contrast] input,:root[data-theme=contrast] textarea{border-width:2px}
:root[data-font=small]{font-size:13.5px}:root[data-font=large]{font-size:17.5px}
:root[data-density=compact] .card{padding:11px;margin-bottom:10px}:root[data-density=compact] main{padding-top:14px}:root[data-density=compact] nav button{padding:6px 10px}:root[data-density=compact] th,:root[data-density=compact] td{padding:5px 8px}
/* team workspaces */
.ws-switch{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--mute);margin:0 0 10px}.ws-switch select{width:100%}
.who{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--c,var(--acc));color:#fff;font-size:10px;font-weight:700;margin-left:4px;box-shadow:0 0 0 2px var(--panel)}
.ed-online{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--mute)}.ed-here{margin-left:auto;display:inline-flex}.ed-by{align-self:center}
.ed-tools{align-items:center;flex-wrap:wrap}.ed-cm{margin-top:6px}.cm{padding:6px 9px;margin-top:4px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:13px}.cm.done{opacity:.55}
.ed-conflict .cf{margin-top:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);font-size:13px}.cf-theirs{margin:6px 0;padding:6px 8px;border-radius:8px;background:var(--bg2);white-space:pre-wrap}.cf .btn{margin-right:6px}
.editor .ed-row.flash{animation:edflash 1.6s ease-out}@keyframes edflash{0%{background:color-mix(in srgb,var(--acc) 26%,transparent)}100%{background:transparent}}
.act{padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px}.act:last-child{border-bottom:0}