/* ============================================================================
   GLYO HRMS — MASTER APPLICATION STYLESHEET  (app.css)
   ----------------------------------------------------------------------------
   Single source of truth for all application theming and components.
   Served by Flask at /static/css/app.css and linked once from _base.html.
   Do NOT inline <style> blocks in templates — add rules here so conflicts
   can be pinpointed in one place.

   Sections:
     1. Theme tokens + base elements + shared components
        (moved verbatim from _base.html <style>)
     2. Tenant shell responsive rules
        (moved verbatim from tenant/_shell.html <style>)
     3. Shared components (module-agnostic; payroll v2 + companies redesign)
     4. Design System v2 `.g-*` primitives (from CSS/glyo-v2.css) — a second,
        opt-in component vocabulary; coexists with 1-3, doesn't replace them
   ============================================================================ */

/* ---- [1] THEME TOKENS + COMPONENTS (from _base.html) --------------------- */
    /* ===================================================================
       Glyo Design System v2 — global tokens. Deep teal chrome, single amber
       CTA, DM Sans body / Space Grotesk headings / JetBrains Mono for
       IDs+keys. Token NAMES are preserved from v1 so every module's existing
       .btn/.card/.field/.badge/.modal/.toast/.xctl markup restyles in place;
       values + a few new tokens (--sunk/--border-2/--amber-ink/--info-*) are v2.
       Rolls out platform-wide. Light + dark + RTL all supported.
       =================================================================== */
    :root{
      --navy:#0a3d4f; --navy-2:#11556c; --sidebar:#0a3d4f; --ink-900:#051f29;
      --teal:#11556c; --teal-2:#0a3d4f; --amber:#f6a33a; --amber-ink:#5f3a05;
      --amber-edge:#e5921f; --red:#a5271d;
      --bg:#eef3f4; --surface:#ffffff; --sunk:#f7fafa; --input-bg:#ffffff;
      --text:#0a2c39; --muted:#5d747d; --border:#dce6e8; --border-2:#c7d5d8;
      --divider:#eef3f4; --mint:#eef3f4; --overlay:rgba(5,31,41,.52);
      --ok-bg:#e6f6ee; --ok-text:#106b45; --ok-border:#bfe3d2;
      --err-bg:#fdecea; --err-text:#a5271d; --err-border:#f3c8c3;
      --warn-bg:#fdf3da; --warn-text:#8a5a06; --warn-border:#f0ddab;
      --info-bg:#e8f1f4; --info-text:#11556c; --info-border:#c3dbe2;
      --shadow-float:0 14px 34px rgba(5,31,41,.16);
      --shadow-modal:0 30px 70px rgba(5,31,41,.34);
      --shadow-toast:0 12px 30px rgba(5,31,41,.14);
      /* letters: the page being edited / previewed is a printed sheet - white in dark mode too */
      --paper:#ffffff; --paper-ink:#14202a; --paper-muted:#5a6b73; --paper-line:#e3ebe9; --paper-edge:#dfe9e6;
      --chip-bg:#e3f4ef; --chip-fg:#157a6c; --chip-bd:#bfe6da;
      --chip-s-bg:#fff4e0; --chip-s-fg:#7a4d00; --chip-s-bd:#f5d9a8;
      --chip-x-bg:#fdecea; --chip-x-fg:#a5271d; --chip-x-bd:#f3c8c3;
      /* from CSS/glyo-v2.css — additive tokens for the .g-* primitives in
         section [4] below; not yet used by the .btn/.card/.cmp-* vocabulary. */
      --ink-800:#0a2c39; --focus-ring:0 0 0 3px rgba(246,163,58,.35);
      --font-display:'Space Grotesk',system-ui,sans-serif;
      --font-body:'DM Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
      --font-mono:'JetBrains Mono',ui-monospace,monospace;
      --font-arabic:'IBM Plex Sans Arabic','DM Sans',system-ui,sans-serif;
      --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-pill:999px;
      --h-sm:30px; --h-md:38px; --h-lg:40px;
      --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
      --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px;
      color-scheme: light;
    }
    html[data-theme="dark"]{
      --navy:#061e27; --navy-2:#0a3d4f; --sidebar:#061e27; --ink-900:#03151c;
      --teal:#8ecbdd; --teal-2:#6fb8cc; --amber:#f6a33a; --amber-ink:#3a2403;
      --amber-edge:#b9761f; --red:#f29b90;
      --bg:#072530; --surface:#0d3240; --sunk:#0a2b37; --input-bg:#0a2b37;
      --text:#e6eff1; --muted:#96b0b8; --border:#1c4553; --border-2:#2a5c6e;
      --divider:#123244; --mint:#0d3240; --overlay:rgba(3,14,19,.66);
      --ok-bg:#0f3a2a; --ok-text:#66d6a0; --ok-border:#1d5a42;
      --err-bg:#3a1a17; --err-text:#f29b90; --err-border:#5c2621;
      --warn-bg:#3a2a0e; --warn-text:#f2c46b; --warn-border:#5c4416;
      --info-bg:#0f3444; --info-text:#8ecbdd; --info-border:#1f5567;
      --paper-edge:#051b24;
      color-scheme: dark;
    }
    *{box-sizing:border-box;}
    /* the [hidden] attribute must win over any component's own `display`
       declaration (e.g. .cmp-nav-item{display:block}) */
    [hidden]{display:none !important;}
    body{margin:0;background:var(--bg);font-family:'DM Sans','Inter',system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;}
    [dir="rtl"]{font-family:'IBM Plex Sans Arabic','DM Sans','Inter',sans-serif;}
    a{color:var(--teal);text-decoration:none;}
    a:hover{color:var(--amber);text-decoration:none;}
    h1{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;margin:0 0 8px;color:var(--text);}
    h2{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;margin:0 0 14px;color:var(--text);}

    .topbar{background:var(--sidebar);height:64px;display:flex;align-items:center;flex-wrap:wrap;}
    .topbar-inner{max-width:1040px;margin:0 auto;padding:0 32px;width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
    .brand{display:flex;align-items:center;gap:10px;}
    .brand .logo,.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--amber-ink);font-weight:700;font-family:'Space Grotesk','Manrope',sans-serif;font-size:14px;flex-shrink:0;}
    .brand .name,.brand-name{color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;}
    .topbar-actions,.topbar-links{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
    .topbar-actions a,.topbar-links a{color:#cfe6e2;font-size:13.5px;font-weight:600;}
    .topbar-actions a:hover,.topbar-links a:hover{color:#fff;text-decoration:none;}

    .wrap{max-width:1040px;margin:0 auto;padding:40px 32px;}
    .app-footer{border-top:1px solid var(--border);margin-top:8px;}
    .app-footer-inner{max-width:1040px;margin:0 auto;padding:16px 32px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted);}
    .app-footer-inner .app-footer-brand{font-weight:700;color:var(--text);}
    .app-footer-inner a{color:var(--muted);}
    .app-footer-inner a:hover{color:var(--text);}
    body.auth .topbar,body.state .topbar{display:none;}
    body.auth{background:var(--sidebar);}
    body.auth .wrap,body.state .wrap{max-width:none;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
    .auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--sidebar);}
    .state-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);}

    .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:14px;}
    .card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
    .card-head h2{margin:0;font-size:15px;font-weight:600;font-family:'Space Grotesk','Manrope',sans-serif;letter-spacing:-.01em;color:var(--text);}
    /* key-value grid used across detail pages (was previously unstyled) */
    .kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px;}
    .kv-grid > div{min-width:0;}
    .kv-break{grid-column:1 / -1;height:0;padding:0;margin:0;}
    .kv-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px;}
    .kv-grid > div > span:last-child,.kv-value{font-size:14px;color:var(--text);font-weight:500;}
    .kv-grid .mono,.kv-value.mono{font-family:'JetBrains Mono',monospace;font-size:13.5px;}
    @media(max-width:720px){.kv-grid{grid-template-columns:1fr 1fr;}}
    .auth-card{width:380px;max-width:100%;padding:40px 36px;border-radius:16px;background:var(--surface);}
    .state-card{width:460px;max-width:100%;text-align:center;padding:44px 36px;background:var(--surface);border-radius:16px;}

    .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 22px;border-radius:999px;border:1px solid var(--amber-edge);background:var(--amber);color:var(--amber-ink);font-weight:700;font-size:14px;cursor:pointer;font-family:'DM Sans','Inter',sans-serif;white-space:nowrap;text-align:center;}
    .btn svg{flex-shrink:0;}
    .btn:hover{filter:brightness(.97);text-decoration:none;color:var(--amber-ink);}
    .btn:disabled{opacity:.55;cursor:not-allowed;}
    .btn.warn,.btn.danger{background:var(--surface);color:var(--err-text);border:1px solid var(--err-border);}
    .btn.warn:hover,.btn.danger:hover{background:var(--err-bg);color:var(--err-text);}
    .btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-2);}
    .btn.ghost:hover{background:var(--surface);color:var(--text);border-color:var(--navy);}
    .btn.teal{background:var(--navy);color:#fff;border:1px solid var(--navy);}
    .btn.teal:hover{background:var(--navy-2);color:#fff;}
    .btn.link{background:transparent;border:1px solid transparent;color:var(--teal);padding:0 14px;font-weight:700;}
    .btn.link:hover{color:var(--amber);background:transparent;border-color:transparent;filter:none;}
    .btn.full,.btn.block{width:100%;}
    .btn.sm{height:34px;padding:0 17px;font-size:13px;border-radius:999px;}

    .edit-link{display:inline-flex;align-items:center;gap:5px;color:var(--teal);font-weight:600;font-size:12.5px;cursor:pointer;white-space:nowrap;background:none;border:none;padding:0;font-family:inherit;}
    .edit-link svg{flex-shrink:0;}
    .edit-link:hover{color:var(--amber);text-decoration:none;}

    label{display:block;font-size:13.5px;font-weight:700;color:var(--text);margin:14px 0 6px;text-transform:none;letter-spacing:normal;}
    label:first-child{margin-top:0;}
    input,select,textarea{width:100%;height:42px;padding:0 13px;border:1px solid var(--border-2);border-radius:10px;font-size:14.5px;color:var(--text);font-family:'DM Sans','Inter',sans-serif;outline:none;background:var(--input-bg);}
    input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85;}
    input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,61,79,.12);}
    input:disabled,select:disabled{background:var(--divider);color:var(--muted);}
    textarea{padding:11px 13px;height:auto;resize:vertical;}
    input[dir="rtl"],textarea[dir="rtl"]{text-align:right;font-family:'IBM Plex Sans Arabic','DM Sans',sans-serif;}

    input[type="checkbox"],input[type="radio"]{width:19px;height:19px;flex-shrink:0;accent-color:var(--navy);cursor:pointer;margin:0;}

    select{appearance:none;-webkit-appearance:none;cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:38px;}
    html[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb0b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
    /* xsel/xdate/xtime enhancers below replace native chrome visually while keeping the
       real control for form submission — see the script block at the end of body. */
    .xctl{position:relative;display:block;width:100%;}
    .xctl-native{position:absolute;inset:0;opacity:0;pointer-events:none;}
    .xctl-trigger{width:100%;height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;
      padding:0 13px;border:1px solid var(--border-2);border-radius:10px;background:var(--input-bg);color:var(--text);
      font-size:14.5px;font-family:'DM Sans','Inter',sans-serif;cursor:pointer;text-align:start;}
    .xctl-trigger.placeholder{color:var(--muted);}
    .xctl-trigger:focus,.xctl-trigger.open{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,61,79,.12);}
    .xctl-trigger svg{flex-shrink:0;color:var(--muted);}
    .xctl-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .xctl-pop{position:absolute;z-index:200;top:calc(100% + 6px);left:0;min-width:100%;background:var(--surface);
      border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-float);padding:6px;display:none;overflow:hidden;box-sizing:border-box;}
    .xctl-pop .xsel-search{box-sizing:border-box;}
    .xctl-pop.open{display:block;}
    /* when opened inside a scrollable container (e.g. a modal), the popup is
       positioned as fixed via JS so it isn't clipped by overflow:auto. */
    .xctl-pop.xfixed{position:fixed;top:auto;left:auto;z-index:600;flex-direction:column;overflow:hidden;min-width:0;}
    .xctl-pop.xfixed.open{display:flex;}
    .xctl-pop.xfixed .xsel-list{max-height:none;flex:1;}
    /* time list has a fixed 140px width for the inline case; when the popup is
       fixed-positioned (inside a modal) it is sized to the trigger, so let the
       list fill that width instead of staying 140px. */
    .xctl-pop.xfixed .xtime-list{width:auto;}
    .xsel-list{max-height:240px;overflow-y:auto;overflow-x:hidden;}
    .xsel-opt{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .xsel-opt:hover,.xsel-opt.hi{background:var(--divider);}
    .xsel-opt.sel{color:var(--navy);font-weight:700;}
    .xdate-pop{width:272px;padding:14px;}
    .xdate-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
    .xdate-head button{width:30px;height:30px;border-radius:8px;border:none;background:var(--divider);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;}
    .xdate-head button:hover{background:var(--border);}
    .xdate-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--text);}
    .xdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
    .xdate-dow{font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;}
    .xdate-day{height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer;}
    .xdate-day:hover{background:var(--divider);}
    .xdate-day.mut{color:var(--muted);opacity:.45;}
    .xdate-day.today{box-shadow:inset 0 0 0 1.5px var(--teal);}
    .xdate-day.sel{background:var(--teal);color:#fff;font-weight:700;}
    .xdate-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--divider);}
    .xdate-foot button{background:none;border:none;color:var(--teal);font-weight:600;font-size:12.5px;cursor:pointer;padding:4px;}
    .xtime-list{max-height:220px;overflow-y:auto;width:140px;}

    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start;}
    .grid2 > *{min-width:0;}
    .grid2 > .col-full{grid-column:1/-1;}
    .grid2 label,.grid3 label{margin-top:0;}
    .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 16px;align-items:start;}
    .grid3 > *{min-width:0;}
    .field{min-width:0;}
    .field label:first-child{margin-top:0;}

    .dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;}
    .dl .k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:4px;}
    .dl .v{display:block;font-size:14px;color:var(--text);}
    .dl .full{grid-column:1/-1;}

    .row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--divider);}
    .row:last-child{border-bottom:none;}

    table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;}
    thead th{text-align:left;padding:12px 16px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;border-bottom:1.5px solid var(--border);white-space:nowrap;}
    tbody td{padding:14px 16px;border-bottom:1px solid var(--divider);color:var(--text);font-size:13.5px;}
    tbody tr:hover{background:var(--divider);}
    .table-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:auto;-webkit-overflow-scrolling:touch;}
    .table-card table{margin:0;}

    .flash{padding:13px 18px;border-radius:10px;margin-bottom:14px;font-size:14px;font-weight:600;}
    .flash.error{background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-border);}
    .flash.ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border);}

    /* toasts: bottom-corner stack, auto-dismissing. Notifications surface here
       instead of as a top banner. */
    .toast-stack{position:fixed;z-index:1000;bottom:22px;inset-inline-end:22px;display:flex;
      flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 44px));pointer-events:none;}
    .toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;border-radius:12px;
      padding:14px 15px;font-size:13.5px;font-weight:500;background:var(--surface);color:var(--text);
      border:1px solid var(--border);box-shadow:var(--shadow-toast);
      animation:toastIn .22s ease;transition:opacity .25s ease,transform .25s ease;}
    .toast.hide{opacity:0;transform:translateY(6px);}
    .toast-icon{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;}
    .toast-icon svg{width:16px;height:16px;}
    .toast-ok .toast-icon,.toast-sent .toast-icon{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text);}
    .toast-error .toast-icon,.toast-err .toast-icon{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text);}
    .toast-warn .toast-icon{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);}
    .toast-info .toast-icon{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);}
    .toast-body{flex:1;min-width:0;}
    .toast-title{display:block;font-family:'Space Grotesk','Manrope',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--text);}
    .toast-msg{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45;}
    .toast-x{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;opacity:.8;padding:0;margin:0;font-weight:400;}
    .toast-x:hover{opacity:1;background:var(--divider);color:var(--text);}
    @keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

    /* toggle switch: native checkboxes are progressively upgraded into these
       (design-system spec: 38x22 track, teal on / grey off, sliding thumb). */
    .glyo-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;
      vertical-align:middle;cursor:pointer;}
    .glyo-toggle .glyo-toggle-native{position:absolute;inset:0;opacity:0;width:100%;height:100%;
      margin:0;cursor:pointer;z-index:1;}
    .glyo-toggle-track{position:absolute;inset:0;border-radius:999px;background:var(--surface);border:1px solid var(--border-2);
      transition:background .18s,border-color .18s;}
    html[data-theme="dark"] .glyo-toggle-track{background:var(--sunk);border-color:var(--border-2);}
    .glyo-toggle-thumb{position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;
      border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(5,31,41,.35);transition:inset-inline-start .18s;}
    .glyo-toggle.on .glyo-toggle-track{background:var(--navy);border-color:var(--navy);}
    .glyo-toggle.on .glyo-toggle-thumb{inset-inline-start:22px;}
    .glyo-toggle.disabled{opacity:.5;cursor:not-allowed;}

    /* dropdown search box inside the enhanced-select popup */
    .xsel-search{padding:8px 8px 4px;position:sticky;top:0;background:var(--surface);}
    .xsel-search input{height:34px;font-size:13px;padding:0 10px;}
    .xsel-empty{padding:10px 12px;font-size:13px;color:var(--muted);}

    .muted{color:var(--muted);font-size:13.5px;}
    .mono{font-family:'JetBrains Mono',monospace;}

    .badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;text-transform:none;}
    .badge.active,.badge.ok,.badge.valid{background:var(--ok-bg);color:var(--ok-text);}
    .badge.suspended,.badge.expired,.badge.err{background:var(--err-bg);color:var(--err-text);}
    .badge.provisioning,.badge.error,.badge.soon,.badge.expiring,.badge.warn,.badge.renewing,.badge.pending{background:var(--warn-bg);color:var(--warn-text);}
    .badge.info,.badge.on-leave{background:var(--info-bg);color:var(--info-text);}
    .badge.obsolete,.badge.inactive,.badge.neutral,.badge.archived{background:var(--divider);color:var(--muted);}

    .state-warn{color:var(--warn-text);}
    .state-code{font-family:'Manrope',sans-serif;font-weight:800;font-size:52px;letter-spacing:-0.02em;margin-bottom:10px;line-height:1;color:var(--text);}

    .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
    .entity-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
    .entity-card:hover{border-color:var(--teal);box-shadow:0 6px 20px var(--overlay);text-decoration:none;}
    .logo-chip,.logo-slot{display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--navy);border-radius:11px;}
    .logo-chip{width:34px;height:34px;}
    .logo-slot{width:56px;height:56px;border-radius:12px;flex-shrink:0;font-size:18px;}
    .map-thumb{border-radius:10px;overflow:hidden;background:var(--divider);border:1px solid var(--border);width:100%;height:130px;}

    .modal-overlay{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;padding:20px;z-index:500;}
    .modal-card{background:var(--surface);border-radius:16px;padding:26px 28px;width:460px;max-width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-modal);}
    /* defensive: nothing inside a modal may overflow its width; button rows wrap
       and align consistently; controls never exceed the card. */
    .modal-card *{max-width:100%;box-sizing:border-box;}
    .modal-card input,.modal-card select,.modal-card textarea,.modal-card .xctl{max-width:100%;}
    .modal-card .grid2,.modal-card .grid3{max-width:100%;}
    .modal-card .grid2>*,.modal-card .grid3>*,.modal-card .field{min-width:0;}
    .modal-card .field>p,.modal-card .muted{overflow-wrap:anywhere;}
    .modal-card table{width:100%;display:block;overflow-x:auto;}
    .modal-card .btn-row,.modal-card .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
    .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}

    /* ---- responsive ---- */
    @media (max-width:900px){
      .wrap{padding:28px 20px;}
      .grid2{grid-template-columns:1fr;}
      .dl{grid-template-columns:1fr;}
      .card-grid{grid-template-columns:repeat(2,1fr);}
      table{min-width:0;}
    }
    @media (max-width:640px){
      .wrap{padding:20px 16px;}
      .topbar-inner{padding:0 16px;height:auto;padding-top:10px;padding-bottom:10px;}
      .card{padding:18px 16px;}
      h1{font-size:21px;}
      .card-grid{grid-template-columns:1fr;}
      .auth-card{padding:28px 22px;}
      .state-card{padding:34px 22px;}
      .modal-card{padding:20px 18px;}
      .btn.block,.btn.full{height:46px;}
      .modal-overlay{padding:0;align-items:flex-end;}
      .modal-card{width:100%;border-radius:16px 16px 0 0;max-height:92vh;}
    }


/* ---- [2] APP SHELL (sidebar/header/account-menu — from tenant/_shell.html
   + console/_console_shell.html; the two mirror each other, so shared pieces
   share a class and per-plane differences get a `.console` modifier) ------- */
    .shell-layout{display:flex;min-height:100vh;}
    .shell-main{flex:1;min-width:0;}

    /* ---- sidebar shell ---- */
    .app-sidebar{width:240px;flex-shrink:0;background:var(--sidebar);position:sticky;top:0;
      height:100vh;display:flex;flex-direction:column;transition:width .18s;}
    .app-sidebar.console{width:220px;}
    .app-sidebar[data-expanded="false"]{width:72px;}
    .sidebar-head{height:60px;display:flex;align-items:center;gap:12px;padding:0 20px;
      flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;}
    .brand-badge{width:30px;height:30px;border-radius:8px;
      background:linear-gradient(135deg,var(--teal),var(--teal-2));display:flex;
      align-items:center;justify-content:center;color:var(--sidebar);
      font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;flex-shrink:0;}
    .brand-badge.sm{width:28px;height:28px;font-size:14px;}
    .brand-logo-img{width:30px;height:30px;border-radius:8px;object-fit:contain;
      flex-shrink:0;background:#fff;}
    .brand-name.lg{font-size:16px;}
    .sidebar-nav{flex:1;overflow-y:auto;padding:12px 0;}
    .nav-section-label{padding:14px 20px 6px;font-size:10.5px;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;color:#5f8386;}

    /* top-level nav link (icon + label, or console's text-only variant) */
    .nav-link{display:flex;align-items:center;gap:14px;height:44px;border-radius:10px;
      margin:2px 10px;padding:0 16px;}
    .app-sidebar[data-expanded="false"] .nav-link{padding:0;justify-content:center;}
    .nav-link.is-active{background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 0 var(--teal);}
    .nav-link .nav-icon{flex-shrink:0;color:#8fb4b6;}
    .nav-link.is-active .nav-icon{color:#fff;}
    .nav-link .nav-label{font-size:13.5px;font-weight:600;white-space:nowrap;color:#cfe6e2;}
    .nav-link.is-active .nav-label{color:#fff;}
    .nav-link .nav-badge{margin-inline-start:auto;background:var(--amber,#f2a53d);color:#0e3b4d;
      font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;
      display:inline-flex;align-items:center;justify-content:center;padding:0 5px;}
    .nav-link.console{height:40px;gap:12px;padding:0 14px;}
    .nav-link.console .nav-label{font-size:13px;}
    .nav-link.console .nav-icon-letter{font-size:13px;font-weight:700;}
    .app-sidebar.console[data-expanded="false"] .nav-link.console{padding:0;justify-content:center;}

    /* collapsible nav group (tenant only) */
    .nav-group-head{width:calc(100% - 20px);margin:2px 10px;display:flex;align-items:center;
      gap:14px;height:42px;padding:0 16px;border:none;background:transparent;
      border-radius:10px;cursor:pointer;color:#cfe6e2;}
    .nav-group[data-open="true"] .nav-group-head{background:rgba(255,255,255,.05);color:#fff;}
    .nav-group-head .nav-icon{color:#8fb4b6;}
    .nav-group[data-open="true"] .nav-group-head .nav-icon{color:#fff;}
    .nav-group-label{font-size:13.5px;font-weight:600;white-space:nowrap;flex:1;text-align:start;}
    .nav-caret{flex-shrink:0;transition:transform .16s;transform:rotate(0deg);}
    .nav-group[data-open="true"] .nav-caret{transform:rotate(90deg);}
    .nav-group-items{overflow:hidden;}

    /* nested link inside a nav group (tenant only) */
    .nav-sublink{display:flex;align-items:center;gap:10px;height:38px;border-radius:9px;
      margin-block:1px;margin-inline-end:10px;margin-inline-start:30px;padding:0 14px;}
    .app-sidebar[data-expanded="false"] .nav-sublink{margin-inline-start:10px;padding:0;
      justify-content:center;}
    .nav-sublink.is-active{background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 0 var(--teal);}
    .nav-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:#5f8386;}
    .nav-sublink.is-active .nav-dot{background:var(--teal);}
    .nav-sublabel{font-size:13px;font-weight:500;white-space:nowrap;color:#b8d4d0;}
    .nav-sublink.is-active .nav-sublabel{font-weight:600;color:#fff;}

    .sidebar-foot{flex-shrink:0;border-top:1px solid rgba(255,255,255,.08);padding:12px 10px;
      display:flex;flex-direction:column;gap:6px;}
    .sidebar-foot-link{display:flex;align-items:center;gap:12px;padding:9px 12px;
      border-radius:9px;color:#a9c8c5;}
    .sidebar-foot-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;}
    .sidebar-foot-icon.sm{width:18px;height:18px;}
    .sidebar-foot-label{font-size:13px;font-weight:600;white-space:nowrap;}
    .sidebar-collapse-link{display:flex;align-items:center;justify-content:center;height:36px;
      border-radius:9px;color:#a9c8c5;}
    .sidebar-collapse-link.console{height:34px;}
    .sidebar-collapse-icon{transition:transform .18s;transform:rotate(180deg);}
    .app-sidebar[data-expanded="false"] .sidebar-collapse-icon{transform:rotate(0deg);}

    /* ---- tenant content header ---- */
    .content-header-lead{gap:14px;min-width:0;}
    .content-header-actions{gap:14px;flex-wrap:wrap;}
    /* higher specificity than .content-header .content-title h1 (the redesign
       pages' 23px Space Grotesk heading) so the shell's own default heading
       (only used by pages that don't override {% block header_lead %}) keeps
       its original smaller look */
    .content-header .content-title h1.shell-heading{font-family:'Manrope',sans-serif;
      font-size:19px;font-weight:700;letter-spacing:normal;margin:0;}
    .acct-menu{position:relative;}
    .acct-menu-icon{vertical-align:middle;}
    .acct-menu-pop{display:none;position:absolute;inset-inline-end:0;top:calc(100% + 6px);
      background:var(--surface);border:1px solid var(--border);border-radius:10px;
      box-shadow:0 12px 30px rgba(0,0,0,.15);min-width:190px;z-index:200;overflow:hidden;}
    .acct-menu-pop.open{display:block;}
    .acct-menu-pop a{display:block;padding:10px 14px;font-size:13px;color:var(--text);
      text-decoration:none;}
    .acct-menu-pop a.bordered{border-top:1px solid var(--divider);}
    .acct-lang-block{border-top:1px solid var(--divider);padding:8px 14px;}
    .acct-lang-label{font-size:11px;color:var(--muted);text-transform:uppercase;
      letter-spacing:.06em;margin-bottom:4px;}
    .acct-lang-link{display:inline-block;padding:3px 8px;margin:2px;font-size:12.5px;
      border-radius:6px;text-decoration:none;color:var(--text);border:1px solid var(--border);}
    .acct-lang-link.active{background:var(--teal);color:#fff;border-color:transparent;}
    .subscription-banner{margin-bottom:20px;padding:14px 18px;border-radius:12px;
      font-size:13.5px;font-weight:600;background:var(--warn-bg);color:var(--warn-text);
      border:1px solid var(--warn-border);}
    .subscription-banner.grace{background:var(--err-bg);color:var(--err-text);
      border-color:var(--err-border);}
    .content-body{padding:28px 32px;}

    /* ---- console-only header band (no .content-header/.content-title
       reuse — console's header has its own, simpler, breadcrumb+h1 shape) --- */
    .console-header{display:flex;justify-content:space-between;align-items:center;
      padding:22px 32px;border-bottom:1px solid var(--border);background:var(--surface);}
    .console-header.no-heading{justify-content:flex-end;padding:14px 32px;}
    .console-header h1{font-size:19px;font-weight:700;font-family:'Manrope',sans-serif;margin:0;}
    .console-header-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
    .hamburger-btn{display:none;flex-shrink:0;width:36px;height:36px;align-items:center;
      justify-content:center;border-radius:9px;border:1.5px solid var(--border);
      background:var(--surface);color:var(--text);cursor:pointer;}

  @media (max-width:860px){
    #sidebar{position:fixed !important;top:0;left:0;width:250px !important;height:100vh;z-index:300;
      transform:translateX(-100%);transition:transform .2s ease;box-shadow:6px 0 28px var(--overlay);}
    #sidebar.mobile-open{transform:translateX(0);}
    #sidebar-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:290;display:none;}
    #sidebar-backdrop.show{display:block;}
    #sidebar-collapse-toggle{display:none;}
    .hamburger-btn{display:flex !important;}
    .content-header{padding:16px 18px !important;}
    .content-body{padding:18px !important;}
  }

    /* ============================================================
       Wizard frame (reusable) — step-rail + aside + fixed action bar.
       Mockup layout reconciled with Glyo tokens. Used by the
       disciplinary wizard; other wizards can extend tenant/_wizard.html.
       ============================================================ */
    .wiz{display:grid;grid-template-columns:246px 1fr;gap:26px;padding-bottom:96px;max-width:1180px;}
    .wiz-rail{position:sticky;top:88px;align-self:start;}
    .wiz-rail-title{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
      letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
    .wiz-step{width:100%;display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:10px;
      border:none;background:none;cursor:pointer;text-align:left;font-family:inherit;color:var(--text);}
    .wiz-step:hover{background:var(--divider);}
    .wiz-step[disabled]{cursor:default;opacity:.85;}
    .wiz-step[disabled]:hover{background:none;}
    .wiz-step .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
      font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
      border:1.5px solid var(--border);background:var(--surface);color:var(--muted);}
    .wiz-step.active .n{background:var(--navy);border-color:var(--navy);color:#fff;}
    .wiz-step.done .n{background:var(--teal);border-color:var(--teal);color:#fff;}
    .wiz-step .lb{min-width:0;}
    .wiz-step .lb b{font-size:13.5px;font-weight:600;display:block;}
    .wiz-step.active .lb b{color:var(--navy);}
    .wiz-step .lb small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
    .wiz-connector{margin-left:23px;height:10px;border-left:1.5px dashed var(--border);}
    .wiz-aside{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
    .wiz-aside .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
    .wiz-aside .v{font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;margin-top:6px;color:var(--text);}
    .wiz-aside .d{font-size:12px;color:var(--muted);margin-top:3px;}

    .wiz-main{min-width:0;}
    .wiz-head{margin-bottom:20px;}
    .wiz-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);}
    .wiz-head h1{font-size:26px;margin:8px 0 0;}
    .wiz-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch;}

    /* totals strip (occurrence / prior / escalation context) */
    .wiz-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
      background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
    .wiz-totals > div{background:var(--surface);padding:14px 16px;}
    .wiz-totals .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);}
    .wiz-totals .v{font-family:'Manrope',sans-serif;font-size:19px;font-weight:700;margin-top:5px;color:var(--text);}
    .wiz-totals .v.accent{color:var(--amber);}
    .wiz-totals .d{font-size:12px;color:var(--muted);margin-top:3px;}

    /* fixed action bar */
    .wiz-bar{position:fixed;left:var(--sidebar-w,248px);right:0;bottom:0;height:74px;z-index:8;
      background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);
      border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 30px;}
    .wiz-bar .prog{width:170px;height:6px;border-radius:6px;background:var(--divider);overflow:hidden;}
    .wiz-bar .prog > i{display:block;height:100%;background:var(--amber);transition:width .25s ease;}
    .wiz-bar .meta{font-size:12.5px;color:var(--muted);}
    .wiz-bar .meta b{color:var(--text);}
    .wiz-bar .spacer{margin-left:auto;display:flex;gap:10px;align-items:center;}

    /* penalty outcome + note blocks reused across steps */
    .wiz-outcome{border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:12px;
      background:var(--surface);padding:18px 20px;}
    .wiz-outcome.warn{border-left-color:var(--amber);background:#fff9ef;}
    .wiz-note{margin:16px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:80ch;}
    .wiz-check{display:flex;gap:11px;align-items:flex-start;padding:8px 0;}
    .wiz-check .box{width:19px;height:19px;flex:none;border-radius:6px;border:1.5px solid var(--border);
      display:grid;place-items:center;margin-top:1px;}
    .wiz-check .box.on{background:var(--teal);border-color:var(--teal);}
    .wiz-check .lb{font-size:13.5px;}
    .wiz-check .lb small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;}

    @media (max-width:900px){
      .wiz{grid-template-columns:1fr;}
      .wiz-rail{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;}
      .wiz-rail-title,.wiz-connector,.wiz-aside{display:none;}
      .wiz-step{width:auto;white-space:nowrap;}
      .wiz-step .lb small{display:none;}
      .wiz-bar{left:0;}
    }

    /* radio "tiles" used by wizard pick-lists (leave type, etc.) */
    .pick-tile{display:block;cursor:pointer;}
    .pick-tile input{position:absolute;opacity:0;pointer-events:none;}
    .pick-tile .pt-body{display:block;border:1.5px solid var(--border);border-radius:11px;
      padding:13px 15px;background:var(--surface);transition:border-color .12s,background .12s;}
    .pick-tile .pt-body b{font-size:14px;display:block;}
    .pick-tile .pt-body small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;}
    .pick-tile input:checked + .pt-body{border-color:var(--teal);background:var(--mint);box-shadow:inset 0 0 0 1px var(--teal);}
    .pick-tile input:focus-visible + .pt-body{outline:2px solid var(--teal);outline-offset:2px;}
    .pick-tile.is-disabled{cursor:not-allowed;}
    .pick-tile.is-disabled .pt-body{opacity:.55;background:var(--surface-2,var(--surface));border-style:dashed;}
    .pick-tile.is-disabled .pt-body small.pt-why{color:var(--err-text);opacity:1;}
    /* compact variant: a short label only, centered (weekday pills, 2-way
       language pick) rather than a title+subtitle tile */
    .pick-tile.sm .pt-body{padding:9px 4px;text-align:center;font-size:12.5px;font-weight:700;}
    .pick-tile.sm .pt-body b{font-size:12.5px;}

    /* ---- Org chart tree ---- */

    /* ============================================================
       Onboarding wizard (full-screen company setup)
       ============================================================ */
    body.onb{background:var(--bg);}
    .onb-wrap{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:100vh;padding-bottom:80px;}
    .onb-rail{background:var(--navy);color:#fff;padding:28px 22px;display:flex;flex-direction:column;}
    .onb-brand{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em;margin-bottom:26px;}
    .onb-rail-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:16px;}
    .onb-step{display:flex;gap:12px;align-items:flex-start;padding:8px 8px;border-radius:9px;}
    .onb-step .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.7);}
    .onb-step.active .n{background:var(--teal);border-color:var(--teal);color:#fff;}
    .onb-step.done .n{background:rgba(255,255,255,.15);border-color:transparent;color:#fff;}
    .onb-step .lb b{font-size:13.5px;display:block;}
    .onb-step .lb small{font-size:11px;opacity:.6;display:block;margin-top:2px;}
    .onb-step.active .lb b{color:#fff;}
    .onb-step:not(.active):not(.done) .lb b{opacity:.75;}
    .onb-connector{margin-left:21px;height:8px;border-left:1.5px dashed rgba(255,255,255,.2);}
    .onb-back{color:rgba(255,255,255,.8);text-decoration:none;font-size:12.5px;margin-top:22px;}
    .onb-back:hover{color:#fff;}
    .onb-discard{background:none;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);border-radius:8px;padding:8px 12px;font:inherit;font-size:12.5px;cursor:pointer;width:100%;}
    .onb-discard:hover{border-color:rgba(255,255,255,.5);color:#fff;}
    .onb-main{padding:40px 48px;max-width:820px;}
    .onb-head{margin-bottom:26px;}
    .onb-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
    .onb-head h1{font-size:28px;margin:8px 0 0;}
    .onb-head p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.6;max-width:66ch;}
    .onb-bar{position:fixed;left:0;right:0;bottom:0;height:72px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 32px;z-index:20;}
    .onb-prog{width:180px;height:6px;border-radius:6px;background:var(--divider);overflow:hidden;}
    .onb-prog > i{display:block;height:100%;background:var(--teal);transition:width .25s ease;}
    .onb-meta{font-size:12.5px;color:var(--muted);}
    .onb-actions{margin-left:auto;display:flex;gap:10px;align-items:center;}
    .onb-repeat{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--surface);}
    .onb-repeat h4{margin:0 0 12px;font-size:14px;}
    @media (max-width:860px){
      .onb-wrap{grid-template-columns:1fr;}
      .onb-rail{flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;padding:16px;}
      .onb-rail-title,.onb-connector,.onb-back{display:none;}
      .onb-step .lb small{display:none;}
      .onb-discard{width:auto;margin-left:auto;}
      .onb-main{padding:24px 18px;}
    }

    /* ============================================================
       Webmail-styled notifications inbox
       ============================================================ */
    .wm{display:grid;grid-template-columns:190px 320px 1fr;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:520px;background:var(--surface);}
    .wm-side{border-right:1px solid var(--border);padding:14px 10px;background:var(--mint,#eef4f2);}
    .wm-folder{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);font-size:13.5px;margin-bottom:2px;}
    .wm-folder:hover{background:var(--divider);}
    .wm-folder.on{background:var(--navy);color:#fff;font-weight:600;}
    .wm-count{background:var(--amber);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;font-family:'JetBrains Mono',monospace;}
    .wm-side-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 12px 6px;}
    .wm-list{border-right:1px solid var(--border);overflow-y:auto;max-height:70vh;}
    .wm-item{display:block;padding:12px 14px;border-bottom:1px solid var(--divider);text-decoration:none;color:var(--text);}
    .wm-item:hover{background:var(--mint,#eef4f2);}
    .wm-item.sel{background:var(--mint,#eef4f2);box-shadow:inset 3px 0 0 var(--teal);}
    .wm-item.unread .wm-subj{font-weight:700;}
    .wm-item.unread{background:color-mix(in srgb,var(--teal) 6%,transparent);}
    .wm-item-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
    .wm-subj{font-size:13.5px;}
    .wm-when{font-size:11px;color:var(--muted);flex:none;}
    .wm-snippet{font-size:12px;color:var(--muted);margin:4px 0 6px;line-height:1.4;}
    .wm-read{padding:22px 26px;overflow-y:auto;max-height:70vh;}
    .wm-read-head h2{margin:0 0 4px;font-size:18px;}
    .wm-read-body{margin-top:16px;font-size:14px;line-height:1.7;color:var(--text);}
    .wm-empty{padding:40px 20px;text-align:center;font-size:13.5px;}
    @media (max-width:900px){
      .wm{grid-template-columns:1fr;}
      .wm-side{display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);}
      .wm-side-title{display:none;}
      .wm-list{max-height:none;border-right:none;}
    }

    /* ===================================================================
       Companies module redesign (scoped to .cmp). Opt-in via a wrapper
       class on the page block so it doesn't affect other modules. Reuses
       the app's semantic tokens (--navy/--teal/--amber/--surface/--border/
       --muted/--ok-*/--warn-*/--err-*) so light + dark + RTL keep working;
       adds only two scoped tokens for the sunk/secondary-border shades.
       =================================================================== */
    .cmp{--cmp-sunk:#f7fafa;--cmp-border-2:#c7d5d8;
         font-family:'Inter',system-ui,sans-serif;}
    html[data-theme="dark"] .cmp{--cmp-sunk:#0d2c3a;--cmp-border-2:#2a5c6e;}
    .cmp h1,.cmp h2,.cmp h3{font-family:'Manrope',sans-serif;letter-spacing:-.01em;}

    /* page header band */
    .cmp-head{padding:22px 30px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
    .cmp-head.align-start{align-items:flex-start;}
    .cmp-head .cmp-head-main{min-width:0;}
    .cmp-head h1{font-size:23px;margin:5px 0 0;}
    .cmp-head p{font-size:13.5px;color:var(--muted);margin:4px 0 0;}
    .cmp-head-actions{margin-inline-start:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    .cmp-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .cmp-eyebrow a{font-weight:600;}

    /* page body container */
    .cmp-body{padding:26px 30px;width:100%;display:flex;flex-direction:column;gap:16px;}
    .cmp-body.narrow{max-width:780px;}
    .cmp-body.mid{max-width:960px;}
    .cmp-body.wide{max-width:1180px;}
    /* a status banner sitting directly above .cmp-split shouldn't double up
       with the page's own bottom padding */
    .cmp-body.tight-bottom{padding-bottom:0;}

    /* company avatar / monogram */
    .cmp-mono{border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;flex-shrink:0;}
    .cmp-mono.sm{width:42px;height:42px;font-size:15px;}
    .cmp-mono.lg{width:48px;height:48px;font-size:17px;border-radius:12px;}
    /* company logo tile — a standard header-slot footprint (same as the .lg
       monogram) so the header keeps the app-standard 84px height with or
       without a logo. Reused wherever a company logo/monogram appears. */
    .cmp-logo{width:48px;height:48px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;padding:4px;}
    .cmp-logo.sm{width:42px;height:42px;border-radius:11px;padding:4px;}
    .cmp-logo img{width:100%;height:100%;object-fit:contain;}

    /* pills / badges */
    .cmp-pill{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px;}
    .cmp-pill.ok{background:var(--ok-bg);color:var(--ok-text);}
    .cmp-pill.warn{background:var(--warn-bg);color:var(--warn-text);}
    .cmp-pill.err{background:var(--err-bg);color:var(--err-text);}
    .cmp-tag{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--cmp-sunk);border:1px solid var(--border);padding:3px 9px;border-radius:6px;color:var(--muted);}

    /* stat strip */
    .cmp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
    .cmp-stat{background:var(--surface);padding:15px 18px;}
    .cmp-stat .cmp-stat-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .cmp-stat .cmp-stat-v{font-family:'Manrope',sans-serif;font-weight:700;font-size:24px;margin-top:5px;}
    .cmp-stat .cmp-stat-v.warn{color:var(--warn-text);}
    .cmp-stat .cmp-stat-v.err{color:var(--err-text);}
    .cmp-stat .cmp-stat-v.ok{color:var(--ok-text);}

    /* card (redesign variant) */
    .cmp-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;}
    .cmp-card.err{border-color:var(--err-border);background:var(--err-bg);}
    .cmp-card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);}
    .cmp-card-head h2{font-size:15px;margin:0;}
    /* a sub-table's own head inside a card (e.g. salary/title history) is
       smaller and tighter than the card's own head */
    .cmp-card-head.compact{padding:10px 16px;}
    /* a sub-section head already inside a padded container (e.g. inactive
       documents inside .cmp-inactive-docs) doesn't need its own side padding */
    .cmp-card-head.compact-x{padding-left:0;padding-right:0;}
    .cmp-card-head .cmp-card-act,.cmp-card-sect .cmp-card-act,.g-card__head .cmp-card-act{margin-inline-start:auto;font-size:12.5px;font-weight:700;}
    .cmp-card-pad{padding:20px;}

    /* card grid (companies, tiles) */
    .cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;}
    .cmp-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;color:var(--text);display:block;}
    .cmp-tile:hover{border-color:var(--navy);text-decoration:none;color:var(--text);}
    .cmp-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
    .cmp-tile-name{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;margin-top:14px;}
    .cmp-tile-sub{font-size:13px;color:var(--muted);margin-top:3px;}
    .cmp-tile-foot{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;}
    .cmp-tile-foot .cmp-foot-note{font-size:12px;color:var(--muted);margin-inline-start:auto;}

    /* key/value grid */
    .cmp-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;}
    .cmp-kv.wide-cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
    /* a dense single-column key/value list for a narrow sidebar card */
    .cmp-kv.sidebar{grid-template-columns:1fr;gap:10px;margin-top:12px;font-size:13.5px;}
    /* unscoped so a .cmp-k label also works standalone (e.g. a small section
       caption outside a .cmp-kv grid), not just nested inside one */
    .cmp-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
    .cmp-kv .cmp-v{font-size:14px;font-weight:500;}
    .cmp-kv .cmp-v.muted{color:var(--muted);font-weight:400;}
    .cmp-kv .cmp-v.mono{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:400;}
    .cmp-kv .col-full{grid-column:1/-1;}

    /* rows (signatories, teams, identifiers, list items) */
    .cmp-row{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
    .cmp-row:last-child{border-bottom:none;}
    .cmp-row .cmp-row-main{min-width:0;}
    .cmp-row .cmp-row-title{font-size:14px;font-weight:700;}
    .cmp-row .cmp-row-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
    .cmp-row .cmp-row-act{margin-inline-start:auto;font-size:12.5px;font-weight:700;}
    .cmp-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;}

    /* identifier / sub-grid inside a card (1px hairline grid) */
    .cmp-subgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--border);}
    .cmp-subgrid > .cmp-row{background:var(--surface);border-bottom:none;}

    /* two-column detail layout with sticky aside */
    .cmp-split{padding:26px 30px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;max-width:1180px;width:100%;}
    .cmp-split-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
    .cmp-split-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:22px;}
    @media (max-width:900px){.cmp-split{grid-template-columns:1fr;}.cmp-split-aside{position:static;}}

    /* forms (redesign fields) */
    .cmp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start;}
    .cmp-form-grid > *{min-width:0;}
    .cmp-form-grid .col-full{grid-column:1/-1;}
    @media(max-width:640px){.cmp-form-grid{grid-template-columns:1fr;}}
    .cmp-field{display:flex;flex-direction:column;margin:0;}
    .cmp-field > span{display:block;font-size:13.5px;font-weight:700;margin:0 0 6px;line-height:1.3;min-height:18px;}
    .cmp-field input,.cmp-field select,.cmp-field textarea{width:100%;height:42px;padding:0 13px;font-size:14.5px;color:var(--text);background:var(--surface);border:1px solid var(--cmp-border-2);border-radius:10px;outline:none;font-family:inherit;}
    .cmp-field textarea{height:auto;padding:11px 13px;min-height:84px;}
    .cmp-field input:focus,.cmp-field select:focus,.cmp-field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,61,79,.13);}
    .cmp-field input.mono{font-family:'JetBrains Mono',monospace;}
    .cmp-card-sect{padding:18px 22px;border-bottom:1px solid var(--border);}
    .cmp-card-sect h2{font-size:15px;margin:0;}
    .cmp-card-sect p{font-size:13px;color:var(--muted);margin:3px 0 0;}
    .cmp-card-foot{padding:16px 22px;background:var(--cmp-sunk);border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
    .cmp-card-foot .cmp-foot-note,.g-card__foot .cmp-foot-note{font-size:12.5px;color:var(--muted);max-width:48ch;}
    .cmp-card-foot .cmp-foot-actions,.g-card__foot .cmp-foot-actions{margin-inline-start:auto;display:flex;gap:10px;}

    /* buttons (redesign — pill) */
    .cmp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 20px;border-radius:999px;border:1px solid var(--cmp-border-2);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;}
    .cmp-btn:hover{text-decoration:none;color:var(--text);border-color:var(--navy);}
    .cmp-btn.primary{border-color:#e5921f;background:var(--amber);color:#5f3a05;}
    .cmp-btn.primary:hover{filter:brightness(.97);color:#5f3a05;}
    .cmp-btn.sm{height:32px;padding:0 15px;font-size:12.5px;}
    .cmp-btn.lg{height:40px;padding:0 22px;font-size:14px;}

    /* empty state */
    .cmp-empty{padding:34px 20px;display:grid;place-items:center;text-align:center;gap:6px;}
    .cmp-empty .cmp-empty-t{font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;}
    .cmp-empty p{font-size:13px;color:var(--muted);max-width:46ch;}

    /* aside mini-cards */
    .cmp-mini{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;color:var(--text);display:block;}
    a.cmp-mini:hover{border-color:var(--navy);text-decoration:none;color:var(--text);}
    .cmp-mini .cmp-mini-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .cmp-mini .cmp-mini-v{font-family:'Manrope',sans-serif;font-weight:700;font-size:20px;margin-top:5px;}
    .cmp-mini .cmp-mini-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
    .cmp-mini .cmp-mini-sub.err{color:var(--err-text);}
    .cmp-anchor-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-size:13.5px;}
    .cmp-mini.warn{background:var(--warn-bg);border-color:var(--warn-border);}
    .cmp-mini.warn .cmp-mini-k{color:var(--warn-text);}
    .cmp-mini.warn p{font-size:13.5px;color:var(--text);margin:8px 0 0;line-height:1.55;}

    /* grouped sidebar nav-buttons (e.g. the reports picker) */
    .cmp-nav-group{margin-bottom:18px;}
    .cmp-nav-group:last-child{margin-bottom:0;}
    .cmp-nav-group .cmp-nav-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 8px 8px;}
    .cmp-nav-list{display:flex;flex-direction:column;gap:2px;}
    .cmp-nav-item{display:block;width:100%;text-align:start;padding:8px 10px;border-radius:9px;border:none;cursor:pointer;font-size:13px;font-weight:500;background:transparent;color:var(--text);}
    .cmp-nav-item:hover{background:var(--sunk);text-decoration:none;color:var(--text);}
    .cmp-nav-item.on{font-weight:700;background:var(--navy);color:#fff;}
    .cmp-nav-item.on:hover{background:var(--navy);color:#fff;}

    /* data table (redesign) */
    .cmp-table-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
    /* a table sitting directly under a .cmp-card-head with no gap merges
       visually with it (no border/top radius of its own) */
    .cmp-table-card.flush-top{border:none;border-radius:0 0 14px 14px;}
    .cmp-table{width:100%;border-collapse:collapse;}
    .cmp-table th{text-align:start;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--cmp-sunk);}
    .cmp-table td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:13.5px;}
    .cmp-table tr:last-child td{border-bottom:none;}
    .cmp-table td.mono{font-family:'JetBrains Mono',monospace;}
    [dir="rtl"] .cmp-table th{text-align:start;}
    .cmp-bar{height:8px;border-radius:999px;background:var(--divider);overflow:hidden;max-width:220px;}
    .cmp-bar-fill{height:100%;background:var(--navy);}

    /* tokenized callout box (e.g. an EOS/entitlement estimate) */
    .cmp-callout{margin-top:16px;padding:16px 20px;border-radius:12px;}
    .cmp-callout.info{background:var(--info-bg);border:1px solid var(--info-border);}
    .cmp-callout .cmp-callout-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--info-text);}
    .cmp-callout .cmp-callout-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;margin-top:6px;color:var(--text);}
    .cmp-callout .cmp-callout-note{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5;}

    /* standalone labeled figure (label + mono value) — unlike .cmp-k/.cmp-v,
       does not require a .cmp-kv/.cmp-callout wrapper, so it works in ad hoc
       flex clusters (e.g. a row of small stats like Accrued/Taken/Cap). */
    .cmp-figure-k{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
    .cmp-figure-v{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--text);}
    .cmp-figure-v.muted{color:var(--muted);}
    .cmp-figure-v.lg{font-size:22px;font-weight:600;}

    /* .cmp-page breaks out of the shell's content-body padding so the
       redesign's own full-bleed header band + body padding apply cleanly. */
    .content-body:has(> .cmp-page){padding:0 !important;max-width:none !important;}
    .cmp-page{width:100%;}
    /* fallback for browsers without :has — the page sets this class too */
    .content-body.cmp-host{padding:0 !important;max-width:none !important;}

    /* small layout helpers for the redesign (avoid inline styles in templates) */
    .cmp-card-pad.tight-top{padding-top:0;}
    .cmp-card-sect.inset{padding:18px 0 16px;}
    .cmp-card-sect.inset.px20{padding-left:20px;padding-right:20px;}

    /* --- companies detail: extra v2 helpers (scoped .cmp) --- */
    .cmp-namebar{padding:22px 30px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
    .cmp-reveal{background:none;border:none;padding:0;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--teal);cursor:pointer;}
    .cmp-reveal:hover{color:var(--amber);}
    .cmp-docrow-actions{margin-inline-start:auto;white-space:nowrap;display:flex;gap:6px;align-items:center;}
    .cmp-docrow-actions .sep{color:var(--border-2);}
    .cmp-mono-mask{font-family:'JetBrains Mono',monospace;}
    .cmp-modal-x{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;margin-inline-start:auto;font-size:20px;line-height:1;}
    .cmp-modal-x:hover{background:var(--divider);color:var(--text);}
    .cmp-modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
    .cmp-modal-head h2{margin:0;font-size:19px;}
    .cmp-modal-head p{font-size:13px;color:var(--muted);margin-top:3px;}
    .cmp-check-row{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;font-weight:500;}
    .cmp-check-row input{width:18px;height:18px;}
    /* a check-row opening a form (nothing above it) doesn't need its own
       top gap — the form/section boundary already provides one */
    .cmp-check-row:first-child{margin-top:0;}
    .cmp-summary-note{font-size:13px;color:var(--muted);}
    .cmp-inactive-docs{margin-top:22px;}
    .cmp-inactive-docs .cmp-table tr{opacity:.72;}

    /* modal step + doc-type initial-hidden state (JS toggles style.display at runtime) */
    .step-confirm{display:none;}
    #otherTypeWrap{display:none;}
    .cmp-table td.cell-strong{font-weight:700;}
    .cmp-inactive-docs h3{font-size:14px;color:var(--muted);margin:0;}
    .cmp-hint{font-size:12px;color:var(--muted);margin:0 0 10px;}
    .cmp-hint.tight{margin:4px 0 0;}
    .cmp-sub-h{font-size:12.5px;font-weight:700;color:var(--muted);margin:16px 0 8px;}
    #viewDocBody{min-height:200px;}

    .inline-form{display:inline;}
    .edit-link.danger-link{color:var(--err-text);}
    .edit-link.danger-link:hover{color:var(--err-text);opacity:.8;}
    .modal-card.wide-modal{max-width:820px;width:820px;}

    /* --- companies: departments accordion, header select, map thumb (v2 .cmp) --- */
    .cmp-head-select{height:38px;width:240px;max-width:100%;border-radius:999px;border:1px solid var(--border-2);padding:0 16px;background:var(--surface);font-weight:700;font-size:13.5px;}
    /* once enhanced, the wrapper carries the class but must NOT draw its own
       border/padding — the .xctl-trigger inside supplies the single pill border. */
    .cmp-head-select.xctl{border:0;padding:0;height:auto;background:transparent;}
    .cmp-head-select.xctl .xctl-trigger{border-radius:999px;height:38px;font-weight:700;}
    .cmp-dept{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
    .cmp-dept > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 20px;flex-wrap:wrap;}
    .cmp-dept > summary::-webkit-details-marker{display:none;}
    .cmp-dept > summary h2{font-size:15px;margin:0;}
    .cmp-dept-body{border-top:1px solid var(--border);background:var(--sunk);}
    .cmp-teamrow{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
    .cmp-teamrow:last-child{border-bottom:none;}
    .cmp-teamrow .cmp-dot{}
    .cmp-inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
    .cmp-inline-form .field{margin:0;}
    .cmp-inline-form .field > label{margin:0 0 6px;}
    .cmp-inline-form .btn{flex:none;}
    .cmp-map-thumb{width:100%;height:132px;border-radius:12px 12px 0 0;overflow:hidden;background:var(--sunk);display:flex;align-items:center;justify-content:center;}
    .cmp-loc-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;color:var(--text);display:block;}
    .cmp-loc-card:hover{border-color:var(--navy);text-decoration:none;color:var(--text);}
    .cmp-loc-body{padding:14px 18px 18px;}
    .cmp-two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:start;}
    @media(max-width:820px){.cmp-two-col{grid-template-columns:1fr;}}

    /* utility classes — generic (module-agnostic); originally written for the
       companies redesign but freely reusable anywhere to avoid inline styles */
    .u-mt0{margin-top:0;}
    .u-push{margin-inline-start:auto;}
    .u-w280{max-width:280px;}
    .u-w200{max-width:200px;}
    .u-w180{max-width:180px;}
    .u-w120{max-width:120px;}
    /* fixed widths for enhanced selects so they don't resize to the chosen
       option (department head, cost-centre assignment, header company picker) */
    .u-w280.xctl,.u-w280 .xctl{width:280px;max-width:100%;}
    .u-w200.xctl,.u-w200 .xctl{width:200px;max-width:100%;}
    .u-w180.xctl,.u-w180 .xctl{width:180px;max-width:100%;}
    .u-w120.xctl,.u-w120 .xctl{width:120px;max-width:100%;}
    .u-flex1{flex:1;}
    .u-mb14{margin-bottom:14px;}
    .u-small{font-size:12px;}
    .u-xs{font-size:10.5px;}
    .cmp .u-thin{font-weight:400;}
    .cmp-table tr.dim{opacity:.5;}
    form.inline-form{display:inline;}
    .cmp form.inline-get{display:inline;}
    .cmp .u-teamlabel{font-size:13.5px;font-weight:500;}
    .cmp .u-strong-ink{color:var(--text);}
    .cmp-table td.u-empty{padding:14px;}
    .cmp-map-frame{width:100%;height:100%;border:0;}

    /* --- location detail helpers (v2 .cmp) --- */
    .cmp-loc-detail-top{display:flex;gap:20px;flex-wrap:wrap;}
    .cmp-loc-map{width:240px;height:160px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--sunk);}
    .cmp .u-flex1-240{flex:1;min-width:240px;}
    .cmp .u-modal560 .modal-card,.modal-card.modal-560{width:560px;max-width:100%;}
    .cmp .u-center{text-align:center;}
    .cmp-slot-add{margin-top:14px;border-top:1px solid var(--border);padding-top:16px;}
    .cmp-geofence-map{height:280px;border-radius:10px;overflow:hidden;background:var(--sunk);}
    .cmp-geofence-actions{margin-top:8px;display:flex;gap:8px;}
    .cmp-checkline{display:flex;gap:20px;margin:6px 0 12px;flex-wrap:wrap;}
    .cmp-checkline label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;margin:0;}
    .cmp h1 .u-plate{font-size:15px;font-weight:500;}

    /* confirm-dialog icon tile (v2 modals: info/danger square, spec images 3-4) */
    .modal-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;}
    .modal-icon svg{width:20px;height:20px;}
    .modal-icon.info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);}
    .modal-icon.danger{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text);}
    .modal-icon.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text);}
    .modal-card h3{font-family:'Space Grotesk','Manrope',sans-serif;font-size:19px;letter-spacing:-.02em;margin:0;}
    .modal-card .modal-lead{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5;}

    /* row action icon buttons (design system §07 — 34px hit box, view/edit/delete) */
    .icon-btn{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;padding:0;}
    .icon-btn svg{width:18px;height:18px;stroke-width:1.6;}
    .icon-btn:hover{background:var(--divider);color:var(--text);text-decoration:none;}
    .icon-btn.outlined{border-color:var(--border-2);}
    .icon-btn.outlined:hover{border-color:var(--navy);}
    .icon-btn.danger{color:var(--err-text);}
    .icon-btn.danger:hover{background:var(--err-bg);color:var(--err-text);}
    .icon-btn.danger.outlined{border-color:var(--err-border);}
    .icon-btn.danger.outlined:hover{background:var(--err-bg);border-color:var(--err-text);}
    .row-actions{display:inline-flex;align-items:center;gap:2px;}
    .row-actions form{display:inline;margin:0;}
    [dir="rtl"] .row-actions{flex-direction:row-reverse;}

    /* --- single header band hosting cmp eyebrow+title (replaces the in-page
       .cmp-head band; the Account menu stays in this same header) --- */
    .content-header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
      min-height:84px;padding:14px 32px;border-bottom:1px solid var(--border);background:var(--surface);box-sizing:border-box;}
    .content-header > div{display:flex;align-items:center;}
    .content-header .content-title .cmp-eyebrow{margin-bottom:3px;}
    .content-header .content-title h1{font-family:'Space Grotesk','Manrope',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0;}
    .content-header .content-title .cmp-sub{font-size:13px;color:var(--muted);margin-top:3px;}
    .content-header .content-title{display:flex;flex-direction:column;min-width:0;}
    /* the old in-page header band is no longer used by cmp pages; keep the class
       harmless if any page still references it */
    .cmp-head{padding:0;border:0;background:transparent;}

    /* company_detail header with a logo/monogram tile beside the title — uses
       the STANDARD 84px header height like every other page (no special size). */
    .content-header.cmp-head-withmono > div:first-child{align-items:center;gap:16px;}
    .content-header.cmp-head-withmono .content-title{gap:0;}
    .content-header.cmp-head-withmono .cmp-eyebrow{margin-bottom:2px;}
    .content-header.cmp-head-withmono .cmp-sub{margin-top:2px;}

    /* company logo upload row in the Profile card */
    /* logo modal: centered preview + hint above the file input */
    .cmp-logo.lg{width:64px;height:64px;border-radius:14px;}
    .cmp-logo .cmp-logo-mono{width:100%;height:100%;display:grid;place-items:center;background:var(--navy);color:#fff;font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;font-size:20px;border-radius:inherit;}
    .cmp-logo-modal{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:14px;}
    .cmp-logo-modal .cmp-hint{margin:0;}

    /* scheduling-slots add form */
    .cmp-slot-add{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
    .cmp-subhead{font-family:'Space Grotesk','Manrope',sans-serif;font-size:14px;font-weight:600;margin:0 0 12px;}
    .cmp-checkline label.disabled{opacity:.5;cursor:not-allowed;}

    /* --- bulk import pages (shared imports/import.html + preview) --- */
    .cmp-import-banner{margin-top:14px;padding:12px 16px;background:var(--err-bg);color:var(--err-text);border:1px solid var(--err-border);border-radius:10px;font-size:13px;}
    .cmp-preview-actions{margin-inline-start:auto;display:flex;gap:10px;align-items:center;}
    .cmp-table tr.row-err > td{background:var(--err-bg);}
    .cmp-table td.row-err-detail{color:var(--err-text);font-size:12.5px;padding-top:0;}
    .cmp-table td.raw-cell{font-size:12.5px;}
    .cmp-preview-head{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
    .cmp-preview-head .cmp-kv{flex:1;grid-template-columns:repeat(3,auto);gap:0 28px;}
    .cmp-v.ok-num{color:var(--ok-text);font-weight:700;font-size:20px;}
    .cmp-v.err-num{color:var(--err-text);font-weight:700;font-size:20px;}
    .cmp-table th.w-row{width:52px;}
    .cmp-table th.w-status{width:64px;}

/* ---- [3] SHARED COMPONENTS (module-agnostic; added for the payroll v2
   redesign, but any module may reuse them) --------------------------------- */

    /* --cmp-sunk/--cmp-border-2 promoted to root-level fallbacks (same values
       as the .cmp scope) so .cmp-table/.cmp-stats/.cmp-nav-*/etc. work outside
       a .cmp wrapper — any module can reuse the companies-redesign primitives
       directly instead of duplicating them under a new prefix. */
    :root{--cmp-sunk:#f7fafa;--cmp-border-2:#c7d5d8;}
    html[data-theme="dark"]{--cmp-sunk:#0d2c3a;--cmp-border-2:#2a5c6e;}

    /* notice banner: icon tile + title + body (+ optional trailing cta). 4 tones. */
    .notice{display:flex;gap:14px;align-items:flex-start;border-radius:14px;padding:16px 18px;}
    .notice.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-text);}
    .notice.warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);}
    .notice.err{background:var(--err-bg);border:1px solid var(--err-border);color:var(--err-text);}
    .notice.info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);}
    .notice-icon{width:34px;height:34px;flex:none;border-radius:10px;background:var(--surface);
      border:1px solid currentColor;display:grid;place-items:center;opacity:.9;}
    .notice-icon svg{width:17px;height:17px;}
    .notice-body{min-width:0;flex:1;}
    .notice-title{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:14.5px;
      letter-spacing:-.01em;color:var(--text);}
    .notice-text{font-size:13px;margin:5px 0 0;line-height:1.6;max-width:80ch;opacity:.92;color:var(--text);}
    .notice-cta{flex:none;}

    /* ledger table: label/value rows with an optional rule + bold total row
       (payslip earnings/deductions, EOS settlement review, pay-breakdown modal) */
    .ledger{width:100%;border-collapse:collapse;}
    .ledger td{padding:6px 0;font-size:13.5px;color:var(--text);}
    .ledger td.v{text-align:end;font-family:'JetBrains Mono',monospace;}
    .ledger td.v.neg{color:var(--err-text);}
    .ledger tr.rule td{padding-top:10px;border-top:1px solid var(--border);font-weight:700;}
    .ledger tr.total td{padding-top:10px;border-top:2px solid var(--navy);font-weight:700;font-size:14.5px;}
    .ledger tr.total td.v{font-size:15px;}

    /* small chip row: approver list, template-designer selected columns,
       EOS/loan/retro one-line entries needing an inline remove/reorder action */
    .pick-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--sunk);
      border:1px solid var(--border);border-radius:10px;}
    .pick-row .grip{color:var(--muted);font-size:14px;cursor:grab;flex:none;}
    .pick-row .lbl{font-size:12.5px;color:var(--muted);flex:0 0 34%;min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;}
    .pick-row input,.pick-row select,.pick-row .xctl{flex:1;min-width:0;}
    .pick-row input,.pick-row select,.pick-row .xctl-trigger{height:34px;padding:0 10px;font-size:12.5px;}
    .pick-row .acts{display:flex;gap:4px;flex:none;}

    /* rank/position number chip (settings deduction priority list) */
    .rank-chip{width:34px;height:34px;flex:none;border-radius:10px;background:var(--sunk);
      border:1px solid var(--border);display:grid;place-items:center;
      font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--text);}

    /* avatar / initials chip (payslip identity header, picker rows) */
    .avatar-chip{width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;
      display:grid;place-items:center;font-family:'Space Grotesk','Manrope',sans-serif;
      font-weight:700;font-size:15px;flex:none;}
    .avatar-chip.sm{width:34px;height:34px;border-radius:10px;font-size:12.5px;}

    /* a checkbox (enhanced into .glyo-toggle by app.js) + inline label */
    .toggle-row{display:flex;align-items:center;gap:12px;padding:8px 0;}
    .toggle-row .lbl{font-size:13.5px;min-width:0;}

    /* generic wrapping button/action row (promoted from the modal-only rule
       below it, which stays for specificity inside a .modal-card) */
    .btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
    .btn-row.end{justify-content:flex-end;}
    .btn-row.top-border{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}

    /* spacing nudges — small, generic, so a handful of px values don't need
       inline styles scattered across templates */
    .mt6{margin-top:6px;} .mt8{margin-top:8px;} .mt10{margin-top:10px;} .mt12{margin-top:12px;}
    .mt14{margin-top:14px;} .mt16{margin-top:16px;} .mt18{margin-top:18px;} .mt20{margin-top:20px;}
    .mb0{margin-bottom:0;} .mb6{margin-bottom:6px;} .mb8{margin-bottom:8px;} .mb10{margin-bottom:10px;}
    .mb12{margin-bottom:12px;} .mb14{margin-bottom:14px;} .mb16{margin-bottom:16px;} .mb18{margin-bottom:18px;}
    .m0{margin:0;}
    .w120{width:120px;} .w-auto{width:auto;}
    .px20{padding-left:20px;padding-right:20px;}
    .two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}

    /* inline filter/action form row (search bars, "record a payment" rows,
       period pickers) — a flex row of .field/input/button that wraps cleanly */
    .form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
    .form-row.center{align-items:center;gap:8px;}
    .form-row .field{margin:0;}
    .form-row .field.grow{flex:1 1 160px;}
    .mini-label{font-weight:600;font-size:13px;margin-bottom:6px;}
    .top-rule{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}
    /* a wide .cmp-table (many money columns) needs to scroll on narrow
       viewports rather than clip — .cmp-table-card default is overflow:hidden
       (rounded corners) */
    .cmp-table-card.scroll{overflow-x:auto;}

    /* minimal flex layout primitives, so ad hoc stacks/rows don't need an
       inline style just to set display+direction+gap */
    .stack{display:flex;flex-direction:column;}
    .cluster{display:flex;align-items:center;flex-wrap:wrap;}
    .cluster.between{justify-content:space-between;}
    .cluster.baseline{align-items:baseline;}
    .cluster.nowrap{flex-wrap:nowrap;}
    .btn.disabled-look{opacity:.5;pointer-events:none;}
    .warn-text{color:var(--warn-text);}
    .err-text{color:var(--err-text);}
    .ok-text{color:var(--ok-text);}
    .modal-card.w560{width:560px;}
    /* a modal whose fetched/rendered content supplies its own full-bleed
       header/body/footer bands (mirrors .cmp-card's zero-padding container) */
    .modal-card.flush{padding:0;}
    .u-w220{max-width:220px;} .u-w340{max-width:340px;} .u-w420{max-width:420px;} .u-w80{width:80px;}
    .u-nowrap{white-space:nowrap;}
    .idx-chip{flex:none;width:18px;}
    .btn-row.bottom-border{padding-bottom:18px;border-bottom:1px solid var(--border);}
    .scroll-y{overflow-y:auto;}
    /* designer's two-pane cards: left one caps its height and scrolls, right
       one hugs its content instead of stretching to match */
    .cmp-card.col-flex{min-width:0;display:flex;flex-direction:column;max-height:620px;}
    .cmp-card.self-start{min-width:0;align-self:start;}
    .fw-label{font-size:13.5px;font-weight:600;}
    .gap4{gap:4px;} .gap6{gap:6px;} .gap8{gap:8px;} .gap10{gap:10px;}
    .gap12{gap:12px;} .gap14{gap:14px;} .gap16{gap:16px;} .gap28{gap:28px;}

    /* payslip identity + net-pay footer figure */
    .ident-name{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;}
    .net-label{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:700;font-size:16px;}
    .net-value{font-weight:700;font-size:22px;color:var(--teal);}
    .net-label.net-sm{font-size:15px;}
    .net-value.net-sm{font-size:19px;}
    .cmp-stat-v.sm{font-size:18px;}
    .cmp-stat-v.teal{color:var(--teal);}

    /* bold "Total" footer row for a report table */
    tr.total-row td,.cmp-table tr.total-row td{font-weight:700;border-top:2px solid var(--navy);}
    .ta-end{text-align:end;}
    /* field width / min-width steps for .form-row layouts */
    .field.w-sm{max-width:120px;} .field.w-md{max-width:150px;} .field.w-lg{max-width:220px;} .field.w-xl{max-width:360px;}
    .field.min-md{min-width:160px;} .field.min-lg{min-width:180px;} .field.min-xl{min-width:200px;}
    .field.min-2xl{min-width:280px;}
    /* offsets a checkbox field down to align with a labeled input beside it
       in the same grid row (the checkbox has no label of its own above it) */
    .field.toggle-pad{padding-top:26px;}
    .fw-strong{font-weight:600;}
    .fw-normal{font-weight:400;}
    tr.is-off{opacity:.5;}
    .fs-sm{font-size:12.5px;}
    .fs-10{font-size:10px;} .fs-11{font-size:11px;} .fs-12{font-size:12px;}
    .fs-13{font-size:13px;} .fs-15{font-size:15px;} .fs-17{font-size:17px;} .fs-22{font-size:22px;}
    .op70{opacity:.7;}
    .ml8{margin-inline-start:8px;}
    /* small circular icon "chip" for a page-level stat/summary card (report
       headers, etc.) — same family as .avatar-chip/.notice-icon/.rank-chip */
    .icon-chip{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;}
    .icon-chip.info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);}
    .cell-pad{padding:16px;}
    .pad12{padding:12px;}
    /* a highlighted footer/total row with a sunk background (distinct from
       .total-row's top-border style) */
    tr.row-sunk,.cmp-table tr.row-sunk{font-weight:700;background:var(--sunk);}
    /* pushes everything AFTER this element to the far end of a flex row
       (the mirror of .cmp-card-act's margin-inline-start:auto) */
    .push-after{margin-inline-end:auto;}
    /* two-pane report layout: a sticky report picker + scrollable content */
    .reports-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;align-items:start;}
    .reports-picker{padding:16px;position:sticky;top:22px;}
    .reports-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
    .reports-kind-title{font-family:'Manrope',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:4px;}
    /* one label/value row in a read-only summary list (wizard review step) */
    .review-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--divider);font-size:13.5px;}
    .rec-list{margin:0;padding:0;list-style:none;font-size:12.5px;}
    .rec-list li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:4px 0;}
    .ta-center{text-align:center;}
    /* .cmp-eyebrow (small tracked-caps label) gets a bottom margin when used as
       a standalone section caption rather than inside a .content-title */
    .cmp-eyebrow.standalone{margin-bottom:8px;}
    /* narrower-card width modifiers (a .card that shouldn't span the full
       content width — a settings-style single form, a summary panel) */
    .card.w480{max-width:480px;} .card.w620{max-width:620px;}
    .card.w680{max-width:680px;} .card.w760{max-width:760px;} .card.w820{max-width:820px;}

    /* padding-free split layouts for use inside .content-body (which already
       carries its own padding) — .cmp-split/.cmp-two-col bake in page padding
       meant for full-bleed .cmp-page use, so they don't fit here. */
    .split-aside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
    .split-1-6{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:start;}
    @media(max-width:900px){.split-aside,.split-1-6{grid-template-columns:1fr;}}

    /* drag-reorder (report template designer) + AJAX modal-body loading state */
    [data-row].dragging{opacity:.4;}
    .modal-loading{padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px;}

    /* file upload emphasis box: a big clickable dashed-border target. The real
       file input is stretched invisibly over the whole box (same trick as
       .xctl-native) so no JS is needed to open the picker; app.js's
       initDropzones shows the chosen filename in place of the prompt text. */
    .dropzone{position:relative;display:flex;flex-direction:column;align-items:center;
      gap:8px;padding:28px 20px;border:1.5px dashed var(--border-2);border-radius:14px;
      background:var(--sunk);text-align:center;cursor:pointer;}
    .dropzone:hover{border-color:var(--navy);}
    .dropzone.has-file{border-style:solid;border-color:var(--ok-border);background:var(--ok-bg);}
    .dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;}
    .dropzone-icon{width:38px;height:38px;border-radius:12px;background:var(--info-bg);color:var(--info-text);display:grid;place-items:center;}
    .dropzone-icon svg{width:19px;height:19px;}
    .dropzone-title{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:14px;}
    .dropzone-sub{font-size:12.5px;color:var(--muted);}

    /* sticky first column for wide horizontally-scrolling tables (e.g. the
       attendance weekly roster) */
    .cmp-table td.sticky-col,.cmp-table th.sticky-col{position:sticky;left:0;background:var(--surface);z-index:1;}
    .cmp-table thead th.sticky-col{background:var(--cmp-sunk);}

    /* announcements: compose card + history table */
    .ann-card{margin-bottom:20px;}
    .ann-users{width:100%;max-width:360px;}
    .ann-submit{margin-top:10px;}
    .ann-title{font-weight:600;}
    .ann-empty{padding:16px;}

    /* shared pager: "Page x of y" with prev/next links under a .table-card */
    .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;color:var(--muted);font-size:13.5px;}
    .pager .btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}
    .step-up-card{max-width:420px;margin:0 auto;}
    /* shared: tab strip (link tabs; the active one carries .active) */
    .cmp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;}
    .cmp-tabs a{padding:10px 16px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
    .cmp-tabs a:hover{color:var(--text);}
    .cmp-tabs a.active{color:var(--text);border-bottom-color:var(--amber);font-weight:600;}
    /* shared: preformatted data block (JSON payload/result, error text) */
    .cmp-pre{margin:0;padding:14px 16px;background:var(--sunk);border:1px solid var(--border);border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;color:var(--text);}
    .cmp-pre.err{background:var(--err-bg);border-color:var(--err-border);color:var(--err-text);}
    /* announcement detail: message body blocks */
    .ann-msg{white-space:pre-wrap;line-height:1.6;}
    .ann-meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin-bottom:16px;}

/* ---- [4] GLYO DESIGN SYSTEM v2 — .g- PREFIXED PRIMITIVES (from CSS/glyo-v2.css)
   ----------------------------------------------------------------------------
   A parallel, opt-in component vocabulary using its own `g-` class prefix, so
   it coexists with the `.btn`/`.card`/`.badge`/`.modal-*`/`.cmp-*` vocabulary
   already in sections [1]-[3] (the one documented as "Design System v2" in
   ARCHITECTURE.md §0/§5.H and used by every existing template) without
   colliding with it — no template currently references any `.g-*` class.
   Built on the same semantic tokens, plus the additive --font-*/--r-*/--h-*/
   --s-*/--focus-ring tokens added to :root above. A new page may pick either
   vocabulary; don't mix the two within one component instance. -------------- */
    .g-h1{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.02em;}
    .g-h2{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
    .g-h-modal{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;}
    .g-sub{font-size:13px;color:var(--muted);line-height:1.55;max-width:82ch;}
    .g-kicker,.g-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .g-label{display:block;letter-spacing:.14em;margin-bottom:6px;}
    .g-mono{font-family:var(--font-mono);}
    .g-muted{color:var(--muted);}
    .g-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
    .g-pos{color:var(--ok-text);}
    .g-neg{color:var(--err-text);}

    /* app shell */
    .g-app{display:flex;min-height:100vh;background:var(--bg);}
    .g-main{flex:1;min-width:0;display:flex;flex-direction:column;}
    .g-content{padding:24px 32px 56px;display:flex;flex-direction:column;gap:18px;min-width:0;}
    .g-sidebar{width:248px;flex-shrink:0;background:var(--sidebar);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;}
    .g-sidebar__brand{height:64px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;}
    .g-sidebar__mark{width:28px;height:28px;border-radius:9px;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;font-size:14px;}
    .g-sidebar__nav{flex:1;overflow-y:auto;padding:16px 12px;}
    .g-nav-group{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
    .g-nav-group__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:0 10px 8px;}
    .g-nav-item{display:flex;align-items:center;gap:10px;text-align:start;height:38px;padding:0 12px;border-radius:var(--r-md);border:none;background:transparent;color:rgba(255,255,255,.72);font-size:13.5px;cursor:pointer;}
    .g-nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
    .g-nav-item.is-active,.g-nav-item[aria-current="page"]{background:rgba(246,163,58,.16);color:#ffd79a;font-weight:700;}
    .g-sidebar__foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:rgba(255,255,255,.7);}
    .g-header{padding:16px 32px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
    .g-header__meta{margin-inline-start:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

    /* buttons (pill) */
    .g-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-lg);padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;}
    .g-btn:hover{background:var(--sunk);}
    .g-btn--primary{padding:0 22px;border-color:var(--amber-edge);background:var(--amber);color:var(--amber-ink);}
    .g-btn--primary:hover{background:var(--amber-edge);}
    .g-btn--quiet{color:var(--muted);}
    .g-btn--danger{border-color:var(--err-border);background:var(--err-bg);color:var(--err-text);}
    .g-btn--danger:hover{border-color:var(--err-text);background:var(--err-bg);}
    .g-btn--danger-solid{border-color:var(--err-text);background:var(--err-text);color:#fff;}
    .g-btn--md{height:var(--h-md);}
    .g-btn--sm{height:var(--h-sm);padding:0 13px;font-size:12.5px;}
    .g-btn--icon{width:32px;height:32px;padding:0;color:var(--muted);font-size:16px;flex-shrink:0;}
    .g-btn:disabled,.g-btn[aria-disabled="true"]{background:var(--sunk);border-color:var(--border);color:var(--muted);cursor:not-allowed;}
    .g-btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    .g-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;}

    /* form controls */
    .g-field{min-width:0;}
    .g-input,.g-select,.g-textarea{width:100%;height:var(--h-lg);padding:0 12px;border:1px solid var(--border-2);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:13.5px;}
    .g-select{padding:0 10px;}
    .g-textarea{height:auto;min-height:88px;padding:10px 12px;line-height:1.5;resize:vertical;}
    .g-input--md,.g-select--md{height:var(--h-md);}
    .g-input--mono{font-family:var(--font-mono);font-size:13px;}
    .g-input::placeholder,.g-textarea::placeholder{color:var(--muted);}
    .g-input:focus,.g-select:focus,.g-textarea:focus{outline:none;border-color:var(--amber-edge);box-shadow:var(--focus-ring);}
    .g-input:disabled,.g-select:disabled,.g-textarea:disabled{background:var(--sunk);color:var(--muted);cursor:not-allowed;}
    .g-input--locked{background:var(--sunk);color:var(--muted);}
    .g-input[aria-invalid="true"],.g-select[aria-invalid="true"]{border-color:var(--err-text);}
    .g-hint{font-size:12px;color:var(--muted);margin-top:5px;}
    .g-error{font-size:12px;color:var(--err-text);margin-top:5px;}
    .g-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
    .g-span-2{grid-column:span 2;}
    .g-filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:14px 18px;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
    .g-switch{position:relative;width:42px;height:24px;flex-shrink:0;border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--sunk);cursor:pointer;padding:0;}
    .g-switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:var(--r-pill);background:#fff;box-shadow:0 1px 3px rgba(5,31,41,.28);transition:inset-inline-start .16s ease;}
    .g-switch[aria-checked="true"]{background:var(--amber);border-color:var(--amber-edge);}
    .g-switch[aria-checked="true"]::after{inset-inline-start:20px;}
    .g-sidebar .g-switch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);}
    .g-sidebar .g-switch[aria-checked="true"]{background:var(--amber);border-color:var(--amber-edge);}

    /* cards */
    .g-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
    .g-card__head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
    .g-card__head-meta{margin-inline-start:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
    .g-card__body{padding:20px;}
    .g-card__foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--border);background:var(--sunk);}
    /* glue: g-card__head/__body share the .cmp-card-head/-pad zero-padding-shell
       model 1:1, so existing layout modifiers just need the same modifier
       rule under the new class name (no new primitive, same values). */
    .g-card__head.compact{padding:10px 16px;}
    .g-card__head.compact-x{padding-left:0;padding-right:0;}
    .g-card__body.tight-top{padding-top:0;}
    .g-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
    .g-stat{background:var(--surface);padding:15px 18px;}
    .g-stat__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .g-stat__value{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;}
    .g-stat__note{font-size:11.5px;color:var(--muted);margin-top:3px;}

    /* table */
    .g-table-wrap{overflow-x:auto;}
    .g-table{width:100%;border-collapse:collapse;}
    .g-table thead tr,.g-table tfoot tr{background:var(--sunk);}
    .g-table th{padding:10px 18px;text-align:start;white-space:nowrap;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);}
    .g-table td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--divider);vertical-align:middle;}
    .g-table tbody tr:last-child td{border-bottom:none;}
    .g-table tbody tr:hover{background:var(--sunk);}
    .g-table tfoot td{font-size:12.5px;font-weight:700;border-top:1px solid var(--border);border-bottom:none;}
    .g-table .is-num{text-align:end;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
    .g-table .is-actions{text-align:end;white-space:nowrap;}
    .g-table tr.is-muted td{color:var(--muted);}
    .g-table tr.is-muted .is-num{text-decoration:line-through;}
    .g-cell-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .g-empty{padding:40px 20px;display:grid;place-items:center;gap:6px;text-align:center;}
    .g-empty__title{font-family:var(--font-display);font-weight:600;font-size:15px;}
    .g-empty__body{font-size:13px;color:var(--muted);max-width:46ch;}

    /* badges & chips */
    .g-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid var(--border);background:var(--sunk);color:var(--muted);}
    .g-badge--ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border);}
    .g-badge--err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border);}
    .g-badge--warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border);}
    .g-badge--info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border);}
    .g-chip{font-family:var(--font-mono);font-size:11.5px;padding:6px 12px;border-radius:var(--r-pill);background:var(--sunk);border:1px solid var(--border);color:var(--muted);}
    .g-chip--info{font-family:var(--font-body);font-size:12.5px;font-weight:700;background:var(--info-bg);border-color:var(--info-border);color:var(--info-text);}
    .g-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

    /* callouts */
    .g-callout{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--info-border);background:var(--info-bg);border-radius:var(--r-xl);padding:16px 18px;}
    .g-callout__icon{width:34px;height:34px;flex:none;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--info-border);display:grid;place-items:center;color:var(--info-text);}
    .g-callout__title{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;}
    .g-callout__body{font-size:13px;margin-top:5px;line-height:1.6;max-width:80ch;}
    .g-callout--ok{border-color:var(--ok-border);background:var(--ok-bg);}
    .g-callout--ok .g-callout__icon{border-color:var(--ok-border);color:var(--ok-text);}
    .g-callout--warn{border-color:var(--warn-border);background:var(--warn-bg);}
    .g-callout--warn .g-callout__icon{border-color:var(--warn-border);color:var(--warn-text);}
    .g-callout--err{border-color:var(--err-border);background:var(--err-bg);}
    .g-callout--err .g-callout__icon{border-color:var(--err-border);color:var(--err-text);}

    /* modal */
    .g-overlay{position:fixed;inset:0;z-index:60;background:var(--overlay);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;}
    .g-modal{background:var(--surface);border-radius:var(--r-2xl);box-shadow:var(--shadow-modal);width:100%;max-width:560px;max-height:88vh;overflow-y:auto;}
    .g-modal--sm{max-width:500px;}
    .g-modal--lg{max-width:600px;}
    .g-modal__head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border);}
    .g-modal__close{margin-inline-start:auto;}
    .g-modal__body{padding:22px;}
    .g-modal__foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--border);background:var(--sunk);border-radius:0 0 var(--r-2xl) var(--r-2xl);}
    .g-dl-row{display:flex;align-items:flex-start;gap:16px;padding:12px 22px;border-bottom:1px solid var(--divider);}
    .g-dl-row__label{width:130px;flex-shrink:0;padding-top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
    .g-dl-row__value{font-size:13.5px;min-width:0;}
    .g-audit{padding:16px 22px;background:var(--sunk);}
    .g-audit__item{display:flex;gap:12px;align-items:baseline;padding:4px 0;font-size:12.5px;}
    .g-audit__when{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
    .g-confirm{padding:22px 24px 18px;}
    .g-confirm__icon{width:42px;height:42px;border-radius:var(--r-lg);display:grid;place-items:center;font-size:18px;font-weight:700;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);}
    .g-confirm__icon--err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border);}
    .g-confirm__icon--warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border);}
    .g-confirm__icon--ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border);}
    .g-confirm__title{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;margin:14px 0 8px;}
    .g-confirm__body{font-size:13.5px;color:var(--muted);line-height:1.65;}
    .g-summary{margin-top:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--sunk);overflow:hidden;}
    .g-summary__row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--divider);font-size:12.5px;color:var(--muted);}
    .g-summary__row:last-child{border-bottom:none;}
    .g-summary__value{margin-inline-start:auto;font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--text);}

    /* toast */
    .g-toasts{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:80;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 48px));}
    .g-toast{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-inline-start:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-toast);padding:14px 16px;animation:g-toast-in .22s ease both;}
    .g-toast__dot{width:8px;height:8px;margin-top:6px;border-radius:var(--r-pill);flex:none;background:var(--info-text);}
    .g-toast--ok .g-toast__dot{background:var(--ok-text);}
    .g-toast--err .g-toast__dot{background:var(--err-text);}
    .g-toast--warn .g-toast__dot{background:var(--warn-text);}
    .g-toast__title{font-size:13.5px;font-weight:700;}
    .g-toast__body{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5;}

    /* motion */
    @keyframes g-toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
    @keyframes g-spin{to{transform:rotate(360deg);}}
    .g-spinner{width:16px;height:16px;border-radius:var(--r-pill);border:2px solid var(--border-2);border-top-color:var(--amber);animation:g-spin .7s linear infinite;}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* ---- [5] RBAC MATRIX (Roles & permissions V2, from design_input/Roles &
   Permissions V2.dc.html) — role picker + module/area-grouped editor +
   compare grid. Scoped additions on top of the .g-* primitives in [4]: a
   segmented pill group (view tabs / filter pills / level pills), a role-list
   sidebar item (progress bar + kind tag), a collapsible module row, a
   permission row with a delta badge, a sticky unsaved-changes bar, and the
   compare view's sticky-header grid. -------------------------------------- */
    .g-seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--sunk);border:1px solid var(--border);flex-wrap:wrap;}
    .g-seg--surface{background:var(--surface);}
    .g-seg__btn{height:30px;padding:0 14px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
    .g-seg__btn.is-active{border-color:var(--border-2);background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(5,31,41,.1);}
    .g-seg__btn--sm{height:28px;padding:0 12px;}
    .lg-lang-opt input:checked + .g-seg__btn{border-color:var(--border-2);background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(5,31,41,.1);}
    .g-seg__btn:disabled{cursor:not-allowed;opacity:.55;}

    .g-role-list{display:flex;flex-direction:column;gap:4px;padding:8px;}
    .g-role-item{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:start;padding:11px 12px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;background:transparent;color:inherit;text-decoration:none;}
    .g-role-item:hover{background:var(--sunk);}
    .g-role-item.is-active{border-color:var(--info-border);background:var(--info-bg);}
    .g-role-item__row{display:flex;align-items:center;gap:8px;width:100%;}
    .g-role-item__name{font-size:13.5px;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .g-role-item__dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--amber);flex:none;display:none;}
    .g-role-item__meta{margin-inline-start:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap;}
    .g-role-item__bar{height:4px;border-radius:var(--r-pill);background:var(--divider);width:100%;overflow:hidden;margin-top:8px;}
    .g-role-item__bar-fill{height:100%;border-radius:var(--r-pill);background:var(--teal);opacity:.55;}
    .g-role-item.is-active .g-role-item__bar-fill{background:var(--amber);opacity:1;}
    .g-role-item__kind{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px;}

    .g-module{border-top:1px solid var(--border);}
    .g-module:first-child{border-top:none;}
    .g-module__head{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;flex-wrap:wrap;}
    .g-module__toggle{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;background:transparent;border:none;padding:6px;border-radius:var(--r-md);cursor:pointer;color:var(--text);text-align:start;}
    .g-module__toggle:hover{background:var(--sunk);}
    .g-module__chev{color:var(--muted);flex:none;transition:transform .15s;}
    .g-module__toggle[aria-expanded="true"] .g-module__chev{transform:rotate(90deg);}
    .g-module__name{display:flex;flex-direction:column;min-width:0;}
    .g-module__name-text{font-size:14px;font-weight:700;}
    .g-module__sub{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:1px;}
    .g-module__changed{font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);white-space:nowrap;display:none;}
    .g-module__body{border-top:1px solid var(--divider);background:var(--sunk);padding:4px 0;}
    .g-module__body[hidden]{display:none;}

    .g-perm-row{display:flex;align-items:center;gap:14px;padding:9px 18px 9px 44px;}
    .g-perm-row__label{min-width:0;flex:1;}
    .g-perm-row__text{font-size:13.5px;line-height:1.4;}
    .g-perm-row__key{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:1px;}
    .g-perm-row__mfa{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:3px 8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-2);color:var(--muted);display:inline-flex;align-items:center;gap:5px;flex:none;}
    .g-perm-row__mfa svg{width:10px;height:10px;}

    .g-delta{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--border);flex:none;display:none;}
    .g-delta--add{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok-text);}
    .g-delta--rem{border-color:var(--err-border);background:var(--err-bg);color:var(--err-text);}

    .g-sticky-bar{position:sticky;bottom:16px;margin-top:18px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:12px 14px 12px 20px;box-shadow:var(--shadow-toast);display:none;}
    .g-sticky-bar__dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--amber);flex:none;}
    .g-sticky-bar__title{font-size:13.5px;font-weight:700;}
    .g-sticky-bar__note{font-size:12px;color:rgba(255,255,255,.72);margin-top:1px;}
    .g-sticky-bar .g-btn{border-color:rgba(255,255,255,.28);background:transparent;color:#fff;}
    .g-sticky-bar .g-btn:hover{background:rgba(255,255,255,.1);}
    .g-sticky-bar .g-btn--primary{border-color:var(--amber-edge);background:var(--amber);color:var(--amber-ink);}

    .g-cmp-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:auto;max-height:calc(100vh - 250px);}
    .g-cmp-head{position:sticky;top:0;z-index:3;border-bottom:1px solid var(--border);background:var(--sunk);display:flex;}
    .g-cmp-corner{position:sticky;left:0;background:var(--sunk);padding:12px 18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:flex-end;flex:1 1 260px;min-width:260px;}
    .g-cmp-role-head{background:var(--sunk);border:none;border-inline-start:1px solid var(--border);padding:10px 8px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;flex:0 0 112px;width:112px;}
    .g-cmp-role-head__name{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:5px;}
    .g-cmp-role-head__meta{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
    .g-cmp-area-label{padding:14px 18px 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface);}
    .g-cmp-mod-row{display:flex;align-items:stretch;border-bottom:1px solid var(--divider);}
    .g-cmp-mod-name{position:sticky;left:0;z-index:1;background:var(--surface);border:none;padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:default;color:var(--text);text-align:start;min-width:0;flex:1 1 260px;}
    .g-cmp-mod-name__text{font-size:13.5px;font-weight:700;}
    .g-cmp-mod-name__total{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .g-cmp-cell{border-inline-start:1px solid var(--divider);display:grid;place-items:center;padding:6px;flex:0 0 112px;width:112px;}
    .g-cmp-total-btn{min-width:56px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);}
    .g-cmp-total-btn.is-full{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok-text);}
    .g-cmp-total-btn.is-partial{border-color:var(--info-border);background:var(--info-bg);color:var(--info-text);}
    .g-cmp-total-btn:disabled{cursor:not-allowed;opacity:.6;}
    .g-cmp-perm-row{display:flex;align-items:stretch;background:var(--sunk);border-bottom:1px solid var(--divider);}
    .g-cmp-perm-label{position:sticky;left:0;z-index:1;background:var(--sunk);padding:8px 14px 8px 37px;min-width:0;flex:1 1 260px;display:flex;align-items:center;gap:8px;}
    .g-cmp-perm-label__text{font-size:13px;line-height:1.35;}
    .g-cmp-perm-label__key{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
    .g-cmp-perm-label__mfa{margin-inline-start:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--border-2);color:var(--muted);flex:none;}
    .g-cmp-cell-btn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;padding:0;cursor:pointer;border:1px solid var(--border-2);background:var(--surface);color:var(--muted);}
    .g-cmp-cell-btn.is-on{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok-text);}
    .g-cmp-cell-btn:disabled{cursor:not-allowed;opacity:.6;}
    .g-cmp-cell-btn svg{width:13px;height:13px;}
    .g-cmp-mark{color:var(--muted);opacity:.35;}

/* ---- [6] USERS & ACCESS (Users & Access V2, from design_input/Users &
   Access V2.dc.html) — manage-user drawer, avatar chips, password strength
   meter, and selectable "choice card" rows (create/reset method pickers).
   Reuses [4]/[5]'s .g-seg/.g-card/.g-callout/.g-summary/.g-field as-is. --- */
    .g-avatar{flex:none;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:700;background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-text);}
    .g-avatar--off{background:var(--sunk);border:1px dashed var(--border-2);color:var(--muted);}
    .g-avatar--sm{width:36px;height:36px;font-size:12px;}
    .g-avatar--lg{width:48px;height:48px;font-size:15px;}

    /* right-anchored sliding panel — a .modal-card modifier, so it reuses
       .modal-overlay's existing open/close/fetch JS (shell.js) unchanged. */
    .modal-overlay[data-drawer]{justify-content:flex-end;align-items:stretch;padding:0;}
    .modal-card.g-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;left:auto;width:min(600px,100vw);max-width:min(600px,100vw);height:100vh;max-height:100vh;border-radius:0;margin:0;display:flex;flex-direction:column;}
    .g-drawer__body{flex:1;min-height:0;overflow-y:auto;}
    /* drawer header/footer chrome — shared by every lazily-fetched .g-drawer
       body (countries/users manage panels, …): flush-edge band + a 32px
       circular close button + a flush-edge footer note/actions bar. */
    .g-drawer__head{background:var(--surface);border-bottom:1px solid var(--border);padding:18px 22px;display:flex;gap:14px;align-items:flex-start;}
    .g-drawer__head-main{min-width:0;flex:1;}
    .g-drawer__head-main .g-h-modal{margin:3px 0 0;}
    .g-drawer__close{width:32px;height:32px;flex:none;border-radius:var(--r-pill);border:1px solid var(--border-2);background:var(--surface);color:var(--muted);font-size:16px;cursor:pointer;}
    .g-drawer__body-pad{padding:18px 22px 24px;display:flex;flex-direction:column;gap:16px;}
    .g-drawer__foot{display:flex;gap:10px;align-items:center;padding:16px 22px;border-top:1px solid var(--border);background:var(--sunk);flex-wrap:wrap;}
    .g-drawer__foot-note{font-size:12px;color:var(--muted);flex:1 1 160px;}
    .g-chip--lg{font-size:13px;padding:8px 12px;}
    /* info-tinted .g-chip that KEEPS the chip's default mono font (an ISO/
       reference code, not label text) — named apart from the existing
       .g-chip--info (font-body, ~line 1242) which changes the typeface */
    .g-chip--tone-info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-border);}
    .g-form-grid.cols-3{grid-template-columns:repeat(3,1fr);}
    .g-card__body--stack{display:flex;flex-direction:column;gap:18px;}

    .g-strength{display:flex;align-items:center;gap:10px;margin-top:10px;}
    .g-strength__bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1;}
    .g-strength__bar{height:5px;border-radius:var(--r-pill);background:var(--divider);}
    .g-strength__bar.is-on{background:var(--bar-color,var(--ok-text));}
    .g-strength__label{font-family:var(--font-mono);font-size:11px;width:62px;text-align:end;color:var(--muted);}

    .g-rule{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);}
    .g-rule.is-ok{color:var(--text);}
    .g-rule__dot{width:16px;height:16px;flex:none;border-radius:var(--r-pill);display:grid;place-items:center;font-size:10px;font-weight:700;border:1.5px solid var(--border-2);color:transparent;}
    .g-rule.is-ok .g-rule__dot{background:var(--ok-text);border-color:var(--ok-text);color:var(--surface);}

    .g-choice{display:flex;gap:12px;align-items:flex-start;text-align:start;padding:14px;border-radius:var(--r-lg);cursor:pointer;border:1px solid var(--border-2);background:var(--surface);width:100%;}
    .g-choice.is-on{border-color:var(--amber-edge);background:var(--warn-bg);box-shadow:0 0 0 2px rgba(246,163,58,.25);}
    .g-choice:disabled,.g-choice.is-disabled{cursor:not-allowed;opacity:.55;}
    .g-choice__radio{width:18px;height:18px;flex:none;margin-top:1px;border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--border-2);}
    .g-choice.is-on .g-choice__radio{border:5px solid var(--amber-edge);}
    .g-choice__title{font-size:13.5px;font-weight:700;color:var(--text);display:block;}
    .g-choice__desc{font-size:12.5px;color:var(--muted);line-height:1.5;display:block;margin-top:3px;}

    .g-role-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--divider);flex-wrap:wrap;}
    .g-row-line{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--divider);flex-wrap:wrap;}
    .g-row-line:last-child{border-bottom:none;}

    /* responsive */
    @media (max-width:900px){
      .g-sidebar{display:none;}
      .g-header,.g-content{padding-inline:18px;}
      .g-span-2{grid-column:auto;}
      .g-cmp-role-head,.g-cmp-cell{flex-basis:88px;width:88px;}
    }

/* ---- [7] GENERIC UTILITIES + SMALL SHARED COMPONENTS ---------------------
   Started during the design-system inline-style sweep (2026-09; see
   MD Files/OPEN_ITEMS_TRACKER.md §0.1). Module-agnostic — reach for these
   before writing a new inline style= wherever the layout matches. NOTE: this
   codebase already has TWO generic spacing/layout utility strips (the
   `.cmp`-scoped one ~line 778 and the unscoped `.cluster`/`.mt*`/`.mb*`/
   `.gap*`/`.ta-*`/`.fw-*`/`.fs-*` one ~line 958) — reuse those (e.g.
   `class="cluster between gap10"`, `.mt8`, `.mb16`, `.ta-end`, `.fw-strong`,
   `.fs-13`, `.err-text`) before adding a new one here; only genuinely new
   values/shapes belong in this section. --- */

    /* icon-prefixed search box (magnifier + rounded input) — was duplicated
       verbatim in countries/users/rbac list-toolbar markup */
    .g-search{position:relative;flex:1 1 240px;max-width:340px;}
    .g-search.wide{max-width:360px;}
    .g-search svg{position:absolute;top:12px;inset-inline-start:13px;color:var(--muted);pointer-events:none;}
    .g-search input{padding-inline-start:36px;border-radius:999px;}
    /* list-page toolbar: search box + filters/actions row above a table */
    .g-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
    .g-toolbar.tight{margin-bottom:12px;}

    /* spacing steps not already covered by the existing .mb0-.mb18/.mt6-.mt20 */
    .mb4{margin-bottom:4px;} .mb20{margin-bottom:20px;} .mb24{margin-bottom:24px;} .mb28{margin-bottom:28px;}
    .gap20{gap:20px;}

    .u-min0{min-width:0;}
    .u-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .u-fw700{font-weight:700;}
    .u-upper{text-transform:uppercase;}
    .u-self-start{align-self:start;}
    .u-pointer{cursor:pointer;}
    .u-tabular{font-variant-numeric:tabular-nums;}
    /* intro/lede paragraph under a page title (max measure + comfy leading) */
    .u-lede{max-width:82ch;line-height:1.55;}
    .g-caption{font-size:11.5px;}
    .u-flex-200{flex:1 1 200px;}
    .u-font-ar{font-family:'IBM Plex Sans Arabic',sans-serif;}
    .hr-line{height:1px;background:var(--divider);}
    /* a plain flex-growing search/filter input in a toolbar (no icon) —
       distinct from .g-search, which is the icon+pill variant */
    .field-search{flex:1;min-width:220px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);}
    /* i18n translation editor (admin_console/i18n_admin): language cards + the grouped editor */
    .i18n-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
    .i18n-card{padding:20px;display:flex;flex-direction:column;gap:16px;}
    .i18n-card-add{border:1.5px dashed var(--border-2);border-radius:var(--r-xl);justify-content:center;gap:12px;}
    .i18n-card-top,.i18n-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;}
    .i18n-card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--divider);}
    .i18n-native{font-family:var(--font-display);font-size:24px;font-weight:700;}
    .i18n-card-progress{display:flex;flex-direction:column;gap:7px;}
    .i18n-card-count{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
    .i18n-progress{width:100%;height:6px;border:0;border-radius:3px;appearance:none;-webkit-appearance:none;background:var(--divider);}
    .i18n-progress::-webkit-progress-bar{background:var(--divider);border-radius:3px;}
    .i18n-progress::-webkit-progress-value{background:var(--teal);border-radius:3px;}
    .i18n-progress::-moz-progress-bar{background:var(--teal);border-radius:3px;}
    .i18n-progress-sm{height:3px;}
    .i18n-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:16px;}
    .i18n-head-progress{display:flex;flex-direction:column;gap:6px;min-width:240px;}
    .i18n-toolbar{position:sticky;top:72px;z-index:15;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-toast);}
    .i18n-search{flex:1 1 220px;min-width:180px;}
    .i18n-status{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
    .i18n-status-dot{width:8px;height:8px;border-radius:50%;background:var(--border-2);}
    .i18n-status.is-dirty,.i18n-status.is-pending{color:var(--warn-text);}
    .i18n-status.is-dirty .i18n-status-dot,.i18n-status.is-pending .i18n-status-dot{background:var(--amber);}
    .i18n-status.is-live{color:var(--ok-text);}
    .i18n-status.is-live .i18n-status-dot{background:var(--teal);}
    .i18n-layout{display:flex;gap:18px;align-items:flex-start;}
    .i18n-rail{flex:0 0 220px;position:sticky;top:148px;max-height:calc(100vh - 168px);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);}
    .i18n-rail-item{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:var(--r-md);color:var(--text);text-decoration:none;font-size:13px;font-weight:600;}
    .i18n-rail-item:hover{background:var(--sunk);text-decoration:none;}
    .i18n-rail-item.is-active{background:var(--info-bg);color:var(--info-text);}
    .i18n-rail-row{display:flex;justify-content:space-between;gap:8px;}
    .i18n-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
    .i18n-group-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
    .i18n-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 28px;padding:14px 20px;border-bottom:1px solid var(--divider);}
    .i18n-src{display:flex;gap:10px;min-width:0;}
    .i18n-src-body{display:flex;flex-direction:column;gap:8px;min-width:0;}
    .i18n-text{font-size:13.5px;line-height:1.6;}
    .i18n-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
    .i18n-ph{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--chip-fg);background:var(--chip-bg);padding:1px 4px;border-radius:4px;}
    .i18n-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:7px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--amber);}
    .i18n-row.is-done .i18n-dot{background:var(--teal);box-shadow:none;}
    .i18n-row.has-dirty .i18n-dot{background:var(--navy);box-shadow:none;}
    .i18n-forms{display:flex;flex-direction:column;gap:10px;min-width:0;}
    .i18n-form{display:flex;flex-direction:column;gap:5px;}
    .i18n-flabel{display:flex;gap:6px;align-items:baseline;font-size:11.5px;}
    .i18n-trans{min-height:0;}
    .i18n-trans.is-dirty{border-color:var(--navy);}
    .i18n-trans.has-missing{border-color:var(--warn-border);}
    .i18n-chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
    .i18n-chip{height:22px;padding:0 7px;border-radius:5px;border:1px solid var(--chip-s-bd);background:var(--chip-s-bg);color:var(--chip-s-fg);font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;}
    .i18n-chip.is-used{border-color:var(--chip-bd);background:var(--chip-bg);color:var(--chip-fg);}
    .i18n-warn{font-size:11.5px;color:var(--warn-text);}
    .i18n-page.is-edited-only .i18n-row:not(.has-dirty){display:none;}
    /* a narrower-.card width step not already covered by .card.w480-.w820 */
    .card.w640{max-width:640px;}
    .card.is-inactive{opacity:.6;}
    /* accent border for a "new record" card sitting under a list of existing
       ones (statutory catalogues' "Add a …" card) */
    .card.accent{border-color:var(--teal);}
    .u-w720{max-width:720px;}
    /* logical (RTL-safe) margin-inline-start steps not already covered by .ml8 */
    .ml4{margin-inline-start:4px;}
    .ml6{margin-inline-start:6px;}
    /* .field min-width steps for a non-growing field in a .form-row, not
       already covered by .min-md(160)/.min-lg(180)/.min-xl(200)/.min-2xl(280) */
    .field.min-w80{min-width:80px;}
    .field.min-w100{min-width:100px;}
    .field.min-w110{min-width:110px;}
    .field.min-w120{min-width:120px;}
    .field.min-w140{min-width:140px;}
    /* a checkbox label sitting inline within a row of other checkboxes (the
       row itself carries the spacing) — distinct from .u-check-row, a
       standalone single checkbox+label with its own top margin */
    .check-inline{display:flex;align-items:center;gap:7px;font-size:13px;}
    /* tighter 2-col grid variant (short pick-tile pairs, e.g. a language toggle) */
    .grid2.tight{gap:8px;}
    /* small muted explanatory copy under a heading/field (hint/legal-style
       text) — distinct from the v2 .g-hint (12px, margin-top:5px) so plain
       (non-.g-*) pages keep their existing 12.5px rhythm */
    .hint{color:var(--muted);font-size:12.5px;line-height:1.5;}

    /* a checkbox + its label on one line (settings toggles, "Recurring", …) */
    .u-check-list{max-height:180px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);padding:2px 10px 8px;}
    .u-check-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:8px;text-transform:none;letter-spacing:0;}
    .u-check-row input[type="checkbox"]{width:auto;height:auto;}
    /* legal text and other long free text: keep the paragraph breaks it was authored with */
    .u-prewrap{white-space:pre-wrap;line-height:1.6;}
    /* label on one side, status on the other */
    .g-split{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}

    /* two-panel "list + add form" layout (holidays, ramadan periods, …) */
    .list-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
    @media (max-width:900px){.list-detail-grid{grid-template-columns:1fr;}}

    /* N-wide grid of .pick-tile radio/checkbox tiles (weekday pickers, …) */
    .pick-grid{display:grid;gap:6px;}
    .pick-grid.cols-7{grid-template-columns:repeat(7,minmax(0,1fr));}

    /* console catalogues: holidays year-at-a-glance, working-week strip */
    .yr-layout{grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);align-items:start;}
    @media (max-width:900px){.yr-layout{grid-template-columns:1fr;}}
    .yr-main{display:flex;flex-direction:column;gap:18px;min-width:0;}
    .yr-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:78px;}
    @media (max-width:900px){.yr-side{position:static;}}
    .yr-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--divider);}
    .yr-key{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);}
    .yr-key span{display:flex;align-items:center;gap:6px;}
    .yr-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-2);}
    .yr-swatch.is-holiday{background:var(--teal);box-shadow:none;}
    .yr-swatch.is-ramadan{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-border);}
    .yr-swatch.is-weekend{background:var(--sunk);}
    .yr-swatch.is-today{background:transparent;box-shadow:inset 0 0 0 1.5px var(--teal);}
    .yr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:22px 20px;padding:18px 20px 22px;}
    .yr-month{display:flex;flex-direction:column;gap:6px;}
    .yr-month__head{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:22px;}
    .yr-month__name{font-family:var(--font-display);font-weight:600;font-size:13.5px;}
    .yr-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
    .yr-dow{font-size:10px;font-weight:600;color:var(--muted);text-align:center;padding-bottom:2px;}
    .yr-dow.is-weekend{opacity:.6;}
    .yr-day{height:27px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);text-decoration:none;}
    a.yr-day:hover{filter:brightness(.95);text-decoration:none;}
    .yr-day.is-pad{pointer-events:none;}
    .yr-day.is-weekend{background:var(--sunk);color:var(--muted);}
    .yr-day.is-ramadan{background:var(--warn-bg);color:var(--warn-text);font-weight:600;}
    .yr-day.is-holiday{background:var(--teal);color:var(--surface);font-weight:700;}
    .yr-day.is-holiday.is-ramadan{box-shadow:inset 0 -3px 0 var(--amber);}
    .yr-day.is-today{box-shadow:inset 0 0 0 1.5px var(--teal);}
    .yr-day.is-sel{box-shadow:0 0 0 2px var(--text);}
    .yr-stepper{display:flex;align-items:center;height:var(--h-lg);border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden;}
    .yr-stepper__btn{width:38px;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);text-decoration:none;}
    .yr-stepper__btn:hover{background:var(--sunk);text-decoration:none;}
    .yr-stepper__val{font-weight:600;font-size:15px;padding:0 10px;min-width:44px;text-align:center;}
    .hol-row{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--divider);flex-wrap:wrap;}
    .hol-row:last-child{border-bottom:none;}
    .hol-row.is-sel{background:var(--sunk);}
    .hol-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px;}
    .hol-date{width:48px;flex-shrink:0;text-align:center;border-radius:var(--r-md);padding:5px 0;background:var(--info-bg);color:var(--info-text);text-decoration:none;display:flex;flex-direction:column;}
    .hol-date:hover{text-decoration:none;}
    .hol-date.is-sel{background:var(--text);color:var(--surface);}
    .hol-date__mon{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
    .hol-date__day{font-weight:600;font-size:18px;line-height:1.1;}
    .apply-chip{cursor:pointer;}
    .apply-chip input{position:absolute;opacity:0;pointer-events:none;}
    .apply-chip span{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;}
    .apply-chip input:checked + span{background:var(--text);border-color:var(--text);color:var(--surface);}
    .apply-chip input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px;}
    .ram-card{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--r-xl);padding:16px 18px;color:var(--warn-text);}
    .ram-card .g-kicker{color:var(--warn-text);}
    .dow-strip{display:flex;gap:3px;}
    .dow-pill{width:22px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--sunk);color:var(--muted);}
    .dow-pill.is-weekend{background:var(--text);color:var(--surface);}
    .row-dim{opacity:.62;}

    /* added while migrating admin_console/income_tax, official_documents,
       statutory, statutory_disciplinary (OPEN_ITEMS_TRACKER.md §0.1) */
    /* 4-col form grid (statutory catalogues' edit/add forms) */
    .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start;}
    .grid4 > *{min-width:0;}
    @media (max-width:900px){.grid4{grid-template-columns:1fr;}}
    /* a field spanning 2 columns of a .grid2/.grid3/.grid4 form (submit-button row) */
    .u-span2{grid-column:span 2;}
    /* a couple more fs-* steps between the existing 15/17/22 */
    .fs-16{font-size:16px;} .fs-20{font-size:20px;}
    /* a couple more fixed-width steps for narrow table/form inputs, alongside .u-w80 */
    .u-w64{width:64px;} .u-w90{width:90px;} .u-w120{width:120px;} .u-w130{width:130px;}
    /* margin steps not already covered by .mt6-.mt20/.mb4-.mb28 */
    .mt2{margin-top:2px;} .mt4{margin-top:4px;}
    /* margin-inline-end (RTL-safe) counterpart to .ml4/.ml6 */
    .me4{margin-inline-end:4px;}
    /* a font-weight step between .fw-normal(400) and .fw-strong(600) */
    .fw-500{font-weight:500;}
    /* tighter .form-row variant (a statutory rule's inline single-field save form) */
    .form-row.tight{gap:8px;}
    /* padding for a form embedded directly in a table cell (penalty-catalog inline edit row) */
    .cell-form-pad{padding:8px 4px;}
    /* a tinted card/cell background for a "preview"/"editing" panel, alongside
       .card.is-inactive/.card.accent */
    .bg-mint{background:var(--mint);}
    /* .edit-link in its muted (non-teal) tone, e.g. a catalogue row's Disable/Enable toggle */
    .edit-link.neutral{color:var(--muted);}

    /* statutory disciplinary: penalty-ladder row (occurrence# + penalty select + remove) */
    .pen-row{display:grid;grid-template-columns:70px 1fr 34px;gap:8px;margin-bottom:8px;align-items:center;}
    .pen-row .pen-occ{text-align:center;background:var(--divider);}
    .pen-row .pen-remove{padding:0;}

    /* added while migrating admin_console/letters_generator + modules/letter_generator
       (OPEN_ITEMS_TRACKER.md §0.1) */
    .u-w1000{max-width:1000px;}
    .fs-14{font-size:14px;}
    .u-no-border{border:none;}
    .u-mh40{max-height:40px;}
    /* text in the design system's teal accent, alongside .warn-text/.err-text/.ok-text */
    .teal-text{color:var(--teal);}
    /* icon-chip size/tone modifiers, alongside the existing .icon-chip.info */
    .icon-chip.sm{width:34px;height:34px;border-radius:9px;}
    .icon-chip.mint{background:var(--mint);}

    /* letter/document template editor: form + sticky placeholders sidebar.
       Two variants because the two planes' original layouts genuinely differ
       (tenant stretches both columns to match height; console start-aligns
       them) — not just a copy-paste gap. */
    .doc-edit-layout{display:grid;grid-template-columns:1fr 260px;gap:20px;max-width:1000px;}
    .letter-edit-layout{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start;}
    @media (max-width:900px){.doc-edit-layout,.letter-edit-layout{grid-template-columns:1fr;}}
    .sticky-sidebar{position:sticky;top:20px;align-self:start;}
    /* placeholder sidebar: copyable-chip list (console editor) vs. a plain
       read-only token/description catalogue (tenant template view/new) */
    .placeholder-list{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:4px;}
    .placeholder-catalogue{font-size:11px;line-height:1.9;max-height:460px;overflow-y:auto;}
    /* copy-to-clipboard placeholder token chip (was: undefined --line token +
       hardcoded #fff, so it rendered borderless-on-white even in dark mode) */
    .chip{display:inline-flex;text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;
      border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;
      padding:4px 7px;cursor:pointer;}
    .chip:hover{border-color:var(--teal);}

    /* added while migrating admin_console/messaging + modules/messaging
       (OPEN_ITEMS_TRACKER.md §0.1) */
    .m1{margin:1px;}
    /* a raised code token (placeholder catalogue), alongside .mono */
    .code-chip{display:inline-block;background:var(--surface);padding:1px 6px;border-radius:4px;
      margin:2px;font-size:11.5px;}
    /* messaging settings: OAuth connect card (Gmail/Outlook) */
    .oauth-connect-box{background:var(--mint);border:1px solid var(--border);border-radius:10px;
      padding:12px 14px;margin-bottom:10px;}
    /* messaging settings: read-only redirect-URI display box */
    .uri-box{font-size:11px;background:var(--surface);border:1px solid var(--border);border-radius:6px;
      padding:6px 8px;word-break:break-all;margin-bottom:8px;}
    /* messaging routing: small tracked-caps section label ("Recipients",
       "Channel order") — distinct from .cmp-eyebrow (mono font, tighter caps) */
    .field-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
    /* messaging routing: the "specific users" multi-select */
    .recipient-user-select{width:100%;max-width:280px;}

    /* added while migrating admin_console/subscriptions + modules/tenant_settings
       (OPEN_ITEMS_TRACKER.md §0.1) */
    .u-w320{max-width:320px;}
    /* pull a lede paragraph up to sit flush under a tight heading */
    .mtn6{margin-top:-6px;}
    /* one editable setting's row within a settings card (tenant_settings) */
    .setting-row{padding:14px 0;border-bottom:1px solid var(--border);}

    /* added while migrating modules/pacb (OPEN_ITEMS_TRACKER.md §0.1) */
    .fs-18{font-size:18px;}

    /* added while migrating modules/scheduler (OPEN_ITEMS_TRACKER.md §0.1) */
    .u-w760{max-width:760px;} .u-w900{max-width:900px;}
    /* unscoped horizontal-scroll wrapper, alongside .scroll-y */
    .scroll-x{overflow-x:auto;}
    /* sticky first column for a wide table OUTSIDE .cmp-table (which already
       has its own td.sticky-col/th.sticky-col) — was: var(--card), never a
       defined token anywhere in this file, so the column had no background
       at all and scrolled content showed through it */
    .tbl-sticky-col{position:sticky;left:0;background:var(--surface);z-index:1;}
    /* a narrow inline <select> sitting in a dense table cell */
    .sel-compact{min-width:96px;padding:4px 6px;}
    /* amber text, alongside .warn-text/.err-text/.ok-text/.teal-text */
    .amber-text{color:var(--amber);}
    /* warning card with an amber left accent (scheduler preview's coverage-gap
       banner) — distinct from .notice.warn's full border */
    .warn-accent-card{border-left:3px solid var(--amber);background:var(--warn-bg);color:var(--warn-text);}
    /* auto-scheduler preview grid cell tones */
    .cell-leave{background:var(--info-bg);}
    .cell-off{background:var(--sunk);color:var(--muted);}
    .cell-worked{background:var(--ok-bg);}

    /* added while migrating modules/onboarding (OPEN_ITEMS_TRACKER.md §0.1) */
    .u-underline{text-decoration:underline;}
    .u-w42{width:42px;}
    .u-h34{height:34px;} .u-h40{height:40px;}
    /* a tighter .onb-repeat (payscale's 3-field grade row; default is 16px) */
    .onb-repeat.tight{padding:12px;}
    /* onboarding "EULA text" scroll box */
    .eula-box{max-height:46vh;overflow:auto;white-space:pre-wrap;font-size:13.5px;line-height:1.7;color:var(--text);}
    /* a checkbox/radio row whose label text may wrap onto multiple lines, so
       the control stays pinned to the FIRST line instead of vertically
       centering against the whole block — distinct from .check-inline
       (single-line siblings) and .u-check-row (align-items:center) */
    .check-row-start{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
    /* onboarding location step: the collapsible OSM pin-drop map */
    .loc-map{height:220px;margin-top:8px;border-radius:10px;overflow:hidden;}

    /* added while migrating modules/leaves (OPEN_ITEMS_TRACKER.md §0.1) */
    .u-w280{max-width:280px;}
    .ml10{margin-inline-start:10px;}
    .u-lh1{line-height:1;}
    .u-block{display:block;}
    .u-valign-bottom{vertical-align:bottom;}
    /* a flex-start variant of .cluster (default align-items:center), alongside
       .cluster.between/.baseline/.nowrap */
    .cluster.start{align-items:flex-start;}
    .modal-card.w440{max-width:440px;}
    /* a table-card's header strip (record count / as-of summary) and footer
       note (methodology caption) */
    .tbl-card-strip{padding:12px 16px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--muted);}
    .tbl-card-note{padding:12px 16px;font-size:11.5px;margin:0;}
    /* a scrollable employee-picker table (leave wizard step 1) */
    .emp-picker-table{max-height:240px;overflow:auto;}
    /* wrapping grid of .pick-tile cards (leave-type picker) */
    .pick-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
    /* review-step 2-col layout (wider summary + narrower checklist) */
    .review-split{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
    @media (max-width:900px){.review-split{grid-template-columns:1fr;}}
    /* .review-row's "strong" value variant (alongside the plain row it decorates) */
    .review-row-strong{font-weight:700;color:var(--navy);}
    /* a bordered sub-section within a form, revealed conditionally by JS
       (leave application's bereavement/cert/maternity extra fields) */
    .field-section{border-top:1px solid var(--border);padding-top:12px;margin-top:8px;}

    /* added while migrating the platform auth templates (login/MFA/step-up/
       recovery-codes, both planes — OPEN_ITEMS_TRACKER.md §0.1) */
    /* tenant plane's centered narrow auth card (distinct from the console
       plane's pre-existing .auth-card, which is a different width/padding) */
    .auth-narrow{max-width:420px;margin:0 auto;}
    .auth-narrow.w460{max-width:460px;}
    .auth-card.w440{width:440px;}
    /* a standalone (non-.card) centered auth page — forgot/reset password */
    .auth-page{max-width:400px;margin:8vh auto;padding:0 20px;}
    .auth-page h1{font-family:'Manrope',sans-serif;font-size:22px;margin-bottom:6px;}
    /* .brand-name's default color:#fff assumes a dark topbar; override for a
       brand lockup sitting on a light .card/.auth-card background */
    .brand-name.on-light{color:var(--text);}
    /* a .cluster centered rather than start/space-between-aligned */
    .cluster.center{justify-content:center;}
    /* fixed-size QR code box (MFA enrollment) */
    .qr-box{width:220px;height:220px;}
    .qr-box.sm{width:200px;height:200px;}
    /* console MFA enrollment's QR frame (mint background + padding) —
       tenant's own QR wrapper has no such frame, just .cluster.center */
    .qr-frame{display:flex;justify-content:center;margin:8px 0 18px;padding:16px;background:var(--mint);border-radius:12px;}
    /* MFA manual-entry secret key display */
    .secret-box{word-break:break-all;background:var(--mint);padding:10px;border-radius:8px;margin-top:8px;}
    /* recovery-codes 2-col grid */
    .recovery-codes-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--mint);border-radius:10px;padding:16px;}
    .recovery-codes-grid .mono{font-size:13.5px;color:var(--text);}

    /* ===================================================================
       Home dashboards (modules/dashboard) — semantic tokens only, logical
       properties (RTL-safe), no inline styles. Bars/gauges use <progress>
       so widths come from data without a style attribute; charts are SVG
       drawn with these classes.
       =================================================================== */
    .dash{display:flex;flex-direction:column;gap:16px;}
    .dash.is-loading{opacity:.6;transition:opacity .15s;pointer-events:none;}
    .dash-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;}
    .dash-toolbar-field{display:flex;align-items:center;gap:8px;}
    .dash-toolbar-field label{font-size:12px;font-weight:600;color:var(--muted);}
    .dash-seg{display:inline-flex;gap:3px;background:var(--sunk);border:1px solid var(--border);border-radius:9px;padding:3px;}
    .dash-seg-btn{padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);}
    .dash-seg-btn:hover{color:var(--text);}
    .dash-seg-btn.is-on{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--border-2);}
    .dash-toggle{margin-inline-start:auto;display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--text);}
    .dash-toggle:hover{color:var(--text);}
    .dash-toggle-track{width:36px;height:20px;border-radius:10px;background:var(--border-2);position:relative;display:inline-block;transition:background .15s;}
    .dash-toggle-track.is-on{background:var(--teal);}
    .dash-toggle-knob{width:16px;height:16px;border-radius:50%;background:var(--surface);position:absolute;top:2px;inset-inline-start:2px;transition:inset-inline-start .15s;}
    .dash-toggle-track.is-on .dash-toggle-knob{inset-inline-start:18px;}

    .dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
    .dash-kpi{display:flex;flex-direction:column;gap:8px;min-height:112px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;color:var(--text);}
    a.dash-kpi:hover{border-color:var(--navy-2);color:var(--text);box-shadow:var(--shadow-toast);}
    .dash-kpi-top{display:flex;justify-content:space-between;gap:8px;}
    .dash-kpi-label{font-size:12.5px;font-weight:600;color:var(--muted);}
    .dash-kpi-asof{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}
    .dash-kpi-val{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;}
    .dash-kpi-unit{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--muted);}
    .dash-kpi-delta{font-size:12px;font-weight:600;color:var(--muted);}
    .dash-kpi-delta.ok{color:var(--ok-text);} .dash-kpi-delta.warn{color:var(--warn-text);} .dash-kpi-delta.err{color:var(--err-text);}

    .dash-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch;}
    /* cards in a row share the tallest card's height; past the cap they scroll */
    .dash-grid > .cmp-card{min-width:0;max-height:420px;overflow-y:auto;}
    .dash-grid > .cmp-card > .cmp-card-head{position:sticky;top:0;z-index:1;background:var(--surface);}
    .dash-span-3{grid-column:span 3;} .dash-span-4{grid-column:span 4;} .dash-span-5{grid-column:span 5;}
    .dash-span-7{grid-column:span 7;} .dash-span-8{grid-column:span 8;}
    @media(max-width:1100px){.dash-span-3,.dash-span-4,.dash-span-5,.dash-span-7,.dash-span-8{grid-column:span 12;}}
    .dash-sub{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:3px;}
    .dash-note{font-size:12px;color:var(--muted);margin:8px 0 0;}
    .dash-note-pad{padding:0 20px 16px;}
    .dash-legend{margin-inline-start:auto;display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
    .dash-legend span{display:inline-flex;align-items:center;gap:7px;}
    .dash-key{display:inline-block;width:16px;height:10px;border-radius:3px;flex-shrink:0;}
    .dash-key-cost{background:var(--teal);opacity:.35;border-top:2px solid var(--teal);}
    .dash-key-head{height:3px;background:var(--text);}
    .dash-key-band{background:var(--sunk);border:1px dashed var(--border-2);}
    .dash-key-kw{width:12px;height:12px;background:var(--text);} .dash-key-ex{width:12px;height:12px;background:var(--border-2);}

    .dash-chart{width:100%;height:auto;display:block;}
    .dash-gridline{stroke:var(--divider);stroke-width:1;}
    .dash-axis{fill:var(--muted);font-family:var(--font-mono);font-size:10.5px;}
    .dash-band{fill:var(--sunk);stroke:var(--border-2);stroke-dasharray:3 3;}
    .dash-area{fill:var(--teal);fill-opacity:.16;}
    .dash-cost{fill:none;stroke:var(--teal);stroke-width:2;}
    .dash-cost-dot{fill:var(--surface);stroke:var(--teal);stroke-width:2;}
    .dash-head{fill:none;stroke:var(--text);stroke-width:2.5;stroke-linejoin:round;}
    .dash-dot{fill:var(--surface);stroke:var(--text);stroke-width:2;}
    .dash-hit{fill:transparent;}
    .dash-hit:hover{fill:var(--teal);fill-opacity:.07;}

    .dash-list{list-style:none;margin:0;padding:0;}
    .dash-list > li{border-top:1px solid var(--divider);}
    .dash-list > li:first-child{border-top:0;}
    .dash-item{display:flex;gap:10px;align-items:flex-start;padding:12px 20px;color:var(--text);}
    a.dash-item:hover{background:var(--sunk);color:var(--text);}
    .dash-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
    .dash-item-title{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--text);}
    a.dash-item-title:hover{color:var(--teal);}
    .dash-item-meta{font-size:12px;color:var(--muted);}
    .dash-item-go{color:var(--teal);font-weight:700;}
    [dir="rtl"] .dash-item-go{transform:scaleX(-1);}
    .dash-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 20px;text-align:center;font-size:12.5px;color:var(--muted);}
    .dash-empty strong{font-size:14px;}

    .dash-approval{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 20px;}
    .dash-approval-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
    .dash-approval-act{display:flex;gap:6px;}
    .dash-approval-act form{margin:0;}
    .dash-amount{text-align:end;min-width:100px;display:flex;flex-direction:column;}

    .dash-stages{display:flex;gap:14px;flex-wrap:wrap;padding:12px 20px 4px;font-size:11px;color:var(--muted);}
    .dash-payrow{display:grid;grid-template-columns:minmax(140px,1.2fr) minmax(160px,2fr) auto;gap:16px;align-items:center;padding:14px 20px;}
    @media(max-width:700px){.dash-payrow{grid-template-columns:1fr;}}
    .dash-steps{display:flex;gap:4px;margin-bottom:7px;}
    .dash-step{flex:1;height:8px;border-radius:4px;background:var(--border);}
    .dash-step.is-done{background:var(--teal);}
    .dash-step.is-current{background:var(--amber);box-shadow:0 0 0 2px var(--warn-border);}
    .info-text{color:var(--info-text);}

    .dash-table th.num,.dash-table td.num{text-align:end;}
    .dash-table td .dash-progress{display:block;margin-bottom:4px;}
    .dash-table tr.is-selected > td{background:var(--sunk);}
    .dash-table tfoot td{font-weight:700;border-top:2px solid var(--navy-2);}
    .dash-progress{width:100%;height:10px;border:0;border-radius:5px;overflow:hidden;background:var(--divider);appearance:none;-webkit-appearance:none;}
    .dash-progress::-webkit-progress-bar{background:var(--divider);border-radius:5px;}
    .dash-progress::-webkit-progress-value{background:var(--teal);border-radius:5px;}
    .dash-progress::-moz-progress-bar{background:var(--teal);border-radius:5px;}

    .dash-mix{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
    .dash-donut{width:150px;flex-shrink:0;}
    .dash-donut-bg{fill:none;stroke:var(--border-2);stroke-width:18;}
    .dash-donut-fg{fill:none;stroke:var(--text);stroke-width:18;}
    .dash-donut-n{fill:var(--text);font-family:var(--font-display);font-weight:700;font-size:24px;}
    .dash-donut-l{fill:var(--muted);font-size:11px;}
    .dash-mix-legend{flex:1;min-width:160px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
    .dash-mix-legend li{display:flex;gap:10px;align-items:center;}
    .dash-mix-legend li > span:nth-child(2){flex:1;display:flex;flex-direction:column;font-size:13px;}
    .dash-mix-legend small{font-size:11.5px;color:var(--muted);}
    .dash-mix-n{display:flex;flex-direction:column;text-align:end;font-family:var(--font-display);font-size:17px;}
    .dash-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
    .dash-bars-tight{gap:7px;margin:10px 0;}
    .dash-bars-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:4px;}

    .dash-radar{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,64px);gap:6px;align-items:center;}
    .dash-radar-h{text-align:center;font-size:11px;font-weight:700;}
    .dash-radar-l{font-size:13px;font-weight:500;}
    .dash-cell{display:block;text-align:center;line-height:32px;border-radius:8px;font-family:var(--font-mono);font-size:13px;font-weight:600;}
    .dash-cell.err{background:var(--err-bg);color:var(--err-text);}
    .dash-cell.warn{background:var(--warn-bg);color:var(--warn-text);}
    .dash-cell.soft{background:var(--sunk);color:var(--muted);border:1px solid var(--border);line-height:30px;}
    .dash-cell.zero{color:var(--border-2);}
    a.dash-cell:hover{outline:2px solid var(--navy-2);outline-offset:1px;}

    .dash-liab{display:flex;flex-direction:column;gap:14px;}
    .dash-liab .cmp-mini{display:flex;flex-direction:column;gap:6px;}
    .dash-liab-v{display:flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-weight:700;font-size:22px;}
    .dash-liab-v small{font-size:11px;font-weight:500;color:var(--muted);}
    .dash-activity{align-items:center;justify-content:space-between;padding:14px 20px;}
    .dash-activity-n{font-family:var(--font-display);font-weight:700;font-size:26px;}

    /* Home dashboards — additions for the Finance / Payroll / HR / Manager pages */
    .dash-span-6{grid-column:span 6;} .dash-span-12{grid-column:span 12;}
    @media(max-width:1100px){.dash-span-6{grid-column:span 12;}}
    .dash-s0{fill:var(--teal);} .dash-s1{fill:var(--amber);} .dash-s2{fill:var(--ok-text);}
    .dash-s3{fill:var(--err-text);} .dash-s4{fill:var(--muted);}
    .dash-key-s0{background:var(--teal);} .dash-key-s1{background:var(--amber);} .dash-key-s2{background:var(--ok-text);}
    .dash-key-s3{background:var(--err-text);} .dash-key-s4{background:var(--muted);}
    .dash-key-s0,.dash-key-s1,.dash-key-s2,.dash-key-s3,.dash-key-s4{height:10px;}
    .dash-variance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-bottom:1px solid var(--border);}
    .dash-variance > div{background:var(--surface);padding:12px 20px;display:flex;flex-direction:column;gap:4px;}
    .dash-variance strong{font-size:16px;}
    .dash-foot{padding:12px 20px 16px;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:4px;}
    .dash-quad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
    @media(max-width:900px){.dash-quad{grid-template-columns:1fr;}}
    .dash-h3{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 10px;}
    .dash-quad .dash-bars + .dash-h3{margin-top:18px;}
    .dash-notice{margin:12px 20px 0;}

    .dash-cycle{list-style:none;margin:0;padding:16px 20px 20px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
    @media(max-width:1100px){.dash-cycle{grid-template-columns:repeat(2,minmax(0,1fr));}}
    .dash-cycle-step{display:flex;flex-direction:column;gap:4px;height:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--sunk);color:var(--text);}
    a.dash-cycle-step:hover{border-color:var(--navy-2);color:var(--text);}
    .dash-cycle-step.is-done{background:var(--ok-bg);border-color:var(--ok-border);}
    .dash-cycle-step.is-current{background:var(--warn-bg);border-color:var(--amber);box-shadow:0 0 0 2px var(--warn-border);}
    .dash-cycle-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border-2);}
    .dash-cycle-step.is-done .dash-cycle-n{background:var(--ok-text);color:var(--ok-bg);border-color:var(--ok-text);}
    .dash-cycle-step.is-current .dash-cycle-n{background:var(--amber);color:var(--amber-ink);border-color:var(--amber-edge);}
    .dash-cycle-label{font-size:13px;font-weight:600;line-height:1.3;}
    .dash-cycle-detail{font-size:11.5px;color:var(--muted);}

    .dash-avail{display:grid;grid-template-columns:minmax(120px,1.4fr) repeat(7,minmax(38px,1fr));gap:4px;align-items:center;}
    .dash-avail-h{text-align:center;font-size:11px;font-weight:700;color:var(--muted);}
    .dash-avail-h.is-holiday{color:var(--info-text);}
    .dash-avail-name{font-size:13px;font-weight:500;}
    .dash-avail-cell{display:block;text-align:center;line-height:28px;border-radius:7px;font-size:11px;font-weight:700;background:var(--sunk);}
    .dash-avail-cell.is-leave{background:var(--warn-bg);color:var(--warn-text);}
    .dash-avail-cell.is-holiday{background:var(--info-bg);color:var(--info-text);}

/* ---- approvals (inbox, request page, hierarchy) -------------------------- */
.appr-bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--divider);background:var(--mint);}
.appr-bulkbar .appr-count{font-weight:600;font-size:13px;margin-inline-end:auto;}
.appr-bulkbar input[name=note]{height:34px;max-width:260px;}
.appr-check{width:34px;}
.appr-resume{border:1px solid var(--border);border-radius:10px;background:var(--mint);padding:12px 14px;margin-bottom:18px;}
.appr-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start;}
@media (max-width:900px){.appr-layout{grid-template-columns:1fr;}}
.appr-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--divider);}
.appr-step{display:flex;gap:11px;align-items:flex-start;padding:9px 0;}
.appr-step + .appr-step{border-top:1px solid var(--divider);}
.appr-step .badge{min-width:64px;text-align:center;}
.appr-step__name{font-weight:600;font-size:13.5px;}
.appr-step__meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.appr-final{font-size:11px;color:var(--muted);}
.appr-detail-row.is-off{opacity:.55;}
.appr-waive{display:flex;gap:6px;}
.appr-waive input{height:32px;max-width:160px;}
.appr-slot{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.appr-slot__no{width:26px;height:26px;border-radius:999px;background:var(--mint);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;}
.appr-slot select{flex:1;min-width:0;}
.appr-slot[hidden]{display:none;}
.appr-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.appr-chain .sep{color:var(--muted);}
.appr-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:700px){.appr-form-grid{grid-template-columns:1fr;}}

/* ---- [6] LETTERS (tenant Letters + console Letters, from design_input/Letters/Glyo Letters.dc.html) ----
   .lg-*  home grid, generate / issued split view, settings sections
   .le-*  the WYSIWYG template editor (toolbar, paper, field palette). The editor "paper" is a white
          print sheet in light AND dark mode (--paper* tokens). ---------------------------------------- */
.lg-lead{max-width:640px;margin:0 0 18px;line-height:1.55;}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:26px;}
.lg-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);display:flex;flex-direction:column;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.lg-card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(5,31,41,.08);}
.lg-thumb{position:relative;display:flex;align-items:flex-end;justify-content:center;height:118px;background:var(--sunk);border-bottom:1px solid var(--border);}
.lg-page{display:flex;flex-direction:column;gap:5px;width:82px;height:100px;padding:9px 8px;background:var(--paper);box-shadow:0 2px 8px rgba(5,31,41,.12);}
.lg-page.is-a5{width:62px;height:88px;}
.lg-page-head{display:flex;justify-content:space-between;}
.lg-page-head i{display:block;height:4px;width:26px;border-radius:2px;background:var(--navy);}
.lg-page-head i + i{width:18px;background:var(--border-2);}
.lg-page-rule{height:1.5px;background:var(--teal);margin-bottom:3px;}
.lg-page-cols{display:grid;grid-template-columns:1fr 1fr;gap:3px 5px;}
.lg-page-cols i{display:block;height:2.5px;background:var(--paper-line);}
.lg-page-cols i.s{width:70%;} .lg-page-cols i.r{justify-self:end;}
.lg-size{position:absolute;top:10px;inset-inline-start:10px;font-size:10.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 6px;}
.lg-tag{position:absolute;top:10px;inset-inline-end:10px;font-size:10.5px;padding:2px 9px;}
.lg-card-body{padding:14px 16px 4px;flex:1;}
.lg-card-name{font-size:14px;font-weight:700;line-height:1.35;}
.lg-card-ar{font-family:var(--font-arabic);font-size:13px;color:var(--muted);margin-top:2px;text-align:start;}
.lg-card-actions{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;flex-wrap:wrap;}
.lg-card-actions .btn.sm{height:32px;padding:0 14px;}
.lg-del{margin-inline-start:auto;}
.lg-card.is-off{opacity:.62;}
.lg-card-meta{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.5;word-break:break-all;}
.lg-recent{padding:20px 22px;}
.lg-recent .card-head{margin-bottom:12px;}
.lg-recent .btn.sm{height:30px;padding:0 12px;font-size:12px;}
.le-crumb{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.le-crumb a{font-weight:600;}
.shell-heading .badge,.shell-heading .le-status{font-size:11px;padding:3px 10px;vertical-align:middle;margin-inline-start:8px;}

/* generate + issued: form on the left, the letter on the right */
.lg-gen{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;}
.lg-gen-form{flex:4 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px;margin:0;}
.lg-gen-form h2{margin:0;}
.lg-gen-form .field label{margin:0 0 6px;font-size:12px;color:var(--muted);}
.lg-gen-preview{flex:6 1 480px;min-width:0;margin:0;padding:16px 18px 20px;}
.lg-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.lg-preview-head h2{margin:0;font-size:16px;}
.lg-stage{position:relative;overflow:hidden;background:var(--paper-edge);border:1px solid var(--border);border-radius:var(--r-md);}
.lg-frame{display:block;border:0;background:var(--paper);transform-origin:0 0;}
.lg-lang{flex-wrap:nowrap;align-self:flex-start;width:fit-content;max-width:100%;}
.lg-lang-opt{position:relative;display:block;margin:0;cursor:pointer;}
.lg-lang-opt input{position:absolute;opacity:0;width:0;height:0;}
.lg-lang-opt.is-off{opacity:.45;cursor:not-allowed;}
.lg-submit{height:44px;font-size:14px;margin-top:4px;}
.lg-issued-head{display:flex;align-items:center;gap:12px;}
.lg-issued-head h2{margin:0;font-size:17px;}
.lg-ok{width:30px;height:30px;border-radius:50%;background:var(--ok-bg);color:var(--ok-text);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;}
.lg-summary{background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-lg);padding:4px 16px;}
.lg-summary > div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.lg-summary > div:last-child{border-bottom:0;}

/* settings */
.lg-sec{display:flex;gap:28px;flex-wrap:wrap;padding:22px;}
.lg-sec-aside{flex:1 1 220px;}
.lg-sec-aside h2{margin:0 0 6px;font-size:16px;}
.lg-sec-aside p{margin:0;font-size:12.5px;line-height:1.55;}
.lg-sec-body{flex:2 1 380px;display:flex;flex-direction:column;gap:14px;min-width:0;}
.lg-sec-body .field label{margin:0 0 6px;font-size:12px;color:var(--muted);}
.lg-sec-body p{margin:0;}
.lg-narrow{max-width:320px;}
.lg-pill{background:var(--divider);padding:2px 7px;border-radius:5px;color:var(--text);font-weight:600;}
.lg-uploads{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.dropzone.compact{padding:14px 10px;gap:4px;min-height:96px;justify-content:center;}
.dropzone.compact .dropzone-title{font-size:13px;word-break:break-all;}
.lg-upload-img{max-height:34px;max-width:100%;object-fit:contain;}
.lg-switch{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:600;cursor:pointer;}
.lg-ar-sample{background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;font-size:18px;line-height:1.7;font-family:var(--font-arabic);}
.lg-seg-fit{align-self:flex-start;}
.lg-sec-body [data-lg-footer-pane]{display:flex;flex-direction:column;gap:14px;}
.lg-sec-body [data-lg-footer-pane][hidden]{display:none;}
.lg-lh-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.lg-self-start{align-self:flex-start;}
.lg-company-pick{display:flex;align-items:center;gap:8px;margin:0;}
.lg-company-pick label{margin:0;font-size:12px;color:var(--muted);}
.lg-company-pick select{height:34px;width:auto;min-width:160px;font-size:13px;}
.le-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* the editor */
.le{margin:0;}
.le-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:7px 12px;}
.le-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.le-tools.is-disabled{opacity:.4;pointer-events:none;}
.le-grow{flex:1;}
.le-tb{height:32px;min-width:32px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--text);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;}
.le-tb:hover{background:var(--sunk);}
.le-tb.is-on{background:var(--chip-bg);color:var(--chip-fg);}
.le-tb-b{font-weight:800;font-size:14px;} .le-tb-i{font-style:italic;font-family:Georgia,serif;font-size:14px;} .le-tb-u{text-decoration:underline;font-size:14px;}
.le-tb-w{font-size:12.5px;font-weight:600;padding:0 9px;}
.le-tb-muted{color:var(--muted);}
.le-sep{width:1px;height:20px;background:var(--border);margin:0 6px;}
.le-block{width:auto;height:32px;padding:0 8px;border-radius:8px;font-size:12.5px;font-weight:600;}
.le-al{display:flex;flex-direction:column;gap:3px;width:16px;}
.le-al i{display:block;height:2px;border-radius:1px;background:currentColor;}
.le-al i:nth-child(1){width:16px;} .le-al i:nth-child(2){width:10px;} .le-al i:nth-child(3){width:14px;}
.le-al-center{align-items:center;}
.le-count{font-family:var(--font-mono);font-size:11px;color:var(--ok-text);background:var(--ok-bg);border-radius:var(--r-pill);padding:3px 10px;}
.le-count.is-bad{color:var(--warn-text);background:var(--warn-bg);}
.le-sample{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.le-main{display:flex;align-items:stretch;border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;background:var(--paper-edge);}
.le-stage{flex:1;min-width:0;padding:26px 24px 56px;overflow:auto;max-height:calc(100vh - 190px);min-height:560px;}
.le-hint{position:sticky;top:0;z-index:3;max-width:794px;margin:0 auto 10px;background:var(--navy);color:#fff;border-radius:var(--r-md);padding:8px 14px;font-size:13px;}
.le-sysnote{max-width:794px;margin:0 auto 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.5;}
.le-paper{direction:ltr;width:794px;min-height:1123px;margin:0 auto;background:var(--paper);color:var(--paper-ink);box-shadow:0 1px 3px rgba(5,31,41,.12),0 14px 40px rgba(5,31,41,.14);display:flex;flex-direction:column;padding:38px 38px 0;font-family:'Inter',Arial,sans-serif;}
.le-paper.is-a5{width:559px;min-height:794px;}
.le-ar{font-family:var(--le-ar-font,var(--font-arabic));}
.le-hdr{display:flex;align-items:center;gap:22px;min-height:68px;}
.le-hdr-logo{flex:1;} .le-hdr-logo img{max-height:68px;max-width:100%;object-fit:contain;}
.le-co{font-family:'Manrope',sans-serif;font-weight:800;font-size:20pt;color:var(--navy);line-height:1.1;}
.le-hdr-name{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2;}
.le-hdr-name .le-ar{font-weight:700;font-size:12pt;} .le-hdr-name .le-en{font-weight:700;font-size:11pt;color:var(--navy);}
.le-title{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1.5px solid var(--teal);padding:6px 0 5px;margin-top:4px;}
.le-title input{flex:1;min-width:0;width:auto;height:auto;border:0;outline:0;background:transparent;font-weight:800;font-size:14pt;color:var(--navy);padding:2px 4px;margin:0 -4px;border-radius:4px;}
.le-title .le-title-en{font-family:'Manrope',sans-serif;}
.le-title .le-title-ar{text-align:right;font-family:var(--le-ar-font,var(--font-arabic));}
.le-title input:hover{background:var(--sunk);} .le-title input:focus{background:var(--sunk);box-shadow:0 0 0 2px var(--teal);}
.le-title input::placeholder{color:var(--paper-muted);opacity:.6;font-weight:600;}
.le-cols{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;row-gap:28px;padding:34px 0 24px;align-content:start;}
.le-paper.is-stacked .le-cols{grid-template-columns:minmax(0,1fr);}
.le-col{min-width:0;}
.le-colhead{font-family:var(--font-mono);font-size:10px;color:var(--paper-muted);letter-spacing:.08em;margin-bottom:6px;}
.le-body{min-height:220px;outline:0;line-height:1.7;color:var(--paper-ink);border-radius:6px;padding:8px 10px;margin:-8px -10px;transition:box-shadow .12s;font-size:var(--le-base,10.5pt);counter-reset:lec lecs;}
.le-body-ar{text-align:right;font-family:var(--le-ar-font,var(--font-arabic));}
.le-body:hover{box-shadow:0 0 0 1px var(--border-2);} .le-body:focus{box-shadow:0 0 0 2px var(--teal);}
.le-body[contenteditable="false"]:hover{box-shadow:none;}
[data-ph]:empty::before{content:attr(data-ph);color:var(--paper-muted);opacity:.6;pointer-events:none;}
.le-body p,.le-body h3{margin:0 0 .8em;} .le-body h3{font-size:1.3em;font-weight:800;}
.le-body ul,.le-body ol{margin:0 0 .8em;padding-inline-start:1.4em;}
.le-body [data-line]{display:block;} .le-body [data-ctr]{text-align:center;}
.le-body p[data-clause]{counter-increment:lec;position:relative;}
.le-body p[data-clause="1"]{counter-increment:lec;counter-reset:lecs;}
.le-body p[data-clause="1"]::before{content:"\200E" counter(lec) ".\200E ";font-weight:700;}
.le-body p[data-clause="2"]{counter-increment:lecs;padding-inline-start:1.4em;}
.le-body p[data-clause="2"]::before{content:"\200E" counter(lec) "." counter(lecs) "\200E ";font-weight:700;margin-inline-start:-1.4em;}
.le-pb{position:relative;margin:1.2em 0;border-top:1.5px dashed var(--border-2);height:0;user-select:none;}
.le-pb::after{content:"page break";position:absolute;top:-9px;inset-inline-start:50%;transform:translateX(-50%);background:var(--paper);padding:0 8px;font:10px var(--font-mono);color:var(--paper-muted);}
.le-chip{display:inline-block;padding:0 6px;margin:0 1px;border-radius:5px;background:var(--chip-bg);color:var(--chip-fg);font:600 .84em/1.55 'Inter',sans-serif;border:1px solid var(--chip-bd);white-space:nowrap;vertical-align:baseline;cursor:default;user-select:all;direction:ltr;unicode-bidi:isolate;}
.le-chip[data-optional]{border-style:dashed;background:var(--chip-s-bg);color:var(--chip-s-fg);border-color:var(--chip-s-bd);}
.le-chip.is-picked{outline:2px solid var(--teal);outline-offset:1px;}
.le-chip[data-optional]::after{content:" ?";opacity:.75;}
.le-chip.is-sample{background:var(--chip-s-bg);color:var(--chip-s-fg);border-color:var(--chip-s-bd);}
.le-chip.is-unknown{background:var(--chip-x-bg);color:var(--chip-x-fg);border-color:var(--chip-x-bd);}
.le-sign{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:26px;}
.le-sign-label{font-size:10.5pt;}
.le-sign-names{margin-top:8px;line-height:1.35;font-size:10pt;}
.le-sign-title{font-size:9.5pt;color:var(--paper-muted);}
.le-sign-slot{position:relative;height:84px;width:220px;display:flex;align-items:flex-end;justify-content:center;}
.le-sign-line{width:190px;border-top:1.5px solid var(--paper-ink);}
.le-sig{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-height:60px;max-width:180px;}
.le-stamp{position:absolute;top:4px;left:calc(50% + 40px);width:64px;height:64px;object-fit:contain;}
.le-foot{border-top:1.5px solid var(--paper-line);padding:10px 0 22px;margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:8pt;color:var(--paper-muted);gap:2px;}
.le-panel{width:330px;flex-shrink:0;background:var(--surface);border-inline-start:1px solid var(--border);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 190px);}
.le-tabs{margin:14px 16px 4px;} .le-tabs .g-seg__btn{flex:1;}
.le-pane{display:flex;flex-direction:column;min-height:0;flex:1;}
.le-pane[hidden]{display:none;}
.le-pane-head{padding:10px 16px 8px;}
.le-pane-head input{height:36px;font-size:13px;}
.le-note{font-size:11.5px;line-height:1.5;margin:8px 0 0;}
.le-pane-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 16px;}
.le-pane-scroll.le-form{padding:12px 16px 20px;display:flex;flex-direction:column;gap:14px;}
.le-form .field label{margin:0 0 6px;font-size:12px;color:var(--muted);}
.le-form .le-note{margin:0;}
.le-gender{margin:4px 8px 14px;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;}
.le-gender-h{font-size:12.5px;font-weight:700;} .le-gender .le-note{margin:3px 0 8px;}
.le-gender-row{display:flex;gap:6px;}
.le-gender-row input{flex:1;min-width:0;height:32px;font-size:13px;padding:0 8px;}
.le-gender-row .btn{height:32px;padding:0 12px;}
.le-group{margin-bottom:12px;}
.le-group-h{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 8px 4px;}
.le-field{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:start;background:none;border:0;border-radius:8px;padding:7px 8px;cursor:pointer;color:var(--text);font-family:inherit;}
.le-field:hover{background:var(--chip-bg);}
.le-field[hidden]{display:none;}
.le-field-main{min-width:0;}
.le-field-label{display:block;font-size:13px;font-weight:600;unicode-bidi:plaintext;}
.le-field-tok{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.le-field-sample{unicode-bidi:plaintext;flex-shrink:0;max-width:110px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.le-none{padding:24px 8px;text-align:center;font-size:12.5px;}
.le-types{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.le-type{height:36px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;}
.le-type.is-active{border-color:var(--teal);background:var(--chip-bg);color:var(--chip-fg);}
.le-checks{display:flex;flex-direction:column;gap:8px;}
.le-checks label{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;}
.le-checks input{width:auto;height:auto;}
.le-ph{background:var(--sunk);border:1px dashed var(--border-2);border-radius:var(--r-md);padding:10px 12px;}
.le-ph-k{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px;}
.le-ph-v{font-size:12px;color:var(--chip-fg);word-break:break-all;}
.le-existing{display:flex;justify-content:space-between;width:100%;background:none;border:0;border-top:1px solid var(--divider);padding:8px 2px;cursor:pointer;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;}
.le-existing:hover{background:var(--sunk);}
@media (max-width:1100px){
  .le-main{flex-direction:column;}
  .le-panel{width:auto;max-height:none;border-inline-start:0;border-top:1px solid var(--border);}
  .le-stage{max-height:none;}
}

/* ---- [8] SIGN-IN + TWO-STEP VERIFICATION (tenant + console, from design_input/Login and 2FA/Glyo Login.dc.html) ----
   Split login (.au-split), full-page 2FA / step-up (.au-page) and the in-app step-up modal (.otp-modal). The six
   code boxes (.otp) are one component driven by app.js initOtp. Google / Microsoft / email-link sign-in from the
   design are intentionally not built. */
:root{
  --au-navy:#0e3b4d; --au-teal:#1ea896; --au-teal-hover:#178d7e; --au-mint:#6fd6ba;
  --au-panel-ink:#c9dcdc; --au-panel-sub:#9fcfc6; --au-ring:rgba(30,168,150,.16);
}
body.au{background:var(--surface);}
.au-split{display:flex;min-height:100vh;}
.au-brand{width:560px;flex-shrink:0;background:var(--au-navy);position:relative;overflow:hidden;padding:48px;
  display:flex;flex-direction:column;justify-content:space-between;color:#fff;}
.au-brand::before,.au-brand::after,.au-brand-orb{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.au-brand::before{width:640px;height:640px;border:1px solid rgba(111,214,186,.14);inset-inline-end:-300px;bottom:-260px;}
.au-brand::after{width:460px;height:460px;border:1px solid rgba(111,214,186,.2);inset-inline-end:-210px;bottom:-170px;}
.au-brand-orb{width:280px;height:280px;background:rgba(30,168,150,.16);inset-inline-end:-120px;bottom:-80px;}
.au-lockup{display:flex;align-items:center;gap:10px;position:relative;}
.au-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--au-teal),var(--au-mint));
  display:flex;align-items:center;justify-content:center;color:var(--au-navy);font-family:var(--font-display);font-weight:700;font-size:18px;flex-shrink:0;}
.au-lockup-name{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;}
.au-brand-body{position:relative;}
.au-eyebrow{color:var(--au-mint);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;}
.au-headline{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-.02em;margin:0;color:#fff;text-wrap:pretty;}
.au-headline-ar{font-family:var(--font-arabic);color:var(--au-panel-sub);font-size:22px;margin:14px 0 0;}
.au-copy{position:relative;color:var(--au-panel-sub);font-size:12.5px;opacity:.8;}
.au-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:32px 48px;background:var(--surface);}
.au-top{display:flex;justify-content:flex-end;align-items:center;gap:12px;}
.au-top-brand{display:none;align-items:center;gap:10px;margin-inline-end:auto;color:var(--text);}
.au-top-brand .au-mark{width:30px;height:30px;font-size:16px;}
.au-lang{font-family:var(--font-arabic);font-size:14px;font-weight:500;color:var(--text);border:1.5px solid var(--border);border-radius:9px;padding:5px 12px;}
.au-lang:hover{border-color:var(--au-teal);text-decoration:none;}
.au-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0;}
.au-form{width:380px;max-width:100%;display:flex;flex-direction:column;gap:20px;}
.au-form h1{font-family:var(--font-display);font-size:30px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;color:var(--text);}
.au-sub{font-size:14px;color:var(--muted);}
.au-host{font-family:var(--font-mono);font-size:12.5px;background:var(--sunk);border:1px solid var(--border);padding:2px 7px;border-radius:5px;color:var(--text);}
.au-field{display:flex;flex-direction:column;gap:7px;margin:0;}
.au-field>span{font-size:13px;font-weight:600;color:var(--text);}
.au-input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--border);border-radius:11px;font-size:14.5px;
  color:var(--text);background:var(--input-bg);outline:none;font-family:var(--font-body);}
.au-input:focus{border-color:var(--au-teal);box-shadow:0 0 0 3px var(--au-ring);}
.au-pw{position:relative;display:flex;}
.au-pw .au-input{padding-inline-end:68px;}
.au-pw-toggle{position:absolute;inset-inline-end:8px;top:8px;height:30px;padding:0 10px;border:0;border-radius:7px;background:var(--sunk);
  color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;}
.au-pw-toggle:hover{color:var(--text);}
.au-row{display:flex;justify-content:flex-end;align-items:center;font-size:13.5px;margin-top:-6px;}
.au-row a,.au-link{font-weight:600;color:var(--au-teal-hover);}
.au-btn{height:48px;width:100%;border:0;border-radius:11px;background:var(--au-teal);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--font-body);}
.au-btn:hover{background:var(--au-teal-hover);}
.au-btn:disabled{opacity:.6;cursor:not-allowed;}
.au-btn--ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border);}
.au-btn--ghost:hover{background:var(--surface);border-color:var(--au-teal);}
.au-help{text-align:center;font-size:12.5px;color:var(--muted);margin:0;}
.au-check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;user-select:none;margin:0;color:var(--text);}
.au-check input{width:18px;height:18px;margin:0;accent-color:var(--au-teal);flex-shrink:0;}

/* full-page two-step verification / step-up */
body.au-dots{background-color:var(--bg);background-image:radial-gradient(var(--border-2) 1px,transparent 1px);background-size:22px 22px;}
.au-page{min-height:100vh;display:flex;flex-direction:column;}
.au-page-top{display:flex;justify-content:space-between;align-items:center;padding:24px 36px;}
.au-page-top .au-mark{width:30px;height:30px;background:var(--au-navy);color:var(--au-mint);font-size:16px;}
.au-page-top .au-lockup-name{font-size:16px;color:var(--text);}
.au-page-back{font-size:13px;font-weight:600;color:var(--text);}
.au-page-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;}
.au-card{width:480px;max-width:100%;background:var(--surface);border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow-float);
  padding:40px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;}
.au-card h1{font-family:var(--font-display);font-size:26px;font-weight:700;margin:0 0 8px;color:var(--text);}
.au-card .au-sub{line-height:1.55;text-wrap:pretty;}
.au-card .au-sub b{color:var(--text);}
.au-card .au-check{align-self:flex-start;}
.au-card .au-btn{height:50px;border-radius:12px;}
.au-card-links{display:flex;justify-content:center;width:100%;font-size:13px;font-weight:600;}
.au-page-foot{text-align:center;padding:22px;font-size:12.5px;color:var(--muted);}

/* the six code boxes */
.otp{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;}
.otp-dots{width:60px;height:60px;border-radius:18px;background:var(--au-navy);display:grid;grid-template-columns:repeat(3,8px);gap:7px;align-content:center;justify-content:center;}
.otp-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .12s;}
.otp-dots span.is-on{background:var(--au-mint);}
.otp-boxes{display:flex;gap:10px;align-items:center;direction:ltr;}
.otp-box{width:56px;height:64px;padding:0;border-radius:13px;text-align:center;font-family:var(--font-mono);font-size:26px;font-weight:600;
  color:var(--text);border:1.5px solid var(--border);background:var(--input-bg);outline:none;caret-color:var(--au-teal);}
.otp-box:focus{border-color:var(--au-teal);box-shadow:0 0 0 4px var(--au-ring);}
.otp-box.is-filled{border-color:var(--au-teal);background:var(--chip-bg);}
.otp.is-error .otp-box{border-color:var(--red);background:var(--err-bg);}
.otp.is-error .otp-boxes{animation:otp-shake .3s;}
.otp-msg{min-height:20px;font-size:13.5px;font-weight:600;color:var(--err-text);margin:0;}
.otp-alt{width:100%;}
@keyframes otp-shake{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* step-up modal (opened by app.js initStepUpModal) */
.otp-modal .modal-card{width:460px;padding:28px;display:flex;flex-direction:column;gap:20px;border-radius:18px;}
.otp-modal-head{display:flex;justify-content:space-between;align-items:flex-start;}
.otp-modal .otp-dots{width:46px;height:46px;border-radius:14px;grid-template-columns:repeat(3,6px);gap:5px;background:var(--chip-bg);border:1px solid var(--chip-bd);}
.otp-modal .otp-dots span{width:6px;height:6px;background:var(--chip-bd);}
.otp-modal .otp-dots span.is-on{background:var(--au-teal);}
.otp-modal-x{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;}
.otp-modal-x:hover{background:var(--sunk);color:var(--text);}
.otp-modal h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin:0 0 6px;color:var(--text);}
.otp-modal .otp{gap:12px;}
.otp-modal .otp-box{width:52px;height:58px;font-size:24px;border-radius:12px;}
.otp-modal .otp-boxes{gap:8px;}
.otp-modal-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;}
.otp-modal-actions .au-btn{height:44px;font-size:14px;}

@media (max-width:900px){
  .au-brand{display:none;}
  .au-top-brand{display:flex;}
  .au-main{padding:24px 20px;}
}
@media (max-width:520px){
  .au-card{padding:28px 20px;}
  .otp-box{width:44px;height:54px;font-size:22px;border-radius:11px;}
  .otp-boxes{gap:7px;}
  .au-page-top{padding:18px 20px;}
}
.otp-form{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;}
.otp-form .au-btn{width:100%;}

/* ---- pack comparison (console "Compare with pack") ---- */
.diff-val{font-family:'JetBrains Mono',monospace;font-size:12px;word-break:break-word;max-width:320px;}
.diff-val.pack{color:var(--ok-text);}
.diff-val.mine{color:var(--text);}
.diff-note{font-size:12px;color:var(--muted);margin-top:4px;}
.diff-adopt-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:16px 0;}

/* phone field: country-prefix drop-down + number (macro phone_input) */
.phone-field{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:8px;align-items:center}
.phone-field .phone-cc{min-width:0}

/* ---- [7] EMPLOYEES V2 (design_input/Employees/Glyo Employees.dc.html) —
   list rows with avatar chips, section header + count chip, inline filter bar
   with a show-inactive switch, card-style org chart, import step list. ----- */
    .emp-section-head{display:flex;align-items:center;gap:8px;padding:16px 20px;border-bottom:1px solid var(--divider);}
    .emp-count{font-family:var(--font-mono);font-size:12px;color:var(--muted);background:var(--sunk);padding:2px 8px;border-radius:var(--r-sm);}
    .emp-cell{display:flex;align-items:center;gap:12px;min-width:0;color:var(--text);}
    .emp-cell:hover{text-decoration:none;}
    .emp-cell:hover .fw-strong{text-decoration:underline;}
    .emp-cell__names{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
    .emp-sort{color:inherit;}
    .emp-sort.on{color:var(--text);}
    .emp-chevron{font-size:18px;color:var(--muted);text-decoration:none;}
    .emp-chevron:hover{color:var(--text);text-decoration:none;}
    .emp-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;}
    .emp-filter__search{flex:1;min-width:240px;}
    .emp-filter__co{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);margin:0;}
    .emp-filter__sep{width:1px;height:24px;background:var(--border);}
    .emp-toggle{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--text);user-select:none;}
    .emp-toggle:hover{text-decoration:none;}
    .emp-toggle .g-switch{display:inline-block;}
    .emp-toggle[aria-checked="true"] .g-switch{background:var(--amber);border-color:var(--amber-edge);}
    .emp-toggle[aria-checked="true"] .g-switch::after{inset-inline-start:20px;}

    /* org chart — card nodes joined by connector lines */
    .org-chart{overflow-x:auto;padding:32px 24px;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:20px 20px;}
    .org-chart ul{list-style:none;margin:0;padding:0;}
    .org-chart .org-roots{display:flex;gap:56px;justify-content:center;align-items:flex-start;min-width:max-content;}
    .org-chart .org-roots > li{display:flex;flex-direction:column;align-items:center;}
    .org-chart .org-kids{display:flex;padding-top:24px;position:relative;}
    .org-chart .org-kids::before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:24px;background:var(--border-2);}
    .org-chart .org-kids > li{position:relative;padding:24px 12px 0;display:flex;flex-direction:column;align-items:center;}
    .org-chart .org-kids > li::before,.org-chart .org-kids > li::after{content:"";position:absolute;top:0;height:24px;width:50%;border-top:1.5px solid var(--border-2);}
    .org-chart .org-kids > li::before{inset-inline-end:50%;}
    .org-chart .org-kids > li::after{inset-inline-start:50%;border-inline-start:1.5px solid var(--border-2);}
    .org-chart .org-kids > li:first-child::before,.org-chart .org-kids > li:last-child::after{border-top-color:transparent;}
    .org-chart .org-kids > li:last-child::before{border-inline-end:1.5px solid var(--border-2);border-radius:0 6px 0 0;}
    .org-chart .org-kids > li:first-child::after{border-radius:6px 0 0 0;}
    .org-chart .org-kids > li:only-child::before{display:none;}
    .org-chart .org-kids > li:only-child::after{border-top:0;border-radius:0;}
    .org-card{width:220px;display:flex;gap:12px;align-items:center;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:14px;color:var(--text);position:relative;}
    .org-card:hover{border-color:var(--teal);text-decoration:none;}
    .org-card--root{box-shadow:var(--shadow-toast);}
    .org-card__body{flex:1;min-width:0;line-height:1.35;display:flex;flex-direction:column;}
    .org-card__name{font-weight:700;font-size:13.5px;}
    .org-card__sub{font-size:12px;color:var(--muted);}
    .org-card__code{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .org-dot{position:absolute;top:12px;inset-inline-end:12px;width:9px;height:9px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--border-2);}
    .org-dot--login{background:var(--teal);border-color:var(--teal);}
    .org-bar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
    .org-legend{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 14px;font-size:12.5px;font-weight:600;}
    .org-legend span{display:flex;align-items:center;gap:7px;}
    .org-legend .org-dot{position:static;}

    /* import — numbered steps card beside the upload form */
    .imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;}
    .imp-steps{display:flex;flex-direction:column;gap:18px;}
    .imp-step{display:flex;gap:14px;font-size:14px;line-height:1.5;}
    .imp-step .req,.imp-drop + .req{color:var(--red);}
    .imp-step__n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:12.5px;font-weight:600;flex-shrink:0;}
    .imp-step__body{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
    .imp-drop{display:block;border:1.5px dashed var(--border-2);background:var(--sunk);border-radius:var(--r-lg);padding:24px 16px;text-align:center;cursor:pointer;}
    .imp-drop:hover{border-color:var(--teal);}
    .imp-drop input{margin-top:10px;max-width:100%;}
    .emp-review{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;max-width:820px;}
    .emp-review__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
    .g-avatar--xl{width:60px;height:60px;border-radius:18px;font-size:20px;background:var(--navy);border-color:var(--navy);color:var(--mint);}
    .g-avatar--xl.g-avatar--off{background:var(--sunk);border:1px dashed var(--border-2);color:var(--muted);}
    .emp-head{display:flex;align-items:center;gap:18px;}
    .modal-card.g-drawer--form{padding:0;overflow:hidden;}
    .modal-card.g-drawer > form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;}

/* ---- [7] STATUTORY CONSOLE (Statutory design, from design_input/Statutory/
   Glyo Console Statutory.dc.html) — overview module cards, grouped rule
   tables, type chips, split layout with a preview aside, and the form
   pieces its side panels share. Edits happen in .g-drawer panels (see
   [6]); these classes only add what the existing g-* kit doesn't have. --- */
    .g-st-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
    .g-st-module{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s;}
    a.g-st-module:hover{border-color:var(--amber-edge);box-shadow:var(--shadow-toast);text-decoration:none;}
    .g-st-module.is-off{opacity:.6;}
    .g-st-module__head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--font-display);font-weight:600;font-size:15px;}
    .g-st-module__desc{font-size:12.5px;color:var(--muted);}
    .g-st-module__stat{font-family:var(--font-mono);font-size:11.5px;color:var(--ok-text);}
    .g-st-module.is-off .g-st-module__stat{color:var(--muted);}
    .g-st-sect{margin-top:22px;}
    .g-st-sect__head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
    .g-st-sect__head h2{margin:0;}
    .g-st-sect__note{font-size:12.5px;color:var(--muted);}
    .g-type{display:inline-block;font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--sunk);color:var(--muted);}
    .g-type--multiplier{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text);}
    .g-type--percent{background:var(--sunk);border-color:var(--border-2);color:var(--text);}
    .g-type--structured{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text);}
    .g-type--tiered{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-text);}
    .g-st-key{font-family:var(--font-mono);font-size:12.5px;}
    .g-st-val{font-size:13.5px;}
    .g-st-val.is-mono{font-family:var(--font-mono);font-size:12px;}
    .g-st-val.is-unset{color:var(--muted);}
    .g-st-unit{font-size:12px;color:var(--muted);}
    .g-st-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
    .g-st-split__aside{position:sticky;top:16px;}
    @media (max-width:980px){.g-st-split{grid-template-columns:1fr;}.g-st-split__aside{position:static;}}
    .g-st-code{margin:0;padding:14px 16px;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-lg);font-family:var(--font-mono);font-size:12px;overflow:auto;white-space:pre;}
    .g-st-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .g-st-sum__cell{padding:12px 14px;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-lg);}
    .g-st-sum__v{font-family:var(--font-mono);font-size:18px;font-weight:600;}
    .g-st-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--divider);font-size:12.5px;}
    .g-st-line:last-child{border-bottom:none;}
    .g-st-line .is-num{font-family:var(--font-mono);text-align:end;}
    .g-st-edit{display:flex;align-items:center;gap:8px;}
    .g-st-edit .g-input{width:160px;height:var(--h-md);}
    tr.is-edited{background:var(--ok-bg);}
    tr.is-edited:hover{background:var(--ok-bg);}
    .g-st-was{font-size:11.5px;color:var(--muted);}
    .g-st-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);margin-bottom:12px;}
    .g-st-bar .g-input,.g-st-bar .g-select{width:auto;min-width:150px;}
    .g-st-bar__count{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
    .g-st-bar__count.is-live{color:var(--ok-text);}
    .g-st-chips{display:flex;gap:6px;flex-wrap:wrap;}
    .g-st-diff{font-family:var(--font-mono);font-size:12px;word-break:break-word;max-width:320px;}
    .g-st-diff.is-pack{color:var(--ok-text);}
    .g-st-tier{display:grid;grid-template-columns:auto 1fr auto 1fr auto auto;gap:8px;align-items:center;margin-bottom:8px;}
    .g-st-tier__n{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .g-st-bar__actions{display:flex;gap:8px;margin-inline-start:auto;flex-wrap:wrap;}
    .g-st-check{display:flex;align-items:center;gap:8px;font-size:13.5px;}
    /* visual editor for structured rules (rule_editor.js; schemas in modules/statutory/rule_schema.py) */
    .modal-card.g-drawer.g-drawer--wide{width:min(780px,100vw);max-width:min(780px,100vw);}
    .g-re-tabs{display:flex;gap:6px;margin-bottom:12px;}
    .g-re-err{padding:10px 12px;margin-bottom:12px;border:1px solid var(--err-border);background:var(--err-bg);color:var(--err-text);border-radius:var(--r-lg);font-size:13px;}
    .g-re-err__line+.g-re-err__line{margin-top:4px;}
    .g-re-obj{display:flex;flex-direction:column;gap:10px;min-width:0;}
    .g-re-obj:not(.is-top){padding:12px 14px;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-lg);}
    .g-re-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
    .g-re-field{position:relative;min-width:0;}
    .g-re-field.is-wide{grid-column:1/-1;}
    .g-re-field__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
    .g-re-field__head .g-label{margin-bottom:0;}
    .g-re-sub{font-size:13px;font-weight:700;color:var(--text);}
    .g-re-help{margin:0 0 4px;}
    .g-re-num{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .g-re-num__in{width:110px;}
    .g-re-time{width:88px;}
    .g-re-unit{font-size:12px;color:var(--muted);}
    .g-re-null{font-size:12.5px;color:var(--muted);}
    .g-re-multi{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;}
    .g-re-chips{display:flex;flex-wrap:wrap;gap:6px;}
    .g-re-code{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .g-re-x{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;}
    .g-re-x:hover{border-color:var(--err-text);color:var(--err-text);}
    .g-re-x--float{position:absolute;inset-block-start:0;inset-inline-end:0;}
    .g-re-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .g-re-add__in{width:150px;}
    .g-re-add .xctl,.g-re-add .g-select{width:auto;min-width:200px;max-width:100%;}
    .g-re-rows,.g-re-map{display:flex;flex-direction:column;gap:8px;min-width:0;}
    .g-re-rows__foot{margin-top:2px;}
    .g-re-table-wrap{overflow-x:auto;}
    .g-re-table{width:100%;border-collapse:collapse;}
    .g-re-table th{padding:0 6px 6px;text-align:start;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;white-space:nowrap;}
    .g-re-table td{padding:4px 6px;vertical-align:middle;}
    .g-re-table td .g-re-num__in{width:96px;}
    .g-re-acts{display:flex;gap:4px;justify-content:flex-end;}
    .g-re-act{height:var(--h-sm);padding:0 9px;}
    .g-re-card{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);}
    .g-re-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
    .g-re-card__n{font-family:var(--font-mono);font-size:11px;color:var(--muted);}
    .g-re-entry{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);}
    .g-re-entry__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
    .g-re-entry__head .g-re-x{margin-inline-start:auto;}
    .g-re-json__msg{min-height:18px;margin-top:4px;color:var(--err-text);}
    .g-input.is-invalid{border-color:var(--err-text);}
    .g-re-summary{padding:12px 16px;}
    .g-re-summary__line{font-size:13.5px;padding:3px 0;}
    .g-re-raw{margin-top:8px;}
    .g-re-raw summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:6px;}
    @media (max-width:640px){.g-re-grid{grid-template-columns:1fr;}}
    progress.g-st-prog{display:block;appearance:none;-webkit-appearance:none;border:0;height:4px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;margin-top:4px;width:90px;}
    progress.g-st-prog::-webkit-progress-bar{background:var(--border);}
    progress.g-st-prog::-webkit-progress-value{background:var(--amber);}
    progress.g-st-prog::-moz-progress-bar{background:var(--amber);}
    .g-st-jur{display:flex;align-items:center;gap:8px;margin:0;}
    .g-st-jur .g-select{width:auto;min-width:180px;height:var(--h-md);}
    .g-st-narrow{max-width:560px;}
    .g-st-bar__hint{flex-basis:100%;}

/* company_employee_picker: its two fields lay out as direct children of the surrounding form grid / row */
[data-company-picker]{display:contents}

/* ---- [5] SCREEN LOCK + KEYBOARD SHORTCUTS --------------------------------
   The lock overlay (templates/_screen_lock.html, js/screen_lock.js): a macOS / Windows-style
   login card over a blurred branded wall. While html.sl-locked the page underneath is hidden and
   inert but stays mounted, so unsaved form input survives. Shortcut cheat sheet: _shortcuts.html. */
.acct-menu-pop .acct-menu-item{display:block;width:100%;text-align:start;padding:10px 14px;font:inherit;font-size:13px;
  color:var(--text);background:transparent;border:0;cursor:pointer;}
.acct-menu-pop .acct-menu-item:hover,.acct-menu-pop a:hover{background:var(--sunk);}

/* Lock-screen tokens: the overlay sits over a photo, so it is theme-independent (same in light / dark). */
:root{--sl-bg:#071c25;--sl-fg:#fff;--sl-fg-2:rgba(255,255,255,.82);--sl-fg-3:rgba(255,255,255,.64);
  --sl-glass:rgba(8,30,40,.28);--sl-glass-card:rgba(10,36,48,.42);--sl-line:rgba(255,255,255,.16);
  --sl-key:rgba(255,255,255,.14);--sl-key-hover:rgba(255,255,255,.26);--sl-key-down:rgba(255,255,255,.4);
  --sl-field:rgba(255,255,255,.14);--sl-field-line:rgba(255,255,255,.22);--sl-accent:#1ea896;--sl-accent-2:#6fd6ba;
  --sl-accent-hover:#178d7e;--sl-ink:#0e3b4d;--sl-err:#ffb4a8;--sl-err-bg:rgba(255,180,168,.18);
  --sl-shadow:0 30px 80px rgba(0,0,0,.35);}

html.sl-locked,html.sl-locked body{overflow:hidden;}
html.sl-locked body > *:not(#sl-root){visibility:hidden;}
.sl-root{position:fixed;inset:0;z-index:9000;overflow:hidden;color:var(--sl-fg);background:var(--sl-bg);cursor:pointer;
  font-family:var(--font-body);user-select:none;-webkit-user-select:none;
  opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.6,0,.4,1);}
.sl-root[data-stage="auth"]{cursor:default;}
.sl-root[hidden]{display:none !important;}
.sl-root.is-leaving{opacity:0;transform:translateY(-3%);}
@keyframes sl-fadein{from{opacity:0}to{opacity:1}}
.sl-root:not([hidden]){animation:sl-fadein .45s ease;}

/* photo layer */
.sl-slides{position:absolute;inset:0;overflow:hidden;transition:filter .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);}
.sl-root[data-stage="auth"] .sl-slides{filter:blur(16px) saturate(1.15);transform:scale(1.06);}
.sl-slide{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease;
  animation:sl-kb0 20s ease-in-out infinite alternate;}
.sl-slide.is-alt{animation-name:sl-kb1;}
.sl-slide.is-on{opacity:1;}
@keyframes sl-kb0{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2.5%,-1.5%)}}
@keyframes sl-kb1{from{transform:scale(1.12) translate(2%,1%)}to{transform:scale(1) translate(0,0)}}
/* built-in scenes when a country has no photos */
.sl-scene-0{background:radial-gradient(circle at 68% 61%,#fff3d6 0 2.2%,rgba(255,205,150,.75) 3.2%,rgba(255,170,120,.25) 12%,transparent 30%),
  linear-gradient(180deg,transparent 62%,#2a5266 62.3%,#163a4b 75%,#0b2533 100%),
  linear-gradient(180deg,#0b2638 0%,#23506a 28%,#6d8fa0 46%,#d9a07c 58%,#f2c08f 62%);}
.sl-scene-1{background:radial-gradient(ellipse 120% 34% at 55% 112%,#5d2a14 60%,transparent 60.4%),
  radial-gradient(ellipse 75% 40% at 14% 98%,#b2602e 60%,transparent 60.4%),
  radial-gradient(ellipse 90% 30% at 50% 92%,#cf8248 60%,transparent 60.4%),
  radial-gradient(circle at 38% 44%,#fff6e2 0 3%,rgba(255,230,190,.5) 6%,transparent 26%),
  linear-gradient(180deg,#5e7f98 0%,#c9a98e 40%,#f0c793 62%,#f4b47a 80%);}
.sl-scene-2{background:radial-gradient(circle at 74% 30%,#f3f6f2 0 2.4%,rgba(230,240,240,.25) 4%,transparent 16%),
  radial-gradient(ellipse 40% 26% at 10% 70%,#08131f 60%,transparent 60.5%),
  linear-gradient(180deg,transparent 66%,#0c2131 66.2%,#06121c 100%),
  linear-gradient(180deg,#030a14 0%,#0a1f36 40%,#17405a 66%);}
.sl-shade{position:absolute;inset:0;pointer-events:none;transition:background .6s;
  background:linear-gradient(180deg,rgba(4,18,26,.45) 0%,rgba(4,18,26,0) 22%,rgba(4,18,26,0) 50%,rgba(4,18,26,.72) 100%);}
.sl-root[data-stage="auth"] .sl-shade{background:rgba(4,18,26,.55);}

/* top bar: brand + slide caption */
.sl-top{position:absolute;top:28px;inset-inline:36px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.sl-brand{display:flex;align-items:center;gap:12px;}
.sl-brand .brand-badge{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--sl-accent),var(--sl-accent-2));color:var(--sl-ink);}
.sl-logo{height:32px;width:auto;max-width:140px;object-fit:contain;}
.sl-brand-text{display:flex;flex-direction:column;gap:2px;}
.sl-product{font-family:var(--font-display);font-weight:700;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.3);}
.sl-scope{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sl-fg-2);}
.sl-caption{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:end;}
.sl-caption-title{font-family:var(--font-display);font-weight:600;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.35);}
.sl-caption-place{font-size:12px;color:var(--sl-fg-3);}
.sl-progress{display:flex;gap:5px;margin-top:6px;}
.sl-bar{width:26px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;cursor:pointer;}
.sl-bar.is-done .sl-bar-fill{width:100%;}
.sl-bar-fill{display:block;height:100%;width:0;background:var(--sl-fg);}
.sl-bar-fill.is-run{animation:sl-fill 9s linear forwards;}
@keyframes sl-fill{from{width:0}to{width:100%}}

/* idle stage: big clock + weather */
.sl-corners{position:absolute;inset-inline:44px;bottom:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  pointer-events:none;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);}
.sl-root[data-stage="auth"] .sl-corners{opacity:0;transform:translateY(24px);}
.sl-time{display:flex;flex-direction:column;gap:6px;}
.sl-clock-row{display:flex;align-items:flex-start;gap:10px;line-height:.86;direction:ltr;}
.sl-clock{font-family:var(--font-display);font-weight:300;font-size:clamp(96px,13vw,188px);letter-spacing:-.045em;
  text-shadow:0 4px 40px rgba(0,0,0,.25);font-variant-numeric:tabular-nums;}
.sl-ampm{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.8vw,26px);margin-top:.5em;opacity:.85;}
.sl-date{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.7vw,26px);padding-inline-start:6px;text-shadow:0 1px 12px rgba(0,0,0,.35);}
.sl-hijri{display:flex;gap:14px;align-items:baseline;padding-inline-start:6px;font-size:14px;color:var(--sl-fg-2);flex-wrap:wrap;}
.sl-hijri [dir="rtl"]{font-family:'IBM Plex Sans Arabic',var(--font-body),sans-serif;}
.sl-weather{display:flex;align-items:center;gap:22px;padding:18px 22px;border-radius:20px;background:var(--sl-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);}
.sl-weather[hidden]{display:none;}
.sl-wicon{position:relative;width:52px;height:52px;flex-shrink:0;}
.sl-wicon.is-sun::before{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff1c9,#ffc65c);box-shadow:0 0 28px 6px rgba(255,198,92,.55);}
.sl-wicon.is-moon::before{content:"";position:absolute;inset:9px;border-radius:50%;box-shadow:inset -10px -4px 0 0 #eef3f5,0 0 24px rgba(220,235,240,.25);}
.sl-wicon.is-cloud::before{content:"";position:absolute;inset-inline-start:2px;top:20px;width:30px;height:22px;border-radius:12px;background:rgba(240,246,248,.92);box-shadow:12px -10px 0 0 rgba(240,246,248,.96),24px 2px 0 -2px rgba(240,246,248,.92);}
.sl-wtemp{display:flex;align-items:flex-start;gap:2px;font-family:var(--font-display);font-weight:300;font-size:54px;line-height:1;letter-spacing:-.03em;direction:ltr;}
.sl-wtemp small{font-weight:500;font-size:20px;margin-top:4px;}
.sl-wtext{display:flex;flex-direction:column;gap:4px;min-width:150px;}
.sl-wtext strong{font-family:var(--font-display);font-weight:700;font-size:16px;}
.sl-wtext > span{font-size:13px;color:var(--sl-fg-2);}
.sl-wextra{font-family:var(--font-mono);font-size:12px !important;color:var(--sl-fg-3) !important;}
.sl-hint{position:absolute;inset-inline-start:50%;bottom:44px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:13px;
  color:var(--sl-fg-2);animation:sl-breathe 3.2s ease-in-out infinite;pointer-events:none;white-space:nowrap;}
[dir="rtl"] .sl-hint{transform:translateX(50%);}
.sl-hint-dot{width:6px;height:6px;border-radius:50%;background:var(--sl-accent-2);}
@keyframes sl-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.sl-root[data-stage="auth"] .sl-hint{display:none;}

/* auth stage: small clock + unlock card */
.sl-auth{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:60px 20px 40px;box-sizing:border-box;}
.sl-root[data-stage="auth"] .sl-auth{display:flex;}
.sl-mini{text-align:center;animation:sl-rise .45s cubic-bezier(.2,.8,.2,1);direction:ltr;}
.sl-mini-time{font-family:var(--font-display);font-weight:300;font-size:64px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;}
.sl-mini-time small{font-size:20px;font-weight:500;margin-inline-start:6px;letter-spacing:0;}
.sl-mini-date{font-size:14px;color:var(--sl-fg-2);margin-top:8px;}
.sl-card{width:min(360px,100%);box-sizing:border-box;padding:28px 28px 22px;border-radius:26px;background:var(--sl-glass-card);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);border:1px solid var(--sl-line);
  box-shadow:var(--sl-shadow);cursor:default;animation:sl-rise .5s cubic-bezier(.2,.8,.2,1);}
@keyframes sl-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.sl-card.sl-shake{animation:sl-shake .42s ease;}
@keyframes sl-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.sl-panel{display:flex;flex-direction:column;align-items:center;gap:14px;}
.sl-panel[hidden]{display:none;}
.sl-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--sl-accent),var(--sl-accent-2));color:var(--sl-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:26px;box-shadow:0 0 0 4px rgba(255,255,255,.14);}
.sl-who{text-align:center;}
.sl-name{font-family:var(--font-display);font-weight:700;font-size:19px;overflow-wrap:anywhere;}
.sl-who-scope{font-size:12.5px;color:var(--sl-fg-3);margin-top:2px;}
.sl-form{width:100%;display:flex;flex-direction:column;align-items:center;}
.sl-method{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;}
.sl-method[hidden]{display:none;}
.sl-dots{display:flex;gap:12px;height:16px;align-items:center;}
.sl-dots span{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);transition:background .12s;}
.sl-dots span.is-on{background:var(--sl-fg);}
.sl-keypad{display:grid;grid-template-columns:repeat(3,64px);gap:12px 18px;direction:ltr;}
.sl-key{width:64px;height:64px;border-radius:50%;border:0;background:var(--sl-key);color:var(--sl-fg);font-family:var(--font-display);font-weight:500;font-size:26px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.sl-key:hover{background:var(--sl-key-hover);}
.sl-key:active{background:var(--sl-key-down);}
.sl-key-aux{background:transparent;font-size:20px;}
.sl-key-go{font-size:20px;background:var(--sl-accent);}
.sl-key-go:hover{background:var(--sl-accent-hover);}
.sl-key-go[disabled]{background:rgba(255,255,255,.08);cursor:default;}
.sl-pwbox{position:relative;flex-direction:row;height:46px;padding:0 6px 0 16px;border-radius:14px;background:var(--sl-field);border:1px solid var(--sl-field-line);box-sizing:border-box;gap:8px;}
[dir="rtl"] .sl-pwbox{padding:0 16px 0 6px;}
.sl-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--sl-fg);font:inherit;font-size:15px;height:100%;}
.sl-input::placeholder{color:var(--sl-fg-3);}
.sl-go{width:34px;height:34px;border-radius:10px;border:0;background:var(--sl-accent);color:var(--sl-fg);font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0;}
.sl-go:hover{background:var(--sl-accent-hover);}
[dir="rtl"] .sl-go{transform:scaleX(-1);}
.sl-msg{min-height:18px;font-size:13px;font-weight:600;color:var(--sl-err);text-align:center;}
.sl-links{display:flex;justify-content:space-between;width:100%;font-size:12.5px;gap:12px;}
.sl-links a{color:var(--sl-fg-2);font-weight:600;}
.sl-links a:hover{color:var(--sl-fg);}
.sl-links .sl-switch{margin-inline-start:auto;}
.sl-out{text-align:center;padding:8px 0;gap:12px;}
.sl-out-mark{width:56px;height:56px;border-radius:50%;background:var(--sl-err-bg);color:var(--sl-err);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:24px;}
.sl-out-title{font-family:var(--font-display);font-weight:800;font-size:19px;}
.sl-out p{margin:0;font-size:13px;color:var(--sl-fg-2);line-height:1.5;}
.sl-out-go{margin-top:6px;height:42px;padding:0 22px;border-radius:12px;background:var(--sl-accent);color:var(--sl-fg);font-weight:700;font-size:14px;display:flex;align-items:center;}
.sl-out-go:hover{background:var(--sl-accent-hover);color:var(--sl-fg);text-decoration:none;}
@media (max-width:720px){
  .sl-top{inset-inline:20px;top:18px;}
  .sl-corners{inset-inline:22px;bottom:70px;}
  .sl-weather{padding:12px 16px;gap:14px;}
  .sl-wtemp{font-size:40px;}
  .sl-wtext{min-width:0;}
}
@media (prefers-reduced-motion:reduce){.sl-slide,.sl-card,.sl-card.sl-shake,.sl-mini,.sl-hint,.sl-root:not([hidden]){animation:none;}}

.kbd-card{width:440px;}
.kbd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.kbd-head h2{margin:0;}
.kbd-list{margin:0;padding:0;}
.kbd-list dt,.kbd-list dd{margin:0;}
.kbd-list .kbd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--divider);font-size:13.5px;}
.kbd-list .kbd-row:last-child{border-bottom:0;}
.kbd-list kbd,.kbd-key{font-family:var(--font-mono);font-size:12px;font-weight:500;padding:3px 9px;border-radius:var(--r-sm);
  background:var(--sunk);border:1px solid var(--border-2);border-bottom-width:2px;color:var(--text);white-space:nowrap;direction:ltr;unicode-bidi:isolate;}
.kbd-note{margin:12px 0 0;font-size:12.5px;}

/* ---- [6] GLOBAL SEARCH ----------------------------------------------------
   Palette (templates/_search_palette.html, js/search.js) + the /search results page. */
/* top bar (templates/_topbar.html): breadcrumb | search field | tools + account */
.topbar{position:sticky;top:0;z-index:300;height:64px;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:minmax(80px,1fr) minmax(220px,640px) auto;align-items:center;gap:16px;padding:0 24px;}
.topbar-lead{display:flex;align-items:center;gap:12px;min-width:0;}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;}
.crumbs-section{color:var(--muted);font-weight:500;}
.crumbs-sep{color:var(--border-2);}
.crumbs-page{font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.topbar-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.tb-icon{width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.tb-icon:hover{background:var(--sunk);color:var(--text);}
.tb-icon-text{font-family:var(--font-display);font-weight:800;font-size:15px;}
.tb-icon[data-search-open]{display:none;}
.acct-menu-btn{display:flex;align-items:center;gap:9px;background:transparent;border:0;cursor:pointer;color:var(--text);padding:4px 6px;border-radius:10px;font:inherit;}
.acct-menu-btn:hover{background:var(--sunk);}
.tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;flex-shrink:0;}
.tb-who{display:flex;flex-direction:column;line-height:1.25;text-align:start;white-space:nowrap;max-width:180px;}
.tb-who-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.tb-who-sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;}
.tb-caret{font-size:11px;color:var(--muted);}
.acct-menu-pop{width:240px;padding:6px;border-radius:12px;top:calc(100% + 8px);}
.acct-menu-pop a,.acct-menu-pop .acct-menu-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;}
.acct-menu-pop a.bordered{border-top:0;margin-top:4px;position:relative;}
.acct-menu-pop a.bordered::before{content:"";position:absolute;top:-3px;inset-inline:6px;height:1px;background:var(--border);}
.acct-menu-pop .acct-out{color:var(--err-text);}
.acct-menu-pop .acct-out:hover{background:var(--err-bg);}
.acct-menu-pop .acct-lang-block{border-top:0;padding:8px 10px 2px;margin-top:4px;position:relative;}
.acct-menu-pop .acct-lang-block::before{content:"";position:absolute;top:-3px;inset-inline:6px;height:1px;background:var(--border);}
.acct-menu-pop .kbd-key{font-size:11px;padding:1px 6px;}

/* mega search */
.tb-search{position:relative;min-width:0;}
.tb-field{display:flex;align-items:center;gap:10px;height:42px;box-sizing:border-box;padding:0 8px 0 14px;border:1.5px solid var(--border);border-radius:12px;
  background:var(--sunk);transition:border-color .15s,box-shadow .15s,background .15s;}
.tb-search.is-open .tb-field{border-color:var(--teal);background:var(--surface);box-shadow:var(--focus-ring);}
.tb-field svg{flex-shrink:0;stroke:var(--muted);}
.srch-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:14px;height:100%;}
.srch-input::-webkit-search-cancel-button{display:none;}
.tb-clear{border:0;background:var(--sunk);color:var(--muted);border-radius:6px;font-size:11.5px;font-weight:600;padding:3px 8px;cursor:pointer;}
.tb-search.is-open .tb-clear{background:var(--divider);}
.tb-field .kbd-key{font-size:11px;padding:1px 7px;border-bottom-width:1px;}
.tb-pop{position:absolute;inset-inline:-40px;top:52px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-modal);
  overflow:hidden;z-index:320;animation:tb-drop .14s ease-out;}
.tb-pop[hidden]{display:none;}
@keyframes tb-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tb-scrim{position:fixed;inset:64px 0 0 0;background:var(--overlay);opacity:.5;z-index:299;}   /* under the top bar (300), which holds the results panel */
.tb-scrim[hidden]{display:none;}
.tb-chips{display:flex;gap:6px;padding:12px 14px 10px;border-bottom:1px solid var(--divider);flex-wrap:wrap;}
.tb-chips:empty{display:none;}
.tb-chip{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.tb-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.tb-chip-n{font-family:var(--font-mono);font-size:10.5px;opacity:.7;}
.srch-list{overflow-y:auto;padding:8px;min-height:0;max-height:min(460px,60vh);}
.srch-grp{padding:10px 12px 6px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);}
.srch-item,.srch-hit{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;color:var(--text);text-decoration:none;}
.srch-item:hover,.srch-item.is-active,.srch-hit:hover{background:var(--sunk);color:var(--text);text-decoration:none;}
.srch-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--sunk);color:var(--text);
  font-family:var(--font-display);font-weight:800;font-size:11.5px;}
.srch-ico-action{background:var(--ok-bg);color:var(--ok-text);}
.srch-enter{font-family:var(--font-mono);font-size:11px;color:var(--teal);font-weight:600;visibility:hidden;}
.srch-item.is-active .srch-enter{visibility:visible;}
.srch-item-main,.srch-hit-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.srch-item-title,.srch-hit-title{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.srch-item-sub,.srch-hit-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.srch-empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:13.5px;}
.srch-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--divider);
  font-size:12px;color:var(--muted);background:var(--sunk);flex-wrap:wrap;}
.srch-keys{display:flex;gap:6px 14px;flex-wrap:wrap;}
.srch-keys kbd{font-family:var(--font-mono);font-size:11px;}
.srch-all{font-weight:700;}
@media (max-width:860px){
  .topbar{grid-template-columns:minmax(40px,1fr) auto;padding:0 14px;gap:8px;}
  .tb-search{display:none;}
  .tb-icon[data-search-open]{display:flex;}
  .tb-who,.tb-caret{display:none;}
  .crumbs-section,.crumbs-sep{display:none;}
}
.srch-bar{display:flex;gap:10px;margin-bottom:18px;max-width:720px;}
.srch-bar .g-input{flex:1;}
.srch-hit{border-top:1px solid var(--divider);border-radius:0;}
.srch-hit:first-child{border-top:0;}

/* ---- [5] CONSOLE TENANTS (admin_console/tenants) -------------------------------------------
   List, detail, create and clear-leaves screens. Tokens only (light / dark / RTL safe). */
.ct-stack{display:flex;flex-direction:column;gap:18px;}
.ct-lead{color:var(--muted);font-size:13.5px;margin:0;}
.ct-back{font-size:13px;font-weight:600;display:inline-block;margin-bottom:10px;}
.ct-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ct-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;border:1.5px solid var(--border);color:var(--text);font-size:13px;font-weight:600;background:transparent;}
.ct-chip:hover{border-color:var(--navy);text-decoration:none;color:var(--text);}
.ct-chip.is-on{border-color:var(--navy);background:var(--surface);}
.ct-chip .n{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.ct-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.ct-dot.active{background:var(--ok-text);} .ct-dot.provisioning{background:var(--info-text);}
.ct-dot.error,.ct-dot.expired{background:var(--err-text);} .ct-dot.suspended{background:var(--amber-edge);}
.ct-search{display:flex;gap:8px;margin-inline-start:auto;}
.ct-search input{height:34px;min-width:280px;}
.ct-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow-x:auto;}
.ct-row{display:grid;grid-template-columns:minmax(200px,1.6fr) 190px 80px 110px 130px 140px 24px;gap:14px;padding:14px 20px;border-bottom:1px solid var(--divider);align-items:center;font-size:13.5px;min-width:860px;color:var(--text);}
a.ct-row:hover{background:var(--sunk);text-decoration:none;color:var(--text);}
.ct-row.head{padding:11px 20px;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.ct-row:last-child{border-bottom:0;}
.ct-who{display:flex;align-items:center;gap:12px;min-width:0;}
.ct-avatar{width:34px;height:34px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;flex-shrink:0;}
.ct-who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-who small,.ct-mono{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.ct-statuscell{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;}
.ct-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px 3px 8px;border-radius:var(--r-pill);background:var(--info-bg);color:var(--info-text);}
.ct-pill.active{background:var(--ok-bg);color:var(--ok-text);} .ct-pill.suspended{background:var(--warn-bg);color:var(--warn-text);}
.ct-pill.error,.ct-pill.expired{background:var(--err-bg);color:var(--err-text);}
.ct-pill.lg{font-size:12.5px;padding:4px 11px 4px 9px;}
.ct-note{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ct-note.err{color:var(--err-text);}
.ct-cc{font-family:var(--font-mono);font-size:11.5px;font-weight:600;background:var(--bg);padding:2px 7px;border-radius:5px;}
.ct-muted{color:var(--muted);} .ct-chev{color:var(--border-2);font-size:16px;}
.ct-empty{padding:44px 20px;text-align:center;} .ct-empty b{display:block;font-family:var(--font-display);margin-bottom:4px;}
/* detail */
.ct-subline{font-size:13.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.ct-banner{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-xl);flex-wrap:wrap;border:1px solid var(--info-border);background:var(--info-bg);}
.ct-banner.error{border-color:var(--err-border);background:var(--err-bg);} .ct-banner.warn{border-color:var(--warn-border);background:var(--warn-bg);}
.ct-banner .ic{width:34px;height:34px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.ct-banner .tx{flex:1;min-width:240px;} .ct-banner .tx b{display:block;font-size:14px;} .ct-banner .tx span{font-size:13px;color:var(--muted);line-height:1.45;}
.ct-setup{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:6px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px;}
.ct-setup>div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);}
.ct-setup>div.next{background:var(--sunk);} .ct-setup>div.fail{background:var(--err-bg);}
.ct-setup b{display:block;font-size:13px;font-weight:600;} .ct-setup small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-setup .fail small{color:var(--err-text);}
.ct-mark{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0;}
.ct-mark.ok{background:var(--ok-text);border-color:var(--ok-text);color:var(--surface);}
.ct-mark.fail{background:var(--err-text);border-color:var(--err-text);color:var(--surface);}
.ct-mark.next{border-color:var(--navy);color:var(--text);background:var(--surface);}
.ct-cols{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;}
.ct-main{flex:1.6 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px;}
.ct-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px;}
.ct-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.ct-sec.danger{border-color:var(--err-border);}
.ct-sec-head{padding:16px 20px;border-bottom:1px solid var(--divider);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.ct-sec-head h2{font-size:16px;margin:0;} .ct-sec-head p{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.5;}
.ct-sec-body{padding:18px 20px;display:flex;flex-direction:column;gap:16px;}
.ct-sec-foot{padding:10px 20px;border-top:1px solid var(--divider);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.ct-danger-label{padding:14px 20px;border-bottom:1px solid var(--divider);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--err-text);letter-spacing:.08em;text-transform:uppercase;}
.ct-danger-row{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--divider);}
.ct-danger-row:last-child{border-bottom:0;} .ct-danger-row>div{flex:1;min-width:180px;}
.ct-danger-row b{font-size:13.5px;} .ct-danger-row p{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.45;}
.ct-pipe{padding:8px 0;}
.ct-pipe-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;padding:9px 20px;align-items:start;}
.ct-pipe-row .mk{width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);}
.ct-pipe-row.ok .mk{background:var(--ok-text);border-color:var(--ok-text);color:var(--surface);}
.ct-pipe-row.fail .mk{background:var(--err-text);border-color:var(--err-text);color:var(--surface);}
.ct-pipe-row .nm{font-size:13.5px;font-weight:600;} .ct-pipe-row.pending .nm{color:var(--muted);}
.ct-pipe-row .key{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-inline-start:10px;}
.ct-pipe-row .msg{display:block;font-size:12.5px;color:var(--muted);} .ct-pipe-row.fail .msg{color:var(--err-text);}
.ct-pipe-row .counts{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
.ct-pipe-row .counts span{font-family:var(--font-mono);font-size:11px;background:var(--bg);color:var(--muted);padding:2px 7px;border-radius:5px;}
.ct-pipe-row .counts b{color:var(--text);}
.ct-pipe-row .when{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.ct-pager{display:flex;align-items:center;gap:4px;}
.ct-pager a{min-width:32px;height:32px;padding:0 6px;border-radius:8px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text);}
.ct-pager a.is-on{background:var(--navy);border-color:var(--navy);color:#fff;} .ct-pager a:hover{text-decoration:none;border-color:var(--navy);}
.ct-pager a[aria-disabled="true"]{opacity:.4;pointer-events:none;}
.ct-seg{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border-radius:var(--r-md);align-self:flex-start;flex-wrap:wrap;}
.ct-seg label{margin:0;cursor:pointer;} .ct-seg input{position:absolute;opacity:0;pointer-events:none;}
.ct-seg span{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text);}
.ct-seg input:checked+span{background:var(--surface);box-shadow:0 1px 3px rgba(5,31,41,.15);}
.ct-seg input:focus-visible+span{box-shadow:var(--focus-ring);}
.ct-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.ct-fields label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;min-width:0;margin:0;}
.ct-fields input{font-family:var(--font-mono);font-size:13px;}
.ct-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .ct-actions .hint{font-size:12.5px;color:var(--muted);}
.ct-meter{width:100%;height:8px;border-radius:4px;border:0;background:var(--bg);overflow:hidden;appearance:none;-webkit-appearance:none;}
.ct-meter::-webkit-progress-bar{background:var(--bg);} .ct-meter::-webkit-progress-value{background:var(--ok-text);border-radius:4px;}
.ct-meter::-moz-progress-bar{background:var(--ok-text);border-radius:4px;}
.ct-meter.l80::-webkit-progress-value{background:var(--amber-edge);} .ct-meter.l80::-moz-progress-bar{background:var(--amber-edge);}
.ct-meter.l90::-webkit-progress-value,.ct-meter.l95::-webkit-progress-value,.ct-meter.l100::-webkit-progress-value{background:var(--err-text);}
.ct-meter.l90::-moz-progress-bar,.ct-meter.l95::-moz-progress-bar,.ct-meter.l100::-moz-progress-bar{background:var(--err-text);}
.ct-usage{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-top:6px;flex-wrap:wrap;}
.ct-usage b{color:var(--text);font-family:var(--font-mono);font-weight:600;}
.ct-subname{display:flex;justify-content:space-between;align-items:baseline;gap:10px;} .ct-subname b{font-family:var(--font-display);font-size:22px;}
.ct-dates{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.ct-caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--divider);border:1px solid var(--divider);border-radius:var(--r-md);overflow:hidden;}
.ct-caps>div{background:var(--surface);padding:10px 12px;} .ct-caps small{display:block;font-size:11.5px;color:var(--muted);}
.ct-caps b{display:block;font-family:var(--font-mono);font-size:14px;font-weight:600;margin-top:2px;}
.ct-dashed{padding:14px;border-radius:var(--r-md);border:1.5px dashed var(--border);font-size:13px;color:var(--muted);text-align:center;}
.ct-warnbox{font-size:12.5px;color:var(--warn-text);background:var(--warn-bg);padding:8px 10px;border-radius:8px;}
.ct-errbox{font-size:12.5px;color:var(--err-text);background:var(--err-bg);padding:8px 10px;border-radius:8px;}
.ct-inline{display:flex;gap:8px;} .ct-inline select{flex:1;min-width:0;}
/* create + clear */
.ct-slugbox{display:flex;align-items:center;border-radius:9px;border:1.5px solid var(--border);overflow:hidden;background:var(--input-bg);}
.ct-slugbox input{flex:1;min-width:0;border:0;font-family:var(--font-mono);outline:none;background:transparent;}
.ct-slugbox span{padding:0 12px;align-self:stretch;display:flex;align-items:center;background:var(--sunk);border-inline-start:1px solid var(--border);font-family:var(--font-mono);font-size:13px;color:var(--muted);}
.ct-slugbox.ok{border-color:var(--ok-text);} .ct-slugbox.bad{border-color:var(--err-text);}
.ct-slugmsg{font-size:12px;font-weight:400;color:var(--muted);} .ct-slugmsg.ok{color:var(--ok-text);} .ct-slugmsg.bad{color:var(--err-text);}
.ct-form{flex:1.6 1 480px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;display:flex;flex-direction:column;gap:18px;}
.ct-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;margin:0;}
.ct-form label .opt{color:var(--muted);font-weight:500;}
.ct-aside{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px;}
.ct-preview{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:20px;}
.ct-preview small{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
.ct-preview .url{font-family:var(--font-mono);font-size:17px;font-weight:600;margin-top:10px;word-break:break-all;}
.ct-preview .nm{font-size:13px;opacity:.8;margin-top:8px;}
.ct-next{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 20px;}
.ct-next h3{font-size:14px;margin:0 0 12px;} .ct-next>div{display:flex;gap:12px;padding:6px 0;}
.ct-next .n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ct-next b{display:block;font-size:13px;} .ct-next span.s{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.ct-clear{background:var(--surface);border:1px solid var(--err-border);border-radius:var(--r-xl);overflow:hidden;max-width:720px;}
.ct-clear .warnband{padding:18px 22px;background:var(--err-bg);border-bottom:1px solid var(--err-border);display:flex;gap:14px;align-items:flex-start;font-size:13.5px;line-height:1.55;}
.ct-clear .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.ct-clear .cols>div{padding:18px 22px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;} .ct-clear .cols>div+div{border-inline-start:1px solid var(--divider);}
.ct-clear .cols h4{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 3px;}
.ct-clear .cols .del h4{color:var(--err-text);} .ct-clear .cols .keep h4{color:var(--ok-text);}
.ct-clear form{padding:20px 22px;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:12px;}
@media (max-width:760px){.ct-search{margin-inline-start:0;width:100%;}.ct-search input{flex:1;}}

/* ---- [6] SUBSCRIPTION EXPIRED lock-out page (errors/subscription_expired.html) ------------- */
.state-title{font-size:22px;}
.ex-page{min-height:100vh;display:flex;flex-direction:column;width:100%;}
.ex-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 28px;}
.ex-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:16px;}
.ex-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--chip-fg),var(--au-mint,#6fd6ba));display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;}
.ex-sep{color:var(--border-2);} .ex-host{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);}
.ex-center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px 72px;}
.ex-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-toast);text-align:start;}
.ex-body{padding:34px 34px 26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.ex-body h1{font-size:28px;line-height:1.2;margin:0;text-wrap:pretty;}
.ex-body p{font-size:14.5px;line-height:1.6;margin:0;color:var(--text);text-wrap:pretty;}
.ex-body p.ex-sub{font-size:13px;color:var(--muted);}
.ex-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--divider);}
.ex-facts>div{padding:14px 18px;} .ex-facts>div+div{border-inline-start:1px solid var(--divider);} .ex-facts>div:first-child{padding-inline-start:34px;}
.ex-facts small{display:block;font-size:11.5px;color:var(--muted);} .ex-facts b{display:block;font-size:14px;margin-top:3px;}
.ex-facts b.mono{font-family:var(--font-mono);font-size:13.5px;} .ex-facts b.err{color:var(--err-text);}
.ex-actions{padding:22px 34px 30px;display:flex;flex-direction:column;gap:14px;}
.ex-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.ex-cta{height:44px;padding:0 20px;border-radius:11px;font-size:14px;display:inline-flex;align-items:center;gap:8px;}
.ex-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}
@media (max-width:560px){.ex-body,.ex-actions{padding-inline:22px;}.ex-facts>div:first-child{padding-inline-start:22px;}.ex-facts{grid-template-columns:1fr;}.ex-facts>div+div{border-inline-start:0;border-top:1px solid var(--divider);}}

/* ---- [7] CONSOLE SUBSCRIPTIONS (admin_console/subscriptions) --------------------------------
   Reuses the .ct-* console primitives above; only what the packages list + editor add. */
.sp-gap12{gap:12px;}
.sp-flat{border:0;border-radius:0;background:transparent;}
.sp-listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.sp-listhead h2{font-size:18px;margin:0;}
.ct-seg .sp-seg{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text);}
.ct-seg .sp-seg:hover{text-decoration:none;color:var(--text);}
.ct-seg .sp-seg.mono{font-family:var(--font-mono);font-size:12px;}
.ct-seg .sp-seg.is-on{background:var(--surface);box-shadow:0 1px 3px rgba(5,31,41,.15);}
.sp-watch{grid-template-columns:minmax(200px,1.4fr) 110px 150px 110px minmax(150px,1fr) 110px;min-width:860px;}
.sp-lock{font-size:13px;font-weight:600;} .sp-lock.err{color:var(--err-text);} .sp-lock.warn{color:var(--warn-text);}
.sp-end{display:flex;justify-content:flex-end;}
.sp-pkg{grid-template-columns:minmax(170px,1.3fr) 150px 140px minmax(170px,1fr) 170px 100px 52px 16px;min-width:1000px;}
.sp-pkg.is-off{opacity:.62;}
.sp-open{color:var(--text);} .sp-open:hover{text-decoration:none;color:var(--text);}
.sp-name{font-family:var(--font-display);font-size:14.5px;font-weight:700;}
.sp-jur{display:flex;align-items:center;gap:7px;min-width:0;} .sp-jur small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-cc.sp-global{background:var(--info-bg);color:var(--info-text);}
.sp-price{display:block;font-size:13px;font-weight:600;color:var(--text);} .sp-per{display:block;font-size:12px;color:var(--muted);}
.sp-pills{display:flex;gap:4px;flex-wrap:wrap;}
.sp-pill{font-family:var(--font-mono);font-size:11px;background:var(--bg);color:var(--muted);padding:2px 6px;border-radius:5px;white-space:nowrap;} .sp-pill b{color:var(--text);}
.sp-mods{display:flex;flex-direction:column;gap:5px;font-size:12.5px;}
.sp-bars{display:flex;gap:2px;} .sp-bars i{width:8px;height:12px;border-radius:2px;background:var(--border);} .sp-bars i.on{background:var(--chip-fg);}
.sp-grace{font-size:12px;color:var(--muted);}
.sp-switch,.sp-sw{position:relative;display:block;width:38px;height:22px;border-radius:11px;border:0;background:var(--border-2);padding:0;cursor:pointer;flex-shrink:0;transition:background .15s;}
.sp-switch span,.sp-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(5,31,41,.25);transition:inset-inline-start .15s;}
.sp-sw::after{display:block;}
.sp-switch.on,.sp-toggle input:checked+.sp-sw{background:var(--chip-fg);}
.sp-switch.on span,.sp-toggle input:checked+.sp-sw::after{inset-inline-start:19px;}
.sp-switch:focus-visible,.sp-toggle input:focus-visible+.sp-sw{box-shadow:var(--focus-ring);outline:0;}
/* editor */
.sp-toggle{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;cursor:pointer;margin:0;}
.sp-toggle input{position:absolute;opacity:0;pointer-events:none;}
.ct-fields input.is-bad,.sp-unit.is-bad{border-color:var(--err-text);}
.sp-err{font-size:12px;font-weight:500;color:var(--err-text);} .sp-hint{font-size:12px;font-weight:400;color:var(--muted);}
.sp-unit{display:flex;align-items:center;height:var(--h-lg);border-radius:9px;border:1.5px solid var(--border);overflow:hidden;background:var(--input-bg);}
.sp-unit input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 12px;border-radius:0;}
.sp-unit>span{padding:0 12px;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;}
.sp-cur{text-transform:uppercase;}
.sp-jurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.sp-card,.sp-mod{position:relative;display:flex;border:1.5px solid var(--border);border-radius:11px;background:var(--surface);cursor:pointer;margin:0;font-weight:400;}
.sp-card:hover,.sp-mod:hover{border-color:var(--navy);}
.sp-card input,.sp-mod input{position:absolute;opacity:0;pointer-events:none;}
.sp-card{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;min-width:0;}
.sp-card .top{display:flex;justify-content:space-between;align-items:center;width:100%;}
.sp-card b{font-size:13px;font-weight:600;line-height:1.3;} .sp-card small{font-size:11.5px;color:var(--muted);}
.sp-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-2);box-sizing:border-box;position:relative;}
.sp-card:has(input:checked){border-color:var(--chip-fg);background:var(--chip-bg);}
.sp-card:has(input:checked) .sp-radio{border-color:var(--chip-fg);}
.sp-card:has(input:checked) .sp-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--chip-fg);}
.sp-card:has(input:focus-visible),.sp-mod:has(input:focus-visible){box-shadow:var(--focus-ring);}
.sp-help{font-size:12.5px;color:var(--text);background:var(--sunk);border-radius:9px;padding:10px 12px;line-height:1.5;}
.sp-note{margin:14px 20px 0;font-size:12.5px;color:var(--info-text);background:var(--info-bg);border:1px solid var(--info-border);border-radius:9px;padding:9px 12px;}
.sp-group{display:flex;flex-direction:column;gap:8px;}
.sp-group-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.sp-mods-grid,.sp-group .sp-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;}
.sp-mod{gap:12px;align-items:flex-start;padding:12px 14px;min-width:0;}
.sp-mod.is-core{cursor:default;}
.sp-box{width:20px;height:20px;border-radius:6px;flex-shrink:0;margin-top:1px;border:1.5px solid var(--border-2);box-sizing:border-box;background:var(--surface);color:#fff;font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.sp-mod:has(input:checked){border-color:var(--chip-fg);background:var(--chip-bg);}
.sp-mod input:checked+.sp-box{background:var(--chip-fg);border-color:var(--chip-fg);}
.sp-mod input:checked+.sp-box::after{content:"✓";}
.sp-mod.is-core input:checked+.sp-box{background:var(--navy);border-color:var(--navy);}
.sp-mod .tx{min-width:0;display:flex;flex-direction:column;gap:3px;} .sp-mod .tx b{font-size:13.5px;font-weight:600;color:var(--muted);}
.sp-mod:has(input:checked) .tx b{color:var(--text);} .sp-mod .tx small{font-size:12px;color:var(--muted);line-height:1.4;}
.sp-mod .tag{align-self:flex-start;margin-top:3px;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);padding:2px 7px;border-radius:5px;}
.sp-mod .tag.dark{background:var(--navy);color:#fff;} .sp-mod .tag.info{background:var(--info-bg);color:var(--info-text);}
.sp-timeline{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;}
.sp-timeline i{display:block;} .sp-timeline .a{flex:4;background:var(--ok-bg);} .sp-timeline .w{background:var(--warn-border);}
.sp-timeline .g{background:var(--err-border);} .sp-timeline .l{flex:.6;background:var(--navy);}
.sp-tl-legend{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted);}
.sp-tl-legend .warn{color:var(--warn-text);} .sp-tl-legend .err{color:var(--err-text);}
.sp-sticky{position:sticky;top:84px;}
.sp-sum-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sp-sum-head .ct-cc{background:rgba(255,255,255,.14);color:#fff;}
.ct-preview .sp-sum-name{font-family:var(--font-display);font-size:22px;font-weight:800;opacity:1;margin-top:0;}
.sp-sum-code{font-size:12px;opacity:.65;margin-top:2px;}
.sp-sum-price{font-size:17px;font-weight:600;margin:14px 0;} .sp-sum-per{font-size:12.5px;opacity:.65;font-weight:500;}
.sp-sum-caps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);border-radius:10px;overflow:hidden;}
.sp-sum-caps>div{background:rgba(5,31,41,.35);padding:9px 12px;} .sp-sum-caps small{display:block;font-size:11px;opacity:.65;text-transform:none;letter-spacing:0;font-family:var(--font-body);}
.sp-sum-caps b{display:block;font-family:var(--font-mono);font-size:14px;font-weight:600;margin-top:2px;}
.sp-sum-mods{margin-top:14px;font-size:12px;opacity:.9;display:flex;flex-direction:column;gap:8px;}
.sp-sum-mods .chips{display:flex;gap:5px;flex-wrap:wrap;} .sp-sum-mods .chips span{font-size:11.5px;background:rgba(255,255,255,.14);padding:3px 8px;border-radius:6px;}
@media (max-width:900px){.sp-sticky{position:static;}}

/* ---- [8] ERROR PAGES (templates/errors/, design: "Error pages v2") ---------------------------
   One card: a tinted visual panel (a small scene of what went wrong) + the explanation. The tone
   follows the cause — info = the request, warn = access / setup, danger = the platform. */
.er-card{--t-fg:#28648f;--t-bg:#e5eff7;--t-acc:#3d8cc4;--t-panel:#e5eff7;--t-ink:#1f5479;}
.er-card.t-warn{--t-fg:#8a5a00;--t-bg:#fbf0d6;--t-acc:#d99a1e;--t-panel:#fbf0d6;--t-ink:#7a4f00;}
.er-card.t-danger{--t-fg:#b0352a;--t-bg:#fdecea;--t-acc:#d9493b;--t-panel:#fbe4e0;--t-ink:#9c2e24;}
html[data-theme="dark"] .er-card{--t-fg:#8ecbdd;--t-bg:#0f3444;--t-acc:#3d8cc4;--t-panel:#0d3a4d;--t-ink:#bfe3ef;}
html[data-theme="dark"] .er-card.t-warn{--t-fg:#f2c46b;--t-bg:#3a2a0e;--t-acc:#d99a1e;--t-panel:#3a2c10;--t-ink:#f6d58f;}
html[data-theme="dark"] .er-card.t-danger{--t-fg:#f29b90;--t-bg:#3a1a17;--t-acc:#d9493b;--t-panel:#3f1d19;--t-ink:#f6b3aa;}
body.er .wrap{padding:24px;}
.er-card{width:min(1120px,100%);min-height:min(640px,calc(100vh - 48px));background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-toast);display:flex;flex-wrap:wrap;text-align:start;}
.er-visual{flex:1 1 440px;min-height:420px;background:var(--t-panel);position:relative;overflow:hidden;display:flex;flex-direction:column;padding:28px 32px;box-sizing:border-box;color:var(--t-ink);}
.er-host{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;}
.er-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--chip-fg),#6fd6ba);display:flex;align-items:center;justify-content:center;color:#0e3b4d;font-family:var(--font-display);font-weight:800;font-size:15px;}
.er-code{font-family:var(--font-display);font-weight:800;font-size:96px;line-height:1;letter-spacing:-.04em;margin-top:22px;}
.er-scene{flex:1;display:flex;align-items:center;justify-content:center;padding:26px 0 18px;}
.er-cap{font-family:var(--font-mono);font-size:11.5px;overflow-wrap:anywhere;}
.er-copy{flex:1 1 420px;display:flex;flex-direction:column;padding:28px 40px;box-sizing:border-box;min-width:0;}
.er-top{display:flex;justify-content:flex-end;min-height:28px;align-items:center;font-size:13px;font-weight:600;}
.er-top a{color:var(--muted);}
.er-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 0;max-width:460px;}
.er-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t-fg);background:var(--t-bg);padding:4px 11px 4px 9px;border-radius:20px;}
.er-pill i{width:7px;height:7px;border-radius:50%;background:var(--t-acc);}
.er-main h1{font-size:30px;line-height:1.18;margin:0;text-wrap:pretty;}
.er-main p{font-size:15px;line-height:1.6;color:var(--text);margin:0;text-wrap:pretty;}
.er-msg{border-radius:11px;background:var(--sunk);border:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.er-msg small{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.er-msg span{font-size:14px;line-height:1.5;}
.er-facts{display:flex;flex-direction:column;border-top:1px solid var(--divider);}
.er-facts>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--divider);font-size:13px;}
.er-facts span:first-child{color:var(--muted);} .er-facts span:last-child{font-weight:600;text-align:end;overflow-wrap:anywhere;}
.er-facts .mono{font-family:var(--font-mono);} .er-facts .bad{color:var(--err-text);}
.er-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.er-btn{height:44px;padding:0 18px;border-radius:11px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:14px;display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;}
.er-btn:hover{text-decoration:none;filter:brightness(.96);color:var(--text);}
.er-btn.primary{background:var(--navy);border-color:transparent;color:#fff;font-weight:700;} .er-btn.primary:hover{color:#fff;}
.er-btn[aria-disabled="true"]{opacity:.4;pointer-events:none;}
.er-count{display:flex;flex-direction:column;gap:7px;max-width:340px;}
.er-bar{height:4px;border-radius:2px;background:var(--bg);overflow:hidden;} .er-bar i{display:block;height:100%;width:100%;background:var(--t-acc);border-radius:2px;transition:width 1s linear;}
.er-count span{font-size:12.5px;color:var(--muted);}
.er-note{font-size:12.5px;color:var(--muted);line-height:1.5;}
.er-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.er-foot b{color:var(--text);font-weight:600;}
@media (max-width:560px){.er-copy{padding:22px;}.er-visual{padding:22px;}.er-code{font-size:72px;}}
/* scenes */
.er-sheet{background:var(--surface);border-radius:14px;box-shadow:0 14px 34px rgba(5,31,41,.12);color:var(--text);}
.er-lbl{font-size:11px;color:var(--muted);}
.er-field{display:flex;flex-direction:column;gap:5px;}
.er-input{height:34px;border-radius:8px;border:1.5px solid var(--border);padding:0 10px;display:flex;align-items:center;font-size:13px;}
.er-input.mono{font-family:var(--font-mono);}
.er-input.hot{border:2px solid var(--t-acc);text-decoration:underline wavy var(--t-acc);text-underline-offset:4px;}
.er-input.dash{border:2px dashed var(--t-acc);}
.er-lbl.hot{color:var(--t-ink);font-weight:600;}
.er-s-bad{width:290px;padding:18px;display:flex;flex-direction:column;gap:12px;}
.er-s-bad .btn-ghost{height:34px;border-radius:9px;background:var(--border-2);}
.er-s-forb{display:grid;grid-template-columns:repeat(3,92px);gap:10px;}
.er-tile{height:84px;border-radius:12px;background:var(--surface);border:1.5px solid var(--surface);display:flex;flex-direction:column;justify-content:space-between;padding:10px 11px;box-sizing:border-box;font-size:12px;font-weight:600;color:var(--text);}
.er-tile i{width:10px;height:10px;border-radius:50%;background:var(--chip-fg);}
.er-tile.lock{background:var(--t-ink);border-color:var(--t-ink);box-shadow:0 12px 28px rgba(5,31,41,.28);color:var(--surface);}
.er-tile.lock i{display:none;}
.er-lock{align-self:center;display:flex;flex-direction:column;align-items:center;} .er-lock b{width:16px;height:12px;border:3px solid var(--surface);border-bottom:0;border-radius:10px 10px 0 0;box-sizing:border-box;} .er-lock u{width:26px;height:19px;background:var(--surface);border-radius:5px;}
.er-s-susp{position:relative;width:290px;height:200px;}
.er-s-susp .ghost{position:absolute;inset:0;background:var(--surface);border-radius:14px;opacity:.55;padding:18px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;}
.er-s-susp .ghost i{display:block;background:var(--bg);border-radius:8px;} .er-s-susp .ghost .t{width:110px;height:10px;border-radius:5px;background:var(--border);}
.er-s-susp .ghost .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;} .er-s-susp .ghost .w{height:46px;}
.er-pause{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;background:var(--t-ink);display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 18px 40px rgba(5,31,41,.25);}
.er-pause i{width:14px;height:46px;border-radius:4px;background:var(--surface);}
.er-s-exp{padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;}
.er-s-exp .hd{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;font-weight:700;} .er-s-exp .hd span+span{font-family:var(--font-mono);font-weight:500;color:var(--muted);}
.er-cal{display:grid;grid-template-columns:repeat(7,28px);gap:5px;}
.er-cal span{height:28px;border-radius:7px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--muted);}
.er-cal .a{background:var(--chip-fg);color:#fff;} .er-cal .g{background:#f0b4a8;color:#7a1f17;}
.er-key{display:flex;gap:12px;font-size:11px;color:var(--muted);} .er-key span{display:flex;align-items:center;gap:5px;} .er-key i{width:9px;height:9px;border-radius:3px;background:var(--navy);} .er-key .a i{background:var(--chip-fg);} .er-key .g i{background:#f0b4a8;}
.er-s-nf{display:flex;flex-direction:column;gap:8px;width:300px;}
.er-rec{height:50px;border-radius:12px;background:var(--surface);border:1.5px solid var(--surface);box-shadow:0 6px 16px rgba(5,31,41,.08);display:flex;align-items:center;gap:11px;padding:0 13px;box-sizing:border-box;}
.er-rec>i{width:28px;height:28px;border-radius:50%;background:var(--border);flex-shrink:0;}
.er-rec>span{flex:1;display:flex;flex-direction:column;gap:5px;} .er-rec>span i{display:block;height:8px;border-radius:4px;background:var(--border-2);} .er-rec>span i+i{height:6px;width:60px;border-radius:3px;background:var(--border);}
.er-rec b{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--muted);}
.er-rec.gap{background:rgba(255,255,255,.4);border:2px dashed var(--t-acc);box-shadow:none;} .er-rec.gap>i,.er-rec.gap>span i{background:transparent;} .er-rec.gap b{color:var(--t-ink);}
.er-s-unk{display:flex;flex-direction:column;gap:14px;align-items:center;}
.er-addr{width:320px;height:48px;border-radius:24px;background:var(--surface);box-shadow:0 14px 34px rgba(5,31,41,.12);display:flex;align-items:center;gap:10px;padding:0 18px;box-sizing:border-box;font-family:var(--font-mono);font-size:14px;color:var(--muted);}
.er-addr>i{width:10px;height:10px;border-radius:50%;border:2px solid var(--border-2);box-sizing:border-box;flex-shrink:0;}
.er-addr b{color:var(--t-ink);font-weight:600;text-decoration:underline wavy var(--t-acc);text-underline-offset:5px;}
.er-empty{width:220px;height:120px;border-radius:14px;border:2px dashed var(--t-acc);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;}
.er-s-meth{position:relative;width:290px;height:170px;}
.er-s-meth .ghost{position:absolute;inset-inline-start:34px;top:0;right:0;height:126px;border-radius:14px;border:2px dashed var(--t-acc);display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;box-sizing:border-box;font-family:var(--font-mono);font-size:11.5px;font-weight:600;}
.er-s-meth .done{position:absolute;inset-inline-start:0;top:40px;width:250px;height:126px;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;}
.er-s-meth .done b{font-size:13px;} .er-s-meth .done small{font-size:12px;color:var(--muted);}
.er-s-meth .done em{align-self:flex-start;margin-top:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--ok-text);background:var(--ok-bg);padding:3px 10px;border-radius:20px;}
.er-s-rule{display:flex;flex-direction:column;align-items:center;width:280px;}
.er-s-rule .row{width:100%;border-radius:12px;padding:12px 14px;box-sizing:border-box;display:flex;justify-content:space-between;font-size:12.5px;}
.er-s-rule .row span{color:var(--muted);} .er-s-rule .row b{font-family:var(--font-mono);}
.er-s-rule .row.sheet{background:var(--surface);box-shadow:0 10px 26px rgba(5,31,41,.10);}
.er-s-rule .row.dim{background:var(--surface);opacity:.6;} .er-s-rule .row.dim b{color:var(--muted);}
.er-s-rule .gap{width:100%;border-radius:12px;border:2px dashed var(--t-acc);background:rgba(255,255,255,.5);padding:12px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;color:var(--t-ink);}
.er-s-rule .gap small{font-size:11px;font-weight:600;} .er-s-rule .gap b{font-family:var(--font-mono);font-size:13px;} .er-s-rule .gap span{font-size:11.5px;}
.er-s-rule .v{width:2px;height:20px;background:var(--muted);} .er-s-rule .v.d{width:0;border-inline-start:2px dashed var(--border-2);background:none;}
.er-s-ctry{width:290px;padding:18px;display:flex;flex-direction:column;gap:12px;}
.er-s-ctry>b{font-family:var(--font-display);font-size:15px;font-weight:800;}
.er-caret{width:2px;height:16px;background:var(--t-ink);animation:er-pulse 1s ease-in-out infinite;}
.er-chips{display:flex;gap:6px;} .er-chips span{font-family:var(--font-mono);font-size:12px;font-weight:600;background:var(--bg);padding:5px 9px;border-radius:7px;}
.er-s-big{display:flex;flex-direction:column;gap:10px;width:260px;}
.er-s-big .lim{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;font-weight:600;}
.er-drop{height:64px;border-radius:12px;border:2px dashed var(--t-ink);position:relative;box-sizing:border-box;}
.er-file{position:absolute;inset-inline-start:8px;top:8px;bottom:8px;width:156%;border-radius:8px;background:var(--t-acc);display:flex;align-items:center;gap:10px;padding:0 14px;box-sizing:border-box;color:#fff;box-shadow:0 10px 24px rgba(5,31,41,.18);}
.er-file>i{width:22px;height:28px;border-radius:4px;background:rgba(255,255,255,.9);} .er-file span{display:flex;flex-direction:column;} .er-file b{font-size:12.5px;} .er-file small{font-family:var(--font-mono);font-size:11.5px;}
.er-s-many{display:flex;flex-direction:column;align-items:center;gap:18px;}
.er-ring{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--t-acc) var(--pct,100%),var(--surface) 0);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(5,31,41,.12);}
.er-ring>div{width:118px;height:118px;border-radius:50%;background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.er-ring b{font-family:var(--font-mono);font-size:30px;font-weight:600;} .er-ring small{font-size:11px;color:var(--muted);}
.er-tries{display:flex;gap:8px;} .er-tries i{width:26px;height:26px;border-radius:50%;background:var(--t-ink);color:var(--surface);font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.er-s-err{display:flex;align-items:center;}
.er-node{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text);}
.er-node i{width:76px;height:76px;border-radius:20px;font-style:normal;font-size:26px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--chip-fg);color:#fff;}
.er-node.bad i{background:var(--t-ink);color:var(--surface);font-family:var(--font-display);font-size:28px;font-weight:800;}
.er-link{width:46px;height:3px;background:var(--chip-fg);margin:0 0 22px 8px;} .er-link.off{background:var(--border-2);margin:0 8px 22px 0;}
.er-dot{width:10px;height:10px;border-radius:50%;background:var(--t-acc);margin:0 6px 22px;}
.er-s-maint{width:280px;display:flex;flex-direction:column;gap:12px;}
.er-stripe{height:16px;border-radius:8px;background:repeating-linear-gradient(-45deg,var(--t-ink) 0 12px,var(--surface) 12px 24px);}
.er-back{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.er-back span{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);} .er-back b{font-family:var(--font-mono);font-size:34px;font-weight:600;color:var(--text);} .er-back>small{font-size:11.5px;color:var(--muted);text-align:end;}
.er-s-ready{width:290px;padding:8px 0;}
.er-step{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--muted);}
.er-step i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);box-sizing:border-box;background:var(--surface);color:#fff;font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.er-step.ok{color:var(--text);} .er-step.ok i{background:var(--chip-fg);border-color:var(--chip-fg);}
.er-step.now{color:var(--t-ink);} .er-step.now i{border-color:var(--t-acc);animation:er-pulse 1.2s ease-in-out infinite;}
.er-s-gw{display:flex;align-items:flex-start;}
.er-hop{display:flex;align-items:flex-start;}
.er-hop>u{width:36px;height:0;border-top:3px solid var(--chip-fg);margin-top:31px;text-decoration:none;} .er-hop>u.off{border-top-style:dashed;border-top-color:var(--t-acc);} .er-hop>u.none{width:0;border:0;}
.er-hop>div{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px;font-size:12px;font-weight:600;color:var(--text);}
.er-hop>div i{width:64px;height:64px;border-radius:18px;box-sizing:border-box;font-style:normal;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--chip-fg);color:var(--chip-fg);}
.er-hop>div i.first{background:var(--chip-fg);color:#fff;}
.er-hop>div i.bad{background:rgba(255,255,255,.5);border:2px dashed var(--t-acc);color:var(--t-ink);}
.er-hop small{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);font-weight:400;}
@keyframes er-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.er-caret,.er-step.now i{animation:none;}.er-bar i{transition:none;}}

/* ---- Ramadan periods (console) ------------------------------------------ */
.rm-lede{max-width:760px;}
.rm-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:4px;align-self:flex-start;width:fit-content;max-width:100%;}
.rm-tab{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:var(--r-md);color:var(--text);font-size:13px;font-weight:600;}
.rm-tab:hover{background:var(--sunk);text-decoration:none;}
.rm-tab.on{background:var(--navy);color:#fff;}
.rm-count{font-size:11.5px;padding:1px 7px;border-radius:var(--r-pill);background:var(--divider);color:var(--muted);}
.rm-tab.on .rm-count{background:var(--navy-2);color:var(--chip-bd);}
.rm-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;}
.rm-card{flex:1 1 520px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.rm-copy{flex:0 1 340px;}
.rm-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--divider);background:var(--sunk);}
.rm-pad{padding:16px 20px;}
.rm-disabled{opacity:.45;pointer-events:none;}
.rm-row{display:flex;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--divider);flex-wrap:wrap;}
.rm-row:last-child{border-bottom:none;}
.rm-year{min-width:84px;font-weight:700;font-size:18px;}
.rm-year small{font-size:11px;color:var(--muted);font-weight:600;}
.rm-dates{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:14px;}
.rm-also{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rm-chip{font-size:11.5px;padding:2px 8px;border-radius:var(--r-pill);}
.rm-chip.same{background:var(--ok-bg);color:var(--ok-text);}
.rm-chip.diff{background:var(--warn-bg);color:var(--warn-text);}
.rm-side{display:flex;align-items:center;gap:10px;}
.rm-status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);}
.rm-status.past{background:var(--divider);color:var(--muted);}
.rm-status.live{background:var(--navy);color:var(--chip-bd);}
.rm-status.next{background:var(--ok-bg);color:var(--ok-text);}
.rm-empty{padding:28px 20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.rm-empty p{margin:0;max-width:56ch;}
.rm-editor{padding:16px 20px;border-bottom:1px solid var(--divider);background:var(--info-bg);}
.rm-editor-head{display:flex;gap:12px;align-items:baseline;margin-bottom:12px;}
.rm-editor-foot{display:flex;gap:8px;align-items:center;margin-top:16px;}
.rm-pick{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);text-transform:none;letter-spacing:0;}
.rm-pick input{width:auto;height:auto;}
.rm-pick.wide{display:flex;}
.rm-pick small{display:block;color:var(--muted);font-size:11.5px;}
.rm-pick small.warnt{color:var(--warn-text);}
.rm-list{display:flex;flex-direction:column;gap:6px;}

/* ---- Adel (عادل) assistant: launcher + panel (modules/assistant) — design option 1B -------------------------------------
   Markup: modules/assistant/templates/assistant/_launcher.html · behaviour: static/js/adel.js. Tokens only.
   Faces: Adel looks different every time. .adel-root carries one .adel-av-<id> class (set by the server, re-rolled by adel.js on
   a new chat / reopening an empty one); each face below is a separate file in static/img/adel/. Shirt-and-tie (2F) is not shipped. */
.adel-root{display:contents;}
.adel-face{display:block;background-position:center;background-repeat:no-repeat;background-size:contain;}
.adel-av-ghutra .adel-face,.adel-av-ghutra .adel-msg--assistant::before,.adel-av-ghutra .adel-msg--error::before,.adel-av-ghutra .adel-msg--warn::before{background-image:url("../img/adel/ghutra.svg");}
.adel-av-shemagh .adel-face,.adel-av-shemagh .adel-msg--assistant::before,.adel-av-shemagh .adel-msg--error::before,.adel-av-shemagh .adel-msg--warn::before{background-image:url("../img/adel/shemagh.svg");}
.adel-av-massar .adel-face,.adel-av-massar .adel-msg--assistant::before,.adel-av-massar .adel-msg--error::before,.adel-av-massar .adel-msg--warn::before{background-image:url("../img/adel/massar.svg");}
.adel-av-hamdaniya .adel-face,.adel-av-hamdaniya .adel-msg--assistant::before,.adel-av-hamdaniya .adel-msg--error::before,.adel-av-hamdaniya .adel-msg--warn::before{background-image:url("../img/adel/hamdaniya.svg");}
.adel-av-gahfiyya .adel-face,.adel-av-gahfiyya .adel-msg--assistant::before,.adel-av-gahfiyya .adel-msg--error::before,.adel-av-gahfiyya .adel-msg--warn::before{background-image:url("../img/adel/gahfiyya.svg");}
.adel-av-bare .adel-face,.adel-av-bare .adel-msg--assistant::before,.adel-av-bare .adel-msg--error::before,.adel-av-bare .adel-msg--warn::before{background-image:url("../img/adel/bare.svg");}

.adel-fab{position:fixed;inset-inline-end:22px;bottom:22px;z-index:400;display:flex;align-items:center;padding:0;
  border:0;background:transparent;cursor:pointer;color:inherit;}
.adel-fab-label{height:38px;display:flex;align-items:center;padding-inline:16px 26px;margin-inline-end:-18px;
  border-radius:var(--r-pill);background:var(--sidebar);color:#fff;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  box-shadow:var(--shadow-float);white-space:nowrap;transition:background .15s;}
[dir="rtl"] .adel-fab-label{font-family:var(--font-arabic);}
html[data-theme="dark"] .adel-fab-label{background:var(--surface);border:1px solid var(--border-2);color:var(--text);}
.adel-fab-face{position:relative;width:56px;height:56px;border-radius:50%;border:1px solid var(--amber-edge);background:var(--amber);
  box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s;}
.adel-fab-face .adel-face{width:40px;height:40px;transition:transform .2s;}
.adel-fab:hover .adel-fab-label{background:var(--navy-2);}
.adel-fab:hover .adel-fab-face{transform:translateY(-2px);}
.adel-fab:hover .adel-fab-face .adel-face{transform:rotate(-8deg);}
.adel-fab:focus-visible{outline:none;}
.adel-fab:focus-visible .adel-fab-face{box-shadow:var(--focus-ring),var(--shadow-float);}
body:has(.adel-panel:not([hidden])) .adel-fab-label{display:none;}

.adel-panel{position:fixed;inset-inline-end:22px;bottom:90px;z-index:401;width:384px;max-width:calc(100vw - 32px);
  height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-modal);overflow:hidden;}
.adel-head{display:flex;align-items:center;justify-content:space-between;padding:10px;padding-inline-start:14px;border-bottom:1px solid var(--divider);}
.adel-head-id{display:flex;align-items:center;gap:10px;}
.adel-head-id .adel-face{width:32px;height:32px;}
.adel-title{display:flex;align-items:baseline;gap:7px;font-family:var(--font-display);font-size:16px;}
.adel-title strong{font-weight:600;}
.adel-head-actions{display:flex;gap:2px;}
.adel-icon{width:32px;height:32px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.adel-icon:hover{background:var(--bg);color:var(--text);}
.adel-icon:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.adel-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface);}
.adel-hello{margin:0;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text);}
[dir="rtl"] .adel-hello{font-family:var(--font-arabic);}
.adel-intro{margin:-6px 0 0;font-size:14px;line-height:1.45;color:var(--text);}
.adel-hint{margin:2px 0 0;display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.45;color:var(--muted);}
.adel-hint svg{flex-shrink:0;margin-top:2px;}
.adel-note{align-self:flex-end;margin:0;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--warn-text);background:var(--warn-bg);
  border:1px solid var(--warn-border);border-radius:var(--r-pill);padding:4px 10px;}

.adel-msg{max-width:84%;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.adel-msg--user{align-self:flex-end;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--bg);color:var(--text);}
[dir="rtl"] .adel-msg--user{border-radius:16px 16px 16px 4px;}
/* Adel's replies: plain text beside his face */
.adel-msg--assistant,.adel-msg--error,.adel-msg--warn{position:relative;align-self:stretch;max-width:none;min-height:26px;padding-inline-start:36px;}
.adel-msg--assistant::before,.adel-msg--error::before,.adel-msg--warn::before{content:"";position:absolute;inset-inline-start:0;top:0;width:26px;height:26px;
  background-position:center;background-repeat:no-repeat;background-size:contain;}
/* errors / limits: a tinted box beside the face (the face stays outside the box) */
.adel-msg--error,.adel-msg--warn{font-size:13.5px;line-height:1.45;padding-block:8px;padding-inline-end:12px;border-radius:var(--r-lg);background-repeat:no-repeat;
  background-size:calc(100% - 36px) 100%;background-position:right;}
[dir="rtl"] .adel-msg--error,[dir="rtl"] .adel-msg--warn{background-position:left;}
.adel-msg--error{color:var(--err-text);background-image:linear-gradient(var(--err-bg),var(--err-bg));}
.adel-msg--warn{color:var(--warn-text);background-image:linear-gradient(var(--warn-bg),var(--warn-bg));}
.adel-msg--error::before,.adel-msg--warn::before{top:4px;}
.adel-msg--error::before{filter:grayscale(.6);}
/* thinking: three dots + label; streaming: a caret that follows the text */
.adel-msg.is-wait{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;min-height:26px;padding-top:0;padding-bottom:0;}
.adel-dots{display:inline-flex;gap:4px;align-items:center;}
.adel-dots span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:adel-dot 1.2s infinite;}
.adel-dots span:nth-child(2){animation-delay:.15s;}
.adel-dots span:nth-child(3){animation-delay:.3s;}
@keyframes adel-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.adel-msg.is-streaming::after{content:"";display:inline-block;width:2px;height:15px;background:var(--text);margin-inline-start:2px;vertical-align:-2px;
  animation:adel-caret 1s steps(1) infinite;}
@keyframes adel-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.adel-dots span,.adel-msg.is-streaming::after{animation:none;}}

/* Cards sit under Adel's face column */
.adel-card{margin-inline-start:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:9px 12px;font-size:13px;}
.adel-card--pending{border-color:var(--warn-border);background:linear-gradient(var(--warn-bg),var(--warn-bg)) no-repeat;background-size:100% 52px;}
.adel-card-title{font-weight:600;font-size:13.5px;font-family:var(--font-display);}
[dir="rtl"] .adel-card-title{font-family:var(--font-arabic);}
.adel-card-sub{color:var(--muted);font-size:12.5px;margin-bottom:6px;}
.adel-card--pending > .adel-card-sub:last-of-type{color:var(--warn-text);font-weight:700;font-size:12px;margin:8px 0 0;}
.adel-card-row{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;margin-inline:-12px;border-top:1px solid var(--divider);}
.adel-card-k{color:var(--muted);text-transform:capitalize;}
.adel-card-v{font-family:var(--font-mono);font-size:12.5px;text-align:end;overflow-wrap:anywhere;}
.adel-card-item{padding:7px 12px;margin-inline:-12px;border-top:1px solid var(--divider);font-size:12.5px;overflow-wrap:anywhere;}
.adel-card-quote{margin-top:6px;padding-inline-start:10px;border-inline-start:2px solid var(--border);color:var(--muted);white-space:pre-wrap;line-height:1.55;}
.adel-card .btn{margin-top:10px;margin-inline-end:6px;}
.adel-confirm{display:flex;gap:8px;margin-top:10px;padding-top:10px;margin-inline:-12px;padding-inline:12px;border-top:1px solid var(--divider);}
/* a confirm card after it resolves: just the title and how it ended */
.adel-card.is-resolved{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--surface);}
.adel-card.is-resolved .adel-card-sub{margin:0;display:flex;gap:4px;align-items:center;font-size:12px;font-weight:700;}
.adel-card-sub.is-ok{color:var(--ok-text);font-weight:700;}
.adel-card-sub.is-err{color:var(--err-text);font-weight:700;}
.adel-card-sub.is-muted{color:var(--muted);font-weight:700;}
.adel-card.is-resolved.is-cancelled .adel-card-title{color:var(--muted);}
.adel-card:has(.is-ok){border-color:var(--ok-border);}
.adel-card:has(.is-err){border-color:var(--err-border);}
.adel-card-fail{flex-basis:100%;margin:0;font-size:12.5px;color:var(--err-text);}
.adel-card-detail{flex-basis:100%;margin:0;font-size:12.5px;color:var(--muted);}
.adel-card.is-resolved:has(.adel-card-fail),.adel-card.is-resolved:has(.adel-card-detail){flex-wrap:wrap;}

/* Composer: one rounded box */
.adel-form{margin:0 12px 12px;display:flex;align-items:flex-end;gap:8px;padding:10px;padding-inline-start:14px;
  border:1px solid var(--border-2);border-radius:18px;background:var(--input-bg);box-shadow:0 4px 14px rgba(5,31,41,.06);}
.adel-form:focus-within{border-color:var(--amber-edge);box-shadow:var(--focus-ring);}
.adel-input{flex:1;resize:none;min-height:42px;max-height:140px;padding:4px 0;border:0;background:transparent;color:var(--text);
  font-family:var(--font-body);font-size:14px;line-height:1.45;}
.adel-input:focus{outline:none;}
.adel-send{width:36px;height:36px;flex-shrink:0;padding:0;border-radius:50%;border:1px solid var(--amber-edge);background:var(--amber);
  color:var(--amber-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.adel-send:disabled{opacity:.5;cursor:not-allowed;}
.adel-send-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

@media (max-width:560px){
  .adel-panel{inset-inline:8px;bottom:84px;width:auto;height:calc(100vh - 100px);}
  .adel-fab-label{display:none;}
  .adel-icon{width:44px;height:44px;}
  .adel-send{width:44px;height:44px;}
  .adel-input{font-size:16px;}
}


/* ---- Adel console screen (admin_console/assistant_settings) — design option 1B "Console — Platform / Adel" ------------------
   Tokens only. Page header = the console shell's own header; the avatar badge + tagline open the page body. */
/* the global label rule adds a 14px top margin to every label but the first child: neutralise it for the whole Adel console */
[data-adel-console] label{margin:0;}
.ad-ar{font-family:var(--font-arabic);font-weight:600;color:var(--muted);}
.ad-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--sunk);color:var(--muted);border:1px solid var(--border);}
.ad-pill--ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border);}
.ad-pill--err{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border);}
.ad-pill-dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.ad-intro{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.ad-badge{width:60px;height:60px;border-radius:50%;background:var(--amber);border:1px solid var(--amber-edge);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ad-badge img{width:44px;height:44px;}
.ad-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;margin-bottom:20px;}
.ad-col{display:flex;flex-direction:column;gap:16px;min-width:0;}
.ad-card{display:flex;flex-direction:column;gap:14px;margin-bottom:0;}
.ad-layout .ad-card,.ad-col .ad-card{margin-bottom:0;}
[data-adel-console] > .ad-card{margin-bottom:20px;}
.ad-card h2{margin:0;}
.ad-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ad-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;}
.ad-note{font-size:12.5px;line-height:1.5;margin:0;}
.ad-strong{font-weight:600;}
.ad-label{font-size:13px;font-weight:600;}
.ad-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ad-row--split{justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--divider);}
.ad-label{display:flex;flex-direction:column;gap:2px;}
.ad-label-d{font-size:12.5px;font-weight:400;color:var(--muted);}
.ad-lead{margin:0 0 16px;font-size:13.5px;}
.ad-sub{margin:0;font-size:14px;font-family:var(--font-display);}
.ad-empty{display:flex;flex-direction:column;gap:2px;padding:28px 0;text-align:center;margin:0;}

/* switches (checkbox rows): the global toggle sits in a fixed 46px column so every row lines up */
.ad-switch{display:flex;gap:16px;align-items:center;padding:14px 0;cursor:pointer;border-top:1px solid var(--divider);}
.ad-switch:first-of-type{border-top:0;padding-top:4px;}
.ad-switch:last-of-type{padding-bottom:4px;}
.ad-switch > span:not(.glyo-toggle){display:flex;flex-direction:column;gap:2px;min-width:0;}
.ad-switch-t{display:block;font-weight:600;font-size:14px;line-height:1.35;}
.ad-switch-d{display:block;font-size:13px;line-height:1.4;color:var(--muted);}
.ad-check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;}

/* model cards: equal tiles, selection drawn with an inset ring so nothing shifts */
.ad-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;}
.ad-model{display:flex;gap:12px;align-items:flex-start;padding:16px;min-height:76px;border:1px solid var(--border-2);border-radius:var(--r-lg);cursor:pointer;background:var(--surface);box-sizing:border-box;}
.ad-model input{margin:2px 0 0;accent-color:var(--amber);}
.ad-model > span{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ad-model:has(input:checked){border-color:var(--amber);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--amber);}
.ad-model:has(input:focus-visible){box-shadow:var(--focus-ring);}
.ad-model-t{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:600;font-size:14px;line-height:22px;min-height:22px;}
.ad-model-d{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);}
.ad-tag{font-size:11px;font-weight:700;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn-text);}

/* segmented radio (thinking effort): three equal pills, label text centred */
.ad-seg{display:inline-flex;padding:4px;background:var(--bg);border-radius:var(--r-pill);gap:4px;}
.ad-seg label{position:relative;display:flex;align-items:center;justify-content:center;min-width:84px;height:34px;padding:0 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;line-height:1;color:var(--muted);cursor:pointer;}
.ad-seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;}
.ad-seg label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(5,31,41,.12);}
.ad-seg label:has(input:focus-visible){box-shadow:var(--focus-ring);}

/* faces: identical tiles — picture, name (two lines reserved), switch pinned to the bottom */
.ad-faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.ad-face{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;border:1px solid var(--border-2);border-radius:var(--r-lg);cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1.3;text-align:center;box-sizing:border-box;}
.ad-face img{order:1;width:56px;height:56px;border-radius:50%;background:var(--amber);padding:6px;border:1px solid var(--amber-edge);}
.ad-face > span:not(.glyo-toggle){order:2;flex:1;display:flex;align-items:flex-start;justify-content:center;min-height:2.6em;}
.ad-face .glyo-toggle{order:3;}
.ad-face:has(input:not(:checked)){opacity:.55;}
.ad-face:has(input:checked){border-color:var(--amber);background:var(--sunk);}

/* special-occasion faces */
.ad-sfaces{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.ad-sface{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--border-2);border-radius:var(--r-lg);background:var(--surface);}
.ad-sface-top{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:end;}
.ad-sface-img{width:52px;height:52px;border-radius:50%;background:var(--amber);padding:5px;border:1px solid var(--amber-edge);box-sizing:border-box;}
.ad-sface-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ad-sface-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0;}
.ad-sface-aud .ad-note{grid-column:1 / -1;margin:0;}
.ad-sface-aud select{width:100%;}
.ad-sface-btns{margin-top:2px;}
.ad-sface-new{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--divider);}
.ad-sface-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.ad-state{display:inline-flex;align-items:center;height:26px;font-size:12px;font-weight:600;padding:0 10px;border-radius:var(--r-pill);background:var(--sunk);color:var(--muted);white-space:nowrap;}
.ad-state.is-live{background:var(--ok-bg);color:var(--ok-text);}
.ad-state.is-scheduled{background:var(--warn-bg);color:var(--warn-text);}
.ad-custom{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn-text);}

/* fields */
.ad-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;}
.ad-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px;}
.ad-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
/* a field is label-text on top, control at the bottom; the text area flexes so controls in one row share a baseline */
.ad-field{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-size:13px;font-weight:600;min-width:0;}
.ad-field-l{display:flex;align-items:flex-end;flex:1;line-height:1.3;}
.ad-field select,.ad-field input[type="text"],.ad-field input[type="date"],.ad-field input[type="file"]{width:100%;height:40px;padding:0 12px;border:1px solid var(--border-2);border-radius:10px;font-size:13.5px;background-color:var(--input-bg);color:var(--text);font-weight:400;box-sizing:border-box;}
.ad-field input[type="file"]{padding:0;line-height:38px;overflow:hidden;}
.ad-field input[type="file"]::file-selector-button{height:100%;margin:0 12px 0 0;padding:0 14px;border:0;border-inline-end:1px solid var(--border-2);background:var(--sunk);color:var(--text);font:600 13px var(--font-body);cursor:pointer;}
.ad-box{display:flex;align-items:center;border:1px solid var(--border-2);border-radius:10px;height:40px;padding:0 12px;gap:8px;background:var(--input-bg);font-weight:400;box-sizing:border-box;}
.ad-box:focus-within{border-color:var(--amber-edge);box-shadow:var(--focus-ring);}
.ad-box input{flex:1;min-width:0;border:0;outline:none;font-family:var(--font-mono);font-size:13px;background:transparent;color:var(--text);height:auto;padding:0;}
.ad-box span{color:var(--muted);font-size:12.5px;white-space:nowrap;}
.ad-textarea{width:100%;height:120px;min-height:80px;resize:vertical;padding:10px 12px;border:1px solid var(--border-2);border-radius:10px;font-size:13.5px;line-height:1.5;font-weight:400;color:var(--text);
  background:var(--input-bg);font-family:var(--font-body);box-sizing:border-box;}
.ad-textarea:focus{outline:none;border-color:var(--amber-edge);box-shadow:var(--focus-ring);}
.ad-textarea--ar{font-family:var(--font-arabic);font-size:14px;line-height:1.6;}
.ad-textarea--mono{font-family:var(--font-mono);font-size:12.5px;line-height:1.6;}

/* live greeting preview */
.ad-preview{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--sunk);border:1px dashed var(--border-2);border-radius:var(--r-lg);}
.ad-preview img{width:36px;height:36px;flex-shrink:0;}
.ad-preview-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.ad-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ad-preview-g{font-family:var(--font-display);font-weight:700;font-size:17px;}
.ad-preview-i{font-size:13.5px;}
.ad-preview-row{display:flex;gap:10px;align-items:baseline;}
.ad-preview-lang{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);flex-shrink:0;}
.ad-preview-ctl{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex-shrink:0;}
.ad-facemap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ad-facemap select{width:100%;}

.ad-savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;box-shadow:0 -6px 20px rgba(5,31,41,.06);font-size:13px;z-index:2;}

/* API key */
.ad-keyhint{font-family:var(--font-mono);font-size:12px;padding:3px 9px;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border);}
.ad-keyhint--none{background:var(--err-bg);color:var(--err-text);border-color:var(--err-border);}
.ad-keyform{display:flex;flex-direction:column;gap:10px;}
.ad-keyinput{height:40px;padding:0 12px;border:1px solid var(--border-2);border-radius:10px;font-family:var(--font-mono);font-size:13px;background:var(--input-bg);color:var(--text);}
.ad-keyinput:focus{outline:none;border-color:var(--amber-edge);box-shadow:var(--focus-ring);}
.ad-keybtns{display:flex;gap:8px;flex-wrap:wrap;}

/* usage */
.ad-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.ad-stat{background:var(--sunk);border-radius:10px;padding:12px;}
.ad-stat-n{font-family:var(--font-display);font-weight:700;font-size:22px;}
.ad-period{height:32px;padding:0 8px;border:1px solid var(--border-2);border-radius:8px;font-size:12.5px;background-color:var(--input-bg);color:var(--text);}
.ad-table{width:100%;border-collapse:collapse;font-size:13px;}
.ad-table th{text-align:start;color:var(--muted);font-size:12px;font-weight:600;padding:8px 10px;}
.ad-table td{padding:12px 10px;border-top:1px solid var(--divider);vertical-align:top;}
.ad-table .num{text-align:end;font-family:var(--font-mono);font-size:12.5px;}
.ad-table th.num{font-family:inherit;}
.ad-table tfoot td{border-top:1.5px solid var(--border);font-weight:700;padding:10px;}
.ad-w-bar{width:300px;}
.ad-bar{display:block;width:100%;height:8px;border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--bg);appearance:none;-webkit-appearance:none;}
.ad-bar::-webkit-progress-bar{background:var(--bg);border-radius:var(--r-pill);}
.ad-bar::-webkit-progress-value{background:var(--teal);border-radius:var(--r-pill);}
.ad-bar::-moz-progress-bar{background:var(--teal);border-radius:var(--r-pill);}
.ad-bar--over::-webkit-progress-value{background:var(--err-text);}
.ad-bar--over::-moz-progress-bar{background:var(--err-text);}
.ad-bar-legend{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;margin-top:5px;}
.ad-over{color:var(--err-text);font-weight:500;}

/* tenant overrides */
.ad-slug{font-size:14px;font-weight:400;margin-inline-start:8px;}
.ad-flag{font-family:var(--font-body);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);background:var(--err-bg);color:var(--err-text);}
.ad-stat-of{font-size:14px;font-weight:400;color:var(--muted);}
.ad-stats--4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* tenant list: search + filter chips + a paged table of rows that are links */
.ad-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.ad-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--border-2);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;text-decoration:none;}
.ad-chip .n{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.ad-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.ad-chip.is-on .n{color:inherit;opacity:.8;}
.ad-search{display:flex;gap:8px;align-items:center;margin-inline-start:auto;}
.ad-search input{width:300px;height:36px;}
.ad-period-f{margin:0;}
.ad-list{padding:8px 0;gap:0;}
.ad-trow{display:grid;grid-template-columns:minmax(0,2fr) 130px minmax(0,2fr) 80px 120px 24px;gap:16px;align-items:center;padding:14px 24px;border-top:1px solid var(--divider);color:var(--text);text-decoration:none;font-size:13px;}
.ad-trow:first-child{border-top:0;}
a.ad-trow:hover{background:var(--sunk);}
.ad-trow--head{padding-block:8px;color:var(--muted);font-size:12px;font-weight:600;}
.ad-tcell{display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start;}
.ad-tcell.num,.ad-trow--head .num{align-items:flex-end;text-align:end;font-family:var(--font-mono);font-size:12.5px;}
.ad-trow--head .num{font-family:inherit;font-size:12px;}
.ad-tcell .ad-bar-legend{align-self:stretch;}
.ad-chev{color:var(--muted);font-size:18px;text-align:end;}
.ad-tasks-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;}
.ad-tasks-head h2{margin-inline-end:8px;}
.ad-radio{display:flex;gap:6px;align-items:center;cursor:pointer;}
.ad-radio input{accent-color:var(--amber);}
.ad-legend{margin-inline-start:auto;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);}
.ad-confirm-tag{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--warn-bg);color:var(--warn-text);}
.ad-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ad-tasks fieldset{margin:0;border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0;}
.ad-tasks legend{padding:0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ad-tasks label{display:flex;gap:8px;align-items:center;}
.ad-tasks input{accent-color:var(--amber);}

@media (max-width:1100px){.ad-layout{grid-template-columns:minmax(0,1fr);}.ad-tasks{grid-template-columns:repeat(2,minmax(0,1fr));}.ad-grid4{grid-template-columns:repeat(2,minmax(0,1fr));}.ad-stats--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.ad-trow{grid-template-columns:minmax(0,1fr) auto;}.ad-trow--head{display:none;}.ad-trow > .ad-tcell:nth-child(n+4){display:none;}.ad-search{margin-inline-start:0;width:100%;}.ad-search input{width:100%;}.ad-sfaces{grid-template-columns:minmax(0,1fr);}.ad-grid2,.ad-grid3,.ad-grid4,.ad-models,.ad-tasks{grid-template-columns:minmax(0,1fr);}.ad-w-bar{width:auto;}.ad-savebar{flex-wrap:wrap;}}

/* ===== Legal library / Legal reference (console + tenant) — design from design_input/Legal ===== */
.lgl-hero{background:var(--navy);color:#fff;border-radius:var(--r-2xl);padding:22px;display:flex;flex-direction:column;gap:14px;margin-bottom:22px;}
.lgl-hero__row{display:flex;gap:10px;flex-wrap:wrap;}
.lgl-hero__input{flex:1 1 360px;min-width:0;height:48px;box-sizing:border-box;padding:0 18px;border:0;border-radius:var(--r-lg);font-size:15px;color:var(--text);background:var(--surface);outline:none;}
.lgl-hero__input:focus{box-shadow:var(--focus-ring);}
.lgl-hero__go{height:48px;padding:0 22px;border:0;border-radius:var(--r-lg);background:var(--amber);color:var(--amber-ink);font-weight:700;font-size:14px;cursor:pointer;}
.lgl-try{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600;}
.lgl-try a{height:30px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);color:#fff;font-weight:500;text-decoration:none;}
.lgl-try a:hover{background:rgba(255,255,255,.12);}
.lgl-sect{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;}
.lgl-sect__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.lgl-sect__title{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;}
.lgl-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;}
.lgl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--divider);color:inherit;text-decoration:none;}
.lgl-row:last-child{border-bottom:0;}
.lgl-row:hover{background:var(--sunk);}
.lgl-row__main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lgl-row__title{font-weight:700;font-size:14.5px;line-height:1.4;}
.lgl-row__ar{font-family:var(--font-arabic);font-size:13.5px;color:var(--muted);line-height:1.5;}
.lgl-row__meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:2px;}
.lgl-row__side{display:flex;align-items:center;gap:18px;}
.lgl-prog{display:flex;flex-direction:column;gap:6px;width:130px;font-size:12px;color:var(--muted);font-weight:600;}
.lgl-prog--cell{width:auto;min-width:110px;}
.lgl-prog__v{font-family:var(--font-mono);font-size:12.5px;color:var(--text);font-weight:600;}
.lgl-prog__s{font-size:11.5px;color:var(--warn-text);font-weight:600;}
progress.lgl-meter{display:block;width:100%;height:6px;border:0;border-radius:3px;overflow:hidden;background:var(--warn-border);appearance:none;-webkit-appearance:none;}
progress.lgl-meter::-webkit-progress-bar{background:var(--warn-border);}
progress.lgl-meter::-webkit-progress-value{background:var(--teal);}
progress.lgl-meter::-moz-progress-bar{background:var(--teal);}
.lgl-note{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 20px;font-size:13px;line-height:1.6;color:var(--muted);}
.lgl-note strong{color:var(--text);}
.lgl-note__mark{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;}
.lgl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.lgl-head__main{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.lgl-head__ar{font-family:var(--font-arabic);font-size:19px;color:var(--muted);}
.lgl-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.lgl-bar{position:sticky;top:12px;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--shadow-toast);margin-bottom:18px;}
.lgl-bar label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);}
.lgl-seg a{display:inline-flex;align-items:center;text-decoration:none;}
.lgl-layout{display:flex;gap:20px;align-items:flex-start;}
.lgl-idx{position:sticky;top:84px;width:184px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;}
.lgl-idx__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.lgl-idx__grid a{height:34px;border-radius:8px;border:1.5px solid var(--warn-border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.lgl-idx__grid a.is-ver{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok-text);}
.lgl-idx__grid a.is-cur,.lgl-idx__grid a:hover{border-color:var(--teal);}
.lgl-idx__grid a.is-cur{background:var(--navy);color:#fff;}
.lgl-key{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--muted);}
.lgl-key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:6px;background:var(--amber);}
.lgl-key i.is-ver{background:var(--ok-text);}
.lgl-feed{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;}
.lgl-art{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;scroll-margin-top:90px;}
.lgl-art.is-old{opacity:.82;}
.lgl-art__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--divider);}
.lgl-art__no{margin:0;font-family:var(--font-display);font-size:17px;font-weight:700;}
.lgl-art__ar{font-family:var(--font-arabic);font-size:13.5px;color:var(--muted);}
.lgl-art__from{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.lgl-art__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.lgl-art__col{padding:16px 20px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.lgl-art__col + .lgl-art__col{border-inline-start:1px solid var(--divider);}
.lgl-art__col--orig{background:var(--sunk);}
.lgl-art__lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.lgl-art__col--orig .lgl-art__lbl{color:var(--chip-fg);}
.lgl-art__txt{font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;}
.lgl-art__txt[lang="ar"]{font-family:var(--font-arabic);font-size:16px;line-height:1.95;}
.lgl-art__hist{padding:12px 20px;border-top:1px solid var(--divider);background:var(--sunk);display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
.lgl-art__hist b{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.lgl-art__hist .g-mono{font-size:12px;color:var(--text);}
.lgl-art__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 20px 12px;border-top:1px solid var(--divider);font-size:12px;color:var(--muted);}
.lgl-art__src{padding:8px 20px 12px;border-top:1px solid var(--divider);font-size:12.5px;color:var(--muted);line-height:1.55;}
.lgl-art__src summary{cursor:pointer;color:var(--teal);font-weight:600;}
.lgl-art__src p{margin:6px 0 0;}
.lgl-hit{background:var(--warn-bg);color:var(--warn-text);border-radius:3px;}
.lgl-hits{display:flex;flex-direction:column;gap:10px;}
.lgl-hitcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 20px;display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;}
.lgl-hitcard:hover{border-color:var(--teal);box-shadow:var(--shadow-toast);}
.lgl-hitcard__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lgl-hitcard__snip{font-size:13.5px;line-height:1.65;color:var(--muted);}
.lgl-hitcard__snip[lang="ar"]{font-family:var(--font-arabic);font-size:15px;line-height:1.85;}
.lgl-metacard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 20px;}
.lgl-metacard div{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lgl-metacard span{font-size:11.5px;color:var(--muted);font-weight:600;}
.lgl-metacard b{font-size:13.5px;font-weight:600;word-break:break-word;}
.lgl-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:12px;margin-bottom:16px;}
.lgl-vercard{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.lgl-vercard small{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5;}
.lgl-vercard__n{font-family:var(--font-display);font-size:26px;font-weight:700;}
.lgl-vercard progress.lgl-meter{background:rgba(255,255,255,.2);}
.lgl-vercard progress.lgl-meter::-webkit-progress-bar{background:rgba(255,255,255,.2);}
.lgl-vercard progress.lgl-meter::-webkit-progress-value{background:var(--ok-border);}
.lgl-vercard progress.lgl-meter::-moz-progress-bar{background:var(--ok-border);}
.lgl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px;}
.lgl-tile{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-xl);background:var(--surface);color:var(--text);text-decoration:none;}
.lgl-tile:hover{border-color:var(--teal);}
.lgl-tile.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.lgl-tile__top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;}
.lgl-tile__top span:last-child{font-family:var(--font-body);font-size:11.5px;font-weight:400;opacity:.75;}
.lgl-tile b{font-family:var(--font-display);font-size:14.5px;line-height:1.25;}
.lgl-tile small{font-size:11.5px;opacity:.8;}
.lgl-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:16px;}
.lgl-check{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:14px 16px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.lgl-check.is-warn{border-color:var(--warn-border);}
.lgl-check__n{flex-shrink:0;min-width:34px;height:28px;padding:0 6px;box-sizing:border-box;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px;background:var(--ok-bg);color:var(--ok-text);}
.lgl-check.is-warn .lgl-check__n{background:var(--warn-bg);color:var(--warn-text);}
.lgl-quote{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;}
.lgl-quote > div{padding:12px 14px;max-height:220px;overflow-y:auto;white-space:pre-wrap;line-height:1.7;font-size:13px;}
.lgl-quote > div[lang="ar"]{font-family:var(--font-arabic);font-size:14px;line-height:1.8;background:var(--sunk);}
.lgl-quote > div + div{border-top:1px solid var(--divider);}
.lgl-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--bg);}
.lgl-tabs a{height:30px;padding:0 12px;border-radius:8px;display:inline-flex;align-items:center;color:var(--text);font-weight:600;font-size:12.5px;text-decoration:none;}
.lgl-tabs a.is-on{background:var(--surface);box-shadow:0 1px 3px rgba(5,31,41,.15);}
.lgl-uncited{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.lgl-uncited b{font-size:12px;color:var(--warn-text);margin-inline-end:4px;}
@media (max-width:900px){.lgl-layout{flex-direction:column;}.lgl-idx{position:static;width:auto;}.lgl-top{grid-template-columns:minmax(0,1fr);}.lgl-row{grid-template-columns:minmax(0,1fr);}}