/* ═══════════════════════════════════════════════════════════
   ROOT DESIGN TOKENS  — same palette as USIEF ERP v8
   ═══════════════════════════════════════════════════════════ */
:root {
  --navy:#253287; --navy-dark:#1a2460; --navy-light:#3a4aa3;
  --gold:#faa84f; --gold-dark:#e8923a;
  --bg:#f0f3fc; --surface:#ffffff; --border:#dde3f3;
  --text:#111827; --text-muted:#6272a4; --text-dim:#9fa8c7;
  --sky:#dbeeff; --sky-mid:#b8dcff;
  --success:#16a34a; --warn:#d97706; --danger:#dc2626; --info:#0ea5e9;
  --shadow-1:0 1px 4px rgba(37,50,135,.08);
  --shadow-2:0 4px 20px rgba(37,50,135,.13);
  --shadow-3:0 8px 32px rgba(37,50,135,.18);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --font:'Plus Jakarta Sans',sans-serif;
}

/* ═══════════════ LAYOUT (Reference Page Only) ═══════════════ */
.page-wrap{display:flex;min-height:100vh;}

/* ═══════════════ TOP BAR (Reference Page Only) ═══════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:200;
  background:linear-gradient(90deg,var(--navy-dark) 0%,var(--navy) 100%);
  display:flex;align-items:center;padding:0 20px 0 16px;gap:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.tb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.tb-logo-box{
  width:34px;height:34px;background:#fff;border-radius:9px;
  display:grid;place-items:center;font-weight:800;font-size:.75rem;
  color:var(--navy);letter-spacing:-.5px;
}
.tb-brand{font-size:.85rem;font-weight:800;color:#fff;letter-spacing:-.01em;}
.tb-brand span{color:var(--gold);}
.tb-sep{width:1px;height:24px;background:rgba(255,255,255,.15);margin:0 4px;}
.tb-page-title{font-size:.82rem;font-weight:600;color:#ffffff;}
.tb-spacer{flex:1;}
.tb-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07);display:grid;place-items:center;cursor:pointer;
  color:#ffffff;font-size:.82rem;transition:.15s;position:relative;
}
.icon-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.dot-badge{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  border:1.5px solid var(--navy-dark);position:absolute;top:4px;right:4px;
}
.tb-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:grid;place-items:center;font-weight:800;font-size:.72rem;
  color:var(--navy-dark);cursor:pointer;border:2px solid rgba(255,255,255,.2);
}

/* ═══════════════ MAIN CONTENT ═══════════════ */
.main{margin-top:56px;flex:1;overflow-y:auto;}
.content{max-width:1100px;margin:0 auto;padding:32px 24px 64px;}

/* ═══════════════ PAGE HEADER ═══════════════ */
.page-header{margin-bottom:36px;}
.pg-breadcrumb{font-size:.72rem;color:var(--text-dim);margin-bottom:6px;display:flex;gap:6px;align-items:center;}
.pg-breadcrumb span{color:var(--text-muted);}
.pg-title{font-size:1.7rem;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.pg-sub{font-size:.85rem;color:var(--text-muted);margin-top:5px;}

/* ═══════════════ SECTION HEADERS ═══════════════ */
.section{margin-bottom:48px;}
.section-title{
  font-size:1rem;font-weight:800;color:var(--text);letter-spacing:-.01em;
  margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.section-title::after{content:'';flex:1;height:1.5px;background:var(--border);}
.section-desc{font-size:.8rem;color:var(--text-muted);margin-bottom:20px;}

/* ═══════════════ DEMO ROW ═══════════════ */
.demo-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
.demo-col{display:flex;flex-direction:column;gap:12px;}

/* ═══════════════ COPY WRAPPER ═══════════════ */
.copy-wrap{position:relative;}
.copy-wrap:hover .copy-btn{opacity:1;}
.copy-btn{
  position:absolute;top:8px;right:8px;
  background:var(--navy);color:#fff;border:none;
  border-radius:6px;padding:4px 9px;font-size:.68rem;font-weight:700;
  cursor:pointer;opacity:0;transition:.15s;font-family:var(--font);
  display:flex;align-items:center;gap:4px;z-index:10;
}
.copy-btn:hover{background:var(--navy-light);}
.copy-btn.copied{background:var(--success);}

/* ─────────────────────────────────────────────
   ELEMENT STYLES  (copy-paste ready, self-contained)
   ───────────────────────────────────────────── */

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font);font-weight:700;font-size:.82rem;cursor:pointer;
  border:none;border-radius:9px;padding:9px 18px;text-decoration:none;
  transition:all .17s;white-space:nowrap;letter-spacing:-.01em;
}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-light));color:#fff;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,50,135,.32);}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-dark);}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(250,168,79,.38);}
.btn-ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text-muted);}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);}
.btn-danger{background:rgba(220,38,38,.1);color:var(--danger);border:1.5px solid rgba(220,38,38,.2);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-success{background:rgba(22,163,74,.1);color:var(--success);border:1.5px solid rgba(22,163,74,.2);}
.btn-success:hover{background:var(--success);color:#fff;}
.btn-sm{padding:6px 13px;font-size:.76rem;border-radius:7px;}
.btn-lg{padding:12px 24px;font-size:.9rem;border-radius:11px;}
.btn-icon{padding:9px;width:37px;height:37px;}
.btn-icon.btn-sm{padding:6px;width:30px;height:30px;}

/* ── BADGES / CHIPS ── */
.badge{
  font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge.ok{background:rgba(22,163,74,.1);color:var(--success);}
.badge.wait{background:rgba(217,119,6,.1);color:var(--warn);}
.badge.bad{background:rgba(220,38,38,.08);color:var(--danger);}
.badge.info{background:rgba(37,50,135,.1);color:var(--navy);}
.badge.sky{background:var(--sky);color:var(--navy);}
.badge.mute{background:var(--bg);color:var(--text-muted);}
.badge.gold{background:rgba(250,168,79,.18);color:var(--gold-dark);}
.badge.no-dot::before{display:none;}

/* ── TAGS / PILLS ── */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:999px;padding:4px 11px;font-size:.74rem;font-weight:600;color:var(--text-muted);
}
.tag i{font-size:.7rem;}
.tag .tag-close{cursor:pointer;opacity:.6;}
.tag .tag-close:hover{opacity:1;color:var(--danger);}
.tag.navy{background:var(--sky);border-color:var(--sky-mid);color:var(--navy);}
.tag.gold{background:rgba(250,168,79,.14);border-color:rgba(250,168,79,.4);color:var(--gold-dark);}

/* ── CARDS ── */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--border);}
.card-head h3{font-size:.92rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.card-body{padding:18px;}

/* KPI / STAT CARD */
.kpi-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:10px;min-width:190px;}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;}
.kpi-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:.95rem;}
.kpi-ic.navy{background:rgba(37,50,135,.1);color:var(--navy);}
.kpi-ic.gold{background:rgba(250,168,79,.18);color:var(--gold-dark);}
.kpi-ic.green{background:rgba(22,163,74,.1);color:var(--success);}
.kpi-ic.red{background:rgba(220,38,38,.08);color:var(--danger);}
.kpi-val{font-size:1.95rem;font-weight:800;color:var(--text);line-height:1;}
.kpi-lbl{font-size:.77rem;color:var(--text-muted);font-weight:600;}
.kpi-delta{font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:3px;}
.kpi-delta.up{color:var(--success);}
.kpi-delta.dn{color:var(--danger);}

/* ── FORM ELEMENTS ── */
.fld{margin-bottom:16px;}
.fld label{display:block;font-size:.76rem;font-weight:700;color:var(--text-muted);margin-bottom:6px;letter-spacing:.3px;}
.fld label .req{color:var(--danger);margin-left:2px;}
.inp-wrap{position:relative;}
.inp-wrap .inp-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:.8rem;pointer-events:none;z-index:1;}
.inp{
  width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;
  background:var(--surface);font-family:var(--font);font-size:.84rem;color:var(--text);
  transition:.17s;outline:none;
}
.inp-wrap .inp{padding-left:37px;}
.inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(37,50,135,.1);}
.inp:disabled{background:var(--bg);color:var(--text-dim);cursor:not-allowed;}
.inp.error{border-color:var(--danger);}
.inp.success{border-color:var(--success);}
.fld-hint{font-size:.72rem;color:var(--text-dim);margin-top:5px;}
.fld-err{font-size:.72rem;color:var(--danger);margin-top:5px;display:flex;align-items:center;gap:4px;}

/* SELECT */
.sel{
  appearance:none;width:100%;padding:10px 36px 10px 13px;
  border:1.5px solid var(--border);border-radius:9px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%239fa8c7' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family:var(--font);font-size:.84rem;color:var(--text);cursor:pointer;outline:none;
  transition:.17s;
}
.sel:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(37,50,135,.1);}

/* TEXTAREA */
.tarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;
  background:var(--surface);font-family:var(--font);font-size:.84rem;color:var(--text);
  resize:vertical;min-height:90px;outline:none;transition:.17s;
}
.tarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(37,50,135,.1);}

/* CHECKBOX & RADIO */
.check-row,.radio-row{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.84rem;font-weight:500;color:var(--text);user-select:none;}
.check-box,.radio-box{
  width:18px;height:18px;border:2px solid var(--border);border-radius:5px;
  background:var(--surface);display:grid;place-items:center;flex-shrink:0;transition:.17s;
}
.radio-box{border-radius:50%;}
.check-row input[type=checkbox],.radio-row input[type=radio]{display:none;}
.check-row input:checked ~ .check-box{background:var(--navy);border-color:var(--navy);}
.check-row input:checked ~ .check-box::after{content:'✓';color:#fff;font-size:.68rem;font-weight:900;}
.radio-row input:checked ~ .radio-box{border-color:var(--navy);}
.radio-row input:checked ~ .radio-box::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--navy);}

/* TOGGLE SWITCH */
.toggle-wrap{display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:500;color:var(--text);}
.toggle{position:relative;width:40px;height:22px;}
.toggle input{display:none;}
.toggle-track{
  position:absolute;inset:0;background:var(--border);border-radius:999px;
  cursor:pointer;transition:.2s;
}
.toggle input:checked ~ .toggle-track{background:var(--navy);}
.toggle-thumb{
  position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle input:checked ~ .toggle-track .toggle-thumb{transform:translateX(18px);}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1.5px solid var(--border);}
.tbl{width:100%;border-collapse:collapse;}
.tbl thead th{
  font-size:.68rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-dim);padding:12px 16px 10px;
  border-bottom:1.5px solid var(--border);text-align:left;white-space:nowrap;
  background:var(--bg);
}
.tbl thead th:first-child{border-radius:var(--radius-lg) 0 0 0;}
.tbl thead th:last-child{border-radius:0 var(--radius-lg) 0 0;}
.tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:.84rem;vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:var(--bg);}
.tbl .td-avatar{display:flex;align-items:center;gap:9px;}
.tbl .td-avatar .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-light));display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:800;flex-shrink:0;}
.tbl .td-name{font-weight:700;font-size:.84rem;}
.tbl .td-sub{font-size:.72rem;color:var(--text-dim);}
.tbl .col-right{text-align:right;}
.tbl-actions{display:flex;gap:6px;justify-content:flex-end;}

/* ── DROPDOWN ── */
.dd-wrap{position:relative;display:inline-block;}
.dd-trigger{display:inline-flex;align-items:center;gap:7px;}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--surface);border:1.5px solid var(--border);border-radius:13px;
  box-shadow:var(--shadow-3);min-width:200px;z-index:300;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;padding:6px;
}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
.dd-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:.83rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:.14s;
}
.dd-item:hover{background:var(--sky);color:var(--navy);}
.dd-item i{width:16px;text-align:center;font-size:.8rem;}
.dd-item.danger:hover{background:rgba(220,38,38,.07);color:var(--danger);}
.dd-sep{height:1px;background:var(--border);margin:4px 0;}

/* ── ACCORDION ── */
.accordion{border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.acc-item{border-bottom:1px solid var(--border);}
.acc-item:last-child{border-bottom:none;}
.acc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;background:var(--surface);
  transition:.15s;user-select:none;
}
.acc-head:hover{background:var(--bg);}
.acc-head-left{display:flex;align-items:center;gap:10px;}
.acc-head-ic{width:30px;height:30px;border-radius:8px;background:var(--sky);color:var(--navy);display:grid;place-items:center;font-size:.8rem;flex-shrink:0;}
.acc-title{font-size:.87rem;font-weight:700;color:var(--text);}
.acc-arrow{color:var(--text-dim);font-size:.75rem;transition:transform .2s;}
.acc-item.open .acc-arrow{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc-item.open .acc-body{max-height:400px;}
.acc-body-inner{padding:14px 18px 16px;font-size:.84rem;color:var(--text-muted);line-height:1.65;}

/* ── TABS ── */
.tabs{display:flex;gap:2px;background:var(--bg);border-radius:10px;padding:3px;border:1.5px solid var(--border);}
.tab{
  flex:1;padding:8px 14px;border-radius:8px;border:none;background:transparent;
  font-family:var(--font);font-size:.8rem;font-weight:700;color:var(--text-muted);
  cursor:pointer;transition:.17s;display:flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.tab:hover{background:var(--surface);color:var(--text);}
.tab.active{background:var(--surface);color:var(--navy);box-shadow:var(--shadow-1);}
.tab-count{background:var(--bg);color:var(--text-dim);border-radius:999px;padding:1px 7px;font-size:.68rem;}
.tab.active .tab-count{background:var(--sky);color:var(--navy);}
.tab-content-area{margin-top:16px;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ── ALERTS / BANNERS ── */
.alert{
  display:flex;align-items:flex-start;gap:12px;padding:13px 16px;
  border-radius:11px;border:1.5px solid;font-size:.84rem;line-height:1.55;
}
.alert i{font-size:1rem;flex-shrink:0;margin-top:1px;}
.alert-body{flex:1;}
.alert-title{font-weight:800;font-size:.84rem;margin-bottom:3px;}
.alert.info{background:var(--sky);border-color:var(--sky-mid);color:var(--navy);}
.alert.ok{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.3);color:var(--success);}
.alert.warn{background:rgba(217,119,6,.07);border-color:rgba(217,119,6,.3);color:var(--warn);}
.alert.bad{background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.2);color:var(--danger);}
.alert-close{margin-left:auto;cursor:pointer;opacity:.6;font-size:.8rem;}
.alert-close:hover{opacity:1;}

/* ── TOAST ── */
.toast-demo{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:12px;background:var(--navy-dark);color:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,.35);max-width:320px;font-size:.83rem;font-weight:500;
}
.toast-demo i{color:var(--gold);font-size:1rem;}

/* ── PROGRESS BAR ── */
.progress-wrap{display:flex;flex-direction:column;gap:5px;}
.progress-label{display:flex;justify-content:space-between;font-size:.76rem;font-weight:700;color:var(--text-muted);}
.progress-track{height:8px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--border);}
.progress-fill{height:100%;border-radius:999px;transition:width .4s ease;}
.progress-fill.navy{background:linear-gradient(90deg,var(--navy),var(--navy-light));}
.progress-fill.gold{background:linear-gradient(90deg,var(--gold-dark),var(--gold));}
.progress-fill.green{background:linear-gradient(90deg,#15803d,var(--success));}
.progress-fill.red{background:linear-gradient(90deg,#b91c1c,var(--danger));}
.progress-track.lg{height:12px;}
.progress-track.sm{height:5px;}

/* ── MODAL OVERLAY DEMO ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(26,36,96,.55);backdrop-filter:blur(4px);
  z-index:500;display:none;align-items:center;justify-content:center;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--surface);border-radius:18px;padding:30px;max-width:440px;width:90%;
  box-shadow:var(--shadow-3);animation:modal-in .22s ease;
}
@keyframes modal-in{from{transform:scale(.95) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.modal-head h3{font-size:1.05rem;font-weight:800;color:var(--text);}
.modal-close{width:30px;height:30px;border:none;background:var(--bg);border-radius:7px;cursor:pointer;color:var(--text-muted);display:grid;place-items:center;font-size:.8rem;}
.modal-close:hover{background:var(--border);color:var(--text);}
.modal-body{font-size:.85rem;color:var(--text-muted);line-height:1.6;margin-bottom:22px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:4px;}
.pg-btn{
  width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;
  font-size:.8rem;font-weight:700;color:var(--text-muted);transition:.15s;
  font-family:var(--font);
}
.pg-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--sky);}
.pg-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.pg-ellipsis{width:34px;height:34px;display:grid;place-items:center;color:var(--text-dim);font-size:.8rem;}

/* ── AVATAR / USER PILL ── */
.avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-light));
  display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:800;flex-shrink:0;
}
.avatar.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-dark);}
.avatar.green{background:linear-gradient(135deg,#15803d,var(--success));color:#fff;}
.avatar.sm{width:28px;height:28px;font-size:.65rem;}
.avatar.lg{width:48px;height:48px;font-size:.92rem;}
.avatar-stack{display:flex;}
.avatar-stack .avatar{border:2px solid var(--surface);margin-left:-8px;}
.avatar-stack .avatar:first-child{margin-left:0;}

.user-pill{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;background:var(--surface);border:1.5px solid var(--border);border-radius:999px;}
.user-pill-name{font-size:.82rem;font-weight:700;color:var(--text);}
.user-pill-role{font-size:.72rem;color:var(--text-dim);}

/* ── BREADCRUMB ── */
.breadcrumb{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.bc-item{display:flex;align-items:center;gap:0;font-size:.8rem;font-weight:600;}
.bc-item a{color:var(--text-muted);text-decoration:none;padding:4px 8px;border-radius:6px;transition:.14s;}
.bc-item a:hover{background:var(--sky);color:var(--navy);}
.bc-item span{color:var(--text);padding:4px 8px;}
.bc-sep{color:var(--text-dim);font-size:.7rem;margin:0 -2px;}

/* ── HEADINGS ── */
.h1{font-size:2rem;font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1.15;}
.h2{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.2;}
.h3{font-size:1.15rem;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.3;}
.h4{font-size:.95rem;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.h5{font-size:.83rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;}
.h6{font-size:.72rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;}
.text-xl{font-size:1.1rem;font-weight:500;color:var(--text);line-height:1.6;}
.text-body{font-size:.87rem;color:var(--text-muted);line-height:1.65;}
.text-sm{font-size:.75rem;color:var(--text-dim);line-height:1.5;}
.text-navy{color:var(--navy);}
.text-gold{color:var(--gold-dark);}
.text-muted{color:var(--text-muted);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-warn{color:var(--warn);}
.fw-800{font-weight:800;}
.fw-600{font-weight:600;}

/* ── DIVIDERS ── */
.divider{height:1.5px;background:var(--border);border-radius:999px;}
.divider-label{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:.72rem;font-weight:700;letter-spacing:.5px;}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1.5px;background:var(--border);}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:40px 20px;}
.empty-ic{width:64px;height:64px;border-radius:18px;background:var(--bg);border:2px solid var(--border);display:grid;place-items:center;margin:0 auto 16px;color:var(--text-dim);font-size:1.4rem;}
.empty-title{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:6px;}
.empty-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:18px;}

/* ── SKELETON LOADER ── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{
  background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);
  background-size:800px 100%;animation:shimmer 1.4s infinite;border-radius:6px;
}
.sk-line{height:12px;margin-bottom:8px;}
.sk-line.lg{height:20px;}
.sk-line.sm{height:8px;width:60%;}
.sk-circle{width:40px;height:40px;border-radius:50%;}
.sk-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:18px;display:flex;gap:12px;align-items:flex-start;}

/* ── TOOLTIP ── */
.tooltip-wrap{position:relative;display:inline-flex;}
.tooltip-wrap:hover .tooltip{opacity:1;visibility:visible;transform:translateY(0);}
.tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--navy-dark);color:#fff;font-size:.72rem;font-weight:600;padding:6px 10px;
  border-radius:7px;white-space:nowrap;opacity:0;visibility:hidden;transition:.18s;
  pointer-events:none;z-index:400;
}
.tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy-dark);}

/* ── INPUT GROUP ── */
.inp-group{display:flex;}
.inp-group .inp{border-radius:9px 0 0 9px;border-right:none;}
.inp-group .btn{border-radius:0 9px 9px 0;flex-shrink:0;}
.inp-group .inp-addon{
  padding:0 13px;background:var(--bg);border:1.5px solid var(--border);
  border-right:none;border-radius:9px 0 0 9px;display:flex;align-items:center;
  font-size:.82rem;color:var(--text-dim);font-weight:600;white-space:nowrap;flex-shrink:0;
}
.inp-group .inp-addon ~ .inp{border-radius:0 9px 9px 0;border-left:none;}

/* ── SEARCH BAR ── */
.search-bar{
  display:flex;align-items:center;gap:0;
  background:var(--surface);border:1.5px solid var(--border);border-radius:10px;
  padding:0 12px;transition:.17s;
}
.search-bar:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(37,50,135,.1);}
.search-bar i{color:var(--text-dim);font-size:.82rem;flex-shrink:0;}
.search-bar input{border:none;background:transparent;padding:10px 8px;font-family:var(--font);font-size:.84rem;color:var(--text);outline:none;flex:1;min-width:0;}
.search-bar input::placeholder{color:var(--text-dim);}

/* ── STEP INDICATOR ── */
.steps{display:flex;align-items:center;}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;}
.step:not(:last-child)::after{content:'';position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--border);}
.step.done:not(:last-child)::after{background:var(--navy);}
.step-dot{
  width:30px;height:30px;border-radius:50%;background:var(--surface);border:2px solid var(--border);
  display:grid;place-items:center;font-size:.75rem;font-weight:800;color:var(--text-dim);z-index:1;
}
.step.done .step-dot{background:var(--navy);border-color:var(--navy);color:#fff;}
.step.active .step-dot{background:var(--surface);border-color:var(--navy);color:var(--navy);box-shadow:0 0 0 3px rgba(37,50,135,.12);}
.step-lbl{font-size:.68rem;font-weight:700;color:var(--text-dim);white-space:nowrap;}
.step.done .step-lbl{color:var(--navy);}
.step.active .step-lbl{color:var(--text);}

/* ── DATE CHIP ── */
.date-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--sky);color:var(--navy);border-radius:999px;font-size:.76rem;font-weight:700;border:1.5px solid var(--sky-mid);}

/* ── FILE UPLOAD ── */
.file-drop{
  border:2px dashed var(--border);border-radius:12px;padding:28px;text-align:center;
  transition:.17s;cursor:pointer;background:var(--bg);
}
.file-drop:hover{border-color:var(--navy);background:var(--sky);}
.file-drop i{font-size:1.5rem;color:var(--text-dim);margin-bottom:8px;display:block;}
.file-drop-title{font-size:.85rem;font-weight:700;color:var(--text);}
.file-drop-sub{font-size:.75rem;color:var(--text-muted);margin-top:3px;}

/* ── INFO ROW ── */
.info-row{display:flex;gap:8px;padding:11px 0;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;}
.info-lbl{font-size:.76rem;font-weight:700;color:var(--text-dim);min-width:130px;flex-shrink:0;}
.info-val{font-size:.84rem;color:var(--text);font-weight:500;}

/* ── NOTIFICATION ITEM ── */
.notif{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:10px;transition:.14s;cursor:pointer;}
.notif:hover{background:var(--bg);}
.notif-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:.82rem;flex-shrink:0;}
.notif-ic.navy{background:var(--sky);color:var(--navy);}
.notif-ic.gold{background:rgba(250,168,79,.15);color:var(--gold-dark);}
.notif-ic.green{background:rgba(22,163,74,.1);color:var(--success);}
.notif-ic.red{background:rgba(220,38,38,.08);color:var(--danger);}
.notif-text{flex:1;min-width:0;}
.notif-title{font-size:.83rem;font-weight:700;color:var(--text);}
.notif-desc{font-size:.76rem;color:var(--text-muted);margin-top:2px;line-height:1.4;}
.notif-time{font-size:.7rem;color:var(--text-dim);white-space:nowrap;margin-top:1px;}
.notif.unread{background:var(--sky);}
.notif.unread::before{display:none;}

/* ── MINI CALENDAR ROW ── */
.cal-ev-r{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.82rem;}
.cal-ev-r:last-child{border-bottom:none;}
.cal-ev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── GRID HELPERS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr;}}

/* ── MISC ── */
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.gap-8{gap:8px;} .gap-12{gap:12px;}
.fi-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:.9rem;flex-shrink:0;}

/* ── BOX SHADOWS ── */
.shadow-sm{box-shadow:var(--shadow-1);}
.shadow-md{box-shadow:var(--shadow-2);}
.shadow-lg{box-shadow:var(--shadow-3);}
.surface{background:var(--surface);}
.br-sm{border-radius:var(--radius-sm);}
.br-md{border-radius:var(--radius-md);}
.br-lg{border-radius:var(--radius-lg);}

/* Code preview box */
.code-box{background:#1a2460;border-radius:10px;padding:14px 16px;font-size:.76rem;color:#ffffff;font-family:'Courier New',monospace;overflow-x:auto;line-height:1.55;}