* { margin: 0; padding: 0; box-sizing: border-box; }

  :root, html[data-theme="dark"] {
    --bg:#0b0b0d; --bg-elev:#101013; --surface:#16161a; --surface-2:#1c1c21;
    --line:#26262c; --line-soft:#1e1e23;
    --text:#ededf0; --text-dim:#8a8a94; --text-mute:#56565f; --accent:#d4d4d8;
    --accent-text:#0b0b0d;
    --c-esea:#6ea8fe; --c-turnuva:#f87171; --c-scrim:#22d3ee;
    --c-review:#fbbf24; --c-analiz:#c084fc; --c-teori:#6ee7b7; --c-off:#71717a;
    --c-break:#94a3b8; --c-dry:#a3ad67; --break-surface:#1b2028;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-modal: 0 30px 60px -20px rgba(0,0,0,0.7);
    --hour-line: #1a1a20;
    --day-start-hour: 11;
    --ev-bg-tint: 0.10;
    --logo-bg: transparent;
    color-scheme: dark;
  }
  html[data-theme="light"] {
    --bg:#f7f7f8; --bg-elev:#ffffff; --surface:#f1f1f3; --surface-2:#e8e8ec;
    --line:#e2e2e6; --line-soft:#ebebee;
    --text:#18181b; --text-dim:#52525b; --text-mute:#8a8a94; --accent:#18181b;
    --accent-text:#ffffff;
    --c-esea:#2563eb; --c-turnuva:#dc2626; --c-scrim:#0891b2;
    --c-review:#d97706; --c-analiz:#9333ea; --c-teori:#059669; --c-off:#71717a;
    --c-break:#64748b; --c-dry:#64762b; --break-surface:#edf0f4;
    --shadow-modal: 0 30px 60px -20px rgba(0,0,0,0.2);
    --hour-line: #ebebee;
    --ev-bg-tint: 0.14;
    --logo-bg: #18181b;
    color-scheme: light;
  }

  html, body { height: 100%; }
  body {
    font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
    background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; overflow: hidden;
    transition: background 200ms var(--ease), color 200ms var(--ease);
  }
  ::selection { background: rgba(110,168,254,0.25); }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
  @keyframes pop { from { opacity:0; transform:scale(0.97) translateY(4px); } to { opacity:1; transform:scale(1) translateY(0); } }
  @keyframes slideInRight { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
  @keyframes slideOutRight { to { opacity:0; transform:translateX(16px); } }
  @keyframes pulseLine {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
    50% { box-shadow: 0 0 0 4px rgba(248,113,113,0); }
  }
  @keyframes cmdPop {
    from { opacity:0; transform:translateY(-8px) scale(0.98); }
    to { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* AUTH CHECK: neither Login nor the app renders until /api/auth/me has answered. */
  body[data-auth="checking"] .login-screen { display: none; }
  .auth-checking { position: fixed; inset: 0; z-index: 1001; display: none; place-items: center; background: var(--bg); }
  body[data-auth="checking"] .auth-checking { display: grid; }
  .auth-checking-mark { width: 36px; height: 36px; opacity: 0.5; animation: auth-checking-pulse 1.6s ease-in-out infinite; }
  @keyframes auth-checking-pulse { 50% { opacity: 0.2; } }
  @media (prefers-reduced-motion: reduce) { .auth-checking-mark { animation: none; } }

  /* LOGIN */
  /* Pre-auth is intentionally dark in every app theme; the week grid mirrors the Calendar columns. */
  .login-screen {
    --lg-bg:#09090b; --lg-panel:#111114; --lg-panel-2:#0d0d10; --lg-field:#0c0c0f;
    --lg-line:#232329; --lg-line-strong:#34343c; --lg-text:#f1f1f3; --lg-dim:#a1a1aa;
    --lg-mute:#6b6b75; --lg-focus:rgba(228,228,231,0.16);
    position: fixed; inset: 0; z-index: 1000;
    display: flex; overflow-x: hidden; overflow-y: auto;
    background: radial-gradient(ellipse 70% 55% at 50% 42%, #131316 0%, var(--lg-bg) 72%);
    color: var(--lg-text); color-scheme: dark;
  }
  .login-week-grid {
    position: fixed; inset: 0; pointer-events: none;
    display: flex;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 38%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 38%, #000 30%, transparent 85%);
  }
  .login-week-grid span {
    flex: 1 1 0; min-width: 0;
    padding: 22px 0 0 14px; border-left: 1px solid rgba(255,255,255,0.035);
    background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 100% 64px; background-position: 0 56px;
    color: #3a3a42; font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.12em;
  }
  .login-week-grid span:first-child { border-left: 0; }
  .login-week-grid span.is-today { color: #8b8b95; background-color: rgba(255,255,255,0.014); }
  /* Faint scheduled-block silhouettes: same 7 columns and 64px hours as the grid (first line at 56px),
     kept in the peripheral day columns so the centered card stays the focal point. */
  .login-week-events {
    --lg-block-fill: rgba(148,163,184,0.045); --lg-block-edge: rgba(148,163,184,0.07);
    --lg-block-accent: rgba(148,163,184,0.2); --lg-block-line: rgba(148,163,184,0.09);
    position: fixed; inset: 0; pointer-events: none;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 56px; grid-auto-rows: 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 38%, #000 30%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 38%, #000 30%, transparent 85%);
  }
  .login-block {
    position: relative; margin: 4px 8px 4px 9px; border-radius: 6px;
    background: linear-gradient(180deg, var(--lg-block-fill), rgba(148,163,184,0.018));
    box-shadow: inset 0 0 0 1px var(--lg-block-edge);
  }
  .login-block::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--lg-block-accent); }
  .login-block::after { content: ""; position: absolute; left: 12px; top: 12px; width: 44%; height: 3px; border-radius: 2px; background: var(--lg-block-line); }
  .login-block-a { grid-column: 2; grid-row: 3 / span 2; }
  .login-block-b { grid-column: 1; grid-row: 8; }
  .login-block-c { grid-column: 6; grid-row: 5 / span 3; --lg-block-accent: rgba(125,160,214,0.24); --lg-block-fill: rgba(125,160,214,0.05); }
  .login-block-d { grid-column: 7; grid-row: 2 / span 2; }
  .login-block-e { grid-column: 7; grid-row: 10 / span 2; }
  /* Tall desktop screens: carry the lower blocks further down so both halves of the week stay in play. */
  @media (min-width: 761px) and (min-height: 1000px) {
    .login-block-b { grid-row: 12; }
    .login-block-e { grid-row: 13 / span 2; }
  }
  .login-shell {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 100vh; min-height: 100dvh; padding: 48px 16px;
  }
  .login-content { width: min(100%, 416px); }
  .login-panel {
    width: 100%; overflow: hidden; position: relative;
    background: var(--lg-panel); border: 1px solid var(--lg-line); border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 32px 64px -32px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.5);
  }
  /* Indeterminate progress rail while the auth request is in flight. */
  .login-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #e4e4e7 50%, transparent) no-repeat;
    background-size: 40% 100%; opacity: 0; transition: opacity 160ms;
  }
  .login-panel:has(.login-btn[aria-busy="true"])::before { opacity: 1; animation: loginRail 1.1s var(--ease) infinite; }
  @keyframes loginRail { from { background-position: -60% 0; } to { background-position: 160% 0; } }
  .login-brand {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 28px; border-bottom: 1px solid var(--lg-line); background: var(--lg-panel-2);
  }
  .login-brand-logo { display: block; flex: none; width: 46px; height: 46px; object-fit: contain; }
  .login-brand-text { min-width: 0; padding-left: 14px; border-left: 1px solid var(--lg-line); }
  .login-brand-name {
    color: #e4e4e7; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.3;
  }
  .login-brand-name span { margin-inline: 3px; color: var(--lg-mute); }
  .login-brand-sub { margin-top: 3px; color: var(--lg-mute); font-size: 12px; }
  .login-box { width: 100%; padding: 30px 28px 26px; color: var(--lg-text); }
  .login-title {
    font-size: 26px; font-weight: 700; line-height: 1.15;
    letter-spacing: -0.035em; color: var(--lg-text);
  }
  .login-sub { margin: 7px 0 26px; font-size: 13px; color: var(--lg-dim); }
  .login-box .field { margin-bottom: 16px; }
  .login-box .field label {
    display: block; margin-bottom: 7px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--lg-dim); font-weight: 650;
  }
  .login-box .field input {
    display: block; width: 100%; min-height: 44px; padding: 10px 13px;
    border: 1px solid var(--lg-line-strong); border-radius: 7px; outline: none;
    background: var(--lg-field); color: var(--lg-text); -webkit-text-fill-color: var(--lg-text);
    caret-color: var(--lg-text); color-scheme: dark; font: inherit; font-size: 14px;
    transition: border-color 140ms, background-color 140ms, box-shadow 140ms;
  }
  .login-box .field input::placeholder { color: var(--lg-mute); -webkit-text-fill-color: var(--lg-mute); }
  .login-box .field input:hover { border-color: #4a4a53; }
  .login-box .field input:focus-visible {
    border-color: #d4d4d8; background: #101013; box-shadow: 0 0 0 3px var(--lg-focus);
  }
  .login-box .field input[aria-invalid="true"] { border-color: #b4686b; }
  .login-box .field input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(248,113,113,0.16); }
  .login-box .field input:disabled { opacity: 0.6; cursor: not-allowed; }
  .login-password-wrap { position: relative; }
  .login-password-wrap input { padding-right: 76px !important; }
  .login-password-toggle {
    position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
    min-width: 58px; min-height: 34px; padding: 0 10px;
    border: 0; border-left: 1px solid var(--lg-line); border-radius: 0 5px 5px 0;
    background: transparent; color: var(--lg-dim); font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: color 140ms, background-color 140ms;
  }
  .login-password-toggle:hover { color: var(--lg-text); background: #1a1a1f; }
  .login-password-toggle[aria-pressed="true"] { color: var(--lg-text); }
  .login-password-toggle:focus-visible { outline: 2px solid #d4d4d8; outline-offset: 0; border-radius: 5px; }
  .login-password-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
  .login-box .field input:-webkit-autofill,
  .login-box .field input:-webkit-autofill:hover,
  .login-box .field input:-webkit-autofill:focus,
  .login-box .field input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 1000px #121216 inset;
    box-shadow: 0 0 0 1000px #121216 inset;
    caret-color: var(--lg-text);
  }
  .remember-row {
    display: flex; align-items: center; gap: 10px; margin: 4px 0 22px;
    color: #c4c4ca; font-size: 13px; cursor: pointer; user-select: none;
  }
  .remember-row input[type=checkbox] { flex: none; width: 16px; height: 16px; accent-color: #e4e4e7; cursor: pointer; }
  .remember-row input[type=checkbox]:focus-visible { outline: 2px solid #d4d4d8; outline-offset: 3px; }
  .remember-term {
    margin-left: auto; padding: 2px 7px; border: 1px solid var(--lg-line); border-radius: 4px;
    color: var(--lg-mute); font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace;
  }
  .login-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid #ececef;
    border-radius: 7px; background: #ececef; color: #0c0c0f;
    font: inherit; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; cursor: pointer;
    transition: background-color 140ms, border-color 140ms, transform 100ms;
  }
  .login-btn:hover:not(:disabled) { background: #fff; border-color: #fff; }
  .login-btn:active:not(:disabled) { transform: translateY(1px); background: #d4d4d8; }
  .login-btn:focus-visible { outline: 2px solid #ececef; outline-offset: 3px; }
  .login-btn:disabled { cursor: wait; background: #a1a1aa; border-color: #a1a1aa; }
  .login-btn-progress { display: none; width: 14px; height: 14px; border: 2px solid rgba(12,12,15,0.3); border-top-color: #0c0c0f; border-radius: 50%; }
  .login-btn[aria-busy="true"] .login-btn-progress { display: inline-block; animation: spin 750ms linear infinite; }
  .login-err {
    display: none; margin-top: 14px; padding: 10px 12px 10px 34px; position: relative;
    border: 1px solid rgba(248,113,113,0.28); border-radius: 7px;
    background: rgba(248,113,113,0.07); color: #fca5a5; font-size: 12.5px; line-height: 1.5;
  }
  .login-err::before {
    content: '!'; position: absolute; left: 11px; top: 11px;
    width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor;
    display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
  }
  .login-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 28px; border-top: 1px solid var(--lg-line); background: var(--lg-panel-2);
    color: var(--lg-mute); font-size: 11.5px;
  }
  .login-foot-access { display: inline-flex; align-items: center; gap: 7px; }
  .login-foot-access svg { width: 12px; height: 12px; flex: none; }
  .login-foot-week { color: #8b8b95; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
  @media (max-width: 760px) {
    .login-week-grid span { padding: 16px 0 0 8px; font-size: 9px; letter-spacing: 0.08em; }
    /* Narrow columns: keep two single-hour blocks outside the card (above and below it). */
    .login-block { margin: 3px 4px 3px 5px; border-radius: 4px; }
    .login-block::after { display: none; }
    .login-block-a, .login-block-c, .login-block-e { display: none; }
    .login-block-b { grid-column: 2; grid-row: 12; }
    .login-block-d { grid-column: 6; grid-row: 2; }
    .login-shell { padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
  }
  @media (max-width: 420px) {
    .login-brand { padding: 16px 20px; gap: 12px; }
    .login-brand-logo { width: 40px; height: 40px; }
    .login-brand-text { padding-left: 12px; }
    .login-box { padding: 26px 20px 22px; }
    .login-title { font-size: 24px; }
    .login-sub { margin-bottom: 22px; }
    .login-foot { padding: 11px 20px; }
  }
  @media (max-height: 640px) { .login-week-grid, .login-week-events { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .login-btn, .login-box .field input, .login-password-toggle { transition: none; }
    .login-panel:has(.login-btn[aria-busy="true"])::before { animation: none; background-size: 100% 100%; opacity: 0.5; }
    .login-btn[aria-busy="true"] .login-btn-progress { animation: none; border-color: #0c0c0f; border-right-color: transparent; }
  }

  /* APP */
  .app {
    /* One bottom inset shared by the sidebar action stack and full-height pages. */
    --shell-inset: 20px;
    display: grid; grid-template-columns: 240px 1fr; height: 100vh;
    background:
      radial-gradient(ellipse 800px 500px at 80% -10%, rgba(110,168,254,0.05), transparent 60%),
      radial-gradient(ellipse 700px 400px at 10% 110%, rgba(192,132,252,0.045), transparent 60%),
      var(--bg);
    animation: fadeIn 250ms var(--ease);
  }
  html[data-theme="light"] .app {
    background:
      radial-gradient(ellipse 800px 500px at 80% -10%, rgba(37,99,235,0.04), transparent 60%),
      radial-gradient(ellipse 700px 400px at 10% 110%, rgba(147,51,234,0.03), transparent 60%),
      var(--bg);
  }

  /* SIDEBAR */
  .sidebar {
    border-right: 1px solid var(--line-soft); padding: 18px 14px var(--shell-inset);
    display: flex; flex-direction: column; gap: 14px;
    background: var(--bg-elev); overflow: hidden; min-height: 0;
    transition: background 200ms var(--ease), border-color 200ms var(--ease);
  }
  .sidebar > :not(.calendar-tools) { flex-shrink: 0; }
  .calendar-tools {
    min-height: 0; flex: 0 1 auto; overflow-y: auto; scrollbar-width: thin;
    padding: 2px 0 4px;
    /* Only reachable on short viewports; the thumb stays out of sight until the list is in use. */
    scrollbar-color: transparent transparent; overscroll-behavior: contain;
  }
  .calendar-tools:hover, .calendar-tools:focus-within { scrollbar-color: var(--line) transparent; }
  .calendar-tools[hidden], .calendar-tools-trigger[hidden], .calendar-tools-backdrop[hidden] { display: none; }
  .calendar-tools-heading, .calendar-filter-heading {
    margin: 0; padding: 0 6px; color: var(--text-mute);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  .calendar-tools .add-event-btn {
    width: 100%; min-height: 38px; margin-top: 10px; padding: 0 7px;
    justify-content: flex-start; gap: 9px;
    background: var(--surface); color: var(--text); border-color: var(--line);
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .calendar-tools .add-event-btn:hover { background: var(--surface-2); border-color: var(--text-mute); }
  .add-event-icon {
    width: 22px; height: 22px; display: grid; place-items: center; flex: none;
    border-radius: 5px; background: var(--text); color: var(--bg);
  }
  .calendar-tools .add-event-btn .add-event-icon svg { width: 12px; height: 12px; }
  .add-event-kbd {
    margin-left: auto; min-width: 20px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px;
    background: var(--bg-elev); color: var(--text-mute); font: 600 10px/1.2 ui-monospace, monospace; text-align: center;
  }
  @media (hover: none), (max-width: 900px) { .add-event-kbd { display: none; } }
  .calendar-filter-heading { margin: 14px 0 5px; font-size: 9px; }
  .calendar-filters { display: flex; flex-direction: column; gap: 1px; }
  .calendar-filters .nav-item {
    position: relative; width: 100%; min-height: 26px; padding: 4px 6px;
    display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 7px;
    background: transparent; border: 0; border-radius: 4px;
    text-align: left; font-family: inherit; font-size: 11.5px; line-height: 17px;
    box-shadow: none;
  }
  .calendar-filters .nav-item:hover { background: var(--surface); }
  .calendar-filters .nav-item.active { background: var(--surface); color: var(--text); font-weight: 600; }
  .calendar-filters .filter-label { min-width: 0; }
  .calendar-filters .dot { width: 6px; height: 6px; }
  .calendar-filters .count { min-width: 14px; text-align: right; font: 500 10px/17px ui-monospace, monospace; }
  .calendar-filters .nav-item.active .count { color: var(--text-dim); }
  .calendar-tools button:focus-visible, .calendar-tools-trigger:focus-visible, .sidebar-close:focus-visible {
    outline: 2px solid var(--c-esea); outline-offset: -2px;
  }
  .calendar-tools-trigger, .calendar-tools-backdrop, .sidebar-close { display: none; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
  .brand-mark {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 7px;
    background: var(--logo-bg);
    overflow: hidden;
    transition: background 200ms var(--ease);
  }
  .brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
  .brand-mark svg { width: 13px; height: 13px; }
  .brand-text { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
  .brand-text span { color: var(--text-mute); font-weight: 500; }
  .view-nav { display: flex; flex-direction: column; gap: 2px; }
  .view-nav-label {
    padding: 2px 8px 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--text-mute);
  }
  .main-tab {
    position: relative;
    background: transparent; font-family: inherit; line-height: inherit; text-align: left;
    display: flex; align-items: center; gap: 10px;
    min-height: 34px; padding: 7px 10px;
    border: 1px solid transparent; border-radius: 7px;
    color: var(--text-dim); font-size: 12.5px; font-weight: 550;
    cursor: pointer; user-select: none;
    transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
  }
  .main-tab:hover { background: var(--surface); color: var(--text); }
  .main-tab:focus-visible, .type-opt:has(input:focus-visible) {
    outline: 2px solid var(--c-esea); outline-offset: -2px;
  }
  .main-tab.active {
    background: var(--surface); color: var(--text); border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  }
  .main-tab.active::before {
    content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 2px; background: var(--text);
  }
  .main-tab svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; color: var(--text-mute); }
  .main-tab:hover svg, .main-tab.active svg { color: var(--text); }

  .nav-item {
    display: flex; align-items: center; gap: 7px;
    min-height: 30px; padding: 5px 9px;
    border-radius: 6px; color: var(--text-dim); font-size: 12px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent;
    transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
    user-select: none; white-space: nowrap; flex: 0 0 auto;
  }
  .nav-item:hover { background: var(--surface); color: var(--text); }
  .nav-item.active {
    background: var(--surface); color: var(--text); border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .dot.esea{background:var(--c-esea)} .dot.turnuva{background:var(--c-turnuva)} .dot.scrim{background:var(--c-scrim)}
  .dot.review{background:var(--c-review)} .dot.analiz{background:var(--c-analiz)}
  .dot.teori{background:var(--c-teori)} .dot.off{background:var(--c-off)}
  .dot.break { background: var(--c-break); }
  .dot.dry { background: var(--c-dry); }
  .count { margin-left: auto; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
  .sidebar-footer {
    margin-top: auto; display: flex; flex-direction: column; gap: 4px;
    padding: 12px 0 0; border-top: 1px solid var(--line-soft);
  }
  .sidebar-footer .ghost-btn { min-height: 31px; padding: 6px 10px; }
  .ghost-btn {
    background: transparent; color: var(--text-dim); border: 1px solid var(--line);
    padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
    cursor: pointer; text-align: left; font-family: inherit;
    display: flex; align-items: center; gap: 8px;
    transition: background 140ms, color 140ms, border-color 140ms, transform 80ms;
  }
  .ghost-btn:hover { background: var(--surface); color: var(--text); border-color: var(--text-mute); }
  .ghost-btn:active { transform: scale(0.98); }
  .ghost-btn.danger:hover { color: var(--c-turnuva); border-color: rgba(248,113,113,0.3); }
  /* A feature that exists but is not available yet: visible, inert, no hover affordance. */
  .ghost-btn.is-locked, .ghost-btn.is-locked:hover { background: transparent; color: var(--text-dim); border: 1px dashed var(--line); cursor: default; }
  .ghost-btn.is-locked:active { transform: none; }
  .ghost-btn.is-locked svg { opacity: 0.55; }
  .ghost-btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
  .ghost-btn.primary:hover { background: var(--text); color: var(--accent-text); }
  /* Program Send stays visible but inert until PROGRAM_SEND_ENABLED unlocks it. */
  .ghost-btn.primary.program-send-btn.is-locked,
  .ghost-btn.primary.program-send-btn.is-locked:hover {
    background: transparent; color: var(--text-dim); border: 1px dashed var(--line);
    font-weight: 500; cursor: default;
  }
  .ghost-btn.program-send-btn.is-locked:active { transform: none; }
  .ghost-btn.program-send-btn.is-locked svg { opacity: 0.55; }
  .feature-status, .program-send-status {
    margin-left: auto; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px;
    color: var(--text-dim); font-size: 10px; font-weight: 500; line-height: 13px; letter-spacing: 0.02em;
  }
  .feature-status[hidden], .program-send-status[hidden] { display: none; }
  .shortcut-soon { margin-left: 6px; color: var(--text-mute); font-size: 11px; }

  .add-event-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 32px; padding: 7px 11px; border-radius: 7px;
    background: var(--accent); color: var(--accent-text);
    font-size: 12px; font-weight: 650;
    border: 1px solid transparent;
    cursor: pointer; font-family: inherit; white-space: nowrap;
    transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease), transform 80ms var(--ease), box-shadow 140ms var(--ease);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  .add-event-btn:hover { background: var(--text); }
  .add-event-btn:active { transform: scale(0.98); }
  .add-event-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }

  .user-chip {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); font-size: 12px; color: var(--text-dim);
    display: flex; align-items: center; gap: 8px;
  }
  .user-chip .role-tag {
    margin-left: auto; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px;
    background: var(--surface-2); color: var(--text-mute); font-weight: 600;
  }
  .user-chip .role-tag.captain { color: var(--c-esea); }

  /* MAIN */
  .main { display: flex; flex-direction: column; overflow: hidden; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--line-soft); min-height: 60px;
    gap: 16px;
  }
  .week-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .icon-btn {
    width: 30px; height: 30px; display: grid; place-items: center;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    color: var(--text-dim); cursor: pointer;
    transition: background 140ms, color 140ms, border-color 140ms, transform 80ms;
  }
  .icon-btn:hover { background: var(--surface); color: var(--text); border-color: var(--line); }
  .icon-btn:active { transform: scale(0.94); }
  .icon-btn svg { width: 14px; height: 14px; }
  .week-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; padding: 0 12px; min-width: 240px; text-align: center; }
  .week-title span { color: var(--text-mute); font-weight: 400; margin-left: 6px; }
  .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .today-chip {
    font-size: 12px; color: var(--text-dim); padding: 5px 10px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
    display: flex; align-items: center; gap: 8px;
  }
  .today-chip b { color: var(--text); font-weight: 600; }
  .countdown {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border: 1px solid rgba(110,168,254,0.3); border-radius: 6px;
    background: linear-gradient(135deg, rgba(110,168,254,0.08), rgba(110,168,254,0.02));
    font-size: 12px;
  }
  .countdown .label { color: var(--c-esea); font-weight: 600; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
  .countdown .value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
  .countdown .event-name { color: var(--text-dim); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .search-wrap { position: relative; flex: 1; max-width: 320px; }
  .search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-mute); pointer-events: none; }
  .search-input {
    width: 100%; background: var(--surface); border: 1px solid var(--line);
    border-radius: 6px; color: var(--text); font-family: inherit;
    font-size: 12.5px; padding: 7px 10px 7px 30px; outline: none;
    transition: border-color 140ms, background 140ms, box-shadow 140ms;
  }
  .search-input::placeholder { color: var(--text-mute); }
  .search-input:focus { border-color: var(--text-mute); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(110,168,254,0.08); }
  .search-input.has-value { padding-right: 60px; }
  .search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; display: none; place-items: center;
    background: transparent; border: none; color: var(--text-mute); cursor: pointer; border-radius: 4px;
  }
  .search-clear:hover { background: var(--surface-2); color: var(--text); }
  .search-clear svg { position: static; width: 11px; height: 11px; }
  .search-wrap.has-value .search-clear { display: grid; }
  .search-results-count {
    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--text-mute); pointer-events: none; font-variant-numeric: tabular-nums;
  }

  .ticker-bar {
    display: flex; align-items: center; height: 32px;
    background: var(--bg-elev); border-bottom: 1px solid var(--line-soft);
    overflow: hidden; position: relative; flex-shrink: 0;
  }
  .ticker-bar[hidden] { display: none; }
  .ticker-bar::before, .ticker-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 32px; z-index: 2; pointer-events: none;
  }
  .ticker-bar::before { left: 0; background: linear-gradient(90deg, var(--bg-elev), transparent); }
  .ticker-bar::after { right: 0; background: linear-gradient(270deg, var(--bg-elev), transparent); }
  .ticker-content {
    display: flex; gap: 40px; padding-left: 24px; white-space: nowrap;
    animation: tickerScroll 90s linear infinite;
    will-change: transform;
  }
  .ticker-content:hover { animation-play-state: paused; }
  .ticker-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
  .ticker-item .t-dot { width: 6px; height: 6px; border-radius: 50%; }
  .ticker-item .t-time { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
  .ticker-item .t-title { color: var(--text); font-weight: 500; }
  .ticker-item .t-type { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
  .ticker-item .t-countdown {
    font-size: 10.5px; color: var(--c-esea); font-weight: 600;
    font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
    padding: 1px 6px; border-radius: 10px; background: rgba(110,168,254,0.1);
  }
  .ticker-item.past { opacity: 0.4; }
  .ticker-empty { font-size: 12px; color: var(--text-mute); padding-left: 24px; font-style: italic; }

  .tab-panel { animation: fadeIn 200ms var(--ease); flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* TAKVİM */
  .calendar-wrap { flex: 1; overflow: auto; position: relative; background: var(--bg-elev); }
  .calendar { display: grid; grid-template-columns: 60px repeat(7, minmax(180px, 1fr)); min-width: 100%; position: relative; }
  .calendar-loading .time-gutter-body, .calendar-loading .col-body { min-height: 780px; }
  .calendar-loading .col-body { border-top: 1px solid var(--line-soft); }
  .calendar-status {
    position: sticky; left: 0; width: min(100%, 100vw); top: 0;
    margin-top: -780px; height: 780px; pointer-events: none;
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: 104px; box-sizing: border-box; z-index: 12;
  }
  .calendar-status[hidden] { display: none; }
  /* Loading is announced to assistive technology; visually the empty grid is enough. */
  .calendar-status.loading {
    width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; position: absolute;
  }
  .event.is-pending { opacity: .62; pointer-events: none; }
  .calendar-status.error {
    position: relative; margin-top: 0; height: min(70vh, 780px);
    min-height: 320px; align-items: center; padding: 0 16px;
  }
  .calendar-error-card {
    pointer-events: auto; display: grid; justify-items: center; gap: 12px;
    padding: 22px 26px; background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: var(--shadow-modal);
  }
  .calendar-error-card .empty-title { margin: 0; }
  .calendar-error-card .btn:focus-visible { outline: 2px solid var(--c-esea); outline-offset: 2px; }
  .time-gutter { position: sticky; left: 0; z-index: 5; background: var(--bg-elev); border-right: 1px solid var(--line-soft); }
  .time-gutter-head { height: 66px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 6; background: var(--bg-elev); }
  .time-gutter-body { position: relative; }
  .hour-mark {
    position: absolute; left: 0; right: 0; height: 60px;
    padding: 4px 8px 0 0; text-align: right;
    font-size: 10.5px; color: var(--text-mute);
    font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; letter-spacing: 0.02em;
    border-top: 1px solid var(--hour-line); box-sizing: border-box;
  }
  .hour-mark:first-child { border-top: none; }

  .col { background: var(--bg-elev); display: flex; flex-direction: column; position: relative; border-right: 1px solid var(--line-soft); }
  .col:last-child { border-right: none; }
  .col.offday {
    background: repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(113,113,122,0.035) 8px, rgba(113,113,122,0.035) 16px);
  }
  .offday-badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    font-size: 28px; font-weight: 800;
    color: rgba(113,113,122,0.18); letter-spacing: 0.15em;
    pointer-events: none; text-transform: uppercase; white-space: nowrap; user-select: none;
  }
  html[data-theme="light"] .offday-badge { color: rgba(113,113,122,0.25); }

  .col-head {
    height: 66px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: 3px;
    position: sticky; top: 0; background: var(--bg-elev); z-index: 4;
    transition: background 200ms;
    position: relative;
  }
  .col.is-today .col-head { background: var(--surface); }
  html[data-theme="dark"] .col.is-today .col-head { background: #14141a; }
  .col-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .col-day { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
  .col-date { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
  .col.is-today .col-date { color: var(--c-esea); font-weight: 600; }
  .col-summary { font-size: 10.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

  .col-add-btn {
    position: absolute;
    bottom: 6px; right: 8px;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 5px; color: var(--text-mute); cursor: pointer;
    transition: all 140ms var(--ease);
    opacity: 0;
    z-index: 5;
  }
  .col:hover .col-add-btn { opacity: 1; }
  .col-add-btn:hover { color: var(--text); border-color: var(--text-mute); background: var(--surface-2); }
  .col-add-btn svg { width: 10px; height: 10px; }
  .col-head:has(.col-offday-btn) .col-add-btn { right: 32px; }
  .col-offday-btn {
    position: absolute; bottom: 6px; right: 8px; width: 20px; height: 20px;
    display: grid; place-items: center; padding: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
    color: var(--text-dim); cursor: pointer; opacity: .55; z-index: 5;
    transition: opacity 140ms var(--ease), background 140ms var(--ease);
  }
  .col-offday-btn svg { width: 12px; height: 12px; }
  .col-head:hover .col-offday-btn, .col-head:focus-within .col-offday-btn,
  .col-head:focus-within .col-add-btn, .col-offday-btn[aria-pressed="true"] { opacity: 1; }
  .col-offday-btn:hover, .col-offday-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
  .col-offday-btn:disabled { cursor: wait; }
  /* Requested but not yet persisted: visible at once, visibly unconfirmed. */
  .col.offday-pending .offday-badge { opacity: 0.55; }
  .col.offday-pending .col-offday-btn { opacity: 1; }
  .col.offday-pending .col-summary { color: var(--text-dim); }
  .col-offday-btn:focus-visible, .col-add-btn:focus-visible, #offDayOverlay button:focus-visible {
    outline: 2px solid var(--c-esea); outline-offset: 2px;
  }

  .col-body {
    position: relative;
    background:
      repeating-linear-gradient(to bottom, transparent 0, transparent 59px, var(--hour-line) 59px, var(--hour-line) 60px);
  }
  .col-body.drag-over {
    background-color: rgba(110,168,254,0.045);
    box-shadow: inset 0 0 0 2px rgba(110,168,254,0.35);
  }
  .snap-guide {
    position: absolute; left: 0; right: 0; height: 0;
    border-top: 1px solid var(--c-esea); z-index: 11; pointer-events: none;
  }
  .col-body.drag-over::after {
    content: attr(data-drop-label);
    position: absolute; left: 8px; right: 8px; top: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--c-esea);
    background: var(--bg-elev); padding: 3px 8px; border-radius: 4px;
    text-align: center; pointer-events: none; z-index: 10; letter-spacing: 0.03em;
  }
  .calendar.paste-mode .col-body { cursor: copy; }

  /* EVENT CARD */
  .event {
    position: absolute; left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0;
    padding: 7px 8px 8px 10px;
    cursor: grab; border-left-width: 4px;
    user-select: none; overflow: hidden;
    transition: background 120ms ease, border-color 120ms ease;
    will-change: top;
    box-sizing: border-box;
  }
  .event:hover { background: var(--surface-2); }
  .event.dragging { opacity: 0.35; cursor: grabbing; }
  .event.selected {
    box-shadow: inset 0 0 0 2px var(--c-esea);
    background: var(--surface-2);
    z-index: 3;
  }

  .event.esea { border-left-color: var(--c-esea); background: linear-gradient(90deg, color-mix(in srgb, var(--c-esea) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.turnuva { border-left-color: var(--c-turnuva); background: linear-gradient(90deg, color-mix(in srgb, var(--c-turnuva) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.scrim { border-left-color: var(--c-scrim); background: linear-gradient(90deg, color-mix(in srgb, var(--c-scrim) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.dry { border-left-color: var(--c-dry); background: linear-gradient(90deg, color-mix(in srgb, var(--c-dry) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.review { border-left-color: var(--c-review); background: linear-gradient(90deg, color-mix(in srgb, var(--c-review) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.analiz { border-left-color: var(--c-analiz); background: linear-gradient(90deg, color-mix(in srgb, var(--c-analiz) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.teori { border-left-color: var(--c-teori); background: linear-gradient(90deg, color-mix(in srgb, var(--c-teori) calc(var(--ev-bg-tint) * 100%), var(--surface)) 0%, var(--surface) 40%); }
  .event.break { border-left-color: var(--c-break); background: var(--break-surface); }
  .event.break .event-tag { color: var(--text-dim); }
  .event.off { border-left-color: var(--c-off); }

  /* Card rhythm: time/duration row → title → type · opponent. data-meta decides whether
     the metadata stacks, shares one line, or is dropped on short cards. */
  .event-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; flex-shrink: 0; }
  .event-time { font-size: 10px; line-height: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; letter-spacing: 0.02em; font-weight: 600; white-space: nowrap; }
  .event-body { min-width: 0; }
  .event-dur-badge {
    font-size: 9px; line-height: 12px; color: var(--text-dim); font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 0 5px; border-radius: 8px; font-variant-numeric: tabular-nums; flex-shrink: 0;
  }
  .event-title {
    font-size: 12px; font-weight: 600; color: var(--text); line-height: 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; letter-spacing: -0.005em; overflow-wrap: anywhere;
  }
  .event-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; min-width: 0; }
  .event-tag, .event-opponent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .event-tag { font-size: 9px; line-height: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
  .event-opponent { font-size: 10.5px; line-height: 14px; color: var(--text-dim); }
  .event[data-meta="none"] .event-meta { display: none; }
  .event[data-meta="inline"] .event-meta { margin-top: 3px; }
  /* One metadata line: the opponent replaces the type label (the accent already encodes type). */
  .event[data-meta="inline"] .event-tag:has(+ .event-opponent) { display: none; }
  .event[data-meta="inline"] .event-opponent { font-size: 10px; line-height: 12px; }
  .event-assigned { display: flex; gap: 2px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
  .avatar {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-dim); font-size: 8px; font-weight: 600;
    display: grid; place-items: center; text-transform: uppercase; border: 1px solid var(--line);
  }
  .avatar.more { font-size: 7.5px; }

  /* Density affects only the interior; top/height remain owned by the timeline. */
  .event[data-title-lines="1"] .event-title { -webkit-line-clamp: 1; }
  .event[data-title-lines="4"] .event-title { -webkit-line-clamp: 4; }

  .event[data-density="compact"] { padding-top: 5px; padding-bottom: 5px; }
  .event[data-density="compact"] .event-top { margin-bottom: 3px; }
  .event[data-density="compact"] .event-time { line-height: 12px; }
  .event[data-density="compact"] .event-dur-badge { padding: 0 4px; line-height: 10px; }
  .event[data-density="compact"] .event-body { display: flex; flex-direction: column; }
  .event[data-density="compact"] .event-title { font-size: 11.5px; line-height: 14px; }
  .event[data-density="compact"] .event-tag { line-height: 10px; }
  .event[data-density="compact"] .event-assigned { display: none; }

  .event[data-density="expanded"] { display: flex; flex-direction: column; }
  .event[data-density="expanded"] .event-body {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    justify-content: center; padding-bottom: 20px;
  }
  .event[data-density="expanded"] .event-title { line-height: 1.4; flex-shrink: 0; }
  .event[data-density="expanded"] .event-tag { align-self: flex-start; }

  /* Below 45px, prioritize readable time and a single ellipsized title. */
  .event[data-density="minimal"] {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline; align-content: center; column-gap: 6px;
    padding-top: 3px; padding-bottom: 3px;
  }
  /* Share the text baseline across the existing metadata/body wrappers. */
  .event[data-density="minimal"] .event-top,
  .event[data-density="minimal"] .event-body { display: contents; }
  .event[data-density="minimal"] .event-time { grid-area: 1 / 1; line-height: 12px; }
  .event[data-density="minimal"] .event-title {
    grid-area: 1 / 2; min-width: 0; display: block;
    font-size: 11.5px; line-height: 13px; white-space: nowrap; text-overflow: ellipsis;
  }
  .event[data-density="minimal"] .event-dur-badge {
    grid-area: 1 / 3; align-self: center; padding: 0 4px; line-height: 10px;
  }
  .event[data-density="minimal"] .event-tag,
  .event[data-density="minimal"] .event-assigned { display: none; }

  .event-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; background: transparent; }
  .event-resize:hover { background: rgba(110,168,254,0.3); }

  .now-line {
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--c-turnuva), var(--c-turnuva) 70%, transparent);
    z-index: 8; pointer-events: none;
  }
  .now-line::before {
    content: ''; position: absolute; left: -3px; top: -3px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--c-turnuva);
    animation: pulseLine 2s infinite;
  }
  .now-label {
    position: absolute; left: 4px; top: -8px;
    font-size: 9px; color: var(--c-turnuva); font-weight: 700;
    background: var(--bg-elev); padding: 1px 4px; border-radius: 3px;
    letter-spacing: 0.03em; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
  }

  /* GHOST PREVIEW */
  .paste-ghost {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 999;
    border-radius: 0;
    padding: 7px 9px 7px 11px;
    color: var(--text);
    border: 1px dashed rgba(110,168,254,0.55);
    border-left: 4px solid var(--c-esea);
    background: rgba(110,168,254,0.12);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0.85;
    backdrop-filter: blur(2px);
    transition: top 60ms linear, height 60ms linear;
  }
  .paste-ghost .ghost-time {
    font-size: 10px; color: var(--c-esea); font-variant-numeric: tabular-nums;
    font-family: ui-monospace, monospace; font-weight: 700;
    margin-bottom: 3px;
  }
  .paste-ghost .ghost-title {
    font-size: 12px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
  }
  .paste-ghost .ghost-meta {
    font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 0.08em; font-weight: 700; margin-top: 4px;
  }
  .paste-ghost .ghost-conflict {
    font-size: 10px; color: var(--c-turnuva); font-weight: 700;
    margin-top: 4px; display: flex; align-items: center; gap: 4px;
  }
  .paste-ghost .ghost-conflict svg { width: 10px; height: 10px; }

  .col.paste-target .col-head {
    background: rgba(110,168,254,0.08) !important;
    box-shadow: inset 0 -2px 0 var(--c-esea);
  }
  .col.paste-target .col-body {
    background-color: rgba(110,168,254,0.03);
  }

  .empty-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 20; }
  .empty-card {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 12px; padding: 28px 32px; text-align: center;
    max-width: 340px; pointer-events: auto;
    box-shadow: var(--shadow-modal); animation: slideUp 300ms var(--ease);
  }
  .empty-icon { width: 44px; height: 44px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); }
  .empty-icon svg { width: 20px; height: 20px; }
  .empty-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.01em; }
  .empty-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-bottom: 18px; }
  .empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .empty-tag {
    display: inline-block; font-size: 10.5px; color: var(--text-mute);
    padding: 2px 8px; border-radius: 4px; background: var(--surface);
    border: 1px solid var(--line-soft); margin: 0 3px;
    font-family: ui-monospace, monospace; font-weight: 600;
  }
  .stats-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; animation: slideUp 300ms var(--ease); }
  .stats-empty .empty-icon { width: 52px; height: 52px; margin-bottom: 18px; }
  .stats-empty .empty-icon svg { width: 24px; height: 24px; }
  .stats-empty .empty-title { font-size: 16px; margin-bottom: 8px; }
  .stats-empty .empty-desc { font-size: 13px; max-width: 400px; line-height: 1.6; }

  /* MODAL */
  .overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px); display: none; align-items: center;
    justify-content: center; z-index: 100; padding: 20px;
  }
  .overlay.open { display: flex; animation: fadeIn 140ms var(--ease); }
  .modal {
    background: var(--bg-elev); border: 1px solid var(--line);
    border-radius: 10px; width: 100%; max-width: 460px;
    box-shadow: var(--shadow-modal); overflow: hidden;
    display: flex; flex-direction: column; max-height: 90vh;
    animation: pop 180ms var(--ease); color: var(--text);
  }
  .modal.wide { max-width: 640px; }
  .modal.xl { max-width: 760px; }
  .modal-head { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .modal-head h3 { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
  .modal-head .close { background: transparent; border: none; color: var(--text-mute); cursor: pointer; padding: 4px; border-radius: 4px; line-height: 0; transition: background 120ms, color 120ms; }
  .modal-head .close:hover { color: var(--text); background: var(--surface); }
  .modal-head .close svg { width: 14px; height: 14px; }
  :is(#overlay, #playersOverlay, #usersOverlay) :focus-visible,
  .event[tabindex="-1"]:focus-visible { outline: 2px solid var(--c-esea); outline-offset: 2px; }
  #overlay .type-opt input:focus-visible { outline: none; } /* RC-02 transfers radio focus to the visible label. */
  .modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 11px; color: var(--text-dim); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
  .field input, .field textarea, .field select {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 6px; color: var(--text); font-family: inherit;
    font-size: 13px; padding: 8px 10px; outline: none;
    transition: border-color 140ms, background 140ms, box-shadow 140ms; width: 100%;
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--text-mute); opacity: 0.7; }
  .field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--text-mute); background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(110,168,254,0.08);
  }
  .field textarea { resize: vertical; min-height: 60px; font-size: 13px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .opponent-field[hidden], .opponent-list[hidden], .opponent-hint[hidden] { display: none; }
  .opponent-list {
    max-height: 164px; overflow-y: auto; border: 1px solid var(--line);
    border-radius: 6px; background: var(--bg-elev); padding: 3px;
  }
  .opponent-option {
    display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 4px;
    background: transparent; color: var(--text); font: inherit; font-size: 12px;
    text-align: left; cursor: pointer;
  }
  .opponent-option:hover, .opponent-option[aria-selected="true"] { background: var(--surface-2); }
  .opponent-option.create { color: var(--c-esea); }
  .opponent-hint { color: var(--text-dim); font-size: 11px; }
  .opponent-hint.error { color: var(--c-turnuva); }
  .field .type-opt {
    position: relative; letter-spacing: normal; text-transform: none;
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); font-size: 12px; color: var(--text-dim);
    cursor: pointer; transition: all 140ms; font-weight: 500;
  }
  .type-opt input[type="radio"] {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .type-opt:hover { border-color: var(--text-mute); color: var(--text); }
  .type-opt.selected {
    border-color: var(--text-mute); background: var(--surface-2); color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  .modal-foot { padding: 14px 18px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 8px; flex-shrink: 0; }
  .btn {
    padding: 8px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 500;
    cursor: pointer; font-family: inherit; border: 1px solid var(--line);
    background: var(--surface); color: var(--text);
    transition: all 140ms var(--ease); display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--text-mute); }
  .btn:active { transform: scale(0.97); }
  .btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
  .btn.primary:hover { background: var(--text); }
  .btn.danger { color: var(--c-turnuva); }
  .btn.danger:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn.small { padding: 5px 10px; font-size: 11.5px; }

  .tags-wrap {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
    min-height: 38px; align-items: center;
    transition: border-color 140ms, background 140ms, box-shadow 140ms;
  }
  .tags-wrap:focus-within { border-color: var(--text-mute); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(110,168,254,0.08); }
  .tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 4px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 20px;
    font-size: 11.5px; color: var(--text);
  }
  .tag .av { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 8px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; }
  .tag .x { cursor: pointer; color: var(--text-mute); font-size: 13px; line-height: 1; padding: 0 2px; }
  .tag .x:hover { color: var(--c-turnuva); }
  .tags-input {
    flex: 1; min-width: 100px; background: transparent !important; border: none !important;
    padding: 4px !important; font-size: 12px !important; color: var(--text) !important;
    outline: none; box-shadow: none !important;
  }
  .tags-input::placeholder { color: var(--text-mute) !important; }



  .preview-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
  .preview-tab {
    padding: 8px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-mute);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all 140ms;
  }
  .preview-tab:hover { color: var(--text-dim); }
  .preview-tab.active { color: var(--text); border-bottom-color: var(--text); }
  .preview-frame { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; max-height: 420px; overflow: auto; }
  .preview-frame iframe { width: 100%; height: 420px; border: 0; background: #0b0b0d; }
  .preview-pre { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-dim); padding: 16px; white-space: pre-wrap; line-height: 1.6; margin: 0; }
  .discord-preview { background: #313338; border-radius: 8px; padding: 16px; font-family: "gg sans", -apple-system, "Segoe UI", sans-serif; }
  .dc-msg { display: flex; gap: 14px; }
  .dc-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #6ea8fe, #c084fc); display: grid; place-items: center; font-size: 16px; }
  .dc-body { flex: 1; min-width: 0; }
  .dc-name { font-size: 15px; font-weight: 500; color: #f2f3f5; margin-bottom: 4px; }
  .dc-name .bot-tag { background: #5865f2; color: white; font-size: 10px; padding: 1px 4px; border-radius: 3px; margin-left: 6px; font-weight: 500; vertical-align: middle; text-transform: uppercase; }
  .dc-embed { background: #2b2d31; border-left: 4px solid #6ea8fe; border-radius: 4px; padding: 14px 16px; margin-top: 4px; }
  .dc-embed-title { font-size: 15px; font-weight: 600; color: #f2f3f5; margin-bottom: 8px; }
  .dc-embed-desc { font-size: 14px; color: #dbdee1; line-height: 1.45; white-space: pre-wrap; margin-bottom: 12px; }
  .dc-field { padding: 8px 0; border-bottom: 1px solid #1e1f22; }
  .dc-field:last-child { border-bottom: none; }
  .dc-field-name { font-size: 13px; font-weight: 600; color: #f2f3f5; margin-bottom: 4px; }
  .dc-field-value { font-size: 13px; color: #dbdee1; line-height: 1.5; white-space: pre-wrap; font-family: ui-monospace, monospace; }

  .stats-page { flex: 1; overflow-y: auto; padding: 24px 24px var(--shell-inset); }
  .range-btn {
    padding: 6px 12px; border: 1px solid var(--line); background: var(--surface);
    color: var(--text-dim); border-radius: 6px; font-size: 12px; cursor: pointer;
    font-family: inherit; transition: all 140ms;
  }
  .range-btn:hover { color: var(--text); border-color: var(--text-mute); }
  .range-btn.active { background: var(--surface-2); color: var(--text); border-color: var(--text-mute); font-weight: 600; }

  .heatmap-wrap {
    /* Density: neutral sequential ramp; a type filter tints the same steps with that type's color. */
    --heat-0: var(--surface); --heat-1: #26262c; --heat-2: #3d3d45;
    --heat-3: #62626c; --heat-4: #9d9da6; --heat-5: #e4e4e7;
  }
  html[data-theme="light"] .heatmap-wrap {
    --heat-1: #dcdce1; --heat-2: #b9b9c1; --heat-3: #8a8a94;
    --heat-4: #5a5a63; --heat-5: #18181b;
  }
  :root .heatmap-wrap[data-tint] {
    --heat-1: color-mix(in srgb, var(--heat-tint) 16%, var(--surface));
    --heat-2: color-mix(in srgb, var(--heat-tint) 34%, var(--surface));
    --heat-3: color-mix(in srgb, var(--heat-tint) 55%, var(--surface));
    --heat-4: color-mix(in srgb, var(--heat-tint) 78%, var(--surface));
    --heat-5: var(--heat-tint);
  }
  .heatmap-wrap[data-tint="esea"] { --heat-tint: var(--c-esea); }
  .heatmap-wrap[data-tint="turnuva"] { --heat-tint: var(--c-turnuva); }
  .heatmap-wrap[data-tint="scrim"] { --heat-tint: var(--c-scrim); }
  .heatmap-wrap[data-tint="dry"] { --heat-tint: var(--c-dry); }
  .heatmap-wrap[data-tint="review"] { --heat-tint: var(--c-review); }
  .heatmap-wrap[data-tint="analiz"] { --heat-tint: var(--c-analiz); }
  .heatmap-wrap[data-tint="teori"] { --heat-tint: var(--c-teori); }
  .heatmap-wrap[data-tint="off"] { --heat-tint: var(--c-off); }
  .heatmap-grid {
    display: grid; grid-template-columns: 38px repeat(7, minmax(0, 1fr)) 76px;
    gap: 3px; font-size: 10px;
  }
  .heatmap-corner, .heatmap-total-head, .heatmap-foot-label {
    font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.08em; font-weight: 650;
    align-self: end; padding-bottom: 5px;
  }
  .heatmap-total-head { padding-left: 8px; }
  .heatmap-foot-label { align-self: start; padding: 7px 0 0; }
  .heatmap-day {
    font-size: 11px; color: var(--text-dim); text-align: center; padding: 0 0 5px; font-weight: 600;
    letter-spacing: 0.02em; border-bottom: 1px solid transparent;
  }
  .heatmap-day[data-peak] { color: var(--text); border-bottom-color: var(--text-mute); }
  .heatmap-hour {
    font-size: 10px; color: var(--text-mute); text-align: right; padding-right: 8px;
    font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace; align-self: center; line-height: 1;
  }
  .heatmap-hour[data-peak] { color: var(--text); font-weight: 600; }
  .heatmap-cell { min-height: 18px; border-radius: 3px; background: var(--surface); cursor: default; position: relative; }
  .heatmap-cell:hover { z-index: 2; box-shadow: 0 0 0 1.5px var(--text), 0 0 0 3px var(--bg-elev); }
  .heatmap-cell[data-level="0"], .heatmap-key-0 { background: var(--heat-0); }
  .heatmap-cell[data-level="1"], .heatmap-key-1 { background: var(--heat-1); }
  .heatmap-cell[data-level="2"], .heatmap-key-2 { background: var(--heat-2); }
  .heatmap-cell[data-level="3"], .heatmap-key-3 { background: var(--heat-3); }
  .heatmap-cell[data-level="4"], .heatmap-key-4 { background: var(--heat-4); }
  .heatmap-cell[data-level="5"], .heatmap-key-5 { background: var(--heat-5); }
  .heatmap-row-total { display: flex; align-items: center; gap: 7px; padding-left: 8px; min-width: 0; }
  .heatmap-track, .density-type-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
  .heatmap-track i, .density-type-bar i { display: block; height: 100%; border-radius: 2px; background: var(--text-mute); }
  .heatmap-row-total .heatmap-track { flex: none; width: 36px; }
  .heatmap-row-total b, .heatmap-col-total b {
    color: var(--text-dim); font: 500 10.5px/1 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;
  }
  .heatmap-col-total { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
  .heatmap-col-total .heatmap-track { width: min(64%, 72px); }
  .heatmap-foot-label, .heatmap-foot-end { border-top: 1px solid var(--line-soft); }
  .heatmap-legend { display: flex; align-items: center; gap: 4px; flex: none; font-size: 10.5px; color: var(--text-mute); }
  .heatmap-legend span:first-child { margin-right: 3px; }
  .heatmap-legend span:last-child { margin-left: 3px; }
  .heatmap-legend .cell { display: block; width: 14px; height: 10px; border-radius: 2px; }

  /* BULK BAR */
  .bulk-bar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px; z-index: 90;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
    height: 44px;
    white-space: nowrap;
  }
  .bulk-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
  .bulk-bar .count { font-size: 12px; color: var(--text-dim); padding: 0 8px; }

  /* INLINE CONFIRM */
  .inline-confirm {
    position: fixed;
    background: var(--bg-elev);
    border: 1px solid rgba(248,113,113,0.45);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 20px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(248,113,113,0.15);
    white-space: nowrap;
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms var(--ease);
  }
  .inline-confirm.ready { opacity: 1; pointer-events: auto; }
  .inline-confirm .ic-text { font-size: 12.5px; color: var(--text); font-weight: 500; }
  .inline-confirm .ic-actions { display: flex; gap: 6px; }
  .inline-confirm .ic-yes {
    background: #ef4444; color: #fff; border: none;
    padding: 6px 12px; border-radius: 6px; font-size: 12px;
    font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 120ms;
  }
  .inline-confirm .ic-yes:hover { background: #dc2626; }
  .inline-confirm .ic-no {
    background: var(--surface); color: var(--text-dim); border: 1px solid var(--line);
    padding: 6px 12px; border-radius: 6px; font-size: 12px;
    font-weight: 500; cursor: pointer; font-family: inherit;
    transition: background 120ms;
  }
  .inline-confirm .ic-no:hover { background: var(--surface-2); color: var(--text); }
  .inline-confirm .ic-arrow {
    position: absolute;
    bottom: -7px;
    width: 12px; height: 12px;
    background: var(--bg-elev);
    border-right: 1px solid rgba(248,113,113,0.45);
    border-bottom: 1px solid rgba(248,113,113,0.45);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* TOAST */
  .toast-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
  }
  .toast {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 12px 16px 12px 14px;
    font-size: 12.5px;
    font-weight: 500;
    min-width: 260px;
    max-width: 340px;
    box-shadow:
      0 12px 32px -8px rgba(0,0,0,0.55),
      0 4px 12px -4px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.03);
    animation: toastIn 240ms var(--ease);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
  }
  .toast.ok::before { background: var(--c-teori); }
  .toast.err::before { background: var(--c-turnuva); }
  .toast.info::before { background: var(--c-esea); }
  .toast.warn::before { background: var(--c-review); }

  .toast .toast-icon {
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
  }
  .toast.ok .toast-icon { background: rgba(110,231,183,0.15); color: var(--c-teori); }
  .toast.err .toast-icon { background: rgba(248,113,113,0.15); color: var(--c-turnuva); }
  .toast.info .toast-icon { background: rgba(110,168,254,0.15); color: var(--c-esea); }
  .toast.warn .toast-icon { background: rgba(251,191,36,0.15); color: var(--c-review); }

  .toast .toast-text {
    flex: 1;
    line-height: 1.4;
    color: var(--text);
    font-size: 12.5px;
    word-break: break-word;
  }

  .toast .toast-action {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 140ms var(--ease);
    margin-left: 4px;
  }
  .toast .toast-action:hover {
    background: var(--surface);
    border-color: var(--text-mute);
  }
  .toast.ok .toast-action { color: var(--c-teori); border-color: rgba(110,231,183,0.3); }
  .toast.ok .toast-action:hover { background: rgba(110,231,183,0.1); border-color: var(--c-teori); }
  .toast.info .toast-action { color: var(--c-esea); border-color: rgba(110,168,254,0.3); }
  .toast.info .toast-action:hover { background: rgba(110,168,254,0.1); border-color: var(--c-esea); }
  .toast.warn .toast-action { color: var(--c-review); border-color: rgba(251,191,36,0.3); }
  .toast.warn .toast-action:hover { background: rgba(251,191,36,0.1); border-color: var(--c-review); }
  .toast.err .toast-action { color: var(--c-turnuva); border-color: rgba(248,113,113,0.3); }
  .toast.err .toast-action:hover { background: rgba(248,113,113,0.1); border-color: var(--c-turnuva); }

  .toast .toast-close {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    background: transparent;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
    padding: 0;
    transition: background 120ms, color 120ms;
  }
  .toast .toast-close:hover {
    background: var(--surface);
    color: var(--text);
  }
  .toast .toast-close svg { width: 11px; height: 11px; }

  .toast .toast-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    animation: toastProgress linear forwards;
  }
  .toast.ok .toast-progress { background: var(--c-teori); }
  .toast.err .toast-progress { background: var(--c-turnuva); }
  .toast.info .toast-progress { background: var(--c-esea); }
  .toast.warn .toast-progress { background: var(--c-review); }

  .toast:hover .toast-progress { animation-play-state: paused; }
  .toast.sticky .toast-progress { display: none; }
  .toast.dismissing { animation: toastOut 220ms var(--ease) forwards; }
  .toast.stacked { transform: scale(0.96); opacity: 0.55; }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.94); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }
  @keyframes toastOut {
    to { opacity: 0; transform: translateX(24px) scale(0.94); }
  }
  @keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }

  html[data-theme="light"] .toast {
    box-shadow:
      0 12px 32px -8px rgba(0,0,0,0.12),
      0 4px 12px -4px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.6);
  }

  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
  .tab { padding: 10px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 140ms; }
  .tab:hover { color: var(--text-dim); }
  .tab.active { color: var(--text); border-bottom-color: var(--text); }

  .cmd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; z-index: 300; padding: 15vh 20px 20px; }
  .cmd-overlay.open { display: flex; animation: fadeIn 120ms var(--ease); }
  .cmd-box { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 560px; box-shadow: var(--shadow-modal); overflow: hidden; animation: cmdPop 180ms var(--ease); }
  .cmd-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
  .cmd-input-wrap svg { width: 15px; height: 15px; color: var(--text-mute); flex-shrink: 0; }
  .cmd-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 15px; padding: 2px 0; }
  .cmd-input::placeholder { color: var(--text-mute); }
  .cmd-kbd { font-size: 10px; color: var(--text-mute); padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 600; }
  .cmd-list { max-height: 400px; overflow-y: auto; padding: 6px; }
  .cmd-group-label { font-size: 10.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 10px 12px 4px; }
  .cmd-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; cursor: pointer; color: var(--text-dim); font-size: 13.5px; transition: background 80ms, color 80ms; }
  .cmd-item:hover, .cmd-item.active { background: var(--surface); color: var(--text); }
  .cmd-item .cmd-icon { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-mute); }
  .cmd-item .cmd-icon svg { width: 13px; height: 13px; }
  .cmd-item.active .cmd-icon, .cmd-item:hover .cmd-icon { color: var(--text); }
  .cmd-item .cmd-label { flex: 1; }
  .cmd-item .cmd-hint { font-size: 10.5px; color: var(--text-mute); font-family: ui-monospace, monospace; }
  .cmd-empty { padding: 30px 20px; text-align: center; color: var(--text-mute); font-size: 13px; }

  .shortcuts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 250; padding: 20px; }
  .shortcuts-overlay.open { display: flex; animation: fadeIn 140ms var(--ease); }
  .shortcuts-box { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 720px; box-shadow: var(--shadow-modal); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; animation: pop 180ms var(--ease); }
  .shortcuts-head { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
  .shortcuts-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .shortcuts-body { padding: 20px 24px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .shortcut-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 600; margin-bottom: 12px; }
  .shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); }
  .shortcut-row:last-child { border-bottom: none; }
  .shortcut-keys { display: flex; gap: 4px; }
  .kbd { font-family: ui-monospace, monospace; font-size: 10.5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text-dim); font-weight: 600; min-width: 20px; text-align: center; }

  /* Settings: grouped action rows in the shell's list language; scrolls only when the viewport is short. */
  .settings-modal { max-width: 480px; }
  .settings-modal-head { padding: 16px 20px; }
  .settings-modal-head h3 { font-size: 15px; font-weight: 650; }
  .settings-modal-body {
    gap: 18px; padding: 16px 20px 20px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain;
  }
  .settings-group-title { margin: 0 0 8px; padding: 0 2px; color: var(--text-mute); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
  .settings-list { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); overflow: hidden; }
  .settings-row {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; min-height: 54px; padding: 10px 12px; border: 0; background: transparent;
    color: var(--text); font: inherit; text-align: left; cursor: pointer;
    transition: background 120ms var(--ease);
  }
  .settings-row + .settings-row { border-top: 1px solid var(--line-soft); }
  button.settings-row:hover { background: var(--surface-2); }
  .settings-row:focus-visible, .settings-segment-btn:focus-visible { outline: 2px solid var(--c-esea); outline-offset: -2px; }
  .settings-row-static { cursor: default; }
  .settings-row-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--bg-elev); color: var(--text-dim); }
  .settings-row-icon svg { width: 15px; height: 15px; }
  .settings-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .settings-row-title { font-size: 13px; font-weight: 550; letter-spacing: -0.005em; }
  .settings-row-desc { color: var(--text-mute); font-size: 11.5px; line-height: 1.4; }
  .settings-row-trail { display: grid; place-items: center; color: var(--text-mute); }
  .settings-row-trail svg { width: 15px; height: 15px; }
  button.settings-row:hover .settings-row-trail, button.settings-row:hover .settings-row-icon { color: var(--text); }
  .settings-row-kbd { min-width: 22px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-elev); color: var(--text-dim); font: 600 10.5px/1.3 ui-monospace, monospace; text-align: center; }
  .settings-row.danger .settings-row-title, .settings-row.danger .settings-row-icon { color: var(--c-turnuva); }
  .settings-row.danger .settings-row-icon { border-color: color-mix(in srgb, var(--c-turnuva) 30%, var(--line-soft)); background: color-mix(in srgb, var(--c-turnuva) 8%, var(--bg-elev)); }
  button.settings-row.danger:hover { background: color-mix(in srgb, var(--c-turnuva) 6%, var(--surface)); }
  .settings-segment { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-elev); }
  .settings-segment-btn { min-height: 26px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; }
  .settings-segment-btn:hover { color: var(--text); }
  .settings-segment-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }

  /* Keep the optional countdown from displacing desktop actions at tablet widths. */
  @media (min-width: 901px) and (max-width: 1400px) {
    .topbar { flex-shrink: 0; flex-wrap: wrap; }
    .topbar-right { display: grid; grid-template-columns: auto auto auto; }
    .topbar .countdown { grid-row: 2; grid-column: 1 / -1; min-width: 0; }
    .topbar .countdown .event-name { flex: 1; min-width: 0; }
  }

  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .sidebar.calendar-drawer-open {
      display: flex; position: fixed; inset: 0 auto 0 0; z-index: 99;
      width: min(280px, calc(100vw - 48px)); height: 100dvh;
    }
    .calendar-tools-trigger {
      display: inline-flex; position: fixed; left: 12px; bottom: 12px; z-index: 40;
      padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px;
      background: var(--bg-elev); color: var(--text); font-size: 11px; font-weight: 600; line-height: 16px;
      font-family: inherit; cursor: pointer;
    }
    body:has(.bulk-bar.show, .clipboard-bar.show) .calendar-tools-trigger { bottom: 104px; }
    .calendar-tools-backdrop { display: block; position: fixed; inset: 0; z-index: 98; border: 0; background: rgba(0,0,0,.35); }
    .sidebar-close { display: grid; place-items: center; position: absolute; top: 8px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 4px; color: var(--text-dim); background: transparent; font-size: 20px; cursor: pointer; }
    .topbar {
      display: grid; grid-template-columns: 36px auto minmax(0, 1fr) auto;
      gap: 8px; padding: 12px; flex-shrink: 0;
    }
    .topbar .week-nav {
      grid-column: 1 / -1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px;
    }
    .topbar .week-title { min-width: 0; padding: 0 4px; }
    .topbar .icon-btn { width: 36px; height: 36px; }
    .topbar-right { display: contents; }
    .topbar .theme-control { grid-row: 2; grid-column: 2; min-height: 36px; }
    .topbar .today-chip {
      grid-row: 2; grid-column: 3; min-width: 0; min-height: 36px;
      flex-direction: column; justify-content: center; gap: 0; padding: 3px 6px;
      line-height: 1.25; text-align: center;
    }
    .topbar [data-action="goToday"] { grid-row: 2; grid-column: 4; min-height: 36px; }
    .topbar .countdown { grid-row: 3; grid-column: 1 / -1; min-width: 0; }
    .topbar .countdown .event-name { flex: 1; min-width: 0; max-width: none; }
    .topbar .countdown .label, .topbar .countdown .value { flex-shrink: 0; }
    .topbar .search-wrap { grid-row: 2; grid-column: 1; width: 36px; max-width: none; }
    .topbar .search-input { height: 36px; }
    .topbar .search-wrap.has-value .search-input { padding-right: 80px; }
    .topbar .search-wrap:not(:focus-within):not(.has-value) .search-input { padding-right: 0; }
    .topbar .search-wrap:not(:focus-within):not(.has-value) .search-input::placeholder { color: transparent; }
    /* Expand the same input for editing; query and clear state remain canonical. */
    .topbar:has(.search-wrap:focus-within, .search-wrap.has-value) { grid-template-columns: auto minmax(0, 1fr) auto; }
    .topbar .search-wrap:is(:focus-within, .has-value) { grid-row: 3; grid-column: 1 / -1; width: auto; }
    .topbar:has(.search-wrap:focus-within, .search-wrap.has-value) .theme-control { grid-column: 1; }
    .topbar:has(.search-wrap:focus-within, .search-wrap.has-value) .today-chip { grid-column: 2; }
    .topbar:has(.search-wrap:focus-within, .search-wrap.has-value) [data-action="goToday"] { grid-column: 3; }
    .topbar:has(.search-wrap:focus-within, .search-wrap.has-value) .countdown { grid-row: 4; }
    .topbar button:focus-visible { outline: 2px solid var(--c-esea); outline-offset: 2px; }
    .shortcuts-body { grid-template-columns: 1fr; }
  }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

  /* ============================================================
     PREMIUM POLISH — notifications, clipboard, filters, ticker,
     send modal, recipients, Discord preview
     ============================================================ */
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 18px)); }
  }

  .ticker-bar { height: 36px; }
  .ticker-content {
    width: max-content;
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 36px;
    padding-left: 28px;
    animation: tickerScroll 72s linear infinite;
  }
  .ticker-sequence { display: flex; align-items: center; gap: 36px; flex: 0 0 auto; }
  .ticker-item {
    height: 35px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1;
  }
  .ticker-item .t-dot { width: 6px; height: 6px; flex: 0 0 auto; }
  .ticker-item .t-time {
    min-width: 70px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: -0.015em;
  }
  .ticker-item .t-title {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
  }
  .ticker-item .t-type {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.055em;
  }
  .ticker-item .t-countdown {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    line-height: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker-content { animation: none !important; }
  }

  .bulk-bar {
    bottom: 22px;
    height: 46px;
    padding: 7px 9px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.025);
  }
  .bulk-bar .count { margin-right: 2px; }

  .clipboard-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 96;
    min-width: 390px;
    max-width: min(560px, calc(100vw - 32px));
    min-height: 52px;
    padding: 8px 10px 8px 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 48px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.025);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px) scale(0.98);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  }
  .clipboard-bar.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
  .clipboard-bar-icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(110,168,254,0.28);
    border-radius: 9px;
    background: rgba(110,168,254,0.09);
    color: var(--c-esea);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }
  .clipboard-bar-icon svg { width: 15px; height: 15px; }
  .clipboard-bar-copy .clipboard-bar-icon { color: var(--c-esea); }
  .clipboard-bar-cut .clipboard-bar-icon { color: var(--c-review); border-color: rgba(251,191,36,0.28); background: rgba(251,191,36,0.08); }
  .clipboard-bar-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .clipboard-bar-title { color: var(--text); font-size: 12.5px; font-weight: 650; line-height: 1.35; }
  .clipboard-bar-hint { color: var(--text-mute); font-size: 11px; line-height: 1.35; }
  .clipboard-bar-cancel {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-dim);
    font: 600 11.5px/1 inherit;
    cursor: pointer;
  }
  .clipboard-bar-cancel:hover { color: var(--text); border-color: var(--text-mute); background: var(--surface-2); }

  .toast-wrap { right: 22px; bottom: 22px; gap: 8px; max-width: 370px; }
  .toast {
    min-width: 280px;
    max-width: 360px;
    min-height: 50px;
    padding: 9px 10px;
    gap: 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 46px -20px rgba(0,0,0,0.68), 0 0 0 1px rgba(255,255,255,0.02);
  }
  .toast::before { display: none; }
  .toast .toast-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: 12px;
  }
  .toast.ok .toast-icon { background: rgba(110,231,183,0.07); border-color: rgba(110,231,183,0.24); }
  .toast.err .toast-icon { background: rgba(248,113,113,0.07); border-color: rgba(248,113,113,0.24); }
  .toast.info .toast-icon { background: rgba(110,168,254,0.07); border-color: rgba(110,168,254,0.24); }
  .toast.warn .toast-icon { background: rgba(251,191,36,0.07); border-color: rgba(251,191,36,0.24); }
  .toast .toast-text { font-size: 12px; line-height: 1.45; font-weight: 540; }
  .toast .toast-action { height: 28px; padding: 0 9px; margin-left: 0; border-radius: 7px; }
  .toast .toast-close { width: 24px; height: 24px; border-radius: 7px; }
  .toast .toast-progress { height: 1px; opacity: 0.48; }
  .toast.stacked { transform: none; opacity: 1; }


  @media (max-width: 760px) {
    .clipboard-bar { min-width: 0; width: calc(100vw - 28px); }
  }


  .send-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin 0.75s linear infinite;
  }
  .send-result-card {
    overflow: hidden;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fff;
  }
  html.dark .send-result-card { border-color: #3f3f46; background: rgba(9,9,11,0.5); }
  .send-result-head {
    min-height: 38px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 8px auto 1fr;
    align-items: center;
    gap: 8px;
    color: #71717a;
    font-size: 10.5px;
  }
  .send-result-head strong { color: #27272a; font-size: 11.5px; }
  .send-result-head > span:last-child { justify-self: end; text-align: right; }
  html.dark .send-result-head strong { color: #e4e4e7; }
  .send-result-dot { width: 7px; height: 7px; border-radius: 999px; background: #10b981; }
  .send-result-card.err .send-result-dot { background: #f43f5e; }
  .send-result-details { border-top: 1px solid #f4f4f5; padding: 3px 10px 5px; }
  html.dark .send-result-details { border-color: #27272a; }
  .send-result-detail {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #71717a;
    font: 500 10.5px/1.35 ui-monospace, monospace;
  }
  .send-result-detail > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .send-result-detail strong { flex: 0 0 auto; font-family: inherit; font-size: 10px; }
  .send-result-detail strong.ok { color: #059669; }
  .send-result-detail strong.err { color: #e11d48; }
  html.dark .send-result-detail strong.ok { color: #6ee7b7; }
  html.dark .send-result-detail strong.err { color: #fda4af; }



  .toast-wrap { bottom: 20px; right: 20px; }
  .toast {
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
    box-shadow: 0 20px 52px -24px rgba(0,0,0,0.72), 0 8px 20px -16px rgba(0,0,0,0.5);
  }
  .toast .toast-progress { opacity: 0.35; }

  @media (max-width: 640px) {
    .send-result-head { grid-template-columns: 8px auto; }
    .send-result-head > span:last-child { grid-column: 2; justify-self: start; }
    .toast-wrap { right: 12px; left: 12px; bottom: 12px; max-width: none; }
    .toast { min-width: 0; max-width: none; width: 100%; }
  }

  /* Discord webhook message mock (send composer preview) */
  .discord-output-preview,
  html.dark .discord-output-preview {
    padding: 16px;
    border: 1px solid #232428;
    border-radius: 12px;
    background: #313338;
    color: #dbdee1;
    box-shadow: 0 16px 38px -30px rgba(0,0,0,0.85);
  }
  .discord-message-shell {
    max-width: none;
    display: grid;
    grid-template-columns: 40px minmax(0,1fr);
    align-items: start;
    gap: 12px;
  }
  .discord-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #5865f2 0%, #7c3aed 55%, #c026d3 100%);
    border: 2px solid #1e1f22;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 5px 14px rgba(0,0,0,0.22);
    font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .discord-message-body { min-width: 0; }
  .discord-message-head { margin: 1px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .discord-message-name { color: #f2f3f5; font-size: 13px; font-weight: 650; }
  .discord-bot-badge,
  html.dark .discord-bot-badge {
    height: 15px;
    padding: 0 4px;
    border-radius: 3px;
    background: #5865f2;
    color: #fff;
    font-size: 8px;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .discord-message-time { color: #949ba4; font-size: 10.5px; font-weight: 500; }
  .discord-message-content { margin: 0 0 7px; color: #dbdee1; font-size: 11.5px; line-height: 1.48; }
  .discord-embeds { display: flex; flex-direction: column; gap: 8px; }
  .discord-embed,
  html.dark .discord-embed {
    width: min(100%, 720px);
    max-width: none;
    padding: 13px 14px;
    border: 0;
    border-left: 4px solid #5865f2;
    border-radius: 5px;
    background: #2b2d31;
    box-shadow: 0 8px 22px rgba(0,0,0,0.13);
  }
  .discord-embed-meta {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .discord-embed-author {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #949ba4;
    font: 700 9.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .discord-embed-date {
    flex: 0 0 auto;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 4px;
    background: #1e1f22;
    color: #949ba4;
    font: 600 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .discord-embed-title,
  html.dark .discord-embed-title {
    color: #f2f3f5;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
  }
  .discord-embed-description,
  .discord-field-value,
  html.dark .discord-embed-description,
  html.dark .discord-field-value {
    color: #dbdee1;
    font-size: 11.5px;
    line-height: 1.45;
  }
  .discord-embed-description { margin-top: 5px; }
  .discord-fields {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  .discord-field {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #383a40;
    border-radius: 6px;
    background: #232428;
  }
  .discord-field:not(.inline) { grid-column: 1 / -1; }
  .discord-field-name,
  html.dark .discord-field-name {
    margin-bottom: 4px;
    color: #a5b4fc;
    font: 700 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .discord-field-value { min-width: 0; overflow-wrap: anywhere; }
  .discord-embed-footer,
  html.dark .discord-embed-footer {
    margin-top: 11px;
    padding-top: 8px;
    border-top: 1px solid #383a40;
    color: #949ba4;
    font-size: 9.5px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .discord-footer-status { display: inline-flex; align-items: center; gap: 6px; }
  .discord-footer-status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #23a55a; }
  .discord-md-line { min-height: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .discord-md-strong { color: inherit; font-weight: 700; }
  .discord-md-line + .discord-md-line { margin-top: 2px; }
  .discord-md-quote { border-left: 2px solid #4e5058; padding-left: 8px; color: #b5bac1; }
  .discord-md-code,
  html.dark .discord-md-code {
    padding: 1px 4px;
    border-radius: 3px;
    background: #1e1f22;
    color: #dbdee1;
    font: 600 0.9em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .discord-md-em,
  html.dark .discord-md-em { color: #b5bac1; }
  .discord-field[data-type="TEORİ"] .discord-md-code { color: #6ee7b7; background: rgba(16,185,129,0.14); }
  .discord-field[data-type="REVIEW"] .discord-md-code { color: #fcd34d; background: rgba(245,158,11,0.14); }
  .discord-field[data-type="ESEA"] .discord-md-code { color: #93c5fd; background: rgba(59,130,246,0.15); }
  .discord-field[data-type="TURNUVA"] .discord-md-code { color: #fda4af; background: rgba(244,63,94,0.14); }
  .discord-field[data-type="ANALİZ"] .discord-md-code { color: #d8b4fe; background: rgba(168,85,247,0.14); }
  .discord-field[data-type="SCRIM"] .discord-md-code { color: #67e8f9; background: rgba(6,182,212,0.14); }

  @media (max-width: 700px) {
    .discord-fields { grid-template-columns: 1fr; }
    .discord-message-shell { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
    .discord-message-avatar { width: 34px; height: 34px; font-size: 11px; }
  }

  /* Weekly delivery composer: configuration left, canonical channel previews right. */
  #sendOverlay { padding: 24px; --send-error: #fda4af; --send-ok: #86efac; --wa-bg: #0b141a; --wa-bubble: #202c33; --wa-text: #e9edef; --wa-meta: #8696a0; }
  html[data-theme="light"] #sendOverlay { --send-error: #b42336; --send-ok: #15803d; --wa-bg: #efeae2; --wa-bubble: #ffffff; --wa-text: #111b21; --wa-meta: #667781; }
  #sendOverlay .hidden, #sendOverlay [hidden] { display: none !important; }
  #sendOverlay .send-composer { width: min(1320px, 100%); height: min(880px, calc(100dvh - 48px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-modal); font-family: inherit; }
  #sendOverlay button, #sendOverlay input, #sendOverlay textarea { font-family: inherit; font-size: 12px; }
  #sendOverlay button { cursor: pointer; }
  #sendOverlay button:disabled { cursor: not-allowed; opacity: .45; }
  #sendOverlay :focus-visible { outline: 2px solid var(--c-esea); outline-offset: 2px; }
  #sendOverlay .send-modal-header { flex: 0 0 auto; padding: 16px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
  #sendOverlay h2 { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
  #sendOverlay #sendHeaderMeta { margin-top: 3px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  #sendOverlay .send-close { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border: 0; border-radius: 6px; color: var(--text-dim); background: transparent; }
  #sendOverlay .send-close svg { width: 18px; height: 18px; }
  #sendOverlay .send-close:hover, #sendOverlay .send-cancel:hover { background: var(--surface); color: var(--text); }
  #sendOverlay .send-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0,1fr); }
  #sendOverlay .send-configuration { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #sendOverlay .send-section { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
  #sendOverlay .send-section:last-child { border-bottom: 0; }
  #sendOverlay h3 { margin: 0; font-size: 12px; font-weight: 650; line-height: 1.5; color: var(--text); }
  #sendOverlay .send-section > h3 { margin-bottom: 10px; }
  #sendOverlay .send-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  #sendOverlay .send-section-heading > span { color: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
  #sendOverlay .send-section-note { margin: -4px 0 10px; color: var(--text-mute); font-size: 11.5px; line-height: 1.5; }

  #sendOverlay .send-scope { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
  #sendOverlay .scope-btn { min-height: 32px; padding: 5px 3px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-dim); white-space: nowrap; font-size: 11.5px; font-weight: 550; }
  #sendOverlay .scope-btn span { margin-left: 3px; color: var(--text-mute); font-weight: 500; font-variant-numeric: tabular-nums; }
  #sendOverlay .scope-btn.active { color: var(--text); background: var(--bg-elev); border-color: var(--line); }
  #sendOverlay .scope-btn.active span { color: var(--text-dim); }
  #sendOverlay .send-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; margin-top: 8px; }
  #sendOverlay .send-day { min-height: 44px; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text-dim); }
  #sendOverlay .send-day span { display: block; font-size: 10.5px; font-variant-numeric: tabular-nums; }
  #sendOverlay .send-day span + span { margin-top: 2px; color: var(--text-mute); }
  #sendOverlay .send-day[aria-pressed="true"] { border-color: var(--text-dim); background: var(--surface-2); color: var(--text); }
  #sendOverlay .send-day[aria-pressed="true"] span + span { color: var(--text-dim); }
  #sendOverlay .send-change-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
  #sendOverlay .send-change-copy { min-width: 0; }
  #sendOverlay .send-change-title { color: var(--text); font-size: 11.5px; font-weight: 600; }
  #sendOverlay .send-change-detail { margin-top: 2px; color: var(--text-dim); font-size: 11px; }
  #sendOverlay .send-change-action { flex-shrink: 0; padding: 4px 0; border: 0; background: none; color: var(--text); font-size: 11.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

  #sendOverlay .send-channels { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  #sendOverlay .send-channel { display: grid; grid-template-columns: 16px 17px minmax(0,1fr) auto; align-items: start; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text-dim); text-align: left; }
  #sendOverlay .send-channel:first-child { border-top: 0; }
  #sendOverlay .send-channel:hover { background: var(--surface); }
  #sendOverlay .send-channel[aria-pressed="true"] { color: var(--text); }
  #sendOverlay .send-channel[data-state="blocked"] { box-shadow: inset 2px 0 0 var(--send-error); }
  #sendOverlay .chk-box, #sendOverlay .recipient-check { width: 16px; height: 16px; margin-top: 1px; display: grid; place-items: center; border: 1px solid var(--text-mute); border-radius: 4px; color: transparent; }
  #sendOverlay .chk-box svg, #sendOverlay .recipient-check svg { width: 11px; height: 11px; }
  #sendOverlay [aria-pressed="true"] > .chk-box, #sendOverlay .recipient-row[aria-pressed="true"] .recipient-check { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  #sendOverlay .send-channel-icon { width: 17px; height: 17px; margin-top: 1px; }
  #sendOverlay .send-channel-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
  #sendOverlay .send-channel-copy strong { color: var(--text); font-size: 12.5px; font-weight: 600; }
  #sendOverlay .send-channel-copy > span { color: var(--text-dim); font-size: 11.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
  #sendOverlay .send-channel-copy > .send-channel-blocker { color: var(--send-error); }
  #sendOverlay .send-channel-blocker:empty { display: none; }
  #sendOverlay .send-channel-state { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-mute); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
  #sendOverlay .send-channel[data-state="ready"] .send-channel-state { color: var(--send-ok); border-color: color-mix(in srgb, var(--send-ok) 35%, var(--line)); }
  #sendOverlay .send-channel[data-state="blocked"] .send-channel-state { color: var(--send-error); border-color: color-mix(in srgb, var(--send-error) 40%, var(--line)); background: color-mix(in srgb, var(--send-error) 8%, transparent); }

  #sendOverlay .recipient-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  #sendOverlay .recipient-panel-count { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
  #sendOverlay .recipient-actions-buttons { display: flex; gap: 12px; }
  #sendOverlay .recipient-text-btn { padding: 2px 0; border: 0; background: none; color: var(--text-dim); font-size: 11px; font-weight: 550; }
  #sendOverlay .recipient-text-btn:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  #sendOverlay .recipient-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
  #sendOverlay .recipient-search-wrap { position: relative; display: block; }
  #sendOverlay .recipient-search-wrap svg { position: absolute; left: 9px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
  #sendOverlay .recipient-search { width: 100%; height: 32px; padding: 0 10px 0 30px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--bg-elev); color: var(--text); }
  #sendOverlay .recipient-search:focus { border-color: var(--text-mute); }
  #sendOverlay .recipient-filter-group { display: flex; gap: 2px; align-self: flex-start; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
  #sendOverlay .recipient-filter-btn { padding: 4px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-dim); font-size: 11px; }
  #sendOverlay .recipient-filter-btn[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
  #sendOverlay .recipient-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  #sendOverlay .recipient-row { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 4px 10px; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: var(--text); text-align: left; }
  #sendOverlay .recipient-row:first-child { border-top: 0; }
  #sendOverlay .recipient-row:hover { background: var(--surface); }
  #sendOverlay .recipient-row[aria-pressed="false"] .recipient-main, #sendOverlay .recipient-row[aria-pressed="false"] .recipient-channels { opacity: .55; }
  #sendOverlay .recipient-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  #sendOverlay .recipient-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  #sendOverlay .recipient-name { overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  #sendOverlay .recipient-role { flex: none; color: var(--text-mute); font-size: 10.5px; font-weight: 550; }
  #sendOverlay .recipient-contact { overflow: hidden; color: var(--text-dim); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
  #sendOverlay .recipient-channels { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
  #sendOverlay .recipient-channel { padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim); font-size: 10.5px; font-weight: 550; line-height: 1.6; }
  #sendOverlay .recipient-channel[data-state="valid"][data-active="true"] { color: var(--send-ok); border-color: color-mix(in srgb, var(--send-ok) 35%, var(--line)); }
  #sendOverlay .recipient-channel[data-state="empty"] { border-style: dashed; color: var(--text-mute); }
  #sendOverlay .recipient-channel[data-state="invalid"] { color: var(--send-error); border-color: color-mix(in srgb, var(--send-error) 40%, var(--line)); }
  #sendOverlay .recipient-empty { padding: 14px 12px; color: var(--text-mute); font-size: 11.5px; line-height: 1.5; text-align: center; }

  #sendOverlay .send-metadata label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 11.5px; font-weight: 550; }
  #sendOverlay .send-metadata label span { color: var(--text-mute); font-weight: 400; }
  #sendOverlay .send-metadata .send-team-label { margin-top: 14px; }
  #sendOverlay .send-metadata input, #sendOverlay .send-metadata textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--bg-elev); color: var(--text); line-height: 1.5; }
  #sendOverlay .send-metadata input:focus, #sendOverlay .send-metadata textarea:focus { border-color: var(--text-mute); }
  #sendOverlay .send-metadata textarea { min-height: 72px; max-height: 180px; resize: vertical; }
  #sendOverlay ::placeholder { color: var(--text-mute); }
  #sendOverlay #sendResults { display: grid; gap: 8px; }
  #sendOverlay .send-result-head { grid-template-columns: 8px minmax(0,1fr); gap: 2px 8px; }
  #sendOverlay .send-result-head > span:last-child { grid-column: 2; justify-self: start; text-align: left; line-height: 1.45; overflow-wrap: anywhere; }
  #sendOverlay .send-result-card.warn .send-result-dot { background: var(--c-review); }
  #sendOverlay .send-result-card.pending .send-result-dot { background: var(--text-mute); }
  #sendOverlay .send-result-detail { flex-wrap: wrap; row-gap: 2px; padding: 5px 0; }
  #sendOverlay .send-result-detail > span { flex: 0 1 auto; max-width: 100%; }
  #sendOverlay .send-result-detail strong { flex: 1 1 auto; min-width: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  #sendOverlay .send-result-note { padding: 0 10px 8px 25px; color: var(--text-mute); font-size: 10.5px; }
  #sendOverlay .send-channel[data-state="sent"] .send-channel-state { color: var(--send-ok); border-color: color-mix(in srgb, var(--send-ok) 35%, var(--line)); background: color-mix(in srgb, var(--send-ok) 8%, transparent); }
  #sendOverlay .send-preview-tab[data-state="sent"] .send-tab-dot { background: var(--send-ok); box-shadow: none; }

  #sendOverlay .send-preview { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); }
  #sendOverlay .send-preview-bar { flex: 0 0 auto; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
  #sendOverlay .send-preview-tabs { display: flex; gap: 2px; }
  #sendOverlay .send-preview-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; background: transparent; color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
  #sendOverlay .send-preview-tab:hover { color: var(--text); }
  #sendOverlay .send-preview-tab[aria-selected="true"] { color: var(--text); }
  #sendOverlay .send-preview-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
  #sendOverlay .send-preview-tab:focus-visible { outline-offset: -3px; }
  #sendOverlay .send-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); box-shadow: inset 0 0 0 1px var(--text-mute); }
  #sendOverlay .send-preview-tab[data-state="ready"] .send-tab-dot { background: var(--send-ok); box-shadow: none; }
  #sendOverlay .send-preview-tab[data-state="blocked"] .send-tab-dot { background: var(--send-error); box-shadow: none; }
  #sendOverlay .send-tab-state { color: var(--text-mute); font-size: 10.5px; font-weight: 500; }
  #sendOverlay .send-preview-tab[data-state="blocked"] .send-tab-state { color: var(--send-error); }
  #sendOverlay .send-preview-note { display: flex; align-items: center; gap: 10px; color: var(--text-mute); font-size: 11px; white-space: nowrap; }
  #sendOverlay .send-preview-updating { color: var(--text-dim); }
  #sendOverlay .send-preview-status { display: flex; align-items: center; gap: 12px; margin: 24px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 8px; color: var(--text-dim); font-size: 12px; }
  #sendOverlay .send-preview-status[data-tone="error"] { border-style: solid; border-color: color-mix(in srgb, var(--send-error) 40%, var(--line)); color: var(--send-error); }
  #sendOverlay .send-preview-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #sendOverlay .send-envelope { margin: 0 0 14px; border-top: 1px solid var(--line-soft); }
  #sendOverlay .send-envelope div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; }
  #sendOverlay .send-envelope dt { color: var(--text-mute); }
  #sendOverlay .send-envelope dd { margin: 0; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  #sendOverlay .send-preview-notice { margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text-dim); font-size: 12px; line-height: 1.5; }
  #sendOverlay .send-preview-notice strong { margin-right: 4px; color: var(--text); font-weight: 600; }
  #sendOverlay .send-preview-notice[data-tone="blocked"] { border-color: color-mix(in srgb, var(--send-error) 40%, var(--line)); background: color-mix(in srgb, var(--send-error) 7%, transparent); color: var(--send-error); }
  #sendOverlay .send-preview-notice[data-tone="blocked"] strong { color: var(--send-error); }
  #sendOverlay .send-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--text-mute); font-size: 11px; }
  #sendOverlay .send-link-btn { padding: 3px 0; border: 0; background: none; color: var(--text-dim); font-size: 11.5px; font-weight: 550; }
  #sendOverlay .send-link-btn:hover, #sendOverlay .send-link-btn[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  #sendOverlay .discord-output-preview { max-width: 820px; border-radius: 8px; box-shadow: none; }
  #sendOverlay .discord-message-avatar { background: #5865f2; box-shadow: none; }
  #sendOverlay .email-preview-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f3f4f6; }
  #sendOverlay .email-preview-host { all: initial; display: block; }
  #sendOverlay .whatsapp-preview { padding: 18px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--wa-bg); }
  #sendOverlay .whatsapp-bubble { position: relative; max-width: 460px; padding: 7px 10px 22px; border-radius: 0 8px 8px 8px; background: var(--wa-bubble); color: var(--wa-text); box-shadow: 0 1px .5px rgba(11,20,26,.13); font: 14px/1.45 "Segoe UI", Helvetica, Arial, sans-serif; }
  #sendOverlay .whatsapp-line { min-height: 1.45em; white-space: pre-wrap; overflow-wrap: anywhere; }
  #sendOverlay .whatsapp-text strong { font-weight: 700; }
  #sendOverlay .whatsapp-text code { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--wa-meta) 22%, transparent); font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  #sendOverlay .whatsapp-raw { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  #sendOverlay .whatsapp-header { margin-bottom: 6px; font-weight: 700; }
  #sendOverlay .whatsapp-footer { margin-top: 8px; color: var(--wa-meta); font-size: 12.5px; }
  #sendOverlay .whatsapp-view-note { margin: 0 0 10px; color: var(--text-mute); font-size: 11.5px; line-height: 1.5; }
  #sendOverlay .whatsapp-time { position: absolute; right: 9px; bottom: 4px; color: var(--wa-meta); font-size: 11px; }

  #sendOverlay .send-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--bg-elev); }
  #sendOverlay .send-footer-copy { min-width: 0; color: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  #sendOverlay .send-blockers { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
  #sendOverlay .send-blockers:empty, #sendOverlay #sendDeliveryStatus:empty { display: none; }
  #sendOverlay .send-blockers li { display: flex; gap: 6px; color: var(--send-error); }
  #sendOverlay .send-blockers li strong { flex: none; font-weight: 650; }
  #sendOverlay .send-blockers li.pending { color: var(--text-mute); }
  #sendOverlay #sendDeliveryStatus { margin-top: 3px; color: var(--text); }
  #sendOverlay .send-footer-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
  #sendOverlay .send-cancel, #sendOverlay .send-primary { min-height: 36px; padding: 7px 14px; border: 1px solid transparent; border-radius: 7px; font-weight: 600; }
  #sendOverlay .send-cancel { background: transparent; color: var(--text-dim); }
  #sendOverlay .send-primary { display: flex; align-items: center; gap: 7px; padding-inline: 16px; background: var(--accent); color: var(--accent-text); }
  #sendOverlay .send-primary svg { width: 14px; height: 14px; }
  #sendOverlay .send-primary:hover:not(:disabled) { filter: brightness(.9); }
  #sendOverlay .send-spinner { border-color: currentColor; border-top-color: transparent; }

  @media (max-width: 1100px) {
    #sendOverlay .send-workspace { grid-template-columns: 360px minmax(0,1fr); }
    #sendOverlay .send-tab-state { display: none; }
  }
  @media (max-width: 899px) {
    #sendOverlay { padding: 0; }
    #sendOverlay .send-composer { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    #sendOverlay .send-workspace { display: block; overflow-y: auto; overscroll-behavior: contain; }
    #sendOverlay .send-configuration { overflow: visible; padding: 0 16px 8px; }
    #sendOverlay .send-preview { display: block; border-left: 0; border-top: 1px solid var(--line); }
    #sendOverlay .send-preview-bar { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; gap: 0 12px; padding: 0 8px; }
    #sendOverlay .send-preview-note { width: 100%; padding: 0 8px 8px; white-space: normal; }
    #sendOverlay .send-preview-tab { min-height: 44px; padding: 0 10px; }
    #sendOverlay .send-preview-panel { overflow: visible; padding: 16px; }
    #sendOverlay .send-preview-status { margin: 16px; }
    #sendOverlay .send-modal-header { padding: 14px 16px; }
    #sendOverlay .send-footer { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    #sendOverlay .scope-btn, #sendOverlay .send-channel, #sendOverlay .recipient-row { min-height: 44px; }
  }
  @media (max-width: 560px) {
    #sendOverlay .send-footer { flex-direction: column; align-items: stretch; gap: 8px; }
    #sendOverlay .send-footer-actions { justify-content: flex-end; }
    #sendOverlay .send-primary { flex: 1; justify-content: center; }
    #sendOverlay .send-envelope div { grid-template-columns: 64px minmax(0,1fr); }
    #sendOverlay .discord-message-shell { grid-template-columns: minmax(0,1fr); }
    #sendOverlay .discord-message-avatar { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #sendOverlay, #sendOverlay * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

/* Extracted inline presentation; existing geometry and hierarchy preserved. */
.initially-hidden { display:none; }
.account-avatar { width:20px;height:20px; }
.theme-control { display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text-dim);cursor:pointer;font-size:12px;font-family:inherit; }
.filter-all-dot { background:#71717a }
/* Event composer: when → what (type, opponent) → details, with one quiet rhythm. */
.event-modal { max-width:600px; }
.event-modal-head { align-items:flex-start;padding:18px 22px 15px; }
.event-modal-head h3 { font-size:16px;font-weight:650;letter-spacing:-0.015em; }
.event-modal-date { margin-top:3px;color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums; }
.event-modal-body { gap:0;padding:4px 22px 22px; }
.event-section { display:flex;flex-direction:column;gap:14px;padding-top:18px; }
.event-section + .event-section { margin-top:18px;border-top:1px solid var(--line-soft); }
.event-modal .field { gap:7px; }
.event-modal .field > label,.event-modal .field-label-row > label { color:var(--text-dim);font-size:12px;font-weight:550;letter-spacing:0;text-transform:none; }
.event-modal .field input,.event-modal .field textarea { min-height:38px;padding:9px 11px;border-radius:7px;font-size:13px; }
.event-modal .field input:focus,.event-modal .field textarea:focus,.event-modal .tags-wrap:focus-within { border-color:var(--text-mute);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.event-modal .event-title-field input { min-height:40px;font-size:14px;font-weight:550; }
.event-modal .field textarea { min-height:76px;line-height:1.5; }
.event-time-row { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:8px; }
.event-time-row input { font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums; }
.event-time-sep { padding-bottom:10px;color:var(--text-mute); }
.event-duration { min-width:84px;height:38px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line-soft);border-radius:7px;background:var(--bg);color:var(--text-dim);font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;white-space:nowrap; }
.event-modal .type-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; }
.event-modal .field .type-opt { min-height:40px;padding:8px 10px;gap:8px;border-radius:7px;line-height:1.25;font-size:12.5px; }
.event-modal .type-opt .dot { width:8px;height:8px; }
.event-modal .type-opt[data-type="ESEA"] { --type:var(--c-esea); } .event-modal .type-opt[data-type="TURNUVA"] { --type:var(--c-turnuva); }
.event-modal .type-opt[data-type="SCRIM"] { --type:var(--c-scrim); } .event-modal .type-opt[data-type="DRY"] { --type:var(--c-dry); }
.event-modal .type-opt[data-type="REVIEW"] { --type:var(--c-review); } .event-modal .type-opt[data-type="ANALİZ"] { --type:var(--c-analiz); }
.event-modal .type-opt[data-type="TEORİ"] { --type:var(--c-teori); } .event-modal .type-opt[data-type="BREAK"] { --type:var(--c-break); }
.event-modal .type-opt.selected { border-color:color-mix(in srgb, var(--type) 60%, var(--line));background:color-mix(in srgb, var(--type) 11%, var(--surface));color:var(--text);font-weight:600;box-shadow:none; }
.field-label-row { display:flex;align-items:baseline;justify-content:space-between;gap:10px; }
.field-required { padding:1px 6px;border:1px solid var(--line);border-radius:4px;color:var(--text-mute);font-size:10.5px;font-weight:600; }
.field-required[hidden] { display:none; }
.opponent-input-wrap { position:relative; }
.opponent-input-icon { position:absolute;left:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--text-mute);pointer-events:none; }
.event-modal .opponent-input-wrap input { padding-left:32px; }
.event-modal .opponent-list { margin-top:-1px;border-radius:7px;box-shadow:var(--shadow-modal); }
.event-modal .opponent-hint { font-size:11.5px; }
.event-modal .tags-wrap { min-height:38px;border-radius:7px; }
.event-modal-foot { padding:14px 22px; }
.btn-kbd { margin-left:4px;padding:1px 5px;border-radius:4px;background:color-mix(in srgb, var(--accent-text) 12%, transparent);font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.02em; }
@media (hover:none), (max-width:640px) { .btn-kbd { display:none; } }
@media (max-width:640px) {
  #overlay { padding:12px; }
  .event-modal { max-height:calc(100dvh - 24px); }
  .event-modal-head { padding:16px 16px 13px; }
  .event-modal-body { padding:2px 16px 18px; }
  .event-modal-foot { padding:12px 16px; }
  .event-modal .type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-time-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .event-time-sep { display:none; }
  .event-duration { grid-column:1 / -1;height:32px; }
}
.modal-actions-end { display:flex; gap:8px; margin-left:auto; }
.management-description { font-size:12.5px;color:var(--text-dim); }
.management-list { display:flex;flex-direction:column;gap:8px; }
.management-add { align-self:flex-start; }
.modal-actions { display:flex;gap:8px; }
.shortcuts-close { background:transparent;border:none;color:var(--text-mute);cursor:pointer;padding:4px;border-radius:4px;line-height:0; }
.view-error { color:var(--c-turnuva); }
.time-gutter-body { position: relative; }

/* Opponent activity: compact read-only analytics within the existing view shell. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.opponents-page { min-width:0; gap:18px; }
.opponents-heading h1 { font-size:22px;line-height:1.2;letter-spacing:-0.025em;font-weight:700; }
.opponents-heading p { margin-top:5px;color:var(--text-dim);font-size:12.5px; }
.opponents-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.opponents-summary-card { min-height:88px;padding:15px 17px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg-elev);display:flex;flex-direction:column;justify-content:space-between; }
.opponents-summary-card span { color:var(--text-mute);font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.07em; }
.opponents-summary-card strong { color:var(--text);font-size:25px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.025em; }
.opponents-note { color:var(--text-dim);font-size:11.5px;padding:0 2px; }
.opponents-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.opponents-toolbar[hidden],.opponents-note[hidden] { display:none; }
.opponents-search { display:block;flex:1;max-width:330px; }
.opponents-search input,.opponents-sort select { width:100%;min-height:35px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font:inherit;font-size:12px; }
.opponents-search input::placeholder { color:var(--text-mute); }
.opponents-sort { display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--text-mute);font-size:11px; }
.opponents-sort select { width:auto;min-width:142px;cursor:pointer; }
.opponents-search input:focus-visible,.opponents-sort select:focus-visible,.opponents-page button:focus-visible { outline:2px solid var(--c-esea);outline-offset:2px; }
.opponents-content { min-width:0;flex:1; }
.opponents-insights { display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px;color:var(--text-dim);font-size:11.5px; }
.opponents-insights strong { color:var(--text);font-weight:600; }
.opponents-layout { display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start; }
.opponents-list-panel,.opponents-detail-panel { min-width:0;background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden; }
.opponents-table-wrap { overflow-x:auto; }
.opponents-table { border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap; }
.opponents-table th,.opponents-table td { padding:12px 13px;text-align:right;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums; }
.opponents-table th:first-child,.opponents-table td:first-child { text-align:left; }
.opponents-table thead th { color:var(--text-mute);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;background:var(--surface); }
.opponents-table tbody tr:last-child th,.opponents-table tbody tr:last-child td { border-bottom:0; }
.opponents-table tbody tr:hover,.opponents-table tbody tr.selected { background:var(--surface); }
.opponents-table tbody th { font-weight:600; }
.opponents-row-name { background:none;border:0;color:var(--text);font:inherit;font-weight:600;text-align:left;cursor:pointer;padding:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.opponents-table td { color:var(--text-dim); }
.opponents-table td:nth-child(2) { color:var(--text);font-weight:600; }
.opponents-mobile-list { display:none; }
.opponents-pager { display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-top:1px solid var(--line-soft);color:var(--text-mute);font-size:11px;font-variant-numeric:tabular-nums; }
.opponents-pager div { display:flex;gap:7px; }
.opponents-pager button:disabled { opacity:.42;cursor:default; }
.opponents-detail-panel { padding:17px; }
.opponents-detail-prompt { min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--text-mute);font-size:12px; }
.opponents-detail-kicker { color:var(--text-mute);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:650; }
.opponents-detail-head h2 { margin-top:3px;font-size:17px;line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere; }
.opponents-detail-meta { display:flex;flex-wrap:wrap;gap:6px;margin-top:13px; }
.opponents-detail-meta span { background:var(--surface);border:1px solid var(--line-soft);border-radius:5px;padding:4px 7px;color:var(--text-dim);font-size:10.5px; }
.opponents-detail-meta strong { color:var(--text); }
.opponents-detail-last { margin-top:11px;color:var(--text-mute);font-size:11px; }
.opponents-history { margin-top:17px;border-top:1px solid var(--line-soft); }
.opponents-history-item { display:grid;grid-template-columns:67px minmax(0,1fr) auto;gap:9px;padding:12px 0;border-bottom:1px solid var(--line-soft); }
.opponents-history-date { color:var(--text-mute);font-size:10px;font-variant-numeric:tabular-nums;padding-top:2px; }
.opponents-history-type { display:inline-block;margin-bottom:4px;font-size:10px;font-weight:650; }
.opponents-history-type.scrim { color:var(--c-scrim); }
.opponents-history-type.turnuva { color:var(--c-turnuva); }
.opponents-history-title { color:var(--text);font-size:11.5px;font-weight:600;overflow-wrap:anywhere; }
.opponents-history-time { margin-top:2px;color:var(--text-mute);font-size:10px;font-variant-numeric:tabular-nums; }
.opponents-history-open { align-self:start;background:none;border:0;color:var(--text-dim);font:inherit;font-size:10.5px;cursor:pointer; }
.opponents-history-open:hover { color:var(--text); }
.opponents-detail-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;color:var(--text-mute);font-size:10.5px; }
.opponents-state,.opponents-loading { min-height:300px;background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px; }
.opponents-state { display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:28px; }
.opponents-state .empty-title { font-size:15px; }
.opponents-state .empty-desc { max-width:390px;color:var(--text-dim);font-size:12px;line-height:1.6; }
.opponents-state .btn { margin-top:7px; }
.opponents-empty-mark { width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text-dim);margin-bottom:4px; }
.opponents-empty-mark svg { width:21px;height:21px; }
.opponents-loading { padding:18px; }
.opponents-loading-line,.opponents-loading-row,.opponents-summary-card.skeleton span,.opponents-summary-card.skeleton strong { display:block;background:var(--surface-2);border-radius:4px;animation:opponentPulse 1.6s ease-in-out infinite; }
.opponents-loading-line { width:31%;height:12px;margin:4px 0 22px; }
.opponents-loading-row { height:37px;margin-top:9px; }
.opponents-loading-row:nth-child(2n) { width:84%; }
.opponents-summary-card.skeleton span { width:62%;height:10px; }
.opponents-summary-card.skeleton strong { width:38%;height:25px; }
@keyframes opponentPulse { 50% { opacity:.55; } }
@media (max-width:1180px) {
  .opponents-layout { grid-template-columns:minmax(0,1fr); }
  .opponents-detail-prompt { min-height:90px; }
}
@media (max-width:700px) {
  .opponents-page { padding:18px 16px;gap:16px; }
  .opponents-heading h1 { font-size:20px; }
  .opponents-summary { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .opponents-summary-card { min-height:76px;padding:12px; }
  .opponents-summary-card strong { font-size:22px; }
  .opponents-toolbar { align-items:stretch; }
  .opponents-search { min-width:0; }
  .opponents-sort span { display:none; }
  .opponents-sort select { min-width:125px; }
  .opponents-table-wrap { display:none; }
  .opponents-mobile-list { display:block; }
  .opponents-mobile-card { display:flex;flex-direction:column;gap:6px;width:100%;padding:12px 13px;border:0;border-bottom:1px solid var(--line-soft);background:transparent;text-align:left;color:var(--text);font:inherit;cursor:pointer; }
  .opponents-mobile-card:last-child { border-bottom:0; }
  .opponents-mobile-card:hover,.opponents-mobile-card.selected { background:var(--surface); }
  .opponents-mobile-top,.opponents-mobile-bottom { display:flex;justify-content:space-between;align-items:baseline;gap:8px; }
  .opponents-mobile-top strong { font-size:12.5px;overflow-wrap:anywhere; }
  .opponents-mobile-top span { color:var(--text);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums; }
  .opponents-mobile-bottom { color:var(--text-mute);font-size:10.5px;font-variant-numeric:tabular-nums; }
  .opponents-mobile-bottom span:last-child { white-space:nowrap; }
  .opponents-detail-panel:has(.opponents-detail-prompt) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .opponents-loading-line,.opponents-loading-row,.opponents-summary-card.skeleton span,.opponents-summary-card.skeleton strong { animation:none; }
}

/* Analytics pages (Density, Statistics) share one header, summary strip, panel and state system. */
.density-page,.stats-view { display:flex;flex-direction:column;gap:14px;min-width:0;max-width:1640px; }
.density-head,.stats-head { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap; }
.density-title,.stats-title { font-size:22px;line-height:1.2;letter-spacing:-0.025em;font-weight:700; }
.heatmap-description,.stats-description { margin-top:5px;font-size:12.5px;color:var(--text-dim); }
.density-range,.stats-range { display:flex;gap:6px; }
.density-meta,.stats-meta { display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:-6px;color:var(--text-dim);font-size:11.5px;font-variant-numeric:tabular-nums; }
.density-meta span + span::before,.stats-meta span + span::before { content:'·';margin:0 8px;color:var(--text-mute); }
.density-meta .density-meta-note,.stats-meta .stats-meta-note { color:var(--text-mute); }
.density-summary,.stats-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px; }
.density-stat,.stats-stat { min-width:0;padding:12px 18px 13px;border-left:1px solid var(--line-soft); }
.density-stat:first-child,.stats-stat:first-child { border-left:0; }
.density-stat-label,.stats-stat .stat-label { color:var(--text-mute);font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.07em; }
.density-stat-value,.stats-stat .stat-value { margin-top:6px;color:var(--text);font-size:19px;line-height:1.15;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.density-stat-sub,.stats-stat .stat-sub { margin-top:4px;color:var(--text-dim);font-size:11.5px;font-variant-numeric:tabular-nums; }
.density-layout { display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:14px;align-items:start; }
.density-panel,.stats-panel { min-width:0;background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px 16px; }
.density-panel-head,.stats-panel-head { display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;min-height:18px; }
.density-panel-head h2,.stats-panel-head h2 { font-size:13px;font-weight:600;letter-spacing:-0.01em;color:var(--text);white-space:nowrap; }
.density-panel-head h2 small,.stats-panel-head h2 small { margin-left:8px;color:var(--text-mute);font-size:12px;font-weight:500; }
.density-readout,.density-panel-hint,.stats-panel-hint { min-width:0;color:var(--text-mute);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.density-readout { color:var(--text-dim); }
.density-map-foot { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft); }
.density-unit { color:var(--text-mute);font-size:11px;line-height:1.5; }
.density-side { display:flex;flex-direction:column;gap:14px;min-width:0; }
.density-types,.density-parts { display:flex;flex-direction:column; }
.density-type-row,.density-part { display:grid;grid-template-columns:minmax(0,1fr) 56px 76px;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-radius:6px; }
.density-type-row { width:calc(100% + 16px);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer; }
.density-type-row:hover { background:var(--surface); }
.density-type-row[aria-pressed="true"] { background:var(--surface-2); }
.density-type-row:focus-visible,.density-range .range-btn:focus-visible,.stats-range .range-btn:focus-visible,.stats-metric-btn:focus-visible { outline:2px solid var(--c-esea);outline-offset:1px; }
.density-type-row + .density-type-row,.density-part + .density-part { margin-top:1px; }
.density-type-name,.density-part-name { display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.density-type-row[data-value="all"] .density-type-name { color:var(--text-dim); }
.density-type-row[aria-pressed="true"] .density-type-name { color:var(--text);font-weight:600; }
.density-part-name small { color:var(--text-mute);font-size:10.5px;font-family:"JetBrains Mono",ui-monospace,monospace; }
.density-type-value { color:var(--text);font:500 11.5px/1 "JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap; }
.density-type-value small { display:inline-block;min-width:34px;color:var(--text-mute);font-size:10.5px; }
.density-type-bar { grid-column:2;grid-row:1; }
.density-type-value { grid-column:3;grid-row:1; }
.density-type-bar i.esea { background:var(--c-esea); } .density-type-bar i.turnuva { background:var(--c-turnuva); }
.density-type-bar i.scrim { background:var(--c-scrim); } .density-type-bar i.dry { background:var(--c-dry); }
.density-type-bar i.review { background:var(--c-review); } .density-type-bar i.analiz { background:var(--c-analiz); }
.density-type-bar i.teori { background:var(--c-teori); } .density-type-bar i.off { background:var(--c-off); }
.density-state { min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px; }
.density-panel .density-state { min-height:220px;border:0;background:none;padding:12px; }
.density-state .empty-title { font-size:14px; }
.density-state .empty-desc { max-width:380px;color:var(--text-dim);font-size:12px;line-height:1.6; }
.density-state .btn { margin-top:6px; }
.density-loading > div { background:var(--surface);border-radius:8px;animation:opponentPulse 1.6s ease-in-out infinite; }
.density-skeleton-line { width:220px;height:24px; }
.density-skeleton-strip { height:78px; }
.density-skeleton-block { height:460px; }
/* Desktop: the page fills the scroll viewport so the map and side column end on the shell's
   bottom inset, level with the sidebar action stack; hour rows absorb the spare height. */
@media (min-width:1181px) and (min-height:720px) {
  .density-page { flex:1 0 auto; }
  .density-layout { flex:1;align-items:stretch; }
  .density-layout > .density-panel { display:flex;flex-direction:column; }
  .density-layout .heatmap-grid { flex:1;grid-template-rows:auto repeat(17,minmax(20px,1fr)) auto; }
  .density-side > .density-panel:last-child { flex:1; }
}
@media (max-width:1180px), (max-height:719px) {
  .heatmap-cell { height:22px; }
}
@media (max-width:1180px) {
  .density-layout { grid-template-columns:minmax(0,1fr); }
  .density-side { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .density-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .density-stat:nth-child(3) { border-left:0; }
  .density-stat:nth-child(n+3) { border-top:1px solid var(--line-soft); }
}
@media (max-width:700px) {
  .density-stat { padding:12px 13px; }
  #heatmapView { padding:18px 16px 28px; }
  .density-page { gap:14px; }
  .density-title { font-size:20px; }
  .density-range { width:100%; }
  .density-range .range-btn { flex:1;min-height:34px; }
  .density-meta { margin-top:-4px; }
  .density-stat-value { font-size:17px; }
  .density-panel { padding:14px 12px 14px; }
  .density-panel-head { flex-direction:column;gap:4px;align-items:flex-start; }
  .density-readout { display:none; }
  .density-side { display:flex; }
  .heatmap-grid { grid-template-columns:24px repeat(7,minmax(0,1fr)) 26px;gap:2px; }
  .heatmap-cell { height:17px;border-radius:2px; }
  .heatmap-hour { padding-right:4px;font-size:9px; }
  .heatmap-day { font-size:10px; }
  .heatmap-corner,.heatmap-total-head,.heatmap-foot-label { font-size:0; }
  .heatmap-row-total { padding-left:4px; }
  .heatmap-row-total .heatmap-track { display:none; }
  .heatmap-row-total b,.heatmap-col-total b { font-size:9.5px; }
  .density-map-foot { flex-direction:column;align-items:flex-start;gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .density-loading > div { animation:none; }
}

/* Statistics: volume summary, ranked type composition, then day totals on a neutral scale. */
.stats-stat .stat-value small { color:var(--text-mute);font-size:13px;font-weight:600;letter-spacing:0; }
.stats-layout { display:flex;flex-direction:column;gap:14px;min-width:0; }
.stats-composition { display:flex;gap:2px;height:8px;margin-bottom:12px;border-radius:3px;overflow:hidden; }
.stats-composition i { display:block;min-width:2px;height:100%; }
.stats-composition i:first-child { border-radius:3px 0 0 3px; } .stats-composition i:last-child { border-radius:0 3px 3px 0; }
.stats-type-table { width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums; }
.stats-type-table th,.stats-type-table td { padding:6px 0 6px 16px;text-align:right;border-top:1px solid var(--line-soft);white-space:nowrap; }
.stats-type-table thead th { border-top:0;padding-top:0;padding-bottom:6px;color:var(--text-mute);font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase; }
.stats-type-table th:first-child,.stats-type-table td:first-child { padding-left:0;text-align:left; }
.stats-type-table tbody th { width:100%;font-weight:500; }
.stats-type-cell { display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);align-items:center;gap:16px; }
.stats-type-table td { color:var(--text-dim);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px; }
.stats-type-table td:nth-child(2) { color:var(--text);font-weight:600; }
.stats-type-name { display:flex;align-items:center;gap:8px;min-width:0;color:var(--text);font-size:12.5px;overflow:hidden;text-overflow:ellipsis; }
.stats-type-bar { height:4px;border-radius:2px;background:var(--line-soft);overflow:hidden; }
.stats-type-bar i { display:block;height:100%;border-radius:2px; }
:is(.stats-composition,.stats-type-bar) i.esea { background:var(--c-esea); } :is(.stats-composition,.stats-type-bar) i.turnuva { background:var(--c-turnuva); }
:is(.stats-composition,.stats-type-bar) i.scrim { background:var(--c-scrim); } :is(.stats-composition,.stats-type-bar) i.dry { background:var(--c-dry); }
:is(.stats-composition,.stats-type-bar) i.review { background:var(--c-review); } :is(.stats-composition,.stats-type-bar) i.analiz { background:var(--c-analiz); }
:is(.stats-composition,.stats-type-bar) i.teori { background:var(--c-teori); } :is(.stats-composition,.stats-type-bar) i.off { background:var(--c-off); }
.stats-metric { display:flex;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--surface); }
.stats-metric-btn { min-height:24px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--text-dim);font:inherit;font-size:11.5px;cursor:pointer; }
.stats-metric-btn:hover { color:var(--text); }
.stats-metric-btn[aria-pressed="true"] { background:var(--surface-2);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--line); }
/* Day totals are a generic measure: neutral bars, the busiest day in full ink. */
.stats-day-chart { list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;min-height:120px; }
.stats-day { display:grid;grid-template-rows:auto minmax(48px,1fr) auto;gap:6px;min-width:0;text-align:center; }
.stats-day-value { color:var(--text-dim);font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.stats-day-bar { position:relative;display:flex;align-items:flex-end;border-bottom:1px solid var(--line); }
.stats-day-bar i { display:block;max-width:72px;margin:0 auto;border-radius:3px 3px 0 0;background:var(--text-mute); }
/* Columns take their height from data-ui-fill; the width twin is only used by the phone rows. */
@media (min-width:701px) { .stats-day-bar i { width:100% !important; } }
.stats-day-name { color:var(--text-dim);font-size:11.5px;white-space:nowrap; }
.stats-day-short { display:none; }
.stats-day[data-peak] .stats-day-bar i { background:var(--text); }
.stats-day[data-peak] .stats-day-value,.stats-day[data-peak] .stats-day-name { color:var(--text);font-weight:600; }
.stats-state { min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;background:var(--bg-elev);border:1px solid var(--line-soft);border-radius:10px; }
.stats-state .empty-title { font-size:14px; }
.stats-state .empty-desc { max-width:380px;color:var(--text-dim);font-size:12px;line-height:1.6; }
.stats-state .btn { margin-top:6px; }
.stats-view[aria-busy="true"] .stats-summary,.stats-view[aria-busy="true"] .stats-layout { opacity:.55;transition:opacity 120ms; }
.stats-loading > div { background:var(--surface);border-radius:8px;animation:opponentPulse 1.6s ease-in-out infinite; }
.stats-skeleton-line { width:240px;height:24px; } .stats-skeleton-strip { height:76px; } .stats-skeleton-block { height:220px; }
@media (min-width:901px) and (min-height:720px) {
  .stats-view { flex:1 0 auto; }
  .stats-view > .stats-state { flex:1; }
  .stats-layout { flex:1; }
  .stats-days-panel { flex:1;display:flex;flex-direction:column; }
  .stats-days-panel .stats-day-chart { flex:1; }
}
@media (max-width:960px) {
  .stats-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-stat:nth-child(3) { border-left:0; }
  .stats-stat:nth-child(n+3) { border-top:1px solid var(--line-soft); }
}
@media (max-width:700px) {
  #statsView { padding:18px 16px 28px; }
  .stats-view { gap:14px; }
  .stats-title { font-size:20px; }
  .stats-range { width:100%; }
  .stats-range .range-btn { flex:1;min-height:36px; }
  .stats-stat { padding:12px 13px; }
  .stats-stat .stat-value { font-size:17px; }
  .stats-panel { padding:14px 12px; }
  .stats-panel-head { flex-wrap:wrap;row-gap:8px; }
  .stats-type-table th:nth-child(5),.stats-type-table td:nth-child(5) { display:none; }
  .stats-type-table th,.stats-type-table td { padding-left:10px; }
  .stats-type-cell { grid-template-columns:minmax(0,1fr);gap:6px; }
  .stats-metric-btn { min-height:32px;padding:0 12px; }
  /* Phone: days become labelled rows instead of seven squeezed columns. */
  .stats-day-chart { grid-template-columns:minmax(0,1fr);gap:0;min-height:0; }
  .stats-day { grid-template-columns:78px minmax(0,1fr) 64px;grid-template-rows:auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);text-align:left; }
  .stats-day:first-child { border-top:0; }
  .stats-day-value { order:3;text-align:right; }
  .stats-day-name { order:1; }
  .stats-day-bar { order:2;height:6px;border-bottom:0;border-radius:3px;background:var(--line-soft);overflow:hidden; }
  .stats-day-bar i { height:100% !important;max-width:none;margin:0;border-radius:3px; }
}
@media (prefers-reduced-motion: reduce) { .stats-loading > div { animation:none; } }

/* Players: hairline-separated contact records; chips show which Program Send channels a contact enables. */
.players-modal { max-width:640px; }
.players-modal-head { align-items:flex-start;padding:16px 20px 14px; }
.players-modal-head h3 { font-size:15px;font-weight:650; }
.players-summary { margin-top:3px;color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums; }
.players-modal-body { gap:0;padding:12px 20px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain; }
.players-note { padding:9px 11px;margin-bottom:10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);color:var(--text-dim);font-size:12px;line-height:1.5; }
.player-list { display:flex;flex-direction:column; }
.player-row { display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line-soft); }
.player-avatar { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text-dim);font-size:11px;font-weight:650;text-transform:uppercase; }
.player-main { display:flex;flex-direction:column;gap:8px;min-width:0; }
.player-head { display:flex;align-items:center;gap:6px;min-width:0; }
.player-row input { width:100%;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;outline:none;background:var(--surface);color:var(--text);font:inherit;font-size:13px;transition:border-color 140ms,background-color 140ms,box-shadow 140ms; }
.player-row input::placeholder { color:var(--text-mute); }
.player-row input:focus { border-color:var(--text-mute);box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.player-row input[aria-invalid="true"] { border-color:color-mix(in srgb, var(--c-turnuva) 70%, var(--line)); }
.player-row .player-name { flex:1;min-width:0;font-weight:600; }
.player-new-tag { flex:none;padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--text-dim);font-size:10.5px;font-weight:650; }
.player-channel { flex:none;padding:2px 7px;border:1px solid var(--line-soft);border-radius:4px;color:var(--text-mute);font-size:10.5px;font-weight:600;opacity:.6; }
.player-channel[data-state="ready"] { border-color:var(--line);background:var(--surface-2);color:var(--text);opacity:1; }
.player-channel[data-state="invalid"] { border-color:color-mix(in srgb, var(--c-turnuva) 40%, var(--line));color:var(--c-turnuva);opacity:1; }
.player-contacts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.player-contact { display:flex;flex-direction:column;gap:4px;min-width:0; }
.player-contact-label { color:var(--text-mute);font-size:11px;font-weight:550; }
.player-error { color:var(--c-turnuva);font-size:11.5px; }
.player-error[hidden],.player-removed-note[hidden] { display:none; }
.player-removed-note { color:var(--text-mute);font-size:11.5px; }
.player-remove { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-mute);font:inherit;font-size:12px;cursor:pointer;transition:color 140ms,background-color 140ms,border-color 140ms; }
.player-remove svg { width:15px;height:15px;flex:none; }
.player-remove span { display:none; }
.player-remove:hover { color:var(--c-turnuva);border-color:color-mix(in srgb, var(--c-turnuva) 30%, transparent);background:color-mix(in srgb, var(--c-turnuva) 8%, transparent); }
.player-remove:focus-visible,.player-add:focus-visible { outline:2px solid var(--c-esea);outline-offset:1px; }
.player-row.is-removed .player-avatar,.player-row.is-removed .player-head,.player-row.is-removed .player-contacts { opacity:.4; }
.player-row.is-removed .player-name { text-decoration:line-through; }
.player-row.is-removed .player-remove { width:auto;padding:0 10px;border-color:var(--line);color:var(--text); }
.player-row.is-removed .player-remove svg { display:none; }
.player-row.is-removed .player-remove span { display:inline; }
.player-add { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:12px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:color 140ms,border-color 140ms,background-color 140ms; }
.player-add svg { width:14px;height:14px; }
.player-add:hover { border-color:var(--text-mute);background:var(--surface);color:var(--text); }
.players-modal-foot { align-items:center;padding:14px 20px; }
.players-foot-note { color:var(--text-mute);font-size:11.5px; }
@media (max-width:640px) {
  .players-modal-head,.players-modal-body,.players-modal-foot { padding-inline:16px; }
  .player-row { grid-template-columns:minmax(0,1fr) auto;gap:10px; }
  .player-avatar { display:none; }
  .player-head { flex-wrap:wrap; }
  .player-row .player-name { flex-basis:100%; }
  .player-contacts { grid-template-columns:minmax(0,1fr); }
  .player-remove { width:40px;height:40px; }
}

/* Users: identity + access header, contact fields, then a separate security band per account. */
.users-modal { max-width:720px; }
.users-modal-head { align-items:flex-start;padding:16px 20px 14px; }
.users-modal-head h3 { font-size:15px;font-weight:650; }
.users-summary { display:flex;flex-wrap:wrap;margin-top:3px;color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums; }
.users-summary span + span::before { content:'·';margin:0 7px;color:var(--text-mute); }
.users-modal-body { gap:0;padding:12px 20px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain; }
.users-modal-body > * { flex-shrink:0; }
.users-roles { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);overflow:hidden; }
.users-roles div { padding:9px 12px; }
.users-roles div + div { border-left:1px solid var(--line-soft); }
.users-roles dt { color:var(--text);font-size:12px;font-weight:600; }
.users-roles dd { margin-top:2px;color:var(--text-dim);font-size:11.5px;line-height:1.45; }
.users-note { margin:8px 2px 4px;color:var(--text-mute);font-size:11.5px; }
.user-list { display:flex;flex-direction:column; }
.user-row { display:flex;flex-direction:column;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft); }
.user-head { display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:12px; }
.user-avatar { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text-dim);font-size:11px;font-weight:650;text-transform:uppercase; }
.user-identity { min-width:0; }
.user-display { color:var(--text);font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.user-handle { display:flex;align-items:center;gap:6px;margin-top:1px;color:var(--text-mute);font:500 11.5px/1.4 "JetBrains Mono",ui-monospace,monospace; }
.user-tag { padding:0 6px;border-radius:4px;background:var(--surface-2);color:var(--text-dim);font:600 10.5px/1.6 inherit;font-family:inherit; }
.user-role { display:flex;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--bg-elev); }
.user-role-opt { position:relative;display:block;cursor:pointer; }
.user-role-opt input { position:absolute;width:1px;height:1px;opacity:0; }
.user-role-opt span { display:block;padding:4px 11px;border-radius:5px;color:var(--text-dim);font-size:12px;white-space:nowrap; }
.user-role-opt:hover span { color:var(--text); }
.user-role-opt input:checked + span { background:var(--surface-2);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--line); }
.user-role-opt input:focus-visible + span { outline:2px solid var(--c-esea);outline-offset:1px; }
.user-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding-left:44px; }
.user-field { display:flex;flex-direction:column;gap:4px;min-width:0; }
.user-field > span { color:var(--text-mute);font-size:11px;font-weight:550; }
.user-field em { margin-left:4px;color:var(--text-mute);font-style:normal;font-weight:400;opacity:.8; }
.user-row input[type="text"],.user-row input[type="email"],.user-row input[type="tel"],.user-row input[type="password"] { width:100%;min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;outline:none;background:var(--surface);color:var(--text);font:inherit;font-size:13px;transition:border-color 140ms,box-shadow 140ms; }
.user-row input::placeholder { color:var(--text-mute); }
.user-row input:focus { border-color:var(--text-mute);box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.user-row input:disabled { border-color:var(--line-soft);background:transparent;color:var(--text-dim);cursor:not-allowed; }
.user-row input[aria-invalid="true"] { border-color:color-mix(in srgb, var(--c-turnuva) 70%, var(--line)); }
.user-security { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-left:44px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface); }
.user-security .user-field > span::before { content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--text-mute);vertical-align:1px; }
.user-sessions { display:flex;flex-direction:column;align-items:flex-end;gap:4px; }
.user-sessions-hint { color:var(--text-mute);font-size:11px;text-align:right; }
.revoke-sessions { display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px solid color-mix(in srgb, var(--c-review) 45%, var(--line));border-radius:7px;background:color-mix(in srgb, var(--c-review) 8%, var(--bg-elev));color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color 140ms,border-color 140ms; }
.revoke-sessions svg { width:14px;height:14px;color:var(--c-review); }
.revoke-sessions:hover:not(:disabled) { border-color:var(--c-review);background:color-mix(in srgb, var(--c-review) 14%, var(--bg-elev)); }
.revoke-sessions:disabled { opacity:.5;cursor:not-allowed; }
.revoke-sessions:focus-visible,.user-remove:focus-visible,.user-add:focus-visible { outline:2px solid var(--c-esea);outline-offset:1px; }
.user-remove { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-mute);font:inherit;font-size:12px;cursor:pointer; }
.user-remove svg { width:15px;height:15px;flex:none; }
.user-remove span { display:none; }
.user-remove:hover:not(:disabled) { color:var(--c-turnuva);border-color:color-mix(in srgb, var(--c-turnuva) 30%, transparent);background:color-mix(in srgb, var(--c-turnuva) 8%, transparent); }
.user-remove:disabled { opacity:.3;cursor:not-allowed; }
.user-removed-note { margin-left:44px;color:var(--c-turnuva);font-size:11.5px; }
.user-removed-note[hidden] { display:none; }
.user-row.is-removed .user-avatar,.user-row.is-removed .user-identity,.user-row.is-removed .user-role,.user-row.is-removed .user-fields,.user-row.is-removed .user-security { opacity:.4; }
.user-row.is-removed .user-display { text-decoration:line-through; }
.user-row.is-removed .user-remove { width:auto;padding:0 10px;border-color:var(--line);color:var(--text); }
.user-row.is-removed .user-remove svg { display:none; }
.user-row.is-removed .user-remove span { display:inline; }
.user-add { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:12px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:color 140ms,border-color 140ms,background-color 140ms; }
.user-add svg { width:14px;height:14px; }
.user-add:hover { border-color:var(--text-mute);background:var(--surface);color:var(--text); }
.users-modal-foot { align-items:center;padding:14px 20px; }
.users-foot-note { color:var(--text-mute);font-size:11.5px; }
@media (max-width:640px) {
  .users-modal-head,.users-modal-body,.users-modal-foot { padding-inline:16px; }
  .users-roles { grid-template-columns:minmax(0,1fr); }
  .users-roles div + div { border-left:0;border-top:1px solid var(--line-soft); }
  .user-head { grid-template-columns:32px minmax(0,1fr) auto; }
  .user-role { grid-column:1 / -1;grid-row:2; }
  .user-role-opt { flex:1; }
  .user-role-opt span { padding:7px 10px;text-align:center; }
  .user-fields { grid-template-columns:minmax(0,1fr);padding-left:0; }
  .user-security { grid-template-columns:minmax(0,1fr);margin-left:0; }
  .user-sessions { align-items:stretch; }
  .user-sessions-hint { text-align:left; }
  .revoke-sessions { justify-content:center;min-height:40px; }
  .user-removed-note { margin-left:0; }
  .user-remove { width:40px;height:40px; }
}