:root{
  --hs-primary:#0b5ed7; --hs-primary-2:#0aa2c0; --hs-accent:#14b8a6;
  --hs-navy:#0f1e3d; --hs-navy-2:#132a52; --hs-bg:#f3f6fb; --hs-card:#fff;
  --hs-text:#1e293b; --hs-muted:#64748b; --hs-border:#e5eaf2;
  --hs-radius:12px; --hs-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06);
  --sidebar-w:252px;
}
*{-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;background:var(--hs-bg);color:var(--hs-text);font-size:.875rem}
a{text-decoration:none}
.text-muted{color:var(--hs-muted)!important}
.fw-600{font-weight:600}.fs-xs{font-size:.75rem}.fs-sm{font-size:.8125rem}

/* ---------- Sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:linear-gradient(180deg,var(--hs-navy) 0%,var(--hs-navy-2) 100%);color:#c7d2e6;z-index:1040;display:flex;flex-direction:column;transition:transform .25s}
.sidebar .brand{display:flex;align-items:center;gap:.65rem;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--hs-primary-2),var(--hs-accent));display:grid;place-items:center;color:#fff;font-size:1.2rem;box-shadow:0 6px 16px rgba(20,184,166,.35)}
.brand-name{color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.2px;line-height:1.1}
.brand-sub{font-size:.68rem;color:#8ea0c3;text-transform:uppercase;letter-spacing:1px}
.sidebar .nav-section{font-size:.66rem;text-transform:uppercase;letter-spacing:1.2px;color:#6b7fa6;padding:1rem 1.25rem .4rem;font-weight:600}
.sidebar .menu{flex:1;overflow-y:auto;padding-bottom:1rem}
.sidebar .menu a{display:flex;align-items:center;gap:.7rem;margin:2px .75rem;padding:.55rem .75rem;border-radius:8px;color:#c7d2e6;font-weight:500;transition:.15s}
.sidebar .menu a i{font-size:1.05rem;width:20px;text-align:center;opacity:.85}
.sidebar .menu a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .menu a.active{background:linear-gradient(90deg,rgba(20,184,166,.22),rgba(20,184,166,.05));color:#fff;box-shadow:inset 3px 0 0 var(--hs-accent)}
.sidebar .menu a .badge{margin-left:auto}
.sidebar .side-foot{padding:.9rem 1.25rem;border-top:1px solid rgba(255,255,255,.07);font-size:.72rem;color:#7d8fb3}

/* ---------- Main / topbar ---------- */
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:1030;height:60px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--hs-border);display:flex;align-items:center;padding:0 1.5rem;gap:1rem}
.topbar .search{max-width:340px;flex:1;position:relative}
.topbar .search input{padding-left:2.2rem;background:var(--hs-bg);border-color:transparent;border-radius:9px;height:38px;font-size:.84rem}
.topbar .search i{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--hs-muted)}
.icon-btn{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--hs-muted);background:transparent;border:1px solid var(--hs-border);position:relative}
.icon-btn:hover{background:var(--hs-bg);color:var(--hs-text)}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;background:#ef4444;border-radius:50%;border:2px solid #fff}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--hs-primary),var(--hs-primary-2));object-fit:cover;flex-shrink:0}
.avatar-lg{width:72px;height:72px;font-size:1.4rem}
.avatar-xl{width:110px;height:110px;font-size:2rem;border-radius:16px}
.content{padding:1.5rem;flex:1}
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}
.page-head h1{font-size:1.3rem;font-weight:700;margin:0;color:var(--hs-navy)}
.breadcrumb{font-size:.76rem;margin:0}
.footer{padding:1rem 1.5rem;font-size:.75rem;color:var(--hs-muted);border-top:1px solid var(--hs-border);background:#fff}

/* ---------- Cards ---------- */
.card{border:1px solid var(--hs-border);border-radius:var(--hs-radius);box-shadow:var(--hs-shadow);background:var(--hs-card)}
.card-header{background:transparent;border-bottom:1px solid var(--hs-border);padding:.85rem 1.15rem;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.card-header h6{margin:0;font-weight:600;font-size:.92rem}
.card-body{padding:1.15rem}
.stat-card{padding:1.1rem 1.15rem;position:relative;overflow:hidden}
.stat-card .label{color:var(--hs-muted);font-size:.76rem;font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.stat-card .value{font-size:1.65rem;font-weight:700;color:var(--hs-navy);line-height:1.2;margin-top:.25rem}
.stat-card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem}
.stat-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:currentColor;opacity:.05}
.bg-soft-primary{background:#e7f0ff;color:#0b5ed7}.bg-soft-success{background:#dcfce7;color:#15803d}
.bg-soft-warning{background:#fef3c7;color:#b45309}.bg-soft-danger{background:#fee2e2;color:#b91c1c}
.bg-soft-info{background:#e0f7fa;color:#0e7490}.bg-soft-secondary{background:#eef2f7;color:#475569}
.bg-soft-teal{background:#ccfbf1;color:#0f766e}

/* ---------- Tables ---------- */
.table{margin:0;font-size:.835rem}
.table thead th{background:#f8fafc;color:var(--hs-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--hs-border);padding:.7rem 1rem;white-space:nowrap}
.table td{padding:.7rem 1rem;vertical-align:middle;border-color:#eef2f7}
.table-hover tbody tr:hover{background:#f8fbff}
.badge{font-weight:600;padding:.38em .65em;border-radius:6px;font-size:.7rem;letter-spacing:.2px}
.code-chip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;background:#eef4ff;color:#0b5ed7;padding:.2rem .5rem;border-radius:6px;font-weight:600}

/* ---------- Forms & buttons ---------- */
.form-label{font-weight:500;font-size:.8rem;color:#334155;margin-bottom:.3rem}
.form-control,.form-select{border-color:#dbe2ec;border-radius:8px;font-size:.85rem;padding:.5rem .75rem}
.form-control:focus,.form-select:focus{border-color:var(--hs-primary-2);box-shadow:0 0 0 .2rem rgba(10,162,192,.15)}
.input-group-text{background:#f8fafc;border-color:#dbe2ec;color:var(--hs-muted)}
.btn{font-weight:500;font-size:.84rem;border-radius:8px;padding:.48rem .95rem}
.btn-sm{font-size:.76rem;padding:.3rem .6rem;border-radius:7px}
.btn-primary{background:linear-gradient(135deg,var(--hs-primary),#2563eb);border:0;box-shadow:0 4px 12px rgba(11,94,215,.25)}
.btn-primary:hover{background:linear-gradient(135deg,#0a52bd,#1d4ed8)}
.btn-teal{background:linear-gradient(135deg,var(--hs-accent),#0d9488);color:#fff;border:0;box-shadow:0 4px 12px rgba(20,184,166,.28)}
.btn-teal:hover{color:#fff;filter:brightness(.95)}
.btn-light{background:#fff;border:1px solid var(--hs-border)}
.section-title{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--hs-primary);display:flex;align-items:center;gap:.5rem;margin:.25rem 0 1rem}
.section-title::after{content:"";flex:1;height:1px;background:var(--hs-border)}
.photo-drop{border:2px dashed #cdd7e5;border-radius:12px;padding:1rem;text-align:center;cursor:pointer;background:#fafcff;transition:.15s}
.photo-drop:hover{border-color:var(--hs-primary-2);background:#f2fbfd}
.photo-drop img{width:96px;height:96px;object-fit:cover;border-radius:12px}

/* ---------- Detail lists ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:.55rem 1rem;font-size:.84rem}
.kv dt{color:var(--hs-muted);font-weight:500}.kv dd{margin:0;font-weight:500;word-break:break-word}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 1rem 1.4rem;font-size:.82rem}
.timeline li::before{content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--hs-accent);box-shadow:0 0 0 3px #ccfbf1}
.timeline li::after{content:"";position:absolute;left:8px;top:18px;bottom:0;width:1px;background:var(--hs-border)}
.timeline li:last-child::after{display:none}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--hs-muted)}
.empty i{font-size:2.2rem;opacity:.4;display:block;margin-bottom:.5rem}
.filter-pills .nav-link{color:var(--hs-muted);font-weight:500;font-size:.8rem;border-radius:8px;padding:.4rem .8rem}
.filter-pills .nav-link.active{background:var(--hs-navy);color:#fff}
.filter-pills .count{font-size:.68rem;background:rgba(100,116,139,.15);padding:.05rem .4rem;border-radius:5px;margin-left:.3rem}
.filter-pills .nav-link.active .count{background:rgba(255,255,255,.2)}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:#fff}
.auth-hero{background:radial-gradient(circle at 20% 20%,rgba(20,184,166,.35),transparent 45%),radial-gradient(circle at 80% 80%,rgba(11,94,215,.45),transparent 50%),linear-gradient(135deg,var(--hs-navy),#0b2a5b);color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px}
.auth-hero>*{position:relative}
.auth-hero h2{font-weight:800;font-size:2.2rem;line-height:1.2;letter-spacing:-.5px}
.auth-hero .feat{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem;color:#d6e2f5}
.auth-hero .feat i{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0;color:#5eead4}
.auth-form{display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-form .box{width:100%;max-width:380px}
.auth-form h3{font-weight:700;color:var(--hs-navy)}
.auth-form .form-control{padding:.65rem .85rem}

/* ---------- Public register ---------- */
.public-top{background:linear-gradient(135deg,var(--hs-navy),#0b2a5b);color:#fff;padding:1.5rem 0 5.5rem}
.public-card{margin-top:-4.5rem}
.step-pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.1);padding:.35rem .8rem;border-radius:20px;font-size:.75rem;color:#cfe0f7}

/* ---------- Responsive ---------- */
.sidebar-backdrop{display:none}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  body.sidebar-open .sidebar{transform:none}
  body.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,30,61,.45);z-index:1035}
  .main{margin-left:0}
  .auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}
  .kv{grid-template-columns:1fr;gap:.1rem}.kv dd{margin-bottom:.5rem}
  .content{padding:1rem}
}
.brand-img{height:38px;max-width:120px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.btn-primary{background:var(--hs-primary)!important}
.settings-nav .nav-link{color:var(--hs-text);font-weight:500;border-radius:8px;padding:.6rem .85rem;display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.settings-nav .nav-link i{color:var(--hs-muted);font-size:1rem}
.settings-nav .nav-link.active{background:var(--hs-bg);color:var(--hs-primary);box-shadow:inset 3px 0 0 var(--hs-primary)}
.settings-nav .nav-link.active i{color:var(--hs-primary)}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--hs-border)}
.switch-row:last-child{border-bottom:0}
.switch-row .form-switch .form-check-input{width:2.6em;height:1.35em;cursor:pointer}
.color-pick{width:46px;height:38px;padding:3px;border-radius:8px}
.ph-chip{font-family:ui-monospace,monospace;font-size:.72rem;background:#eef4ff;color:var(--hs-primary);padding:.15rem .45rem;border-radius:5px;cursor:pointer;display:inline-block;margin:0 .25rem .25rem 0}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem}
.slot-grid input{display:none}
.slot-grid label{border:1px solid var(--hs-border);border-radius:8px;padding:.45rem .3rem;text-align:center;font-size:.78rem;font-weight:600;cursor:pointer;background:#fff;transition:.12s}
.slot-grid label:hover{border-color:var(--hs-primary);color:var(--hs-primary)}
.slot-grid input:checked+label{background:var(--hs-primary);border-color:var(--hs-primary);color:#fff;box-shadow:0 4px 12px rgba(11,94,215,.25)}
.slot-grid input:disabled+label{background:#f1f5f9;color:#b6c0cd;cursor:not-allowed;text-decoration:line-through}
.doc-pick{border:1px solid var(--hs-border);border-radius:10px;padding:.6rem .75rem;display:flex;gap:.6rem;align-items:center;background:#fafcff}
.search-results{position:absolute;z-index:20;left:0;right:0;top:100%;background:#fff;border:1px solid var(--hs-border);border-radius:10px;box-shadow:var(--hs-shadow);max-height:280px;overflow:auto}
.search-results a{display:block;padding:.55rem .8rem;color:var(--hs-text);border-bottom:1px solid #f1f5f9}
.search-results a:hover{background:#f8fbff}
.token{font-size:2.4rem;font-weight:800;color:var(--hs-primary);line-height:1}
@media print{.sidebar,.topbar,.footer,.no-print{display:none!important}.main{margin:0}}

/* ================= Center Portal (ERP style) ================= */
.cp{--cp-side:#0b1f2a;--cp-side-2:#0f2e3b;--cp-accent:#14b8a6;--cp-accent-2:#06b6d4}
.cp .sidebar{background:linear-gradient(180deg,var(--cp-side) 0%,var(--cp-side-2) 100%);transition:width .2s,transform .25s}
.cp .sidebar .brand-logo{background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2))}
.cp .center-card{margin:.9rem .9rem .3rem;padding:.8rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;gap:.65rem;align-items:center}
.cp .center-card .avatar{background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2))}
.cp .center-card .nm{color:#fff;font-weight:600;font-size:.82rem;line-height:1.2}
.cp .center-card .id{font-size:.68rem;color:#7fb3c2;font-family:ui-monospace,monospace}
.cp .live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(34,197,94,.05)}}
.cp .sidebar .menu a.active{background:linear-gradient(90deg,rgba(20,184,166,.25),rgba(6,182,212,.05));box-shadow:inset 3px 0 0 var(--cp-accent)}
.cp .menu .sub{margin-left:2.6rem!important;padding:.35rem .6rem!important;font-size:.8rem;color:#94b3bf!important}
.cp .menu .sub.active{background:transparent!important;box-shadow:none!important;color:#5eead4!important}
.cp .menu .soon{margin-left:auto;font-size:.58rem;background:rgba(255,255,255,.08);color:#9fb8c2;padding:.1rem .4rem;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.cp .menu a.disabled{opacity:.55;pointer-events:none}
.cp .side-help{margin:.75rem;padding:.9rem;border-radius:12px;background:linear-gradient(135deg,rgba(20,184,166,.25),rgba(6,182,212,.12));color:#d5f5f0;font-size:.75rem}
.cp .topbar .crumb{font-size:.72rem;color:var(--hs-muted)}
.cp .topbar .ttl{font-weight:700;color:var(--hs-navy);font-size:1rem;line-height:1.1}
.cp .clock{font-variant-numeric:tabular-nums;font-weight:600;font-size:.8rem;color:var(--hs-navy);background:var(--hs-bg);padding:.45rem .75rem;border-radius:9px}
.btn-cp{background:linear-gradient(135deg,#14b8a6,#06b6d4);color:#fff;border:0;box-shadow:0 4px 14px rgba(20,184,166,.3)}
.btn-cp:hover{color:#fff;filter:brightness(.95)}
.kpi{position:relative;overflow:hidden;border:0;color:#fff;padding:1.1rem 1.2rem;border-radius:14px}
.kpi .k-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;opacity:.85;font-weight:600}
.kpi .k-val{font-size:1.9rem;font-weight:800;line-height:1.1;margin-top:.2rem}
.kpi .k-sub{font-size:.72rem;opacity:.85;margin-top:.25rem}
.kpi .k-ico{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.2rem}
.kpi::after{content:"";position:absolute;right:-40px;bottom:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.kpi-1{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.kpi-2{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.kpi-3{background:linear-gradient(135deg,#10b981,#0d9488)}.kpi-4{background:linear-gradient(135deg,#8b5cf6,#6366f1)}
.qa{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .5rem;border:1px solid var(--hs-border);border-radius:12px;color:var(--hs-text);font-weight:500;font-size:.78rem;text-align:center;transition:.15s;background:#fff}
.qa i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem}
.qa:hover{transform:translateY(-2px);box-shadow:var(--hs-shadow);border-color:transparent;color:var(--hs-text)}
.queue-item{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;border-bottom:1px solid #f1f5f9}
.queue-item:last-child{border-bottom:0}
.queue-token{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:.95rem;flex-shrink:0}
.ring{--p:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(#14b8a6 calc(var(--p)*1%),#e6eef3 0);display:grid;place-items:center;margin:auto}
.ring>div{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bar-col .bar{width:60%;max-width:34px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#06b6d4,#14b8a6);min-height:4px}
.bar-col.today .bar{background:linear-gradient(180deg,#f59e0b,#ea580c)}
@media(min-width:992px){
  body.cp.collapsed{--sidebar-w:76px}
  body.cp.collapsed .sidebar .brand>div:last-child>div:last-child,body.cp.collapsed .sidebar .brand .brand-name,body.cp.collapsed .sidebar .brand-sub,
  body.cp.collapsed .nav-section,body.cp.collapsed .menu a span,body.cp.collapsed .menu .badge,body.cp.collapsed .menu .soon,body.cp.collapsed .menu .sub,
  body.cp.collapsed .center-card>div,body.cp.collapsed .side-help,body.cp.collapsed .side-foot{display:none!important}
  body.cp.collapsed .menu a{justify-content:center}
  body.cp.collapsed .center-card{justify-content:center;padding:.5rem}
}