/* ZEXP Board — black & purple theme */
:root {
  --bg: #07060b;
  --canvas: #0b0a10;
  --panel: #14111c;
  --panel-2: #1c1828;
  --panel-3: #262035;
  --border: #2a2438;
  --border-2: #3b3350;
  --text: #ede9fe;
  --muted: #9e95b5;
  --faint: #6b6385;
  --accent: #8b5cf6;
  --accent-2: #a78bfa;
  --accent-hi: #c4b5fd;
  --accent-deep: #5b21b6;
  --pink: #e879f9;
  --danger: #ef4444;
  --ok: #22c55e;
  --shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .03) inset;
  --font: "Segoe UI", "Inter", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
#app { position: fixed; inset: 0; }
::selection { background: rgba(139, 92, 246, .45); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f2843; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.ic { display: block; flex: none; }
kbd { font: 11px/1 var(--font); color: var(--muted); background: var(--panel-3); border: 1px solid var(--border-2); border-radius: 5px; padding: 3px 6px; white-space: nowrap; }
code { font: 12px ui-monospace, Consolas, monospace; color: var(--accent-hi); background: var(--panel-2); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- generic controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); font-weight: 600; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--panel-3); border-color: #4b4166; }
.btn.primary { background: linear-gradient(180deg, #9466ff, #7c3aed); border-color: #8b5cf6; color: #fff; box-shadow: 0 4px 14px rgba(124, 58, 237, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #a07aff, #8b5cf6); }
.btn.danger { color: #fca5a5; border-color: #5b2330; background: #2a1219; }
.btn.ghost { background: transparent; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; color: var(--text); position: relative; }
.icon-btn:hover { background: var(--panel-3); }
.link-btn { border: 0; background: none; color: var(--accent-2); text-decoration: underline; padding: 0 4px; }
.input { width: 100%; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-2); background: #0e0c15; color: var(--text); outline: none; }
textarea.input { height: auto; padding: 9px 12px; resize: vertical; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
.input.sm { height: 30px; width: auto; }
select.input { padding-right: 8px; }
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 5px; }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form h4 { margin: 8px 0 0; font-size: 13px; color: var(--accent-hi); text-transform: uppercase; letter-spacing: .06em; }
.form-row { display: flex; flex-direction: column; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); }
.seg-btn.on { background: rgba(139, 92, 246, .25); border-color: var(--accent); color: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); padding: 0; }
.swatch.on { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.swatch.none { background: linear-gradient(135deg, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%), #0e0c15 !important; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; flex: none; border: 2px solid var(--panel); }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.logo { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: #fff; background: radial-gradient(circle at 30% 25%, #c084fc, #7c3aed 55%, #3b0764); box-shadow: 0 4px 18px rgba(139, 92, 246, .45); }
.logo.sm { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }

/* ---------- popovers / menus / modals ---------- */
.popover { position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; animation: pop .12s ease-out; max-height: calc(100vh - 16px); overflow: auto; }
@keyframes pop { from { opacity: 0; transform: translateY(3px) scale(.98); } }
.fly { display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.fly.list { gap: 1px; min-width: 200px; }
.fly-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 4px 6px 2px; }
.fly-hint { font-size: 12px; color: var(--muted); max-width: 220px; padding: 0 4px; }
.fly-grid { display: grid; gap: 6px; }
.sticky-grid { grid-template-columns: repeat(7, 30px); }
.sticky-swatch { width: 30px; height: 30px; border: 0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.sticky-swatch.on { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.shape-grid { grid-template-columns: repeat(5, 40px); }
.shape-pick { width: 40px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; }
.shape-pick:hover, .shape-pick.on { background: rgba(139, 92, 246, .22); color: var(--accent-hi); }
.color-grid { grid-template-columns: repeat(8, 24px); }
.emoji-grid { grid-template-columns: repeat(8, 34px); }
.emoji-pick { width: 34px; height: 34px; font-size: 20px; border: 0; background: transparent; border-radius: 8px; }
.emoji-pick:hover { background: var(--panel-3); }
.chip-row { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text); font-size: 12px; }
.chip:hover { border-color: var(--border-2); }
.chip.on { border-color: var(--accent); background: rgba(139, 92, 246, .22); color: #fff; }
.width-chip span { display: block; width: 18px; background: currentColor; border-radius: 4px; }
.custom-color { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 0 2px; cursor: pointer; }
.color-input { width: 28px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 8px 10px; border-radius: 7px; }
.menu-item:hover { background: rgba(139, 92, 246, .18); }
.menu-item.on { color: var(--accent-hi); }
.menu-item.danger { color: #fca5a5; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.menu-check { padding: 4px 10px; }
.menu-foot { padding: 6px 10px 2px; }
.ctx-menu { min-width: 220px; display: flex; flex-direction: column; gap: 1px; }
.apps { min-width: 270px; }
.app-item { display: flex; gap: 12px; align-items: center; border: 0; background: transparent; text-align: left; padding: 8px; border-radius: 9px; color: var(--text); }
.app-item:hover { background: rgba(139, 92, 246, .16); }
.app-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2e1065, #4c1d95); color: var(--accent-hi); }
.app-txt { display: flex; flex-direction: column; }
.app-txt small { color: var(--muted); }
.sync-fly { max-width: 300px; }
.sync-fly p { margin: 4px 10px 8px; }
.modal-back { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 4, 10, .72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 480px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(139, 92, 246, .08); animation: pop .15s ease-out; }
.modal.wide { width: 860px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px 22px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 10px 22px 16px; overflow: auto; }
.modal-body p { margin: 4px 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 18px; border-top: 1px solid var(--border); }
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #1d1730; color: var(--text); border: 1px solid #3e2f66; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); animation: pop .15s; transition: opacity .3s, transform .3s; }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- dashboard ---------- */
.mode-dash { overflow: auto !important; }
.dash { min-height: 100%; background: radial-gradient(1200px 600px at 85% -10%, rgba(124, 58, 237, .22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(192, 38, 211, .12), transparent 60%), var(--bg); }
.dash-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 14px 32px; background: rgba(7, 6, 11, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand b { display: block; font-size: 16px; }
.brand small { color: var(--muted); }
.dash-search { max-width: 420px; margin: 0 auto; }
.dash-actions { display: flex; gap: 8px; align-items: center; }
.dash-main { max-width: 1320px; margin: 0 auto; padding: 26px 32px 40px; }
.dash-main h2 { font-size: 17px; margin: 10px 0 14px; }
.tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 30px; }
.new-card { height: 128px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; padding: 14px; text-align: left; transition: transform .12s, border-color .12s, background .12s; }
.new-card:hover { transform: translateY(-2px); border-color: var(--accent); background: #1a1527; }
.new-card small { color: var(--muted); font-size: 12px; }
.new-card .nc-ic { margin-bottom: auto; color: var(--accent-2); }
.new-card.primary { background: linear-gradient(145deg, #7c3aed, #4c1d95 70%, #2e1065); border-color: #8b5cf6; align-items: center; justify-content: center; gap: 8px; color: #fff; box-shadow: 0 10px 30px rgba(124, 58, 237, .35); }
.dash-bar { display: flex; align-items: center; justify-content: space-between; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.board-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; outline: none; }
.board-card:hover, .board-card:focus { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.board-thumb { aspect-ratio: 16 / 10; background: var(--canvas); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.board-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty { color: #3b3350; }
.board-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 10px 14px; }
.board-info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.board-info small { color: var(--muted); font-size: 12px; }
.dash-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 50px 0; display: flex; flex-direction: column; align-items: center; }
.dash-empty div { color: #3b3350; }
.dash-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tpl-card { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); background: var(--panel-2); border-radius: 12px; padding: 8px 8px 12px; text-align: left; color: var(--text); }
.tpl-card:hover { border-color: var(--accent); background: #211b31; }
.tpl-card small { color: var(--muted); font-size: 12px; }
.tpl-canvas { width: 100%; height: auto; border-radius: 8px; margin-bottom: 6px; display: block; }

/* ---------- board chrome ---------- */
.board-view { position: absolute; inset: 0; }
.canvas-host { position: absolute; inset: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.topbar-left { position: absolute; left: 12px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 5px 10px 5px 5px; max-width: calc(100vw - 560px); min-width: 0; }
.logo-btn { border: 0; background: none; padding: 2px; border-radius: 9px; }
.board-name { min-width: 60px; width: 220px; max-width: 32vw; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-weight: 700; font-size: 15px; outline: none; text-overflow: ellipsis; }
.board-name:hover { border-color: var(--border-2); }
.board-name:focus { border-color: var(--accent); background: #0e0c15; }
.save-status { font-size: 12px; color: var(--faint); white-space: nowrap; padding: 0 4px; }
.save-status[data-s=saving] { color: var(--accent-2); }
.save-status[data-s=error] { color: var(--danger); }
.topbar-right { position: absolute; right: 12px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 4px; padding: 5px; }
.tb-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.badge-host .badge, .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--pink); color: #1a0a20; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.sync-pill { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.sync-pill[data-s=online] { color: #86efac; border-color: #1f4d33; background: #0f1f17; }
.sync-pill[data-s=connecting], .sync-pill[data-s=reconnecting] { color: var(--accent-hi); }
.sync-pill[data-s=error] { color: #fca5a5; border-color: #5b2330; }
.avatars { display: flex; margin-left: 4px; }
.avatars .avatar { margin-left: -6px; }
.timer-pill { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--accent); background: rgba(139, 92, 246, .18); color: var(--accent-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.timer-pill.paused { opacity: .7; }
.timer-pill.done { background: rgba(232, 121, 249, .25); border-color: var(--pink); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(232, 121, 249, .15); } }
.toolbar { position: absolute; left: 12px; top: 64px; bottom: 56px; z-index: 20; display: flex; flex-direction: column; justify-content: center; gap: 8px; pointer-events: none; }
.toolbar > * { pointer-events: auto; }
.tb-group { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.tb-btn { width: 42px; height: 42px; border: 0; border-radius: 9px; background: transparent; color: #d8d0f0; display: flex; align-items: center; justify-content: center; position: relative; transition: background .1s, color .1s; }
.tb-btn:hover { background: var(--panel-3); color: #fff; }
.tb-btn.on { background: linear-gradient(180deg, rgba(139, 92, 246, .38), rgba(124, 58, 237, .25)); color: #fff; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .45); }
.tb-flyout-mark { position: absolute; right: 4px; bottom: 4px; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .45; }
.bottom-right { position: absolute; right: 12px; bottom: 12px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.zoombar { display: flex; align-items: center; gap: 2px; padding: 4px; }
.zoom-label { min-width: 54px; height: 30px; border: 0; background: transparent; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 7px; }
.zoom-label:hover { background: var(--panel-3); }
.minimap-wrap { padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.minimap { display: block; border-radius: 8px; cursor: pointer; }
.help-btn { position: absolute; left: 12px; bottom: 12px; z-index: 20; width: 36px; height: 36px; color: var(--muted); font-weight: 800; }
.help-btn:hover { color: #fff; }
.side-panel { position: absolute; right: 12px; top: 66px; bottom: 74px; width: 330px; z-index: 22; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); transform: translateX(calc(100% + 24px)); transition: transform .2s ease; overflow: auto; }
.side-panel.open { transform: none; }
.side-inner { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.side-head { display: flex; align-items: center; justify-content: space-between; }
.side-head h3 { margin: 0; font-size: 15px; }
.side-card { border: 1px solid var(--border); background: var(--panel-2); border-radius: 10px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.side-card:hover { border-color: var(--accent); }
.side-card.resolved { opacity: .55; }
.voting-banner { position: absolute; left: 50%; top: 68px; transform: translate(-50%, -140px); z-index: 21; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 12px; background: linear-gradient(90deg, #4c1d95, #6d28d9); border: 1px solid #8b5cf6; box-shadow: var(--shadow); transition: transform .2s; color: #fff; }
.voting-banner.show { transform: translate(-50%, 0); }
.vb-left { color: #e9d5ff; font-size: 12px; }
.searchbar { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 24; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); color: var(--muted); }
.search-input { width: 260px; height: 30px; border: 0; background: transparent; outline: none; color: var(--text); }
.search-count { font-size: 12px; min-width: 60px; text-align: right; }
.results { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.result-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--border); background: var(--panel-2); border-radius: 8px; padding: 8px 10px; color: var(--text); text-align: left; }
.vote-n { background: var(--pink); color: #1a0a20; font-weight: 800; border-radius: 10px; padding: 1px 8px; }
.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shortcuts h4 { margin: 0 0 8px; color: var(--accent-hi); }
.sc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.comment-pop { width: 300px; }
.c-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow: auto; }
.c-msgs:empty { display: none; }
.c-head { display: flex; align-items: center; gap: 6px; }
.c-head small { color: var(--muted); font-size: 11px; margin-left: auto; }
.c-text { white-space: pre-wrap; word-break: break-word; }
.c-compose { display: flex; gap: 6px; align-items: flex-end; }
.c-tools { display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 8px; }

/* context bar */
.ctxbar { position: absolute; left: 0; top: 0; z-index: 25; display: flex; align-items: center; gap: 1px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow); white-space: nowrap; }
.cb-btn { min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: #ddd6fe; display: inline-flex; align-items: center; justify-content: center; }
.cb-btn:hover { background: var(--panel-3); color: #fff; }
.cb-btn.on { background: rgba(139, 92, 246, .3); color: #fff; }
.cb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.cb-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
.cb-color.fill { border-radius: 5px; }
.cb-color.ring { background: transparent; border-width: 3px; }
.cb-fs { font-weight: 700; font-size: 13px; min-width: 22px; }
.cb-tcolor { font-weight: 800; font-size: 15px; border-bottom: 3px solid; line-height: 1.1; padding: 0 2px; }
.cb-arrow { font-size: 13px; letter-spacing: -2px; min-width: 26px; text-align: center; }
.cb-shape { display: flex; }

/* ---------- canvas ---------- */
.canvas { position: absolute; inset: 0; overflow: hidden; background-color: var(--canvas); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.canvas[data-bg=dots] { background-image: radial-gradient(circle, rgba(167, 139, 250, .2) 1.1px, transparent 1.3px); }
.canvas[data-bg=grid] { background-image: linear-gradient(rgba(167, 139, 250, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .08) 1px, transparent 1px); }
.canvas[data-bg=lines] { background-image: linear-gradient(rgba(167, 139, 250, .09) 1px, transparent 1px); }
.canvas[data-tool=hand], .canvas.panning { cursor: grab; }
.canvas.grabbing, .canvas.grabbing * { cursor: grabbing !important; }
.canvas[data-tool=pen], .canvas[data-tool=highlighter], .canvas[data-tool=connector], .canvas[data-tool=shape], .canvas[data-tool=frame], .canvas[data-tool=text], .canvas[data-tool=sticky], .canvas[data-tool=table], .canvas[data-tool=kanban], .canvas[data-tool=card], .canvas[data-tool=mindmap], .canvas[data-tool=emoji] { cursor: crosshair; }
.canvas[data-tool=eraser] { cursor: cell; }
.canvas[data-tool=comment] { cursor: copy; }
.canvas[data-tool]:not([data-tool=select]) .item, .canvas[data-tool]:not([data-tool=select]) .hit { cursor: inherit !important; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }
.edges { position: absolute; left: 0; top: 0; overflow: visible; z-index: 500000; pointer-events: none; }
.items { position: absolute; left: 0; top: 0; }
.item { position: absolute; color: var(--text); font-family: var(--font); }
.item .txt { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; outline: none; width: 100%; min-height: 1.3em; }
.txt.editing { cursor: text; user-select: text; -webkit-user-select: text; caret-color: var(--accent-2); }
.txt.editing:empty::before { content: 'Type something…'; opacity: .45; }
.t-sticky .sticky-bg { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 22px -6px rgba(0, 0, 0, .55); color: #1a1a2e; }
.sticky-author { position: absolute; left: 10px; bottom: 6px; font-size: 11px; color: rgba(0, 0, 0, .5); }
.t-text .txt { padding: 4px; border-radius: 4px; }
.t-text .txt:empty:not(.editing) { min-height: 1.3em; outline: 1px dashed var(--border-2); }
.t-shape .shape-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.t-shape .shape-text { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 10px 16px; }
.t-frame .frame-body { position: absolute; inset: 0; border-radius: 3px; box-shadow: 0 0 0 1px #2c2540, 0 20px 50px -20px rgba(0, 0, 0, .6); }
.t-frame .frame-title { position: absolute; left: 0; bottom: 100%; transform: scale(var(--inv)); transform-origin: 0 100%; padding: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: move; min-width: 40px; }
.t-frame .frame-title.editing { color: #fff; background: var(--panel-2); padding: 2px 6px; border-radius: 4px; }
.t-image img { width: 100%; height: 100%; display: block; object-fit: fill; user-select: none; -webkit-user-drag: none; border-radius: 2px; }
.t-pen, .t-connector { pointer-events: none; }
.t-pen svg, .t-connector svg { position: absolute; left: 0; top: 0; overflow: visible; }
.hit { pointer-events: stroke; cursor: pointer; }
.conn-label { position: absolute; transform: translate(-50%, -50%); background: var(--canvas); padding: 2px 8px; border-radius: 6px; font-size: 14px; white-space: pre; pointer-events: auto; border: 1px solid var(--border); min-width: 10px; text-align: center; }
.t-mindnode .mind-box { position: absolute; inset: 0; border: 2px solid; border-radius: 10px; display: flex; align-items: center; padding: 8px 14px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.t-mindnode.mind-root .mind-box { border-radius: 14px; padding: 12px 20px; box-shadow: 0 8px 24px -6px rgba(124, 58, 237, .55); }
.mind-collapsed { position: absolute; right: -24px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; color: #0b0a10; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.kb { position: absolute; inset: 0; background: #110e18; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .7); }
.kb-head { position: absolute; left: 16px; top: 12px; right: 16px; height: 30px; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.kb-col { position: absolute; background: #1a1624; border-radius: 10px; }
.kb-col-head { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 3px solid; border-radius: 10px 10px 0 0; font-weight: 700; }
.kb-col-title { outline: none; min-width: 20px; white-space: nowrap; overflow: hidden; }
.kb-count { font-size: 12px; color: var(--muted); background: var(--panel-3); padding: 1px 8px; border-radius: 9px; }
.kb-card { position: absolute; background: #262035; border-radius: 8px; border-left: 4px solid; padding: 10px; font-size: 14px; line-height: 1.32; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: grab; }
.kb-card-text { white-space: pre-wrap; word-break: break-word; outline: none; min-height: 1.3em; }
.kb-ghost { z-index: 5000; pointer-events: none; opacity: .92; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); background: #2e2742; border-radius: 8px; border-left: 4px solid var(--accent); padding: 10px; color: var(--text); font-size: 14px; }
.kb-add { position: absolute; height: 28px; background: transparent; border: 1px dashed #3b3350; color: var(--muted); border-radius: 7px; font-size: 12px; }
.kb-add:hover { color: #fff; border-color: var(--accent); }
.tbl { position: absolute; inset: 0; border: 1px solid; border-radius: 6px; overflow: hidden; }
.tbl-cell { position: absolute; border-right: 1px solid; border-bottom: 1px solid; white-space: pre-wrap; word-break: break-word; overflow: hidden; outline: none; color: var(--text); }
.tbl-cell.head { background: #221c30; font-weight: 700; color: var(--accent-hi); }
.tbl-cell.editing { background: #1f1830; box-shadow: inset 0 0 0 2px var(--accent); }
.card { position: absolute; inset: 0; background: #1c1828; border-radius: 10px; border-left: 6px solid; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.card-title { font-weight: 700; font-size: 16px; line-height: 1.32; white-space: pre-wrap; word-break: break-word; outline: none; }
.card-desc { font-size: 13px; line-height: 1.32; color: var(--muted); white-space: pre-wrap; word-break: break-word; margin-top: 6px; }
.card-tags { display: flex; gap: 4px; height: 26px; align-items: flex-end; overflow: hidden; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 9px; color: #f3e8ff; font-weight: 600; }
.card-meta { display: flex; align-items: center; gap: 8px; height: 28px; margin-top: auto; font-size: 12px; color: var(--muted); }
.card-status { background: var(--panel-3); padding: 2px 8px; border-radius: 9px; }
.card-meta .avatar { margin-left: auto; }
.emoji { width: 100%; height: 100%; text-align: center; user-select: none; }
.item-link { position: absolute; right: 0; top: 0; width: 22px; height: 22px; margin: -11px -11px 0 0; transform: scale(var(--inv)); background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.comments-layer, .votes-layer { position: absolute; left: 0; top: 0; z-index: 2000000000; }
.cpin { position: absolute; width: 30px; height: 30px; transform: translate(0, -100%) scale(var(--inv)); transform-origin: 0 100%; border-radius: 15px 15px 15px 2px; background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); border: 2px solid #0b0a10; }
.cpin.resolved { background: #3b3350; }
.vote-badge { position: absolute; transform: translate(-50%, -50%) scale(var(--inv)); min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #3b3350; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 2px solid #0b0a10; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); pointer-events: none; }
.vote-badge.mine { background: var(--pink); color: #1a0a20; }
.unknown { width: 100%; height: 100%; border: 1px dashed var(--border-2); color: var(--muted); display: flex; align-items: center; justify-content: center; }

/* overlay */
.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.ov-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.guide { stroke: var(--pink); stroke-width: 1; stroke-dasharray: 4 3; }
.ov-box { position: absolute; border: 1.5px solid var(--accent-2); box-shadow: 0 0 0 1px rgba(11, 10, 16, .6); }
.ov-box.multi { border-style: dashed; }
.ov-box.locked { border-color: var(--faint); }
.ov-item-outline { position: absolute; border: 1px solid rgba(167, 139, 250, .55); }
.ov-handle { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #0b0a10; border: 2px solid var(--accent-2); border-radius: 50%; pointer-events: auto; }
.ov-handle:hover { background: var(--accent-2); }
.h-nw, .h-se { cursor: nwse-resize; } .h-ne, .h-sw { cursor: nesw-resize; } .h-n, .h-s { cursor: ns-resize; } .h-e, .h-w { cursor: ew-resize; }
.h-n, .h-s { width: 18px; height: 7px; margin: -3.5px 0 0 -9px; border-radius: 4px; }
.h-e, .h-w { width: 7px; height: 18px; margin: -9px 0 0 -3.5px; border-radius: 4px; }
.ov-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); border: 2px solid #0b0a10; pointer-events: auto; cursor: crosshair; opacity: .9; transition: transform .1s; box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
.ov-dot:hover { transform: scale(1.35); background: var(--accent-hi); }
.ov-endpoint { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #0b0a10; border: 2.5px solid var(--accent-2); pointer-events: auto; cursor: move; }
.ov-endpoint.attached { background: var(--accent-2); }
.ov-label-add { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--accent); color: var(--accent-hi); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: text; }
.ov-mind-add { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.ov-mind-add.sib { background: var(--panel-3); border: 1px solid var(--accent); }
.ov-mind-collapse { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--panel-2); color: var(--accent-hi); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; font-size: 12px; }
.ov-lock { position: absolute; font-size: 14px; }
.ov-size { position: absolute; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.ov-marquee { position: absolute; border: 1px solid var(--accent-2); background: rgba(139, 92, 246, .1); border-radius: 2px; }
.ov-hover { position: absolute; border: 2px solid var(--accent-hi); border-radius: 4px; box-shadow: 0 0 0 4px rgba(196, 181, 253, .15); }
.ov-cursors { position: absolute; inset: 0; }
.ov-cursor { position: absolute; transition: left .08s linear, top .08s linear; }
.ov-cursor-arrow { width: 0; height: 0; border-left: 7px solid var(--c); border-right: 7px solid transparent; border-bottom: 14px solid transparent; transform: rotate(-20deg); transform-origin: 0 0; }
.ov-cursor-name { margin: 2px 0 0 10px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.ov-remote-sel { position: absolute; border: 2px solid; border-radius: 3px; }

/* presentation */
body.presenting .toolbar, body.presenting .topbar-left, body.presenting .topbar-right, body.presenting .bottom-right, body.presenting .help-btn, body.presenting .ctxbar, body.presenting .side-panel, body.presenting .overlay, body.presenting .voting-banner { display: none !important; }
.present-mask { position: absolute; z-index: 30; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(5, 4, 10, .94); border-radius: 2px; }
.present-bar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 31; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: rgba(20, 17, 28, .9); border: 1px solid var(--border); border-radius: 14px; color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .topbar-right .btn span, .topbar-right .icon-btn:nth-child(n+2):nth-child(-n+5) { display: none; }
  .topbar-left { max-width: calc(100vw - 200px); }
  .board-name { width: 120px; }
  .shortcuts { grid-template-columns: 1fr; }
}

/* ---------- accounts / team server ---------- */
.mode-auth { overflow: auto !important; }
.auth-page { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; background: radial-gradient(900px 500px at 80% -10%, rgba(124, 58, 237, .28), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(192, 38, 211, .14), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 26px 26px 22px; }
.auth-brand { margin-bottom: 18px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-btn { height: 40px; justify-content: center; margin-top: 4px; }
.auth-error { background: #2a1219; border: 1px solid #5b2330; color: #fca5a5; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.auth-foot { margin: 0; }
.account-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 18px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); font-weight: 600; }
.account-chip:hover { border-color: var(--accent); }
.account-fly { min-width: 250px; }
.acc-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.acc-head small { display: block; }
.mi-ic { display: inline-flex; margin-right: 8px; color: var(--accent-2); }
.menu-item .mi-label { margin-right: auto; }
.team-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.team-row { display: grid; grid-template-columns: 34px 1fr auto 150px 34px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.team-row.disabled { opacity: .5; }
.team-who { display: flex; flex-direction: column; min-width: 0; }
.team-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-seen { text-align: right; }
.role-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 9px; background: var(--panel-3); color: var(--muted); }
.role-chip.admin { background: rgba(139, 92, 246, .25); color: var(--accent-hi); }
.team-actions { display: flex; justify-content: flex-end; }
.cred-box { background: #0e0c15; border: 1px solid var(--border-2); border-radius: 8px; padding: 12px; font: 13px/1.6 ui-monospace, Consolas, monospace; color: var(--accent-hi); white-space: pre-wrap; user-select: all; margin: 0; }
.server-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.server-box > div { flex: 1; min-width: 0; }
.server-box small { display: block; }
.offline-banner { display: flex; align-items: center; gap: 8px; margin: 12px 32px 0; padding: 10px 14px; border-radius: 10px; background: #2a1d07; border: 1px solid #5c3d0c; color: #fcd34d; font-size: 13px; }
.card-flag { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #fcd34d; background: #2a1d07; border-radius: 6px; padding: 1px 7px; }
.sync-pill[data-s=local] { color: var(--muted); }
.peer-list { display: flex; flex-direction: column; gap: 4px; padding: 2px 10px 6px; }
.peer-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 760px) {
  .dash-head { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .dash-search { order: 3; max-width: none; flex-basis: 100%; }
  .dash-main { padding: 18px 16px 30px; }
  .dash-actions .btn span, .account-chip span:last-child { display: none; }
  .team-row { grid-template-columns: 34px 1fr auto 34px; }
  .team-seen { display: none; }
}

/* ---------- Creator Studio: board widgets ---------- */
.t-studio { border-radius: 18px; }
.st-w { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, #19142a, #120f1c); border: 1px solid #2f2645; color: var(--text); overflow: hidden; font-size: 16px; user-select: none; }
.st-head { display: flex; align-items: center; gap: 10px; flex: none; }
.st-ico { font-size: 28px; }
.st-title { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-right: auto; }
.st-actions { display: flex; gap: 8px; }
.st-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 15px; }
.st-btn.primary { background: linear-gradient(180deg, #9466ff, #7c3aed); border-color: #8b5cf6; color: #fff; }
.st-btn:hover { filter: brightness(1.15); }
.st-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.st-open { position: absolute; right: 16px; bottom: 14px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-2); background: rgba(20, 17, 28, .9); color: var(--accent-hi); font-weight: 700; font-size: 13px; opacity: .85; }
.st-open:hover { opacity: 1; border-color: var(--accent); }
.st-empty { margin: auto; text-align: center; color: var(--muted); font-size: 17px; line-height: 1.5; }
.st-empty-big { font-size: 56px; margin-bottom: 8px; }
.st-more, .st-foot { color: var(--faint); font-size: 14px; text-align: center; }
.st-foot { margin-top: auto; padding-bottom: 34px; }
.st-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); }
.st-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.st-hero { display: flex; gap: 16px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(232, 121, 249, .12)); border: 1px solid #5b3fa0; cursor: pointer; flex: none; }
.st-hero-img { width: 112px; height: 140px; border-radius: 10px; object-fit: cover; flex: none; background: #0e0c15; }
.st-hero-img.ph { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.st-hero-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-hero-title { font-size: 22px; font-weight: 800; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-hero-when { color: var(--accent-hi); font-weight: 600; }
.st-hero-row { display: flex; gap: 8px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.st-count { font-size: 20px; font-weight: 800; color: #fff; }
.st-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #1b1628; border: 1px solid #2a2338; cursor: pointer; }
.st-row:hover { border-color: var(--accent); }
.st-date { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.st-date b { font-size: 22px; }
.st-date span { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.st-row-main { flex: 1; min-width: 0; }
.st-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row-sub { font-size: 13px; color: var(--muted); }
.st-today { font-size: 11px; font-weight: 800; color: #111; background: #fde047; border-radius: 6px; padding: 2px 6px; }
.st-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.st-idea { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #221b33; border: 1px solid #332a4a; cursor: pointer; min-height: 92px; }
.st-idea.pinned { border-color: #f59e0b; background: #2a2116; }
.st-idea:hover { border-color: var(--accent); }
.st-idea-text { font-size: 15px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: pre-wrap; }
.st-idea-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.st-tag { font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 6px; padding: 1px 7px; }
.st-mini { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border-2); background: #120f1c; color: var(--accent-hi); font-size: 12px; font-weight: 700; margin-left: auto; }
.st-mini + .st-mini { margin-left: 0; }
.st-mini.accent { background: rgba(139, 92, 246, .22); border-color: #6d4fc2; }
.st-mini:hover { border-color: var(--accent); }
.st-week { display: flex; flex-direction: column; gap: 8px; }
.st-week-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); font-size: 14px; }
.st-week-n { background: var(--panel-3); border-radius: 8px; padding: 0 7px; font-size: 12px; }
.st-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-thumb { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #0e0c15; border: 1px solid #2a2338; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 12px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dl { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(124, 58, 237, .92); color: #fff; font-size: 16px; font-weight: 800; opacity: 0; transition: opacity .12s; }
.st-thumb:hover .st-dl { opacity: 1; }
.st-src { position: absolute; left: 6px; top: 6px; font-size: 14px; background: rgba(0, 0, 0, .6); border-radius: 6px; padding: 1px 4px; }
.st-sub { color: var(--muted); font-size: 14px; }
.st-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: none; }
.st-kpi { padding: 12px; border-radius: 12px; background: #1b1628; border: 1px solid #2a2338; }
.st-kpi-l { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-kpi-v { font-size: 26px; font-weight: 800; }
.st-kpi-d, .up, .down { font-size: 13px; font-weight: 700; color: var(--faint); }
.up { color: #4ade80 !important; }
.down { color: #fb7185 !important; }
.st-top { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid #2a2338; overflow: hidden; flex: none; }
.st-top-h, .st-top-r { display: grid; grid-template-columns: 1fr 150px 120px; gap: 10px; padding: 8px 12px; align-items: center; }
.st-top-h { background: #1b1628; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.st-top-r { border-top: 1px solid #221c30; font-size: 15px; }
.st-top-t { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.st-top-t img { width: 26px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.st-conv { color: var(--accent-hi); }
.st-new { font-style: normal; font-size: 10px; font-weight: 800; color: #111; background: #4ade80; border-radius: 5px; padding: 1px 5px; margin-left: 6px; }
.st-notes { white-space: pre-wrap; color: var(--muted); font-size: 14px; line-height: 1.45; padding: 12px; border-radius: 12px; background: #15111f; border: 1px dashed #332a4a; overflow: hidden; }
.studio-btn { color: var(--accent-hi); border-color: #5b3fa0; }

/* ---------- Creator Studio: forms ---------- */
.st-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-field { display: block; }
.st-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-slots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.st-slots .chip.best { border-color: #f59e0b; color: #fde68a; }
.st-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.st-seg button { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); font-weight: 600; font-size: 13px; }
.st-seg button.on { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, #8b5cf6) 26%, transparent); color: #fff; }
.st-seg.sm button { height: 30px; }
.st-thumbpick { display: flex; gap: 12px; align-items: center; }
.st-thumbpick img, .st-thumbpick .ph { width: 72px; height: 90px; border-radius: 8px; object-fit: cover; background: #0e0c15; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--faint); }
.st-thumbpick-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.st-drop { display: flex; flex-direction: column; gap: 10px; min-width: min(640px, 82vw); }
.st-drop-row { display: flex; gap: 10px; align-items: center; }
.input.mono { font: 12px/1.45 ui-monospace, Consolas, monospace; }

/* ---------- Creator Studio: Studio view ---------- */
.studio { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: radial-gradient(900px 500px at 100% -10%, rgba(124, 58, 237, .22), transparent 60%), var(--bg); animation: fade .15s; }
.studio-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: rgba(7, 6, 11, .8); backdrop-filter: blur(8px); flex: none; }
.studio-name { font-weight: 800; font-size: 16px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.studio-tabs { display: flex; gap: 4px; padding: 8px 16px 0; flex: none; justify-content: center; }
.studio-tab { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 700; }
.studio-tab.on { color: #fff; border-bottom-color: var(--accent); }
.studio-tab .ico { font-size: 16px; }
.studio-main { flex: 1; overflow: auto; padding: 18px 16px 40px; -webkit-overflow-scrolling: touch; }
.studio-main > * { max-width: 1100px; margin: 0 auto; }
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sv-col { display: flex; flex-direction: column; gap: 16px; }
.sv-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv-card h3 { margin: 0; font-size: 15px; }
.sv-empty { color: var(--muted); padding: 14px 4px; text-align: center; }
.sv-hint { color: var(--faint); font-size: 12px; }
.sv-row-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv-row-btns.between { justify-content: space-between; }
.sv-list { display: flex; flex-direction: column; gap: 8px; }
.sv-group { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 6px; }
.sv-reel { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; }
.sv-reel:hover { border-color: var(--accent); }
.sv-reel.today { border-color: #a16207; background: #211a10; }
.sv-reel.big { background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(232, 121, 249, .1)); border-color: #5b3fa0; }
.sv-reel-img { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; flex: none; background: #0e0c15; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sv-reel.big .sv-reel-img { width: 80px; height: 100px; }
.sv-reel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-reel-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-reel.big .sv-reel-title { font-size: 19px; white-space: normal; }
.sv-reel-sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sv-cd { color: var(--accent-hi); font-weight: 700; }
.sv-status { height: 30px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 16%, #120f1c); color: #fff; font-weight: 700; font-size: 12px; padding: 0 6px; flex: none; }
.sv-idea-row { display: flex; gap: 8px; }
.sv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-chip { max-width: 100%; text-align: left; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--panel-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-tagf { height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border-2); background: var(--panel-2); font-weight: 700; font-size: 12px; color: var(--c, var(--text)); }
.sv-tagf.on { background: color-mix(in srgb, var(--c, #8b5cf6) 26%, transparent); border-color: var(--c, var(--accent)); color: #fff; }
.sv-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sv-idea { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.sv-idea.pinned { border-color: #a16207; }
.sv-idea-text { white-space: pre-wrap; line-height: 1.4; cursor: pointer; }
.sv-idea-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.sv-idea-foot { display: flex; gap: 6px; align-items: center; }
.sv-idea-date { font-size: 11px; color: var(--faint); margin-right: auto; }
.sv-idea-foot .st-mini { margin-left: 0; }
.sv-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sv-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); line-height: 1.1; }
.sv-day span { font-size: 11px; color: var(--muted); }
.sv-day b { font-size: 17px; }
.sv-day i { font-style: normal; font-size: 8px; color: var(--pink); height: 10px; letter-spacing: 1px; }
.sv-day.now { border-color: var(--accent); }
.sv-day.best { background: #251d0e; border-color: #a16207; }
.sv-day.best span::after { content: ' ★'; color: #f59e0b; }
.sv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sv-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sv-thumb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sv-thumb-img { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #0e0c15; border: 1px solid var(--border); }
.sv-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-thumb-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-thumb-btns { display: flex; gap: 4px; }
.sv-thumb-btns .st-mini { margin-left: 0; }
.sv-thumb.small .sv-thumb-btns { position: relative; margin-top: -40px; padding: 0 6px 6px; justify-content: flex-end; }
.sv-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sv-kpis.compact { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.sv-kpi { padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.sv-kpi .l { font-size: 12px; color: var(--muted); font-weight: 600; }
.sv-kpi .v { font-size: 24px; font-weight: 800; }
.sv-kpi .d { font-size: 12px; font-weight: 700; color: var(--faint); }
.sv-cmp { display: flex; align-items: center; gap: 8px; color: var(--muted); flex-wrap: wrap; }
.sv-table { display: flex; flex-direction: column; overflow-x: auto; }
.sv-tr { display: grid; grid-template-columns: 44px minmax(180px, 1fr) repeat(6, 82px) 96px; gap: 8px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--border); min-width: 820px; }
.sv-tr.head { border-top: none; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sv-tr.new { background: rgba(74, 222, 128, .05); }
.sv-tr .num { text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; }
.sv-tr .num small { font-size: 11px; }
.sv-tr .conv { color: var(--accent-hi); font-weight: 700; }
.sv-post { display: flex; flex-direction: column; min-width: 0; }
.sv-post b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-post small { color: var(--faint); font-size: 11px; }
.sv-post .st-new { align-self: flex-start; margin: 2px 0 0; }
.sv-cover { width: 40px; height: 50px; border-radius: 6px; border: 1px dashed var(--border-2); background: #0e0c15; color: var(--faint); padding: 0; overflow: hidden; font-size: 18px; }
.sv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-cover:hover { border-color: var(--accent); color: var(--accent-hi); }
.sv-bars { display: flex; flex-direction: column; gap: 8px; }
.sv-bar { display: grid; grid-template-columns: minmax(90px, 200px) 1fr 80px; gap: 10px; align-items: center; font-size: 13px; }
.sv-bar .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-bar .b { height: 10px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.sv-bar .b i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #7c3aed, #e879f9); }
.sv-bar .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.sv-facts div { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.sv-facts span { font-size: 11px; color: var(--muted); }
.sv-notes { white-space: pre-wrap; line-height: 1.5; color: var(--text); }
.reminder-toast { position: fixed; right: 18px; top: 70px; z-index: 3100; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #2b1a4f, #1a1328); border: 1px solid #8b5cf6; box-shadow: var(--shadow); animation: pop .2s; }
.reminder-toast > span { color: var(--muted); font-size: 13px; }
.reminder-toast > div { display: flex; gap: 8px; margin-top: 4px; }
.next-reel-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(90deg, rgba(124, 58, 237, .28), rgba(232, 121, 249, .1)); border: 1px solid #5b3fa0; }
.next-reel-banner b { margin-right: 4px; }
.next-reel-banner span:nth-child(3) { color: var(--accent-hi); margin-right: auto; }
.mode-board.studio-open .topbar-left, .mode-board.studio-open .topbar-right, .mode-board.studio-open .toolbar, .mode-board.studio-open .bottom-right, .mode-board.studio-open .help-btn, .mode-board.studio-open .ctxbar { visibility: hidden; }
@media (max-width: 760px) {
  .studio-top { padding: 8px 10px; gap: 8px; }
  .studio-name { font-size: 14px; }
  .studio-notif { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: block; }
  .studio-tabs { order: 3; justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--border); background: rgba(12, 10, 18, .96); gap: 0; }
  .studio-tab { flex-direction: column; gap: 1px; height: 56px; padding: 0 6px; font-size: 11px; border-bottom: none; border-top: 2px solid transparent; flex: 1; justify-content: center; }
  .studio-tab.on { border-top-color: var(--accent); }
  .studio-tab .ico { font-size: 20px; }
  .studio-main { padding: 12px 10px 24px; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-days { grid-template-columns: repeat(7, minmax(38px, 1fr)); overflow-x: auto; }
  .sv-thumbs { grid-template-columns: repeat(2, 1fr); }
  .sv-ideas { grid-template-columns: 1fr; }
  .st-2col { grid-template-columns: 1fr; }
  .st-form, .st-drop { min-width: 0; }
  .sv-tr { grid-template-columns: 44px 1fr 1fr 1fr; min-width: 0; row-gap: 4px; }
  .sv-tr.head { display: none; }
  .sv-tr .sv-post { grid-column: 2 / -1; }
  .sv-tr .num { align-items: flex-start; text-align: left; font-size: 13px; }
  .sv-tr .num::before { content: attr(data-l); font-size: 10px; color: var(--faint); text-transform: uppercase; }
  .sv-tr .sv-cover { grid-row: span 4; align-self: start; }
  .sv-bar { grid-template-columns: 110px 1fr 64px; }
  .modal { max-width: calc(100vw - 16px); }
}

/* ---------- ideas: Not done / Done + reviews ---------- */
.st-icols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; min-height: 0; flex: 1; }
.st-icol { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.st-icol-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st-icol-h b { background: var(--panel-3); color: var(--text); border-radius: 8px; padding: 0 7px; font-size: 12px; }
.st-icol-h .rv-badge { margin-left: auto; }
.st-icol .st-idea { min-height: 0; }
.st-icol .st-idea .st-mini { margin-left: auto; }
.st-icol.done { padding-left: 12px; border-left: 1px dashed #332a4a; }
.st-drow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: #1b1628; border: 1px solid #2a2338; cursor: pointer; }
.st-drow:hover { border-color: var(--accent); }
.st-drow-v { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; background: color-mix(in srgb, var(--c, #6b7280) 22%, transparent); }
.st-drow-t { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-drow-s { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.st-drow-s.due { color: #fbbf24; }
.rv-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 800; font-style: normal; color: #fff; background: color-mix(in srgb, var(--c, #8b5cf6) 30%, transparent); border: 1px solid color-mix(in srgb, var(--c, #8b5cf6) 60%, transparent); white-space: nowrap; }
.rv-badge.due { --c: #f59e0b; color: #fde68a; cursor: pointer; }
.rv-badge.wait { --c: #475569; color: var(--muted); }
.sv-idea-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sv-idea-col { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(20, 17, 28, .6); border: 1px solid var(--border); min-height: 200px; transition: border-color .12s, background .12s; }
.sv-idea-col.over { border-color: var(--accent); background: rgba(139, 92, 246, .1); }
.sv-idea-col[data-col=done] { background: rgba(16, 24, 20, .45); }
.sv-idea-col header { display: flex; align-items: center; gap: 8px; }
.sv-idea-col h3 { margin: 0; font-size: 15px; }
.sv-count { background: var(--panel-3); border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.sv-idea-col header .rv-badge { margin-left: auto; }
.sv-idea-col-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sv-idea[draggable=true] { cursor: grab; }
.sv-idea.dragging { opacity: .4; }
.sv-idea.done { background: #15121e; }
.sv-idea.rs-due { border-color: #a16207; }
.sv-idea-reel { align-self: flex-start; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid #155e75; background: rgba(34, 211, 238, .1); color: #a5f3fc; font-size: 12px; font-weight: 700; }
.sv-idea-review { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rv-line { font-size: 12px; color: var(--accent-hi); }
.rv-note { font-size: 12px; color: var(--muted); white-space: pre-wrap; border-left: 2px solid #3b3350; padding-left: 8px; }
.sv-due { display: flex; flex-direction: column; gap: 6px; }
.sv-due-row { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid #a16207; background: #211a10; }
.sv-due-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-due-row b { color: #fde68a; font-size: 12px; white-space: nowrap; }
.rv-idea { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.rv-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rv-verdicts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--border-2); background: var(--panel-2); }
.rv-verdicts button .e { font-size: 26px; }
.rv-verdicts button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 24%, transparent); }
.rv-nums { display: flex; flex-direction: column; gap: 8px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.rv-grid div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); }
.rv-grid div span { font-size: 11px; color: var(--muted); }
.rv-grid div b { font-size: 17px; }
.rv-grid div.accent { border-color: #5b3fa0; }
.rv-grid div.accent b { color: var(--accent-hi); }
.rv-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rv-pick select { flex: 1; min-width: 0; width: auto; }
.rv-again { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rv-again input { width: 18px; height: 18px; accent-color: var(--accent); }
.rv-again b { color: var(--text); }
@media (max-width: 760px) {
  .sv-idea-cols { grid-template-columns: 1fr; }
  .sv-idea-col-body { grid-template-columns: 1fr; }
}

/* ---------- dashboard: create menu on the left, boards on the right ---------- */
.dash-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.dash-side { position: sticky; top: 65px; height: calc(100vh - 65px); display: flex; flex-direction: column; gap: 10px; padding: 22px 14px 14px 24px; border-right: 1px solid var(--border); }
.dash-side h2 { font-size: 15px; margin: 0 0 2px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.side-new { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid #8b5cf6; background: linear-gradient(145deg, #7c3aed, #4c1d95); color: #fff; font-size: 15px; box-shadow: 0 8px 24px rgba(124, 58, 237, .35); flex: none; }
.side-new:hover { filter: brightness(1.1); }
.side-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 6px; margin-right: -6px; }
.side-tpl { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; border: 1px solid transparent; background: transparent; text-align: left; color: var(--text); flex: none; }
.side-tpl:hover { background: var(--panel); border-color: var(--border-2); }
.side-tpl .nc-ic { width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent-2); }
.side-tpl-txt { display: flex; flex-direction: column; min-width: 0; }
.side-tpl-txt b { font-size: 13px; }
.side-tpl-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); flex: none; }
.side-foot .btn { justify-content: flex-start; }
.dash-body .dash-main { max-width: none; margin: 0; min-width: 0; }
.board-card.pinned { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; border-color: #6d4fc2; box-shadow: 0 0 0 1px rgba(139, 92, 246, .25), 0 18px 44px rgba(0, 0, 0, .45); }
.board-card.pinned .board-thumb { flex: 1; aspect-ratio: auto; min-height: 0; position: relative; }
.board-card.pinned .board-info b { font-size: 17px; max-width: 420px; }
.board-thumb { position: relative; }
.pin-flag { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 9px; background: rgba(20, 17, 28, .85); border: 1px solid #6d4fc2; font-size: 12px; font-weight: 700; }
@media (max-width: 760px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); }
  .dash-side { min-width: 0; position: static; height: auto; padding: 14px 16px 6px; border-right: none; border-bottom: 1px solid var(--border); }
  .side-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; margin-right: 0; }
  .side-tpl { width: 210px; background: var(--panel); border-color: var(--border); }
  .side-foot { flex-direction: row; }
  .board-card.pinned { grid-column: auto; grid-row: auto; }
  .board-card.pinned .board-thumb { aspect-ratio: 1 / 1; }
}

.sv-idea-tags .sv-idea-date { margin-left: auto; margin-right: 0; white-space: nowrap; }
.sv-idea-foot { justify-content: flex-end; flex-wrap: wrap; }
.st-mini { white-space: nowrap; }
.board-card.pinned .board-thumb img { object-fit: contain; }
.modal.wide:has(> .modal-body > .st-form) { width: 600px; }
.st-icol > * { flex-shrink: 0; }
.st-icol .st-idea { padding: 10px 12px; gap: 6px; }
.st-icol .st-idea-text { -webkit-line-clamp: 2; }
.sv-inbox { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: #12101c; border: 1px dashed #3b3350; font-size: 12px; color: var(--muted); }
.sv-inbox > span:nth-child(2) { flex: 1; min-width: 200px; }
.sv-ig .sv-hint.err { color: #fca5a5; }
.sv-ig-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-ig-user { font-size: 18px; font-weight: 800; color: var(--pink); }
.sv-ig-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.sv-ig-auto input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.sv-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; }
.sv-steps b { color: var(--text); }
.sv-steps a { color: var(--accent-hi); }
.sv-copy { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sv-copy code { flex: 1; min-width: 0; }
.sv-post-link { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; } .sv-post-link:hover b { text-decoration: underline; color: var(--accent-hi); }

/* ---------- Studio chat ---------- */
.sv-chat { min-height: 100%; }
.sv-chat-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.sv-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 30px 10px; }
.sv-chat-empty .sv-chips { justify-content: center; margin-top: 8px; }
.sv-chat-empty .sv-chip { white-space: normal; }
.sv-msg { max-width: min(720px, 88%); padding: 10px 14px; border-radius: 14px; line-height: 1.5; font-size: 14px; }
.sv-msg.user { align-self: flex-end; background: linear-gradient(145deg, #6d28d9, #4c1d95); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.sv-msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sv-msg.err { border-color: #5b2330; color: #fca5a5; }
.sv-md p { margin: 0; min-height: .6em; }
.sv-md .li { padding-left: 14px; position: relative; }
.sv-md .li::before { content: '•'; position: absolute; left: 2px; color: var(--accent-2); }
.sv-msg.typing { display: flex; gap: 5px; padding: 14px 16px; }
.sv-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: blink 1.2s infinite; }
.sv-msg.typing span:nth-child(2) { animation-delay: .2s; } .sv-msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.sv-props { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.sv-prop { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.sv-prop .t { flex: 1; min-width: 0; font-size: 13px; }
.sv-prop .ok { font-size: 12px; font-weight: 700; color: #4ade80; white-space: nowrap; }
.sv-prop.done { opacity: .7; }
.sv-chat-bar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 4px; background: linear-gradient(transparent, var(--bg) 30%); }
.sv-chat-in { resize: none; min-height: 42px; max-height: 160px; height: 42px; line-height: 1.4; }
.st-more-fields { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.st-more-fields summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent-hi); }
.st-more-fields[open] { display: flex; flex-direction: column; gap: 12px; }
.st-lblrow { display: flex; align-items: center; justify-content: space-between; }
.sv-chat-admin { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); padding-bottom: 6px; } .sv-chat-admin select { max-width: 280px; }

/* ---------- back to content / share / invite ---------- */
.back-content { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 22; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 14px; border-radius: 21px; border: 1px solid #8b5cf6; background: linear-gradient(180deg, #2b1a4f, #1d1430); color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 4px rgba(139, 92, 246, .15); animation: pop .18s; }
.back-content:hover { background: linear-gradient(180deg, #3b2468, #24183c); }
.bc-arrow { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: #7c3aed; font-size: 13px; transition: transform .15s; }
.share-btn { color: #c4b5fd; border-color: #5b3fa0; }
.share { display: flex; flex-direction: column; gap: 14px; }
.share p { margin: 0; }
.share-make { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); }
.share-link { display: flex; gap: 8px; }
.share-link .input { flex: 1; font: 12px ui-monospace, Consolas, monospace; }
.share-new:empty { display: none; }
.share-new { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #1b1530; border: 1px solid #5b3fa0; }
.share-lists { display: flex; flex-direction: column; gap: 8px; }
.share-lists h4 { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; }
.share-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-text { color: #fca5a5 !important; }
.invite-head { font-size: 16px; line-height: 1.5; }
.role-chip.guest { background: rgba(34, 211, 238, .15); color: #a5f3fc; }
@media (max-width: 760px) { .share-btn { padding: 0 10px; } .back-content { bottom: 70px; } }