/* ProcAnim UI - dark grey + amber, red-orange reserved for destructive / error states */
:root {
  --bg:#141416; --surface:#1c1c1f; --surface-2:#242428; --surface-3:#2c2c31; --line:#303035; --line-2:#3a3a40;
  --fg:#e9e7e1; --muted:#8e8c86; --faint:#5d5c58;
  --accent:#f2c230; --accent-2:#ffd75c; --accent-dim:rgba(242,194,48,.14); --on-accent:#1a1400;
  --danger:#ff5a3c; --danger-dim:rgba(255,90,60,.14);
  --radius:8px; --radius-s:5px; --font:13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; --mono:12px/1.4 Consolas, "Cascadia Mono", monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:var(--font); overflow:hidden; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:6px 12px; cursor:pointer; transition:background .12s, border-color .12s; }
button:hover { background:#34343a; border-color:#46464d; }
button:active { transform:translateY(1px); }
button:disabled, button:disabled:hover { opacity:.4; cursor:not-allowed; transform:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
button.primary:hover { background:var(--accent-2); border-color:var(--accent-2); }
button.danger { color:var(--danger); border-color:transparent; background:transparent; }
button.danger:hover { background:var(--danger-dim); border-color:transparent; }
button.ghost { background:transparent; border-color:transparent; color:var(--muted); }
button.ghost:hover { background:var(--surface-3); color:var(--fg); }
input[type=number], input[type=text], input[type=email], select, textarea { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:5px 8px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input[type=number] { width:66px; -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
select { cursor:pointer; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background:#34343a; border-radius:6px; border:2px solid var(--surface); } ::-webkit-scrollbar-track { background:transparent; }
kbd { background:var(--surface-3); border:1px solid var(--line-2); border-radius:4px; padding:0 5px; font:var(--mono); }
.spacer { flex:1; }
[hidden] { display:none !important; }

/* ---- layout ---- */
#app { overflow:hidden; display:grid; grid-template-columns:380px 1fr; grid-template-rows:50px 1fr 172px; height:100vh; }
.topbar { grid-column:1 / span 2; display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; margin-right:6px; color:inherit; text-decoration:none; }
.brand .mark { height:32px; width:auto; display:block; }
.brand .name { font-weight:800; letter-spacing:1.5px; font-size:15px; color:var(--accent); }
.brand .sub { color:var(--muted); font-size:12px; }
.chip { background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--muted); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.live { color:var(--accent); border-color:rgba(242,194,48,.35); }
/* animation name + tags in the top bar */
.session { display:flex; align-items:center; gap:8px; min-width:0; }
input.anim-name { width:210px; padding:4px 8px; font-weight:600; font-size:13px; background:transparent; border:1px solid transparent; border-radius:var(--radius-s); color:var(--fg); }
input.anim-name:hover { border-color:var(--line-2); background:var(--surface-2); }
input.anim-name:focus { border-color:var(--accent); background:var(--surface-2); }
input.anim-name::placeholder { color:var(--faint); font-weight:500; }
.tags-edit { display:flex; align-items:center; gap:4px; }
.tags-edit .tag { display:inline-flex; align-items:center; gap:2px; padding:3px 3px 3px 8px; }
.tags-edit .tag button { all:unset; cursor:pointer; color:inherit; opacity:.55; padding:0 4px; font-size:12px; line-height:1; }
.tags-edit .tag button:hover { opacity:1; }
.tags-edit input[type=text] { width:70px; padding:2px 8px; font-size:11px; background:transparent; border:1px dashed var(--line-2); border-radius:999px; color:var(--fg); transition:width .12s; }
.tags-edit input[type=text]:focus { width:100px; border-style:solid; border-color:var(--accent); }
.tags-edit input[type=text]::placeholder { color:var(--faint); }
.btn-group { display:flex; }
.btn-group button { border-radius:0; margin-left:-1px; }
.btn-group button:first-child { border-radius:var(--radius-s) 0 0 var(--radius-s); margin-left:0; }
.btn-group button:last-child { border-radius:0 var(--radius-s) var(--radius-s) 0; }

/* ---- side panel ---- */
.side { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-right:1px solid var(--line); }
.tabs { display:flex; border-bottom:1px solid var(--line); padding:0 8px; }
.tabs button { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:10px 12px; color:var(--muted); font-weight:600; }
.tabs button:hover { color:var(--fg); }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab { display:none; overflow-y:auto; padding:12px; flex:1; min-height:0; }
.tab.active { display:block; }
.tab.help h3 { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:14px 0 4px; }
.tab.help h3:first-child { margin-top:0; }
.tab.help p { margin:0 0 6px; color:#cfcdc7; }
.presets { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.presets .label { color:var(--muted); font-size:12px; margin-right:2px; }
.chip-btn { border-radius:999px; padding:3px 11px; font-size:12px; background:var(--surface-2); }
.chip-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ---- layer cards ---- */
.card { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; overflow:hidden; }
.card.off { opacity:.55; }
.card.solo { border-color:rgba(242,194,48,.5); }
.card.dragging { opacity:.4; }
.card.drop-before { box-shadow:0 -2px 0 var(--accent); }
.card.drop-after { box-shadow:0 2px 0 var(--accent); }
.card-head { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:grab; user-select:none; }
.card-head:active { cursor:grabbing; }
.card-head .grip { color:var(--faint); font-size:14px; letter-spacing:-2px; }
.card-head .title { flex:1; min-width:0; display:flex; flex-direction:column; }
.card-head .title input { background:none; border:none; padding:0; font-weight:600; width:100%; }
.card-head .title input:focus { border-bottom:1px solid var(--accent); }
.card-head .type { font-size:11px; color:var(--muted); }
.card-head .chev { color:var(--muted); transition:transform .15s; font-size:11px; }
.card.open .card-head .chev { transform:rotate(90deg); }
.card-body { display:none; border-top:1px solid var(--line); padding:8px 10px 6px; }
.card.open .card-body { display:block; }
.solo-btn { width:24px; height:22px; padding:0; font-size:11px; font-weight:700; color:var(--muted); background:transparent; border-color:transparent; }
.solo-btn.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.card-foot { display:flex; gap:4px; justify-content:flex-end; padding:6px 0 2px; border-top:1px dashed var(--line); margin-top:8px; }
.card-foot button { padding:4px 9px; font-size:12px; }
.section-title { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:10px 0 4px; }

/* ---- controls ---- */
/* label | slider | value readout | key diamond */
.ctl { display:grid; grid-template-columns:118px 1fr 60px 16px; align-items:center; gap:8px; padding:3px 0; }
.ctl label { color:#c9c7c1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctl input[type=range] { width:100%; margin:0; }
/* The value is a quiet readout: mono, right-aligned, border only on hover / focus. */
.ctl input[type=number] { width:60px; padding:3px 6px; font:var(--mono); text-align:right; background:transparent; border-color:transparent; border-radius:var(--radius-s); }
.ctl input[type=number]:hover { background:var(--surface-3); border-color:var(--line-2); }
.ctl input[type=number]:focus { background:var(--surface); border-color:var(--accent); }
.ctl.wide { grid-template-columns:118px 1fr; }
.ctl select { width:100%; padding:4px 6px; font-size:12px; }
.ctl.weight { grid-template-columns:52px 1fr 60px 16px; }
input[type=range] { -webkit-appearance:none; height:18px; background:transparent; cursor:pointer; --fill:rgba(242,194,48,.5); }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(var(--fill), var(--fill)) 0/var(--p, 0%) 100% no-repeat, var(--line-2); }
/* keyframe diamond: faint = not keyed, amber outline = keyed elsewhere, filled = key at the playhead */
button.key { position:relative; width:16px; height:18px; padding:0; border:none; background:none; }
button.key::before { content:""; position:absolute; left:4px; top:5px; width:7px; height:7px; border:1.5px solid var(--faint); border-radius:1px; transform:rotate(45deg); transition:border-color .1s, background .1s; }
button.key:hover { background:none; } button.key:active { transform:none; }
button.key:focus { outline:none; } button.key:focus-visible { outline:1px solid var(--accent); outline-offset:-2px; border-radius:4px; }
button.key:hover::before, button.key.has::before { border-color:var(--accent); }
button.key.on::before { background:var(--accent); border-color:var(--accent); }
/* key strip under a keyed row, aligned with the slider track */
.keys { display:flex; align-items:center; gap:3px; padding:0 0 5px 126px; }
.ctl.weight + .keys { padding-left:60px; }
.keys canvas { flex:1; min-width:0; height:26px; display:block; border-radius:4px; background:var(--surface); cursor:pointer; }
.keys button { width:20px; height:18px; padding:0; font-size:10px; font-weight:600; line-height:16px; color:var(--muted); background:transparent; border-color:transparent; }
.keys button:hover { color:var(--fg); background:var(--surface-3); }
.keys button.clear:hover { color:var(--danger); background:var(--danger-dim); }
.card-head .badge { font-size:10px; color:var(--accent); background:var(--accent-dim); border-radius:999px; padding:1px 6px; white-space:nowrap; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:var(--fg); border:2px solid var(--surface-2); box-shadow:0 0 0 1px var(--line-2); transition:background .1s; }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { background:var(--accent); }
input[type=range]:focus { outline:none; }
.switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; font-size:12px; color:#c9c7c1; }
.switch input { display:none; }
.switch span { position:relative; width:30px; height:16px; border-radius:8px; background:var(--line-2); transition:background .15s; flex:none; }
.switch span::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--fg); transition:transform .15s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::after { transform:translateX(14px); background:var(--on-accent); }
.switch.big { font-size:13px; padding:6px 0; }
.ctl-switch { padding:4px 0; }
textarea.script { width:100%; font:var(--mono); background:#151517; border:1px solid var(--line-2); border-radius:var(--radius-s); padding:6px; resize:vertical; min-height:96px; }
.hint { font:11px/1.4 var(--mono); color:var(--muted); white-space:pre-wrap; margin:4px 0; }
.bone-row { display:flex; gap:6px; align-items:center; margin:4px 0; }
.row-btns { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0; }
.row-btns button { flex:1; padding:4px 6px; font-size:12px; white-space:nowrap; }
.row-btns.nudges { flex-wrap:nowrap; align-items:center; }
.row-btns.nudges .nl { font-size:11px; color:var(--muted); white-space:nowrap; margin-left:4px; }
.row-btns.nudges button { flex:none; width:30px; padding:3px 0; font-weight:700; }
.bone-row select { flex:1; }
.bone-block { border:1px solid var(--line); border-radius:var(--radius-s); padding:4px 8px; margin:6px 0; }
.bone-block .bone-name { display:flex; align-items:center; font-weight:600; font-size:12px; }
.add-wrap { position:relative; margin-top:6px; }
button.add { width:100%; border-style:dashed; color:var(--muted); background:transparent; padding:9px; }
button.add:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
/* Fixed, not absolute: the tab scrolls, so an absolute menu gets clipped at the panel top. Placed by panel.js. */
.menu { position:fixed; background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:0 12px 30px rgba(0,0,0,.45); padding:6px; z-index:40; max-height:360px; overflow-y:auto; }
.menu button { display:block; width:100%; text-align:left; background:none; border:none; border-radius:var(--radius-s); padding:7px 9px; }
.menu button:hover { background:var(--accent-dim); }
.menu button b { display:block; font-size:13px; }
.menu button small { color:var(--muted); font-size:11px; }
.empty { color:var(--muted); text-align:center; padding:26px 10px; border:1px dashed var(--line); border-radius:var(--radius); margin-bottom:8px; }

/* ---- rig tab ---- */
.info { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:12px; }
.info .kv { display:flex; justify-content:space-between; padding:2px 0; font-size:12px; }
.info .kv span:first-child { color:var(--muted); }
.seg { display:flex; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:2px; }
.seg button { flex:1; background:none; border:none; padding:4px 0; font-size:12px; color:var(--muted); border-radius:4px; }
.seg button.on { background:var(--accent); color:var(--on-accent); font-weight:600; }
.stack { display:flex; flex-direction:column; gap:8px; }

/* ---- viewport ---- */
#viewport { position:relative; min-width:0; min-height:0; }
#viewport canvas { display:block; width:100%; height:100%; }
#hud { position:absolute; left:12px; top:10px; font:var(--mono); color:var(--muted); pointer-events:none; white-space:pre; }
.toast { position:absolute; right:12px; bottom:10px; background:rgba(28,28,31,.92); border:1px solid var(--line-2); border-left:3px solid var(--accent); padding:7px 12px; border-radius:var(--radius-s); max-width:60%; font-size:12px; }
.toast.error { border-left-color:var(--danger); color:#ffb3a6; }
#drop { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:var(--accent-dim); border:2px dashed var(--accent); font-size:18px; color:var(--accent); }
#viewport.dragging #drop { display:flex; }

/* ---- footer ---- */
footer { grid-column:1 / span 2; display:grid; grid-template-columns:1fr 380px; border-top:1px solid var(--line); background:var(--surface); }
#timeline input[type=number] { width:74px; }
#timeline { padding:10px 14px 8px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.transport { display:flex; align-items:center; gap:10px; }
button.icon { width:34px; height:30px; padding:0; font-size:13px; }
button.icon.play { background:var(--accent); border-color:var(--accent); color:var(--on-accent); width:44px; font-size:14px; }
button.icon.play:hover { background:var(--accent-2); }
button.icon.toggle { color:var(--muted); font-size:16px; }
button.icon.toggle.on { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
.time { font:var(--mono); font-size:13px; min-width:130px; }
.field { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.field .unit { color:var(--faint); }
#scrub { width:100%; }
#scrub::-webkit-slider-runnable-track { height:8px; border-radius:4px; background:linear-gradient(var(--accent), var(--accent)) 0/var(--p, 0%) 100% no-repeat, var(--line-2); }
#scrub::-webkit-slider-thumb { width:16px; height:16px; margin-top:-4px; background:var(--accent); border-color:var(--surface); }
.loop-info { font:11px/1.3 var(--mono); color:var(--muted); min-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.loop-info b { color:var(--accent); font-weight:600; }
.loop-info .warn, .loop-info .warn b { color:var(--danger); }
/* key markers above the scrub bar: one tick per key time across all layers */
.scrub-wrap { position:relative; padding-top:7px; }
#keyTicks { position:absolute; left:8px; right:8px; top:0; height:6px; pointer-events:none; }
#keyTicks i { position:absolute; top:0; width:5px; height:5px; margin-left:-2.5px; background:var(--accent); transform:rotate(45deg); border-radius:1px; opacity:.85; }
#graph { border-left:1px solid var(--line); }
#graph canvas { display:block; width:100%; height:100%; }

/* ---- modal ---- */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.dialog { width:420px; max-height:94vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:20px 22px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.dialog h2 { margin:0 0 14px; font-size:16px; }
.dialog .row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--muted); }
.dialog .row input, .dialog .row textarea { flex:1; color:var(--fg); }   /* rows are muted labels; what you type is not */
.dialog .summary { font:var(--mono); color:var(--muted); background:var(--surface-2); border-radius:var(--radius-s); padding:8px 10px; margin:10px 0 14px; white-space:pre-wrap; }
.dialog .actions { display:flex; justify-content:flex-end; gap:8px; }

/* ---- preset gallery ---- */
.gallery-btn { flex:1; display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; background:var(--surface-2); border-color:var(--line-2); }
.gallery-btn:hover { border-color:var(--accent); background:var(--accent-dim); }
.gallery-btn .ico { color:var(--accent); font-size:15px; }
.gallery-btn .sub { margin-left:auto; color:var(--muted); font-size:11px; }
#gallery h2 { min-width:150px; }
.dialog.wide { width:min(880px, 92vw); max-height:86vh; display:flex; flex-direction:column; }
.dialog.small { width:380px; }
.dialog-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dialog-head h2 { margin:0; flex:1; }
.dialog-head input { width:220px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; overflow-y:auto; padding:2px; }
.gcard { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; min-height:120px; transition:border-color .12s, transform .12s; }
.gcard:hover { border-color:var(--accent); transform:translateY(-1px); background:var(--surface-2); }
.gcard b { font-size:13px; }
.gcard p { margin:0; color:var(--muted); font-size:12px; flex:1; }
.gcard .tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag { font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; border-radius:999px; background:var(--surface-3); color:var(--muted); }
.tag.loop { color:var(--accent); background:var(--accent-dim); }
.tag.one-shot { color:#ffb3a6; background:var(--danger-dim); }
.dialog p { color:var(--fg); margin:0 0 16px; }
button.danger-solid { background:var(--danger); border-color:var(--danger); color:#fff; font-weight:600; }
button.danger-solid:hover { filter:brightness(1.1); }

/* ---- community gallery ---- */
.dtabs { display:flex; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-s); padding:2px; }
.dtabs button { background:none; border:none; padding:4px 12px; font-size:12px; color:var(--muted); border-radius:4px; }
.dtabs button.active { background:var(--accent); color:var(--on-accent); font-weight:600; }
.community-pane { display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; }
.ctoolbar { display:flex; align-items:center; gap:10px; }
.ctoolbar select { padding:5px 8px; font-size:12px; }
.ctoolbar .muted { color:var(--muted); font-size:12px; }
.gcard { position:relative; }
.gcard .thumb { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-s); background:var(--surface-3); display:block; }
.gcard .thumb.none { background:linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
/* community cards: the thumbnail is the card; title across the top, details across the bottom */
.dialog.wide.community-mode { width:min(1180px, 95vw); }
#communityGrid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.gcard.community { padding:0; min-height:0; aspect-ratio:1 / 1; overflow:hidden; display:block; border-color:var(--line-2); background:var(--surface-3); }
.gcard.community .thumb { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; transition:transform .3s ease; }
.gcard.community:hover .thumb { transform:scale(1.04); }
.gcard.community:hover { transform:none; }
.gcard.community .top, .gcard.community .bottom { position:absolute; left:0; right:0; padding:10px 12px; }
.gcard.community .top { top:0; padding-bottom:22px; background:linear-gradient(rgba(20,20,22,.88), rgba(20,20,22,0)); }
.gcard.community.own .top { padding-right:40px; }
.gcard.community b { font-size:14px; color:var(--fg); text-shadow:0 1px 3px rgba(0,0,0,.7); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcard.community .bottom { bottom:0; padding-top:34px; display:flex; flex-direction:column; gap:5px; background:linear-gradient(rgba(20,20,22,0), rgba(20,20,22,.92) 40%); }
.gcard.community p { flex:none; color:#dedcd6; font-size:12px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.gcard.community .meta { color:var(--muted); font-size:11px; }
/* star rating row: grey stars with an amber overlay clipped to the average (or the hovered value) */
.stars { display:flex; align-items:center; gap:8px; font-size:15px; line-height:1; position:relative; width:max-content; }
.stars .base { color:rgba(233,231,225,.28); letter-spacing:1px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.stars .fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--accent); letter-spacing:1px; pointer-events:none; transition:width .08s; }
.stars.can .base { cursor:pointer; }
.stars.can:hover .base { color:rgba(233,231,225,.4); }
.stars .rlabel { font-size:11px; color:var(--muted); }
.gcard.community .meta .author { color:var(--accent); font-weight:600; }
.gcard.community .retake-thumb { position:absolute; top:8px; right:40px; width:26px; height:26px; padding:0; font-size:13px; line-height:24px; background:rgba(28,28,31,.85); border-radius:50%; z-index:1; border-color:transparent; }
.gcard.community .retake-thumb:hover { border-color:var(--accent); }
.gcard.community.own .top { padding-right:72px; }
.gcard.community .del { position:absolute; top:8px; right:8px; width:26px; height:26px; padding:0; font-size:15px; line-height:24px; background:rgba(28,28,31,.85); border-radius:50%; z-index:1; }
.dialog.publish { width:480px; }
.thumb-wrap { position:relative; margin-bottom:14px; }
.publish-thumb { width:300px; max-width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; margin:0 auto; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--surface-3); }
.thumb-wrap .retake { position:absolute; right:calc(50% - 150px + 8px); bottom:8px; padding:4px 10px; font-size:12px; color:var(--fg); background:rgba(28,28,31,.85); border-color:var(--line-2); }
.thumb-wrap .retake:hover { border-color:var(--accent); color:var(--accent); }
.field-col { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.field-col input, .field-col textarea { width:100%; color:var(--fg); font-size:13px; }
#publishName { font-size:15px; font-weight:600; padding:8px 10px; }
.field-col textarea { resize:vertical; min-height:64px; }
.publish-foot { display:flex; align-items:center; gap:12px; margin-top:4px; }
.publish-summary { flex:1; font-size:12px; color:var(--muted); line-height:1.5; }
.publish-summary b { color:var(--fg); font-weight:600; }
::placeholder { color:var(--muted); opacity:1; }
.hint.warn { color:var(--danger); white-space:normal; margin:0 0 10px; }
.dialog .or { color:#b8b6b0; font-size:12px; text-align:center; margin:12px 0 8px; }

/* ---- For LLMs tab ---- */
.tab.llm p { margin:0 0 10px; }
.tab.llm .row-btns { margin:6px 0 10px; }
.spec-box { margin:4px 0 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.spec-box summary { cursor:pointer; padding:8px 10px; color:var(--muted); font-size:12px; }
.spec-box[open] summary { border-bottom:1px solid var(--line); color:var(--fg); }
.spec-box pre.spec { margin:0; padding:10px; max-height:320px; overflow:auto; font:11px/1.45 var(--mono); color:#cfcdc7; white-space:pre-wrap; }
.llm-paste { min-height:150px; }
.llm-result { white-space:normal; min-height:16px; }
.llm-result.warn { color:var(--danger); }
.tab.llm .tips { margin:0; padding-left:18px; color:#cfcdc7; }
.tab.llm .tips li { margin-bottom:4px; }

/* ---- Showcase tab ---- */
.tab.showcase p.showcase-intro { margin:0 0 12px; }
.showcase-intro a { color:var(--accent); text-decoration:none; }
.showcase-intro a:hover { text-decoration:underline; }
/* sub-tabs styled like the sidebar tabs (own class: .tabs buttons are bound to the sidebar's tab switching) */
.subtabs { display:flex; border-bottom:1px solid var(--line); margin:0 0 12px; }
.subtabs button { background:none; border:none; border-bottom:2px solid transparent; border-radius:0; margin-bottom:-1px; padding:8px 12px; color:var(--muted); font-weight:600; }
.subtabs button:hover { color:var(--fg); }
.subtabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.showcase-empty { padding:26px 16px; }
.showcase-card { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; }
.showcase-card .embed { display:block; width:100%; border:0; background:var(--surface-3); }
.showcase-card .embed.video { aspect-ratio:16 / 9; }
.showcase-card .embed.steam { height:190px; }
.showcase-card .embed.link img { width:100%; display:block; }
.showcase-card .embed.link span { display:block; padding:8px 10px; font-size:12px; color:var(--accent); }
.showcase-text { padding:10px 12px; }
.showcase-text b { font-size:13px; }
.showcase-text .by { color:var(--muted); font-size:12px; }
.showcase-text p { margin:6px 0 0; color:#cfcdc7; font-size:12px; }