:root{
    /* Brand & ground — nada MEDIUM (UI redesign 2026-09) */
    --navy:#2B4E86;         /* biru sidebar — lebih ringan, tidak berat */
    --navy-2:#25467A;
    --brand:#3E72B8;        /* biru utama SPE — tombol/aksi (medium) */
    --brand-600:#2F5C9C;    /* hover/gradient */
    --cyan:#2C8B95;         /* teal lembut (dulu cyan terang) */
    --spe-yellow:#F6D133;   /* aksen brand SPE */
    --spe-red:#D83A3A;      /* merah SPE dilembutkan */
    --canvas:#F4F6FB;       /* latar biru-abu lembut, tidak menyilaukan */
    --card:#FFFFFF;
    --ink:#1C2A45;          /* judul — biru gelap lembut, bukan hitam */
    --muted:#6C7A98;
    --muted-2:#98A3BC;
    --border:#E4E9F3;
    --border-strong:#D6DEEC;
    /* aksen per-modul */
    --violet:#6D5FC4; --violet-bg:#ECEAF9;
    --teal:#2C8B95;   --teal-bg:#E1F0F1;
    /* Semantic status — dilembutkan */
    --ontrack:#3E72B8;
    --ontrack-bg:#EAF1FB;
    --warn:#E3A70B;
    --warn-bg:#FBEFCB;
    --late:#D83A3A;
    --late-bg:#FBE9E9;
    --done:#2E9E6B;
    --done-bg:#E1F2E9;
    --radius:14px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow-md:0 6px 20px rgba(15,23,42,.08);
    --shadow-lg:0 18px 50px rgba(11,28,63,.16);
    --font:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--font);
    color:var(--ink);
    background:var(--canvas);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select,textarea{font-family:inherit}
  .tnum{font-variant-numeric:tabular-nums}
  ::selection{background:rgba(62,114,184,.18)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ---------- Logo ---------- */
  .logo{display:flex;align-items:center;gap:10px}
  .logo .mark{
    width:38px;height:38px;flex:none;
    display:flex;align-items:center;justify-content:center;position:relative;
    background:#fff;border-radius:11px;padding:5px;box-shadow:0 2px 8px rgba(15,28,63,.14);
  }
  .logo .mark img{width:100%;height:100%;object-fit:contain}
  .logo .mark svg{width:22px;height:22px;position:relative;z-index:1}
  .logo .word{display:flex;flex-direction:column;line-height:1.05}
  .logo .word b{font-size:16px;font-weight:800;letter-spacing:.2px;color:#fff}
  .logo .word span{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);font-weight:600}
  .logo.dark .word b{color:var(--ink)}
  .logo.dark .word span{color:var(--brand)}

  /* ============ LOGIN ============ */
  .login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
  .login-brand{
    position:relative;overflow:hidden;color:#fff;padding:56px;
    background:radial-gradient(1200px 600px at 80% -10%,#3663C4 0%,transparent 60%),
               linear-gradient(160deg,var(--navy) 0%,#213E6E 100%);
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .login-brand .grid-deco{position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:44px 44px;mask-image:radial-gradient(600px 500px at 70% 30%,#000,transparent 80%)}
  .login-brand .glow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(30px);opacity:.5}
  .login-brand .glow.a{background:radial-gradient(circle,rgba(0,198,215,.5),transparent 70%);right:-80px;top:120px}
  .login-brand .glow.b{background:radial-gradient(circle,rgba(62,114,184,.55),transparent 70%);left:-60px;bottom:-40px}
  .login-brand .content{position:relative;z-index:2;max-width:440px;margin:auto 0}
  .login-brand h1{font-size:38px;line-height:1.12;font-weight:800;margin:26px 0 14px;letter-spacing:-.5px;text-wrap:balance}
  .login-brand h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#7fd3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .login-brand p{color:#b9c6e6;font-size:15px;max-width:400px}
  .login-brand .pills{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
  .login-brand .pills span{font-size:12px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#dbe5fb}
  .login-brand .foot{position:relative;z-index:2;color:#7d8db3;font-size:12.5px}

  .login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--card)}
  .login-card{width:100%;max-width:380px}
  .login-card .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--brand);font-weight:700}
  .login-card h2{font-size:26px;margin:8px 0 6px;letter-spacing:-.3px}
  .login-card .sub{color:var(--muted);font-size:14px;margin-bottom:26px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin-bottom:7px}
  .field .inp{position:relative}
  .field input{
    width:100%;padding:12px 14px 12px 42px;border:1.5px solid var(--border-strong);
    border-radius:11px;font-size:14px;color:var(--ink);background:#fff;transition:.16s;
  }
  .field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,114,184,.13)}
  .pw-wrap{position:relative}
  .pw-wrap input{padding-right:40px!important}
  .field .inp input{padding-right:42px}
  .pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted-2);padding:4px;z-index:2}
  .pw-toggle:hover{color:var(--brand)}
  .top-user{position:relative}
  .tu-btn{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px;border-radius:10px}
  .tu-btn:hover{background:#F1F5FB}
  .top-user .caret{width:15px;height:15px;color:var(--muted-2);flex:none}
  .user-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:0 14px 34px rgba(11,28,63,.17);min-width:232px;padding:8px;display:none;z-index:70}
  .user-menu.show{display:block}
  .user-menu .um-head{display:flex;gap:10px;align-items:center;padding:6px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
  .user-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:9px;font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit}
  .user-menu button:hover{background:#F4F7FC}
  .user-menu .um-sep{height:1px;background:var(--border);margin:6px 4px}
  th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
  th.sortable:hover{color:var(--brand)}
  .pager{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;padding:12px 16px}
  .pager button{min-width:34px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;font-size:12.5px;font-family:inherit;color:var(--ink)}
  .pager button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
  .pager button:disabled{opacity:.4;cursor:default}
  table.pm thead th{cursor:pointer;user-select:none}
  table.pm thead th::after{content:'⇅';margin-left:5px;font-size:.82em;opacity:.3;font-weight:400}
  table.pm thead th:hover{color:var(--brand)}
  table.pm thead th:hover::after{opacity:.65}
  table.pm thead th:has(.sarrow)::after{content:''}
  .sarrow{color:var(--brand);font-weight:700}
  .tpill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
  .year-pick .year-sel{border:1px solid var(--border-strong);background:#fff;color:var(--ink);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;outline:none}
  .year-pick .year-sel:hover{border-color:var(--brand)}
  @media (max-width:720px){.year-pick .year-sel{padding:7px 8px;font-size:12px;max-width:120px}}
  .pmulti{position:relative}
  .pmulti-field{border:1px solid var(--border-strong);border-radius:9px;padding:7px 9px;min-height:38px;cursor:pointer;display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:#fff}
  .pmulti-field:hover{border-color:var(--brand)}
  .pmulti-chip{background:#EEF4FF;color:var(--brand);border-radius:14px;padding:2px 10px;font-size:12px;font-weight:600}
  .pmulti-ph{color:var(--muted-2);font-size:13px}
  .pmulti-menu{margin-top:6px;background:#fff;border:1px solid var(--border-strong);border-radius:10px;max-height:220px;overflow:auto;padding:6px;display:none}
  .pmulti.open .pmulti-menu{display:block}
  .pmulti-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:13px}
  .pmulti-opt:hover{background:#F5F8FF}
  .pmulti-grp{font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--muted-2);padding:7px 8px 3px;letter-spacing:.4px}
  /* Target per periode */
  .tmini{display:flex;gap:9px;align-items:center}
  .tseg{display:flex;flex-direction:column;align-items:center;gap:2px}
  .tseg small{font-size:9px;color:var(--muted-2);font-weight:800;letter-spacing:.3px}
  .tdot{width:12px;height:12px;border-radius:50%;background:var(--border-strong);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
  .tdot.done{background:#2E9E6B}.tdot.warn{background:#E3A70B}.tdot.late{background:#D83A3A}
  .tmini.done-all{color:#2E9E6B;font-weight:700;font-size:12px}
  .tg-row{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;margin-bottom:13px}
  .tg-lbl{font-size:12.5px;font-weight:700;color:var(--ink)}
  .tg-bar{position:relative;height:11px;background:#EDF1F8;border-radius:6px}
  .tg-fill{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:6px;transition:width .3s}
  .tg-fill.done{background:#2E9E6B}.tg-fill.warn{background:#E3A70B}.tg-fill.late{background:#D83A3A}
  .tg-mark{position:absolute;top:-4px;bottom:-4px;width:2.5px;background:#0B1C3F;border-radius:2px}
  .tg-nums{font-size:12px;white-space:nowrap}
  .tgt-card{padding:16px 18px}
  .tgt-head{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:8px}
  .tgt-big{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
  .tgt-sep{font-size:11px;font-weight:600;color:var(--muted)}
  .tgt-sub{font-size:11px;color:var(--muted-2);margin-top:6px}
  /* Search per-tabel */
  .tsearch{display:flex;align-items:center;gap:8px;margin-bottom:11px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px;max-width:440px}
  .tsearch input{border:none;outline:none;flex:1;font-size:13px;background:transparent;color:var(--ink)}
  .tsearch span{color:var(--muted-2);display:flex}
  .tsearch .clr{cursor:pointer;color:var(--muted-2);font-weight:700}
  /* Freeze panes: header (baris pertama) + 3 kolom pertama pada tabel data */
  .table-wrap:has(table.pm){max-height:calc(100vh - 200px);overflow:auto}
  table.pm thead th{position:sticky;top:0;z-index:4;background:#F6F8FC}
  table.pm td.frz,table.pm th.frz{background:#fff}
  table.pm thead th.frz{background:#F6F8FC;z-index:6}
  table.pm .frz-edge{box-shadow:2px 0 0 rgba(15,40,90,.08)}
  .field .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-2);display:flex}
  .field .ic svg{width:18px;height:18px}
  .row-between{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px}
  .checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
  .checkbox input{width:16px;height:16px;accent-color:var(--brand)}
  .link{color:var(--brand);font-size:13px;font-weight:600;text-decoration:none}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:12px 18px;border-radius:11px;font-size:14px;font-weight:700;transition:.16s;
    background:linear-gradient(135deg,var(--brand),var(--brand-600));color:#fff;
    box-shadow:0 8px 20px rgba(62,114,184,.28);width:100%;
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(62,114,184,.36)}
  .btn:active{transform:translateY(0)}
  .btn svg{width:17px;height:17px}
  .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--border-strong);box-shadow:none;width:auto}
  .btn.ghost:hover{border-color:var(--brand);color:var(--brand);transform:none}
  .btn.sm{padding:9px 14px;font-size:13px;width:auto;border-radius:10px}
  .login-divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:12px;margin:22px 0}
  .login-divider::before,.login-divider::after{content:"";height:1px;background:var(--border);flex:1}
  .demo-note{margin-top:22px;font-size:12px;color:var(--muted);background:var(--ontrack-bg);border:1px solid #d3e2fd;padding:10px 12px;border-radius:10px}

  /* ============ APP SHELL ============ */
  #app{display:none;min-height:100vh}
  #app.show{display:grid;grid-template-columns:250px 1fr}
  .sidebar{
    background:linear-gradient(180deg,var(--navy) 0%,#213E6E 100%);
    color:#c7d2ea;padding:22px 16px;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;gap:6px;
  }
  .sidebar .logo{padding:6px 8px 20px}
  .nav-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#5f7099;padding:15px 12px 6px;font-weight:700}
  .nav-label.nav-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;border-radius:8px;margin:2px 4px 0 0;padding:11px 12px;transition:background .12s,color .12s}
  .nav-label.nav-toggle:hover{color:#c7d2ea;background:rgba(255,255,255,.05)}
  .nav-label.nav-toggle.open{color:#aeb9d6}
  .nav-label .chev{font-size:8px;opacity:.55;transition:transform .18s ease;margin-left:8px}
  .nav-label.open .chev{transform:rotate(90deg);opacity:.85}
  .nl-left{display:flex;align-items:center;gap:10px;min-width:0}
  .nl-ic{width:17px;height:17px;flex:none;opacity:.7}
  .nav-label.open .nl-ic{opacity:.95}
  .nav-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;margin:2px -4px 2px 0;padding-right:4px}
  .nav-scroll::-webkit-scrollbar{width:5px}
  .nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
  .nav-item.soon-item{opacity:.7}
  .soon{margin-left:auto;font-size:9px;font-weight:800;background:rgba(255,255,255,.1);color:#8595bb;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px}
  .nav-item{
    display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;
    color:#aeb9d6;font-size:14px;font-weight:600;transition:.15s;width:100%;text-align:left;position:relative;
  }
  .nav-item svg{width:19px;height:19px;flex:none;opacity:.9}
  .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-item.active{background:linear-gradient(90deg,rgba(62,114,184,.9),rgba(62,114,184,.55));color:#fff;box-shadow:0 8px 18px rgba(62,114,184,.3)}
  .nav-item.active::before{content:"";position:absolute;left:-4px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--spe-yellow)}
  /* Dashboard hero "Butuh Perhatian" */
  .attn-hero{border-top:3px solid var(--brand)}
  .attn-hero-row{display:flex;align-items:center;gap:12px;padding:11px 18px 11px 22px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;transition:background .12s}
  .attn-hero-row:last-child{border-bottom:none}
  .attn-hero-row:hover{background:var(--ontrack-bg)}
  .attn-hero-row .ah-strip{position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 3px 3px 0}
  .attn-hero-row .ah-strip.s-red{background:var(--late)}
  .attn-hero-row .ah-strip.s-amber{background:var(--warn)}
  .attn-hero-row .feed-ic{width:34px;height:34px;flex:none}
  .attn-hero-row .ah-tx{flex:1;min-width:0}
  .attn-hero-row .ah-tx b{display:block;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attn-hero-row .ah-tx span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .attn-hero-row .ah-go{width:18px;height:18px;color:var(--muted-2);flex:none}
  .attn-hero-row:hover .ah-go{color:var(--brand);transform:translateX(2px);transition:.12s}
  /* Pipeline Rekrutmen (Database Hiring) */
  .hpipe{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
  .hstage{flex:1;min-width:104px;background:#F8FAFE;border:1px solid var(--border);border-radius:11px;padding:10px 12px;cursor:pointer;transition:.15s}
  .hstage:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
  .hstage.on{border-color:var(--teal);background:var(--teal-bg);box-shadow:var(--shadow-sm)}
  .hstage .hs-t{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hstage .hs-c{font-size:22px;font-weight:800;color:var(--ink);margin-top:3px}
  .hstage .hs-bar{height:4px;border-radius:3px;background:var(--teal);margin-top:8px;opacity:.85;min-width:6px}
  /* Step-tracker Onboarding (Offering→Terima→Join→Onboarding→Kontrak) */
  .obsteps{display:flex;align-items:center;gap:0;overflow-x:auto;padding:4px 0 2px}
  .obstep{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:82px;text-align:center}
  .obstep .cc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border:2px solid var(--border-strong);background:#fff;color:var(--muted-2)}
  .obstep.done .cc{background:var(--done);border-color:var(--done);color:#fff}
  .obstep.now .cc{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--ontrack-bg)}
  .obstep .lb{font-size:11px;font-weight:700;color:var(--muted)}
  .obstep.done .lb,.obstep.now .lb{color:var(--ink)}
  .obline{height:2px;background:var(--border-strong);flex:1;min-width:12px;margin-bottom:20px}
  .obline.on{background:var(--done)}
  /* Kartu KPI ring (KPI HCGA) */
  .krgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
  @media(max-width:1100px){.krgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:700px){.krgrid{grid-template-columns:1fr}}
  .krcard{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:.15s}
  .krcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .krhd{display:flex;align-items:center;gap:11px;padding:15px 16px 12px}
  .krini{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;flex:none}
  .krhd .nm{min-width:0;flex:1}
  .krhd .nm b{font-size:13.5px;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .krhd .nm small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .kring{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--rc) calc(var(--p)*1%),var(--border) 0)}
  .kring span{width:46px;height:46px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--ink)}
  .krrow{display:flex;align-items:center;gap:9px;padding:7px 16px;border-top:1px solid var(--border);font-size:12px}
  .krrow .kl{flex:none;width:92px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .krrow .track{flex:1;height:6px;background:var(--border);border-radius:5px;overflow:hidden}
  .krrow .track i{display:block;height:100%;border-radius:5px}
  .krrow .pc{width:40px;text-align:right;font-weight:800;color:var(--ink);font-size:11.5px}
  .krsplit{display:flex;padding:10px 16px;gap:6px;background:#F8FAFE;border-top:1px solid var(--border)}
  .krsplit div{flex:1;text-align:center}
  .krsplit .l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-2)}
  .krsplit .n{font-size:15px;font-weight:800;color:var(--ink)}
  /* 9-Box cell klik-able + step-tracker SLA info */
  .nb-box{transition:.15s}
  .nb-box.clk{cursor:pointer}
  .nb-box.clk:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .obstep.info .cc{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
  .obstep.info .lb{color:var(--ink)}
  .nav-item .badge{margin-left:auto;background:var(--late);color:#fff;font-size:10.5px;font-weight:800;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:flex;align-items:center;justify-content:center}
  .sidebar .spacer{flex:1}
  .side-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:14px}
  .side-card h4{margin:0 0 4px;font-size:13px;color:#fff}
  .side-card p{margin:0 0 10px;font-size:11.5px;color:#93a1c6}
  .side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px}
  .avatar{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--cyan),var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
  .side-user .meta b{display:block;font-size:13px;color:#fff}
  .side-user .meta span{font-size:11px;color:#8595bb}

  .main{min-width:0;display:flex;flex-direction:column}
  .topbar{
    position:sticky;top:0;z-index:30;background:rgba(244,247,252,.85);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);padding:14px 30px;display:flex;align-items:center;gap:18px;
  }
  .topbar .search{flex:1;max-width:440px;position:relative}
  .topbar .search input{width:100%;padding:10px 14px 10px 40px;border:1.5px solid var(--border);border-radius:11px;background:#fff;font-size:13.5px}
  .topbar .search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,114,184,.1)}
  .topbar .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2)}
  .topbar .grow{flex:1}
  .icon-btn{width:40px;height:40px;border-radius:11px;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#475569;position:relative;transition:.15s}
  .icon-btn:hover{border-color:var(--brand);color:var(--brand)}
  .icon-btn svg{width:19px;height:19px}
  .icon-btn .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--late);border:2px solid #fff}
  .icon-btn .nbadge{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--late);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
  .top-user{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;border-radius:12px;background:#fff;border:1.5px solid var(--border)}
  .top-user .meta{line-height:1.15}
  .top-user .meta b{font-size:13px;display:block}
  .top-user .meta span{font-size:11px;color:var(--muted)}

  .page{padding:26px 30px 48px;animation:fade .35s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
  .page-head h1{font-size:24px;margin:0 0 4px;letter-spacing:-.4px}
  .page-head .crumb{font-size:12.5px;color:var(--muted)}
  .page-head p{margin:0;color:var(--muted);font-size:14px}
  .head-actions{display:flex;gap:10px;align-items:center}

  /* Cards & grids */
  .grid{display:grid;gap:18px}
  .stat-grid{grid-template-columns:repeat(5,1fr)}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
  .stat{padding:18px}
  .stat .top{display:flex;align-items:center;justify-content:space-between}
  .stat .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center}
  .stat .ic svg{width:20px;height:20px}
  .stat .num{font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:12px}
  .stat .lbl{font-size:13px;color:var(--muted);margin-top:2px;font-weight:500}
  .stat .trend{font-size:11.5px;font-weight:700;margin-top:8px;display:inline-flex;align-items:center;gap:4px}
  .trend.up{color:var(--done)} .trend.down{color:var(--late)}
  .ic-blue{background:var(--ontrack-bg);color:var(--ontrack)}
  .ic-amber{background:var(--warn-bg);color:var(--warn)}
  .ic-red{background:var(--late-bg);color:var(--late)}
  .ic-green{background:var(--done-bg);color:var(--done)}
  .ic-slate{background:#EEF2F9;color:#475569}
  .ic-purple{background:#EDE9FE;color:#7C3AED}
  .clickable-card{cursor:pointer;transition:.14s}
  .clickable-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .stat-go{font-size:11px;font-weight:700;color:var(--brand);opacity:0;transition:.14s}
  .clickable-card:hover .stat-go{opacity:1}
  .stat .top{align-items:center}

  .cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
  .card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
  .card-head h3{margin:0;font-size:15px;letter-spacing:-.2px}
  .card-head .link{cursor:pointer}
  .card-body{padding:8px 18px 16px}

  /* Status pill */
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
  .pill .d{width:7px;height:7px;border-radius:50%}
  .pill.ontrack{background:var(--ontrack-bg);color:var(--ontrack)} .pill.ontrack .d{background:var(--ontrack)}
  .pill.warn{background:var(--warn-bg);color:#b45309} .pill.warn .d{background:var(--warn)}
  .pill.late{background:var(--late-bg);color:#b91c1c} .pill.late .d{background:var(--late)}
  .pill.done{background:var(--done-bg);color:#15803d} .pill.done .d{background:var(--done)}
  .pill.plan{background:#EDE9FE;color:#6D28D9} .pill.plan .d{background:#7C3AED}
  .pbar.plan > i{background:linear-gradient(90deg,#7C3AED,#a78bfa)}
  .kpi6{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .badge-prio{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:7px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
  .badge-prio.late{background:var(--late-bg);color:#b91c1c}
  .badge-prio.warn{background:var(--warn-bg);color:#b45309}
  .badge-prio.ontrack{background:var(--ontrack-bg);color:var(--ontrack)}
  .badge-prio.done{background:var(--done-bg);color:#15803d}
  .var-up{color:var(--done);font-weight:700} .var-down{color:var(--late);font-weight:700}
  .fn-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
  .fn-row:last-child{border-bottom:none}
  .overload{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
  .overload.vhigh{background:var(--late-bg);color:#b91c1c}
  .overload.high{background:var(--warn-bg);color:#b45309}
  .overload.medium{background:var(--ontrack-bg);color:var(--ontrack)}
  .mstone{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}
  .mstone:last-child{border-bottom:none}
  .mstone .mn{font-size:13px;font-weight:700}
  .mstone .mnum{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;background:#EEF2F9;color:#475569}
  .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
  .info-grid .k{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);font-weight:700;margin-bottom:3px}
  .info-grid .v{font-size:13.5px;color:#1e293b}
  @media (max-width:1100px){.kpi6{grid-template-columns:repeat(3,1fr)}.info-grid{grid-template-columns:1fr}}
  @media (max-width:720px){.kpi6{grid-template-columns:repeat(2,1fr)}}

  /* Progress bar */
  .pbar{height:8px;border-radius:999px;background:#EDF1F8;overflow:hidden}
  .pbar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--cyan))}
  .pbar.warn > i{background:linear-gradient(90deg,#E3A70B,#fbbf24)}
  .pbar.late > i{background:linear-gradient(90deg,#D83A3A,#f87171)}
  .pbar.done > i{background:linear-gradient(90deg,#2E9E6B,#4ade80)}

  /* Project rows */
  .proj-row{display:grid;grid-template-columns:1.6fr 1fr auto;gap:14px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:10px;transition:.12s}
  .proj-row:hover{background:#F8FAFE}
  .proj-row:last-child{border-bottom:none}
  .proj-title{font-weight:700;font-size:14px}
  .proj-sub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:10px;align-items:center}
  .proj-prog{display:flex;flex-direction:column;gap:6px}
  .proj-prog .pt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:600}

  /* Table */
  .table-wrap{overflow-x:auto}
  table.pm{width:100%;border-collapse:collapse;min-width:760px}
  table.pm th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--border)}
  table.pm td{padding:14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
  table.pm tr{cursor:pointer;transition:.12s}
  table.pm tbody tr:hover{background:#F8FAFE}
  /* Mobile: ubah tabel data jadi KARTU bertumpuk (label kolom otomatis via data-label) */
  @media (max-width:720px){
    #pages .table-wrap:has(table.pm){overflow-x:visible}  /* hanya tabel→kartu; wrap konten lebar lain (mis. papan Kanban) tetap bisa digeser */
    #pages table.pm{min-width:0!important;width:100%!important;display:block;border:0}
    #pages table.pm thead{position:static;display:none}
    #pages table.pm tbody{display:block}
    #pages table.pm tr{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;margin:0 0 10px;padding:4px 6px;box-shadow:var(--shadow-sm)}
    #pages table.pm td{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right;white-space:normal!important;min-width:0;padding:8px 10px;border:0;border-bottom:1px solid #EEF2F9;font-size:13px}
    #pages table.pm tr td:last-child{border-bottom:0}
    #pages table.pm td::before{content:attr(data-label);flex:0 0 40%;text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:normal}
    #pages table.pm td:not([data-label])::before{content:''}
    #pages table.pm td:first-child{display:block;text-align:left;background:#F5F8FE;border-radius:8px;margin-bottom:2px;padding:10px 12px;font-size:14px}
    #pages table.pm td:first-child::before{content:''}
    #pages table.pm td:first-child b{font-size:14.5px}
    #pages table.pm td.frz,#pages table.pm th.frz{position:static!important;left:auto!important;z-index:auto!important}
    #pages table.pm td>*{min-width:0}
    #pages table.pm td input,#pages table.pm td select{width:100%!important;max-width:200px}
  }
  .sens{color:var(--muted-2);font-weight:700;letter-spacing:1.5px;font-family:ui-monospace,Menlo,monospace}
  .team-stack{display:flex}
  .team-stack .avatar{width:28px;height:28px;font-size:11px;margin-left:-8px;border:2px solid #fff}
  .team-stack .avatar:first-child{margin-left:0}

  /* Filters */
  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
  .seg{display:inline-flex;background:#fff;border:1.5px solid var(--border);border-radius:11px;padding:3px;gap:2px}
  .seg button{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
  .seg button.active{background:var(--brand);color:#fff}
  .chip{padding:8px 14px;border-radius:10px;background:#fff;border:1.5px solid var(--border);font-size:13px;font-weight:600;color:#475569}

  /* Activity / notifications feed */
  .feed{display:flex;flex-direction:column}
  .feed-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
  .feed-item:last-child{border-bottom:none}
  .feed-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
  .feed-ic svg{width:17px;height:17px}
  .feed-item .txt{font-size:13px}
  .feed-item .txt b{font-weight:700}
  .feed-item .time{font-size:11.5px;color:var(--muted-2);margin-top:3px}

  /* Attention list */
  .attn{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--border);margin-bottom:10px}
  .attn .bar{width:4px;align-self:stretch;border-radius:4px}
  .attn.late .bar{background:var(--late)} .attn.warn .bar{background:var(--warn)}
  .attn .txt{flex:1}
  .attn .txt b{font-size:13.5px} .attn .txt div{font-size:12px;color:var(--muted);margin-top:2px}

  /* Detail page */
  .detail-hero{display:flex;gap:22px;align-items:center;padding:22px;flex-wrap:wrap}
  .ring{position:relative;width:104px;height:104px;flex:none}
  .ring svg{transform:rotate(-90deg)}
  .ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring .val b{font-size:24px;font-weight:800;letter-spacing:-1px}
  .ring .val span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
  .detail-meta{flex:1;min-width:240px}
  .detail-meta h2{margin:0 0 6px;font-size:22px;letter-spacing:-.4px}
  .meta-grid{display:grid;grid-template-columns:repeat(4,auto);gap:10px 30px;margin-top:16px}
  .meta-grid .k{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);font-weight:700}
  .meta-grid .v{font-size:14px;font-weight:700;margin-top:2px}

  /* Gantt */
  .gantt{padding:6px 18px 18px}
  .gantt-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);font-weight:600;padding:0 0 8px;border-bottom:1px dashed var(--border);margin-bottom:10px}
  .gantt-row{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;padding:9px 0}
  .gantt-row .name{font-size:13px;font-weight:600}
  .gantt-row .name small{display:block;color:var(--muted);font-weight:500;font-size:11px}
  .gantt-track{position:relative;height:26px;background:#F4F7FC;border-radius:8px}
  .gantt-bar{position:absolute;top:3px;height:20px;border-radius:7px;display:flex;align-items:center;padding:0 9px;font-size:11px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap}
  .gantt-bar.done{background:linear-gradient(90deg,#2E9E6B,#4ade80)}
  .gantt-bar.active{background:linear-gradient(90deg,var(--brand),var(--cyan))}
  .gantt-bar.todo{background:#CBD5E1;color:#475569}
  .gantt-bar.late{background:linear-gradient(90deg,#D83A3A,#f87171)}
  .gantt-today{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--late);z-index:3}
  .gantt-today::after{content:"Hari ini";position:absolute;top:-16px;left:-20px;font-size:9.5px;color:var(--late);font-weight:700;white-space:nowrap}

  /* Notes / updates */
  .note{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
  .note:last-child{border-bottom:none}
  .note .body{flex:1}
  .note .body .hd{display:flex;align-items:center;gap:8px;font-size:13px}
  .note .body .hd b{font-weight:700}
  .note .body .hd span{color:var(--muted-2);font-size:11.5px}
  .note .body p{margin:5px 0 0;font-size:13px;color:#334155}
  .add-note{display:flex;gap:10px;margin-top:14px}
  .add-note input{flex:1;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:11px;font-size:13.5px}
  .add-note input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,114,184,.1)}

  /* Create form */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .form-field label{display:block;font-size:12.5px;font-weight:700;color:#334155;margin-bottom:7px}
  .form-field input,.form-field select,.form-field textarea{
    width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:11px;font-size:13.5px;background:#fff;color:var(--ink);
  }
  .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,114,184,.1)}
  .form-field .hint{font-size:11.5px;color:var(--muted-2);margin-top:5px}
  .full{grid-column:1 / -1}
  .preview-box{background:linear-gradient(180deg,#F8FAFF,#fff);border:1.5px dashed var(--brand);border-radius:14px;padding:18px;margin-top:8px}
  .preview-box .ph-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--brand);font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:14px}
  .phase-item{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
  .phase-item:last-child{border-bottom:none}
  .phase-dot{width:26px;height:26px;border-radius:8px;background:var(--ontrack-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
  .phase-name{font-size:13.5px;font-weight:700}
  .phase-date{font-size:12px;color:var(--muted);margin-top:2px}
  .phase-dur{font-size:12px;font-weight:700;color:#475569;background:#EEF2F9;padding:4px 10px;border-radius:8px}
  .form-section{grid-column:1/-1;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--brand);margin:10px 0 -2px;display:flex;align-items:center;gap:10px}
  .form-section .sn{width:20px;height:20px;border-radius:6px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
  .form-section .ln{flex:1;height:1px;background:var(--border)}
  .cadence-opts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .cadence-opt{border:1.5px solid var(--border-strong);border-radius:12px;padding:12px 13px;cursor:pointer;text-align:left;transition:.14s;background:#fff}
  .cadence-opt:hover{border-color:var(--brand)}
  .cadence-opt.active{border-color:var(--brand);background:var(--ontrack-bg);box-shadow:0 0 0 3px rgba(62,114,184,.1)}
  .cadence-opt b{display:block;font-size:13.5px;color:var(--ink)}
  .cadence-opt span{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
  .sched-item{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
  .sched-item:last-child{border-bottom:none}
  .sched-pic{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#334155;font-weight:600;white-space:nowrap}
  .cad-badge{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 10px;border-radius:999px;background:var(--ontrack-bg);color:var(--brand)}
  .pj-box{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
  .pj-cell{flex:1;min-width:140px;background:#F8FAFE;border:1px solid var(--border);border-radius:11px;padding:11px 12px}
  .pj-cell .k{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);font-weight:700}
  .pj-cell .v{font-size:13.5px;font-weight:700;margin-top:3px;display:flex;align-items:center;gap:7px}

  /* Settings */
  .set-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
  .set-row:last-child{border-bottom:none}
  .set-row .t b{font-size:14px} .set-row .t p{margin:3px 0 0;font-size:12.5px;color:var(--muted);max-width:520px}
  .switch{width:46px;height:26px;border-radius:999px;background:#CBD5E1;position:relative;transition:.18s;flex:none}
  .switch.on{background:var(--brand)}
  .switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .switch.on::after{left:23px}

  /* Notification panel (slide-over) */
  .overlay{position:fixed;inset:0;background:rgba(11,28,63,.35);backdrop-filter:blur(2px);z-index:80;display:none;animation:fade .2s}
  .overlay.show{display:block}
  .slideover{position:fixed;top:0;right:0;width:400px;max-width:92vw;height:100vh;background:#fff;z-index:90;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.28s;display:flex;flex-direction:column}
  .slideover.show{transform:none}
  .slideover .so-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .slideover .so-head h3{margin:0;font-size:16px}
  .slideover .so-body{overflow-y:auto;padding:6px 20px 20px}
  /* Update modal */
  .modal{position:fixed;z-index:95;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;width:460px;max-width:94vw;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);transition:.2s}
  .modal.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
  .modal.wide{width:600px}
  /* Pemilih dropdown ramah-HP (pengganti native select yg suka macet di iframe) */
  .sel-overlay{position:fixed;inset:0;background:rgba(11,28,63,.45);z-index:130;display:none;align-items:flex-end;justify-content:center}
  .sel-overlay.show{display:flex}
  .sel-sheet{background:#fff;width:100%;max-width:460px;border-radius:16px 16px 0 0;max-height:72vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideup .18s}
  @keyframes slideup{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
  .sel-title{padding:15px 18px;font-weight:800;font-size:12px;border-bottom:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
  .sel-list{overflow-y:auto;padding:6px}
  .sel-item{padding:13px 15px;border-radius:10px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:9px}
  .sel-item:hover{background:#F4F7FC}
  .sel-item.on{background:var(--ontrack-bg);color:var(--brand);font-weight:700}
  .sel-item.on::before{content:'✓'}
  @media(min-width:560px){.sel-overlay{align-items:center}.sel-sheet{border-radius:16px}}
  /* Filter bar dashboard (PIC · Divisi · Bulan · Tanggal — bisa gabung) */
  .dfbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
  .df-ctl{display:flex;flex-direction:column;gap:4px}
  .df-ctl label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2)}
  .df-ctl select,.df-ctl input{padding:8px 11px;border:1.5px solid var(--border-strong);border-radius:9px;font-size:12.5px;background:#fff;font-family:inherit;cursor:pointer;min-width:130px;color:var(--ink)}
  .df-reset{align-self:flex-end;color:var(--late);height:35px;font-weight:700}
  .df-count{align-self:flex-end;margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:800;white-space:nowrap;background:var(--ontrack-bg);padding:8px 12px;border-radius:9px}
  .nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .nb-cell{border-radius:10px;padding:10px 8px;text-align:center;color:#fff;display:flex;flex-direction:column;gap:2px;min-height:62px;justify-content:center}
  .nb-cell b{font-size:20px;font-weight:800;line-height:1}
  .nb-cell span{font-size:9.5px;line-height:1.15;opacity:.95}
  .nb-cell.done{background:linear-gradient(135deg,#2E9E6B,#15803D)}.nb-cell.ontrack{background:linear-gradient(135deg,#3E72B8,#3866AB)}.nb-cell.late{background:linear-gradient(135deg,#E3A70B,#D83A3A)}.nb-cell.mut{background:#94A3B8}
  /* Role-based access */
  .login-sel{width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:11px;font-size:13.5px;font-family:inherit;background:#fff;cursor:pointer;color:var(--ink)}
  .ro-flag{display:none;align-items:center;gap:5px;background:#FEF3C7;color:#92400E;font-weight:800;font-size:11.5px;padding:6px 11px;border-radius:999px;margin-right:8px;white-space:nowrap}
  .top-user{cursor:pointer}
  #role-badge{color:var(--brand);font-weight:700}
  body.ro .ro-flag{display:inline-flex}
  body.ro .head-actions .btn{display:none!important}
  body.ro .fab{display:none!important}
  body.ro [onclick^="open"]:not([onclick^="openNoti"]):not([onclick^="openScoring"]){pointer-events:none!important;opacity:.5!important}
  /* SSO Microsoft (simulasi) */
  .ms-btn{background:#fff;color:#1b1b1b;border:1.5px solid var(--border-strong);width:100%;justify-content:center;font-weight:700;margin-top:4px}
  .ms-btn:hover{background:#f6f8fc}
  .ms-logo{display:inline-grid;grid-template-columns:9px 9px;grid-template-rows:9px 9px;gap:2px;margin-right:9px}
  .ms-logo i{display:block;width:9px;height:9px}
  .ms-logo i:nth-child(1){background:#F25022}.ms-logo i:nth-child(2){background:#7FBA00}.ms-logo i:nth-child(3){background:#00A4EF}.ms-logo i:nth-child(4){background:#FFB900}
  .lock-note{font-size:12px;color:var(--muted);background:#F4F7FC;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.5}
  .deny{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:11px;padding:14px;font-size:13px;margin-top:12px}
  .deny p{margin:6px 0 0;font-weight:400;line-height:1.5}
  .pill.mut{background:#EEF2F9;color:#475569} .pill.mut .d{background:#94A3B8}
  .pill.tp{background:#EDE9FE;color:#6D28D9} .pill.tp .d{background:#7C3AED}
  .modal .mh{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .modal .mh h3{margin:2px 0 0;font-size:16.5px;line-height:1.25}
  .modal .mh .crumb{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .modal .mb{padding:22px 20px;max-height:72vh;overflow:auto}
  .modal .mf{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
  .range{width:100%;accent-color:var(--brand);height:8px;margin-top:6px;cursor:pointer}
  .big-pct{font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1}
  .mlabel{font-size:11.5px;font-weight:700;color:#334155;margin-bottom:8px}
  .status-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
  .status-pick button{padding:9px 3px;border:1.5px solid var(--border);border-radius:9px;font-size:10.5px;font-weight:700;color:var(--muted);background:#fff;cursor:pointer;transition:.12s}
  .status-pick button:hover{border-color:var(--brand)}
  .status-pick button.on{color:#fff;border-color:transparent}
  .mv-note{width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:11px;font-size:13.5px;resize:vertical}
  .mv-note:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(62,114,184,.1)}
  .pick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 12px;border-radius:11px;cursor:pointer;transition:.12s}
  .pick-row:hover{background:#F4F7FC}
  .pick-row b{font-size:13.5px}
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:120;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .hint-banner{display:flex;align-items:center;gap:11px;background:var(--ontrack-bg);border:1px solid #d3e2fd;color:#1e40af;border-radius:12px;padding:11px 15px;font-size:13px;margin-bottom:16px}
  .hint-banner b{font-weight:700}
  .kcard.editable{cursor:pointer}
  .kcard.editable:hover{box-shadow:var(--shadow-md);border-color:var(--brand)}
  .edit-hint{font-size:10.5px;color:var(--brand);font-weight:700;display:flex;align-items:center;gap:3px;margin-top:8px;opacity:0;transition:.12s}
  .kcard.editable:hover .edit-hint{opacity:1}
  .noti{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
  .noti .dotwrap{position:relative}
  .noti.unread .txt b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-left:6px;vertical-align:middle}
  .noti .txt{font-size:13px} .noti .txt p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
  .noti .time{font-size:11px;color:var(--muted-2);margin-top:4px}

  .empty{text-align:center;padding:30px;color:var(--muted);font-size:13px}
  .kpi-mini{display:flex;gap:8px;align-items:baseline}
  .kpi-mini b{font-size:20px;font-weight:800}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

  /* Donut */
  .donut-wrap{display:flex;align-items:center;gap:20px}

  /* Kanban (Task Tim) */
  .kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;min-width:1000px}
  .kcol{background:#EEF2F9;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
  .kcol-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
  .kcol-head .lft{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
  .kcol-head .lft .k-dot{width:8px;height:8px;border-radius:50%}
  .kcol-head .cnt{font-size:11px;font-weight:800;background:#fff;color:var(--muted);padding:2px 9px;border-radius:999px}
  .kcard{background:#fff;border:1px solid var(--border);border-radius:11px;padding:12px;box-shadow:var(--shadow-sm);cursor:grab;transition:.12s}
  .kcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .kcard.blocked{border-color:#f6b8b8;box-shadow:0 0 0 3px rgba(239,68,68,.06)}
  .kt{font-size:13px;font-weight:700;line-height:1.35}
  .proj-tag{font-size:11px;color:var(--brand);background:var(--ontrack-bg);padding:3px 8px;border-radius:7px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}
  .proj-tag.free{color:#64748b;background:#E7ECF3}
  .blocked-tag{font-size:10px;font-weight:800;color:#b91c1c;background:var(--late-bg);padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
  .kfoot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
  .prio{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px}
  .prio.high{background:var(--late-bg);color:#b91c1c}
  .prio.med{background:var(--warn-bg);color:#b45309}
  .prio.low{background:#E7ECF3;color:#475569}
  .due-tag{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px}
  .due-tag.late{color:var(--late)}

  /* Workload per person */
  .person{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
  .person:last-child{border-bottom:none}
  .big-av{width:46px;height:46px;font-size:16px}
  .pinfo b{font-size:14.5px}
  .pinfo .role{font-size:12px;color:var(--muted-2);margin-left:6px;font-weight:500}
  .pinfo .cur{font-size:12.5px;color:var(--muted);margin-top:4px}
  .pinfo .cur b{color:#334155;font-weight:600}
  .pchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .pchip{font-size:11px;padding:3px 9px;border-radius:7px;background:#F1F5FB;border:1px solid var(--border);color:#475569;font-weight:600}
  .load{display:flex;gap:20px;text-align:center}
  .load .n{font-size:22px;font-weight:800}
  .load .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

  /* Pipeline (recruitment) */
  .pipeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);gap:12px;min-width:1100px}
  .pcol{background:#EEF2F9;border-radius:13px;padding:10px}
  .pcol-head{padding:5px 6px 12px}
  .pcol-head b{font-size:12.5px;display:flex;align-items:center;justify-content:space-between}
  .pcol-head b .cnt{background:#fff;color:var(--muted);font-size:11px;padding:2px 8px;border-radius:999px}
  .pcol-head span{font-size:10.5px;color:var(--muted-2)}
  .pcard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px;margin-bottom:9px;box-shadow:var(--shadow-sm);cursor:grab;transition:.12s}
  .pcard:hover{box-shadow:var(--shadow-md)}
  .pcard .cn{display:flex;align-items:center;gap:8px}
  .pcard .cn b{font-size:12.5px}
  .pcard .cpos{font-size:11px;color:var(--muted);margin-top:6px}
  .pcard .crow{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
  .pcard .age{font-size:10.5px;color:var(--muted-2);display:flex;align-items:center;gap:4px}
  .mini-av{width:24px;height:24px;font-size:10px}
  /* Talent pool */
  .talent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
  .tcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:15px;box-shadow:var(--shadow-sm);transition:.12s}
  .tcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .tcat{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
  .tcat.now{background:var(--done-bg);color:#15803d}
  .tcat.move{background:var(--ontrack-bg);color:var(--ontrack)}
  .tcat.future{background:var(--warn-bg);color:#b45309}
  /* Comp table (Join & Offering) */
  .comp-table{width:100%;border-collapse:collapse;margin-top:14px}
  .comp-table td{padding:8px 0;font-size:13px;border-bottom:1px dashed var(--border)}
  .comp-table td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .comp-table tr.sub td{color:var(--muted);font-size:12px;padding-left:12px}
  .comp-table tr.plus td:last-child{color:#15803d}
  .comp-table tr.minus td:last-child{color:var(--late)}
  .comp-table tr.tot td{border-bottom:none;border-top:2px solid var(--ink);padding-top:11px;font-size:14px;font-weight:800}
  .letter{border:1px solid var(--border);border-radius:12px;padding:24px;background:#fff;max-width:720px;margin:0 auto}
  .date-cell{display:inline-block;background:var(--ontrack-bg);color:var(--ontrack);font-weight:700;font-size:11.5px;padding:3px 8px;border-radius:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cal-item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:10px;margin-bottom:7px;background:#F8FAFE}
  .cal-date{width:40px;height:40px;flex:none;border-radius:9px;background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
  .cal-date b{font-size:15px;color:var(--brand)} .cal-date span{font-size:9px;color:var(--muted);text-transform:uppercase}
  /* Offering letter — replika format Excel */
  .ol-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--navy);padding-bottom:12px;margin-bottom:6px}
  .ol-meta{font-size:11px;color:var(--muted);text-align:right;line-height:1.5}
  .ol-conf{color:var(--late);font-weight:700}
  .ol-title{text-align:center;font-weight:800;font-size:14px;letter-spacing:.5px;background:#E5EAF2;padding:8px;margin:10px 0}
  .ol-info{display:grid;grid-template-columns:150px 1fr;gap:3px 10px;font-size:12.5px;margin-bottom:8px}
  .ol-info .il{color:var(--muted);font-weight:600}
  .ol-info .iv{font-weight:700}
  table.ol{width:100%;border-collapse:collapse;margin:6px 0;font-size:12px}
  table.ol th{background:#94A3B8;color:#fff;font-weight:700;padding:6px 8px;text-align:left;font-size:11px}
  table.ol th:nth-child(2){text-align:right}
  table.ol td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:top}
  table.ol td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
  table.ol td:nth-child(3){color:var(--muted);font-size:11px}
  table.ol tr.hl td{background:#FEF9C3;font-weight:800}
  table.ol tr.sec td{background:#CBD5E1;font-weight:800;color:var(--ink);font-size:11px}
  .ol-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;text-align:center;font-size:11px}
  .ol-sign .role{font-weight:700}.ol-sign .org{color:var(--muted);font-size:10px}
  .ol-sign .nm{border-top:1px solid var(--ink);margin-top:44px;padding-top:5px;font-weight:700}
  table.pm .stick{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--border)}
  table.pm thead .stick{z-index:3;background:#fff}
  /* Public performance form */
  #public-form{min-height:100vh;background:var(--canvas);padding:24px 16px}
  .pf-wrap{max-width:820px;margin:0 auto}
  .pf-doc{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);padding:28px}
  .pf-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--navy);padding-bottom:14px}
  .pf-title{text-align:center;font-weight:800;font-size:16px;letter-spacing:.5px;margin:14px 0;background:#E5EAF2;padding:9px;border-radius:8px}
  .pf-info{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:13px;margin-bottom:14px}
  .pf-info>div{display:flex;gap:8px;align-items:center}
  .pf-info span{color:var(--muted);min-width:120px}
  .pf-info b{font-weight:700}
  .pf-info input{padding:5px 8px;border:1.5px solid var(--border-strong);border-radius:8px;font-size:12.5px}
  .pf-instruksi{font-size:12.5px;color:#334155;background:var(--ontrack-bg);border:1px solid #d3e2fd;border-radius:10px;padding:11px 13px;margin-bottom:16px;line-height:1.6}
  .pf-secmain{font-weight:800;font-size:14px;color:var(--navy);margin:20px 0 10px;letter-spacing:.4px}
  .pf-sec{font-weight:800;font-size:13px;color:var(--brand);margin:16px 0 8px}
  .pf-aspect{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:#FbFcFF}
  .pf-aname{font-weight:700;font-size:13.5px;margin-bottom:10px}
  .pf-opts{display:flex;flex-direction:column;gap:7px}
  .pf-opt{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#334155;cursor:pointer;padding:7px 9px;border:1px solid var(--border);border-radius:9px;transition:.12s}
  .pf-opt:hover{border-color:var(--brand);background:#fff}
  .pf-opt input{margin-top:2px;accent-color:var(--brand);flex:none}
  .pf-opt input:checked+span{font-weight:600;color:var(--ink)}
  .pf-ev{width:100%;margin-top:10px;padding:9px 11px;border:1.5px solid var(--border-strong);border-radius:9px;font-size:12.5px;font-family:inherit}
  .pf-ev:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(62,114,184,.1)}
  .pf-actions{display:flex;justify-content:flex-end;margin-top:20px}
  @media (max-width:640px){.pf-info{grid-template-columns:1fr}.pf-doc{padding:18px}}
  @media print{body *{visibility:hidden}#offer-letter,#offer-letter *{visibility:visible}#offer-letter{position:absolute;left:0;top:0;width:100%}.letter{border:none}}

  /* Funnel */
  .funnel{display:flex;flex-direction:column;gap:10px}
  .funnel-row{display:grid;grid-template-columns:130px 1fr 70px;gap:12px;align-items:center}
  .funnel-row .fl{font-size:12.5px;font-weight:600;color:#334155}
  .funnel-track{height:30px;border-radius:8px;background:#F1F5FB}
  .funnel-bar{height:30px;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--cyan));display:flex;align-items:center;padding-left:11px;color:#fff;font-size:12px;font-weight:800;min-width:40px}
  .funnel-row .fn{font-size:12px;font-weight:700;text-align:right;color:var(--muted)}
  .fill-cell{display:flex;align-items:center;gap:10px}
  .fill-cell .pbar{flex:1;max-width:90px}

  .menu-btn{display:none}
  .sb-overlay{position:fixed;inset:0;background:rgba(11,28,63,.42);z-index:99;display:none}
  .sb-overlay.show{display:block}
  @media (max-width:1100px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .cols{grid-template-columns:1fr}
    #app.show{grid-template-columns:1fr}
    .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:100;width:250px;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)}
    .sidebar.open{transform:none}
    .menu-btn{display:flex}
  }
  @media (max-width:720px){
    .login-wrap{grid-template-columns:1fr}
    .login-brand{display:none}
    .form-grid{grid-template-columns:1fr}
    .meta-grid{grid-template-columns:repeat(2,auto)}
    .page{padding:16px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
    /* Topbar rapat + aman notch (PWA), tak melebihi lebar layar */
    .topbar{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));gap:8px}
    .head-actions{flex-wrap:wrap;gap:6px}
    .page-head{gap:10px}
    .page-head h1{font-size:20px}
    .page-head p{font-size:13px}
    /* sentuhan lebih besar & tak ada geser horizontal */
    body{overflow-x:clip}
    .btn,.chip{min-height:38px}
    table.pm td input,table.pm td select{min-height:36px}
  }
  @media (max-width:560px){
    .topbar .search{display:none}          /* cari lewat halaman; hemat lebar di HP */
    .top-user{margin-left:auto;padding:4px;gap:0}
    .top-user .meta,.top-user .caret{display:none}   /* cukup avatar → ketuk utk menu */
    .icon-btn{width:36px;height:36px}
    .icon-btn svg{width:18px;height:18px}
    .year-pick .year-sel{max-width:104px}
  }

  /* ---------- Proyeksi Salary & Budget (ADR-0011) ---------- */
  .sp-years{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .sp-lbl{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px}
  .sp-yr{border:1px solid var(--border-strong);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 14px;font-weight:700;font-size:13px}
  .sp-yr.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .sp-yr.new{border-style:dashed;color:var(--muted)}
  .sp-tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:16px;scrollbar-width:thin}
  .sp-tab{padding:9px 13px;font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
  .sp-tab.on{color:var(--brand);border-bottom-color:var(--brand)}
  .sp-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--spe-yellow);color:#3a2f00;font-size:11px;text-align:center}
  .sp-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .sp-kpi{padding:14px 16px;min-width:0}
  .sp-kpi .l{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .sp-kpi .v{font-size:22px;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sp-kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
  .sp-chart{width:100%;height:auto;display:block}
  .sp-chart text{fill:var(--muted);font-size:10px}
  .sp-t{border-collapse:collapse;width:100%;font-size:12.5px}
  .sp-t th,.sp-t td{padding:7px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
  .sp-t th{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;background:#F6F8FC;z-index:2}
  .sp-t .sp-tot td{font-weight:700;border-top:2px solid var(--border-strong)}
  .sp-nm{max-width:230px;overflow:hidden;text-overflow:ellipsis}
  .sp-note{font-size:12.5px;color:var(--muted);line-height:1.6}
  .sp-mut{color:var(--muted)}
  .sp-src{display:inline-block;font-size:10px;font-weight:700;padding:0 5px;border-radius:5px;margin-left:5px;background:var(--ontrack-bg);color:var(--brand);vertical-align:1px}
  .sp-flag{color:#b45309;font-weight:700;font-size:11px}
  .sp-in{border:1px solid var(--border-strong);border-radius:8px;padding:6px 9px;font-size:13px;background:#fff;color:var(--ink);min-width:0}
  .sp-in.sm{padding:4px 7px;font-size:12px}
  .sp-form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
  .sp-form label{display:grid;gap:3px;font-size:12px;color:var(--muted);font-weight:600}
  .sp-res{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--ontrack-bg);font-size:13px}
  .sp-sug{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
  .sp-h{margin:16px 0 8px;font-size:13.5px}