:root{
  --bg:#06111d;
  --bg-soft:#0b1625;
  --surface:#0d1b2c;
  --surface-2:#10233a;
  --surface-3:rgba(17,31,50,.78);
  --line:rgba(149,211,255,.12);
  --text:#ecf6ff;
  --muted:#8ea8c4;
  --primary:#28b4ff;
  --primary-2:#008cf0;
  --success:#31d17b;
  --warning:#f4c55f;
  --danger:#ff6f80;
  --shadow:0 22px 50px rgba(0,0,0,.34);
  --radius:22px;
  --radius-sm:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:
radial-gradient(circle at top right, rgba(40,180,255,.12), transparent 22%),
radial-gradient(circle at bottom left, rgba(0,140,240,.08), transparent 24%),
linear-gradient(180deg,#07121f,#040c15 100%)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(4,12,21,.85);
  color:var(--text);outline:none
}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6f88a3}
label{display:flex;flex-direction:column;gap:8px}
h1,h2,h3,p{margin-top:0}
.glass{
  background:linear-gradient(180deg,rgba(14,27,46,.92),rgba(8,18,31,.94));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  border-radius:var(--radius)
}
.eyebrow{
  color:#8fdcff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px
}

.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.auth-bg{
  position:absolute;inset:0;
  background:
  radial-gradient(circle at 15% 20%, rgba(40,180,255,.09), transparent 22%),
  radial-gradient(circle at 85% 80%, rgba(0,140,240,.08), transparent 18%)
}
.auth-shell{
  position:relative;z-index:2;width:min(1280px,100%);
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px
}
.auth-left,.auth-right{padding:32px}
.logo-wrap,.sidebar-top{display:flex;align-items:center;gap:14px}
.brand-mark{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#7bdcff);
  color:#04101b;font-weight:800;font-size:1.3rem;
  box-shadow:0 14px 30px rgba(40,180,255,.3)
}
.brand-mark.small{width:44px;height:44px;border-radius:14px;font-size:1rem}
.logo-wrap p,.sidebar-top small{color:var(--muted);margin:4px 0 0}
.hero-copy h2{font-size:2.2rem;line-height:1.1;margin:8px 0 12px}
.hero-copy p{color:var(--muted);line-height:1.7;font-size:1rem}
.feature-pills{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.feature-pills span,.mini-chip,.soft-tag{
  padding:10px 14px;border-radius:999px;
  background:rgba(40,180,255,.08);
  border:1px solid rgba(40,180,255,.2);
  color:#c4ecff
}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.mini-panel{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);
  border-radius:18px;padding:18px
}
.mini-panel strong{display:block;font-size:1.6rem;margin-bottom:8px}
.mini-panel small{color:var(--muted)}
.auth-tabs{
  display:flex;background:rgba(255,255,255,.03);padding:6px;border-radius:18px;margin-bottom:20px
}
.auth-tab{
  flex:1;border:0;background:transparent;padding:12px 14px;border-radius:14px;color:var(--muted);cursor:pointer
}
.auth-tab.active{
  background:linear-gradient(135deg,rgba(40,180,255,.18),rgba(40,180,255,.07));color:var(--text)
}
.auth-form{display:grid;gap:16px}
.hidden-field{display:none}
.demo-buttons,.action-row,.topbar-right{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;transition:.18s transform,.18s opacity
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#04101b;font-weight:700
}
.btn-secondary{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--text)
}
.btn-sm{padding:10px 12px;font-size:.9rem;border-radius:12px}
.btn-full{width:100%}
.link-btn{
  color:#8fdcff;background:none;border:0;cursor:pointer;padding:0
}

.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,rgba(7,17,29,.98),rgba(7,17,29,.88));
  border-right:1px solid rgba(255,255,255,.06);
  padding:22px 16px;position:sticky;top:0;height:100vh
}
.side-nav{display:grid;gap:8px;margin:24px 0}
.side-link{
  padding:14px 16px;border-radius:14px;color:var(--muted);
  transition:.18s;background:transparent;border:1px solid transparent
}
.side-link:hover,.side-link.active{
  background:rgba(40,180,255,.08);
  border-color:rgba(40,180,255,.18);color:var(--text)
}
.side-box{
  display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.online-dot{
  width:12px;height:12px;border-radius:50%;background:var(--success);margin-top:4px;
  box-shadow:0 0 14px rgba(49,209,123,.55)
}

.main-area{padding:26px}
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px
}
.topbar.sticky{
  position:sticky;top:0;z-index:20;
  padding:14px 0 18px;background:linear-gradient(180deg,rgba(6,17,29,.98),rgba(6,17,29,.72),transparent)
}
.search-box input{min-width:280px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
.stats-grid.three{grid-template-columns:repeat(3,1fr)}
.stat-card{padding:22px}
.stat-card span{display:block;color:var(--muted);margin-bottom:10px}
.stat-card h3{font-size:2rem;margin:0 0 8px}
.stat-card p{margin:0;color:#9ab4ce}
.danger-border{outline:1px solid rgba(255,111,128,.28)}

.dual-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;margin-bottom:18px}
.triple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.panel{padding:20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left
}
.table th{font-weight:600;color:#a2c7e2}
.badge{
  display:inline-flex;padding:8px 11px;border-radius:999px;font-size:.78rem;font-weight:700
}
.badge.pending{background:rgba(244,197,95,.14);color:var(--warning)}
.badge.approved{background:rgba(49,209,123,.14);color:var(--success)}
.badge.progress{background:rgba(40,180,255,.16);color:#8bddff}
.badge.danger{background:rgba(255,111,128,.14);color:var(--danger)}

.timeline{display:grid;gap:16px}
.step{display:flex;gap:14px;opacity:.84}
.step.active{opacity:1}
.step-dot{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#85deff);
  margin-top:4px;box-shadow:0 0 0 6px rgba(40,180,255,.08)
}
.step p,.muted-line,.feed-item,.history-content p{color:var(--muted)}

.bar-list{display:grid;gap:16px}
.bar-row{display:grid;grid-template-columns:140px 1fr 56px;gap:12px;align-items:center}
.bar{height:12px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.bar i{
  display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#7fd9ff)
}
.chart-bars{
  height:220px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:end
}
.chart-bars div{display:flex;flex-direction:column;align-items:center;gap:10px}
.chart-bars i{
  width:100%;border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,#7fdcff,var(--primary-2));display:block
}
.chart-bars span{color:var(--muted);font-size:.88rem}

.feed-list,.history-list,.loan-stack{display:grid;gap:12px}
.feed-item,.kanban-card,.loan-card,.history-row{
  padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.kanban-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kanban-col{padding:18px}
.ok-outline{outline:1px solid rgba(49,209,123,.24)}
.info-outline{outline:1px solid rgba(40,180,255,.24)}
.bad-outline{outline:1px solid rgba(255,111,128,.24)}

.filter-strip{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px;padding:16px;margin-bottom:18px
}
.soft-tag{font-size:.84rem}
.form-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px
}
.span-2{grid-column:1 / -1}
.stack-form{display:grid;gap:16px}
.info-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px
}
.info-grid div{
  padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)
}
.info-grid strong{display:block;margin-bottom:8px}
.info-grid small{color:var(--muted);font-size:.92rem}
.scan-box{
  padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.06);font-weight:600
}
.scan-box.neutral{background:rgba(255,255,255,.03);color:#bfd8ee}
.scan-box.success{background:rgba(49,209,123,.12);color:#a0efc0;border-color:rgba(49,209,123,.22)}
.scan-box.error{background:rgba(255,111,128,.12);color:#ffb6be;border-color:rgba(255,111,128,.22)}

.history-row{
  display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center
}
.history-time{
  font-weight:700;color:#91dcff;background:rgba(40,180,255,.08);
  border:1px solid rgba(40,180,255,.18);padding:10px 12px;border-radius:14px;text-align:center
}

.modal{
  position:fixed;inset:0;background:rgba(1,6,12,.6);display:none;align-items:center;justify-content:center;padding:24px;z-index:100
}
.modal.open{display:flex}
.modal-card{width:min(700px,100%);padding:22px}
.modal-card.lg{width:min(880px,100%)}
.modal-card.xl{width:min(980px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-body{display:grid;gap:16px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);color:var(--text);cursor:pointer
}

.toast-container{
  position:fixed;top:20px;right:20px;display:grid;gap:10px;z-index:200
}
.toast{
  min-width:260px;max-width:360px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(17,34,57,.97),rgba(10,20,33,.96));
  border:1px solid rgba(40,180,255,.18);box-shadow:var(--shadow);
  color:var(--text);animation:fadeIn .22s ease
}
.toast.success{border-color:rgba(49,209,123,.26)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:1200px){
  .kanban-grid,.triple-grid,.stats-grid,.stats-grid.three,.filter-strip,.dual-grid,.auth-shell{grid-template-columns:1fr}
}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{height:auto;position:relative}
}
@media (max-width:720px){
  .topbar,.action-row,.topbar-right{flex-direction:column;align-items:stretch}
  .preview-grid,.form-grid,.info-grid{grid-template-columns:1fr}
  .search-box input{min-width:0}
  .history-row{grid-template-columns:1fr}
  .auth-left,.auth-right,.main-area{padding:18px}
  .hero-copy h2{font-size:1.7rem}
}