/* ============================================================
     VKS Leave Tracker — design tokens (mirrors legacy Styles_Shared.html)
     ============================================================ */
  :root{
    --bg-0:#070b14; --bg-1:#0e1422; --bg-2:#151d2e; --bg-3:#1d2740;
    --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
    --fg:#e7ecf6; --muted:#8893ad; --dim:#5b6890;
    --accent:#74ff8a; --info:#7ab8ff; --warn:#ffb347;
    --danger:#ff6b6b; --purple:#c4a8ff; --pink:#ff9ec7;
    --display:'Space Grotesk','Noto Sans Lao',sans-serif;
    --body:'DM Sans','Noto Sans Lao',sans-serif;
    --mono:'JetBrains Mono','Noto Sans Lao',monospace;
    --lao:'Noto Sans Lao','DM Sans',sans-serif;

    /* ============================================================
       v5 phase A · VKS canonical tokens (mirrors VKS_HRM_PWA)
       Additive only - not used by any rule yet. v5 phases B-D will
       progressively swap existing rules to consume these variables.
       ============================================================ */
    /* Primary (blue) scale */
    --primary-50:#eff6ff;
    --primary-100:#dbeafe;
    --primary-200:#bfdbfe;
    --primary-300:#93c5fd;
    --primary-400:#60a5fa;
    --primary-500:#3b82f6;
    --primary-600:#2563eb;
    --primary-700:#1d4ed8;
    --primary-800:#1e40af;
    --primary-900:#1e3a8a;
    /* Neutral (slate) scale */
    --neutral-0:#ffffff;
    --neutral-50:#f8fafc;
    --neutral-100:#f1f5f9;
    --neutral-200:#e2e8f0;
    --neutral-300:#cbd5e1;
    --neutral-400:#94a3b8;
    --neutral-500:#64748b;
    --neutral-600:#475569;
    --neutral-700:#334155;
    --neutral-800:#1e293b;
    --neutral-900:#0f172a;
    /* Semantic */
    --success:#22c55e;       --success-light:#dcfce7; --success-dark:#166534;
    --warning:#f59e0b;       --warning-light:#fef3c7; --warning-dark:#92400e;
    --error:#ef4444;         --error-light:#fee2e2;   --error-dark:#991b1b;
    --vks-info:#3b82f6;      --vks-info-light:#dbeafe; --vks-info-dark:#1e40af;
    /* Shadows (light mode) */
    --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    /* Radius */
    --radius-sm:0.375rem;
    --radius-md:0.5rem;
    --radius-lg:0.75rem;
    --radius-xl:1rem;
    --radius-full:9999px;
    /* Layout */
    --sidebar-width:260px;
    --sidebar-collapsed:76px;
    /* Motion */
    --spring-snappy:cubic-bezier(0.2, 0, 0, 1);
    --spring-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
    /* Fonts (v5 canonical) */
    --vks-body:'Noto Sans','Noto Sans Lao',system-ui,-apple-system,sans-serif;
    --vks-display:'Noto Sans','Noto Sans Lao',system-ui,sans-serif;
    --vks-lao:'Noto Sans Lao','Noto Sans',sans-serif;
  }

  /* v5 phase A · base Material Symbols rule so <span class="material-symbols-outlined"> renders correctly anywhere.
     Match HRM's defaults: 20px nominal size, normal weight, not filled. */
  .material-symbols-outlined{
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
    line-height:1;
    font-size:20px;
    display:inline-block;
    vertical-align:middle;
    -webkit-font-smoothing:antialiased;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{
    font-family:var(--body); color:var(--fg); background:var(--bg-0);
    background:
      radial-gradient(1100px 800px at 85% -10%, rgba(196,168,255,.06), transparent 55%),
      radial-gradient(900px 700px at -10% 30%, rgba(122,184,255,.05), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(116,255,138,.04), transparent 55%),
      var(--bg-0);
    min-height:100vh; font-size:14px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px) 0 0/48px 48px,
      linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px) 0 0/48px 48px;
  }
  [x-cloak]{display:none !important}
  .lao{font-family:var(--lao)} .mono{font-family:var(--mono)}
  .tnum{font-variant-numeric:tabular-nums}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

  /* shared shell + header (carried by both employee and HR shells) */
  .shell{position:relative; z-index:1; max-width:520px; margin:0 auto; padding:28px 18px 80px}
  .shell.hr{max-width:560px; padding:24px 16px 80px}
  @media (min-width:768px){.shell.hr{max-width:1240px; padding:32px 28px 80px}}
  .head{display:flex; align-items:center; justify-content:space-between; gap:10px; row-gap:10px; flex-wrap:wrap; margin-bottom:18px}
  .head-left{display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 auto}
  .av{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, var(--info), var(--purple)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:13px; flex-shrink:0; letter-spacing:-0.01em}
  .av.hr{background:linear-gradient(135deg, var(--purple), var(--info))}
  .head-text{min-width:0}
  .head-text h3{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .head-text small{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.1em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* admin pill (purple) — used in both shells */
  .admin-pill{display:inline-flex; align-items:center; gap:8px; padding:5px 5px 5px 10px; border-radius:8px; background:rgba(196,168,255,.08); border:1px solid rgba(196,168,255,.28); font-family:var(--mono); font-size:9.5px; color:var(--purple); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; margin-left:auto; flex-shrink:0}
  .admin-pill-label{opacity:.85}
  .admin-pill-label b{color:var(--fg); font-weight:700; opacity:1}
  .admin-pill-verbose{display:none}
  @media (min-width:540px){.admin-pill-verbose{display:inline}}
  .admin-pill-switch{padding:3px 8px; border-radius:5px; border:none; background:rgba(196,168,255,.18); color:var(--purple); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.06em; cursor:pointer; text-transform:uppercase; transition:all .2s ease; line-height:1}
  .admin-pill-switch:hover{background:rgba(196,168,255,.28)}
  .signout-link{font-family:var(--mono); font-size:9px; color:var(--dim); text-decoration:underline; cursor:pointer; padding:4px; background:none; border:none}
  .signout-link:hover{color:var(--muted)}

  .head-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0}
  .head-action-btn{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; background:rgba(122,184,255,.08); border:1px solid rgba(122,184,255,.28); color:var(--info); font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all .2s ease}
  .head-action-btn:hover{background:rgba(122,184,255,.18); border-color:rgba(122,184,255,.45)}
  .head-action-icon{font-size:11px; line-height:1}
  /* Notification bell - sits in head-actions, can show an unread badge. */
  .bell-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; border-radius:8px; background:rgba(255,179,71,.08); border:1px solid rgba(255,179,71,.28); color:var(--warn); cursor:pointer; transition:all .2s ease; padding:0}
  .bell-btn:hover{background:rgba(255,179,71,.18); border-color:rgba(255,179,71,.45)}
  .bell-btn-icon{font-size:14px; line-height:1}
  .bell-badge{position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--danger); color:#fff; font-family:var(--mono); font-size:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--bg-0)}
  /* Notification sheet rows. */
  .notif-list{max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .notif-row{display:grid; grid-template-columns:auto 1fr auto; gap:11px; padding:11px 13px; border-radius:11px; margin-bottom:8px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); cursor:pointer; transition:all .15s ease}
  .notif-row:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10)}
  .notif-row.unread{background:rgba(122,184,255,.06); border-color:rgba(122,184,255,.22)}
  .notif-dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0}
  .notif-dot[data-t=info]{background:var(--info)}
  .notif-dot[data-t=success]{background:var(--accent)}
  .notif-dot[data-t=warn]{background:var(--warn)}
  .notif-dot[data-t=danger]{background:var(--danger)}
  .notif-body-wrap{min-width:0}
  .notif-title{font-family:var(--display); font-size:13.5px; font-weight:700; color:var(--fg); letter-spacing:-0.01em; margin-bottom:3px}
  .notif-body{font-family:var(--body); font-size:12.5px; color:var(--muted); line-height:1.45}
  .notif-meta{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:5px; display:flex; gap:6px; flex-wrap:wrap}
  .notif-time-col{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-align:right; align-self:start; padding-top:3px; white-space:nowrap}
  .notif-actions-bar{display:flex; gap:8px; padding:8px 4px 12px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:10px}
  .notif-mark-all{flex:1; padding:8px 12px; border-radius:8px; background:rgba(116,255,138,.08); border:1px solid rgba(116,255,138,.28); color:var(--accent); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all .2s ease}
  .notif-mark-all:hover:not(:disabled){background:rgba(116,255,138,.16); border-color:rgba(116,255,138,.45)}
  .notif-mark-all:disabled{opacity:.4; cursor:not-allowed}
  .head-action-label{line-height:1}

  .pin-sheet-staff{display:flex; flex-direction:column; gap:6px; max-height:48vh; overflow-y:auto; padding:4px 2px 2px}
  .pin-sheet-row{display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); transition:all .2s ease}
  .pin-sheet-row:hover{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1)}
  .pin-sheet-row.is-self{border-color:rgba(196,168,255,.32); background:rgba(196,168,255,.04)}
  .pin-sheet-row .qav{width:32px; height:32px; font-size:11px}
  .pin-sheet-name{font-family:var(--display); font-weight:600; font-size:13px; color:var(--fg); line-height:1.2}
  .pin-sheet-meta{font-family:var(--mono); font-size:9.5px; color:var(--dim); letter-spacing:0.04em; margin-top:2px; text-transform:uppercase}
  .pin-sheet-pillset{display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:5px; background:rgba(116,255,138,.1); border:1px solid rgba(116,255,138,.28); color:var(--accent); font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:0.08em}
  .pin-sheet-pillno{display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:5px; background:rgba(255,179,71,.1); border:1px solid rgba(255,179,71,.28); color:var(--warn); font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:0.08em}
  .pin-sheet-row-right{display:flex; align-items:center; gap:8px}
  .pin-sheet-reset-btn{padding:6px 11px; border-radius:7px; border:1px solid rgba(122,184,255,.32); background:rgba(122,184,255,.08); color:var(--info); font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all .2s ease}
  .pin-sheet-reset-btn:hover{background:rgba(122,184,255,.18); border-color:rgba(122,184,255,.5)}
  .pin-sheet-reset-btn:disabled{opacity:.5; cursor:not-allowed}

  .pin-result-card{padding:18px 18px 22px; border-radius:14px; background:linear-gradient(180deg, rgba(116,255,138,.08), rgba(116,255,138,.02)); border:1.5px solid rgba(116,255,138,.32); margin:6px 0 14px}
  .pin-result-label{font-family:var(--mono); font-size:9.5px; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center}
  .pin-result-name{font-family:var(--display); font-weight:700; font-size:15px; color:var(--fg); margin-bottom:4px}
  .pin-result-id{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.06em; margin-bottom:14px}
  .pin-result-pin{font-family:var(--mono); font-weight:700; font-size:34px; color:var(--accent); letter-spacing:0.32em; text-align:center; padding:14px 8px; border-radius:11px; background:rgba(0,0,0,.3); border:1px dashed rgba(116,255,138,.3); user-select:all; cursor:text}
  .pin-result-warning{margin-top:12px; padding:10px 12px; border-radius:9px; background:rgba(255,179,71,.06); border:1px solid rgba(255,179,71,.24); font-family:var(--body); font-size:12px; color:var(--warn); line-height:1.5}
  .pin-result-warning b{color:var(--fg); font-weight:600}
  .pin-result-actions{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  .pin-result-btn{padding:10px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--fg); font-family:var(--display); font-weight:600; font-size:13px; cursor:pointer; transition:all .2s ease}
  .pin-result-btn.primary{background:linear-gradient(180deg, rgba(116,255,138,.18), rgba(116,255,138,.06)); border-color:rgba(116,255,138,.36); color:var(--accent)}
  .pin-result-btn:hover{background:rgba(255,255,255,.08)}
  .pin-result-btn.primary:hover{background:linear-gradient(180deg, rgba(116,255,138,.28), rgba(116,255,138,.1))}

  .heads-pos-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); transition:all .2s ease}
  .heads-pos-row:hover{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1)}
  .heads-pos-row.has-head{border-color:rgba(196,168,255,.28); background:rgba(196,168,255,.04)}
  .heads-pos-name{font-family:var(--display); font-weight:600; font-size:13px; color:var(--fg); line-height:1.25}
  .heads-pos-meta{font-family:var(--mono); font-size:9.5px; color:var(--dim); letter-spacing:0.04em; margin-top:2px; text-transform:uppercase}
  .heads-pos-current{font-family:var(--display); font-size:11.5px; color:var(--purple); margin-top:5px; line-height:1.3}
  .heads-pos-current b{font-weight:600; color:var(--fg)}
  .heads-pos-actions{display:flex; gap:6px; flex-direction:column; align-items:flex-end}
  .heads-action-btn{padding:5px 10px; border-radius:6px; border:1px solid rgba(122,184,255,.32); background:rgba(122,184,255,.08); color:var(--info); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all .2s ease; white-space:nowrap}
  .heads-action-btn:hover{background:rgba(122,184,255,.18); border-color:rgba(122,184,255,.5)}
  .heads-action-btn.danger{border-color:rgba(255,107,107,.28); background:rgba(255,107,107,.06); color:var(--danger)}
  .heads-action-btn.danger:hover{background:rgba(255,107,107,.14); border-color:rgba(255,107,107,.5)}
  .heads-action-btn:disabled{opacity:.5; cursor:not-allowed}

  .heads-picker-head{padding:10px 12px; border-radius:9px; background:rgba(196,168,255,.06); border:1px solid rgba(196,168,255,.24); margin-bottom:10px}
  .heads-picker-head-label{font-family:var(--mono); font-size:9px; color:var(--purple); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; margin-bottom:3px}
  .heads-picker-head-pos{font-family:var(--display); font-weight:600; font-size:14px; color:var(--fg)}
  .heads-picker-back{padding:6px 11px; border-radius:7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--muted); font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all .2s ease; margin-bottom:8px}
  .heads-picker-back:hover{background:rgba(255,255,255,.08); color:var(--fg)}

  /* shared toast + loading */
  .toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); padding:11px 18px; border-radius:11px; backdrop-filter:blur(10px); background:rgba(15,22,38,.92); border:1px solid var(--line-2); font-family:var(--display); font-weight:600; font-size:13px; box-shadow:0 16px 40px rgba(0,0,0,.5); z-index:50; display:flex; align-items:center; gap:8px; max-width:480px; animation:toastIn .3s cubic-bezier(.2,.9,.3,1.1)}
  .toast.ok{border-color:rgba(116,255,138,.4); color:var(--accent)}
  .toast.err{border-color:rgba(255,107,107,.4); color:var(--danger)}
  .toast.info{border-color:rgba(122,184,255,.4); color:var(--info)}
  @keyframes toastIn{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}
  .loading{display:inline-flex; gap:3px; align-items:center}
  .loading span{width:5px; height:5px; border-radius:50%; background:currentColor; animation:dot 1.2s infinite ease-in-out}
  .loading span:nth-child(2){animation-delay:.15s}
  .loading span:nth-child(3){animation-delay:.3s}
  @keyframes dot{0%,80%,100%{opacity:.3; transform:scale(.8)}40%{opacity:1; transform:scale(1)}}

  /* boot + login + gate (PWA-only views) */
  .center-shell{position:relative; z-index:1; max-width:440px; margin:0 auto; padding:48px 22px 40px; min-height:100vh; display:flex; flex-direction:column; justify-content:center}
  .login-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
  .login-h1{font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:-0.03em; line-height:1.05; margin-bottom:10px; background:linear-gradient(135deg,#74ff8a,#7ab8ff); -webkit-background-clip:text; background-clip:text; color:transparent}
  .login-lede{font-size:14px; color:var(--muted); margin-bottom:30px; line-height:1.55}
  .login-card{padding:22px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.07); margin-bottom:14px}
  .login-card-label{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--dim); margin-bottom:9px; display:flex; justify-content:space-between; align-items:center}
  .login-input{width:100%; padding:14px 15px; border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.35); color:var(--fg); font-family:var(--mono); font-weight:600; font-size:18px; letter-spacing:0.1em; text-transform:uppercase; transition:all .2s ease}
  .login-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(116,255,138,.1)}
  .login-input::placeholder{color:var(--dim); letter-spacing:0.08em}
  .login-hint{font-family:var(--mono); font-size:10px; color:var(--dim); margin-top:8px; line-height:1.5}
  .login-confirm{padding:18px 20px; border-radius:14px; background:linear-gradient(180deg, rgba(122,184,255,.06), rgba(255,255,255,.005)); border:1px solid rgba(122,184,255,.25); margin-bottom:14px}
  .login-confirm-row{display:flex; gap:13px; align-items:center}
  .login-confirm-name{font-family:var(--display); font-weight:700; font-size:15px; line-height:1.2}
  .login-confirm-meta{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:0.06em}
  .login-confirm-role{font-family:var(--mono); font-size:9.5px; padding:3px 7px; border-radius:5px; background:rgba(196,168,255,.14); color:var(--purple); border:1px solid rgba(196,168,255,.3); margin-top:6px; display:inline-block; text-transform:uppercase; letter-spacing:0.08em; font-weight:600}
  .login-actions{display:grid; grid-template-columns:1fr 1.6fr; gap:8px}
  .login-btn{padding:13px; border-radius:11px; font-family:var(--display); font-weight:700; font-size:13.5px; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:6px; line-height:1}
  .login-btn.primary{background:linear-gradient(180deg, var(--accent), #5dd672); color:#0a1020; border:none; box-shadow:0 6px 18px rgba(116,255,138,.25)}
  .login-btn.primary:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 24px rgba(116,255,138,.35)}
  .login-btn.secondary{background:transparent; color:var(--fg); border:1px solid var(--line-2)}
  .login-btn.secondary:hover{background:rgba(255,255,255,.04)}
  .login-btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}

  .gate-card{padding:26px; border-radius:18px; background:rgba(255,179,71,.04); border:1px solid rgba(255,179,71,.3)}
  .gate-icon{width:48px; height:48px; border-radius:13px; background:rgba(255,179,71,.14); color:var(--warn); display:grid; place-items:center; font-size:22px; margin-bottom:14px; font-weight:700}
  .gate-h{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.01em; margin-bottom:8px}
  .gate-p{font-size:13.5px; color:var(--muted); line-height:1.55; margin-bottom:14px}
  .gate-info{padding:11px 13px; border-radius:10px; background:rgba(0,0,0,.3); border:1px solid var(--line); margin-top:10px; display:flex; flex-direction:column; gap:6px}
  .gate-info-row{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:10.5px}
  .gate-info-k{color:var(--dim); text-transform:uppercase; letter-spacing:0.1em; font-size:9.5px}
  .gate-info-v{color:var(--fg); text-align:right; word-break:break-all}

  /* ============== EMPLOYEE SHELL ============== */
  .seg{display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.3); border:1px solid var(--line); margin-bottom:18px}
  .seg-btn{flex:1; padding:10px 12px; border:none; background:transparent; color:var(--muted); font-family:var(--display); font-weight:600; font-size:12.5px; border-radius:9px; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:6px; letter-spacing:-0.005em}
  .seg-btn.active{background:linear-gradient(180deg, rgba(116,255,138,.12), rgba(116,255,138,.04)); color:var(--accent); box-shadow:0 0 0 1px rgba(116,255,138,.25)}
  .seg-btn .seg-count{font-family:var(--mono); font-size:9.5px; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.06); color:var(--dim)}
  .seg-btn.active .seg-count{background:rgba(116,255,138,.18); color:var(--accent)}
  .panel[hidden]{display:none}
  .field{margin-bottom:14px}
  .field-label{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center}
  .field-label .req{color:var(--danger)} .field-label .opt{color:var(--dim); font-size:9px; font-weight:500}
  .field-input,.field-select,.field-textarea{width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--fg); font-family:var(--body); font-size:13.5px; transition:all .2s ease; line-height:1.45}
  .field-textarea{resize:vertical; min-height:60px}
  .field-input:focus,.field-select:focus,.field-textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(116,255,138,.1)}
  .field-input::-webkit-calendar-picker-indicator{filter:invert(.6)}
  .field-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .dur-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px}
  .dur-cell{padding:10px 8px; border-radius:10px; background:rgba(0,0,0,.3); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:3px; transition:all .2s ease}
  .dur-cell:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(116,255,138,.08)}
  .dur-cell input{width:100%; border:none; background:transparent; color:var(--fg); font-family:var(--display); font-weight:700; font-size:20px; text-align:center; font-variant-numeric:tabular-nums; line-height:1; padding:0}
  .dur-cell input:focus{outline:none}
  .dur-cell label{font-family:var(--mono); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em; font-weight:600}
  .dur-cell.has-value input{color:var(--accent)}
  .types{display:grid; grid-template-columns:1fr 1fr; gap:6px}
  .chip{padding:10px 11px; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid var(--line); display:flex; flex-direction:column; gap:3px; cursor:pointer; transition:all .2s ease; position:relative; overflow:hidden; text-align:left}
  .chip::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:currentColor; opacity:.55}
  .chip:hover{border-color:var(--line-2); transform:translateY(-1px)}
  .chip.active{background:linear-gradient(180deg, rgba(116,255,138,.1), rgba(116,255,138,.02)); border-color:rgba(116,255,138,.4); box-shadow:0 0 0 1px rgba(116,255,138,.15)}
  .chip.active::after{content:"✓"; position:absolute; top:6px; right:8px; font-family:var(--mono); font-size:10px; color:var(--accent); font-weight:700}
  .chip-name{font-family:var(--lao); font-size:12px; font-weight:600; color:var(--fg); line-height:1.25}
  .chip-code{font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:0.05em}
  .chip[data-c="green"]{color:var(--accent)} .chip[data-c="coral"]{color:var(--danger)}
  .chip[data-c="amber"]{color:var(--warn)} .chip[data-c="pink"]{color:var(--pink)}
  .chip[data-c="purple"]{color:var(--purple)} .chip[data-c="info"]{color:var(--info)}
  .chip[data-c="dim"]{color:var(--dim)}
  .btn{width:100%; padding:13px; border-radius:11px; border:none; cursor:pointer; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-0.005em; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:7px}
  .btn.primary{background:linear-gradient(180deg, var(--accent), #5dd672); color:#0a1020; box-shadow:0 6px 18px rgba(116,255,138,.25)}
  .btn.primary:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 24px rgba(116,255,138,.35)}
  .btn:disabled{opacity:.5; cursor:not-allowed}
  .who{padding:14px 16px; border-radius:14px; background:linear-gradient(180deg, rgba(122,184,255,.06), rgba(255,255,255,.005)); border:1px solid rgba(122,184,255,.2); margin-bottom:18px}
  .who-row{display:flex; align-items:center; gap:11px}
  .who-name{font-family:var(--display); font-weight:700; font-size:14.5px; line-height:1.2}
  .who-meta{font-family:var(--mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px}
  .leave{padding:13px; border-radius:13px; background:rgba(255,255,255,.022); border:1px solid var(--line); margin-bottom:8px; transition:all .2s ease; position:relative; overflow:hidden}
  .leave::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
  .leave[data-st="approved"]::before{background:var(--accent)}
  .leave[data-st="rejected"]::before{background:var(--danger)}
  .leave[data-st="pending"]::before{background:var(--warn)}
  .leave-row1{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
  .leave-type{font-family:var(--lao); font-weight:600; font-size:13px; line-height:1.2}
  .leave-type small{font-family:var(--mono); font-weight:400; font-size:9.5px; color:var(--dim); margin-left:4px}
  .leave-dates{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:3px; letter-spacing:0.02em}
  .leave-meta{display:flex; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-family:var(--mono); font-size:9.5px; color:var(--dim); align-items:center; flex-wrap:wrap}
  .leave-meta-id{color:var(--muted)}
  .pill{font-family:var(--mono); font-size:9px; padding:3px 8px; border-radius:5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; white-space:nowrap}
  .pill.pending{background:rgba(255,179,71,.12); color:var(--warn); border:1px solid rgba(255,179,71,.25)}
  .pill.approved{background:rgba(116,255,138,.12); color:var(--accent); border:1px solid rgba(116,255,138,.25)}
  .pill.rejected{background:rgba(255,107,107,.12); color:var(--danger); border:1px solid rgba(255,107,107,.25)}
  .pill.pending::before{content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--warn); margin-right:4px; vertical-align:middle; animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
  .empty{padding:36px 24px; border-radius:14px; border:1px dashed var(--line-2); background:rgba(0,0,0,.15); text-align:center}
  .empty-icon{width:42px; height:42px; margin:0 auto 12px; border-radius:11px; background:rgba(122,184,255,.08); color:var(--info); display:grid; place-items:center; font-size:18px}
  .empty h4{font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:5px; letter-spacing:-0.01em}
  .empty p{font-size:12.5px; color:var(--muted); margin-bottom:14px}
  .edit-link{margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--info); cursor:pointer; padding:2px 7px; border-radius:5px; background:rgba(122,184,255,.08); border:1px solid rgba(122,184,255,.22); text-transform:uppercase; letter-spacing:0.06em; line-height:1}
  .edit-link:hover{background:rgba(122,184,255,.14)}
  .edit-overlay{position:fixed; inset:0; z-index:60; background:rgba(7,11,20,.78); backdrop-filter:blur(10px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .25s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .edit-sheet{width:100%; max-width:520px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border-radius:24px 24px 0 0; border-top:1px solid rgba(122,184,255,.28); box-shadow:0 -10px 40px rgba(122,184,255,.08); padding:14px 16px 22px; max-height:92vh; overflow:auto; animation:slideUp .35s cubic-bezier(.2,.9,.3,1.1)}
  @keyframes slideUp{from{transform:translateY(60%); opacity:0}to{transform:none; opacity:1}}
  .edit-sheet::-webkit-scrollbar{width:0}
  .edit-handle{width:42px; height:4px; border-radius:2px; background:var(--line-2); margin:0 auto 14px}
  .edit-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px}
  .edit-head-icon{width:32px; height:32px; border-radius:9px; background:rgba(122,184,255,.14); border:1px solid rgba(122,184,255,.3); color:var(--info); display:grid; place-items:center; font-size:14px; flex-shrink:0; font-weight:700}
  .edit-head-text h4{font-family:var(--display); font-weight:700; font-size:15px; color:var(--info); letter-spacing:-0.01em}
  .edit-head-text small{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.1em; margin-top:3px; display:block}
  .edit-head-x{width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); display:grid; place-items:center; cursor:pointer; margin-left:auto; flex-shrink:0; font-size:12px; line-height:1}
  .edit-head-x:hover{background:rgba(255,255,255,.08); color:var(--fg)}
  .edit-actions{display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:18px}
  .edit-cancel{padding:12px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font-family:var(--display); font-weight:600; font-size:12.5px; cursor:pointer; transition:all .2s ease}
  .edit-cancel:hover{background:rgba(255,255,255,.04)}
  .edit-confirm{padding:12px; border-radius:10px; border:none; background:linear-gradient(180deg, var(--accent), #5dd672); color:#0a1020; font-family:var(--display); font-weight:700; font-size:12.5px; cursor:pointer; transition:all .2s ease; box-shadow:0 6px 18px rgba(116,255,138,.25); display:flex; align-items:center; justify-content:center; gap:6px}
  .edit-confirm:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 24px rgba(116,255,138,.35)}
  .edit-confirm:disabled{opacity:.5; cursor:not-allowed; transform:none}

  /* ============== v2 · employee shell upgrades (kpi strip + card timeline + form helpers) ============== */
  /* 4-up KPI strip in the employee header: annual-left · used-YTD · pending · next-leave. */
  .kpi-strip{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:14px}
  .kpi-tile{padding:9px 8px 8px; border-radius:11px; background:rgba(0,0,0,.32); border:1px solid var(--line); position:relative; overflow:hidden; min-width:0}
  .kpi-tile[data-t="accent"]{border-color:rgba(116,255,138,.22); background:linear-gradient(180deg, rgba(116,255,138,.07), rgba(0,0,0,.32))}
  .kpi-tile[data-t="info"]{border-color:rgba(122,184,255,.22); background:linear-gradient(180deg, rgba(122,184,255,.07), rgba(0,0,0,.32))}
  .kpi-tile[data-t="warn"]{border-color:rgba(255,179,71,.22); background:linear-gradient(180deg, rgba(255,179,71,.07), rgba(0,0,0,.32))}
  .kpi-tile[data-t="purple"]{border-color:rgba(196,168,255,.22); background:linear-gradient(180deg, rgba(196,168,255,.07), rgba(0,0,0,.32))}
  .kpi-tile[data-t="dim"]{border-color:var(--line); background:rgba(0,0,0,.32)}
  .kpi-l{font-family:var(--mono); font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .kpi-n{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-0.025em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .kpi-n.sm{font-size:13px; letter-spacing:-0.01em}
  .kpi-tile[data-t="accent"] .kpi-n{color:var(--accent)}
  .kpi-tile[data-t="info"] .kpi-n{color:var(--info)}
  .kpi-tile[data-t="warn"] .kpi-n{color:var(--warn)}
  .kpi-tile[data-t="purple"] .kpi-n{color:var(--purple)}
  .kpi-tile[data-t="dim"] .kpi-n{color:var(--muted)}
  .kpi-u{font-family:var(--mono); font-size:8px; color:var(--dim); margin-top:2px; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* 3-step approval timeline rendered inside every leave card (submit → dept → HR). */
  .lv-tl{margin-top:9px; padding-top:8px; border-top:1px dashed var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; gap:0}
  .lv-tl-stage{display:flex; flex-direction:column; align-items:center; min-width:0; padding:0 2px}
  .lv-tl-line{position:relative; height:9px; display:flex; align-items:center; justify-content:center; width:100%}
  .lv-tl-line::before{content:""; position:absolute; left:50%; right:-50%; top:50%; height:1px; background:currentColor; opacity:.45}
  .lv-tl-stage:last-child .lv-tl-line::before{display:none}
  .lv-tl-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; position:relative; z-index:1; background:var(--bg-1); box-shadow:0 0 0 1.5px currentColor}
  .lv-tl-stage[data-s="done"]{color:var(--accent)} .lv-tl-stage[data-s="done"] .lv-tl-dot{background:var(--accent)}
  .lv-tl-stage[data-s="current"]{color:var(--warn)} .lv-tl-stage[data-s="current"] .lv-tl-dot{background:var(--warn); animation:pulse 2s ease-in-out infinite}
  .lv-tl-stage[data-s="rejected"]{color:var(--danger)} .lv-tl-stage[data-s="rejected"] .lv-tl-dot{background:var(--danger)}
  .lv-tl-stage[data-s="idle"]{color:var(--dim)} .lv-tl-stage[data-s="idle"] .lv-tl-dot{background:var(--bg-1); box-shadow:0 0 0 1.5px var(--dim)}
  .lv-tl-stage[data-s="skipped"]{color:var(--dim)} .lv-tl-stage[data-s="skipped"] .lv-tl-dot{background:var(--bg-1); box-shadow:0 0 0 1.5px var(--dim)}
  .lv-tl-l{font-family:var(--mono); font-size:8px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-top:5px; text-align:center; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .lv-tl-stage[data-s="current"] .lv-tl-l{color:var(--warn)}
  .lv-tl-stage[data-s="rejected"] .lv-tl-l{color:var(--danger)}
  .lv-tl-ts{font-family:var(--mono); font-size:8px; color:var(--dim); margin-top:1px; line-height:1.2; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .lv-tl-stage[data-s="current"] .lv-tl-ts{color:var(--warn)}

  /* Banded reject callout under the card (replaces the squashed inline span). */
  .lv-reject{margin-top:8px; padding:7px 9px; border-radius:8px; background:rgba(255,107,107,.07); border:1px solid rgba(255,107,107,.22); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .lv-reject-x{width:18px; height:18px; border-radius:5px; background:rgba(255,107,107,.18); color:var(--danger); display:grid; place-items:center; font-size:10px; font-weight:700; flex-shrink:0; line-height:1}
  .lv-reject-text{font-family:var(--body); font-size:11.5px; color:var(--muted); flex:1 1 auto; min-width:0; line-height:1.35}
  .lv-reject-text b{color:var(--fg); font-weight:700}
  .lv-reject-edit{margin-left:auto; font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--info); cursor:pointer; padding:3px 8px; border-radius:6px; background:rgba(122,184,255,.1); border:1px solid rgba(122,184,255,.28); text-transform:uppercase; letter-spacing:0.06em; line-height:1; flex-shrink:0}
  .lv-reject-edit:hover{background:rgba(122,184,255,.18)}

  /* Rich empty state: balance recap + 3 quick-pick chips. */
  .empty-rich{padding:20px 16px 18px; border-radius:14px; border:1px dashed rgba(196,168,255,.28); background:linear-gradient(180deg, rgba(196,168,255,.05), rgba(0,0,0,.18)); text-align:center}
  .empty-rich-eyebrow{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--purple); padding:4px 9px; border-radius:99px; border:1px solid rgba(196,168,255,.28); background:rgba(196,168,255,.06); margin-bottom:11px}
  .empty-rich h4{font-family:var(--display); font-weight:700; font-size:15px; margin:0 0 5px; letter-spacing:-0.01em}
  .empty-rich p{font-size:12px; color:var(--muted); margin:0 0 13px; line-height:1.45}
  .empty-rich-balance{font-family:var(--mono); font-size:10.5px; color:var(--accent); font-weight:700; margin-left:3px}
  .empty-rich-quick{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:13px}
  .empty-rich-qchip{font-family:var(--mono); font-size:10px; padding:6px 11px; border-radius:99px; background:rgba(116,255,138,.08); color:var(--accent); border:1px solid rgba(116,255,138,.28); letter-spacing:0.04em; cursor:pointer; transition:all .2s ease; text-transform:uppercase; font-weight:700}
  .empty-rich-qchip:hover{background:rgba(116,255,138,.18); transform:translateY(-1px)}
  .empty-rich-qchip[data-c="warn"]{background:rgba(255,179,71,.08); color:var(--warn); border-color:rgba(255,179,71,.28)}
  .empty-rich-qchip[data-c="warn"]:hover{background:rgba(255,179,71,.18)}
  .empty-rich-qchip[data-c="coral"]{background:rgba(255,107,107,.08); color:var(--danger); border-color:rgba(255,107,107,.28)}
  .empty-rich-qchip[data-c="coral"]:hover{background:rgba(255,107,107,.18)}

  /* Live duration readout under the days/hours/minutes grid in the form. */
  .dur-readout{margin-top:7px; padding:7px 10px; border-radius:8px; background:rgba(122,184,255,.06); border:1px solid rgba(122,184,255,.2); font-family:var(--mono); font-size:10.5px; color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .dur-readout b{color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums}
  .dur-readout .dur-readout-tag{font-family:var(--mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color:var(--info); padding:2px 6px; border-radius:5px; background:rgba(122,184,255,.12); border:1px solid rgba(122,184,255,.25); font-weight:700}
  .dur-readout.empty{background:rgba(0,0,0,.22); border-color:var(--line); color:var(--dim)}
  .dur-readout.empty .dur-readout-tag{color:var(--dim); background:rgba(255,255,255,.04); border-color:var(--line)}

  /* Reason field: char counter + 4 prefill chips. */
  .field-label-counter{font-family:var(--mono); font-size:9px; color:var(--dim); font-weight:600; letter-spacing:0.04em; font-variant-numeric:tabular-nums}
  .field-label-counter.warn{color:var(--warn)}
  .field-label-counter.danger{color:var(--danger)}
  .reason-chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:7px}
  .reason-chip{font-family:var(--mono); font-size:9.5px; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid var(--line); letter-spacing:0.04em; cursor:pointer; transition:all .2s ease; text-transform:uppercase; font-weight:600}
  .reason-chip:hover{background:rgba(255,255,255,.08); color:var(--fg); border-color:var(--line-2)}

  /* ============== v3a - NEW request inputs ============== */
  /* Date range setter: preset chips + inline calendar inset, replaces dual native pickers. */
  .dr-set{padding:10px 10px 8px; border-radius:13px; background:linear-gradient(180deg, rgba(196,168,255,.05), rgba(196,168,255,.005)); border:1px solid rgba(196,168,255,.22)}
  .dr-presets{display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin-bottom:8px}
  .dr-pre{padding:7px 4px; border-radius:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; text-align:center; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid var(--line); cursor:pointer; font-weight:600; transition:transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease; user-select:none}
  .dr-pre:hover{background:rgba(196,168,255,.08); color:var(--purple); border-color:rgba(196,168,255,.3)}
  .dr-pre.on{background:rgba(196,168,255,.16); color:var(--purple); border-color:rgba(196,168,255,.42); font-weight:700}
  .dr-pre:active{transform:scale(0.97)}
  .dr-nav{display:flex; align-items:center; justify-content:space-between; padding:4px 4px 6px}
  .dr-nav-btn{padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:13px; cursor:pointer; line-height:1; min-height:26px; transition:transform .12s ease, color .2s ease, border-color .2s ease, background .2s ease}
  .dr-nav-btn:hover{color:var(--purple); border-color:rgba(196,168,255,.3); background:rgba(196,168,255,.06)}
  .dr-nav-btn:active{transform:scale(0.92)}
  .dr-nav-month{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:-0.005em; color:var(--fg); text-transform:uppercase}
  .dr-nav-month b{color:var(--purple); font-weight:700}
  .dr-cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px}
  .dr-cal-grid .dh{font-family:var(--mono); font-size:8.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; text-align:center; padding:4px 0; font-weight:600}
  .dr-cal-grid .d{font-family:var(--mono); font-size:11.5px; color:var(--fg); text-align:center; padding:7px 0; border-radius:6px; cursor:pointer; transition:background .15s ease, color .15s ease, transform .12s ease; user-select:none}
  .dr-cal-grid .d:hover{background:rgba(255,255,255,.06)}
  .dr-cal-grid .d:active{transform:scale(0.92)}
  .dr-cal-grid .d.dim{color:var(--dim); opacity:.45}
  .dr-cal-grid .d.past{opacity:.32; cursor:not-allowed}
  .dr-cal-grid .d.past:hover{background:transparent}
  .dr-cal-grid .d.in{background:rgba(196,168,255,.16); color:var(--fg)}
  .dr-cal-grid .d.s{background:var(--purple); color:var(--bg-0); font-weight:700; border-radius:6px 0 0 6px}
  .dr-cal-grid .d.e{background:var(--purple); color:var(--bg-0); font-weight:700; border-radius:0 6px 6px 0}
  .dr-cal-grid .d.s.e{border-radius:6px}
  .dr-cal-grid .d.today:not(.s):not(.e){box-shadow:inset 0 0 0 1px rgba(122,184,255,.45)}
  .dr-meta{font-family:var(--mono); font-size:10px; color:var(--purple); padding:7px 4px 2px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid rgba(196,168,255,.18); margin-top:4px; flex-wrap:wrap}
  .dr-meta b{color:var(--fg); font-weight:700; font-size:11px; font-variant-numeric:tabular-nums}
  .dr-meta .empty{color:var(--dim); font-weight:400; text-transform:none; letter-spacing:0}

  /* Priority leave-type chips: 3-up grid with live balance, plus collapsible drawer for the long tail. */
  .priochips{display:grid; grid-template-columns:repeat(3, 1fr); gap:5px}
  .priochip{padding:9px 8px 8px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.25); cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; text-align:left; min-width:0; position:relative; font-family:var(--body)}
  .priochip[data-c="green"]{border-color:rgba(116,255,138,.28); background:linear-gradient(180deg, rgba(116,255,138,.06), rgba(0,0,0,.25))}
  .priochip[data-c="coral"]{border-color:rgba(255,107,107,.28); background:linear-gradient(180deg, rgba(255,107,107,.06), rgba(0,0,0,.25))}
  .priochip[data-c="amber"]{border-color:rgba(255,179,71,.28); background:linear-gradient(180deg, rgba(255,179,71,.06), rgba(0,0,0,.25))}
  .priochip:hover{transform:translateY(-1px)}
  .priochip:active{transform:scale(0.97)}
  .priochip.on[data-c="green"]{box-shadow:0 0 0 1.5px var(--accent), 0 6px 14px rgba(116,255,138,.18); border-color:transparent}
  .priochip.on[data-c="coral"]{box-shadow:0 0 0 1.5px var(--danger), 0 6px 14px rgba(255,107,107,.18); border-color:transparent}
  .priochip.on[data-c="amber"]{box-shadow:0 0 0 1.5px var(--warn), 0 6px 14px rgba(255,179,71,.18); border-color:transparent}
  .priochip.on::after{content:"\2713"; position:absolute; top:5px; right:7px; font-family:var(--mono); font-size:10px; font-weight:700; line-height:1}
  .priochip.on[data-c="green"]::after{color:var(--accent)}
  .priochip.on[data-c="coral"]::after{color:var(--danger)}
  .priochip.on[data-c="amber"]::after{color:var(--warn)}
  .priochip.dis{opacity:.45; cursor:not-allowed}
  .priochip.dis:hover{transform:none}
  .priochip-name{font-family:var(--lao); font-size:11.5px; font-weight:600; color:var(--fg); line-height:1.2; margin-bottom:3px; padding-right:14px; word-break:break-word}
  .priochip-bal{font-family:var(--mono); font-size:8.5px; letter-spacing:0.04em; line-height:1.1; font-weight:700}
  .priochip[data-c="green"] .priochip-bal{color:var(--accent)}
  .priochip[data-c="coral"] .priochip-bal{color:var(--danger)}
  .priochip[data-c="amber"] .priochip-bal{color:var(--warn)}
  .types-more{margin-top:6px; padding:7px 10px; border:1px dashed rgba(122,184,255,.3); border-radius:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--info); text-align:center; cursor:pointer; background:rgba(122,184,255,.04); font-weight:600; transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease; user-select:none}
  .types-more:hover{background:rgba(122,184,255,.1); color:var(--fg); border-color:rgba(122,184,255,.5)}
  .types-more:active{transform:scale(0.98)}
  .types-more.open{border-style:solid; color:var(--muted)}
  .types-drawer{margin-top:6px; display:grid; grid-template-columns:1fr 1fr; gap:5px}
  .types-drawer .chip{padding:8px 9px}

  /* Tap feedback for existing chip-style controls. */
  .chip:active, .reason-chip:active{transform:scale(0.97)}
  @media (prefers-reduced-motion: reduce){
    .chip:active, .reason-chip:active, .priochip:active, .dr-pre:active, .dr-nav-btn:active, .dr-cal-grid .d:active, .types-more:active{transform:none}
  }

  /* ============== v3a.1 - Dark jt-select dropdown ============== */
  /* VKS unified dropdown (jt-select) ported to the Leave Tracker dark theme.
     Used for Responsible 1 / Responsible 2 colleague pickers - replaces the
     native <select> wheel/menu with a search-enabled custom panel. */
  .jt-select{position:relative}
  .jt-select-trigger{display:flex; align-items:center; gap:9px; width:100%; min-height:46px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.32); font-size:13.5px; font-family:var(--body); color:var(--fg); cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; text-align:left}
  .jt-select-trigger:hover{border-color:var(--line-2); background:rgba(0,0,0,.4)}
  .jt-select-trigger.is-open{border-color:rgba(196,168,255,.45); box-shadow:0 0 0 3px rgba(196,168,255,.1); outline:none; background:rgba(0,0,0,.4)}
  .jt-select-trigger:focus{outline:none; border-color:rgba(196,168,255,.45); box-shadow:0 0 0 3px rgba(196,168,255,.1)}
  .jt-sel-av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg, var(--info), var(--purple)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:9.5px; flex-shrink:0; letter-spacing:-.01em}
  .jt-sel-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
  .jt-sel-placeholder{color:var(--dim); font-weight:400}
  .jt-sel-pos-trig{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; flex-shrink:0; max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .jt-sel-arrow{font-size:12px; color:var(--muted); transition:transform .2s ease; flex-shrink:0}
  .jt-select-trigger.is-open .jt-sel-arrow{transform:rotate(180deg); color:var(--purple)}
  .jt-select-trigger:active{transform:scale(0.99)}

  .jt-select-panel{position:absolute; left:0; right:0; top:calc(100% + 4px); background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border:1px solid rgba(196,168,255,.28); border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.5), 0 2px 8px rgba(196,168,255,.08); z-index:9999; overflow:hidden; animation:jt-drop-in .15s ease-out}
  @keyframes jt-drop-in{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}
  .jt-select-search-wrap{display:flex; align-items:center; gap:7px; padding:9px 10px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.18)}
  .jt-sel-search-icon{font-size:13px; color:var(--dim)}
  .jt-select-search{flex:1; border:none; outline:none; font-size:13px; font-family:var(--body); color:var(--fg); background:transparent}
  .jt-select-search::placeholder{color:var(--dim)}
  .jt-select-scroll{max-height:240px; overflow-y:auto; padding:4px; -webkit-overflow-scrolling:touch}
  .jt-select-option{display:flex; align-items:center; gap:9px; width:100%; min-height:46px; padding:8px 9px; border-radius:8px; border:none; background:transparent; font-size:13px; font-family:var(--body); color:var(--fg); cursor:pointer; text-align:left; transition:background .12s; line-height:1.2}
  .jt-select-option:hover{background:rgba(196,168,255,.08)}
  .jt-select-option.is-selected{background:rgba(196,168,255,.14); font-weight:600}
  .jt-select-option:active{transform:scale(0.99)}
  .jt-select-option-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
  .jt-sel-name{font-family:var(--body); font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
  .jt-sel-pos{font-family:var(--mono); font-size:9.5px; color:var(--dim); letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
  .jt-sel-check{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--purple); font-weight:700; flex-shrink:0}
  .jt-select-empty{padding:22px 14px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:0.04em}
  .jt-select-empty b{color:var(--fg); font-weight:600}
  .jt-sel-clear{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; border:none; background:rgba(255,107,107,.1); color:var(--danger); font-family:var(--mono); font-size:11px; cursor:pointer; flex-shrink:0; line-height:1; padding:0}
  .jt-sel-clear:hover{background:rgba(255,107,107,.22)}

  /* Bottom-sheet members - hidden on desktop, shown when the panel is in
     mobile bottom-sheet mode. On desktop the head is collapsed, the panel
     stays as a simple inline anchored card. */
  .jt-select-backdrop{display:none}
  .jt-select-sheet-head{display:none}

  /* ============== v3a.3 - Mobile bottom-sheet dropdown ============== */
  /* On phones, the colleague picker becomes a true bottom sheet:
     - dim/blur scrim covers the rest of the screen (taps close)
     - panel pinned to bottom with a drag handle, title and close button
     - search bar + scroll list adopt sheet padding
     - body scroll is locked while a sheet is open (.jt-sheet-open on body) */
  @media (max-width:768px){
    .jt-select-backdrop{
      display:block; position:fixed; inset:0; z-index:9998;
      background:rgba(7,11,20,.7);
      -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    }
    .jt-select-panel{
      position:fixed !important;
      left:0 !important; right:0 !important;
      bottom:0 !important; top:auto !important;
      width:100%;
      border-radius:20px 20px 0 0;
      max-height:78vh;
      box-shadow:0 -16px 48px rgba(0,0,0,.55), 0 -2px 12px rgba(196,168,255,.1);
      animation:jt-sheet-up .32s cubic-bezier(.32,.72,0,1);
      padding-bottom:env(safe-area-inset-bottom, 0);
    }
    .jt-select-sheet-head{
      display:flex; flex-direction:column; align-items:center;
      padding:8px 12px 6px; position:relative;
      border-bottom:1px solid var(--line);
    }
    .jt-select-handle{width:42px; height:4px; border-radius:2px; background:var(--line-2); margin-bottom:10px}
    .jt-select-sheet-title{
      font-family:var(--display); font-weight:700; font-size:14px;
      color:var(--fg); letter-spacing:-.005em; text-align:center;
      padding:0 28px; line-height:1.3;
    }
    .jt-select-sheet-x{
      position:absolute; top:8px; right:10px;
      width:34px; height:34px; border-radius:8px;
      background:rgba(255,255,255,.04); border:1px solid var(--line);
      color:var(--muted); font-size:18px; line-height:1;
      cursor:pointer; padding:0; display:grid; place-items:center;
      transition:background .15s, color .15s;
    }
    .jt-select-sheet-x:hover{background:rgba(255,255,255,.08); color:var(--fg)}
    .jt-select-sheet-x:active{transform:scale(0.92)}
    .jt-select-search-wrap{padding:11px 14px; gap:9px}
    .jt-select-search{font-size:14px}
    .jt-select-scroll{max-height:54vh; padding:6px 6px 10px}
    .jt-select-option{min-height:54px; padding:10px 12px; font-size:14px}
    .jt-sel-name{font-size:14px}
    .jt-sel-pos{font-size:10px}
  }
  @keyframes jt-sheet-up{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
  /* When ANY jt-select sheet is open we prevent the body from scrolling so
     the form behind the scrim doesn't drift while the user picks. */
  body.jt-sheet-open{overflow:hidden; touch-action:none}

  /* ============== v3a.1 - Bottom nav bar (mobile-only) ============== */
  /* Sticky thumb-reach segmented nav. Replaces the top .seg under 768px. */
  .bottom-nav{display:none}
  @media (max-width:768px){
    .bottom-nav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap:6px; background:linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,.85) 25%, var(--bg-0) 60%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line)}
    .bottom-nav-btn{flex:1; min-height:54px; padding:8px 10px; border:1px solid var(--line); background:rgba(0,0,0,.4); color:var(--muted); font-family:var(--display); font-weight:600; font-size:11.5px; border-radius:13px; cursor:pointer; transition:all .15s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; letter-spacing:0.02em; line-height:1.05}
    .bottom-nav-btn .bn-icon{font-size:18px; line-height:1}
    .bottom-nav-btn .bn-label{font-size:10px; font-family:var(--mono); letter-spacing:0.06em; text-transform:uppercase}
    .bottom-nav-btn .bn-count{font-family:var(--mono); font-size:9px; padding:1px 5px; border-radius:99px; background:rgba(255,255,255,.06); color:var(--dim); margin-left:4px; font-weight:700}
    .bottom-nav-btn.active{background:linear-gradient(180deg, rgba(116,255,138,.14), rgba(116,255,138,.04)); color:var(--accent); border-color:rgba(116,255,138,.42); box-shadow:0 0 0 1px rgba(116,255,138,.18) inset}
    .bottom-nav-btn.active .bn-count{background:rgba(116,255,138,.2); color:var(--accent)}
    .bottom-nav-btn[data-kind="new"].active{background:linear-gradient(180deg, rgba(196,168,255,.16), rgba(196,168,255,.04)); color:var(--purple); border-color:rgba(196,168,255,.42); box-shadow:0 0 0 1px rgba(196,168,255,.2) inset}
    .bottom-nav-btn:active{transform:scale(0.96)}
    /* HR bottom-nav active state: warn (amber) to match the desktop hr-seg pattern. */
    .bottom-nav.hr .bottom-nav-btn.active{background:linear-gradient(180deg, rgba(255,179,71,.16), rgba(255,179,71,.04)); color:var(--warn); border-color:rgba(255,179,71,.42); box-shadow:0 0 0 1px rgba(255,179,71,.2) inset}
    .bottom-nav.hr .bottom-nav-btn.active .bn-count{background:rgba(255,179,71,.22); color:var(--warn)}
    /* Hide the legacy top segmented nav on mobile - bottom-nav owns navigation. */
    .shell .seg{display:none}
    /* Reserve space for the fixed bar so the last form field isn't clipped. */
    .shell{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  }

  /* ============== v4 Phase 2 · Desktop sidebar (>=900px) ============== */
  .hr-sidebar{display:none}
  .hr-main{display:contents}
  @media (min-width:900px){
    /* Shell becomes a 2-column grid: sidebar (220) | main (1fr).
       .head stays full-width above; modal overlays + bottom-nav are out of flow. */
    .shell.hr{
      display:grid;
      grid-template-columns:220px 1fr;
      grid-template-rows:auto 1fr;
      column-gap:28px;
      row-gap:18px;
      padding:28px 28px 40px;
      max-width:1240px;
    }
    .shell.hr > .head{grid-column:1 / -1; margin-bottom:4px}
    .hr-sidebar{
      display:flex; flex-direction:column; gap:8px;
      grid-column:1; grid-row:2;
      position:sticky; top:24px; align-self:start;
      background:linear-gradient(180deg, rgba(196,168,255,.045), rgba(255,255,255,.005));
      border:1px solid rgba(196,168,255,.22);
      border-radius:16px;
      padding:16px 12px 14px;
      max-height:calc(100vh - 48px);
      overflow-y:auto;
    }
    .hr-main{display:block; grid-column:2; grid-row:2; min-width:0}
    /* Retire hero + top tab strip on desktop. Sidebar owns navigation. */
    .shell.hr .hero{display:none}
    .shell.hr .seg.hr-seg{display:none}
    /* Hide HR bottom-nav at desktop (mobile-only primitive). */
    .bottom-nav.hr{display:none !important}
    /* Reclaim the bottom padding reserved for the mobile bar. */
    .shell.hr{padding-bottom:40px}
    /* Modals: center on desktop instead of bottom-sheet. */
    .reject-overlay, .edit-overlay, .pin-overlay, .heads-overlay, .notif-overlay{align-items:center !important}
    .reject-sheet, .edit-sheet, .pin-sheet, .heads-sheet, .notif-sheet{
      border-radius:18px !important;
      border-top:1px solid rgba(255,255,255,.07) !important;
      box-shadow:0 24px 64px rgba(0,0,0,.55) !important;
      max-width:580px;
    }
    .reject-handle, .pin-handle, .heads-handle, .notif-handle{display:none}
  }
  /* Sidebar internals */
  .sb-brand{display:flex; align-items:center; gap:10px; padding:4px 8px 12px; border-bottom:1px solid var(--line); margin-bottom:6px}
  .sb-brand-mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--purple), var(--info)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:800; font-size:11px; letter-spacing:-0.02em; flex-shrink:0}
  .sb-brand-text{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:-0.01em; line-height:1.2}
  .sb-brand-text small{display:block; font-family:var(--mono); font-weight:500; font-size:9px; color:var(--dim); letter-spacing:.1em; text-transform:uppercase; margin-top:2px}
  .sb-section{display:flex; flex-direction:column; gap:3px}
  .sb-nav-item{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); font-family:var(--display); font-weight:600; font-size:12.5px; cursor:pointer; transition:all .15s ease; text-align:left; letter-spacing:-0.005em; width:100%; line-height:1.2}
  .sb-nav-item:hover{background:rgba(255,255,255,.04); color:var(--fg)}
  .sb-nav-item.active{background:linear-gradient(180deg, rgba(255,179,71,.14), rgba(255,179,71,.04)); color:var(--warn); border-color:rgba(255,179,71,.32); box-shadow:0 0 0 1px rgba(255,179,71,.16) inset}
  .sb-nav-ico{font-size:14px; width:18px; text-align:center; line-height:1; flex-shrink:0}
  .sb-nav-label{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sb-nav-count{font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:99px; background:rgba(255,255,255,.06); color:var(--dim); font-weight:700; flex-shrink:0}
  .sb-nav-item.active .sb-nav-count{background:rgba(255,179,71,.22); color:var(--warn)}
  .sb-divider{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:14px 11px 4px; margin-top:6px; border-top:1px solid var(--line)}
  .sb-footer{margin-top:auto; padding:14px 11px 4px; border-top:1px solid var(--line)}
  .sb-foot-name{font-family:var(--display); font-weight:600; font-size:12px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sb-foot-role{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; margin-top:3px}

  /* ============== v4 Phase 3 · Master-detail + clickable KPIs (>=900px) ============== */
  .hr-page-pending, .hr-page-history{display:block}
  .hr-page-detail{display:none}
  @media (min-width:900px){
    .hr-page-pending, .hr-page-history{
      display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap:18px;
      align-items:start;
    }
    .hr-page-master{min-width:0}
    .hr-page-detail{
      display:block;
      position:sticky; top:24px; align-self:start;
      min-width:0;
      max-height:calc(100vh - 48px);
      overflow-y:auto;
    }
    /* Inline expansion retires - the right panel owns detail. */
    .hr-page-pending .qcard .qdetail{display:none}
    .hr-page-history .hcard .hcard-detail{display:none}
    /* Compact qcards: hide the approve/reject row (panel buttons take over). */
    .hr-page-pending .qcard .qactions{display:none}
    .hr-page-pending .qcard .qrow3{justify-content:flex-start}
    /* Selection ring (purple) on master cards. */
    .hr-page-pending .qcard.selected, .hr-page-history .hcard.selected{
      box-shadow:0 0 0 1.5px rgba(196,168,255,.55);
      border-color:rgba(196,168,255,.55);
    }
  }
  /* Clickable KPI tiles - mobile-friendly tap target with cursor + hover. */
  .metric{cursor:pointer; transition:all .2s ease; position:relative; text-align:left; font:inherit; color:inherit; width:100%}
  .metric:hover{border-color:var(--line-2); background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.005))}
  .metric:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(196,168,255,.5)}
  .metric:active{transform:translateY(1px)}

  /* Detail panel primitives */
  .dpanel{
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    display:flex; flex-direction:column; gap:12px;
    animation:expandIn .25s cubic-bezier(.2,.9,.3,1.1);
  }
  .dpanel.approved{border-color:rgba(116,255,138,.32); background:linear-gradient(180deg, rgba(116,255,138,.05), rgba(255,255,255,.005))}
  .dpanel.rejected{border-color:rgba(255,107,107,.32); background:linear-gradient(180deg, rgba(255,107,107,.04), rgba(255,255,255,.005))}
  .dpanel.pending{border-color:rgba(255,179,71,.32); background:linear-gradient(180deg, rgba(255,179,71,.04), rgba(255,255,255,.005))}
  .dpanel-empty{
    background:rgba(0,0,0,.18);
    border:1px dashed var(--line-2);
    border-radius:16px;
    padding:48px 24px;
    text-align:center;
  }
  .dpanel-empty-icon{width:50px; height:50px; border-radius:13px; background:rgba(196,168,255,.08); color:var(--purple); display:grid; place-items:center; font-size:22px; margin:0 auto 14px; border:1px solid rgba(196,168,255,.25)}
  .dpanel-empty h4{font-family:var(--display); font-weight:700; font-size:15px; color:var(--fg); margin-bottom:6px; letter-spacing:-0.01em}
  .dpanel-empty p{font-size:12.5px; color:var(--muted); line-height:1.55}
  .dpanel-head{display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:1px solid var(--line)}
  .dpanel-head .qav{width:40px; height:40px; font-size:13px}
  .dpanel-headmeta{flex:1; min-width:0}
  .dpanel-name{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-0.005em; line-height:1.2}
  .dpanel-pos{font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .dpanel-summary{display:grid; grid-template-columns:1fr auto; gap:10px; padding:11px 13px; border-radius:11px; background:rgba(0,0,0,.28); border:1px solid var(--line); align-items:center}
  .dpanel-leavetype{display:flex; flex-direction:column; gap:1px; min-width:0}
  .dpanel-leavetype-name{font-family:var(--lao); font-size:13px; font-weight:600; color:var(--fg)}
  .dpanel-leavetype-meta{font-family:var(--mono); font-size:10px; color:var(--muted)}
  .dpanel-dates{font-family:var(--mono); font-size:12px; color:var(--fg); font-weight:500; text-align:right; white-space:nowrap}
  .dpanel-dates-meta{font-family:var(--mono); font-size:9.5px; color:var(--dim); margin-top:2px}
  .dpanel-row{padding:12px 14px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--line)}
  .dpanel-row-label{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:6px}
  .dpanel-row-val{font-size:13px; color:var(--fg); line-height:1.55}
  .dpanel-row-val.mono{font-family:var(--mono); font-size:11.5px}
  .dpanel-row-val.link{color:var(--info); word-break:break-all}
  .dpanel-row-val.lao{font-family:var(--lao)}
  .dpanel-meta{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; color:var(--dim); padding-top:4px; letter-spacing:.05em}
  .dpanel-actions{display:grid; grid-template-columns:1fr 1.5fr; gap:9px; margin-top:6px}
  .dpanel-btn{padding:13px 14px; border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.3); font-family:var(--display); font-weight:700; font-size:13px; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center; gap:7px; line-height:1; color:var(--fg)}
  .dpanel-btn.approve{color:var(--accent); border-color:rgba(116,255,138,.42); background:linear-gradient(180deg, rgba(116,255,138,.1), rgba(116,255,138,.03))}
  .dpanel-btn.approve:hover:not(:disabled){background:rgba(116,255,138,.18); transform:translateY(-1px); box-shadow:0 6px 20px rgba(116,255,138,.18)}
  .dpanel-btn.reject{color:var(--danger); border-color:rgba(255,107,107,.4); background:linear-gradient(180deg, rgba(255,107,107,.08), rgba(255,107,107,.02))}
  .dpanel-btn.reject:hover:not(:disabled){background:rgba(255,107,107,.14); transform:translateY(-1px)}
  .dpanel-btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}

  /* ============== v4 Phase 4 · Calendar density + range filter + keyboard ============== */
  /* Desktop calendar: roomier cells, bigger chips with leave-type suffix, 5-chip overflow. */
  @media (min-width:900px){
    .cal-cell{min-height:128px; padding:8px; gap:4px}
    .cal-day{font-size:12px}
    .cal-chip{font-size:11px; padding:3px 8px; line-height:1.3}
    .cal-chip-type{display:inline; opacity:.65; margin-left:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em}
    .cal-more{font-size:10px; padding:2px 6px}
  }
  .cal-chip-type{display:none}

  /* History row 2 - range + type + CSV. */
  .hist-filters.row2{margin-top:-6px; margin-bottom:14px; padding:8px 10px}
  .hist-fchip[data-kind="range"].active{background:rgba(122,184,255,.14); border-color:rgba(122,184,255,.4); color:var(--info)}
  .hist-fchip[data-kind="range"] .ct{font-size:9px}
  .hist-typesel{
    padding:7px 10px; border-radius:7px;
    background:rgba(0,0,0,.3); border:1px solid var(--line);
    color:var(--fg); font-family:var(--mono); font-size:11px;
    cursor:pointer; min-width:130px;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%238893ad' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
    background-repeat:no-repeat;
    background-position:right 9px center;
    padding-right:24px;
  }
  .hist-typesel:focus{outline:none; border-color:rgba(196,168,255,.4); box-shadow:0 0 0 2px rgba(196,168,255,.1)}
  .hist-typesel option{background:var(--bg-2); color:var(--fg)}
  .hist-export{
    padding:7px 11px; border-radius:7px;
    background:rgba(116,255,138,.08); border:1px solid rgba(116,255,138,.32);
    color:var(--accent); font-family:var(--display); font-weight:700; font-size:11px;
    cursor:pointer; transition:all .15s ease;
    display:inline-flex; align-items:center; gap:5px;
    letter-spacing:.02em;
  }
  .hist-export:hover{background:rgba(116,255,138,.14); transform:translateY(-1px)}
  .hist-export:active{transform:translateY(0)}

  /* Keyboard hint footer (desktop only). */
  .kbd-hint{
    display:none;
  }
  @media (min-width:900px){
    .kbd-hint{
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      margin-top:14px; padding:9px 14px;
      border-top:1px solid var(--line);
      font-family:var(--mono); font-size:9.5px; color:var(--dim);
      letter-spacing:.06em;
    }
    .kbd-hint kbd{
      font-family:var(--mono); font-size:9.5px; font-weight:600;
      background:rgba(255,255,255,.06); color:var(--fg);
      padding:2px 5px; border-radius:4px;
      border:1px solid var(--line-2);
      min-width:15px; text-align:center; display:inline-block;
    }
  }

  /* ============== v3a.1 - Header tap-target + density polish ============== */
  /* Bell + admin pill + sign-out were under the 44px tap-target floor on mobile.
     Bump them to a comfortable thumb size and tighten the wrap behavior. */
  .bell-btn{width:42px; height:42px; border-radius:10px}
  .bell-btn-icon{font-size:18px}
  .signout-link{font-family:var(--mono); font-size:10.5px; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02); text-decoration:none; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; font-weight:600; min-height:42px; display:inline-flex; align-items:center; justify-content:center}
  .signout-link:hover{color:var(--fg); background:rgba(255,255,255,.06); border-color:var(--line-2)}
  .admin-pill{padding:6px 6px 6px 12px; min-height:42px}
  .admin-pill-switch{padding:7px 11px; font-size:10px; min-height:30px}
  @media (max-width:540px){
    /* On narrow phones: collapse the admin-pill verbose suffix and ensure the
       avatar block can ellipsize without pushing actions off-screen. */
    .head{margin-bottom:14px}
    .head-text h3{font-size:14px; max-width:160px}
    .head-text small{font-size:9px; max-width:160px}
    .av{width:36px; height:36px; font-size:12px}
    .head-actions{gap:6px}
    .signout-link{font-size:10px; padding:8px 10px}
  }

  /* ============== v3a.2 - Profile sheet (tap avatar) ============== */
  /* Tap-affordance for the header avatar block + bottom sheet that hosts the
     sign-out button and admin role switch. Reuses .reject-overlay / .reject-sheet
     skeleton (slide-up animation, scrim, drag handle). */
  .head-left{cursor:pointer; padding:4px; margin:-4px; border-radius:11px; transition:background .15s ease}
  .head-left:hover{background:rgba(255,255,255,.04)}
  .head-left:active{transform:scale(0.99)}
  .head-left:focus-visible{outline:2px solid rgba(122,184,255,.5); outline-offset:2px}
  .head-chev{font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:4px; flex-shrink:0; transition:color .15s, transform .15s}
  .head-left:hover .head-chev{color:var(--info); transform:translateX(1px)}

  .profile-hero{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0 18px; text-align:center}
  .profile-av{width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg, var(--info), var(--purple)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-0.01em; box-shadow:0 8px 22px rgba(122,184,255,.25); margin-bottom:6px}
  .profile-name{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--fg)}
  .profile-pos{font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px}
  .profile-id{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em; display:flex; gap:6px; align-items:center; margin-top:6px}
  .profile-id-dot{opacity:.45}
  .profile-id-role{padding:2px 8px; border-radius:5px; background:rgba(122,184,255,.1); border:1px solid rgba(122,184,255,.28); color:var(--info); font-weight:700; letter-spacing:0.06em}

  .profile-row{display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:rgba(255,255,255,.022); min-height:54px}
  .profile-row-l{display:flex; align-items:center; gap:11px; flex:1; min-width:0}
  .profile-row-l-icon{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex-shrink:0; line-height:1}
  .profile-row-name{font-family:var(--body); font-size:13px; font-weight:600; color:var(--fg); line-height:1.2}
  .profile-row-meta{font-family:var(--mono); font-size:9px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px}
  .profile-row-cta{padding:8px 12px; min-height:38px; border-radius:8px; border:1px solid; background:rgba(0,0,0,.2); font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.06em; cursor:pointer; flex-shrink:0; transition:transform .12s ease, background .2s ease, border-color .2s ease; text-transform:uppercase; line-height:1}
  .profile-row-cta.purple{color:var(--purple); border-color:rgba(196,168,255,.42); background:rgba(196,168,255,.1)}
  .profile-row-cta.purple:hover{background:rgba(196,168,255,.2)}
  .profile-row-cta:active{transform:scale(0.96)}

  .profile-signout{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,107,107,.32); background:linear-gradient(180deg, rgba(255,107,107,.08), rgba(255,107,107,.02)); color:var(--danger); font-family:var(--display); font-weight:700; font-size:13.5px; cursor:pointer; transition:transform .12s ease, background .2s ease, border-color .2s ease; margin-top:8px; letter-spacing:-0.005em}
  .profile-signout:hover{background:rgba(255,107,107,.16); border-color:rgba(255,107,107,.5)}
  .profile-signout:active{transform:scale(0.98)}
  .profile-signout-icon{font-size:15px; line-height:1; font-weight:700}

  /* ============== v3a.1 - Bigger calendar / preset tap targets ============== */
  /* Cells and preset chips were borderline under the 44px floor. Bump padding
     so a thumb can hit them without zooming. */
  .dr-pre{padding:11px 4px; font-size:10px; min-height:40px; display:flex; align-items:center; justify-content:center}
  .dr-cal-grid .d{padding:10px 0; font-size:12.5px; min-height:38px; display:flex; align-items:center; justify-content:center}
  .dr-cal-grid .dh{padding:6px 0; font-size:9px}
  .dr-nav-btn{min-width:38px; min-height:38px; font-size:15px}
  .types-more{padding:11px 12px; font-size:10.5px; min-height:42px}
  .priochip{min-height:54px}
  .priochip-name{font-size:12px}
  .priochip-bal{font-size:9px}
  .reason-chip{padding:8px 12px; font-size:10.5px; min-height:34px}

  /* ============== HR SHELL ============== */
  .hero{display:none}
  @media (min-width:768px){
    .hero{display:block; margin-bottom:24px}
    .hero h1{font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-0.025em; line-height:1.05; margin-bottom:6px}
    .hero p{font-size:13px; color:var(--muted)}
  }
  .metrics{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px}
  @media (min-width:768px){.metrics{grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}}
  .metric{padding:13px 14px; border-radius:13px; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); border:1px solid var(--line); position:relative; overflow:hidden}
  .metric::after{content:""; position:absolute; top:-12px; right:-12px; width:60px; height:60px; border-radius:50%; opacity:.16; filter:blur(28px)}
  .metric[data-t="warn"]::after{background:var(--warn)}
  .metric[data-t="info"]::after{background:var(--info)}
  .metric[data-t="accent"]::after{background:var(--accent)}
  .metric[data-t="purple"]::after{background:var(--purple)}
  .metric-label{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); margin-bottom:6px}
  .metric-num{font-family:var(--display); font-weight:800; font-size:26px; line-height:1; letter-spacing:-0.025em}
  .metric[data-t="warn"] .metric-num{color:var(--warn)}
  .metric[data-t="info"] .metric-num{color:var(--info)}
  .metric[data-t="accent"] .metric-num{color:var(--accent)}
  .metric[data-t="purple"] .metric-num{color:var(--purple)}
  .metric-meta{font-family:var(--mono); font-size:9px; color:var(--muted); margin-top:5px}
  .section-head{display:flex; justify-content:space-between; align-items:center; padding:0 4px; margin:6px 0 10px}
  .section-title{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-0.01em}
  .section-meta{font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em}
  /* HR-specific seg overrides (smaller pills, warn-tinted active) */
  .seg.hr-seg{gap:3px; padding:3px; border-radius:9px; max-width:480px}
  .seg.hr-seg .seg-btn{padding:7px 8px; font-size:11px; border-radius:7px; gap:5px}
  .seg.hr-seg .seg-btn.active{background:rgba(255,179,71,.14); color:var(--warn); box-shadow:0 0 0 1px rgba(255,179,71,.25)}
  .seg.hr-seg .seg-btn.active .seg-count{background:rgba(255,179,71,.2); color:var(--warn)}
  .queue{display:flex; flex-direction:column; gap:8px}
  .qcard{padding:14px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid var(--line); cursor:pointer; transition:all .2s ease}
  .qcard:hover{border-color:var(--line-2); transform:translateY(-1px)}
  .qcard.selected{border-color:rgba(196,168,255,.4); background:linear-gradient(180deg, rgba(196,168,255,.06), rgba(255,255,255,.005))}
  .qrow1{display:flex; align-items:center; gap:11px; margin-bottom:10px}
  .qav{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:11.5px; flex-shrink:0; letter-spacing:-0.01em}
  .qmeta{flex:1; min-width:0}
  .qname{font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:-0.005em; line-height:1.2}
  .qpos{font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .qrow2{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:9px 11px; border-radius:10px; background:rgba(0,0,0,.3)}
  .qtype{display:flex; flex-direction:column; gap:1px; min-width:0}
  .qtype-name{font-family:var(--lao); font-size:12.5px; font-weight:600; color:var(--fg)}
  .qtype-dur{font-family:var(--mono); font-size:10px; color:var(--muted)}
  .qdates{font-family:var(--mono); font-size:11px; color:var(--fg); font-weight:500; text-align:right; white-space:nowrap}
  .qdates-meta{font-family:var(--mono); font-size:9px; color:var(--dim); margin-top:1px}
  .qrow3{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px}
  .qactions{display:flex; gap:5px}
  .qbtn{padding:6px 11px; border-radius:7px; border:1px solid var(--line); background:rgba(0,0,0,.3); font-family:var(--display); font-weight:700; font-size:10.5px; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; gap:5px; line-height:1; color:var(--fg)}
  .qbtn.approve{color:var(--accent); border-color:rgba(116,255,138,.3)}
  .qbtn.approve:hover:not(:disabled){background:rgba(116,255,138,.12)}
  .qbtn.reject{color:var(--danger); border-color:rgba(255,107,107,.28)}
  .qbtn.reject:hover:not(:disabled){background:rgba(255,107,107,.08)}
  .qbtn:disabled{opacity:.5; cursor:not-allowed}
  .qdetail{margin-top:11px; padding-top:11px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; animation:expandIn .3s cubic-bezier(.2,.9,.3,1.1)}
  @keyframes expandIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
  .qdetail-row{padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--line)}
  .qdetail-label{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); margin-bottom:4px}
  .qdetail-val{font-size:12.5px; color:var(--fg); line-height:1.45}
  .qdetail-val.mono{font-family:var(--mono); font-size:11px}
  .qdetail-val.link{color:var(--info)}
  .tl{padding:12px 13px; border-radius:11px; background:rgba(0,0,0,.22); border:1px solid var(--line)}
  .tl-row{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:5px 0; position:relative}
  .tl-row:not(:last-child)::before{content:""; position:absolute; left:10px; top:24px; bottom:-4px; width:2px; background:var(--line)}
  .tl-dot{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:700; z-index:1}
  .tl-row.done .tl-dot{background:var(--accent); color:#0a1020}
  .tl-row.done:not(:last-child)::before{background:var(--accent)}
  .tl-row.current .tl-dot{background:var(--warn); color:#0a1020; box-shadow:0 0 0 4px rgba(255,179,71,.15)}
  .tl-row.pending .tl-dot{background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--line)}
  .tl-row.rejected .tl-dot{background:var(--danger); color:#0a1020}
  .tl-row.rejected:not(:last-child)::before{background:rgba(255,107,107,.5)}
  .tl-row.rejected .tl-row-content h6{color:var(--danger)}
  .tl-row-content h6{font-family:var(--display); font-weight:600; font-size:12px}
  .tl-row-content small{font-family:var(--mono); font-size:9.5px; color:var(--dim); display:block; margin-top:1px}

  /* ============== P4 History tab ============== */
  .hist-filters{display:flex; flex-wrap:wrap; gap:6px; padding:10px; border-radius:11px; background:rgba(0,0,0,.22); border:1px solid var(--line); margin-bottom:14px; align-items:center}
  .hist-fchip{padding:6px 11px; border-radius:7px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--muted); font-family:var(--display); font-weight:600; font-size:11px; cursor:pointer; transition:all .2s ease; display:inline-flex; align-items:center; gap:5px; letter-spacing:-0.005em}
  .hist-fchip:hover{border-color:var(--line-2); color:var(--fg)}
  .hist-fchip.active{background:rgba(196,168,255,.12); border-color:rgba(196,168,255,.4); color:var(--purple)}
  .hist-fchip .ct{font-family:var(--mono); font-size:9.5px; padding:1px 5px; border-radius:3px; background:rgba(255,255,255,.06); color:inherit; opacity:.85}
  .hist-search{flex:1; min-width:140px; padding:7px 10px; border-radius:7px; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--fg); font-family:var(--mono); font-size:11px}
  .hist-search:focus{outline:none; border-color:rgba(196,168,255,.45); box-shadow:0 0 0 2px rgba(196,168,255,.1)}
  .hist-clear{padding:6px 9px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--dim); font-family:var(--mono); font-size:10px; cursor:pointer; text-transform:uppercase; letter-spacing:0.08em}
  .hist-clear:hover{color:var(--fg); border-color:var(--line-2)}
  .hcard{padding:13px; border-radius:12px; background:rgba(255,255,255,.018); border:1px solid var(--line); transition:all .2s ease; cursor:pointer; position:relative; overflow:hidden}
  .hcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
  .hcard[data-st="approved"]::before{background:var(--accent)}
  .hcard[data-st="rejected"]::before{background:var(--danger)}
  .hcard[data-st="pending"]::before{background:var(--warn)}
  .hcard:hover{border-color:var(--line-2); transform:translateY(-1px)}
  .hcard.selected{border-color:rgba(196,168,255,.4); background:linear-gradient(180deg, rgba(196,168,255,.05), rgba(255,255,255,.005))}
  .hcard-row1{display:flex; align-items:center; gap:10px; margin-bottom:9px}
  .hcard-meta{flex:1; min-width:0}
  .hcard-name{font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:-0.005em; line-height:1.2}
  .hcard-pos{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hcard-row2{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:8px 11px; border-radius:9px; background:rgba(0,0,0,.28)}
  .hcard-type{display:flex; flex-direction:column; gap:1px; min-width:0}
  .hcard-tname{font-family:var(--lao); font-size:12px; font-weight:600; color:var(--fg)}
  .hcard-tdur{font-family:var(--mono); font-size:9.5px; color:var(--muted)}
  .hcard-dates{font-family:var(--mono); font-size:10.5px; color:var(--fg); font-weight:500; text-align:right; white-space:nowrap}
  .hcard-decided{font-family:var(--mono); font-size:9px; color:var(--dim); margin-top:1px; text-align:right}
  .hcard-row3{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:0.06em}
  .hcard-id{color:var(--dim)}
  .hcard-detail{margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; animation:expandIn .3s cubic-bezier(.2,.9,.3,1.1)}
  .hcard-drow{padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.22); border:1px solid var(--line)}
  .hcard-dlabel{font-family:var(--mono); font-size:8.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); margin-bottom:3px}
  .hcard-dval{font-size:12px; color:var(--fg); line-height:1.45}
  .hcard-dval.mono{font-family:var(--mono); font-size:10.5px}
  .hist-list{display:flex; flex-direction:column; gap:7px}
  .hist-toolbar{display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 10px; font-family:var(--mono); font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em}

  /* ============== P3 Calendar tab ============== */
  .cal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.22); border:1px solid var(--line); margin-bottom:14px}
  .cal-title{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-0.01em}
  .cal-title small{font-family:var(--mono); font-weight:500; font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:0.08em; margin-left:8px}
  .cal-nav{display:flex; gap:4px; align-items:center}
  .cal-nav-btn{width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--fg); cursor:pointer; transition:all .2s ease; font-family:var(--mono); font-size:14px; display:grid; place-items:center; line-height:1}
  .cal-nav-btn:hover{border-color:var(--line-2); background:rgba(255,255,255,.04)}
  .cal-nav-today{padding:6px 11px; border-radius:7px; border:1px solid rgba(196,168,255,.35); background:rgba(196,168,255,.08); color:var(--purple); font-family:var(--display); font-weight:700; font-size:10.5px; cursor:pointer; text-transform:uppercase; letter-spacing:0.06em; transition:all .2s ease; margin-left:4px}
  .cal-nav-today:hover{background:rgba(196,168,255,.16)}
  .cal-dow{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; margin-bottom:5px}
  .cal-dow span{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); text-align:center; padding:5px 0; font-weight:600}
  .cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px}
  .cal-cell{min-height:78px; padding:5px; border-radius:8px; border:1px solid var(--line); background:rgba(0,0,0,.18); display:flex; flex-direction:column; gap:3px; transition:all .15s ease}
  .cal-cell.muted{opacity:.35}
  .cal-cell.today{border-color:rgba(196,168,255,.55); background:linear-gradient(180deg, rgba(196,168,255,.06), rgba(0,0,0,.18))}
  .cal-cell.weekend{background:rgba(0,0,0,.27)}
  .cal-day{font-family:var(--mono); font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:0.02em}
  .cal-cell.today .cal-day{color:var(--purple); font-weight:700}
  .cal-chips{display:flex; flex-direction:column; gap:2px; overflow:hidden}
  .cal-chip{padding:2px 5px; border-radius:4px; font-family:var(--display); font-weight:600; font-size:9.5px; line-height:1.25; cursor:pointer; transition:all .15s ease; border:1px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.005em}
  .cal-chip[data-st="approved"]{background:rgba(116,255,138,.14); color:var(--accent); border-color:rgba(116,255,138,.22)}
  .cal-chip[data-st="pending"]{background:rgba(255,179,71,.12); color:var(--warn); border-color:rgba(255,179,71,.22); border-style:dashed}
  .cal-chip[data-st="rejected"]{background:rgba(255,107,107,.08); color:var(--danger); border-color:rgba(255,107,107,.18); text-decoration:line-through; opacity:.6}
  .cal-chip:hover{transform:translateX(1px)}
  .cal-chip.selected{box-shadow:0 0 0 1.5px rgba(196,168,255,.55)}
  .cal-more{font-family:var(--mono); font-size:9px; color:var(--dim); padding:1px 4px; cursor:default}
  .cal-legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.18); border:1px solid var(--line); font-family:var(--mono); font-size:9.5px; color:var(--dim); align-items:center}
  .cal-legend-item{display:inline-flex; align-items:center; gap:5px}
  .cal-legend-dot{width:9px; height:9px; border-radius:3px; display:inline-block}
  .cal-legend-dot.approved{background:rgba(116,255,138,.55)}
  .cal-legend-dot.pending{background:rgba(255,179,71,.5); border:1px dashed rgba(255,179,71,.7); box-sizing:border-box}
  .cal-legend-dot.rejected{background:rgba(255,107,107,.35)}
  .cal-detail{margin-top:12px; padding:12px 13px; border-radius:11px; background:linear-gradient(180deg, rgba(196,168,255,.06), rgba(0,0,0,.18)); border:1px solid rgba(196,168,255,.3); animation:expandIn .3s cubic-bezier(.2,.9,.3,1.1)}
  .cal-detail .cd-head{display:flex; align-items:center; gap:9px; margin-bottom:8px}
  .cal-detail .cd-name{font-family:var(--display); font-weight:600; font-size:13px; flex:1}
  .cal-detail .cd-row{display:flex; justify-content:space-between; gap:8px; padding:5px 0; font-family:var(--mono); font-size:10.5px; color:var(--muted); border-top:1px dashed var(--line)}
  .cal-detail .cd-row b{color:var(--fg); font-weight:500}
  .cal-detail .cd-close{position:absolute; right:8px; top:8px; width:24px; height:24px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:12px; line-height:1}
  .cal-detail{position:relative}
  @media (max-width:560px){
    .cal-cell{min-height:62px; padding:4px}
    .cal-day{font-size:9.5px}
    .cal-chip{font-size:8.5px; padding:1px 4px}
  }

  .reject-overlay{position:fixed; inset:0; z-index:60; background:rgba(7,11,20,.75); backdrop-filter:blur(10px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .25s ease}
  .reject-sheet{width:100%; max-width:560px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); border-radius:24px 24px 0 0; border-top:1px solid rgba(255,107,107,.28); box-shadow:0 -10px 40px rgba(255,107,107,.08); padding:14px 16px 22px; max-height:90vh; overflow:auto; animation:slideUp .35s cubic-bezier(.2,.9,.3,1.1)}
  .reject-sheet::-webkit-scrollbar{width:0}
  .reject-handle{width:42px; height:4px; border-radius:2px; background:var(--line-2); margin:0 auto 14px}
  .reject-head{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px}
  .reject-head-icon{width:32px; height:32px; border-radius:9px; background:rgba(255,107,107,.14); border:1px solid rgba(255,107,107,.3); color:var(--danger); display:grid; place-items:center; font-size:14px; flex-shrink:0; font-weight:700}
  .reject-head-text h4{font-family:var(--display); font-weight:700; font-size:15px; color:var(--danger); letter-spacing:-0.01em}
  .reject-head-text small{font-family:var(--mono); font-size:9.5px; color:var(--dim); text-transform:uppercase; letter-spacing:0.1em; margin-top:3px; display:block}
  .reject-head-x{width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); display:grid; place-items:center; cursor:pointer; margin-left:auto; flex-shrink:0; font-size:12px; line-height:1}
  .reject-head-x:hover{background:rgba(255,255,255,.08); color:var(--fg)}
  .reject-target{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.3); border:1px solid var(--line); margin-bottom:14px}
  .reject-target-name{font-family:var(--display); font-weight:600; font-size:12px; line-height:1.3}
  .reject-target-meta{font-family:var(--mono); font-size:9.5px; color:var(--dim); margin-top:2px}
  .reject-target-tag{font-family:var(--mono); font-size:9px; color:var(--dim); padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.04); margin-left:auto}
  .reject-section{margin-bottom:14px}
  .reject-section-label{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dim); margin-bottom:7px; display:flex; justify-content:space-between; align-items:center}
  .reject-section-label .req{color:var(--danger); font-weight:700}
  .reject-chips{display:grid; grid-template-columns:1fr 1fr; gap:6px}
  .reject-chip{padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--fg); font-family:var(--display); font-weight:600; font-size:11px; line-height:1.3; cursor:pointer; transition:all .2s ease; text-align:left; display:flex; flex-direction:column; gap:2px; position:relative}
  .reject-chip-num{font-family:var(--mono); font-size:9px; color:var(--dim); font-weight:500; letter-spacing:0.05em}
  .reject-chip:hover{border-color:var(--line-2)}
  .reject-chip.active{background:linear-gradient(180deg, rgba(255,107,107,.1), rgba(255,107,107,.02)); border-color:rgba(255,107,107,.45); color:var(--danger); box-shadow:0 0 0 1px rgba(255,107,107,.1)}
  .reject-chip.active .reject-chip-num{color:var(--danger); opacity:.7}
  .reject-chip.active::after{content:"✓"; position:absolute; top:6px; right:7px; font-family:var(--mono); font-size:10px; color:var(--danger); font-weight:700}
  .reject-textarea{width:100%; padding:10px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--fg); font-family:var(--body); font-size:12px; line-height:1.5; resize:vertical; min-height:62px}
  .reject-textarea:focus{outline:none; border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,107,.1)}
  .reject-toggle{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:rgba(0,0,0,.25); border:1px solid var(--line)}
  .reject-toggle-info h6{font-family:var(--display); font-weight:600; font-size:11.5px}
  .reject-toggle-info small{font-family:var(--mono); font-size:9.5px; color:var(--dim); display:block; margin-top:2px}
  .toggle-sw{width:34px; height:19px; border-radius:10px; background:rgba(255,255,255,.08); position:relative; cursor:pointer; transition:all .2s ease; flex-shrink:0}
  .toggle-sw::after{content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--muted); transition:all .2s ease}
  .toggle-sw.on{background:rgba(116,255,138,.3)}
  .toggle-sw.on::after{left:17px; background:var(--accent)}
  .reject-actions{display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:14px}
  .reject-cancel{padding:12px; border-radius:10px; border:1px solid var(--line-2); background:transparent; color:var(--fg); font-family:var(--display); font-weight:600; font-size:12.5px; cursor:pointer; transition:all .2s ease}
  .reject-cancel:hover{background:rgba(255,255,255,.04)}
  .reject-confirm{padding:12px; border-radius:10px; border:none; background:linear-gradient(180deg, var(--danger), #e85555); color:#fff; font-family:var(--display); font-weight:700; font-size:12.5px; cursor:pointer; transition:all .2s ease; box-shadow:0 6px 18px rgba(255,107,107,.3); display:flex; align-items:center; justify-content:center; gap:6px}
  .reject-confirm:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,107,107,.4)}
  .reject-confirm:disabled{opacity:.5; cursor:not-allowed; transform:none}
  .av-h0{background:linear-gradient(135deg,#7ab8ff,#c4a8ff)}
  .av-h1{background:linear-gradient(135deg,#74ff8a,#7ab8ff)}
  .av-h2{background:linear-gradient(135deg,#ffb347,#ff6b6b)}
  .av-h3{background:linear-gradient(135deg,#c4a8ff,#ff9ec7)}
  .av-h4{background:linear-gradient(135deg,#7ab8ff,#74ff8a)}
  .av-h5{background:linear-gradient(135deg,#ff9ec7,#c4a8ff)}

  /* ===============================================================
     v5 phase B+C+D · VKS LIGHT MODE
     Re-skins every visible surface to match HRM/Patrol/QC Dashboard:
     light surfaces, Noto Sans body, Material Symbols icons, blue-
     primary palette, semantic colors. Cascade-late so it overrides
     the dark-mode rules above without touching them.
     =============================================================== */

  /* --- Token reassignment: existing names mapped to light VKS values --- */
  :root{
    --bg-0:#f8fafc;   /* page bg (neutral-50) */
    --bg-1:#f1f5f9;   /* subtle surface (neutral-100) */
    --bg-2:#ffffff;   /* card surface (neutral-0) */
    --bg-3:#e2e8f0;   /* divider tint (neutral-200) */
    --line:#e2e8f0;
    --line-2:#cbd5e1;
    --fg:#0f172a;
    --muted:#64748b;
    --dim:#94a3b8;
    --accent:#22c55e;
    --info:#3b82f6;
    --warn:#f59e0b;
    --danger:#ef4444;
    --purple:#7c3aed;
    --pink:#ec4899;
    --body:var(--vks-body);
    --display:var(--vks-body);
    --mono:'JetBrains Mono','Noto Sans Lao',ui-monospace,monospace;
    --lao:var(--vks-lao);
  }

  /* --- Body + page chrome --- */
  body{
    background:var(--neutral-50);
    color:var(--neutral-900);
    font-family:var(--vks-body);
  }
  body::before{display:none}

  /* --- Shell + topbar (.head) --- */
  .shell.hr{padding-bottom:40px}
  .head{padding:0 0 4px}
  .head-text h3{color:var(--neutral-900); font-family:var(--vks-body); font-weight:700}
  .head-text small{color:var(--neutral-500); font-weight:500}
  .av{background:linear-gradient(135deg,var(--primary-600),var(--primary-800)) !important; color:#fff !important}
  .av.hr{background:linear-gradient(135deg,var(--primary-700),var(--primary-900)) !important}
  .head-chev{color:var(--neutral-400)}
  .bell-btn{background:var(--neutral-0); border:1px solid var(--neutral-200); color:var(--neutral-600)}
  .bell-btn:hover{background:var(--neutral-100); color:var(--neutral-900)}
  .bell-btn-icon{color:inherit}
  .bell-btn-icon.material-symbols-outlined{font-size:18px !important; line-height:1}
  @media (min-width:768px){ .bell-btn-icon.material-symbols-outlined{font-size:20px !important} }
  .head-action-icon.material-symbols-outlined{font-size:16px !important; line-height:1}
  .bell-dot{background:var(--error); border-color:var(--neutral-0)}
  .signout-link{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-600)}
  .signout-link:hover{background:var(--neutral-100); color:var(--neutral-900); border-color:var(--neutral-300)}
  .head-action-btn{background:var(--neutral-0); border:1px solid var(--neutral-200); color:var(--neutral-600)}
  .head-action-btn:hover{background:var(--neutral-100); color:var(--neutral-900); border-color:var(--neutral-300)}
  .admin-pill{background:var(--primary-50); border-color:var(--primary-200); color:var(--primary-700)}
  .admin-pill-switch{background:var(--primary-100); border-color:var(--primary-300); color:var(--primary-800)}
  .admin-pill-switch:hover{background:var(--primary-200)}
  .admin-pill-label{color:var(--primary-700)}

  /* --- v6.A · Full-bleed shell with flush-left sidebar --- */
  .hr-sidebar{display:none !important}
  .sidebar{display:none}
  @media (min-width:900px){
    /* Shell now occupies the full viewport: sidebar pinned flush to left edge,
       main column scrolls independently. Replaces the centered card pattern. */
    .shell.hr{
      display:grid;
      grid-template-columns:var(--sidebar-width) 1fr;
      grid-template-rows:auto 1fr;
      column-gap:0;
      row-gap:0;
      max-width:none;
      width:100%;
      min-height:100vh;
      padding:0;
      margin:0;
    }
    .shell.hr.sidebar-collapsed{grid-template-columns:64px 1fr}
    .shell.hr > .head{
      grid-column:2; grid-row:1;
      position:sticky; top:0; z-index:30;
      background:var(--neutral-0);
      border-bottom:1px solid var(--neutral-200);
      padding:12px 32px;
      margin:0;
      box-shadow:0 1px 0 rgba(15,23,42,.02);
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .shell.hr > .head .head-left{padding:6px 10px; border-radius:10px; transition:background .15s ease}
    .shell.hr > .head .head-left:hover{background:var(--neutral-100)}
    .shell.hr > .head .head-actions{gap:8px}
    .sidebar{
      display:flex; flex-direction:column;
      grid-column:1; grid-row:1 / -1;
      background:var(--neutral-0);
      border:none;
      border-right:1px solid var(--neutral-200);
      border-radius:0;
      box-shadow:none;
      position:sticky; top:0; align-self:stretch;
      height:100vh; max-height:100vh;
      overflow:hidden;
      transition:none;
    }
    .hr-main{
      display:block; grid-column:2; grid-row:2; min-width:0;
      padding:24px 32px 40px;
    }
    .shell.hr .hero{display:none}
    .shell.hr .seg.hr-seg{display:none}
  }
  .sidebar-header{padding:18px 16px; border-bottom:1px solid var(--neutral-100)}
  .sidebar-brand{display:flex; align-items:center; gap:12px}
  .sidebar-logo{
    width:40px; height:40px;
    background:var(--primary-600);
    border-radius:var(--radius-lg);
    display:flex; align-items:center; justify-content:center;
    color:#fff; flex-shrink:0;
    box-shadow:0 4px 10px rgba(29,78,216,.22);
  }
  .sidebar-logo .material-symbols-outlined{font-size:22px}
  .brand-text h1{font-family:var(--vks-body); font-size:15px; font-weight:700; color:var(--neutral-900); line-height:1.2; letter-spacing:-.005em}
  .brand-text p{font-family:var(--vks-lao); font-size:11px; color:var(--neutral-500); margin-top:2px}
  .sidebar-nav{flex:1; padding:12px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:2px}
  .nav-section-title{font-family:var(--vks-lao); font-size:10.5px; font-weight:600; color:var(--neutral-400); text-transform:uppercase; letter-spacing:.06em; padding:10px 12px 4px}
  .nav-item{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px;
    border-radius:var(--radius-md);
    color:var(--neutral-600);
    font-family:var(--vks-body);
    font-size:13.5px; font-weight:500;
    cursor:pointer;
    border:none; background:transparent;
    width:100%; text-align:left;
    position:relative; overflow:hidden;
    transition:background .18s var(--spring-snappy), color .18s var(--spring-snappy), transform .18s var(--spring-snappy);
  }
  .nav-item::before{
    content:''; position:absolute; left:0; top:50%;
    width:3px; height:18px; border-radius:0 3px 3px 0;
    background:var(--primary-600);
    transform:translate(-3px,-50%) scaleY(0);
    transform-origin:left center;
    transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease;
    opacity:0; pointer-events:none;
  }
  .nav-item:hover{background:var(--neutral-100); color:var(--neutral-900); transform:translateX(2px)}
  .nav-item.active{background:var(--primary-50); color:var(--primary-700); transform:translateX(0)}
  .nav-item.active::before{transform:translate(0,-50%) scaleY(1); opacity:1}
  .nav-item .material-symbols-outlined{font-size:20px; transition:transform .18s var(--spring-snappy); color:inherit}
  .nav-item:hover .material-symbols-outlined{transform:scale(1.08)}
  .nav-item .nav-count{
    margin-left:auto;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; font-weight:700;
    padding:2px 8px; border-radius:99px;
    background:var(--neutral-100); color:var(--neutral-500);
  }
  .nav-item.active .nav-count{background:var(--primary-100); color:var(--primary-700)}
  .nav-divider{font-family:var(--vks-lao); font-size:10.5px; font-weight:600; color:var(--neutral-400); text-transform:uppercase; letter-spacing:.08em; padding:14px 12px 6px; margin-top:8px; border-top:1px solid var(--neutral-100)}
  .sidebar-footer{padding:12px 16px; border-top:1px solid var(--neutral-100); display:flex; flex-direction:column; gap:8px}
  .sidebar-footer .sb-foot-name{font-family:var(--vks-body); font-size:13px; font-weight:600; color:var(--neutral-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sidebar-footer .sb-foot-role{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em; margin-top:0}
  .sidebar-footer .kbd-hint{display:flex; flex-direction:column; gap:5px; margin-top:6px; padding-top:10px; border-top:1px dashed var(--neutral-200); color:var(--neutral-500); font-size:10.5px}
  .sidebar-footer .kbd-hint kbd{background:var(--neutral-100); color:var(--neutral-800); border:1px solid var(--neutral-300); border-radius:3px; padding:1px 5px; font-family:'JetBrains Mono',monospace; font-size:9.5px}

  /* --- v6.A · Bottom-anchored sidebar collapse strip --- */
  .sidebar-collapse{
    padding:8px 10px;
    border-top:1px solid var(--neutral-100);
    background:var(--neutral-50);
    flex-shrink:0;
  }
  .sidebar-collapse-btn{
    width:100%; height:36px; border-radius:8px;
    border:1px solid var(--neutral-200); background:var(--neutral-0);
    color:var(--neutral-600); font-family:'JetBrains Mono',monospace;
    font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; transition:background .16s var(--spring-snappy), color .16s var(--spring-snappy), border-color .16s var(--spring-snappy);
  }
  .sidebar-collapse-btn:hover{background:var(--neutral-100); border-color:var(--neutral-300); color:var(--neutral-900)}
  .sidebar-collapse-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-100); border-color:var(--primary-400)}
  .sidebar-collapse-btn .material-symbols-outlined{font-size:16px; transition:transform .2s var(--spring-snappy)}
  .sidebar-collapse-btn:hover .material-symbols-outlined{transform:translateX(-2px)}
  .sidebar-collapse-kbd{font-family:'JetBrains Mono',monospace; font-size:9.5px; opacity:.6; margin-left:auto; padding-left:4px}

  /* --- Collapsed sidebar variant (64px icon rail) --- */
  @media (min-width:900px){
    .sidebar.collapsed{width:64px}
    .sidebar.collapsed .sidebar-header{padding:14px 8px}
    .sidebar.collapsed .sidebar-brand{justify-content:center}
    .sidebar.collapsed .brand-text{display:none}
    .sidebar.collapsed .sidebar-nav{padding:12px 8px; align-items:stretch}
    .sidebar.collapsed .nav-item{justify-content:center; padding:11px 0; gap:0}
    .sidebar.collapsed .nav-item .nav-label,
    .sidebar.collapsed .nav-item .nav-count{display:none}
    .sidebar.collapsed .nav-item.active::before{left:-8px}
    .sidebar.collapsed .nav-divider{font-size:0; padding:8px 0 0; margin-top:6px; height:1px}
    .sidebar.collapsed .nav-divider::before{content:''; display:block; height:1px; background:var(--neutral-100); margin:0 8px}
    .sidebar.collapsed .sidebar-footer{padding:10px 0; align-items:center}
    .sidebar.collapsed .sidebar-footer .sb-foot-name,
    .sidebar.collapsed .sidebar-footer .sb-foot-role,
    .sidebar.collapsed .sidebar-footer .kbd-hint{display:none}
    .sidebar.collapsed .sidebar-collapse{padding:8px 6px}
    .sidebar.collapsed .sidebar-collapse-btn{padding:0; width:40px; height:36px; margin:0 auto; display:flex}
    .sidebar.collapsed .sidebar-collapse-btn .sidebar-collapse-label,
    .sidebar.collapsed .sidebar-collapse-btn .sidebar-collapse-kbd{display:none}
    .sidebar.collapsed .sidebar-collapse-btn:hover .material-symbols-outlined{transform:translateX(2px)}

    /* Tooltip on hover (collapsed only) */
    .sidebar.collapsed .nav-item{position:relative}
    .sidebar.collapsed .nav-item:hover::after{
      content:attr(data-label);
      position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
      background:var(--neutral-900); color:#fff;
      font-family:var(--vks-body); font-size:12px; font-weight:600;
      padding:6px 10px; border-radius:6px; white-space:nowrap;
      box-shadow:0 4px 14px rgba(0,0,0,.18); pointer-events:none; z-index:40;
    }
    .sidebar.collapsed .nav-item:hover::before{transform:translate(0,-50%) scaleY(1); opacity:.5}
  }

  /* --- v6.A.3 · Settings page --- */
  .settings{display:flex; flex-direction:column; gap:18px; padding:8px 0 40px}
  .settings-head{padding:4px 2px}
  .settings-title{font-family:var(--vks-body); font-size:24px; font-weight:700; color:var(--neutral-900); margin:0; letter-spacing:-.015em}
  .settings-sub{font-family:var(--vks-lao); font-size:12.5px; color:var(--neutral-500); margin:4px 0 0}
  .settings-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:12px;
  }
  .settings-tile{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
    padding:16px 18px;
    background:var(--neutral-0);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    cursor:pointer; text-align:left;
    transition:transform .18s var(--spring-snappy), box-shadow .18s var(--spring-snappy), border-color .18s var(--spring-snappy);
    color:inherit; font-family:inherit;
  }
  .settings-tile:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--neutral-300)}
  .settings-tile:active{transform:translateY(0)}
  .settings-tile:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-100); border-color:var(--primary-400)}
  .settings-tile-icon{
    width:40px; height:40px; border-radius:11px;
    display:grid; place-items:center; flex-shrink:0;
  }
  .settings-tile-icon .material-symbols-outlined{font-size:22px}
  .settings-tile.t-heads .settings-tile-icon{background:#ede9fe; color:#6d28d9}
  .settings-tile.t-pins  .settings-tile-icon{background:#dbeafe; color:#1d4ed8}
  .settings-tile.t-role  .settings-tile-icon{background:#fef3c7; color:#92400e}
  .settings-tile.t-prof  .settings-tile-icon{background:#dcfce7; color:#15803d}
  .settings-tile.t-notif .settings-tile-icon{background:#fce7f3; color:#be185d}
  .settings-tile.t-out   .settings-tile-icon{background:#f1f5f9; color:#475569}
  .settings-tile-body{min-width:0}
  .settings-tile-body h3{font-family:var(--vks-body); font-size:14.5px; font-weight:700; color:var(--neutral-900); margin:0; letter-spacing:-.005em}
  .settings-tile-body p{font-family:var(--vks-body); font-size:12.5px; color:var(--neutral-500); margin:3px 0 0; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .settings-tile-body p b{color:var(--neutral-800); font-weight:600}
  .settings-tile-chev{font-size:18px; color:var(--neutral-400); flex-shrink:0; transition:transform .18s var(--spring-snappy)}
  .settings-tile:hover .settings-tile-chev{transform:translateX(3px); color:var(--neutral-700)}

  .settings-meta{
    margin-top:12px; padding:18px 20px;
    background:var(--neutral-50);
    border:1px solid var(--neutral-200);
    border-radius:var(--radius-lg);
    display:flex; flex-direction:column; gap:10px;
  }
  .settings-meta-row{
    display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:baseline;
    font-size:12px;
  }
  .settings-meta-k{font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em}
  .settings-meta-v{color:var(--neutral-700); line-height:1.7}
  .settings-meta-v kbd{
    display:inline-block; padding:1px 6px; margin:0 1px;
    background:var(--neutral-0); border:1px solid var(--neutral-300); border-bottom-width:1.5px;
    border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
    color:var(--neutral-800); font-weight:600;
  }

  @media (max-width:600px){
    .settings-tile{padding:14px 14px; gap:12px}
    .settings-tile-icon{width:36px; height:36px}
    .settings-title{font-size:20px}
    .settings-meta-row{grid-template-columns:1fr; gap:4px}
  }

  /* --- v6.B · Calendar layout with right-side date detail panel --- */
  .cal-layout{display:block}
  .cal-grid-wrap{display:flex; flex-direction:column; gap:14px}
  /* Make calendar cells true buttons (reset native button styling) */
  .cal-cell{background:var(--neutral-0); border:1px solid var(--neutral-200); cursor:pointer; text-align:left; font:inherit; color:inherit; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
  .cal-cell:hover{border-color:var(--primary-300); transform:translateY(-1px)}
  .cal-cell:focus-visible{outline:none; box-shadow:0 0 0 2px var(--primary-200)}
  .cal-cell.date-selected{
    background:var(--primary-600); color:#fff;
    border-color:var(--primary-700);
    box-shadow:0 8px 22px rgba(29,78,216,.32);
    transform:scale(1.02); z-index:2; position:relative;
  }
  .cal-cell.date-selected .cal-day{color:#fff; font-weight:700}
  .cal-cell.date-selected .cal-chip{background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.28)}
  .cal-cell.date-selected .cal-chip-type{color:rgba(255,255,255,.85)}
  .cal-cell.date-selected .cal-more{color:rgba(255,255,255,.85)}

  @media (min-width:1100px){
    .cal-layout.has-detail{
      display:grid; grid-template-columns:1fr 360px; gap:18px; align-items:flex-start;
    }
    .cal-date-panel{
      position:sticky; top:78px;
      align-self:flex-start;
      max-height:calc(100vh - 100px);
      background:transparent;
      animation:cdpSlideIn .26s cubic-bezier(.22,1,.36,1);
    }
    .cal-date-panel .cdp-handle{display:none}
    .cal-date-panel .cdp-inner{
      background:var(--neutral-0);
      border:1px solid var(--neutral-200);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-md);
      display:flex; flex-direction:column;
      max-height:calc(100vh - 100px);
      overflow:hidden;
    }
  }
  @keyframes cdpSlideIn{
    from{ opacity:0; transform:translateX(16px) }
    to{ opacity:1; transform:translateX(0) }
  }
  /* Mobile + tablet: bottom-sheet style (covers screen from bottom) */
  @media (max-width:1099px){
    .cal-date-panel{
      position:fixed; left:0; right:0; bottom:0; top:auto;
      background:rgba(15,23,42,.42); z-index:60;
      display:flex; align-items:flex-end; justify-content:center;
      animation:cdpFadeIn .2s ease both;
    }
    .cal-date-panel .cdp-inner{
      width:100%; max-width:560px;
      background:var(--neutral-0);
      border-radius:18px 18px 0 0;
      box-shadow:0 -8px 30px rgba(0,0,0,.25);
      padding:8px 0 max(20px, env(safe-area-inset-bottom));
      max-height:84vh;
      display:flex; flex-direction:column;
      animation:cdpSlideUp .3s cubic-bezier(.22,1,.36,1) both;
    }
  }
  @keyframes cdpFadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes cdpSlideUp{ from{transform:translateY(16px); opacity:.4} to{transform:translateY(0); opacity:1} }

  .cdp-handle{width:38px; height:4px; border-radius:99px; background:var(--neutral-300); margin:0 auto 4px}
  .cdp-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 18px 12px; border-bottom:1px solid var(--neutral-100)}
  .cdp-head-l{min-width:0}
  .cdp-date{font-family:var(--vks-body); font-size:16px; font-weight:700; color:var(--neutral-900); letter-spacing:-.005em}
  .cdp-meta{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--neutral-500); letter-spacing:.06em; text-transform:uppercase; margin-top:3px}
  .cdp-meta b{color:var(--warning-dark); font-weight:700}
  .cdp-x{
    width:30px; height:30px; border-radius:8px;
    background:var(--neutral-100); border:1px solid var(--neutral-200);
    color:var(--neutral-600); display:grid; place-items:center; cursor:pointer; flex-shrink:0;
    transition:background .15s ease, color .15s ease;
  }
  .cdp-x:hover{background:var(--neutral-200); color:var(--neutral-900)}
  .cdp-x .material-symbols-outlined{font-size:16px}
  .cdp-stats{display:flex; gap:8px; padding:12px 18px; border-bottom:1px solid var(--neutral-100); background:var(--neutral-50)}
  .cdp-stat{flex:1; background:var(--neutral-0); border:1px solid var(--neutral-200); border-radius:10px; padding:9px 11px}
  .cdp-stat-l{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--neutral-500); letter-spacing:.06em; text-transform:uppercase}
  .cdp-stat-n{font-family:var(--vks-body); font-weight:800; font-size:22px; color:var(--neutral-900); line-height:1; margin-top:4px; letter-spacing:-.02em}
  .cdp-stat.ok .cdp-stat-n{color:var(--success-dark)}
  .cdp-stat.pn .cdp-stat-n{color:var(--warning-dark)}
  .cdp-stat.rj .cdp-stat-n{color:var(--error-dark)}

  .cdp-list{padding:12px 14px 16px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1}
  .cdp-empty{padding:32px 18px; text-align:center; color:var(--neutral-500)}
  .cdp-empty .material-symbols-outlined{font-size:32px; color:var(--neutral-300); display:block; margin:0 auto 8px}
  .cdp-empty p{margin:0; font-size:13px}
  .cdp-row{
    background:var(--neutral-0); border:1px solid var(--neutral-200);
    border-radius:12px; padding:12px 13px;
  }
  .cdp-row[data-st="approved"]{border-left:3px solid var(--success)}
  .cdp-row[data-st="pending"]{border-left:3px solid var(--warning)}
  .cdp-row[data-st="rejected"]{border-left:3px solid var(--error)}
  .cdp-row-top{display:flex; align-items:center; gap:10px; margin-bottom:6px}
  .cdp-row-id{flex:1; min-width:0}
  .cdp-row-id b{font-family:var(--vks-body); font-weight:600; font-size:13px; color:var(--neutral-900); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .cdp-row-id small{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--neutral-500); letter-spacing:.04em; display:block; margin-top:1px}
  .cdp-row-meta{font-family:var(--vks-body); font-size:12px; color:var(--neutral-600); line-height:1.5}
  .cdp-row-meta b{color:var(--neutral-900); font-weight:600}
  .cdp-row-reason{font-family:var(--vks-lao); font-size:12px; color:var(--neutral-700); font-style:italic; margin-top:6px; padding:8px 10px; background:var(--neutral-50); border-radius:8px}
  .cdp-row-act{display:flex; gap:6px; margin-top:9px}
  .cdp-btn{
    flex:1; height:34px; border-radius:8px;
    border:1px solid var(--neutral-300); background:var(--neutral-0);
    font-family:var(--vks-body); font-weight:600; font-size:12.5px;
    color:var(--neutral-700); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  }
  .cdp-btn:active{transform:scale(.97)}
  .cdp-btn .material-symbols-outlined{font-size:15px}
  .cdp-btn.appr{background:var(--success-light); color:var(--success-dark); border-color:#86efac}
  .cdp-btn.appr:hover{background:#bbf7d0}
  .cdp-btn.rej{background:var(--error-light); color:var(--error-dark); border-color:#fca5a5}
  .cdp-btn.rej:hover{background:#fecaca}
  .sidebar-footer-av{width:32px; height:32px; border-radius:50%; background:var(--primary-100); color:var(--primary-800); display:grid; place-items:center; font-weight:700; font-size:11.5px; flex-shrink:0; font-family:var(--vks-body)}
  .sidebar-footer-text{min-width:0; flex:1}
  .sidebar-footer-name{font-family:var(--vks-body); font-size:13px; font-weight:600; color:var(--neutral-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sidebar-footer-role{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}

  /* --- KPI tiles --- */
  .metric{
    background:var(--neutral-0) !important;
    border:1px solid var(--neutral-200) !important;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    text-align:left; font:inherit; color:inherit; width:100%;
  }
  .metric::after{display:none}
  .metric:hover{border-color:var(--primary-300) !important; box-shadow:var(--shadow-md)}
  .metric:focus-visible{outline:none; box-shadow:0 0 0 3px var(--primary-100)}
  .metric-label{color:var(--neutral-500); font-family:var(--vks-body); font-weight:600}
  .metric-num{color:var(--neutral-900); font-family:var(--vks-body); font-weight:700}
  .metric[data-t="warn"] .metric-num{color:var(--warning)}
  .metric[data-t="info"] .metric-num{color:var(--primary-700)}
  .metric[data-t="accent"] .metric-num{color:var(--success)}
  .metric[data-t="purple"] .metric-num{color:#7c3aed}
  .metric-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}

  /* --- Section heads + segmented tabs (tablet portrait fallback) --- */
  .section-title{color:var(--neutral-900); font-family:var(--vks-body); font-weight:700}
  .section-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .seg{background:var(--neutral-100); border:1px solid var(--neutral-200)}
  .seg-btn{background:transparent; color:var(--neutral-600); font-family:var(--vks-body); font-weight:600}
  .seg-btn.active{background:var(--neutral-0); color:var(--neutral-900); box-shadow:var(--shadow-sm)}
  .seg-btn .seg-count{background:var(--neutral-200); color:var(--neutral-600)}
  .seg-btn.active .seg-count{background:var(--primary-100); color:var(--primary-700)}
  .seg.hr-seg .seg-btn.active{background:var(--warning-light); color:var(--warning-dark); box-shadow:0 0 0 1px #fde68a}
  .seg.hr-seg .seg-btn.active .seg-count{background:#fcd34d; color:var(--warning-dark)}

  /* --- Pills (semantic) --- */
  .pill{font-family:var(--vks-body); font-weight:600; letter-spacing:.04em}
  .pill.pending{background:var(--warning-light); color:var(--warning-dark); border:1px solid #fde68a}
  .pill.pending::before{background:var(--warning)}
  .pill.approved{background:var(--success-light); color:var(--success-dark); border:1px solid #bbf7d0}
  .pill.rejected{background:var(--error-light); color:var(--error-dark); border:1px solid #fecaca}

  /* --- Avatars: flatten the 6 gradient variants to solid primary-100 --- */
  .qav, .av-h0, .av-h1, .av-h2, .av-h3, .av-h4, .av-h5{
    background:var(--primary-100) !important;
    color:var(--primary-800) !important;
  }

  /* --- Pending queue (qcards) --- */
  .qcard{background:var(--neutral-0); border:1px solid var(--neutral-200); box-shadow:var(--shadow-sm)}
  .qcard:hover{border-color:var(--primary-300); transform:translateY(-1px); box-shadow:var(--shadow-md)}
  .qcard.selected{background:var(--primary-50); border-color:var(--primary-400)}
  .qname{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .qpos{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .qrow2{background:var(--neutral-50); border:1px solid var(--neutral-200)}
  .qtype-name{color:var(--neutral-900); font-family:var(--vks-lao)}
  .qtype-dur{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .qdates{color:var(--neutral-900); font-family:'JetBrains Mono',monospace}
  .qdates-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .qrow3{color:var(--neutral-500)}
  .qbtn{background:var(--neutral-0); border-color:var(--neutral-300); color:var(--neutral-700); font-family:var(--vks-body)}
  .qbtn.approve{color:var(--success-dark); border-color:var(--success); background:var(--neutral-0)}
  .qbtn.approve:hover:not(:disabled){background:var(--success-light)}
  .qbtn.reject{color:var(--error-dark); border-color:var(--error); background:var(--neutral-0)}
  .qbtn.reject:hover:not(:disabled){background:var(--error-light)}
  .qdetail{border-top-color:var(--neutral-200)}
  .qdetail-row{background:var(--neutral-50); border-color:var(--neutral-200)}
  .qdetail-label{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .qdetail-val{color:var(--neutral-900); font-family:var(--vks-body)}
  .qdetail-val.mono{font-family:'JetBrains Mono',monospace}
  .qdetail-val.link{color:var(--primary-700)}

  /* --- Timeline --- */
  .tl{background:var(--neutral-50); border:1px solid var(--neutral-200)}
  .tl-row:not(:last-child)::before{background:var(--neutral-200)}
  .tl-row.done .tl-dot{background:var(--success); color:#fff}
  .tl-row.done:not(:last-child)::before{background:var(--success)}
  .tl-row.current .tl-dot{background:var(--warning); color:#fff; box-shadow:0 0 0 4px var(--warning-light)}
  .tl-row.pending .tl-dot{background:var(--neutral-100); color:var(--neutral-500); border:1px solid var(--neutral-300)}
  .tl-row.rejected .tl-dot{background:var(--error); color:#fff}
  .tl-row.rejected:not(:last-child)::before{background:var(--error-light)}
  .tl-row.rejected .tl-row-content h6{color:var(--error-dark)}
  .tl-row-content h6{color:var(--neutral-900); font-family:var(--vks-body)}
  .tl-row-content small{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}

  /* --- Empty state --- */
  .empty{background:var(--neutral-0); border-color:var(--neutral-300)}
  .empty-icon{background:var(--primary-50); color:var(--primary-700); border:1px solid var(--primary-200)}
  .empty h4{color:var(--neutral-900); font-family:var(--vks-body)}
  .empty p{color:var(--neutral-500)}

  /* --- History filters + cards --- */
  .hist-filters{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
  .hist-fchip{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-700); font-family:var(--vks-body)}
  .hist-fchip:hover{background:var(--neutral-100); color:var(--neutral-900); border-color:var(--neutral-300)}
  .hist-fchip.active{background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-700)}
  .hist-fchip .ct{background:var(--neutral-100); color:var(--neutral-500)}
  .hist-fchip.active .ct{background:var(--primary-100); color:var(--primary-700)}
  .hist-fchip[data-kind="range"].active{background:var(--vks-info-light); border-color:#bfdbfe; color:var(--vks-info-dark)}
  .hist-search{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); font-family:'JetBrains Mono',monospace}
  .hist-search:focus{border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100)}
  .hist-search::placeholder{color:var(--neutral-400)}
  .hist-clear{background:transparent; border-color:var(--neutral-300); color:var(--neutral-600)}
  .hist-clear:hover{background:var(--neutral-100); color:var(--neutral-900); border-color:var(--neutral-400)}
  .hist-typesel-legacy-unused-do-not-style{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>")}
  .hist-typesel:focus{border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100)}
  .hist-typesel option{background:var(--neutral-0); color:var(--neutral-900)}
  .hist-export{background:var(--success-light); border-color:var(--success); color:var(--success-dark); font-family:var(--vks-body)}
  .hist-export:hover{background:var(--success); color:#fff}
  .hist-toolbar{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .hcard{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
  .hcard:hover{border-color:var(--primary-300); transform:translateY(-1px); box-shadow:var(--shadow-md)}
  .hcard.selected{background:var(--primary-50); border-color:var(--primary-400)}
  .hcard-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .hcard-pos{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .hcard-row2{background:var(--neutral-50); border:1px solid var(--neutral-200)}
  .hcard-tname{color:var(--neutral-900); font-family:var(--vks-lao)}
  .hcard-tdur{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .hcard-dates{color:var(--neutral-900); font-family:'JetBrains Mono',monospace}
  .hcard-decided{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .hcard-row3{color:var(--neutral-500)}
  .hcard-detail{border-top-color:var(--neutral-200)}
  .hcard-drow{background:var(--neutral-50); border-color:var(--neutral-200)}
  .hcard-dlabel{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .hcard-dval{color:var(--neutral-900); font-family:var(--vks-body)}

  /* --- Detail panel (master-detail right column) --- */
  .dpanel{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-md)}
  .dpanel.approved{border-color:var(--success); background:var(--neutral-0)}
  .dpanel.rejected{border-color:var(--error); background:var(--neutral-0)}
  .dpanel.pending{border-color:var(--warning); background:var(--neutral-0)}
  .dpanel-empty{background:var(--neutral-0); border-color:var(--neutral-300)}
  .dpanel-empty-icon{background:var(--primary-50); color:var(--primary-700); border:1px solid var(--primary-200)}
  .dpanel-empty h4{color:var(--neutral-900); font-family:var(--vks-body)}
  .dpanel-empty p{color:var(--neutral-500)}
  .dpanel-head{border-bottom-color:var(--neutral-200)}
  .dpanel-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .dpanel-pos{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .dpanel-summary{background:var(--neutral-50); border-color:var(--neutral-200)}
  .dpanel-leavetype-name{color:var(--neutral-900); font-family:var(--vks-lao)}
  .dpanel-leavetype-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .dpanel-dates{color:var(--neutral-900); font-family:'JetBrains Mono',monospace}
  .dpanel-dates-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .dpanel-row{background:var(--neutral-50); border-color:var(--neutral-200)}
  .dpanel-row-label{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .dpanel-row-val{color:var(--neutral-900); font-family:var(--vks-body)}
  .dpanel-row-val.mono{font-family:'JetBrains Mono',monospace}
  .dpanel-row-val.link{color:var(--primary-700)}
  .dpanel-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .dpanel-btn{background:var(--neutral-0); border-color:var(--neutral-300); color:var(--neutral-700); font-family:var(--vks-body)}
  .dpanel-btn.approve{background:var(--primary-700); border-color:var(--primary-700); color:#fff}
  .dpanel-btn.approve:hover:not(:disabled){background:var(--primary-800); box-shadow:var(--shadow-md); transform:translateY(-1px)}
  .dpanel-btn.reject{background:var(--neutral-0); border-color:var(--error); color:var(--error)}
  .dpanel-btn.reject:hover:not(:disabled){background:var(--error-light); transform:translateY(-1px)}

  /* --- Calendar --- */
  .cal-head{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
  .cal-title{color:var(--neutral-900); font-family:var(--vks-body); font-weight:700}
  .cal-title small{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .cal-nav-btn{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-700)}
  .cal-nav-btn:hover{background:var(--neutral-100); border-color:var(--neutral-300)}
  .cal-nav-today{background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-700); font-family:var(--vks-body)}
  .cal-nav-today:hover{background:var(--primary-100); color:var(--primary-800)}
  .cal-dow span{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .cal-cell{background:var(--neutral-0); border-color:var(--neutral-200)}
  .cal-cell.muted{opacity:.5; background:var(--neutral-50)}
  .cal-cell.today{border-color:var(--primary-400); background:var(--primary-50)}
  .cal-cell.weekend{background:var(--neutral-50)}
  .cal-day{color:var(--neutral-700); font-family:'JetBrains Mono',monospace}
  .cal-cell.today .cal-day{color:var(--primary-700)}
  .cal-chip{font-family:var(--vks-lao); font-weight:600; border:1px solid transparent}
  .cal-chip[data-st="approved"]{background:var(--success-light); color:var(--success-dark); border-color:#bbf7d0}
  .cal-chip[data-st="pending"]{background:var(--warning-light); color:var(--warning-dark); border-color:#fde68a; border-style:dashed}
  .cal-chip[data-st="rejected"]{background:var(--error-light); color:var(--error-dark); border-color:#fecaca; opacity:.6}
  .cal-chip.selected{box-shadow:0 0 0 1.5px var(--primary-500)}
  .cal-chip-type{opacity:.65; font-family:'JetBrains Mono',monospace}
  .cal-more{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .cal-legend{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .cal-legend-dot.approved{background:var(--success)}
  .cal-legend-dot.pending{background:var(--warning); border:1px dashed var(--warning-dark)}
  .cal-legend-dot.rejected{background:var(--error); opacity:.5}
  .cal-detail{background:var(--primary-50); border-color:var(--primary-300)}
  .cal-detail .cd-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .cal-detail .cd-row{border-color:var(--neutral-200); color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .cal-detail .cd-row b{color:var(--neutral-900)}
  .cal-detail .cd-close{background:var(--neutral-0); border-color:var(--neutral-300); color:var(--neutral-600)}
  .cal-detail .cd-close:hover{background:var(--neutral-100)}

  /* --- Modal overlays + sheets (centered light dialogs at desktop, bottom-sheet on mobile) --- */
  .reject-overlay, .edit-overlay, .pin-overlay, .heads-overlay, .notif-overlay, .profile-overlay, .gate-overlay{
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .reject-sheet, .edit-sheet, .pin-sheet, .heads-sheet, .notif-sheet, .profile-sheet, .gate-sheet{
    background:var(--neutral-0);
    border:1px solid var(--neutral-200);
    box-shadow:var(--shadow-xl);
    color:var(--neutral-900);
  }
  .reject-head h4, .pin-head h4, .heads-head h4, .notif-head h4, .gate-sheet h4{color:var(--neutral-900); font-family:var(--vks-body)}
  .reject-head small, .pin-head small, .heads-head small, .notif-head small{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .reject-head-icon{background:var(--error-light); color:var(--error); border-color:#fecaca}
  .reject-head-x{background:var(--neutral-100); border-color:var(--neutral-200); color:var(--neutral-600)}
  .reject-head-x:hover{background:var(--neutral-200); color:var(--neutral-900)}
  .reject-target{background:var(--neutral-50); border-color:var(--neutral-200)}
  .reject-target-name{color:var(--neutral-900); font-family:var(--vks-lao)}
  .reject-target-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .reject-target-tag{background:var(--neutral-100); color:var(--neutral-600)}
  .reject-section-label{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .reject-section-label .req{color:var(--error)}
  .reject-chip{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-700); font-family:var(--vks-body)}
  .reject-chip:hover{border-color:var(--neutral-300); background:var(--neutral-50)}
  .reject-chip.active{background:var(--error-light); border-color:var(--error); color:var(--error-dark)}
  .reject-chip-num{color:var(--neutral-500)}
  .reject-chip.active .reject-chip-num{color:var(--error)}
  .reject-chip.active::after{color:var(--error)}
  .reject-textarea{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); font-family:var(--vks-body)}
  .reject-textarea:focus{border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100)}
  .reject-toggle{background:var(--neutral-50); border-color:var(--neutral-200)}
  .reject-toggle-info h6{color:var(--neutral-900); font-family:var(--vks-body)}
  .reject-toggle-info small{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .toggle-sw{background:var(--neutral-300)}
  .toggle-sw::after{background:var(--neutral-0); box-shadow:var(--shadow-sm)}
  .toggle-sw.on{background:var(--primary-600)}
  .toggle-sw.on::after{background:var(--neutral-0)}
  .reject-cancel{background:var(--neutral-0); border-color:var(--neutral-300); color:var(--neutral-700); font-family:var(--vks-body)}
  .reject-cancel:hover{background:var(--neutral-100); border-color:var(--neutral-400)}
  .reject-confirm{background:var(--error); border:none; color:#fff; box-shadow:var(--shadow-md); font-family:var(--vks-body)}
  .reject-confirm:hover:not(:disabled){background:var(--error-dark); box-shadow:var(--shadow-lg)}

  @media (min-width:900px){
    .reject-overlay, .edit-overlay, .pin-overlay, .heads-overlay, .notif-overlay, .profile-overlay, .gate-overlay{
      align-items:center !important;
    }
    .reject-sheet, .edit-sheet, .pin-sheet, .heads-sheet, .notif-sheet, .profile-sheet, .gate-sheet{
      border-radius:var(--radius-xl) !important;
      max-width:580px;
    }
    .reject-handle, .pin-handle, .heads-handle, .notif-handle, .profile-handle, .gate-handle, .edit-handle{display:none}
  }

  /* --- Bottom-nav (mobile only) --- */
  @media (max-width:768px){
    .bottom-nav{
      background:linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,.9) 30%, var(--neutral-50) 60%) !important;
      border-top-color:var(--neutral-200) !important;
    }
    .bottom-nav-btn{background:var(--neutral-0) !important; border-color:var(--neutral-200) !important; color:var(--neutral-600) !important; font-family:var(--vks-body)}
    .bottom-nav-btn .bn-icon.material-symbols-outlined{font-size:22px !important; line-height:1}
    .bottom-nav-btn .bn-count{background:var(--neutral-100) !important; color:var(--neutral-500) !important}
    .bottom-nav-btn.active{background:var(--primary-50) !important; border-color:var(--primary-300) !important; color:var(--primary-700) !important; box-shadow:0 0 0 1px var(--primary-200) inset !important}
    .bottom-nav-btn.active .bn-count{background:var(--primary-100) !important; color:var(--primary-700) !important}
    .bottom-nav-btn[data-kind="new"].active{background:var(--primary-50) !important; border-color:var(--primary-300) !important; color:var(--primary-700) !important; box-shadow:0 0 0 1px var(--primary-200) inset !important}
    .bottom-nav.hr .bottom-nav-btn.active{background:var(--warning-light) !important; border-color:var(--warning) !important; color:var(--warning-dark) !important; box-shadow:0 0 0 1px var(--warning) inset !important}
    .bottom-nav.hr .bottom-nav-btn.active .bn-count{background:#fcd34d !important; color:var(--warning-dark) !important}
  }

  /* --- Notif sheet bits --- */
  .notif-head-x{background:var(--neutral-100); border-color:var(--neutral-200); color:var(--neutral-600)}
  .notif-head-x:hover{background:var(--neutral-200)}
  .notif-mark-all{background:var(--primary-50); border-color:var(--primary-200); color:var(--primary-700); font-family:var(--vks-body)}
  .notif-mark-all:hover{background:var(--primary-100)}
  .notif-row{background:var(--neutral-50); border-color:var(--neutral-200)}
  .notif-row.unread{background:var(--primary-50); border-color:var(--primary-200)}
  .notif-row-title{color:var(--neutral-900); font-family:var(--vks-body); font-weight:600}
  .notif-row-body{color:var(--neutral-700)}
  .notif-row-when{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .notif-row-icon{background:var(--primary-100); color:var(--primary-700)}
  .notif-row.unread .notif-row-icon{background:var(--primary-600); color:#fff}

  /* --- Pin admin sheet --- */
  .pin-head-x, .heads-head-x{background:var(--neutral-100); border-color:var(--neutral-200); color:var(--neutral-600)}
  .pin-head-x:hover, .heads-head-x:hover{background:var(--neutral-200)}
  .pin-row, .heads-row{background:var(--neutral-50); border-color:var(--neutral-200)}
  .pin-row-name, .heads-row-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .pin-row-meta, .heads-row-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .pin-row-btn, .heads-row-btn{background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-700); font-family:var(--vks-body)}
  .pin-row-btn:hover, .heads-row-btn:hover{background:var(--primary-100)}
  .pin-result-pin{background:var(--neutral-50); border-color:var(--neutral-200); color:var(--neutral-900); font-family:'JetBrains Mono',monospace}

  /* --- Profile sheet --- */
  .profile-row{background:var(--neutral-50); border-color:var(--neutral-200)}
  .profile-row-name{color:var(--neutral-900); font-family:var(--vks-body); font-weight:600}
  .profile-row-meta{color:var(--neutral-500); font-family:var(--vks-body)}
  .profile-row-ico{background:var(--primary-50); color:var(--primary-700)}
  .profile-row-cta{background:var(--primary-700); color:#fff; font-family:var(--vks-body); border:none}
  .profile-row-cta:hover{background:var(--primary-800)}
  .profile-row-cta.purple{background:#7c3aed}
  .profile-row-cta.purple:hover{background:#6d28d9}
  .profile-row-cta.danger{background:var(--error); color:#fff}
  .profile-row-cta.danger:hover{background:var(--error-dark)}

  /* --- Gate sheet --- */
  .gate-head-icon{background:var(--error-light); color:var(--error); border-color:#fecaca}
  .gate-head h4{color:var(--neutral-900)}
  .gate-body{color:var(--neutral-700); font-family:var(--vks-body)}
  .gate-btn{background:var(--primary-700); color:#fff; border:none; font-family:var(--vks-body)}
  .gate-btn:hover{background:var(--primary-800)}

  /* --- Edit sheet --- */
  .edit-head h4{color:var(--neutral-900)}
  .edit-head small{color:var(--neutral-500)}
  .edit-head-icon{background:var(--primary-50); color:var(--primary-700); border-color:var(--primary-200)}
  .edit-head-x{background:var(--neutral-100); border-color:var(--neutral-200); color:var(--neutral-600)}
  .edit-target{background:var(--neutral-50); border-color:var(--neutral-200)}
  .edit-section-label{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .edit-cancel{background:var(--neutral-0); border-color:var(--neutral-300); color:var(--neutral-700); font-family:var(--vks-body)}
  .edit-cancel:hover{background:var(--neutral-100)}
  .edit-confirm{background:var(--primary-700); border:none; color:#fff; box-shadow:var(--shadow-md); font-family:var(--vks-body)}
  .edit-confirm:hover:not(:disabled){background:var(--primary-800)}

  /* --- Employee shell (form + leaves list) --- */
  .who-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:700}
  .who-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .leave{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
  .leave[data-st="approved"]::before{background:var(--success)}
  .leave[data-st="rejected"]::before{background:var(--error)}
  .leave[data-st="pending"]::before{background:var(--warning)}
  .leave-type{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .leave-type small{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .leave-dates{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .leave-meta{border-top-color:var(--neutral-200); color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .leave-meta-id{color:var(--neutral-500)}
  .field-input, .field-select, .field-textarea{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); font-family:var(--vks-body)}
  .field-input:focus, .field-select:focus, .field-textarea:focus{border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100); outline:none}
  .field-input::placeholder, .field-textarea::placeholder{color:var(--neutral-400)}
  .field-input::-webkit-calendar-picker-indicator{filter:invert(.4)}
  .field-label{color:var(--neutral-700); font-family:var(--vks-body); font-weight:600}
  .field-label .req{color:var(--error)}
  .form-section{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
  .submit-btn{background:var(--primary-700); color:#fff; border:none; box-shadow:var(--shadow-md); font-family:var(--vks-body)}
  .submit-btn:hover:not(:disabled){background:var(--primary-800); box-shadow:var(--shadow-lg); transform:translateY(-1px)}
  .submit-btn:disabled{opacity:.5}

  /* --- v6.C · jt-select polish (no more static) --- */
  .jt-select{position:relative}

  /* TRIGGER (closed state) */
  .jt-select-trigger{
    background:var(--neutral-0) !important;
    border:1px solid var(--neutral-200) !important;
    color:var(--neutral-900);
    font-family:var(--vks-body);
    min-height:50px;
    padding:8px 12px 8px 12px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    gap:11px;
    transition:border-color .18s var(--spring-snappy), box-shadow .18s var(--spring-snappy), background .15s ease, transform .12s ease;
  }
  .jt-select-trigger:hover{
    border-color:var(--neutral-300) !important;
    background:var(--neutral-50) !important;
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
  }
  .jt-select-trigger:active{transform:translateY(0)}
  .jt-select-trigger.is-open,
  .jt-select-trigger:focus-visible{
    border-color:var(--primary-500) !important;
    background:var(--neutral-0) !important;
    box-shadow:0 0 0 3px var(--primary-100), var(--shadow-sm) !important;
    outline:none;
  }

  /* Avatar inside trigger */
  .jt-sel-av{
    width:32px; height:32px; border-radius:50%;
    background:var(--primary-100); color:var(--primary-800);
    display:grid; place-items:center;
    font-family:var(--vks-lao); font-weight:700; font-size:11.5px;
    flex-shrink:0; box-shadow:inset 0 0 0 1px var(--primary-200);
  }
  .jt-select-trigger:not(:has(.jt-sel-av:not([style*="display: none"]))) .jt-sel-label{padding-left:2px}

  /* History page type-filter variant: compact, with leading filter icon */
  .hist-typesel-wrap{width:auto; min-width:180px; max-width:240px}
  .hist-typesel-trigger{min-height:38px !important; padding:6px 12px !important; box-shadow:none !important}
  .hist-typesel-trigger .jt-sel-leadicon{color:var(--neutral-500) !important; font-size:17px !important; flex-shrink:0}
  .hist-typesel-trigger .jt-sel-label{font-family:var(--vks-body); font-weight:600; font-size:13px}
  .hist-typesel-trigger:hover .jt-sel-leadicon,
  .hist-typesel-trigger.is-open .jt-sel-leadicon{color:var(--primary-600) !important}
  .hist-typesel-panel{max-height:340px}
  .hist-typesel-panel .jt-sel-leavedot{
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    box-shadow:0 0 0 2px rgba(0,0,0,.04);
  }
  .hist-typesel-panel .jt-sel-leavedot[data-c="green"]{background:#22c55e}
  .hist-typesel-panel .jt-sel-leavedot[data-c="red"]{background:#ef4444}
  .hist-typesel-panel .jt-sel-leavedot[data-c="purple"]{background:#a855f7}
  .hist-typesel-panel .jt-sel-leavedot[data-c="blue"]{background:#3b82f6}
  .hist-typesel-panel .jt-sel-leavedot[data-c="orange"]{background:#f97316}
  .hist-typesel-panel .jt-sel-leavedot[data-c="pink"]{background:#ec4899}
  .hist-typesel-panel .jt-sel-leavedot[data-c="amber"]{background:#f59e0b}
  .hist-typesel-panel .jt-sel-leavedot[data-c="slate"]{background:#64748b}

  /* --- v6.D · KPI strip tiles (employee shell - My Leaves) --- */
  .kpi-tile{
    background:var(--neutral-0) !important;
    border:1px solid var(--neutral-200) !important;
    box-shadow:var(--shadow-sm);
  }
  .kpi-tile[data-t="accent"]{background:linear-gradient(180deg, #f0fdf4, var(--neutral-0)) !important; border-color:#bbf7d0 !important}
  .kpi-tile[data-t="info"]  {background:linear-gradient(180deg, #eff6ff, var(--neutral-0)) !important; border-color:#bfdbfe !important}
  .kpi-tile[data-t="warn"]  {background:linear-gradient(180deg, #fef3c7, var(--neutral-0)) !important; border-color:#fcd34d !important}
  .kpi-tile[data-t="purple"]{background:linear-gradient(180deg, #f5f3ff, var(--neutral-0)) !important; border-color:#ddd6fe !important}
  .kpi-tile[data-t="dim"]   {background:var(--neutral-50) !important; border-color:var(--neutral-200) !important}
  .kpi-tile[data-t="accent"] .kpi-n{color:#15803d !important}
  .kpi-tile[data-t="info"]   .kpi-n{color:var(--primary-700) !important}
  .kpi-tile[data-t="warn"]   .kpi-n{color:#b45309 !important}
  .kpi-tile[data-t="purple"] .kpi-n{color:#7c3aed !important}
  .kpi-tile[data-t="dim"]    .kpi-n{color:var(--neutral-500) !important}
  .kpi-l{color:var(--neutral-600) !important; font-family:'JetBrains Mono',monospace; font-weight:700}
  .kpi-u{color:var(--neutral-500) !important; font-family:'JetBrains Mono',monospace}

  /* --- v6.D · Duration grid tiles (New Request form) --- */
  .dur-cell{
    background:var(--neutral-50) !important;
    border:1px solid var(--neutral-200) !important;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .dur-cell:hover{background:var(--neutral-100) !important; border-color:var(--neutral-300) !important}
  .dur-cell:focus-within{background:var(--neutral-0) !important; border-color:var(--primary-400) !important; box-shadow:0 0 0 3px var(--primary-100)}
  .dur-cell.has-value{background:var(--primary-50) !important; border-color:var(--primary-200) !important}
  .dur-cell input{color:var(--neutral-400) !important; font-family:var(--vks-body)}
  .dur-cell.has-value input{color:var(--primary-700) !important; font-weight:800}
  .dur-cell label{color:var(--neutral-500) !important; font-family:'JetBrains Mono',monospace}
  .dur-cell.has-value label{color:var(--primary-700) !important}

  /* Duration readout pill */
  .dur-readout{background:#eff6ff !important; border-color:#bfdbfe !important; color:var(--neutral-700); font-family:var(--vks-body)}
  .dur-readout b{color:var(--neutral-900) !important; font-weight:700}
  .dur-readout-tag{color:var(--primary-700) !important; background:var(--primary-100) !important; border-color:var(--primary-200) !important; font-family:'JetBrains Mono',monospace}
  .dur-readout.empty{background:var(--neutral-50) !important; border-color:var(--neutral-200) !important; color:var(--neutral-500)}
  .dur-readout.empty .dur-readout-tag{color:var(--neutral-500) !important; background:var(--neutral-100) !important; border-color:var(--neutral-200) !important}

  /* --- v6.D · Staff PINs sheet rows (admin "Staff PINs" page) --- */
  .pin-sheet-row{
    background:var(--neutral-0) !important;
    border:1px solid var(--neutral-200) !important;
    box-shadow:var(--shadow-sm);
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .pin-sheet-row:hover{background:var(--neutral-50) !important; border-color:var(--neutral-300) !important; box-shadow:var(--shadow-md)}
  .pin-sheet-row.is-self{background:var(--primary-50) !important; border-color:var(--primary-200) !important}
  .pin-sheet-name{color:var(--neutral-900) !important; font-family:var(--vks-lao); font-weight:700; font-size:14px}
  .pin-sheet-meta{color:var(--neutral-500) !important; font-family:'JetBrains Mono',monospace; font-weight:600}
  .pin-sheet-pillset{
    background:var(--success-light) !important;
    border:1px solid #86efac !important;
    color:var(--success-dark) !important;
    font-family:'JetBrains Mono',monospace;
  }
  .pin-sheet-pillno{
    background:var(--warning-light) !important;
    border:1px solid #fcd34d !important;
    color:var(--warning-dark) !important;
    font-family:'JetBrains Mono',monospace;
  }
  .pin-sheet-reset-btn{
    background:var(--primary-50) !important;
    border:1px solid var(--primary-300) !important;
    color:var(--primary-700) !important;
    font-family:'JetBrains Mono',monospace;
  }
  .pin-sheet-reset-btn:hover{
    background:var(--primary-100) !important;
    border-color:var(--primary-400) !important;
    color:var(--primary-800) !important;
  }

  /* --- v6.D · Mobile: Settings tile is the canonical sign-out --- */
  /* Hide the profile-sheet sign-out + the stray admin signout-link on mobile.
     Desktop keeps both as quicker affordances. */
  @media (max-width:767px){
    .profile-signout{display:none !important}
    .signout-link{display:none !important}
  }

  /* Label + position + placeholder */
  .jt-sel-label{
    flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:var(--vks-lao); font-weight:600; font-size:14px;
    color:var(--neutral-900);
  }
  .jt-sel-label.jt-sel-placeholder,
  .jt-select-placeholder{color:var(--neutral-400) !important; font-weight:500; font-family:var(--vks-body)}
  .jt-sel-pos-trig{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
    color:var(--primary-700);
    padding:3px 8px; border-radius:99px;
    background:var(--primary-50);
    border:1px solid var(--primary-200);
    letter-spacing:.04em; flex-shrink:0;
    max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Arrow */
  .jt-sel-arrow{
    color:var(--neutral-400) !important; font-size:20px !important;
    transition:transform .22s var(--spring-snappy), color .15s ease;
    flex-shrink:0;
  }
  .jt-select-trigger.is-open .jt-sel-arrow{
    color:var(--primary-600) !important; transform:rotate(180deg);
  }
  .jt-select-trigger:hover .jt-sel-arrow{color:var(--neutral-600) !important}

  /* PANEL (open state, desktop) */
  .jt-select-panel{
    background:var(--neutral-0) !important;
    border:1px solid var(--neutral-200) !important;
    border-radius:var(--radius-lg) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06) !important;
    overflow:hidden;
    margin-top:6px;
  }

  /* Search bar */
  .jt-select-search-wrap{
    background:var(--neutral-50);
    border-bottom:1px solid var(--neutral-100);
    padding:10px 12px; gap:10px;
  }
  .jt-sel-search-icon{
    color:var(--neutral-400) !important; font-size:18px !important;
    flex-shrink:0;
  }
  .jt-select-search{
    background:transparent !important;
    border:none !important;
    color:var(--neutral-900);
    font-family:var(--vks-body);
    font-size:14px;
    padding:2px 0;
  }
  .jt-select-search::placeholder{color:var(--neutral-400)}

  /* Options scroll */
  .jt-select-scroll{padding:6px}

  /* Option */
  .jt-select-option{
    color:var(--neutral-700);
    font-family:var(--vks-body);
    border-radius:var(--radius-md);
    padding:9px 11px; gap:11px;
    min-height:52px;
    position:relative;
    transition:background .15s ease, color .15s ease, transform .12s ease;
  }
  .jt-select-option::before{
    content:''; position:absolute; left:0; top:50%;
    width:3px; height:60%; border-radius:0 3px 3px 0;
    background:var(--primary-600);
    transform:translate(-3px,-50%) scaleY(0);
    transform-origin:left center;
    transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .2s ease;
    opacity:0;
  }
  .jt-select-option:hover{
    background:var(--neutral-100) !important;
    color:var(--neutral-900);
  }
  .jt-select-option:active{transform:scale(.985)}
  .jt-select-option.is-selected{
    background:var(--primary-50) !important;
    color:var(--primary-700);
    font-weight:600;
  }
  .jt-select-option.is-selected::before{transform:translate(0,-50%) scaleY(1); opacity:1}

  /* Inside option: avatar, name, position, check */
  .jt-select-option .jt-sel-av{
    background:var(--neutral-100); color:var(--neutral-700);
    box-shadow:inset 0 0 0 1px var(--neutral-200);
  }
  .jt-select-option.is-selected .jt-sel-av{
    background:var(--primary-100); color:var(--primary-800);
    box-shadow:inset 0 0 0 1px var(--primary-300);
  }
  .jt-select-option-body{gap:2px}
  .jt-sel-name{
    font-family:var(--vks-lao); font-weight:600; font-size:13.5px;
    color:inherit; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .jt-sel-pos{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500;
    color:var(--neutral-500); text-transform:uppercase; letter-spacing:.05em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .jt-select-option.is-selected .jt-sel-pos{color:var(--primary-600)}

  /* Check (Material Symbol) */
  .jt-sel-check{
    color:var(--primary-600) !important; font-size:20px !important;
    margin-left:auto; flex-shrink:0;
    font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    animation:jtCheckPop .25s cubic-bezier(.22,1,.36,1);
  }
  @keyframes jtCheckPop{ from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1} }

  /* Empty state */
  .jt-select-empty{
    padding:28px 18px; text-align:center;
    color:var(--neutral-500); font-family:var(--vks-body); font-size:13px;
    letter-spacing:normal; text-transform:none;
  }
  .jt-select-empty::before{
    content:'search_off';
    font-family:'Material Symbols Outlined';
    font-variation-settings:'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-size:32px; color:var(--neutral-300);
    display:block; margin:0 auto 6px;
  }
  .jt-select-empty b{color:var(--neutral-800); font-weight:600}

  /* Sheet (mobile bottom-sheet variant) */
  .jt-select-sheet, .jt-select-pop{
    background:var(--neutral-0) !important;
    border-color:var(--neutral-200) !important;
    box-shadow:var(--shadow-xl) !important;
  }
  .jt-select-backdrop{background:rgba(15,23,42,.42) !important}
  .jt-select-sheet-head{
    padding:8px 16px 12px;
    border-bottom:1px solid var(--neutral-100);
    background:var(--neutral-0);
  }
  .jt-select-handle{background:var(--neutral-300) !important}
  .jt-select-sheet-title{
    color:var(--neutral-900) !important;
    font-family:var(--vks-body) !important;
    font-weight:700 !important;
    font-size:15px !important;
    letter-spacing:-.005em !important;
  }
  .jt-select-sheet-x, .jt-sel-clear{
    background:var(--neutral-100) !important;
    border:1px solid var(--neutral-200) !important;
    color:var(--neutral-600) !important;
    border-radius:8px !important;
    transition:background .15s ease, color .15s ease;
  }
  .jt-select-sheet-x:hover, .jt-sel-clear:hover{
    background:var(--neutral-200) !important; color:var(--neutral-900) !important;
  }

  /* Scrollbar styling inside the dropdown (webkit) */
  .jt-select-scroll::-webkit-scrollbar{width:6px}
  .jt-select-scroll::-webkit-scrollbar-track{background:transparent}
  .jt-select-scroll::-webkit-scrollbar-thumb{background:var(--neutral-200); border-radius:99px}
  .jt-select-scroll::-webkit-scrollbar-thumb:hover{background:var(--neutral-300)}

  /* Mobile: bigger touch targets, sheet styling */
  @media (max-width:768px){
    .jt-select-trigger{min-height:54px; padding:10px 14px}
    .jt-sel-av{width:34px; height:34px; font-size:12px}
    .jt-select-option{min-height:58px; padding:11px 13px}
    .jt-select-option .jt-sel-av{width:34px; height:34px; font-size:12px}
    .jt-sel-name{font-size:14.5px}
  }

  /* --- Login screen --- */
  .login-screen{background:var(--neutral-50)}
  .login-screen::before{display:none}
  .login-card{background:var(--neutral-0); border-color:var(--neutral-200); box-shadow:var(--shadow-xl)}
  .login-card-head{border-bottom-color:var(--neutral-200)}
  .login-card-head h1{color:var(--neutral-900); font-family:var(--vks-body); font-weight:700}
  .login-card-head p{color:var(--neutral-500); font-family:var(--vks-body)}
  .login-card-logo{background:linear-gradient(135deg,var(--primary-600),var(--primary-800)); color:#fff; box-shadow:var(--shadow-md)}
  .login-input{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); font-family:var(--vks-body)}
  .login-input:focus{border-color:var(--primary-400); box-shadow:0 0 0 3px var(--primary-100)}
  .login-input::placeholder{color:var(--neutral-400)}
  .login-btn{background:var(--primary-700); color:#fff; border:none; box-shadow:var(--shadow-md); font-family:var(--vks-body); font-weight:600}
  .login-btn:hover:not(:disabled){background:var(--primary-800); box-shadow:var(--shadow-lg)}
  .login-confirm{background:var(--neutral-50); border-color:var(--neutral-200)}
  .login-confirm-name{color:var(--neutral-900); font-family:var(--vks-lao); font-weight:600}
  .login-confirm-meta{color:var(--neutral-500); font-family:'JetBrains Mono',monospace}
  .login-confirm-role{background:var(--primary-100); color:var(--primary-700); font-family:var(--vks-body); font-weight:600}
  .login-pin-row .pin-dot{background:var(--neutral-200); border:1px solid var(--neutral-300)}
  .login-pin-row .pin-dot.filled{background:var(--primary-600); border-color:var(--primary-700)}
  .login-pad button{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); font-family:var(--vks-body); font-weight:600}
  .login-pad button:hover{background:var(--neutral-100); border-color:var(--neutral-300)}
  .login-pad button:active{background:var(--neutral-200)}
  .login-err{color:var(--error); background:var(--error-light); border:1px solid #fecaca}

  /* --- Toast --- */
  .toast{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-900); box-shadow:var(--shadow-xl); font-family:var(--vks-body)}
  .toast.ok{border-left:4px solid var(--success); color:var(--success-dark)}
  .toast.err{border-left:4px solid var(--error); color:var(--error-dark)}
  .toast.info{border-left:4px solid var(--primary-600); color:var(--primary-800)}

  /* --- Kbd hint footer (sidebar) --- */
  .kbd-hint{color:var(--neutral-500); border-top-color:var(--neutral-200)}
  .kbd-hint kbd{background:var(--neutral-100); color:var(--neutral-900); border-color:var(--neutral-300)}

  /* --- Misc small bits --- */
  .types-more{color:var(--primary-700)}
  .types-more:hover{color:var(--primary-800)}
  .priochip, .reason-chip{background:var(--neutral-0); border-color:var(--neutral-200); color:var(--neutral-700); font-family:var(--vks-body); box-shadow:var(--shadow-sm)}
  .priochip:hover{border-color:var(--neutral-300); box-shadow:var(--shadow-md)}
  .reason-chip.is-active{background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-700)}
  /* Per-color resting state - tinted both halves so the color identity reads without click */
  .priochip[data-c="green"] {background:linear-gradient(180deg, #dcfce7, #f0fdf4) !important; border-color:#86efac !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(34,197,94,.12) !important}
  .priochip[data-c="coral"] {background:linear-gradient(180deg, #fee2e2, #fef2f2) !important; border-color:#fca5a5 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(239,68,68,.12) !important}
  .priochip[data-c="amber"] {background:linear-gradient(180deg, #fef3c7, #fffbeb) !important; border-color:#fcd34d !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(245,158,11,.14) !important}
  .priochip[data-c="pink"]  {background:linear-gradient(180deg, #fce7f3, #fdf2f8) !important; border-color:#f9a8d4 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(236,72,153,.12) !important}
  .priochip[data-c="purple"]{background:linear-gradient(180deg, #f3e8ff, #faf5ff) !important; border-color:#d8b4fe !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(168,85,247,.12) !important}
  .priochip[data-c="info"]  {background:linear-gradient(180deg, #dbeafe, #eff6ff) !important; border-color:#93c5fd !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(59,130,246,.12) !important}
  .priochip[data-c="dim"]   {background:linear-gradient(180deg, var(--neutral-100), var(--neutral-50)) !important; border-color:var(--neutral-400) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.04) !important}
  /* Active (.on) state: stronger fill + 2px ring + readable text */
  .priochip.on[data-c="green"] {background:#dcfce7 !important; border-color:#22c55e !important; box-shadow:0 0 0 2px #86efac, var(--shadow-md) !important; color:#14532d !important}
  .priochip.on[data-c="coral"] {background:#fee2e2 !important; border-color:#ef4444 !important; box-shadow:0 0 0 2px #fca5a5, var(--shadow-md) !important; color:#7f1d1d !important}
  .priochip.on[data-c="amber"] {background:#fef3c7 !important; border-color:#f59e0b !important; box-shadow:0 0 0 2px #fcd34d, var(--shadow-md) !important; color:#78350f !important}
  .priochip.on[data-c="pink"]  {background:#fce7f3 !important; border-color:#ec4899 !important; box-shadow:0 0 0 2px #f9a8d4, var(--shadow-md) !important; color:#831843 !important}
  .priochip.on[data-c="purple"]{background:#f3e8ff !important; border-color:#a855f7 !important; box-shadow:0 0 0 2px #d8b4fe, var(--shadow-md) !important; color:#581c87 !important}
  .priochip.on[data-c="info"]  {background:#dbeafe !important; border-color:#3b82f6 !important; box-shadow:0 0 0 2px #93c5fd, var(--shadow-md) !important; color:#1e3a8a !important}
  .priochip.on[data-c="dim"]   {background:var(--neutral-200) !important; border-color:var(--neutral-500) !important; box-shadow:0 0 0 2px var(--neutral-300), var(--shadow-md) !important; color:var(--neutral-900) !important}
  /* Check mark + names + balance copy */
  .priochip.on::after{font-family:'JetBrains Mono',monospace; font-weight:800}
  .priochip-name{color:var(--neutral-900) !important; font-family:var(--vks-lao); font-weight:600}
  .priochip.on .priochip-name{color:inherit !important; font-weight:700}
  .priochip[data-c="green"]  .priochip-bal{color:#15803d !important}
  .priochip[data-c="coral"]  .priochip-bal{color:#b91c1c !important}
  .priochip[data-c="amber"]  .priochip-bal{color:#b45309 !important}
  .priochip[data-c="pink"]   .priochip-bal{color:#be185d !important}
  .priochip[data-c="purple"] .priochip-bal{color:#7e22ce !important}
  .priochip[data-c="info"]   .priochip-bal{color:#1d4ed8 !important}
  .priochip[data-c="dim"]    .priochip-bal{color:var(--neutral-600) !important}
  /* Disabled state */
  .priochip.dis{opacity:.5; cursor:not-allowed}
  .priochip.dis:hover{transform:none; box-shadow:var(--shadow-sm) !important; border-color:inherit !important}
  .seg-count{background:var(--neutral-100); color:var(--neutral-600); font-family:'JetBrains Mono',monospace}

  /* --- Scrollbar polish on light surfaces --- */
  ::-webkit-scrollbar{width:10px; height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--neutral-300); border-radius:5px; border:2px solid var(--neutral-50)}
  ::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}

  /* --- Mobile theme polish (kept light to match desktop) --- */
  @media (max-width:899px){
    .shell.hr{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  }

/* =====================================================================
   PROOF PHOTO - picker (submit form) + preview modal (HR Head)
   ===================================================================== */

/* --- Picker tile (employee submit form) --- */
.photo-picker{display:block}
.photo-picker-btn{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:12px;
  background:var(--neutral-0); border:1.5px dashed var(--neutral-300);
  color:var(--neutral-700); font-family:var(--vks-body); font-size:14px;
  cursor:pointer; transition:all .15s ease;
}
.photo-picker-btn:hover{
  border-color:var(--primary-400); background:var(--primary-50); color:var(--primary-700);
}
.photo-picker-btn.is-busy{opacity:.6; cursor:wait}
.photo-picker-btn .material-symbols-outlined{font-size:24px; color:var(--primary-600)}
.photo-picker-input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.photo-picker-label{flex:1; line-height:1.3}

/* --- Thumbnail (after a photo is picked) --- */
.photo-picker-preview{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background:var(--primary-50); border:1.5px solid var(--primary-300);
}
.photo-thumb{
  width:56px; height:56px; border-radius:8px; object-fit:cover;
  background:var(--neutral-200); flex-shrink:0;
  border:1px solid var(--primary-300);
}
.photo-thumb-meta{flex:1; min-width:0}
.photo-thumb-line1{
  font-family:var(--vks-body); font-size:13px; font-weight:600;
  color:var(--primary-700); line-height:1.2;
}
.photo-thumb-line2{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--neutral-600); margin-top:2px; letter-spacing:.02em;
}
.photo-thumb-remove{
  width:30px; height:30px; border-radius:8px;
  background:var(--neutral-0); border:1px solid var(--neutral-300);
  color:var(--neutral-600); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease; flex-shrink:0;
}
.photo-thumb-remove:hover{
  background:#fef2f2; border-color:#fca5a5; color:#dc2626;
}
.photo-thumb-remove .material-symbols-outlined{font-size:18px}

/* --- View photo button (HR queue / history detail panel) --- */
.photo-view-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  background:var(--primary-50); border:1px solid var(--primary-300);
  color:var(--primary-700); font-family:var(--vks-body); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:all .15s ease;
}
.photo-view-btn:hover{
  background:var(--primary-100); border-color:var(--primary-600); color:var(--primary-800);
}
.photo-view-btn .material-symbols-outlined{font-size:16px}

/* --- Preview modal (lightbox) --- */
.photo-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(7,11,20,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; box-sizing:border-box;
  animation:photoModalIn .18s ease-out;
}
@keyframes photoModalIn{from{opacity:0} to{opacity:1}}
.photo-modal-card{
  background:var(--neutral-0); border-radius:18px;
  max-width:min(900px, 100%); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.photo-modal-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--neutral-200);
  flex-shrink:0;
}
.photo-modal-title{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.photo-modal-eyebrow{
  font-size:11px; color:var(--primary-700); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.photo-modal-fname{font-size:10.5px; color:var(--neutral-500); letter-spacing:.02em}
.photo-modal-x{
  width:36px; height:36px; border-radius:10px;
  background:var(--neutral-100); border:1px solid var(--neutral-300);
  color:var(--neutral-700); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.photo-modal-x:hover{background:var(--neutral-200); color:var(--neutral-900)}
.photo-modal-body{
  flex:1; min-height:0; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--neutral-50);
}
.photo-modal-img{
  max-width:100%; max-height:calc(100vh - 160px);
  border-radius:10px; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.photo-modal-loading, .photo-modal-err{
  text-align:center; padding:48px 20px; color:var(--neutral-600);
  font-family:var(--vks-body);
}
.photo-modal-loading p, .photo-modal-err p{margin:8px 0 0; font-size:12px}
.photo-modal-err{color:var(--danger, #dc2626)}