:root {
  color-scheme: light;
  --bg: #f2f4f7; --panel: #ffffff; --sunk: #f6f8fa; --ink: #0f1b2d; --ink2: #475669; --mute: #6b7a8c; --line: #dde3ea; --line2: #ebeff4;
  --accent: #2754e8; --accent-ink: #ffffff; --accent-soft: #e8eefe;
  --ok: #17794f; --ok-soft: #e3f4ec; --warn: #9a5a06; --warn-soft: #fbf0dc; --bad: #b42318; --bad-soft: #fde8e6;
  --s1: #2a78d6; --s2: #eb6834; --shadow: 0 1px 2px rgba(15,27,45,.06), 0 8px 24px -12px rgba(15,27,45,.12);
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0d131b; --panel: #141c27; --sunk: #101722; --ink: #e8edf3; --ink2: #b4c0cd; --mute: #8394a7; --line: #243142; --line2: #1b2635;
    --accent: #6c8dff; --accent-ink: #0b1220; --accent-soft: #1b2745;
    --ok: #4cc38a; --ok-soft: #12291f; --warn: #e3a948; --warn-soft: #2c2210; --bad: #ff7b6e; --bad-soft: #321613;
    --s1: #3987e5; --s2: #d95926; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d131b; --panel: #141c27; --sunk: #101722; --ink: #e8edf3; --ink2: #b4c0cd; --mute: #8394a7; --line: #243142; --line2: #1b2635;
  --accent: #6c8dff; --accent-ink: #0b1220; --accent-soft: #1b2745;
  --ok: #4cc38a; --ok-soft: #12291f; --warn: #e3a948; --warn-soft: #2c2210; --bad: #ff7b6e; --bad-soft: #321613;
  --s1: #3987e5; --s2: #d95926; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
/* tabular figures only where numbers line up; applying them to prose spreads punctuation */
.num, .count, input[type=number] { font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 1.05rem; font-weight: 620; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--mute); } .ink2 { color: var(--ink2); } .small { font-size: .85rem; } .nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; letter-spacing: -.01em; }
.brand svg { flex: none; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--ink2); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav a svg { width: 18px; height: 18px; flex: none; }
.nav .count { margin-left: auto; min-width: 22px; padding: 0 7px; text-align: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .78rem; font-weight: 600; line-height: 20px; }
.rail .foot { margin-top: auto; display: grid; gap: 4px; }
.main { padding: 28px clamp(16px, 3.4vw, 44px) 64px; max-width: 1280px; width: 100%; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.top p { margin-top: 6px; color: var(--ink2); } .top select { width: auto; min-width: 220px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-weight: 560; cursor: pointer; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--sunk); border-color: var(--mute); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.danger { color: var(--bad); } .btn.quiet { border-color: transparent; background: transparent; color: var(--ink2); } .btn.quiet:hover { background: var(--sunk); }
.btn.sm { padding: 5px 10px; font-size: .88rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.field { display: grid; gap: 6px; } .field > span { font-weight: 560; font-size: .9rem; } .field small { color: var(--mute); }
input[type=text], input[type=password], input[type=number], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
textarea { resize: vertical; line-height: 1.55; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.check { display: flex; align-items: flex-start; gap: 10px; } .check input { margin-top: 4px; accent-color: var(--accent); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { padding: 9px 14px; border: 0; background: none; color: var(--ink2); font-weight: 560; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 580; background: var(--sunk); color: var(--ink2); border: 1px solid var(--line2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .pill.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); display: inline-block; flex: none; } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }

/* surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.pad { padding: 20px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; } .grid2 > *, .split > * { min-width: 0; }
.stack { display: grid; gap: 20px; }

/* slot board */
.board { margin-top: 12px; }
.board-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 84px minmax(110px, 1fr) 64px 112px; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line2); cursor: pointer; }
.board-row:hover { background: var(--sunk); }
.board-head { cursor: default; color: var(--mute); font-size: .82rem; padding-top: 10px; padding-bottom: 8px; border-top: 0; } .board-head:hover { background: none; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; } .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .who small { display: block; color: var(--mute); font-size: .8rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who > div { min-width: 0; }
.slots { display: flex; gap: 6px; }
.slot { width: 34px; height: 16px; border-radius: 5px; border: 1.5px dashed var(--line); } 
.slot.submitted { background: var(--s1); border: 1.5px solid var(--s1); } .slot.pending_approval { border: 1.5px solid var(--warn); background: var(--warn-soft); }
.slot.failed { border: 1.5px solid var(--bad); background: var(--bad-soft); } .slot.approved { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.num { font-weight: 600; text-align: right; }
.spark { display: block; }

/* queue */
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.list { max-height: calc(100vh - 210px); overflow: auto; }
.item { display: grid; gap: 4px; padding: 13px 16px; border-top: 1px solid var(--line2); cursor: pointer; border-left: 3px solid transparent; }
.item:first-child { border-top: 0; } .item:hover { background: var(--sunk); } .item[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.item .t { font-weight: 590; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px; }
.facts div { display: grid; } .facts b { font-weight: 620; } .facts span { color: var(--mute); font-size: .82rem; }
.letter { font-size: 1rem; line-height: 1.65; min-height: 260px; }
.qa { display: grid; gap: 14px; }
.callout { padding: 11px 14px; border-radius: 10px; font-size: .92rem; background: var(--sunk); border: 1px solid var(--line2); }
.callout.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .callout.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 16px; border-top: 1px solid var(--line2); margin-top: 18px; }
.spacer { flex: 1; }

/* profiles */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pcard { padding: 18px; display: grid; gap: 12px; align-content: start; }
.pcard .top2 { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .9rem; } .kv dt { color: var(--mute); } .kv dd { margin: 0; text-align: right; font-weight: 560; }

/* tables */
table { width: 100%; border-collapse: collapse; } th { text-align: left; color: var(--mute); font-weight: 560; font-size: .82rem; padding: 10px 16px; } td { padding: 11px 16px; border-top: 1px solid var(--line2); vertical-align: top; }
.tbl { overflow-x: auto; } tr.click { cursor: pointer; } tr.click:hover td { background: var(--sunk); }

/* chart */
.chart { position: relative; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); padding: 7px 10px; border-radius: 8px; font-size: .82rem; line-height: 1.4; transform: translate(-50%, -100%); white-space: nowrap; z-index: 5; }
.legend { display: flex; gap: 16px; font-size: .85rem; color: var(--ink2); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* modal + toasts */
.scrim { position: fixed; inset: 0; background: rgba(8,14,24,.5); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--panel); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.modal > header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line2); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.modal .body { padding: 20px 22px; display: grid; gap: 16px; } .modal footer { padding: 14px 22px; border-top: 1px solid var(--line2); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--panel); }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proj { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--sunk); }
#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 80; }
.toast { padding: 12px 16px; border-radius: 11px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); max-width: 380px; animation: pop .18s ease-out; } .toast.bad { background: var(--bad); color: #fff; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.empty { padding: 44px 24px; text-align: center; color: var(--ink2); display: grid; gap: 10px; justify-items: center; } .empty b { color: var(--ink); font-size: 1.05rem; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login form { width: min(380px, 100%); display: grid; gap: 16px; padding: 28px; }
.timeline { display: grid; } .tl { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 20px; border-top: 1px solid var(--line2); font-size: .92rem; } .tl:first-child { border-top: 0; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 8px; } .nav { display: flex; gap: 4px; } .nav a span.l { display: none; } .rail .foot { margin: 0 0 0 auto; display: flex; }
  .grid2, .split { grid-template-columns: 1fr; } .list { max-height: none; }
  .board-row { grid-template-columns: 1fr 1fr; } .board-head { display: none; } .form2, .form3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================================================
   Polish layer: motion, depth, new components. Everything below respects prefers-reduced-motion.
   ===================================================================================================== */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --dur: .32s; --dur-fast: .16s;
  --grad: linear-gradient(135deg, #2754e8 0%, #5b6cff 100%); --glow: 0 0 0 4px rgba(39, 84, 232, .14);
  --shadow-lg: 0 2px 4px rgba(15,27,45,.05), 0 24px 48px -20px rgba(15,27,45,.22);
  --rail-w: 244px;
}
:root[data-theme="dark"] { --grad: linear-gradient(135deg, #6c8dff 0%, #8b7bff 100%); --glow: 0 0 0 4px rgba(108,141,255,.18); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --grad: linear-gradient(135deg, #6c8dff 0%, #8b7bff 100%); --glow: 0 0 0 4px rgba(108,141,255,.18); } }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), fill .35s var(--ease), stroke .35s var(--ease) !important; }
body { background-image: radial-gradient(1100px 520px at 85% -8%, rgba(39,84,232,.07), transparent 60%), radial-gradient(900px 480px at -5% 105%, rgba(91,108,255,.05), transparent 60%); background-attachment: fixed; }
::selection { background: rgba(39,84,232,.22); }
:focus-visible { box-shadow: var(--glow); outline-color: var(--accent); }

/* ---- shell: rail + top bar ---- */
.shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); transition: grid-template-columns .3s var(--ease); }
.shell.collapsed { --rail-w: 74px; }
.rail { background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: width .3s var(--ease); overflow: hidden; }
.brand span, .nav a .l, .rail .foot .lbl { transition: opacity .2s var(--ease), width .2s var(--ease); white-space: nowrap; }
.shell.collapsed .brand span, .shell.collapsed .nav a .l, .shell.collapsed .rail .foot .lbl, .shell.collapsed .nav .count { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
.shell.collapsed .nav a { justify-content: center; padding-inline: 0; } .shell.collapsed .brand { justify-content: center; padding-inline: 0; }
.nav a { position: relative; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.nav a:hover { transform: translateX(2px); } .shell.collapsed .nav a:hover { transform: none; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); animation: slide-in .3s var(--ease) both; }
.nav .count { transition: transform .2s var(--ease); } .nav .count.bump { animation: bump .5s var(--ease); }
.rail .collapse { margin-top: 8px; } .rail .collapse svg { width: 18px; height: 18px; transition: transform .3s var(--ease); } .shell.collapsed .rail .collapse svg { transform: rotate(180deg); }
.mainwrap { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3.4vw, 44px); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar .crumb { font-weight: 620; letter-spacing: -.01em; } .topbar .spacer { flex: 1; }
.searchbtn { display: inline-flex; align-items: center; gap: 10px; min-width: 240px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); }
.searchbtn:hover { border-color: var(--mute); box-shadow: var(--shadow); transform: translateY(-1px); } .searchbtn svg { width: 16px; height: 16px; } .searchbtn kbd { margin-left: auto; }
kbd { font: 600 .72rem/1 var(--font); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--sunk); color: var(--ink2); }
.iconbtn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink2); transition: transform .18s var(--ease), box-shadow .18s, color .18s; }
.iconbtn:hover { color: var(--ink); box-shadow: var(--shadow); transform: translateY(-1px); } .iconbtn:active { transform: scale(.94); } .iconbtn svg { width: 18px; height: 18px; }
.iconbtn .dotc { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; animation: pop-in .35s var(--ease) both; }
.statuschip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: .82rem; font-weight: 580; border: 1px solid var(--line); background: var(--panel); }
.statuschip.run { color: var(--ok); } .statuschip.pause { color: var(--warn); background: var(--warn-soft); border-color: transparent; } .statuschip.live { color: var(--bad); background: var(--bad-soft); border-color: transparent; } .statuschip.dry { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ping 1.8s var(--ease) infinite; }
.updated { font-size: .8rem; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; }
.main { padding-top: 8px; }
.page-in > * { animation: rise var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.avatar-menu { position: relative; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-height: 70vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 60; transform-origin: top right; animation: pop-in .2s var(--ease) both; }
.dropdown header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; } .dropdown .row-i { padding: 11px 16px; border-top: 1px solid var(--line2); font-size: .9rem; display: grid; grid-template-columns: 22px 1fr; gap: 8px; }

/* ---- feedback: progress bar, skeletons, toasts, modals ---- */
#nprog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad); box-shadow: 0 0 10px rgba(39,84,232,.5); transition: width .25s var(--ease), opacity .3s; pointer-events: none; }
.skel { position: relative; overflow: hidden; background: var(--line2); border-radius: 10px; } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.3s infinite; }
:root[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); } }
.skel.line { height: 14px; } .skel.block { height: 120px; border-radius: 14px; }
.toast { display: grid; grid-template-columns: 22px 1fr 20px; gap: 10px; align-items: start; position: relative; overflow: hidden; padding: 13px 14px 15px; animation: toast-in .35s var(--ease) both; cursor: pointer; }
.toast svg { width: 20px; height: 20px; margin-top: 1px; } .toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.55); animation: drain var(--life, 4s) linear forwards; } .toast.out { animation: toast-out .25s var(--ease-in) forwards; }
.scrim { animation: fade-in .2s var(--ease) both; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .scrim.out { animation: fade-out .16s var(--ease-in) forwards; }
.modal { animation: modal-in .3s var(--ease) both; box-shadow: var(--shadow-lg); } .scrim.out .modal { animation: modal-out .16s var(--ease-in) forwards; }

/* ---- buttons, cards, rows ---- */
.btn { position: relative; overflow: hidden; transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease), filter .16s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(15,27,45,.35); } .btn:active { transform: translateY(0) scale(.975); box-shadow: none; }
.btn.primary { background: var(--grad); border-color: transparent; } .btn.primary:hover { filter: brightness(1.07); box-shadow: 0 10px 22px -10px rgba(39,84,232,.7); }
.btn[disabled]:hover { transform: none; box-shadow: none; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .55s var(--ease) forwards; pointer-events: none; }
.panel { transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s; } .pcard:hover, .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.item, .board-row, tr.click td, .tl { transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); } .item:hover { transform: translateX(2px); }
.board-row:hover { background: var(--accent-soft); } .board-row:hover .slots { transform: scale(1.03); } .slots { transition: transform .2s var(--ease); transform-origin: left; }
.tabs button { transition: color .16s, border-color .16s, background .16s; border-radius: 8px 8px 0 0; } .tabs button:hover { background: var(--sunk); color: var(--ink); } .tabs button[aria-selected="true"] { animation: tab-in .3s var(--ease); }
.pill { transition: transform .16s var(--ease); } .pill.warn.pulsing { animation: soft-pulse 2.2s var(--ease) infinite; }
input, select, textarea { transition: border-color .16s, box-shadow .2s var(--ease), background .16s; } input:focus, select:focus, textarea:focus { box-shadow: var(--glow); }
.empty svg.art { width: 120px; height: 90px; margin-bottom: 4px; } .empty b { font-size: 1.1rem; }

/* ---- avatars, rings, KPI tiles, hero ---- */
.av { --h: 220; flex: none; width: var(--s, 34px); height: var(--s, 34px); border-radius: 50%; display: inline-grid; place-items: center; font-size: calc(var(--s, 34px) * .38); font-weight: 650; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 36) 72% 44%)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); letter-spacing: -.02em; }
.av.sm { --s: 26px; } .av.lg { --s: 46px; } .av.off { filter: grayscale(.85); opacity: .7; }
.ring { position: relative; display: inline-grid; place-items: center; } .ring svg { transform: rotate(-90deg); } .ring .track { stroke: var(--line); } .ring .val { stroke: url(#rg); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c); animation: ring-fill 1.1s var(--ease) .15s forwards; } .ring .mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 30px; margin-bottom: 20px; border-radius: 20px; background: radial-gradient(600px 220px at 100% 0, rgba(255,255,255,.18), transparent 60%), var(--grad); color: #fff; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(39,84,232,.7); }
.hero::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); animation: float 9s ease-in-out infinite; }
.hero h1 { color: #fff; font-size: 2rem; } .hero p { color: rgba(255,255,255,.85); margin-top: 6px; max-width: 46ch; } .hero .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); } .hero .btn:hover { background: rgba(255,255,255,.26); } .hero .btn.solid { background: #fff; color: #1a3fc4; border-color: #fff; font-weight: 640; }
.hero .ring .track { stroke: rgba(255,255,255,.25); } .hero .ring .val { stroke: #fff; } .hero .big { font-size: 1.9rem; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; cursor: default; } .kpi .ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .kpi .ico svg { width: 22px; height: 22px; }
.kpi.warn .ico { background: var(--warn-soft); color: var(--warn); } .kpi.ok .ico { background: var(--ok-soft); color: var(--ok); } .kpi .n { font-size: 1.7rem; font-weight: 680; letter-spacing: -.02em; line-height: 1; } .kpi .l { color: var(--mute); font-size: .86rem; }
.kpi.attn { animation: soft-pulse 2.4s var(--ease) infinite; border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.slot { transform-origin: left; animation: slot-in .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); } .slot.pending_approval { animation: slot-in .5s var(--ease) both, soft-pulse 2.4s var(--ease) 1s infinite; }
svg.spark rect { transform-origin: bottom; transform-box: fill-box; animation: grow .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms + .1s); }
.chart svg path.bar { transform-origin: bottom; transform-box: fill-box; animation: grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); } .chart rect[data-i]:hover { fill: rgba(39,84,232,.07); }

/* ---- switches, filters, timeline, check ---- */
.switch { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; } .switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .22s var(--ease); } .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .26s var(--ease); }
.switch input:checked + i { background: var(--grad); } .switch input:checked + i::after { transform: translateX(18px); } .switch input:focus-visible + i { box-shadow: var(--glow); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-weight: 560; font-size: .88rem; cursor: pointer; transition: all .18s var(--ease); } .chip:hover { transform: translateY(-1px); border-color: var(--mute); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tl2 { position: relative; padding: 4px 0 4px 8px; } .tl2::before { content: ""; position: absolute; left: 26px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl2 .ev { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 9px 14px 9px 0; align-items: start; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); } .tl2 .ev .dot2 { z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line); color: var(--ink2); } .tl2 .ev .dot2 svg { width: 17px; height: 17px; }
.tl2 .ev.ok .dot2 { border-color: var(--ok); color: var(--ok); } .tl2 .ev.bad .dot2 { border-color: var(--bad); color: var(--bad); } .tl2 .ev.warn .dot2 { border-color: var(--warn); color: var(--warn); } .tl2 .ev.info .dot2 { border-color: var(--accent); color: var(--accent); }
.success-check { display: grid; place-items: center; padding: 8px 0; } .success-check svg { width: 84px; height: 84px; } .success-check circle { stroke: var(--ok); stroke-width: 3; fill: none; stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw .6s var(--ease) forwards; } .success-check path { stroke: var(--ok); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .4s var(--ease) .45s forwards; }
th.sortable { cursor: pointer; user-select: none; transition: color .16s; } th.sortable:hover { color: var(--ink); } th.sortable::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; opacity: 0; transform: translateY(2px); transition: opacity .16s, transform .2s var(--ease); } th.sortable:hover::after { opacity: .5; } th.sortable[data-dir="asc"]::after { opacity: 1; transform: translateY(-3px) rotate(180deg); } th.sortable[data-dir="desc"]::after { opacity: 1; }

/* ---- command palette + help ---- */
.palette-scrim { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding-top: 14vh; background: rgba(8,14,24,.45); backdrop-filter: blur(4px); animation: fade-in .16s var(--ease) both; }
.palette { width: min(640px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: modal-in .25s var(--ease) both; }
.palette input { border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding: 18px 20px; font-size: 1.05rem; background: transparent; box-shadow: none; } .palette input:focus { box-shadow: none; outline: none; }
.palette .results { max-height: 52vh; overflow: auto; padding: 8px; } .palette .grp { padding: 10px 12px 4px; font-size: .78rem; color: var(--mute); font-weight: 600; }
.palette .cmd { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; } .palette .cmd[aria-selected="true"] { background: var(--accent-soft); } .palette .cmd svg { width: 18px; height: 18px; color: var(--ink2); flex: none; } .palette .cmd .hint { margin-left: auto; color: var(--mute); font-size: .8rem; }
.palette footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line2); color: var(--mute); font-size: .8rem; }
.helpgrid { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: center; }

/* ---- mobile ---- */
.tabbar { display: none; }
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; } .rail { display: none; } .searchbtn { min-width: 0; } .searchbtn span, .searchbtn kbd, .topbar .crumb, .statuschip .t, .updated { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; color: var(--mute); font-size: .7rem; font-weight: 580; text-decoration: none; transition: color .16s, background .16s, transform .16s var(--ease); } .tabbar a svg { width: 22px; height: 22px; } .tabbar a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); } .tabbar a:active { transform: scale(.93); }
  .statuschip.dry { display: none; } .statuschip.live .t { display: inline; font-size: .74rem; } .statuschip { padding: 8px; }
  .main { padding-bottom: 96px; } .hero { grid-template-columns: 1fr; } .dropdown { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ---- keyframes ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes drain { from { width: 100%; } to { width: 0; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes bump { 40% { transform: scale(1.35); } }
@keyframes slide-in { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tab-in { from { background: var(--accent-soft); } to { background: transparent; } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slot-in { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes ring-fill { to { stroke-dashoffset: var(--off); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { 50% { transform: translate(-18px, -14px) scale(1.06); } }
@keyframes soft-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(154,90,6,.0); } 50% { box-shadow: 0 0 0 6px rgba(154,90,6,.13); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .ring .val { stroke-dashoffset: var(--off) !important; } }

/* ---- messages inbox ---- */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread { display: grid; gap: 10px; max-height: 360px; overflow-y: auto; overflow-x: hidden; padding: 4px 2px; scroll-behavior: smooth; }
.bubble { max-width: 82%; min-width: 0; padding: 9px 13px; border-radius: 16px; overflow-wrap: anywhere; white-space: pre-wrap; animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.bubble.me { justify-self: end; background: var(--accent-soft); border-bottom-right-radius: 5px; } .bubble.them { justify-self: start; background: var(--sunk); border-bottom-left-radius: 5px; }
.composer textarea { min-height: 130px; } .counter { font-size: .8rem; color: var(--mute); font-weight: 400; } .waiting-old { color: var(--warn); font-weight: 620; }
.mlist .item[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }

/* meetings */
.mday { margin-top: 18px; } .mday h3 { margin: 0 0 8px; font-size: .95rem; color: var(--ink2); }
.mtg { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line2); } .mtg:last-child { border-bottom: 0; }
.mtg .when { display: grid; gap: 2px; } .mtg .when b { font-size: 1.05rem; } .mtg.live { background: var(--ok-soft); }
.mtg .acts { justify-content: flex-end; }
.nextmtg { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; } .nextmtg h2 { margin: 2px 0; } .nextmtg p { margin: 0; } .nextmtg .cd { font-size: 1.5rem; color: var(--accent); white-space: nowrap; }
@media (max-width: 720px) { .mtg { grid-template-columns: 1fr; gap: 8px; } .mtg .acts { justify-content: flex-start; } .nextmtg { flex-direction: column; align-items: flex-start; } }

/* research */
.up { color: var(--ok); font-weight: 600; } .down { color: var(--bad); font-weight: 600; }
.rstable th.num, .rstable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rstable tbody tr { cursor: pointer; } .rstable tbody tr:hover { background: var(--sunk); }
.hb { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto auto; align-items: center; gap: 10px; font-size: .9rem; } .hb .hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb .ht { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; } .hb .ht i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.dchart { width: 100%; height: 140px; display: block; fill: currentColor; } .dlab { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mute); margin-top: 4px; }
.heat { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2px; align-items: center; } .heat i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--sunk)); }
.heat .hh, .heat .hd { font-size: .7rem; color: var(--mute); } .heat .hh { text-align: left; }
.mixgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; margin-top: 12px; } .mixgrid h3, .rgrid h3 { margin: 0 0 8px; font-size: .95rem; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.kwlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .kw { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font-size: .85rem; cursor: pointer; } .kw.off { opacity: .5; } .kw input { accent-color: var(--accent); } .kw a { color: var(--mute); text-decoration: none; }
#rs-kw summary { cursor: pointer; }

/* =====================================================================================================
   Refinements: logo, sign-in, filters, five-up KPIs, mobile tab bar with a More sheet, press feedback
   ===================================================================================================== */
.logo { display: block; flex: none; border-radius: 22%; box-shadow: 0 1px 2px rgba(15,27,45,.18), 0 6px 14px -6px rgba(42,91,255,.55); }
.brand { gap: 11px; } .brand span { font-size: 1.02rem; letter-spacing: -.015em; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); }
.btn { transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease), filter .16s; }
.btn:active:not([disabled]) { transform: translateY(1px) scale(.985); }
.btn.lg { padding: 11px 16px; font-size: 1rem; border-radius: 11px; }
.btn.primary { box-shadow: 0 1px 2px rgba(39,84,232,.35), 0 8px 18px -10px rgba(39,84,232,.7); }
.btn.primary[disabled] { box-shadow: none; }
tr.click, .item, .board-row { transition: background .14s var(--ease); }
.item:active, .board-row:active { background: var(--accent-soft); }

/* search + profile filter rows stay on one line, same height, and wrap cleanly */
.filters { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; }
.filters select, .filters input[type=text] { width: auto; height: 40px; min-width: 0; } .filters select { flex: 0 1 170px; } .filters input[type=text] { flex: 0 1 240px; }

/* ---- sign in ---- */
.login { min-height: 100vh; padding: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); place-items: stretch; }
.login-hero { position: relative; display: grid; place-items: center; padding: 48px; color: #fff; overflow: hidden;
  background: radial-gradient(700px 400px at 12% 0%, rgba(255,255,255,.22), transparent 60%), radial-gradient(520px 520px at 100% 100%, rgba(120,90,255,.55), transparent 62%), linear-gradient(145deg, #2349d6 0%, #4a52ff 55%, #6a4dff 100%); }
.login-hero::before, .login-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.login-hero::before { width: 420px; height: 420px; right: -140px; top: -120px; } .login-hero::after { width: 300px; height: 300px; left: -90px; bottom: -110px; }
.login-art { position: relative; z-index: 1; max-width: 430px; display: grid; gap: 14px; }
.login-art .logo { box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); }
.login-art h2 { font-size: 2.1rem; font-weight: 680; letter-spacing: -.025em; line-height: 1.1; margin-top: 8px; }
.login-art p { color: rgba(255,255,255,.88); font-size: 1.05rem; max-width: 36ch; }
.login-art ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.login-art li { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.login-art li b { font-weight: 640; } .login-art li span { color: rgba(255,255,255,.85); font-size: .92rem; }
.login .login-card { width: min(400px, calc(100% - 40px)); align-self: center; justify-self: center; display: grid; gap: 20px; padding: 0; animation: rise .45s var(--ease) both; }
.login-card h1 { font-size: 1.7rem; } .login-card p { margin-top: 6px; }
.pw { position: relative; display: block; } .pw input { padding-right: 44px; height: 44px; }
.pwtoggle { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--mute); cursor: pointer; }
.pwtoggle:hover { background: var(--sunk); color: var(--ink); } .pwtoggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwtoggle[aria-pressed="true"] { color: var(--accent); }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-hero { display: none; } .login .login-card { padding: 28px 0; } }

/* ---- phones ---- */
.tabbar > a, .tabbar > button { position: relative; }
.tabbar button { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; border-radius: 12px; background: none; color: var(--mute); font-size: .7rem; font-weight: 580; cursor: pointer; transition: color .16s, background .16s, transform .16s var(--ease); }
.tabbar button svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.tabbar button[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.tabbar button:active, .tabbar a:active { transform: scale(.94); }
.tcount { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 .66rem/17px var(--font); font-style: normal; text-align: center; }
.tdot { position: absolute; top: 5px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.sheet-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(8,14,24,.45); display: flex; align-items: flex-end; animation: fade-in .18s ease-out both; }
.sheet-scrim.out { animation: fade-out .18s ease-in both; } .sheet-scrim.out .sheet { transform: translateY(24px); opacity: 0; transition: all .18s var(--ease-in); }
.sheet { width: 100%; max-height: 80vh; overflow: auto; padding: 8px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.45); animation: sheet-up .28s var(--ease) both; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 14px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sheet-grid a { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 6px 12px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--line2); color: var(--ink); font-size: .86rem; font-weight: 580; text-decoration: none; transition: transform .14s var(--ease), background .14s; }
.sheet-grid a:active { transform: scale(.96); } .sheet-grid a svg { width: 24px; height: 24px; color: var(--accent); }
.sheet-grid a[aria-current="page"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.sheet-grid .tcount { top: 8px; left: auto; right: 10px; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 980px) {
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { grid-template-columns: 1fr; padding: 14px; gap: 8px; } .kpi .ico { grid-row: auto; width: 38px; height: 38px; } .kpi .n { font-size: 1.45rem; }
  .hero { padding: 20px; border-radius: 18px; } .hero h1 { font-size: 1.55rem; } .hero .ring { display: none; }
  .top { margin-bottom: 16px; } h1 { font-size: 1.5rem; }
  .filters { flex-wrap: wrap; width: 100%; } .filters select, .filters input[type=text] { flex: 1 1 100%; }
  .cards { grid-template-columns: 1fr; }
}
.sheet > .btn { width: 100%; white-space: nowrap; justify-content: flex-start; padding: 12px 14px; }
.sheet > .btn svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* "Bidding as": pick which profile sends this proposal */
.bidas { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9rem; } .bidas > span { color: var(--mute); font-weight: 560; }
.bidas select { width: auto; max-width: min(100%, 420px); padding: 6px 30px 6px 10px; border-radius: 9px; font-weight: 600; background-color: var(--accent-soft); border-color: transparent; color: var(--accent); cursor: pointer; }
.bidas select:hover { filter: brightness(.97); }

/* Messages: Inbox / Follow-up switch */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font-weight: 600; cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease); }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 2px rgba(15,27,45,.12); }
.seg .n { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--line2); color: var(--ink2); font-size: .78rem; line-height: 20px; text-align: center; }
.seg button[aria-selected="true"] .n { background: var(--accent-soft); color: var(--accent); }
.waiting-mid { color: var(--warn); font-weight: 600; }
@media (max-width: 980px) { .seg button { padding: 7px 11px; } }

/* "@" picker in message boxes */
.mention-menu { position: absolute; z-index: 30; min-width: 280px; max-width: min(420px, calc(100% - 24px)); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); animation: pop .14s var(--ease) both; }
.mention-menu .mi2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mention-menu .mi2[aria-selected="true"], .mention-menu .mi2:hover { background: var(--accent-soft); }
.mention-menu .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================================================
   Reports
   Colours for the four things Connects are spent on. Checked with the palette validator for both themes
   (lightness band, chroma, colour-blind separation, contrast); "Other" is a neutral gray and is always labelled.
   ===================================================================================================== */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1a9e7a; --c4: #8a5cf5; --c0: #8b97a6; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --c1: #3f86e0; --c2: #e0693b; --c3: #22a982; --c4: #9a74f2; --c0: #7d8a9b; } }
:root[data-theme="dark"] { --c1: #3f86e0; --c2: #e0693b; --c3: #22a982; --c4: #9a74f2; --c0: #7d8a9b; }

.rp { position: relative; display: grid; gap: 20px; }
.rp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rp-reveal.in { opacity: 1; transform: none; }

/* things worth a look */
.rp-look { padding: 16px 18px; border-radius: 16px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent); }
.rp-look.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.rp-look h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--warn); font-size: 1rem; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: .88rem; font-weight: 560; text-decoration: none; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
a.rp-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.rp-chip svg { width: 16px; height: 16px; flex: none; } .rp-chip.warn svg { color: var(--warn); } .rp-chip.bad svg { color: var(--bad); }
.rp-allgood { display: flex; align-items: center; gap: 14px; color: var(--ok); } .rp-allgood svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--panel); flex: none; }
.rp-allgood b { display: block; color: var(--ink); } .rp-allgood span { color: var(--ink2); font-size: .92rem; }

/* headline numbers */
.rp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (min-width: 1240px) { .rp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.rp-kpi { position: relative; padding: 18px 18px 16px; overflow: hidden; }
.rp-kpi .ico { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); } .rp-kpi .ico svg { width: 18px; height: 18px; }
.rp-kpi.ok .ico { background: var(--ok-soft); color: var(--ok); } .rp-kpi.warn .ico { background: var(--warn-soft); color: var(--warn); }
.rp-kpi .lab { color: var(--ink2); font-weight: 600; font-size: .86rem; padding-right: 34px; white-space: nowrap; }
.rp-kpi .val { font-size: 2rem; font-weight: 690; letter-spacing: -.03em; line-height: 1.15; margin-top: 8px; white-space: nowrap; }
.rp-kpi .sub { color: var(--mute); font-size: .82rem; margin-top: 2px; }
.rp-rib { display: flex; gap: 3px; height: 8px; margin-top: 14px; border-radius: 6px; overflow: hidden; }
.rp-rib i { flex: 0 0 var(--w); background: var(--accent); opacity: var(--o, 1); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) calc(var(--i, 0) * 60ms + 250ms), filter .15s; cursor: default; }
.rp-rib i:hover { filter: brightness(1.2); opacity: 1; }
.rp-rib.none { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); opacity: .6; }
.in .rp-rib i, .rp-rib.in i { transform: none; }
.rp-kpi.ok .rp-rib i { background: var(--ok); } .rp-kpi.warn .rp-rib i { background: var(--warn); }

/* sections */
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .rp-two > * { min-width: 0; }
.rp-sec { padding: 20px 22px 22px; }
.rp-sec > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0; margin-bottom: 14px; } .rp-sec h2 { font-size: 1.08rem; }
.rp-legend { display: flex; gap: 14px; font-size: .84rem; color: var(--ink2); } .rp-legend i, .rp-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.rp-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line2); }
.rp-mini div { display: grid; gap: 2px; } .rp-mini b { font-size: 1.35rem; font-weight: 680; } .rp-mini span { font-size: .8rem; color: var(--mute); }

.rp-stack { display: flex; gap: 3px; height: 20px; border-radius: 8px; overflow: hidden; }
.rp-stack i { flex: 0 0 var(--w); background: var(--c); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) calc(var(--i, 0) * 90ms + 200ms), filter .15s; }
.in .rp-stack i { transform: none; } .rp-stack i:hover { filter: brightness(1.15); }
.rp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 4px; font-size: .86rem; color: var(--ink2); } .rp-key b { color: var(--ink); margin-left: 2px; font-variant-numeric: tabular-nums; }
.rp-rows { display: grid; gap: 10px; margin-top: 14px; }
.rp-row { display: grid; grid-template-columns: 84px 1fr 48px; gap: 12px; align-items: center; font-size: .9rem; }
.rp-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 580; } .rp-row .num { text-align: right; font-weight: 640; font-variant-numeric: tabular-nums; }
.rp-row.boost { grid-template-columns: 84px 1fr 78px; }
.rp-bar { display: flex; gap: 2px; height: 12px; width: 0; min-width: 0; border-radius: 6px; overflow: hidden; transition: width 1s var(--ease) calc(var(--i, 0) * 70ms + 200ms); }
.in .rp-bar { width: var(--w); min-width: 6px; }
.rp-bar > i { flex: 0 0 var(--w); background: var(--c); } .rp-bar.slim { height: 8px; border-radius: 5px; margin: 6px 0 4px; }

.rp-board { list-style: none; margin: 0; padding: 0; display: grid; }
.rp-board li { display: grid; grid-template-columns: 30px 38px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line2); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease) calc(var(--i, 0) * 70ms + 150ms), transform .5s var(--ease) calc(var(--i, 0) * 70ms + 150ms); }
.rp-board li:first-child { border-top: 0; } .in .rp-board li { opacity: 1; transform: none; }
.rp-board .mid { min-width: 0; } .rp-board .num { font-weight: 680; font-variant-numeric: tabular-nums; }
.rk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 680; font-size: .82rem; background: var(--sunk); color: var(--ink2); }
.rk.r1 { background: var(--grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(39, 84, 232, .6); } .rk.r2, .rk.r3 { background: var(--accent-soft); color: var(--accent); }

/* a card for each profile */
.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.rp-card { padding: 18px; display: grid; gap: 14px; align-content: start; cursor: pointer; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease) calc(var(--i, 0) * 55ms + 100ms), transform .55s var(--ease) calc(var(--i, 0) * 55ms + 100ms), box-shadow .25s var(--ease), border-color .25s; }
.in .rp-card, .rp-card.in { opacity: 1; transform: none; }
.in .rp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.rp-card.off { background: var(--sunk); } .rp-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; } .rp-card h3 { font-size: 1.02rem; }
.rp-card .big { font-size: 1.9rem; font-weight: 690; letter-spacing: -.03em; }
.rp-meter { height: 6px; border-radius: 4px; background: var(--line2); margin-top: 8px; overflow: hidden; } .rp-meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width 1s var(--ease) .35s; } .rp-meter.low i { background: var(--warn); }
.in .rp-meter i { width: var(--w); }
.rp-delta { font-size: .8rem; font-weight: 640; padding: 2px 8px; border-radius: 999px; } .rp-delta.up { color: var(--ok); background: var(--ok-soft); } .rp-delta.down { color: var(--bad); background: var(--bad-soft); }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .rp-stats div { display: grid; gap: 1px; } .rp-stats b { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; } .rp-stats span { font-size: .78rem; color: var(--mute); }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line2); } .rp-spark { flex: none; color: var(--s1); }
.rp-empty { padding: 18px 0; }

.rp-all { padding: 0; overflow: hidden; } .rp-all summary { padding: 16px 20px; cursor: pointer; font-weight: 620; list-style: none; display: flex; align-items: center; gap: 10px; } .rp-all summary::-webkit-details-marker { display: none; }
.rp-all summary::after { content: "+"; margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink2); transition: transform .25s var(--ease); } .rp-all[open] summary::after { transform: rotate(45deg); }
.rp-all .tbl { border-top: 1px solid var(--line2); } .rp-all td, .rp-all th { white-space: nowrap; }

.rp-tip { position: absolute; z-index: 40; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: .8rem; line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow); } .rp-tip b { font-weight: 650; }
.rp-detail .kv { margin-bottom: 4px; } .rp-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }

@media (max-width: 980px) { .rp-two { grid-template-columns: 1fr; } .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } .rp-kpi .val { font-size: 1.7rem; } .rp-dgrid { grid-template-columns: 1fr; } .rp-mini { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rp-reveal, .rp-card, .rp-board li { opacity: 1 !important; transform: none !important; } .rp-bar { width: var(--w) !important; } .rp-rib i, .rp-stack i { transform: none !important; } .rp-meter i { width: var(--w) !important; } }
.rp-sec > header { flex-wrap: wrap; } .rp-legend { flex-wrap: wrap; } .rp-legend span { white-space: nowrap; display: inline-flex; align-items: center; }

/* =====================================================================================================
   Opponents
   ===================================================================================================== */
.op-actions { align-items: flex-end; gap: 10px; } .op-using { display: grid; gap: 4px; font-size: .78rem; color: var(--mute); font-weight: 600; } .op-using select { width: auto; min-width: 170px; height: 38px; }
.op-prog { position: relative; height: 34px; margin-bottom: 14px; border-radius: 12px; background: var(--accent-soft); overflow: hidden; display: flex; align-items: center; padding: 0 14px; color: var(--accent); font-weight: 600; font-size: .9rem; }
.op-prog i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .5s var(--ease); } .op-prog span { position: relative; }
.op-prog[hidden] { display: none; }
.op-kpis { margin-bottom: 20px; }
.op-feed { padding: 18px 20px; margin-bottom: 20px; } .op-feed > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0; margin-bottom: 8px; }
.op-events { list-style: none; margin: 0; padding: 0; display: grid; }
.op-events li { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid var(--line2); border-radius: 10px; cursor: pointer; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); transition: background .15s; }
.op-events li:first-child { border-top: 0; } .op-events li:hover { background: var(--sunk); } .op-events li.seen { opacity: .62; }
.op-events .dot2 { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink2); } .op-events .dot2 svg { width: 16px; height: 16px; }
.op-events li.ok .dot2 { background: var(--ok-soft); color: var(--ok); } .op-events li.info .dot2 { background: var(--accent-soft); color: var(--accent); } .op-events li.warn .dot2 { background: var(--warn-soft); color: var(--warn); }
.op-events b { font-weight: 640; } .op-events li > div { min-width: 0; overflow-wrap: anywhere; }
.op-newdot { position: absolute; left: -2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.op-quiet { display: flex; gap: 14px; align-items: center; color: var(--ink2); padding: 8px 0; } .op-quiet svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); flex: none; } .op-quiet b { display: block; color: var(--ink); }
.op-toolbar { justify-content: space-between; margin-bottom: 16px; }

.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.op-card { padding: 18px; display: grid; gap: 12px; align-content: start; cursor: pointer; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) calc(var(--i, 0) * 55ms), transform .5s var(--ease) calc(var(--i, 0) * 55ms), box-shadow .25s var(--ease), border-color .25s; }
.op-card.in { opacity: 1; transform: none; } .op-card.in:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.op-card.has-new { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 12%, transparent), var(--shadow); }
.op-card > header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 0; } .op-card h3 { font-size: 1.05rem; } .op-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.op-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 0; border-block: 1px solid var(--line2); } .op-stats div { display: grid; gap: 1px; min-width: 0; } .op-stats b { font-size: 1.12rem; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-stats span { font-size: .74rem; color: var(--mute); }
.op-up { color: var(--ok); font-weight: 700; font-style: normal; } .op-down { color: var(--bad); font-weight: 700; }
.op-skills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .op-skills.big .chip { font-size: .86rem; } .chip.sm { padding: 3px 10px; font-size: .78rem; cursor: default; }
.op-card > footer { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line2); } .op-sparkwrap { flex: none; } .op-card > footer .small { flex: 1; min-width: 0; } .op-spark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw 1.1s var(--ease) .3s forwards; }
@keyframes op-draw { to { stroke-dashoffset: 0; } }
.op-empty { padding: 44px 28px; text-align: center; display: grid; gap: 14px; justify-items: center; max-width: 720px; margin: 20px auto; } .op-empty h2 { font-size: 1.5rem; } .op-empty p { max-width: 54ch; color: var(--ink2); }
.op-steps { text-align: left; display: grid; gap: 8px; margin: 4px 0; padding-left: 20px; color: var(--ink2); } .op-steps code, .callout code { background: var(--sunk); padding: 1px 6px; border-radius: 6px; font-size: .85em; }
.op-addres { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .op-addres li { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; padding: 9px 12px; border-radius: 10px; background: var(--sunk); font-size: .88rem; } .op-addres li.ok b { color: var(--ok); } .op-addres li.bad b { color: var(--bad); } .op-addres span { color: var(--ink2); overflow-wrap: anywhere; } .op-addres em { grid-column: 2; color: var(--bad); font-style: normal; font-size: .84rem; }

/* the side panel */
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 24, .45); display: flex; justify-content: flex-end; opacity: 0; transition: opacity .2s ease-out; } .drawer-scrim.in { opacity: 1; } .drawer-scrim.out { opacity: 0; }
.drawer { position: relative; width: min(760px, 100%); height: 100%; overflow: auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .5); transform: translateX(40px); transition: transform .3s var(--ease); } .drawer-scrim.in .drawer { transform: none; } .drawer-scrim.out .drawer { transform: translateX(40px); }
body.no-scroll { overflow: hidden; }
.od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 22px 22px 12px; } .od-head h2 { font-size: 1.35rem; }
.od-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 22px 14px; } .od-tabs { position: sticky; top: 0; z-index: 2; background: var(--panel); margin: 0; padding: 0 14px; border-bottom: 1px solid var(--line); } .od-tabs .n { font-size: .74rem; padding: 0 6px; border-radius: 999px; background: var(--sunk); color: var(--ink2); margin-left: 4px; }
.od-body { padding: 18px 22px 40px; display: grid; gap: 22px; align-content: start; }
.op-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .op-stat { padding: 14px 16px; display: grid; gap: 2px; box-shadow: none; } .op-stat span { font-size: .82rem; color: var(--mute); font-weight: 560; } .op-stat b { font-size: 1.55rem; font-weight: 690; letter-spacing: -.02em; } .op-stat small { color: var(--mute); font-size: .76rem; }
.op-sec h3 { margin-bottom: 8px; } .op-sec { display: grid; gap: 8px; } .op-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.op-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; padding: 14px 16px; background: var(--sunk); border-radius: 12px; font-size: .95rem; line-height: 1.6; } .op-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.op-chart { position: relative; } .op-chart svg { width: 100%; height: auto; display: block; overflow: visible; } .op-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: op-draw 1.3s var(--ease) .2s forwards; } .op-dot { cursor: default; opacity: 0; animation: fade-in .4s ease-out 1.1s forwards; } .op-dot:hover { r: 6.5; }
.op-nochart { display: grid; gap: 4px; padding: 22px; border-radius: 12px; background: var(--sunk); color: var(--ink2); }
.op-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; } .op-timeline li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line2); animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); } .op-timeline li:first-child { border-top: 0; }
.op-timeline .dot2 { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink2); } .op-timeline .dot2 svg { width: 16px; height: 16px; } .op-timeline li.ok .dot2 { background: var(--ok-soft); color: var(--ok); } .op-timeline li.info .dot2 { background: var(--accent-soft); color: var(--accent); } .op-timeline li.warn .dot2 { background: var(--warn-soft); color: var(--warn); } .op-timeline li.new b::after { content: "New"; margin-left: 8px; font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); vertical-align: 2px; }
.op-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .op-diff > div { padding: 10px 12px; border-radius: 10px; background: var(--sunk); min-width: 0; } .op-diff small { color: var(--mute); font-weight: 600; } .op-diff p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font-size: .9rem; }
.op-diff > div:last-child { background: var(--ok-soft); }
@media (max-width: 980px) { .op-grid { grid-template-columns: 1fr; } .op-statgrid { grid-template-columns: repeat(2, 1fr); } .op-two, .op-diff { grid-template-columns: 1fr; } .drawer { width: 100%; } .op-actions { width: 100%; } .op-using select { min-width: 0; width: 100%; } .op-stats { grid-template-columns: repeat(2, 1fr); } .op-addres li { grid-template-columns: 1fr; } .op-addres em { grid-column: 1; } }
.op-empty .art { width: 150px; height: auto; max-height: 120px; }
.op-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .op-chart { margin: 0; padding: 12px 14px 8px; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel); } .op-chart figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .op-chart figcaption b { font-size: .92rem; }
.op-nochart { display: grid; gap: 4px; padding: 20px; border-radius: 14px; background: var(--sunk); color: var(--ink2); font-size: .9rem; }
@media (max-width: 760px) { .op-charts { grid-template-columns: 1fr; } }

/* ---------- Automation ---------- */
.au-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.au-sec .small { max-width: 62ch; }
.au-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 16px; }
.au-task { padding: 18px 20px; display: grid; gap: 12px; align-content: start; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.au-task header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0; border: 0; }
.au-task header h3 { margin-bottom: 2px; }
.au-facts { margin: 0; display: grid; gap: 8px; }
.au-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: .88rem; }
.au-facts dt { color: var(--mute); } .au-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.au-task footer { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; border: 0; }
.btn.ghost { background: transparent; }
.au-more { border-top: 1px solid var(--line2); padding-top: 10px; overflow-x: auto; }
.au-ph, .au-pr { display: grid; grid-template-columns: minmax(90px, 1.2fr) 1.4fr .6fr .5fr .8fr; gap: 8px; font-size: .85rem; padding: 6px 0; align-items: center; min-width: 440px; }
.au-ph { color: var(--mute); font-weight: 560; border-bottom: 1px solid var(--line2); }
.au-pr { border-bottom: 1px solid var(--line2); } .au-pr:last-child { border-bottom: 0; }
.au-pr.bad { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.au-err { grid-column: 1 / -1; color: var(--bad); font-size: .8rem; overflow-wrap: anywhere; }
.au-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 20px 0; }
.au-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; height: 150px; align-items: end; }
.au-bar { display: flex; align-items: flex-end; height: 100%; }
.au-bar i { display: block; width: 100%; height: var(--h); border-radius: 4px 4px 0 0; background: var(--s1); transition: filter .15s; }
.au-bar:hover i { filter: brightness(1.2); }
.au-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .78rem; color: var(--mute); }
.au-profiles { display: grid; gap: 8px; }
.au-prow { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr 44px auto; gap: 10px; align-items: center; font-size: .9rem; }
.au-prow .who { display: flex; align-items: center; gap: 8px; min-width: 0; } .au-prow .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.au-meter { height: 8px; border-radius: 99px; background: var(--line2); overflow: hidden; } .au-meter i { display: block; height: 100%; border-radius: 99px; background: var(--s1); }
.au-prow .num { text-align: right; }
.au-thead, .au-trow { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 80px; gap: 10px; padding: 8px 0; align-items: center; font-size: .9rem; }
.au-thead { color: var(--mute); font-weight: 560; border-bottom: 1px solid var(--line2); font-size: .85rem; }
.au-trow { border-bottom: 1px solid var(--line2); } .au-trow:last-child { border-bottom: 0; }
.au-raw { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; margin-top: 1px; overflow-wrap: anywhere; }
.au-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.au-filters select { max-width: 100%; }
.au-lh, .au-lr { display: grid; grid-template-columns: 92px minmax(90px, .8fr) minmax(110px, .9fr) minmax(0, 2.4fr) 70px; gap: 10px; padding: 8px 0; font-size: .86rem; align-items: start; }
.au-lh { color: var(--mute); font-weight: 560; border-bottom: 1px solid var(--line2); }
.au-lr { border-bottom: 1px solid var(--line2); } .au-lr.bad { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.au-lr .num { text-align: left; } .au-lr > span:last-child { text-align: right; } .au-lh > span:last-child { text-align: right; }
@media (max-width: 760px) {
  .au-facts > div { grid-template-columns: 1fr; gap: 0; }
  .au-thead, .au-trow { grid-template-columns: minmax(0, 1fr) 54px 70px; } .au-thead span:last-child, .au-trow > span:last-child { display: none; }
  .au-lh { display: none; }
  .au-lr { grid-template-columns: 1fr auto; gap: 2px 10px; } .au-lr > span:nth-child(1) { grid-column: 1; color: var(--mute); } .au-lr > span:nth-child(5) { grid-column: 2; grid-row: 1; }
  .au-lr > span:nth-child(2), .au-lr > span:nth-child(3) { grid-column: 1 / -1; } .au-lr > span:nth-child(4) { grid-column: 1 / -1; }
  .au-prow { grid-template-columns: 1fr 44px; } .au-prow .au-meter { grid-column: 1 / -1; grid-row: 2; } .au-prow > :last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .au-task { animation: none; } }
.au-task footer .btn { white-space: nowrap; }
.au-two { align-items: start; }
.au-bars { height: 190px; }
.au-prow { grid-template-columns: minmax(120px, 1.1fr) 2fr 40px 76px; } .au-prow > :last-child { justify-self: start; }

/* ---------- Profile changes ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.ch-card { padding: 18px 20px; display: grid; gap: 12px; align-content: start; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.ch-card.has-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ch-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0; border: 0; }
.ch-card .who { display: flex; gap: 12px; align-items: center; min-width: 0; } .ch-card .who h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-card footer { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; border: 0; } .ch-card footer .btn { white-space: nowrap; }
.ch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ch-stats > div { padding: 8px 10px; border-radius: 10px; background: var(--sunk); display: grid; } .ch-stats b { font-size: 1.15rem; } .ch-stats span { font-size: .78rem; color: var(--mute); }
.ch-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ch-err { color: var(--bad); overflow-wrap: anywhere; }
.ch-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line2); font-size: .82rem; margin: 2px 4px 2px 0; overflow-wrap: anywhere; }
.ch-chip.add { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .ch-chip.add::before { content: "+ "; }
.ch-chip.del { background: var(--bad-soft); color: var(--bad); border-color: transparent; text-decoration: line-through; } 
.ch-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ch-ev { padding: 14px 0; border-bottom: 1px solid var(--line2); display: grid; gap: 10px; animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); } .ch-ev:last-child { border-bottom: 0; }
.ch-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.ch-ev .op-newdot { position: static; display: inline-block; margin: 0 0 1px 6px; vertical-align: middle; }
.ch-ev.new .ch-head b { color: var(--accent); }
.ch-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 40px; }
.ch-old { padding: 3px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ch-new { padding: 3px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); overflow-wrap: anywhere; }
.ch-arrow svg { width: 16px; height: 16px; transform: rotate(180deg); stroke: currentColor; fill: none; color: var(--mute); }
.ch-diff { margin-left: 40px; padding: 12px 14px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-height: 360px; overflow: auto; }
.ch-diff ins { background: var(--ok-soft); color: var(--ok); text-decoration: none; border-radius: 3px; padding: 0 1px; }
.ch-diff del { background: var(--bad-soft); color: var(--bad); border-radius: 3px; padding: 0 1px; }
.ch-both { margin-left: 40px; } .ch-both summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
.ch-ev .ch-chips { margin-left: 40px; }
.ch-modal { display: grid; gap: 6px; max-height: 70vh; overflow: auto; }
.ch-gh { margin: 14px 0 4px; font-size: .9rem; color: var(--ink2); }
.ch-copy { margin: 0; display: grid; gap: 0; } .ch-copy > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: .9rem; }
.ch-copy dt { color: var(--mute); } .ch-copy dd { margin: 0; overflow-wrap: anywhere; }
.ch-long { white-space: pre-wrap; max-height: 220px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--sunk); }
.ch-hist { list-style: none; margin: 0; padding: 0; display: grid; } .ch-hist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: .9rem; }
.callout.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; margin-bottom: 14px; }
@media (max-width: 760px) { .ch-copy > div { grid-template-columns: 1fr; gap: 2px; } .ch-line, .ch-diff, .ch-both, .ch-ev .ch-chips { margin-left: 0; } .ch-head { grid-template-columns: auto 1fr; } .ch-head > :last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .ch-card, .ch-ev { animation: none; } }
.btn svg { width: 16px; height: 16px; flex: none; } .btn > span { white-space: nowrap; }

/* ---------- Profile Studio ---------- */
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); } .warn-t { color: var(--warn); }
.pill.sm { padding: 0 8px; font-size: .72rem; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-lbl { margin-right: 2px; }
.chip.sm { padding: 3px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; cursor: default; }
button.chip.sm { cursor: pointer; } button.chip.sm:disabled { opacity: .45; cursor: not-allowed; }
.chip.sm svg { width: 12px; height: 12px; } .chip.sm small { color: var(--mute); font-size: .72rem; }
.st-t.on { background: var(--ok-soft); color: var(--ok); border-color: transparent; cursor: default; } .st-t.on:hover { transform: none; }
.chip.new { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .chip.new::before { content: "+"; font-weight: 700; }
.chip.del { background: var(--bad-soft); color: var(--bad); border-color: transparent; text-decoration: line-through; }
.chip.gap { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .chip.have { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

.st-nicheGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.st-niche { padding: 18px 20px; display: grid; gap: 10px; align-content: start; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.st-niche header, .st-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0; border: 0; }
.st-niche footer, .st-card footer { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; border: 0; }
.st-card { padding: 18px 20px; display: grid; gap: 10px; align-content: start; animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.st-card .who { display: flex; gap: 12px; align-items: center; min-width: 0; } .st-card .who h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-draftnote { display: flex; gap: 6px; align-items: center; color: var(--ok); } .st-draftnote svg { width: 15px; height: 15px; flex: none; }
.st-score { display: grid; justify-items: center; min-width: 58px; padding: 6px 10px; border-radius: 12px; background: var(--sunk); line-height: 1.1; }
.st-score b { font-size: 1.35rem; font-variant-numeric: tabular-nums; } .st-score small { font-size: .7rem; color: var(--mute); }
.st-score.ok { background: var(--ok-soft); color: var(--ok); } .st-score.info { background: var(--accent-soft); color: var(--accent); } .st-score.warn { background: var(--warn-soft); color: var(--warn); } .st-score.bad { background: var(--bad-soft); color: var(--bad); }

.st-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .st-stats.sm { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.st-stats > div { padding: 8px 10px; border-radius: 10px; background: var(--sunk); display: grid; } .st-stats b { font-size: 1.15rem; } .st-stats span { font-size: .78rem; color: var(--mute); }
.st-skills { display: grid; gap: 6px; }
.st-skillrow { display: grid; grid-template-columns: minmax(90px, 170px) 1fr 44px auto auto auto; align-items: center; gap: 10px; font-size: .9rem; }
.st-side .st-skillrow { grid-template-columns: minmax(80px, 140px) 1fr 40px; }
.st-skillrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .st-skillrow .nm svg { width: 13px; height: 13px; color: var(--ok); flex: none; }
.st-skillrow .bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; } .st-skillrow .bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

.st-head { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 16px; }
.st-head .who { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 260px; } .st-head h1 { font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-headact { gap: 8px; margin-left: auto; } .st-headact select { width: auto; min-width: 190px; }
.st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; margin-top: 14px; }
.st-edit { display: grid; gap: 16px; min-width: 0; padding-bottom: 84px; }
.st-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; border-radius: 14px; }
.st-sec { padding: 18px 20px; } .st-sec .au-sec { margin-bottom: 10px; }
.st-sec textarea { min-height: 260px; line-height: 1.6; }
.st-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.st-count { font-size: .82rem; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; } .st-count.ok { color: var(--ok); } .st-count.bad { color: var(--bad); }
.st-skilllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-skilllist li { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: var(--sunk); }
.st-skilllist li.weak { background: color-mix(in srgb, var(--warn-soft) 70%, var(--sunk)); }
.st-skilllist .rk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 650; background: var(--panel); color: var(--ink2); }
.st-skilllist .nm { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-skilllist .mv { display: inline-flex; gap: 0; } .st-skilllist .mv .btn { padding: 4px 6px; } .st-skilllist .mv svg { width: 15px; height: 15px; }
.st-rogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 20px; } .st-ro h4 { margin: 0 0 6px; font-size: .9rem; } .st-ro p { margin-top: 6px; }

.st-sidecard { padding: 16px; display: grid; gap: 14px; }
.st-scorehead { display: flex; gap: 14px; align-items: center; } .st-ringnum { display: grid; line-height: 1; } .st-ringnum b { font-size: 1.7rem; } .st-ringnum small { font-size: .68rem; color: var(--mute); margin-top: 2px; }
.st-tabs { width: 100%; } .st-tabs button { flex: 1; justify-content: center; padding: 7px 6px; }
.st-tabbody { display: grid; gap: 16px; }
.st-area h4 { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: .9rem; }
.st-check { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line2); } .st-check .dot { margin-top: 7px; }
.st-check p { margin-top: 2px; }
.st-tip { display: flex; gap: 6px; align-items: flex-start; color: var(--accent); } .st-tip svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.st-term { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 4px 0; font-size: .88rem; } .st-term .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-use { display: inline-flex; gap: 3px; } .st-use i { font-style: normal; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .68rem; font-weight: 700; background: var(--sunk); color: var(--mute); } .st-use i.on { background: var(--ok-soft); color: var(--ok); } .st-use i.na { opacity: .35; }
.st-rival { padding: 10px 0; border-top: 1px solid var(--line2); display: grid; gap: 6px; } .st-rival:first-child { border-top: 0; }

.st-bar { position: fixed; left: var(--rail-w, 232px); right: 0; bottom: 0; z-index: 30; padding: 0 clamp(16px, 3.4vw, 44px) 16px; pointer-events: none; transform: translateY(120%); transition: transform .3s var(--ease); }
.st-bar.on { transform: none; }
.st-barin { pointer-events: auto; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-lg, var(--shadow)); }
.st-agentp, .st-draftp { padding: 18px 20px; display: grid; gap: 14px; margin-bottom: 4px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.st-draftp > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 0; border: 0; }
.st-delta { display: flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 12px; background: var(--sunk); } .st-delta b { font-size: 1.3rem; }
.st-pos { color: var(--ink2); }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-steps li { display: flex; gap: 10px; align-items: center; color: var(--mute); } .st-steps li.done, .st-steps li.run { color: var(--ink); }
.stp { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; } .stp svg { width: 13px; height: 13px; }
.stp.done { background: var(--ok); border-color: var(--ok); color: #fff; } .stp.fail { background: var(--bad); border-color: var(--bad); color: #fff; }
.stp.run { border-color: var(--accent); border-top-color: transparent; animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-fields { display: grid; gap: 14px; }
.st-field { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px; border-radius: 12px; background: var(--sunk); cursor: pointer; align-items: start; } .st-field input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }
.st-field h3 { margin-bottom: 6px; }
.st-old { color: var(--mute); text-decoration: line-through; font-size: .9rem; margin-bottom: 4px; } .st-new { font-weight: 600; }
.st-longtext { white-space: pre-wrap; line-height: 1.6; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); margin-bottom: 6px; }
.st-why { margin-top: 8px; } .st-dd { margin: 6px 0; } .st-dd summary { cursor: pointer; color: var(--accent); }
.st-diffbox { white-space: pre-wrap; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); max-height: 320px; overflow: auto; margin-top: 6px; }
.st-review { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); } .st-review:last-of-type { border-bottom: 0; }
.st-resl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .st-resl li { display: flex; gap: 8px; align-items: flex-start; } .st-resl svg { width: 18px; height: 18px; flex: none; margin-top: 2px; } .st-resl li.ok svg { color: var(--ok); } .st-resl li.bad svg { color: var(--bad); }
.st-histl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .st-histl li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: start; } .st-histl .dot { margin-top: 7px; }
.st-clip { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 1100px) { .st-grid { grid-template-columns: 1fr; } .st-side { position: static; max-height: none; } }
@media (max-width: 980px) { .st-bar { left: 0; bottom: 64px; } .st-stats { grid-template-columns: repeat(2, 1fr); } .st-skillrow { grid-template-columns: minmax(80px, 1fr) 1fr 40px; } .st-skillrow > :nth-child(n+4) { display: none; } .st-headact { margin-left: 0; width: 100%; } .st-headact select { flex: 1; } }

/* Profile changes: numbers on each card, like Opponents */
.ch-stats.four { grid-template-columns: repeat(4, 1fr); } .ch-stats.four b { font-size: 1.1rem; }
.ch-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ch-meta { margin-top: -4px; }
.ch-card footer { align-items: center; } .ch-card footer .op-sparkwrap { margin-right: auto; display: inline-flex; align-items: center; }
.ch-chip small { opacity: .7; font-size: .72rem; margin-left: 2px; } .ch-new { margin-bottom: 18px; } .op-calm { padding: 4px 2px; }

.st-batch { padding: 10px 0; border-top: 1px solid var(--line2); } .st-batch:first-child { border-top: 0; padding-top: 0; } .st-batch .st-histl { margin-top: 8px; }

/* ---------- Contract health ---------- */
.kpi.bad .ico { background: var(--bad-soft); color: var(--bad); }
.mlist .item.ct-risk { box-shadow: inset 3px 0 0 var(--bad); } .mlist .item.ct-watch { box-shadow: inset 3px 0 0 var(--warn); } .mlist .item[aria-selected="true"].ct-risk, .mlist .item[aria-selected="true"].ct-watch { background: var(--sunk); }
.ct-summary { padding: 14px 16px; border-radius: 12px; background: var(--sunk); border-left: 4px solid var(--ok); line-height: 1.45; } .ct-summary.ct-risk { border-left-color: var(--bad); background: var(--bad-soft); } .ct-summary.ct-watch { border-left-color: var(--warn); background: var(--warn-soft); } .ct-summary.ct-pending { border-left-color: var(--mute); }
.ct-issue { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; } .ct-issue.sev-high { border-color: var(--bad); } .ct-issue.sev-medium { border-color: var(--warn); }
.ct-issue blockquote { margin: 0; padding: 8px 12px; background: var(--sunk); border-radius: 8px; color: var(--ink2); font-style: italic; overflow-wrap: anywhere; }
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } .ct-stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; } .ct-stat b { font-size: 1.1rem; } .ct-stat span { color: var(--mute); font-size: .8rem; }