/* app-tokens.css — potongan dari assets/app.css (dipecah 28 Jul 2026).
   Lapisan token aktif: v8 Liquid Glass, TOKEN KESERAGAMAN (G0), mode malam, polish per-platform.
   URUTAN <link> di index.html/admin-users.html/observability.html adalah KONTRAK:
   cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas.
   Muat setelah app.css, sebelum app-views.css. */
    /* v8 Liquid Glass Executive Interface */
    :root{
      --bg:#eef3f8;
      --panel:rgba(255,255,255,.58);
      --panel-strong:#f8fafc;
      --soft:#edf2f7;
      --ink:#101828;
      --muted:#5f6e84; /* retune G2: 4.46 -> 4.64 di bg */
      --line:rgba(255,255,255,.56);
      --accent:#111827;
      --accent-soft:rgba(255,255,255,.46);
      --success:#047857;
      --ok:var(--success);
      --success-bg:rgba(209,250,229,.68);
      --success-border:rgba(4,120,87,.38);
      --warning:#a15c07;
      --warning-bg:rgba(254,243,199,.7);
      --warning-border:rgba(217,119,6,.38);
      --danger:#b42318;
      --danger-bg:rgba(254,226,226,.72);
      --danger-border:rgba(180,35,24,.38);
      --info:#026aa2;
      --info-bg:rgba(224,242,254,.74);
      --info-border:rgba(2,132,199,.36);
      --priority-p4:#5b21b6;
      --priority-p4-bg:#ede9fe;
      --priority-p4-border:rgba(109,40,217,.34);
      --priority-p5:#166534;
      --priority-p5-bg:#dcfce7;
      --priority-p5-border:rgba(22,163,74,.34);
      --status-neutral:#334155;
      --status-neutral-bg:#e2e8f0;
      --status-neutral-border:rgba(71,85,105,.34);
      --state-filled:#16a34a;
      --state-filled-strong:#116636; /* G2: 4.29 -> >=6 */
      --state-filled-bg:rgba(22,163,74,.06);
      --state-filled-bg-soft:rgba(22,163,74,.05);
      --state-filled-chip-bg:rgba(22,163,74,.1);
      --state-filled-border:rgba(22,163,74,.42);
      --state-filled-border-soft:rgba(22,163,74,.25);
      --state-missing:#dc2626;
      --state-missing-strong:#b42318;
      --state-missing-label:#b91c1c;
      --state-missing-bg:rgba(220,38,38,.06);
      --state-missing-bg-soft:rgba(220,38,38,.05);
      --state-missing-note-bg:rgba(239,68,68,.08);
      --state-missing-chip-bg:rgba(239,68,68,.1);
      --state-missing-label-bg:rgba(220,38,38,.12);
      --state-missing-border:rgba(220,38,38,.42);
      --state-missing-border-soft:rgba(220,38,38,.32);
      --state-progress-start:#f59e0b;
      --state-progress-end:#3b82f6;
      --readiness-complete:#34c759;
      --signal-pending:#d97706;
      --signal-risk:#dc2626;
      --signal-p1:#dc2626;
      --signal-p2:#ea580c;
      --signal-p3:#2563eb;
      --signal-p4:#7c3aed;
      --signal-p5:#16a34a;
      --shadow:0 18px 48px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.68);
      --glass-bg:linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
      --glass-bg-strong:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.48));
      --glass-border:rgba(255,255,255,.72);
      --glass-tint-a:rgba(70,126,255,.14);
      --glass-tint-b:rgba(16,185,129,.12);
      --glass-tint-c:rgba(255,255,255,.54);
      --radius:24px;
      /* ===== TOKEN KESERAGAMAN (Fase 3 G0, 26 Jul 2026) ====================
         Skala hasil audit 6-dimensi; gerbang pemilik A-E terkunci. Semua token
         BARU didefinisikan DI SINI (kaskade efektif = blok v8 ini) — :root di
         baris 1 adalah LAPISAN MATI, jangan menambah token di sana. */
      --font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
      --fs-micro:10px;      /* PAGAR: dekorasi grid kalender saja — haram utk label/meta */
      --fs-caption:11px;    /* lantai teks bermakna: meta, chip, label nav */
      --fs-label:12px;      /* label form, badge, tombol kecil */
      --fs-body:13px;       /* isi kartu, tabel, paragraf */
      --fs-title:15px;      /* judul kartu/agenda (gerbang C) */
      --fs-heading:18px;    /* h2/h3 seksi & modal (gerbang C) */
      --fs-display:22px;    /* angka statistik/metrik */
      --fs-hero:clamp(26px, 3vw, 42px);
      --fs-input-mobile:16px; /* guard anti auto-zoom iOS — jangan diturunkan */
      --fw-medium:600; --fw-bold:700; --fw-heavy:800;
      --lh-none:1; --lh-tight:1.2; --lh-snug:1.35; --lh-reading:1.5;
      /* kontrol: tombol + isian SATU skala (gerbang A: 44px; gerbang B: fs 14) */
      --ctrl-h:44px; --ctrl-h-sm:36px; --ctrl-h-lg:48px; --tap-min:44px;
      --ctrl-fs:14px; --ctrl-fs-sm:13px;
      --field-pad:10px 12px; --field-pad-sm:8px 10px;
      --field-ta-h:88px; --field-ta-h-sm:58px;
      /* radius SATU pemilik (pill tetap --ui-r-pill) */
      --radius-card:var(--radius); --radius-inner:16px;
      --radius-control:14px; --radius-chip:10px;
      /* spasi half-step pelengkap --ui-1..6 */
      --ui-05:2px; --ui-15:6px; --ui-25:10px;
      --pad-card:var(--ui-4); --pad-card-dense:14px; --pad-tile:var(--ui-3);
      /* warna keterbacaan (gerbang E: web dulu, paritas iOS menyusul) */
      --accent-ink:#ffffff;         /* teks di atas --accent */
      --link:#0a5dc2;               /* TEKS biru tautan/aksi (pengganti #0a84ff utk teks) */
      --link-contrast:#ffffff;      /* teks di badge berlatar --link */
      --status-tapping-ink:#c00f3c; /* TEKS tapping; nilai --status-tapping DIKUNCI uji */
      --cc-accent:#123c52;          /* s2-wa-name & linkModal — dulu dirujuk tanpa definisi */
      --shadow-soft:0 12px 28px rgba(15,23,42,.10); /* dipakai 6x — dulu tak pernah ada */
      --evt-hut-ink:#8d1a9c;        /* teks HUT di atas pita #fbe8ff (dulu #c026d3 3.97:1) */
      /* dua keluarga status keputusan BARU (27 Jul 2026): Kirim Bunga & Rescheduled
         dulu menebeng approved/waiting -> tombol kembar. Rasio terhitung 6.55 & 4.86. */
      --status-flower:#8d1a9c; --status-flower-bg:#fbe8ff; --status-flower-border:#eebcf7;
      --status-resched:#0f766e; --status-resched-bg:#e4f5f1; --status-resched-border:#aee3d6;
      /* definisi utk properti yang selama ini dirujuk TANPA definisi (jatuh ke
         fallback terang di kedua tema — bug tema gelap) */
      --border:#e2e8f0;
      --surface:#ffffff;
      --surface-2:rgba(16,24,40,.05);
      --card-bg:#ffffff;
      --chip-bg:#f3f4f6;
      --teal:#0f766e;
    }
    [data-theme="dark"]{
      --bg:#222a2d;
      --panel:rgba(52,62,66,.92);
      --panel-strong:#303a3e;
      --soft:#3b464a;
      --ink:#f3f6f7;
      --muted:#c2cdd1;
      --line:rgba(89,102,107,.86);
      --accent:#f3f6f7;
      --accent-soft:rgba(65,76,80,.88);
      --success:#a7f3d0;
      --ok:var(--success);
      --success-bg:rgba(6,95,70,.9);
      --success-border:rgba(52,211,153,.72);
      --warning:#fef3c7;
      --warning-bg:rgba(120,53,15,.9);
      --warning-border:rgba(251,191,36,.72);
      --danger:#fee2e2;
      --danger-bg:rgba(153,27,27,.84);
      --danger-border:rgba(248,113,113,.72);
      --info:#e0f2fe;
      --info-bg:rgba(3,105,161,.82);
      --info-border:rgba(56,189,248,.68);
      --priority-p4:#ede9fe;
      --priority-p4-bg:rgba(91,33,182,.84);
      --priority-p4-border:rgba(167,139,250,.72);
      --priority-p5:#d1fae5;
      --priority-p5-bg:rgba(6,95,70,.9);
      --priority-p5-border:rgba(52,211,153,.72);
      --status-neutral:#f1f5f9;
      --status-neutral-bg:rgba(51,65,85,.9);
      --status-neutral-border:rgba(148,163,184,.72);
      --state-filled:#6ee7b7;
      --state-filled-strong:#a7f3d0;
      --state-filled-bg:rgba(6,95,70,.52);
      --state-filled-bg-soft:rgba(6,95,70,.46);
      --state-filled-chip-bg:rgba(6,95,70,.82);
      --state-filled-border:rgba(52,211,153,.72);
      --state-filled-border-soft:rgba(52,211,153,.58);
      --state-missing:#f87171;
      --state-missing-strong:#fecaca;
      --state-missing-label:#fecaca;
      --state-missing-bg:rgba(153,27,27,.5);
      --state-missing-bg-soft:rgba(153,27,27,.44);
      --state-missing-note-bg:rgba(153,27,27,.42);
      --state-missing-chip-bg:rgba(153,27,27,.76);
      --state-missing-label-bg:rgba(153,27,27,.76);
      --state-missing-border:rgba(248,113,113,.72);
      --state-missing-border-soft:rgba(248,113,113,.58);
      --state-progress-start:#fbbf24;
      --state-progress-end:#60a5fa;
      --readiness-complete:#34d399;
      --signal-pending:#fbbf24;
      --signal-risk:#f87171;
      --signal-p1:#f87171;
      --signal-p2:#fb923c;
      --signal-p3:#60a5fa;
      --signal-p4:#a78bfa;
      --signal-p5:#34d399;
      --shadow:0 24px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
      --glass-bg:linear-gradient(135deg, rgba(52,62,66,.88), rgba(43,52,56,.72));
      --glass-bg-strong:linear-gradient(135deg, rgba(65,76,80,.92), rgba(52,62,66,.82));
      --glass-border:rgba(255,255,255,.18);
      --glass-tint-a:rgba(96,165,250,.08);
      --glass-tint-b:rgba(94,234,212,.06);
      --glass-tint-c:rgba(255,255,255,.08);
      /* token keseragaman — pasangan gelap (G0) */
      --accent-ink:#0b1220;
      --link:#8ec8ff;
      --link-contrast:#06213f;
      --status-tapping-ink:#ffc2cd;
      --cc-accent:#9fd3f4;
      --shadow-soft:0 12px 28px rgba(0,0,0,.42);
      --evt-hut-ink:#8d1a9c;        /* pita HUT tetap terang di kedua tema */
      --status-flower:#f0abfc; --status-flower-bg:rgba(192,38,211,.20); --status-flower-border:rgba(240,171,252,.46);
      --status-resched:#5eead4; --status-resched-bg:rgba(20,184,166,.20); --status-resched-border:rgba(94,234,212,.46);
      --border:rgba(255,255,255,.16);
      --surface:#303a3e;
      --surface-2:rgba(255,255,255,.08);
      --card-bg:#303a3e;
      --chip-bg:#46545a;
      --teal:#5eead4;
    }
    /* ===== MODE MALAM tambahan (G2 keseragaman, 26 Jul 2026) =================
       Permukaan kaca PUTIH yang belum punya pasangan gelap: teksnya (--ink/
       --muted) ikut tema jadi terang, latarnya tetap putih -> rasio 1.4-4.1.
       Latar digelapkan; teks tak disentuh. Semua rasio dihitung >= 4.5.
       (JANGAN memakai selector ".icon-btn" di sini — urutannya dikunci uji.) */
    [data-theme="dark"] .result-reader-toggle-action,
    [data-theme="dark"] .result-reader-toggle-icon,
    [data-theme="dark"] .calendar-mode-btn.active,
    [data-theme="dark"] .nav-btn.active{ background:rgba(65,76,80,.92); }
    [data-theme="dark"] .agenda-preview-chip,
    [data-theme="dark"] .agenda-preview-doc,
    [data-theme="dark"] .agenda-preview-summary,
    [data-theme="dark"] .calendar-date-event,
    [data-theme="dark"] .calendar-date-empty,
    [data-theme="dark"] .calendar-day-event,
    [data-theme="dark"] .calendar-day-event-time,
    [data-theme="dark"] .link-card,
    [data-theme="dark"] .inline-link-btn,
    [data-theme="dark"] .detail-assignee-read.empty .detail-assignee-avatar,
    [data-theme="dark"] .detail-assignee-notice{ background:rgba(255,255,255,.10); }
    [data-theme="dark"] .approval-reschedule-grid input,
    [data-theme="dark"] .waiting-date-control input,
    [data-theme="dark"] .waiting-schedule-group-row input{ background:rgba(255,255,255,.10); }
    [data-theme="dark"] .input-compact-panel summary::after,
    [data-theme="dark"] .input-form-shell summary::after{ background:rgba(255,255,255,.14); }
    [data-theme="dark"] .detail-reassign-btn{ background:rgba(255,69,58,.14); color:#ffb4a9; }
    [data-theme="dark"] .detail-assignee-notice.sent{ color:#7ee2ab; background:rgba(48,209,88,.14); }
    [data-theme="dark"] .detail-assignee-notice.failed,
    [data-theme="dark"] .detail-assignee-notice.not-sent{ color:#ffb4a9; background:rgba(255,69,58,.16); }
    [data-theme="dark"] .detail-assignee-notice.skipped{ color:#ffd58a; background:rgba(255,204,0,.14); }
    [data-theme="dark"] .home-birthday-note .hut-note-link{ color:#f5b8dd; }

    html{background:var(--bg);}
    body{
      background:
        radial-gradient(circle at 12% -8%, rgba(255,255,255,.98) 0 8%, transparent 28%),
        radial-gradient(circle at 88% 0%, var(--glass-tint-a) 0 24%, transparent 42%),
        radial-gradient(circle at 0% 72%, var(--glass-tint-b) 0 22%, transparent 42%),
        linear-gradient(145deg, #f8fbff 0%, var(--bg) 42%, #f5f9fd 100%);
      background-attachment:fixed;
      letter-spacing:0;
    }
    [data-theme="dark"] body{
      background:
        radial-gradient(circle at 18% -10%, rgba(59,130,246,.18) 0 18%, transparent 38%),
        radial-gradient(circle at 86% 4%, rgba(45,212,191,.12) 0 20%, transparent 42%),
        linear-gradient(145deg, #2b3438 0%, var(--bg) 52%, #222a2d 100%);
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        linear-gradient(115deg, transparent 0 22%, rgba(255,255,255,.36) 35%, transparent 48% 100%),
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
      background-size:auto, 44px 44px, 44px 44px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.92), transparent 78%);
    }
    [data-theme="dark"] body::before{
      opacity:.28;
      background:
        linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,.16) 36%, transparent 50% 100%),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size:auto, 46px 46px, 46px 46px;
    }
    .app{
      max-width:1120px;
      padding-left:clamp(0px, 2vw, 18px);
      padding-right:clamp(0px, 2vw, 18px);
    }
    .topbar{
      top:10px;
      width:calc(100% - 20px);
      max-width:1120px;
      margin:10px auto 0;
      border:1px solid var(--glass-border);
      border-radius:28px;
      background:rgba(255,255,255,.48);
      box-shadow:0 18px 48px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.78);
      backdrop-filter:blur(28px) saturate(190%);
      -webkit-backdrop-filter:blur(28px) saturate(190%);
      overflow:hidden;
    }
    [data-theme="dark"] .topbar{background:rgba(52,62,66,.88);}
    .topbar::after,
    .card::after,
    .home-map-card::after,
    .agenda-card::after,
    .stat::after,
    .apple-calendar-card::after,
    .week-focus-card::after,
    .selected-date-card::after,
    .modal::after{
      content:"";
      position:absolute;
      inset:1px;
      pointer-events:none;
      border-radius:inherit;
      background:linear-gradient(145deg, rgba(255,255,255,.6), transparent 32%, rgba(255,255,255,.18) 68%, transparent);
      opacity:.72;
      mask-image:linear-gradient(#000, transparent 64%);
    }
    .topbar-inner{padding:13px 16px;}
    .logo{
      background:linear-gradient(145deg, #101828, #344054);
      border:1px solid rgba(255,255,255,.42);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 12px 28px rgba(16,24,40,.22);
    }
    .brand h1{
      font-size:19px;
      letter-spacing:0;
      font-weight:820;
    }
    main{padding:var(--ui-5) var(--ui-15) var(--ui-4);}
    .card,
    .home-map-card,
    .agenda-card,
    .stat,
    .apple-calendar-card,
    .week-focus-card,
    .selected-date-card,
    .presentation-day,
    .presentation-header,
    .presentation-summary .stat,
    .modal{
      position:relative;
      border:1px solid var(--glass-border);
      background:var(--glass-bg);
      box-shadow:var(--shadow);
      backdrop-filter:blur(26px) saturate(180%);
      -webkit-backdrop-filter:blur(26px) saturate(180%);
    }
    .card,
    .home-map-card,
    .agenda-card,
    .selected-date-card{border-radius:26px;}
    .stat{
      border-radius:22px;
      min-height:92px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:hidden;
    }
    .stat::before{
      content:"";
      position:absolute;
      right:-26px;
      top:-34px;
      width:98px;
      height:98px;
      border-radius:var(--ui-r-pill);
      background:radial-gradient(circle, var(--glass-tint-a), transparent 68%);
      pointer-events:none;
    }
    .stat span{
      font-size:var(--fs-caption);
      letter-spacing:.01em;
      text-transform:uppercase;
      font-weight:720;
    }
    .stat strong{
      font-size:28px;
      letter-spacing:0;
      font-weight:850;
    }
    .section-head{
      margin:22px 0 12px;
      align-items:center;
    }
    .section-head h2,
    .calendar-title,
    .week-title{
      letter-spacing:0;
      font-weight:850;
    }
    .icon-btn,
    .btn,
    .chip,
    input,
    select,
    textarea,
    .month-control,
    .legend-chip,
    .kv,
    .extract-box,
    .file-drop,
    .check-item,
    .week-agenda-item,
    .calendar-pill{
      border-color:var(--glass-border);
      background:rgba(255,255,255,.48);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.56), 0 8px 22px rgba(16,24,40,.06);
      backdrop-filter:blur(18px) saturate(160%);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
    }
    [data-theme="dark"] .icon-btn,
    [data-theme="dark"] .btn,
    [data-theme="dark"] .chip,
    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea,
    [data-theme="dark"] .month-control,
    [data-theme="dark"] .legend-chip,
    [data-theme="dark"] .kv,
    [data-theme="dark"] .extract-box,
    [data-theme="dark"] .file-drop,
    [data-theme="dark"] .check-item,
    [data-theme="dark"] .week-agenda-item,
    [data-theme="dark"] .calendar-pill{
      background:rgba(15,23,42,.5);
    }
    .btn,
    .chip,
    .icon-btn,
    .nav-btn,
    .week-agenda-item,
    .calendar-day{
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .btn:hover,
    .chip:hover,
    .icon-btn:hover,
    .nav-btn:hover,
    .week-agenda-item:hover,
    .calendar-day:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 30px rgba(16,24,40,.11), inset 0 1px 0 rgba(255,255,255,.72);
    }
    .btn.primary,
    .chip.active{
      color:#fff;
      border-color:rgba(255,255,255,.24);
      background:linear-gradient(145deg, rgba(17,24,39,.96), rgba(52,64,84,.9));
      box-shadow:0 16px 34px rgba(16,24,40,.22), inset 0 1px 0 rgba(255,255,255,.22);
    }
    [data-theme="dark"] .btn.primary,
    [data-theme="dark"] .chip.active{
      color:#0b1220;
      background:linear-gradient(145deg, rgba(248,250,252,.96), rgba(203,213,225,.88));
    }
    .btn.success,
    .btn.warn,
    .btn.danger,
    .badge{
      border:1px solid rgba(255,255,255,.38);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
    }
    input:focus,
    select:focus,
    textarea:focus{
      border-color:rgba(17,24,39,.32);
      box-shadow:0 0 0 4px rgba(255,255,255,.5), 0 0 0 6px rgba(17,24,39,.1);
    }
    .agenda-card{overflow:hidden;}
    .agenda-card::before,
    .week-day-card::before,
    .calendar-day::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(105deg, rgba(255,255,255,.34), transparent 38%);
      opacity:.7;
    }
    .agenda-row{position:relative;z-index:1;}
    .timebox{
      background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.32));
      border:1px solid var(--glass-border);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
    }
    [data-theme="dark"] .timebox{background:rgba(255,255,255,.1);}
    .progress{background:rgba(255,255,255,.38);}
    .progress span{
      background:linear-gradient(90deg, #111827, #475467);
      box-shadow:0 0 18px rgba(17,24,39,.24);
    }
    [data-theme="dark"] .progress span{background:linear-gradient(90deg, #f8fafc, #94a3b8);}
    .bottom-nav{
      left:50%;
      right:auto;
      bottom:10px;
      width:calc(100% - 20px);
      max-width:920px;
      transform:translateX(-50%);
      border:1px solid var(--glass-border);
      border-radius:28px;
      background:rgba(255,255,255,.55);
      box-shadow:0 18px 48px rgba(16,24,40,.16), inset 0 1px 0 rgba(255,255,255,.7);
      backdrop-filter:blur(30px) saturate(190%);
      -webkit-backdrop-filter:blur(30px) saturate(190%);
    }
    [data-theme="dark"] .bottom-nav{background:rgba(43,52,56,.92);}
    .nav-inner{max-width:none;}
    .nav-btn.active{
      color:var(--ink);
      background:rgba(255,255,255,.54);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 10px 22px rgba(16,24,40,.09);
    }
    [data-theme="dark"] .nav-btn.active{background:rgba(255,255,255,.12);}
    .week-focus-card,
    .apple-calendar-card{border-radius:32px;}
    .week-day-card,
    .calendar-day{
      position:relative;
      overflow:hidden;
      border:1px solid var(--glass-border);
      background:rgba(255,255,255,.36);
      backdrop-filter:blur(18px) saturate(160%);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
    }
    [data-theme="dark"] .week-day-card,
    [data-theme="dark"] .calendar-day{background:rgba(15,23,42,.36);}
    .week-day-card.today,
    .calendar-day.today,
    .calendar-day.selected{
      background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(232,240,255,.48));
      border-color:rgba(255,255,255,.86);
      box-shadow:0 16px 36px rgba(30,64,175,.13), inset 0 1px 0 rgba(255,255,255,.74);
    }
    [data-theme="dark"] .week-day-card.today,
    [data-theme="dark"] .calendar-day.today,
    [data-theme="dark"] .calendar-day.selected{
      background:linear-gradient(145deg, rgba(30,41,59,.76), rgba(30,64,175,.24));
    }
    .date-circle,
    .calendar-count,
    .week-count,
    .presentation-count{
      box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 8px 18px rgba(16,24,40,.1);
    }
    .modal-backdrop{
      background:rgba(2,6,23,.72);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
    }
    .modal{
      border-radius:var(--radius-card); /* G3b: 34 -> 24, pemenang desktop */
      background:var(--glass-bg-strong);
    }
    .toast{
      background:rgba(17,24,39,.82);
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(18px) saturate(180%);
      -webkit-backdrop-filter:blur(18px) saturate(180%);
    }
    .presentation-overlay{
      background:
        radial-gradient(circle at 12% 0%, var(--glass-tint-a), transparent 34%),
        linear-gradient(145deg, var(--bg), #f8fbff);
    }
    [data-theme="dark"] .presentation-overlay{
      background:
        radial-gradient(circle at 12% 0%, rgba(59,130,246,.18), transparent 34%),
        linear-gradient(145deg, #020617, var(--bg));
    }
    .presentation-header{
      background:rgba(255,255,255,.62);
      backdrop-filter:blur(28px) saturate(180%);
      -webkit-backdrop-filter:blur(28px) saturate(180%);
    }
    .pdf-slide{
      border-radius:28px;
      border:1px solid var(--glass-border);
      box-shadow:0 24px 70px rgba(16,24,40,.16);
    }
    @media (max-width:720px){
      .topbar{
        top:6px;
        width:calc(100% - 12px);
        margin-top:6px;
        border-radius:24px;
      }
      main{padding:14px 0 12px;}
      .stats{gap:var(--ui-25);}
      .stat{min-height:84px;padding:11px;}
      .stat strong{font-size:24px;}
      .section-head{align-items:flex-start;}
      .bottom-nav{
        width:calc(100% - 12px);
        bottom:6px;
        border-radius:24px;
        padding-left:7px;
        padding-right:7px;
      }
      .nav-inner{gap:3px;}
      .nav-btn{border-radius:var(--radius-inner);font-size:var(--fs-caption);padding:7px 2px;} /* G3: label nav 10 -> 11 */
      .nav-btn span:first-child{font-size:var(--fs-heading);}
    }
    .calendar-suite{
      position:relative;
      overflow:hidden;
      border:1px solid var(--glass-border);
      border-radius:34px;
      padding:var(--ui-4);
      background:var(--glass-bg);
      box-shadow:var(--shadow);
      backdrop-filter:blur(28px) saturate(180%);
      -webkit-backdrop-filter:blur(28px) saturate(180%);
    }
    .calendar-suite::before{
      content:"";
      position:absolute;
      inset:-1px;
      pointer-events:none;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.58), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.34), transparent 45%);
      opacity:.85;
    }
    [data-theme="dark"] .calendar-suite::before{
      opacity:.3;
    }
    .calendar-suite > *{
      position:relative;
      z-index:1;
    }
    .calendar-suite-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:var(--ui-4);
      padding-bottom:14px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 72%, transparent);
    }
    .calendar-suite-eyebrow{
      margin:0 0 4px;
      color:var(--muted);
      font-size:var(--fs-caption);
      font-weight:780;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .calendar-suite-title{
      margin:0;
      font-size:24px;
      line-height:1.08;
      letter-spacing:0;
      font-weight:860;
    }
    .calendar-suite-subtitle{
      margin:6px 0 0;
      color:var(--muted);
      font-size:var(--fs-body);
      line-height:var(--lh-snug);
    }
    .calendar-segmented{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--ui-1);
      width:min(390px, 100%);
      flex:0 0 min(390px, 100%);
      padding:var(--ui-1);
      border:1px solid var(--glass-border);
      border-radius:var(--ui-r-pill);
      background:rgba(255,255,255,.38);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 10px 24px rgba(16,24,40,.08);
      backdrop-filter:blur(18px) saturate(160%);
      -webkit-backdrop-filter:blur(18px) saturate(160%);
    }
    [data-theme="dark"] .calendar-segmented{
      background:rgba(15,23,42,.44);
    }
    .calendar-mode-btn{
      min-height:36px;
      border:0;
      border-radius:var(--ui-r-pill);
      background:transparent;
      color:var(--muted);
      font-size:var(--fs-body);
      font-weight:760;
      white-space:nowrap;
      transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .calendar-mode-btn:hover{
      color:var(--ink);
      transform:translateY(-1px);
    }
    .calendar-mode-btn.active{
      color:var(--ink);
      background:rgba(255,255,255,.72);
      box-shadow:0 10px 22px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.76);
    }
    [data-theme="dark"] .calendar-mode-btn.active{
      background:rgba(255,255,255,.15);
    }
    .calendar-glance{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
      margin:12px 0 14px;
    }
    .calendar-glance-item{
      min-width:0;
      border:1px solid var(--glass-border);
      border-radius:22px;
      padding:11px 12px;
      background:rgba(255,255,255,.38);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
    }
    [data-theme="dark"] .calendar-glance-item{
      background:rgba(15,23,42,.42);
    }
    .calendar-glance-item span,
    .calendar-glance-item small{
      display:block;
      min-width:0;
      color:var(--muted);
      font-size:11px;
      font-weight:720;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .calendar-glance-item strong{
      display:block;
      margin:2px 0;
      font-size:24px;
      line-height:1;
      letter-spacing:0;
      font-weight:860;
    }
    .calendar-mode-panel{
      display:none;
      animation:calendarPanelIn .22s ease both;
    }
    .calendar-mode-panel.active{
      display:block;
    }
    @keyframes calendarPanelIn{
      from{opacity:0;transform:translateY(6px);}
      to{opacity:1;transform:translateY(0);}
    }
    .day-focus-layout{
      display:grid;
      grid-template-columns:minmax(180px, .32fr) minmax(0, 1fr);
      gap:14px;
      align-items:start;
    }
    .day-focus-date{
      border:1px solid var(--glass-border);
      border-radius:28px;
      padding:var(--ui-4);
      background:linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.28));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 14px 30px rgba(16,24,40,.08);
    }
    [data-theme="dark"] .day-focus-date{
      background:linear-gradient(145deg, rgba(51,65,85,.62), rgba(15,23,42,.34));
    }
    .day-focus-kicker,
    .day-focus-count{
      display:block;
      color:var(--muted);
      font-size:var(--fs-label);
      font-weight:780;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .day-focus-date strong{
      display:block;
      margin:8px 0 2px;
      font-size:58px;
      line-height:.88;
      letter-spacing:0;
      font-weight:900;
    }
    .day-focus-date > span:not(.day-focus-kicker):not(.day-focus-count){
      display:block;
      color:var(--ink);
      font-size:16px;
      font-weight:760;
    }
    .day-focus-count{
      margin-top:10px;
      text-transform:none;
      letter-spacing:0;
    }
    .day-nav{
      display:flex;
      gap:7px;
      margin-top:14px;
      flex-wrap:wrap;
    }
    .day-nav .btn{
      min-height:36px;
      padding:8px 11px;
      border-radius:var(--ui-r-pill);
    }
    .day-agenda-surface{
      min-width:0;
      border:1px solid var(--glass-border);
      border-radius:28px;
      padding:14px;
      background:rgba(255,255,255,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.48);
    }
    [data-theme="dark"] .day-agenda-surface{
      background:rgba(15,23,42,.3);
    }
    .section-head.compact{
      margin:0 0 10px;
    }
    .section-head.compact h2{
      font-size:var(--fs-heading);
    }
    .agenda-list.compact{
      gap:var(--ui-25);
      max-height:520px;
      overflow:auto;
      padding-right:var(--ui-05);
    }
    .calendar-day-event{
      width:100%;
      display:grid;
      grid-template-columns:72px minmax(0,1fr) auto;
      gap:var(--ui-25);
      align-items:center;
      border:1px solid var(--glass-border);
      border-radius:18px;
      padding:var(--ui-25);
      text-align:left;
      color:var(--ink);
      background:rgba(255,255,255,.42);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 8px 18px rgba(16,24,40,.06);
      backdrop-filter:blur(16px) saturate(160%);
      -webkit-backdrop-filter:blur(16px) saturate(160%);
    }
    [data-theme="dark"] .calendar-day-event{
      background:rgba(15,23,42,.42);
    }
    .calendar-day-event:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.62);
    }
    .calendar-day-event.status-approved{background:color-mix(in srgb, var(--status-approved-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-approved-border);}
    .calendar-day-event.status-pending{background:color-mix(in srgb, var(--status-pending-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-pending-border);}
    .calendar-day-event.status-tapping{background:color-mix(in srgb, var(--status-tapping-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-tapping-border);}
    .calendar-day-event.status-rejected{background:color-mix(in srgb, var(--status-rejected-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-rejected-border);}
    .calendar-day-event.status-delegated{background:color-mix(in srgb, var(--status-delegated-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-delegated-border);}
    .calendar-day-event.status-waiting{background:color-mix(in srgb, var(--status-waiting-bg) 74%, rgba(255,255,255,.34));border-color:var(--status-waiting-border);}
    .calendar-day-event-time{
      display:grid;
      place-items:center;
      min-height:48px;
      border-radius:var(--radius-control);
      background:rgba(255,255,255,.48);
      color:var(--ink);
      font-size:var(--fs-body);
      font-weight:850;
    }
    [data-theme="dark"] .calendar-day-event-time{
      background:rgba(255,255,255,.12);
    }
    .calendar-day-event-title{
      display:block;
      min-width:0;
      font-size:14px;
      line-height:1.25;
      font-weight:790;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .calendar-day-event-meta{
      display:block;
      min-width:0;
      margin-top:3px;
      color:var(--muted);
      font-size:var(--fs-label);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .calendar-day-event .badge{
      align-self:center;
    }
    .link-panel{
      display:grid;
      gap:var(--ui-25);
      margin-top:12px;
    }
    .link-panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--ui-25);
    }
    .link-panel-head strong{
      font-size:14px;
    }
    .link-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
      gap:var(--ui-2);
    }
    .link-card{
      width:100%;
      border:1px solid var(--glass-border);
      border-radius:18px;
      padding:10px 11px;
      background:rgba(255,255,255,.42);
      color:var(--ink);
      text-align:left;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 8px 20px rgba(16,24,40,.07);
      backdrop-filter:blur(16px) saturate(160%);
      -webkit-backdrop-filter:blur(16px) saturate(160%);
    }
    [data-theme="dark"] .link-card{
      background:rgba(15,23,42,.42);
    }
    .link-card:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(16,24,40,.11), inset 0 1px 0 rgba(255,255,255,.62);
    }
    .link-card strong,
    .link-card span{
      display:block;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .link-card strong{
      font-size:var(--fs-body);
      font-weight:var(--fw-heavy);
    }
    .link-card span{
      margin-top:4px;
      color:var(--muted);
      font-size:var(--fs-label);
    }
	    .link-popup-frame{
	      width:100%;
	      min-height:min(64vh,640px);
	      border:1px solid var(--glass-border);
	      border-radius:20px;
	      background:rgba(255,255,255,.54);
	    }
	    .link-reader-toolbar{
	      display:flex;
	      align-items:center;
	      justify-content:space-between;
	      gap:var(--ui-25);
	      margin:0 0 10px;
	      flex-wrap:wrap;
	    }
	    .link-reader-actions,
	    .link-reader-zoom-controls{
	      display:flex;
	      align-items:center;
	      gap:7px;
	      flex-wrap:wrap;
	    }
	    .link-reader-zoom-controls{
	      margin-left:auto;
	      padding:var(--ui-1);
	      border:1px solid var(--glass-border);
	      border-radius:var(--ui-r-pill);
	      background:color-mix(in srgb, var(--panel) 78%, transparent);
	      box-shadow:inset 0 1px 0 rgba(255,255,255,.52), 0 8px 18px rgba(16,24,40,.06);
	    }
	    .link-reader-zoom-controls .btn{
	      min-height:32px;
	      padding:var(--ui-15) var(--ui-25);
	      border-radius:var(--ui-r-pill);
	      font-size:var(--fs-label);
	    }
	    .link-reader-zoom-label{
	      min-width:52px;
	      text-align:center;
	      color:var(--ink);
	      font-size:var(--fs-label);
	      font-weight:900;
	      font-variant-numeric:tabular-nums;
	    }
	    .link-reader-viewport{
	      flex:1 1 auto;
	      min-height:0;
	      overflow:auto;
	      border:1px solid var(--glass-border);
	      border-radius:20px;
	      background:rgba(255,255,255,.68);
	      box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
	      cursor:grab;
	      touch-action:none;
	    }
	    .link-reader-viewport.is-panning{cursor:grabbing;user-select:none}
	    .link-reader-viewport.is-zoomed{overscroll-behavior:contain}
	    .link-reader-viewport.is-external-viewer{
	      cursor:auto;
	      touch-action:pan-x pan-y pinch-zoom;
	      overscroll-behavior:contain;
	      -webkit-overflow-scrolling:touch;
	    }
	    [data-theme="dark"] .link-reader-viewport{
	      background:rgba(15,23,42,.52);
	    }
	    .link-reader-canvas{
	      position:relative;
	      width:100%;
	      height:100%;
	      min-width:100%;
	      min-height:100%;
	    }
	    .link-reader-viewport .link-popup-frame{
	      display:block;
	      width:calc(100% / var(--link-reader-scale, 1));
	      height:calc(100% / var(--link-reader-scale, 1));
	      min-height:calc(100% / var(--link-reader-scale, 1));
	      border:0;
	      border-radius:0;
	      transform:scale(var(--link-reader-scale, 1));
	      transform-origin:top left;
	      background:#fff;
	    }
	    .link-reader-viewport:not(.is-external-viewer) .link-popup-frame{pointer-events:none}
	    .link-reader-viewport.is-external-viewer .link-popup-frame{pointer-events:auto}
	    #linkModal{
	      align-items:center;
	      padding:var(--ui-25);
	      z-index:260;
	    }
    #linkModal .modal{
      max-width:min(1400px, calc(100vw - 20px));
      width:100%;
      height:calc(100vh - 20px);
      max-height:calc(100vh - 20px);
      height:calc(100dvh - 20px);
      max-height:calc(100dvh - 20px);
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border-radius:24px;
    }
	    #linkModal .link-popup-frame{
	      flex:0 0 auto;
	      width:calc(100% / var(--link-reader-scale, 1));
	      height:calc(100% / var(--link-reader-scale, 1));
	      min-height:calc(100% / var(--link-reader-scale, 1));
	    }
    #copyLinkModalUrl[hidden],
    #linkModalOpenNew[hidden],
    #linkReaderBack[hidden],
    #linkReaderPrev[hidden],
    #linkReaderNext[hidden],
    #linkReaderGalleryCount[hidden]{
      display:none !important;
    }
	    .link-reader-gallery-count{min-width:48px;text-align:center;color:var(--ink);font-size:var(--fs-label);font-weight:900;font-variant-numeric:tabular-nums}
    .link-popup-note{
      margin:0 0 10px;
      color:var(--muted);
      font-size:var(--fs-body);
      line-height:var(--lh-snug);
    }
    .inline-link-btn{
      display:inline-flex;
      align-items:center;
      gap:var(--ui-15);
      max-width:100%;
      margin:2px 3px;
      border:1px solid var(--glass-border);
      border-radius:var(--ui-r-pill);
      padding:5px 9px;
      background:rgba(255,255,255,.5);
      color:var(--ink);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 7px 16px rgba(16,24,40,.06);
      font-size:var(--fs-label);
      font-weight:760;
      vertical-align:baseline;
      white-space:nowrap;
    }
    .inline-link-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 22px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.68);
    }
    [data-theme="dark"] .inline-link-btn{
      background:rgba(255,255,255,.12);
    }
    .modal.link-modal{
      max-width:980px;
    }
    .calendar-suite .week-toolbar,
    .calendar-suite .calendar-toolbar{
      margin:0;
      padding:var(--ui-05) 0 var(--ui-3);
    }
    .calendar-suite .calendar-summary{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      margin:12px 0;
      gap:var(--ui-2);
    }
    .calendar-suite .calendar-summary .stat{
      min-height:78px;
      padding:10px 11px;
      border-radius:20px;
    }
    .calendar-suite .calendar-summary .stat strong{
      font-size:var(--fs-display);
    }
    .calendar-suite .week-grid{
      gap:var(--ui-2);
    }
    .calendar-suite .week-day-card{
      min-height:158px;
      border-radius:22px;
      padding:9px;
    }
    .calendar-suite .week-agenda-item{
      padding:7px;
      border-radius:13px;
    }
    .calendar-suite .week-agenda-title{
      -webkit-line-clamp:2;
    }
    .calendar-suite .week-legend{
      margin-top:10px;
    }
    .calendar-suite .calendar-grid{
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:var(--ui-15);
    }
    .calendar-suite #calendarGrid{
      grid-auto-rows:82px;
    }
    .calendar-suite .calendar-day{
      height:82px;
      min-height:0;
      overflow:hidden;
      min-height:82px;
      border-radius:18px;
    }
    .calendar-suite .calendar-pill{
      font-size:10px;
      padding:3px 5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    @media (max-width:760px){
      .calendar-suite{
        border-radius:28px;
        padding:var(--ui-3);
      }
      .calendar-suite-head{
        display:grid;
        grid-template-columns:1fr;
        gap:var(--ui-3);
      }
      .calendar-segmented{
        width:100%;
        flex-basis:auto;
      }
      .calendar-glance{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:6px;
      }
      .calendar-glance-item{
        border-radius:18px;
        padding:9px 8px;
      }
      .calendar-glance-item strong{
        font-size:20px;
      }
      .calendar-glance-item small{
        display:none;
      }
      .day-focus-layout{
        grid-template-columns:1fr;
      }
      .day-focus-date{
        display:grid;
        grid-template-columns:auto 1fr;
        gap:2px 14px;
        align-items:center;
        padding:14px;
      }
      .day-focus-date strong{
        grid-row:1 / span 4;
        margin:0;
        font-size:52px;
      }
      .day-nav{
        grid-column:1 / -1;
        margin-top:10px;
      }
      .day-nav .btn{
        flex:1;
        min-width:0;
      }
      .day-agenda-surface{
        border-radius:24px;
        padding:var(--ui-3);
      }
      .agenda-list.compact{
        max-height:none;
      }
      .calendar-day-event{
        grid-template-columns:58px minmax(0,1fr);
      }
      .calendar-day-event .badge{
        grid-column:2;
        justify-self:start;
      }
      .link-grid{
        grid-template-columns:1fr;
      }
      .link-popup-frame{
        min-height:58vh;
      }
      .calendar-suite .week-grid{
        display:flex;
        grid-template-columns:none;
        gap:var(--ui-2);
        overflow-x:auto;
        padding-bottom:var(--ui-1);
        scroll-snap-type:x mandatory;
      }
      .calendar-suite .week-day-card{
        min-width:238px;
        min-height:150px;
        scroll-snap-align:start;
      }
      .calendar-suite .calendar-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .calendar-suite .calendar-toolbar,
      .calendar-suite .week-toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:var(--ui-25);
      }
      .calendar-suite .month-control{
        width:100%;
      }
      .calendar-suite .calendar-day{
        height:58px;
        min-height:0;
        min-height:58px;
        border-radius:var(--radius-control);
      }
      .calendar-suite #calendarGrid{
        grid-auto-rows:58px;
      }
    }
    @media (max-width:380px){
      .calendar-mode-btn{
        font-size:var(--fs-label);
      }
      .calendar-glance-item span{
        font-size:10px;
      }
      .day-focus-date strong{
        font-size:46px;
      }
    }
    @media print{
      body{background:white!important;}
      body::before{display:none!important;}
      .card,.agenda-card,.stat,.apple-calendar-card,.week-focus-card,.selected-date-card,.calendar-suite,.modal{
        background:white!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
      }
    }

    /* === Mobile Apple Liquid Glass polish === */
    html,body{
      overflow-x:hidden;
    }
    .app,.view,.card,.agenda-card,.modal,.calendar-suite,.week-day-card,.calendar-day,.kv,.stat{
      min-width:0;
    }
    .brand-copy,.section-head > div,.agenda-row > div,.calendar-day-event > span,.approval-summary-row,.detail-card-head > div{
      min-width:0;
    }
    .brand h1,
    .agenda-title,
    .calendar-title,
    .calendar-suite-title,
    .week-title,
    .modal-head h3,
    .detail-view-value,
    .kv strong,
    .kv div,
    .approval-script,
    .approval-whatsapp-preview,
    .whatsapp-brief,
    .whatsapp-source{
      overflow-wrap:anywhere;
    }
    .topbar,
    .bottom-nav{
      isolation:isolate;
    }
    .topbar-actions{
      min-width:0;
      align-items:center;
      justify-content:flex-end;
    }
    .topbar .brand h1{
      word-break:normal;
      overflow-wrap:normal;
      hyphens:none;
    }
    #kcUser{
      min-width:42px;
      max-width:124px;
    }
    @media (max-width:768px){
      .topbar-inner{
        align-items:center;
      }
      .brand{
        gap:var(--ui-25);
        flex:1 1 auto;
        min-width:0;
      }
      .brand-copy{
        flex:1 1 auto;
        min-width:0;
      }
      .logo{
        min-width:46px;
        min-height:46px;
        max-width:46px;
        padding:5px;
        border-radius:var(--radius-inner);
      }
      .logo img{
        height:36px;
        width:auto;
        max-width:100%;
      }
    }
    .bottom-nav{
      padding-left:max(8px, env(safe-area-inset-left, 0px));
      padding-right:max(8px, env(safe-area-inset-right, 0px));
    }
    .nav-inner{
      min-width:0;
    }
    .nav-btn{
      min-width:0;
      touch-action:manipulation;
    }
    .btn,.chip,.icon-btn,.nav-btn,input,select,textarea{
      -webkit-tap-highlight-color:transparent;
    }
    .actions{
      min-width:0;
    }
    .actions .btn{
      min-width:fit-content;
    }
    .card > .actions .btn,
    .approval-quick-body .actions .btn,
    #modalBody > .actions .btn{
      flex:1 1 auto;
    }
    .searchbar,
    .multi-date-input-row,
    .link-panel-head,
    .merge-candidate-head,
    .detail-merge-head,
    .detail-card-head,
    .approval-summary summary,
    .approval-quick-edit summary,
    .approval-whatsapp-card summary{
      min-width:0;
    }
    .chip-row,
    .nav-inner,
    .week-grid,
    .calendar-suite .week-grid,
    .home-risk-toolbar .chip-row{
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .chip-row::-webkit-scrollbar,
    .nav-inner::-webkit-scrollbar,
    .week-grid::-webkit-scrollbar,
    .calendar-suite .week-grid::-webkit-scrollbar,
    .home-risk-toolbar .chip-row::-webkit-scrollbar{
      display:none;
    }

    @media (max-width:680px){
      :root{
        --radius:20px;
        --pad-card:12px; /* kartu lebih rapat di layar sempit (G0) */
      }
      body{
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, #fff) 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 92%, #dbeafe) 100%);
      }
      .app{
        width:100%;
        max-width:none;
        padding-left:0;
        padding-right:0;
        padding-bottom:calc(104px + var(--safe-bottom));
      }
      .topbar{
        width:calc(100% - 14px);
        max-width:none;
        top:7px;
        margin-top:7px;
        border-radius:24px;
      }
      .topbar-inner{
        gap:9px;
        padding:10px 10px 9px;
        align-items:center;
      }
      .brand{
        gap:9px;
        flex:1 1 auto;
        min-width:0;
      }
      .logo{
        min-width:42px;
        min-height:42px;
        max-width:42px;
        padding:5px;
        border-radius:15px;
      }
      .logo img{
        height:32px;
      }
      .brand h1{
        max-width:none;
        font-size:clamp(12px,3.45vw,15px);
        line-height:1.12;
        white-space:normal;
        word-break:normal;
        overflow-wrap:normal;
        text-wrap:balance;
        display:block;
        overflow:visible;
      }
      .brand p{
        font-size:10px;
        margin-top:2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .topbar-actions{
        gap:5px;
        flex:0 0 auto;
      }
      .icon-btn{
        min-width:36px;
        width:36px;
        height:36px;
        border-radius:13px;
        padding:0;
      }
      #kcUser{
        width:36px;
        min-width:36px;
        max-width:36px;
        padding:0;
        font-size:0;
      }
      #kcUser::before{
        content:"ID";
        font-size:var(--fs-caption);
        font-weight:850;
      }
      main{
        padding:14px 10px 18px;
      }
      .grid{
        gap:var(--ui-25);
      }
      .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
      }
      .stat{
        min-height:76px;
        padding:var(--ui-25);
        border-radius:20px;
      }
      .stat span{
        font-size:10px;
        line-height:1.15;
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      .stat strong{
        font-size:var(--fs-display);
      }
      .section-head{
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:var(--ui-25);
        margin:18px 0 10px;
      }
      .section-head h2{
        font-size:var(--fs-heading);
        line-height:1.12;
      }
      .section-head p{
        font-size:var(--fs-label);
        line-height:var(--lh-snug);
      }
      .section-head .actions,
      .section-head > .btn{
        width:100%;
      }
      .section-head > .btn,
      .section-head .actions .btn{
        flex:1 1 0;
      }
      .card,
      .home-map-card,
      .agenda-card,
      .selected-date-card,
      .apple-calendar-card,
      .week-focus-card,
      .calendar-suite{
        border-radius:22px;
        padding:13px;
      }
      .agenda-card{
        padding:var(--ui-3);
      }
      .agenda-row{
        grid-template-columns:58px minmax(0,1fr);
        gap:var(--ui-25);
      }
      .agenda-row .badge{
        grid-column:2;
        justify-self:start;
        max-width:100%;
        white-space:normal;
        text-align:left;
      }
      .timebox{
        min-height:54px;
        border-radius:15px;
        padding:9px 6px;
      }
      .timebox strong{
        font-size:14px;
      }
      .agenda-title{
        font-size:var(--fs-title);
        line-height:1.22;
      }
      .agenda-meta{
        font-size:var(--fs-label);
        line-height:var(--lh-snug);
      }
      .progress-wrap{
        margin-top:10px;
      }
      .actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
      }
      .actions .btn,
      .actions a.btn{
        width:100%;
        min-width:0;
        min-height:39px;
        padding:9px 10px;
        border-radius:var(--radius-control); /* 39px kompak mobile = keputusan lama, dipertahankan */
        font-size:var(--fs-label);
        line-height:var(--lh-tight);
        text-align:center;
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }
      .actions .btn.full,
      .actions .btn.primary.full,
      #modalBody > .actions .btn{
        grid-column:auto;
      }
      .chip-row{
        gap:7px;
        padding-bottom:var(--ui-1);
      }
      .chip{
        padding:var(--ui-2) var(--ui-25);
        font-size:var(--fs-label);
      }
      .searchbar{
        display:grid;
        grid-template-columns:1fr;
      }
      .two,.three,
      .form-grid.two,
      .form-grid.three,
      .approval-quick-grid,
      .approval-summary-grid,
      .detail-inline-grid{
        grid-template-columns:1fr;
      }
      .multi-date-input-row{
        grid-template-columns:1fr;
      }
      input,select,textarea{
        min-height:44px;
        border-radius:13px;
        padding:11px;
        font-size:16px;
      }
      textarea{
        min-height:92px;
      }
      .check-item{
        align-items:flex-start;
        border-radius:15px;
        padding:var(--ui-25);
      }
      .check-detail-head{
        align-items:flex-start;
      }
      .approval-whatsapp-card summary,
      .approval-summary summary,
      .approval-quick-edit summary{
        align-items:flex-start;
      }
      .approval-whatsapp-card summary::after,
      .approval-summary summary::after,
      .approval-quick-edit summary::after{
        flex:0 0 auto;
      }
      .approval-whatsapp-preview,
      .approval-script{
        font-size:var(--fs-label);
        line-height:1.48;
        max-height:52vh;
        overflow:auto;
      }
      .bottom-nav{
        width:calc(100% - 14px);
        bottom:7px;
        border-radius:24px;
        padding:7px 7px calc(7px + var(--safe-bottom));
      }
      .nav-inner{
        display:flex;
        gap:5px;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
      }
      .nav-btn{
        flex:0 0 62px;
        min-width:62px;
        min-height:54px;
        border-radius:var(--radius-inner);
        padding:7px 4px;
        font-size:var(--fs-caption);
        line-height:1.05;
        scroll-snap-align:start;
      }
      .nav-btn span:first-child{
        font-size:var(--fs-heading);
      }
      .nav-btn span:last-child{
        display:block;
        max-width:58px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .modal-backdrop{
        padding:10px 8px calc(10px + var(--safe-bottom));
        align-items:end;
      }
      .modal{
        max-height:min(88vh, 760px);
        border-radius:var(--radius-card);
        padding:13px;
      }
      .modal-head{
        gap:9px;
        margin-bottom:10px;
      }
      .modal-head h3{
        font-size:var(--fs-heading);
        line-height:1.15;
      }
      .detail-grid{
        grid-template-columns:1fr;
        gap:9px;
      }
      .detail-card-head{
        display:grid;
        grid-template-columns:1fr;
        gap:var(--ui-2);
      }
      .detail-card-actions{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:var(--ui-15);
      }
      .detail-card-actions .btn{
        min-width:0;
        width:100%;
        font-size:var(--fs-caption);
        padding:7px 6px;
      }
      .detail-assignee-read{
        display:grid;
        grid-template-columns:1fr;
        gap:var(--ui-1);
      }
      .detail-assignee-read strong{
        text-align:left;
      }
      .detail-merge-row{
        grid-template-columns:1fr;
      }
      .home-risk-toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:var(--ui-2);
      }
      .home-risk-toolbar .badge{
        justify-self:start;
      }
      .link-panel-head,
      .merge-candidate-head,
      .detail-merge-head{
        display:grid;
        grid-template-columns:1fr;
      }
      .link-popup-frame{
        min-height:54vh;
        border-radius:18px;
      }
      .toast{
        bottom:calc(96px + var(--safe-bottom));
        max-width:calc(100vw - 24px);
        border-radius:18px;
      }
    }

    @media (max-width:430px){
      .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .calendar-suite{
        padding:11px;
      }
      .calendar-suite-title{
        font-size:20px;
      }
      .calendar-segmented{
        border-radius:20px;
      }
      .calendar-mode-btn{
        min-height:34px;
        font-size:var(--fs-caption);
        padding:0 var(--ui-1);
      }
      .calendar-glance{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      .calendar-glance-item{
        padding:8px 7px;
        border-radius:16px;
      }
      .calendar-glance-item span{
        font-size:9px;
      }
      .calendar-glance-item strong{
        font-size:18px;
      }
      .day-focus-date{
        grid-template-columns:auto minmax(0,1fr);
        gap:var(--ui-05) var(--ui-25);
        border-radius:22px;
        padding:var(--ui-3);
      }
      .day-focus-date strong{
        font-size:44px;
      }
      .day-nav{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      .day-nav .btn{
        width:100%;
        font-size:var(--fs-caption);
        padding:var(--ui-2) var(--ui-15);
      }
      .day-agenda-surface{
        padding:var(--ui-25);
        border-radius:20px;
      }
      .calendar-day-event{
        grid-template-columns:52px minmax(0,1fr);
        gap:var(--ui-2);
        border-radius:var(--radius-inner);
        padding:9px;
      }
      .calendar-day-event-time{
        min-height:44px;
        font-size:var(--fs-caption);
        border-radius:13px;
      }
      .calendar-day-event-title{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      .calendar-day-event-meta{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      .calendar-suite .calendar-grid{
        gap:var(--ui-1);
      }
      .calendar-suite #calendarGrid{
        grid-auto-rows:52px;
      }
      .calendar-suite .calendar-day{
        height:52px;
        min-height:52px;
        border-radius:13px;
        padding:5px;
      }
      .calendar-date-no{
        gap:var(--ui-05);
      }
      .date-circle{
        width:24px;
        height:24px;
        font-size:var(--fs-caption);
      }
      .calendar-count{
        min-width:18px;
        height:18px;
        font-size:9px;
      }
      .status-dots{
        gap:var(--ui-05);
        min-height:5px;
      }
      .status-dot{
        width:5px;
        height:5px;
      }
      .calendar-suite .calendar-pill,
      .calendar-more{
        display:block;
        margin-top:1px;
        padding:1px 3px;
        font-size:8px;
        line-height:1.08;
      }
      .calendar-more{display:none;}
      .calendar-summary{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
      }
      .calendar-summary .stat{
        min-height:66px!important;
      }
      .week-focus-card,
      .selected-date-card{
        padding:var(--ui-3);
      }
      .calendar-suite .week-day-card{
        min-width:218px;
      }
      .actions{
        grid-template-columns:1fr;
      }
      .card > .actions,
      #modalBody > .actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .topbar-actions{
        gap:var(--ui-1);
      }
      .icon-btn{
        min-width:34px;
        width:34px;
        height:34px;
      }
      #kcUser{
        width:34px;
        min-width:34px;
        max-width:34px;
      }
      .nav-btn{
        flex-basis:58px;
        min-width:58px;
      }
      .nav-btn span:last-child{
        max-width:54px;
      }
      .home-risk-modal .home-risk-list{
        max-height:58vh;
        overflow:auto;
      }
    }

    @media (max-width:360px){
      main{
        padding-left:var(--ui-2);
        padding-right:var(--ui-2);
      }
      .brand h1{
        font-size:var(--fs-label);
        line-height:1.12;
        white-space:normal;
        word-break:normal;
        overflow-wrap:normal;
      }
      .brand p{
        display:none;
      }
      .logo{
        min-width:38px;
        min-height:38px;
        max-width:38px;
        padding:5px;
      }
      .logo img{
        height:28px;
      }
      .topbar-actions .icon-btn{
        width:32px;
        min-width:32px;
        height:32px;
      }
      #kcUser{
        width:32px;
        min-width:32px;
        max-width:32px;
      }
      .stat{
        min-height:72px;
      }
      .stat strong{
        font-size:20px;
      }
      .card,
      .home-map-card,
      .agenda-card,
      .calendar-suite,
      .modal{
        padding:var(--ui-25);
      }
      .agenda-row{
        grid-template-columns:52px minmax(0,1fr);
      }
      .timebox{
        min-height:50px;
      }
      .calendar-suite #calendarGrid{
        grid-auto-rows:48px;
      }
      .calendar-suite .calendar-day{
        height:48px;
        min-height:48px;
      }
      .nav-btn{
        flex-basis:54px;
        min-width:54px;
      }
    }

    @media (max-height:740px) and (max-width:680px){
      .modal{
        max-height:84vh;
      }
      .approval-whatsapp-preview,
      .approval-script,
      .home-risk-modal .home-risk-list{
        max-height:46vh;
      }
    }

    /* === Agenda Futuristic Liquid Glass polish === */
    .agenda-card{
      isolation:isolate;
      border-color:rgba(255,255,255,.76);
      background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 58%, rgba(236,248,255,.4)),
        var(--glass-bg);
      box-shadow:
        0 22px 56px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -1px 0 rgba(255,255,255,.26);
      backdrop-filter:blur(30px) saturate(190%);
      -webkit-backdrop-filter:blur(30px) saturate(190%);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    [data-theme="dark"] .agenda-card{
      border-color:rgba(255,255,255,.18);
      background:
        linear-gradient(145deg, rgba(30,41,59,.74), rgba(15,23,42,.46) 60%, rgba(14,116,144,.14)),
        var(--glass-bg);
      box-shadow:
        0 24px 62px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.12);
    }
    .agenda-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.9);
      box-shadow:
        0 28px 72px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.9);
    }
    .agenda-card::before{
      background:
        linear-gradient(112deg, rgba(255,255,255,.58), transparent 34%, rgba(255,255,255,.18) 72%, transparent),
        linear-gradient(180deg, rgba(255,255,255,.18), transparent);
      opacity:.88;
    }
    .agenda-card .badge{
      border-color:rgba(255,255,255,.42);
      /* KACA DI ATAS KACA DICABUT (Rencana Performa Fase 3, 16 Agu 2026).
         Design system repo ini sudah melarangnya: "Liquid Glass HANYA untuk
         chrome/melayang ... JANGAN kaca-di-atas-kaca". Badge ini duduk DI ATAS
         .agenda-card yang sendiri sudah berkabut, jadi blur keduanya mengaburkan latar
         yang sudah kabur — bedanya nyaris tak terlihat, tetapi biayanya satu lapis
         blur PENUH per badge.
         Itu biaya PER FRAME saat menggulir, bukan saat diam: satu layar agenda memuat
         puluhan badge, dan tiap satunya memaksa compositor menyalin lalu memblur ulang
         latarnya. Inilah beban GPU terbesar yang tersisa di iPhone.
         Bordernya sengaja DIPERTAHANKAN — itu yang memberi badge tepinya, bukan
         blurnya. Kaca pada .agenda-card sendiri TIDAK disentuh: mendatarkan kartu
         pernah ditolak pemilik, dan memang bukan itu yang mahal. */
    }
    .agenda-title{
      font-weight:880;
      letter-spacing:0;
      line-height:1.22;
      overflow-wrap:break-word;
    }
    .agenda-meta{
      color:color-mix(in srgb, var(--muted) 84%, var(--ink));
      overflow-wrap:break-word;
    }
    .timebox{
      border-color:rgba(255,255,255,.7);
      background:
        linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.32)),
        color-mix(in srgb, var(--panel) 58%, transparent);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.84),
        0 10px 24px rgba(15,23,42,.08);
    }
    .timebox strong{
      letter-spacing:0;
      font-weight:860;
    }
    .modal{
      max-width:880px;
      border-color:rgba(255,255,255,.72);
      background:
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.54) 58%, rgba(238,248,255,.5)),
        var(--glass-bg-strong);
      box-shadow:
        0 34px 92px rgba(2,6,23,.34),
        inset 0 1px 0 rgba(255,255,255,.82);
      backdrop-filter:blur(36px) saturate(205%);
      -webkit-backdrop-filter:blur(36px) saturate(205%);
    }
    [data-theme="dark"] .modal{
      border-color:rgba(255,255,255,.18);
      background:
        linear-gradient(145deg, rgba(30,41,59,.84), rgba(15,23,42,.62) 60%, rgba(8,47,73,.2)),
        var(--glass-bg-strong);
    }
    .detail-grid{
      gap:var(--ui-3);
    }
    .kv,
    .kv.editable{
      border-color:rgba(255,255,255,.66);
      background:
        linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.3)),
        color-mix(in srgb, var(--panel) 76%, transparent);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.74),
        0 12px 30px rgba(15,23,42,.07);
      backdrop-filter:blur(22px) saturate(175%);
      -webkit-backdrop-filter:blur(22px) saturate(175%);
    }
    [data-theme="dark"] .kv,
    [data-theme="dark"] .kv.editable{
      border-color:rgba(255,255,255,.14);
      background:
        linear-gradient(145deg, rgba(30,41,59,.62), rgba(15,23,42,.36)),
        rgba(15,23,42,.44);
    }
    .kv.editable.missing{
      border-color:rgba(255,69,58,.48);
      background:
        linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,235,233,.55)),
        color-mix(in srgb, var(--status-rejected-bg) 36%, var(--panel));
      box-shadow:
        inset 4px 0 0 var(--status-rejected),
        inset 0 1px 0 rgba(255,255,255,.72),
        0 14px 34px rgba(180,35,24,.08);
    }
    [data-theme="dark"] .kv.editable.missing{
      background:
        linear-gradient(145deg, rgba(127,29,29,.68), rgba(15,23,42,.44)),
        var(--status-rejected-bg);
    }
    .detail-card-head{
      align-items:flex-start;
    }
    .detail-view-value{
      line-height:1.48;
    }
    .detail-assignee-read{
      align-items:flex-start;
      border:1px solid rgba(255,255,255,.48);
      border-radius:var(--radius-inner);
      padding:9px 10px;
      background:rgba(255,255,255,.34);
    }
    [data-theme="dark"] .detail-assignee-read{
      border-color:rgba(255,255,255,.1);
      background:rgba(255,255,255,.06);
    }
    .detail-assignee-notice-wrap{
      display:inline-flex;
      flex-wrap:wrap;
      align-items:center;
      gap:var(--ui-15);
      max-width:100%;
    }
    .detail-reassign-btn{
      border:1px solid rgba(255,69,58,.34);
      border-radius:var(--ui-r-pill);
      padding:var(--ui-1) var(--ui-2);
      color:#b42318;
      background:rgba(255,255,255,.62);
      font-size:10px;
      font-weight:850;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .detail-reassign-btn:hover{
      background:rgba(255,69,58,.14);
    }
    .email-recovery-banner{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:var(--ui-3);
      margin:0 0 12px;
      border:1px solid rgba(255,69,58,.34);
      border-radius:22px;
      padding:var(--ui-3);
      color:var(--ink);
      background:
        linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,235,233,.56)),
        color-mix(in srgb, var(--status-rejected-bg) 30%, var(--panel));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 14px 34px rgba(180,35,24,.08);
      backdrop-filter:blur(24px) saturate(180%);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
    }
    .email-recovery-banner strong{
      display:block;
      font-size:var(--fs-body);
      font-weight:880;
    }
    .email-recovery-banner span{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:var(--fs-label);
      line-height:var(--lh-snug);
    }

    /* === Detail agenda identity polish === */
    .modal-head{
      padding-bottom:var(--ui-3);
      border-bottom:1px solid rgba(255,255,255,.42);
    }
    [data-theme="dark"] .modal-head{
      border-bottom-color:rgba(255,255,255,.1);
    }
    .kv.editable{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      padding:14px;
    }
    .kv.editable::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(115deg, rgba(255,255,255,.46), transparent 32%, rgba(255,255,255,.12) 72%, transparent),
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 50%);
      opacity:.86;
    }
    .kv.editable > *{
      position:relative;
      z-index:1;
    }
    .detail-card-head small{
      display:inline-flex;
      align-items:center;
      gap:var(--ui-2);
      min-height:30px;
      color:color-mix(in srgb, var(--muted) 70%, var(--ink));
      font-size:var(--fs-caption);
      font-weight:880;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .detail-card-actions .btn,
    .detail-card-access{
      min-height:30px;
      border-radius:var(--ui-r-pill);
      backdrop-filter:blur(18px) saturate(170%);
      -webkit-backdrop-filter:blur(18px) saturate(170%);
    }
    .detail-card-access{
      border-color:rgba(255,255,255,.52);
      background:rgba(255,255,255,.42);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
    }
    [data-theme="dark"] .detail-card-access{
      border-color:rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
    }
    .detail-assignee-read{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:var(--ui-25);
      min-width:0;
      border:1px solid rgba(255,255,255,.54);
      border-radius:20px;
      padding:var(--ui-25);
      background:
        linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.24)),
        rgba(255,255,255,.3);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 10px 26px rgba(15,23,42,.06);
    }
    [data-theme="dark"] .detail-assignee-read{
      border-color:rgba(255,255,255,.12);
      background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
        rgba(15,23,42,.3);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
    }
    .detail-assignee-main{
      display:grid;
      grid-template-columns:36px minmax(0,1fr);
      align-items:center;
      gap:var(--ui-25);
      min-width:0;
    }
    .detail-assignee-avatar{
      width:36px;
      height:36px;
      display:inline-grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.62);
      border-radius:var(--radius-control);
      color:#fff;
      background:
        linear-gradient(145deg, rgba(17,24,39,.95), rgba(37,99,235,.86));
      box-shadow:
        0 10px 24px rgba(37,99,235,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
      font-size:var(--fs-caption);
      font-weight:900;
      letter-spacing:.02em;
    }
    [data-theme="dark"] .detail-assignee-avatar{
      color:#0b1220;
      background:linear-gradient(145deg, rgba(248,250,252,.95), rgba(147,197,253,.9));
    }
    .detail-assignee-read.empty .detail-assignee-avatar{
      color:var(--muted);
      background:rgba(255,255,255,.42);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
    }
    .detail-assignee-copy{
      display:grid;
      gap:var(--ui-05);
      min-width:0;
    }
    .detail-assignee-copy span{
      color:var(--muted);
      font-size:10px;
      font-weight:850;
      letter-spacing:.06em;
      line-height:1;
      text-transform:uppercase;
    }
    .detail-assignee-copy strong{
      min-width:0;
      color:var(--ink);
      font-size:var(--fs-body);
      font-weight:880;
      line-height:1.22;
      text-align:left;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .detail-assignee-status{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      min-width:0;
      max-width:100%;
    }
    .detail-assignee-notice-wrap{
      flex-wrap:nowrap;
      gap:7px;
    }
    .detail-assignee-notice{
      min-height:26px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      max-width:190px;
      padding:5px 10px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.58);
    }
    .detail-reassign-btn{
      min-height:26px;
      white-space:nowrap;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(180,35,24,.08);
    }
    @media (max-width:680px){
      .modal{
        max-width:100%;
        border-radius:var(--radius-card);
      }
      .detail-card-head,
      .detail-assignee-read,
      .email-recovery-banner{
        grid-template-columns:1fr;
      }
      .detail-card-head,
      .detail-assignee-read{
        display:grid;
      }
      .detail-card-actions{
        justify-content:flex-start;
      }
      .detail-assignee-read strong{
        text-align:left;
      }
      .detail-assignee-status{
        justify-content:flex-start;
        width:100%;
      }
      .detail-assignee-notice-wrap{
        flex-wrap:wrap;
      }
      .detail-assignee-notice{
        max-width:100%;
      }
      .detail-assignee-copy strong{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
      }
      .email-recovery-banner .btn{
        width:100%;
      }
    }

    /* === Unified INPUT command center === */
    .input-command-view{
      max-width:1040px;
      margin:0 auto;
    }
    .input-command-view > .section-head{
      text-align:center;
      justify-content:center;
    }
    .input-command-view > .section-head p{
      max-width:720px;
      margin-left:auto;
      margin-right:auto;
    }
    .input-command-strip{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--ui-25);
      margin:0 0 14px;
    }
    .input-command-strip.five{
      grid-template-columns:repeat(5,minmax(0,1fr));
    }
    button.input-command-pill{
      font:inherit;
      text-align:left;
      cursor:pointer;
      appearance:none;
      -webkit-appearance:none;
    }
    .input-command-pill{
      min-width:0;
      display:grid;
      grid-template-columns:38px minmax(0,1fr);
      grid-template-areas:"icon title" "icon sub";
      align-items:center;
      gap:var(--ui-05) var(--ui-25);
      border:1px solid var(--glass-border);
      border-radius:22px;
      padding:11px;
      color:var(--ink);
      text-decoration:none;
      background:linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.32));
      box-shadow:var(--shadow);
      backdrop-filter:blur(24px) saturate(180%);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
    }
    [data-theme="dark"] .input-command-pill{
      background:linear-gradient(145deg, rgba(30,41,59,.7), rgba(15,23,42,.42));
    }
    .input-command-pill span{
      grid-area:icon;
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:var(--radius-inner);
      color:#fff;
      background:linear-gradient(145deg, rgba(17,24,39,.96), rgba(37,99,235,.86));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(37,99,235,.16);
      font-size:var(--fs-heading);
      font-weight:900;
    }
    .input-command-pill strong{
      grid-area:title;
      min-width:0;
      font-size:14px;
      font-weight:880;
      line-height:1.15;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .input-command-pill small{
      grid-area:sub;
      min-width:0;
      color:var(--muted);
      font-size:var(--fs-caption);
      line-height:var(--lh-tight);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .input-command-pill.primary{
      border-color:rgba(37,99,235,.34);
      background:linear-gradient(145deg, rgba(219,234,254,.9), rgba(255,255,255,.44));
    }
    .input-command-dashboard{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin-bottom:14px;
      padding:var(--ui-4);
    }
    .input-command-dashboard strong,
    .input-command-dashboard span{
      display:block;
    }
    .input-command-dashboard strong{
      font-size:17px;
      font-weight:900;
      letter-spacing:0;
    }
    .input-command-dashboard span{
      margin-top:4px;
      color:var(--muted);
      font-size:var(--fs-body);
      line-height:1.45;
    }
    body.input-popup-open{
      overflow:hidden;
    }
    .input-popup-backdrop{
      position:fixed;
      inset:0;
      z-index:70;
      display:none;
      align-items:center;
      justify-content:center;
      padding:var(--ui-5);
      background:rgba(15,23,42,.28);
      backdrop-filter:blur(22px) saturate(170%);
      -webkit-backdrop-filter:blur(22px) saturate(170%);
    }
    .input-popup-backdrop.active{
      display:flex;
    }
    .input-popup{
      width:min(980px,100%);
      max-height:min(88vh,820px);
      overflow:auto;
      border:1px solid rgba(255,255,255,.58);
      border-radius:30px;
      padding:18px;
      color:var(--ink);
      background:linear-gradient(145deg, rgba(255,255,255,.84), rgba(239,246,255,.58));
      box-shadow:0 34px 90px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.9);
      backdrop-filter:blur(30px) saturate(185%);
      -webkit-backdrop-filter:blur(30px) saturate(185%);
    }
    [data-theme="dark"] .input-popup{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(145deg, rgba(30,41,59,.92), rgba(15,23,42,.72));
      box-shadow:0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .input-popup.compact{
      width:min(680px,100%);
    }
    .input-popup-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:var(--ui-4);
      margin-bottom:14px;
      padding-bottom:var(--ui-3);
      border-bottom:1px solid rgba(148,163,184,.2);
    }
    .input-popup-head h3{
      margin:0;
      font-size:var(--fs-display);
      font-weight:930;
      letter-spacing:0;
    }
    .input-popup-head p{
      margin:5px 0 0;
      max-width:640px;
      color:var(--muted);
      font-size:var(--fs-body);
      line-height:1.45;
    }
    .input-popup-head .icon-btn{
      flex:0 0 auto;
      width:38px;
      height:38px;
      border-radius:var(--radius-inner);
      font-size:var(--fs-display);
      line-height:1;
    }
    .input-popup-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
      gap:var(--ui-3);
      align-items:start;
    }
    .input-result-panel,
    .input-sync-panel{
      min-width:0;
      border:1px solid var(--glass-border);
      border-radius:24px;
      padding:14px;
      background:rgba(255,255,255,.44);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.56);
    }
    [data-theme="dark"] .input-result-panel,
    [data-theme="dark"] .input-sync-panel{
      background:rgba(15,23,42,.38);
    }
    .input-result-panel h4{
      margin:0 0 10px;
      font-size:var(--fs-title);
      font-weight:900;
    }
    .input-sync-panel{
      display:grid;
      gap:var(--ui-3);
    }
    .input-feature-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:var(--ui-3);
      align-items:start;
    }
    .input-compact-panel,
    .input-form-shell{
      overflow:hidden;
    }
    .input-compact-panel summary,
    .input-form-shell summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--ui-3);
      cursor:pointer;
      margin:-2px -2px 10px;
      padding:var(--ui-05);
    }
    .input-compact-panel summary::-webkit-details-marker,
    .input-form-shell summary::-webkit-details-marker{
      display:none;
    }
    .input-compact-panel summary::after,
    .input-form-shell summary::after{
      content:"Buka";
      flex:0 0 auto;
      border:1px solid var(--glass-border);
      border-radius:var(--ui-r-pill);
      padding:var(--ui-15) var(--ui-25);
      color:var(--ink);
      background:rgba(255,255,255,.46);
      font-size:var(--fs-caption);
      font-weight:850;
    }
    .input-compact-panel[open] summary::after,
    .input-form-shell[open] summary::after{
      content:"Tutup";
    }
    .input-compact-panel summary strong,
    .input-form-shell summary strong{
      display:block;
      font-size:var(--fs-title);
      font-weight:880;
      line-height:1.15;
    }
    .input-compact-panel summary span,
    .input-form-shell summary span{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:var(--fs-label);
      line-height:1.3;
    }
    .input-form-shell{
      margin-top:12px;
      border-radius:28px;
    }
    .input-form-shell #eventForm{
      margin-top:8px;
    }
    .nav-inner{
      grid-template-columns:repeat(7,minmax(0,1fr));
    }
    .nav-btn.nav-input-center{
      color:var(--ink);
      background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(219,234,254,.56));
      border:1px solid rgba(255,255,255,.62);
      box-shadow:0 14px 34px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.8);
    }
    [data-theme="dark"] .nav-btn.nav-input-center{
      background:linear-gradient(145deg, rgba(37,99,235,.34), rgba(15,23,42,.46));
      border-color:rgba(255,255,255,.16);
    }
    .nav-btn.nav-input-center span:first-child{
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      border-radius:13px;
      color:#fff;
      background:linear-gradient(145deg, #111827, #2563eb);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
    }
    @media (max-width:680px){
      .input-command-view > .section-head{
        text-align:left;
        justify-content:flex-start;
      }
      .input-command-strip{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
      }
      .input-command-strip.five{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:5px;
      }
      .input-command-pill{
        grid-template-columns:1fr;
        grid-template-areas:"icon" "title" "sub";
        justify-items:center;
        text-align:center;
        padding:var(--ui-2) var(--ui-1);
        border-radius:var(--radius-inner);
      }
      .input-command-pill span{
        width:30px;
        height:30px;
        border-radius:13px;
        font-size:var(--fs-title);
      }
      .input-command-pill strong{
        margin-top:4px;
        max-width:100%;
        font-size:10px;
        line-height:1.1;
      }
      .input-command-pill small{
        display:none;
      }
      .input-command-strip.five .input-command-pill small{
        display:block;
        max-width:100%;
        font-size:8px;
        line-height:1;
      }
      .input-command-dashboard{
        align-items:stretch;
        flex-direction:column;
        padding:14px;
      }
      .input-command-dashboard .btn{
        width:100%;
      }
      .input-popup-backdrop{
        align-items:flex-end;
        padding:var(--ui-25);
      }
      .input-popup{
        width:100%;
        max-height:88vh;
        border-radius:26px;
        padding:14px;
      }
      .input-popup-head{
        gap:var(--ui-25);
      }
      .input-popup-head h3{
        font-size:19px;
      }
      .input-popup-grid{
        grid-template-columns:1fr;
      }
      .input-feature-grid{
        grid-template-columns:1fr;
        gap:var(--ui-25);
      }
      .input-compact-panel summary,
      .input-form-shell summary{
        align-items:flex-start;
      }
      .bottom-nav .nav-inner{
        display:grid !important;
        grid-template-columns:repeat(7,minmax(0,1fr));
        gap:var(--ui-05);
        overflow:visible;
      }
      .bottom-nav .nav-btn{
        flex:initial !important;
        min-width:0 !important;
        min-height:50px;
        border-radius:var(--radius-inner);
        padding:6px 1px;
        font-size:var(--fs-caption);
      }
      .bottom-nav .nav-btn span:first-child{
        font-size:16px;
      }
      .bottom-nav .nav-btn span:last-child{
        max-width:100%;
        font-size:var(--fs-caption);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .bottom-nav .nav-btn.nav-input-center span:first-child{
        width:28px;
        height:28px;
        font-size:17px;
      }
    }
    @media (max-width:360px){
      .bottom-nav .nav-btn{
        min-height:48px;
        border-radius:var(--radius-control);
        font-size:var(--fs-caption);
      }
      .bottom-nav .nav-btn span:first-child{
        font-size:var(--fs-title);
      }
      .bottom-nav .nav-btn span:last-child{
        font-size:var(--fs-caption);
      }
      .bottom-nav .nav-btn.nav-input-center span:first-child{
        width:26px;
        height:26px;
      }
    }

    /* === Keycloak SSO auth gate === */
    #authGate{
      position:fixed;inset:0;z-index:9999;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ui-4);
      background:var(--bg);color:var(--ink);padding:var(--ui-6);text-align:center;
    }
    #authGate.hidden{display:none}
    #authGate .kc-spinner{
      width:42px;height:42px;border-radius:50%;
      border:3px solid var(--line);border-top-color:var(--accent);
      animation:kcspin .9s linear infinite;
    }
    @keyframes kcspin{to{transform:rotate(360deg)}}
    #authGate h2{margin:0;font-size:var(--fs-heading)}
    #authGate p{margin:0;color:var(--muted);font-size:var(--fs-body);max-width:320px;line-height:1.4}
    #authGate button{
      margin-top:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
      border-radius:var(--radius-control);padding:10px 18px;font-size:14px;cursor:pointer;
    }
    #kcUser{
      width:auto;padding:0 var(--ui-3);gap:var(--ui-15);font-size:var(--fs-body);font-weight:var(--fw-medium);
      max-width:190px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    }
    @media (max-width:680px){
      #kcUser{
        width:36px;
        min-width:36px;
        max-width:36px;
        padding:0;
        font-size:0;
        flex:0 0 36px;
      }
      #kcUser::before{
        content:"ID";
        font-size:var(--fs-caption);
        font-weight:850;
      }
    }
    @media (max-width:430px){
      #kcUser{
        width:34px;
        min-width:34px;
        max-width:34px;
        flex-basis:34px;
      }
      .topbar-actions{
        gap:var(--ui-1);
      }
    }

    /* === Mobile daily report alignment audit fixes === */
    .daily-report-card{
      margin-bottom:12px;
    }
    .daily-report-head{
      margin:0;
      align-items:center;
    }
    .daily-date-controls{
      margin-top:0;
      display:grid;
      grid-template-columns:minmax(42px,.72fr) minmax(90px,1.1fr) minmax(42px,.72fr);
      align-items:center;
      justify-content:stretch;
      gap:var(--ui-2);
      flex-wrap:nowrap;
      min-width:min(100%,330px);
    }
    .daily-date-controls .btn{
      width:100%;
      min-width:0;
      min-height:44px;
      padding:var(--ui-25) var(--ui-3);
      border-radius:var(--radius-inner);
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
    }
    .daily-date-controls .btn:first-child,
    .daily-date-controls .btn:last-child{
      font-size:24px;
      font-weight:850;
      padding-inline:8px;
    }
    @media (max-width:680px){
      .daily-report-head{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
      }
      .daily-report-head > div:first-child{
        min-width:0;
      }
      .daily-report-head h2{
        line-height:1.12;
      }
      .daily-report-head p{
        line-height:var(--lh-snug);
      }
      .daily-date-controls,
      .section-head .daily-date-controls{
        width:100%;
        min-width:0;
        grid-template-columns:minmax(48px,1fr) minmax(104px,1.08fr) minmax(48px,1fr);
      }
      .daily-date-controls .btn,
      .section-head .daily-date-controls .btn{
        min-height:46px;
        border-radius:18px;
        font-size:var(--fs-body);
        padding:var(--ui-25) var(--ui-2);
      }
      .daily-date-controls .btn:first-child,
      .daily-date-controls .btn:last-child{
        font-size:25px;
      }
      .searchbar{
        width:100%;
        min-width:0;
      }
      .searchbar input,
      .searchbar .btn{
        width:100%;
        min-width:0;
      }
    }
    @media (max-width:430px){
      .daily-report-card{
        border-radius:24px;
        padding:var(--ui-3);
      }
      .daily-report-head{
        gap:var(--ui-3);
      }
      .daily-date-controls,
      .section-head .daily-date-controls{
        display:grid;
        grid-template-columns:minmax(52px,1fr) minmax(108px,1.05fr) minmax(52px,1fr);
        gap:var(--ui-2);
      }
      .daily-date-controls .btn,
      .section-head .daily-date-controls .btn{
        min-height:48px;
        border-radius:18px;
        font-size:var(--fs-body);
      }
    }
    @media (max-width:360px){
      .daily-report-card{
        padding:var(--ui-25);
      }
      .daily-date-controls,
      .section-head .daily-date-controls{
        grid-template-columns:minmax(44px,.95fr) minmax(94px,1.1fr) minmax(44px,.95fr);
        gap:var(--ui-15);
      }
      .daily-date-controls .btn,
      .section-head .daily-date-controls .btn{
        min-height:44px;
        border-radius:var(--radius-inner);
        padding:var(--ui-2) var(--ui-15);
        font-size:var(--fs-label);
      }
      .daily-date-controls .btn:first-child,
      .daily-date-controls .btn:last-child{
        font-size:var(--fs-display);
      }
    }

    @media (max-width:720px){
      .presentation-header{
        left:max(8px, env(safe-area-inset-left, 0px));
        right:max(8px, env(safe-area-inset-right, 0px));
        top:max(8px, env(safe-area-inset-top, 0px));
        max-width:none;
        overflow:hidden;
      }
      .presentation-actions{
        width:100%;
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        align-items:center;
        gap:6px;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .presentation-actions::-webkit-scrollbar{
        display:none;
      }
      .presentation-actions .btn{
        flex:0 0 auto;
        width:auto;
        min-width:44px;
        max-width:none;
        min-height:var(--ctrl-h);
        padding:8px 11px;
        white-space:nowrap;
        border-radius:999px;
        font-size:12px;
      }
      .presentation-zoom-label{
        flex:0 0 auto;
        min-width:52px;
        min-height:var(--ctrl-h);
        padding:8px 10px;
        white-space:nowrap;
      }
      .pdf-slide{
        padding-top:72px;
      }
    }
    @media (max-width:360px){
      .presentation-actions .btn{
        min-width:40px;
        min-height:40px;
        padding:7px 10px;
        font-size:11px;
      }
      .presentation-zoom-label{
        min-width:48px;
        min-height:40px;
        font-size:11px;
      }
      .pdf-slide{
        padding-top:68px;
      }
    }
    /* === iPad / tablet wide dashboard layout === */
    @media (min-width: 768px) {
      :root {
        --ipad-page-gutter: clamp(18px, 3vw, 34px);
        --ipad-shell-max: 1280px;
      }

      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .app {
        width: 100%;
        max-width: min(var(--ipad-shell-max), calc(100vw - 24px));
        padding-left: var(--ipad-page-gutter);
        padding-right: var(--ipad-page-gutter);
        padding-bottom: calc(104px + var(--safe-bottom));
      }

      .topbar {
        width: calc(100% - 32px);
        max-width: min(var(--ipad-shell-max), calc(100vw - 32px));
      }

      main {
        padding: 24px 0 18px;
      }

      .bottom-nav {
        width: calc(100% - 36px);
        max-width: min(1040px, calc(100vw - 36px));
      }

      .nav-inner {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--ui-15);
      }

      .nav-btn {
        min-width: 0;
      }

      .stats,
      .calendar-glance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      #view-today .agenda-list,
      #agendaList.agenda-list.desktop,
      #approvalList.agenda-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
      }

      .agenda-card {
        padding: 15px;
      }

      .agenda-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
      }

      .searchbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--ui-25);
      }

      .searchbar input {
        min-width: 0;
      }

      .daily-report-head,
      .calendar-suite-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .daily-date-controls,
      .section-head .daily-date-controls {
        width: clamp(330px, 34vw, 430px);
        min-width: 330px;
        grid-template-columns: 56px minmax(118px, 1fr) 56px;
      }

      .calendar-suite {
        padding: 18px;
        border-radius: 34px;
      }

      .calendar-segmented {
        width: min(430px, 42vw);
        flex: 0 0 min(430px, 42vw);
      }

      .day-focus-layout {
        grid-template-columns: minmax(220px, .28fr) minmax(0, 1fr);
        gap: var(--ui-4);
      }

      .day-focus-date {
        position: sticky;
        top: 112px;
      }

      .day-nav {
        display: grid;
        grid-template-columns: 54px minmax(118px, 1fr) 54px;
        gap: var(--ui-2);
      }

      .day-nav .btn {
        width: 100%;
        justify-content: center;
      }

      .agenda-list.compact {
        max-height: min(54vh, 560px);
      }

      .calendar-day-event {
        grid-template-columns: 72px minmax(0, 1fr) auto;
      }

      .week-grid,
      .calendar-suite .week-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 7px;
        overflow: visible;
        scroll-snap-type: none;
      }

      .week-day-card,
      .calendar-suite .week-day-card {
        min-width: 0;
        min-height: 178px;
        padding: 9px;
        border-radius: 20px;
      }

      .week-agenda-title {
        -webkit-line-clamp: 2;
      }

      .calendar-suite #calendarGrid {
        grid-auto-rows: 92px;
      }

      .calendar-suite .calendar-day,
      .calendar-day {
        min-height: 92px;
        height: auto;
        padding: 7px;
        border-radius: var(--radius-inner);
      }

      .calendar-pill {
        font-size: 10px;
        padding: 3px 5px;
      }

      .modal {
        max-width: min(1040px, calc(100vw - 44px));
      }

      .agenda-preview-modal,
      .calendar-date-modal {
        max-width: min(820px, calc(100vw - 44px));
      }

      .input-popup {
        width: min(1120px, calc(100vw - 44px));
        max-width: min(1120px, calc(100vw - 44px));
      }

      .input-popup.compact {
        width: min(760px, calc(100vw - 44px));
      }

      .input-popup-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
        align-items: start;
      }

      .input-command-strip.five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .detail-grid,
      .approval-summary-grid,
      .approval-quick-grid,
      .approval-reschedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .approval-quick-wide {
        grid-column: 1 / -1;
      }

      .presentation-overlay.active {
        overflow: hidden;
      }

      .presentation-shell {
        height: 100vh;
        padding: 12px;
      }

      .presentation-fit-stage {
        width: min(calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
        max-height: calc(100vh - 24px);
      }

      .pdf-slide {
        width: 100%;
        height: 100%;
      }
    }

    @media (min-width: 1024px) {
      :root {
        --ipad-shell-max: 1360px;
      }

      .app,
      .topbar {
        max-width: min(1360px, calc(100vw - 32px));
      }

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

      #view-today .agenda-list,
      #agendaList.agenda-list.desktop,
      #approvalList.agenda-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .day-focus-layout {
        grid-template-columns: minmax(260px, .26fr) minmax(0, 1fr);
      }

      .calendar-suite #calendarGrid {
        grid-auto-rows: 108px;
      }

      .calendar-suite .calendar-day,
      .calendar-day {
        min-height: 108px;
        padding: var(--ui-2);
      }

      .week-day-card,
      .calendar-suite .week-day-card {
        min-height: 210px;
        padding: var(--ui-25);
      }

      .modal {
        max-width: min(1120px, calc(100vw - 56px));
      }
    }

    @media (min-width: 1194px) {
      :root {
        --ipad-shell-max: 1440px;
      }

      #view-today .agenda-list,
      #agendaList.agenda-list.desktop,
      #approvalList.agenda-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .day-focus-layout {
        grid-template-columns: minmax(300px, .24fr) minmax(0, 1fr);
      }

      .calendar-suite #calendarGrid {
        grid-auto-rows: 118px;
      }

      .calendar-suite .calendar-day,
      .calendar-day {
        min-height: 118px;
      }

      .week-day-card,
      .calendar-suite .week-day-card {
        min-height: 236px;
      }

      .modal {
        max-width: min(1180px, calc(100vw - 64px));
      }

      .input-popup {
        width: min(1240px, calc(100vw - 64px));
        max-width: min(1240px, calc(100vw - 64px));
      }
    }

    @media (min-width: 1366px) {
      :root {
        --ipad-shell-max: 1520px;
      }

      .calendar-suite #calendarGrid {
        grid-auto-rows: 128px;
      }

      .calendar-suite .calendar-day,
      .calendar-day {
        min-height: 128px;
      }

      .week-day-card,
      .calendar-suite .week-day-card {
        min-height: 250px;
      }
    }

    /* ===== Lapisan konsistensi UI (Phase UI-1) — aditif, menjaga fitur =====
       Skala spacing/radius terpusat + grid KPI tinggi-seragam agar simetris. */
    :root{
      --ui-1:4px; --ui-2:8px; --ui-3:12px; --ui-4:16px; --ui-5:20px; --ui-6:24px;
      --ui-stat-h:104px;
    }
    .grid.stats{ gap:var(--ui-3); }
    .stat{
      min-height:var(--ui-stat-h);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:var(--ui-2);
    }
    /* Label KPI boleh membungkus (jangan terpotong "...") agar konsisten terbaca */
    .stat > span:first-child{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      line-height:var(--lh-tight);
    }
    @media (max-width:430px){
      .stat{ min-height:92px; }
    }