/* ==========================================================================
   Spectra Studio — design system
   Neutral greys (equal R=G=B) so the interface never biases colour judgement.
   Accent (amber) marks state and focus; blue marks selection.
   ========================================================================== */

@font-face { font-family: 'Inter'; src: url('../fonts/Inter-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-var.woff2') format('woff2'); font-weight: 400 500; font-display: swap; }

:root {
  /* surfaces */
  --bg-0: #0b0b0b;      /* app background / gutters */
  --bg-1: #141414;      /* panels */
  --bg-2: #191919;      /* panel headers, raised strips */
  --bg-3: #202020;      /* controls, cards */
  --bg-4: #282828;      /* hover */
  --bg-5: #313131;      /* active / pressed */
  --line: #232323;
  --line-2: #2e2e2e;
  --line-3: #3a3a3a;
  /* text */
  --text: #ececec;
  --text-2: #a6a6a6;
  --text-3: #6f6f6f;
  --text-4: #4d4d4d;
  /* brand / state */
  --accent: #f2a93b;
  --accent-hi: #ffc061;
  --accent-bg: rgba(242, 169, 59, .12);
  --accent-line: rgba(242, 169, 59, .55);
  --sel: #4c9bff;
  --sel-bg: rgba(76, 155, 255, .14);
  --green: #46c77a; --red: #f05d55; --yellow: #f2c94c; --violet: #9b7bff;
  --video: #3d6f9e; --image: #7a62b8; --audio: #3c8a5c;
  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-xs: 10.5px; --fs-sm: 11.5px; --fs: 12.5px; --fs-md: 13.5px; --fs-lg: 16px; --fs-xl: 22px;
  /* geometry */
  --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-xl: 14px;
  --gap: 4px;
  --h-ctl: 28px; --h-ctl-sm: 24px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg-0); color: var(--text); font: 400 var(--fs)/1.4 var(--font); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
.ico { flex: none; display: block; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.spacer { flex: 1; }
.sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; flex: none; }
.hidden { display: none !important; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mono, .tc { font-family: var(--mono); font-variant-numeric: tabular-nums; }
::selection { background: rgba(76, 155, 255, .35); }

/* ---------- buttons ---------- */
button { font: 500 var(--fs-sm)/1 var(--font); color: var(--text); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r); height: var(--h-ctl-sm); padding: 0 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
button:hover { background: var(--bg-4); border-color: var(--line-3); }
button:active { background: var(--bg-5); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
button:disabled { opacity: .4; cursor: default; pointer-events: none; }
button.primary { background: var(--accent); background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .06)); border-color: var(--accent); color: #16110a; font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset; }
button.primary:hover { background-color: var(--accent-hi); }
button.danger:hover { border-color: rgba(240, 93, 85, .6); color: #ff8a83; background: rgba(240, 93, 85, .08); }
button.toggle.on, button.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-hi); }
.ibtn { width: var(--h-ctl-sm); padding: 0; background: transparent; border-color: transparent; color: var(--text-2); }
.ibtn:hover { background: var(--bg-4); border-color: transparent; color: var(--text); }
.ibtn.on { border-color: transparent; }
.btn-group { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-0); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); }
.btn-group .ibtn { height: 22px; width: 24px; }
kbd { font: 500 10px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: var(--bg-0); border: 1px solid var(--line-2); border-bottom-width: 2px; color: var(--text-2); }

/* ---------- inputs ---------- */
input, select, textarea { font: 400 var(--fs)/1.2 var(--font); color: var(--text); background: var(--bg-0); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; height: var(--h-ctl-sm); outline: none; min-width: 0; transition: border-color .12s, background .12s; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-line); background: #0e0e0e; }
select { padding-right: 24px; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; }
select.compact { height: 22px; font-size: var(--fs-xs); padding: 0 22px 0 8px; }
textarea { resize: vertical; width: 100%; min-height: 64px; padding: 7px 9px; line-height: 1.45; user-select: text; }
input:not([type=range]):not([type=checkbox]) { user-select: text; }
input[type=number] { font-family: var(--mono); }
input[type=checkbox] { appearance: none; width: 15px; height: 15px; padding: 0; border-radius: 4px; border: 1px solid var(--line-3); background: var(--bg-0); display: inline-grid; place-content: center; cursor: pointer; flex: none; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after { content: ''; width: 8px; height: 5px; border: 2px solid #1a1205; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.search-field { position: relative; flex: 1; min-width: 0; display: flex; }
.search-field .ico { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-field input { flex: 1; padding-left: 28px; }

/* range: thin track, value fill via --fill-a / --fill-b (set from JS) */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; height: 16px; cursor: pointer; width: 100%; --fill-a: 0%; --fill-b: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--line-3) var(--fill-a), var(--accent) var(--fill-a), var(--accent) var(--fill-b), var(--line-3) var(--fill-b)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #e9e9e9; margin-top: -4.5px; border: 0; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); transition: transform .1s; }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); background: #fff; }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-line); }
input[type=range]::-moz-range-track { height: 3px; background: var(--line-3); border-radius: 3px; }
input[type=range]::-moz-range-progress { height: 3px; background: var(--accent); border-radius: 3px; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #e9e9e9; border: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #3d3d3d; }
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   Top bar
   ========================================================================== */
#topbar { position: relative; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 8px; background: linear-gradient(#141414, #101010); border-bottom: 1px solid var(--line); z-index: 20; }
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.app-menu-btn { height: 30px; padding: 0 8px 0 5px; gap: 8px; background: transparent; border-color: transparent; font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.app-menu-btn:hover, .app-menu-btn.open { background: var(--bg-4); }
.app-logo { width: 22px; height: 22px; border-radius: 6px; }
.app-menu-btn .caret { color: var(--text-3); }
.proj-wrap { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line-2); min-width: 0; }
.proj-name { background: transparent; border-color: transparent; width: 230px; font-weight: 500; color: var(--text-2); height: 28px; }
.proj-name:hover { color: var(--text); background: var(--bg-2); border-color: transparent; }
.proj-name:focus { color: var(--text); }
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; margin-left: 2px; transition: background .2s; }
.save-dot.dirty { background: var(--accent); }
#wsTabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; background: var(--bg-0); padding: 3px; border-radius: 10px; border: 1px solid var(--line); }
#wsTabs button { height: 30px; border: 0; background: transparent; padding: 0 14px 0 11px; color: var(--text-3); border-radius: 7px; font-size: var(--fs); font-weight: 500; gap: 7px; }
#wsTabs button:hover { color: var(--text); background: var(--bg-3); }
#wsTabs button.active { background: var(--bg-4); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 1px 3px rgba(0, 0, 0, .5); }
#wsTabs button.active .ico { color: var(--accent); }
.top-actions { display: flex; gap: 2px; align-items: center; flex: 1; justify-content: flex-end; }
.top-actions .ibtn { width: 30px; height: 30px; }
.cmd-search { height: 30px; min-width: 210px; justify-content: flex-start; padding: 0 6px 0 10px; background: var(--bg-0); border-color: var(--line-2); color: var(--text-3); font-weight: 400; }
.cmd-search span { flex: 1; text-align: left; }
.cmd-search:hover { color: var(--text-2); background: var(--bg-2); }
.avatar { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, #3a3a3a, #262626); border-color: var(--line-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text); }

/* desktop builds: draggable title area + space for native window controls */
body.desktop #topbar { -webkit-app-region: drag; padding-right: 146px; }
body.desktop #topbar button, body.desktop #topbar input, body.desktop #topbar .menu { -webkit-app-region: no-drag; }
body.desktop.os-darwin #topbar { padding-right: 10px; padding-left: 78px; }

/* ==========================================================================
   Menus, tooltips, toasts, modal
   ========================================================================== */
.menu { position: fixed; z-index: 150; width: max-content; min-width: 240px; max-width: 360px; padding: 5px; background: rgba(28, 28, 28, .97); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--r-lg); box-shadow: 0 16px 44px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4); animation: pop .12s var(--ease); }
#appMenu { position: absolute; top: 40px; left: 8px; }
.menu button { display: flex; width: 100%; height: 30px; justify-content: flex-start; background: transparent; border: 0; border-radius: 6px; padding: 0 6px 0 9px; gap: 10px; font-weight: 450; font-size: var(--fs); color: var(--text); transition: none; }
.menu button > span:not(.kc):not(.mb-check):not(.mb-arrow) { flex: 1; text-align: left; white-space: nowrap; }
.menu button .ico { color: var(--text-3); }
.menu button:hover, .menu button.kb { background: rgba(255, 255, 255, .075); color: #fff; }
.menu button:hover .ico, .menu button.kb .ico { color: var(--accent); }
.menu button:active { background: rgba(255, 255, 255, .11); }
.menu button.danger-item, .menu button.danger-item .ico { color: #ff8a83; }
.menu button.danger-item:hover { background: rgba(240, 93, 85, .14); }
.menu button:disabled { opacity: .38; }
.menu-sep { height: 1px; background: rgba(255, 255, 255, .07); margin: 5px 8px; }
.menu-label { padding: 7px 9px 4px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* keyboard shortcut key caps: [Ctrl][Shift][S] */
.kc { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding-left: 20px; flex: none; }
.kc kbd { min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; font: 500 10px/1 var(--font); letter-spacing: .02em; color: var(--text-3); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-bottom-color: rgba(255, 255, 255, .04); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); border-radius: 4px; }
.menu button:hover .kc kbd, .menu button.kb .kc kbd { color: var(--text-2); border-color: rgba(255, 255, 255, .14); }
@keyframes pop { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }

#tooltip { position: fixed; z-index: 300; pointer-events: none; padding: 5px 8px; border-radius: 6px; background: #f0f0f0; color: #141414; font-size: var(--fs-sm); font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(2px); transition: opacity .1s, transform .1s; display: flex; align-items: center; gap: 8px; max-width: 320px; }
#tooltip.show { opacity: 1; transform: none; }
#tooltip .kc { padding-left: 2px; }
#tooltip .kc kbd { background: #e2e2e2; border-color: #c9c9c9; color: #3a3a3a; box-shadow: 0 1px 0 #bdbdbd; }

#toast { position: fixed; right: 14px; bottom: 36px; z-index: 250; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 460px; padding: 10px 12px 10px 11px; border-radius: var(--r-lg); background: rgba(34, 34, 34, .97); backdrop-filter: blur(12px); box-shadow: var(--shadow-pop); font-size: var(--fs); line-height: 1.4; animation: toastIn .22s var(--ease); border-left: 3px solid var(--sel); }
.toast.success { border-left-color: var(--green); } .toast.success .ico { color: var(--green); }
.toast.warn { border-left-color: var(--accent); } .toast.warn .ico { color: var(--accent); }
.toast.error { border-left-color: var(--red); } .toast.error .ico { color: var(--red); }
.toast .ico { color: var(--sel); }
.toast.out { animation: toastOut .2s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(16px); } }

#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 200; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal-box { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 20px 22px; min-width: 400px; max-width: min(780px, 92vw); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-pop); animation: pop .16s var(--ease); }
.modal-box h3 { margin: 0 0 14px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.modal-box .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-box .actions button { height: 30px; padding: 0 14px; }
.modal-box input, .modal-box textarea { width: 100%; }
.modal-box input { height: 32px; }
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.keys div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.keys kbd { color: var(--text); white-space: nowrap; }
.keys h4 { grid-column: 1 / -1; margin: 16px 0 4px; color: var(--accent); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.keys h4:first-child { margin-top: 0; }

/* command palette */
.palette { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, .45); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: fade .12s; }
.palette-box { width: min(620px, 92vw); background: rgba(28, 28, 28, .98); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .14s var(--ease); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line-2); }
.palette-input .ico { color: var(--text-3); }
.palette-input input { flex: 1; height: 50px; border: 0; background: transparent; font-size: var(--fs-md); padding: 0; }
.palette-input input:focus { background: transparent; }
.palette-input input:focus-visible { outline: none; }
.palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
.palette-list button { width: 100%; height: 38px; justify-content: flex-start; border: 0; background: transparent; border-radius: 8px; padding: 0 8px 0 12px; gap: 12px; font-weight: 450; font-size: var(--fs); transition: none; }
.palette-list button .ico { color: var(--text-3); }
.palette-list button .grp { color: var(--text-3); font-size: var(--fs-sm); }
.palette-list button { position: relative; }
.palette-list button.kb { background: rgba(255, 255, 255, .075); color: #fff; }
.palette-list button.kb::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); }
.palette-list button.kb .ico { color: var(--accent); }
.palette-list button.kb .kc kbd { color: var(--text-2); border-color: rgba(255, 255, 255, .14); }
.palette-empty { padding: 26px; text-align: center; color: var(--text-3); }
.palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-xs); }

/* ==========================================================================
   Layout + resizable panels
   ========================================================================== */
#layout { position: absolute; top: 44px; left: 0; right: 0; bottom: 26px; display: grid; gap: var(--gap); padding: var(--gap); }
.panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; display: none; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.panel-head { height: 34px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.panel-head .title { font-weight: 600; color: var(--text); font-size: var(--fs-sm); letter-spacing: .01em; white-space: nowrap; }
.chip { font: 500 var(--fs-xs)/1 var(--mono); color: var(--text-2); background: var(--bg-0); border: 1px solid var(--line); padding: 4px 6px; border-radius: 5px; }
.chip:empty { display: none; }
.scroll { flex: 1; overflow: auto; padding: 10px; min-height: 0; }

#pool { grid-area: left; } #viewerWrap { grid-area: viewer; } #inspector { grid-area: right; }
#timelineWrap { grid-area: bottom; } #scopes { grid-area: right; } #gradePanel { grid-area: bottom; }
#clipStrip { grid-area: strip; } #deliver { grid-area: right; }

body.ws-media #layout { grid-template-columns: var(--media-l, 380px) minmax(0, 1fr) var(--media-r, 300px); grid-template-rows: minmax(0, 1fr); grid-template-areas: "left viewer right"; }
body.ws-media #pool, body.ws-media #viewerWrap, body.ws-media #inspector { display: flex; }
body.ws-edit #layout { grid-template-columns: var(--edit-l, 300px) minmax(0, 1fr) var(--edit-r, 300px); grid-template-rows: minmax(0, 1fr) var(--edit-b, 40%); grid-template-areas: "left viewer right" "bottom bottom bottom"; }
body.ws-edit #pool, body.ws-edit #viewerWrap, body.ws-edit #inspector, body.ws-edit #timelineWrap { display: flex; }
body.ws-color #layout { grid-template-columns: minmax(0, 1fr) var(--color-r, 430px); grid-template-rows: minmax(0, 1fr) 100px var(--color-b, 38%); grid-template-areas: "viewer right" "strip strip" "bottom bottom"; }
body.ws-color #viewerWrap, body.ws-color #scopes, body.ws-color #clipStrip, body.ws-color #gradePanel { display: flex; }
body.ws-photo #layout { grid-template-columns: var(--photo-l, 260px) minmax(0, 1fr) var(--photo-r, 400px); grid-template-rows: var(--photo-t, 240px) minmax(0, 1fr); grid-template-areas: "left viewer right" "left viewer right2"; }
body.ws-photo #pool, body.ws-photo #viewerWrap, body.ws-photo #scopes, body.ws-photo #gradePanel { display: flex; }
body.ws-photo #gradePanel { grid-area: right2; }
body.ws-deliver #layout { grid-template-columns: minmax(0, 1fr) var(--deliver-r, 440px); grid-template-rows: minmax(0, 1fr) var(--deliver-b, 230px); grid-template-areas: "viewer right" "bottom bottom"; }
body.ws-deliver #viewerWrap, body.ws-deliver #deliver, body.ws-deliver #timelineWrap { display: flex; }

.splitter { position: absolute; z-index: 15; background: transparent; transition: background .15s; }
.splitter.v { width: 8px; margin-left: -4px; cursor: col-resize; }
.splitter.h { height: 8px; margin-top: -4px; cursor: row-resize; }
.splitter::after { content: ''; position: absolute; background: var(--accent); opacity: 0; transition: opacity .15s; border-radius: 2px; }
.splitter.v::after { left: 3px; width: 2px; top: 0; bottom: 0; }
.splitter.h::after { top: 3px; height: 2px; left: 0; right: 0; }
.splitter:hover::after, .splitter.drag::after { opacity: .8; }
body.resizing, body.resizing * { cursor: inherit !important; user-select: none; }
body.resizing-v { cursor: col-resize; } body.resizing-h { cursor: row-resize; }

/* ==========================================================================
   Status bar
   ========================================================================== */
#statusbar { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #0f0f0f; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-xs); z-index: 10; }
.sb-left, .sb-right { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.sb-right { justify-content: flex-end; }
.sb-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-item .ico { color: var(--text-3); }
.sb-hint { flex: 2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.sb-hint kbd { font-size: 9.5px; padding: 1px 4px; }
.net-pill { display: inline-flex; align-items: center; gap: 6px; height: 18px; font-size: var(--fs-xs); padding: 0 8px 0 7px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text-3); background: transparent; cursor: pointer; font-weight: 500; }
.net-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); }
.net-pill.on { color: #8fd4a8; border-color: rgba(70, 199, 122, .3); }
.net-pill.on::before { background: var(--green); box-shadow: 0 0 6px rgba(70, 199, 122, .7); }

/* ==========================================================================
   Media pool
   ========================================================================== */
.pool-filters { display: flex; gap: 5px; padding: 8px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.pool-filters .search-field { flex: 1 1 150px; }
.pool-filters select { flex: 1 1 auto; }
.pool-filters select { width: auto; }
body.ws-photo #poolType { display: none; }
.pool-grid { flex: 1; overflow: auto; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; min-height: 0; }
body.ws-photo .pool-grid, body.ws-edit .pool-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pitem { border-radius: var(--r); cursor: pointer; position: relative; padding: 3px; border: 1px solid transparent; transition: background .1s, border-color .1s; }
.pitem:hover { background: var(--bg-3); }
.pitem.sel { background: var(--sel-bg); border-color: rgba(76, 155, 255, .45); }
.pitem.active { border-color: var(--sel); background: var(--sel-bg); }
.pthumb { aspect-ratio: 16/9; background: #050505 center / cover no-repeat; position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset; }
.pthumb .badge { position: absolute; left: 5px; bottom: 5px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); padding: 2px 5px; border-radius: 4px; font: 500 10px/1.2 var(--mono); display: inline-flex; align-items: center; gap: 4px; color: #eee; }
.pthumb .badge .ico { width: 10px; height: 10px; }
.pthumb .stars { position: absolute; right: 5px; bottom: 4px; color: var(--accent); font-size: 10px; text-shadow: 0 0 3px #000; letter-spacing: -1px; }
.pthumb .gdot { position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .65); display: grid; place-items: center; color: var(--accent); }
.pthumb .off { position: absolute; inset: 0; display: grid; place-items: center; color: #ff8a83; font-weight: 600; background: rgba(15, 0, 0, .65); font-size: 10px; letter-spacing: .08em; text-align: center; padding: 4px; }
.pname { padding: 6px 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); color: var(--text-2); }
.pitem.active .pname, .pitem.sel .pname { color: var(--text); }
.pool-foot { display: flex; gap: 6px; align-items: center; padding: 7px 8px; border-top: 1px solid var(--line); flex: none; background: var(--bg-2); }
.pool-empty { grid-column: 1 / -1; color: var(--text-3); text-align: center; padding: 34px 18px; border: 1.5px dashed var(--line-3); border-radius: var(--r-lg); line-height: 1.7; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pool-empty .ico { color: var(--text-3); }
.pool-empty b { color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.pool-empty .row { justify-content: center; margin-top: 6px; }

/* ==========================================================================
   Viewer + transport
   ========================================================================== */
#viewport { flex: 1; position: relative; background: #070707; overflow: hidden; min-height: 0; }
#view { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; display: block; }
#viewport.z11 { overflow: auto; cursor: grab; display: block; }
#viewport.z11 #view { position: static; inset: auto; object-fit: fill; margin: 0 auto; }
#viewport.z11 #viewBox { display: none; }
#viewBox { position: absolute; pointer-events: none; }
#viewBox.split { pointer-events: auto; cursor: ew-resize; }
.guide { position: absolute; border: 1px dashed rgba(255, 255, 255, .3); display: none; pointer-events: none; }
.guide.action { inset: 5%; } .guide.title { inset: 10%; border-color: rgba(242, 169, 59, .45); }
#viewBox.guides .guide { display: block; }
#viewEmpty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); pointer-events: none; text-align: center; line-height: 1.7; font-size: var(--fs-md); }
#viewEmpty:empty { display: none; }
#viewEmpty .ve { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#viewEmpty .ve .ico { color: var(--text-4); }
#viewEmpty .ve small { font-size: var(--fs-sm); color: var(--text-4); }

#transport { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg-2); flex: none; }
.scrub-row { padding: 6px 12px 0; }
#scrub { height: 14px; }
#scrub::-webkit-slider-runnable-track { height: 4px; }
#scrub::-webkit-slider-thumb { width: 3px; height: 14px; border-radius: 2px; margin-top: -5px; background: var(--red); box-shadow: none; }
.transport-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 3px 10px 7px; gap: 10px; }
.tc-box { justify-self: start; }
.tc { font-size: var(--fs-md); font-weight: 500; letter-spacing: .02em; color: var(--text); }
#tcCur { color: var(--accent-hi); background: var(--bg-0); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }
.tbtns { display: flex; gap: 2px; align-items: center; }
.tbtns .ibtn { width: 28px; height: 28px; }
.play-btn { width: 36px; height: 30px; padding: 0; border-radius: 8px; background: var(--bg-4); border-color: var(--line-3); margin: 0 4px; }
.play-btn:hover { background: var(--bg-5); }
.play-btn.on { background: var(--accent); border-color: var(--accent); color: #1a1205; }
.tr-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
#tcDur { font-size: var(--fs-sm); }
#meter { background: #050505; border-radius: 2px; width: 64px; height: 8px; }
body.ws-photo #transport { display: none; }
#viewerWrap:fullscreen { border-radius: 0; border: 0; }
#viewerWrap:fullscreen #viewport { background: #000; }

#dropHint { position: fixed; inset: 0; background: rgba(8, 8, 8, .78); backdrop-filter: blur(4px); display: none; place-items: center; z-index: 90; pointer-events: none; }
.drop-card { border: 2px dashed var(--accent-line); padding: 46px 72px; border-radius: 18px; text-align: center; background: rgba(242, 169, 59, .04); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drop-ico { color: var(--accent); }
.drop-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
.drop-sub { color: var(--text-2); }
body.dragging #dropHint { display: grid; }

/* ==========================================================================
   Cards, rows, form controls inside panels
   ========================================================================== */
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 12px 12px; margin-bottom: 8px; }
.card-title { font-size: var(--fs-sm); color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 -12px 4px; padding: 0 12px; cursor: default; }
.card.collapsible > .card-title { cursor: pointer; }
.card.collapsible > .card-title::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-2px, -1px); transition: transform .15s; margin-right: 4px; }
.card.collapsed > .card-title::before { transform: rotate(-45deg) translate(-1px, -1px); }
.card.collapsed { padding-bottom: 0; }
.card.collapsed > :not(.card-title) { display: none !important; }
.card-title button { height: 22px; padding: 0 8px; font-size: var(--fs-xs); font-weight: 500; }
.card-title .muted { font-weight: 400; }
.srow { display: grid; grid-template-columns: 100px minmax(40px, 1fr) 58px; align-items: center; gap: 10px; height: 26px; }
.srow label { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; cursor: ew-resize; font-size: var(--fs-sm); }
.srow label:hover { color: var(--text); }
.srow.changed label { color: var(--text); }
.srow.changed label::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }
.srow .num { width: 58px; height: 22px; padding: 0 6px; text-align: right; font: 400 var(--fs-sm) var(--mono); background: var(--bg-0); border-color: var(--line); }
.srow.disabled { opacity: .35; pointer-events: none; }
.swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 7px 10px; word-break: break-word; font-size: var(--fs-sm); }
.kv > :nth-child(odd) { color: var(--text-3); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field > span { color: var(--text-3); font-size: var(--fs-sm); }
.frow { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.frow > span { color: var(--text-2); font-size: var(--fs-sm); }
.chk { display: inline-flex; align-items: center; gap: 7px; height: 26px; cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); margin-right: 10px; }
.chk:hover { color: var(--text); }
.stars-input { display: flex; gap: 3px; font-size: 18px; cursor: pointer; color: var(--text-4); }
.stars-input span:hover, .stars-input span.on { color: var(--accent); }
.note { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.55; margin-top: 8px; }
.empty-msg { color: var(--text-3); padding: 28px 16px; line-height: 1.7; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-msg .ico { color: var(--text-4); }
.progress { height: 6px; background: var(--bg-0); border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .2s; border-radius: 3px; }

.mk { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px; border-radius: var(--r); background: var(--bg-1); margin-bottom: 5px; border: 1px solid var(--line); }
.mk:hover { border-color: var(--line-3); }
.mk.sel { border-color: var(--sel); background: var(--sel-bg); }
.mk .mk-tc { font: 500 var(--fs-sm) var(--mono); color: var(--sel); cursor: pointer; }
.mk .mk-note { white-space: pre-wrap; word-break: break-word; cursor: text; margin: 3px 0; }
.mk .mk-meta { color: var(--text-3); font-size: var(--fs-xs); }
.mk input[type=checkbox] { margin-top: 1px; }

/* ==========================================================================
   Scopes
   ========================================================================== */
#scopes { flex-direction: column; background: #0c0c0c; }
.scope-slot { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--line); }
.scope-slot:last-child { border-bottom: 0; }
body.ws-photo .scope-slot:nth-child(2) { display: none; }
.scope-bar { display: flex; gap: 6px; padding: 0 6px 0 8px; height: 30px; align-items: center; background: var(--bg-2); border-bottom: 1px solid var(--line); flex: none; }
.scope-bar select { height: 22px; font-size: var(--fs-xs); font-weight: 500; background-color: transparent; border-color: transparent; padding-left: 4px; }
.scope-bar select:hover { background-color: var(--bg-3); }
.scope-info { font: 400 var(--fs-xs) var(--mono); color: var(--text-3); }
.scope-slot canvas { flex: 1; width: 100%; min-height: 0; display: block; background: #090909; }

/* ==========================================================================
   Clip strip (Color)
   ========================================================================== */
#clipStrip { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px; align-items: stretch; }
.cs-item { flex: none; width: 132px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; display: flex; flex-direction: column; overflow: hidden; padding: 3px; transition: border-color .1s; }
.cs-item:hover { border-color: var(--line-3); }
.cs-item .cs-thumb { flex: 1; background: #000 center / cover no-repeat; position: relative; border-radius: 3px; }
.cs-item .cs-meta { display: flex; justify-content: space-between; gap: 4px; padding: 4px 3px 1px; font: 400 10px var(--mono); color: var(--text-3); }
.cs-item .cs-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-item.sel { border-color: var(--sel); }
.cs-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cs-num { position: absolute; left: 4px; top: 4px; background: rgba(0, 0, 0, .7); padding: 1px 5px; border-radius: 3px; font: 500 10px var(--mono); }
.cs-dot { position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .65); display: grid; place-items: center; color: var(--accent); }
.cs-empty { color: var(--text-3); margin: auto; display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Grade panel
   ========================================================================== */
#gradePanel .gp-head { gap: 4px; }
#gradePanel .gp-head button { height: 24px; }
.gp-target { color: var(--accent-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: var(--fs-sm); font-weight: 500; padding: 3px 8px; background: var(--accent-bg); border-radius: 5px; margin-left: 4px; }
.gp-tabs { display: flex; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; flex: none; background: var(--bg-1); }
.gp-tabs button { background: transparent; border-color: transparent; color: var(--text-3); height: 26px; padding: 0 11px; font-weight: 500; }
.gp-tabs button:hover { color: var(--text); background: var(--bg-3); }
.gp-tabs button.active { color: var(--text); background: var(--bg-4); }
.gp-body { flex: 1; overflow: auto; padding: 10px; min-height: 0; position: relative; }
.gp-page { display: none; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.gp-page.active { display: flex; animation: fade .15s; }
.gp-page > .card { flex: 1 1 320px; margin: 0; min-width: 290px; }
.gp-body.notarget .gp-page:not([data-page=gallery]) { opacity: .3; pointer-events: none; filter: grayscale(1); }
.gp-empty { display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); color: var(--text-2); background: var(--bg-3); padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line-3); z-index: 2; box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.gp-body.notarget .gp-empty { display: block; }
body.ws-color .gp-page > .card.wheels { flex: 2 1 640px; order: -1; }
.wheels-row { display: flex; gap: 8px; justify-content: space-around; flex-wrap: wrap; padding-top: 2px; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px; }
.wheel canvas { width: 120px; height: 120px; cursor: grab; touch-action: none; border-radius: 50%; }
.wheel canvas:active { cursor: grabbing; }
.wheel .wname { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; cursor: pointer; }
.wheel .wname:hover { color: var(--accent); }
.wheel .wvals { font: 400 10px var(--mono); color: var(--text-3); white-space: nowrap; }
.wheel input[type=range] { width: 120px; }
.curve-tools { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.curve-tools button { height: 24px; }
.curve-tools button.ch-m.on { color: #fff; border-color: #bbb; background: #333; }
.curve-tools button.ch-r.on { color: #ff9d96; border-color: var(--red); background: rgba(240, 93, 85, .12); }
.curve-tools button.ch-g.on { color: #9fe0b8; border-color: var(--green); background: rgba(70, 199, 122, .12); }
.curve-tools button.ch-b.on { color: #a8cdff; border-color: var(--sel); background: rgba(76, 155, 255, .12); }
.curve-canvas { width: 100%; max-width: 320px; aspect-ratio: 1; display: block; background: #0c0c0c; border-radius: var(--r); cursor: crosshair; touch-action: none; border: 1px solid var(--line); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; width: 100%; }
.gstill { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; position: relative; padding: 3px; transition: border-color .1s, transform .1s; }
.gstill:hover { border-color: var(--accent-line); }
.gstill .gthumb { aspect-ratio: 16/9; background: #000 center / cover; border-radius: 3px; }
.gstill .gname { padding: 5px 3px 2px; font-size: var(--fs-sm); color: var(--text-2); display: flex; justify-content: space-between; gap: 4px; }
.gstill .gdel { position: absolute; top: 6px; right: 6px; height: 20px; width: 20px; padding: 0; display: none; background: rgba(0, 0, 0, .7); }
.gstill:hover .gdel { display: inline-flex; }
.lut-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 4px; }
.lut-item .ico { color: var(--violet); }
.lut-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Timeline
   ========================================================================== */
#timelineWrap { position: relative; }
.tl-toolbar { display: flex; align-items: center; gap: 4px; padding: 0 8px; height: 38px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex: none; overflow: hidden; }
.tl-toolbar .ibtn { width: 28px; height: 26px; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 8px; }
.seg button { height: 24px; border-color: transparent; background: transparent; color: var(--text-3); padding: 0 9px; border-radius: 6px; }
.seg button:hover { color: var(--text); background: var(--bg-3); }
.seg button.on { background: var(--bg-4); color: var(--text); border-color: transparent; }
.seg button.on .ico { color: var(--accent); }
#tlZoom { width: 110px; }
#tlInfo { font: 400 var(--fs-xs) var(--mono); color: var(--text-3); margin-right: 6px; }
.tl-rulerwrap { display: flex; height: 28px; flex: none; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.tl-corner { width: 160px; flex: none; display: flex; align-items: center; padding-left: 12px; font: 500 var(--fs-md) var(--mono); color: var(--accent-hi); border-right: 1px solid var(--line); background: var(--bg-2); }
#tlRuler { flex: 1; height: 28px; min-width: 0; cursor: col-resize; display: block; }
.tl-scroll { flex: 1; overflow: auto; position: relative; min-height: 0; background: #101010; }
.tl-content { position: relative; min-height: 100%; }
.tl-row { display: flex; border-bottom: 1px solid #1a1a1a; }
.tl-row.video { height: var(--track-v, 64px); } .tl-row.audio { height: var(--track-a, 50px); }
.tl-row:nth-child(even) .tl-lane { background: rgba(255, 255, 255, .008); }
.tl-head { position: sticky; left: 0; z-index: 3; width: 160px; flex: none; background: var(--bg-2); border-right: 1px solid var(--line); display: flex; align-items: center; gap: 1px; padding: 0 6px 0 0; }
.tl-head::before { content: ''; align-self: stretch; width: 3px; margin-right: 9px; background: var(--video); opacity: .9; }
.tl-row.audio .tl-head::before { background: var(--audio); }
.tl-head .tname { font-weight: 600; font-size: var(--fs-sm); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbtn { width: 24px; height: 22px; padding: 0; background: transparent; border-color: transparent; color: var(--text-3); }
.tbtn:hover { background: var(--bg-4); color: var(--text); border-color: transparent; }
.tbtn.on { background: transparent; color: var(--accent); border-color: transparent; }
.tl-lane { position: relative; flex: 1; }
.tl-lane.locked { background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, .025) 7px 14px) !important; }
.tl-lane.droptarget { background: rgba(76, 155, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(76, 155, 255, .4); }
.clip { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; overflow: hidden; cursor: grab; background: var(--video); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .08) inset; transition: box-shadow .1s, filter .1s; }
.clip:hover { filter: brightness(1.12); }
.clip.video { background: linear-gradient(#41729f, #2f5579); }
.clip.image { background: linear-gradient(#7a62b8, #594590); }
.clip.audio { background: linear-gradient(#2f7a4f, #22593a); }
.clip.offline, .clip.missing { background: repeating-linear-gradient(-45deg, #5a2626 0 8px, #4a1f1f 8px 16px); }
.clip.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px rgba(0, 0, 0, .6); z-index: 1; }
.clip .cthumb { position: absolute; inset: 17px 0 0 0; background-repeat: repeat-x; background-size: auto 100%; opacity: .85; pointer-events: none; }
.clip .clabel { position: absolute; left: 0; right: 0; top: 0; height: 17px; padding: 2px 7px; font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, .28); pointer-events: none; color: rgba(255, 255, 255, .92); display: flex; align-items: center; gap: 5px; }
.clip .clabel .gmark { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 4px var(--accent); flex: none; }
.clip.audio .clabel { background: rgba(0, 0, 0, .18); }
.clip .wave { position: absolute; left: 0; top: 18px; width: 100%; height: calc(100% - 19px); pointer-events: none; }
.clip .fade { position: absolute; top: 17px; bottom: 0; pointer-events: none; }
.clip .fade.in { left: 0; background: linear-gradient(to top right, rgba(0, 0, 0, .55) 50%, transparent 50.5%); }
.clip .fade.out { right: 0; background: linear-gradient(to top left, rgba(0, 0, 0, .55) 50%, transparent 50.5%); }
.clip::before, .clip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; background: rgba(255, 255, 255, .0); transition: background .1s; z-index: 2; }
.clip::before { left: 0; border-radius: 5px 0 0 5px; } .clip::after { right: 0; border-radius: 0 5px 5px 0; }
.clip:hover::before, .clip:hover::after { background: rgba(255, 255, 255, .18); }
body.tool-blade .clip { cursor: crosshair; }
body.tool-blade .clip::before, body.tool-blade .clip::after { display: none; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--red); pointer-events: none; z-index: 2; box-shadow: 0 0 6px rgba(240, 93, 85, .5); }
.tl-dropline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sel); pointer-events: none; z-index: 2; display: none; box-shadow: 0 0 8px var(--sel); }

/* ==========================================================================
   Start screen
   ========================================================================== */
#welcome { position: fixed; inset: 44px 0 26px; z-index: 60; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(242, 169, 59, .07), transparent 60%), rgba(11, 11, 11, .94); backdrop-filter: blur(6px); animation: fade .2s; overflow: auto; }
.wl { width: min(940px, 92vw); display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; padding: 24px 0; }
.wl-hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-bottom: 4px; }
.wl-hero img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.wl-hero h1 { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.03em; }
.wl-hero p { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-md); }
.wl h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 600; margin: 0 0 10px; }
.wl-actions { display: grid; gap: 8px; }
.wl-action { height: auto; justify-content: flex-start; gap: 14px; padding: 13px 14px; border-radius: var(--r-lg); background: var(--bg-2); border-color: var(--line-2); text-align: left; }
.wl-action:hover { background: var(--bg-3); border-color: var(--line-3); transform: translateY(-1px); }
.wl-action .wi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-0); color: var(--accent); flex: none; border: 1px solid var(--line-2); }
.wl-action b { display: block; font-size: var(--fs-md); font-weight: 600; margin-bottom: 3px; }
.wl-action small { color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; white-space: normal; line-height: 1.4; }
.wl-action kbd { margin-left: auto; }
.wl-side { display: flex; flex-direction: column; gap: 18px; }
.wl-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wl-step { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.wl-step:hover { border-color: var(--accent-line); color: var(--text); }
.wl-step .ico { color: var(--accent); }
.wl-tips { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 6px 14px; }
.wl-tips div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.wl-tips div:last-child { border-bottom: 0; }
.wl-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: var(--fs-sm); border-top: 1px solid var(--line); padding-top: 14px; }
.wl-foot label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }

.fatal { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg-0); color: var(--text); font-size: 15px; z-index: 300; text-align: center; padding: 40px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ==========================================================================
   Credits
   ========================================================================== */
@font-face { font-family: 'Rubik Glitch'; src: url('../fonts/RubikGlitch.woff2') format('woff2'); font-display: swap; }
.credits { position: fixed; inset: 0; z-index: 220; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); display: grid; place-items: center; animation: fade .2s; }
.credits-box { position: relative; width: min(860px, 94vw); max-height: 88vh; display: flex; flex-direction: column; background: radial-gradient(900px 380px at 50% -40%, rgba(242, 169, 59, .13), transparent 70%), var(--bg-1); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden; animation: pop .2s var(--ease); }
.credits-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.credits-hero { text-align: center; padding: 36px 24px 26px; border-bottom: 1px solid var(--line); flex: none; }
.credits-hero img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.credits-hero .app { margin-top: 12px; color: var(--text-2); font-size: var(--fs-md); }
.credits-hero .role { margin-top: 22px; font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.credits-body { overflow: auto; padding: 22px 30px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 34px; }
.credits-body section h4 { margin: 0 0 8px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.credit { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.credit:last-child { border-bottom: 0; }
.credit b { font-weight: 600; font-size: var(--fs); }
.credit span { color: var(--text-3); font-size: var(--fs-sm); grid-column: 1 / -1; line-height: 1.45; }
.credit i { font-style: normal; color: var(--text-3); font: 500 10px var(--mono); align-self: center; padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 4px; }
.credits-foot { flex: none; padding: 12px 30px; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

/* glitched creator name: Rubik Glitch + chromatic split + slice jitter */
.glitch { position: relative; display: inline-block; margin-top: 6px; font: 400 clamp(54px, 9vw, 92px)/1 'Rubik Glitch', var(--font); letter-spacing: .04em; color: #f4f4f4; text-shadow: 0 0 24px rgba(242, 169, 59, .25); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: #ff2d55; mix-blend-mode: screen; animation: glitch-a 2.6s infinite steps(1); clip-path: inset(10% 0 62% 0); transform: translate(-3px, 0); }
.glitch::after { color: #00e5ff; mix-blend-mode: screen; animation: glitch-b 3.1s infinite steps(1); clip-path: inset(58% 0 14% 0); transform: translate(3px, 0); }
@keyframes glitch-a {
  0% { clip-path: inset(10% 0 62% 0); transform: translate(-3px, 0); }
  18% { clip-path: inset(44% 0 30% 0); transform: translate(-6px, 1px); }
  34% { clip-path: inset(80% 0 4% 0); transform: translate(2px, -1px); }
  52% { clip-path: inset(22% 0 55% 0); transform: translate(-2px, 0); }
  70% { clip-path: inset(0 0 88% 0); transform: translate(-5px, 1px); }
  86% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 0); }
}
@keyframes glitch-b {
  0% { clip-path: inset(58% 0 14% 0); transform: translate(3px, 0); }
  22% { clip-path: inset(6% 0 76% 0); transform: translate(6px, -1px); }
  41% { clip-path: inset(36% 0 40% 0); transform: translate(-2px, 1px); }
  63% { clip-path: inset(84% 0 2% 0); transform: translate(4px, 0); }
  81% { clip-path: inset(18% 0 64% 0); transform: translate(1px, 0); }
}
@media (prefers-reduced-motion: reduce) { .glitch::before, .glitch::after { animation: none !important; } }
@media (max-width: 720px) { .credits-body { grid-template-columns: 1fr; } }

/* ==========================================================================
   Security: status item, Security Center, activation / block gate
   ========================================================================== */
.sb-sec.good { color: #8fd4a8; } .sb-sec.good .ico { color: var(--green); }
.sb-sec.warn { color: var(--accent-hi); } .sb-sec.warn .ico { color: var(--accent); }
.sb-sec.bad { color: #ff8a83; } .sb-sec.bad .ico { color: var(--red); }
.sb-sec:hover { color: var(--text); }
.sec-head { display: flex; align-items: center; gap: 14px; padding: 22px 56px 18px 26px; border-bottom: 1px solid var(--line); flex: none; }
.sec-head h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.sec-head p { margin: 3px 0 0; font-size: var(--fs-sm); }
.sec-head .primary { height: 32px; padding: 0 14px; }
.sec-shield { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(70, 199, 122, .1); color: var(--green); border: 1px solid rgba(70, 199, 122, .25); flex: none; }
.sec-body { overflow: auto; padding: 18px 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.sec-body section h4 { margin: 0 0 8px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.sec-row { display: grid; grid-template-columns: 18px 160px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 5px; font-size: var(--fs-sm); }
.sec-row span { color: var(--text-2); min-width: 0; }
.sec-row i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; padding: 2px 7px; border-radius: 10px; background: var(--bg-0); color: var(--text-3); }
.sec-row.ok .ico, .sec-row.fixed .ico { color: var(--green); } .sec-row.ok i, .sec-row.fixed i { color: #8fd4a8; }
.sec-row.warn .ico { color: var(--accent); } .sec-row.warn i { color: var(--accent-hi); }
.sec-row.fail .ico { color: var(--red); } .sec-row.fail i { color: #ff8a83; } .sec-row.fail { border-color: rgba(240, 93, 85, .35); }
.sec-row.info .ico { color: var(--sel); }
.sec-log { max-height: 180px; overflow: auto; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: 8px; background: var(--bg-0); }
.sec-log div { padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.sec-log div:last-child { border-bottom: 0; }
.sec-log time { color: var(--text-3); font: 400 10.5px var(--mono); margin-right: 10px; }
.sec-log .warn { color: var(--accent-hi); } .sec-log .error { color: #ff8a83; }
.gate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(900px 500px at 50% 0%, rgba(242, 169, 59, .08), transparent 70%), rgba(8, 8, 8, .97); }
.gate-box { width: min(520px, 92vw); background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 12px; animation: pop .2s var(--ease); }
.gate-box img { width: 52px; height: 52px; border-radius: 13px; }
.gate-box h2 { margin: 4px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.gate-box p { margin: 0; line-height: 1.55; }
.gate-box textarea { min-height: 90px; font-size: var(--fs-sm); word-break: break-all; }
.gate-box .primary { height: 32px; padding: 0 16px; }
.gate-mid { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--bg-0); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-3); }
.gate-mid code { font: 500 var(--fs-md) var(--mono); color: var(--text); letter-spacing: .04em; flex: 1; }
.gate-msg { min-height: 18px; font-size: var(--fs-sm); color: var(--text-3); }
.gate-msg.err { color: #ff8a83; }
.gate-ico { color: var(--red); }

/* ==========================================================================
   Splash screen (in-page for web; standalone window on desktop via splash.html)
   ========================================================================== */
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: radial-gradient(700px 420px at 50% 30%, rgba(242, 169, 59, .10), transparent 70%), #0b0b0b; transition: opacity .35s var(--ease), visibility .35s; }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
body.booting #topbar, body.booting #layout, body.booting #statusbar { visibility: hidden; }
.splash-card { width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 60px rgba(242, 169, 59, .12); animation: splashIn .6s var(--ease) both; }
.splash-name { margin-top: 20px; font: 650 26px/1.1 var(--font); letter-spacing: -.03em; color: #f2f2f2; animation: splashIn .6s .08s var(--ease) both; }
.splash-tag { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-3); letter-spacing: .22em; text-transform: uppercase; animation: splashIn .6s .14s var(--ease) both; }
.splash-bar { width: 100%; height: 3px; margin-top: 34px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
#splashFill { width: 4%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .3s var(--ease); box-shadow: 0 0 10px rgba(242, 169, 59, .6); }
.splash-row { width: 100%; display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--fs-sm); color: var(--text-3); }
#splashVer { font-family: var(--mono); font-size: var(--fs-xs); }
.splash-by { margin-top: 30px; font-size: var(--fs-xs); color: var(--text-4); letter-spacing: .08em; }
.glitch-sm { position: relative; display: inline-block; font: 400 15px/1 'Rubik Glitch', var(--font); color: var(--text-2); letter-spacing: .06em; margin-left: 4px; }
.glitch-sm::before, .glitch-sm::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.glitch-sm::before { color: #ff2d55; animation: glitch-a 2.6s infinite steps(1); }
.glitch-sm::after { color: #00e5ff; animation: glitch-b 3.1s infinite steps(1); }
@keyframes splashIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* standalone splash window (desktop): no app chrome */
body.splash-window { background: #0b0b0b; }
body.splash-window .splash { border-radius: 14px; }

/* ==========================================================================
   Menu bar (v0.4) — three-column top bar: menus · workspaces · actions
   ========================================================================== */
#topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
#wsTabs { position: static; transform: none; }
.tb-left { gap: 2px; overflow: hidden; }
.app-menu-btn { padding: 0 6px 0 5px; gap: 3px; }
.app-menu-btn.open, .mb-item.open { background: var(--bg-4); color: var(--text); }
#menubar { display: flex; align-items: center; gap: 0; min-width: 0; }
.mb-item { height: 28px; padding: 0 7px; background: transparent; border-color: transparent; color: var(--text-2); font-weight: 450; font-size: var(--fs); border-radius: 6px; }
.mb-item:hover { background: var(--bg-3); color: var(--text); border-color: transparent; }
.mb-item u, .mb-menu u { text-decoration: none; }
body.alt-held .mb-item u { text-decoration: underline; text-underline-offset: 2px; }
.top-actions { gap: 2px; min-width: 0; }
.top-actions .proj-wrap { padding: 0 6px 0 0; border-left: 0; margin-right: 4px; min-width: 0; flex: 0 1 220px; }
.top-actions .proj-name { width: 100%; min-width: 80px; text-align: right; }
.top-actions .proj-name:focus { text-align: left; }
.cmd-search { min-width: 0; width: 150px; margin-right: 4px; }
.mb-menu { min-width: 250px; }
.mb-menu .mb-check { width: 15px; height: 15px; display: inline-grid; place-items: center; flex: none; color: var(--text-3); }
.mb-menu .mb-check.on { color: var(--accent); }
.mb-menu .mb-check.radio i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }
.mb-menu .mb-arrow { margin-left: auto; padding-left: 20px; color: var(--text-3); display: inline-flex; }
.mb-menu button.has-sub.kb .mb-arrow { color: var(--text-2); }
@media (max-width: 1640px) { #wsTabs button span { display: none; } #wsTabs button { padding: 0 10px; } }
@media (max-width: 1250px) { .cmd-search span, .cmd-search kbd { display: none; } .cmd-search { width: 30px; padding: 0; justify-content: center; } .mb-item { padding: 0 6px; } }
@media (max-width: 1080px) { .top-actions .proj-wrap { display: none; } }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }

/* Preferences window */
.prefs-box { flex-direction: row !important; width: min(920px, 94vw); height: min(620px, 88vh); }
.prefs-side { width: 220px; flex: none; border-right: 1px solid var(--line); background: var(--bg-2); padding: 18px 10px; display: flex; flex-direction: column; gap: 14px; }
.prefs-title { display: flex; align-items: center; gap: 9px; padding: 2px 10px; font-size: var(--fs-md); font-weight: 650; }
.prefs-title .ico { color: var(--accent); }
.prefs-nav { display: flex; flex-direction: column; gap: 2px; }
.prefs-nav button { justify-content: flex-start; height: 32px; gap: 10px; background: transparent; border-color: transparent; color: var(--text-2); font-weight: 450; padding: 0 10px; }
.prefs-nav button .ico { color: var(--text-3); }
.prefs-nav button:hover { background: var(--bg-3); color: var(--text); }
.prefs-nav button.on { background: var(--bg-4); color: var(--text); }
.prefs-nav button.on .ico { color: var(--accent); }
.prefs-body { flex: 1; overflow: auto; padding: 24px 30px 30px; }
.prefs-body h3 { margin: 0 0 16px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.pref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pref-label { font-weight: 500; }
.pref-hint { margin-top: 3px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.pref-ctl { display: flex; justify-content: flex-end; }
.pref-ctl select { min-width: 160px; }
.swatches { display: flex; gap: 8px; }
.swatch-btn { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.swatch-btn.on { border-color: #fff; }
.swatch-btn:hover { transform: scale(1.1); }
body.mb-collapsed #menubar { display: none; }
body.mb-collapsed .app-menu-btn { padding: 0 8px 0 5px; }

/* Updates */
.update-pill { height: 18px; padding: 0 8px; gap: 6px; border-radius: 9px; font-size: var(--fs-xs); font-weight: 500; background: rgba(76, 155, 255, .12); border: 1px solid rgba(76, 155, 255, .35); color: #9cc6ff; }
.update-pill .ico { color: var(--sel); }
.update-pill.ready { background: rgba(70, 199, 122, .14); border-color: rgba(70, 199, 122, .45); color: #9fe0b8; animation: pulse 2s ease-in-out infinite; }
.update-pill.ready .ico { color: var(--green); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(70, 199, 122, .12); } }
.update-banner { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 260; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: var(--r-lg); background: rgba(30, 30, 30, .98); border: 1px solid rgba(70, 199, 122, .4); box-shadow: var(--shadow-pop); animation: toastIn .22s var(--ease); }
.update-banner .ico { color: var(--green); }
.update-banner span { font-weight: 500; min-width: 290px; }
.update-banner button { height: 28px; }

/* ---------- accounts: sign-in gate + account manager ---------- */
.gate-box.acct { width: min(440px, 92vw); gap: 10px; }
.gate-box.acct h2 { margin-top: 2px; }
.gate-box.acct > p.muted { margin-bottom: 6px; font-size: var(--fs-sm); }
.acct-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--text-2); }
.acct-field input { height: 34px; padding: 0 11px; font-size: var(--fs-md); }
.acct-field input.acct-code { font: 600 22px var(--mono); letter-spacing: .4em; text-align: center; height: 46px; }
.gate-box.acct button.wide { width: 100%; height: 36px; font-size: var(--fs-md); margin-top: 2px; }
.acct-google { width: 100%; height: 36px; gap: 10px; font-size: var(--fs-md); background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; }
.acct-google:hover { background: #f1f3f4; border-color: #c6c6c6; }
.acct-google .g-logo { display: inline-grid; }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; margin: 2px 0; }
.acct-or::before, .acct-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.acct-row { display: flex; align-items: center; margin-top: -4px; }
.acct-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-3); }
.acct-foot .spacer, .acct-row .spacer { flex: 1; }
.linkbtn { background: none; border: 0; height: auto; padding: 0; color: var(--accent-hi); font-weight: 600; }
.linkbtn:hover { background: none; text-decoration: underline; }
.gate-msg.ok { color: #8fd4a8; }
.acct-wait { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 8px; background: var(--bg-0); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-sm); }
.acct-wait .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--accent); animation: acct-spin .8s linear infinite; }
@keyframes acct-spin { to { transform: rotate(360deg); } }
.acct-ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--accent), #c9782a); color: #1a1205; font-weight: 700; font-size: 12px; }
.acct-ini.big { width: 50px; height: 50px; font-size: 18px; border-radius: 14px; }
.acct-who { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-who b { color: var(--text); font-weight: 600; }
.acct-who span { overflow: hidden; text-overflow: ellipsis; }
.acct-badge { margin-left: 8px; font-size: var(--fs-xs); padding: 1px 7px; border-radius: 10px; background: var(--bg-3); color: var(--text-3); }
.acct-badge.ok { background: rgba(70, 199, 122, .12); color: #8fd4a8; }
.acct-center .credits-box { width: min(720px, 94vw); }
.acct-center textarea { width: 100%; min-height: 64px; padding: 8px; font-size: var(--fs-sm); word-break: break-all; margin: 6px 0; }
.acct-center .sec-row { grid-template-columns: 18px 130px 1fr auto; }
.acct-pw { display: flex; gap: 8px; margin-top: 6px; }
.acct-pw input { flex: 1; }
.avatar.signed-in { background: linear-gradient(135deg, var(--accent), #c9782a); color: #1a1205; border-color: transparent; }