/* ─── Design tokens ─────────────────────────────────── */
  :root {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f5f5f7;
    --border: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.1);
    --text: #0a0a0a;
    --text-2: #525252;
    --text-3: #a3a3a3;

    --brand-red: #DC2626;
    --brand-blue: #1E40AF;
    --brand-blue-soft: #EEF2FF;

    --green: #10B981;
    --green-soft: #ECFDF5;
    --yellow: #F59E0B;
    --yellow-soft: #FFFBEB;
    --red: #EF4444;
    --red-soft: #FEF2F2;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);

    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;

    --sidebar-w: 248px;

    --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  /* ─── Reset ─────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
    overflow-x: hidden;
  }
  button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; touch-action: manipulation; }
  button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 8px; }
  a { color: inherit; text-decoration: none; }

  /* ─── App shell ─────────────────────────────────── */
  .app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
  }

  .app.mode-login {
    display: block;
    background:
      radial-gradient(circle at 18% 22%, rgba(220, 38, 38, 0.16), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(30, 64, 175, 0.16), transparent 30%),
      linear-gradient(135deg, #ffffff 0%, #f7f8fb 46%, #eef2ff 100%);
  }

  .login-shell {
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 28px;
    width: min(1040px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 34px 0;
  }

  .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .login-brand-title {
    font-size: 16px;
    font-weight: 800;
  }

  .login-brand-sub {
    font-size: 12.5px;
    color: var(--text-2);
  }

  .login-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
    gap: 24px;
    align-items: stretch;
    border: 1px solid rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.72);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    padding: 22px;
    backdrop-filter: blur(18px);
  }

  .login-copy {
    border-radius: 16px;
    padding: 34px;
    color: #fff;
    background:
      linear-gradient(145deg, rgba(10,10,10,0.78), rgba(30,64,175,0.88)),
      linear-gradient(45deg, rgba(220,38,38,0.8), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
  }

  .login-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.72);
    margin-bottom: 12px;
  }

  .login-copy h1 {
    font-size: 42px;
    line-height: 1;
    margin: 0 0 14px;
  }

  .login-copy p {
    max-width: 520px;
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 15px;
  }

  .login-form {
    display: grid;
    gap: 14px;
    align-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
  }

  .login-form label {
    display: grid;
    gap: 7px;
    color: var(--text-2);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .login-form input {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 13px 14px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
  }

  .login-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
  }

  .login-error {
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: var(--red-soft);
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .login-submit {
    min-height: 46px;
    border-radius: 10px;
    background: var(--text);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
  }

  .login-submit:disabled {
    opacity: 0.64;
    cursor: wait;
  }

  /* Sidebar (desktop) */
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  .brand {
    padding: 4px 10px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .brand-mark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
    position: relative;
    flex-shrink: 0;
  }
  .brand-mark::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 5px;
    background: var(--surface);
    opacity: 0;
  }
  .brand-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .brand-name small {
    display: block;
    font-weight: 400;
    color: var(--text-3);
    font-size: 11px;
  }
  .nav-section {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    padding: 14px 10px 6px;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-2);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    width: 100%;
    text-align: left;
    position: relative;
  }
  .nav-item:hover { background: var(--surface-2); color: var(--text); }
  .nav-item.active {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
  }
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--brand-red), var(--brand-blue));
  }
  .nav-icon {
    width: 18px; height: 18px;
    stroke-width: 1.75;
    flex-shrink: 0;
  }
  .nav-badge {
    margin-left: auto;
    font-size: 11px;
    background: var(--red);
    color: white;
    border-radius: 999px;
    padding: 1px 7px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 12px 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    color: var(--brand-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.04);
  }
  .avatar.blue { background: linear-gradient(135deg, #c7d2fe, #a5b4fc); color: var(--brand-blue); }
  .avatar.green { background: linear-gradient(135deg, #a7f3d0, #6ee7b7); color: #047857; }
  .avatar.orange { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #b45309; }
  .avatar.purple { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #6d28d9; }
  .avatar.pink { background: linear-gradient(135deg, #fbcfe8, #f9a8d4); color: #be185d; }
  .avatar.teal { background: linear-gradient(135deg, #99f6e4, #5eead4); color: #0f766e; }

  .user-info { line-height: 1.2; min-width: 0; }
  .user-info .name { font-weight: 600; font-size: 13px; }
  .user-info .role { font-size: 11.5px; color: var(--text-3); }

  /* ─── Content ─────────────────────────────────── */
  .content {
    min-width: 0;
    padding: 0;
    padding-bottom: 80px;
  }
  .page {
    display: none;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 32px 60px;
    animation: fadeIn 0.3s ease;
  }
  .page.active { display: block; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .page-head {
    margin-bottom: 24px;
  }
  .page-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .page-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 4px;
  }
  .page-subtitle {
    color: var(--text-2);
    font-size: 14.5px;
    margin: 0;
  }

  /* ─── Cards ─────────────────────────────────── */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
  }
  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .card-title {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin: 0;
  }
  .card-action {
    font-size: 12.5px;
    color: var(--brand-blue);
    font-weight: 500;
  }
  .card-action:hover { text-decoration: underline; }

  /* ─── Grid ─────────────────────────────────── */
  .grid { display: grid; gap: 16px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  /* ─── Pulse strip ─────────────────────────────────── */
  .pulse {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .pulse-chip {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
  }
  .pulse-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
  }
  .pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    opacity: 0.2;
  }
  .pulse-dot.red { background: var(--red); }
  .pulse-dot.red::after { background: var(--red); }
  .pulse-dot.yellow { background: var(--yellow); }
  .pulse-dot.yellow::after { background: var(--yellow); }
  .pulse-dot.green { background: var(--green); }
  .pulse-dot.green::after { background: var(--green); }
  .pulse-count {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .pulse-label {
    font-size: 11.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* ─── Risk list item ─────────────────────────────────── */
  .risk-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 8px;
  }
  .risk-item:hover { background: var(--surface-2); }
  .risk-item:last-child { border-bottom: none; padding-bottom: 0; }
  .risk-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
  }
  .risk-dot.red { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
  .risk-dot.yellow { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
  .risk-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
  .risk-body { flex: 1; min-width: 0; }
  .risk-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .risk-meta {
    font-size: 12.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .risk-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); opacity: 0.5; }

  /* ─── Approval item ─────────────────────────────────── */
  .approval {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .approval:last-child { border-bottom: none; padding-bottom: 0; }
  .approval-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
  .approval-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
  .approval-actions { display: flex; gap: 8px; }
  .btn-sm {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.15s;
    border: 1px solid var(--border-strong);
    background: var(--surface);
  }
  .btn-sm:hover { background: var(--surface-2); }
  .btn-sm.primary { background: var(--text); color: white; border-color: var(--text); }
  .btn-sm.primary:hover { background: #262626; }

  /* ─── Dept row ─────────────────────────────────── */
  .dept-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: 8px;
    margin: 0 -6px;
    padding-left: 6px;
    padding-right: 6px;
    transition: background 0.15s;
  }
  .dept-row:hover { background: var(--surface-2); }
  .dept-row:last-child { border-bottom: none; }
  .dept-name { flex: 1; font-weight: 500; font-size: 14px; }
  .dept-score {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    min-width: 60px;
    text-align: right;
  }

  /* ─── KPI tile ─────────────────────────────────── */
  .kpi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
  }
  .kpi-row:last-child { border-bottom: none; }
  .kpi-label { font-size: 13.5px; color: var(--text-2); }
  .kpi-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .kpi-delta {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 8px;
  }
  .kpi-delta.up { color: #047857; background: var(--green-soft); }
  .kpi-delta.down { color: #b91c1c; background: var(--red-soft); }

  /* ─── Project row ─────────────────────────────────── */
  .project-row {
    display: grid;
    grid-template-columns: 14px 1fr 180px 80px;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    transition: background 0.15s;
  }
  .project-row:hover { background: var(--surface-2); }
  .project-row:last-child { border-bottom: none; }
  .project-name { font-weight: 600; font-size: 14px; }
  .project-meta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
  .progress {
    height: 6px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .progress-bar.green { background: linear-gradient(90deg, #059669, #10B981); }
  .progress-bar.yellow { background: linear-gradient(90deg, #D97706, #F59E0B); }
  .progress-bar.red { background: linear-gradient(90deg, #DC2626, #EF4444); }
  .project-due {
    font-size: 12.5px;
    color: var(--text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Record button + EOD ─────────────────────────────────── */
  .record-stage {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }
  .record-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(220, 38, 38, 0.03), transparent 60%);
    pointer-events: none;
  }
  .record-btn {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    box-shadow: 0 8px 30px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    position: relative;
    margin-bottom: 20px;
  }
  .record-btn:hover { transform: scale(1.04); }
  .record-btn:active { transform: scale(0.98); }
  .record-btn.recording {
    background: linear-gradient(135deg, #7F1D1D, #450A0A);
    animation: recordPulse 1.4s ease-in-out infinite;
  }
  @keyframes recordPulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(220,38,38,0.3), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 0 rgba(220,38,38,0.4); }
    50% { box-shadow: 0 8px 30px rgba(220,38,38,0.3), inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 16px rgba(220,38,38,0); }
  }
  .record-icon {
    width: 34px; height: 34px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
  }
  .record-btn.recording .record-icon {
    border-radius: 6px;
    width: 28px; height: 28px;
  }
  .record-label {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .record-hint {
    font-size: 13.5px;
    color: var(--text-3);
  }
  .record-timer {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
  }

  /* Waveform */
  .waveform {
    display: none;
    height: 44px;
    margin: 16px auto 20px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    max-width: 280px;
  }
  .waveform.active { display: flex; }
  .wave-bar {
    width: 3px;
    background: linear-gradient(180deg, var(--brand-red), var(--brand-blue));
    border-radius: 999px;
    animation: waveAnim 0.9s ease-in-out infinite;
  }
  @keyframes waveAnim {
    0%, 100% { height: 8px; }
    50% { height: 36px; }
  }

  /* Processing */
  .processing {
    display: none;
    padding: 40px 24px;
    text-align: center;
  }
  .processing.active { display: block; }
  .processing-bar {
    height: 3px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    max-width: 280px;
    margin: 20px auto 0;
    position: relative;
  }
  .processing-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--brand-blue), transparent);
    animation: shimmer 1.3s ease-in-out infinite;
  }
  @keyframes shimmer {
    to { left: 100%; }
  }

  /* EOD review */
  .eod-review { display: none; }
  .eod-review.active { display: block; }
  .eod-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .eod-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .eod-section-emoji { font-size: 16px; }
  .eod-section-title {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
  }
  .eod-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .eod-item:last-child { border-bottom: none; padding-bottom: 0; }
  .eod-item:first-child { padding-top: 0; }
  .eod-bullet {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--text-3);
    margin-top: 9px;
    flex-shrink: 0;
  }
  .eod-text { flex: 1; font-size: 14px; }
  .eod-edit {
    color: var(--text-3);
    padding: 4px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
  }
  .eod-item:hover .eod-edit { opacity: 1; }
  .eod-edit:hover { background: var(--surface-2); color: var(--text); }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .badge.red { background: var(--red-soft); color: #b91c1c; }
  .badge.yellow { background: var(--yellow-soft); color: #b45309; }
  .badge.green { background: var(--green-soft); color: #047857; }

  .kpi-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .kpi-tile {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .kpi-tile-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }
  .kpi-tile-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .submit-bar {
    display: flex;
    gap: 10px;
    margin-top: 18px;
  }
  .btn {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.15s;
    border: 1px solid var(--border-strong);
    background: var(--surface);
  }
  .btn:hover { background: var(--surface-2); }
  .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .btn:disabled:hover { background: var(--surface); }
  .btn.primary {
    background: var(--text);
    color: white;
    border-color: var(--text);
    flex: 1;
  }
  .btn.primary:hover { background: #262626; }

  /* ─── Projects detail ─────────────────────────────────── */
  .project-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .project-head h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .project-head .meta { font-size: 13px; color: var(--text-2); }

  .timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 8px;
  }
  .tl-stage {
    flex: 1;
    text-align: center;
    position: relative;
  }
  .tl-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    margin: 0 auto 8px;
    position: relative;
    z-index: 1;
  }
  .tl-stage.done .tl-dot { background: var(--green); border-color: var(--green); }
  .tl-stage.active .tl-dot { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }
  .tl-stage.done .tl-dot::after,
  .tl-stage.active .tl-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 100%;
    width: 100%;
    height: 2px;
    background: var(--green);
    transform: translateY(-50%);
  }
  .tl-stage.active .tl-dot::after { background: var(--border); }
  .tl-stage:last-child .tl-dot::after { display: none; }
  .tl-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
  }
  .tl-stage.active .tl-name { color: var(--text); font-weight: 600; }
  .tl-date { font-size: 11px; color: var(--text-3); margin-top: 2px; }

  .activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .activity-item:last-child { border-bottom: none; padding-bottom: 0; }
  .activity-date {
    font-size: 11.5px;
    color: var(--text-3);
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
  }
  .activity-body { flex: 1; font-size: 13.5px; }
  .activity-body strong { font-weight: 600; }

  /* ─── Departments ─────────────────────────────────── */
  .dept-card {
    display: block;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
  }
  .dept-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .dept-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .dept-card-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
  .dept-card-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
  .dept-card-score {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .team-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .team-row:last-child { border-bottom: none; }
  .team-name { font-weight: 500; font-size: 14px; flex: 1; }
  .team-role { font-size: 11.5px; color: var(--text-3); }
  .team-stat { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

  /* ─── EOD history ─────────────────────────────────── */
  .history-day-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin: 20px 0 10px;
  }
  .history-day-label:first-child { margin-top: 0; }
  .hist-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .hist-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .hist-body { flex: 1; min-width: 0; }
  .hist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .hist-name { font-weight: 600; font-size: 14px; }
  .hist-dept { font-size: 12px; color: var(--text-3); }
  .hist-snippet { font-size: 13px; color: var(--text-2); line-height: 1.5; }

  /* ─── Filters ─────────────────────────────────── */
  .filters {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .chip {
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    font-weight: 500;
    transition: all 0.15s;
  }
  .chip:hover { background: var(--surface-2); }
  .chip.active { background: var(--text); color: white; border-color: var(--text); }

  /* ─── Mobile nav ─────────────────────────────────── */
  .mobile-tabs {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
    display: none;
  }
  .mobile-tabs.visible { display: flex; }
  .m-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--text-3);
    font-size: 10px;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.15s;
  }
  .m-tab.active { color: var(--text); }
  .m-tab svg { width: 22px; height: 22px; stroke-width: 1.75; }
  .m-tab.record {
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    color: white;
    margin: 0 4px;
    max-width: 56px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  }
  .m-tab.record svg { width: 24px; height: 24px; stroke-width: 2; }
  .m-tab.record.active { color: white; }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 88px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(.2,.8,.2,1);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

  /* ─── Welcome banner ─────────────────────────────────── */
  .welcome-banner {
    background: linear-gradient(135deg, #1E40AF, #3730A3);
    color: white;
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.2);
    position: relative;
    overflow: hidden;
  }
  .welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
  }
  .welcome-banner-body { flex: 1; position: relative; }
  .welcome-banner-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
  .welcome-banner-text { font-size: 13px; opacity: 0.9; line-height: 1.5; }
  .welcome-banner-actions { display: flex; gap: 8px; margin-top: 10px; position: relative; }
  .welcome-btn {
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    background: white;
    color: var(--brand-blue);
    transition: transform 0.15s;
  }
  .welcome-btn:hover { transform: translateY(-1px); }
  .welcome-btn.ghost {
    background: rgba(255,255,255,0.15);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
  }
  .welcome-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
  }
  .welcome-close:hover { background: rgba(255,255,255,0.25); }

  /* ─── EOD status card ─────────────────────────────────── */
  .eod-status {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
  }
  .eod-status.pending {
    background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
    border-color: #FCD34D;
  }
  .eod-status-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.15);
    color: #B45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
  }
  .eod-status-body { flex: 1; min-width: 0; }
  .eod-status-title { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
  .eod-status-sub { font-size: 12.5px; color: var(--text-2); }
  .eod-status-btn {
    background: var(--text);
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 10px;
    transition: transform 0.15s;
    flex-shrink: 0;
  }
  .eod-status-btn:hover { transform: translateY(-1px); }

  /* ─── Mode picker (EOD entry) ─────────────────────────────────── */
  .mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
  }
  .mode-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .mode-card:hover {
    border-color: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .mode-card.recommended::after {
    content: 'Recommended';
    position: absolute;
    top: 12px; right: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
    padding: 3px 8px;
    border-radius: 999px;
  }
  .mode-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 20px;
  }
  .mode-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
  }
  .mode-desc {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .mode-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 10px;
    font-weight: 500;
  }

  /* ─── Guided flow ─────────────────────────────────── */
  .guided-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .guided-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
  }
  .guided-back:hover { background: var(--surface-2); color: var(--text); }
  .guided-counter {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .guided-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
  }
  .guided-progress-dot {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--surface-2);
    transition: background 0.3s;
  }
  .guided-progress-dot.done {
    background: linear-gradient(90deg, var(--brand-red), var(--brand-blue));
  }
  .guided-progress-dot.current {
    background: var(--text);
  }
  .guided-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-sm);
    min-height: 440px;
    display: flex;
    flex-direction: column;
  }
  .eod-guided-card {
    min-height: 0;
    margin-bottom: 18px;
  }
  .guided-step-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-blue);
    margin-bottom: 8px;
  }
  .guided-question {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .guided-sub {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .guided-example {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 24px;
    border-left: 3px solid var(--brand-blue);
  }
  .guided-example-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    margin-bottom: 4px;
  }

  .mini-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: auto 0 20px;
    padding: 20px 0;
  }
  .mini-record-btn {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
  }
  .mini-record-btn:hover { transform: scale(1.05); }
  .mini-record-btn.recording {
    animation: recordPulse 1.4s ease-in-out infinite;
  }
  .mini-record-icon {
    width: 24px; height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
  }
  .mini-record-btn.recording .mini-record-icon {
    width: 22px; height: 22px;
    border-radius: 5px;
  }
  .mini-record-label {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
  }
  .mini-timer {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }

  .captured {
    background: linear-gradient(135deg, var(--green-soft), #F0FDF4);
    border: 1px solid #A7F3D0;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: auto 0 20px;
  }
  .eod-guided-card .captured {
    margin: 0 0 16px;
  }
  .captured-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .captured-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--green);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
  }
  .captured-title {
    font-weight: 600;
    font-size: 13px;
    color: #047857;
  }
  .captured-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 12px;
  }
  .captured-actions {
    display: flex;
    gap: 8px;
  }

  .guided-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .guided-textarea {
    min-height: 150px;
    margin-bottom: 14px;
  }
  .guided-skip {
    font-size: 13.5px;
    color: var(--text-3);
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 8px;
  }
  .guided-skip:hover { color: var(--text-2); background: var(--surface-2); }
  .guided-next {
    background: var(--text);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, background 0.15s;
  }
  .guided-next:hover { background: #262626; transform: translateX(2px); }
  .guided-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .guided-next:disabled:hover { transform: none; background: var(--text); }

  /* KPI quick-entry */
  .kpi-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .kpi-input-tile {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    border: 1.5px solid transparent;
    transition: border-color 0.15s;
  }
  .kpi-input-tile:focus-within {
    border-color: var(--brand-blue);
    background: var(--surface);
  }
  .kpi-input-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    font-weight: 600;
  }
  .kpi-input {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: var(--text);
    padding: 0;
  }
  .kpi-input::placeholder { color: var(--text-3); opacity: 0.5; }

  /* Manual form */
  .manual-field { margin-bottom: 14px; }
  .manual-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
  }
  .manual-required { color: var(--red); font-size: 11px; font-weight: 500; }
  .manual-textarea {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    background: var(--surface);
    resize: vertical;
    min-height: 72px;
    transition: border-color 0.15s;
  }
  .manual-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px var(--brand-blue-soft);
  }

  /* ─── Splash screen ─────────────────────────────────── */
  .splash {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    display: none;
    flex-direction: column;
    padding: 24px 32px;
    overflow-y: auto;
  }
  .app.mode-splash .splash { display: flex; }
  .splash-header { display: flex; align-items: center; gap: 10px; }
  .splash-header-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .splash-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    padding: 40px 0;
  }
  .splash-title {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
    text-align: center;
    line-height: 1.05;
  }
  .splash-sub {
    font-size: 17px;
    color: var(--text-2);
    margin: 0 0 44px;
    text-align: center;
  }
  .splash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
  }
  .splash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: left;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .splash-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .splash-card::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    pointer-events: none;
  }
  .splash-card.leader::before {
    background: radial-gradient(circle, rgba(220,38,38,0.1), transparent 65%);
  }
  .splash-card.pm::before {
    background: radial-gradient(circle, rgba(30,64,175,0.1), transparent 65%);
  }
  .splash-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
    color: white;
    position: relative;
  }
  .splash-card.leader .splash-icon {
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    box-shadow: 0 8px 22px rgba(220,38,38,0.25);
  }
  .splash-card.pm .splash-icon {
    background: linear-gradient(135deg, var(--brand-blue), #312E81);
    box-shadow: 0 8px 22px rgba(30,64,175,0.25);
  }
  .splash-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-bottom: 6px;
    position: relative;
  }
  .splash-card-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    position: relative;
  }
  .splash-card-desc {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 24px;
    position: relative;
  }
  .splash-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--text-2);
    position: relative;
  }
  .splash-card-bullets li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }
  .splash-card-bullets li::before {
    content: '✓';
    color: var(--green);
    font-weight: 700;
    font-size: 12px;
  }
  .splash-card-cta {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
  }
  .splash-card.leader .splash-card-cta { color: var(--brand-red); }
  .splash-card.pm .splash-card-cta { color: var(--brand-blue); }
  .splash-footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text-3);
  }

  /* ─── Leader home ─────────────────────────────────── */
  .leader-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .app.mode-leader .leader-topbar { display: flex; }
  .app:not(.mode-leader) .leader-topbar { display: none; }
  .leader-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .leader-nav-btn {
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .leader-nav-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
  }
  .leader-nav-btn.active {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
  }
  .leader-nav-btn.subtle {
    color: var(--text-3);
    background: transparent;
  }
  .switch-role-btn {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    padding: 7px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
  }
  .switch-role-btn:hover { background: var(--surface-2); color: var(--text); }

  .leader-hero {
    padding: 32px 24px 24px;
    max-width: 640px;
    margin: 0 auto;
  }
  .leader-greeting {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .leader-date {
    font-size: 14.5px;
    color: var(--text-2);
    margin: 0 0 24px;
  }

  .leader-eod-card {
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    border-radius: 20px;
    padding: 24px 24px 22px;
    color: white;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(220,38,38,0.25);
    transition: transform 0.2s;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
  }
  .leader-eod-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
  }
  .leader-eod-card:hover { transform: translateY(-2px); }
  .leader-eod-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    position: relative;
  }
  .leader-eod-body { flex: 1; position: relative; min-width: 0; }
  .leader-eod-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .leader-eod-sub {
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.5;
  }
  .leader-eod-arrow {
    font-size: 22px;
    opacity: 0.9;
    position: relative;
    flex-shrink: 0;
  }

  .leader-eod-card.done {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 12px 30px rgba(5,150,105,0.2);
  }

  .status-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .status-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .status-tile-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 6px;
  }
  .status-tile-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }

  .why-red {
    background: var(--red-soft);
    border: 1px solid #FECACA;
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 13px;
    color: #991B1B;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .why-red strong { font-weight: 700; }
  .status-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 18px;
  }

  /* ─── Mode visibility ─────────────────────────────────── */
  .app:not(.mode-pm) .sidebar { display: none; }
  .app:not(.mode-pm) .mobile-tabs { display: none !important; }
  .app:not(.mode-pm) .mobile-header { display: none; }
  .app.mode-splash { grid-template-columns: 1fr; }
  .app.mode-leader {
    display: block;
    min-height: 100vh;
  }
  .app.mode-leader .content {
    min-height: calc(100vh - 64px);
    padding-bottom: 40px;
  }
  /* In leader mode, pages visible are leader-home, eod, and history only.
     PM-only pages are force-hidden even if somehow activated. */
  .app.mode-leader #page-dashboard { display: none !important; }
  /* In PM mode, hide the leader-only home */
  .app:not(.mode-leader) #page-leader-home { display: none !important; }

  /* ─── Unified EOD form ─────────────────────────────────── */
  .eod-intro {
    background: linear-gradient(135deg, var(--brand-blue-soft) 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .eod-intro-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand-blue);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
  }
  .eod-intro-body { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.55; }
  .eod-intro-body strong { color: var(--text); font-weight: 600; }

  .form-field {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .form-field:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px var(--brand-blue-soft), var(--shadow-sm);
  }
  .form-field.has-voice {
    background: linear-gradient(to bottom, var(--surface), #FEF7F7 100%);
    border-color: #FECACA;
  }
  .form-field-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .form-field-emoji {
    font-size: 18px;
  }
  .form-field-title {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .form-field-required {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .form-field-optional {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .form-field-prompt {
    font-size: 13.5px;
    color: var(--text-2);
    margin-bottom: 10px;
    line-height: 1.5;
  }
  .form-field-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }
  .example-chip {
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
  }
  .example-chip:hover {
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
    border-color: #C7D2FE;
  }
  .form-textarea {
    width: 100%;
    min-height: 72px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    background: var(--surface);
    resize: vertical;
    transition: border-color 0.15s;
  }
  .form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
  }
  .form-textarea::placeholder { color: var(--text-3); }
  .form-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    background: var(--surface);
    transition: border-color 0.15s;
  }
  .form-input:focus {
    outline: none;
    border-color: var(--brand-blue);
  }
  .form-input::placeholder { color: var(--text-3); }
  .voice-note {
    margin-top: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--green-soft), #F0FDF4);
    border: 1px solid #A7F3D0;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: #047857;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .voice-note-check {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
  }

  /* KPI field row */
  .kpi-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .kpi-form-tile {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    border: 1.5px solid transparent;
    transition: all 0.15s;
  }
  .kpi-form-tile:focus-within {
    border-color: var(--brand-blue);
    background: var(--surface);
  }
  .kpi-form-tile .kpi-input {
    font-size: 20px;
  }

  /* Floating recorder */
  .floating-recorder {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 640px;
    margin: 0 auto;
    background: rgba(255,255,255,0.98);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .floating-recorder.active {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border-color: #FECACA;
  }
  .fr-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  .fr-btn:active { transform: scale(0.94); }
  .fr-btn:hover { transform: scale(1.06); }
  .fr-btn.recording { animation: recordPulse 1.4s ease-in-out infinite; }
  .fr-btn-icon {
    width: 18px; height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
    pointer-events: none;
  }
  .fr-btn.recording .fr-btn-icon {
    width: 16px; height: 16px;
    border-radius: 3px;
  }
  .fr-body { flex: 1; min-width: 0; pointer-events: none; }
  .fr-title {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .fr-sub {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.3;
  }
  .fr-active .fr-sub { color: #991B1B; font-weight: 500; }
  .fr-timer {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--brand-red);
    min-width: 40px;
    text-align: right;
  }
  .fr-wave {
    display: none;
    gap: 2px;
    align-items: center;
    height: 20px;
  }
  .fr-wave.active { display: flex; }
  .fr-wave-bar {
    width: 2px;
    background: var(--brand-red);
    border-radius: 999px;
    animation: waveAnim 0.9s ease-in-out infinite;
  }

  .submit-sticky {
    display: flex;
    gap: 10px;
    padding: 16px 0 0;
    margin-top: 18px;
    border-top: 1px solid var(--border);
  }

  /* ─── Per-field mic button ─────────────────────────────────── */
  .field-mic-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 0;
  }
  .field-mic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-red), #991B1B);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transition: transform 0.15s;
    position: relative;
    margin-top: 0;
    cursor: pointer;
  }
  .field-mic:active { transform: scale(0.92); }
  .field-mic:hover { transform: scale(1.05); }
  .field-mic svg { width: 20px; height: 20px; pointer-events: none; }
  .field-mic.recording {
    animation: recordPulse 1.4s ease-in-out infinite;
    background: linear-gradient(135deg, #7F1D1D, #450A0A);
  }
  .field-mic-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-3);
    text-align: center;
    margin-top: 4px;
    font-weight: 500;
  }
  .field-mic-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }
  .field-mic-wrap.recording .field-mic-label {
    color: var(--brand-red);
    font-weight: 600;
  }
  .form-textarea-wrap { flex: 1; position: relative; }
  .interim-text {
    position: absolute;
    left: 13px; right: 13px;
    top: 12px;
    font-size: 14px;
    color: var(--text-3);
    font-style: italic;
    pointer-events: none;
    line-height: 1.55;
    white-space: pre-wrap;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .interim-text.show { opacity: 1; }

  .mic-not-supported {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .mic-not-supported strong { color: #78350F; }

  /* ─── Command Center: EOD Submissions ─────────────────────────────────── */
  .cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cc-header-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
  }
  .cc-submission-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
  }
  .cc-stat {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cc-stat-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .cc-stat-icon.green { background: var(--green-soft); color: #047857; }
  .cc-stat-icon.red { background: var(--red-soft); color: #B91C1C; }
  .cc-stat-icon.blue { background: var(--brand-blue-soft); color: var(--brand-blue); }
  .cc-stat-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .cc-stat-label {
    font-size: 11.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 3px;
  }

  .eod-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }

  .eod-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
  }
  .eod-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .eod-card.red { border-left: 4px solid var(--red); }
  .eod-card.yellow { border-left: 4px solid var(--yellow); }
  .eod-card.green { border-left: 4px solid var(--green); }
  .eod-card.pending { background: #FAFAFA; border-style: dashed; opacity: 0.75; }

  .eod-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .eod-card-person {
    flex: 1;
    min-width: 0;
  }
  .eod-card-name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .eod-card-meta {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 1px;
  }
  .eod-card-time {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
  }
  .eod-card-time-strong {
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
    display: block;
  }

  .eod-card-body {
    padding: 14px 16px 16px;
  }

  .eod-card-summary {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.42;
    font-weight: 520;
  }

  .eod-exec-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
  }

  .eod-mini-section {
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .eod-mini-section:last-child { margin-bottom: 0; }
  .eod-mini-section-emoji {
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
  }
  .eod-mini-section-label {
    color: var(--text-3);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
  }
  .eod-mini-section.highlight {
    background: var(--red-soft);
    padding: 6px 10px;
    border-radius: 8px;
  }
  .eod-mini-section.highlight .eod-mini-section-label { color: #B91C1C; }

  .report-signal-toggle {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    padding-top: 8px;
  }
  .report-signal-toggle summary {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    list-style: none;
    text-transform: uppercase;
  }
  .report-signal-toggle summary::-webkit-details-marker { display: none; }
  .report-signal-toggle summary::after {
    content: "+";
    float: right;
  }
  .report-signal-toggle[open] summary {
    margin-bottom: 8px;
  }
  .report-signal-toggle[open] summary::after {
    content: "-";
  }

  .eod-viz-strip {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .eod-viz-pill {
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-2);
  }
  .eod-viz-pill.red { background: var(--red-soft); color: #B91C1C; }
  .eod-viz-pill.yellow { background: var(--yellow-soft); color: #B45309; }
  .eod-viz-pill.green { background: var(--green-soft); color: #047857; }
  .eod-viz-pill.blue { background: var(--brand-blue-soft); color: var(--brand-blue); }

  /* Pending card */
  .eod-card.pending .eod-card-body {
    text-align: center;
    padding: 20px 16px;
  }
  .eod-pending-text {
    font-size: 13px;
    color: var(--text-3);
  }
  .eod-pending-nudge {
    margin-top: 10px;
    font-size: 12px;
    color: var(--brand-blue);
    font-weight: 600;
    cursor: pointer;
  }
  .eod-pending-nudge:hover { text-decoration: underline; }

  /* KPI mini bars (per-card) */
  .kpi-mini-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  .kpi-mini-row.executive {
    margin: 0 0 10px;
  }
  .kpi-mini {
    flex: 1;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
  }
  .kpi-mini-label {
    font-size: 9.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .kpi-mini-val {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .kpi-mini-bar {
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
  }
  .kpi-mini-bar-fill {
    height: 100%;
    border-radius: 999px;
  }
  .kpi-mini-bar-fill.green { background: var(--green); }
  .kpi-mini-bar-fill.yellow { background: var(--yellow); }
  .kpi-mini-bar-fill.red { background: var(--red); }

  /* Aggregate viz strip for command center top */
  .cc-viz-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  .cc-viz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .owner-brief-card {
    margin-bottom: 18px;
  }
  .owner-command-flow {
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
  }
  .exec-command {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
  }
  .operating-board {
    display: grid;
    gap: 16px;
  }
  .board-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .board-metric {
    min-height: 108px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    text-align: left;
    display: grid;
    align-content: space-between;
    gap: 8px;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
  }
  .board-metric:hover,
  .board-metric.active {
    border-color: var(--brand-blue);
    transform: translateY(-1px);
  }
  .board-metric.warn { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.22); }
  .board-metric.alert { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.22); }
  .board-metric.audio { background: var(--brand-blue-soft); border-color: #c7d2fe; }
  .board-metric span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .board-metric strong {
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 1;
  }
  .board-metric small {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
  }
  .daily-brief {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 16px;
  }
  .daily-brief-main {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 10px;
  }
  .daily-brief-title {
    margin: 0;
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: 0;
  }
  .daily-brief-actions audio {
    width: min(420px, 100%);
  }
  .brief-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .brief-signal {
    min-height: 96px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    align-content: space-between;
    gap: 8px;
  }
  .brief-signal.green { background: var(--green-soft); border-color: rgba(16, 185, 129, 0.2); }
  .brief-signal.red { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.22); }
  .brief-signal.blue { background: var(--brand-blue-soft); border-color: #c7d2fe; }
  .brief-signal.yellow { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.24); }
  .brief-signal span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .brief-signal strong {
    font-size: 13px;
    line-height: 1.35;
  }
  .board-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
  }
  .board-toolbar .filters {
    margin-bottom: 0;
  }
  .executive-board {
    display: grid;
    gap: 12px;
  }
  .executive-lane {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
  }
  .executive-lane.attention {
    border-left-color: var(--yellow);
  }
  .executive-lane > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    list-style: none;
    cursor: pointer;
  }
  .executive-lane > summary::-webkit-details-marker { display: none; }
  .executive-lane-title {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .executive-lane-title strong {
    font-size: 16px;
    letter-spacing: 0;
  }
  .executive-lane-title span {
    color: var(--text-2);
    font-size: 12.5px;
  }
  .executive-lane-pulse {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .executive-update-strip {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--surface-2);
  }
  .executive-update-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px;
  }
  .executive-update-row strong {
    font-size: 13px;
    line-height: 1.35;
  }
  .executive-update-row small {
    color: var(--text-3);
    font-size: 12px;
  }
  .manager-table {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }
  .manager-table.standalone {
    margin-top: 0;
  }
  .manager-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.5fr) 82px;
    gap: 12px;
    align-items: stretch;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: 8px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
  }
  .manager-row:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: #fff;
  }
  .manager-row.yellow { border-left-color: var(--yellow); }
  .manager-row.red { border-left-color: var(--red); }
  .manager-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .manager-person > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .manager-person strong {
    font-size: 14px;
    line-height: 1.2;
  }
  .manager-person span {
    color: var(--text-2);
    font-size: 12px;
  }
  .manager-snapshot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .manager-snapshot span {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.35;
    min-height: 64px;
  }
  .manager-snapshot strong {
    display: block;
    color: var(--text);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .manager-score {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border-left: 1px solid var(--border);
  }
  .manager-score strong {
    font-family: var(--font-mono);
    font-size: 24px;
    line-height: 1;
  }
  .exec-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 14px;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-md);
  }
  .exec-hero-main {
    min-width: 0;
  }
  .exec-score-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .exec-score {
    min-height: 86px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 12px;
    text-align: left;
    display: grid;
    align-content: space-between;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
  }
  .exec-score:hover,
  .exec-score.active {
    border-color: var(--brand-blue);
    background: #fff;
    transform: translateY(-1px);
  }
  .exec-score.warn {
    background: var(--yellow-soft);
    border-color: rgba(245, 158, 11, 0.18);
  }
  .exec-score.alert {
    background: var(--red-soft);
    border-color: rgba(239, 68, 68, 0.2);
  }
  .exec-score.audio {
    background: var(--brand-blue-soft);
    border-color: #c7d2fe;
  }
  .exec-score span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .exec-score strong {
    font-family: var(--font-mono);
    font-size: 28px;
    line-height: 1;
  }
  .exec-ring-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 172px;
    text-align: center;
  }
  .brief-toggle {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 10px 12px;
  }
  .brief-toggle summary {
    display: grid;
    gap: 3px;
    list-style: none;
    cursor: pointer;
  }
  .brief-toggle summary::-webkit-details-marker { display: none; }
  .brief-toggle summary span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .brief-toggle summary strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
  }
  .brief-toggle p {
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.48;
    margin: 10px 0;
  }
  .signal-strip {
    gap: 10px;
  }
  .people-board {
    display: grid;
    gap: 12px;
  }
  .cc-header.compact {
    margin-bottom: 0;
  }
  .person-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .person-report-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
  }
  .person-report-group.yellow { border-left-color: var(--yellow); }
  .person-report-group.red { border-left-color: var(--red); }
  .person-report-group > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
  }
  .person-report-group > summary::-webkit-details-marker { display: none; }
  .person-group-main {
    min-width: 0;
    flex: 1;
  }
  .person-group-name {
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .person-group-meta {
    color: var(--text-3);
    font-size: 12px;
    margin-top: 1px;
  }
  .person-group-score {
    width: 58px;
    height: 48px;
    border-radius: 8px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    align-content: center;
  }
  .person-group-score span {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
  }
  .person-group-score small {
    color: var(--text-3);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .person-group-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 8px;
  }
  .person-health-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .person-health-bar > div {
    height: 100%;
    border-radius: inherit;
  }
  .person-health-bar .green { background: var(--green); }
  .person-health-bar .yellow { background: var(--yellow); }
  .person-health-bar .red { background: var(--red); }
  .person-report-group .eod-card {
    box-shadow: none;
  }
  .person-more-reports {
    margin-top: 10px;
  }
  .person-more-reports > summary {
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
  }
  .person-more-reports > summary::-webkit-details-marker { display: none; }
  .person-more-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
  }
  .exec-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .insight-stack {
    display: grid;
    gap: 8px;
  }
  .insight-stack .insight-card {
    margin: 0;
  }
  .owner-brief-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
    gap: 18px;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-md);
  }
  .owner-brief-main {
    min-width: 0;
    display: grid;
    align-content: center;
  }
  .owner-brief-kicker {
    color: var(--brand-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .owner-brief-title {
    margin: 0 0 10px;
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .owner-brief-actions {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr);
    align-items: start;
    margin-top: 14px;
  }
  .owner-audio-brief {
    display: grid;
    gap: 7px;
  }
  .owner-audio-brief span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .owner-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .owner-metric {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    min-height: 104px;
    display: grid;
    align-content: space-between;
  }
  .owner-metric span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .owner-metric strong {
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .owner-metric small {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 650;
  }
  .owner-metric.alert { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.24); }
  .owner-metric.warn { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.26); }
  .owner-metric.audio { background: var(--brand-blue-soft); border-color: #c7d2fe; }
  .owner-brief-grid-prominent {
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .owner-brief-tile.green { background: var(--green-soft); border-color: rgba(16, 185, 129, 0.2); }
  .owner-brief-tile.red { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.22); }
  .owner-brief-tile.blue { background: var(--brand-blue-soft); border-color: #c7d2fe; }
  .owner-brief-tile.yellow { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.24); }
  .owner-priority-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 16px;
    align-items: start;
  }
  .owner-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow-sm);
  }
  .owner-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .owner-panel-sub {
    color: var(--text-2);
    font-size: 12.5px;
    margin-top: 3px;
  }
  .owner-panel-count {
    min-width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--red-soft);
    color: #b91c1c;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 18px;
  }
  .owner-panel-more {
    display: inline-flex;
    margin-top: 6px;
  }
  .owner-action-list {
    display: grid;
    gap: 8px;
  }
  .owner-action-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
  .owner-priority-pill {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .owner-priority-pill.high { background: var(--red-soft); color: #b91c1c; }
  .owner-priority-pill.normal { background: var(--brand-blue-soft); color: var(--brand-blue); }
  .owner-priority-pill.low { background: var(--green-soft); color: #047857; }
  .owner-pulse-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.85fr) minmax(260px, 0.85fr);
    gap: 14px;
  }
  .owner-bar-row {
    width: 100%;
    text-align: left;
    border-radius: 8px;
    padding: 4px;
    margin: 0 0 4px;
  }
  .owner-bar-row:hover {
    background: var(--surface-2);
  }
  .owner-coverage-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
  }
  .owner-coverage-top strong {
    font-family: var(--font-mono);
    font-size: 28px;
    line-height: 1;
  }
  .owner-coverage-top span {
    color: var(--text-2);
    font-size: 12px;
  }
  .owner-coverage-meter {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .owner-coverage-meter > div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-blue), #10b981);
  }
  .owner-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .owner-brief-summary {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 12px;
  }
  .insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .insight-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
    padding: 13px 14px;
    box-shadow: var(--shadow-sm);
  }
  .insight-card.red { border-left-color: var(--red); }
  .insight-card.yellow { border-left-color: var(--yellow); }
  .insight-card-kicker {
    font-size: 10.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .insight-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
  }
  .insight-card-detail {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .action-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
  }
  .action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .action-row:last-child { border-bottom: 0; }
  .action-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
  }
  .action-meta {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
  }
  .cc-viz-title {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin-bottom: 12px;
  }

  /* Submission ring chart (SVG) */
  .ring-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ring-chart { flex-shrink: 0; }
  .ring-info { flex: 1; }
  .ring-info-val {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .ring-info-label {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 4px;
  }
  .ring-info-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
  }

  /* Bar chart (dept risk) */
  .bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 8px;
  }
  .bar-row:last-child { margin-bottom: 0; }
  .bar-label { width: 80px; color: var(--text-2); font-weight: 500; flex-shrink: 0; font-size: 11.5px; }
  .bar-track {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(.2,.8,.2,1);
  }
  .bar-fill.red { background: linear-gradient(90deg, #DC2626, #EF4444); }
  .bar-fill.yellow { background: linear-gradient(90deg, #D97706, #F59E0B); }
  .bar-fill.green { background: linear-gradient(90deg, #059669, #10B981); }
  .bar-val {
    width: 32px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-2);
  }

  /* ─── Splash 2-card mode ─────────────────────────────────── */
  .splash-grid { grid-template-columns: 1fr 1fr; }


  /* At-risk callout */
  .at-risk-card {
    background: linear-gradient(135deg, var(--red-soft) 0%, #FFF1F2 100%);
    border: 1px solid #FECACA;
    border-left: 4px solid var(--red);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .at-risk-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--red);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
  }
  .at-risk-body { flex: 1; min-width: 0; }
  .at-risk-title {
    font-weight: 700;
    font-size: 14px;
    color: #991B1B;
    margin-bottom: 4px;
  }
  .at-risk-detail {
    font-size: 12.5px;
    color: #7F1D1D;
    line-height: 1.5;
  }

  /* ─── Free Record (whole-day capture) ─────────────────────────────────── */
  .free-record {
    background: linear-gradient(135deg, #1E40AF 0%, #312E81 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .free-record::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
  }
  .free-rec-btn {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
    position: relative;
    cursor: pointer;
    z-index: 2;
  }
  .free-rec-btn:active { transform: scale(0.94); }
  .free-rec-btn:hover { transform: scale(1.04); }
  .free-rec-btn.recording {
    animation: recordPulse 1.4s ease-in-out infinite;
    background: rgba(220, 38, 38, 0.95);
    border-color: rgba(255,255,255,0.6);
  }
  .free-record.active {
    background: linear-gradient(135deg, #991B1B 0%, #312E81 100%);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18), var(--shadow-sm);
  }
  .free-rec-icon {
    width: 24px; height: 24px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
    pointer-events: none;
  }
  .free-rec-btn.recording .free-rec-icon {
    width: 20px; height: 20px;
    border-radius: 4px;
  }
  .free-rec-body { flex: 1; position: relative; min-width: 0; }
  .free-rec-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .free-rec-sub {
    font-size: 12.5px;
    opacity: 0.85;
    line-height: 1.5;
  }
  .recording-limit {
    height: 6px;
    width: min(360px, 100%);
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    margin-top: 10px;
    overflow: hidden;
  }
  .recording-limit-bar {
    height: 100%;
    background: rgba(255,255,255,0.9);
    border-radius: inherit;
    transition: width 0.25s ease;
  }
  .free-rec-timer {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.2);
    padding: 4px 10px;
    border-radius: 8px;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
  }
  .free-record-divider {
    text-align: center;
    margin: 14px 0 18px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
  }
  .free-record-divider::before,
  .free-record-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 90px);
    height: 1px;
    background: var(--border-strong);
  }
  .free-record-divider::before { left: 0; }
  .free-record-divider::after { right: 0; }

  .recording-transcript-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: -6px 0 18px;
    box-shadow: var(--shadow-sm);
  }
  .recording-transcript-card.has-content {
    border-color: rgba(30, 64, 175, 0.24);
    background: #F8FAFF;
  }
  .free-record.active + .recording-transcript-card {
    border-color: rgba(220, 38, 38, 0.35);
    background: #FFFBFB;
  }
  .recording-transcript-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .recording-transcript-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
  }
  .recording-transcript-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
  }
  .recording-transcript-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
  }
  .recording-transcript-text {
    max-height: 180px;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
  }
  .recording-transcript-text.interim {
    color: var(--text);
    border-color: rgba(30, 64, 175, 0.24);
  }
  .recording-transcript-empty {
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.55;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px;
  }
  .recording-transcript-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 12px 0;
  }
  .recording-transcript-actions .btn.primary {
    flex: 0 1 auto;
  }
  .transcript-editor {
    min-height: 150px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
  }
  .transcription-status {
    margin: 10px 0 12px;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-2);
  }
  .transcription-status.info {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E3A8A;
  }
  .transcription-status.success {
    background: #ECFDF5;
    border-color: #BBF7D0;
    color: #166534;
  }
  .transcription-status.error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
  }

  /* Form sections — restructured for 4-section EOD */
  .eod-section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .route-card {
    border-color: var(--border-strong);
  }
  .route-card .recipient-meta {
    margin-top: 8px;
  }
  .route-select {
    max-width: 460px;
  }
  .eod-section-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .eod-section-num {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--brand-blue);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
  }
  .eod-section-title-text {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sub-field-block {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
  }
  .sub-field-block:last-child { border-bottom: none; }
  .identity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .identity-grid .sub-field-block:last-child {
    border-left: 1px solid var(--border);
  }
  .sub-field-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sub-field-required {
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--red-soft);
    padding: 2px 6px;
    border-radius: 4px;
  }
  .sub-field-prompt {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .ceo-attention-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--red-soft);
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #991B1B;
    margin-top: 10px;
    transition: all 0.15s;
  }
  .ceo-attention-toggle:hover { background: #FEE2E2; }
  .ceo-attention-toggle input { width: 16px; height: 16px; accent-color: var(--red); }
  .ceo-attention-toggle.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
  }

  /* CEO Attention banner */
  .ceo-banner {
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    color: white;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25);
    position: relative;
    overflow: hidden;
  }
  .ceo-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
  }
  .ceo-banner-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    position: relative;
  }
  .ceo-banner-body { flex: 1; min-width: 0; position: relative; }
  .ceo-banner-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
  .ceo-banner-sub {
    font-size: 12.5px;
    opacity: 0.9;
    line-height: 1.5;
  }
  .ceo-banner-count {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    background: rgba(0,0,0,0.2);
    padding: 8px 14px;
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
  }

  /* CEO Attention card list */
  .ceo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--red);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }
  .ceo-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .ceo-card-from {
    font-weight: 600;
    font-size: 13.5px;
    flex: 1;
  }
  .ceo-card-time {
    font-size: 11.5px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }
  .ceo-card-text {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 10px;
  }
  .ceo-card-recipients {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .ceo-card-recipients strong { color: var(--text-2); }
  .ceo-recipient-pill {
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
  }
  .ceo-card-actions {
    display: flex;
    gap: 8px;
  }
  .ceo-card-status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
  }
  .ceo-card-status.flagged { background: var(--red-soft); color: #b91c1c; }

  /* Settings page - exec recipients */
  .recipient-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
  }
  .recipient-info { flex: 1; min-width: 0; }
  .recipient-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .recipient-email {
    font-size: 12.5px;
    color: var(--text-2);
    font-family: var(--font-mono);
  }
  .recipient-meta {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
  }
  .recipient-role-badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .recipient-role-badge.owner { background: var(--brand-blue); color: white; }
  .recipient-role-badge.admin { background: var(--text); color: white; }
  .recipient-role-badge.exec { background: var(--brand-blue-soft); color: var(--brand-blue); }
  .recipient-remove {
    color: var(--text-3);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .recipient-remove:hover { background: var(--red-soft); color: var(--red); }
  .recipient-add-form {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 14px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
  }
  .recipient-add-form input, .recipient-add-form select {
    flex: 1;
    min-width: 140px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--surface);
  }
  .recipient-add-form input:focus, .recipient-add-form select:focus {
    outline: none;
    border-color: var(--brand-blue);
  }
  .inline-select {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
  }
  .inline-select:focus {
    outline: none;
    border-color: var(--brand-blue);
  }
  .recipient-add-btn {
    background: var(--text);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
  }

  .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
  }

  .settings-full {
    margin-bottom: 16px;
  }

  .settings-note {
    margin: -4px 0 14px;
    color: var(--text-2);
    font-size: 13px;
  }

  .access-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
  }

  /* ─── Visual review summary (leadership-friendly) ─────────────── */
  .review-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }
  .review-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
  }
  .review-hero.green::before { background: linear-gradient(90deg, var(--green), #059669); }
  .review-hero.yellow::before { background: linear-gradient(90deg, var(--yellow), #D97706); }
  .review-hero.red::before { background: linear-gradient(90deg, var(--red), #B91C1C); }
  .review-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .review-hero-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .review-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
  }
  .review-hero-status.green { background: var(--green-soft); color: #047857; }
  .review-hero-status.yellow { background: var(--yellow-soft); color: #B45309; }
  .review-hero-status.red { background: var(--red-soft); color: #B91C1C; }
  .review-hero-status .status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: currentColor;
    animation: pulseDot 1.6s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .top-leadership {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .top-leadership li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
  }
  .top-leadership-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--text);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .top-leadership-text {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
  }
  .top-leadership-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: 2px;
  }
  .top-leadership-tag.red { background: var(--red-soft); color: #B91C1C; }
  .top-leadership-tag.yellow { background: var(--yellow-soft); color: #B45309; }
  .top-leadership-tag.blue { background: var(--brand-blue-soft); color: var(--brand-blue); }

  /* Visual KPI cards (review) */
  .review-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .review-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
  }
  .review-kpi-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .review-kpi-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 6px;
  }
  .review-kpi-bar {
    height: 4px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
  }
  .review-kpi-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(.2,.8,.2,1);
  }
  .review-kpi-bar-fill.green { background: var(--green); }
  .review-kpi-bar-fill.yellow { background: var(--yellow); }
  .review-kpi-bar-fill.red { background: var(--red); }
  .review-kpi-delta {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
  }
  .review-kpi-delta.up { color: #047857; }
  .review-kpi-delta.down { color: #B91C1C; }

  /* Alert pills row */
  .review-alert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .review-alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
  }
  .review-alert.red { background: var(--red-soft); color: #B91C1C; border: 1px solid #FECACA; }
  .review-alert.yellow { background: var(--yellow-soft); color: #B45309; border: 1px solid #FDE68A; }
  .review-alert.blue { background: var(--brand-blue-soft); color: var(--brand-blue); border: 1px solid #C7D2FE; }
  .review-alert.green { background: var(--green-soft); color: #047857; border: 1px solid #A7F3D0; }

  /* Project progress visuals */
  .review-project-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .review-project-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
  }
  .review-project-name {
    font-weight: 600;
    font-size: 13.5px;
  }
  .review-project-pct {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-2);
  }
  .review-project-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
  }
  .review-project-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(.2,.8,.2,1);
  }
  .review-project-bar-fill.green { background: linear-gradient(90deg, #059669, #10B981); }
  .review-project-bar-fill.yellow { background: linear-gradient(90deg, #D97706, #F59E0B); }
  .review-project-bar-fill.red { background: linear-gradient(90deg, #DC2626, #EF4444); }

  /* Collapsible "Full Report" */
  .review-collapse {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .review-collapse-summary {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    margin: 0;
  }
  .review-collapse-summary::-webkit-details-marker { display: none; }
  .review-collapse-summary-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .review-collapse-summary-arrow {
    font-size: 12px;
    color: var(--text-3);
    transition: transform 0.2s;
  }
  details[open] .review-collapse-summary-arrow { transform: rotate(180deg); }
  details:not([open]) .review-collapse-summary { border-bottom: none; }
  .review-collapse-body { padding: 14px 18px; }

  /* Pending approval pills */
  .approval-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--brand-blue-soft);
    border: 1px solid #C7D2FE;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--brand-blue);
  }
  .approval-pill-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--brand-blue);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .approval-pill-text { flex: 1; line-height: 1.4; }

  /* ─── Mobile ─────────────────────────────────── */
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .mobile-tabs { display: flex; }
    .page { padding: 18px 16px 40px; }
    .page-title { font-size: 22px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .pulse { flex-direction: row; }
    .pulse-chip { padding: 10px 12px; }
    .pulse-count { font-size: 18px; }
    .pulse-label { font-size: 10px; }
    .project-row { grid-template-columns: 12px 1fr auto; }
    .project-row .progress-wrap { display: none; }
    .record-btn { width: 86px; height: 86px; }
    .record-icon { width: 28px; height: 28px; }
    .mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 40;
    }
    .timeline { padding: 14px 0; flex-wrap: wrap; gap: 12px; }
    .tl-stage { flex: 1 1 28%; }
    .mode-grid { grid-template-columns: 1fr; }
    .guided-card { padding: 22px 20px 20px; min-height: 0; }
    .guided-question { font-size: 20px; }
    .welcome-banner { flex-direction: column; align-items: flex-start; }
    .welcome-close { top: 14px; right: 14px; }
    .kpi-quick { gap: 8px; }
    .kpi-input { font-size: 18px; }
    .splash { padding: 16px 18px; }
    .splash-title { font-size: 32px; }
    .splash-sub { font-size: 15px; margin-bottom: 28px; }
    .splash-grid { grid-template-columns: 1fr; gap: 14px; }
    .splash-card { padding: 28px 22px; }
    .splash-card-title { font-size: 20px; }
    .leader-topbar {
      align-items: flex-start;
      flex-direction: column;
      padding: 12px 16px;
    }
    .leader-nav {
      justify-content: flex-start;
      width: 100%;
    }
    .leader-nav-btn {
      flex: 1 1 auto;
      min-width: max-content;
    }
    .leader-hero { padding: 22px 16px 18px; }
    .leader-greeting { font-size: 24px; }
    .leader-eod-card { padding: 18px 18px 16px; }
    .leader-eod-icon { width: 44px; height: 44px; font-size: 22px; }
    .leader-eod-title { font-size: 16px; }
    .status-tile-val { font-size: 18px; }
    .form-field { padding: 14px 16px; }
    .form-field-title { font-size: 14px; }
    .floating-recorder { bottom: 12px; margin-top: 14px; padding: 10px 12px; }
    .fr-btn { width: 40px; height: 40px; }
    .fr-title { font-size: 13px; }
    .eod-feed { grid-template-columns: 1fr; gap: 10px; }
    .cc-viz-grid { grid-template-columns: 1fr; }
    .insight-grid { grid-template-columns: 1fr; }
    .board-summary,
    .daily-brief,
    .manager-snapshot,
    .exec-lower-grid {
      grid-template-columns: 1fr;
    }
    .board-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }
    .executive-lane > summary {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .executive-lane-pulse {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
    .executive-update-row {
      grid-template-columns: 1fr;
    }
    .manager-row {
      grid-template-columns: 1fr;
    }
    .manager-score {
      border-left: 0;
      border-top: 1px solid var(--border);
      grid-template-columns: auto auto;
      justify-content: space-between;
      padding-top: 8px;
    }
    .owner-brief-hero,
    .owner-priority-grid,
    .owner-pulse-grid {
      grid-template-columns: 1fr;
    }
    .owner-brief-grid-prominent,
    .owner-insight-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .owner-brief-title {
      font-size: 24px;
    }
    .owner-brief-actions {
      grid-template-columns: 1fr;
    }
    .cc-submission-stats { gap: 8px; }
    .cc-stat { padding: 10px 12px; }
    .cc-stat-val { font-size: 18px; }
    .splash-grid { grid-template-columns: 1fr; }
    .free-record { padding: 16px 18px; flex-wrap: wrap; }
    .free-rec-btn { width: 56px; height: 56px; }
    .free-rec-icon { width: 20px; height: 20px; }
    .free-rec-title { font-size: 15px; }
    .ceo-banner { padding: 14px 16px; }
    .ceo-banner-count { font-size: 22px; padding: 6px 10px; }
    .recipient-add-form { flex-direction: column; }
    .recipient-add-form input, .recipient-add-form select { min-width: 0; width: 100%; }
    .review-kpi-grid { grid-template-columns: 1fr 1fr; }
    .review-kpi-value { font-size: 20px; }
    .review-hero { padding: 18px 20px; }
  }
  .mobile-header { display: none; }

  /* details summary */
  details { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
  details summary { font-size: 12.5px; color: var(--text-3); cursor: pointer; list-style: none; font-weight: 500; }
  details summary::-webkit-details-marker { display: none; }
  details[open] summary { margin-bottom: 10px; }
.transcript {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
    background: var(--surface-2);
    padding: 14px;
    border-radius: var(--radius-sm);
    font-style: italic;
  }

/* Blazor implementation helpers */
.brand-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact {
  margin-left: auto;
  padding: 6px 8px;
  font-size: 11px;
}

.green-text { color: var(--green); }
.yellow-text { color: var(--yellow); }
.red-text { color: var(--red); }
.muted-small { color: var(--text-3); font-size: 14px; }

.empty-state {
  width: 100%;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.empty-state.compact {
  padding: 14px;
  margin: 0 0 8px;
}

.eod-card-open {
  width: 100%;
  display: block;
  text-align: left;
}

.report-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.history-card .hist-item {
  width: 100%;
  text-align: left;
}

.ceo-banner {
  width: 100%;
  text-align: left;
  border: 0;
}

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(10, 10, 10, 0.36);
  padding: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.report-modal {
  width: min(960px, 100%);
  max-height: min(86vh, 820px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
}

.report-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.report-modal-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.report-modal-sub {
  color: var(--text-3);
  font-size: 12.5px;
  margin-top: 2px;
}

.report-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0 0 12px;
}

.report-summary.owner {
  background: var(--brand-blue-soft);
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-sm);
  padding: 12px;
}

.owner-brief-grid,
.exec-intel-grid,
.ceo-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.owner-brief-grid > div,
.exec-intel-column,
.ceo-signal-grid > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
}

.owner-brief-grid span,
.exec-intel-column span,
.ceo-signal-grid span {
  display: block;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.owner-brief-grid strong,
.ceo-signal-grid strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.32;
  margin-top: 5px;
}

.owner-brief-tile strong {
  font-weight: 650;
}

.exec-intel-column p {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.exec-intel-column p:last-child { margin-bottom: 0; }
.exec-intel-column.green { background: var(--green-soft); border-color: rgba(16, 185, 129, 0.2); }
.exec-intel-column.red { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.22); }
.exec-intel-column.yellow { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.24); }
.exec-intel-column.blue { background: var(--brand-blue-soft); border-color: #C7D2FE; }

.report-modal-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.report-modal-section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.report-modal-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 8px;
}

.report-modal-section-sub {
  margin: -2px 0 12px;
  color: var(--text-2);
  font-size: 13px;
}

.insight-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.insight-inline-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface-2);
}

.insight-inline-card span {
  display: block;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.insight-inline-card strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
}

.insight-inline-card.red { background: var(--red-soft); border-color: rgba(239, 68, 68, 0.22); }
.insight-inline-card.yellow { background: var(--yellow-soft); border-color: rgba(245, 158, 11, 0.24); }
.insight-inline-card.green { background: var(--green-soft); border-color: rgba(16, 185, 129, 0.2); }
.insight-inline-card.blue { background: var(--brand-blue-soft); border-color: #C7D2FE; }

audio {
  width: 100%;
  min-width: 180px;
}

@media (max-width: 760px) {
  .owner-brief-grid,
  .exec-intel-grid,
  .ceo-signal-grid {
    grid-template-columns: 1fr;
  }
  .exec-hero,
  .person-grid,
  .exec-lower-grid {
    grid-template-columns: 1fr;
  }
  .exec-score-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .owner-metric-grid,
  .owner-brief-grid-prominent,
  .owner-insight-grid {
    grid-template-columns: 1fr;
  }
  .owner-brief-hero {
    padding: 15px;
  }
  .owner-metric {
    min-height: 86px;
  }
  .owner-action-row {
    flex-direction: column;
  }
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff3cd;
  color: #3b2f00;
  padding: 12px 16px;
  z-index: 300;
  box-shadow: var(--shadow-lg);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  float: right;
}

@media (max-width: 900px) {
  .app.mode-pm .mobile-header { display: flex; }
  .modal-scrim {
    padding: 12px;
  }
  .report-modal {
    border-radius: 16px;
    max-height: 90vh;
  }
  .submit-bar {
    flex-wrap: wrap;
  }
  .submit-bar .btn,
  .report-card-actions .btn-sm {
    flex: 1;
  }
  .identity-grid {
    grid-template-columns: 1fr;
  }
  .identity-grid .sub-field-block:last-child {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (min-width: 901px) {
  .mobile-tabs.visible { display: none; }
}