:root{
  --bg:#060d18;--bg2:#0a1524;--panel:#0e1c30;--panel2:#122844;--line:rgba(255,255,255,.08);
  --gold:#d6b56d;--gold2:#f4df9b;--text:#eef4ff;--muted:#8ca0bd;--muted2:#6f83a1;
  --danger:#ff5c74;--ok:#45d39c;--warn:#f5c451;--accent:#4a8cff;
  --radius:16px;--shadow:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
button{font-family:inherit}

/* ---------------- Gateway (unified login) ---------------- */
.gw{position:relative;min-height:100vh;display:grid;place-items:center;padding:40px 24px;overflow:hidden;
  background:linear-gradient(160deg,#0a1424 0%,#060c17 45%,#03060d 100%)}
/* animated ambient glow: electric blue + gold */
.gw-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 12% -8%,rgba(74,140,255,.20),transparent 55%),
    radial-gradient(900px 560px at 92% 108%,rgba(214,181,109,.18),transparent 52%),
    radial-gradient(700px 500px at 90% 4%,rgba(74,140,255,.10),transparent 60%)}
.gw-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(1200px 800px at 50% 40%,#000,transparent 85%)}
.gw-inner{position:relative;z-index:1;width:100%;max-width:960px;display:flex;flex-direction:column;align-items:center}

.gw-head{text-align:center;margin-bottom:38px}
.gw-brand{display:inline-flex;gap:16px;align-items:center}
.gw-logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07111f;font-weight:900;display:grid;place-items:center;font-size:22px;
  box-shadow:0 10px 30px rgba(214,181,109,.4),inset 0 0 0 1px rgba(255,255,255,.2)}
.gw-brandtext{text-align:left}
.gw-brandtext h1{font-size:26px;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(90deg,#eef4ff,#cddcff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gw-brandtext p{margin:4px 0 0;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gold)}
.gw-subtitle{margin:22px auto 0;color:var(--muted);font-size:15px;max-width:520px;line-height:1.6}
.gw-foot{margin-top:36px;color:var(--muted2);font-size:12px;letter-spacing:.3px;text-align:center}

/* two access cards */
.gw-cards{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gw-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:30px 28px;border-radius:22px;
  background:linear-gradient(180deg,rgba(20,36,60,.72),rgba(10,20,36,.55));
  border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s,border-color .2s}
.gw-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.gw-card--employee::before{background:linear-gradient(90deg,var(--accent),transparent)}
.gw-card--admin::before{background:linear-gradient(90deg,var(--gold),transparent)}
.gw-card:hover{transform:translateY(-4px);box-shadow:0 34px 80px rgba(0,0,0,.6)}
.gw-card--employee:hover{border-color:rgba(74,140,255,.4)}
.gw-card--admin:hover{border-color:rgba(214,181,109,.45)}
.gw-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.gw-badge{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.gw-badge--employee{background:rgba(74,140,255,.14);color:#8fb6ff;border:1px solid rgba(74,140,255,.3)}
.gw-badge--admin{background:rgba(214,181,109,.14);color:var(--gold2);border:1px solid rgba(214,181,109,.32)}
.gw-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px}
.gw-icon--employee{background:rgba(74,140,255,.12);color:#8fb6ff;box-shadow:inset 0 0 0 1px rgba(74,140,255,.28)}
.gw-icon--admin{background:rgba(214,181,109,.12);color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(214,181,109,.3)}
.gw-card h2{font-size:22px;font-weight:800;letter-spacing:-.3px}
.gw-card p{color:var(--muted);font-size:14px;line-height:1.65;margin:12px 0 24px;flex:1}

.gw-btn{border:0;border-radius:13px;padding:14px 18px;font-weight:800;font-size:14.5px;cursor:pointer;
  transition:transform .12s,box-shadow .18s,filter .18s}
.gw-btn:hover{transform:translateY(-1px)}
.gw-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.gw-btn.full{width:100%;margin-top:6px}
.gw-btn--employee{background:linear-gradient(135deg,var(--accent),#2b64c4);color:#fff;box-shadow:0 10px 28px rgba(74,140,255,.32)}
.gw-btn--employee:hover{box-shadow:0 14px 34px rgba(74,140,255,.45)}
.gw-btn--admin{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07111f;box-shadow:0 10px 28px rgba(214,181,109,.32)}
.gw-btn--admin:hover{box-shadow:0 14px 34px rgba(214,181,109,.45)}

/* login form panel */
.gw-formwrap{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px}
.gw-back{align-self:flex-start;background:transparent;border:0;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:4px 2px;transition:color .15s}
.gw-back:hover{color:#fff}
.gw-form-card{position:relative;overflow:hidden;padding:30px 30px 26px;border-radius:22px;
  background:linear-gradient(180deg,rgba(20,36,60,.75),rgba(10,20,36,.6));
  border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.gw-form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.gw-formwrap.is-employee .gw-form-card::before{background:linear-gradient(90deg,var(--accent),transparent)}
.gw-formwrap.is-admin .gw-form-card::before{background:linear-gradient(90deg,var(--gold),transparent)}
.gw-form-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.gw-form-head h2{font-size:20px;font-weight:800;letter-spacing:-.3px}
.gw-form-head p{color:var(--muted);font-size:13px;margin-top:3px}
.gw-warning{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:12px 14px;border-radius:12px;
  background:rgba(255,92,116,.07);border:1px solid rgba(255,92,116,.22);color:#f0a9b4;font-size:12px;line-height:1.55}
.gw-warning-ico{flex:0 0 auto;opacity:.9}

.brand{display:flex;gap:14px;align-items:center;margin-bottom:26px}
.logo{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07111f;font-weight:900;display:grid;place-items:center;font-size:18px;box-shadow:0 8px 24px rgba(214,181,109,.35)}
.brand h1{font-size:19px;letter-spacing:-.2px}
.brand p{margin:3px 0 0;color:var(--muted);font-size:12px}

.field{margin:15px 0}
.field label{display:block;color:#cdd8ea;margin-bottom:8px;font-size:13px;font-weight:500}
.field input,.field select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#08152a;color:var(--text);outline:none;font-size:14px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,181,109,.15)}
.field input[type=range]{padding:0;accent-color:var(--gold)}

.btn{border:0;border-radius:12px;padding:12px 18px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#07111f;font-weight:800;cursor:pointer;font-size:14px;transition:transform .1s,box-shadow .15s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn .ico{width:17px;height:17px}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(214,181,109,.28)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.secondary{background:#152740;color:var(--text);border:1px solid var(--line)}
.btn.secondary:hover{background:#1b3050;box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#ff5c74,#ff8095);color:#fff}
.btn.full{width:100%;margin-top:8px;padding:14px}
.error{color:var(--danger);font-size:13px;min-height:18px;margin:6px 0}
.hint{font-size:13px;min-height:18px;margin:10px 0;color:var(--muted)}
.hint.ok{color:var(--ok)}.hint.err{color:var(--danger)}
.note{color:var(--muted);font-size:12px;margin-top:22px;line-height:1.9;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.note strong{color:#cdd8ea}

/* ---------------- 403 ---------------- */
.denied-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 500px at 50% -10%,rgba(255,92,116,.14),transparent 60%),var(--bg)}
.denied-card{text-align:center;max-width:460px;background:linear-gradient(180deg,var(--panel),#0a1524);border:1px solid var(--line);border-radius:24px;padding:48px 40px;box-shadow:var(--shadow)}
.denied-code{font-size:88px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--danger),#ff9aa8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.denied-card h1{font-size:26px;margin:10px 0 12px}
.denied-card p{color:var(--muted);margin:0 0 26px}
.denied-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------- App shell ---------------- */
.layout{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#081120,#050a14);border-right:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column}
.side .brand{margin-bottom:22px;padding:0 4px}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:11px;border:1px solid transparent;background:transparent;color:#b9c7dd;cursor:pointer;font-size:14px;font-weight:500;transition:.15s}
.nav button:hover{background:rgba(255,255,255,.04);color:#fff}
.nav button.active{background:linear-gradient(135deg,rgba(214,181,109,.16),rgba(214,181,109,.05));border-color:rgba(214,181,109,.3);color:#fff}
.nav-ico{width:20px;display:inline-grid;place-items:center;font-size:14px;opacity:.9}
.side-user{display:flex;gap:12px;align-items:center;padding:12px;border-top:1px solid var(--line);margin-top:12px}
.avatar{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--accent),#2b5fb0);display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.su-name{font-size:13px;font-weight:600}
.su-role{font-size:11px;color:var(--muted)}

.main{padding:26px 30px;max-width:1500px}
.top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:24px}
.top h2{font-size:26px;font-weight:800;letter-spacing:-.4px}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
.top-actions{display:flex;gap:12px;align-items:center}
.pill{padding:7px 14px;border-radius:999px;background:rgba(214,181,109,.12);border:1px solid rgba(214,181,109,.28);color:var(--gold);font-size:12px;font-weight:600}

.loading{padding:40px;text-align:center;color:var(--muted)}
.empty{color:var(--muted);padding:22px;text-align:center}

/* cards + grids */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:linear-gradient(180deg,var(--panel),#0a1728);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.card h3{font-size:16px;margin-bottom:14px}
.section{margin-top:18px}
.metric-card{position:relative;overflow:hidden}
.metric-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.metric-label{color:var(--muted);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.metric{font-size:32px;font-weight:900;margin-top:10px;letter-spacing:-1px}
.metric.ok{color:var(--ok)}.metric.warn{color:var(--warn)}.metric.danger{color:var(--danger)}

.banner{padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.35);color:var(--warn)}
.banner.danger{background:rgba(255,92,116,.12);border-color:rgba(255,92,116,.35);color:var(--danger)}

/* tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.table th{color:#aebfd8;background:rgba(255,255,255,.02);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.table tbody tr:hover{background:rgba(255,255,255,.02)}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.badge{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;display:inline-block;background:rgba(255,255,255,.06);color:#cdd8ea}
.badge.ok{background:rgba(69,211,156,.14);color:var(--ok)}
.badge.danger{background:rgba(255,92,116,.14);color:var(--danger)}
.badge.warn{background:rgba(245,196,81,.14);color:var(--warn)}
.badge.role{background:rgba(74,140,255,.14);color:#8fb6ff}

/* toolbar / forms */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:220px;padding:11px 14px;border-radius:11px;border:1px solid var(--line);background:#08152a;color:var(--text);outline:none;font-size:14px}
.search:focus{border-color:var(--gold)}
.mini-select{padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#08152a;color:var(--text);outline:none;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.form-grid .wide{grid-column:span 2}
.row-actions{display:flex;gap:10px;margin-top:14px}
.add-form.hidden{display:none}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.mini{border:1px solid var(--line);background:#132741;color:#cdd8ea;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;transition:.15s}
.mini:hover{background:#1b3455;color:#fff}
.mini.danger{background:rgba(255,92,116,.12);border-color:rgba(255,92,116,.3);color:#ff8ea0}
.mini.danger:hover{background:rgba(255,92,116,.2)}

/* upload */
.upload-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.file-btn{cursor:pointer;display:inline-flex;align-items:center}
.file-name{color:var(--muted);font-size:13px}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,7,14,.72);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:20px}
.modal{width:100%;max-width:620px;background:linear-gradient(180deg,var(--panel),#0a1728);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.modal h3{margin-bottom:18px}

/* hero + profile */
.welcome-hero{background:radial-gradient(700px 300px at 100% -20%,rgba(74,140,255,.18),transparent 60%),linear-gradient(135deg,#0e1f38,#0a1524);border:1px solid var(--line);border-radius:20px;padding:28px 30px;margin-bottom:18px}
.welcome-hero h2{font-size:24px;font-weight:800}
.welcome-hero p{color:var(--muted);margin-top:8px}
.profile-card .pv{font-size:18px;font-weight:700;margin-top:10px}

/* ---------------- Employee Workspace ---------------- */
.ico{width:20px;height:20px;flex:0 0 auto}
.nav-ico .ico{width:18px;height:18px}

/* Clean single-column platform: slim top bar over a centered canvas. */
.emp-shell{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(900px 460px at 50% -18%,rgba(74,140,255,.12),transparent 58%),
  linear-gradient(180deg,#07101e,#050a14)}
.emp-topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);
  background:rgba(7,16,30,.82);backdrop-filter:blur(10px)}
.emp-canvas{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(18px,3vw,34px)}

/* Brand (returns home) */
.emp-brand{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;cursor:pointer;padding:4px 6px;border-radius:12px;transition:.15s}
.emp-brand:hover{background:rgba(255,255,255,.04)}
.emp-brand-logo{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:15px;color:#0a1120;background:linear-gradient(135deg,var(--gold),var(--gold2))}
.emp-brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.emp-brand-text strong{font-size:15px;font-weight:800;color:var(--text)}
.emp-brand-text small{font-size:11px;color:var(--muted)}

/* Compact employee-identity chip + profile popover */
.emp-topbar-right{display:flex;align-items:center;gap:12px}
.emp-id{position:relative}
.emp-id-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.emp-id-chip:hover,.emp-id-chip.open{border-color:rgba(214,181,109,.42);background:rgba(214,181,109,.08)}
.emp-id-ava{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#2b5fb0)}
.emp-id-ava.lg{width:46px;height:46px;font-size:15px;border-radius:14px}
.emp-id-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.emp-id-name{font-size:13px;font-weight:700;color:var(--text)}
.emp-id-role{font-size:11px;color:var(--muted)}
.emp-id-chip .ico{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.emp-id-chip.open .ico{transform:rotate(180deg)}
.emp-id-pop{position:absolute;right:0;top:calc(100% + 10px);width:300px;padding:16px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0c1a2e,#081120);box-shadow:0 24px 60px rgba(2,7,16,.6);z-index:40}
.emp-id-pop[hidden]{display:none}
.emp-id-pop-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.emp-id-pop-name{font-size:15px;font-weight:800;color:var(--text)}
.emp-id-pop-role{margin-top:5px}
.emp-id-fields{margin:0;display:flex;flex-direction:column}
.emp-id-fields>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.05)}
.emp-id-fields>div:last-child{border-bottom:0}
.emp-id-fields dt{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2)}
.emp-id-fields dd{margin:0;font-size:13px;font-weight:600;color:#dbe5f5;text-align:right}

.workspace-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:20px;padding:28px 30px;border-radius:22px;
  background:radial-gradient(620px 260px at 88% -22%,rgba(214,181,109,.17),transparent 58%),linear-gradient(135deg,#102441,#091727);
  border:1px solid rgba(214,181,109,.2);box-shadow:0 20px 60px rgba(0,0,0,.34)}
.workspace-hero h2{font-size:28px;font-weight:900;letter-spacing:-.6px;margin-top:8px}
.workspace-hero p{max-width:660px;color:var(--muted);line-height:1.6;margin:8px 0 0}
.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-grid .cap-tile{min-height:206px}

.decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.decision-card{min-height:142px}
.decision-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:8px 0 0}

.doc-workbench{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:18px;align-items:stretch}
.doc-drop{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;border-radius:22px;
  background:linear-gradient(180deg,rgba(18,40,68,.82),rgba(10,23,40,.78));border:1px dashed rgba(214,181,109,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.doc-drop.dragging{border-color:var(--gold2);background:rgba(214,181,109,.08)}
.doc-drop-icon{width:70px;height:70px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;color:var(--gold2);background:rgba(214,181,109,.12);box-shadow:inset 0 0 0 1px rgba(214,181,109,.28)}
.doc-drop-icon .ico{width:34px;height:34px}
.doc-drop h3{font-size:22px;letter-spacing:-.3px}
.doc-drop p{max-width:560px;color:var(--muted);line-height:1.65;margin:12px 0 22px}
.doc-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.doc-slot{min-height:96px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),#0a1728);color:#dce7f8;text-align:left;cursor:pointer}
.doc-slot:hover{border-color:rgba(74,140,255,.42);transform:translateY(-1px)}
.doc-slot span{color:#8fb6ff}.doc-slot strong{font-size:13.5px}.doc-slot small{color:var(--muted2);font-size:11.5px}
.exam-basis{display:flex;flex-wrap:wrap;gap:9px}.exam-basis span{padding:8px 11px;border-radius:999px;background:rgba(214,181,109,.1);border:1px solid rgba(214,181,109,.22);color:var(--gold2);font-size:12px;font-weight:700}

.module-panel{display:flex;gap:22px;align-items:center;padding:30px;border-radius:22px;background:linear-gradient(135deg,#102441,#081525);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.32)}
.module-icon{width:76px;height:76px;flex:0 0 auto;border-radius:20px;display:grid;place-items:center;color:#8fb6ff;background:rgba(74,140,255,.12);box-shadow:inset 0 0 0 1px rgba(74,140,255,.26)}
.module-icon .ico{width:36px;height:36px}
.module-panel h2{font-size:28px;letter-spacing:-.5px;margin:7px 0}
.module-panel p{color:var(--muted);line-height:1.65;margin:0 0 18px;max-width:720px}

/* ============================================================
   AI Assistant — ChatGPT / Claude-style conversation workspace
   Clean, content-first, premium banking identity.
   ============================================================ */
.chat{position:relative;display:flex;flex-direction:column;
  height:calc(100vh - 150px);min-height:480px;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,28,48,.55),rgba(8,17,30,.4));
  border:1px solid var(--line);box-shadow:0 24px 70px rgba(4,10,22,.5)}

/* top bar: current conversation + New chat / History */
.chat-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:rgba(8,17,30,.6);backdrop-filter:blur(8px)}
.chat-bar-title{display:flex;align-items:center;gap:9px;min-width:0;font-size:13.5px;font-weight:700;color:#cddaef}
.chat-bar-title .ico{width:17px;height:17px;color:#8fb6ff;flex:0 0 auto}
.chat-bar-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-bar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chat-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:#dce8ff;
  background:rgba(74,140,255,.14);border:1px solid rgba(74,140,255,.32);transition:.15s}
.chat-btn:hover{background:rgba(74,140,255,.22);border-color:rgba(74,140,255,.5)}
.chat-btn .ico{width:16px;height:16px}
.chat-icon-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  color:#aebfd8;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.15s}
.chat-icon-btn:hover{color:#dce8ff;background:rgba(255,255,255,.08);border-color:rgba(74,140,255,.4)}
.chat-icon-btn .ico{width:18px;height:18px}

/* scrolling conversation area */
.chat-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth;padding:26px clamp(16px,4vw,40px) 12px;
  display:flex;flex-direction:column;gap:26px}
.chat-scroll.is-empty{justify-content:center;align-items:center}
.chat-scroll::-webkit-scrollbar{width:10px}
.chat-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.chat-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:padding-box}

/* empty / welcome state */
.chat-empty{max-width:600px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px}
.chat-empty-orb{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;color:#0a1120;
  background:linear-gradient(135deg,#7db0ff,#4a8cff 60%,#2b64c4);
  box-shadow:0 14px 34px rgba(74,140,255,.5),inset 0 0 0 1px rgba(255,255,255,.35);animation:orbFloat 5s ease-in-out infinite}
.chat-empty-orb .ico{width:32px;height:32px}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chat-empty h2{font-size:26px;font-weight:900;letter-spacing:-.6px}
.chat-empty p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0;max-width:520px}
.chat-suggest{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:6px}
.chat-chip{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#c3d2ea;border-radius:12px;
  padding:10px 15px;font-size:12.5px;line-height:1.35;cursor:pointer;transition:.15s;font-family:inherit;text-align:left;max-width:280px}
.chat-chip:hover{background:rgba(74,140,255,.12);border-color:rgba(74,140,255,.4);color:#dce8ff;transform:translateY(-1px)}

/* a conversation turn */
.turn{display:flex;gap:14px;align-items:flex-start;max-width:820px;width:100%;margin:0 auto;animation:turnIn .28s ease}
@keyframes turnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.turn--user{justify-content:flex-end}
.bubble-user{background:linear-gradient(135deg,rgba(74,140,255,.22),rgba(74,140,255,.1));
  border:1px solid rgba(74,140,255,.3);color:#eaf1ff;
  padding:12px 16px;border-radius:16px;border-bottom-right-radius:5px;
  font-size:14.5px;line-height:1.6;max-width:84%;white-space:pre-wrap;word-wrap:break-word}
.turn-ava{width:32px;height:32px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;margin-top:2px;
  background:rgba(74,140,255,.16);color:#8fb6ff;box-shadow:inset 0 0 0 1px rgba(74,140,255,.3)}
.turn-ava .ico{width:18px;height:18px}
.turn-body{flex:1;min-width:0;padding-top:3px}

/* thinking dots */
.ai-typing{display:flex;gap:5px;padding:6px 2px}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:#5f7db0;animation:typing 1.2s infinite ease-in-out}
.ai-typing span:nth-child(2){animation-delay:.18s}.ai-typing span:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------------- Markdown rendering ---------------- */
.md{font-size:16px;line-height:1.75;color:#dbe5f5}
.md>*:first-child{margin-top:0}.md>*:last-child{margin-bottom:0}
.md p{margin:0 0 14px}
.md .md-h{color:#f0f5ff;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.md .md-h1{font-size:22px;margin:24px 0 11px}
.md .md-h2{font-size:18px;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.md .md-h3{font-size:15.5px;margin:18px 0 8px;color:#cfe0ff}
.md .md-h4{font-size:13px;margin:16px 0 7px;color:#a9c7ff;text-transform:uppercase;letter-spacing:.6px}
.md ul,.md ol{margin:9px 0 14px;padding-left:22px}
.md li{margin:6px 0;padding-left:3px}
.md li::marker{color:#7f9ac2}
.md ul ul,.md ul ol,.md ol ul,.md ol ol{margin:5px 0 5px}
.md strong{color:#fff;font-weight:700}
.md em{color:#cdd8ea}
.md del{color:var(--muted2)}
.md a{color:#8fb6ff;text-decoration:underline;text-underline-offset:2px}
.md a:hover{color:#b7d0ff}
.md code{background:rgba(74,140,255,.14);color:#a9c7ff;padding:1.5px 6px;border-radius:6px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.8px}
.md .md-pre{margin:12px 0;background:#081221;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;overflow-x:auto}
.md .md-pre code{background:none;color:#d6e2f5;padding:0;font-size:12.8px;line-height:1.6}
.md .md-quote{margin:12px 0;padding:8px 16px;border-left:3px solid var(--gold);
  background:rgba(214,181,109,.07);border-radius:0 10px 10px 0;color:#cdd8ea}
.md .md-quote p{margin:4px 0}
.md .md-hr{border:0;border-top:1px solid var(--line);margin:18px 0}
/* tables & decision tables */
.md .md-table-wrap{margin:14px 0;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.md .md-table{border-collapse:collapse;width:100%;font-size:13.5px}
.md .md-table th,.md .md-table td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.md .md-table th{background:rgba(74,140,255,.1);color:#dce8ff;font-weight:700;white-space:nowrap;
  border-bottom:1px solid rgba(74,140,255,.28)}
.md .md-table tr:last-child td{border-bottom:0}
.md .md-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.md .md-table tbody tr:hover{background:rgba(74,140,255,.06)}
/* live streaming caret */
.md--streaming>*:last-child::after{content:"";display:inline-block;width:8px;height:15px;margin-left:3px;
  vertical-align:-2px;background:#8fb6ff;border-radius:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ---------------- Enterprise answer cards ---------------- */
.answer{display:flex;flex-direction:column;gap:13px}
.answer .ans-lede{font-size:16px;line-height:1.75;color:#dbe5f5;margin:1px 0 3px}
/* per-accent palette (calm enterprise tones — no bright gradients) */
.ans-blue{--acc:#60a5fa;--acc-soft:rgba(96,165,250,.11)}
.ans-emerald{--acc:#34d399;--acc-soft:rgba(52,211,153,.11)}
.ans-amber{--acc:#fbbf24;--acc-soft:rgba(251,191,36,.12)}
.ans-purple{--acc:#a78bfa;--acc-soft:rgba(167,139,250,.12)}
.ans-red{--acc:#f87171;--acc-soft:rgba(248,113,113,.12)}
.ans-slate{--acc:#94a3b8;--acc-soft:rgba(148,163,184,.10)}
.ans-card{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0));
  box-shadow:0 8px 26px rgba(4,10,22,.28);animation:turnIn .3s ease}
.ans-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--acc-soft);
  border-bottom:1px solid var(--line);list-style:none;margin:0}
.ans-ico{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  color:var(--acc);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ans-ico .ico{width:17px;height:17px}
.ans-title{flex:1;min-width:0;font-size:18px;font-weight:700;letter-spacing:-.2px;color:#f0f5ff}
.ans-body{padding:15px 17px 17px}
.ans-body>*:last-child{margin-bottom:0}
/* progressive disclosure (collapsed deep-dive sections) */
.ans-collap{cursor:pointer}
.ans-collap>.ans-head{cursor:pointer;border-bottom:0;transition:background .15s}
.ans-collap[open]>.ans-head{border-bottom:1px solid var(--line)}
.ans-collap:not([open]):hover>.ans-head{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ans-collap>.ans-head::-webkit-details-marker{display:none}
.ans-chev{flex:0 0 auto;color:var(--muted);transition:transform .2s}
.ans-chev .ico{width:18px;height:18px}
.ans-collap[open]>.ans-head .ans-chev{transform:rotate(180deg)}

/* decision box — large, unmistakable HONOUR / REFUSE verdict */
.ans-decision{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:16px;
  border:1px solid var(--dec-line);background:var(--dec-bg);box-shadow:0 10px 30px rgba(4,10,22,.3);animation:turnIn .3s ease}
.ans-decision--honour{--dec-bg:rgba(52,211,153,.10);--dec-line:rgba(52,211,153,.38);--dec-c:#34d399}
.ans-decision--refuse{--dec-bg:rgba(248,113,113,.10);--dec-line:rgba(248,113,113,.4);--dec-c:#f87171}
.ans-decision--warn{--dec-bg:rgba(251,191,36,.10);--dec-line:rgba(251,191,36,.38);--dec-c:#fbbf24}
.ans-decision--neutral{--dec-bg:rgba(96,165,250,.10);--dec-line:rgba(96,165,250,.36);--dec-c:#60a5fa}
.ans-decision-ico{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  color:#07131f;background:var(--dec-c);box-shadow:0 6px 18px color-mix(in srgb,var(--dec-c) 40%,transparent)}
.ans-decision-ico .ico{width:25px;height:25px;stroke-width:2}
.ans-decision-inner{flex:1;min-width:0}
.ans-decision-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}
.ans-decision-verdict{display:block;font-size:30px;font-weight:900;line-height:1.08;letter-spacing:-.6px;color:var(--dec-c);margin:3px 0 7px}
.ans-decision-note{font-size:15px;line-height:1.7;color:#cdd8ea}
.ans-decision-note>*:last-child{margin-bottom:0}

/* rule / article badges */
.tf-badge{display:inline-block;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  font-weight:700;padding:1px 7px;border-radius:6px;letter-spacing:.2px;white-space:nowrap;line-height:1.55;vertical-align:baseline}
.tf-badge--rule{background:rgba(96,165,250,.16);color:#a8ccff;box-shadow:inset 0 0 0 1px rgba(96,165,250,.32)}
.tf-badge--art{background:rgba(167,139,250,.15);color:#cbbcff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.32)}
.tf-badge--para{background:rgba(148,163,184,.15);color:#cdd8ea;box-shadow:inset 0 0 0 1px rgba(148,163,184,.28)}
.ans-decision-verdict .tf-badge,.ans-title .tf-badge{all:unset}

@media(max-width:640px){
  .ans-head{padding:11px 13px}
  .ans-body{padding:13px 14px 15px}
  .ans-title{font-size:16.5px}
  .ans-decision{flex-direction:column;gap:12px;padding:16px}
  .ans-decision-verdict{font-size:26px}
  .md{font-size:15.5px}
}

/* ---------------- composer dock ---------------- */
.chat-dock{padding:12px clamp(16px,4vw,40px) 14px;border-top:1px solid var(--line);background:rgba(8,17,30,.55)}
.chat-composer{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;
  padding:10px 10px 10px 18px;border-radius:16px;
  background:rgba(6,14,28,.82);border:1px solid rgba(74,140,255,.28);transition:border-color .15s,box-shadow .15s}
.chat-composer:focus-within{border-color:rgba(74,140,255,.55);box-shadow:0 0 0 3px rgba(74,140,255,.16)}
.chat-composer textarea{width:100%;resize:none;border:0;background:transparent;color:var(--text);font-family:inherit;
  font-size:15px;line-height:1.55;padding:6px 0 2px;outline:none;max-height:200px}
.chat-composer textarea::placeholder{color:var(--muted2)}
.chat-composer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-modes{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:3px}
.chat-mode{border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:8px;cursor:pointer;transition:.14s}
.chat-mode:hover{color:#cdd8ea}
.chat-mode.active{background:linear-gradient(135deg,rgba(74,140,255,.28),rgba(74,140,255,.14));color:#eaf1ff;
  box-shadow:inset 0 0 0 1px rgba(74,140,255,.35)}
.ai-send{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--accent),#2b64c4);box-shadow:0 8px 22px rgba(74,140,255,.4);transition:transform .12s,box-shadow .15s,filter .15s}
.ai-send:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(74,140,255,.55)}
.ai-send:disabled{opacity:.5;cursor:not-allowed}
.chat-disclaimer{max-width:820px;margin:9px auto 0;text-align:center;font-size:11px;color:var(--muted2);line-height:1.5}

/* ---------------- history drawer ---------------- */
.chat-history-scrim{position:fixed;inset:0;z-index:40;background:rgba(3,7,15,.55);backdrop-filter:blur(2px)}
.chat-history{position:fixed;top:0;right:0;z-index:41;width:min(360px,92vw);height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0c1a2e,#08111e);border-left:1px solid var(--line);
  box-shadow:-24px 0 70px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .22s ease}
.chat-history.open{transform:translateX(0)}
.chat-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.chat-history-head h3{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800}
.chat-history-head h3 .ico{width:18px;height:18px;color:#8fb6ff}
.chat-history-list{flex:1;overflow-y:auto;padding:10px}
.chat-history-empty{color:var(--muted2);font-size:13px;line-height:1.6;text-align:center;padding:40px 20px}
.chat-history-item{display:flex;align-items:stretch;gap:4px;border-radius:12px;transition:.14s}
.chat-history-item:hover{background:rgba(255,255,255,.04)}
.chat-history-item.active{background:rgba(74,140,255,.12)}
.chat-history-open{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit}
.chat-history-ico{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  color:#8fb6ff;background:rgba(74,140,255,.12)}
.chat-history-ico .ico{width:16px;height:16px}
.chat-history-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.chat-history-title{font-size:13.5px;font-weight:600;color:#dce8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-history-time{font-size:11px;color:var(--muted2)}
.chat-history-del{width:34px;flex:0 0 auto;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;
  color:var(--muted2);border-radius:10px;opacity:0;transition:.14s}
.chat-history-item:hover .chat-history-del{opacity:1}
.chat-history-del:hover{color:var(--danger);background:rgba(255,92,116,.12)}
.chat-history-del .ico{width:16px;height:16px}

/* section heads */
.ws-section-head{display:flex;align-items:baseline;gap:12px;margin:26px 2px 14px}
.ws-section-head h3{font-size:16px;font-weight:800;letter-spacing:-.2px}
.ws-hint{color:var(--muted2);font-size:12.5px}

/* quick actions */
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick-action{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;cursor:pointer;text-align:left;font-family:inherit;font-size:14px;font-weight:600;color:#dbe5f5;
  background:linear-gradient(180deg,var(--panel),#0a1728);border:1px solid var(--line);transition:.16s}
.quick-action:hover{border-color:rgba(74,140,255,.4);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.qa-ico{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;color:#8fb6ff;background:rgba(74,140,255,.12);box-shadow:inset 0 0 0 1px rgba(74,140,255,.24)}

/* capability tiles */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:22px;border-radius:16px;cursor:pointer;text-align:left;font-family:inherit;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),#0a1728);border:1px solid var(--line);transition:.18s}
.cap-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),transparent);opacity:0;transition:opacity .2s}
.cap-tile:hover{transform:translateY(-4px);border-color:rgba(74,140,255,.4);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.cap-tile:hover::before{opacity:1}
.cap-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#8fb6ff;margin-bottom:16px;
  background:rgba(74,140,255,.1);box-shadow:inset 0 0 0 1px rgba(74,140,255,.22)}
.cap-ico .ico{width:24px;height:24px}
.cap-title{font-size:15.5px;font-weight:800;color:#eef4ff;letter-spacing:-.2px}
.cap-desc{font-size:13px;line-height:1.55;color:var(--muted);margin-top:8px;flex:1}
.cap-go{font-size:12.5px;font-weight:700;color:#7fa8f0;margin-top:16px;opacity:.65;transition:opacity .15s,transform .15s}
.cap-tile:hover .cap-go{opacity:1;transform:translateX(3px)}
.lib-grid .cap-ico{color:var(--gold2);background:rgba(214,181,109,.1);box-shadow:inset 0 0 0 1px rgba(214,181,109,.24)}
.lib-tag{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.lib-grid .cap-go{color:var(--gold2)}
.lib-grid .cap-tile::before{background:linear-gradient(90deg,var(--gold),transparent)}
.lib-grid .cap-tile:hover{border-color:rgba(214,181,109,.42)}
/* AI Assistant home card — the primary entry into the conversational assistant */
.cap-tile--ai{background:linear-gradient(180deg,rgba(74,140,255,.16),#0a1728);border-color:rgba(74,140,255,.34)}
.cap-tile--ai::before{opacity:1}
.cap-tile--ai .cap-ico{background:rgba(74,140,255,.2);color:#bcd4ff;box-shadow:inset 0 0 0 1px rgba(74,140,255,.4)}
.cap-tile--ai .cap-go{opacity:1;color:#a9c6ff}
.ws-lib-hero{margin-bottom:20px}

/* two-column panels */
.ws-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.ws-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#8fb6ff}
.ws-panel-head h3{font-size:15px;font-weight:800;color:var(--text)}
.ws-panel-head .ico{width:18px;height:18px}
.activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.activity li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.activity li:last-child{border-bottom:0}
.act-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--muted2)}
.act-dot.act-success{background:var(--ok)}.act-dot.act-failed,.act-dot.act-locked{background:var(--danger)}
.act-body{flex:1;min-width:0}
.act-type{font-size:13.5px;font-weight:600;color:#dbe5f5}
.act-detail{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-time{font-size:11.5px;color:var(--muted2);white-space:nowrap}
.suggest-list{display:flex;flex-direction:column;gap:8px}
.suggest-item{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;cursor:pointer;text-align:left;font-family:inherit;font-size:13.5px;line-height:1.5;color:#cbd7ea;
  background:rgba(255,255,255,.025);border:1px solid var(--line);transition:.15s}
.suggest-item:hover{background:rgba(74,140,255,.1);border-color:rgba(74,140,255,.32);color:#eaf1ff}
.suggest-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;margin-top:6px;background:linear-gradient(135deg,var(--gold),var(--gold2))}

/* profile page */
.profile-hero{display:flex;align-items:center;gap:20px}
.profile-avatar{width:72px;height:72px;flex:0 0 auto;border-radius:20px;display:grid;place-items:center;font-size:24px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--accent),#2b5fb0);box-shadow:0 12px 30px rgba(74,140,255,.4)}
.profile-id h2{font-size:22px;font-weight:800}
.profile-sub{color:var(--muted);font-size:13.5px;margin-top:5px}
.profile-tags{display:flex;gap:8px;margin-top:12px}

/* ---------------- Top bar controls (New Chat / Language / Connection / Profile) ---------------- */
.top-actions{flex-wrap:wrap;justify-content:flex-end}
.top-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;border:1px solid var(--line);background:#132743;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.top-btn .ico{width:16px;height:16px}
.top-btn:hover{border-color:rgba(74,140,255,.42);background:#183253}
.top-lang{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:11px;border:1px solid var(--line);background:#0e1f37;color:var(--muted)}
.top-lang .ico{width:16px;height:16px;color:#8fb6ff}
.top-lang select{border:0;background:transparent;color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;outline:none}
.top-lang select option{color:#07111f}
.conn{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12.5px;font-weight:600;color:var(--muted)}
.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--muted2);box-shadow:0 0 0 0 rgba(69,211,156,.5)}
.conn-dot.online{background:var(--ok);animation:connpulse 2.4s ease-out infinite}
.conn-dot.offline{background:var(--danger)}
@keyframes connpulse{0%{box-shadow:0 0 0 0 rgba(69,211,156,.45)}70%{box-shadow:0 0 0 7px rgba(69,211,156,0)}100%{box-shadow:0 0 0 0 rgba(69,211,156,0)}}
.top-user{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.top-user:hover{border-color:rgba(214,181,109,.4);background:rgba(214,181,109,.08)}
.top-ava{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#2b5fb0)}
.top-user-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.top-user-name{font-size:13px;font-weight:700;color:var(--text)}
.top-user-role{font-size:11px;color:var(--muted)}

/* ---------------- Homepage: employee info panel ---------------- */
.emp-info{margin-bottom:20px}
.emp-info-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.emp-info-cell{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.emp-info-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.emp-info-val{font-size:14px;font-weight:700;color:var(--text);word-break:break-word}

/* ---------------- Homepage: ask box + upload ---------------- */
.home-work{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);gap:16px;margin-bottom:6px}
.home-ask{display:flex;flex-direction:column}
.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.mode-pill{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:#cbd7ea;cursor:pointer;font-family:inherit;transition:.15s}
.mode-pill strong{font-size:13.5px;font-weight:800;color:var(--text)}
.mode-pill small{font-size:11px;color:var(--muted)}
.mode-pill:hover{border-color:rgba(74,140,255,.4)}
.mode-pill.active{background:linear-gradient(135deg,rgba(74,140,255,.18),rgba(74,140,255,.05));border-color:rgba(74,140,255,.45)}
.mode-pill.active strong{color:#dce9ff}
.home-composer{margin-bottom:14px}
.home-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#cbd7ea;font-size:12.5px;font-family:inherit;cursor:pointer;line-height:1.3;transition:.15s}
.chip:hover{border-color:rgba(214,181,109,.4);background:rgba(214,181,109,.08);color:#fff}
.home-upload{display:flex;flex-direction:column}
.home-drop-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:14px 8px 18px;border-radius:16px;border:1.5px dashed var(--line);background:rgba(255,255,255,.015);margin-bottom:14px;transition:.15s}
.home-upload.dragging .home-drop-body{border-color:var(--gold2);background:rgba(214,181,109,.08)}
.home-drop-body .doc-drop-icon{width:56px;height:56px;margin:0}
.home-drop-body .doc-drop-icon .ico{width:28px;height:28px}
.home-drop-body p{color:var(--muted);font-size:13px;line-height:1.55;margin:0;max-width:320px}
.home-upload .file-name{font-size:12.5px;color:var(--muted2)}

/* ---------------- Homepage: AI-first hero ---------------- */
.tf-home{position:relative;overflow:hidden;border-radius:26px;min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:56px 32px;
  background:linear-gradient(160deg,#12294a 0%,#0c1c33 46%,#070f1e 100%);
  border:1px solid rgba(214,181,109,.18);box-shadow:0 30px 90px rgba(3,8,18,.6),inset 0 1px 0 rgba(255,255,255,.05)}
/* premium banking background — layered light, gold sheen and a fine grid */
.tf-home-bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 340px at 12% -8%,rgba(74,140,255,.28),transparent 60%),
    radial-gradient(620px 320px at 92% 8%,rgba(214,181,109,.16),transparent 58%),
    radial-gradient(900px 500px at 50% 128%,rgba(74,140,255,.12),transparent 62%)}
.tf-home-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(900px 620px at 50% 32%,#000,transparent 82%)}
.tf-home-inner{position:relative;z-index:1;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

.tf-home-brand{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px}
.tf-home-orb{width:56px;height:56px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;color:#0a1120;
  background:linear-gradient(135deg,#7db0ff,#4a8cff 60%,#2b64c4);
  box-shadow:0 14px 34px rgba(74,140,255,.5),inset 0 0 0 1px rgba(255,255,255,.35);animation:orbFloat 5s ease-in-out infinite}
.tf-home-orb .ico{width:28px;height:28px}
.tf-home-brandtext{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.tf-home-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tf-home-bank{font-size:12px;font-weight:600;color:var(--muted)}

.tf-home-title{font-size:clamp(30px,4.4vw,46px);font-weight:900;letter-spacing:-1.1px;line-height:1.08;margin:0;
  background:linear-gradient(90deg,#f2f7ff,#cddcff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tf-home-greet{color:var(--muted);font-size:15px;line-height:1.6;margin:14px 0 0;max-width:600px}

.tf-mode{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:30px 0 16px}
.tf-mode .mode-pill{align-items:center;text-align:center}

.tf-composer{width:100%;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:20px;
  background:rgba(6,14,28,.74);border:1px solid rgba(74,140,255,.3);box-shadow:0 18px 50px rgba(3,8,18,.5);transition:border-color .15s,box-shadow .15s}
.tf-composer:focus-within{border-color:rgba(74,140,255,.6);box-shadow:0 0 0 3px rgba(74,140,255,.16),0 18px 50px rgba(3,8,18,.5)}
.tf-composer.dragging{border-color:var(--gold2);background:rgba(214,181,109,.08)}
.tf-composer textarea{width:100%;resize:none;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:16px;line-height:1.55;padding:8px 8px 2px;outline:none;max-height:200px}
.tf-composer textarea::placeholder{color:var(--muted2)}
.tf-composer-bar{display:flex;align-items:center;gap:12px}
.tf-composer-spacer{flex:1;min-width:0;font-size:12.5px;color:var(--muted2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-upload{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:600;color:#cdd8ea;
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.15s}
.tf-upload:hover{border-color:rgba(214,181,109,.45);background:rgba(214,181,109,.08);color:#fff}
.tf-upload .ico{width:17px;height:17px;color:var(--gold2)}

/* ---------------- Responsive ---------------- */
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr 1fr}
  .quick-row{grid-template-columns:repeat(2,1fr)}.cap-grid{grid-template-columns:repeat(2,1fr)}
  .home-grid,.decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-workbench{grid-template-columns:1fr}
  .emp-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-work{grid-template-columns:1fr}}
@media(max-width:820px){
  .gw-cards{grid-template-columns:1fr;gap:16px}
  .gw-brandtext h1{font-size:22px}
  .gw-card p{margin-bottom:20px}
}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row;align-items:center;flex-wrap:wrap;padding:14px 16px;position:sticky;top:0;z-index:20}
  .side .brand{margin:0}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3}
  .nav button{width:auto}
  .side-user{border-top:0;margin:0}
  .main{padding:18px 16px}
  .ws-columns{grid-template-columns:1fr}
}
@media(max-width:640px){
  .grid-4,.grid-3,.form-grid{grid-template-columns:1fr}
  .top{flex-direction:column}
  .top-actions{width:100%;justify-content:flex-start}
  .emp-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-row{grid-template-columns:1fr}
  .tf-home{min-height:auto;padding:36px 18px;border-radius:20px}
  .tf-mode{grid-template-columns:repeat(2,1fr)}
  .emp-brand-text small{display:none}
  .emp-id-meta{display:none}
  .emp-id-pop{width:min(300px,86vw)}
  .form-grid .wide{grid-column:span 1}
  .gw{padding:28px 16px}
  .gw-form-card{padding:24px 20px}
  .gw-brand{flex-direction:column;gap:12px}
  .gw-brandtext{text-align:center}
  .quick-row,.cap-grid,.lib-grid{grid-template-columns:1fr}
  .workspace-hero{flex-direction:column;align-items:flex-start;padding:24px 20px}
  .home-grid,.decision-grid,.doc-slots{grid-template-columns:1fr}
  .doc-drop{min-height:300px;padding:26px 18px}
  .module-panel{align-items:flex-start;flex-direction:column;padding:24px 20px}
  .chat{height:calc(100vh - 120px);border-radius:16px}
  .chat-empty h2{font-size:22px}
  .bubble-user{max-width:100%}
  .chat-btn span{display:none}
  .chat-btn{padding:9px 11px}
  .chat-modes{flex-wrap:wrap}
  .profile-hero{flex-direction:column;text-align:center}
}

/* ------------------------------------------------------------------ */
/* Access approval: Request Access flow + admin request queue          */
/* ------------------------------------------------------------------ */
.hidden{display:none !important}

/* Generic link-style button (used on the gateway + auth forms). */
.gw-link{background:transparent;border:0;color:var(--gold);font-weight:700;font-size:13.5px;cursor:pointer;padding:0;font-family:inherit;text-decoration:none;transition:color .15s}
.gw-link:hover{color:var(--gold2);text-decoration:underline}

/* "Request Access" line under the gateway cards. */
.gw-request{margin-top:26px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  color:var(--muted);font-size:14px}
.gw-altline{margin-top:16px;text-align:center;color:var(--muted);font-size:13px}

/* Wider form card for the multi-field registration form. */
.gw-formwrap--wide{max-width:720px}
.gw-formwrap--wide .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.field textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#08152a;color:var(--text);outline:none;font-size:14px;font-family:inherit;resize:vertical;transition:border-color .15s,box-shadow .15s}
.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,181,109,.15)}

/* Registration success confirmation. */
.gw-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:14px 6px 4px}
.gw-success-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;
  background:rgba(69,211,156,.14);color:var(--ok);border:1px solid rgba(69,211,156,.4)}
.gw-success p{color:var(--text);font-size:15px;line-height:1.6;max-width:460px;margin:0}

/* Notification badge on the Access Requests nav item. */
.nav-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:auto;
  border-radius:999px;background:var(--danger);color:#fff;font-size:11.5px;font-weight:800;line-height:1}

/* Access request cards. */
.req-list{display:flex;flex-direction:column;gap:16px}
.req-card{padding:22px 22px 18px}
.req-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.req-head h3{font-size:18px;font-weight:800;letter-spacing:-.2px}
.req-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 22px;margin-bottom:14px}
.req-grid > div{display:flex;flex-direction:column;gap:3px}
.rk{color:var(--muted2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rv{color:var(--text);font-size:14px}
.req-reason{border-top:1px solid var(--line);padding-top:12px;margin-bottom:6px}
.req-reason p{color:#cdd8ea;font-size:14px;line-height:1.6;margin:5px 0 0}
.req-note{margin:6px 0 4px;padding:9px 12px;border-radius:10px;background:rgba(245,196,81,.1);
  border:1px solid rgba(245,196,81,.28);color:var(--warn);font-size:13px}

@media(max-width:560px){
  .gw-formwrap--wide .form-grid{grid-template-columns:1fr}
}