/* ============================================================================
   Панель сотрудников «Миссия на Луну» — layout (calm theme).
   Builds on ds/colors_and_type.css + ds/components.css. No cosmic decor.
   ========================================================================== */
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ font-family:var(--font-text); color:var(--text); background:var(--bg); }
#root{ height:100%; }

/* ---- App shell: nav variants driven by [data-nav] -------------------------*/
.app{ display:grid; height:100vh; min-height:0;
  grid-template-columns:var(--side-w,248px) 1fr; grid-template-rows:1fr;
  transition:grid-template-columns var(--dur) var(--ease-out); }
.app[data-nav="rail"]{ --side-w:72px; }
.app[data-nav="top"]{ grid-template-columns:1fr; }
.app[data-nav="top"] .side{ display:none; }

/* ---- Sidebar -------------------------------------------------------------- */
.side{ background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.side .brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid var(--divider); min-height:65px; }
.side .brand img{ height:30px; }
.side .brand .mark{ display:none; width:34px; height:34px; flex:none; border-radius:9px; border:2px solid var(--accent); position:relative; }
.app[data-nav="rail"] .side .brand .mark{ display:block; }
.side .brand .mark::before{ content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); }
.app[data-nav="rail"] .side .brand{ padding:18px 0 14px; justify-content:center; }
.app[data-nav="rail"] .side .brand .logo-full{ display:none; }

.side .nav{ padding:12px 12px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.side .nav .grp-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); padding:14px 10px 6px; white-space:nowrap; }
.app[data-nav="rail"] .side .nav .grp-label{ text-align:center; padding:14px 0 6px; font-size:8px; letter-spacing:.06em; }
.side .nav-btn{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-control);
  color:var(--text-muted); background:transparent; border:none; cursor:pointer; font-family:var(--font-text);
  font-size:14px; font-weight:500; text-align:left; transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out); width:100%; position:relative; }
.side .nav-btn:hover{ background:var(--surface-2); color:var(--text); }
.side .nav-btn.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.side .nav-btn:disabled{ opacity:.5; cursor:default; }
.side .nav-btn .icn{ font-size:18px; flex:none; width:18px; }
.side .nav-btn .lbl{ white-space:nowrap; overflow:hidden; }
.side .nav-btn .cnt{ margin-left:auto; font-family:var(--font-mono); font-size:11px; background:var(--surface-3);
  color:var(--text-muted); padding:1px 7px; border-radius:var(--r-pill); }
.side .nav-btn.is-active .cnt{ background:var(--accent); color:#fff; }
.side .nav-btn .soon{ margin-left:auto; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); border:1px solid var(--border); border-radius:var(--r-pill); padding:1px 7px; }
.app[data-nav="rail"] .side .nav-btn{ justify-content:center; padding:11px 0; }
.app[data-nav="rail"] .side .nav-btn .lbl,
.app[data-nav="rail"] .side .nav-btn .cnt,
.app[data-nav="rail"] .side .nav-btn .soon{ display:none; }
.app[data-nav="rail"] .side .nav-btn.is-active::after{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.app[data-nav="rail"] .side .nav-btn .dot{ position:absolute; top:7px; right:14px; width:7px; height:7px; border-radius:50%; background:var(--pending); border:1.5px solid var(--surface); }

.side .me{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--divider); }
.side .me .who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.side .me .who b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .me .who span{ font-size:11px; color:var(--text-faint); }
.app[data-nav="rail"] .side .me{ justify-content:center; padding:14px 0; }
.app[data-nav="rail"] .side .me .who{ display:none; }

/* ---- Main + topbar -------------------------------------------------------- */
.main{ display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar{ display:flex; align-items:center; gap:14px; padding:12px 24px; border-bottom:1px solid var(--border); background:var(--surface); min-height:65px; }
.topbar h1{ font-family:var(--font-display); font-weight:700; font-size:20px; margin:0; white-space:nowrap; }
.topbar .spacer{ flex:1; }
.search{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:8px 14px; min-width:240px; color:var(--text-faint); }
.search input{ border:none; background:none; outline:none; font-family:var(--font-text); font-size:13px; color:var(--text); width:100%; }

/* Top-nav variant: horizontal bar of destinations */
.topnav{ display:flex; align-items:center; gap:2px; padding:0 24px; border-bottom:1px solid var(--border); background:var(--surface); overflow-x:auto; }
.topnav .tn-btn{ display:flex; align-items:center; gap:8px; padding:14px 14px; border:none; background:none; cursor:pointer;
  font-family:var(--font-text); font-size:14px; font-weight:500; color:var(--text-muted); border-bottom:2px solid transparent; white-space:nowrap; }
.topnav .tn-btn:hover{ color:var(--text); }
.topnav .tn-btn.is-active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.topnav .tn-btn:disabled{ opacity:.5; cursor:default; }
.topnav .tn-btn .cnt{ font-family:var(--font-mono); font-size:11px; background:var(--surface-3); color:var(--text-muted); padding:1px 7px; border-radius:var(--r-pill); }
.topnav .tn-btn .soon{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); border:1px solid var(--border); border-radius:var(--r-pill); padding:1px 6px; }

/* ---- Role switch + ИТК badge in topbar ------------------------------------*/
.role-sw{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:2px; gap:2px; }
.role-sw button{ font-family:var(--font-display); font-weight:600; font-size:12px; padding:6px 13px; border:none; border-radius:var(--r-pill);
  background:none; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:background var(--dur) var(--ease-out); }
.role-sw button.on{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.itk-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-text); font-weight:600; font-size:12px;
  padding:6px 11px; border-radius:var(--r-pill); background:var(--team-soft); color:var(--text); border:1px solid var(--team-line); }
.itk-badge .dot{ width:8px; height:8px; border-radius:3px; background:var(--team); flex:none; }
.bell{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer; }
.bell:hover{ background:var(--surface-2); color:var(--text); }
.bell .n{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--error);
  color:#fff; font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }

/* ---- Content -------------------------------------------------------------- */
.content{ overflow:auto; padding:22px 24px 56px; }
.content-inner{ max-width:1180px; margin:0 auto; }
.row{ display:flex; gap:12px; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.wrap{ flex-wrap:wrap; }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }

/* Page head */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.page-head .lede{ font-size:13px; color:var(--text-faint); margin:4px 0 0; max-width:62ch; }

/* ---- Filters bar ---------------------------------------------------------- */
.filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filters .fld{ display:flex; flex-direction:column; gap:4px; }
.filters .fld > span{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); padding-left:2px; }
.filters select{ font-family:var(--font-text); font-size:13px; color:var(--text); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-control); padding:8px 28px 8px 11px; cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238392A8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-family:var(--font-text); font-size:12px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); cursor:pointer; white-space:nowrap;
  transition:all var(--dur) var(--ease-out); display:inline-flex; align-items:center; gap:6px; }
.chip:hover{ border-color:var(--accent); color:var(--text); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip .cd{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ---- Cards / sections (reuse kit) ----------------------------------------- */
.section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden; }
.section > .sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--divider); }
.section > .sec-head h2{ font-family:var(--font-display); font-weight:600; font-size:15px; margin:0; }
.section > .sec-head .sub{ font-size:12px; color:var(--text-faint); margin-top:2px; }

/* ---- Tables --------------------------------------------------------------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
  text-align:left; padding:10px 18px; border-bottom:1px solid var(--divider); font-weight:500; white-space:nowrap; }
.tbl td{ padding:var(--row-pad,13px) 18px; border-bottom:1px solid var(--divider); font-size:14px; vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tr.clickable{ cursor:pointer; transition:background var(--dur) var(--ease-out); }
.tbl tr.clickable:hover{ background:var(--surface-2); }
.tbl tr.is-active{ background:var(--accent-soft); }
[data-density="compact"] .tbl td{ --row-pad:8px; font-size:13px; }
[data-density="compact"] .tbl th{ padding-top:8px; padding-bottom:8px; }

.call-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.call-dot{ width:10px; height:10px; border-radius:3px; background:var(--c,var(--accent)); flex:none; }
.call-name{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.call-name b{ font-weight:600; white-space:nowrap; }
.call-name span{ font-size:11px; color:var(--text-faint); }
.tnum{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.progress{ height:7px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; width:120px; }
.progress > i{ display:block; height:100%; background:var(--c,var(--accent)); border-radius:inherit; transition:width var(--dur-slow) var(--ease-out); }

.badge--neutral{ color:var(--text-muted); background:var(--surface-3); border-color:var(--border); }
.flag-stuck{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--error);
  background:var(--error-soft); border:1px solid color-mix(in srgb,var(--error) 30%,transparent); border-radius:var(--r-pill); padding:2px 8px; }

/* ---- Review split (queue) ------------------------------------------------- */
.review{ display:grid; grid-template-columns:minmax(280px,360px) minmax(0,1fr); gap:0; }
.review .list{ border-right:1px solid var(--divider); max-height:660px; overflow-y:auto; overflow-x:hidden; min-width:0; }
.review .item{ padding:13px 16px; border-bottom:1px solid var(--divider); cursor:pointer; transition:background var(--dur) var(--ease-out); }
.review .item:hover{ background:var(--surface-2); }
.review .item.is-active{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.review .item .ttl{ font-size:14px; font-weight:600; margin:5px 0 2px; }
.review .detail{ min-width:0; padding:20px 22px; display:flex; flex-direction:column; gap:16px; }

.detail-block{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-control); padding:14px 16px; }
.kv{ display:flex; justify-content:space-between; gap:14px; font-size:13px; padding:5px 0; }
.kv span{ color:var(--text-faint); white-space:nowrap; }
.kv b{ font-weight:600; text-align:right; }

/* ---- Media player (video report) ------------------------------------------*/
.player{ border-radius:var(--radius-control); overflow:hidden; border:1px solid var(--border); background:#0B121E; }
.player .stage{ position:relative; aspect-ratio:16/9; background:
  radial-gradient(120% 90% at 50% 30%, #21304a 0%, #131c2c 60%, #0b121e 100%); display:flex; align-items:center; justify-content:center; }
.player .stage .play{ width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92); color:#0B121E;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; transition:transform var(--dur) var(--ease-out); box-shadow:0 6px 22px rgba(0,0,0,.4); }
.player .stage .play:hover{ transform:scale(1.06); }
.player .stage .play.playing{ background:rgba(255,255,255,.18); color:#fff; }
.player .stage .vtitle{ position:absolute; left:14px; top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:rgba(234,242,251,.82); }
.player .stage .live{ position:absolute; right:14px; top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  color:#fff; display:flex; align-items:center; gap:6px; }
.player .stage .live .d{ width:7px; height:7px; border-radius:50%; background:var(--kv-blue-400); }
.player .bar{ display:flex; align-items:center; gap:12px; padding:9px 13px; background:#101a2b; color:#cdd8e8; }
.player .bar .pp{ background:none; border:none; color:#cdd8e8; cursor:pointer; display:flex; }
.player .scrub{ flex:1; height:5px; border-radius:var(--r-pill); background:rgba(205,216,232,.22); overflow:hidden; cursor:pointer; }
.player .scrub > i{ display:block; height:100%; width:0%; background:var(--kv-blue-400); border-radius:inherit; }
.player .time{ font-family:var(--font-mono); font-size:11px; color:#9fb0c8; }

/* ---- Payload: files / photos / test --------------------------------------- */
.file-chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-control);
  background:var(--surface); font-size:13px; color:var(--text); }
.file-chip .fi{ color:var(--accent); display:flex; }
.file-chip .fs{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-left:4px; }
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.photo{ aspect-ratio:4/3; border-radius:var(--radius-control); border:1px solid var(--border);
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2)); display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.test-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--divider); font-size:13px; }
.test-item:last-child{ border-bottom:none; }
.test-item .ti{ flex:none; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }
.test-item .ti.ok{ background:var(--success); }
.test-item .ti.no{ background:var(--error); }
.test-item .qa{ min-width:0; }
.test-item .qa .q{ color:var(--text-muted); }
.test-item .qa .a{ font-weight:600; margin-top:2px; }

/* ---- Verdict (3 variants) ------------------------------------------------- */
.verdict{ border-top:1px solid var(--divider); margin:0 -22px -20px; padding:16px 22px 20px; background:var(--surface-2); }
.verdict .vh{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
/* variant: footer (default) */
.action-bar{ display:flex; gap:10px; margin-top:12px; align-items:center; }
.action-bar .gap{ flex:1; }
/* variant: cards */
.decision-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.dc{ border:1.5px solid var(--border-strong); border-radius:var(--radius-control); padding:14px; background:var(--surface); cursor:pointer;
  display:flex; flex-direction:column; gap:6px; transition:all var(--dur) var(--ease-out); text-align:left; }
.dc:hover{ border-color:var(--accent); }
.dc .dci{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.dc b{ font-family:var(--font-display); font-size:14px; }
.dc small{ font-size:12px; color:var(--text-faint); }
.dc.ok.on{ border-color:var(--success); background:var(--success-soft); }
.dc.ok .dci{ background:var(--success-soft); color:var(--success); }
.dc.no.on{ border-color:var(--error); background:var(--error-soft); }
.dc.no .dci{ background:var(--error-soft); color:var(--error); }
/* variant: segmented */
.seg{ display:inline-flex; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-control); padding:3px; gap:3px; margin-bottom:12px; }
.seg button{ font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 16px; border:none; border-radius:7px; background:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:7px; }
.seg button.on-ok{ background:var(--success); color:#fff; }
.seg button.on-no{ background:var(--error); color:#fff; }

.done-note{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; padding:11px 14px; border-radius:var(--radius-control); }
.done-note.ok{ background:var(--success-soft); color:var(--success); border:1px solid color-mix(in srgb,var(--success) 30%,transparent); }
.done-note.no{ background:var(--error-soft); color:var(--error); border:1px solid color-mix(in srgb,var(--error) 30%,transparent); }

/* ---- Notice (no-rights / info) -------------------------------------------- */
.notice{ display:flex; gap:11px; padding:12px 15px; border-radius:var(--radius-control); font-size:13px; align-items:flex-start; }
.notice.info{ background:var(--info-soft); color:var(--text); border:1px solid color-mix(in srgb,var(--info) 30%,transparent); }
.notice.warn{ background:var(--pending-soft); color:var(--text); border:1px solid color-mix(in srgb,var(--pending) 30%,transparent); }
.notice .ni{ flex:none; margin-top:1px; }
.notice .ni.info{ color:var(--info); }
.notice .ni.warn{ color:var(--pending); }
.notice b{ font-weight:600; }

/* ---- Progress (ИТК → ученики) --------------------------------------------- */
.itk-group{ margin-bottom:14px; }
.itk-bar{ display:flex; align-items:center; gap:12px; padding:13px 18px; cursor:pointer; }
.itk-bar .ico{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--team-soft); color:var(--team); font-family:var(--font-display); font-weight:700; font-size:13px; flex:none; border:1px solid var(--team-line); }
.itk-bar .meta{ flex:1; min-width:0; }
.itk-bar .meta b{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.itk-bar .meta .sub{ font-size:12px; color:var(--text-faint); }
.itk-bar .chev{ color:var(--text-faint); transition:transform var(--dur) var(--ease-out); }
.itk-group.open .itk-bar .chev{ transform:rotate(90deg); }
.report-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; }
.report-pill .ic{ display:flex; }
.report-pill.up{ color:var(--success); }
.report-pill.no{ color:var(--text-faint); }

/* ---- Access / gating matrix ----------------------------------------------- */
.gate-tbl td{ text-align:center; }
.gate-tbl td.lead{ text-align:left; }
.gate-cell{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; color:var(--text-faint); transition:all var(--dur) var(--ease-out); }
.gate-cell:hover{ border-color:var(--accent); }
.gate-cell.open{ background:var(--success-soft); border-color:color-mix(in srgb,var(--success) 35%,transparent); color:var(--success); }
.gate-cell.locked{ background:var(--surface-2); color:var(--text-faint); }
.gate-cell:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- Notify composer ------------------------------------------------------ */
.composer{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.composer .col{ padding:18px 20px; }
.composer .col + .col{ border-left:1px solid var(--divider); }
.tmpl{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.var-chip{ font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:var(--r-pill); border:1px dashed var(--border-strong);
  background:var(--surface-2); color:var(--accent); cursor:pointer; }
.var-chip:hover{ border-color:var(--accent); }
.preview-msg{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-control); padding:14px 16px; }
.preview-msg .bubble{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-control); padding:12px 14px; font-size:14px; box-shadow:var(--shadow-sm); }
.preview-msg .to{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-bottom:8px; }

/* ---- Accounts / ИТК codes ------------------------------------------------- */
.itk-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.itk-card{ border:1px solid var(--border); border-radius:var(--radius-card); padding:15px 16px; background:var(--surface); box-shadow:var(--shadow-sm);
  border-top:3px solid var(--team); }
.itk-card .nm{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.code-box{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding:8px 10px; border-radius:var(--radius-control);
  background:var(--surface-2); border:1px dashed var(--border-strong); }
.code-box code{ font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--text); }
.code-box button{ border:none; background:none; color:var(--accent); cursor:pointer; display:flex; padding:3px; }
.code-box button:hover{ color:var(--accent-hover); }

.tag{ font-family:var(--font-text); font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--r-pill); }
.tag.admin{ background:var(--accent-soft); color:var(--accent); }
.tag.teacher{ background:var(--team-soft); color:var(--text); border:1px solid var(--team-line); }
.tag.expert{ background:var(--info-soft); color:var(--info); }

/* ---- Tabs (inner) --------------------------------------------------------- */
.itabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.itabs button{ font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-faint); padding:10px 15px; cursor:pointer;
  border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; display:flex; align-items:center; gap:7px; }
.itabs button:hover{ color:var(--text-muted); }
.itabs button.on{ color:var(--accent); border-bottom-color:var(--accent); }
.itabs button .n{ font-family:var(--font-mono); font-size:10px; background:var(--error); color:#fff; border-radius:9px; padding:0 5px; }

/* inbox */
.inbox-item{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--divider); cursor:pointer; }
.inbox-item:hover{ background:var(--surface-2); }
.inbox-item.unread{ background:var(--accent-soft); }
.inbox-item .ub{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; margin-top:6px; }
.inbox-item.read .ub{ background:transparent; }

/* ---- misc ----------------------------------------------------------------- */
.empty{ text-align:center; padding:48px 24px; color:var(--text-faint); }
.empty .ei{ width:46px; height:46px; border-radius:12px; background:var(--surface-3); color:var(--text-faint); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; }
.fadein{ animation:fade .26s var(--ease-out) both; }
@keyframes fade{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .fadein,.app,.progress>i{ animation:none; transition:none; } }
.icn{ display:inline-flex; line-height:0; }
.icn svg{ width:1em; height:1em; display:block; }
hr.div{ border:none; border-top:1px solid var(--divider); margin:0; }