/* ─── 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:
      linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9)),
      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: 0 12px 32px rgba(15, 23, 42, 0.06), 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: linear-gradient(180deg, #fff, 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; }
  .avatar.gray { background: linear-gradient(135deg, #e5e7eb, #d1d5db); color: #4b5563; }

  .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; }

  /* ─── Usage ─────────────────────────────────── */
  .usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }

  .usage-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
  }

  .usage-controls label {
    display: grid;
    gap: 5px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .usage-date-input {
    min-width: 150px;
    height: 38px;
  }

  .usage-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .usage-metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .usage-metric span,
  .usage-row span {
    color: var(--text-2);
  }

  .usage-metric strong {
    font-size: 24px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .usage-alert {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    border: 1px solid rgba(30, 64, 175, 0.18);
    background: var(--brand-blue-soft);
    border-radius: 8px;
    padding: 14px;
    color: #1e3a8a;
  }

  .usage-alert.warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: var(--yellow-soft);
    color: #92400e;
  }

  .usage-alert code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    padding: 1px 4px;
  }

  .usage-table {
    display: grid;
    gap: 6px;
    overflow-x: auto;
  }

  .usage-row {
    min-width: 860px;
    display: grid;
    grid-template-columns: minmax(108px, 1fr) repeat(7, minmax(92px, 1fr));
    gap: 10px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
  }

  .usage-row > *:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .usage-head {
    background: var(--surface-2);
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ─── 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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-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;
    max-width: 100%;
  }
  .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); }

.submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}

.submit-overlay-card {
  width: min(440px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid #bfdbfe;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  padding: 20px;
  color: #172554;
}

.submit-overlay-card.error {
  border-color: #fecaca;
  color: #7f1d1d;
}

.submit-overlay-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.submit-overlay-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.submit-overlay-card small {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-weight: 800;
}

.submit-overlay-card .btn {
  margin-top: 14px;
}

.submit-overlay-loader {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid #bfdbfe;
  border-right-color: var(--brand-blue);
  flex: 0 0 auto;
  animation: spinLoader 0.8s linear infinite;
}

.submit-overlay-error-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 950;
}

  /* ─── 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;
  }
  .free-record-card {
    border-color: var(--border-strong);
  }
  .free-record-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }
  .free-record-row .mini-record-btn {
    width: 58px;
    height: 58px;
  }
  .free-record-row .mini-record-icon {
    width: 20px;
    height: 20px;
  }
  .free-record-copy {
    min-width: 0;
  }
  .recording-limit.full {
    margin: -8px 18px 16px;
  }
  .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;
  }
  .step-guide-panel {
    background: linear-gradient(135deg, #F8FAFC, #EEF2FF);
    border: 1px solid #C7D2FE;
    border-left: 4px solid var(--brand-blue);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--text);
  }
  .step-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
  }
  .step-guide-kicker {
    color: var(--brand-blue);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .step-guide-head h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .step-guide-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(30, 64, 175, 0.18);
    background: rgba(255,255,255,0.76);
    color: var(--text-2);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
  }
  .step-guide-close:hover,
  .step-guide-chip:hover {
    background: white;
    color: var(--brand-blue);
  }
  .step-guide-panel ul {
    margin: 8px 0 10px;
    padding-left: 18px;
    display: grid;
    gap: 5px;
    color: var(--text-2);
    font-size: 12.8px;
    line-height: 1.42;
  }
  .step-guide-format,
  .step-guide-example {
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 12.5px;
    line-height: 1.42;
  }
  .step-guide-format {
    background: white;
    border: 1px solid rgba(30, 64, 175, 0.12);
    color: var(--brand-blue);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .step-guide-example {
    background: rgba(255,255,255,0.62);
    color: var(--text-2);
  }
  .step-guide-chip {
    justify-self: start;
    align-self: flex-start;
    border: 1px solid #C7D2FE;
    background: var(--brand-blue-soft);
    color: var(--brand-blue);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    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.compact {
    margin-bottom: 12px;
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .guided-example-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    margin-bottom: 4px;
  }

  .guided-field-list {
    display: grid;
    gap: 14px;
    margin: 4px 0 18px;
  }
  .guided-field-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px;
  }
  .guided-field-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
  }
  .guided-field-card .guided-textarea {
    min-height: 92px;
  }
  .guided-field-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-3);
    font-size: 11.5px;
    font-family: var(--font-mono);
    margin-top: 8px;
  }
  .captured-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #047857;
    font-family: var(--font);
    font-weight: 700;
  }
  .field-mic-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    display: block;
  }
  .field-mic.recording .field-mic-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }

  .structured-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
  }

  .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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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); }
  .eod-viz-pill.gray { background: #f3f4f6; color: #4b5563; }

  /* 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-variant-numeric: tabular-nums;
    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;
  }
  .ceo-attention-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--brand-red);
    color: white;
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .ceo-attention-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .ceo-attention-main strong {
    display: block;
    font-size: 15px;
    line-height: 1.2;
  }
  .ceo-attention-main span {
    display: block;
    font-size: 12.5px;
    opacity: 0.86;
    margin-top: 3px;
  }
  .ceo-attention-icon,
  .at-risk-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
  }
  .ceo-attention-count {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    color: white;
    font-size: 24px;
    font-weight: 800;
  }
  .section-kicker {
    color: var(--text-3);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
.ceo-attention-list {
  display: grid;
  gap: 10px;
}

.leader-inbox-panel {
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  background: #eff6ff;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.leader-inbox-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.leader-inbox-head strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}

.leader-inbox-list {
  display: grid;
  gap: 8px;
}

.leader-inbox-row {
  width: 100%;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.leader-inbox-row strong,
.leader-inbox-row span,
.leader-inbox-row small {
  display: block;
  line-height: 1.35;
}

.leader-inbox-row strong {
  font-size: 13px;
}

.leader-inbox-row span,
.leader-inbox-row small {
  color: var(--text-2);
  font-size: 12px;
}
  .ceo-attention-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--red);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
  }
  .ceo-attention-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .ceo-attention-item-head strong {
    display: block;
    font-size: 13px;
  }
  .ceo-attention-item-head span,
  .ceo-attention-meta {
    color: var(--text-3);
    font-size: 11.5px;
  }
  .ceo-attention-item p {
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.45;
  }
  .ceo-attention-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .ceo-attention-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .decision-badge {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .decision-badge.green { background: var(--green-soft); color: #047857; }
  .decision-badge.red { background: var(--red-soft); color: #991B1B; }
  .decision-badge.yellow { background: var(--yellow-soft); color: #92400E; }
  .decision-badge.blue { background: var(--brand-blue-soft); color: var(--brand-blue); }
  .at-risk-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--red-soft);
    border: 1px solid #FECACA;
    border-left: 4px solid var(--red);
    border-radius: 10px;
    padding: 13px 15px;
    color: #991B1B;
  }
  .at-risk-callout strong,
  .at-risk-callout span {
    display: block;
  }
  .at-risk-callout span {
    color: #7F1D1D;
    font-size: 12.5px;
    margin-top: 3px;
  }
  .at-risk-callout .at-risk-icon {
    background: var(--red);
    color: white;
  }
  .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-variant-numeric: tabular-nums;
    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;
  }
  .command-viz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr) minmax(240px, 0.7fr);
    gap: 12px;
  }
  .command-viz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
  }
  .dept-health-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
  }
  .dept-health-track {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
  }
  .dept-health-fill {
    height: 100%;
    border-radius: inherit;
  }
  .dept-health-fill.green { background: var(--green); }
  .dept-health-fill.yellow { background: var(--yellow); }
  .dept-health-fill.red { background: var(--red); }
  .submission-rate-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }
  .submission-rate-card .section-kicker {
    grid-column: 1 / -1;
  }
  .submission-ring {
    --pct: 0;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at center, var(--surface) 58%, transparent 60%),
      conic-gradient(from -90deg, var(--brand-blue) calc(var(--pct) * 1%), #e5e7eb 0);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px rgba(30, 64, 175, 0.08);
  }
  .submission-ring strong {
    font-variant-numeric: tabular-nums;
    font-size: 16px;
  }
  .submission-rate-copy {
    display: grid;
    gap: 2px;
  }
  .submission-rate-copy strong {
    font-size: 24px;
    line-height: 1;
  }
  .submission-rate-copy span,
  .submission-rate-copy small {
    color: var(--text-2);
    font-size: 12px;
  }
  .signal-card {
    display: grid;
    gap: 10px;
  }
  .signal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 7px;
    font-size: 12.5px;
  }
  .signal-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .signal-row strong.green { color: #047857; }
  .signal-row strong.red { color: #B91C1C; }
  .signal-row strong.blue { color: var(--brand-blue); }
  .signal-row strong.yellow { color: #B45309; }
  .leadership-snapshot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 14px;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--green);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 16px;
  }
  .leadership-snapshot.yellow { border-left-color: var(--yellow); }
  .leadership-snapshot.red { border-left-color: var(--red); }
  .snapshot-main {
    display: grid;
    gap: 16px;
    align-content: space-between;
    min-width: 0;
  }
  .snapshot-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
  }
  .snapshot-header h2 {
    margin: 4px 0 5px;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0;
  }
  .snapshot-header p {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
  }
  .snapshot-refresh {
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--text-2);
    font-weight: 800;
    background: var(--surface-2);
    flex-shrink: 0;
  }
  .snapshot-refresh:disabled {
    opacity: 0.66;
    cursor: wait;
  }
  .semaphore-bar {
    height: 40px;
    display: flex;
    gap: 3px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: transparent;
  }
  .semaphore-segment {
    min-width: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 13px;
    position: relative;
    transition: filter 0.15s;
  }
  .semaphore-segment span {
    min-width: 24px;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .semaphore-segment:hover { filter: brightness(0.94); }
  .semaphore-segment.green { background: var(--green); }
  .semaphore-segment.yellow { background: var(--yellow); color: #3f2b04; }
  .semaphore-segment.red { background: var(--red); }
  .semaphore-segment.gray { background: #9ca3af; }
  .semaphore-segment[style*="width:0"] {
    display: none;
  }
  .snapshot-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .snapshot-legend button {
    min-height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
  }
  .signal-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
  }
  .signal-dot.green { background: var(--green); }
  .signal-dot.yellow { background: var(--yellow); }
  .signal-dot.red { background: var(--red); }
  .signal-dot.gray { background: #9ca3af; }
  .snapshot-scoreboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .snapshot-stat {
    min-height: 82px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 11px 12px;
    display: grid;
    align-content: space-between;
    gap: 5px;
    text-align: left;
    overflow: hidden;
    position: relative;
  }
  .snapshot-stat:hover {
    border-color: var(--border-strong);
    background: #fff;
  }
  .snapshot-stat.active {
    border-color: var(--brand-blue);
    background: #fff;
  }
  .snapshot-stat.alert {
    background: var(--red-soft);
    border-color: rgba(239, 68, 68, 0.18);
  }
  .snapshot-stat span,
  .leader-action-head span {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .snapshot-stat strong {
    font-variant-numeric: tabular-nums;
    font-size: 27px;
    line-height: 1;
  }
  .snapshot-stat small {
    color: var(--text-2);
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 650;
  }
  .leader-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  .leader-action-panel {
    min-height: 214px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-blue);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: grid;
    gap: 9px;
    align-content: start;
  }
  .leader-action-panel.red { border-top-color: var(--red); }
  .leader-action-panel.yellow { border-top-color: var(--yellow); }
  .leader-action-panel.green { border-top-color: var(--green); }
  .leader-action-panel.blue { border-top-color: var(--brand-blue); }
  .leader-action-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
  }
  .leader-action-head strong {
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    line-height: 1;
  }
  .leader-action-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 9px 10px;
    text-align: left;
    transition: background 0.15s;
  }
  .leader-action-row:not(:disabled):hover {
    background: #fff;
  }
  .leader-action-row:disabled {
    cursor: default;
    opacity: 0.82;
  }
  .leader-action-row strong,
  .leader-action-row small {
    display: block;
    line-height: 1.3;
  }
  .leader-action-row strong {
    font-size: 13px;
  }
  .leader-action-row small {
    margin-top: 2px;
    color: var(--text-2);
    font-size: 11.5px;
  }
  .leader-action-empty {
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    padding: 13px;
    color: var(--text-3);
    font-size: 12px;
    text-align: center;
  }
  .dept-health-row.compact {
    grid-template-columns: minmax(72px, 0.62fr) minmax(0, 1fr) 34px;
    margin-top: 0;
  }
  .team-status-list {
    display: grid;
    gap: 10px;
  }
  .team-status-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
  }
  .team-status-pager > span {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
  }
  .team-status-pager > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .team-status-pager button {
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
  }
  .team-status-pager button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .team-status-pager strong {
    color: var(--text-2);
    font-size: 12px;
    min-width: 44px;
    text-align: center;
  }
  .team-status-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
  }
  .team-status-row:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }
  .team-status-row.yellow { border-left-color: var(--yellow); }
  .team-status-row.red { border-left-color: var(--red); }
  .team-status-row.missing { border-left-color: #9ca3af; background: #fbfbfc; }
  .team-status-open {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) minmax(180px, auto);
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    text-align: left;
  }
  .team-status-open:disabled {
    cursor: default;
  }
  .team-status-head strong,
  .team-status-head span {
    display: block;
  }
  .team-status-head strong {
    font-size: 14px;
  }
  .team-status-head span,
  .team-status-meta small {
    color: var(--text-3);
    font-size: 11.5px;
  }
  .team-status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
  }
  .team-status-tags span {
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 8px;
    padding: 3px 8px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    max-width: 100%;
  }
  .team-status-meta {
    display: grid;
    gap: 5px;
    justify-items: start;
  }
  .team-status-scores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .team-status-scores span {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 6px 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    text-align: center;
    min-width: 0;
  }
  .team-status-scores small {
    display: block;
    margin-top: 2px;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .team-signal-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
  }
  .team-signal-chip {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    padding: 8px 10px;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.35;
    min-width: 0;
  }
  .team-signal-chip strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .team-signal-chip.red {
    background: var(--red-soft);
    border-color: #fecaca;
  }
  .team-signal-chip.red strong { color: #b91c1c; }
  .team-signal-chip.yellow {
    background: var(--yellow-soft);
    border-color: rgba(245, 158, 11, 0.28);
  }
  .team-signal-chip.yellow strong { color: #b45309; }
  .team-signal-chip.green {
    background: var(--green-soft);
    border-color: rgba(16, 185, 129, 0.24);
  }
  .team-signal-chip.green strong { color: #047857; }
  .team-signal-chip.gray strong { color: #4b5563; }
  .team-signal-cta {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    display: grid;
    place-items: center;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }
  .team-status-reason {
    border-top: 1px solid var(--border);
    padding: 8px 14px;
    color: var(--text-2);
    font-size: 12px;
    background: rgba(248, 250, 252, 0.78);
  }
  .today-eod-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .today-eod-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .today-eod-card.yellow { border-left-color: var(--yellow); }
  .today-eod-card.red { border-left-color: var(--red); }
  .today-eod-open {
    display: grid;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
  }
  .today-eod-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
  .today-eod-head strong,
  .today-eod-head span,
  .today-eod-time {
    display: block;
  }
  .today-eod-head span,
  .today-eod-time span {
    color: var(--text-3);
    font-size: 11.5px;
  }
  .today-eod-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12px;
  }
  .today-eod-lines {
    display: grid;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-2);
  }
  .today-eod-lines > div {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
  }
  .today-eod-lines > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .today-eod-lines .risk {
    background: var(--red-soft);
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 8px;
  }
  .today-eod-lines strong {
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-right: 6px;
  }
  .today-eod-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .today-eod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hierarchy-toolbar {
    margin-top: 6px;
  }
  .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(6, 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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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: var(--brand-blue);
  }
  .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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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;
  }

  .submit-progress-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    background: #EFF6FF;
    color: #1E3A8A;
  }

  .submit-progress-banner.success {
    background: #ECFDF5;
    border-color: #BBF7D0;
    color: #166534;
  }

  .submit-progress-banner.error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
  }

  .inline-loader,
  .button-loader {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    display: inline-block;
    flex: 0 0 auto;
    animation: spinLoader 0.8s linear infinite;
  }

  .button-loader {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
  }

  @keyframes spinLoader {
    to { transform: rotate(360deg); }
  }

  /* 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-variant-numeric: tabular-nums;
    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-shell {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
  }

  .settings-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .settings-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  }

  .settings-metric:hover,
  .settings-metric.active {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .settings-metric span {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .settings-metric strong {
    font-size: 24px;
    line-height: 1;
  }

  .settings-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    gap: 4px;
  }

  .settings-tabs button {
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-2);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
  }

  .settings-tabs button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }

  .settings-panel {
    padding: 18px;
  }

  .settings-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 16px;
    align-items: start;
    margin-bottom: 14px;
  }

  .settings-search {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--surface);
    color: var(--text);
  }

  .settings-search:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
  }

  .settings-list {
    display: grid;
    gap: 8px;
    min-height: 140px;
  }

  .settings-row {
    margin-bottom: 0;
    align-items: flex-start;
  }

  .settings-row.compact {
    align-items: center;
  }

  .settings-row-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 620px;
  }

  .settings-row-controls .inline-select {
    margin-top: 8px;
  }

  .settings-empty {
    display: grid;
    place-items: center;
    min-height: 130px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    background: var(--surface-2);
    font-size: 13.5px;
  }

  .settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
  }

  .settings-pager {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .settings-pager button {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 7px 10px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
  }

  .settings-pager button:disabled {
    cursor: not-allowed;
    color: var(--text-3);
    background: var(--surface-2);
  }

  .settings-pager strong {
    min-width: 48px;
    text-align: center;
    color: var(--text);
    font-size: 12.5px;
  }

  .settings-add-form {
    margin-top: 16px;
  }

  .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;
  }

  .settings-field {
    display: grid;
    gap: 7px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .settings-field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
  }

  .settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--text);
    font-weight: 700;
  }

  .settings-toggle-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-blue);
  }

  .settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .settings-actions .btn.secondary {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    min-height: 42px;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 800;
  }

  .ceo-summary-preview-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 12px;
    color: var(--text-2);
    font-weight: 700;
  }

  .ceo-summary-preview-link a {
    color: var(--brand-blue);
    font-weight: 800;
  }

  .ceo-summary-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .ceo-summary-status div {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 12px;
  }

  .ceo-summary-status span {
    display: block;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ceo-summary-status strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
  }

  .settings-save-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(5, 150, 105, 0.28);
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.08);
    color: #065f46;
  }

  .settings-save-confirmation strong {
    font-size: 13px;
  }

  .settings-save-confirmation span {
    color: #0f5132;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
  }

  .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);
  }

  .leadership-panel {
    display: grid;
    gap: 16px;
  }

  .leadership-panel-head {
    margin-bottom: 0;
  }

  .leadership-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .leadership-summary-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    background: var(--surface-2);
  }

  .leadership-summary-card span {
    display: block;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .leadership-summary-card strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    line-height: 1;
  }

  .leadership-summary-card small {
    display: block;
    margin-top: 6px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
  }

  .leadership-summary-card.owner {
    background: #eff6ff;
    border-color: #bfdbfe;
  }

  .leadership-summary-card.admin {
    background: #f5f5f5;
    border-color: rgba(0,0,0,0.1);
  }

  .leadership-summary-card.exec {
    background: var(--brand-blue-soft);
    border-color: #c7d2fe;
  }

  .leadership-directory {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .leadership-directory-head,
  .leadership-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) 150px minmax(220px, 0.9fr) 110px;
    align-items: center;
    gap: 14px;
  }

  .leadership-directory-head {
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .leadership-row {
    min-height: 72px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }

  .leadership-row:last-child {
    border-bottom: 0;
  }

  .leadership-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .leadership-role-cell,
  .leadership-scope-cell,
  .leadership-actions {
    min-width: 0;
  }

  .leadership-scope-cell .recipient-meta {
    margin-top: 0;
    line-height: 1.35;
  }

  .leadership-actions {
    display: flex;
    justify-content: flex-end;
  }

  .avatar.owner {
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    color: #1e40af;
  }

  .avatar.admin {
    background: linear-gradient(135deg, #e5e7eb, #9ca3af);
    color: #111827;
  }

  .avatar.exec {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
  }

  .recipient-remove.text {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-2);
    background: var(--surface);
  }

  .recipient-remove.text:hover {
    border-color: #fecaca;
    background: var(--red-soft);
    color: #991b1b;
  }

  .leadership-add-form {
    margin-top: 0;
    border: 1px dashed var(--border-strong);
    background: #fbfbfc;
  }

  /* ─── 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-variant-numeric: tabular-nums;
    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-variant-numeric: tabular-nums;
    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; }
    .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usage-metric strong { font-size: 20px; }
    .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; }
    .step-guide-panel {
      padding: 13px;
    }
    .step-guide-head {
      align-items: flex-start;
    }
    .guided-field-card {
      padding: 14px;
    }
    .guided-field-head {
      grid-template-columns: 1fr;
    }
    .guided-field-head .field-mic {
      justify-self: start;
    }
    .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,
    .leadership-snapshot,
    .leader-action-grid,
    .daily-brief,
    .command-viz-grid,
    .today-eod-grid,
    .manager-snapshot,
    .structured-review-grid,
    .exec-lower-grid {
      grid-template-columns: 1fr;
    }
    .snapshot-header {
      flex-direction: column;
    }
    .snapshot-scoreboard {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .team-status-open {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
    }
    .team-status-main,
    .team-status-head,
    .team-status-meta,
    .team-status-scores,
    .team-signal-summary {
      min-width: 0;
    }
    .team-status-tags {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
    }
    .team-status-tags span {
      border-radius: 7px;
      padding: 5px 7px;
      white-space: normal;
    }
    .team-status-tags span:nth-child(n+3) {
      display: none;
    }
    .team-status-pager {
      align-items: stretch;
      flex-direction: column;
    }
    .team-status-pager > div {
      justify-content: space-between;
      width: 100%;
    }
    .team-status-meta,
    .team-status-scores,
    .team-signal-summary {
      grid-column: 1 / -1;
    }
    .team-status-scores {
      width: 100%;
      gap: 6px;
    }
    .team-status-scores span {
      padding: 7px 4px;
      font-size: 13px;
    }
    .team-status-scores small {
      font-size: 8.5px;
      line-height: 1.15;
    }
    .team-signal-summary {
      grid-template-columns: 1fr;
      gap: 7px;
    }
    .team-signal-cta {
      justify-content: center;
      white-space: normal;
      min-height: 36px;
    }
    .leader-coaching-grid {
      grid-template-columns: 1fr;
    }
    .filters {
      overflow-x: auto;
      flex-wrap: nowrap;
      padding-bottom: 3px;
      margin: 0 -2px 0;
    }
    .filters .chip {
      flex: 0 0 auto;
    }
    .ceo-attention-hero {
      align-items: flex-start;
    }
    .ceo-attention-main {
      align-items: flex-start;
    }
    .submission-rate-card {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .today-eod-head {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .today-eod-time {
      grid-column: 1 / -1;
      text-align: left;
    }
    .free-record-row {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .free-record-row .mini-timer {
      grid-column: 1 / -1;
      font-size: 14px;
    }
    .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%; }
    .settings-overview { grid-template-columns: 1fr; }
    .settings-tabs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .settings-tabs button {
      padding: 8px 6px;
      font-size: 12px;
    }
    .settings-panel { padding: 14px; }
    .settings-panel-head {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .settings-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .settings-row.compact {
      align-items: start;
    }
    .settings-row-controls {
      grid-template-columns: 1fr;
    }
    .leadership-summary-grid {
      grid-template-columns: 1fr;
    }
    .leadership-directory-head {
      display: none;
    }
    .leadership-row {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 10px;
    }
    .leadership-actions {
      justify-content: flex-start;
    }
    .settings-footer {
      align-items: flex-start;
      flex-direction: column;
    }
    .settings-pager {
      width: 100%;
      justify-content: space-between;
    }
    .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: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.report-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

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

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

.report-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  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: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  margin-bottom: 10px;
}

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

.notification-card {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-row {
  width: 100%;
  text-align: left;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

.notification-row strong {
  color: var(--text);
  font-size: 13px;
}

.notification-row span,
.notification-row small {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}

.followup-card {
  border-color: #fde68a;
  background: #fffbeb;
}

.followup-dashboard {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 18px;
}

.followup-dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.followup-dashboard-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  letter-spacing: 0;
}

.followup-kicker {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.followup-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.followup-stats > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px;
}

.followup-stats span,
.followup-stats strong {
  display: block;
}

.followup-stats span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.followup-stats strong {
  color: var(--text);
  font-size: 15px;
}

.followup-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: stretch;
}

.followup-queue {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 8px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.followup-queue-row {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 10px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.followup-queue-row.active {
  background: #fff;
  border-color: #bfdbfe;
  box-shadow: var(--shadow-sm);
}

.followup-queue-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #f59e0b;
}

.followup-queue-row strong,
.followup-queue-row span,
.followup-queue-row small {
  display: block;
  line-height: 1.35;
}

.followup-queue-row strong {
  font-size: 12.5px;
}

.followup-queue-row span,
.followup-queue-row small {
  color: var(--text-2);
  font-size: 11.5px;
}

.followup-queue-row small {
  margin-top: 4px;
}

.followup-reply-panel {
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  background: #eff6ff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.followup-reply-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.followup-reply-head span,
.followup-reply-head strong,
.followup-reply-head small {
  display: block;
  line-height: 1.35;
}

.followup-reply-head span,
.followup-question-box span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.followup-reply-head strong {
  font-size: 14px;
  margin-top: 2px;
}

.followup-reply-head small {
  color: var(--text-2);
  font-size: 12px;
}

.followup-question-box {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #fff;
  padding: 11px 12px;
}

.followup-question-box p {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.followup-question-box small {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.35;
}

.followup-list {
  display: grid;
  gap: 12px;
}

.followup-request {
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.followup-request-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.followup-request-head strong,
.followup-request-head span,
.followup-request p,
.followup-request small {
  display: block;
  margin: 0;
  line-height: 1.4;
}

.followup-request-head strong {
  font-size: 14px;
}

.followup-request-head span,
.followup-request small {
  color: var(--text-2);
  font-size: 12px;
}

.followup-request p {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
}

.followup-textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font: inherit;
  resize: vertical;
  background: var(--surface);
}

.followup-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr);
  gap: 8px;
}

.approval-action-card {
  margin-top: 12px;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  background: #fff7f7;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.approval-action-card strong {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.approval-history {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
}

.approval-history-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.approval-history-row:first-of-type {
  border-top: 0;
}

.approval-history-row > span {
  align-self: start;
  border-radius: 999px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 7px;
}

.approval-history-row strong,
.approval-history-row p,
.approval-history-row small {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.approval-history-row p,
.approval-history-row small {
  color: var(--text-2);
}

.inline-action-row,
.tracked-action-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.inline-action-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tracked-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
}

.tracked-action-row strong,
.tracked-action-row span {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
}

.tracked-action-row span {
  color: var(--text-2);
  margin-top: 2px;
}

.reply-modal {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
}

.reply-textarea {
  width: 100%;
  min-height: 130px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font: inherit;
  resize: vertical;
}

.at-glance-report-card {
  border: 1px solid #C7D2FE;
  background: var(--brand-blue-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 12px 0;
}

.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; }

.leader-coaching-panel {
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  padding: 14px;
  margin-top: 12px;
}

.leader-coaching-panel.yellow {
  border-left-color: var(--yellow);
  background: var(--yellow-soft);
}

.leader-coaching-panel.red {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.leader-coaching-head {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.leader-coaching-head span,
.leader-coaching-grid span {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.leader-coaching-head strong {
  font-size: 14px;
  line-height: 1.3;
}

.leader-coaching-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.leader-coaching-grid > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px;
  min-width: 0;
}

.leader-coaching-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.35;
}

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;
  }
}

/* EOD 5-section recording flow */
.record-prep,
.recording-screen,
.processing-screen,
.manual-eod,
.eod-success-screen {
  width: min(980px, 100%);
  margin: 0 auto;
}

.record-prep {
  display: grid;
  gap: 18px;
}

.guided-back.standalone {
  justify-self: start;
  margin-bottom: 2px;
}

.master-example-card {
  border-radius: 16px;
  border: 1px solid rgba(30, 64, 175, 0.18);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.9)),
    linear-gradient(45deg, rgba(220, 38, 38, 0.28), transparent);
  color: #fff;
  padding: 22px;
  box-shadow: var(--shadow-md);
}

.master-example-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}

.master-example-card p {
  margin: 0 0 14px;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
}

.master-example-card div:last-child {
  font-weight: 800;
  color: rgba(255,255,255,0.86);
}

.cue-preview-grid,
.recording-cue-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cue-card-preview,
.recording-cue-card,
.manual-section-card,
.review-section-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.cue-card-preview,
.recording-cue-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 132px;
  padding: 14px;
  text-align: left;
}

.cue-card-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--brand-blue);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
}

.cue-card-preview h3,
.recording-cue-card h3,
.manual-section-head h3 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.25;
}

.cue-card-preview p,
.recording-cue-card p,
.manual-section-head p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.eod-route-inline {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 14px;
}

.start-recording-btn,
.stop-recording-btn {
  width: 100%;
  min-height: 58px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: var(--shadow-md);
}

.start-recording-btn {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.start-recording-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.manual-entry-link {
  justify-self: center;
  color: var(--brand-blue);
  font-weight: 800;
  padding: 8px 10px;
}

.recording-screen {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(239, 68, 68, 0.14);
  background: linear-gradient(180deg, #fff, #fff7f7);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-md);
}

.recording-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recording-status-row strong {
  display: block;
  font-size: 18px;
}

.recording-status-row span {
  color: var(--text-2);
}

.recording-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.42);
  animation: pulseDot 1.4s ease-in-out infinite;
}

.waveform {
  min-height: 58px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
}

.waveform span {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--red), var(--brand-blue));
  animation: waveBar 1.1s ease-in-out infinite;
}

@keyframes waveBar {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50% { transform: scaleY(1.75); opacity: 1; }
}

.recording-instruction {
  margin: 0;
  color: var(--text);
  text-align: center;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 850;
}

.recording-footer-hint {
  margin: 0;
  color: var(--text-2);
  text-align: center;
  font-weight: 700;
}

.recording-processing-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: var(--brand-blue);
}

.recording-processing-card strong,
.recording-processing-card span {
  display: block;
}

.recording-processing-card strong {
  color: var(--text);
  font-size: 14px;
  margin-bottom: 2px;
}

.recording-processing-card span {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.35;
}

.recording-cue-card {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.recording-cue-card.active {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(220, 38, 38, 0.42);
  background: #fff1f1;
  box-shadow: var(--shadow-md);
}

.recording-cue-card.active h3 {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 950;
  color: var(--text);
}

.recording-cue-card.active h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--red), var(--brand-blue));
  background-size: 220% 100%;
  animation: cueEnergyLine 1.45s linear infinite;
}

.recording-cue-card.active p {
  position: relative;
  z-index: 1;
  max-width: 760px;
  color: #374151;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 750;
}

@keyframes cueEnergyLine {
  to { background-position: 220% 0; }
}

.recording-step-card {
  display: grid;
  gap: 12px;
}

.guided-step-actions {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1fr) 160px;
  gap: 10px;
  align-items: stretch;
}

.stop-recording-btn.compact {
  min-height: 48px;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}

.stop-recording-btn {
  background: var(--text);
  color: #fff;
}

.processing-screen {
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 42px 28px;
  box-shadow: var(--shadow-md);
}

.processing-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-red));
  box-shadow: 0 18px 42px rgba(30, 64, 175, 0.2);
}

.processing-screen h2 {
  margin: 0;
  font-size: 28px;
}

.processing-screen p {
  margin: 0 0 8px;
  color: var(--text-2);
}

.processing-steps {
  width: min(520px, 100%);
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.processing-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-weight: 800;
}

.processing-steps li span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
}

.processing-steps li.active {
  color: var(--text);
}

.processing-steps li.active span {
  background: var(--red);
  border-color: var(--red);
  animation: pulseDot 1.4s ease-in-out infinite;
}

.processing-steps li.done {
  color: #047857;
}

.processing-steps li.done span {
  background: var(--green);
  border-color: var(--green);
}

.manual-eod {
  display: grid;
  gap: 14px;
}

.manual-section-list,
.five-review-list {
  display: grid;
  gap: 12px;
}

.manual-section-card {
  padding: 16px;
}

.manual-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.review-header-row {
  width: min(980px, 100%);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-route-note {
  color: var(--text-2);
  font-weight: 700;
}

.review-attention-banner {
  width: min(980px, 100%);
  margin: 0 auto 14px;
  border: 1px solid #fde68a;
  background: var(--yellow-soft);
  color: #92400e;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
}

.five-review-list {
  width: min(980px, 100%);
  margin: 0 auto;
}

.review-section-card {
  overflow: hidden;
}

.review-section-card summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.review-section-card summary::-webkit-details-marker {
  display: none;
}

.review-section-body {
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
}

.review-section-flag {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
}

.review-section-flag.green {
  background: var(--green-soft);
  color: #047857;
}

.review-section-flag.yellow {
  background: var(--yellow-soft);
  color: #92400e;
}

.review-section-flag.red {
  background: var(--red-soft);
  color: #991b1b;
}

.btn.dark {
  background: var(--text);
  color: #fff;
}

.btn.wide {
  justify-content: center;
  min-width: 220px;
}

.eod-success-screen {
  display: grid;
  justify-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 18px;
  padding: 42px 28px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.success-check {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--green);
  font-size: 42px;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(16, 185, 129, 0.22);
}

.eod-success-screen h2 {
  margin: 0;
  font-size: 34px;
}

.eod-success-screen p {
  margin: 0;
  color: var(--text-2);
}

.success-status {
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}

.success-status.green { background: var(--green-soft); color: #047857; }
.success-status.yellow { background: var(--yellow-soft); color: #92400e; }
.success-status.red { background: var(--red-soft); color: #991b1b; }

.success-summary-grid {
  width: min(640px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.success-summary-grid div {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 14px;
}

.success-summary-grid span {
  display: block;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.success-summary-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  line-height: 1;
}

.missing-eod-banner {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 980px) {
  .followup-workspace {
    grid-template-columns: 1fr;
  }

  .followup-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .followup-actions {
    grid-template-columns: 1fr;
  }

  .cue-preview-grid,
  .recording-cue-grid,
  .success-summary-grid {
    grid-template-columns: 1fr;
  }

  .cue-card-preview,
  .recording-cue-card {
    min-height: 0;
  }

  .guided-step-actions {
    grid-template-columns: 1fr;
  }

  .review-header-row {
    align-items: flex-start;
    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; }
}

/* PuroSoccer dashboard */
.puro-shell {
  min-height: 100vh;
  background: #f7f8fa;
  color: #111827;
  padding: 28px;
}

.puro-topbar,
.puro-section-head,
.puro-upload-head,
.puro-session,
.puro-user-row,
.puro-media-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.puro-topbar {
  margin: 0 auto 22px;
  max-width: 1180px;
}

.puro-topbar h1,
.puro-section-head h2,
.puro-upload h3,
.puro-login h2 {
  margin: 0;
}

.puro-topbar h1 {
  font-size: 30px;
  line-height: 1.1;
}

.puro-kicker {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.puro-session span {
  color: #475569;
  font-weight: 800;
}

.puro-session button,
.puro-light,
.puro-media-actions a,
.puro-media-actions button,
.puro-danger,
.puro-primary {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid #d7dce4;
  background: #fff;
  color: #111827;
  font-weight: 850;
  padding: 0 14px;
}

.puro-primary {
  border-color: #111827;
  background: #111827;
  color: #fff;
}

.puro-danger,
.puro-media-actions .danger {
  color: #b91c1c;
}

.puro-login,
.puro-empty,
.puro-metrics,
.puro-storage,
.puro-user-panel,
.puro-upload {
  max-width: 1180px;
  margin: 0 auto 18px;
}

.puro-login,
.puro-empty,
.puro-storage,
.puro-user-panel,
.puro-upload {
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.puro-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.puro-login-brand {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 440px;
  padding: 34px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(28, 38, 91, 0.96), rgba(185, 28, 28, 0.9)),
    #1f2a68;
}

.puro-login-brand .puro-kicker,
.puro-login-brand p {
  color: rgba(255,255,255,0.78);
}

.puro-login-brand img {
  display: block;
  width: min(330px, 100%);
  max-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.24));
}

.puro-login-brand h2 {
  color: #fff;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1;
}

.puro-login .puro-login-brand p {
  color: rgba(255,255,255,0.78);
  max-width: 420px;
}

.puro-login p,
.puro-empty p {
  color: #64748b;
  margin: 8px 0 0;
}

.puro-login-form,
.puro-add-user {
  display: grid;
  gap: 12px;
}

.puro-login-form {
  align-content: center;
  padding: 34px;
}

.puro-login-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.puro-login-form input,
.puro-add-user input {
  width: 100%;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  color: #111827;
  font: inherit;
  padding: 11px 12px;
}

.puro-error,
.puro-note {
  border-radius: 8px;
  padding: 10px 12px;
}

.puro-error {
  background: #fef2f2;
  color: #991b1b;
}

.puro-note {
  background: #ecfdf5;
  color: #065f46;
}

.puro-empty {
  padding: 34px;
  text-align: center;
}

.puro-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.puro-metrics div {
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.puro-metrics span,
.puro-media-meta span,
.puro-user-row span,
.puro-upload-head p {
  color: #64748b;
}

.puro-metrics strong {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-top: 4px;
}

.puro-storage {
  padding: 18px;
}

.puro-storage-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.puro-storage-main h2 {
  margin: 0;
}

.puro-storage-main p {
  color: #64748b;
  margin: 4px 0 0;
}

.puro-storage-main > strong {
  font-size: 34px;
  line-height: 1;
}

.puro-storage-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 16px;
}

.puro-storage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #10b981;
}

.puro-storage.is-watch .puro-storage-bar span {
  background: #f59e0b;
}

.puro-storage.is-cleanup .puro-storage-bar span,
.puro-storage.is-critical .puro-storage-bar span {
  background: #ef4444;
}

.puro-storage.is-watch {
  border-color: #fde68a;
}

.puro-storage.is-cleanup,
.puro-storage.is-critical {
  border-color: #fecaca;
  background: #fffafa;
}

.puro-storage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.puro-storage-grid div {
  border: 1px solid #edf0f5;
  border-radius: 8px;
  padding: 10px;
}

.puro-storage-grid span {
  color: #64748b;
  display: block;
  font-size: 12px;
}

.puro-storage-grid strong {
  display: block;
  margin-top: 2px;
}

.puro-user-panel,
.puro-upload {
  padding: 18px;
  width: 100%;
}

.puro-section-head {
  max-width: 1180px;
  margin: 26px auto 12px;
}

.puro-add-user {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  margin-top: 14px;
}

.puro-gallery-tools {
  max-width: 1180px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.puro-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.puro-search input {
  width: min(420px, 100%);
  border: 1px solid #d7dce4;
  border-radius: 8px;
  color: #111827;
  font: inherit;
  min-height: 38px;
  padding: 9px 12px;
}

.puro-page-status {
  color: #64748b;
  font-weight: 800;
  white-space: nowrap;
}

.puro-user-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.puro-user-row {
  border: 1px solid #edf0f5;
  border-radius: 8px;
  padding: 10px 12px;
}

.puro-user-row div,
.puro-media-meta {
  display: grid;
  min-width: 0;
}

.puro-upload-list {
  display: grid;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  justify-content: center;
  align-items: start;
}

.puro-upload {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 456px;
  max-width: 360px;
  min-width: 0;
  margin: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.puro-upload:hover {
  border-color: #b7c4d6;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.puro-upload:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

.puro-upload-head {
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 14px;
  min-height: 86px;
}

.puro-upload-head span {
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 900;
  padding: 6px 10px;
  white-space: nowrap;
}

.puro-upload-body {
  display: grid;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding-top: 16px;
}

.puro-stack-preview {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.puro-stack-preview::before,
.puro-stack-preview::after {
  content: "";
  position: absolute;
  inset: 7px 12px -7px 12px;
  border: 1px solid #dbe2ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  z-index: -1;
}

.puro-stack-preview::before {
  transform: rotate(-3deg) translate(-8px, 8px);
  animation: puro-stack-left 5.5s ease-in-out infinite;
}

.puro-stack-preview::after {
  transform: rotate(3deg) translate(8px, 7px);
  animation: puro-stack-right 5.5s ease-in-out infinite;
}

.puro-stack-preview.single::before,
.puro-stack-preview.single::after {
  display: none;
}

.puro-stack-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #111827;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.puro-stack-frame img,
.puro-stack-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puro-stack-count {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.puro-file-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}

.puro-file-row {
  border: 1px solid #edf0f5;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 9px;
}

.puro-file-row:nth-child(n+4) {
  display: none;
}

.puro-file-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.puro-file-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puro-file-meta span {
  color: #64748b;
  font-size: 12px;
}

.puro-card-hint {
  border-top: 1px solid #edf0f5;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  margin-top: auto;
  padding-top: 10px;
  text-transform: uppercase;
}

.puro-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.58);
}

.puro-explorer {
  width: min(1120px, 100%);
  max-height: min(820px, calc(100vh - 44px));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
}

.puro-explorer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e5eaf1;
  padding: 18px 20px;
}

.puro-explorer-head h2,
.puro-explorer-head p {
  margin: 0;
}

.puro-explorer-head p {
  color: #64748b;
  margin-top: 4px;
}

.puro-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.puro-explorer-body {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 300px;
  min-height: 0;
  height: min(660px, calc(100vh - 150px));
}

.puro-explorer-rail {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  border-right: 1px solid #e5eaf1;
  background: #f8fafc;
  padding: 12px;
}

.puro-thumb-button {
  position: relative;
  overflow: hidden;
  width: 62px;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #111827;
  padding: 0;
}

.puro-thumb-button.active {
  border-color: #dc2626;
}

.puro-thumb-button img,
.puro-thumb-button .puro-video-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puro-thumb-button .puro-video-placeholder {
  align-items: center;
  justify-items: center;
  font-size: 10px;
}

.puro-explorer-main {
  min-width: 0;
  min-height: 0;
  background: #0f172a;
  padding: 10px;
}

.puro-explorer-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
    #111827;
  background-size: 22px 22px;
}

.puro-explorer-preview video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  image-orientation: from-image;
  object-fit: scale-down;
}

.puro-audit-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.puro-nav-button {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 54px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.puro-nav-button.previous {
  left: 14px;
}

.puro-nav-button.next {
  right: 14px;
}

.puro-explorer-details {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  border-left: 1px solid #e5eaf1;
  padding: 16px;
}

.puro-file-detail {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.puro-file-detail strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puro-file-detail span {
  color: #64748b;
  font-size: 13px;
}

.puro-explorer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #edf0f5;
  margin-top: 14px;
  padding-top: 14px;
}

.puro-explorer-actions a,
.puro-explorer-actions button {
  min-height: 34px;
  border: 1px solid #d7dce4;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-weight: 850;
  padding: 0 12px;
  text-decoration: none;
}

.puro-explorer-actions .active {
  border-color: #065f46;
  background: #ecfdf5;
  color: #065f46;
}

.puro-explorer-actions .danger {
  color: #b91c1c;
}

.puro-explorer-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  margin-top: 16px;
}

.puro-explorer-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px;
  text-align: left;
}

.puro-explorer-list button.active {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.puro-explorer-list span {
  overflow: hidden;
  color: #111827;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puro-explorer-list small {
  color: #64748b;
}

.puro-wallboard {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(220, 38, 38, 0.26), transparent 30%),
    radial-gradient(circle at bottom right, rgba(59, 88, 168, 0.28), transparent 32%),
    #070b17;
  color: #fff;
}

.puro-wallboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(7, 11, 23, 0.78);
  padding: 16px 24px;
  backdrop-filter: blur(16px);
}

.puro-wallboard-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.puro-wallboard-brand img {
  width: 72px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.34));
}

.puro-wallboard-brand h2 {
  margin: 0;
  font-size: 24px;
}

.puro-wallboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.puro-wallboard-actions span {
  color: rgba(255,255,255,0.72);
  font-weight: 850;
}

.puro-wallboard-actions button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-weight: 900;
  padding: 0 14px;
}

.puro-wallboard-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 0;
  text-align: center;
}

.puro-wallboard-empty img {
  width: min(440px, 80vw);
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,0.42));
}

.puro-wallboard-empty h2,
.puro-wallboard-empty p {
  margin: 0;
}

.puro-wallboard-empty p {
  color: rgba(255,255,255,0.72);
}

.puro-post {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  margin: min(3vh, 24px) auto;
  width: min(760px, calc(100vw - 42px));
  max-height: calc(100vh - 126px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(0,0,0,0.38);
  animation: puro-feed-scroll 680ms cubic-bezier(.18,.88,.2,1);
}

.puro-post-media {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    #050814;
  background-size: 24px 24px;
}

.puro-post-media img,
.puro-post-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 356px);
  object-fit: contain;
}

.puro-post-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: #fff;
  border-bottom: 1px solid #edf0f5;
  color: #111827;
  padding: 14px 16px;
}

.puro-post-profile img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #17245b;
  object-fit: contain;
  padding: 5px;
}

.puro-post-profile strong,
.puro-post-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puro-post-profile span,
.puro-post-caption p {
  color: #64748b;
}

.puro-post-caption {
  min-width: 0;
  background: #fff;
  border-top: 1px solid #edf0f5;
  color: #111827;
  padding: 16px;
}

.puro-post-caption h3 {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.08;
  margin: 0;
}

.puro-post-caption p {
  margin: 10px 0 0;
}

.puro-social-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #edf0f5;
  margin-top: 18px;
  padding-top: 16px;
}

.puro-social-tags span {
  border: 1px solid #dbe2ec;
  border-radius: 999px;
  background: #f8fafc;
  color: #1f2a68;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 10px;
}

@keyframes puro-feed-scroll {
  0% {
    opacity: 0;
    transform: translateY(82px);
  }
  72% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.puro-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
  gap: 14px;
  justify-content: start;
  padding-top: 14px;
}

.puro-gallery.single {
  grid-template-columns: minmax(0, 240px);
}

.puro-gallery.double {
  grid-template-columns: repeat(2, minmax(0, 240px));
}

.puro-gallery.multi {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.puro-media-card {
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  overflow: hidden;
  background: #fbfcfe;
  min-width: 0;
}

.puro-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #111827;
}

.puro-preview img,
.puro-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puro-play-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.84);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.puro-video-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(51, 65, 85, 0.92));
}

.puro-video-placeholder span {
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  font-weight: 900;
  padding: 7px 12px;
}

.puro-media-meta {
  gap: 3px;
  padding: 10px 12px;
}

.puro-media-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puro-media-actions {
  border-top: 1px solid #edf0f5;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 0 0;
}

.puro-media-actions a,
.puro-media-actions button {
  min-height: 30px;
  padding: 0 9px;
}

.puro-media-actions .active {
  border-color: #065f46;
  background: #ecfdf5;
  color: #065f46;
}

.puro-pagination {
  max-width: 1180px;
  margin: 16px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.puro-pagination span {
  color: #64748b;
  font-weight: 850;
}

@keyframes puro-stack-left {
  0%, 100% { transform: rotate(-3deg) translate(-8px, 8px); }
  50% { transform: rotate(-4deg) translate(-10px, 9px); }
}

@keyframes puro-stack-right {
  0%, 100% { transform: rotate(3deg) translate(8px, 7px); }
  50% { transform: rotate(4deg) translate(10px, 8px); }
}

.puro-pagination button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

@media (max-width: 780px) {
  .puro-shell {
    padding: 18px;
  }

  .puro-topbar,
  .puro-section-head,
  .puro-upload-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .puro-login,
  .puro-add-user,
  .puro-gallery-tools,
  .puro-search {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .puro-search input {
    width: 100%;
  }

  .puro-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .puro-storage-main {
    flex-direction: column;
  }

  .puro-storage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .puro-upload-list {
    grid-template-columns: minmax(0, 360px);
  }

  .puro-upload {
    height: 540px;
    max-width: 100%;
  }

  .puro-upload-head {
    min-height: 0;
  }

 }

@media (max-width: 920px) {
  .puro-modal-backdrop {
    align-items: stretch;
    padding: 12px;
  }

  .puro-explorer {
    max-height: calc(100vh - 24px);
  }

  .puro-explorer-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(260px, 1fr) auto;
    height: calc(100vh - 126px);
  }

  .puro-explorer-rail {
    grid-auto-flow: column;
    grid-auto-columns: 62px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid #e5eaf1;
  }

  .puro-explorer-details {
    border-left: 0;
    border-top: 1px solid #e5eaf1;
    max-height: 260px;
  }

  .puro-explorer-main {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .puro-post {
    margin: 14px auto;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 132px);
  }

  .puro-post-caption {
    padding: 14px;
  }
}

@media (max-width: 700px) {
  .puro-wallboard-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .puro-wallboard-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .puro-wallboard-actions button {
    flex: 1;
  }

  .puro-post-caption h3 {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  .puro-login-brand,
  .puro-login-form {
    padding: 24px;
  }

  .puro-login-brand {
    min-height: 320px;
  }

  .puro-login-brand h2 {
    font-size: 28px;
  }

  .puro-explorer-head {
    padding: 14px;
  }

  .puro-explorer-head h2 {
    font-size: 20px;
  }

  .puro-explorer-main,
  .puro-explorer-details {
    padding: 12px;
  }
}

/* ─── CEO daily report (mobile-first) ───────────────────────────── */
.ceo-report-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.ceo-report-shell h1:focus { outline: none; }

.ceo-report-loading,
.ceo-report-denied {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--text-2);
}

.ceo-report-denied strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

/* ── Login ───────────────────────────── */
.ceo-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: 16px;
  width: min(420px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.ceo-login-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ceo-login-brand span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ceo-login-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.ceo-login-panel h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ceo-login-panel p {
  margin: -6px 0 2px;
  color: var(--text-2);
  font-size: 14px;
}

.ceo-login-panel label {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ceo-login-panel input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

.ceo-login-panel input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-soft);
}

.ceo-login-panel button {
  margin-top: 4px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: opacity .15s, transform .05s;
}

.ceo-login-panel button:active { transform: scale(0.99); }
.ceo-login-panel button:disabled { opacity: 0.55; cursor: progress; }

.ceo-login-error {
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  color: #b91c1c;
  font-size: 13px;
  padding: 10px 12px;
}

/* ── Report shell ───────────────────────────── */
.ceo-report-phone {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 20px 16px calc(40px + env(safe-area-inset-bottom));
}

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

.ceo-report-head > div { min-width: 0; }

.ceo-report-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ceo-report-head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}

/* ── Report history ───────────────────────────── */
.ceo-history-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.ceo-history-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ceo-history-heading > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ceo-history-heading span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ceo-history-heading strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ceo-today-button {
  min-height: 28px;
  border: 1px solid var(--brand-blue);
  border-radius: 999px;
  background: var(--brand-blue-soft);
  padding: 0 10px;
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 800;
}

.ceo-history-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ceo-date-step {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.ceo-date-step svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ceo-date-step:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* ── Date picker ───────────────────────────── */
.ceo-date-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ceo-date-picker span {
  position: absolute;
  left: 14px;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.ceo-date-picker input {
  appearance: none;
  -webkit-appearance: none;
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: transparent;
  font: inherit;
  padding: 0 12px 0 96px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.ceo-date-picker input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.ceo-login-brand .ceo-date-picker span { font-size: 12px; }

.ceo-date-picker.history span {
  left: 12px;
  font-size: 11px;
}

.ceo-date-picker.history input {
  width: 118px;
  min-height: 36px;
  padding-left: 78px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

/* ── KPI cards ───────────────────────────── */
.ceo-report-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.ceo-report-kpis div {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.ceo-report-kpis div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--green);
}

.ceo-report-kpis div:last-child::before { background: var(--red); }

.ceo-report-kpis span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.ceo-report-kpis strong {
  display: block;
  margin-top: 6px;
  color: var(--green);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ceo-report-kpis strong.pending { color: var(--red); }

/* ── People search ───────────────────────────── */
.ceo-people-search {
  min-height: 46px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}

.ceo-people-search:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-soft);
}

.ceo-people-search > svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
}

.ceo-people-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.ceo-people-search input::placeholder { color: var(--text-3); }

.ceo-people-search button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
}

.ceo-search-count {
  margin: -4px 2px 12px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.ceo-no-results {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--text-2);
}

.ceo-no-results strong { color: var(--text); font-size: 15px; }
.ceo-no-results span { font-size: 13px; }
.ceo-no-results button {
  margin-top: 6px;
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  padding: 9px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* ── Employee list ───────────────────────────── */
.ceo-employee-list {
  display: grid;
  gap: 12px;
}

.ceo-employee-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}

.ceo-employee-card:hover { box-shadow: var(--shadow-md); }

.ceo-employee-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--green);
}

.ceo-employee-card.missing::before { background: var(--red); }

.ceo-employee-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ceo-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ceo-employee-card.missing .ceo-avatar {
  background: var(--surface-2);
  color: var(--text-3);
}

.ceo-person { min-width: 0; }

.ceo-person h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ceo-person span {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ceo-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ceo-status-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ceo-status-pill.sent {
  background: var(--green-soft);
  color: #047857;
}

.ceo-status-pill.missing {
  background: var(--red-soft);
  color: #b91c1c;
}

/* ── Audio cards ───────────────────────────── */
.ceo-audio-stack {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.ceo-audio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
}

.ceo-audio-card.is-empty { opacity: 0.6; }

.ceo-audio-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.ceo-audio-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ceo-audio-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.ceo-audio-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
}

.ceo-audio-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ceo-audio-icon.mic { background: var(--brand-blue-soft); color: var(--brand-blue); }
.ceo-audio-icon.spark { background: #ede9fe; color: #6d28d9; }
.ceo-audio-icon.spark svg { fill: currentColor; stroke: none; }

.ceo-play {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
  transition: transform .05s, opacity .15s;
}

.ceo-play svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transform: translateX(1px);
}

.ceo-play.full { background: var(--brand-blue); }
.ceo-play.ai {
  background: #6d28d9;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}

.ceo-play:not(:disabled):active { transform: scale(0.93); }

.ceo-play:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.ceo-audio-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
  overflow: hidden;
}

.ceo-audio-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.ceo-audio-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 9px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
}

.ceo-empty-report {
  margin: 14px 0 0;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 520px) {
  .ceo-report-head { margin-bottom: 14px; }

  .ceo-history-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .ceo-history-heading { justify-content: space-between; }
  .ceo-history-controls { width: 100%; }
  .ceo-date-picker.history { flex: 1; }
  .ceo-date-picker.history input { width: 100%; }
  .ceo-date-step { flex-shrink: 0; }
}

/* ── Tablet / desktop scale-up ───────────────────────────── */
@media (min-width: 600px) {
  .ceo-report-phone { padding: 28px 24px 48px; }

  .ceo-report-head h1 { font-size: 28px; }
  .ceo-report-head p { font-size: 15px; }

  .ceo-report-kpis { gap: 14px; }
  .ceo-report-kpis div { padding: 20px; }
  .ceo-report-kpis strong { font-size: 40px; }

  .ceo-employee-card { padding: 20px; }
  .ceo-employee-top { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ceo-avatar { width: 52px; height: 52px; font-size: 17px; }
  .ceo-person h2 { font-size: 18px; }
  .ceo-person span { font-size: 14px; }
}