/* Hallmark · v2.0.0 · redesign: full · scope: app · 2026-10-26
 * shape: app screen · theme: My Workspace navy · nav: grouped sidebar · footer: none
 * pre-emit critique: P4 H5 E5 S5 R4 V3 · weakest: R, the deadline rail earns its reserved preview row with real tasks
 * floor: every colour and face through :root, transform/opacity motion only, overflow-x clip, full-width percentages
 */
:root {
    color-scheme: light;

    /* Palet primitif */
    --neutral-0: #ffffff;
    --neutral-25: #f4f8fb;
    --neutral-50: #f8fafc;
    --neutral-60: #f3f6f9;
    --neutral-75: #f7f9fb;
    --neutral-100: #edf1f5;
    --neutral-150: #e8edf2;
    --neutral-200: #e3e9ef;
    --neutral-300: #d9e5ec;
    --neutral-400: #c3d0db;
    --neutral-450: #a0abb8;
    --neutral-500: #8a96a6;
    --neutral-600: #62788b;
    --neutral-700: #536176;
    --neutral-800: #35445a;
    --neutral-900: #102a43;
    --neutral-950: #071f3d;
    --teal-25: #edf5f8;
    --teal-50: #edf8f8;
    --teal-100: #e9f8f6;
    --teal-200: #bce5e2;
    --teal-300: #73ddd8;
    --teal-400: #20cfca;
    --teal-500: #14b8b1;
    --teal-600: #077073;
    --teal-700: #087b8b;
    --green-50: #eaf9f2;
    --green-100: #f3fbf7;
    --green-200: #bde7d5;
    --green-500: #1eb776;
    --green-600: #08794e;
    --green-700: #0a774c;
    --rose-50: #fff0f2;
    --rose-100: #fff5f6;
    --rose-200: #f2bec8;
    --rose-300: #efb6c0;
    --rose-500: #c84642;
    --rose-600: #bd2945;
    --rose-700: #a32640;
    --amber-50: #fff7e7;
    --amber-100: #fff6df;
    --amber-200: #f7d697;
    --amber-500: #f2b23c;
    --amber-600: #c97900;
    --amber-700: #9a6200;
    --blue-50: #eef4ff;
    --blue-100: #edf3f9;
    --blue-200: #d8e1eb;
    --blue-400: #5aaed6;
    --blue-500: #405f85;
    --blue-600: #315ea8;
    --blue-700: #0b5b8f;
    --navy-800: #123b68;
    --navy-900: #0c3158;
    --navy-950: #071f3d;
    --navy-1000: #061a34;

    /* Identitas utama: toska, biru, dan biru dongker */
    --brand-navy: var(--navy-950);
    --brand-blue: #0b5b8f;
    --brand-teal-deep: #075c72;
    --brand-turquoise: var(--teal-500);
    --brand-aqua: var(--teal-300);
    --brand-gradient: var(--brand-navy);
    --navy: var(--brand-navy);
    --navy-2: var(--navy-900);
    --cyan: var(--brand-turquoise);
    --cyan-dark: var(--teal-600);
    --green: var(--teal-600);
    --violet: var(--blue-500);
    --rose: var(--rose-500);
    --amber: var(--amber-600);

    /* Permukaan */
    --surface: var(--neutral-0);
    --surface-alt: var(--neutral-50);
    --surface-soft: var(--neutral-75);
    --surface-muted: var(--neutral-60);
    --surface-tint: var(--teal-50);
    --canvas: var(--neutral-25);
    --soft: var(--teal-25);
    --surface-glass: rgba(255,255,255,.91);
    --surface-glass-strong: rgba(255,255,255,.96);

    /* Garis dan batas */
    --border: var(--neutral-300);
    --border-soft: #d5e0e9;
    --border-strong: var(--neutral-400);
    --border-translucent: rgba(221,228,223,.94);
    --line-soft: #e2e9f0;
    --track: var(--neutral-150);

    /* Teks */
    --ink: var(--neutral-900);
    --ink-strong: var(--neutral-950);
    --ink-soft: var(--neutral-700);
    --muted: var(--neutral-700);
    --muted-soft: #55697c;
    --muted-faint: var(--muted-soft);
    --on-brand: #ffffff;
    --on-brand-soft: #b8d1df;
    --on-brand-muted: #9fd0db;
    --on-brand-accent: #63ddd0;
    --sidebar-text: #c4d8e8;
    --sidebar-muted: #9caaa3;
    --sidebar-danger: #ffd5da;

    /* Status */
    --danger: var(--rose-600);
    --danger-deep: var(--rose-700);
    --danger-soft: var(--rose-50);
    --danger-border: var(--rose-200);
    --success: var(--green-600);
    --success-deep: var(--green-600);
    --success-soft: var(--green-50);
    --success-border: var(--green-200);
    --warning: var(--amber-700);
    --warning-deep: var(--amber-700);
    --warning-soft: var(--amber-50);
    --warning-border: var(--amber-200);
    --info: var(--teal-600);
    --info-deep: var(--teal-600);
    --info-soft: var(--teal-50);
    --info-border: var(--teal-200);
    --violet-soft: var(--blue-100);
    --violet-border: var(--blue-200);
    --blue: var(--blue-600);
    --blue-soft: var(--blue-50);

    /* Tata letak */
    --sidebar-width: 208px;

    /* Bayangan */
    --shadow-xs: 0 2px 6px rgba(8,21,37,.025);
    --shadow-sm: 0 2px 5px rgba(8,21,37,.025);
    --shadow: 0 14px 40px rgba(8,21,37,.09);
    --shadow-lg: 0 25px 80px rgba(3,12,23,.25);
    --shadow-xl: 0 32px 95px rgba(3,12,23,.34),0 8px 30px rgba(4,93,121,.14);
    --shadow-button: none;
    --shadow-card-hover: 0 9px 25px rgba(8,21,37,.07);
    --shadow-popover: 0 18px 45px rgba(8,21,37,.16);
    --shadow-toast: 0 16px 45px rgba(3,12,23,.25);
    --shadow-modal: 0 30px 90px rgba(3,12,23,.34);
    --focus-ring: 0 0 0 4px rgba(20,184,177,.18);

    /* Radius */
    --radius-2xs: 4px;
    --radius-xs: 6px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius: 8px;
    --radius-xl: 12px;
    --radius-2xl: 12px;
    --radius-3xl: 12px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Z-index */
    --z-negative: -1;
    --z-base: 1;
    --z-raised: 2;
    --z-popover: 12;
    --z-popover-raised: 25;
    --z-sticky: 30;
    --z-mobile-nav: 40;
    --z-sidebar: 50;
    --z-notification: 65;
    --z-modal: 70;
    --z-drawer-backdrop: 75;
    --z-tracing: 78;
    --z-drawer: 80;
    --z-toast: 100;

    /* Spacing */
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Token semantik My Workspace */
    --rk-ground: var(--canvas);
    --rk-surface: var(--surface);
    --rk-surface-2: var(--surface-alt);
    --rk-border: var(--border-soft);
    --rk-rule: var(--line-soft);
    --rk-control: var(--border-strong);
    --rk-text: var(--ink);
    --rk-muted: var(--muted);
    --rk-faint: var(--muted-soft);
    --rk-navy: var(--brand-navy);
    --rk-navy-2: var(--navy-2);
    --rk-teal: var(--teal-600);
    --rk-teal-fill: var(--brand-turquoise);
    --rk-teal-soft: var(--info-soft);
    --rk-ok: var(--green-700);
    --rk-ok-bg: var(--green-50);
    --rk-warn: var(--amber-700);
    --rk-warn-bg: var(--amber-50);
    --rk-danger: var(--rose-700);
    --rk-danger-bg: var(--rose-50);
    --rk-neutral-bg: var(--neutral-100);
    --rk-radius-card: 10px;
    --rk-radius-control: 8px;
    --rk-radius-chip: 6px;
    --rk-radius-overlay: 14px;
    --rk-line: var(--line-soft);
    --rk-line-strong: var(--border-soft);
    --rk-gap: 16px;
    --rk-card-pad: 20px;
    --rk-page-x: 28px;
    --rk-section: 40px;
    --rk-font: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --rk-fw-regular: 400;
    --rk-fw-medium: 500;
    --rk-fw-semibold: 600;
    --rk-fs-caption: 12px;
    --rk-fs-eyebrow: 11px;
    --rk-fs-meta: 12px;
    --rk-fs-body: 14px;
    --rk-fs-ui: 14px;
    --rk-fs-title: 16px;
    --rk-fs-section: 20px;
    --rk-fs-page: 28px;
    --rk-fs-lead: 30px;
    --rk-lh-tight: 1.2;
    --rk-lh-body: 1.5;
    --rk-shadow-overlay: 0 18px 48px rgba(7, 31, 61, .18);
    --rk-card-shadow: 0 0 0 1px rgba(15, 36, 56, .045), 0 1px 2px rgba(15, 36, 56, .05), 0 1px 3px rgba(15, 36, 56, .04);
    --rk-card-shadow-hover: 0 0 0 1px rgba(15, 36, 56, .06), 0 2px 6px rgba(15, 36, 56, .07), 0 8px 20px rgba(15, 36, 56, .05);
    --rk-mark-opacity: .08;
    --rk-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal-600);

    /* Tangga aksen: satu hue (toska) untuk mark kecil, tint pale-nya untuk bidang */
    --rk-accent-soft: color-mix(in srgb, var(--teal-500) 9%, var(--surface));
    --rk-accent-track: color-mix(in srgb, var(--teal-500) 22%, var(--surface));
    --rk-accent-ink: var(--teal-600);
    --rk-action: var(--teal-600);
    --rk-action-hover: color-mix(in srgb, var(--teal-600) 86%, #000);
    --rk-on-action: #ffffff;

    /* Bingkai "meja kerja": ground netral, kartu putih mengambang tipis */
    --rk-frame: color-mix(in srgb, var(--navy-950) 3%, var(--canvas));

    /* Gerak: satu keluarga easing, durasi pendek untuk state UI */
    --dur-micro: 120ms;
    --dur-short: 200ms;
    --dur-med: 320ms;
    --dur-slow: 520ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* Instrumen jalur tenggat: pita navy tetap di kedua tema */
    --rk-rail: #0a2748;
    --rk-rail-raised: #0f3358;
    --rk-rail-rule: #2a4d70;
    --rk-rail-ink: #f2f8fd;
    --rk-rail-muted: #aac4da;
    --rk-rail-overdue: #ffa3b5;
    --rk-rail-today: #ffd166;
    --rk-rail-tomorrow: #5eead4;
    --rk-rail-soon: #2dd4bf;
    --rk-rail-week: #7fa7c7;
    --rk-scrim: rgba(6, 18, 33, .52);
    --rk-tip: #0a2748;
    --rk-on-status: #ffffff;
    --rk-skeleton: color-mix(in srgb, var(--rk-text) 8%, var(--rk-surface));
}

[data-theme="dark"] {
    color-scheme: dark;

    --neutral-0: #0e1a26;
    --neutral-25: #07111a;
    --neutral-50: #111f2c;
    --neutral-60: #132433;
    --neutral-75: #132433;
    --neutral-100: #1b2c3d;
    --neutral-150: #22384a;
    --neutral-200: #223648;
    --neutral-300: #2a4053;
    --neutral-400: #3b556b;
    --neutral-450: #6f879c;
    --neutral-500: #7b91a6;
    --neutral-600: #8195a8;
    --neutral-700: #a9bac9;
    --neutral-800: #c8d6e2;
    --neutral-900: #e6eef6;
    --neutral-950: #f5f9fc;

    --border-soft: #2a4053;
    --line-soft: #223547;
    --muted-soft: #8498ac;

    --teal-25: #0b2028;
    --teal-50: #0b2a30;
    --teal-100: #0e2f2c;
    --teal-200: #1b4f56;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8b1;
    --teal-600: #5eead4;
    --teal-700: #99f6e4;

    --green-50: #0d2b21;
    --green-100: #103328;
    --green-200: #1e5a42;
    --green-500: #34d399;
    --green-600: #6ee7b7;
    --green-700: #86efac;

    --rose-50: #3a1520;
    --rose-100: #401923;
    --rose-200: #6b2638;
    --rose-300: #7f2f42;
    --rose-500: #fb7185;
    --rose-600: #fda4af;
    --rose-700: #fecdd3;

    --amber-50: #3a2a0c;
    --amber-100: #402f0f;
    --amber-200: #6b4a12;
    --amber-500: #fbbf24;
    --amber-600: #fcd34d;
    --amber-700: #fde68a;

    --blue-50: #132238;
    --blue-100: #1a2436;
    --blue-200: #31445f;
    --blue-400: #7dd3fc;
    --blue-500: #93b4e8;
    --blue-600: #7dd3fc;
    --blue-700: #7dd3fc;

    --navy-800: #123b68;
    --navy-900: #0c3158;
    --navy-950: #071f3d;
    --navy-1000: #061a34;

    --surface-glass: rgba(13,24,37,.88);
    --surface-glass-strong: rgba(13,24,37,.96);
    --border-translucent: rgba(42,64,83,.94);
    --shadow-xs: 0 2px 6px rgba(0,0,0,.18);
    --shadow-sm: 0 2px 5px rgba(0,0,0,.18);
    --shadow: 0 14px 40px rgba(0,0,0,.28);
    --shadow-lg: 0 25px 80px rgba(0,0,0,.38);
    --shadow-xl: 0 32px 95px rgba(0,0,0,.48),0 8px 30px rgba(0,0,0,.24);
    --shadow-button: none;
    --shadow-card-hover: 0 9px 25px rgba(0,0,0,.22);
    --shadow-popover: 0 18px 45px rgba(0,0,0,.4);
    --shadow-toast: 0 16px 45px rgba(0,0,0,.45);
    --shadow-modal: 0 30px 90px rgba(0,0,0,.55);
    --focus-ring: 0 0 0 4px rgba(20,184,177,.3);
    --rk-shadow-overlay: 0 18px 48px rgba(0,0,0,.5);
    --rk-card-shadow: 0 0 0 1px rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --rk-card-shadow-hover: 0 0 0 1px rgba(255,255,255,.09), 0 4px 12px rgba(0,0,0,.45);
    --rk-mark-opacity: .16;
    --rk-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal-600);

    --rk-action: var(--teal-600);
    --rk-action-hover: color-mix(in srgb, var(--teal-600) 86%, #fff);
    --rk-on-action: var(--navy-950);
    --rk-on-status: var(--navy-950);
    --rk-frame: transparent;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--rk-font);
    font-size: 16px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    caret-color: var(--rk-teal);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--rk-accent-track); color: var(--rk-text); }
body.locked { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-sidebar);
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--brand-navy);
    color: var(--sidebar-text);
    transition: transform .24s ease;
}
.sidebar-grid { display: none; }
.brand {
    position: relative;
    height: 64px;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--brand-aqua);
}
.brand-mark svg { width: 19px; }
.brand-mark img { width: 26px; height: 26px; display: block; }
.brand strong { display: block; white-space: nowrap; color: var(--on-brand); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.main-nav { position: relative; min-height: 0; flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.nav-caption { margin: 0; padding: 0 10px var(--space-2); color: var(--sidebar-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.nav-group + .nav-caption { margin-top: var(--space-4); }
.nav-group + .nav-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-item {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav-item + .nav-item { margin-top: 2px; }
.nav-item svg { width: 16px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--on-brand); }
.nav-item.active { background: rgba(255,255,255,.08); color: var(--on-brand); box-shadow: inset 3px 0 0 var(--brand-aqua); }
.nav-item.active svg { color: var(--brand-aqua); }
.nav-item b { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--rose); color: var(--on-brand); font-size: 13px; font-weight: 600; }
.sidebar-user-card { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; align-items: center; gap: 8px; margin: 0 10px 10px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.05); }
.sidebar-user-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-circle); background: rgba(255,255,255,.10); color: var(--on-brand); font-size: 12px; font-weight: 600; }
.sidebar-user-card strong, .sidebar-user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-card strong { color: var(--on-brand); font-size: 13px; font-weight: 500; }
.sidebar-user-card small { margin-top: 1px; color: var(--sidebar-muted); font-size: 12px; }
.sidebar-user-card .sidebar-logout-form { display: block; margin: 0; }
.sidebar-user-card .sidebar-logout-button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--sidebar-muted); }
.sidebar-user-card .sidebar-logout-button:hover { background: rgba(200,70,66,.14); color: var(--on-brand); }
.sidebar-user-card .sidebar-logout-button svg { width: 16px; }
.persistent-layout .main-nav { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.persistent-layout .main-nav .nav-item { min-height: 38px; }
.persistent-layout .main-nav .nav-item + .nav-item { margin-top: 2px; }
.screen-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-mobile-nav); border: 0; background: rgba(4,12,22,.45); backdrop-filter: blur(3px); }
.rk-bottom-nav, .rk-more-sheet { display: none; }

.workspace { min-height: 100vh; padding-left: var(--sidebar-width); background: var(--rk-frame); }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); height: 56px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); border-bottom: 1px solid var(--rk-border); background: var(--rk-frame); }
.search-box { position: relative; width: min(380px, 38vw); }
.search-box svg { position: absolute; top: 50%; left: 12px; width: 16px; color: var(--muted-soft); transform: translateY(-50%); pointer-events: none; }
.search-box input { width: 100%; height: 36px; padding: 0 var(--space-3) 0 34px; border: 1px solid var(--border-soft); border-radius: 6px; outline: none; background: var(--surface-alt); color: var(--ink); font-size: 13px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.search-box input:focus { border-color: var(--brand-turquoise); background: var(--surface); box-shadow: var(--focus-ring); }
.profile-area { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.icon-button, .icon-action { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--rk-muted); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.icon-button:hover, .icon-action:hover { background: var(--rk-surface-2); color: var(--rk-text); }
.icon-button svg, .icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button, .icon-action { position: relative; }
.icon-action::after { content: attr(data-tooltip); position: absolute; right: 0; bottom: calc(100% + 7px); z-index: var(--z-popover-raised); width: max-content; max-width: 190px; padding: 6px 8px; border-radius: 5px; background: var(--rk-text); color: var(--rk-surface); font-size: 12px; font-weight: 500; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.icon-action:hover::after, .icon-action:focus-visible::after { opacity: 1; transform: translateY(0); }
.icon-button[aria-label]::after { content: attr(aria-label); position: absolute; top: calc(100% + 7px); right: 0; z-index: var(--z-popover-raised); width: max-content; max-width: 190px; padding: 6px 8px; border-radius: 5px; background: var(--rk-text); color: var(--rk-surface); font-size: 12px; font-weight: 500; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease; }
.icon-button[aria-label]:hover::after, .icon-button[aria-label]:focus-visible::after { opacity: 1; transform: translateY(0); }
.icon-action--danger:hover { background: var(--danger-soft); color: var(--rose-600); }
.icon-action:disabled { cursor: not-allowed; opacity: .38; }
.sidebar-logout-button[aria-label]::after { top: auto; bottom: calc(100% + 7px); }
.theme-toggle { flex: none; color: var(--muted); }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
.theme-toggle-floating { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); width: 44px; height: 44px; border-radius: var(--radius-circle); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-popover); }
@media (max-width: 560px) { .theme-toggle-floating { right: 14px; bottom: 14px; } }
.bell-button { position: relative; }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 var(--space-1); border: 2px solid var(--surface); border-radius: var(--radius-pill); background: var(--rose); color: var(--on-brand); font-size: 13px; font-weight: 600; line-height: 1; }
.notification-center { position: relative; }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-notification); width: min(410px,calc(100vw - 30px)); border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface); box-shadow: var(--rk-shadow-overlay); animation: notification-in .16s ease-out both; }
.notification-panel::before { position: absolute; top: -7px; right: 11px; width: 13px; height: 13px; border-top: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); background: var(--surface); content: ''; transform: rotate(45deg); }
.notification-panel > header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3-5); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line-soft); }
.notification-panel > header small { display: block; margin-bottom: 2px; color: var(--rk-teal); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.notification-panel > header h2 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.notification-panel > header > span { padding: var(--space-1) var(--space-2); border-radius: 4px; background: var(--info-soft); color: var(--teal-600); font-size: 13px; font-weight: 600; }
.notification-list { max-height: min(430px,calc(100dvh - 190px)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1-5); }
.notification-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5); border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.notification-item:hover, .notification-item:focus-visible { outline: none; background: var(--neutral-25); }
.notification-item-marker { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: var(--info-soft); color: var(--brand-turquoise); }
.notification-item-marker svg { width: 17px; height: 17px; }
.notification-item.overdue .notification-item-marker { background: var(--danger-soft); color: var(--rose-500); }
.notification-item.today .notification-item-marker { background: var(--warning-soft); color: var(--amber-600); }
.notification-item.soon .notification-item-marker { background: var(--blue-soft); color: var(--blue-600); }
.notification-item-copy { min-width: 0; }
.notification-item-copy strong, .notification-item-copy small, .notification-item-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-item-copy strong { color: var(--neutral-900); font-size: 13px; font-weight: 500; }
.notification-item-copy small { margin-top: 2px; color: var(--muted-soft); font-size: 13px; }
.notification-item-copy em { margin-top: var(--space-1); color: var(--blue-500); font-size: 13px; font-style: normal; font-weight: 600; }
.notification-item.overdue .notification-item-copy em { color: var(--rose-600); }
.notification-item > b { color: var(--neutral-600); font-size: 13px; }
.notification-empty { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-7) var(--space-4); color: var(--muted-soft); text-align: center; }
.notification-empty > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: var(--space-0-5); border-radius: var(--radius-circle); background: var(--info-soft); color: var(--teal-600); }
.notification-empty > span svg { width: 18px; height: 18px; }
.notification-empty strong { color: var(--neutral-800); font-size: 13px; font-weight: 500; }
.notification-empty small { max-width: 28ch; font-size: 13px; }
.notification-panel > footer { padding: var(--space-2-5) var(--space-3-5) var(--space-3); border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; background: var(--neutral-50); }
.notification-panel > footer a { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1-5) var(--space-1); color: var(--ink); font-size: 13px; font-weight: 600; }
.notification-panel > footer a:hover { color: var(--brand-teal-deep); }
.notification-panel > footer svg { width: 14px; height: 14px; }
@keyframes notification-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.topbar-divider { width: 1px; height: 28px; background: var(--border); }
.profile { display: flex; align-items: center; gap: 10px; }
.profile > span, .avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: var(--radius-circle); background: var(--navy); color: var(--on-brand); font-size: 13px; font-weight: 600; }
.profile strong, .profile small { display: block; }
.profile strong { color: var(--neutral-900); font-size: 13px; font-weight: 500; }
.profile small { color: var(--neutral-700); font-size: 13px; font-weight: 400; }
.logout-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); padding: 0 var(--space-3); border: 1px solid var(--rose-200); border-radius: var(--radius-sm); background: var(--rose-100); color: var(--rose-700); font-size: 13px; font-weight: 600; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.logout-button svg { width: 16px; height: 16px; }
.logout-button:hover { border-color: var(--rose-300); background: var(--danger-soft); color: var(--rose-700); transform: translateY(-1px); }
.logout-form { display: inline-flex; margin: 0; }
.sidebar-logout-form { display: block; }
button.logout-button, button.nav-item.sidebar-logout-button { cursor: pointer; font-family: inherit; }
.mobile-menu { display: none; }
.rk-breadcrumb { min-width: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--neutral-700); font-size: 13px; }
.rk-breadcrumb a:hover { color: var(--ink); }
.rk-breadcrumb strong { overflow: hidden; color: var(--neutral-900); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.page-topbar .profile-area { margin-left: auto; }

/* Permukaan "kertas" untuk semua halaman di dalam shell */
.workspace > main { width: min(100%, 1480px); min-height: calc(100vh - 56px); margin: 0 auto; padding: var(--space-7) var(--space-8) var(--space-11); border: 0; border-radius: 0; background: transparent; }
.team-page .workspace > main { width: min(100%, 1260px); }
[data-theme="dark"] .workspace > main { width: min(100%, 1480px); min-height: 0; margin: 0 auto; border: 0; border-radius: 0; background: transparent; }
[data-theme="dark"] .team-page .workspace > main { width: min(100%, 1260px); }
[data-theme="dark"] .topbar { border-bottom-color: var(--border-soft); background: var(--surface); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.page-heading h1 { margin: 0; color: var(--ink); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.page-heading > div > p:last-child { margin: var(--space-2) 0 0; color: var(--muted); }
.primary-button, .secondary-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3-5); border-radius: var(--rk-radius-control); font-size: 14px; font-weight: 600; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.primary-button { border: 1px solid var(--rk-action); background: var(--rk-action); color: var(--rk-on-action); box-shadow: none; }
.primary-button:hover { border-color: var(--rk-action-hover); background: var(--rk-action-hover); transform: none; }
.primary-button:disabled { cursor: wait; opacity: .7; transform: none; }
.primary-button svg, .secondary-button svg { width: 16px; }
.secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--neutral-800); }
.secondary-button:hover { border-color: var(--neutral-400); background: var(--surface-alt); }
.primary-button:active:not(:disabled), .secondary-button:active, .logout-button:active, .icon-button:active { transform: translateY(1px); }

/* Komponen bersama */
.rk-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rk-gap); }
.rk-page-heading { min-width: 0; }
.rk-page-heading h1 { margin: 0; color: var(--rk-text); font-size: var(--rk-fs-page); font-weight: 600; line-height: var(--rk-lh-tight); letter-spacing: -.02em; }
.rk-page-heading p { margin: 6px 0 0; color: var(--rk-muted); font-size: var(--rk-fs-body); line-height: var(--rk-lh-body); }
.rk-page-heading .rk-eyebrow { margin: 0 0 6px; color: var(--rk-faint); font-size: var(--rk-fs-meta); font-weight: 500; letter-spacing: 0; line-height: 1.3; text-transform: none; font-variant-numeric: tabular-nums; }
.rk-page-actions { display: flex; align-items: center; flex: none; gap: 8px; }
/* Ringkasan angka: satu kartu per angka, ikon makna sebagai latar. */
.rk-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--rk-gap); }
.rk-stat { position: relative; isolation: isolate; min-width: 0; min-height: 108px; display: grid; align-content: start; gap: 4px; overflow: hidden; padding: 16px 18px; border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); color: inherit; text-decoration: none; transition: box-shadow .14s ease, transform .14s ease; }
.rk-stat-mark { position: absolute; right: -26px; bottom: -22px; z-index: 0; width: 120px; height: 120px; color: var(--rk-teal); opacity: var(--rk-mark-opacity); stroke-width: 1.15; transform: rotate(-10deg); pointer-events: none; }
.rk-stat--bahaya .rk-stat-mark { color: var(--rk-danger); }
.rk-stat--peringatan .rk-stat-mark { color: var(--rk-warn); }
.rk-stat--selesai .rk-stat-mark { color: var(--rk-ok); }
.rk-stat > *:not(.rk-stat-mark), .kpi-card > *:not(.rk-stat-mark) { position: relative; z-index: 1; }
.rk-stat-label { overflow: hidden; color: var(--rk-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; text-overflow: ellipsis; white-space: nowrap; }
.rk-stat-value { color: var(--rk-text); font-size: 30px; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rk-stat-meta { color: var(--rk-muted); font-size: var(--rk-fs-meta); line-height: 1.35; }
.rk-stat--teal .rk-stat-value { color: var(--rk-teal); }
.rk-stat--bahaya .rk-stat-value { color: var(--rk-danger); }
.rk-stat--peringatan .rk-stat-value { color: var(--rk-warn); }
.rk-stat--selesai .rk-stat-value { color: var(--rk-ok); }
.rk-stat--bahaya .rk-stat-value.is-zero, .rk-stat--peringatan .rk-stat-value.is-zero, .rk-stat--selesai .rk-stat-value.is-zero { color: var(--rk-text); }
/* Hanya kartu yang menuntut tindakan diberi tint, supaya baris tidak terbaca empat kartu kembar. */
.rk-stat--bahaya { background: color-mix(in srgb, var(--rk-danger) 4%, var(--rk-surface)); }
a.rk-stat:hover { box-shadow: var(--rk-card-shadow-hover); transform: translateY(-1px); }
a.rk-stat:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: 2px; }
@media (max-width: 1100px) {
    .rk-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rk-stat-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.rk-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--rk-border); scrollbar-width: none; }
.rk-tabs::-webkit-scrollbar { display: none; }
.rk-tab { min-height: 40px; display: inline-flex; align-items: center; flex: none; gap: 6px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--rk-muted); font-size: var(--rk-fs-body); font-weight: 500; white-space: nowrap; transition: color .14s ease, border-color .14s ease; }
.rk-tab:hover { color: var(--rk-text); }
.rk-tab.active { border-bottom-color: var(--rk-teal); color: var(--rk-text); }
.rk-tab b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--rk-neutral-bg); color: var(--rk-muted); font-size: var(--rk-fs-meta); font-weight: 500; text-align: center; }
.rk-tab.active b { background: var(--rk-teal-soft); color: var(--rk-teal); }

.rk-status { display: inline-flex; align-items: center; gap: 6px; color: var(--rk-muted); font-size: var(--rk-fs-meta); font-weight: 500; }
.rk-status::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--neutral-500); }
.rk-status--berjalan { color: var(--rk-teal); }
.rk-status--berjalan::before { background: var(--rk-teal-fill); }
.rk-status--selesai { color: var(--rk-ok); }
.rk-status--selesai::before { background: var(--rk-ok); }
.rk-status--terlambat { color: var(--rk-danger); }
.rk-status--terlambat::before { background: var(--rk-danger); }

.rk-progress { height: 4px; overflow: hidden; border-radius: 999px; background: var(--rk-accent-track); }
.rk-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--rk-teal-fill); transform: scaleX(var(--p, 1)); transform-origin: left; }

/* Drawer form: editor ringkas dari kanan */
.rk-form-drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); display: flex; justify-content: flex-end; background: rgba(3,14,28,.56); backdrop-filter: blur(7px) saturate(.9); }
.rk-form-drawer { width: min(460px,100%); height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border-left: 1px solid var(--rk-border); background: var(--rk-surface); box-shadow: var(--rk-shadow-overlay); animation: drawer-in .2s ease-out; }
.rk-form-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--rk-border); }
.rk-form-drawer > header .icon-button { flex: none; }
.rk-form-drawer-body { min-height: 0; overflow-y: auto; padding: var(--space-5); scrollbar-gutter: stable; }
.rk-form-drawer:focus:not(:focus-visible) { outline: none; }
.rk-form-drawer:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: -4px; }
@keyframes drawer-in { from { opacity: .5; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { .rk-form-drawer { animation: none; } }

.rk-empty { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; border: 1px dashed var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); text-align: center; }
.rk-empty strong { color: var(--rk-text); font-size: 16px; font-weight: 600; }
.rk-empty p { max-width: 46ch; margin: 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
.rk-empty-actions { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.rk-danger-zone { padding: 20px; border: 1px solid var(--rose-200); border-radius: var(--rk-radius-card); background: var(--rk-danger-bg); }
.rk-danger-zone h2 { margin: 0; color: var(--rk-danger); font-size: var(--rk-fs-title); font-weight: 600; }
.rk-danger-zone p { margin: 6px 0 16px; color: var(--rk-danger); font-size: 13px; line-height: 1.55; }

.rk-toast { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); max-width: min(360px, calc(100% - 32px)); padding: 10px 14px; border: 1px solid var(--rk-border); border-radius: 6px; background: var(--rk-text); color: var(--rk-surface); font-size: 13px; box-shadow: var(--rk-shadow-overlay); }

.metrics { margin-top: var(--space-7); display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: var(--space-3); }
.metric-card, .completion-card { position: relative; min-height: 154px; overflow: hidden; border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); }
.metric-card { padding: var(--space-4); }
.metric-card > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); }
.metric-icon { display: grid; place-items: center; }
.metric-icon svg { width: 18px; }
.metric-card em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 600; }
.metric-card.violet em { color: var(--violet); }
.metric-card.cyan em { color: var(--cyan-dark); }
.metric-card.green em { color: var(--green); }
.metric-card > strong { position: relative; z-index: var(--z-base); display: block; margin-top: var(--space-3-5); font-size: 24px; line-height: 1; letter-spacing: -.035em; }
.metric-card > p { position: relative; z-index: var(--z-base); margin: var(--space-2) 0 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.completion-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-color: var(--navy); background: var(--brand-gradient); color: var(--on-brand); box-shadow: var(--shadow-button); }
.completion-card > * { position: relative; z-index: var(--z-base); }
.completion-ring { --progress: 0deg; width: 80px; height: 80px; display: grid; place-items: center; flex: none; border-radius: var(--radius-circle); background: conic-gradient(var(--cyan) var(--progress), rgba(255,255,255,.11) 0); /* taste-skill-ignore: indikator progres fungsional */ }
.completion-ring::before { content: ''; grid-area: 1/1; width: 61px; height: 61px; border-radius: var(--radius-circle); background: var(--navy); }
.completion-ring span { grid-area: 1/1; z-index: var(--z-base); font-size: 16px; font-weight: 600; }
.completion-card small, .completion-card strong, .completion-card p { display: block; }
.completion-card small { color: var(--on-brand-accent); font-size: 13px; font-weight: 600; }
.completion-card strong { margin-top: var(--space-0-5); font-size: 24px; letter-spacing: -.03em; }
.completion-card p { margin: var(--space-1) 0 0; color: var(--on-brand-soft); font-size: 13px; }

.work-section { margin-top: var(--space-7); }
.section-header { display: flex; align-items: flex-end; gap: var(--space-5); padding-bottom: var(--space-3-5); border-bottom: 1px solid var(--border); }
.section-header h2, .panel h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.section-header p, .panel header p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 14px; }
.view-controls { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.view-toggle { display: flex; padding: var(--space-1); border-radius: var(--radius-sm); background: var(--neutral-150); }
.view-toggle button { min-width: 70px; height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--neutral-800); font-size: 14px; font-weight: 600; }
.view-toggle button.active { background: var(--surface); color: var(--ink); }
.view-controls select { height: 40px; min-width: 145px; padding: 0 var(--space-8) 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; background: var(--surface); color: var(--neutral-800); font-size: 14px; font-weight: 600; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3-5); margin-top: var(--space-4); }
.lane { min-width: 0; padding: var(--space-3); border: 0; border-radius: var(--rk-radius-card); background: var(--rk-surface-2); }
.lane-header { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 0 var(--space-1) var(--space-1); }
.lane-header i { width: 8px; height: 8px; flex: none; border-radius: var(--radius-circle); }
.lane[data-status="terencana"] .lane-header i { background: var(--neutral-600); }
.lane[data-status="berjalan"] .lane-header i { background: var(--cyan); }
.lane[data-status="selesai"] .lane-header i { background: var(--success); }
.lane-header h3 { margin: 0; color: var(--neutral-800); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.lane-header span { margin-left: auto; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 var(--space-1-5); border-radius: var(--radius-circle); background: var(--surface); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.lane-body { min-width: 0; display: grid; gap: var(--space-2-5); }
.task-card { width: 100%; min-width: 0; padding: var(--space-3-5); border: 0; border-radius: var(--rk-radius-card); background: var(--surface); color: inherit; text-align: left; box-shadow: var(--rk-card-shadow); transition: box-shadow .15s ease; }
.task-card:hover { box-shadow: var(--rk-card-shadow-hover); }
.task-top, .task-progress-line, .task-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); }
.priority { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-pill); background: var(--neutral-75); color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.priority.high { border-color: var(--amber-200); background: var(--warning-soft); color: var(--amber-700); }
.activity-badge { width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 22px; padding: var(--space-0-5) var(--space-2); border: 1px solid color-mix(in srgb,var(--activity-color,var(--brand-turquoise)) 38%,var(--surface)); border-radius: var(--radius-pill); background: color-mix(in srgb,var(--activity-color,var(--brand-turquoise)) 11%,var(--surface)); color: color-mix(in srgb,var(--activity-color,var(--brand-turquoise)) 55%,var(--rk-text)); font-size: 13px; font-style: normal; font-weight: 600; line-height: 1.25; }
.activity-badge::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; border-radius: var(--radius-circle); background: var(--activity-color,var(--brand-turquoise)); }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: var(--space-3); }
.activity-card { overflow: hidden; border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); }
.activity-card.inactive { opacity: .68; filter: saturate(.55); }
.activity-card > header, .activity-card > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3-5) var(--space-4); }
.activity-card > header span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb,var(--activity-color) 15%,var(--surface)); color: var(--activity-color); font-weight: 600; }
.activity-card > header i { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-style: normal; font-weight: 600; }
.activity-card.inactive > header i { background: var(--neutral-100); color: var(--neutral-600); }
.activity-card > h2, .activity-card > p { margin: 0; padding: 0 var(--space-4); }
.activity-card > h2 { color: var(--ink); font-size: 16px; }
.activity-card > p { min-height: 38px; margin-top: var(--space-1); color: var(--muted); font-size: 13px; }
.activity-card > footer { margin-top: var(--space-3); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; }
.activity-card > footer strong { color: color-mix(in srgb,var(--activity-color) 55%,var(--rk-text)); font-size: 14px; }
.activity-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--neutral-50); }
.activity-card-actions > button, .activity-card-actions form { flex: none; }
.activity-card-actions form .icon-action, .activity-card-actions > .icon-action { width: 36px; min-height: 36px; padding: 0; }
.activity-card-actions .danger-note { flex-basis: 100%; color: var(--rose-600); font-size: 13px; line-height: 1.35; }
/* Ruang aktivitas sebagai daftar baris (bukan tumpukan kartu) */
@media (min-width: 1024px) {
    .activity-grid { grid-template-columns: 1fr; gap: 0; overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); }
    .activity-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-areas: "mark title meta actions" "mark role meta actions"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: var(--rk-surface); }
    .activity-card:first-child { border-top: 0; }
    .activity-card > header { grid-area: mark; gap: 10px; padding: 0; }
    .activity-card > h2 { grid-area: title; padding: 0; font-size: 16px; line-height: 1.3; }
    .activity-card > p { grid-area: role; min-height: 0; margin: 0; padding: 0; font-size: 13px; }
    .activity-card > footer { grid-area: meta; display: grid; justify-items: end; gap: 2px; margin: 0; padding: 0; border: 0; }
    .activity-card-actions { grid-area: actions; flex-wrap: nowrap; justify-content: flex-end; padding: 0; background: transparent; }
    .activity-card-actions .danger-note { flex-basis: auto; }
}
.access-policy-note { display: flex; align-items: center; gap: var(--space-3-5); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--teal-200); border-radius: var(--radius-md); background: var(--teal-50); }
.access-policy-note strong { flex: 0 0 auto; color: var(--cyan-dark); font-size: 13px; }
.access-policy-note span { color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.task-card .activity-badge { margin-top: var(--space-2); }
.drawer-hero > div:first-of-type { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.task-top svg { width: 15px; color: var(--muted-soft); }
.task-card h4 { min-height: 48px; margin: var(--space-3) 0 0; overflow-wrap: anywhere; color: var(--neutral-900); font-size: 14px; line-height: 1.55; }
.task-program { width: max-content; max-width: 100%; display: block; margin-top: var(--space-1-5); overflow: hidden; padding: var(--space-0-5) var(--space-1-5); border-left: 3px solid var(--program-color,var(--brand-turquoise)); border-radius: var(--radius-2xs); background: color-mix(in srgb,var(--program-color,var(--brand-turquoise)) 12%,var(--surface)); color: var(--ink-soft); font-size: 13px; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.task-unit { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.task-progress-line { margin-top: var(--space-3-5); color: var(--muted); font-size: 13px; font-weight: 500; }
.task-progress-line strong { color: var(--neutral-800); }
.progress-track { height: 5px; margin-top: var(--space-1-5); overflow: hidden; border-radius: var(--radius-pill); background: var(--neutral-150); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--cyan); transform: scaleX(var(--p, 0)); transform-origin: left; animation: grow-x var(--dur-med) var(--ease-out) both; }
.task-card[data-status="terencana"] .progress-track span { background: var(--violet); }
.task-card[data-status="selesai"] .progress-track span { background: var(--green); }
.task-footer { margin-top: var(--space-3-5); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.task-owner { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.task-owner .avatar { width: 28px; height: 28px; font-size: 13px; }
.task-owner span:last-child { overflow: hidden; color: var(--neutral-700); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-date { display: flex; align-items: center; gap: var(--space-1); color: var(--neutral-600); font-size: 13px; font-weight: 600; white-space: nowrap; }
.task-date svg { width: 14px; }
.task-date.overdue { color: var(--rose); }
.task-attachments { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2-5); color: var(--neutral-600); font-size: 13px; font-weight: 500; }
.task-attachments svg { width: 14px; }
.empty-lane { padding: var(--space-6) var(--space-3); border: 1px dashed var(--neutral-400); border-radius: var(--radius-lg); color: var(--muted-soft); font-size: 13px; font-weight: 600; text-align: center; }
.loading-state { min-height: 270px; display: grid; place-items: center; align-content: center; gap: var(--space-3); color: var(--muted); }
.loading-state span { width: 28px; height: 28px; border: 3px solid var(--blue-200); border-top-color: var(--cyan); border-radius: var(--radius-circle); animation: spin .8s linear infinite; }
.loading-state p { margin: 0; font-size: 14px; font-weight: 600; }
.task-list { margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.list-row { width: 100%; display: grid; grid-template-columns: minmax(240px,1fr) 150px 150px 110px; align-items: center; gap: var(--space-3-5); padding: var(--space-3-5) var(--space-4); border: 0; border-top: 1px solid var(--line-soft); background: var(--surface); color: inherit; text-align: left; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-alt); }
.list-row strong { display: block; color: var(--neutral-900); font-size: 14px; }
.list-row small { display: block; margin-top: var(--space-0-5); color: var(--muted); font-size: 13px; }
.status-pill { width: max-content; display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-circle); background: currentColor; }
.status-pill.terencana { background: var(--violet-soft); color: var(--blue-500); }
.status-pill.berjalan { background: var(--teal-50); color: var(--cyan-dark); }
.status-pill.selesai { background: var(--success-soft); color: var(--success); }
.list-progress, .list-date { color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.no-results { padding: var(--space-9); color: var(--muted); font-size: 14px; text-align: center; }

.status-chart-panel header > strong { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--teal-25); color: var(--cyan-dark); font-size: 13px; white-space: nowrap; }
.status-stacked-chart { height: 38px; display: flex; margin-top: var(--space-6); overflow: hidden; border-radius: var(--radius-sm); background: var(--rk-accent-track); }
.status-segment { min-width: 0; display: grid; place-items: center; color: var(--on-brand); }
.status-segment b { font-size: 13px; }
.status-segment.terencana { background: var(--neutral-600); }
.status-segment.berjalan { background: var(--brand-turquoise); }
.status-segment.selesai { background: var(--success); }
.status-segment.empty { background: var(--rk-accent-track); }
.status-chart-legend { display: grid; grid-template-columns: repeat(auto-fit,minmax(132px,1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.status-chart-legend > span { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: var(--space-1-5); min-width: 0; }
.status-chart-legend i { width: 8px; height: 8px; border-radius: var(--radius-circle); }
.status-chart-legend .terencana i { background: var(--neutral-600); }
.status-chart-legend .berjalan i { background: var(--brand-turquoise); }
.status-chart-legend .selesai i { background: var(--success); }
.status-chart-legend small { overflow: hidden; color: var(--muted); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.status-chart-legend strong { color: var(--ink); font-size: 13px; }
.owner-progress-chart { display: grid; gap: var(--space-2-5); margin-top: var(--space-4); }
.owner-progress-row { display: grid; grid-template-columns: minmax(95px,.85fr) minmax(70px,1fr) 34px; align-items: center; gap: var(--space-2); }
.owner-progress-row > div { min-width: 0; }
.owner-progress-row strong, .owner-progress-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-progress-row strong { color: var(--neutral-800); font-size: 13px; }
.owner-progress-row small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.owner-progress-row > span { height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--rk-accent-track); }
.owner-progress-row > span i { display: block; height: 100%; border-radius: inherit; background: var(--brand-turquoise); }
.owner-progress-row > b { color: var(--cyan-dark); font-size: 13px; text-align: right; }
.attention-panel { overflow: hidden; border-color: rgba(20,184,177,.24); background: var(--success-soft); }
.attention-panel header > a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--success-soft); color: var(--cyan-dark); }
.attention-panel header > a svg { width: 14px; }
.attention-list { display: grid; gap: var(--space-1-5); margin-top: var(--space-3); }
.attention-item { width: 100%; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--neutral-150); border-radius: var(--radius-sm); background: var(--surface); text-align: left; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.attention-item:hover { border-color: var(--brand-turquoise); transform: translateX(2px); }
.attention-item > i { width: 7px; height: 100%; min-height: 28px; border-radius: var(--radius-pill); background: var(--neutral-500); }
.attention-item.soon > i { background: var(--brand-turquoise); }
.attention-item.priority > i { background: var(--brand-blue); }
.attention-item.overdue > i { background: var(--rose); }
.attention-item > span { min-width: 0; }
.attention-item strong, .attention-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-item strong { color: var(--neutral-800); font-size: 13px; }
.attention-item small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.attention-item > b { color: var(--ink); font-size: 13px; }
.attention-clear { display: grid; place-items: center; min-height: 130px; color: var(--muted); text-align: center; }
.attention-clear > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--success-soft); color: var(--cyan-dark); }
.attention-clear svg { width: 16px; }
.attention-clear strong, .attention-clear small { display: block; }
.analytics-empty { padding: var(--space-6); color: var(--muted); font-size: 13px; text-align: center; }

.panel { padding: var(--space-5); border: 0; border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); }
.team-panel { border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel > header button { display: flex; align-items: center; gap: var(--space-0-5); padding: var(--space-1-5); border: 0; background: none; color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.panel > header button svg { width: 14px; }

.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(6,16,29,.4); backdrop-filter: blur(5px); }
.modal-backdrop { display: grid; place-items: center; padding: var(--space-4); }
.modal { width: min(580px,100%); max-height: 92vh; overflow: auto; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); animation: modal-in .18s ease-out; }
.modal > header { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5); border-bottom: 1px solid var(--line-soft); background: var(--surface-glass-strong); backdrop-filter: blur(12px); }
.modal h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.modal header p { margin: var(--space-1) 0 0; color: var(--muted); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3-5); padding: var(--space-5) var(--space-5); }
.form-grid label, .attachment-form label { display: grid; gap: var(--space-1-5); }
.form-grid label > span, .attachment-form label > span { color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.form-grid label > span small { color: var(--muted); font-weight: 600; }
.form-grid .wide { grid-column: 1/-1; }
.form-grid > .form-section { grid-column: 1/-1; display: grid; gap: var(--space-3); }
.form-section-title { margin: 0; color: var(--rk-muted); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.form-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3-5); }
.form-section-grid label { display: grid; gap: var(--space-1-5); }
.form-section-grid label > span { color: var(--rk-text); font-size: 13px; font-weight: 600; }
.form-section-grid label > span small { color: var(--rk-muted); font-weight: 500; }
.form-section-grid label > small { margin-top: -2px; color: var(--rk-muted); font-size: 13px; line-height: 1.4; }
.form-section-grid .wide { grid-column: 1/-1; }
.form-section-more summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); border: 1px dashed var(--rk-border); border-radius: var(--rk-radius-control); color: var(--rk-muted); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.form-section-more summary::-webkit-details-marker { display: none; }
.form-section-more summary small { color: var(--rk-faint); font-weight: 500; }
.form-section-more[open] summary { border-style: solid; border-color: var(--rk-teal); color: var(--rk-teal); }
.form-section-more .form-section-grid { margin-top: var(--space-3); }
.form-note { margin: 0; padding: 0 var(--space-5) var(--space-3); color: var(--rk-muted); font-size: 13px; }
.form-grid label.has-error > span { color: var(--rk-danger); }
.form-grid label.has-error input, .form-grid label.has-error select, .form-grid label.has-error textarea { border-color: var(--rk-danger); }
.field-error { color: var(--rk-danger); font-size: 13px; font-weight: 500; }
input, select, textarea { width: 100%; border: 1px solid var(--blue-200); border-radius: var(--radius-sm); outline: none; background: var(--surface); color: var(--ink); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
input, select { height: 41px; padding: 0 var(--space-2-5); }
textarea { min-height: 82px; padding: var(--space-2-5) var(--space-2-5); resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-turquoise); box-shadow: var(--focus-ring); }
input[type="file"] { padding: var(--space-1-5) var(--space-2); color: var(--muted); font-size: 13px; }
input[type="file"]::file-selector-button { margin-right: var(--space-2); padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-2xs); background: var(--blue-100); color: var(--neutral-800); font-size: 13px; font-weight: 600; cursor: pointer; }
.input-with-icon > div { position: relative; }
.input-with-icon svg { position: absolute; top: 50%; left: 11px; width: 16px; color: var(--muted-soft); transform: translateY(-50%); }
.input-with-icon input { padding-left: var(--space-9); }
.modal form > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3-5) var(--space-5); border-top: 1px solid var(--line-soft); background: var(--surface-glass-strong); backdrop-filter: blur(12px); }

.drawer-backdrop { z-index: var(--z-drawer-backdrop); background: rgba(3,14,28,.56); backdrop-filter: blur(7px) saturate(.9); }
.drawer-backdrop:not([hidden]) { animation: detail-backdrop-in .18s ease-out; }
.drawer { position: fixed; top: 50%; left: 50%; z-index: var(--z-drawer); width: min(880px,calc(100% - 48px)); max-height: calc(100dvh - 48px); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius-3xl); background: var(--surface); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,-47%) scale(.96); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear 0s; }
.drawer.is-maximized { width: calc(100% - 24px); height: calc(100dvh - 24px); max-height: none; border-radius: var(--radius-xl); }
.drawer-hero { position: relative; overflow: hidden; padding: var(--space-6) 112px var(--space-6) var(--space-6); background: var(--brand-gradient); color: var(--on-brand); }
.drawer-hero::after { content: ''; position: absolute; width: 230px; height: 230px; top: -155px; right: 80px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-circle); pointer-events: none; }
.drawer-window-actions { position: absolute; z-index: var(--z-raised); top: 17px; right: 17px; display: flex; gap: var(--space-2); }
.drawer-window-actions .icon-button { position: static; width: 38px; height: 38px; border-color: transparent; background: none; color: var(--on-brand); }
.drawer-window-actions .icon-button:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: var(--on-brand); }
.drawer-window-actions svg { width: 18px; height: 18px; }
.drawer-restore-icon { display: none; }
.drawer.is-maximized .drawer-maximize-icon { display: none; }
.drawer.is-maximized .drawer-restore-icon { display: block; }
.drawer-status-row { position: relative; z-index: var(--z-base); display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.drawer-hero h2 { position: relative; z-index: var(--z-base); margin: var(--space-3) 0 0; font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.drawer-hero p { position: relative; z-index: var(--z-base); margin: var(--space-1-5) 0 0; color: var(--on-brand-soft); font-size: 13px; }
.drawer-body { min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; align-items: start; gap: var(--space-4); overflow-y: auto; padding: var(--space-5); scrollbar-gutter: stable; }
.drawer-body > .detail-summary, .drawer-body > .detail-grid, .drawer-body > .task-updates-section, .drawer-body > .drawer-actions { grid-column: 1/-1; }
.drawer-body > .detail-progress, .drawer-body > .checklist-section, .drawer-body > .detail-documents, .drawer-body > .reminder-detail { height: 100%; }
.drawer:focus:not(:focus-visible) { outline: none; }
.drawer:focus-visible { outline: 2px solid var(--brand-turquoise); outline-offset: -4px; }
.drawer-body section > h3, .progress-heading h3, .attachment-heading h3 { margin: 0; color: var(--muted-soft); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.drawer-body section > p { margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2-5); }
.detail-grid article { min-height: 85px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--neutral-75); }
.detail-grid small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.detail-grid article > div { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2-5); }
.detail-grid .avatar { width: 28px; height: 28px; font-size: 13px; }
.detail-grid strong { display: block; margin-top: var(--space-3-5); color: var(--neutral-800); font-size: 13px; }
.detail-grid article > div strong { margin-top: 0; }
.progress-heading, .attachment-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.progress-heading > strong { color: var(--neutral-900); font-size: 14px; }
.progress-readout { height: 7px; margin-top: var(--space-3); border-radius: var(--radius-pill); background: linear-gradient(90deg,var(--cyan) var(--range,0%),var(--neutral-200) var(--range,0%)); }
.progress-note { margin: var(--space-3) 0 0 !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.55; }
.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-4); }
.status-actions button { min-height: 34px; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.status-actions button.active { border-color: var(--navy); background: var(--navy); color: var(--on-brand); }
.status-actions svg { width: 14px; }
.save-progress { margin-top: var(--space-2-5); }
.checklist-section { padding: var(--space-4); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-lg); background: var(--surface-alt); }
.checklist-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3-5); }
.checklist-heading h3 { margin: 0; color: var(--neutral-800); font-size: 14px; }
.checklist-heading p { margin: var(--space-1) 0 0 !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.45 !important; }
.checklist-heading > strong { min-width: 44px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--teal-50); color: var(--cyan-dark); font-size: 13px; text-align: center; }
.checklist-progress { display: flex; align-items: center; gap: var(--space-2-5); margin-top: var(--space-3); }
.checklist-progress > i { height: 6px; overflow: hidden; flex: 1; border-radius: var(--radius-pill); background: var(--neutral-200); }
.checklist-progress b { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--brand-turquoise); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.checklist-progress span { min-width: 34px; color: var(--ink-soft); font-size: 13px; font-style: normal; font-weight: 600; text-align: right; }
.checklist-list { display: grid; margin-top: var(--space-3); overflow: hidden; border: 1px solid var(--rk-line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.checklist-item { --wbs-indent: calc(var(--wbs-depth, 0) * 18px); position: relative; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-2) var(--space-2-5) calc(var(--space-2-5) + var(--wbs-indent)); border-bottom: 1px solid var(--rk-line); background: var(--surface); transition: background-color var(--dur-short) var(--ease-out); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-item:hover { background: var(--neutral-50); }
.checklist-item.is-summary { background: var(--neutral-75); }
.checklist-item.is-summary:hover { background: var(--neutral-100); }
.checklist-item[style*="--wbs-depth:1"]::before, .checklist-item[style*="--wbs-depth:2"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--space-2-5) + var(--wbs-indent) - 9px); width: 1px; background: var(--neutral-300); }
.wbs-code { align-self: start; padding-top: 2px; color: var(--cyan-dark); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.45; white-space: nowrap; }
.wbs-item-copy { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2-5); }
label.wbs-item-copy { cursor: pointer; }
.wbs-item-copy > span:last-child { min-width: 0; }
.checklist-item input[type="checkbox"] { width: 17px; height: 17px; margin: var(--space-0-5) 0 0; padding: 0; flex: none; accent-color: var(--cyan); box-shadow: none; }
.wbs-summary-mark { width: 17px; height: 17px; display: grid; place-items: center; flex: none; color: var(--muted); }
.wbs-summary-mark svg { width: 15px; height: 15px; }
.checklist-item strong, .checklist-item small { display: block; overflow-wrap: anywhere; }
.checklist-item strong { color: var(--neutral-800); font-size: 13px; line-height: 1.45; }
.checklist-item small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 12px; line-height: 1.4; }
.checklist-item.done:not(.is-summary) strong { color: var(--muted-soft); text-decoration: line-through; }
.wbs-item-actions { display: flex; align-items: center; gap: var(--space-0-5); }
.wbs-item-actions button { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted-soft); line-height: 1; }
.wbs-item-actions button:hover { background: var(--neutral-100); color: var(--neutral-800); }
.wbs-item-actions button:last-child:hover { background: var(--danger-soft); color: var(--rose-600); }
.wbs-item-actions button svg, .task-update-item > button svg { width: 16px; height: 16px; }
.wbs-attachment-toggle { position: relative; }
.wbs-attachment-toggle > span { position: absolute; top: -2px; right: -1px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 3px; border-radius: var(--radius-pill); background: var(--cyan-dark); color: var(--on-brand); font-size: 11px; font-weight: 700; line-height: 1; }
.wbs-attachment-panel { grid-column: 1 / -1; min-width: 0; margin-top: var(--space-1); padding: var(--space-2-5) var(--space-3); border-top: 1px solid var(--rk-line); background: var(--neutral-50); }
.wbs-evidence-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rk-line); }
.wbs-evidence-heading > span { min-width: 0; }
.wbs-evidence-heading strong, .wbs-evidence-heading small { display: block; }
.wbs-evidence-heading strong { color: var(--neutral-800); font-size: 13px; }
.wbs-evidence-heading small { margin-top: 2px; color: var(--muted-soft); font-size: 11px; }
.wbs-evidence-heading > button, .wbs-evidence-actions > button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-2-5); border: 1px solid var(--rk-control); border-radius: var(--radius-xs); background: var(--surface); color: var(--cyan-dark); font-size: 12px; font-weight: 700; }
.wbs-evidence-heading > button:hover, .wbs-evidence-actions > button:first-child:hover { border-color: var(--cyan); background: var(--teal-50); }
.wbs-evidence-heading > button svg, .wbs-evidence-actions > button svg { width: 14px; height: 14px; }
.wbs-evidence-heading > em { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--neutral-200); color: var(--muted-soft); font-size: 11px; font-style: normal; font-weight: 600; }
.wbs-attachment-list { display: grid; }
.wbs-attachment-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; gap: var(--space-1); border-bottom: 1px solid var(--rk-line); }
.wbs-attachment-row:last-child { border-bottom: 0; }
.wbs-attachment-row > a { min-width: 0; min-height: 42px; display: grid; grid-template-columns: 18px minmax(0,1fr) 16px; align-items: center; gap: var(--space-2); color: var(--ink-soft); }
.wbs-attachment-row > a:hover .wbs-attachment-name { color: var(--cyan-dark); }
.wbs-attachment-row > a > svg { width: 15px; height: 15px; color: var(--muted); }
.wbs-attachment-row > a > span { min-width: 0; }
.wbs-attachment-name { display: block; overflow: hidden; color: var(--neutral-800); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wbs-attachment-row small { margin-top: 1px; font-size: 11px; }
.wbs-attachment-row > button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted-soft); }
.wbs-attachment-row > button:hover { background: var(--danger-soft); color: var(--rose-600); }
.wbs-attachment-row > button svg { width: 15px; height: 15px; }
.wbs-attachment-empty { margin: 0 0 var(--space-2) !important; color: var(--muted) !important; font-size: 12px !important; }
.wbs-attachment-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2-5); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.wbs-attachment-form[hidden] { display: none; }
.wbs-attachment-form label { min-width: 0; display: grid; gap: var(--space-1); }
.wbs-attachment-form label > span { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.wbs-attachment-form input[type="file"] { min-width: 0; width: 100%; min-height: 38px; padding: var(--space-1); background: var(--surface); font-size: 12px; }
.wbs-evidence-inputs { display: grid; gap: var(--space-2); }
.wbs-evidence-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: end; gap: var(--space-1); }
.wbs-evidence-input-row > button { width: 32px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted-soft); }
.wbs-evidence-input-row > button:hover { background: var(--danger-soft); color: var(--rose-600); }
.wbs-evidence-input-row > button svg { width: 15px; height: 15px; }
.wbs-evidence-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.wbs-evidence-actions > button[type="submit"] { border-color: var(--navy); background: var(--navy); color: var(--on-brand); }
.wbs-evidence-actions > button:disabled { cursor: wait; opacity: .6; }
.wbs-attachment-form > small { margin: 0; color: var(--muted); font-size: 11px; }
.checklist-empty, .checklist-loading { padding: var(--space-3-5); border: 1px dashed var(--neutral-400); border-radius: var(--radius-sm); color: var(--muted-soft); font-size: 13px; text-align: center; }
.checklist-empty.error { border-color: var(--rose-300); background: var(--danger-soft); color: var(--rose-700); }
.checklist-list > .checklist-empty, .checklist-list > .checklist-loading { margin: var(--space-2); }
.checklist-form { display: grid; grid-template-columns: minmax(140px, .75fr) minmax(200px, 1.25fr) auto; align-items: end; gap: var(--space-2); margin-top: var(--space-3); }
.checklist-form label { min-width: 0; display: grid; gap: var(--space-1); }
.checklist-form label > span { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.checklist-form input, .checklist-form select { min-width: 0; width: 100%; height: 38px; background: var(--surface); font-size: 13px; }
.checklist-form button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: var(--navy); color: var(--on-brand); font-size: 13px; font-weight: 600; }
.checklist-form button:disabled { cursor: wait; opacity: .6; }
.checklist-form svg { width: 13px; }
@media (max-width: 700px) {
    .checklist-form { grid-template-columns: 1fr; }
    .checklist-form button { width: 100%; min-height: 44px; }
    .checklist-form input, .checklist-form select { height: 44px; }
    .checklist-item { --wbs-indent: calc(var(--wbs-depth, 0) * 14px); grid-template-columns: 38px minmax(0, 1fr) auto; padding-right: var(--space-1-5); }
    .wbs-item-actions button { width: 40px; height: 40px; }
    .wbs-attachment-panel { margin-right: calc(var(--space-1-5) * -1); padding: var(--space-2-5); }
    .wbs-evidence-heading { align-items: flex-start; }
    .wbs-evidence-heading > button span { display: none; }
    .wbs-evidence-heading > button { width: 40px; min-height: 40px; padding: 0; }
    .wbs-evidence-input-row { grid-template-columns: minmax(0, 1fr) 44px; }
    .wbs-evidence-input-row > button { width: 44px; height: 44px; }
    .wbs-evidence-actions { display: grid; grid-template-columns: 1fr; }
    .wbs-evidence-actions > button { min-height: 44px; }
    .wbs-attachment-row { grid-template-columns: minmax(0,1fr) 44px; }
    .wbs-attachment-row > button { width: 44px; height: 44px; }
}
.task-updates-section { padding: var(--space-4); border: 1px solid var(--neutral-300); border-radius: var(--radius-lg); background: var(--neutral-50); }
.task-updates-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3-5); }
.task-updates-heading h3 { margin: 0; color: var(--neutral-800); font-size: 14px; }
.task-updates-heading p { margin: var(--space-1) 0 0 !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.45 !important; }
.task-updates-heading > strong { min-width: 34px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--teal-50); color: var(--cyan-dark); font-size: 13px; text-align: center; }
.task-updates-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.task-update-item { display: grid; grid-template-columns: 34px minmax(0,1fr) 28px; align-items: flex-start; gap: var(--space-2); padding: var(--space-2-5); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-md); background: var(--surface); }
.task-update-item > .avatar { width: 34px; height: 34px; font-size: 13px; }
.task-update-item > div { min-width: 0; }
.task-update-item header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2-5); }
.task-update-item header strong { overflow: hidden; color: var(--neutral-800); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.task-update-item time { flex: none; color: var(--muted-soft); font-size: 13px; }
.task-update-item p { margin: var(--space-1) 0 0 !important; color: var(--ink-soft) !important; font-size: 13px !important; line-height: 1.55 !important; overflow-wrap: anywhere; white-space: pre-wrap; }
.task-update-item > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted-soft); font-size: 20px; line-height: 1; }
.task-update-item > button:hover { background: var(--danger-soft); color: var(--rose-600); }
.task-updates-empty { padding: var(--space-3-5); border: 1px dashed var(--neutral-400); border-radius: var(--radius-sm); color: var(--muted-soft); font-size: 13px; text-align: center; }
.task-updates-empty.error { border-color: var(--rose-300); background: var(--danger-soft); color: var(--rose-700); }
.task-update-form { display: grid; gap: var(--space-2); margin-top: var(--space-2-5); }
.task-update-form textarea { min-height: 76px; background: var(--surface); font-size: 13px; }
.task-update-form > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.task-update-form small { color: var(--muted-soft); font-size: 13px; }
.task-update-form button { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.task-update-form button:disabled { cursor: wait; opacity: .6; }
.attachment-heading button { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.attachment-heading button svg { width: 14px; }
.attachment-list { display: grid; gap: var(--space-2); margin-top: var(--space-2-5); }
.attachment-item { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.attachment-item:hover { border-color: var(--info-border); background: var(--info-soft); }
.attachment-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: var(--radius-xs); background: var(--neutral-100); color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.attachment-item > span:nth-child(2) { min-width: 0; flex: 1; }
.attachment-item strong, .attachment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item strong { color: var(--neutral-800); font-size: 13px; }
.attachment-item small { margin-top: var(--space-0-5); color: var(--muted); font-size: 13px; }
.attachment-item svg { width: 15px; color: var(--muted-soft); }
.empty-attachments { padding: var(--space-4); border: 1px dashed var(--neutral-400); border-radius: var(--radius-sm); color: var(--muted-soft); font-size: 13px; text-align: center; }
.attachment-form { display: grid; gap: var(--space-2-5); margin-top: var(--space-2-5); padding: var(--space-3); border-radius: var(--radius-md); background: var(--neutral-75); }
.attachment-form input { background: var(--surface); font-size: 13px; }
.reminder-detail { display: flex; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-3-5); border-radius: var(--radius-md); background: var(--info-soft); }
.reminder-detail > span { display: grid; place-items: center; flex: none; color: var(--cyan-dark); }
.reminder-detail svg { width: 16px; }
.reminder-detail strong { color: var(--neutral-900); font-size: 13px; }
.reminder-detail p { margin: var(--space-0-5) 0 0 !important; color: var(--neutral-600) !important; font-size: 13px !important; line-height: 1.5 !important; }
.drawer-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--line-soft); }
.drawer-actions > span { margin-right: auto; color: var(--rk-muted); font-size: 13px; font-weight: 600; }
.drawer-actions > .icon-action { flex: none; }
.danger-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); border: 1px solid var(--rose-300); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--rose-600); font-size: 14px; font-weight: 600; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.danger-button:hover { border-color: var(--rose-300); background: var(--danger-soft); }
.danger-button:disabled { cursor: wait; opacity: .65; }
.toast { position: fixed; right: 22px; top: 96px; z-index: var(--z-toast); max-width: min(380px,calc(100% - 40px)); padding: var(--space-3) var(--space-3-5); border-radius: var(--radius-sm); background: var(--navy); color: var(--on-brand); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-toast); animation: toast-in .2s ease-out; }
.toast.error { background: var(--rose-600); }

.install-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); background: var(--navy-1000); }

.install-card { position: relative; width: min(520px,100%); padding: var(--space-8); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-3xl); background: var(--surface); box-shadow: var(--shadow-modal); }
.install-brand { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-5); border-radius: var(--radius-lg); background: transparent; color: var(--on-brand); font-weight: 600; }
.install-brand img { width: 40px; height: 40px; display: block; }
.install-card h1 { margin: 0; font-size: 32px; line-height: 1.2; letter-spacing: -.03em; }
.install-lead { margin: var(--space-2-5) 0 var(--space-5); color: var(--neutral-700); font-size: 16px; line-height: 1.55; }
.install-card dl { margin: 0 0 var(--space-5); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.install-card dl div { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-2-5) var(--space-3); border-top: 1px solid var(--border); }
.install-card dl div:first-child { border-top: 0; }
.install-card dt { color: var(--muted); font-size: 13px; }
.install-card dd { margin: 0; color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.install-message { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); font-size: 13px; }
.install-message.success { background: var(--success-soft); color: var(--green-700); }
.install-message.error { background: var(--danger-soft); color: var(--rose-700); }
.install-action { width: 100%; }
.install-note { margin: var(--space-4) 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.install-note code { color: var(--neutral-800); font-weight: 600; }
.install-check { width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "box label" ". detail"; align-items: start; gap: var(--space-1) var(--space-2-5); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-alt); text-align: left; }
.install-check input { grid-area: box; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--brand-blue); }
.install-check span { grid-area: label; color: var(--neutral-800); font-size: 14px; font-weight: 600; }
.install-check small { grid-area: detail; color: var(--muted); font-size: 13px; line-height: 1.5; }

.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--navy-1000); }

.auth-card { position: relative; width: min(440px,100%); padding: var(--space-8); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-3xl); background: var(--surface); box-shadow: var(--shadow-modal); }
.wide-auth-card { width: min(520px,100%); }
.auth-card h1 { margin: 0; color: var(--ink); font-size: 32px; line-height: 1.2; letter-spacing: -.03em; }
.auth-form { display: grid; gap: var(--space-3-5); }
.auth-form label { display: grid; gap: var(--space-1-5); }
.auth-form label > span { color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.auth-form label > small { margin-top: -2px; color: var(--muted); font-size: 13px; }
.auth-form .primary-button { margin-top: var(--space-0-5); }

.login-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(420px,1.04fr) minmax(420px,.96fr); padding: 16px; gap: 16px; background: var(--surface); }
.login-field { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px,3.8vw,48px) clamp(32px,4.2vw,56px); border-radius: 24px; background: radial-gradient(circle at 88% 92%, rgba(20,184,177,.22) 0%, transparent 55%), radial-gradient(circle at 12% 8%, rgba(11,91,143,.28) 0%, transparent 48%), var(--navy-1000); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(6,26,52,.14); color: var(--on-brand); overflow: hidden; }
.login-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); animation: fade-up var(--dur-med) var(--ease-out) both; }
.login-brand-id { display: inline-flex; align-items: center; gap: 12px; }
.login-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--on-brand-soft); font-size: 12px; font-weight: 500; }
.login-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 8px var(--green-500); }

.login-brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--on-brand); }
.login-brand-mark img { width: 24px; height: 24px; display: block; }
.login-brand strong { color: var(--on-brand); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }



.login-claim { width: min(460px,100%); margin: auto 0; padding: clamp(20px,3vh,36px) 0; }
.login-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--brand-aqua); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; animation: fade-up var(--dur-med) var(--ease-out) both; }
.login-claim h1 { margin: 0; font-size: clamp(30px,3.3vw,42px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--on-brand); text-wrap: balance; animation: fade-up var(--dur-med) var(--ease-out) 30ms both; }
.login-claim-lead { width: min(42ch,100%); margin: 12px 0 0; color: var(--on-brand-soft); font-size: 15px; line-height: 1.65; text-wrap: pretty; animation: fade-up var(--dur-med) var(--ease-out) 60ms both; }




.login-capabilities { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: var(--on-brand-soft); font-size: 12.5px; font-weight: 500; animation: fade-up var(--dur-med) var(--ease-out) 120ms both; }
.login-capabilities span[aria-hidden="true"] { opacity: .5; margin: 0 var(--space-1); }

.login-card { display: flex; align-items: center; justify-content: center; padding: clamp(28px,4vw,56px); border-radius: 24px; background: var(--surface); }
.login-card-inner { width: 100%; max-width: 400px; margin-inline: auto; }
.login-card-inner h2 { margin: 0; color: var(--ink); font-size: clamp(24px,2.1vw,28px); font-weight: 700; line-height: 1.2; letter-spacing: -.028em; animation: fade-up var(--dur-med) var(--ease-out) 80ms both; }
.login-lead { max-width: 44ch; margin: 8px 0 28px; color: var(--neutral-700); font-size: 14.5px; line-height: 1.55; animation: fade-up var(--dur-med) var(--ease-out) 140ms both; }
.login-form { gap: var(--space-4); animation: fade-up var(--dur-med) var(--ease-out) 200ms both; }
.login-form label > span { color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.login-input { position: relative; }
.login-input > svg { position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; color: var(--muted-soft); transform: translateY(-50%); pointer-events: none; transition: color var(--dur-short) var(--ease-out); }
.login-input:focus-within > svg { color: var(--teal-600); }
.login-input input { width: 100%; height: 46px; padding: 0 var(--space-4) 0 42px; border: 1px solid var(--border-soft); border-radius: 10px; outline: none; background: var(--surface-alt); color: var(--neutral-900); font-size: 14.5px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.login-input input:hover { border-color: var(--border-strong); }
.login-input input::placeholder { color: var(--muted-soft); }
.login-input input:focus { background: var(--surface); border-color: var(--brand-turquoise); box-shadow: 0 0 0 3.5px rgba(20,184,177,.14); }
.password-input input { padding-right: var(--space-20); }
.password-input button { position: absolute; top: 50%; right: 7px; min-width: 56px; height: 32px; padding: 0 10px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--surface); color: var(--neutral-700); font-size: 12px; font-weight: 600; transform: translateY(-50%); cursor: pointer; transition: all var(--dur-short) var(--ease-out); }
.password-input button:hover { background: var(--info-soft); color: var(--cyan-dark); }
.login-submit { width: 100%; min-height: 46px; justify-content: center; gap: 8px; margin-top: var(--space-2) !important; padding: 0 var(--space-6); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -4px rgba(7,31,61,.25); transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.login-submit:hover { transform: translateY(-1px); }






.login-submit svg { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
.login-submit:hover svg { transform: translateX(3px); }
.login-help { max-width: 42ch; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; animation: fade-up var(--dur-med) var(--ease-out) 260ms both; }

@media (max-width: 900px) {
    .login-page { display: flex; flex-direction: column; padding: 12px; gap: 12px; }
    .login-field { min-height: auto; padding: 22px 20px; border-radius: 20px; }


    .login-claim { margin: 16px 0 0; padding: 0; }
    .login-claim h1 { font-size: clamp(24px,6vw,30px); }
    .login-claim-lead { font-size: 14px; margin-top: 8px; }

    .login-capabilities { display: none; }
    .login-card { flex: 1; min-height: auto; align-items: flex-start; border-radius: 20px; padding: 24px 16px 32px; }
    .login-card-inner { max-width: none; }

}

.team-page { min-height: 100vh; background: var(--canvas); }
.team-shell { width: min(1180px,calc(100% - 32px)); margin: 0 auto; padding: var(--space-8) 0 var(--space-12); }
.team-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.team-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.team-heading > div > p:last-child { margin: var(--space-1-5) 0 0; color: var(--muted); }
.team-heading > span { padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-pill); background: var(--teal-50); color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.team-directory { min-width: 0; }
.team-search { display: flex; align-items: end; gap: var(--space-2); margin-bottom: var(--space-2-5); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.team-search label { display: grid; flex: 1; gap: var(--space-1); }
.team-search label span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.team-search .primary-button, .team-search .secondary-button { height: 41px; }
.user-panel { padding: 0; overflow: hidden; }
.user-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3-5); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); }
.user-panel-heading h2 { margin: 0; }
.user-panel-heading p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.secure-label { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-pill); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.user-list { display: grid; }
.user-account { border-top: 1px solid var(--line-soft); }
.user-account:first-child { border-top: 0; }
.user-account.inactive { background: var(--neutral-50); }
.user-account.inactive .user-summary { opacity: .65; }
.user-summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3-5) var(--space-5) var(--space-2-5); }
.user-summary .avatar { width: 40px; height: 40px; }
.user-identity { min-width: 0; }
.user-identity > div { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); }
.user-identity strong, .user-identity small, .user-identity > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-identity strong { color: var(--neutral-900); font-size: 14px; }
.user-identity small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.user-identity > span { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.you-label { padding: var(--space-0-5) var(--space-1-5); border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.account-status { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.account-status.active { background: var(--success-soft); color: var(--success-deep); }
.account-security { display: grid; gap: var(--space-2-5); align-content: start; padding-left: var(--space-3); border-left: 1px solid var(--rk-line-strong); }
.empty-team { padding: var(--space-11) var(--space-5); color: var(--muted-soft); text-align: center; }
.empty-team strong, .empty-team span { display: block; }
.empty-team strong { color: var(--ink-soft); font-size: 14px; }
.empty-team span { margin-top: var(--space-1); font-size: 13px; }

.report-heading { align-items: center; }
.report-actions { display: flex; gap: var(--space-2); }
.report-context { display: flex; align-items: center; gap: 0; margin: -9px 0 var(--space-3-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt); }
.report-context > div { min-width: 0; padding: 0 var(--space-4); border-left: 1px solid var(--rk-line-strong); }
.report-context > div:first-child { padding-left: 0; border-left: 0; }
.report-context span, .report-context strong { display: block; }
.report-context span { color: var(--muted-soft); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.report-context strong { margin-top: var(--space-0-5); color: var(--neutral-700); font-size: 13px; }
.report-filters { display: grid; grid-template-columns: minmax(210px,1.35fr) repeat(3,minmax(130px,.7fr)); align-items: end; gap: var(--space-2-5); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.report-filters label { display: grid; gap: var(--space-1); }
.report-filters label span { color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.report-filters .primary-button, .report-filters .secondary-button { height: 41px; }
.report-filter-actions { display: flex; align-items: center; gap: var(--space-2); }
.report-filter-actions > * { flex: 1; }
.report-metrics { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--space-2-5); }
.report-metrics article { padding: var(--space-4); border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); }
.report-metrics small, .report-metrics strong, .report-metrics span { display: block; }
.report-metrics small { color: var(--muted); font-size: 13px; font-weight: 600; }
.report-metrics strong { margin-top: var(--space-2); color: var(--ink); font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.report-metrics span { margin-top: var(--space-1-5); color: var(--muted-soft); font-size: 13px; }
.report-metrics article.complete { background: var(--success-soft); box-shadow: var(--rk-card-shadow), inset 0 0 0 1px var(--green-200); }
.report-metrics article.complete strong { color: var(--green); }
.report-metrics article.warning { background: var(--danger-soft); box-shadow: var(--rk-card-shadow), inset 0 0 0 1px var(--rose-200); }
.report-metrics article.warning strong { color: var(--rose-600); }
.report-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-title h2 { margin-bottom: 0; }
.panel-title p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.status-donut { width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: var(--radius-circle); background: conic-gradient(var(--violet) 0 var(--planned), var(--cyan) var(--planned) calc(var(--planned) + var(--running)), var(--green) calc(var(--planned) + var(--running)) 100%); /* taste-skill-ignore: donut status fungsional */ }
.status-donut::before { content: ''; width: 34px; height: 34px; grid-area: 1/1; border-radius: var(--radius-circle); background: var(--surface); }
.status-donut span { z-index: var(--z-base); grid-area: 1/1; color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.status-bar + .status-bar { margin-top: var(--space-4); }
.status-bar > div { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--neutral-700); font-size: 13px; }
.status-bar > div strong { display: flex; align-items: baseline; gap: var(--space-1); }
.status-bar > div strong small { color: var(--muted-soft); font-size: 13px; }
.status-bar > i { display: block; height: 8px; margin-top: var(--space-1-5); overflow: hidden; border-radius: var(--radius-pill); background: var(--neutral-150); }
.status-bar > i > b { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--cyan); }
.status-bar > i > b.terencana { background: var(--violet); }
.status-bar > i > b.selesai { background: var(--green); }
.insight-badge { padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success-deep); font-size: 13px; font-weight: 600; }
.report-insights ol { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; counter-reset: insight; list-style: none; }
.report-insights li { position: relative; min-height: 30px; padding: var(--space-1-5) 0 var(--space-1-5) var(--space-9); color: var(--neutral-700); font-size: 13px; line-height: 1.5; }
.report-insights li::before { content: counter(insight); position: absolute; left: 0; top: 4px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-weight: 600; counter-increment: insight; }
.report-meta-line { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.report-meta-line span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-2xs); background: var(--neutral-60); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.table-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.table-heading h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.02em; }
.table-heading p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.table-heading span { color: var(--muted); font-size: 13px; font-weight: 600; }
.timeline-panel, .owner-performance-panel { margin-top: var(--space-3); }
.timeline-bars { height: 210px; display: flex; align-items: stretch; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--rk-line-strong); }
.timeline-column { min-width: 58px; display: grid; grid-template-rows: 17px 1fr auto auto; flex: 1; text-align: center; }
.timeline-count { color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.timeline-track { display: flex; align-items: end; justify-content: center; padding: var(--space-0-5) var(--space-2) 0; }
.timeline-track > i { position: relative; width: min(38px,100%); min-height: 5px; overflow: hidden; border-radius: var(--radius-2xs) var(--radius-2xs) 0 0; background: var(--info); }
.timeline-track > i > b { position: absolute; right: 0; bottom: 0; left: 0; background: var(--green); }
.timeline-column > strong { margin-top: var(--space-2); color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.timeline-column > small { margin: var(--space-0-5) 0 var(--space-2); color: var(--muted-soft); font-size: 13px; }
.owner-performance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3-5); }
.owner-performance-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: var(--space-2-5); padding: var(--space-3); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-sm); }
.owner-performance-card > .avatar { width: 38px; height: 38px; }
.owner-performance-card > div:nth-child(2) { min-width: 0; }
.owner-performance-card > div:nth-child(2) > strong, .owner-performance-card > div:nth-child(2) > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-performance-card > div:nth-child(2) > strong { color: var(--neutral-800); font-size: 13px; }
.owner-performance-card > div:nth-child(2) > small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.owner-performance-card > div:nth-child(2) > i { display: block; height: 5px; margin-top: var(--space-1-5); overflow: hidden; border-radius: var(--radius-pill); background: var(--track); }
.owner-performance-card > div:nth-child(2) > i b { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.owner-score { min-width: 45px; text-align: right; }
.owner-score strong, .owner-score small { display: block; }
.owner-score strong { color: var(--cyan-dark); font-size: 14px; }
.owner-score small { color: var(--muted-soft); font-size: 13px; }
.owner-flags { grid-column: 2/-1; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.owner-flags span { padding: var(--space-0-5) var(--space-1-5); border-radius: var(--radius-2xs); background: var(--neutral-60); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.owner-flags span.overdue { background: var(--danger-soft); color: var(--rose-600); }
.table-progress { min-width: 82px; display: flex; align-items: center; gap: var(--space-1-5); }
.table-progress i { width: 48px; height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: var(--track); }
.table-progress i b { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.table-progress strong { font-size: 13px; }
.priority-text { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.priority-text.high { color: var(--amber-700); }
.overdue-text { color: var(--rose) !important; font-weight: 600; }

.backup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3-5); align-items: start; }
.backup-card { position: relative; overflow: hidden; }
.backup-card h2 { margin: 0 0 var(--space-3); font-size: 20px; }
.backup-card > p { min-height: 68px; margin: var(--space-2) 0 var(--space-4); color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.backup-card > small { display: block; margin-top: var(--space-3); color: var(--muted-soft); font-size: 13px; line-height: 1.55; }

.restore-message { display: block; margin-top: var(--space-3); padding: var(--space-2-5); border-radius: var(--radius-xs); font-size: 13px; }
.restore-message.success { background: var(--success-soft); color: var(--green-700); }
.restore-message.error { background: var(--danger-soft); color: var(--rose-700); }

.work-scope-switch { width: max-content; display: flex; flex: none; gap: 2px; margin-right: 4px; padding: 3px; border-radius: var(--rk-radius-control); background: var(--rk-surface-2); }
.work-scope-switch a { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--rk-radius-chip); color: var(--rk-muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.work-scope-switch a:hover { color: var(--rk-text); }
.work-scope-switch a.active { background: var(--rk-surface); color: var(--rk-text); box-shadow: 0 1px 1px rgba(15,36,56,.06); }
.worklist-tabs { width: max-content; max-width: 100%; display: flex; gap: 2px; margin-bottom: var(--space-3); padding: 3px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-control); background: var(--rk-surface-2); overflow-x: auto; scrollbar-width: none; }
.worklist-tabs::-webkit-scrollbar { display: none; }
.worklist-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-xs); color: var(--rk-muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.worklist-tabs a:hover { color: var(--rk-text); }
.worklist-tabs a.active { background: var(--rk-surface); color: var(--rk-text); }
.worklist-tabs a strong { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--rk-neutral-bg); color: var(--rk-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.worklist-tabs a.active strong { background: var(--rk-teal-soft); color: var(--rk-teal); }
.worklist-filters { position: relative; display: grid; grid-template-columns: minmax(280px,1fr) 132px minmax(180px,220px) minmax(150px,180px) auto auto; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border: 0; border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); }
.worklist-filters label { display: grid; gap: var(--space-1); }
.worklist-filters label > span { color: var(--rk-muted); font-size: 13px; font-weight: 600; }
.worklist-filters input, .worklist-filters select, .worklist-filters .primary-button, .worklist-filters .secondary-button { height: 42px; }
.worklist-more-filter { position: relative; align-self: end; }
.worklist-more-filter summary { height: 34px; display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); padding: 0 var(--space-3); border: 1px solid var(--rk-border); border-radius: var(--rk-radius-control); background: var(--rk-surface-2); color: var(--rk-text); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.worklist-more-filter summary::-webkit-details-marker { display: none; }
.worklist-more-filter summary::after { content: '⌄'; margin-left: var(--space-0-5); color: var(--rk-muted); font-size: 13px; transition: transform .16s ease; }
.worklist-more-filter[open] summary { border-color: var(--rk-teal); background: var(--rk-teal-soft); color: var(--rk-teal); }
.worklist-more-filter[open] summary::after { transform: rotate(180deg); }
.worklist-more-filter summary b { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--rk-teal); color: var(--on-brand); font-size: 13px; }
.worklist-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-popover-raised); width: min(460px,calc(100vw - 64px)); display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: var(--space-2-5); padding: var(--space-3-5); border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-shadow-overlay); }
.worklist-auto-state { height: 42px; display: flex; align-items: center; gap: 7px; align-self: end; padding: 0 var(--space-1); color: var(--rk-faint); font-size: var(--rk-fs-meta); font-weight: 500; white-space: nowrap; }
.worklist-auto-state i { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--rk-teal); }
.worklist-auto-state.error { color: var(--rose-600); }
.worklist-auto-state.error i { display: none; }
.worklist-filters.is-loading .worklist-auto-state i { background: var(--cyan); animation: pulse 1s infinite; }
.worklist-filters.is-loading ~ .worklist-panel { opacity: .58; pointer-events: none; }
.worklist-panel { padding: 0; overflow: hidden; transition: opacity .18s ease; }
.worklist-panel .table-heading { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); }
.worklist-panel .table-heading h2 { margin: 0; }
.worklist-panel .table-heading p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.worklist-table-actions { display: flex; align-items: center; gap: var(--space-1-5); }
.worklist-table-actions > button, .worklist-table-actions > .secondary-button { min-height: 34px; padding: 0 var(--space-2-5); font-size: 13px; }
.worklist-table-actions > a:not(.secondary-button) { padding: var(--space-1-5) var(--space-0-5); color: var(--cyan-dark); font-size: 13px; font-weight: 600; white-space: nowrap; }
.worklist-bulk-bar { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2-5) var(--space-4); border-bottom: 1px solid var(--border-soft); background: var(--danger-soft); }
.worklist-bulk-bar[hidden] { display: none; }
.worklist-bulk-bar > strong { color: var(--teal-700); font-size: 13px; white-space: nowrap; }
.worklist-bulk-bar select { min-width: 210px; height: 37px; margin-left: auto; padding: 0 var(--space-8) 0 var(--space-2-5); font-size: 13px; }
.worklist-bulk-bar > button { min-height: 37px; padding: 0 var(--space-3); font-size: 13px; }
.worklist-select-all { display: flex; align-items: center; gap: var(--space-1-5); color: var(--neutral-800); font-size: 13px; font-weight: 600; cursor: pointer; }
.worklist-select-all input, .worklist-select input { width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--cyan-dark); box-shadow: none; }
.worklist-cards { display: grid; }
.worklist-row { display: grid; grid-template-columns: 0 26px 40px minmax(220px,1.6fr) minmax(120px,.6fr) minmax(90px,.4fr) auto; align-items: center; gap: var(--space-3); min-height: 64px; padding: 10px var(--space-5); border-top: 1px solid var(--line-soft); outline: 0; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.worklist-cards > .worklist-row:first-child { border-top: 0; }
.worklist-row:hover { background: var(--surface-tint); }
.worklist-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(20,184,177,.75); }
.worklist-select { width: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.worklist-num { color: var(--rk-muted); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.worklist-panel.is-selecting .worklist-row { grid-template-columns: 26px 26px 40px minmax(220px,1.6fr) minmax(120px,.6fr) minmax(90px,.4fr) auto; }
.worklist-panel.is-selecting .worklist-select { width: auto; overflow: visible; opacity: 1; pointer-events: auto; cursor: pointer; }
.worklist-row.is-selected { background: var(--success-soft); }
.worklist-row > .avatar { width: 38px; height: 38px; }
.worklist-main { min-width: 0; display: grid; gap: 3px; }
.worklist-main > strong { overflow: hidden; color: var(--rk-text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.worklist-main > .worklist-sub { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.worklist-main > .worklist-sub > em { flex: none; }
.worklist-main .priority, .worklist-main .status-label, .worklist-main .activity-badge { height: 20px; margin: 0; font-size: 13px; font-style: normal; }
.worklist-main > .worklist-sub > small { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--rk-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.worklist-status-dot { width: 12px; height: 20px; display: inline-grid; place-items: center; flex: none; }
.worklist-status-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--rk-pill-neutral-ink); }
.worklist-status-dot.berjalan i { background: var(--rk-pill-info-ink); }
.worklist-status-dot.selesai i { background: var(--rk-pill-ok-ink); }
.worklist-status-dot.overdue i { background: var(--rk-pill-danger-ink); }
.status-label { display: inline-flex; align-items: center; gap: 5px; color: var(--rk-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-label i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--rk-muted); }
.status-label.berjalan i { background: var(--rk-teal); }
.status-label.selesai i { background: var(--rk-ok); }
.status-label.overdue { color: var(--rk-danger); }
.status-label.overdue i { background: var(--rk-danger); }
.worklist-progress { display: flex; align-items: center; gap: var(--space-2); }
.worklist-progress > span { height: 4px; flex: 1; overflow: hidden; border-radius: var(--radius-pill); background: var(--rk-neutral-bg); }
.worklist-progress > span > i { display: block; height: 100%; border-radius: inherit; background: var(--rk-teal); }
.worklist-progress > strong { width: 34px; color: var(--rk-text); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.worklist-meta { text-align: right; }
.worklist-meta strong, .worklist-meta small { display: block; }
.worklist-meta strong { color: var(--rk-text); font-size: 13px; font-weight: 600; }
.worklist-meta small { margin-top: 2px; color: var(--rk-muted); font-size: 13px; }
.worklist-meta.overdue-text strong, .worklist-meta.overdue-text small { color: var(--rk-danger); }
.worklist-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.worklist-row-actions .icon-action { width: 32px; height: 32px; }
.worklist-quick-panel { display: grid; grid-template-columns: minmax(170px,1fr) minmax(180px,220px) auto; align-items: end; gap: var(--space-3-5); padding: var(--space-3) var(--space-5) var(--space-3-5) var(--space-20); background: var(--surface-alt); }
.worklist-quick-panel[hidden] { display: none; }
.worklist-quick-panel > div:first-child strong, .worklist-quick-panel > div:first-child small { display: block; }
.worklist-quick-panel > div:first-child strong { color: var(--neutral-800); font-size: 13px; }
.worklist-quick-panel > div:first-child small { max-width: 260px; margin-top: var(--space-0-5); overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.worklist-quick-status { display: grid; gap: var(--space-1); color: var(--neutral-700); font-size: 12px; font-weight: 600; }
.worklist-quick-status select { width: 100%; height: 36px; padding: 0 var(--space-8) 0 var(--space-2-5); border-color: var(--neutral-300); border-radius: var(--radius-xs); background-color: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.worklist-quick-status select:focus-visible { border-color: var(--brand-teal-deep); outline: none; box-shadow: var(--focus-ring); }
.worklist-quick-actions { display: flex; align-items: center; gap: var(--space-1); }
.worklist-quick-actions button { min-height: 36px; padding: 0 var(--space-2-5); font-size: 13px; }
.worklist-quick-actions .worklist-quick-cancel { border: 0; background: transparent; color: var(--rk-muted); font-weight: 600; }
.worklist-quick-actions .worklist-quick-cancel:hover { background: var(--rk-surface-2); color: var(--rk-text); }
.worklist-list-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line-soft); }
.worklist-status-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--rk-muted); font-size: 12px; }
.worklist-status-legend > strong { color: var(--rk-text); font-size: 12px; font-weight: 600; }
.worklist-status-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.worklist-status-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--rk-pill-neutral-ink); }
.worklist-status-legend i.berjalan { background: var(--rk-pill-info-ink); }
.worklist-status-legend i.selesai { background: var(--rk-pill-ok-ink); }
.worklist-status-legend i.overdue { background: var(--rk-pill-danger-ink); }
.pagination { display: flex; justify-content: center; gap: var(--space-1-5); padding: var(--space-4); border-top: 1px solid var(--line-soft); }
.worklist-list-footer .pagination { flex: none; padding: 0; border-top: 0; }
.pagination a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.pagination a.active { border-color: var(--navy); background: var(--navy); color: var(--on-brand); }

.reminder-heading { align-items: center; }
.reminder-shell .rk-stat-strip { margin-bottom: var(--space-3); }
.reminder-search { display: flex; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3-5); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.reminder-search label { display: grid; flex: 1; gap: var(--space-1); }
.reminder-search label + label { max-width: 230px; }
.reminder-search label span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.reminder-search .primary-button, .reminder-search .secondary-button { height: 41px; }
.reminder-group { position: relative; margin-top: var(--space-3); overflow: visible; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.reminder-group > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3-5); padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.reminder-group > header h2 { margin: 0; font-size: 16px; }
.reminder-group > header p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.reminder-group > header > span { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 var(--space-1-5); border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.reminder-group.action > header > span { background: var(--danger-soft); color: var(--rose-600); }
.reminder-group.acknowledged > header > span { background: var(--success-soft); color: var(--green-600); }
.reminder-group > summary { cursor: pointer; list-style: none; }
.reminder-group > summary::-webkit-details-marker { display: none; }
.reminder-group-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rk-rule); }
.reminder-group-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 16px; }
.reminder-group-head h2::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: var(--rk-muted); transition: transform .16s ease; }
.reminder-group[open] .reminder-group-head h2::before { transform: rotate(90deg); }
.reminder-group-note { flex: 1 1 auto; min-width: 0; color: var(--rk-muted); font-size: 13px; }
.reminder-group-count { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 var(--space-1-5); border-radius: var(--radius-pill); background: var(--success-soft); color: var(--green-600); font-size: 13px; font-weight: 600; }
.reminder-list { display: grid; }
.empty-reminder { padding: var(--space-6); color: var(--muted-soft); font-size: 13px; text-align: center; }
.reminder-row { display: grid; grid-template-columns: 58px minmax(260px,1fr) minmax(125px,.45fr) auto; align-items: center; gap: var(--space-3-5); padding: var(--space-3-5) var(--space-4); border-top: 1px solid var(--line-soft); transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.reminder-row:first-child { border-top: 0; }
.reminder-date { width: 52px; padding: var(--space-1-5) var(--space-0-5); border-radius: var(--radius-sm); background: var(--info-soft); color: var(--cyan-dark); text-align: center; }
.reminder-date strong, .reminder-date small { display: block; }
.reminder-date strong { font-size: 20px; line-height: 1.05; }
.reminder-date small { margin-top: var(--space-0-5); font-size: 13px; font-weight: 600; }
.reminder-row.is-overdue .reminder-date { background: var(--danger-soft); color: var(--rose-600); }
.reminder-main { min-width: 0; }
.reminder-main > div { display: flex; gap: var(--space-1-5); }
.reminder-main .priority, .reminder-main .status-label { height: 20px; font-size: 13px; }
.reminder-main h3 { margin: var(--space-1-5) 0 0; overflow: hidden; color: var(--neutral-800); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.reminder-main p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
.reminder-timing strong, .reminder-timing small { display: block; }
.reminder-timing strong { color: var(--neutral-800); font-size: 13px; }
.reminder-timing small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.reminder-row.is-overdue .reminder-timing strong { color: var(--rose-600); }
.reminder-actions { display: flex; align-items: center; gap: var(--space-1-5); }
.reminder-actions .secondary-button { min-height: 34px; padding: 0 var(--space-2-5); font-size: 13px; }
.reminder-actions form { display: flex; gap: var(--space-1); }
.reminder-actions form button { min-height: 34px; padding: 0 var(--space-2); border: 1px solid var(--blue-200); border-radius: var(--radius-xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.reminder-actions .reviewed-button { border-color: var(--success-border); background: var(--success-soft); color: var(--green-600); }
.snooze-picker { position: relative; }
.snooze-picker summary { min-height: 34px; display: flex; align-items: center; padding: 0 var(--space-6) 0 var(--space-2); border: 1px solid var(--blue-200); border-radius: var(--radius-xs); background: var(--surface); color: var(--neutral-700); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.snooze-picker summary::-webkit-details-marker { display: none; }
.snooze-picker summary::after { position: absolute; top: 13px; right: 9px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ''; transform: rotate(45deg); }
.snooze-picker[open] summary { border-color: var(--brand-turquoise); color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(20,184,177,.12); }
.snooze-picker[open] { z-index: var(--z-popover-raised); }
.snooze-picker > div { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-popover); min-width: 108px; overflow: hidden; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-popover); }
.snooze-picker > div button { width: 100%; display: block; border: 0; text-align: left; }
.snooze-picker > div button:hover { background: var(--teal-50); color: var(--cyan-dark); }
.reminder-row.is-moving { opacity: .35; transform: translateY(-5px); }

.document-divider { position: relative; height: 17px; text-align: center; }
.document-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--neutral-200); }
.document-divider span { position: relative; padding: 0 var(--space-2); background: var(--surface); color: var(--muted-soft); font-size: 13px; }
.document-content { min-width: 0; }
.document-filters { display: grid; grid-template-columns: minmax(190px,1fr) 190px 145px auto auto; align-items: end; gap: var(--space-2); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.document-filters label { display: grid; gap: var(--space-1); }
.document-filters label span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.document-filters .primary-button, .document-filters .secondary-button { height: 41px; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: var(--space-2-5); margin-top: var(--space-2-5); }
.document-card { position: relative; overflow: hidden; border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); transition: box-shadow .15s ease; }
.document-card:hover { box-shadow: var(--rk-card-shadow-hover); }
.document-card > a { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-3-5); }
.document-type { width: 48px; height: 42px; display: grid; place-items: center; flex: none; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.document-type.file { background: var(--danger-soft); color: var(--rose-500); }
.document-card > a > div { min-width: 0; }
.document-card > a strong, .document-card > a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-card > a strong { color: var(--neutral-900); font-size: 13px; }
.document-card > a small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.document-task { padding: var(--space-2-5) var(--space-3-5); background: var(--neutral-50); }
.document-task span, .document-task a, .document-task small { display: block; }
.document-task span { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.document-task a { margin-top: var(--space-1); overflow: hidden; color: var(--neutral-800); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.document-task small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.document-card > form { position: absolute; top: 9px; right: 9px; }
.document-card > form .icon-action { width: 34px; height: 34px; opacity: 0; }
.document-card > form .icon-action::after, .program-detail-actions .icon-action::after { top: calc(100% + 7px); bottom: auto; }
.document-card:hover > form button, .document-card:focus-within > form button { opacity: 1; }
.document-content > .pagination { margin-top: var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }

/* Wave 6 — Dokumen, Tim, Ruang, Backup, Login */
.team-shell .rk-page-header { margin-bottom: var(--space-4); }
.team-shell .rk-stat-strip { margin-bottom: var(--space-3-5); }
.activity-shell .rk-stat-strip { margin-bottom: var(--space-4); }

.rk-form-drawer > header h2 { margin: 0; color: var(--rk-text); font-size: var(--rk-fs-title); font-weight: 600; letter-spacing: -.01em; }
.rk-form-drawer > header p { margin: 3px 0 0; color: var(--rk-muted); font-size: var(--rk-fs-meta); line-height: 1.5; }
.rk-form-drawer .account-security { margin-top: var(--space-5); padding: var(--space-5) 0 0; border-top: 1px solid var(--rk-border); border-left: 0; }
.rk-form-drawer .account-security h3 { margin: 0 0 var(--space-3); color: var(--rk-text); font-size: 14px; font-weight: 600; }
.rk-form-drawer .auth-form + .auth-form, .rk-form-drawer .auth-form + .account-security { margin-top: var(--space-4); }

.user-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); }
.user-side .icon-action { width: 36px; min-height: 36px; padding: 0; }

.backup-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 var(--space-4); padding: 1px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-control); background: var(--rk-border); }
.backup-counts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 9px 12px; background: var(--rk-surface); }
.backup-counts > div:last-child { grid-column: 1/-1; }
.backup-counts dt { color: var(--rk-muted); font-size: var(--rk-fs-meta); }
.backup-counts dd { margin: 0; color: var(--rk-text); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.backup-restore { align-self: stretch; }
.backup-restore .auth-form { gap: var(--space-3); }
.backup-restore .auth-form label > span { color: var(--rk-danger); }
.backup-restore .danger-button { width: 100%; }
.backup-restore .restore-message { background: var(--rk-surface); color: var(--rk-text); }


.form-grid label > small { margin-top: -2px; color: var(--muted-soft); font-size: 13px; line-height: 1.4; }
.worklist-heading-actions { display: flex; align-items: center; gap: var(--space-2); }
.mywork-heading { align-items: center; }
.mywork-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-3); padding: var(--space-5) var(--space-6); overflow: hidden; border-radius: var(--rk-radius-card); background: var(--brand-gradient); color: var(--on-brand); }
.mywork-hero > div:first-child { min-width: 0; display: flex; align-items: center; gap: var(--space-3-5); }
.mywork-hero .avatar { width: 48px; height: 48px; flex: none; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); color: var(--on-brand); }
.mywork-hero small, .mywork-hero h2, .mywork-hero p { display: block; }
.mywork-hero > div:first-child small { color: var(--brand-turquoise); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.mywork-hero h2 { margin: var(--space-1) 0 0; color: var(--on-brand); font-size: 16px; }
.mywork-hero p { margin: var(--space-1) 0 0; color: var(--on-brand-soft); font-size: 13px; }
.mywork-ring { --progress: 0deg; position: relative; width: 70px; height: 70px; display: grid; place-items: center; flex: none; border-radius: var(--radius-circle); background: conic-gradient(var(--brand-turquoise) var(--progress),rgba(255,255,255,.14) 0); text-align: center; /* taste-skill-ignore: ring progres fungsional */ }
.mywork-ring::before { content: ''; position: absolute; inset: 7px; border-radius: var(--radius-circle); background: var(--navy-950); }
.mywork-ring span, .mywork-ring small { position: relative; z-index: var(--z-base); }
.mywork-ring span { font-size: 16px; font-weight: 600; line-height: 1; }
.mywork-ring small { margin-top: -16px; color: var(--on-brand-soft); font-size: 13px; }
.mywork-overview { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2-5); margin-bottom: var(--space-3); }
.mywork-overview > a { padding: var(--space-3-5) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.mywork-overview > a:hover { border-color: var(--info-border); transform: translateY(-1px); }
.mywork-overview small, .mywork-overview strong, .mywork-overview span { display: block; }
.mywork-overview small { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.mywork-overview strong { margin-top: var(--space-1-5); color: var(--ink); font-size: 24px; line-height: 1; }
.mywork-overview span { margin-top: var(--space-1); color: var(--muted-soft); font-size: 13px; }
.mywork-overview > a.warning { border-color: var(--rose-200); background: var(--danger-soft); }
.mywork-overview > a.warning strong { color: var(--rose); }
.mywork-overview > a.complete { border-color: var(--green-200); background: var(--success-soft); }
.mywork-overview > a.complete strong { color: var(--green); }
.mywork-filters { display: grid; grid-template-columns: minmax(220px,1.3fr) repeat(3,minmax(125px,.65fr)) auto auto; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mywork-filters label { display: grid; gap: var(--space-1); }
.mywork-filters label span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.mywork-filters .primary-button, .mywork-filters .secondary-button { height: 40px; padding: 0 var(--space-3); font-size: 13px; }
.mywork-panel { padding: 0; overflow: hidden; }
.mywork-panel > .table-heading { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-soft); }
.mywork-panel > .table-heading a { color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.mywork-list { display: grid; }
.mywork-row { display: grid; grid-template-columns: 9px minmax(260px,1.3fr) minmax(150px,.7fr) minmax(115px,.48fr) auto; align-items: center; gap: var(--space-3-5); padding: var(--space-3-5) var(--space-5); border-top: 1px solid var(--line-soft); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.mywork-row:first-child { border-top: 0; }
.mywork-row:hover { background: var(--surface-tint); }
.mywork-row.overdue { background: var(--neutral-0); }
.mywork-status-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--violet); }
.mywork-status-dot.berjalan { background: var(--cyan); }
.mywork-status-dot.selesai { background: var(--green); }
.mywork-row.overdue .mywork-status-dot { background: var(--rose); box-shadow: 0 0 0 4px rgba(214,50,78,.09); }
.mywork-main { min-width: 0; }
.mywork-main > div { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-1); }
.mywork-main .status-pill { height: 20px; font-size: 13px; }
.mywork-main .priority-text { font-size: 13px; }
.mywork-main > strong, .mywork-main > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mywork-main > strong { color: var(--neutral-800); font-size: 13px; }
.mywork-main > small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.mywork-progress > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--neutral-600); font-size: 13px; }
.mywork-progress > div strong { color: var(--neutral-700); font-size: 13px; }
.mywork-progress > i { display: block; height: 6px; margin-top: var(--space-1); overflow: hidden; border-radius: var(--radius-pill); background: var(--track); }
.mywork-progress > i b { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.mywork-due strong, .mywork-due small { display: block; }
.mywork-due strong { color: var(--neutral-700); font-size: 13px; }
.mywork-due small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.mywork-row > b { color: var(--cyan-dark); font-size: 13px; white-space: nowrap; }
.mywork-empty { padding: var(--space-10) var(--space-5); color: var(--muted-soft); text-align: center; }
.mywork-empty > span { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto var(--space-2-5); border-radius: var(--radius-circle); background: var(--success-soft); color: var(--green); font-size: 20px; font-weight: 600; }
.mywork-empty strong, .mywork-empty p { display: block; }
.mywork-empty strong { color: var(--neutral-700); font-size: 14px; }
.mywork-empty p { max-width: 420px; margin: var(--space-1) auto var(--space-3-5); font-size: 13px; line-height: 1.55; }
.mywork-empty .primary-button { min-height: 38px; font-size: 13px; }
.calendar-heading { align-items: center; }
.calendar-shell .rk-stat-strip { margin-bottom: var(--space-3); }
.calendar-toolbar { flex-wrap: wrap; }
.calendar-integration-note { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.calendar-integration-note b { color: var(--cyan-dark); }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--space-3); }
.calendar-toolbar { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2-5); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.month-navigation { display: flex; align-items: center; gap: var(--space-2); }
.month-navigation > a:not(.today-button) { width: 37px; height: 37px; display: grid; place-items: center; flex: none; border: 1px solid var(--rk-line-strong); border-radius: var(--radius-xs); color: var(--neutral-700); font-size: 16px; font-weight: 600; }
.month-navigation > a:not(.today-button):hover { border-color: var(--info-border); color: var(--cyan-dark); }
.month-navigation > a:not(.today-button) svg { width: 16px; height: 16px; }
.month-navigation > div { min-width: 148px; }
.month-navigation span, .month-navigation h2 { display: block; }
.month-navigation span { color: var(--muted-soft); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.month-navigation h2 { margin: var(--space-0-5) 0 0; color: var(--neutral-800); font-size: 16px; white-space: nowrap; }
.today-button { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-xs); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-weight: 600; white-space: nowrap; }
.calendar-filters { display: flex; align-items: end; justify-content: flex-end; gap: var(--space-1-5); }
.calendar-filters label { display: grid; gap: var(--space-1); }
.calendar-filters label span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.calendar-filters select { width: 126px; height: 37px; padding: 0 var(--space-7) 0 var(--space-2); border: 1px solid var(--neutral-300); border-radius: var(--radius-xs); background-color: var(--surface); color: var(--neutral-700); font-size: 13px; }
.calendar-filters label:nth-of-type(n+3) select { width: 145px; }
.calendar-filters .primary-button, .calendar-filters .secondary-button { min-height: 37px; padding: 0 var(--space-2-5); font-size: 13px; }
.calendar-panel { overflow: hidden; border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,1fr); border-bottom: 1px solid var(--rk-line); background: var(--surface-alt); }
.calendar-weekdays strong { padding: var(--space-2-5); border-left: 1px solid var(--rk-line); color: var(--neutral-600); font-size: 13px; letter-spacing: 0; text-align: center; }
.calendar-weekdays strong:first-child { border-left: 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-day { min-width: 0; min-height: 142px; padding: var(--space-2); border-top: 1px solid var(--track); border-left: 1px solid var(--track); background: var(--surface); }
.calendar-day:nth-child(-n+7) { border-top: 0; }
.calendar-day:nth-child(7n+1) { border-left: 0; }
.calendar-day.outside { background: var(--neutral-50); }
.calendar-day.outside > * { opacity: 1; }
.calendar-day.outside > header > span { color: var(--muted-soft); font-weight: 500; }
.calendar-day.outside > header small { color: var(--muted-soft); font-weight: 500; }
.calendar-day.outside .calendar-task { opacity: .7; }
.calendar-day.today { background: var(--info-soft); box-shadow: inset 0 0 0 1px var(--info-border); }
.calendar-day > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin-bottom: var(--space-1-5); }
.calendar-day > header > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-2xs); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.calendar-day.today > header > span { background: var(--cyan-dark); color: var(--on-brand); }
.calendar-day > header small { color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.calendar-day-meta { min-width: 0; display: flex; align-items: center; gap: var(--space-1); }
.calendar-day-count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-turquoise); color: var(--on-brand); font-size: 13px; font-weight: 600; }
.calendar-day.has-overdue .calendar-day-count { background: var(--rose-600); }
.calendar-day:not(.outside) { cursor: default; }
.calendar-day-tasks { display: grid; gap: var(--space-1); }
.calendar-task-wrap { position: relative; min-width: 0; }
.calendar-task { min-width: 0; display: block; padding: var(--space-1) var(--space-1-5); border: 1px solid var(--rk-line-strong); border-left: 3px solid var(--violet); border-radius: var(--radius-2xs); background: var(--neutral-50); }
.calendar-task-wrap .calendar-task { padding-right: 50px; }
.calendar-task.berjalan { border-left-color: var(--cyan); background: var(--surface-tint); }
.calendar-task.selesai { border-left-color: var(--green); background: var(--success-soft); }
.calendar-task.overdue { border-color: var(--rose-200); border-left-color: var(--rose); background: var(--danger-soft); }
.calendar-task:hover { border-color: var(--info-border); }
.calendar-task > span { min-width: 0; display: flex; align-items: center; gap: var(--space-1); }
.calendar-task > span i { width: 5px; height: 5px; flex: none; border-radius: var(--radius-circle); background: currentColor; }
.calendar-task strong { overflow: hidden; color: var(--neutral-800); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-task small { display: block; margin: var(--space-0-5) 0 0 var(--space-2); overflow: hidden; color: var(--muted-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-task-sync { position: absolute; top: 5px; right: 5px; display: flex; gap: var(--space-0-5); }
.calendar-task-sync a { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 var(--space-0-5); border: 1px solid var(--neutral-300); border-radius: var(--radius-2xs); background: var(--surface-glass-strong); color: var(--neutral-700); font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 2px 5px rgba(7,31,61,.05); }
.calendar-task-sync svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar-task-sync a:first-child { color: var(--teal-600); }
.calendar-task-sync a:hover { border-color: var(--brand-turquoise); color: var(--cyan-dark); transform: translateY(-1px); }
.calendar-more { display: block; padding: var(--space-0-5) var(--space-1); color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.calendar-more:hover { text-decoration: underline; }
.calendar-agenda { display: none; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.calendar-agenda > .table-heading { padding: var(--space-3-5); border-bottom: 1px solid var(--track); }
.agenda-list { display: grid; }
.agenda-date { display: grid; grid-template-columns: 66px minmax(0,1fr); border-top: 1px solid var(--track); }
.agenda-date:first-child { border-top: 0; }
.agenda-date > header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-right: 1px solid var(--track); background: var(--neutral-50); }
.agenda-date > header > strong { color: var(--neutral-800); font-size: 20px; }
.agenda-date > header span, .agenda-date > header small { display: block; }
.agenda-date > header span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.agenda-date > header small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; white-space: nowrap; }
.agenda-date.today > header { background: var(--teal-50); }
.agenda-date.today > header > strong { color: var(--cyan-dark); }
.agenda-date > div { min-width: 0; display: grid; }
.agenda-task { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border-top: 1px solid var(--line-soft); }
.agenda-task:first-child { border-top: 0; }
.agenda-task-main { min-width: 0; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-2) var(--space-2-5) var(--space-3); }
.agenda-task-main > i { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--violet); }
.agenda-task-main > i.berjalan { background: var(--cyan); }
.agenda-task-main > i.selesai { background: var(--green); }
.agenda-task-main strong, .agenda-task-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-task-main strong { color: var(--neutral-800); font-size: 13px; }
.agenda-task-main small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.agenda-task-main > b { color: var(--cyan-dark); font-size: 13px; }
.agenda-task-main > b svg { width: 14px; height: 14px; }
.agenda-sync { display: flex; gap: var(--space-1); padding-right: var(--space-2-5); }
.agenda-sync a { min-height: 29px; display: inline-flex; align-items: center; padding: 0 var(--space-2); border: 1px solid var(--neutral-300); border-radius: var(--radius-2xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.agenda-sync a:first-child { border-color: var(--teal-200); background: var(--info-soft); color: var(--cyan-dark); }
.agenda-sync a:hover { border-color: var(--brand-turquoise); }
.calendar-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2-5); color: var(--muted); font-size: 13px; }
.calendar-legend span { display: flex; align-items: center; gap: var(--space-1); }
.calendar-legend i { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--violet); }
.calendar-legend i.berjalan { background: var(--cyan); }
.calendar-legend i.selesai { background: var(--green); }
.calendar-legend i.overdue { background: var(--rose); }

.program-shell { width: min(1260px,calc(100% - 32px)); }
.program-heading { align-items: center; }
.program-shell .rk-stat-strip { margin-bottom: var(--space-4); }
.program-layout { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--space-3); }
.program-filters { display: grid; grid-template-columns: minmax(220px,1fr) 170px auto auto; align-items: end; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.program-filters label { display: grid; gap: var(--space-1); }
.program-filters label > span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.program-filters .primary-button, .program-filters .secondary-button { height: 41px; }
.program-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2-5); }
.program-card { position: relative; min-width: 0; overflow: hidden; padding: var(--space-4); border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); transition: box-shadow .15s ease; }
.program-card:hover, .program-card.selected { box-shadow: var(--rk-card-shadow-hover), 0 0 0 2px color-mix(in srgb,var(--program-color) 40%,transparent); }
.program-card header, .program-card footer, .program-card-progress > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2-5); }
.program-card header > span { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2xs); background: color-mix(in srgb,var(--program-color) 12%,var(--surface)); color: var(--neutral-800); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.program-card header > span::before { width: 6px; height: 6px; flex: none; border-radius: var(--radius-circle); background: var(--program-color); content: ''; }
.program-card header > em { font-style: normal; }
.program-card h2 { margin: var(--space-3-5) 0 0; color: var(--neutral-900); font-size: 16px; line-height: 1.35; letter-spacing: -.02em; }
.program-card > p { height: 42px; margin: var(--space-1-5) 0 0; overflow: hidden; color: var(--neutral-600); font-size: 13px; line-height: 1.65; }
.program-card-progress { margin-top: var(--space-3-5); }
.program-card-progress > div { color: var(--neutral-600); font-size: 13px; }
.program-card-progress > div strong { color: var(--neutral-800); font-size: 13px; }
.program-card-progress > i, .program-task-progress > i { display: block; height: 6px; margin-top: var(--space-1-5); overflow: hidden; border-radius: var(--radius-pill); background: var(--track); }
.program-card-progress > i b, .program-task-progress > i b { display: block; height: 100%; border-radius: inherit; background: var(--program-color,var(--cyan)); }
.program-card dl { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-2); margin: var(--space-3-5) 0 0; }
.program-card dl > div { min-width: 0; padding: var(--space-2); border-radius: var(--radius-xs); background: var(--neutral-75); }
.program-card dt { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.program-card dd { margin: var(--space-0-5) 0 0; overflow: hidden; color: var(--neutral-700); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.program-card footer { margin-top: var(--space-3-5); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.program-card footer > span { color: var(--muted-soft); font-size: 13px; }
.program-card footer > div { display: flex; gap: var(--space-1-5); }
.program-card footer a { padding: var(--space-1) var(--space-2); border: 1px solid var(--neutral-300); border-radius: var(--radius-2xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.program-card footer a:hover { border-color: var(--info-border); color: var(--cyan-dark); }
.program-card footer .icon-action { width: 30px; height: 30px; }
.program-editor-heading { display: flex; align-items: center; gap: var(--space-2-5); }
.program-editor-heading > span { min-width: 43px; height: 43px; display: grid; place-items: center; overflow: hidden; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); background: var(--navy); color: var(--on-brand); font-size: 13px; font-weight: 600; }
.program-editor-heading > span svg { width: 18px; height: 18px; }
.program-editor-heading h2 { margin: 0; font-size: 16px; }
.program-editor-heading p { margin: var(--space-0-5) 0 0; color: var(--muted); font-size: 13px; }
#program-form { display: grid; gap: var(--space-2-5); }
#program-form > label, .program-date-fields label { display: grid; gap: var(--space-1); }
#program-form label > span, .program-colors legend { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
#program-form input, #program-form select { height: 39px; font-size: 13px; }
#program-form textarea { min-height: 82px; font-size: 13px; }
.program-date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.program-colors { display: flex; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.program-colors legend { margin-bottom: var(--space-1-5); }
.program-colors label { position: relative; cursor: pointer; }
.program-colors input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.program-colors span { width: 26px; height: 26px; display: block; border: 3px solid var(--surface); border-radius: var(--radius-circle); background: var(--choice); box-shadow: 0 0 0 1px var(--blue-200); }
.program-colors input:checked + span { box-shadow: 0 0 0 2px var(--choice); }
#program-form-message { padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-xs); background: var(--success-soft); color: var(--success-deep); font-size: 13px; font-weight: 600; }
#program-form-message.error { background: var(--danger-soft); color: var(--rose-600); }
.program-form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-0-5); }
.program-form-actions > * { flex: 1; }
.program-readonly-note { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface-2); color: var(--rk-muted); font-size: 13px; line-height: 1.55; }
.program-empty { padding: var(--space-7); border: 1px dashed var(--neutral-400); border-radius: var(--radius-md); color: var(--muted-soft); text-align: center; }
.program-empty strong, .program-empty span { display: block; color: var(--ink-soft); }
.program-empty span { color: var(--cyan-dark); font-size: 24px; }
.program-empty span svg { width: 24px; height: 24px; }
.program-empty p { margin: var(--space-1) 0 0; font-size: 13px; }
.catalog-empty { grid-column: 1/-1; padding: var(--space-14) var(--space-5); background: var(--surface); }
.program-detail { margin-bottom: var(--space-3); overflow: hidden; border: 1px solid color-mix(in srgb,var(--program-color) 40%,var(--rk-line-strong)); border-radius: var(--rk-radius-card); background: var(--surface); }
.program-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-5); border-left: 5px solid var(--program-color); background: var(--surface); }
.program-detail > header > div:first-child { min-width: 0; }
.program-detail > header > div:first-child > span { color: var(--cyan-dark); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.program-detail > header h2 { margin: var(--space-1) 0 0; color: var(--neutral-900); font-size: 20px; }
.program-detail > header p { margin: var(--space-1) 0 0; color: var(--neutral-600); font-size: 13px; line-height: 1.5; }
.program-detail > header > div:last-child { display: flex; flex: none; gap: var(--space-1-5); }
.program-detail-actions { align-items: center; }
.program-detail-metrics { display: grid; grid-template-columns: 1.25fr 1.25fr repeat(3,.75fr); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.program-detail-metrics article { padding: var(--space-3) var(--space-4); border-left: 1px solid var(--line-soft); }
.program-detail-metrics article:first-child { border-left: 0; }
.program-detail-metrics small, .program-detail-metrics strong { display: block; }
.program-detail-metrics small { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.program-detail-metrics strong { margin-top: var(--space-1); color: var(--neutral-700); font-size: 13px; }
.program-milestone-panel { padding: var(--space-5) var(--space-5) var(--space-6); border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.program-milestone-panel > header, .program-task-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.program-milestone-panel > header h3, .program-task-heading h3 { margin: var(--space-0-5) 0 0; color: var(--neutral-800); font-size: 16px; }
.program-milestone-panel > header p { margin: var(--space-1) 0 0; color: var(--muted-soft); font-size: 13px; }
.program-section-kicker { color: var(--cyan-dark); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.milestone-summary-strip { display: grid; grid-template-columns: auto minmax(140px,1fr) auto; align-items: center; gap: var(--space-3-5); margin-top: var(--space-4); padding: var(--space-3) var(--space-3-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.milestone-summary-strip > div { display: flex; align-items: baseline; gap: var(--space-1-5); }
.milestone-summary-strip strong { color: var(--ink); font-size: 20px; }
.milestone-summary-strip span { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.milestone-summary-strip > i { height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--neutral-150); }
.milestone-summary-strip > i b { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.program-milestone-timeline { margin-top: var(--space-4); }
.program-milestone-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: var(--space-3); }
.milestone-rail { position: relative; display: flex; justify-content: center; }
.milestone-rail::after { content: ''; position: absolute; top: 32px; bottom: -1px; width: 2px; background: var(--neutral-300); }
.program-milestone-step:last-child .milestone-rail::after { display: none; }
.milestone-rail > span { position: relative; z-index: var(--z-base); width: 30px; height: 30px; display: grid; place-items: center; border: 4px solid var(--surface); border-radius: var(--radius-circle); background: var(--neutral-500); color: var(--on-brand); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px var(--blue-200); }
.program-milestone-step.in_progress .milestone-rail > span, .program-milestone-step.waiting_response .milestone-rail > span { background: var(--cyan-dark); }
.program-milestone-step.completed .milestone-rail > span { background: var(--green); }
.program-milestone-step.overdue .milestone-rail > span { background: var(--rose); }
.program-milestone-step.cancelled .milestone-rail > span { background: var(--neutral-450); }
.milestone-card-body { min-width: 0; margin-bottom: var(--space-3); padding: var(--space-3-5) var(--space-3-5); border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); }
.milestone-card-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3-5); }
.milestone-card-body > header > div:first-child { min-width: 0; }
.milestone-card-body h4 { margin: var(--space-1-5) 0 0; color: var(--neutral-800); font-size: 13px; }
.milestone-card-body header em { margin-left: var(--space-1-5); color: var(--muted-soft); font-size: 13px; font-style: normal; font-weight: 600; }
.milestone-status { display: inline-flex; padding: var(--space-0-5) var(--space-1-5); border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.milestone-status.in_progress { background: var(--info-soft); color: var(--teal-700); }
.milestone-status.waiting_response { background: var(--warning-soft); color: var(--amber-700); }
.milestone-status.completed { background: var(--success-soft); color: var(--success-deep); }
.milestone-status.overdue { background: var(--danger-soft); color: var(--rose-600); }
.milestone-status.cancelled { background: var(--neutral-100); color: var(--muted-soft); }
.milestone-actions { display: flex; flex: none; gap: var(--space-1); }
.milestone-actions button { padding: var(--space-1) var(--space-2); border: 1px solid var(--neutral-300); border-radius: var(--radius-2xs); background: var(--surface); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.milestone-actions button:last-child { color: var(--rose-600); }
.milestone-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2-5); }
.milestone-facts > span { min-width: 120px; padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-xs); background: var(--neutral-75); }
.milestone-facts small, .milestone-facts strong { display: block; }
.milestone-facts small { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.milestone-facts strong { margin-top: var(--space-0-5); color: var(--neutral-700); font-size: 13px; }
.milestone-route { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-2-5); color: var(--neutral-700); font-size: 13px; font-weight: 600; }
.milestone-route span { padding: var(--space-1) var(--space-2); border: 1px solid var(--rk-line-strong); border-radius: var(--radius-2xs); background: var(--neutral-50); }
.milestone-route b { color: var(--cyan-dark); }
.milestone-card-body > p { margin: var(--space-2-5) 0 0; color: var(--neutral-600); font-size: 13px; line-height: 1.6; }
.milestone-task-link { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--space-2); margin-top: var(--space-2-5); padding: var(--space-2) var(--space-2-5); border: 1px solid var(--info-border); border-radius: var(--radius-xs); background: var(--surface-tint); }
.milestone-task-link span { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.milestone-task-link strong { overflow: hidden; color: var(--neutral-800); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.milestone-task-link small { color: var(--cyan-dark); font-size: 13px; font-weight: 600; }
.milestone-empty { margin-top: var(--space-4); background: var(--surface); }
.program-task-heading { padding: var(--space-4) var(--space-5) var(--space-2-5); }
.program-task-heading > div:last-child { display: flex; align-items: center; gap: var(--space-2); }
.program-task-heading > div:last-child > strong { padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; }
.program-task-heading .secondary-button { min-height: 32px; padding: 0 var(--space-2-5); font-size: 13px; }
.program-card footer > span em { color: var(--rose); font-style: normal; font-weight: 600; }
.milestone-modal { width: min(720px,100%); }
#milestone-form-message { padding: var(--space-2-5) var(--space-2-5); border-radius: var(--radius-xs); background: var(--success-soft); color: var(--success-deep); font-size: 13px; font-weight: 600; }
#milestone-form-message.error { background: var(--danger-soft); color: var(--rose-600); }
.milestone-tracing-backdrop { position: fixed; inset: 0; z-index: var(--z-tracing); display: grid; place-items: center; padding: var(--space-4); background: rgba(3,14,28,.56); backdrop-filter: blur(7px) saturate(.9); }
.milestone-tracing-dialog { width: min(1080px,calc(100% - 36px)); max-height: calc(100dvh - 36px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-2xl); outline: none; background: var(--surface); box-shadow: var(--shadow-modal); animation: modal-in .18s ease-out; }
.milestone-tracing-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--neutral-150); background: var(--surface-tint); }
.milestone-tracing-dialog > header span { color: var(--cyan-dark); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.milestone-tracing-dialog > header h2 { margin: var(--space-0-5) 0 0; color: var(--neutral-900); font-size: 16px; }
.milestone-tracing-dialog > header .icon-button { position: static; flex: none; font-size: 20px; }
.milestone-tracing-body { min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-2-5); }
.milestone-tracing-hint { margin: 0 0 var(--space-2-5); color: var(--neutral-600); font-size: 13px; line-height: 1.5; }
.milestone-horizontal-wrap { overflow-x: auto; padding: var(--space-1) 0 var(--space-2-5); scrollbar-color: var(--neutral-450) var(--track); scrollbar-width: thin; }
.milestone-horizontal-track { position: relative; min-width: 100%; display: flex; padding: 0 var(--space-6); }
.milestone-horizontal-bar { position: absolute; top: 178px; right: 62px; left: 26px; height: 34px; overflow: hidden; border-radius: var(--radius-2xs); background: var(--neutral-450); }
.milestone-horizontal-bar > b { display: block; height: 100%; min-width: 0; background: var(--green-500); }
.milestone-horizontal-tip { position: absolute; z-index: 0; top: 164px; right: 14px; width: 0; height: 0; border-top: 31px solid transparent; border-bottom: 31px solid transparent; border-left: 46px solid var(--neutral-600); }
.milestone-horizontal-column { position: relative; z-index: var(--z-base); flex: 0 0 210px; display: flex; flex-direction: column; align-items: center; }
.milestone-horizontal-top { width: 100%; height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.milestone-horizontal-mid { height: 34px; display: flex; align-items: center; justify-content: center; }
.milestone-horizontal-bottom { width: 100%; min-height: 178px; display: flex; flex-direction: column; align-items: center; }
.milestone-horizontal-leader { flex: 1; min-height: 13px; border-left: 1px dashed var(--neutral-450); }
.milestone-horizontal-mid > span { width: 19px; height: 19px; border: 4px solid var(--surface); border-radius: var(--radius-circle); background: var(--neutral-450); box-shadow: 0 0 0 2px rgba(255,255,255,.62); }
.milestone-horizontal-mid > span.in_progress, .milestone-horizontal-mid > span.waiting_response { background: var(--amber-500); box-shadow: 0 0 0 2px var(--amber-500); }
.milestone-horizontal-mid > span.completed { background: var(--green-500); box-shadow: 0 0 0 2px var(--green-500); }
.milestone-horizontal-mid > span.overdue { background: var(--rose); box-shadow: 0 0 0 2px var(--rose); }
.milestone-horizontal-mid > span.cancelled { background: var(--neutral-500); }
.milestone-horizontal-card { width: 192px; min-height: 151px; padding: var(--space-2-5) var(--space-2-5); border: 0; border-radius: var(--rk-radius-card); background: var(--surface); box-shadow: var(--rk-card-shadow); text-align: left; }
.milestone-horizontal-number { color: var(--muted-soft); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.milestone-horizontal-name { display: block; margin: var(--space-1) 0; color: var(--neutral-900); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none; word-break: break-word; }
a.milestone-horizontal-name:hover { color: var(--cyan-dark); text-decoration: underline; }
.milestone-horizontal-meta { color: var(--neutral-600); font-size: 13px; line-height: 1.48; word-break: break-word; }
.milestone-horizontal-card > .milestone-status { margin-top: var(--space-1); }
.milestone-horizontal-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1-5); }
.milestone-horizontal-actions a { padding: var(--space-0-5) var(--space-1-5); border: 1px solid var(--blue-200); border-radius: var(--radius-2xs); background: var(--surface-alt); color: var(--neutral-800); font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.milestone-horizontal-actions a:hover { border-color: var(--info-border); color: var(--cyan-dark); }
.milestone-horizontal-actions .icon-action { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--rk-muted); }
.milestone-tracing-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3-5); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--neutral-150); background: var(--neutral-50); }
.milestone-tracing-dialog > footer > div { display: flex; align-items: center; gap: var(--space-2); }
.milestone-tracing-dialog > footer > div:first-child strong { color: var(--ink); font-size: 20px; }
.milestone-tracing-dialog > footer > div:first-child span { color: var(--muted-soft); font-size: 13px; font-weight: 600; }
.milestone-tracing-empty { padding: var(--space-16) var(--space-5); text-align: center; }
.milestone-tracing-empty strong { color: var(--neutral-700); font-size: 14px; }
.milestone-tracing-empty p { margin: var(--space-1) 0 0; color: var(--muted-soft); font-size: 13px; }
.program-task-list { display: grid; }
.program-task-row { display: grid; grid-template-columns: 38px minmax(220px,1fr) 120px 80px 14px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.program-task-row:first-child { border-top: 0; }
.program-task-row:hover { background: var(--surface-tint); }
.program-task-row > .avatar { width: 36px; height: 36px; }
.program-task-row > div:nth-child(2) { min-width: 0; }
.program-task-row .status-label { margin-bottom: var(--space-1); }
.program-task-row > div:nth-child(2) > strong, .program-task-row > div:nth-child(2) > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-task-row > div:nth-child(2) > strong { color: var(--neutral-800); font-size: 13px; }
.program-task-row > div:nth-child(2) > small { margin-top: var(--space-0-5); color: var(--muted-soft); font-size: 13px; }
.program-task-progress strong { display: block; color: var(--neutral-700); font-size: 13px; text-align: right; }
.program-task-progress > i { margin-top: var(--space-1); }
.program-task-row time { color: var(--neutral-600); font-size: 13px; font-weight: 600; }
.program-task-row > b { color: var(--cyan-dark); font-size: 13px; }

@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(20,184,177,0); } 100% { box-shadow: 0 0 0 0 rgba(20,184,177,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes skeleton-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes detail-backdrop-in { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1220px) {
    .metrics { grid-template-columns: 1fr 1fr; }
    .attention-panel { grid-column: 1/-1; }
    .kanban { grid-template-columns: 1fr; }
    .lane-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1180px) {
    .worklist-shell .rk-page-header { flex-wrap: wrap; row-gap: 12px; }
    .worklist-shell .rk-page-actions { width: 100%; }
    .worklist-shell .worklist-heading-actions { width: 100%; }
    .worklist-main > .worklist-sub > .activity-badge { display: none; }
}
@media (min-width: 941px) {
    .page-topbar .rk-breadcrumb,
    .page-topbar .topbar-divider,
    .page-topbar .profile { display: none; }
}
@media (max-width: 940px) {
    .topbar-search { width: min(300px, 34vw); }
    .logout-button span { display: none; }
    .sidebar { transform: translateX(-102%); }
    .sidebar.open { transform: translateX(0); }
    .screen-overlay.show { display: block; }
    .workspace { padding-left: 0; }
    .mobile-menu { display: grid; }
    .dashboard-analytics-grid { grid-template-columns: 1fr; }
    .attention-panel { grid-column: auto; }
    .report-filters { grid-template-columns: 1fr 1fr; }
    .report-search { grid-column: 1/-1; }
    .report-filter-actions { grid-column: 1/-1; }
    .report-metrics { grid-template-columns: repeat(3,1fr); }
    .mywork-filters { grid-template-columns: 1fr 1fr; }
    .mywork-search { grid-column: 1/-1; }
    .mywork-row { grid-template-columns: 9px minmax(220px,1fr) minmax(125px,.6fr) auto; }
    .mywork-due { grid-column: 2; }
    .mywork-row > b { grid-column: 4; grid-row: 1/3; }
    .calendar-toolbar { align-items: stretch; flex-direction: column; }
    .calendar-layout { grid-template-columns: minmax(0,1fr); }
    .calendar-filters { justify-content: stretch; }
    .calendar-filters label { flex: 1; }
    .calendar-filters select, .calendar-filters label:nth-of-type(n+3) select { width: 100%; }
    .program-layout { grid-template-columns: 1fr; }
    .worklist-filters { grid-template-columns: minmax(220px,1fr) 120px minmax(160px,190px) minmax(140px,170px) auto; }
    .worklist-auto-state { display: none; }
    .worklist-row { grid-template-columns: 0 24px 36px minmax(180px,1fr) minmax(96px,.5fr) minmax(76px,.35fr) auto; gap: 10px; padding: 10px 16px; }
    .worklist-panel.is-selecting .worklist-row { grid-template-columns: 24px 24px 36px minmax(180px,1fr) minmax(96px,.5fr) minmax(76px,.35fr) auto; }
    .worklist-row > .avatar { width: 36px; height: 36px; }
    .drawer { width: min(760px,calc(100% - 32px)); max-height: calc(100dvh - 32px); }
    .drawer-body { grid-template-columns: 1fr; }
    .drawer-body > .detail-summary, .drawer-body > .detail-grid, .drawer-body > .task-updates-section, .drawer-body > .drawer-actions { grid-column: 1; }
    .document-filters { grid-template-columns: 1fr 1fr; }
    .document-filters label:first-child { grid-column: 1/-1; }
    .document-grid { grid-template-columns: 1fr; }
    .document-card > form button { opacity: 1; }
}
@media (max-width: 700px) {
    .topbar { height: 60px; padding: 0 var(--space-3-5); gap: 10px; }
    .rk-breadcrumb { font-size: 13px; }
    .rk-breadcrumb a, .rk-breadcrumb > span { display: none; }
    .search-box { display: none; }
    .notification-panel { position: fixed; top: 60px; right: 10px; left: 10px; width: auto; }
    .notification-panel::before { right: 63px; }
    .topbar-divider, .profile > div { display: none; }
    .page-workspace { padding-bottom: 76px; }
    .rk-page-header { align-items: stretch; flex-direction: column; }
    .rk-page-actions > * { flex: 1; }
    .rk-stat-strip { gap: 12px; }
    .rk-stat { min-height: 96px; padding: 14px 16px; }
    .rk-stat-mark { right: -18px; bottom: -16px; width: 84px; height: 84px; stroke-width: 1.35; }
    .rk-stat-value { font-size: 26px; }
    .rk-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; min-height: 60px; padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
    .rk-bottom-item { position: relative; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; }
    .rk-bottom-item svg { width: 19px; height: 19px; }
    .rk-bottom-item.active { color: var(--rk-teal); }
    .rk-bottom-badge { position: absolute; top: 2px; left: calc(50% + 7px); min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; border-radius: var(--radius-pill); background: var(--rose); color: var(--on-brand); font-size: 13px; font-weight: 600; line-height: 1; }
    .rk-more-sheet { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 46; display: block; max-height: calc(100dvh - 80px); overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; background: var(--surface); box-shadow: var(--rk-shadow-overlay); }
    .rk-more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .rk-more-head strong { color: var(--ink); font-size: 16px; font-weight: 600; }
    .rk-more-search { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .rk-more-search > svg { position: absolute; left: 12px; width: 16px; color: var(--muted); pointer-events: none; }
    .rk-more-search input { width: 100%; height: 42px; padding: 0 64px 0 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); color: var(--ink); font-size: 14px; }
    .rk-more-search button { position: absolute; right: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: var(--rk-navy); color: var(--on-brand); font-size: 13px; font-weight: 600; }
    .rk-more-caption { margin: 16px 2px 7px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
    .rk-more-search + .rk-more-caption { margin-top: 4px; }
    .rk-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rk-more-grid a, .rk-more-logout button { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; }
    .rk-more-grid a svg, .rk-more-logout button svg { width: 17px; color: var(--muted); }
    .rk-more-grid a[aria-current="page"] { border-color: var(--teal-200); background: var(--rk-teal-soft); color: var(--rk-teal); }
    .rk-more-logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
    .rk-more-logout button { width: 100%; border-color: var(--rose-200); background: var(--rose-100); color: var(--rose-700); }
    .rk-more-logout button svg { color: currentColor; }
    .workspace > main, .team-page .workspace > main { width: auto; min-height: 0; margin: 0; padding: var(--space-6) var(--space-4) var(--space-9); border: 0; border-radius: 0; background: transparent; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .primary-button { width: 100%; }
    .metrics { grid-template-columns: 1fr; }
    .owner-progress-row { grid-template-columns: minmax(95px,.9fr) minmax(70px,1fr) 34px; }
    .metric-card { min-height: 140px; }
    .section-header { align-items: stretch; flex-direction: column; }
    .view-controls { margin-left: 0; flex-wrap: wrap; }
    .view-toggle { flex: 1; }
    .view-toggle button { flex: 1; }
    .view-controls select { flex: 1; }
    .lane-body { grid-template-columns: 1fr; }
    .list-row { grid-template-columns: 1fr 1fr; }
    .list-row > span:first-child { grid-column: 1/-1; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid label, .form-grid .wide { grid-column: 1; }
    .form-section-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .drawer { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: var(--radius-xl); }
    .drawer.is-maximized { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .drawer-hero { padding: var(--space-5) 104px var(--space-5) var(--space-4); }
    .drawer-window-actions { top: 14px; right: 14px; gap: var(--space-1-5); }
    .drawer-window-actions .icon-button { width: 36px; height: 36px; }
    .drawer-body { gap: var(--space-3-5); padding: var(--space-4); }
    .auth-card { padding: var(--space-6) var(--space-5); }
    .team-heading { align-items: flex-start; flex-direction: column; }
    .team-heading > .secondary-button { width: 100%; }
    .team-search { display: grid; grid-template-columns: 1fr 1fr; }
    .team-search label { grid-column: 1/-1; }
    .user-panel-heading { align-items: flex-start; }
    .secure-label { display: none; }
    .user-summary { grid-template-columns: 40px minmax(0,1fr); padding: var(--space-3-5) var(--space-3-5) var(--space-2); }
    .account-status { grid-column: 2; justify-self: start; }
    .user-side { grid-column: 2; justify-self: start; }
    .account-security { padding: var(--space-3) 0 0; border-top: 1px solid var(--rk-line-strong); border-left: 0; }
    .report-actions { width: 100%; }
    .report-actions > * { flex: 1; }
    .report-context { display: grid; grid-template-columns: 1fr 1fr; }
    .report-context > div { padding: 0 var(--space-2-5); }
    .report-context > div:nth-child(3) { grid-column: 1/-1; margin-top: var(--space-2-5); padding: var(--space-2-5) 0 0; border-top: 1px solid var(--rk-line-strong); border-left: 0; }
    .report-filters { grid-template-columns: 1fr 1fr; }
    .report-filters label:first-child { grid-column: 1/-1; }
    .report-metrics { grid-template-columns: 1fr 1fr; }
    .report-layout { grid-template-columns: 1fr; }
    .owner-performance-grid { grid-template-columns: 1fr; }
    .backup-layout { grid-template-columns: 1fr; }
    .worklist-filters { grid-template-columns: 1fr 1fr; }
    .worklist-search { grid-column: 1/-1; }
    .worklist-activity-filter { grid-column: 1/-1; }
    .worklist-more-panel { width: min(330px,calc(100vw - 60px)); grid-template-columns: 1fr; }
    .worklist-auto-state { position: absolute; width: 1px; height: 1px; display: block; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .worklist-tabs { width: 100%; flex-wrap: wrap; overflow-x: visible; }
    .worklist-tabs a { flex: 1 1 auto; justify-content: center; }
    .worklist-reset { height: 38px !important; }
    .worklist-heading-actions { width: 100%; flex-wrap: wrap; }
    .worklist-heading-actions > * { flex: 1 1 auto; }
    .worklist-heading-actions .work-scope-switch { flex: 1 0 100%; margin-right: 0; }
    .worklist-heading-actions .work-scope-switch a { flex: 1; }
    .worklist-panel .table-heading { flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
    .worklist-table-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .worklist-bulk-bar { flex-wrap: wrap; }
    .worklist-bulk-bar select { width: 100%; margin-left: 0; order: 3; }
    .worklist-bulk-bar > button { flex: 1; order: 4; }
    .worklist-row { grid-template-columns: 0 22px 34px minmax(0,1fr) auto; gap: 8px 12px; padding: 12px var(--space-4); }
    .worklist-panel.is-selecting .worklist-row { grid-template-columns: 24px 22px 34px minmax(0,1fr) auto; }
    .worklist-row > .avatar { width: 34px; height: 34px; }
    .worklist-main { gap: 4px; }
    .worklist-main > strong { display: -webkit-box; overflow: hidden; white-space: normal; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .worklist-progress, .worklist-meta { grid-column: 4; }
    .worklist-progress { max-width: 220px; }
    .worklist-meta { display: flex; align-items: baseline; gap: 6px; text-align: left; }
    .worklist-meta small { margin-top: 0; }
    .worklist-main > .worklist-sub { flex-wrap: wrap; gap: 6px; overflow: visible; }
    .worklist-main > .worklist-sub > .activity-badge { display: none; }
    .worklist-main > .worklist-sub > small { flex: 1 1 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .worklist-row-actions { grid-column: 5; grid-row: 1/2; align-self: start; flex-direction: row; }
    .worklist-row-actions .row-quick { display: none; }
    .worklist-row-actions button { width: 40px; height: 40px; }
    .worklist-list-footer { align-items: flex-start; flex-direction: column; padding: var(--space-3) var(--space-4); }
    .worklist-list-footer .pagination { width: 100%; justify-content: flex-start; overflow-x: auto; }
    .worklist-quick-panel { grid-template-columns: 1fr; padding: var(--space-3-5) var(--space-4); }
    .worklist-quick-panel > div:first-child small { max-width: calc(100% - 84px); }
    .mywork-heading > .primary-button { width: 100%; }
    .mywork-hero { align-items: flex-start; padding: var(--space-4); }
    .mywork-hero > div:first-child { align-items: flex-start; }
    .mywork-hero .avatar { width: 42px; height: 42px; }
    .mywork-hero h2 { font-size: 14px; }
    .mywork-ring { width: 62px; height: 62px; }
    .mywork-overview { grid-template-columns: 1fr 1fr; }
    .mywork-row { grid-template-columns: 8px minmax(0,1fr) auto; gap: var(--space-2-5); padding: var(--space-3-5); }
    .mywork-progress, .mywork-due { grid-column: 2; }
    .mywork-row > b { grid-column: 3; grid-row: 1/4; }
    .reminder-row { grid-template-columns: 52px minmax(0,1fr); }
    .reminder-main h3 { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.4; }
    .reminder-timing, .reminder-actions { grid-column: 2; }
    .reminder-actions { align-items: flex-start; flex-direction: column; }
    .document-filters { grid-template-columns: 1fr 1fr; }
    .document-filters label:first-child { grid-column: 1/-1; }
    .document-grid { grid-template-columns: 1fr; }
    .document-card > form button { opacity: 1; }
    .calendar-heading > .primary-button { width: 100%; }
    .month-navigation { justify-content: space-between; }
    .month-navigation > div { min-width: 0; flex: 1; text-align: center; }
    .calendar-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .calendar-panel { display: none; }
    .calendar-agenda { display: block; }
    .agenda-date > header { padding: var(--space-3) var(--space-2); }
    .agenda-date > header small { display: none; }
    .calendar-legend { justify-content: flex-start; }
    .program-heading > .primary-button { width: 100%; }
    .program-filters { grid-template-columns: 1fr 1fr; }
    .program-filters label:first-child { grid-column: 1/-1; }
    .program-grid { grid-template-columns: 1fr; }
    .activity-grid { grid-template-columns: 1fr; }
    .program-detail > header { flex-direction: column; }
    .program-detail > header > div:last-child { width: 100%; }
    .program-detail > header > div:last-child > .primary-button { flex: 1; }
    .program-detail > header > div:last-child > .icon-action { flex: none; }
    .program-detail-metrics { grid-template-columns: 1fr 1fr; }
    .program-detail-metrics article:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .program-detail-metrics article:nth-child(odd) { border-left: 0; }
    .milestone-tracing-backdrop { padding: var(--space-2); }
    .milestone-tracing-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: var(--radius-lg); }
    .milestone-tracing-dialog > footer { align-items: flex-start; flex-direction: column; }
    .milestone-tracing-dialog > footer > div:last-child { width: 100%; }
    .milestone-tracing-dialog > footer > div:last-child > * { flex: 1; }
    .program-milestone-panel > header { align-items: flex-start; }
    .milestone-summary-strip { grid-template-columns: auto 1fr; }
    .milestone-summary-strip > div:last-child { grid-column: 1/-1; }
    .milestone-task-link { grid-template-columns: 1fr; }
    .program-task-row { grid-template-columns: 36px minmax(0,1fr) auto; }
    .program-task-progress, .program-task-row time { grid-column: 2; }
    .program-task-row > b { grid-column: 3; grid-row: 1/4; }
}
/* Penyusun laporan */
.laporan-panel { min-width: 0; width: 100%; max-width: 100%; overflow: clip; padding: var(--space-5); box-shadow: none; }
.laporan-panel + .laporan-panel { margin-top: var(--space-4); }
.laporan-panel > h2 { margin: 0 0 var(--space-1); font-size: 16px; }
.laporan-panel > p { margin: 0 0 var(--space-4); color: var(--muted); font-size: 13px; }
.laporan-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.laporan-panel-head h2 { margin: 0; color: var(--ink); font-size: 18px; }
.laporan-panel-head p { margin: var(--space-1) 0 0; color: var(--muted); font-size: 13px; }
.laporan-live-state { display: inline-flex; align-items: center; gap: var(--space-1-5); flex: none; min-height: 28px; color: var(--muted); font-size: 12px; }
.laporan-live-state i { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--brand-turquoise); }
.laporan-live-state b { font-weight: 600; }
.laporan-live-state.is-updating i { background: var(--amber-500); }
.laporan-live-state.is-incomplete i { background: var(--rose); }
.laporan-form { min-width: 0; width: 100%; max-width: 100%; display: grid; gap: var(--space-3); }
.laporan-grid { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.laporan-grid-3 { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.laporan-grid > *, .laporan-grid-3 > *, .laporan-scope-grid > * { min-width: 0; max-width: 100%; }
.laporan-scope-grid { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(190px,.7fr) minmax(420px,1.7fr); align-items: stretch; gap: var(--space-3); }
.laporan-field { display: grid; gap: var(--space-1-5); align-content: start; min-width: 0; }
.laporan-field > span { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.laporan-field > small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.laporan-field input:not([type="checkbox"]), .laporan-field select, .laporan-field textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.laporan-field textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.laporan-field input:focus-visible, .laporan-field select:focus-visible, .laporan-field textarea:focus-visible { border-color: var(--brand-teal-deep); outline: none; box-shadow: var(--focus-ring); }
.laporan-task-search-field { grid-column: 1 / -1; }
.laporan-task-search-control { position: relative; display: block; min-width: 0; width: 100%; max-width: 100%; }
.laporan-task-search-control svg { position: absolute; z-index: 1; top: 50%; left: 13px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.laporan-field .laporan-task-search-control input { display: block; width: 100%; max-width: 100%; padding-left: 42px; min-height: 48px; border-color: var(--rk-control); background: var(--surface); }
.laporan-field .laporan-task-search-control input::-webkit-search-cancel-button { cursor: pointer; }
.laporan-field .laporan-task-search-control input::placeholder { color: var(--muted); }
.laporan-field-check { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-alt); }
.laporan-field-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand-teal-deep); }
.laporan-field-check span { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.laporan-field-check small { display: block; color: var(--muted); font-size: 13px; }
.laporan-period { min-width: 0; width: 100%; max-width: 100%; margin: 0; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--rk-radius-card); background: var(--surface-alt); }
.laporan-period legend { width: 100%; margin: 0; padding: 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.laporan-period-help { margin: var(--space-1) 0 var(--space-2); color: var(--muted); font-size: 12px; line-height: 1.45; }
.laporan-period-fields { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: var(--space-2); }
.laporan-date-field { min-width: 0; display: grid; gap: var(--space-1); }
.laporan-date-field > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.laporan-date-field input { width: 100%; min-width: 0; height: 40px; padding: 7px 11px; border: 1px solid var(--rk-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.laporan-date-field input:hover { border-color: var(--neutral-500); }
.laporan-date-field input:focus-visible { border-color: var(--brand-teal-deep); outline: 2px solid rgba(20,184,177,.2); outline-offset: 1px; }
.laporan-date-field input[aria-invalid="true"] { border-color: var(--rose); }
.laporan-date-field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.laporan-period-connector { align-self: end; padding-bottom: 11px; color: var(--muted); font-size: 12px; }
.laporan-period-error { grid-column: 1 / -1; margin: 0; color: var(--rose); font-size: 12px; line-height: 1.45; }
.laporan-divider { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.laporan-divider strong { color: var(--ink); font-size: 13px; }
.laporan-divider span { color: var(--muted); font-size: 12px; }
.laporan-filter-grid { max-width: 100%; }
.laporan-deadline-filter,
.laporan-wbs-option {
    grid-column: 1 / -1;
    align-items: center;
    min-height: 76px;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}
.laporan-deadline-filter input[type="checkbox"],
.laporan-wbs-option input[type="checkbox"] { flex: none; margin: 0; }
.laporan-deadline-filter > span,
.laporan-wbs-option > span { display: grid; gap: 2px; min-width: 0; }
.laporan-deadline-filter strong { display: block; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.laporan-signer { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-alt); }
.laporan-actions { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-3); align-items: center; margin-top: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.laporan-actions a { text-decoration: none; }
.laporan-actions p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.laporan-print-button { min-width: 166px; justify-content: center; }
.laporan-print-button svg { width: 16px; height: 16px; }
.laporan-print-button:disabled { border-color: var(--border); background: var(--surface-alt); color: var(--muted); cursor: not-allowed; opacity: 1; }
.laporan-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); }
.laporan-kpi { padding: var(--space-3); border: 0; border-radius: var(--rk-radius-card); background: var(--surface-alt); }
.laporan-kpi small { display: block; color: var(--muted); font-size: 13px; }
.laporan-kpi strong { display: block; margin-top: 2px; color: var(--ink); font-size: 20px; line-height: 1.25; }
.laporan-kpi .laporan-kpi-text { font-size: 14px; }
.laporan-number { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Tabel bersama. Header tanpa band, garis header paling kuat, baris 44px. */
.rk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border: 1px solid var(--rk-line-strong); border-radius: var(--rk-radius-card); }
.rk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-table th, .rk-table td { padding: 12px; border-bottom: 1px solid var(--rk-line); text-align: left; vertical-align: middle; }
.rk-table thead th { padding: 10px 12px; border-bottom: 1px solid var(--rk-line); color: var(--rk-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.rk-table tbody th { width: 176px; color: var(--muted); font-weight: 500; }
.rk-table tbody tr:last-child > * { border-bottom: 0; }
.rk-table tbody tr:hover { background: var(--surface-tint); }
.rk-table--wide { min-width: 640px; }
.rk-table .rk-nowrap { white-space: nowrap; }
.rk-table .rk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-table a { color: var(--brand-teal-deep); font-weight: 600; text-decoration: none; }
.rk-table a:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .rk-table th, .rk-table td { padding: 10px 8px; }
    .rk-table--wide th:first-child, .rk-table--wide td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
    .rk-table--wide thead th:first-child { z-index: 2; }
}

/* Koneksi Google Calendar */
.calendar-google-alert { margin-bottom: var(--space-3); padding: 11px 14px; border: 1px solid var(--teal-200); border-radius: var(--rk-radius-control); background: var(--rk-teal-soft); color: var(--teal-800); font-size: 13px; line-height: 1.5; }
.calendar-google-alert.error { border-color: var(--rose-200); background: var(--danger-soft); color: var(--rose-700); }
.calendar-google-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 16px; margin-bottom: var(--space-3); padding: 16px 18px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: linear-gradient(120deg,var(--rk-surface),var(--rk-surface-2)); box-shadow: var(--rk-card-shadow); }
.calendar-google-card.is-connected { border-color: var(--teal-200); background: linear-gradient(120deg,var(--rk-surface),var(--rk-teal-soft)); }
.calendar-google-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,var(--rk-navy),var(--rk-teal)); color: var(--on-brand); }
.calendar-google-mark svg { width: 24px; height: 24px; }
.calendar-google-copy { min-width: 0; }
.calendar-google-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.calendar-google-title-row h2 { margin: 0; color: var(--rk-text); font-size: 17px; }
.calendar-google-state { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--amber-100); color: var(--amber-800); font-size: 12px; font-weight: 700; }
.calendar-google-state.connected { background: var(--rk-teal-soft); color: var(--rk-teal); }
.calendar-google-state.ready { background: var(--info-soft); color: var(--cyan-dark); }
.calendar-google-copy p { margin: 5px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
.calendar-google-copy small { display: block; margin-top: 5px; color: var(--rk-faint); font-size: 12px; line-height: 1.45; }
.calendar-google-copy code { padding: 2px 5px; border-radius: 4px; background: var(--rk-surface); color: var(--rk-text); font-size: 12px; overflow-wrap: anywhere; }
.calendar-google-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.calendar-google-actions form { margin: 0; }
.calendar-google-actions .primary-button, .calendar-google-actions .secondary-button { min-height: 40px; }
.calendar-google-actions svg { width: 16px; height: 16px; }
.calendar-task-sync form, .agenda-sync form { margin: 0; }
.calendar-task-sync button { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 var(--space-0-5); border: 1px solid var(--teal-200); border-radius: var(--radius-2xs); background: var(--surface-glass-strong); color: var(--teal-600); cursor: pointer; box-shadow: 0 2px 5px rgba(7,31,61,.05); }
.calendar-task-sync button:hover { border-color: var(--brand-turquoise); color: var(--cyan-dark); transform: translateY(-1px); }
.agenda-sync button { min-height: 29px; display: inline-flex; align-items: center; padding: 0 var(--space-2); border: 1px solid var(--teal-200); border-radius: var(--radius-2xs); background: var(--info-soft); color: var(--cyan-dark); font-size: 13px; font-weight: 600; cursor: pointer; }
.agenda-sync button:hover { border-color: var(--brand-turquoise); }

@media (max-width: 900px) {
    .calendar-google-card { grid-template-columns: 48px minmax(0,1fr); align-items: start; }
    .calendar-google-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 64px; }
}

@media (max-width: 600px) {
    .calendar-google-card { grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 14px; }
    .calendar-google-mark { width: 42px; height: 42px; border-radius: 12px; }
    .calendar-google-actions { padding-left: 0; }
    .calendar-google-actions form, .calendar-google-actions .primary-button, .calendar-google-actions .secondary-button { width: 100%; }
    .calendar-google-actions button, .calendar-google-actions a { justify-content: center; }
}
.laporan-note { margin: var(--space-3) 0 0; padding: var(--space-3); border-left: 3px solid var(--brand-turquoise); background: var(--surface-alt); color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.laporan-empty { padding: var(--space-5) var(--space-3); border: 1px dashed var(--rk-line-strong); border-radius: var(--rk-radius-card); color: var(--muted); font-size: 13px; text-align: center; }
.laporan-preview-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.laporan-preview-head h2 { margin: 0; font-size: 16px; }
.laporan-preview-head p { margin: 0; color: var(--muted); font-size: 13px; }
.laporan-preview-group + .laporan-preview-group { margin-top: var(--space-5); }
.laporan-preview-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 2px solid var(--brand-teal-deep); }
.laporan-preview-group-head h3 { margin: 0; color: var(--ink); font-size: 15px; }
.laporan-preview-group-head span { flex: none; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.laporan-layout { min-width: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.laporan-layout .laporan-panel + .laporan-panel { margin-top: 0; }
.laporan-layout + .laporan-panel { margin-top: var(--space-4); }
.laporan-summary .laporan-kpis { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-alt); }
.laporan-summary .laporan-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 10px var(--space-3); border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: transparent; }
.laporan-summary .laporan-kpi:last-child { border-bottom: 0; }
.laporan-summary .laporan-kpi small { flex: 1 1 auto; }
.laporan-summary .laporan-kpi strong { flex: none; margin-top: 0; font-size: 16px; text-align: right; }
.laporan-summary .laporan-kpi .laporan-kpi-text { font-size: 13px; }

@media (max-width: 1024px) {
    .laporan-layout { grid-template-columns: minmax(0, 1fr); }
    .laporan-layout .laporan-panel + .laporan-panel { margin-top: var(--space-4); }
    .laporan-scope-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 700px) {
    .laporan-grid, .laporan-grid-3, .laporan-kpis { grid-template-columns: minmax(0, 1fr); }
    .laporan-panel { padding: var(--space-4); }
    .laporan-panel-head { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
    .laporan-scope-grid { grid-template-columns: minmax(0,1fr); }
    .laporan-period-fields { grid-template-columns: minmax(0,1fr); }
    .laporan-period-connector { display: none; }
    .laporan-divider { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
    .laporan-actions { grid-template-columns: minmax(0,1fr); }
    .laporan-actions > * { width: 100%; justify-content: center; text-align: center; }
}

/* Dashboard — Papan Operasi */
.dash-text-link { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--rk-teal); font-size: 13px; font-weight: 500; text-decoration: none; }
.dash-text-link:hover { text-decoration: underline; }
.dash-text-link svg { width: 13px; }
/* Ringkasan: satu kartu, satu pita — jalur tenggat */
.dash-brief { margin-top: var(--space-6); overflow: hidden; border: 0; border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); }
.dash-brief-note { margin: 3px 0 0; color: var(--rk-rail-muted); font-size: 12px; font-weight: 400; }
.dash-brief-note strong { color: var(--rk-rail-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-brief-path { padding: 12px 20px 14px; }
.dash-brief-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dash-brief-head h2 { margin: 0; color: var(--rk-text); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.dash-brief-path .dash-deadline-track { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-top: 4px; }
.dash-brief-path .dash-deadline-segment { min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 0; background: transparent; color: inherit; text-decoration: none; box-shadow: none; }
.dash-brief-path .dash-deadline-segment span { overflow: visible; color: var(--rk-muted); font-size: 13px; font-weight: 500; text-overflow: clip; white-space: nowrap; }
.dash-brief-path .dash-deadline-segment strong { color: var(--rk-text); font-size: 14px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-brief-path .dash-deadline-segment:hover { background: transparent; }
.dash-brief-path .dash-deadline-segment:hover span { color: var(--rk-text); text-decoration: underline; text-underline-offset: 3px; }
.dash-brief-path .dash-deadline-segment:hover strong { color: var(--rk-accent-ink); }
.dash-brief-path .dash-deadline-segment--overdue:not(.is-zero) strong { color: var(--rk-danger); }
.dash-brief-path .dash-deadline-segment--today:not(.is-zero) strong { color: var(--rk-warn); }
.dash-brief-path .dash-deadline-segment.is-zero strong { color: var(--rk-muted); }

.dash-workspace { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr); align-items: start; gap: var(--space-4); margin-top: var(--space-6); }
.dash-attention { display: flex; min-width: 0; flex-direction: column; padding: 0; overflow: hidden; }
.dash-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 18px 20px 14px; border-bottom: 1px solid var(--rk-border); }
.dash-panel-heading h2 { margin: 0; color: var(--rk-text); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dash-panel-heading p { margin: 4px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
.dash-count { min-width: 26px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; background: var(--rk-accent-soft); color: var(--rk-accent-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-attention .attention-list { gap: 0; margin: 0; padding: 0 16px; }
.dash-attention .attention-item { min-height: 58px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--rk-border-soft, var(--rk-border)); border-radius: 0; background: transparent; }
.dash-attention .attention-item:last-child { border-bottom: 0; }
.dash-attention .attention-item:hover { background: var(--rk-surface-2); transform: none; }
.dash-attention .attention-item > i { width: 6px; height: 6px; min-height: 6px; align-self: center; border-radius: 50%; }
.attention-copy { min-width: 0; }
.attention-copy > strong { color: var(--rk-text); font-size: 13px; font-weight: 600; }
.attention-copy > small { margin-top: 3px; color: var(--rk-muted); font-size: 13px; }
.attention-activity { display: inline-flex; align-items: center; gap: 5px; color: var(--rk-muted); font-size: 13px; font-style: normal; font-weight: 500; }
.attention-activity::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--activity-color,var(--rk-teal)); }
.attention-copy > small > span { margin-left: 4px; }
.attention-meta { display: grid; justify-items: end; gap: 2px; flex: none; }
.attention-meta > b { color: var(--rk-text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.attention-meta > small { margin: 0; color: var(--rk-muted); font-size: 13px; white-space: nowrap; }
.attention-meta > small.overdue { color: var(--rk-danger); }
.attention-meta > small.soon { color: var(--rk-warn); }
.attention-loading { padding: 22px 4px; color: var(--rk-muted); font-size: 13px; text-align: center; }
.dash-panel-footer { margin-top: auto; padding: 11px 20px; border-top: 1px solid var(--rk-border); }
.dash-panel-footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--rk-teal); font-size: 13px; font-weight: 500; text-decoration: none; }
.dash-panel-footer a:hover { text-decoration: underline; }
.dash-panel-footer svg { width: 13px; }
.dash-side { min-width: 0; display: grid; align-content: start; gap: var(--space-4); }
.dash-chart-panel { min-width: 0; padding: 16px; }
.dash-chart-panel > header { align-items: flex-start; }
.dash-chart-panel h3 { margin: 0; color: var(--rk-text); font-size: 14px; font-weight: 600; }
.dash-chart-panel header p { margin: 3px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
.dash-chart-panel header > strong { flex: none; color: var(--rk-muted); font-size: 13px; font-weight: 500; }
.dash-average { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 11px; border-radius: 6px; background: var(--rk-surface-2); }
.dash-average span { display: block; color: var(--rk-muted); font-size: 13px; font-weight: 500; }
.dash-average small { display: block; margin-top: 2px; color: var(--rk-muted); font-size: 13px; }
.dash-average > strong { color: var(--rk-teal); font-size: 20px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dash-chart-panel .status-stacked-chart { margin-top: 12px; }
.dash-chart-panel .status-chart-legend { margin-top: 10px; }
.dash-chart-panel .owner-progress-chart { margin-top: 14px; }
.dash-board .kanban { max-height: 500px; overflow-y: auto; align-items: start; }
.dash-board .lane { max-height: 500px; display: flex; flex-direction: column; }
.dash-board .lane-body { min-height: 0; overflow-y: auto; }
.dash-board .task-card { padding: 14px; }
.dash-board .task-card h4 { min-height: 0; font-size: 14px; line-height: 1.45; }
.task-date { flex-wrap: wrap; row-gap: 1px; }
.task-date small { flex-basis: 100%; padding-left: 18px; color: var(--rk-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }

.worklist-range-note { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 9px var(--space-5); border-bottom: 1px solid var(--border-soft); background: var(--surface-alt); color: var(--muted); font-size: 13px; }
.worklist-range-note strong { color: var(--ink); font-weight: 600; }
.worklist-range-note a { flex: none; color: var(--brand-teal-deep); font-size: 13px; font-weight: 500; text-decoration: none; }
.worklist-range-note a:hover { text-decoration: underline; }

@media (min-width: 1101px) {
    .dash-workspace { align-items: stretch; }
    .dash-side { grid-template-rows: auto 1fr; }
}
@media (max-width: 1100px) {
    .dash-workspace { grid-template-columns: 1fr; }
    .dash-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .rk-page-actions .dash-export { width: 42px; flex: none; padding: 0; }
    .rk-page-actions .dash-export span { display: none; }
    .dash-brief-path { padding: 12px 14px 13px; }
    .dash-brief-path .dash-deadline-track { gap: 4px 16px; }
    .dash-workspace { gap: var(--space-3); }
    .dash-side { grid-template-columns: 1fr; }
    .dash-panel-heading { padding: 14px 14px 12px; }
    .dash-attention .attention-list { padding: 0 10px; }
    .dash-panel-footer { padding: 10px 14px; }
    .dash-chart-panel { padding: 14px; }
    .dash-board .kanban { max-height: none; overflow: visible; }
    .dash-board .lane { max-height: none; }
    .worklist-range-note { align-items: flex-start; flex-direction: column; gap: 4px; padding: 9px var(--space-4); }
}

/* ==========================================================================
   Papan Operasi v2 — instrumen, gerak, dan lapisan interaktif
   ========================================================================== */

/* Sidebar: keterangan grup */
kbd {
    min-width: 20px;
    padding: 2px 5px;
    border: 1px solid var(--rk-line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--rk-surface-2);
    color: var(--rk-muted);
    font-family: var(--rk-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.main-nav > .nav-caption:first-of-type { padding-top: 2px; }

/* Jalur tenggat: pita instrumen navy */
.dash-brief-path { padding: 16px 20px 14px; border-top: 0; background: var(--rk-rail); color: var(--rk-rail-ink); }
.dash-brief-head h2 { color: var(--rk-rail-ink); font-size: 14px; font-weight: 600; }
.dash-brief-head .dash-text-link { color: var(--rk-rail-muted); }
.dash-brief-head .dash-text-link:hover { color: var(--rk-rail-ink); }
.rail { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: 10px; }
.rail-stop { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 0; border-left: 1px solid var(--rk-rail-rule); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.rail-stop:first-child { padding-left: 0; border-left: 0; }
.rail-stop-label { color: var(--rk-rail-muted); font-size: 12px; font-weight: 500; }
.rail-stop-value { color: var(--rk-rail-ink); font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.1; }
.rail-stop-bar { height: 5px; display: block; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.rail-stop-bar i { width: 100%; height: 100%; display: block; border-radius: inherit; background: var(--rail-tone, var(--rk-rail-week)); opacity: .95; transform: scaleX(var(--h, .04)); transform-origin: left; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.rail-stop[data-bucket="overdue"] { --rail-tone: var(--rk-rail-overdue); }
.rail-stop[data-bucket="today"] { --rail-tone: var(--rk-rail-today); }
.rail-stop[data-bucket="tomorrow"] { --rail-tone: var(--rk-rail-tomorrow); }
.rail-stop[data-bucket="soon"] { --rail-tone: var(--rk-rail-soon); }
.rail-stop[data-bucket="week"] { --rail-tone: var(--rk-rail-week); }
.rail-stop:hover, .rail-stop:focus-visible { background: var(--rk-rail-raised); }
.rail-stop:first-child:hover, .rail-stop:first-child:focus-visible { border-radius: 6px 0 0 0; }
.rail-stop:hover .rail-stop-bar i, .rail-stop:focus-visible .rail-stop-bar i { opacity: 1; }
.rail-stop.is-zero .rail-stop-value { color: var(--rk-rail-muted); }
.rail-preview { display: flex; align-items: center; gap: 10px; min-height: 42px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rk-rail-rule); }
.rail-preview-label { flex: none; color: var(--rk-rail-muted); font-size: 12px; font-weight: 500; }
.rail-preview-items { width: 100%; min-width: 0; display: flex; flex: 1; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rail-preview-items::-webkit-scrollbar { display: none; }
.rail-preview-item { min-width: 0; max-width: 280px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 4px 9px; border: 1px solid var(--rk-rail-rule); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--rk-rail-ink); font-size: 12px; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.rail-preview-item span { overflow: hidden; text-overflow: ellipsis; }
.rail-preview-item b { color: var(--rk-rail-muted); font-weight: 500; }
.rail-preview-item:hover { border-color: var(--rk-rail-muted); background: var(--rk-rail-raised); }
.rail-preview-empty { color: var(--rk-rail-muted); font-size: 12px; }

/* Skeleton papan */
.loading-state { min-height: 270px; display: block; padding-top: 18px; }
.loading-label { margin: 14px 0 0; color: var(--rk-muted); font-size: 13px; text-align: center; }
.loading-state > p:not(.loading-label) { margin: 18px 0 0; color: var(--rk-muted); font-size: 14px; text-align: center; }
.skeleton-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.skeleton-lane { display: grid; align-content: start; gap: 10px; padding: 12px; border-radius: var(--rk-radius-card); background: var(--rk-surface-2); }
.skeleton-line { width: 42%; height: 10px; border-radius: 999px; background: var(--rk-skeleton); animation: skeleton-pulse 1.2s var(--ease-in-out) infinite alternate; }
.skeleton-card { height: 92px; border-radius: 8px; background: var(--rk-skeleton); animation: skeleton-pulse 1.2s var(--ease-in-out) infinite alternate; }
.skeleton-lane > :nth-child(3) { animation-delay: .16s; }
.skeleton-lane > :nth-child(4) { animation-delay: .32s; }

/* Chart status: segmen bisa diklik dan legend jadi filter */
.dash-chart-panel { position: relative; }
.dash-chart-panel .status-stacked-chart { height: 44px; display: flex; gap: 2px; overflow: hidden; border-radius: 6px; background: var(--rk-accent-track); }
.status-segment { min-width: 0; flex: var(--share, 1) 1 0; padding: 0; border: 0; border-radius: 0; background: var(--rk-neutral-bg); color: transparent; }
.status-segment.terencana { background: var(--neutral-600); }
.status-segment.berjalan { background: var(--rk-teal-fill); }
.status-segment.selesai { background: var(--success); }
.status-segment.empty { flex: 1 1 100%; background: var(--rk-accent-track); }
.status-segment:first-child { border-radius: 6px 0 0 6px; }
.status-segment:last-child { border-radius: 0 6px 6px 0; }
.status-segment:only-child { border-radius: 6px; }
.status-segment:hover, .status-segment:focus-visible { filter: brightness(1.08); }
.status-stacked-chart:hover .status-segment { opacity: .7; }
.status-stacked-chart:hover .status-segment:hover { opacity: 1; }
.dash-chart-panel .status-chart-legend { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 10px; }
.status-chart-legend button { width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; text-align: left; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.status-chart-legend button:hover { background: var(--rk-surface-2); }
.status-chart-legend button[aria-pressed="true"] { border-color: var(--rk-line-strong); background: var(--rk-surface-2); }
.status-chart-legend button i { width: 8px; height: 8px; border-radius: var(--radius-circle); }
.status-chart-legend button small { color: var(--rk-muted); font-size: 13px; font-weight: 500; }
.status-chart-legend button strong { display: inline-flex; align-items: baseline; gap: 6px; color: var(--rk-text); font-size: 13px; font-weight: 600; }
.status-chart-legend button strong em { color: var(--rk-muted); font-size: 12px; font-style: normal; font-weight: 500; }
.chart-tip { position: absolute; z-index: var(--z-raised); padding: 5px 8px; border-radius: 5px; background: var(--rk-tip); color: var(--rk-rail-ink); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: var(--rk-shadow-overlay); transform: translate(-50%, -100%); }

/* Progres per PIC */
.owner-progress-row > span i { width: 100%; height: 100%; border-radius: inherit; background: var(--rk-teal-fill); transform: scaleX(var(--p, 0)); transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out) both; }
.owner-progress-row > b { color: var(--rk-teal); font-variant-numeric: tabular-nums; }

/* Papan: drag dan keyboard move */
.task-card[draggable="true"] { cursor: grab; }
.task-card.is-dragging { opacity: .55; cursor: grabbing; }
.kanban.is-dragging .lane { transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.kanban.is-dragging .lane-body { min-height: 72px; }
.lane.is-drop-target { background: var(--rk-teal-soft); box-shadow: inset 0 0 0 2px var(--rk-teal); }
.lane.is-drop-target .lane-body::after { content: 'Lepas di sini'; display: grid; place-items: center; min-height: 64px; border: 1px dashed var(--rk-teal); border-radius: 8px; color: var(--rk-teal); font-size: 13px; font-weight: 600; }
.board-hint { color: var(--rk-muted); font-size: 12px; }
.view-enter { animation: fade-up var(--dur-short) var(--ease-out) both; }

/* Toast dengan tindakan */
.toast.has-action { display: flex; align-items: center; gap: 12px; }
.toast-text { min-width: 0; }
.toast-action { flex: none; padding: 3px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 5px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; }
.toast-action:hover { background: rgba(255,255,255,.12); }

@media (max-width: 1100px) {
    .rk-breadcrumb a { flex: none; white-space: nowrap; }
    .topbar-search { width: min(280px, 30vw); }
    .profile > div { min-width: 0; max-width: 150px; }
    .profile strong, .profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}@media (max-width: 900px) {
    .skeleton-board { grid-template-columns: 1fr 1fr; }
    .skeleton-lane:last-child { display: none; }
}
@media (max-width: 700px) {
    .dash-brief-path { padding: 14px 14px 12px; }
    .rail-stop { padding: 8px 6px 0; }
    .rail-stop-label { font-size: 11px; }
    .rail-stop-value { font-size: 20px; }
    .rail-stop-bar { margin-top: 8px; }
    .rail-preview { align-items: stretch; flex-direction: column; gap: 6px; }
    .rail-preview-item { max-width: 210px; }
    .skeleton-board { grid-template-columns: 1fr; }
    .skeleton-lane:not(:first-child) { display: none; }
}
@media (hover: none) {
    .board-hint { display: none; }
}

@media print {
    body { background: white; }
    .theme-toggle, .theme-toggle-floating { display: none !important; }
    .report-actions, .report-filters, .persistent-layout .sidebar, .persistent-layout .page-topbar, .persistent-layout .screen-overlay, .rk-bottom-nav, .rk-more-sheet { display: none !important; }
    .persistent-layout .page-workspace { padding-left: 0; }
    .workspace > main { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
    .team-shell { width: 100%; padding: 0; }
    .team-panel, .report-metrics article { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .primary-button:active, .secondary-button:active, .logout-button:active, .icon-button:active, .logout-button:hover, .attention-item:hover { transform: none; }
}

/* ==========================================================================
   Dashboard monitoring — periode, grafik, dan antrian tindakan
   ========================================================================== */
.dashboard-period-control { min-width: 190px; display: grid; grid-template-columns: auto minmax(86px,1fr); align-items: center; gap: 10px; }
.dashboard-period-control > span { color: var(--rk-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.dashboard-period-control select { width: 100%; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--rk-control); border-radius: var(--rk-radius-control); background-color: var(--rk-surface); color: var(--rk-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dashboard-period-control select:focus-visible { border-color: var(--rk-teal); outline: 0; box-shadow: var(--focus-ring); }

.dashboard-kpi-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: var(--space-5); overflow: hidden; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); }
.dashboard-kpi { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--rk-border); }
.dashboard-kpi:first-child { border-left: 0; }
.dashboard-kpi > span, .dashboard-kpi > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-kpi > span { color: var(--rk-muted); font-size: 12px; font-weight: 600; }
.dashboard-kpi > strong { display: block; margin-top: 5px; color: var(--rk-text); font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.dashboard-kpi > small { margin-top: 5px; color: var(--rk-muted); font-size: 11px; }
.dashboard-kpi--alert > strong:not(.is-zero) { color: var(--rk-danger); }

.dashboard-visual-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,.72fr); gap: var(--rk-gap); margin-top: var(--rk-gap); }
.dashboard-detail-grid { display: grid; grid-template-columns: minmax(300px,1.18fr) repeat(2,minmax(240px,.91fr)); align-items: stretch; gap: var(--rk-gap); margin-top: var(--rk-gap); }
.dashboard-panel { min-width: 0; padding: 0; overflow: hidden; }
.dashboard-panel-head { min-height: 66px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 17px 12px; border-bottom: 1px solid var(--rk-border); }
.dashboard-panel-head h2 { margin: 0; color: var(--rk-text); font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.dashboard-panel-head p { margin: 3px 0 0; color: var(--rk-muted); font-size: 12px; line-height: 1.45; }
.dashboard-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; padding-top: 1px; }
.dashboard-chart-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--rk-muted); font-size: 11px; white-space: nowrap; }
.dashboard-chart-legend i, .dashboard-status-legend i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--rk-pill-neutral-ink); }
.dashboard-chart-legend .berjalan i, .dashboard-status-legend .berjalan i { background: var(--rk-pill-info-ink); }
.dashboard-chart-legend .selesai i, .dashboard-status-legend .selesai i { background: var(--rk-pill-ok-ink); }

.dashboard-month-chart { min-height: 250px; display: grid; grid-template-columns: repeat(12,minmax(28px,1fr)); gap: 8px; align-items: stretch; padding: 20px 18px 14px; border-bottom: 1px solid transparent; }
.dashboard-month { min-width: 0; height: 216px; display: grid; grid-template-rows: 20px 1fr 22px; align-items: end; justify-items: center; color: inherit; text-decoration: none; }
.dashboard-month-value { align-self: start; color: var(--rk-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.dashboard-month:hover .dashboard-month-value, .dashboard-month:focus-visible .dashboard-month-value, .dashboard-month.is-current .dashboard-month-value { opacity: 1; }
.dashboard-month-stack { width: min(28px,70%); height: var(--bar-height); min-height: 2px; display: flex; align-self: end; flex-direction: column-reverse; overflow: hidden; border-radius: 4px 4px 1px 1px; background: var(--rk-neutral-bg); box-shadow: 0 0 0 1px var(--rk-border); transform-origin: bottom; }
.dashboard-month-stack i { min-height: 3px; flex: var(--segment) 1 0; background: var(--rk-pill-neutral-ink); }
.dashboard-month-stack i.berjalan { background: var(--rk-pill-info-ink); }
.dashboard-month-stack i.selesai { background: var(--rk-pill-ok-ink); }
.dashboard-month-label { width: 100%; padding-top: 7px; border-top: 1px solid var(--rk-border); color: var(--rk-muted); font-size: 11px; text-align: center; }
.dashboard-month.is-current .dashboard-month-label { border-color: var(--rk-teal); color: var(--rk-teal); font-weight: 700; }
.dashboard-month:hover .dashboard-month-stack, .dashboard-month:focus-visible .dashboard-month-stack { box-shadow: 0 0 0 2px var(--rk-teal); }
.dashboard-month:focus-visible { outline: none; }

.dashboard-status-visual { display: grid; place-items: center; padding: 17px 16px 8px; }
.dashboard-status-ring-wrap { position: relative; width: 152px; height: 152px; display: grid; place-items: center; }
.dashboard-status-ring-wrap svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.dashboard-status-track, .dashboard-status-ring { fill: none; stroke-width: 13; }
.dashboard-status-track { stroke: var(--rk-neutral-bg); }
.dashboard-status-ring { stroke-linecap: butt; }
.dashboard-status-ring.terencana { stroke: var(--rk-pill-neutral-ink); }
.dashboard-status-ring.berjalan { stroke: var(--rk-pill-info-ink); }
.dashboard-status-ring.selesai { stroke: var(--rk-pill-ok-ink); }
.dashboard-status-ring-wrap > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dashboard-status-ring-wrap strong { color: var(--rk-text); font-size: 28px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.dashboard-status-ring-wrap small { margin-top: 4px; color: var(--rk-muted); font-size: 11px; }
.dashboard-status-legend { display: grid; gap: 1px; padding: 0 16px 15px; }
.dashboard-status-legend > div { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; border-bottom: 1px solid var(--rk-border-soft); }
.dashboard-status-legend > div:last-child { border-bottom: 0; }
.dashboard-status-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--rk-muted); font-size: 12px; }
.dashboard-status-legend strong { color: var(--rk-text); font-size: 12px; font-variant-numeric: tabular-nums; }
.dashboard-status-legend em { margin-left: 7px; color: var(--rk-muted); font-size: 11px; font-style: normal; font-weight: 500; }

.dashboard-attention { display: flex; flex-direction: column; }
.dashboard-attention .attention-list { max-height: 330px; display: grid; gap: 0; overflow-y: auto; margin: 0; padding: 0 13px; }
.dashboard-attention .attention-item { min-height: 58px; padding: 9px 3px; border: 0; border-bottom: 1px solid var(--rk-border-soft); border-radius: 0; background: transparent; }
.dashboard-attention .attention-item:last-child { border-bottom: 0; }
.dashboard-attention .attention-item:hover { background: var(--rk-surface-2); transform: none; }
.dashboard-attention .rk-empty-state { min-height: 238px; }
.dashboard-panel-footer { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--rk-border); }
.dashboard-panel-footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--rk-teal); font-size: 12px; font-weight: 600; text-decoration: none; }
.dashboard-panel-footer a:hover { text-decoration: underline; }
.dashboard-panel-footer svg { width: 13px; height: 13px; }

.dashboard-ranking { display: grid; gap: 0; padding: 8px 14px 14px; }
.dashboard-ranking-row { min-width: 0; display: grid; grid-template-columns: 22px minmax(92px,.9fr) minmax(58px,.72fr) 38px; align-items: center; gap: 7px; min-height: 46px; border-bottom: 1px solid var(--rk-border-soft); }
.dashboard-ranking-row:last-child { border-bottom: 0; }
.dashboard-ranking-index { color: var(--rk-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dashboard-ranking-copy { min-width: 0; }
.dashboard-ranking-copy strong, .dashboard-ranking-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-ranking-copy strong { color: var(--rk-text); font-size: 12px; font-weight: 600; }
.dashboard-ranking-copy small { margin-top: 2px; color: var(--rk-muted); font-size: 11px; }
.dashboard-ranking-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--rk-neutral-bg); }
.dashboard-ranking-track i { width: 100%; height: 100%; display: block; border-radius: inherit; background: var(--rk-teal-fill); transform: scaleX(var(--p,0)); transform-origin: left; }
.dashboard-ranking-row > b { color: var(--rk-text); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.dashboard-ranking .analytics-empty { min-height: 184px; display: grid; place-items: center; color: var(--rk-muted); font-size: 12px; text-align: center; }
.notification-item { text-decoration: none; }

@media (max-width: 1180px) {
    .dashboard-kpi-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .dashboard-kpi:nth-child(4) { border-left: 0; border-top: 1px solid var(--rk-border); }
    .dashboard-kpi:nth-child(5) { border-top: 1px solid var(--rk-border); }
    .dashboard-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-attention { grid-column: 1/-1; }
}
@media (max-width: 860px) {
    .dashboard-visual-grid { grid-template-columns: minmax(0,1fr); }
    .dashboard-status-panel { display: grid; grid-template-columns: minmax(170px,.55fr) minmax(200px,1fr); }
    .dashboard-status-panel .dashboard-panel-head { grid-column: 1/-1; }
    .dashboard-status-legend { align-content: center; padding: 16px; }
    .dashboard-month-chart { overflow-x: hidden; grid-template-columns: repeat(12,minmax(20px,1fr)); gap: 4px; }
    .dashboard-month-stack { width: min(22px,78%); }
}
@media (max-width: 640px) {
    .rk-page-header { align-items: stretch; }
    .dashboard-period-control { width: 100%; grid-template-columns: 1fr; gap: 5px; }
    .dashboard-kpi-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-kpi { border-top: 1px solid var(--rk-border); }
    .dashboard-kpi:nth-child(1), .dashboard-kpi:nth-child(2) { border-top: 0; }
    .dashboard-kpi:nth-child(odd) { border-left: 0; }
    .dashboard-kpi:nth-child(4) { border-left: 1px solid var(--rk-border); }
    .dashboard-chart-legend { justify-content: flex-start; }
    .dashboard-panel-head { min-height: 0; align-items: flex-start; flex-direction: column; gap: 8px; }
    .dashboard-status-panel { display: block; }
    .dashboard-detail-grid { grid-template-columns: minmax(0,1fr); }
    .dashboard-attention { grid-column: auto; }
    .dashboard-month-chart { padding-right: 12px; padding-left: 12px; }
    .dashboard-ranking-row { grid-template-columns: 20px minmax(100px,1fr) 42px; }
    .dashboard-ranking-track { grid-column: 2/4; width: 100%; margin-bottom: 7px; }
    .dashboard-ranking-row > b { grid-column: 3; grid-row: 1; }
}

/* Language control · My Workspace */
.language-switcher {
    position: relative;
    flex: none;
}
.language-switcher > summary { list-style: none; }
.language-switcher > summary::-webkit-details-marker { display: none; }
.language-trigger {
    min-width: 64px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rk-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.language-trigger:hover { background: var(--rk-surface-2); }
.language-trigger:focus-visible { outline: none; box-shadow: var(--rk-focus); }
.language-code { line-height: 1; font-variant-numeric: tabular-nums; }
.language-flag {
    width: 26px;
    height: 17px;
    display: block;
    flex: none;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(7, 31, 61, .14);
}
.language-menu {
    position: absolute;
    z-index: calc(var(--z-popover, 100) + 2);
    top: calc(100% + 8px);
    right: 0;
    width: 116px;
    display: grid;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--rk-border);
    border-radius: 12px;
    background: var(--rk-surface);
    box-shadow: var(--rk-shadow-overlay);
}
.language-option {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rk-text);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.language-option:hover { background: var(--rk-surface-2); }
.language-option.active { background: color-mix(in srgb, var(--rk-muted) 28%, var(--rk-surface)); color: var(--rk-text); }
.language-option:focus-visible { outline: none; box-shadow: var(--rk-focus); }
.language-option > span { min-width: 0; line-height: 1; }
.login-brand-tools { display: flex; align-items: center; gap: 10px; }
.login-language .language-trigger { background: rgba(255,255,255,.08); color: #fff; }
.login-language .language-trigger:hover { background: rgba(255,255,255,.14); }

@media (max-width: 700px) {
    .topbar-language .language-trigger { min-width: 60px; padding: 0 4px; }
    .login-brand { align-items: flex-start; }
    .login-brand-tools { align-items: flex-end; flex-direction: column-reverse; }
    .login-status-pill { display: none; }
}

/* ==========================================================================
   2026 UI/UX audit — lapisan override.
   Semantik warna status, mini sidebar, dashboard eksekutif, empty state,
   login preview, tab tampilan pekerjaan.
   ========================================================================== */
:root {
    --rk-pill-neutral-bg: #f1f4f7;
    --rk-pill-neutral-border: #e3e9ef;
    --rk-pill-neutral-ink: #35445a;
    --rk-pill-danger-bg: #fff0f2;
    --rk-pill-danger-border: #f2bec8;
    --rk-pill-danger-ink: #a32640;
    --rk-pill-warn-bg: #fff7e7;
    --rk-pill-warn-border: #f7d697;
    --rk-pill-warn-ink: #9a6200;
    --rk-pill-info-bg: #edf4ff;
    --rk-pill-info-border: #d8e1eb;
    --rk-pill-info-ink: #0b5b8f;
    --rk-pill-ok-bg: #eaf9f2;
    --rk-pill-ok-border: #bde7d5;
    --rk-pill-ok-ink: #08794e;
}
[data-theme="dark"] {
    --rk-pill-neutral-bg: #1b2c3d;
    --rk-pill-neutral-border: #2a4053;
    --rk-pill-neutral-ink: #c8d6e2;
    --rk-pill-danger-bg: #3a1520;
    --rk-pill-danger-border: #6b2638;
    --rk-pill-danger-ink: #fecdd3;
    --rk-pill-warn-bg: #3a2a0c;
    --rk-pill-warn-border: #6b4a12;
    --rk-pill-warn-ink: #fde68a;
    --rk-pill-info-bg: #132238;
    --rk-pill-info-border: #31445f;
    --rk-pill-info-ink: #7dd3fc;
    --rk-pill-ok-bg: #0d2b21;
    --rk-pill-ok-border: #1e5a42;
    --rk-pill-ok-ink: #86efac;
}

/* Status: netral untuk non-kritis, saturasi hanya untuk yang mendesak. */
.status-pill.terencana { border: 1px solid var(--rk-pill-neutral-border); background: var(--rk-pill-neutral-bg); color: var(--rk-pill-neutral-ink); }
.status-pill.berjalan { border: 1px solid var(--rk-pill-info-border); background: var(--rk-pill-info-bg); color: var(--rk-pill-info-ink); }
.status-pill.selesai { border: 1px solid var(--rk-pill-ok-border); background: var(--rk-pill-ok-bg); color: var(--rk-pill-ok-ink); }
.status-pill.overdue { border: 1px solid var(--rk-pill-danger-border); background: var(--rk-pill-danger-bg); color: var(--rk-pill-danger-ink); }
.status-label.terencana { color: var(--rk-pill-neutral-ink); }
.status-label.terencana i { background: var(--rk-pill-neutral-ink); }
.status-label.berjalan { color: var(--rk-pill-info-ink); }
.status-label.selesai { color: var(--rk-pill-ok-ink); }
.activity-badge { border: 1px solid var(--rk-pill-neutral-border); background: var(--rk-pill-neutral-bg); color: var(--rk-pill-neutral-ink); font-weight: 500; }
.activity-badge::before { background: var(--activity-color, var(--rk-teal-fill)); }
.priority { border: 1px solid var(--rk-pill-neutral-border); background: var(--rk-pill-neutral-bg); color: var(--rk-pill-neutral-ink); font-weight: 500; }
.priority.high { border-color: var(--rk-pill-warn-border); background: var(--rk-pill-warn-bg); color: var(--rk-pill-warn-ink); }
.attention-item > i { background: var(--rk-pill-neutral-ink); }
.attention-item.soon > i { background: var(--rk-pill-warn-ink); }
.attention-item.priority > i { background: var(--rk-pill-warn-ink); }
.attention-item.overdue > i { background: var(--rk-pill-danger-ink); }

/* Sidebar ciut (desktop): hanya ikon, hemat ruang horizontal. */
.sidebar { transition: transform .24s ease, width .18s ease; }
.sidebar-collapse { width: 30px; height: 30px; flex: none; display: grid; place-items: center; margin-left: auto; border: 0; border-radius: 6px; background: transparent; color: var(--sidebar-muted); cursor: pointer; }
.sidebar-collapse:hover { background: rgba(255,255,255,.08); color: var(--on-brand); }
.sidebar-collapse svg { width: 16px; transition: transform .18s ease; }
@media (min-width: 1024px) {
    html.rk-sidebar-mini { --sidebar-width: 72px; }
    html.rk-sidebar-mini .brand { justify-content: center; padding: 0; gap: 0; }
    html.rk-sidebar-mini .brand > span:not(.brand-mark),
    html.rk-sidebar-mini .nav-caption,
    html.rk-sidebar-mini .nav-item > span,
    html.rk-sidebar-mini .nav-item kbd,
    html.rk-sidebar-mini .sidebar-user-card > div { display: none; }
    html.rk-sidebar-mini .brand-mark { position: absolute; left: 50%; transform: translateX(-50%); }
    html.rk-sidebar-mini .sidebar-collapse { position: absolute; right: 8px; margin-left: 0; }
    html.rk-sidebar-mini .sidebar-collapse svg { transform: rotate(180deg); }
    html.rk-sidebar-mini .main-nav { padding: var(--space-4) 10px; }
    html.rk-sidebar-mini .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; }
    html.rk-sidebar-mini .nav-item { position: relative; justify-content: center; padding: 0; }
    html.rk-sidebar-mini .nav-item.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
    html.rk-sidebar-mini .nav-item b { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 11px; }
    html.rk-sidebar-mini .sidebar-user-card { grid-template-columns: 1fr; justify-items: center; gap: 6px; margin: 0 10px 10px; padding: 8px 4px; }
}

/* Dashboard eksekutif. */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rk-gap); margin-top: var(--space-6); }
.kpi-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 112px; overflow: hidden; padding: 16px 18px; border-radius: var(--rk-radius-card); background: var(--rk-surface); box-shadow: var(--rk-card-shadow); color: inherit; text-decoration: none; transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
a.kpi-card:hover { box-shadow: var(--rk-card-shadow-hover); transform: translateY(-1px); }
a.kpi-card:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: 2px; }
.kpi-card.is-danger .rk-stat-mark { color: var(--rk-danger); }
.kpi-card.is-warn .rk-stat-mark { color: var(--rk-warn); }
.kpi-label { color: var(--rk-muted); font-size: 13px; font-weight: 500; }
.kpi-value { margin-top: 6px; color: var(--rk-text); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-card.is-danger .kpi-value { color: var(--rk-danger); }
.kpi-card.is-warn .kpi-value { color: var(--rk-warn); }
.kpi-card.is-danger .kpi-value.is-zero, .kpi-card.is-warn .kpi-value.is-zero { color: var(--rk-text); }
.kpi-note { margin-top: auto; padding-top: 10px; color: var(--rk-muted); font-size: 12px; }
.kpi-bar { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: var(--rk-neutral-bg); }
.kpi-bar i { display: block; height: 100%; border-radius: inherit; background: var(--rk-teal-fill); }
.dash-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-4); }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dash-kpis { grid-template-columns: 1fr; } }

/* Empty state. */
.rk-empty-state { display: grid; justify-items: center; gap: 6px; padding: var(--space-9) var(--space-5); text-align: center; }
.rk-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--rk-surface-2); color: var(--rk-muted); }
.rk-empty-icon svg { width: 22px; height: 22px; }
.rk-empty-state h3 { margin: 8px 0 0; color: var(--rk-text); font-size: 15px; font-weight: 600; }
.rk-empty-state p { max-width: 46ch; margin: 0; color: var(--rk-muted); font-size: 13px; line-height: 1.5; }
.rk-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* Tab tampilan pekerjaan: Daftar / Papan / Kalender. */
.worklist-viewtabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-control); background: var(--rk-surface-2); }
.worklist-viewtabs a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-xs); color: var(--rk-muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.worklist-viewtabs a:hover { color: var(--rk-text); }
.worklist-viewtabs a.active { background: var(--rk-surface); color: var(--rk-text); box-shadow: var(--rk-card-shadow); }

/* Papan pekerjaan (mode kanban di pekerjaan.php). */
.kanban-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rk-gap); padding: var(--space-4); }
.kanban-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 4px; }
.kanban-col-head h2 { margin: 0; color: var(--rk-text); font-size: 13px; font-weight: 600; }
.kanban-col-head span { min-width: 22px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--rk-neutral-bg); color: var(--rk-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanban-card { width: 100%; display: block; padding: 12px; border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); color: inherit; text-align: left; cursor: grab; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.kanban-card:hover { border-color: var(--rk-teal); box-shadow: var(--rk-card-shadow-hover); }
.kanban-card:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: 2px; }
.kanban-card strong { display: block; color: var(--rk-text); font-size: 13px; font-weight: 600; line-height: 1.45; }
.kanban-card small { display: block; margin-top: 4px; color: var(--rk-muted); font-size: 12px; }
.kanban-card .status-pill { margin-top: 8px; }
.kanban-empty { padding: 18px; border: 1px dashed var(--rk-border); border-radius: 8px; color: var(--rk-muted); font-size: 12px; text-align: center; }
.kanban-card.is-dragging { opacity: .45; cursor: grabbing; }
.kanban-board.is-dragging .kanban-col { transition: background-color var(--dur-short) var(--ease-out), outline-color var(--dur-short) var(--ease-out); }
.kanban-col.is-drop-target { outline: 2px dashed var(--rk-teal); outline-offset: -2px; border-radius: var(--rk-radius-card); background: var(--rk-surface-2); }
@media (max-width: 1000px) { .kanban-board { grid-template-columns: 1fr; } }

/* Mikro-interaksi baris data. */
@media (hover: hover) {
    .worklist-row:hover { background: var(--rk-surface-2); box-shadow: inset 3px 0 0 var(--rk-border); }
}

/* Navigasi aktif lebih tegas + ciut hanya untuk desktop. */
.nav-item.active { background: rgba(255,255,255,.14); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-aqua); }
.nav-item.active svg { color: var(--on-brand); }
@media (max-width: 1023px) { .sidebar-collapse { display: none; } }
.kanban-card .dash-cta-row { margin-top: 8px; gap: 6px; }
.status-label.berjalan i { background: var(--rk-pill-info-ink); }





/* Login: peta jalur program sebagai latar panel gelap. */
.login-field { overflow: hidden; isolation: isolate; }
.login-field > :not(.login-route) { position: relative; z-index: 1; }
.login-claim { position: relative; }
.login-route {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    color: var(--on-brand-soft); pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 52% 30% at 44% 51%, rgba(0,0,0,.04) 0 45%, rgba(0,0,0,.5) 78%, #000 100%);
    mask-image: radial-gradient(ellipse 52% 30% at 44% 51%, rgba(0,0,0,.04) 0 45%, rgba(0,0,0,.5) 78%, #000 100%);
}
.login-compass .ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .2; }
.login-compass .ring-dotted { opacity: .26; }
.login-compass .ring-bevel { opacity: .24; }
.login-compass .ring-cross { fill: none; stroke: currentColor; stroke-width: 1; opacity: .16; }
.route-base { fill: none; stroke: currentColor; stroke-width: 1; opacity: .3; }
.route-line { fill: none; stroke: var(--brand-aqua); stroke-width: 1.6; opacity: .8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: login-route-draw 1.2s var(--ease-out) .2s forwards; }
.route-branch { fill: none; stroke: currentColor; stroke-width: 1; opacity: .32; }
.route-branch-dash { stroke-dasharray: 2 9; opacity: .4; }
.login-nodes { opacity: 0; animation: login-nodes-in 500ms var(--ease-out) 1s forwards; }
.login-node .halo { fill: currentColor; opacity: .2; }
.login-node .dot { fill: currentColor; stroke: var(--brand-navy); stroke-width: 3; }
.login-node .dot-square { stroke-width: 2; }
.login-node.ms-info { color: var(--brand-aqua); }
.login-node.ms-warn { color: var(--amber-500); }
.login-node.ms-ok { color: var(--green-500); }
@keyframes login-route-draw { to { stroke-dashoffset: 0; } }
@keyframes login-nodes-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .route-line { animation: none; stroke-dashoffset: 0; }
    .login-nodes { animation: none; opacity: 1; }
}
@media (max-width: 900px) {
    /* Panel bertumpuk jadi pendek: peta jalur hanya tersisa potongan yang membingungkan. */
    .login-route { display: none; }
}

.login-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.login-field-row > span { color: var(--neutral-800); font-size: 13px; font-weight: 600; }
.login-forgot { padding: 0; border: 0; background: transparent; color: var(--teal-600); font-size: 13px; font-weight: 600; cursor: pointer; }
.login-forgot:hover { text-decoration: underline; }
.auth-form .login-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--neutral-700); font-size: 14px; font-weight: 500; }
.auth-form .login-remember > span { color: var(--neutral-700); font-size: 14px; font-weight: 500; }
.login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-600); }
.login-forgot-hint { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--rk-surface-2); color: var(--neutral-700); font-size: 13px; line-height: 1.5; }
.login-forgot-hint[hidden] { display: none; }

/* Pekerjaan: formulir inti, milestone, dan pratinjau lampiran WBS. */
.task-form-modal { width: min(720px,100%); max-height: min(820px,calc(100dvh - 32px)); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.task-form-modal > header { position: static; padding: 22px 28px 20px; }
.task-form-modal > header p { max-width: 62ch; line-height: 1.55; }
.task-form-modal > form { min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto auto; overflow: hidden; }
.task-core-form { min-height: 0; align-content: start; align-items: start; column-gap: 20px; row-gap: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px 28px 20px; }
.task-core-form label { min-width: 0; align-content: start; gap: 7px; }
.task-core-form label > span { min-height: 20px; display: flex; align-items: center; line-height: 1.35; }
.task-core-form label > small { min-height: 18px; margin: 0; line-height: 1.4; }
.task-core-form input, .task-core-form select { height: 44px; font-size: 14px; }
.task-core-form textarea { min-height: 112px; font-size: 14px; line-height: 1.55; }
.task-form-modal .form-note { margin: 0; padding: 12px 28px; border-top: 1px solid var(--line-soft); background: var(--rk-surface-2); line-height: 1.5; }
.task-form-modal form > footer { position: static; min-height: 76px; align-items: center; padding: 16px 28px; }
.task-form-modal form > footer button { min-height: 44px; }
.task-core-form label.has-error > span { color: var(--rk-danger); }
.task-core-form label.has-error input, .task-core-form label.has-error select, .task-core-form label.has-error textarea { border-color: var(--rk-danger); }
.task-milestones-section { min-width: 0; grid-column: 1 / -1; padding: var(--space-4); border: 1px solid var(--rk-border); border-radius: var(--rk-radius-card); background: var(--rk-surface); }
.task-milestones-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.task-milestones-heading h3 { margin: 0; color: var(--rk-text); font-size: 16px; }
.task-milestones-heading p { margin: 4px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.45; }
.task-milestones-heading > div:last-child { display: flex; align-items: center; gap: 8px; }
.task-milestones-heading strong { min-width: 44px; color: var(--rk-teal); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.task-milestones-list { position: relative; margin-top: 14px; }
.task-milestone-item { position: relative; display: grid; grid-template-columns: 20px 28px minmax(0,1fr) 126px 34px; align-items: center; gap: 8px; min-height: 64px; padding: 9px 0; border-bottom: 1px solid var(--rk-rule); transition: background-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.task-milestone-item:last-child { border-bottom: 0; }
.task-milestone-item::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--rk-border); }
.task-milestone-item:first-child::before { top: 50%; }
.task-milestone-item:last-child::before { bottom: 50%; }
.task-milestone-node { position: relative; z-index: 1; width: 10px; height: 10px; margin-left: 5px; border: 2px solid var(--rk-surface); border-radius: 50%; background: var(--neutral-450); box-shadow: 0 0 0 1px var(--neutral-450); }
.task-milestone-item.berjalan .task-milestone-node { background: var(--amber-500); box-shadow: 0 0 0 1px var(--amber-500); }
.task-milestone-item.selesai .task-milestone-node { background: var(--rk-teal); box-shadow: 0 0 0 1px var(--rk-teal); }
.task-milestone-drag { width: 28px; height: 34px; display: grid; place-items: center; color: var(--rk-muted); cursor: grab; touch-action: none; }
.task-milestone-drag svg { width: 18px; height: 18px; }
.task-milestone-item.is-dragging { opacity: .45; background: var(--rk-surface-2); }
.task-milestone-item.is-dragging .task-milestone-drag { cursor: grabbing; }
.task-milestone-item:focus-visible { outline: 2px solid var(--rk-teal); outline-offset: 2px; }
.task-milestone-copy { min-width: 0; }
.task-milestone-copy small, .task-milestone-copy span { display: block; color: var(--rk-muted); font-size: 12px; }
.task-milestone-copy strong { display: block; margin: 2px 0; color: var(--rk-text); font-size: 14px; line-height: 1.35; }
.task-milestone-copy p { margin: 4px 0 0; color: var(--rk-muted); font-size: 13px; line-height: 1.4; }
.task-milestone-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.task-milestone-files > span { margin-right: 2px; color: var(--rk-muted); font-size: 12px; font-weight: 600; }
.task-milestone-files button { max-width: 210px; height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--rk-border); border-radius: 7px; background: var(--rk-surface); color: var(--rk-text); cursor: pointer; }
.task-milestone-files button:hover { border-color: var(--rk-teal); }
.task-milestone-files button svg { width: 14px; height: 14px; flex: none; color: var(--rk-muted); }
.task-milestone-files button span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-milestone-files.is-empty > span { font-weight: 400; }
.task-milestone-item select { height: 34px; border: 1px solid var(--rk-control); border-radius: 8px; background: var(--rk-surface); color: var(--rk-text); font-size: 12px; }
.task-milestones-empty { margin-top: 12px; padding: 14px; border: 1px dashed var(--rk-border); border-radius: 8px; color: var(--rk-muted); font-size: 13px; text-align: center; }
.task-milestone-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rk-border); }
.task-milestone-form[hidden] { display: none; }
.task-milestone-form label { display: grid; gap: 6px; color: var(--rk-text); font-size: 13px; font-weight: 600; }
.task-milestone-form label > small { color: var(--rk-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.task-milestone-form label.wide, .task-milestone-form-actions { grid-column: 1 / -1; }
.task-milestone-form input, .task-milestone-form select, .task-milestone-form textarea { width: 100%; border: 1px solid var(--rk-control); border-radius: 8px; background: var(--rk-surface); color: var(--rk-text); }
.task-milestone-form input, .task-milestone-form select { height: 40px; }
.task-milestone-form textarea { padding: 10px 12px; resize: vertical; }
.task-milestone-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.task-milestone-link-note { grid-column: 1 / -1; margin: 0; color: var(--rk-muted); font-size: 12px; }
.wbs-milestone-mark { display: inline-flex; align-items: center; gap: 2px; color: var(--rk-teal); font-size: 12px; }
.wbs-milestone-mark svg { width: 17px; height: 17px; }
.wbs-milestone-mark b { font-variant-numeric: tabular-nums; }
.wbs-item-actions .wbs-add-milestone:hover { background: var(--rk-teal-soft); color: var(--rk-teal); }
.wbs-attachment-row .wbs-attachment-preview { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: var(--rk-text); text-align: left; cursor: pointer; }
.wbs-attachment-row .wbs-attachment-preview > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--rk-muted); }
.wbs-watermark-option { display: inline-flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.wbs-watermark-option input { width: 18px !important; height: 18px !important; margin: 0; accent-color: var(--rk-teal); }

.task-milestone-timeline-backdrop { position: fixed; inset: 0; z-index: 1450; display: grid; place-items: center; padding: 20px; background: rgba(7,31,61,.7); }
.task-milestone-timeline-backdrop[hidden] { display: none; }
.task-milestone-timeline-dialog { width: min(1180px, calc(100vw - 40px)); height: min(780px, calc(100dvh - 40px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border-radius: 16px; outline: 0; background: var(--rk-surface); box-shadow: 0 20px 55px rgba(0,0,0,.24); }
.task-milestone-timeline-dialog > header, .task-milestone-timeline-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--rk-surface); }
.task-milestone-timeline-dialog > header { border-bottom: 1px solid var(--rk-border); }
.task-milestone-timeline-dialog > footer { border-top: 1px solid var(--rk-border); }
.task-milestone-timeline-dialog > header h2 { margin: 0; color: var(--rk-text); font-size: 18px; }
.task-milestone-timeline-dialog > header p { margin: 3px 0 0; color: var(--rk-muted); font-size: 13px; }
.task-milestone-timeline-body { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); padding: 16px 20px 12px; background: var(--rk-surface-2); }
.task-milestone-timeline-body > p { margin: 0 0 12px; color: var(--rk-muted); font-size: 13px; line-height: 1.45; }
.task-milestone-timeline-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--neutral-450) var(--track); scrollbar-width: thin; }
.task-milestone-timeline-track { --timeline-count: 1; position: relative; width: max(100%, calc(var(--timeline-count) * 238px)); min-height: 500px; display: grid; grid-template-columns: repeat(var(--timeline-count), minmax(210px,1fr)); padding: 0 54px; }
.task-milestone-timeline-line { position: absolute; z-index: 0; top: 237px; right: 38px; left: 38px; height: 6px; border-radius: 3px; background: var(--neutral-350); }
.task-milestone-timeline-line > span { display: block; width: var(--timeline-progress,0%); height: 100%; border-radius: inherit; background: var(--rk-teal); }
.task-milestone-timeline-line::after { content: ""; position: absolute; top: -6px; right: -18px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 18px solid var(--neutral-500); }
.task-milestone-timeline-point { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-rows: 220px 40px 220px; justify-items: center; padding: 0 10px; }
.task-milestone-timeline-point::after { content: ""; position: absolute; left: 50%; width: 1px; transform: translateX(-50%); background: var(--neutral-450); }
.task-milestone-timeline-point.is-top::after { top: 204px; height: 36px; }
.task-milestone-timeline-point.is-bottom::after { top: 240px; height: 36px; }
.task-milestone-timeline-node { z-index: 2; grid-row: 2; align-self: center; width: 18px; height: 18px; border: 4px solid var(--rk-surface-2); border-radius: 50%; background: var(--neutral-500); box-shadow: 0 0 0 2px var(--neutral-500); }
.task-milestone-timeline-point.berjalan .task-milestone-timeline-node { background: var(--amber-500); box-shadow: 0 0 0 2px var(--amber-500); }
.task-milestone-timeline-point.selesai .task-milestone-timeline-node { background: var(--rk-teal); box-shadow: 0 0 0 2px var(--rk-teal); }
.task-milestone-timeline-card { width: 100%; max-height: 204px; align-self: end; overflow: auto; padding: 13px 14px; border: 1px solid var(--rk-border); border-radius: 9px; background: var(--rk-surface); color: var(--rk-text); }
.task-milestone-timeline-point.is-top .task-milestone-timeline-card { grid-row: 1; margin-bottom: 16px; }
.task-milestone-timeline-point.is-bottom .task-milestone-timeline-card { grid-row: 3; align-self: start; margin-top: 16px; }
.task-milestone-timeline-card > small { display: block; color: var(--rk-teal); font-size: 12px; font-weight: 700; }
.task-milestone-timeline-card > strong { display: block; margin: 4px 0; color: var(--rk-text); font-size: 14px; line-height: 1.35; }
.task-milestone-timeline-card > span, .task-milestone-timeline-card > p { display: block; margin: 0; color: var(--rk-muted); font-size: 12px; line-height: 1.45; }
.task-milestone-timeline-card > p { margin-top: 5px; }
.task-milestone-timeline-status { display: inline-flex; align-items: center; margin-top: 8px; color: var(--rk-muted); font-size: 12px; font-weight: 600; }
.task-milestone-timeline-documents { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rk-rule); }
.task-milestone-timeline-document { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 28px; align-items: center; gap: 4px; }
.task-milestone-timeline-document > button { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--rk-text); text-align: left; cursor: pointer; }
.task-milestone-timeline-document > button:hover span { color: var(--rk-teal); text-decoration: underline; }
.task-milestone-timeline-document svg { width: 14px; height: 14px; flex: none; color: var(--rk-muted); }
.task-milestone-timeline-document > button span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-milestone-timeline-document > a { width: 28px; height: 28px; display: grid; place-items: center; color: var(--rk-muted); }
.task-milestone-timeline-document > a:hover { color: var(--rk-teal); }
.task-milestone-timeline-dialog > footer > div { display: flex; align-items: center; gap: 9px; }
.task-milestone-timeline-dialog > footer > div:first-child strong { color: var(--rk-text); font-size: 20px; font-variant-numeric: tabular-nums; }
.task-milestone-timeline-dialog > footer > div:first-child span { color: var(--rk-muted); font-size: 13px; }
.task-milestone-timeline-dialog > footer .secondary-button svg { width: 16px; height: 16px; }
.task-milestone-timeline-empty { grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 420px; color: var(--rk-muted); font-size: 13px; text-align: center; }

.attachment-preview-backdrop { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px; background: rgba(7,31,61,.64); }
.attachment-preview-backdrop[hidden] { display: none; }
.attachment-preview-dialog { position: relative; width: min(980px, calc(100vw - 48px)); height: min(760px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border-radius: 16px; background: var(--rk-surface); box-shadow: 0 20px 55px rgba(0,0,0,.24); transition: width var(--dur-short) var(--ease-out), height var(--dur-short) var(--ease-out); }
.attachment-preview-dialog.is-maximized { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 10px; }
.attachment-preview-dialog > header, .attachment-preview-dialog > footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--rk-surface); }
.attachment-preview-dialog > header { border-bottom: 1px solid var(--rk-border); }
.attachment-preview-dialog > footer { border-top: 1px solid var(--rk-border); }
.attachment-preview-dialog > header > div:last-child { display: flex; gap: 6px; }
.attachment-preview-dialog h3 { margin: 0; color: var(--rk-text); font-size: 16px; }
.attachment-preview-dialog header p, .attachment-preview-dialog footer span { margin: 3px 0 0; color: var(--rk-muted); font-size: 12px; }
.attachment-preview-stage { position: relative; z-index: 1; min-height: 0; display: grid; place-items: center; overflow: auto; background: var(--rk-surface-2); }
.attachment-preview-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.attachment-preview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.attachment-preview-unavailable { max-width: 440px; padding: 24px; color: var(--rk-muted); text-align: center; }
.attachment-preview-unavailable svg { width: 42px; height: 42px; }
.attachment-preview-unavailable strong { display: block; margin-top: 10px; color: var(--rk-text); }
.attachment-preview-unavailable p { margin: 6px 0 0; line-height: 1.5; }
.attachment-watermark { position: absolute; z-index: 2; left: 50%; top: 50%; width: 125%; transform: translate(-50%,-50%) rotate(-24deg); color: rgba(7,31,61,.18); font-size: clamp(20px, 3vw, 42px); font-weight: 700; letter-spacing: .08em; text-align: center; pointer-events: none; white-space: nowrap; }
.attachment-watermark[hidden] { display: none; }
.preview-restore-icon { display: none; }
.attachment-preview-dialog.is-maximized .preview-expand-icon { display: none; }
.attachment-preview-dialog.is-maximized .preview-restore-icon { display: block; }

@media (max-width: 720px) {
    .task-form-modal { width: 100%; max-height: calc(100dvh - 16px); }
    .task-form-modal > header { padding: 20px; }
    .task-core-form { padding: 20px; }
    .task-form-modal .form-note { padding: 12px 20px; }
    .task-form-modal form > footer { padding: 14px 20px; }
    .task-core-form, .task-milestone-form { grid-template-columns: 1fr; }
    .task-milestone-form label.wide, .task-milestone-form-actions { grid-column: 1; }
    .task-milestone-item { grid-template-columns: 20px 28px minmax(0,1fr) 44px; }
    .task-milestone-item select { grid-column: 3 / -1; width: 100%; }
    .task-milestone-link-note { grid-column: 1; }
    .attachment-preview-backdrop { padding: 8px; }
    .attachment-preview-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 10px; }
    .attachment-preview-dialog > footer { align-items: flex-start; flex-direction: column; }
    .attachment-preview-dialog > footer .primary-button { width: 100%; justify-content: center; }
    .task-milestone-timeline-backdrop { padding: 8px; }
    .task-milestone-timeline-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 10px; }
    .task-milestone-timeline-dialog > header, .task-milestone-timeline-dialog > footer { padding: 13px 14px; }
    .task-milestone-timeline-body { padding: 13px 14px 10px; }
    .task-milestone-timeline-track { width: max(100%, calc(var(--timeline-count) * 218px)); padding: 0 34px; }
    .task-milestone-timeline-dialog > footer { align-items: flex-start; flex-direction: column; }
    .task-milestone-timeline-dialog > footer > div:last-child { width: 100%; }
    .task-milestone-timeline-dialog > footer > div:last-child > * { flex: 1; }
}

/* ========================================================================== */
/* Executive Premium Corporate · v9.0.0                                      */
/* Lapisan visual global. Tidak mengubah struktur, perilaku, atau alur bisnis. */
/* ========================================================================== */
:root {
    --neutral-25: #f2f6f9;
    --neutral-50: #f7f9fb;
    --neutral-60: #f4f7f9;
    --neutral-75: #f8fafb;
    --neutral-100: #ebf0f4;
    --neutral-150: #e5ebf0;
    --neutral-200: #dde6ed;
    --neutral-300: #d3dfe8;
    --neutral-400: #bdcbd7;
    --neutral-600: #5e7386;
    --neutral-700: #465b70;
    --neutral-800: #263d54;
    --neutral-900: #102a43;
    --neutral-950: #071f3d;

    --brand-navy: #071f3d;
    --brand-blue: #0d3158;
    --brand-teal-deep: #087b83;
    --brand-turquoise: #14b8b1;
    --brand-aqua: #73ddd8;
    --brand-gradient: linear-gradient(135deg, #071f3d 0%, #0b355c 58%, #087b83 125%);

    --canvas: #f2f6f9;
    --surface: #ffffff;
    --surface-alt: #f7f9fb;
    --surface-soft: #f4f7f9;
    --surface-muted: #edf2f5;
    --surface-tint: #eef8f7;
    --border: #d8e2ea;
    --border-soft: #dbe4eb;
    --border-strong: #c5d2dc;
    --line-soft: #e7edf2;
    --track: #e5ebf0;
    --ink: #102a43;
    --ink-strong: #071f3d;
    --ink-soft: #40576d;
    --muted: #5e7184;
    --muted-soft: #607486;

    --sidebar-width: 224px;
    --rk-ground: #f2f6f9;
    --rk-frame: #f2f6f9;
    --rk-surface: #ffffff;
    --rk-surface-2: #f7f9fb;
    --rk-border: #dbe4eb;
    --rk-rule: #e8edf2;
    --rk-control: #c7d4de;
    --rk-text: #102a43;
    --rk-muted: #5e7184;
    --rk-faint: #607486;
    --rk-navy: #071f3d;
    --rk-navy-2: #0d3158;
    --rk-teal: #087b83;
    --rk-teal-fill: #14b8b1;
    --rk-teal-soft: #edf8f7;
    --rk-radius-card: 14px;
    --rk-radius-control: 10px;
    --rk-radius-chip: 8px;
    --rk-radius-overlay: 18px;
    --rk-card-pad: 22px;
    --rk-page-x: 32px;
    --rk-section: 44px;
    --rk-action: #071f3d;
    --rk-action-hover: #0d3158;
    --rk-on-action: #ffffff;
    --rk-card-shadow: none;
    --rk-card-shadow-hover: 0 10px 28px rgba(7, 31, 61, .09);
    --rk-shadow-overlay: 0 22px 60px rgba(7, 31, 61, .20);
    --rk-focus: 0 0 0 2px #ffffff, 0 0 0 5px rgba(20, 184, 177, .30);
    --shadow-button: 0 8px 18px rgba(7, 31, 61, .14);
    --shadow-lg: 0 28px 80px rgba(3, 16, 31, .28);
    --shadow-xl: 0 34px 96px rgba(3, 16, 31, .34);
    --focus-ring: 0 0 0 4px rgba(20, 184, 177, .17);
}

[data-theme="dark"] {
    --neutral-25: #07111b;
    --neutral-50: #0d1925;
    --neutral-60: #10202e;
    --neutral-75: #122331;
    --neutral-100: #182a39;
    --neutral-150: #1e3242;
    --neutral-200: #24394a;
    --neutral-300: #30485a;
    --neutral-400: #496277;
    --neutral-600: #9aafc0;
    --neutral-700: #b6c7d4;
    --neutral-800: #d4e0e9;
    --neutral-900: #edf4f8;
    --neutral-950: #f7fafc;
    --canvas: #07111b;
    --surface: #0e1c29;
    --surface-alt: #122331;
    --surface-soft: #142634;
    --surface-muted: #182b3b;
    --border: #263c4d;
    --border-soft: #263c4d;
    --border-strong: #395367;
    --line-soft: #203646;
    --track: #203646;
    --ink: #edf4f8;
    --ink-strong: #ffffff;
    --ink-soft: #c1d0dc;
    --muted: #a5b7c5;
    --muted-soft: #94aabc;
    --rk-ground: #07111b;
    --rk-frame: #07111b;
    --rk-surface: #0e1c29;
    --rk-surface-2: #122331;
    --rk-border: #263c4d;
    --rk-rule: #203646;
    --rk-control: #395367;
    --rk-text: #edf4f8;
    --rk-muted: #a5b7c5;
    --rk-faint: #94aabc;
    --rk-action: #f4f8fb;
    --rk-action-hover: #dce7ee;
    --rk-on-action: #071f3d;
    --rk-card-shadow: none;
    --rk-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, .26);
    --rk-focus: 0 0 0 2px #0e1c29, 0 0 0 5px rgba(94, 234, 212, .30);
}

html { scrollbar-color: var(--neutral-400) var(--rk-ground); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--rk-ground); }
*::-webkit-scrollbar-thumb { border: 3px solid var(--rk-ground); border-radius: 999px; background: var(--neutral-400); }
*::-webkit-scrollbar-thumb:hover { background: var(--neutral-600); }

body {
    background: var(--rk-ground);
    color: var(--rk-text);
    font-size: 15px;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(20, 184, 177, .24); color: var(--rk-text); }

/* Shell dan navigasi */
.sidebar {
    background: var(--brand-gradient);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .06), 14px 0 40px rgba(5, 23, 43, .08);
}
.brand { height: 72px; padding: 0 16px; border-bottom-color: rgba(255, 255, 255, .09); }
.brand-mark {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(115, 221, 216, .26);
    border-radius: 11px;
    background: rgba(20, 184, 177, .12);
}
.brand-mark img { width: 24px; height: 24px; }
.brand strong { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.main-nav { padding: 18px 12px; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.nav-caption { padding: 0 10px 8px; color: #9eb4c5; font-size: 12px; font-weight: 600; }
.nav-group + .nav-caption { margin-top: 20px; }
.nav-item {
    min-height: 40px;
    gap: 11px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c7d7e4;
    font-size: 14px;
}
.nav-item + .nav-item { margin-top: 3px; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .065); }
.nav-item.active {
    border-color: rgba(115, 221, 216, .20);
    background: rgba(255, 255, 255, .11);
    box-shadow: none;
    color: #ffffff;
}
.nav-item.active svg { color: #73ddd8; }
.sidebar-user-card {
    margin: 0 12px 12px;
    padding: 10px;
    border-color: rgba(255, 255, 255, .10);
    border-radius: 12px;
    background: rgba(255, 255, 255, .065);
}
.sidebar-user-avatar { background: rgba(115, 221, 216, .14); color: #ffffff; }
.sidebar-collapse { border-radius: 8px; }

.workspace { background: var(--rk-ground); }
.topbar {
    height: 64px;
    padding: 0 28px;
    border-bottom-color: var(--rk-border);
    background: var(--rk-surface);
}
.workspace > main {
    min-height: calc(100vh - 64px);
    padding: 30px 36px 52px;
}
.rk-breadcrumb { color: var(--rk-muted); }
.rk-breadcrumb strong { color: var(--rk-text); font-weight: 600; }
.topbar-divider { background: var(--rk-border); }
.search-box input {
    height: 38px;
    border-color: var(--rk-control);
    border-radius: 10px;
    background: var(--rk-surface-2);
}
.search-box input:hover { border-color: var(--neutral-400); }
.profile > span { background: var(--rk-navy); color: #ffffff; }

/* Hierarki halaman */
.page-heading,
.rk-page-header,
.team-heading { align-items: center; }
.page-heading h1,
.rk-page-header h1,
.team-heading h1 {
    color: var(--rk-text);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 650;
    letter-spacing: -.03em;
}
.page-heading > div > p:last-child,
.rk-page-header p,
.team-heading > div > p:last-child { color: var(--rk-muted); line-height: 1.55; }
.work-section { margin-top: 24px; }

/* Kontrol */
.primary-button,
.secondary-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--rk-radius-control);
    font-size: 14px;
    font-weight: 650;
}
.primary-button {
    border-color: var(--rk-action);
    background: var(--rk-action);
    color: var(--rk-on-action);
    box-shadow: var(--shadow-button);
}
.primary-button:hover {
    border-color: var(--rk-action-hover);
    background: var(--rk-action-hover);
    box-shadow: 0 10px 24px rgba(7, 31, 61, .18);
    transform: translateY(-1px);
}
.secondary-button {
    border-color: var(--rk-control);
    background: var(--rk-surface);
    color: var(--rk-text);
}
.secondary-button:hover { border-color: var(--rk-navy-2); background: var(--rk-surface-2); color: var(--rk-navy-2); }
.icon-button,
.icon-action { border-radius: 9px; }
.icon-button:hover,
.icon-action:hover { background: var(--rk-surface-2); color: var(--rk-navy-2); }

input,
select,
textarea {
    border-color: var(--rk-control);
    border-radius: var(--rk-radius-control);
    background: var(--rk-surface);
    color: var(--rk-text);
}
input,
select { height: 44px; padding-right: 12px; padding-left: 12px; }
textarea { padding: 12px; line-height: 1.55; }
input:hover,
select:hover,
textarea:hover { border-color: var(--neutral-400); }
input:focus,
select:focus,
textarea:focus { border-color: var(--rk-teal); box-shadow: var(--rk-focus); }
input::placeholder,
textarea::placeholder { color: var(--rk-faint); opacity: 1; }

/* Permukaan: satu sistem untuk dashboard, tabel, filter, dan pengaturan */
.panel,
.team-panel,
.activity-card,
.calendar-panel,
.worklist-panel,
.report-metrics article,
.dashboard-kpi-strip,
.task-list,
.team-search,
.report-filters,
.calendar-toolbar,
.calendar-google-card {
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-card);
    background: var(--rk-surface);
    box-shadow: none;
}
.panel,
.team-panel,
.activity-card,
.calendar-panel,
.dashboard-kpi-strip,
.calendar-google-card { transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.activity-card:hover { border-color: var(--neutral-400); box-shadow: var(--rk-card-shadow-hover); transform: translateY(-2px); }

.table-heading { padding: 20px 22px; }
.table-heading h2 { color: var(--rk-text); font-size: 19px; font-weight: 650; }
.table-heading p,
.table-heading span { color: var(--rk-muted); }
.rk-table th { color: var(--rk-muted); font-weight: 600; }
.rk-table td { color: var(--rk-text); }
.rk-table tr,
.worklist-row,
.list-row { border-color: var(--rk-rule); }
.rk-table tbody tr:hover,
.worklist-row:hover,
.list-row:hover { background: var(--rk-surface-2); }

/* Dashboard: data menjadi fokus, bukan dekorasi kartu */
.dashboard-kpi-strip { overflow: hidden; }
.dashboard-kpi { min-height: 104px; padding: 18px 20px; border-left-color: var(--rk-rule); }
.dashboard-kpi > span { color: var(--rk-muted); font-size: 13px; }
.dashboard-kpi > strong { margin-top: 7px; color: var(--rk-text); font-size: 28px; font-weight: 600; }
.dashboard-kpi > small { margin-top: 7px; color: var(--rk-faint); font-size: 12px; }
.dashboard-panel-head { min-height: 72px; padding: 18px 20px 14px; border-bottom-color: var(--rk-rule); }
.dashboard-panel-head h2 { font-size: 16px; font-weight: 650; }
.dashboard-panel-head p { margin-top: 4px; color: var(--rk-muted); font-size: 13px; }
.dashboard-month-chart { padding: 22px 20px 16px; }
.dashboard-month-stack { background: var(--rk-neutral-bg); box-shadow: inset 0 0 0 1px var(--rk-border); }
.dashboard-month-stack i.berjalan,
.dashboard-ranking-track i { background: var(--rk-teal-fill); }
.dashboard-panel-footer { border-top-color: var(--rk-rule); }

/* Daftar pekerjaan dan filter */
.work-scope-switch,
.worklist-viewtabs { border: 1px solid var(--rk-border); background: var(--rk-surface-2); }
.work-scope-switch a.active,
.worklist-viewtabs a.active { background: var(--rk-surface); color: var(--rk-text); box-shadow: 0 1px 2px rgba(7, 31, 61, .06); }
.worklist-tabs { border-color: var(--rk-border); background: var(--rk-surface); }
.worklist-tabs a.active { color: var(--rk-navy); }
.worklist-filters {
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-card);
    background: var(--rk-surface);
    box-shadow: none;
}
.worklist-filters label > span { color: var(--rk-muted); }
.worklist-row { background: var(--rk-surface); }
.worklist-progress > span { background: var(--track); }
.worklist-progress > span i { background: var(--rk-teal-fill); }
.worklist-row-actions .icon-action { border: 1px solid transparent; }
.worklist-row-actions .icon-action:hover { border-color: var(--rk-border); }
.worklist-quick-panel { background: var(--rk-surface-2); }

/* Kalender dan integrasi */
.calendar-google-card,
.calendar-google-card.is-connected { background: var(--rk-surface); }
.calendar-google-mark { border-radius: 12px; background: var(--rk-navy); }
.calendar-weekdays { background: var(--rk-surface-2); }
.calendar-weekdays strong { color: var(--rk-muted); font-weight: 600; }
.calendar-day { border-color: var(--rk-rule); }
.calendar-day.today { background: var(--rk-teal-soft); box-shadow: inset 0 0 0 1px var(--teal-200); }
.calendar-task { border-left-width: 2px; border-radius: 6px; }

/* Laporan dan pengaturan */
.laporan-panel,
.laporan-summary { border-color: var(--rk-border); }
.report-metrics { gap: 12px; }
.report-metrics article.complete,
.report-metrics article.warning { box-shadow: none; }
.report-context { border-color: var(--rk-border); border-radius: var(--rk-radius-control); background: var(--rk-surface-2); }
.activity-card-actions { border-top: 1px solid var(--rk-rule); background: var(--rk-surface-2); }
.activity-card > footer { border-top-color: var(--rk-rule); }

/* Lapisan mengambang: modal, detail, notifikasi, dan pratinjau */
.modal-backdrop,
.drawer-backdrop { background: rgba(3, 14, 28, .62); backdrop-filter: blur(4px); }
.modal {
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--rk-radius-overlay);
    background: var(--rk-surface);
    box-shadow: var(--shadow-lg);
}
.modal > header,
.modal form > footer { background: var(--rk-surface); backdrop-filter: none; }
.modal > header { padding: 22px 24px 18px; border-bottom-color: var(--rk-rule); }
.modal form > footer { padding: 14px 24px 18px; border-top-color: var(--rk-rule); }
.modal h2 { color: var(--rk-text); font-size: 21px; font-weight: 650; }
.drawer {
    border-color: rgba(255, 255, 255, .65);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
}
.drawer-hero { padding: 28px 116px 27px 28px; background: var(--brand-gradient); }
.drawer-hero h2 { margin-top: 14px; font-size: 25px; font-weight: 650; }
.drawer-body { gap: 18px; padding: 22px; }
.detail-grid article { border: 1px solid var(--rk-rule); border-radius: 12px; background: var(--rk-surface-2); }
.notification-panel { border-color: var(--rk-border); border-radius: 14px; box-shadow: var(--rk-shadow-overlay); }
.notification-panel > header { padding: 18px; border-bottom-color: var(--rk-rule); }
.notification-panel > footer { border-top-color: var(--rk-rule); border-radius: 0 0 14px 14px; background: var(--rk-surface-2); }
.task-form-modal > header { padding: 24px 28px 20px; }
.task-core-form { column-gap: 22px; row-gap: 20px; padding: 24px 28px; }
.task-form-modal form > footer { min-height: 78px; }
.task-milestones-section { border-color: var(--rk-border); background: var(--rk-surface-2); }
.task-milestone-timeline-dialog,
.attachment-preview-dialog { border: 1px solid rgba(255, 255, 255, .65); border-radius: 18px; box-shadow: var(--shadow-xl); }

/* Ponsel dan tablet */
@media (max-width: 1100px) {
    .topbar { height: 58px; padding: 0 20px; }
    .workspace > main { min-height: calc(100vh - 58px); padding: 24px 22px 44px; }
}

@media (max-width: 720px) {
    :root { --rk-radius-card: 12px; --rk-page-x: 16px; }
    body { font-size: 14px; }
    .workspace > main { padding: 20px 16px 96px; }
    .page-heading,
    .rk-page-header,
    .team-heading { align-items: flex-start; gap: 16px; }
    .page-heading h1,
    .rk-page-header h1,
    .team-heading h1 { font-size: 24px; }
    .dashboard-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-kpi { min-height: 92px; border-top: 1px solid var(--rk-rule); }
    .dashboard-kpi:nth-child(-n+2) { border-top: 0; }
    .dashboard-kpi:nth-child(odd) { border-left: 0; }
    .primary-button,
    .secondary-button { min-height: 44px; }
    .modal-backdrop { padding: 8px; }
    .modal { border-radius: 14px; }
    .task-form-modal > header,
    .task-core-form { padding-right: 20px; padding-left: 20px; }
    .drawer { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
    .drawer-hero { padding: 22px 94px 22px 20px; }
    .drawer-hero h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .primary-button:hover,
    .activity-card:hover { transform: none; }
}

@media print {
    body { background: #ffffff; color: #102a43; }
}

/* ========================================================================== */
/* Maritime Executive Workspace · v9.1.0                                     */
/* Refinement shell kiri/kanan. Seluruh perilaku dan alur bisnis tetap utuh.  */
/* ========================================================================== */
:root {
    --workspace-ground: #eaf0f4;
    --workspace-sheet: #f8fafb;
    --workspace-surface: #ffffff;
    --workspace-raised: #f2f6f8;
    --workspace-rule: #dce5ec;
    --workspace-rule-strong: #cbd8e2;
    --workspace-text: #102a43;
    --workspace-body: #334a5e;
    --workspace-muted: #5e7184;
    --workspace-accent: #0b9d98;
    --workspace-accent-soft: #e9f7f6;
    --sidebar-ground: linear-gradient(180deg, #061a31 0%, #082a46 72%, #073a45 132%);
    --sidebar-edge: rgba(77, 214, 207, .18);
    --sidebar-slab: rgba(255, 255, 255, .085);
    --sidebar-slab-active: rgba(255, 255, 255, .13);
    --workspace-sheet-shadow: 0 1px 2px rgba(7, 31, 61, .035), 0 16px 40px rgba(7, 31, 61, .035);

    --rk-ground: var(--workspace-ground);
    --rk-frame: var(--workspace-ground);
    --rk-surface: var(--workspace-surface);
    --rk-surface-2: var(--workspace-raised);
    --rk-border: var(--workspace-rule);
    --rk-rule: #e6edf2;
    --rk-control: var(--workspace-rule-strong);
    --rk-text: var(--workspace-text);
    --rk-muted: var(--workspace-muted);
    --rk-faint: #718393;
    --rk-teal: var(--workspace-accent);
    --rk-teal-fill: var(--workspace-accent);
    --rk-teal-soft: var(--workspace-accent-soft);
}

[data-theme="dark"] {
    --workspace-ground: #07121e;
    --workspace-sheet: #0b1824;
    --workspace-surface: #102231;
    --workspace-raised: #162a39;
    --workspace-rule: #263d4e;
    --workspace-rule-strong: #355064;
    --workspace-text: #edf5f8;
    --workspace-body: #c5d3dc;
    --workspace-muted: #a5b7c5;
    --workspace-accent: #4dd6cf;
    --workspace-accent-soft: rgba(77, 214, 207, .10);
    --sidebar-ground: linear-gradient(180deg, #040c14 0%, #061827 70%, #07242c 132%);
    --sidebar-edge: rgba(77, 214, 207, .16);
    --sidebar-slab: rgba(255, 255, 255, .045);
    --sidebar-slab-active: rgba(77, 214, 207, .095);
    --workspace-sheet-shadow: none;

    --canvas: var(--workspace-ground);
    --surface: var(--workspace-surface);
    --surface-alt: var(--workspace-raised);
    --surface-soft: #132534;
    --surface-muted: #162a39;
    --border: var(--workspace-rule);
    --border-soft: var(--workspace-rule);
    --border-strong: var(--workspace-rule-strong);
    --line-soft: #203544;
    --track: #203544;
    --ink: var(--workspace-text);
    --ink-strong: #ffffff;
    --ink-soft: var(--workspace-body);
    --muted: var(--workspace-muted);
    --muted-soft: #93a9b9;
    --rk-ground: var(--workspace-ground);
    --rk-frame: var(--workspace-ground);
    --rk-surface: var(--workspace-surface);
    --rk-surface-2: var(--workspace-raised);
    --rk-border: var(--workspace-rule);
    --rk-rule: #203544;
    --rk-control: var(--workspace-rule-strong);
    --rk-text: var(--workspace-text);
    --rk-muted: var(--workspace-muted);
    --rk-faint: #93a9b9;
    --rk-action: var(--workspace-accent);
    --rk-action-hover: #73e1dc;
    --rk-on-action: #071f3d;
    --rk-card-shadow: none;
    --rk-card-shadow-hover: none;
    --shadow-button: none;
}

body,
.app-shell { background: var(--workspace-ground); }

/* Executive Navigation Rail */
.sidebar {
    border-right: 1px solid var(--sidebar-edge);
    background: var(--sidebar-ground);
    box-shadow: none;
}
.brand {
    height: 80px;
    gap: 11px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .085);
}
.brand-mark {
    width: 40px;
    height: 40px;
    border-color: rgba(77, 214, 207, .28);
    border-radius: 12px;
    background: rgba(77, 214, 207, .10);
}
.brand-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    line-height: 1.05;
}
.brand-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-copy small {
    color: #8fb3bf;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.sidebar-collapse {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    color: #91aabd;
}
.sidebar-collapse:hover {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}
.main-nav { padding: 20px 12px 18px; }
.nav-caption {
    padding: 0 10px 9px;
    color: #8da7b9;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .035em;
}
.nav-group + .nav-caption { margin-top: 24px; }
.nav-item {
    position: relative;
    min-height: 42px;
    gap: 12px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9px;
    background: transparent;
    color: #bfd0dc;
    font-size: 14px;
}
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.8; }
.nav-item:hover {
    border-color: rgba(255, 255, 255, .06);
    background: var(--sidebar-slab);
    color: #f4f9fb;
}
.nav-item.active {
    border-color: rgba(77, 214, 207, .14);
    background: var(--sidebar-slab-active);
    box-shadow: none;
    color: #ffffff;
    font-weight: 650;
}
.nav-item.active::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 2px;
    border-radius: 999px;
    background: #4dd6cf;
    content: "";
}
.nav-item.active svg { color: #4dd6cf; }
.sidebar-user-card {
    grid-template-columns: 34px minmax(0, 1fr) 32px;
    gap: 9px;
    margin: 0 12px 12px;
    padding: 9px;
    border-color: rgba(255, 255, 255, .095);
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
}
.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(77, 214, 207, .20);
    background: rgba(77, 214, 207, .11);
}
.sidebar-user-card strong { color: #ffffff; font-weight: 600; }
.sidebar-user-card small { color: #91aabd; }
.sidebar-user-card .sidebar-logout-button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    color: #a9bdca;
}
.sidebar-user-card .sidebar-logout-button:hover {
    border-color: rgba(255, 154, 154, .18);
    background: rgba(200, 70, 66, .15);
    color: #ffffff;
}

/* Maritime Executive Workspace */
.workspace {
    background: var(--workspace-ground);
    color: var(--workspace-body);
}
.topbar {
    height: 66px;
    padding: 0 30px;
    border-bottom: 1px solid var(--workspace-rule);
    background: var(--workspace-sheet);
    box-shadow: none;
}
.workspace > main {
    width: calc(100% - 28px);
    max-width: 1540px;
    min-height: calc(100vh - 100px);
    margin: 14px auto 20px;
    padding: 30px 36px 52px;
    border: 1px solid var(--workspace-rule);
    border-radius: 18px;
    background: var(--workspace-sheet);
    box-shadow: var(--workspace-sheet-shadow);
}
.rk-breadcrumb,
.rk-breadcrumb a { color: var(--workspace-muted); }
.rk-breadcrumb strong { color: var(--workspace-text); }
.topbar-divider { background: var(--workspace-rule); }
.search-box input {
    border-color: var(--workspace-rule);
    background: var(--workspace-raised);
    color: var(--workspace-text);
}
.search-box input:hover { border-color: var(--workspace-rule-strong); }
.profile > span {
    border: 1px solid color-mix(in srgb, var(--workspace-accent) 24%, transparent);
    background: var(--workspace-accent-soft);
    color: var(--workspace-accent);
}
.profile strong { color: var(--workspace-text); }
.profile small { color: var(--workspace-muted); }

.page-heading h1,
.rk-page-header h1,
.team-heading h1,
.table-heading h2,
.dashboard-panel-head h2 { color: var(--workspace-text); }
.page-heading > div > p:last-child,
.rk-page-header p,
.team-heading > div > p:last-child,
.table-heading p,
.dashboard-panel-head p { color: var(--workspace-muted); }

/* Surface levels: sheet, content surface, then raised utility surface. */
.panel,
.team-panel,
.activity-card,
.calendar-panel,
.worklist-panel,
.report-metrics article,
.dashboard-kpi-strip,
.task-list,
.team-search,
.report-filters,
.calendar-toolbar,
.calendar-google-card,
.worklist-filters {
    border-color: var(--workspace-rule);
    background: var(--workspace-surface);
    box-shadow: none;
}
.dashboard-kpi-strip { border-radius: 12px; }
.dashboard-kpi { border-left-color: var(--workspace-rule); }
.work-scope-switch,
.worklist-viewtabs,
.report-context,
.worklist-quick-panel,
.calendar-weekdays,
.activity-card-actions,
.detail-grid article {
    border-color: var(--workspace-rule);
    background: var(--workspace-raised);
}
.worklist-row,
.list-row,
.rk-table tr,
.dashboard-panel-head,
.dashboard-panel-footer { border-color: var(--rk-rule); }
.worklist-row:hover,
.list-row:hover,
.rk-table tbody tr:hover { background: var(--workspace-raised); }

.secondary-button,
input,
select,
textarea {
    border-color: var(--workspace-rule-strong);
    background: var(--workspace-surface);
    color: var(--workspace-text);
}
.secondary-button:hover,
.icon-button:hover,
.icon-action:hover {
    border-color: var(--workspace-accent);
    background: var(--workspace-accent-soft);
    color: var(--workspace-accent);
}
[data-theme="dark"] .primary-button:hover { box-shadow: none; }
[data-theme="dark"] .modal,
[data-theme="dark"] .drawer,
[data-theme="dark"] .task-milestone-timeline-dialog,
[data-theme="dark"] .attachment-preview-dialog { border-color: var(--workspace-rule-strong); }
[data-theme="dark"] .modal > header,
[data-theme="dark"] .modal form > footer,
[data-theme="dark"] .notification-panel > footer { background: var(--workspace-surface); }

@media (min-width: 1024px) {
    html.rk-sidebar-mini .brand { height: 80px; }
    html.rk-sidebar-mini .nav-item.active::before { left: 0; }
    html.rk-sidebar-mini .sidebar-user-card { padding: 8px 4px; }
}

@media (max-width: 1100px) {
    .topbar { height: 60px; padding: 0 20px; }
    .workspace > main {
        width: calc(100% - 16px);
        min-height: calc(100vh - 76px);
        margin: 8px auto;
        padding: 24px 22px 44px;
        border-radius: 14px;
    }
}

@media (max-width: 720px) {
    .topbar { background: var(--workspace-sheet); }
    .workspace > main {
        width: 100%;
        min-height: calc(100vh - 60px);
        margin: 0;
        padding: 20px 16px 96px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media print {
    .workspace,
    .workspace > main { background: #ffffff; box-shadow: none; }
    .workspace > main { width: 100%; margin: 0; border: 0; border-radius: 0; }
}

/* Dashboard header alignment · v9.1.1 */
.dashboard-panel-head {
    min-height: 76px;
    align-items: center;
    gap: 20px;
    padding: 17px 20px;
}
.dashboard-panel-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 4px;
}
.dashboard-panel-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
}
.dashboard-panel-head p {
    max-width: 68ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}
.dashboard-month-panel .dashboard-panel-head {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding-bottom: 16px;
}
.dashboard-month-panel .dashboard-chart-legend {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 18px;
    padding: 0;
}
.dashboard-chart-legend span {
    min-height: 20px;
    gap: 7px;
    color: var(--workspace-muted);
    font-size: 12px;
    line-height: 20px;
}
.dashboard-chart-legend i,
.dashboard-status-legend i {
    width: 8px;
    height: 8px;
}
.dashboard-status-legend > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 6px 2px;
}
.dashboard-status-legend strong {
    min-width: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 7px;
    text-align: right;
}
.dashboard-status-legend em { margin-left: 0; }
.dashboard-panel-head .dash-count {
    flex: none;
    align-self: flex-start;
    margin-top: 1px;
}

@media (max-width: 640px) {
    .dashboard-panel-head {
        min-height: 0;
        align-items: flex-start;
        gap: 10px;
        padding: 16px;
    }
    .dashboard-month-panel .dashboard-panel-head { gap: 12px; }
    .dashboard-month-panel .dashboard-chart-legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}
/* Multi-workspace registration and platform administration */
.login-register{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px}.login-register a{color:var(--teal-dark);font-weight:800;text-decoration:none}.login-register a:hover{text-decoration:underline}
.register-page{min-height:100vh;margin:0;background:linear-gradient(135deg,#061a35 0%,#0a3155 48%,#0a7b7f 100%);color:#fff}.register-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,.92fr)}.register-intro{position:relative;overflow:hidden;padding:48px clamp(44px,7vw,110px);display:flex;flex-direction:column;justify-content:space-between}.register-intro:before,.register-intro:after{content:"";position:absolute;border:1px solid rgba(120,237,228,.2);border-radius:50%;pointer-events:none}.register-intro:before{width:520px;height:520px;right:-180px;top:-210px}.register-intro:after{width:760px;height:760px;left:-400px;bottom:-580px}.register-brand{display:inline-flex;align-items:center;gap:13px;color:#fff;text-decoration:none;font-size:20px;position:relative;z-index:1}.register-brand span{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(125,237,228,.28);background:rgba(20,184,177,.14);border-radius:15px}.register-intro>div{max-width:680px;position:relative;z-index:1}.register-intro h1{font-size:clamp(38px,4.5vw,68px);line-height:1.03;letter-spacing:-.045em;margin:20px 0 22px}.register-intro p{font-size:18px;line-height:1.75;color:#c9d9e7;max-width:650px}.register-intro ul{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;color:#d5e6ee;font-size:14px;position:relative;z-index:1}.register-intro li:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#4be0d4;box-shadow:0 0 14px rgba(75,224,212,.8)}
.register-card{background:var(--surface);color:var(--ink);padding:clamp(38px,6vw,88px);display:flex;flex-direction:column;justify-content:center;box-shadow:-32px 0 80px rgba(1,15,32,.2)}.register-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.register-card>header span{display:block;color:var(--teal-dark);font-size:11px;font-weight:900;letter-spacing:.16em}.register-card h2{font-size:34px;letter-spacing:-.035em;margin:8px 0}.register-card header p{color:var(--muted);margin:0}.register-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.register-form .wide,.register-form .register-notice,.register-form>button{grid-column:1/-1}.register-form label{display:grid;gap:8px}.register-form input{min-height:52px}.register-notice{padding:13px 15px;margin:2px 0 0;border-radius:12px;background:var(--soft);color:var(--muted);font-size:13px}.register-form>button{justify-content:center;min-height:54px}.register-login-link{text-align:center;color:var(--muted);font-size:14px;margin:22px 0 0}.register-login-link a{font-weight:800;color:var(--teal-dark);text-decoration:none}.registration-success{text-align:center;padding:38px 10px}.registration-success>span{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 20px;border-radius:24px;background:rgba(20,184,177,.12);color:var(--teal-dark)}.registration-success svg{width:34px;height:34px}.registration-success h2{margin:0 0 12px}.registration-success p{max-width:550px;margin:0 auto 28px;color:var(--muted);line-height:1.7}.registration-success .primary-button{display:inline-flex;text-decoration:none}
.workspace-review-banner{display:flex;align-items:center;gap:12px;margin:14px 28px 0;padding:11px 15px;border:1px solid rgba(11,91,143,.2);border-radius:14px;background:linear-gradient(90deg,rgba(11,91,143,.1),rgba(20,184,177,.07));color:var(--ink)}.workspace-review-banner>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0b5b8f;color:#fff}.workspace-review-banner svg{width:18px;height:18px}.workspace-review-banner div{display:grid;gap:2px;flex:1}.workspace-review-banner small{color:var(--muted)}.workspace-review-banner form{margin:0}.workspace-review-banner button{border:0;background:transparent;color:var(--teal-dark);font-weight:800;cursor:pointer}
.superadmin-shell{max-width:1540px}.superadmin-scope-note{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;margin-bottom:22px;border-radius:18px;background:linear-gradient(115deg,#071f3d,#0a4163 70%,#087f83);color:#fff;box-shadow:0 18px 45px rgba(6,31,61,.16)}.superadmin-scope-note>div{display:grid;gap:4px}.superadmin-scope-note span{font-size:10px;letter-spacing:.16em;color:#79e6df;font-weight:900}.superadmin-scope-note strong{font-size:22px}.superadmin-scope-note small{color:#c6d9e5}.superadmin-scope-note form{margin:0}.superadmin-filter{display:grid;grid-template-columns:1fr 260px;gap:14px;margin:24px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.superadmin-filter label{display:grid;gap:8px;color:var(--ink);font-weight:700;font-size:13px}.superadmin-filter input,.superadmin-filter select{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--input-bg,var(--surface));color:var(--ink);padding:0 14px;font:inherit}.workspace-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.workspace-admin-card{position:relative;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)}.workspace-admin-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#64748b}.workspace-admin-card.status-active:before{background:#0d875b}.workspace-admin-card.status-pending:before{background:#e6a72f}.workspace-admin-card.status-rejected:before{background:#d64d62}.workspace-admin-card.status-suspended:before{background:#64748b}.workspace-admin-card>header{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.workspace-admin-card>header time{margin-left:auto}.workspace-status-dot{width:9px;height:9px;border-radius:50%;background:currentColor}.workspace-admin-card h2{font-size:22px;margin:18px 0 8px;color:var(--ink)}.workspace-admin-card>p{display:flex;gap:8px;color:var(--muted);margin:0 0 18px}.workspace-admin-card>p strong{color:var(--ink)}.workspace-admin-card dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}.workspace-admin-card dl div{display:grid;gap:4px;padding:12px;border-right:1px solid var(--line)}.workspace-admin-card dl div:last-child{border:0}.workspace-admin-card dt{font-size:11px;color:var(--muted)}.workspace-admin-card dd{margin:0;font-size:19px;font-weight:850;color:var(--ink)}.workspace-admin-card>footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}.workspace-admin-card form{margin:0}.workspace-reject-form{display:flex;gap:8px;flex:1}.workspace-reject-form input{min-width:160px;flex:1;border:1px solid var(--line);border-radius:10px;padding:0 11px;background:var(--input-bg,var(--surface));color:var(--ink)}.compact{min-height:40px!important;padding:9px 14px!important;font-size:13px!important}.workspace-rejection{display:block;margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(214,77,98,.08);color:#b3384b}.backup-restore-protected{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.backup-protected-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:rgba(20,184,177,.12);color:var(--teal-dark);margin-bottom:14px}.backup-protected-icon svg{width:24px;height:24px}.workspace-onboarding{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:0 0 24px;padding:22px 24px;border:1px solid rgba(20,184,177,.25);border-radius:20px;background:linear-gradient(110deg,rgba(20,184,177,.12),rgba(11,91,143,.06));box-shadow:var(--shadow-sm)}.workspace-onboarding>span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#0b5b8f,#14b8b1);color:#fff}.workspace-onboarding svg{width:27px;height:27px}.workspace-onboarding small{font-size:10px;letter-spacing:.15em;font-weight:900;color:var(--teal-dark)}.workspace-onboarding h2{margin:5px 0;color:var(--ink);font-size:20px}.workspace-onboarding p{margin:0;color:var(--muted);line-height:1.55}.workspace-onboarding a{text-decoration:none;white-space:nowrap}
@media(max-width:1050px){.register-shell{grid-template-columns:1fr}.register-intro{min-height:430px;padding:34px}.register-intro h1{font-size:42px}.register-card{padding:42px 28px}.workspace-admin-grid{grid-template-columns:1fr}}
@media(max-width:680px){.register-intro{min-height:390px}.register-intro h1{font-size:34px}.register-intro ul{display:grid}.register-card{padding:32px 20px}.register-card>header{align-items:center}.register-form{grid-template-columns:1fr}.register-form .wide,.register-form .register-notice,.register-form>button{grid-column:auto}.superadmin-filter{grid-template-columns:1fr}.workspace-admin-card dl{grid-template-columns:1fr 1fr}.workspace-admin-card dl div:nth-child(2){border-right:0}.workspace-admin-card dl div:nth-child(-n+2){border-bottom:1px solid var(--line)}.workspace-review-banner{margin:10px 12px 0}.workspace-review-banner small{display:none}.workspace-onboarding{grid-template-columns:auto 1fr}.workspace-onboarding>a{grid-column:1/-1;justify-content:center}}