/* Knopa Hub — paper & ink, keycap buttons (a nod to the KNOPA letter tiles), one violet accent. */
:root {
  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Unbounded', 'Onest', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #f4f3ef; --bg-sub: #efeee9; --bg-sunk: #e9e8e2; --panel: #ffffff; --elev: #ffffff;
  --border: #e3e1da; --border-2: #d3d0c7; --text: #141413; --text-2: #5d5b55; --text-3: #8f8c84; --text-inv: #fff;
  --hover: rgba(20, 20, 15, .05); --active: rgba(20, 20, 15, .085);
  --ink: #141413; --ink-2: #2b2b29; --on-ink: #ffffff; --key: rgba(0, 0, 0, .55);
  --accent: #5b2ee6; --accent-2: #4a20d4; --accent-soft: rgba(91, 46, 230, .1); --accent-text: #4f22dc; --focus: rgba(91, 46, 230, .28);
  --ok: #17924a; --ok-soft: rgba(23, 146, 74, .11); --warn: #c77d00; --warn-soft: rgba(214, 140, 0, .13); --bad: #d93a3f; --bad-soft: rgba(217, 58, 63, .1);
  --c-grey: #7d7a72; --c-red: #d93a3f; --c-orange: #e8661c; --c-amber: #c98a00; --c-green: #17924a; --c-teal: #0e9488; --c-blue: #2a64f0; --c-violet: #6a3ff0; --c-pink: #d43f8f; --c-slate: #56607a;
  --shadow-sm: 0 1px 2px rgba(30, 28, 20, .06); --shadow: 0 1px 2px rgba(30, 28, 20, .05), 0 6px 18px rgba(30, 28, 20, .06);
  --shadow-lg: 0 18px 50px rgba(30, 28, 20, .18), 0 2px 8px rgba(30, 28, 20, .06);
  --overlay: rgba(20, 19, 15, .38);
  --r-sm: 7px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --sidebar: 252px;
  --ease: cubic-bezier(.22, .8, .24, 1); --ease-out: cubic-bezier(.4, 0, 1, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060607; --bg-sub: #19191d; --bg-sunk: #26262c; --panel: #141417; --elev: #1d1d22;
    --border: #2c2c32; --border-2: #3f3f46; --text: #ededeb; --text-2: #b5b4af; --text-3: #8d8c87; --text-inv: #0c0c0d;
    --hover: rgba(255, 255, 255, .05); --active: rgba(255, 255, 255, .09);
    --ink: #f1f0ec; --ink-2: #ffffff; --on-ink: #0c0c0d; --key: rgba(0, 0, 0, .4);
    --accent: #9476ff; --accent-2: #a68cff; --accent-soft: rgba(148, 118, 255, .15); --accent-text: #ab95ff; --focus: rgba(148, 118, 255, .35);
    --ok: #3dcc7c; --ok-soft: rgba(61, 204, 124, .13); --warn: #f2b443; --warn-soft: rgba(242, 180, 67, .13); --bad: #ff6a6e; --bad-soft: rgba(255, 106, 110, .13);
    --c-grey: #9d9b95; --c-red: #ff6a6e; --c-orange: #ff9150; --c-amber: #f2b443; --c-green: #3dcc7c; --c-teal: #2fc8b8; --c-blue: #6f9bff; --c-violet: #a28bff; --c-pink: #f47bbd; --c-slate: #98a2bc;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
    --overlay: rgba(0, 0, 0, .62);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #060607; --bg-sub: #19191d; --bg-sunk: #26262c; --panel: #141417; --elev: #1d1d22;
  --border: #2c2c32; --border-2: #3f3f46; --text: #ededeb; --text-2: #b5b4af; --text-3: #8d8c87; --text-inv: #0c0c0d;
  --hover: rgba(255, 255, 255, .05); --active: rgba(255, 255, 255, .09);
  --ink: #f1f0ec; --ink-2: #ffffff; --on-ink: #0c0c0d; --key: rgba(0, 0, 0, .4);
  --accent: #9476ff; --accent-2: #a68cff; --accent-soft: rgba(148, 118, 255, .15); --accent-text: #ab95ff; --focus: rgba(148, 118, 255, .35);
  --ok: #3dcc7c; --ok-soft: rgba(61, 204, 124, .13); --warn: #f2b443; --warn-soft: rgba(242, 180, 67, .13); --bad: #ff6a6e; --bad-soft: rgba(255, 106, 110, .13);
  --c-grey: #9d9b95; --c-red: #ff6a6e; --c-orange: #ff9150; --c-amber: #f2b443; --c-green: #3dcc7c; --c-teal: #2fc8b8; --c-blue: #6f9bff; --c-violet: #a28bff; --c-pink: #f47bbd; --c-slate: #98a2bc;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --overlay: rgba(0, 0, 0, .62);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--focus); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.display { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); }
.mono { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; } .grow { flex: 1; min-width: 0; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; } .col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; } .between { justify-content: space-between; }
.hidden { display: none !important; }
.sp { flex: 1; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; }

/* ---------- logo (PNG used as a mask, so it follows the text color in both themes) ---------- */
.mark-dog, .mark-word { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.mark-dog { --m: url(/brand/dog.png); width: 26px; aspect-ratio: 398 / 414; }
.mark-word { --m: url(/brand/word.png); width: 120px; aspect-ratio: 975 / 260; }
.logo-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.logo-stack .mark-dog { width: 64px; } .logo-stack .mark-word { width: 150px; }

/* ---------- buttons (keycaps) ---------- */
.btn { --kb: var(--border-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: var(--r); border: 1px solid var(--kb); background: var(--panel); font-weight: 550; font-size: 14px; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; user-select: none; }
.btn:hover { background: var(--bg-sub); }
.btn:active { background: var(--active); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.primary:active { background: var(--ink-2); }
.btn.primary:hover { background: var(--ink-2); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.ghost:active { background: var(--active); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.sm { height: 30px; padding: 0 9px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn.lg { height: 42px; padding: 0 18px; font-size: 15px; }
.btn.icon { width: 34px; padding: 0; } .btn.icon.sm { width: 28px; }
.btn.block { width: 100%; }
.btn .badge { margin-left: 2px; }
.input, .select, .textarea { width: 100%; height: 38px; padding: 0 11px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--panel); outline: none; transition: border-color .12s, box-shadow .12s; font-size: 14.5px; }
.textarea { height: auto; min-height: 90px; padding: 9px 11px; resize: vertical; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input.sm, .select.sm { height: 32px; font-size: 14px; padding: 0 9px; }
.select.sm { padding-right: 28px; background-position: right 8px center; }
.select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238f8c84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 13px; font-weight: 550; color: var(--text-2); }
.hint { font-size: 13px; color: var(--text-3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.seg { display: inline-flex; padding: 3px; background: var(--bg-sunk); border-radius: var(--r); gap: 2px; }
.seg button { height: 30px; padding: 0 11px; border-radius: 7px; font-size: 13.5px; font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.kbd { font: 500 12px var(--font); color: var(--text-3); border: 1px solid var(--border-2); border-radius: 5px; padding: 0 5px; height: 19px; display: inline-flex; align-items: center; }

/* ---------- chips, dots, badges ---------- */
.chip { --c: var(--c-grey); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 550; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.outline { background: transparent; border: 1px solid var(--border-2); color: var(--text-2); }
.chip.solid { background: var(--c); color: #fff; }
.c-grey { --c: var(--c-grey); } .c-red { --c: var(--c-red); } .c-orange { --c: var(--c-orange); } .c-amber { --c: var(--c-amber); } .c-green { --c: var(--c-green); }
.c-teal { --c: var(--c-teal); } .c-slate { --c: var(--c-slate); } .c-blue { --c: var(--c-blue); } .c-violet { --c: var(--c-violet); } .c-pink { --c: var(--c-pink); }
.cdot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; display: inline-block; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; }
.badge.quiet { background: var(--active); color: var(--text-2); }
.code-tag { font: 600 12px var(--mono); color: var(--text-3); letter-spacing: .02em; }
.ptag { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--text-2); min-width: 0; }
.ptag img, .ptag .pi { width: 18px; height: 18px; border-radius: 5px; flex: none; object-fit: cover; }
.pi { display: inline-flex; align-items: center; justify-content: center; font: 700 9px var(--display); color: #fff; letter-spacing: 0; }

/* ---------- avatars ---------- */
.av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 650; color: #fff; flex: none; overflow: hidden; background: var(--c-grey); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 24px; height: 24px; font-size: 10.5px; } .av.xs { width: 20px; height: 20px; font-size: 9px; }
.av.md { width: 34px; height: 34px; font-size: 14px; } .av.lg { width: 44px; height: 44px; font-size: 16px; } .av.xl { width: 72px; height: 72px; font-size: 25.5px; }
.av.sys { background: var(--ink); color: var(--on-ink); }
.av.sys .mark-dog { width: 60%; }
.av-wrap { position: relative; display: inline-flex; }
.av-wrap .on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); border: 2px solid var(--panel); }
.av-stack { display: inline-flex; } .av-stack .av { border: 2px solid var(--panel); margin-left: -7px; } .av-stack .av:first-child { margin-left: 0; }
.av-more { font-size: 12.5px; color: var(--text-3); margin-left: 4px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; height: 100dvh; }
.shell.sb-anim { overflow: hidden; } .shell.sb-anim .main { will-change: transform; } .shell.sb-anim .sidebar { will-change: width; z-index: 2; }
.shell.mini { --sidebar: 64px; }
.sidebar { background: var(--bg-sub); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; overflow: hidden; overflow: clip; overscroll-behavior: contain; white-space: nowrap; }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px 18px; position: relative; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brand .mark-dog { width: 28px; }
.brand .app-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; }
.brand-name { font: 600 15px var(--display); letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: 12.5px; color: var(--text-3); }
.sb-search { margin: 2px 10px 8px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; flex: none; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); color: var(--text-3); font-size: 14px; }
.sb-search:hover { border-color: var(--border-2); }
.sb-search svg { width: 15px; height: 15px; flex: none; } .sb-search .kbd { margin-left: auto; }
.sb-nav { flex: 1; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; touch-action: pan-y; padding: 0 8px 12px; }
.sb-group { font-size: 12px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; padding: 14px 10px 5px; display: flex; align-items: center; gap: 6px; }
.sb-group button { color: var(--text-3); display: inline-flex; padding: 2px; border-radius: 5px; } .sb-group button:hover { color: var(--text); background: var(--hover); }
.sb-group svg { width: 13px; height: 13px; }
.nav { display: flex; align-items: center; gap: 10px; height: 33px; padding: 0 10px 0 15px; border-radius: 8px; transition: background .15s, color .15s; color: var(--text-2); font-weight: 520; font-size: 14.5px; position: relative; }
.nav svg { width: 17px; height: 17px; flex: none; }
.nav:hover { background: var(--hover); color: var(--text); }
.nav.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.nav.on::before { content: ''; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav .cnt { margin-left: auto; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nav .badge { margin-left: auto; }
.nav .lock { margin-left: auto; width: 13px; height: 13px; color: var(--text-3); }
.nav.sub { height: 30px; font-size: 14px; }
.nav.sub img, .nav.sub .pi { width: 20px; height: 20px; border-radius: 6px; flex: none; object-fit: cover; }
.sb-client { display: flex; align-items: center; gap: 8px; padding: 8px 10px 3px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.sb-foot { border-top: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.me-btn { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: var(--r); text-align: left; flex: 1; min-width: 0; }
.me-btn:hover { background: var(--hover); }
.me-btn .n { font-weight: 600; font-size: 14px; } .me-btn .r { font-size: 12.5px; color: var(--text-3); }
.timer-pill { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 11px; border-radius: var(--r); background: var(--ink); color: var(--on-ink); font-size: 13.5px; }
.timer-pill .t { font: 600 14px var(--mono); }
.timer-pill .ell { opacity: .75; }
.timer-pill.paused .pulse { animation: none; background: var(--warn); } .timer-pill.paused .t { opacity: .6; }
.tc-run { color: var(--bad); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .tc-run.paused { color: var(--warn); } .tc-run.paused .pulse { animation: none; background: var(--warn); }
.stop-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r); padding: 4px; }
.stop-task { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text); } .stop-task:hover { background: var(--hover); } .stop-task.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.timer-pill button { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: inherit; flex: none; }
:root[data-theme="dark"] .timer-pill button { background: rgba(0, 0, 0, .12); }
.timer-pill button svg { width: 13px; height: 13px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; flex: none; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 90, 95, .5); } 50% { opacity: .35; transform: scale(.82); box-shadow: 0 0 0 5px rgba(255, 90, 95, 0); } }
/* collapsed sidebar: width animates, icons keep their x so nothing jumps; labels fade */
.sidebar .lbl, .brand-txt, .sb-search .kbd, .nav .cnt, .sb-group > * { transition: opacity .18s var(--ease); }
.sb-group { position: relative; transition: color .18s; }
.sb-group::before { content: ''; position: absolute; left: 16px; width: 16px; top: 50%; height: 1px; background: var(--border-2); opacity: 0; transition: opacity .18s; }
.sb-expand { position: absolute; left: 16px; top: 15px; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity .16s, background .15s; }
.sb-expand:hover { background: var(--hover); color: var(--text); }
.sb-expand svg { width: 17px; height: 17px; }
.brand .mark-dog { transition: opacity .16s, transform .3s var(--ease); }
.brand .app-mark { transition: opacity .16s, transform .3s var(--ease); }
.sb-head .collapse { transition: opacity .16s; }
.sb-set { transition: width .3s var(--ease), opacity .18s, padding .3s var(--ease); overflow: hidden; }
@media (min-width: 821px) {
  .shell.mini .sidebar .lbl, .shell.mini .brand-txt, .shell.mini .sb-search .kbd, .shell.mini .nav .cnt, .shell.mini .sb-group > *, .shell.mini .sb-head .collapse { opacity: 0; pointer-events: none; }
  .shell.mini .sb-group { color: transparent; }
  .shell.mini .sb-group::before { opacity: 1; }
  .shell.mini .sb-set { width: 0; padding: 0; opacity: 0; border-width: 0; }
  /* folded: the faded labels also stop taking room (after the fade), so the menu has nothing wider than itself to pan to */
  .shell.mini .sidebar .lbl:not(.sb-group), .shell.mini .brand-txt, .shell.mini .nav .cnt { max-width: 0; min-width: 0; flex: 0 0 0; margin: 0; padding: 0; overflow: hidden; transition: opacity .18s var(--ease), max-width 0s .18s; }
  .shell.mini .nav, .shell.mini .sb-search, .shell.mini .me-btn { gap: 0; }
  .shell.mini .sb-head:hover .brand .mark-dog, .shell.mini .sb-head:hover .brand .app-mark { opacity: 0; transform: scale(.8); }
  .shell.mini .sb-head:hover .sb-expand { opacity: 1; pointer-events: auto; }
  .shell.mini .sb-head .collapse { position: absolute; }
  .shell.mini .timer-pill { flex-direction: column; padding: 6px; gap: 4px; }
  .shell.mini .timer-pill .t, .shell.mini .timer-pill .ell { display: none; }
}
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 58px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 24px; border-bottom: 1px solid var(--border); background: var(--bg); }
.topbar h1 { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 9px; min-width: 0; white-space: nowrap; }
.topbar h1 .crumb { color: var(--text-3); font-weight: 520; }
.topbar h1 svg { width: 17px; height: 17px; color: var(--text-3); }
.topbar .spacer { flex: 1; }
.bell { position: relative; }
.bell .badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; font-size: 10.5px; padding: 0 4px; }
.mobile-nav { display: none; }
.view { flex: 1; overflow: auto; min-height: 0; position: relative; scrollbar-gutter: stable; }
.page { max-width: 1840px; margin: 0; padding: 28px 24px 80px; }
.page.wide { max-width: none; }
.page-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-h h2 { font: 600 28px/1.15 var(--display); letter-spacing: -.025em; }
.page-h p { margin: 6px 0 0; color: var(--text-2); }
.sec-h { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.sec-h h3 { font-size: 16px; font-weight: 650; }
.sec-h .sp { flex: 1; }
.sec-h a.more { font-size: 13.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.sec-h a.more:hover { color: var(--text); } .sec-h a.more svg { width: 13px; height: 13px; }

/* ---------- panels, KPIs, tables ---------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.card-h h3 { font-size: 15px; font-weight: 650; }
.card-b { padding: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .k { font-size: 13px; color: var(--text-2); font-weight: 550; display: flex; align-items: center; gap: 6px; }
.kpi .k svg { width: 14px; height: 14px; color: var(--text-3); }
.kpi .v { font: 600 30px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .v small { font: 500 15px var(--font); color: var(--text-3); letter-spacing: 0; margin-left: 3px; }
.kpi .s { font-size: 13px; color: var(--text-3); }
.kpi .s .up { color: var(--ok); } .kpi .s .down { color: var(--bad); }
.kpi.ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.kpi.ink .k, .kpi.ink .s { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }
.meter { height: 6px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width .4s; }
.kpi.ink .meter { background: color-mix(in srgb, var(--on-ink) 18%, transparent); }
.kpi.ink .meter i { background: var(--on-ink); }
.tbl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th { position: sticky; top: 0; z-index: 1; background: var(--bg-sub); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
.table tr.click { cursor: pointer; }
.table td.r, .table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 650; background: var(--bg-sub); border-top: 1px solid var(--border); }
.table .input, .table .select { height: 30px; font-size: 14px; }
.table .cell-in { border-color: transparent; background: transparent; }
.table .cell-in:hover { border-color: var(--border-2); }
.table .cell-in:focus { background: var(--panel); }
.empty { text-align: center; color: var(--text-2); padding: 46px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.empty .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--text-3); }
.empty .ic svg { width: 21px; height: 21px; }
.empty b { color: var(--text); font-size: 15px; }
.stub { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r-lg); border: 1px dashed var(--border-2); background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--hover) 10px 20px); margin-bottom: 18px; font-size: 14px; color: var(--text-2); }
.stub svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.stub b { color: var(--text); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { position: relative; }
.toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); }
.toolbar .search .input { padding-left: 32px; width: 230px; height: 34px; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--panel); font-size: 14px; color: var(--text-2); font-weight: 550; }
.fbtn:hover { background: var(--bg-sub); color: var(--text); }
.fbtn.on { border-style: solid; background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.fbtn svg { width: 14px; height: 14px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; background: var(--ink); color: var(--on-ink); padding: 10px 14px; border-radius: var(--r); font-size: 14px; font-weight: 520; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; animation: up .18s ease-out; max-width: 92vw; }
.toast.err { background: var(--bad); color: #fff; }
.toast button { font-weight: 650; text-decoration: underline; }
@keyframes up { from { transform: translateY(8px); opacity: 0; } }

/* ---------- modal & drawer ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow: auto; animation: fade .14s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; display: flex; flex-direction: column; animation: pop .16s ease-out; border: 1px solid var(--border); }
@keyframes pop { from { transform: translateY(6px) scale(.99); opacity: 0; } }
.modal.wide { max-width: 760px; } .modal.xwide { max-width: 1060px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.modal-head h3 { font-size: 17px; font-weight: 650; flex: 1; }
.modal-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-sub); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.drawer-ov { padding: 0; justify-content: flex-end; align-items: stretch; }
.drawer { background: var(--panel); width: min(1020px, 100vw); height: 100%; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .2s ease-out; border-left: 1px solid var(--border); }
@keyframes slide { from { transform: translateX(28px); opacity: 0; } }

/* ---------- menus ---------- */
.menu { position: fixed; z-index: 2000; background: var(--elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 5px; min-width: 200px; max-height: 70vh; overflow: auto; animation: pop .12s ease-out; }
.mi { display: flex; align-items: center; gap: 9px; width: 100%; padding: 0 9px; height: 32px; border-radius: 7px; font-size: 14px; text-align: left; color: var(--text); }
.mi:hover, .mi.on { background: var(--hover); }
.mi svg { width: 15px; height: 15px; color: var(--text-2); flex: none; }
.mi.danger, .mi.danger svg { color: var(--bad); }
.mi .tick { margin-left: auto; color: var(--accent); display: inline-flex; } .mi .tick svg { color: var(--accent); }
.msep { height: 1px; background: var(--border); margin: 5px 2px; }
.mh { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 7px 9px 4px; }
.msearch { padding: 4px 4px 6px; } .msearch .input { height: 32px; }
.mlist { max-height: 300px; overflow: auto; }

/* ---------- auth ---------- */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; height: 100dvh; overflow: auto; }
.auth-art { background: var(--ink); color: var(--on-ink); padding: 44px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-art h1 { font: 600 40.5px/1.08 var(--display); letter-spacing: -.035em; max-width: 520px; position: relative; }
.auth-art p { color: color-mix(in srgb, var(--on-ink) 65%, transparent); max-width: 460px; font-size: 16px; position: relative; }
.auth-art .keys { position: absolute; right: -40px; top: 90px; display: grid; grid-template-columns: repeat(4, 86px); gap: 14px; transform: rotate(-8deg); opacity: .95; }
.auth-art .keys span { aspect-ratio: 1; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--on-ink) 30%, transparent); border-bottom-width: 7px; display: flex; align-items: center; justify-content: center; font: 700 32px var(--display); color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.auth-art .keys span.hl { background: var(--accent); border-color: rgba(0, 0, 0, .25); color: #fff; }
.auth-art .keys img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.auth-card .logo-stack { align-self: flex-start; align-items: flex-start; margin-bottom: 10px; }
.auth-card h2 { font: 600 25.5px var(--display); letter-spacing: -.02em; }
.auth-card .sub { color: var(--text-2); margin: -6px 0 6px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card .err { color: var(--bad); font-size: 14px; min-height: 18px; }
.auth-card .foot { font-size: 13.5px; color: var(--text-3); }
.splash { height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text); }
.splash .mark-dog { width: 44px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }

/* ---------- home ---------- */
.hello { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.hello h2 { font: 600 32px/1.1 var(--display); letter-spacing: -.03em; }
.hello p { margin: 6px 0 0; color: var(--text-2); }
.goal { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 8px; } @media (min-width: 821px) { .goal.g3 { grid-template-columns: 1.3fr 1fr 1fr; } }
.tline { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tline:last-child { border-bottom: 0; }
.tline:hover { background: var(--hover); }
.tline .t { font-weight: 550; font-size: 14.5px; }
.tline .m { font-size: 13px; color: var(--text-3); display: flex; gap: 8px; align-items: center; }
.act { display: flex; gap: 10px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.act:last-child { border-bottom: 0; }
.act .when { color: var(--text-3); font-size: 12.5px; }
.act a { font-weight: 550; } .act a:hover { text-decoration: underline; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.load-row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 12px; align-items: center; padding: 8px 14px; font-size: 14px; }
.load-bar { height: 10px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; display: flex; }
.load-bar i { display: block; height: 100%; }

/* ---------- board ---------- */
.board-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.board-bar { display: flex; align-items: center; gap: 8px; padding: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.board { flex: 1; display: flex; gap: 12px; padding: 16px 20px 20px; overflow-x: auto; overflow-y: hidden; align-items: flex-start; min-height: 0; }
.bcol { flex: 0 0 292px; display: flex; flex-direction: column; max-height: 100%; background: var(--bg-sub); border: 1px solid var(--border); border-radius: var(--r-lg); min-height: 0; }
.bcol.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.bcol-h { display: flex; align-items: center; gap: 8px; padding: 11px 10px 9px 13px; }
.bcol-h .n { font-weight: 650; font-size: 14.5px; }
.bcol-h .c { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bcol-h .c.over { color: var(--bad); font-weight: 650; }
.bcol-h .sp { flex: 1; }
.bcol-b { flex: 1; overflow-y: auto; padding: 2px 8px 6px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.bcol-f { padding: 4px 8px 8px; }
.bcol-f .btn { width: 100%; justify-content: flex-start; color: var(--text-3); }
.addcard { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r); padding: 8px; box-shadow: 0 0 0 3px var(--focus); }
.addcard textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 14.5px; min-height: 40px; }
.tcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; position: relative; }
.tcard:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.tcard.dragging { opacity: .4; }
.tcard .cover { margin: -10px -11px 2px; height: 120px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: var(--bg-sunk); }
.tcard .cover img { width: 100%; height: 100%; object-fit: cover; }
.tcard .top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tcard .ttl { font-size: 14.5px; font-weight: 550; line-height: 1.35; word-break: break-word; }
.tcard .labels { display: flex; gap: 4px; flex-wrap: wrap; }
.tcard .labels .chip { height: 18px; font-size: 12px; padding: 0 6px; border-radius: 5px; }
.tcard .meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; }
.tcard .meta span { display: inline-flex; align-items: center; gap: 3px; }
.tcard .meta svg { width: 12.5px; height: 12.5px; }
.tcard .tflags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--bad); }
.tcard .tflags span { display: inline-flex; align-items: center; gap: 4px; }
.tcard .tflags svg { width: 12px; height: 12px; }
.tcard .meta .sp { flex: 1; }
.tcard .running { color: var(--bad); font-weight: 600; }
.tcard.prio-urgent { box-shadow: inset 3px 0 0 var(--c-red), var(--shadow-sm); }
.tcard.prio-high { box-shadow: inset 3px 0 0 var(--c-orange), var(--shadow-sm); }
.ttype { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--c); }
.ttype::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.due { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; height: 19px; border-radius: 5px; }
.due.late { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.due.soon { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.due.done { background: var(--ok-soft); color: var(--ok); }
.ckl { display: inline-flex; align-items: center; gap: 3px; }
.ckl.full { color: var(--ok); font-weight: 600; }
/* subtasks: the chip on a card tile opens the tree under the tile; the card sheet has the full editable tree */
.subs-chip { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 5px 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.subs-chip:hover, .subs-chip.open { background: var(--hover); color: var(--text-2); }
.subs-chip.full { color: var(--ok); font-weight: 600; }
.tsubs { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; cursor: default; }
.ts-i { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0 3px calc(var(--d) * 14px); font-size: 13.5px; line-height: 1.35; color: var(--text-2); cursor: pointer; }
.ts-i input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.ts-i span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ts-i.done span { text-decoration: line-through; color: var(--text-3); }
.ts-w { display: inline-flex; flex: none; } .ts-w .av { margin-left: -4px; } .ts-t { flex: none; font-size: 12px; color: var(--text-3); }
.sb-s { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--text-3); } .sb-s .av { margin-right: -2px; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--text-3); }
.sb-dot.p-high, .sb-p.p-high { --pc: var(--bad); } .sb-dot.p-mid, .sb-p.p-mid { --pc: var(--warn); } .sb-dot.p-low, .sb-p.p-low { --pc: var(--text-3); }
.sb-dot[class*=p-] { background: var(--pc); }
.sb-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px calc(var(--d) * 20px + 6px); border-radius: 7px; font-size: 14.5px; }
.sb-item:hover { background: var(--hover); }
.sb-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
.sb-item.done .sb-t { text-decoration: line-through; color: var(--text-3); }
.sb-t.off { cursor: default; color: var(--text-3); }
.sb-t { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.sb-t:hover, .ts-i span:hover { text-decoration: underline; text-decoration-color: var(--text-3); }
.sb-p svg { width: 10px; height: 10px; margin-left: 2px; vertical-align: -1px; }
.sb-p { flex: none; height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; }
.sb-p[class*=p-] { color: var(--pc); border-color: color-mix(in srgb, var(--pc) 40%, transparent); font-weight: 600; }
.sb-item .x { opacity: 0; } .sb-item:hover .x { opacity: 1; }
.sb-form { padding: 3px 0 3px calc(var(--d) * 20px + 6px); }
@media (hover: none) { .sb-item .x { opacity: .6; } }
.addcol { flex: 0 0 260px; }
.lview { padding: 16px 20px 40px; }
.lgroup { margin-bottom: 18px; }
.lgroup-h { display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-weight: 650; font-size: 14.5px; }

/* ---------- task drawer ---------- */
.task { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; min-height: 0; }
.task-main { overflow-y: auto; padding: 18px 26px 40px; min-width: 0; }
.task-side { overflow-y: auto; border-left: 1px solid var(--border); background: var(--bg-sub); padding: 14px 16px 30px; display: flex; flex-direction: column; gap: 14px; }
.task-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.task-title { font: 600 23.5px/1.25 var(--display); letter-spacing: -.02em; border: 0; outline: 0; width: 100%; background: transparent; resize: none; padding: 4px 0; overflow: hidden; }
.task-title:focus { background: var(--bg-sub); border-radius: 8px; }
.tsec { margin-top: 24px; }
.tsec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tsec-h h4 { font-size: 14px; font-weight: 650; }
.tsec-h svg { width: 15px; height: 15px; color: var(--text-3); }
.tsec-h .sp { flex: 1; }
.desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; cursor: text; min-height: 40px; }
.desc:hover { background: var(--hover); }
.desc.empty-d { color: var(--text-3); }
.prop { display: flex; flex-direction: column; gap: 5px; }
.prop > .k { font-size: 12.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.pbtn { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); font-size: 14px; text-align: left; flex-wrap: wrap; width: 100%; }
.pbtn:hover { border-color: var(--border-2); }
.pbtn.empty-p { color: var(--text-3); border-style: dashed; }
.pbtn svg { width: 14px; height: 14px; color: var(--text-3); }
.cl-item { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 7px; font-size: 14.5px; }
.cl-item:hover { background: var(--hover); }
.cl-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none; }
.cl-item.done span { text-decoration: line-through; color: var(--text-3); }
.cl-item .x { opacity: 0; } .cl-item:hover .x { opacity: 1; }
.cl-item span { flex: 1; cursor: text; }
.cmt { display: flex; gap: 10px; padding: 10px 0; }
.cmt .b { flex: 1; min-width: 0; }
.cmt .h { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.cmt .h b { font-size: 14px; } .cmt .h .when { color: var(--text-3); }
.cmt .body { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.cmt .acts { opacity: 0; display: inline-flex; gap: 2px; margin-left: auto; } .cmt:hover .acts { opacity: 1; }
.mention { color: var(--accent-text); font-weight: 600; background: var(--accent-soft); border-radius: 4px; padding: 0 3px; }
.mention.me { background: var(--accent); color: #fff; }
.tasklink { font: 600 13px var(--mono); color: var(--accent-text); }
.alog { font-size: 13.5px; color: var(--text-2); display: flex; gap: 8px; padding: 5px 0; align-items: center; }
.alog .when { color: var(--text-3); margin-left: auto; white-space: nowrap; }
.time-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.time-row:last-child { border-bottom: 0; }
.time-row .x { opacity: 0; } .time-row:hover .x { opacity: 1; }
.progress-time { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); }
.progress-time .big { font: 600 21.5px var(--display); letter-spacing: -.02em; }

/* ---------- composer ---------- */
.composer { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--panel); position: relative; transition: border-color .12s, box-shadow .12s; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; padding: 10px 12px 4px; background: transparent; font-size: 14.5px; line-height: 1.5; min-height: 40px; }
.cbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.cbar .send { margin-left: auto; }
.cfiles { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 10px 0; }
.cfile { display: flex; align-items: center; gap: 7px; padding: 4px 4px 4px 6px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; max-width: 220px; background: var(--bg-sub); position: relative; overflow: hidden; }
.cfile img { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; }
.cfile svg { width: 15px; height: 15px; }
.cfile .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; } .cfile .bar i { display: block; height: 100%; background: var(--accent); }
.ac { position: fixed; background: var(--elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 4px; min-width: 240px; overflow-y: auto; animation: pop .14s var(--ease); }
.ac.out { animation: popOut .1s var(--ease-out) forwards; pointer-events: none; }
.ac-item { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ac-item.on { background: var(--hover); }
.mfiles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mfiles .tile { width: 140px; height: 100px; }
.mfile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); font-size: 14px; min-width: 220px; max-width: 320px; background: var(--panel); }
.mfile:hover { border-color: var(--border-2); }
.mfile .fi { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; }
.mfile svg { width: 16px; height: 16px; color: var(--text-2); }

/* ---------- media tiles ---------- */
.tile { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg-sunk); cursor: pointer; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }
.tile .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile .play i { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s; }
.tile .play i svg { width: 15px; height: 15px; margin-left: 2px; }
.tile:hover .play i { transform: scale(1.08); }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.files-grid .tile { aspect-ratio: 4 / 3; }
.files-grid .ftile { position: relative; }
.files-grid .ftile .x { position: absolute; top: 5px; right: 5px; opacity: 0; background: var(--panel); }
.files-grid .ftile:hover .x { opacity: 1; }
.files-grid .ftile .cap { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }

/* ---------- projects ---------- */
.ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.ptab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); font-size: 14px; font-weight: 550; color: var(--text-2); background: var(--panel); }
.ptab:hover { color: var(--text); }
.ptab.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ptab .n { font-size: 12.5px; opacity: .65; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.pcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); }
.pc-cover { height: 132px; position: relative; overflow: hidden; background: var(--pa, var(--bg-sunk)); }
.pc-cover .shots { position: absolute; inset: 0; display: flex; gap: 6px; padding: 10px 10px 0 72px; transform: rotate(-6deg) translateY(-4px); }
.pc-cover .shots img { width: 64px; height: 138px; border-radius: 9px; object-fit: cover; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.pc-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .25)); }
.pc-icon { position: absolute; left: 14px; bottom: -22px; z-index: 2; width: 54px; height: 54px; border-radius: 14px; border: 3px solid var(--panel); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.pc-icon img, .pc-icon .pi { width: 100%; height: 100%; object-fit: cover; border-radius: 0; font-size: 14px; }
.pc-status { position: absolute; right: 10px; top: 10px; z-index: 2; }
.pc-body { padding: 28px 14px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc-body .nm { font-weight: 650; font-size: 15.5px; }
.pc-body .tg { font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.pc-stats { display: flex; gap: 0; border-top: 1px solid var(--border); }
.pc-stats div { flex: 1; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--border); }
.pc-stats div:last-child { border-right: 0; }
.pc-stats b { font: 600 16px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-stats span { font-size: 12px; color: var(--text-3); }
.pc-month { height: 4px; background: var(--bg-sunk); } .pc-month i { display: block; height: 100%; background: var(--accent); }
.phero { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--pa, var(--ink)); color: #fff; padding: 26px; display: flex; gap: 20px; align-items: flex-end; min-height: 210px; }
.phero .bgshots { position: absolute; left: 52%; top: -30px; display: flex; gap: 12px; transform: rotate(-7deg); opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.phero .grow { max-width: 50%; flex: 1 0 240px; }
.phero .bgshots img { width: 110px; height: 236px; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.phero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 100%); z-index: 1; }
.phero > * { position: relative; z-index: 2; }
.phero .ic { width: 92px; height: 92px; border-radius: 22px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .9); flex: none; background: #fff; }
.phero .ic img, .phero .ic .pi { width: 100%; height: 100%; object-fit: cover; font-size: 21.5px; }
.phero h2 { font: 600 32px/1.1 var(--display); letter-spacing: -.03em; }
.phero p { margin: 6px 0 0; opacity: .85; max-width: 560px; }
.phero .chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.phero .chip { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.phero .acts { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-self: flex-start; max-width: 60%; }
.phero .acts .btn { background: rgba(255, 255, 255, .92); color: #111; border-color: rgba(255, 255, 255, .9); border-bottom-color: rgba(0, 0, 0, .3); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 18px 0 20px; overflow-x: auto; }
.tab { height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 550; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-color: var(--ink); }
.tab svg { width: 15px; height: 15px; }
.tab .n { font-size: 12.5px; color: var(--text-3); }
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brief .bi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 15px; }
.brief .bi.full { grid-column: 1 / -1; }
.brief .bi h5 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; }
.brief .bi div { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.brief .bi ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; }
.links { display: flex; flex-direction: column; gap: 8px; }
.link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); font-size: 14px; }
.link:hover { border-color: var(--border-2); }
.link .li { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-sunk); display: flex; align-items: center; justify-content: center; flex: none; }
.link .li svg { width: 16px; height: 16px; }
.shots-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.shots-row img { height: 300px; border-radius: 14px; flex: none; cursor: zoom-in; }
.desc-clamp { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-height: 190px; overflow: hidden; position: relative; }
.desc-clamp.open { max-height: none; }
.desc-clamp:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--bg)); }

/* ---------- creatives ---------- */
.month-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; position: sticky; top: 0; background: var(--bg); z-index: 3; padding: 8px 0; }
.month-h h3 { font: 600 18px var(--display); letter-spacing: -.02em; text-transform: capitalize; }
.month-h .line { flex: 1; height: 1px; background: var(--border); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ctile { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ctile .tile { aspect-ratio: 9 / 16; border-radius: 13px; border: 1px solid var(--border); }
.ctile .tile.land { aspect-ratio: 16 / 9; }
.ctile .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(160deg, var(--pa, #444), color-mix(in srgb, var(--pa, #444) 45%, #000)); color: #fff; padding: 12px; text-align: center; }
.ctile .ph img { width: 46px; height: 46px; border-radius: 12px; }
.ctile .ph span { font: 600 11px var(--mono); opacity: .85; word-break: break-all; }
.ctile .ph small { font-size: 11px; opacity: .7; }
.ctile .st { position: absolute; left: 7px; top: 7px; z-index: 2; }
.ctile .st .chip { background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); height: 20px; font-size: 12px; }
.ctile .st .chip.dot::before { background: var(--c); }
.ctile .dur { position: absolute; right: 7px; bottom: 7px; z-index: 2; font: 600 12px var(--mono); color: #fff; background: rgba(0, 0, 0, .55); padding: 1px 5px; border-radius: 5px; }
.ctile .nm { font-size: 13px; font-weight: 600; font-family: var(--mono); }
.ctile .sub { font-size: 12.5px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.ctile .sub .ptag { font-size: 12.5px; }
.dropzone { border: 2px dashed var(--border-2); border-radius: var(--r-xl); padding: 26px; text-align: center; color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.dropzone .ic svg { width: 20px; height: 20px; }
.dropzone b { color: var(--text); }
.upl { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.upl:last-child { border-bottom: 0; }
.upl .thumb { width: 34px; height: 50px; border-radius: 6px; background: var(--bg-sunk); flex: none; overflow: hidden; }
.upl .thumb img { width: 100%; height: 100%; object-fit: cover; }
.upl .pbar { height: 4px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; margin-top: 4px; }
.upl .pbar i { display: block; height: 100%; background: var(--accent); }
.months-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.mbtn { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); min-width: 92px; font-size: 13px; color: var(--text-2); }
.mbtn b { font: 600 18px var(--display); color: var(--text); letter-spacing: -.02em; }
.mbtn.on { background: var(--ink); color: color-mix(in srgb, var(--on-ink) 70%, transparent); border-color: var(--ink); }
.mbtn.on b { color: var(--on-ink); }

/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; background: rgba(8, 8, 10, .94); display: grid; grid-template-columns: minmax(0, 1fr) 340px; animation: fade .15s; }
.viewer.solo { grid-template-columns: minmax(0, 1fr); }
.viewer .stage { min-width: 0; } .viewer .media:has(.drive-box) { width: 100%; justify-content: center; } .viewer .media .drive-box { width: 100%; } .viewer .media .drive-frame { width: 100%; max-width: 1100px; }
.viewer .stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 30px 70px; min-height: 0; }
.viewer .media { max-width: 100%; max-height: 100%; display: flex; }
.viewer .media video, .viewer .media img { max-height: calc(100vh - 60px); max-width: 100%; border-radius: 12px; }
.viewer .close { position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: flex; align-items: center; justify-content: center; }
.viewer .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: flex; align-items: center; justify-content: center; }
.viewer .nav-btn.l { left: 16px; } .viewer .nav-btn.r { right: 16px; }
.viewer .close:hover, .viewer .nav-btn:hover { background: rgba(255, 255, 255, .2); }
.viewer .info { background: var(--panel); overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- palette & notifications ---------- */
.palette { max-width: 620px; }
.palette .modal-body { padding: 10px; gap: 6px; }
.palette .input { height: 44px; font-size: 16px; border: 0; box-shadow: none !important; background: transparent; }
.palette .res { max-height: 55vh; overflow: auto; border-top: 1px solid var(--border); padding-top: 6px; }
.palette .rh { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 650; padding: 9px 10px 4px; }
.palette .ri { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.palette .ri.on { background: var(--hover); }
.palette .ri svg { width: 16px; height: 16px; color: var(--text-2); }
.palette .ri .k { margin-left: auto; font-size: 13px; color: var(--text-3); }
.notif-pop { width: 380px; padding: 0; }
.notif-pop .nh { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 650; }
.notif-pop .nh button { margin-left: auto; font-size: 13px; color: var(--accent-text); font-weight: 550; }
.notif-pop .nh button + button { margin-left: 10px; color: var(--text-3); }
.notif-pop .nh button svg { width: 14px; height: 14px; }
.notif { display: flex; gap: 10px; padding: 10px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.notif:hover { background: var(--hover); }
.notif.unread { background: var(--accent-soft); }
.notif .when { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* ---------- time ---------- */
.week { display: grid; grid-template-columns: 260px repeat(7, minmax(64px, 1fr)) 80px; }
.week > div { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; align-items: center; min-width: 0; }
.week .hd { font-size: 12.5px; color: var(--text-3); font-weight: 600; background: var(--bg-sub); flex-direction: column; align-items: flex-start; gap: 0; }
.week .hd b { color: var(--text); font-size: 14px; }
.week .hd.today { color: var(--accent-text); } .week .hd.today b { color: var(--accent-text); }
.week .cell { justify-content: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.week .cell:hover { background: var(--hover); }
.week .cell.z { color: var(--text-3); }
.week .tot { justify-content: flex-end; font-weight: 650; font-variant-numeric: tabular-nums; }
.week .foot { background: var(--bg-sub); font-weight: 650; }
.hbars { display: flex; flex-direction: column; gap: 2px; }
.hbar { display: grid; grid-template-columns: 180px 1fr 84px; gap: 12px; align-items: center; padding: 7px 14px; font-size: 14px; }
.hbar .track { height: 10px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; }
.hbar .track i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.hbar .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cols-chart { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding: 10px 14px 0; }
.cols-chart .cc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.cols-chart .cc i { width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px; background: var(--ink); display: block; min-height: 2px; position: relative; }
.cols-chart .cc i.cur { background: var(--accent); }
.cols-chart .cc span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cols-chart .cc b { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- team & roles ---------- */
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.matrix tr.grp td { text-align: left; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding-top: 18px; }
.matrix tr.adm b { display: inline-flex; align-items: center; gap: 6px; } .matrix tr.adm b svg { width: 13px; height: 13px; color: var(--text-3); }
.prow { display: flex; align-items: center; gap: 12px; }
.prow .n { font-weight: 600; } .prow .e { font-size: 13px; color: var(--text-3); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 22px; height: 22px; border-radius: 6px; background: var(--c); border: 2px solid transparent; }
.swatches button.on { border-color: var(--text); }
.settings-nav { display: flex; flex-direction: column; gap: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid-main { grid-template-columns: 1fr; }
  .goal { grid-template-columns: 1fr 1fr; }
  .task { grid-template-columns: 1fr; }
  .task-side { border-left: 0; border-top: 1px solid var(--border); }
  .drawer { overflow-y: auto; }
  .task { height: auto; }
  .task-main, .task-side { overflow: visible; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 300; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .mobile-nav { display: inline-flex; }
  .topbar { padding: 0 10px; }
  .page { padding: 20px 16px 70px; }
  .grid-2, .grid-3, .brief, .form-grid { grid-template-columns: 1fr; }
  .goal { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .phero { flex-direction: column; align-items: flex-start; }
  .phero .acts { margin-left: 0; }
  .phero .bgshots { opacity: .35; left: 30%; }
  .phero .grow { max-width: none; }
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .viewer .info { max-height: 40vh; }
  .viewer .stage { padding: 20px; }
  .hbar { grid-template-columns: 110px 1fr 60px; }
  .load-row { grid-template-columns: 110px 1fr 54px; }
  .toolbar .search .input { width: 160px; }
  .week { grid-template-columns: 150px repeat(7, 54px) 64px; overflow-x: auto; }
}

/* ================= board (Knopa Board behaviour, hub look) ================= */
.board-wrap { position: relative; }
.board-bar { gap: 10px; }
.board-bar .on-ghost { background: var(--active); color: var(--text); }
.board-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.board.kb-lane { gap: 12px; cursor: default; }
.board.panning { cursor: grabbing; user-select: none; }
.bcol { flex: 0 0 286px; }
.bcol-h { cursor: grab; padding: 9px 8px 7px 10px; gap: 4px; }
.list-title { flex: 1; min-width: 0; border: 0; background: transparent; font: 650 14.5px var(--font); color: var(--text); padding: 4px 6px; border-radius: 7px; cursor: grab; outline: none; }
.list-title:focus { background: var(--panel); box-shadow: 0 0 0 2px var(--focus); cursor: text; }
.bcol.collapsed { flex: 0 0 44px; align-items: center; padding: 10px 0; gap: 10px; cursor: pointer; color: var(--text-2); }
.bcol.collapsed:hover { background: var(--hover); }
.bcol.collapsed .cnt { font-size: 13px; font-weight: 650; background: var(--panel); border-radius: 999px; padding: 1px 8px; }
.bcol.collapsed .vt { writing-mode: vertical-rl; font-weight: 650; font-size: 14px; white-space: nowrap; }
.bcol.drop-hover { outline: 2px dashed var(--accent); }
.add-card { width: 100%; justify-content: flex-start; color: var(--text-3); }
.addcol { flex: 0 0 260px; } .addcol .input { height: 38px; }
.dnd-ghost { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; box-shadow: var(--shadow-lg) !important; opacity: .96; }
.drag-src { display: none !important; }
.ph-card { border: 2px dashed var(--border-2); border-radius: var(--r); background: var(--hover); flex: none; }
.ph-list { flex: 0 0 286px; border: 2px dashed var(--border-2); border-radius: var(--r-lg); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
.tcard.kbc { gap: 6px; padding: 9px 10px; }
.tcard.kbc.has-cover { padding-top: 0; }
.tcard.kbc .cover { margin: 0 -10px 4px; height: auto; max-height: 180px; }
.tcard.kbc .cover img { height: auto; max-height: 180px; }
.tcard.rec { box-shadow: 0 0 0 2px var(--bad), var(--shadow-sm); }
.tcard.rec.paused { box-shadow: 0 0 0 2px var(--warn), var(--shadow-sm); }
.tcard.late { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }

.lchip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; font-size: 12px; font-weight: 650; background: color-mix(in srgb, var(--c, var(--c-grey)) 16%, transparent); color: var(--c, var(--c-grey)); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lchip.big { height: 24px; font-size: 13px; padding: 0 9px; cursor: pointer; }
.lchip .chip-x { margin-left: 4px; color: inherit; opacity: .6; } .lchip .chip-x:hover { opacity: 1; }
.gtag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 550; min-width: 0; }
.gtag img, .gtag .pi { width: 16px; height: 16px; border-radius: 4px; }
.tcard .ttl { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tcard .gtag { flex-wrap: wrap; row-gap: 4px; }
.tcard .gtag > .ell { flex: 0 1 auto; margin-right: 2px; }
.tcard .gtag .lchip { height: 16px; font-size: 11px; padding: 0 5px; border-radius: 4px; }
.tmini { color: var(--text-3); }
.tcard.kbc .meta { gap: 7px; }
.tcard.kbc .meta .av-stack { margin-left: auto; }
.tmini i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; background: var(--bg-sunk); overflow: hidden; margin-right: 2px; }
.tmini b { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.tmini.near b { background: var(--warn); } .tmini.over b { background: var(--bad); } .tmini.over { color: var(--bad); }
.tbar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tbar .trk { flex: 1; height: 5px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; }
.tbar .trk i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.tbar.low .trk i { background: var(--c-orange); } .tbar.ok .trk i { background: var(--ok); } .tbar.over .trk i { background: var(--bad); } .tbar.over { color: var(--bad); }
/* tile: spent against the estimate as a long bar under the meta (orange < 80 %, green 80–110 %, red over) */
.tspent { height: 4px; border-radius: 3px; background: var(--bg-sunk); overflow: hidden; margin-top: 8px; }
.tspent i { display: block; height: 100%; border-radius: 3px; background: var(--c-orange); }
.tspent.ok i { background: var(--ok); } .tspent.over i { background: var(--bad); }
.thr { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; } .thr.over { color: var(--bad); font-weight: 600; }
/* readiness: Static approved orange, Test animation violet, Full animation green */
.stage { display: inline-flex; align-items: center; gap: 2px; --sc: var(--text-3); }
.stage i { width: 9px; height: 5px; border-radius: 2px; background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.stage i.on { background: var(--sc); box-shadow: none; }
.stage.s-static { --sc: var(--c-orange); } .stage.s-test { --sc: var(--c-violet); } .stage.s-full { --sc: var(--c-green); }
.cm-new { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; }
.tcard.land { animation: land .45s ease-out; }
@keyframes land { 0% { transform: scale(1.03); box-shadow: var(--shadow-lg); } }
.tcard.celebrate { animation: cel 1s ease-out; }
@keyframes cel { 0% { transform: scale(1); } 20% { transform: scale(1.04); box-shadow: 0 0 0 3px var(--ok); } 100% { transform: scale(1); } }
.burst { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 3; }
.burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--c); animation: burst .9s ease-out forwards; }
@keyframes burst { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(calc(var(--d) * 3)); opacity: 0; } }
.kb-drawer { position: absolute; right: 0; top: 56px; bottom: 0; width: min(400px, 100%); background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 20; display: flex; flex-direction: column; animation: slide .18s ease-out; }
.dr-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dr-b { flex: 1; overflow-y: auto; padding: 12px 14px 30px; display: flex; flex-direction: column; gap: 6px; }
.dr-b .alog { align-items: flex-start; font-size: 14px; }
.dr-b a { text-decoration: underline; text-decoration-color: var(--border-2); }
.eyebrow { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 6px 0 2px; }
.arow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
/* popovers */
.kb-pop { padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 76vh; overflow: auto; }
.pop-h { display: flex; align-items: center; justify-content: space-between; font-weight: 650; font-size: 15px; }
.plist { display: flex; flex-direction: column; gap: 1px; }
.frow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 6px; border-radius: 7px; font-size: 14px; text-align: left; min-width: 0; }
.frow:hover { background: var(--hover); }
.frow .cb { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.frow[aria-pressed="true"] .cb { background: var(--accent); border-color: var(--accent); }
.frow .cb svg { width: 12px; height: 12px; }
.lbar { flex: 1; padding: 5px 9px; border-radius: 6px; background: color-mix(in srgb, var(--c, var(--c-grey)) 18%, transparent); color: var(--c, var(--c-grey)); font-weight: 650; font-size: 13.5px; }
.lrow { display: flex; align-items: center; gap: 6px; }
.lsw { width: 26px; height: 26px; border-radius: 7px; background: var(--c, var(--c-grey)); flex: none; }
.swatches button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; }
.swatches button.on { border-color: var(--text); }
/* card sheet */
.sheet-modal { max-width: 1100px; padding: 0; overflow: hidden; }
.sheet-modal > .modal-body { padding: 0; gap: 0; }
.sheet-modal.drop-on, .sheet-modal .drop-on { outline: 3px dashed var(--accent); outline-offset: -6px; }
.sh-top { padding: 12px 16px; } /* equal space above and below, so the buttons do not sit on the edge of the comments panel */
.sh-top + .sh-body .sh-main { padding-top: 0; } /* the title keeps its place: the space moved from the body into the top strip */
.sh-cover { position: relative; max-height: 240px; overflow: hidden; background: var(--bg-sunk); display: flex; justify-content: center; }
.sh-cover img { max-height: 240px; object-fit: contain; }
.sh-cover .sh-tools { position: absolute; left: 0; right: 0; top: 0; padding: 12px 16px; background: linear-gradient(rgba(0,0,0,.35), transparent); }
.sh-tools { display: flex; align-items: center; gap: 8px; }
.sh-tools .lpill { flex: 0 1 auto; min-width: 0; } .sh-tools .lpill.game { flex-shrink: 8; min-width: 52px; } .sh-tools .lpill[data-a=area] { flex: none; } .sh-tools .lpill select { min-width: 0; text-overflow: ellipsis; } .sh-tools .lpill .ell { min-width: 0; white-space: nowrap; } .sh-tools .rbtn { flex: none; } @media (max-width: 480px) { .sh-tools { gap: 6px; } .sh-tools .lpill > svg:last-child { display: none; } } /* phone: no room for the arrows, the names stay readable */ /* long names shrink, the ⋯ and × buttons stay on a phone */
.lpill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.lpill select { appearance: none; border: 0; background: transparent; font: inherit; padding-right: 4px; cursor: pointer; outline: none; }
.lpill svg { width: 13px; height: 13px; color: var(--text-3); }
.lpill.game img, .lpill.game .pi { width: 18px; height: 18px; border-radius: 5px; }
.rbtn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border); color: var(--text-2); }
.rbtn:hover { color: var(--text); }
.sh-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: min(80vh, 860px); min-height: 0; }
.sh-main { overflow-y: auto; padding: 10px 24px 40px; min-width: 0; }
.sh-side { border-left: 1px solid var(--border); background: var(--bg-sub); display: flex; flex-direction: column; min-height: 0; padding: 14px; gap: 10px; }
.sh-side .feed { flex: 1; overflow-y: auto; }
.side-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.side-h svg { width: 16px; height: 16px; color: var(--text-3); }
.archived-bar, .late-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); margin: 8px 0; font-size: 14px; flex-wrap: wrap; }
.archived-bar { background: var(--warn-soft); } .late-bar { background: var(--bad-soft); color: var(--bad); }
.archived-bar svg, .late-bar svg { width: 16px; height: 16px; }
.kmeta { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 12px 0 6px; }
.mg .ml { font-size: 12.5px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.mg .mv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.rnd { width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--border-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.rnd:hover { border-color: var(--accent); color: var(--accent); }
.avbtn { border-radius: 50%; }
.dchip, .pchip, .tchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--panel); font-size: 14px; font-weight: 550; }
.dchip svg, .tchip svg { width: 14px; height: 14px; }
.dchip.late { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .dchip.soon { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .dchip.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pchip { color: var(--ok); font-family: var(--mono); } .pchip.empty { color: var(--text-3); border-style: dashed; font-family: var(--font); }
.tchip.on { background: var(--bad); border-color: var(--bad); color: #fff; } .tchip.on.paused { background: var(--warn); border-color: var(--warn); }
.desc-empty { width: 100%; text-align: left; padding: 14px; border-radius: var(--r); border: 1px dashed var(--border-2); color: var(--text-3); font-size: 14.5px; }
.desc-empty:hover { background: var(--hover); }
.desc.clamp { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.md { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } .md p { margin: 0 0 8px; } .md ul, .md ol { margin: 0 0 8px; padding-left: 20px; } .md h4, .md h5 { margin: 12px 0 6px; } .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--border-2); color: var(--text-2); }
.md a, .cmt .body a { color: var(--accent-text); text-decoration: underline; } .md code, .cmt code { font-family: var(--mono); font-size: .9em; background: var(--bg-sunk); padding: 1px 4px; border-radius: 4px; }
.more { font-size: 13.5px; color: var(--accent-text); font-weight: 600; margin-top: 4px; }
.progress { height: 6px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; margin-bottom: 8px; } .progress i { display: block; height: 100%; background: var(--ok); }
.kfiles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.kfile { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); }
.kfile .th { width: 64px; height: 48px; border-radius: 7px; background: var(--bg-sunk); flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; font: 700 12px var(--mono); color: var(--text-3); text-transform: uppercase; position: relative; }
.kfile.media .th { cursor: pointer; }
.kfile .th img, .kfile .th video { width: 100%; height: 100%; object-fit: cover; }
.kfile .th .playov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.25); }
.kfile .th .pl { font: 700 10.5px var(--display); color: var(--accent-text); }
.kfile .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kfile .meta a { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfile .meta small { color: var(--text-3); font-size: 12.5px; }
.vtag { font: 700 11px var(--mono); color: #fff; background: var(--ink); padding: 1px 5px; border-radius: 4px; margin-right: 6px; }
:root[data-theme="dark"] .vtag { color: var(--on-ink); }
.kdz { flex-direction: row; padding: 12px; font-size: 14px; margin-bottom: 8px; border-width: 1.5px; text-align: left; justify-content: flex-start; }
.kdz svg { width: 16px; height: 16px; flex: none; }
.manual { display: grid; grid-template-columns: 150px 80px 80px 1fr auto; gap: 8px; margin-bottom: 10px; }
.manual .full { grid-column: auto; }
.crew { display: flex; flex-direction: column; gap: 8px; }
.mate { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.mate.me { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.mate-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mate-h .n { font-weight: 600; flex: 1; min-width: 0; } .mate-h .n small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.mate-h .nums { color: var(--text-2); font-variant-numeric: tabular-nums; } .mate-h .late { color: var(--bad); }
.lnk { font-size: 13px; color: var(--accent-text); font-weight: 600; }
.est-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.est-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.mine { margin-top: 10px; font-size: 14px; } .mine summary { cursor: pointer; color: var(--text-2); font-weight: 550; }
.entries { display: flex; flex-direction: column; margin-top: 6px; }
.entry { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.tcchip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--ink); color: var(--on-ink); font-size: 12px; margin: 2px 0; }
.sh-side .cmt { padding: 8px 0; }
/* media viewer */
.kviewer { position: fixed; inset: 0; background: #0b0b0d; color: #eee; display: flex; flex-direction: column; animation: fade .15s; }
.kviewer .vtop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.kviewer .vtitle { display: flex; flex-direction: column; min-width: 0; } .kviewer .vtitle small { color: #999; }
.kviewer .vers { display: flex; gap: 4px; } .kviewer .vers button { height: 28px; padding: 0 10px; border-radius: 7px; font: 700 13px var(--mono); color: #aaa; background: rgba(255,255,255,.06); }
.kviewer .vers button.on { background: #fff; color: #111; }
.vbtn { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #ddd; position: relative; }
.vbtn:hover, .vbtn.on { background: rgba(255,255,255,.12); color: #fff; } .vbtn.big { width: 40px; height: 40px; }
.vbtn .slash { position: absolute; width: 20px; height: 2px; background: currentColor; transform: rotate(-45deg); }
.kviewer .vbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.kviewer .vmain { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; }
.kviewer .vstage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px; }
.kviewer .vstage video, .kviewer .vstage img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.kviewer .vstage.img { cursor: zoom-in; overflow: auto; } .kviewer .vstage.img.zoom { cursor: zoom-out; align-items: flex-start; } .kviewer .vstage.img.zoom img { max-width: none; max-height: none; }
.kviewer .phone { width: 360px; aspect-ratio: 9/19.5; max-height: 100%; border-radius: 30px; border: 10px solid #222; overflow: hidden; background: #000; }
.kviewer .phone.land { width: auto; height: 360px; aspect-ratio: 19.5/9; }
.kviewer .phone iframe { width: 100%; height: 100%; border: 0; }
.vctl { padding: 8px 14px 12px; background: #111; }
.scrub { position: relative; height: 14px; cursor: pointer; margin-bottom: 6px; }
.scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); }
.scrub i { position: absolute; left: 0; top: 5px; height: 4px; border-radius: 4px; } .scrub .buf { background: rgba(255,255,255,.25); } .scrub .pos { background: #9476ff; }
.scrub .mark { position: absolute; top: 0; width: 10px; height: 14px; margin-left: -5px; border-radius: 3px; background: #ffb547; border: 2px solid #111; }
.vrow { display: flex; align-items: center; gap: 4px; }
.tcode { font-size: 14px; margin-left: 8px; } .tcode small { color: #888; }
.vsel { background: rgba(255,255,255,.08); color: #ddd; border: 0; border-radius: 7px; height: 30px; padding: 0 6px; }
.vvol { width: 80px; accent-color: #9476ff; }
.kviewer .vside { background: var(--panel); color: var(--text); display: flex; flex-direction: column; padding: 14px; gap: 10px; min-height: 0; }
.kviewer .vside .feed { flex: 1; overflow-y: auto; }
.vform { display: flex; flex-direction: column; gap: 8px; } .vform .textarea { min-height: 60px; }
.cmt.flash { animation: flash 1.2s; } @keyframes flash { 0%, 40% { background: var(--accent-soft); } }
/* timeline */
.tl-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 20px 16px; gap: 10px; }
.tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-scroll { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); position: relative; }
.tl-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--bg-sub); border-bottom: 1px solid var(--border); }
.tl-corner { position: sticky; left: 0; z-index: 5; width: var(--lbl); flex: none; padding: 10px 12px; font-size: 12.5px; font-weight: 650; color: var(--text-3); background: var(--bg-sub); border-right: 1px solid var(--border); display: flex; align-items: flex-end; }
.tl-axis { position: relative; height: 52px; flex: none; }
.tl-months { position: absolute; left: 0; right: 0; top: 0; height: 22px; } .tl-m { position: absolute; top: 0; height: 22px; border-left: 1px solid var(--border); padding: 3px 8px; font-size: 12.5px; font-weight: 650; text-transform: capitalize; white-space: nowrap; overflow: hidden; }
.tl-days { position: absolute; left: 0; right: 0; top: 22px; height: 30px; } .tl-d { position: absolute; top: 0; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); }
.tl-d small { font-size: 10px; color: var(--text-3); text-transform: uppercase; } .tl-d.we { background: var(--hover); } .tl-d.today { background: var(--accent); color: #fff; border-radius: 6px; } .tl-d.today small { color: #fff; }
.tl-group, .tl-row { display: flex; } .tl-group { background: var(--bg-sub); border-top: 1px solid var(--border); }
.tl-gl { position: sticky; left: 0; z-index: 3; width: var(--lbl); flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-weight: 650; font-size: 13.5px; background: var(--bg-sub); border-right: 1px solid var(--border); min-width: 0; }
.tl-gl small { color: var(--text-3); margin-left: auto; } .tl-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tl-gr, .tl-lane { position: relative; flex: none; } .tl-gr { height: 32px; } .tl-lane { height: 38px; }
.tl-lbl { position: sticky; left: 0; z-index: 3; width: var(--lbl); flex: none; text-align: left; padding: 0 12px 0 28px; font-size: 13.5px; background: var(--panel); border-right: 1px solid var(--border); display: flex; align-items: center; min-width: 0; }
.tl-lbl:hover { color: var(--accent-text); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .35; }
.tl-bar { position: absolute; top: 6px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--lc) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--lc) 55%, transparent); display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 13px; font-weight: 600; cursor: grab; overflow: hidden; white-space: nowrap; user-select: none; }
.tl-bar.drag { box-shadow: var(--shadow-lg); cursor: grabbing; z-index: 2; } .tl-bar.done { opacity: .55; } .tl-bar.late { border-color: var(--bad); }
.tl-bar .tl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tl-bar.narrow .tl-t { font-size: 12px; }
.tl-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; } .tl-h.l { left: 0; } .tl-h.r { right: 0; }
.tl-late { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); flex: none; }
/* workload */
.kb-page { flex: 1; overflow: auto; }
.wrow { overflow: hidden; } .whead { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; }
.whead:hover { background: var(--hover); }
.whead .who { display: flex; flex-direction: column; width: 180px; min-width: 0; }
.wbar { flex: 1; height: 10px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; } .wbar i { display: block; height: 100%; background: var(--ink); } .wbar.near i { background: var(--warn); } .wbar.over i { background: var(--bad); }
.wnum { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.wmeta { display: flex; gap: 10px; font-size: 13px; color: var(--text-3); width: 230px; }
.whead > svg { width: 15px; height: 15px; color: var(--text-3); }
.wcards { border-top: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; }
.wcard { display: grid; grid-template-columns: 1fr 180px 90px 140px; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; text-align: left; font-size: 14px; }
.wcard:hover { background: var(--hover); }
/* time report */
.rtable { overflow: hidden; } .rrow { border-bottom: 1px solid var(--border); } .rrow:last-child { border-bottom: 0; }
.rrow summary { display: grid; grid-template-columns: minmax(0, 1fr) 220px 90px; gap: 14px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.rrow summary::-webkit-details-marker { display: none; } .rrow summary:hover { background: var(--hover); }
.rname { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; min-width: 0; }
.rrow .bar { height: 8px; border-radius: 5px; background: var(--bg-sunk); overflow: hidden; } .rrow .bar i { display: block; height: 100%; background: var(--ink); border-radius: 5px; }
.rv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14px; }
.rrow .sub { padding: 2px 14px 10px 48px; } .subrow { display: flex; gap: 12px; justify-content: space-between; font-size: 13.5px; padding: 4px 0; color: var(--text-2); border-top: 1px dashed var(--border); }
/* people */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pcard2 { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--panel); transition: transform .15s, box-shadow .15s; }
.pcard2:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pcard2 .nm { font-weight: 650; font-size: 16px; } .pcard2 p { margin: 0; font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.onl { color: var(--ok); font-size: 13px; font-weight: 600; }
.skills { display: flex; flex-wrap: wrap; gap: 5px; }
.skill { font-size: 12.5px; font-weight: 550; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunk); color: var(--text-2); border: 1px solid transparent; }
button.skill { cursor: pointer; } button.skill.on { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.skills.big .skill { font-size: 14px; padding: 5px 12px; }
.uhero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pc-stores { display: flex; gap: 6px; padding: 0 14px 10px; }
.pc-stores a { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.pc-stores a:hover { color: var(--text); background: var(--hover); } .pc-stores svg { width: 13px; height: 13px; }
.prule { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--border); }
.lbl2 { display: inline; }
@media (max-width: 1100px) { .sh-body { grid-template-columns: 1fr; height: auto; max-height: 86vh; overflow-y: auto; } .sh-main { overflow: visible; } .sh-side { border-left: 0; border-top: 1px solid var(--border); } .sh-side .feed { overflow: visible; } }
@media (max-width: 820px) {
  .lbl2 { display: none; } .bcol, .ph-list { flex-basis: 84vw; }
  .kviewer .vbody { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .kviewer .vside { max-height: 40vh; }
  .manual { grid-template-columns: 1fr 1fr 1fr; } .manual .full { grid-column: 1 / -1; }
  .whead { flex-wrap: wrap; } .whead .who { width: auto; flex: 1; } .wmeta { width: 100%; } .wcard { grid-template-columns: 1fr; gap: 2px; }
  .rrow summary { grid-template-columns: 1fr 70px; } .rrow .bar { display: none; }
  .sheet-modal { max-width: 100%; }
}

/* ---------- motion: everything that opens also closes smoothly ---------- */
.overlay { animation: fade .2s var(--ease); }
.overlay.out { animation: fadeOut .18s var(--ease-out) forwards; pointer-events: none; }
.modal { animation: pop .24s var(--ease); }
.overlay.out .modal { animation: popOut .18s var(--ease-out) forwards; }
.drawer { animation: slideIn .3s var(--ease); }
.overlay.out .drawer { animation: slideOut .22s var(--ease-out) forwards; }
.menu { animation: pop .16s var(--ease); transform-origin: top; }
.menu.out { animation: popOut .12s var(--ease-out) forwards; pointer-events: none; }
.toast { animation: up .24s var(--ease); }
.toast.out { animation: downOut .18s var(--ease-out) forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes pop { from { transform: translateY(6px) scale(.985); opacity: 0; } }
@keyframes popOut { to { transform: translateY(4px) scale(.985); opacity: 0; } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes slideOut { to { transform: translateX(48px); opacity: 0; } }
@keyframes downOut { to { transform: translateY(8px); opacity: 0; } }
.kb-drawer { animation: slideIn .3s var(--ease); }
.kb-drawer.out { animation: slideOut .22s var(--ease-out) forwards; pointer-events: none; }
.view > * { animation: viewIn .18s ease-out; }
.view.soft > * { animation: none; }
@keyframes viewIn { from { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.me-card { display: flex; align-items: center; gap: 10px; padding: 8px 9px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.person-pop { width: 300px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pp-head { display: flex; gap: 12px; align-items: center; }
.pp-head b { font-size: 16px; display: block; }
.pp-sub { display: flex; gap: 6px; align-items: center; margin: 2px 0; font-size: 13px; min-width: 0; }
.role-tag { font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.pp-about { margin: 0; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; max-height: 90px; overflow: auto; }
.skills.sm .skill { font-size: 12px; padding: 2px 8px; }
.pres { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); margin-right: 5px; vertical-align: middle; } .pres.on { background: var(--ok); }
.av[data-uid] { cursor: pointer; }
.tcard .av[data-uid], button .av[data-uid], a .av[data-uid] { cursor: inherit; }

/* ---------- облік ---------- */
.acct .page-h { margin-bottom: 4px; }
.acct .tabs { margin: 14px 0 20px; }
.acct .tab .badge { margin-left: 2px; }
.acct-body { animation: viewIn .28s var(--ease); }
.acct-upd { font-size: 13px; margin-right: 4px; white-space: nowrap; }
.btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kpis.sm { margin: 0 0 16px; } .kpis.sm .kpi .v { font-size: 23.5px; }
.acct .kpi { position: relative; overflow: hidden; }
.kpi .spark { position: absolute; right: 12px; bottom: 12px; width: 92px; height: 30px; opacity: .9; }
.spark polyline { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi.ink .spark polyline { stroke: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.kpi .neg, .acct .neg { color: var(--bad); } .acct .pos { color: var(--ok); } .kpi.ink .neg { color: #ff8a8d; }
.acct .hi-t { color: var(--warn); }
.card.pad { padding: 16px 18px; }
.acct-chart { padding: 14px 16px 8px; margin-top: 16px; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ov-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ov-h .chip svg { width: 12px; height: 12px; }
.ov-det { justify-content: space-between; }
.bank-k .k { display: flex; gap: 6px; } .bk-io { display: flex; gap: 18px; margin-top: 6px; flex-wrap: wrap; } .bk-io > span { display: flex; flex-direction: column; gap: 2px; } .bk-io small { font-size: 12px; color: var(--text-3); } .bk-io b { font-size: 21.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.chart .grid line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart .grid line.zero { stroke: var(--border-2); }
.chart text { font-size: 12px; fill: var(--text-3); font-family: var(--font); }
.chart .bars rect { fill: var(--c); animation: grow .6s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }
.chart .ln { fill: none; stroke: var(--c); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 2000; animation: draw 1.1s .2s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.chart circle { fill: var(--panel); stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; animation: fade .3s .9s both; } .chart circle.neg { stroke: var(--bad); }
.chart .hit { fill: transparent; cursor: pointer; } .chart .hit.on { fill: var(--hover); }
.chart .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.chart .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .chart .legend i.l { height: 3px; border-radius: 2px; width: 14px; }
.ctip { position: absolute; top: 26px; pointer-events: none; background: var(--elev); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--r); padding: 8px 10px; font-size: 13px; min-width: 170px; z-index: 3; animation: pop .14s var(--ease); }
.ctip b { display: block; margin-bottom: 4px; font-size: 13.5px; }
.ctip div { display: flex; align-items: center; gap: 6px; color: var(--text-2); } .ctip div span { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 12px; }
.ctip i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tbl-wrap { overflow: auto; max-height: 72vh; }
.acct-t { font-size: 13.5px; }
.acct-t th { white-space: nowrap; }
.acct-t td, .acct-t th { padding: 7px 10px; }
.acct-t th:first-child, .acct-t td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.acct-t thead th:first-child { z-index: 2; background: var(--bg-sub); }
.acct-t tfoot td:first-child { background: var(--bg-sub); }
.acct-t tbody tr:hover td:first-child { background: color-mix(in srgb, var(--panel) 92%, var(--text)); }
.acct-t tr.cur td { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.acct-t tr.fut td { color: var(--text-3); }
.acct-t tbody tr[data-m] { cursor: pointer; }
.acct-t .sub { font-size: 12px; color: var(--text-3); }
.acct-t td.r .sub { color: var(--accent-text); }
.acct-t .lock svg { width: 12px; height: 12px; color: var(--text-3); vertical-align: -1px; }
.acct-t td.c, .acct-t th.c { text-align: center; }
.acct-t .input.sm, .acct-t .select.sm { height: 28px; font-size: 13.5px; padding: 0 7px; } .acct-t .select.sm { padding-right: 24px; background-position: right 6px center; }
.acct-t .input.num { text-align: right; width: 84px; font-variant-numeric: tabular-nums; } .acct-t .input.w4 { width: 54px; }
.acct-t .input.cl { width: 92px; }
.acct-t .input.auto::placeholder { color: var(--accent-text); font-style: italic; opacity: .9; }
.cb { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.warn-t { color: var(--warn); font-size: 12.5px; } .warn-c { background: var(--warn-soft) !important; }
.kpi-t td.tt { min-width: 190px; max-width: 230px; }
.kpi-t .kdl .sub { color: var(--text-3); font-weight: 400; }
.kpi-t td, .kpi-t th { padding-left: 8px; padding-right: 8px; } .kpi-t .input.num { width: 72px; }
.kpi-t td.tt { display: flex; align-items: center; gap: 6px; }
.kpi-t tr.tk td { font-weight: 520; }
.kpi-t tr.kid td { color: var(--text-2); font-size: 13px; background: var(--bg-sub); }
.kpi-t tr.kid td.tt { padding-left: 34px; font-style: italic; }
.kpi-t tr.muted-row td { opacity: .55; }
.tog { width: 20px; height: 20px; border-radius: 5px; color: var(--text-3); flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--ease), background .15s; }
.acct-t tr.det td { background: var(--bg-sub); padding: 8px 10px 10px 38px; position: static; }
.ydet, .kdet { display: flex; flex-wrap: wrap; gap: 6px 22px; font-variant-numeric: tabular-nums; }
.ydet > span, .kdet > span { display: flex; flex-direction: column; gap: 1px; } .ydet small, .kdet small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.kpi-t .ty-p { color: var(--c-violet); font-weight: 600; } .kpi-t .ty-c { color: var(--c-blue); font-weight: 600; }
.kpi-t td .sub .neg, .kpi-t td .sub .pos, .kpi-t td .sub .warn-t { font-weight: 600; }
.year-t td.nowrap .tog { margin: -2px 4px -2px -4px; vertical-align: middle; }
.tog:not(:disabled):hover { background: var(--hover); color: var(--text); } tr.open .tog { transform: rotate(90deg); }
.stg { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .stg .al { color: var(--bad); font-weight: 650; text-decoration: underline; }
.kpi-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.kpi-bar .select.sm { height: 32px; width: auto; max-width: 180px; font-size: 13.5px; }
.search-in { position: relative; flex: 1; min-width: 200px; max-width: 320px; } .search-in svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--text-3); } .search-in .input { padding-left: 30px; height: 32px; }
.tgl { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); cursor: pointer; user-select: none; }
.team-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.team-head .select { width: auto; height: 32px; }
.team-head .facts { display: flex; gap: 22px; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.team-head .facts small { display: block; font-size: 12px; color: var(--text-3); font-weight: 550; }

.team-t tr.paid td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.av.ph { background: var(--bg-sunk); color: var(--text-2); }
.flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn); } .flag svg { width: 11px; height: 11px; }
.paycell { white-space: nowrap; }
.pay { display: inline-flex; align-items: center; border-radius: 7px; margin-right: 2px; } .pay span { font-size: 12px; color: var(--text-3); width: 12px; text-align: right; }
.pay span { margin-right: 4px; } .pay .input.num { width: 82px; text-align: left; } .pay:last-child .input.num { width: 100px; } .pay.src .input { color: var(--text); font-weight: 650; } .pay:not(.src) .input { color: var(--text-2); }
.cmp { position: relative; width: 86px; height: 18px; border-radius: 5px; background: var(--bg-sunk); overflow: hidden; font-size: 12px; font-weight: 650; }
.cmp i { position: absolute; inset: 0 auto 0 0; background: var(--c-amber); opacity: .35; border-radius: 5px; transition: width .5s var(--ease); }
.cmp.ok i { background: var(--ok); } .cmp.hi i { background: var(--c-orange); }
.cmp span { position: relative; padding-left: 6px; line-height: 18px; }
.tx { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.tx .tx-p, .tx .tx-f { white-space: nowrap; } .tx .tx-f { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.tx.under .tx-f { color: var(--c-orange); }
.ppl { display: flex; flex-direction: column; gap: 14px; }
.ppl-c { overflow: hidden; } .ppl-c.off { opacity: .7; }
.ppl-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ppl-h .sub { font-size: 13px; color: var(--text-3); }
.ppl-h .select { width: auto; max-width: 200px; height: 30px; font-size: 13.5px; }
.ppl-c .acct-t td:first-child, .ppl-c .acct-t th:first-child { position: static; }
.fop { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; font-size: 14px; }
.fop label { color: var(--text-2); } .fop .input { width: 150px; height: 32px; text-align: right; } .fop span { color: var(--text-2); } .fop b { text-align: right; font-variant-numeric: tabular-nums; }
.mixbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 4px 0 12px; }
.mixbar i { background: var(--c); animation: grow-x .7s var(--ease) both; transform-origin: left; } @keyframes grow-x { from { transform: scaleX(0); } }
.mixl { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mixl > div { display: flex; align-items: center; gap: 8px; } .mixl i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); } .mixl b { font-variant-numeric: tabular-nums; } .mixl .faint { width: 40px; text-align: right; }
.checks { display: flex; flex-direction: column; gap: 10px; }
.chk summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; } .chk summary::-webkit-details-marker { display: none; }
.chk summary svg { width: 16px; height: 16px; color: var(--text-3); }
.chk-i { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13.5px; align-items: center; }
.chk-i[data-k] { cursor: pointer; } .chk-i[data-k]:hover { background: var(--hover); }
.chk-i .faint { flex: none; max-width: 55%; text-align: right; }
.alog-l { display: flex; flex-direction: column; max-height: 520px; overflow: auto; }
.alog2 { display: grid; grid-template-columns: 120px 120px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.ap { display: inline-flex; gap: 4px; } .ap .input { width: 140px; height: 32px; } .ap .input.num { width: 80px; }
.log-g { align-items: start; }
.acct-skel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .acct-skel div { height: 96px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--bg-sunk), var(--panel), var(--bg-sunk)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 820px) { .alog2 { grid-template-columns: 1fr; gap: 2px; } .acct-skel { grid-template-columns: 1fr 1fr; } .kpi .spark { display: none; } }

/* board mode switcher + list view */
.mode-btn { gap: 7px; } .mode-btn svg:last-child { width: 12px; height: 12px; color: var(--text-3); margin-left: 1px; }
.lv-sec { margin-bottom: 18px; } .lv-sec h3 { font-size: 14.5px; margin: 0 0 8px; }
.lv-tbl td { vertical-align: middle; } .lv-t { width: 46%; max-width: 0; } .lv-t .ell { display: block; font-weight: 550; }
.lv-t .labels { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.lv-g { width: 18%; } .lv-m { width: 12%; } .lv-d { width: 14%; white-space: nowrap; } .lv-e { width: 10%; white-space: nowrap; }
.cmt-box { flex: none; }

/* ---------- buttons: flat, with a lively hover ---------- */
.btn { position: relative; transition: background .16s, border-color .16s, color .16s, box-shadow .2s var(--ease), transform .18s var(--ease); }
.btn svg { transition: transform .22s var(--ease); }
.btn:hover { border-color: var(--text-3); transform: translateY(-1px); box-shadow: 0 5px 14px -7px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:hover svg { transform: scale(1.12) rotate(-4deg); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn.ghost:hover { border-color: transparent; box-shadow: none; transform: none; }
.btn.ghost:active { transform: scale(.96); }
.btn.primary, .btn.accent { background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; }
.btn.primary:hover, .btn.accent:hover { background-position: -30% 0; transition: background-position .65s var(--ease), box-shadow .2s, transform .18s var(--ease); border-color: var(--accent); box-shadow: 0 8px 20px -8px var(--accent); }
.btn.danger:hover { border-color: var(--bad); box-shadow: 0 5px 14px -7px var(--bad); }
.fbtn, .mbtn, .pbtn, .tchip, .pchip { transition: background .16s, border-color .16s, color .16s, transform .18s var(--ease), box-shadow .2s; }
.fbtn:hover, .pbtn:hover, .tchip:hover, .pchip:hover { transform: translateY(-1px); border-color: var(--text-3); box-shadow: 0 5px 14px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.fbtn:active, .pbtn:active { transform: scale(.97); }
.seg button { transition: background .16s, color .16s, transform .15s var(--ease); } .seg button:hover:not(.on) { color: var(--text); background: var(--hover); } .seg button:active { transform: scale(.96); }

/* ---------- dark: matte black with structure ---------- */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) { --matte: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 0 1px rgba(0, 0, 0, .6); --grain: .035; }
}
:where(:root[data-theme="dark"]) { --matte: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 0 1px rgba(0, 0, 0, .6); --grain: .035; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .sidebar { background: #000; border-right-color: #19191c; }
  :where(:root:not([data-theme="light"])) .topbar { background: #030304; border-bottom-color: #19191c; }
  :where(:root:not([data-theme="light"])) .card, :where(:root:not([data-theme="light"])) .kpi, :where(:root:not([data-theme="light"])) .tcard, :where(:root:not([data-theme="light"])) .modal, :where(:root:not([data-theme="light"])) .menu, :where(:root:not([data-theme="light"])) .bcol { box-shadow: var(--matte); }
  :where(:root:not([data-theme="light"])) .bcol { background: #09090a; border-color: #1b1b1f; }
  :where(:root:not([data-theme="light"])) .tcard:hover { border-color: #3a3a40; }
  :where(:root:not([data-theme="light"])) .btn:where(:not(.primary):not(.accent):not(.ghost)) { background: #121214; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
  :where(:root:not([data-theme="light"])) .btn:where(:not(.primary):not(.accent):not(.ghost)):hover { background: #19191c; }
  :where(:root:not([data-theme="light"])) .input, :where(:root:not([data-theme="light"])) .select, :where(:root:not([data-theme="light"])) .textarea { background: #08080a; border-color: #26262b; }
  :where(:root:not([data-theme="light"])) .table th { background: #0b0b0d; }
}
:where(:root[data-theme="dark"]) .sidebar { background: #000; border-right-color: #19191c; }
:where(:root[data-theme="dark"]) .topbar { background: #030304; border-bottom-color: #19191c; }
:where(:root[data-theme="dark"]) .card, :where(:root[data-theme="dark"]) .kpi, :where(:root[data-theme="dark"]) .tcard, :where(:root[data-theme="dark"]) .modal, :where(:root[data-theme="dark"]) .menu, :where(:root[data-theme="dark"]) .bcol { box-shadow: var(--matte); }
:where(:root[data-theme="dark"]) .bcol { background: #09090a; border-color: #1b1b1f; }
:where(:root[data-theme="dark"]) .tcard:hover { border-color: #3a3a40; }
:where(:root[data-theme="dark"]) .btn:where(:not(.primary):not(.accent):not(.ghost)) { background: #121214; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
:where(:root[data-theme="dark"]) .btn:where(:not(.primary):not(.accent):not(.ghost)):hover { background: #19191c; }
:where(:root[data-theme="dark"]) .input, :where(:root[data-theme="dark"]) .select, :where(:root[data-theme="dark"]) .textarea { background: #08080a; border-color: #26262b; }
:where(:root[data-theme="dark"]) .table th { background: #0b0b0d; }
/* fine grain gives the black a matte, paper-like surface */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: calc(var(--grain, 0) * .6); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- playables ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 18px; }
.pl-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); transition: transform .2s var(--ease), border-color .16s, box-shadow .2s; }
.pl-card:hover { transform: translateY(-3px); border-color: var(--text-3); box-shadow: 0 12px 28px -14px var(--pa); }
.pl-card .nm { font-weight: 600; padding: 4px 4px 0; }
.pl-card .faint { padding: 0 4px; }
.pl-art { position: relative; aspect-ratio: 9 / 12; border-radius: var(--r); background: linear-gradient(160deg, var(--pa), color-mix(in srgb, var(--pa) 35%, #000)); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px; }
.pl-art > img { width: 38%; border-radius: 22%; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .pl-art > svg { width: 38px; height: 38px; color: #fff; }
.pl-go { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 34px; border-radius: var(--r); background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .2s var(--ease); }
.pl-go svg { width: 13px; height: 13px; } .pl-card:hover .pl-go, .pl-card:focus-visible .pl-go { opacity: 1; transform: none; }
.pl-modal { max-width: 940px; } .pl-modal .modal-foot { flex-wrap: wrap; }
.pl-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; } .pl-bar .seg { flex-wrap: wrap; }
.pl-stage { display: flex; justify-content: center; align-items: flex-start; padding: 6px 0; min-height: 300px; }
.pl-stage.multi { flex-wrap: wrap; gap: 22px; align-items: flex-end; max-height: 62vh; overflow: auto; }
.pl-stage figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .pl-stage figcaption { font-size: 13px; color: var(--text-3); }
.pl-dev { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: 18px; border: 6px solid #1a1a1c; background: #000; overflow: hidden; box-sizing: content-box; transition: width .3s var(--ease), height .3s var(--ease); }
.pl-scale { width: var(--w); height: var(--h); transform: scale(var(--k)); transform-origin: 0 0; }
.pl-dev iframe { width: 100%; height: 100%; border: 0; background: #000; }
.pl-note { font-size: 13.5px; margin-top: 10px; text-align: center; }

.dthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .tile .dthumb ~ .play, .tile .dthumb ~ .ph { }
.tile .dthumb ~ .play { z-index: 2; }
.drive-frame { width: min(92vw, 1100px); height: min(82vh, 640px); border: 0; border-radius: 10px; background: #000; }

.drive-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drive-open { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }

.pl-modal { max-width: min(1180px, 96vw); }

/* creatives library: compact header, 9:16 cards */
.cl-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin: 0 0 14px; font-size: 14.5px; }
.cl-st { display: inline-flex; align-items: center; gap: 6px; } .cl-st svg { width: 15px; height: 15px; color: var(--text-3); } .cl-st b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-meter { width: 70px; height: 5px; margin-left: 4px; }
.cgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ctile .tile img, .ctile .tile video { width: 100%; height: 100%; object-fit: cover; }
.ctile .sub .rate, .ctile .sub .cm { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--text-2); } .ctile .sub svg { width: 12px; height: 12px; }
.ctile .sub .rate svg { color: var(--c-amber); fill: var(--c-amber); }
.month-h { margin: 18px 0 10px; }

.stars { gap: 2px; } .star { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: transform .15s var(--ease), color .15s, background .15s; }
.star svg { width: 20px; height: 20px; } .star:hover { background: var(--hover); transform: scale(1.12); color: var(--c-amber); }
.star.on { color: var(--c-amber); } .star.on svg { fill: var(--c-amber); }
.stars:hover .star.on:not(:hover) { color: var(--c-amber); }
.cfeed { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.cmsg { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .cmsg .mt { white-space: pre-wrap; word-break: break-word; margin-top: 1px; } .cmsg .faint { font-size: 12.5px; }
.cform .input { flex: 1; }

.pl-modal { max-width: min(1320px, 97vw); }
.pl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; } .pl-side { border-left: 1px solid var(--border); padding-left: 18px; max-height: 76vh; overflow-y: auto; } .pl-main { min-width: 0; }
@media (max-width: 1000px) { .pl-wrap { grid-template-columns: 1fr; } .pl-side { border-left: 0; padding-left: 0; } }
.tbadge { position: absolute; right: 7px; top: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(106, 63, 240, .85); backdrop-filter: blur(6px); } .tbadge svg { width: 11px; height: 11px; }

/* card hover: lift + glow in the game's colour */
.ctile .tile { transition: transform .2s var(--ease), border-color .16s, box-shadow .22s; }
.ctile:hover .tile { transform: translateY(-3px); border-color: var(--text-3); box-shadow: 0 14px 30px -14px var(--pa, #000); }
.ctile .tile .pl-go { z-index: 3; } .ctile:hover .pl-go { opacity: 1; transform: none; }

.tbadge { background: color-mix(in srgb, var(--tc, var(--c-violet)) 78%, #000); }
.ctile.is-pl .tile { border-color: color-mix(in srgb, var(--c-violet) 70%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-violet) 35%, transparent); }
.ctile.is-pl .ph { background: linear-gradient(160deg, #6a3ff0, #2a1670); }
.ctile.is-pl:hover .tile { box-shadow: 0 14px 30px -12px var(--c-violet); }

.tbadge { border: 1px solid rgba(255, 255, 255, .6); background: color-mix(in srgb, var(--tc, var(--c-violet)) 88%, #000); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

.cl-sum { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; } .cl-sum .cdot { width: 10px; height: 10px; }

/* date range picker */
.drp { display: flex; padding: 0; width: 520px; max-width: 94vw; overflow: hidden; }
.drp-side { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--border); min-width: 150px; }
.drp-p { text-align: left; padding: 7px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text-2); } .drp-p:hover { background: var(--hover); color: var(--text); } .drp-p.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.drp-main { padding: 12px 14px; flex: 1; min-width: 0; }
.drp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .drp-nav b { font-size: 14.5px; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } .drp-grid .wd { font-style: normal; text-align: center; font-size: 12px; color: var(--text-3); padding: 4px 0; }
.dd { height: 32px; font-size: 14px; font-variant-numeric: tabular-nums; border-radius: 0; color: var(--text); position: relative; }
.dd:hover { background: var(--hover); } .dd.in { background: var(--accent-soft); color: var(--accent-text); }
.dd.st, .dd.en { background: var(--accent); color: #fff; font-weight: 600; } .dd.st { border-radius: 8px 0 0 8px; } .dd.en { border-radius: 0 8px 8px 0; } .dd.st.en { border-radius: 8px; }
.dd.td::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.drp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .drp-foot .input { width: 138px; }
@media (max-width: 560px) { .drp { flex-direction: column; } .drp-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); } }
/* reports: tidy KPI row and dense charts */
.page .kpis.rep { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cols-chart.dense { gap: 4px; overflow-x: auto; } .cols-chart.dense .cc { min-width: 14px; flex: 1; } .cols-chart.dense .cc span { font-size: 10.5px; } .cols-chart.dense .cc b { font-size: 12px; }

/* Облік: tidy KPI row, sparklines behind the numbers instead of over the text, no stray scrollbar on tabs */
.acct .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .acct .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 821px) { .acct .kpis.sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .acct .kpis.sm .kpi { min-height: 0; padding: 12px 14px; } }
.acct .kpi { min-height: 112px; }
.acct .kpi .spark { right: 10px; top: 14px; bottom: auto; width: 76px; height: 26px; opacity: .55; }
.acct .kpi .v { position: relative; z-index: 1; } .acct .kpi .s { position: relative; z-index: 1; max-width: calc(100% - 4px); }
.acct .tabs, .tabs { scrollbar-width: none; } .acct .tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

/* contextual button looks beat the matte defaults by specificity now (they use :where), nothing needs !important */
.phero .acts .btn { background: rgba(255, 255, 255, .92); color: #111; border-color: rgba(255, 255, 255, .9); }
.phero .acts .btn:hover { background: #fff; border-color: #fff; }
.phero .acts .btn svg { color: #111; }
.bcol-f .btn { background: transparent; box-shadow: none; }

/* ======================= mobile ======================= */
.botnav, .sb-scrim { display: none; }
@media (max-width: 820px) {
  html, body { overscroll-behavior: none; }
  input, select, textarea, .input, .select, .textarea { font-size: 17px; }
  .btn { height: 40px; } .btn.sm { height: 36px; } .btn.icon { width: 40px; } .btn.icon.sm { width: 36px; }
  .view { scrollbar-gutter: auto; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .shell { grid-template-columns: 1fr; }
  /* side drawer + scrim */
  .sidebar { z-index: 520; width: min(86vw, 320px); padding-top: env(safe-area-inset-top); }
  /* the scrim is its own GPU layer and is hidden for real (visibility) after the fade: on iPhones a fixed full-screen layer over the blurred tab bar used to stay dimmed for a second after the drawer had left */
  .sb-scrim { display: block; position: fixed; inset: 0; z-index: 510; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility 0s .18s; will-change: opacity; transform: translateZ(0); }
  .shell.sb-open .sb-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s; }
  .shell.mini .sidebar .lbl, .shell.mini .brand-txt, .shell.mini .sb-search .kbd, .shell.mini .nav .cnt, .shell.mini .sb-group > * { opacity: 1; pointer-events: auto; }
  .sb-head .collapse { display: none; }
  /* bottom tab bar */
  .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 97%, transparent); border-top: 1px solid var(--border); }
  .bn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; font-size: 11px; font-weight: 550; color: var(--text-3); }
  .bn svg { width: 21px; height: 21px; } .bn.on { color: var(--text); } .bn.on svg { color: var(--accent); }
  .bn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  /* top bar: title and bell on the first row, page actions scroll on the second */
  .topbar { height: auto; min-height: 52px; flex-wrap: wrap; gap: 4px 6px; padding: env(safe-area-inset-top) 10px 0; position: sticky; top: 0; z-index: 60; }
  .topbar .mobile-nav { order: 0; } .topbar h1 { order: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; } .topbar .spacer { display: none; }
  .topbar .bell, .topbar .ai-t { order: 2; } #top-actions { order: 3; flex: 0 0 100%; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; flex-wrap: nowrap; } #top-actions::-webkit-scrollbar { display: none; } #top-actions:empty { display: none; } #top-actions .btn { flex: none; }
  .topbar h1 .crumb { display: none; }
  /* pages */
  .page { padding: 16px 14px 28px; } .page.wide { padding: 14px 12px 28px; }
  .page-h { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; } .page-h h2 { font-size: 23.5px; } .page-h .row { flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi { padding: 12px; } .kpi .v { font-size: 23.5px; }
  .page .kpis.rep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { min-width: 560px; }
  .toolbar { flex-wrap: wrap; gap: 8px; } .toolbar .search { flex: 1 1 100%; max-width: none; }
  .tabs { overflow-x: auto; } .tab { height: 44px; flex: none; }
  /* dialogs become sheets from the bottom; the card sheet is full screen */
  .overlay { align-items: flex-end; padding: 0; }
  .modal, .modal.wide, .modal.xwide { max-width: 100%; width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; overflow: auto; padding-bottom: env(safe-area-inset-bottom); }
  .sheet-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; overflow: hidden; }
  .sheet-modal .sh-body { height: calc(100dvh - 56px); max-height: none; overflow-y: auto; }
  .sheet-modal .sh-main { padding: 6px 14px 24px; }
  .menu { max-width: calc(100vw - 16px); } .drp { width: min(520px, calc(100vw - 16px)); }
  .kb-drawer { width: 100% !important; max-width: 100%; }
  .viewer .stage, .kviewer .vmain { min-height: 0; }
  /* board */
  .board-bar { padding: 8px 12px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .board-bar::-webkit-scrollbar { display: none; } .board-bar > * { flex: none; } .board-bar .toolbar { flex-wrap: nowrap; } .board-bar .toolbar .search { flex: 0 0 150px; } .board-bar .sp { display: none; }
  .board.kb-lane, .kb-lane { scroll-snap-type: x proximity; padding: 12px; gap: 10px; } .bcol { scroll-snap-align: center; flex-basis: 86vw; }
  .lv .lv-tbl { min-width: 0; } .lv-g, .lv-m, .lv-e { display: none; }
  .tl-wrap { overflow-x: auto; }
  /* games, creatives, people */
  .pgrid { grid-template-columns: 1fr; } .ptabs { overflow-x: auto; flex-wrap: nowrap; } .ptab { flex: none; }
  .phero { padding: 18px; min-height: 0; } .phero .bgshots { display: none; } .phero .ic { width: 68px; height: 68px; } .phero h2 { font-size: 25.5px; } .phero .acts { flex-wrap: wrap; width: 100%; max-width: none; justify-content: flex-start; } .phero .grow { max-width: none; flex: none; }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ctile .nm { font-size: 12.5px; }
  .cl-stats { gap: 6px 14px; font-size: 13.5px; } .month-h { margin: 14px 0 8px; }
  .pl-modal .modal-foot { flex-wrap: wrap; } .pl-side { max-height: none; } .pl-bar { gap: 8px; }
  .people { grid-template-columns: 1fr; } .uhero { flex-direction: column; align-items: flex-start; }
  .hbars .hbar { grid-template-columns: minmax(0, 110px) 1fr auto !important; gap: 8px; padding: 6px 10px; } .hbar > :nth-child(3) { font-size: 12px; white-space: nowrap; }
  .acct .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acct .kpi .spark { display: none; }
  .month-bar, .cal { overflow-x: auto; }
}
@media (max-width: 420px) {
  .cgrid { gap: 8px; } .kpi .v { font-size: 21.5px; } .page-h h2 { font-size: 21.5px; }
  .acct .kpis, .kpis, .page .kpis.rep { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) { body:has(.overlay, .viewer, .kviewer) .botnav { transform: translateY(110%); transition: transform .2s var(--ease); } .botnav { transition: transform .2s var(--ease); } }

@media (max-width: 820px) {
  .menu.drp { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 88dvh; overflow: auto; flex-direction: column; z-index: 3000; }
  .menu.drp .drp-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; }
  .menu { max-height: 70dvh; }
}

@media (max-width: 820px) {
  .drp-foot { flex-wrap: wrap; } .drp-foot .input { flex: 1 1 120px; width: auto; min-width: 0; } .drp-foot .sp { display: none; } .drp-foot [data-ok] { flex: 1 0 100%; height: 42px; }
  .drp-main { padding: 10px 12px 14px; } .dd { height: 38px; }
}

html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

@media (max-width: 820px), (pointer: coarse) { body::after { display: none !important; } }
@media (max-width: 820px) {
  html, body, .shell, .main { overflow-x: hidden; max-width: 100vw; }
  .view { overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; }
  .page { max-width: 100vw; overflow-x: clip; }
  .grid-2 > *, .grid-3 > *, .grid-main > *, .kpis > *, .people > *, .pgrid > * { min-width: 0; }
}

@media (max-width: 820px) {
  .botnav { z-index: 90; }
  .viewer .stage { padding: 56px 10px 10px; } .viewer .media { width: 100%; height: 100%; max-width: 100%; justify-content: center; align-items: center; }
  .viewer .media video, .viewer .media img { max-height: 100%; width: auto; max-width: 100%; }
  .drive-box { width: 100%; height: 100%; justify-content: center; } .drive-frame { width: 100%; height: calc(100% - 50px); min-height: 220px; max-height: none; }
  .viewer .close { top: 10px; left: 10px; }
}

.sb-handle { display: none; }
@media (max-width: 820px) {
  .sb-handle { display: block; position: fixed; left: 3px; top: 46%; width: 4px; height: 46px; border-radius: 4px; background: var(--text); opacity: .16; z-index: 80; pointer-events: none; }
  body:has(.overlay, .viewer, .kviewer) .sb-handle, .shell.sb-open .sb-handle { display: none; }
  /* creatives player: full screen, details in a sheet */
  .viewer.mfs { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .viewer.mfs .stage { padding: 0; } .viewer.mfs .media { width: 100%; height: 100%; max-height: none; }
  .viewer.mfs .media video { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: contain; background: #000; }
  .viewer.mfs .media img { max-height: 100%; }
  .viewer.mfs .drive-box { height: 100%; gap: 0; } .viewer.mfs .drive-frame { height: calc(100% - 46px); border-radius: 0; min-height: 0; } .viewer.mfs .drive-open { margin: 6px 0; height: 34px; }
  .viewer.mfs .close { top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 6; background: rgba(0, 0, 0, .55); }
  .viewer.mfs .nav-btn { display: none; }
  .viewer.mfs .info { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72dvh; border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .25s var(--ease); z-index: 7; padding-bottom: calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
  .viewer.mfs.show-info .info { transform: none; }
  .vdet { position: absolute; right: 10px; top: calc(10px + env(safe-area-inset-top)); z-index: 8; height: 36px; padding: 0 14px; border-radius: 18px; background: rgba(0, 0, 0, .55); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); } .vdet svg { width: 15px; height: 15px; }
  .viewer.mfs.show-info .vdet { z-index: 8; }
  /* card files player: same idea */
  .kviewer.mfs .vtop { padding: calc(8px + env(safe-area-inset-top)) 10px 8px; gap: 8px; } .kviewer.mfs .vtitle small, .kviewer.mfs .vers { display: none; }
  .kviewer.mfs .vbody { grid-template-columns: 1fr; grid-template-rows: 1fr; position: relative; }
  .kviewer.mfs .vstage { padding: 0; } .kviewer.mfs .vstage video { width: 100%; max-height: 100%; border-radius: 0; background: #000; }
  .kviewer.mfs .vside { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72dvh; overflow: auto; background: var(--panel, #151517); border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .25s var(--ease); z-index: 6; padding-bottom: env(safe-area-inset-bottom); }
  .kviewer.mfs.show-side .vside { transform: none; }
  /* playable launcher: full screen too */
  .overlay:has(.pl-modal) { align-items: stretch; } .pl-modal { height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

@media (max-width: 820px) {
  /* player: a top row for × and Деталі (below the notch), the video gets the rest; nothing overlays the video's own controls */
  .viewer.mfs .stage { padding: calc(54px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); }
  .viewer.mfs .close, .vdet { top: calc(9px + env(safe-area-inset-top)); }
  .viewer.mfs .media { height: 100%; }
  .viewer.mfs .drive-frame { height: calc(100% - 44px); }
  .kviewer.mfs .vtop { padding-top: calc(8px + env(safe-area-inset-top)); }
}

.drive-video { background: #000; object-fit: contain; border-radius: 10px; width: min(92vw, 1100px); height: min(82vh, 640px); }
@media (max-width: 820px) { .drive-video { width: 100%; height: calc(100% - 44px); border-radius: 0; } }

/* weekly report (Звітність → Тиждень) */
.wk-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.wk-leg i, .wk-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.wk-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.wk-col { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-col b { font: 600 25.5px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.wk-col.bl { border-color: var(--c-green); }
.wk-col .up { color: var(--warn); font-size: 13.5px; } .wk-col .down { color: var(--ok); font-size: 13.5px; }
.wk-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-2); }
.wk-key i.ok { background: color-mix(in srgb, var(--c-violet) 30%, var(--panel)); box-shadow: inset 3px 0 0 var(--c-violet); } .wk-key i.risk { background: color-mix(in srgb, var(--c-amber) 28%, var(--panel)); box-shadow: inset 3px 0 0 var(--c-amber); } .wk-key i.failed { background: var(--c-red); }
.wk-key i.noest { background: var(--panel); outline: 1px dashed var(--c-slate); outline-offset: -1px; box-shadow: inset 3px 0 0 var(--c-slate); }
.wk-load { overflow-x: auto; padding: 4px 0; }
.wk-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; min-width: 760px; padding: 5px 12px; gap: 14px; }
.wk-head { font-size: 12.5px; color: var(--text-3); }
.wk-head .wk-line { display: grid; grid-template-columns: repeat(var(--n, 10), 1fr); height: auto; background: none; box-shadow: none; }
.wk-head .wk-line span { padding: 0 0 2px 5px; border-left: 1px solid var(--border); white-space: nowrap; min-height: 18px; }
.wk-head .wk-line span.wk-mon { border-left-color: var(--text-3); }
.wk-head .wk-line span.wk-today b, .wk-head .wk-line span.wk-today { color: var(--accent-text); }
.wk-g { display: flex; align-items: center; gap: 8px; padding: 14px 12px 4px; font-size: 12.5px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; min-width: 760px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.wk-g span { font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.wk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wk-nm { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.wk-nm b { font-size: 13.5px; font-weight: 600; }
.wk-nm small { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 11.5px; color: var(--text-3); }
.wk-nm small button { font-size: 11.5px; font-weight: 600; padding: 0; background: none; border: 0; cursor: pointer; } .wk-nm small button:hover { text-decoration: underline; }
/* how much of the shown days is taken: a small bar with the number */
.wk-full { position: relative; width: 48px; height: 20px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.wk-full i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--c-violet) 22%, transparent); }
.wk-full b { position: relative; font: 650 11.5px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.wk-full.over i { background: color-mix(in srgb, var(--c-red) 22%, transparent); } .wk-full.over b { color: var(--bad); }
/* the lane: a day per column (a stronger line every Monday); cards one after another as two-line plaques */
.wk-line { position: relative; height: 46px; border-radius: 8px; background-color: var(--bg-sub, var(--bg-sunk));
  background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: calc(100% / var(--n, 10)) 100%; box-shadow: inset 0 0 0 1px var(--border); }
.wk-line u { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.wk-due { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--c-amber); z-index: 2; pointer-events: auto; }
.wk-b { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 8px 0 10px; text-decoration: none; color: var(--text); box-sizing: border-box; min-width: 0;
  --bc: var(--c-violet); background: color-mix(in srgb, var(--bc) 14%, var(--panel)); box-shadow: inset 3px 0 0 var(--bc), 0 0 0 1px color-mix(in srgb, var(--bc) 26%, transparent); transition: filter .15s var(--ease); }
.wk-b i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--bc) 16%, transparent); }
.wk-b .t { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.wk-b .t .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wk-b .m { position: relative; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wk-b.risk { --bc: var(--c-amber); } .wk-b.risk .m { color: var(--c-amber); font-weight: 600; }
.wk-b.failed { --bc: var(--c-red); background: #c62f35; box-shadow: none; color: #fff; } /* the same deep red in both themes: white text stays readable */ .wk-b.failed .m { color: rgba(255, 255, 255, .85); font-weight: 600; } .wk-b.failed i { background: rgba(0, 0, 0, .14); }
.wk-b.noest:not(.failed) { background: color-mix(in srgb, var(--bc) 6%, var(--panel)); box-shadow: inset 3px 0 0 var(--bc); outline: 1px dashed color-mix(in srgb, var(--bc) 60%, transparent); outline-offset: -1px; }
.wk-b.noest:not(.risk):not(.failed) { --bc: var(--c-slate); }
.wk-b.narrow .m { display: none; } .wk-b.narrow .t img, .wk-b.narrow .t .pi { display: none; }
.wk-b.tiny { padding: 0; } .wk-b.tiny .t, .wk-b.tiny .m { display: none; } /* a short card: a sliver without text, never wider than its share */
.wk-b:hover { filter: brightness(1.05); z-index: 1; }
.wk-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg-sunk); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wk-zoom span { min-width: 54px; text-align: center; } .wk-zoom .btn { width: 24px; height: 24px; min-height: 0; border-radius: 999px; font-size: 15px; }
@media (max-width: 820px) { .wk-row { grid-template-columns: 150px 1fr; } .wk-full, .wk-nm small > span { display: none; } .wk-who .av { display: none; } .wk-nm small { gap: 0 6px; } }
/* monthly drop of creatives */
.drop-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; font-size: 14.5px; }
.drop-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.drop-who .chip { gap: 6px; } .drop-who .chip b { font-weight: 600; }
.drop-feed { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.drop-post { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px; align-items: start; }
.drop-post .ctile > .nm, .drop-post .ctile > .sub { display: none; }
.drop-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 14px; }
.drop-nm { font-size: 16px; word-break: break-word; }
.drop-info .tasklink { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.drop-info svg { width: 14px; height: 14px; flex: none; }
.drop-fb > summary { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--text-2); list-style: none; font-size: 13.5px; padding: 4px 0; }
.drop-fb > summary::-webkit-details-marker { display: none; }
.drop-fb[open] > summary { margin-bottom: 8px; }
@media (max-width: 820px) { .drop-post { grid-template-columns: 1fr; } .drop-post .ctile { max-width: 260px; } }
/* Облік: two flat team tables, the expense form */
.tbl-wrap.flat { max-height: none; margin-bottom: 18px; }
.team-t .pcmt .input { width: 100%; min-width: 64px; } .team-t [data-mt] { min-width: 72px; } .team-t .flag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.team-t td, .team-t th { padding: 7px 7px; } .team-t td.r { white-space: nowrap; } .team-t td.tt { min-width: 168px; }
.team-t .pay .input.num { width: 68px; } .team-t .pay:last-child .input.num { width: 84px; } .team-t .input.w4 { width: 44px; }
.exp-add { padding: 16px 18px; margin: 0 0 16px; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.exp-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .exp-h h3 { font-size: 16px; margin: 0; } .exp-h > svg { width: 18px; height: 18px; color: var(--accent-text); } .exp-h .hint { margin-left: 4px; }
.exp-f { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.exp-f .field { display: flex; flex-direction: column; gap: 5px; flex: 2 1 220px; margin: 0; } .exp-f .field > span { font-size: 13px; color: var(--text-2); }
.exp-f .exp-amt { flex: 0 1 140px; } .exp-f .exp-amt .input { font-size: 17px; font-weight: 650; }
.exp-f .exp-cm { flex: 1 1 180px; } .exp-f .exp-m { flex: 0 1 170px; }
.exp-f .input, .exp-f .select { height: 40px; } .exp-f .btn { height: 40px; padding: 0 18px; }
@media (max-width: 820px) { .exp-f .field, .exp-f .exp-amt { flex: 1 1 100%; } .exp-f .btn { width: 100%; justify-content: center; } }
.team-t td.tx, .team-t th.tx { padding-left: 6px; padding-right: 6px; }
/* invoice draft (Облік → KPI) */
.inv-doc { border: 1px solid var(--border); border-radius: 10px; padding: 22px; background: #fff; color: #111; font-size: 14px; }
.inv-top { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; } .inv-top .r { text-align: right; } .inv-top .r div { font-size: 13.5px; color: #555; margin-top: 2px; }
.inv-to { margin: 16px 0; color: #333; line-height: 1.6; }
.inv-t { width: 100%; border-collapse: collapse; } .inv-t th, .inv-t td { padding: 7px 8px; border-bottom: 1px solid #e5e5e5; text-align: left; } .inv-t th { font-size: 12px; text-transform: uppercase; color: #666; letter-spacing: .04em; }
.inv-t .r { text-align: right; white-space: nowrap; } .inv-t tfoot td { font-weight: 700; border-bottom: 0; padding-top: 12px; font-size: 15px; }
.print-only { display: none; }
@media print { html.printing body > *:not(.print-only) { display: none !important; } html.printing .print-only { display: block; } html.printing .inv-doc { border: 0; padding: 0; } }
.month-h .drop-new { color: var(--c-orange); } .month-h .drop-new::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); margin-left: 2px; }
@media (max-width: 820px) { .month-h { flex-wrap: wrap; } .month-h .line { display: none; } .month-h .btn { margin-left: auto; } }
/* hidden finances (eye in the top bar) */
html.money-off .money { filter: blur(6px); user-select: none; cursor: pointer; } /* a tap shows the page's sums */
.topbar .ai-t.on { color: var(--accent-text); background: var(--accent-soft); }
.money-cover { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 56px 20px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); color: var(--text-2); font-size: 14px; }
.money-cover > svg { width: 28px; height: 28px; color: var(--text-3); } .money-cover b { color: var(--text); font-size: 16px; } .money-cover span { max-width: 380px; } .money-cover .btn { margin-top: 6px; }

/* ---------- shared bits for AI pages ---------- */
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; flex: none; }
.spinner.sm { width: 14px; height: 14px; }
.lbl3 { font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 6px; display: block; }

/* ---------- AI-фідбек ---------- */
.aif-new { width: min(720px, 96vw); }
.aif-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aif-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 170px; padding: 12px; border: 1.5px dashed var(--border-2); border-radius: var(--r); color: var(--text-3); font-size: 13.5px; text-align: center; cursor: pointer; background: var(--bg-sub); overflow: hidden; }
.aif-drop svg { width: 22px; height: 22px; }
.aif-drop.over, .aif-drop:hover { border-color: var(--accent); color: var(--accent-text); }
.aif-drop.has { padding: 0; border-style: solid; background: var(--bg-sunk); }
.aif-drop.has img { max-width: 100%; max-height: 240px; object-fit: contain; }
.aif-drop .aif-x { position: absolute; top: 6px; right: 6px; background: var(--panel); }
.aif-drop .aif-sz { position: absolute; left: 6px; bottom: 6px; font-size: 12px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.55); color: #fff; }
.aif-cardimgs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.aif-ci { width: 44px; height: 44px; flex: none; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); }
.aif-ci img { width: 100%; height: 100%; object-fit: cover; }
.aif-ci:hover { border-color: var(--accent); }
.aif-off { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 16px; color: var(--text-2); }
.aif-off svg { width: 18px; height: 18px; color: var(--warn); flex: none; }
.aif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.aif-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s; }
.aif-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.aif-th { position: relative; aspect-ratio: 4/3; background: var(--bg-sunk); }
.aif-th img { width: 100%; height: 100%; object-fit: contain; }
.aif-st { position: absolute; left: 8px; top: 8px; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--panel); }
.aif-st.error { color: var(--bad); }
.aif-cb { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; min-width: 0; font-size: 14px; }
.aif-cb .faint { font-size: 13px; }
.aif-v { color: var(--text-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.aif-mini { display: flex; flex-direction: column; gap: 6px; }
.aif-mrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r); background: var(--bg-sub); color: inherit; text-decoration: none; font-size: 13.5px; min-width: 0; }
.aif-mrow:hover { background: var(--hover); }
.aif-mrow img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.aif-mrow .grow { display: flex; flex-direction: column; min-width: 0; }
.aif-page { max-width: 1500px; }
.aif-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 22px; align-items: start; }
.aif-stage { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aif-img { position: relative; align-self: center; max-width: 100%; line-height: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-sunk); }
.aif-img img { max-width: 100%; max-height: calc(100vh - 170px); display: block; }
.aif-box { position: absolute; border: 2px solid var(--c); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transition: background .15s; --c: var(--c-orange); }
.aif-box.p-critical { --c: var(--c-red); } .aif-box.p-minor { --c: #c9c6bd; }
.aif-box i { position: absolute; left: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px 0 6px 0; background: var(--c); color: #fff; font: 700 13px/20px var(--font); }
.aif-box:hover, .aif-box.sel { background: color-mix(in srgb, var(--c) 18%, transparent); }
.aif-box.sel { border-width: 3px; z-index: 2; }
.aif-stbar { gap: 10px; font-size: 13.5px; }
.aif-ref img { max-width: 100%; max-height: 380px; border-radius: var(--r); }
.aif-ctx { font-size: 14px; color: var(--text-2); }
.aif-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aif-head { display: flex; flex-direction: column; gap: 6px; }
.aif-head > a { font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.aif-head > a svg { width: 14px; height: 14px; }
.aif-head h2 { font-size: 21.5px; line-height: 1.25; }
.aif-wait { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: var(--r); background: var(--bg-sub); }
.aif-err { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--bad-soft); color: var(--bad); font-size: 14px; }
.aif-err svg { width: 16px; height: 16px; flex: none; }
.aif-verdict { font-size: 16px; font-weight: 550; line-height: 1.45; }
.aif-brief { font-size: 13.5px; }
.aif-prev, .aif-doubts { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-sub); font-size: 13.5px; }
.aif-doubts div { display: flex; gap: 8px; } .aif-doubts svg { width: 15px; height: 15px; color: var(--c-blue); flex: none; margin-top: 1px; }
.aif-items { display: flex; flex-direction: column; gap: 8px; }
.aif-it { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); cursor: pointer; font-size: 14px; transition: border-color .15s; }
.aif-it.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus); }
.aif-it.skipped { opacity: .5; } .aif-it.skipped b { text-decoration: line-through; }
.aif-n { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--c-orange); }
.aif-it.p-critical .aif-n { background: var(--c-red); } .aif-it.p-minor .aif-n { background: var(--c-grey); }
.aif-pb { margin-top: 3px; color: var(--text-2); }
.aif-fx { margin-top: 3px; }
.aif-zoom { width: 84px; max-height: 110px; flex: none; border-radius: 6px; background-repeat: no-repeat; border: 1px solid var(--border); }
.aif-marks { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.aif-marks .btn { height: 26px; font-size: 13px; }
.aif-marks .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.aif-thread { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.aif-msg { display: flex; gap: 8px; font-size: 14px; }
.aif-msg.ai .aif-mt { background: var(--bg-sub); padding: 8px 10px; border-radius: 0 var(--r) var(--r) var(--r); margin-top: 3px; }
.aif-ai { background: var(--accent); color: #fff; display: grid; place-items: center; } .aif-ai svg { width: 11px; height: 11px; }
.aif-cmp { display: flex; flex-direction: column; gap: 8px; }
.aif-cmp .row { gap: 8px; align-items: center; }
@media (max-width: 1000px) { .aif-layout { grid-template-columns: 1fr; } .aif-stage { position: static; } .aif-img img { max-height: 70vh; } }
@media (max-width: 560px) { .aif-two { grid-template-columns: 1fr; } }

/* ---------- Бухгалтер ---------- */
.acc-evs { display: flex; flex-direction: column; gap: 6px; }
.acc-ev { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); font-size: 14px; }
.acc-ev.done { opacity: .55; } .acc-ev.late { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.acc-ev .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acc-d { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.acc-d b { font-size: 20.5px; font-family: var(--display); } .acc-d span { font-size: 12.5px; color: var(--text-3); }
.acc-rules { width: min(760px, 96vw); }
.acc-rule { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; }
.acc-rule.off { opacity: .6; }
.acc-rf { gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.acc-rf label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-3); }
.acc-rf .input { width: 110px; } .acc-rf select.input { width: 150px; }
.acc-dg { padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; } .acc-dg.rel { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.acc-md { font-size: 14.5px; line-height: 1.55; } .acc-md p { margin: 0 0 6px; } .acc-md ul { margin: 4px 0 6px 18px; }
.acc-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-src a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--bg-sub); color: var(--text-2); text-decoration: none; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-src a svg { width: 11px; height: 11px; flex: none; }
.acc-chat { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; min-height: 60vh; }
.acc-threads { display: flex; flex-direction: column; gap: 4px; }
.acc-threads .btn { margin-bottom: 8px; align-self: flex-start; }
.acc-th { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 10px; border-radius: var(--r); font-size: 13.5px; text-align: left; min-width: 0; }
.acc-th .ell { max-width: 100%; } .acc-th .faint { font-size: 12px; }
.acc-th:hover { background: var(--hover); } .acc-th.on { background: var(--accent-soft); color: var(--accent-text); }
.acc-conv { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.acc-msgs { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 330px); min-height: 280px; overflow-y: auto; padding: 4px 2px; }
.acc-hello { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r); background: var(--bg-sub); }
.acc-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-sugg .btn { height: auto; min-height: 28px; white-space: normal; text-align: left; padding: 5px 10px; }
@media (max-width: 820px) { .acc-chat { grid-template-columns: 1fr; } .acc-threads { flex-direction: row; overflow-x: auto; } .acc-threads .btn { margin: 0; flex: none; } .acc-th { flex: none; max-width: 180px; } .acc-ev { flex-wrap: wrap; gap: 8px 12px; } .acc-msgs { max-height: none; } }
/* ---------- Запити ---------- */
.lead .lchip { flex: none; }
.lead-b { gap: 6px; flex: none; }
.leads .btn.on, .law-seg .btn.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.law-seg { gap: 6px; margin-bottom: 16px; }
.lead-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.lead-script { max-height: 300px; overflow: auto; margin: 0; padding: 12px; border-radius: var(--r); background: var(--bg-sub); font-size: 12.5px; line-height: 1.5; white-space: pre; font-variant-ligatures: none; }
@media (max-width: 820px) { .lead-b { width: 100%; } .lead-b .btn { flex: 1; justify-content: center; } }
.aif-new .modal-head h3 { display: flex; align-items: center; gap: 8px; } .aif-new .modal-head h3 svg { width: 18px; height: 18px; color: var(--accent-text); }

/* Банк: settings card and Облік tab */
.bank-src { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
.bank-acc { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bank-acc .check { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.bank-t td.pcmt .input { min-width: 140px; }
.chk-m { padding: 8px 14px 4px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-top: 1px solid var(--border); background: var(--bg-sub); }
.chk summary .btn { margin-left: auto; }
button.nav { width: 100%; text-align: left; font: inherit; font-weight: 520; font-size: 14.5px; }
.nav[data-a=links] .cnt svg { transform: scaleX(-1); }
.pay-l { display: flex; flex-direction: column; max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
.pay-l .check { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13.5px; } .pay-l .check:first-child { border-top: 0; }

/* my overview (non-admins) */
.my-month .my-pct { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 8px; } .my-pct .v { font: 600 45px/1 var(--display); letter-spacing: -.03em; } .my-pct .v small { font-size: 21.5px; margin-left: 2px; color: var(--text-3); }
.meter.big { height: 12px; border-radius: 8px; } .meter.big i { border-radius: 8px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
.goal.my-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 820px) { .goal.my-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goal.my-stats .kpi .v { font-size: 28px; } }

.timer-start { width: 100%; justify-content: center; gap: 8px; } .shell.mini .timer-start { padding: 0; width: 36px; margin: 0 auto; } .shell.mini .timer-start .lbl { display: none; } /* folded menu: only the ▶ is left */
.row-play { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); opacity: .55; transition: opacity .15s, background .15s, color .15s; margin-left: 6px; } .row-play svg { width: 12px; height: 12px; } .tline:hover .row-play, .row-play.on { opacity: 1; } .row-play:hover { background: var(--hover); color: var(--text); } .row-play.on { color: var(--accent); }
@media (hover: none) { .row-play { opacity: 1; } }
#timer-dock { display: none; }
@media (max-width: 820px) { #timer-dock { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 405; pointer-events: none; } #timer-dock > * { pointer-events: auto; } #timer-dock .timer-pill { box-shadow: var(--shadow-lg); } .timer-fab { margin-left: auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-lg); } .timer-fab svg { width: 18px; height: 18px; } .sidebar #timer-slot { display: none; } }
.nav[draggable=true] { cursor: grab; } .nav.dragging { opacity: .45; } .nav.drop { box-shadow: 0 0 0 2px var(--accent) inset; }

/* settings: a side menu and two columns of cards on a computer, the old single column with top tabs on narrower screens */
.set-page { max-width: 1500px; }
.set-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 18px; overflow-x: auto; }
@media (min-width: 1000px) {
  .set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: start; }
  .set-tabs { position: sticky; top: 8px; flex-direction: column; gap: 2px; border-bottom: 0; margin: 0; overflow: visible; }
  .set-tabs .tab { height: 36px; width: 100%; padding: 0 12px; border: 0; margin: 0; border-radius: 9px; }
  .set-tabs .tab:hover { background: var(--hover); }
  .set-tabs .tab.on { background: var(--panel); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
}
@media (min-width: 1280px) {
  .set-body.cols2 { column-count: 2; column-gap: 18px; }
  .set-body.cols2 > * { break-inside: avoid; margin-top: 0 !important; margin-bottom: 18px; display: block; }
}

/* ---------- креативи: the feed ---------- */
.view.cf-view { overflow: hidden; padding: 0; }
.cf { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: #050506; color: #fff; }
.cf-main { position: relative; min-width: 0; min-height: 0; }
.cf-scroll { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.cf-scroll::-webkit-scrollbar { display: none; }
.cf-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #050506; }
.cf-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cf-stage .cf-media { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; border: 0; }
.cf-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pa, #444) 28%, #000), #050506 70%); }
.cf-ph .cf-poster { width: 100%; height: 100%; object-fit: contain; }
.cf-ph-ic { opacity: .5; } .cf-ph-ic svg { width: 56px; height: 56px; }
.cf-stage video.cf-media { position: relative; z-index: 1; }
/* centred with auto margins, not a transform: the button's own hover / press transform would shove it aside */
.cf-play-pl { position: absolute; z-index: 3; inset: 0; margin: auto; width: max-content; height: fit-content; }
.cf-open { position: absolute; z-index: 3; left: 0; right: 0; bottom: 90px; margin: 0 auto; width: max-content; }
.cf-shade { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 2; }
.cf-cap { position: absolute; left: 0; right: 76px; bottom: 0; padding: 0 18px 26px; z-index: 3; display: flex; flex-direction: column; gap: 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); pointer-events: none; } .cf-cap a { pointer-events: auto; }
.cf-nm { font: 600 18px/1.25 var(--display); letter-spacing: -.01em; word-break: break-word; }
.cf-sub { display: flex; align-items: center; gap: 6px; font-size: 14px; opacity: .85; } .cf-sub svg { width: 14px; height: 14px; }
.cf-type { font-size: 12.5px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.cf-people { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13.5px; } .cf-people span { display: inline-flex; align-items: center; gap: 6px; }
.cf-cap .ptag { color: #fff; }
.cf-rail { position: absolute; right: 10px; bottom: 26px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cf-act { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; color: #fff; font-size: 13px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.cf-act svg { width: 28px; height: 28px; padding: 9px; box-sizing: content-box; border-radius: 50%; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); transition: background .15s, transform .15s; } .cf-act:hover svg { background: rgba(255, 255, 255, .28); } .cf-act:active svg { transform: scale(.92); }
.cf-act b { font-weight: 600; } .cf-act span { display: flex; }
.cf-only-d { display: none; }
.cf-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 5; cursor: pointer; touch-action: none; }
.cf-prog::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); transition: height .15s; }
.cf-prog .cf-buf { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: rgba(255, 255, 255, .38); transition: height .15s, width .3s; }
.cf-prog i { position: absolute; left: 0; bottom: 0; display: block; height: 4px; width: 0; background: #fff; transition: height .15s; }
.cf-prog .cf-thumb { position: absolute; bottom: 2px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); transform: scale(0); transition: transform .15s; }
.cf-prog:hover::before, .cf-prog:hover .cf-buf, .cf-prog:hover i, .cf-slide.is-scrub .cf-prog::before, .cf-slide.is-scrub .cf-buf, .cf-slide.is-scrub .cf-prog i { height: 7px; } .cf-prog:hover .cf-thumb, .cf-slide.is-scrub .cf-thumb { transform: scale(1); bottom: 0; }
.cf-slide.is-playing .cf-play-ico { opacity: 0; }
.cf-top { position: absolute; top: 12px; left: 12px; z-index: 6; display: flex; gap: 6px; pointer-events: none; }
.cf-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); text-transform: capitalize; }
.cf-nav { display: none; }
.cf-panel { display: none; }
.cf-empty { height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; } .cf-empty .empty { color: #fff; } .cf-empty .empty b { color: #fff; } .cf-empty .empty span { color: #bbb; } .cf-empty .btn { color: var(--text); }
.cf-sheet .modal-body { max-height: 78vh; overflow: auto; }
@media (max-width: 820px) { .cf { bottom: calc(68px + env(safe-area-inset-bottom)); } .cf-rail { bottom: 30px; } .cf-cap { padding-bottom: 30px; } }
@media (min-width: 1000px) {
  .cf { grid-template-columns: minmax(0, 1fr) 390px; }
  .cf-only-m { display: none; } .cf-only-d { display: flex; }
  .cf-panel { display: block; overflow: auto; padding: 20px 18px; background: var(--bg-sub); color: var(--text); border-left: 1px solid var(--border); }
  .cf-nav { position: absolute; right: 86px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 10px; }
  .cf-nav button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .cf-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .3); } .cf-nav button:disabled { opacity: .3; }
  .cf-nav button svg { width: 18px; height: 18px; } .cf-nav button:first-child svg { transform: rotate(90deg); } .cf-nav button:last-child svg { transform: rotate(90deg); }
  .cf-cap { left: 14px; max-width: 520px; right: auto; padding-bottom: 30px; }
}

.cf-rate { display: inline-flex; align-items: center; gap: 4px; } .cf-rate svg { width: 12px; height: 12px; fill: #ffd24a; stroke: #ffd24a; }
.cf-slide.is-pl .cf-shade, .cf-slide.is-pl .cf-cap, .cf-slide.is-pl .cf-rail { display: none; }
.cf-plbox { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; background: #000; } .cf-plbox .cf-pl { width: 100%; height: 100%; border: 0; display: block; }
.cf-plx, .cf-plre { position: absolute; top: 12px; z-index: 7; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .cf-plx { right: 12px; } .cf-plre { right: 58px; } .cf-plx svg, .cf-plre svg { width: 18px; height: 18px; }
.cf-nofile { position: relative; z-index: 3; max-width: 320px; margin: 0 auto; padding: 18px; border-radius: 14px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(10px); text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; } .cf-nofile span { font-size: 14px; opacity: .8; }

/* what the video is doing: loading (spinner), paused (play sign), time while scrubbing */
.cf-state { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cf-spin { display: none; width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: cfspin .8s linear infinite; }
.cf-pause { display: none; width: 76px; height: 76px; border-radius: 50%; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); align-items: center; justify-content: center; } .cf-pause svg { width: 34px; height: 34px; margin-left: 4px; }
.cf-slide.is-loading .cf-spin { display: block; } .cf-slide.is-paused:not(.is-loading) .cf-pause { display: flex; }
@keyframes cfspin { to { transform: rotate(360deg); } }
.cf-time { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 6; padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .6); font: 600 14px var(--mono); opacity: 0; transition: opacity .15s; pointer-events: none; } .cf-slide.is-scrub .cf-time { opacity: 1; }
/* clear mode: nothing but the video, over the whole screen; only the Clear button stays */
.cf.is-clear { position: fixed; inset: 0; z-index: 650; grid-template-columns: minmax(0, 1fr); }
.cf.is-clear .cf-panel, .cf.is-clear .cf-top, .cf.is-clear .cf-nav, .cf.is-clear .cf-cap, .cf.is-clear .cf-shade, .cf.is-clear .cf-prog, .cf.is-clear .cf-time, .cf.is-clear .cf-act:not([data-a=clear]) { display: none; }
.cf.is-clear .cf-act[data-a=clear] { opacity: .55; } .cf.is-clear .cf-act[data-a=clear]:hover { opacity: 1; }

/* ---------- Огляд: мій тиждень ---------- */
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: var(--r); }
.wk-day:hover { background: var(--hover); }
.wk-day .h { font-size: 13px; font-weight: 600; min-height: 16px; font-variant-numeric: tabular-nums; }
.wk-day .bar { position: relative; width: 100%; max-width: 34px; height: 72px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; }
.wk-day .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: 6px 6px 0 0; }
.wk-day .bar em { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-3); opacity: .5; }
.wk-day .n { font-size: 12.5px; color: var(--text-3); } .wk-day.today .n { color: var(--accent-text); font-weight: 650; }
.wk-day.future { opacity: .55; }
.wk-list { margin-top: 12px; }
.wk-days.month { gap: 3px; } @media (max-width: 820px) { .wk-days.month { gap: 1px; } .wk-days.month .n { font-size: 8.5px; } } .wk-days.month .h { display: none; } .wk-days.month .bar { height: 60px; border-radius: 3px; } .wk-days.month .bar i { border-radius: 3px 3px 0 0; } .wk-days.month .n { font-size: 10.5px; } .wk-days.month .wk-day { padding: 4px 0; }
.wk-day.off .bar { background: transparent; border: 1px dashed var(--border); }
.my-week .card-h { flex-wrap: wrap; gap: 6px 10px; }

/* horizontal strips (tabs, chips, top actions) scroll only sideways: no vertical wobble inside, no sideways bounce of the page */
.tabs, .set-tabs, .months-nav, .strip, .shots-row, .aif-cardimgs, .wk-load { overflow-y: hidden; overscroll-behavior-x: contain; }
@media (max-width: 820px) { .ptabs, #top-actions, .board-bar, .acc-threads { overflow-y: hidden; overscroll-behavior-x: contain; } }
.time-head { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 18px; } .time-head .tabs { flex: 1; margin: 0; min-width: 0; } .time-head .btn { margin-bottom: 6px; flex: none; }
@media (max-width: 820px) { .time-head { flex-wrap: wrap; } .time-head .tabs { flex: 0 0 100%; } }
.bank-bals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bal-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 10px; } .bal { display: flex; flex-direction: column; gap: 2px; } .bal .v { font: 600 25.5px/1.1 var(--display); letter-spacing: -.02em; } .bal .faint { font-size: 13px; }
/* a page header without its own title (the top bar names the page): only its controls stay, an empty one takes no room */
.page-h > .grow:empty { display: none; } .page-h:has(> .grow:empty) { justify-content: flex-end; align-items: center; margin-bottom: 14px; }
.page-h:has(> .grow:empty):not(:has(> :not(.grow):not(:empty):not(.hidden))) { display: none; }
.seg:empty { display: none; }
/* ---------- Новини ніші ---------- */
.news-b { max-height: 230px; overflow: hidden; position: relative; } .news-b.open { max-height: none; }
.news-b:not(.open)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--panel)); }
.news .acc-md ul { margin-left: 16px; } .news .acc-md li { margin-bottom: 8px; }
.news-more { margin-top: 6px; }
.news-old { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .news-old:last-child { border: 0; margin: 0; }
.alog-l.fails .alog2 { grid-template-columns: 130px 1fr; padding: 8px 14px; } .alog-l.fails .alog2:first-child { border-top: 0; }
.acct-set { margin-bottom: 22px; max-width: 980px; }
/* ---------- Огляд дизайнера: мій час ---------- */
.hrs-b { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.hrs-tot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 16px; } .hrs-tot .v { font: 600 43px/1 var(--display); letter-spacing: -.03em; } .hrs-tot .v small { font-size: 19.5px; margin-left: 3px; color: var(--text-3); }
.hrs-d { font-size: 14px; font-weight: 650; } .hrs-d.up { color: var(--ok); } .hrs-d.down { color: var(--bad); }
.hrs-days { display: grid; gap: 8px; align-items: end; } .hrs-days.month { gap: 3px; }
.hrs-days .hd { display: flex; flex-direction: column; align-items: center; gap: 4px; } .hrs-days .h { font-size: 12.5px; font-weight: 600; min-height: 15px; font-variant-numeric: tabular-nums; }
.hrs-days .bar { position: relative; width: 100%; max-width: 40px; height: 110px; border-radius: 6px; background: var(--bg-sunk); overflow: hidden; } .hrs-days.month .bar { height: 90px; border-radius: 3px; }
.hrs-days .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); } .hrs-days .bar em { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-3); opacity: .5; }
.hrs-days .hd { cursor: pointer; border-radius: var(--r); padding: 4px 0; } .hrs-days .hd:hover { background: var(--hover); }
.hrs-days .n { font-size: 12px; color: var(--text-3); } .hrs-days.month .n { font-size: 10px; } .hrs-days .today .n { color: var(--accent-text); font-weight: 650; }
.hrs-days .future .bar { opacity: .5; } .hrs-days .off .bar { background: transparent; border: 1px dashed var(--border); }
.hrs-ppl { display: flex; flex-direction: column; gap: 9px; } .hrs-ppl .hp { display: grid; grid-template-columns: 24px 84px 1fr 44px; gap: 8px; align-items: center; font-size: 14px; }
.hrs-ppl .bar { height: 8px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; } .hrs-ppl .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .hrs-ppl b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .hrs-b { grid-template-columns: 1fr; gap: 20px; } .hrs-days.month { gap: 1px; } .hrs-days.month .n { font-size: 8.5px; } }
.hrs-b > * { min-width: 0; } .hrs-days .hd { min-width: 0; font: inherit; color: inherit; background: none; border: 0; }

/* Огляд of an admin: the production week in big numbers (week.js), then news, my cards, deliveries */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; margin-top: 16px; }
.ov-news .acc-md { font-size: 15.5px; line-height: 1.55; } .ov-news .news-b { max-height: 420px; } .ov-news .card-h h3 { font-size: 17px; }
.tline.sm { padding: 8px 14px; color: inherit; text-decoration: none; } .tline.sm .t { font-size: 14px; font-weight: 500; }
/* Наші креативи → Сітка: 9:16 tiles, four in a row (two on a phone); the ones on screen play muted */
.cf-grid { position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px 40px; }
.cg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 14px; max-width: 1400px; margin: 0 auto; }
@media (min-width: 1000px) { .cg-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .cg-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cg-t { cursor: pointer; min-width: 0; }
.cg-m { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--pa, var(--c-violet)) 30%, #0b0b0d); transition: transform .2s var(--ease), box-shadow .2s; }
.cg-t:hover .cg-m { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.25)); }
.cg-m > img, .cg-m > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-t.is-playing .cg-m > img { opacity: 0; }
.cg-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); } .cg-ph svg { width: 40px; height: 40px; }
.cg-m .cf-type { position: absolute; left: 10px; top: 10px; color: #fff; background: rgba(0,0,0,.45); }
.cg-tk { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(6px); }
.cg-tk:hover { background: var(--accent); } .cg-tk svg { width: 17px; height: 17px; }
.cg-cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px 0; min-width: 0; } .cg-cap b { font: 600 15px/1.3 var(--mono); } .cg-cap span { font-size: 13.5px; }
@media (max-width: 820px) { .cf-grid { padding: 12px 12px 90px; } .cg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .cg-cap b { font-size: 13.5px; } }
a.cf-sub { color: inherit; text-decoration: none; } a.cf-sub:hover { opacity: 1; text-decoration: underline; }
/* Ігри → Креативи: a game per row with its top creatives (9:16) */
.gr { display: flex; flex-direction: column; gap: 14px; }
.gr-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.gr-game { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 6px 4px; border-radius: 12px; color: inherit; }

.gr-nm { font: 700 20px/1.25 var(--font); overflow-wrap: anywhere; }
.gr-cl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.gr-n { font-size: 14px; color: var(--muted); } .gr-n b { font-size: 17px; color: var(--text); }
.gr-all { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 14px var(--font); color: var(--accent); } .gr-all svg { width: 15px; height: 15px; }
.gr-game:hover .gr-nm { color: var(--accent); }
.gr-strip { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; min-width: 0; } /* four in sight (five on wide screens), the rest scrolls sideways */
.gr-strip > * { flex: 0 0 calc((100% - 36px) / 4); scroll-snap-align: start; }
@media (min-width: 1700px) { .gr-strip > * { flex-basis: calc((100% - 48px) / 5); } }
.gr-t { cursor: pointer; min-width: 0; }
.gr-t:hover .cg-m { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.25)); }
.is-playing .cg-m > img { opacity: 0; }
.gr-t .cg-cap { padding-top: 6px; } .gr-t .cg-cap b { font-size: 13.5px; }
.gr-rate { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.55); color: #ffd25e; font: 700 13.5px var(--font); } .gr-rate svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 820px) {
  .gr-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .gr-game { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0; } .gr-game .pi, .gr-game img { margin: 0; width: 44px !important; height: 44px !important; } .gr-nm { font-size: 17px; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-cl { display: none; } .gr-n b { font-size: 15px; } .gr-all { margin: 0; }
  .gr-strip { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; gap: 10px; margin: 0 -12px; padding: 0 12px; }
  .gr-strip > * { flex: 0 0 42vw; }
}
/* Ігри: one bar for the view, the source, search and status; the game column of a row; the add tile; Топ-перформери of a game */
.g-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.g-bar .search { width: 260px; } .g-bar .search .input { width: 100%; }
.gr-gl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: inherit; min-width: 0; } .gr-gl:hover .gr-nm { color: var(--accent); }
.gr-acts { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 10px; }
.g-bar.toolbar { margin: 0 0 12px; } .g-cl { gap: 8px; min-width: 0; } .g-cl svg { width: 15px; height: 15px; opacity: .6; }
.gr-row.gr-none { display: flex; align-items: center; gap: 14px; padding: 10px 14px; } .gr-row.gr-none .gr-gl { flex-direction: row; align-items: center; gap: 12px; } .gr-row.gr-none .gr-nm { font-size: 16px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px 12px; }
@media (max-width: 820px) {
  .g-bar .search { order: 9; flex: 1 1 150px; width: auto; } .g-bar .g-cl { order: 8; max-width: 50%; } .g-bar .sp { display: none; }
  .gr-gl { flex-direction: row; align-items: center; flex: 1 1 0; min-width: 0; } .gr-acts { flex-direction: row; align-items: center; margin: 0; padding: 0; width: 100%; justify-content: space-between; }
  .gr-row.gr-none .gr-cl, .gr-row.gr-none .sp { display: none; } .gr-row.gr-none { padding: 8px 12px; gap: 10px; } .gr-row.gr-none .gr-gl { flex: 1 1 0; min-width: 0; } .gr-row.gr-none .gr-nm { font-size: 15px; }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
}
.gr-rate.gr-top { background: color-mix(in srgb, var(--c-violet) 85%, #000); color: #fff; }
.gd-modal { width: min(640px, 96vw); } .gd-modal .modal-head h3 { display: flex; align-items: center; gap: 8px; } .gd-modal .modal-head h3 svg { width: 18px; height: 18px; color: var(--accent-text); }
.gd-list { display: flex; flex-direction: column; } .gd-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .gd-row:first-child { border-top: 0; }
.gd-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-sunk); display: grid; place-items: center; flex: none; color: var(--text-2); } .gd-ic svg { width: 18px; height: 18px; }
.gd-sec { margin-top: 14px; border-radius: 10px; } .gd-sec.over { outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--accent-soft); }
.gd-sh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .gd-sh .sp { flex: 1; } .gd-none { padding: 8px 0; font-size: 14px; }
.gd-meta { font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .gd-meta .chip { height: 20px; font-size: 12px; padding: 0 6px; }
.gd-up:empty { display: none; } .gd-up { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.gd-job { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .gd-bar { flex: 1 0 100%; height: 4px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; } .gd-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s var(--ease-out); }
.gd-review { width: min(560px, 96vw); } .gd-rvrow { padding: 10px 0; border-top: 1px solid var(--border); } .gd-rvrow:first-child { border-top: 0; }
.gd-sec[data-sec=final] { border-radius: 0; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border); }
.gd-ic.pv, .gd-row .ell.pv { cursor: pointer; } .gd-row .ell.pv:hover { color: var(--accent-text); }
.gd-prev { width: min(560px, 96vw); } .gd-prev .modal-head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-prev video, .gd-prev img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 8px; background: #000; }
.gr-plus { display: block; padding: 0; border: 0; background: none; text-align: left; } .gr-plus .cg-m { display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed var(--border-2, var(--border)); color: var(--text-3); } .gr-plus .cg-m svg { width: 26px; height: 26px; } .gr-plus:hover .cg-m { color: var(--accent); border-color: var(--accent); }
.gd-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .gd-nets .chip { height: 22px; font-size: 12px; padding: 0 7px; }
/* a page bar moved into the top bar (Дошка, Ігри): it takes the room between the title and the bell */
#top-actions.fill { flex: 1; min-width: 0; } .topbar:has(#top-actions.fill) .spacer { display: none; } .topbar:has(#top-actions.fill) h1:empty { display: none; }
#top-actions.fill > .board-bar, #top-actions.fill > .g-bar { flex: 1; min-width: 0; padding: 0; border: 0; margin: 0; flex-wrap: nowrap; }
#top-actions.fill .search { min-width: 110px; flex: 0 1 240px; } #top-actions.fill .search .input { width: 100%; } #top-actions.fill .btn, #top-actions.fill .fbtn { flex: none; white-space: nowrap; }
@media (max-width: 820px) { #top-actions.fill { flex: 0 0 100%; } .topbar:has(#top-actions.fill) h1:empty { display: flex; } #top-actions.fill > .board-bar, #top-actions.fill > .g-bar { overflow-x: auto; scrollbar-width: none; } #top-actions.fill .search { flex: 0 0 170px; } }
.gd-tb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.gd-st { display: flex; align-items: center; justify-content: center; min-width: 0; height: calc(100dvh - 230px); min-height: 300px; }
.gd-fr { position: relative; overflow: hidden; border-radius: 18px; border: 6px solid #1b1b1d; background: #000; box-sizing: content-box; } .gd-fr iframe { border: 0; background: #fff; display: block; }
.gd-net { padding: 10px 0; border-top: 1px solid var(--border); } .gd-net:first-child { border-top: 0; padding-top: 0; }
#top-actions.fill .toolbar { flex-wrap: nowrap; margin: 0; min-width: 0; flex: 0 1 auto; gap: 8px; } #top-actions.fill .search .input { min-width: 0; }
@media (max-width: 1280px) and (min-width: 821px) { #top-actions.fill .lbl2 { display: none; } #top-actions.fill .search { flex-basis: 170px; } }
@media (max-width: 1600px) and (min-width: 821px) { #top-actions.fill .g-bar .lbl2 { display: none; } }
@media (max-width: 1300px) and (min-width: 821px) { #top-actions.fill .g-bar .seg-l { display: none; } #top-actions.fill .g-bar .search { flex-basis: 110px; } }
#top-actions.fill > .board-bar, #top-actions.fill > .g-bar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 2px 0; } #top-actions.fill > *::-webkit-scrollbar { display: none; } #top-actions.fill > * > * { flex-shrink: 0; } #top-actions.fill > * > .search, #top-actions.fill > * > .toolbar { flex-shrink: 1; }
#top-actions.fill > .board-bar > .toolbar { display: contents; }
.kb-zoom { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border-2); border-radius: var(--r); height: 34px; padding: 0 2px; } .kb-zoom .btn { height: 28px; width: 28px; } .kb-zv { min-width: 44px; height: 28px; font: 600 12.5px var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; border-radius: 6px; } .kb-zv:hover { background: var(--hover); color: var(--text); }
@media (max-width: 820px) { .kb-zoom { display: none; } }
/* ---------- Огляд of an admin (home.js + week.js): numbers row, «Мої задачі» + board + direction/format, load; every number opens a side panel ---------- */
.page.ov { display: flex; flex-direction: column; gap: 14px; } .page.ov > .ov-news { margin: 0; } .page.ov > [data-week] { display: flex; flex-direction: column; gap: 14px; }
.wq-skel { height: 300px; border-radius: var(--r-xl); background: var(--bg-sunk); }
.ov-l { font: 650 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.ov-cardh { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; min-width: 0; } .ov-cardh .faint { font-size: 12.5px; }
.ov-hero { display: block; }
.ov-wkbar { display: flex; align-items: center; gap: 8px; }
.ov-wsel { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--border); border-radius: 99px; background: var(--panel); padding: 0 3px; }
.ov-wsel > button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 99px; background: none; color: var(--text-2); cursor: pointer; }
.ov-wsel > button:hover:not(:disabled) { background: var(--hover, rgba(127,127,127,.12)); color: var(--text); } .ov-wsel > button:disabled { opacity: .3; cursor: default; }
.ov-wsel > button svg { width: 16px; height: 16px; }
.ov-wsel-t { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-wsel-t b { font: 700 15px var(--display); letter-spacing: -.01em; } .ov-wsel-t span { font-size: 13px; color: var(--text-3); }
.ov-wsel.cur .ov-wsel-t b { color: var(--accent-text); }
.ov-wkrow { display: flex; flex-wrap: wrap; gap: 8px; } .ov-wkrow > * { max-width: 100%; }
.ov-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ov-k { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); cursor: pointer; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; min-width: 0; }
.ov-k:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); }
.ov-n { font: 700 42px/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; } .ov-n small { font-size: 22px; margin-left: 1px; }
.ov-f { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; min-height: 22px; min-width: 0; max-width: 100%; } .ov-f .faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-games { gap: 0; } .ov-games > * { margin-right: -5px; border-radius: 6px; box-shadow: 0 0 0 2px var(--panel); }
.ov-ic { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } .ov-ic svg { width: 17px; height: 17px; }
.ov-ring { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; transform: rotate(-90deg); } .ov-ring circle { fill: none; stroke: var(--bg-sunk); stroke-width: 6; } .ov-ring circle.v { stroke: var(--c-green); stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.ov-d { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--bg-sunk); color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
.ov-d.good { background: color-mix(in srgb, var(--c-green) 18%, transparent); color: var(--c-green); } .ov-d.bad { background: color-mix(in srgb, var(--c-red) 18%, transparent); color: var(--c-red); }
.ov-row2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(250px, .8fr); gap: 12px; align-items: stretch; } .ov-row2 > * { min-width: 0; } .ov-row2 > .card, .ov-mine { height: 100%; }
.ov-mine { padding-bottom: 6px; }
.ov-t { display: flex; align-items: center; gap: 9px; padding: 7px 16px; color: inherit; text-decoration: none; min-width: 0; } .ov-t:hover { background: var(--hover); } .ov-t .t { font-size: 13.5px; font-weight: 520; } .ov-t .chip { font-size: 11.5px; }
.ov-col { flex: none; font-size: 11px; font-weight: 650; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; color: var(--c, var(--text-3)); background: color-mix(in srgb, var(--c, var(--text-3)) 14%, transparent); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-board { padding-bottom: 8px; }
.ov-bl { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) 30px 30px; align-items: center; gap: 10px; width: 100%; padding: 5px 16px; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; } .ov-bl:hover { background: var(--hover); }
.ov-bl > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ov-bar { height: 8px; border-radius: 99px; background: var(--bg-sunk); overflow: hidden; } .ov-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); }
.ov-bl b { font: 700 17px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; } .ov-bd { font-size: 11.5px; font-weight: 700; } .ov-bd { color: var(--text-3); } .ov-bd span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 99px; font-size: 11px; } .ov-bd .up { color: var(--accent-text); background: var(--accent-soft); } .ov-bd .down { color: var(--text-2); background: var(--hover); } /* a change against last week: marked, but not as good or bad news */
.ov-mix { padding: 4px 0 8px; display: flex; flex-direction: column; } .ov-mx { padding: 10px 16px 6px; } .ov-mx + .ov-mx { border-top: 1px solid var(--border); }
.ov-mx-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; } .ov-mx-h .faint { font-size: 12px; }
.ov-mx-bar { display: flex; gap: 3px; height: 10px; margin-bottom: 8px; } .ov-mx-bar button { background: var(--c); border: 0; border-radius: 99px; min-width: 6px; padding: 0; cursor: pointer; } .ov-mx-bar button:hover { filter: brightness(1.15); }
.ov-mx-lg { display: flex; flex-wrap: wrap; gap: 4px 6px; } .ov-mx-lg button { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 7px; margin-left: -7px; border: 0; background: none; border-radius: 7px; font: 550 12.5px var(--font); color: var(--text-2); cursor: pointer; } .ov-mx-lg button:hover { background: var(--hover); }
.ov-mx-lg i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); align-self: center; } .ov-mx-lg b { font: 700 15px var(--display); color: var(--text); } .ov-mx-lg small { font-size: 11px; color: var(--text-3); }
.ov-load { padding-bottom: 8px; } .ov-load .ov-cardh { flex-wrap: wrap; row-gap: 8px; }
.ov-sg { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border-2); background: var(--panel); font: 600 12.5px var(--font); color: var(--text-2); cursor: pointer; } .ov-sg b { font: 700 14px var(--display); color: var(--text); } .ov-sg:hover { background: var(--hover); }
.ov-sg.red { border-color: color-mix(in srgb, var(--c-red) 45%, transparent); color: var(--c-red); background: color-mix(in srgb, var(--c-red) 10%, transparent); } .ov-sg.red b { color: var(--c-red); }
.ov-sg.amber { border-color: color-mix(in srgb, var(--c-amber) 50%, transparent); color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 12%, transparent); } .ov-sg.amber b { color: var(--c-amber); }
.ov-sg.orange { border-color: color-mix(in srgb, var(--c-orange) 45%, transparent); color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 10%, transparent); } .ov-sg.orange b { color: var(--c-orange); }
.ov-load .wk-row { padding: 4px 16px; } .ov-load .wk-row:not(.wk-head):hover { background: var(--hover); } .ov-load .wk-g { padding: 10px 16px 2px; font-size: 11.5px; }

.ov-load .wk-head .wk-line { height: auto; } .ov-load .wk-head .wk-line span { display: flex; gap: 4px; align-items: baseline; font-size: 11px; } .ov-load .wk-head .wk-line span b { font-size: 12px; color: var(--text-2); }
.ov-load .wk-key { padding: 8px 16px 2px; border-top: 1px solid var(--border); margin-top: 6px; font-size: 12px; }
.wq-sig { display: flex !important; gap: 8px; flex-wrap: wrap; } .wq-sig button { font-size: 11.5px; font-weight: 600; padding: 0; background: none; border: 0; cursor: pointer; } .wq-sig button:hover { text-decoration: underline; }
.wq-noest { color: var(--text-2); } .wq-late { color: var(--bad); }
.wq-h { display: inline-flex; align-items: baseline; gap: 2px; font: 700 14px/1 var(--display); color: var(--c-green); white-space: nowrap; font-variant-numeric: tabular-nums; } .wq-h small { font: 500 11px var(--font); color: var(--text-3); }
.wk-b em { position: relative; margin-left: auto; padding-left: 6px; font-style: normal; font-weight: 700; font-size: 11px; }
/* the side panel behind a number */
.drawer.ov-drawer { width: min(560px, 100vw); }
.ovd { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ovd-h { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); } .ovd-h > div { flex: 1; min-width: 0; } .ovd-h h3 { font: 700 21px/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 3px; } .ovd-h .faint { font-size: 13px; }
.ovd-sum { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--border); max-height: 34vh; overflow-y: auto; flex: none; }
.ovd-g { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: none; border-radius: 8px; font: 550 13.5px var(--font); color: inherit; text-align: left; cursor: pointer; overflow: hidden; } .ovd-g:hover { background: var(--hover); }
.ovd-g i { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 11%, transparent); z-index: 0; } .ovd-g > *:not(i) { position: relative; z-index: 1; } .ovd-g b { font: 700 15px var(--display); text-align: right; }
.ovd-ni { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-sunk); }
.ovd-l { flex: 1; overflow-y: auto; padding: 4px 0 20px; } .ovd-l section { padding-top: 6px; }
.ovd-gh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--panel); font-size: 14px; } .ovd-gh .more { margin-left: auto; font-size: 12.5px; }
.ovd-r { display: flex; align-items: center; gap: 8px; padding: 7px 20px 7px 48px; color: inherit; text-decoration: none; font-size: 13.5px; min-width: 0; } .ovd-r:hover { background: var(--hover); } .ovd-r .t { flex: 1; min-width: 0; } .ovd-r .avs { display: inline-flex; flex: none; } .ovd-r .avs > * + * { margin-left: -6px; } .ovd-r .faint { font-size: 12px; flex: none; }
.ov-pill { flex: none; font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 6px; } .ov-pill.ok { color: var(--c-green); background: color-mix(in srgb, var(--c-green) 14%, transparent); } .ov-pill.bad { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 14%, transparent); }
@media (max-width: 1280px) { .ov-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ov-row2 > .ov-mine-slot { grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .page.ov, .page.ov > [data-week] { gap: 10px; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ov-k { padding: 12px; } .ov-n { font-size: 32px; } .ov-n small { font-size: 18px; } .ov-ic { width: 28px; height: 28px; top: 10px; right: 10px; } .ov-ring { width: 42px; height: 42px; top: 10px; right: 10px; }
  .ov-row2 { grid-template-columns: 1fr; gap: 10px; } .ov-load .wk-row { grid-template-columns: 140px 1fr; padding: 3px 12px; } .ov-sg { height: 26px; padding: 0 8px; }
  .ovd-r { padding-left: 20px; flex-wrap: wrap; } .ovd-r .t { flex-basis: 100%; }
}
.ov-k .ov-l { padding-right: 40px; } .ov-k-ot .ov-l { padding-right: 56px; }
.ov-mx-lg { flex-wrap: nowrap; justify-content: space-between; gap: 2px; } .ov-mx-lg button { margin-left: 0; padding: 3px 6px; white-space: nowrap; } .ov-mx-lg button:first-child { margin-left: -6px; } .ov-mx-lg button:last-child { margin-right: -6px; }
/* Референси: the game column — a big logo, then «Усі N →» and «Додати відео» as two full-width buttons at the bottom */
.gr-row { grid-template-columns: 220px minmax(0, 1fr); } .gr-game { padding: 4px 2px; gap: 8px; } .gr-gl .pi, .gr-gl > img { border-radius: 22px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.gr-acts { align-self: stretch; align-items: stretch; gap: 6px; padding-top: 12px; }
.gr-acts .gr-all { justify-content: space-between; height: 38px; color: var(--text); margin: 0; } .gr-acts .gr-all b { font-weight: 700; } .gr-acts .gr-all svg { color: var(--accent); }
.gr-acts .gr-add { justify-content: flex-start; height: 36px; color: var(--text-2); } .gr-acts .gr-add:hover { color: var(--accent); }
@media (max-width: 820px) { .gr-row { grid-template-columns: 1fr; } .gr-game { gap: 4px 10px; } .gr-acts { flex: 0 0 100%; flex-direction: row !important; gap: 6px !important; padding-top: 4px; } .gr-acts > * { flex: 1 1 0; height: 34px !important; } }
.cf-type.cf-wip { background: color-mix(in srgb, var(--c-orange) 85%, #000); color: #fff; } .cg-m .cg-wip { left: auto; right: 10px; top: auto; bottom: 10px; position: absolute; }
/* Люди та налаштування → Налаштування */
.auto-card { max-width: 720px; }
.auto-b { padding: 14px 16px 16px; }
.auto-card .hint { margin: 0 0 12px; }
.auto-rows { display: flex; flex-direction: column; gap: 8px; }
.auto-row { display: grid; grid-template-columns: 110px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cf-grid .cg-mh { max-width: 1400px; margin: 22px auto 12px; } .cf-grid .cg-mh:first-child { margin-top: 0; }
/* sortable tables (KPI, Звітність): a tap on a column title sorts by it */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable.on { color: var(--accent-text); }
th.sortable .sarr { font-style: normal; font-size: 9px; margin-left: 4px; vertical-align: 1px; }
.grid-2.rep-low { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } /* the clients card is narrow and only as tall as its rows */
.rep-cl .hbar { gap: 12px; } .rep-cl .hbar .v { min-width: 24px; text-align: right; }
@media (max-width: 1000px) { .grid-2.rep-low { grid-template-columns: 1fr; } }
/* Запити → Пропозиції */
.acc-ev.idea { align-items: flex-start; } .acc-ev.idea .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idea-b { font-size: 13.5px; color: var(--text-2); } .idea-b p { margin: 0 0 4px; }
.idea-r { display: flex; gap: 6px; font-size: 13px; color: var(--c-green); } .idea-r svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 820px) { .acc-ev.idea { flex-wrap: wrap; } .acc-ev.idea .lead-b { flex: 0 0 100%; } }
/* people on a card tile: big enough to recognise at a glance */
.tcard .meta .av-stack .av { width: 28px; height: 28px; font-size: 11.5px; margin-left: -6px; } .tcard .meta .av-stack .av:first-child { margin-left: 0; }
.ov-wq button { height: 30px; } .ov-wkbar .seg { flex: none; }
/* a view switch in the top bar must read as a switch in both themes */
#top-actions .seg, .topbar h1 .seg { background: var(--panel); border: 1px solid var(--border-2); }
#top-actions .seg button.on, .topbar h1 .seg button.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
/* a playable tile says at once that it is a game to run, not a video that is still loading */
.pl-hov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.35); color: #fff; opacity: 0; transition: opacity .18s; pointer-events: none; }
.pl-hov svg { width: 26px; height: 26px; padding: 16px; box-sizing: content-box; border-radius: 99px; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.pl-hov b { font-size: 13px; font-weight: 650; }
.cg-t:hover .pl-hov, .gr-t:hover .pl-hov { opacity: 1; }
@media (hover: none) { .pl-hov { opacity: 1; background: none; } .pl-hov b { display: none; } .pl-hov svg { padding: 12px; } }
.gr-links { display: flex; flex-wrap: wrap; gap: 6px; } .gr-links a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); color: var(--text-2); background: var(--panel); } .gr-links a:hover { color: var(--accent-text); border-color: var(--accent); } .gr-links svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .gr-links { order: 3; } }
/* card tile: dates on top, time / estimate under them, the people on the right of both */
.tcard .meta.tm { flex-wrap: nowrap; align-items: center; gap: 8px; }
.tcard .meta.tm .tm-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tcard .meta.tm .tm-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .tcard .meta.tm .tm-row:not(:has(*)) { display: none; }
.tcard .meta.tm > .av-stack { flex: none; margin-left: auto; }

/* card sheet: the brief (ТЗ) on its own sheet, the working part (subtasks, checklist, files, time…) in a tinted block below */
.sh-brief { margin-top: 18px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.sh-brief .tsec-h h4 { font-size: 15px; }
.sh-work { margin-top: 22px; padding: 4px 16px 16px; border-radius: 12px; background: var(--bg-sub); border: 1px solid var(--border); }
.sh-work-add { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.sh-work > .tsec { margin-top: 0; padding-top: 18px; } .sh-work > .tsec + .tsec { border-top: 1px solid var(--border); margin-top: 18px; }
.sh-tools .kseg button { padding: 0 10px; }
select option { background: var(--elev); color: var(--text); }
@media (max-width: 820px) { .sh-brief, .sh-work { padding-left: 12px; padding-right: 12px; } }
.sh-segs { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 820px) { .sh-tools { flex-wrap: wrap; } .sh-segs { order: 10; flex-basis: 100%; } .sh-tools .lpill { max-width: 46%; } }
.topbar h1 .rep-mode { margin-left: 8px; font-size: 13.5px; font-weight: 550; }
.rep-clt { width: 100%; } .rep-clt th, .rep-clt td { padding: 9px 14px; } .rep-clt td { vertical-align: top; } .rep-clt td.r { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rep-clbar { display: block; height: 4px; margin: 7px 0 0 16px; border-radius: 3px; background: var(--bg-sunk); overflow: hidden; } .rep-clbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
/* page tabs in the top bar, right after the title (Облік, Бухгалтер, Запити) */
.topbar h1 .top-tabs { display: flex; gap: 2px; margin: 0 0 0 12px; padding: 0; border: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; font-size: 13.5px; font-weight: 550; }
.topbar h1 .top-tabs::-webkit-scrollbar { display: none; }
.topbar h1 .top-tabs .tab { font-size: 13.5px; height: 32px; padding: 0 11px; border-radius: 8px; border: 0; margin: 0; white-space: nowrap; }
.topbar h1 .top-tabs .tab::after { display: none; }
.topbar h1 .top-tabs .tab.on { background: var(--accent-soft); color: var(--accent-text); }
.topbar h1 .top-tabs .tab svg { width: 15px; height: 15px; }
@media (max-width: 820px) { .topbar h1 .tt, .topbar h1:has(.top-tabs) > svg { display: none; } .topbar h1 .top-tabs { margin-left: 0; } .topbar h1 .top-tabs .tab svg { display: none; } }
.mate-h[data-mopen] { cursor: pointer; } .mate.open .entries { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.ovm-ks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.ovm-k { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.ovm-k small { font-size: 12px; color: var(--text-3); } .ovm-k b { font: 700 18px/1.15 var(--display); font-variant-numeric: tabular-nums; } .ovm-k .faint { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .ovm-ks { grid-template-columns: repeat(2, 1fr); } }
.ovd-g { grid-template-columns: 22px minmax(0, 190px) minmax(40px, 1fr) 30px; } .ovd-g > i { display: none; }
.ovd-g .ovd-tr i { position: static; top: auto; bottom: auto; z-index: auto; background: var(--accent); }
.ovd-tr { height: 8px; border-radius: 5px; background: var(--bg-sunk); overflow: hidden; } .ovd-tr i { display: block; height: 100%; border-radius: 5px; background: var(--accent); opacity: .75; }
/* Облік → Звіт → Період: the dates under the Рік / Період / KPI switch, smaller than a page title */
.rep-in > .page-h { margin-top: 6px; } .rep-in > .page-h h2 { font-size: 22px; }
/* invite window: post buttons, extra access folded */
.inv-posts { width: max-content; max-width: 100%; flex-wrap: wrap; }
.inv-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); padding: 4px 0; } .inv-more[open] summary { margin-bottom: 8px; }
.inv-more > .field { margin: 0; } .inv-more > .field > label { display: none; }
/* a worker's Огляд: my numbers, the timesheet as a card, the studio in one line */
/* dark: the selected segment sits above the lighter track */
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .seg button.on { background: #3a3a42; } }
:where(:root[data-theme="dark"]) .seg button.on { background: #3a3a42; }
/* a worker's Огляд (myhome.js): me first, then the studio apart and smaller */
.my-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } .my-row > * { min-width: 0; }
.ov-k.still { cursor: default; } .ov-k.still:hover { transform: none; border-color: var(--border); box-shadow: none; }
.my-mine .ov-t { cursor: pointer; padding: 6px 10px 6px 16px; } .ov-t:hover .row-play { opacity: 1; } .my-mine .empty { padding: 26px 16px; }
.ov-sg.sm { height: 22px; padding: 0 8px; font-size: 11.5px; cursor: default; } .ov-sg.sm b { font-size: 12.5px; } .ov-sg.sm:hover { background: color-mix(in srgb, var(--c-red) 10%, transparent); }
.my-hb { padding: 2px 16px 14px; }
.my-tot { display: flex; align-items: center; gap: 10px; } .my-tot .ov-n { margin: 2px 0 0; } .my-tot .ov-n small { font: 600 17px var(--font); color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.my-norm { position: relative; height: 8px; border-radius: 99px; background: var(--bg-sunk); margin: 14px 0 6px; } .my-norm i { display: block; height: 100%; border-radius: 99px; background: var(--accent); } .my-norm i.ok { background: var(--c-green); }
.my-norm s { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: .75; }
.my-norm-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.my-hrs .hrs-days .bar { height: 84px; } .my-hrs .hrs-days.month .bar { height: 60px; } .my-hrs .hrs-days .full .bar i { background: var(--c-green); }
.my-stat { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); } .my-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.my-went { margin-top: 6px; } .my-went .time-row { padding: 6px 0; }
.ts-ent summary { cursor: pointer; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--text-2); } .ts-ent[open] summary { margin-bottom: 4px; }
.my-sec { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 4px 0; border-top: 1px solid var(--border); flex-wrap: wrap; } .my-sec h3 { margin: 0; font: 700 19px var(--display); letter-spacing: -.01em; } .my-sec .faint { font-size: 13px; } .my-sec .more { font-size: 13px; }
.my-ppl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.my-team { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } .my-team > * { min-width: 0; }
.ov-kpis.sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ov-kpis.sm .ov-k { padding: 11px 14px; border-radius: var(--r-lg); } .ov-kpis.sm .ov-l { font-size: 11px; }
.ov-kpis.sm .ov-n { font-size: 27px; margin: 4px 0 0; } .ov-kpis.sm .ov-n small { font-size: 15px; } .ov-kpis.sm .ov-ring { width: 38px; height: 38px; top: 10px; right: 10px; }
@media (max-width: 1100px) { .my-row, .my-team { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .my-hb { padding: 2px 12px 12px; } }
.seg.sm { padding: 2px; } .seg.sm button { height: 26px; padding: 0 10px; font-size: 12.5px; }
.ov-f > .ov-games { display: inline-flex; align-items: center; gap: 0; margin-left: 2px; min-width: 0; overflow: hidden; padding: 2px; } .ov-games > * { flex: none; }
/* «Сьогодні» on a worker's Огляд: the day as a ring of the cards worked on, 8 hours = the full circle */
.my-day-b { display: flex; align-items: center; gap: 22px; padding: 6px 18px 16px; min-width: 0; }
.my-ring { position: relative; width: 168px; height: 168px; flex: none; }
.my-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.my-ring circle { fill: none; stroke: var(--c); stroke-width: 15; stroke-linecap: butt; transition: stroke-dasharray .6s var(--ease), stroke-dashoffset .6s var(--ease); }
.my-ring circle.trk { stroke: var(--bg-sunk); }
.my-ring circle.run { animation: breathe 3.6s ease-in-out infinite; }
.my-ring line { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.my-ring.done circle.trk { stroke: color-mix(in srgb, var(--c-green) 25%, var(--bg-sunk)); }
.my-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.my-ring-c b { font: 700 38px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .my-ring-c span { font-size: 13px; color: var(--text-3); font-weight: 550; }
.my-ring.done .my-ring-c b { color: var(--c-green); }
.my-ring-c .pulse { position: absolute; top: 46px; }
.my-day-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-dl { display: flex; align-items: center; gap: 9px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px; } .my-dl[data-card] { cursor: pointer; } .my-dl[data-card]:hover { background: var(--hover); }
.my-dl i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; } .my-dl b { font-variant-numeric: tabular-nums; font-weight: 650; }
.my-left { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .my-left b { color: var(--text); }
.my-left.ok { color: var(--c-green); font-weight: 600; } .my-left svg { width: 16px; height: 16px; }
/* the week of «Мій час» is the timesheet: the total on top, a bar per day in its footer */
.my-hrs .my-sheet { padding: 0 16px 14px; } .my-hrs .my-sheet .tbl-wrap { margin: 0; } .my-hrs .ts-ent { margin: 8px 0 0; }
.ts-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ts-sum { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
.ts-sum .ov-n { margin: 2px 0 0; } .ts-sum .ov-n small { font: 600 17px var(--font); color: var(--text-3); margin-left: 6px; letter-spacing: 0; } .ts-sum .faint { font-size: 13px; }
.week .ts-df { flex-direction: column; gap: 5px; } .ts-df i { width: 70%; max-width: 64px; height: 5px; border-radius: 3px; background: var(--bg-sunk); overflow: hidden; } .ts-df b { display: block; height: 100%; border-radius: 3px; background: var(--accent); } .ts-df b.ok { background: var(--c-green); }
.week .ts-df.today { color: var(--accent-text); }
.week.ts { grid-template-columns: minmax(200px, 1.6fr) repeat(7, minmax(60px, 1fr)) 76px; }
.week.ts > div { min-height: 46px; padding: 8px 12px; }
.week.ts .hd { align-items: center; justify-content: center; gap: 2px; min-height: 54px; } .week.ts .hd:first-child { align-items: flex-start; } .week.ts .hd:nth-child(9) { align-items: flex-end; }
.week.ts .hd.we, .week.ts .hd.we b { color: var(--text-3); font-weight: 500; }
.week.ts .today { background: color-mix(in srgb, var(--accent) 7%, transparent); } .week.ts .hd.today { background: color-mix(in srgb, var(--accent) 12%, var(--bg-sub)); }
.week.ts .cell.z { color: transparent; } .week.ts .cell.z:hover { color: var(--text-3); background: var(--hover); }
.week.ts .cell.we:not(.today) { background: color-mix(in srgb, var(--bg-sub) 50%, transparent); }
.week.ts .foot { min-height: 56px; } .week.ts .ts-df { padding-top: 10px; } .week.ts .ts-df.z span { color: var(--text-3); font-weight: 500; }
@media (max-width: 820px) { .week.ts { grid-template-columns: 140px repeat(7, 52px) 60px; } .week.ts > div { padding: 8px; } }
@media (max-width: 820px) { .my-day-b { gap: 14px; padding: 4px 12px 12px; } .my-ring { width: 128px; height: 128px; } .my-ring-c b { font-size: 30px; } .my-ring-c .pulse { top: 30px; } .my-hrs .my-sheet { padding: 0 12px 12px; } }
@media (max-width: 820px) { .ts-sum .faint { display: none; } .ts-top > .row { margin-left: auto; } .ts-sum .ov-n { font-size: 30px; } .ts-sum .ov-n small { font-size: 14px; } }
.ts-sum .ov-n { white-space: nowrap; }