:root{
  --bg:#0b1020;--bg2:#131a2b;--bg3:#1a2238;--card:#161e34;
  --border:#252e4d;--border2:#2d3756;
  --text:#dfe4ed;--muted:#7a83a6;--mute2:#5a6688;
  --gold:#FFCB47;--gold2:#f5c842;--green:#34d399;--blue:#60a5fa;
  --red:#f87171;--purple:#a78bfa;--orange:#fb923c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
.hidden{display:none !important}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at top,#1a2240 0%,#0b1020 60%)}
.login-box{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:36px 28px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.login-box h2{margin:8px 0 4px;font-size:22px;text-align:center;color:var(--gold)}
.login-box .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:22px}
.logo-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1d2645,#2a345a);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:1px solid #2f3a64}

/* Form */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.3px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:14px;outline:none;transition:border-color .15s}
.form-group textarea{min-height:74px;font-family:inherit;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gold)}

/* Buttons */
.btn{padding:9px 14px;border:1px solid var(--border2);border-radius:9px;background:var(--bg3);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;text-decoration:none}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn:hover{border-color:#3b486f;background:#1f2942}
.btn-gold{background:linear-gradient(135deg,#FFCB47,#f5c842);color:#1a1208;border-color:#daab2c}
.btn-gold:hover{background:linear-gradient(135deg,#ffd766,#ffcf52);border-color:#FFCB47}
.btn-blue{background:#1e40af;color:#dbeafe;border-color:#1e40af}
.btn-blue:hover{background:#2748c4}
.btn-green{background:#059669;color:#d1fae5;border-color:#059669}
.btn-green:hover{background:#0aa776}
.btn-red{background:#b91c1c;color:#fee2e2;border-color:#b91c1c}
.btn-red:hover{background:#d62828}
.btn-outline{background:transparent}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-xs{padding:4px 8px;font-size:11px}
.btn-full{width:100%;justify-content:center}
.btn-group{display:inline-flex;gap:6px;flex-wrap:wrap}

/* App */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-header{padding:20px 18px;border-bottom:1px solid var(--border)}
.sidebar-header h1{margin:0;font-size:17px;color:var(--gold)}
.sidebar-header .sub{font-size:11px;color:var(--muted);margin-top:3px}
.nav{flex:1;padding:14px 8px;overflow-y:auto}
.nav-footer{padding:12px 8px;border-top:1px solid var(--border)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:3px;border-radius:8px;cursor:pointer;color:var(--text);font-size:13.5px;font-weight:500;transition:background .15s}
.nav-item svg{width:17px;height:17px;flex-shrink:0;color:var(--mute2)}
.nav-item:hover{background:#1d2640}
.nav-item.active{background:linear-gradient(90deg,rgba(255,203,71,.15),rgba(255,203,71,0));color:var(--gold)}
.nav-item.active svg{color:var(--gold)}

.main{flex:1;padding:22px 26px;overflow:hidden}
.section{max-width:1280px;margin:0 auto}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.section-head h2{margin:0;font-size:20px;color:var(--text)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat-card .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.stat-card .value{font-size:22px;font-weight:700;color:var(--text)}
.stat-card .st-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.stat-card .st-icon svg{width:16px;height:16px}
.st-icon.blue{background:rgba(96,165,250,.15);color:var(--blue)}
.st-icon.gold{background:rgba(255,203,71,.15);color:var(--gold)}
.st-icon.green{background:rgba(52,211,153,.15);color:var(--green)}
.st-icon.red{background:rgba(248,113,113,.15);color:var(--red)}
.st-icon.purple{background:rgba(167,139,250,.15);color:var(--purple)}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.card-head h3{margin:0;font-size:14.5px;display:flex;align-items:center;gap:8px}
.card-head h3 svg{width:16px;height:16px;color:var(--gold)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.col{flex:1 1 220px;min-width:180px}

/* Tables */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table-toolbar{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.table-toolbar h3{margin:0;font-size:13px;color:var(--muted)}
.table-toolbar .right{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.search-box{position:relative;display:flex;align-items:center}
.search-box svg{position:absolute;left:9px;width:14px;height:14px;color:var(--muted)}
.search-box input{padding:7px 10px 7px 30px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12.5px;outline:none;width:200px}
.tbl-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--bg3);color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;padding:10px 12px;text-align:left;letter-spacing:.4px;border-bottom:1px solid var(--border)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--border)}
tbody tr:hover{background:#1c2540}
.fw-600{font-weight:600}
.text-gold{color:var(--gold)}
.text-green{color:var(--green)}
.text-muted{color:var(--muted)}
.text-sm{font-size:12px}
.mono{font-family:Menlo,Consolas,monospace;font-size:12px}
.truncate{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
th.check,td.check{width:36px;text-align:center}
.table-footer{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.pagination{display:flex;gap:4px;flex-wrap:wrap}
.pagination button{padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;cursor:pointer}
.pagination button.active{background:var(--gold);color:#1a1208;border-color:var(--gold)}

/* Badges */
.badge{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;display:inline-block}
.badge-pending{background:rgba(255,203,71,.18);color:var(--gold)}
.badge-approved{background:rgba(52,211,153,.18);color:var(--green)}
.badge-rejected{background:rgba(248,113,113,.18);color:var(--red)}
.badge-gray{background:rgba(122,131,166,.18);color:var(--muted)}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--card);border:1px solid var(--border);color:var(--text);padding:11px 16px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.4);transform:translateY(120%);transition:transform .25s;font-size:13px;z-index:9999}
.toast.show{transform:translateY(0)}
.toast.error{border-color:var(--red)}
.toast.info{border-color:var(--blue)}

/* System */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:14px}
.sys-item{display:flex;justify-content:space-between;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 12px}
.sys-item .k{color:var(--muted);font-size:12px}
.sys-item .v{color:var(--text);font-size:12.5px;font-weight:600}
.sys-item .v.ok{color:var(--green)}
.sys-item .v.err{color:var(--red)}
.sys-item .v.warn{color:var(--gold)}
.divider{height:1px;background:var(--border);margin:14px 0}

/* Bank rows */
.bank-row{display:flex;align-items:flex-end;gap:10px;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;margin-bottom:8px;flex-wrap:wrap}
.bank-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.bank-fields .form-group{margin:0}
.bank-fields .bank-wide{grid-column:1/-1}
.bank-del{flex-shrink:0}

/* Site cards */
.sites-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.site-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s}
.site-card:hover{border-color:#3b486f}
.site-card .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.site-card .head .title{font-size:15px;font-weight:700;color:var(--gold)}
.site-card .head .target{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all}
.site-card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.site-card .meta .badge{font-size:10.5px}
.site-card .actions{display:flex;gap:6px;flex-wrap:wrap}
.site-card .ns-list{margin-top:10px;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-size:11.5px;color:var(--muted)}
.site-card .ns-list b{color:var(--text)}

/* Mobile */
.mobile-toggle{display:none;position:fixed;top:14px;left:14px;width:40px;height:40px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:9px;align-items:center;justify-content:center;z-index:100;cursor:pointer}
.mobile-toggle svg{width:18px;height:18px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99}
@media(max-width:768px){
  .mobile-toggle{display:flex}
  .sidebar{position:fixed;left:-260px;transition:left .25s;z-index:101}
  .sidebar.open{left:0}
  .sidebar-overlay.open{display:block}
  .main{padding:14px 12px;padding-top:60px}
  .col{flex-basis:100%}
}

/* Wizard */
.wizard-step{display:none}
.wizard-step.active{display:block}
.wizard-nav{display:flex;justify-content:space-between;margin-top:14px;gap:10px}
.wizard-progress{display:flex;gap:4px;margin-bottom:18px}
.wizard-progress span{flex:1;height:4px;background:var(--border);border-radius:2px}
.wizard-progress span.done{background:var(--gold)}
.wizard-progress span.curr{background:var(--gold);opacity:.6}

/* Helper */
.alert{padding:10px 14px;border-radius:9px;margin-bottom:12px;font-size:13px}
.alert-info{background:rgba(96,165,250,.13);border:1px solid rgba(96,165,250,.4);color:#bfdbfe}
.alert-warn{background:rgba(255,203,71,.13);border:1px solid rgba(255,203,71,.4);color:#fde68a}
.alert-success{background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.4);color:#a7f3d0}
.alert-error{background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.4);color:#fecaca}

.empty{padding:36px 14px;text-align:center;color:var(--muted)}
.empty svg{width:44px;height:44px;color:var(--mute2);margin-bottom:8px}
.empty .t{font-size:15px;margin-bottom:4px}
.empty .s{font-size:12px}