:root{
--bg:#07111f;
--panel:#0d1a2b;
--panel2:#101f33;
--line:#22334a;
--text:#f8fafc;
--muted:#94a3b8;
--orange:#ff7a00;
--orange2:#ff9d3d;
--green:#22c55e;
--red:#ef4444;
--blue:#60a5fa;
--shadow:0 18px 50px rgba(0,0,0,.22)
}

*{box-sizing:border-box}

html{background:var(--bg)}

body{
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
background:linear-gradient(135deg,#07111f 0%,#0a1525 55%,#07111f 100%);
color:var(--text);
min-height:100vh
}

aside{
position:fixed;
left:0;
top:0;
bottom:0;
width:250px;
background:rgba(5,13,24,.96);
border-right:1px solid var(--line);
color:#fff;
padding:22px 15px;
z-index:20
}

.brand{
display:flex!important;
align-items:center;
gap:10px;
height:66px;
padding:7px 12px 24px!important;
margin-bottom:8px
}

.brand img{
width:188px;
height:auto;
display:block
}

.brand-fallback{
font-weight:900;
font-size:24px;
letter-spacing:3px
}

.nav-label{
padding:16px 12px 7px;
color:#64748b;
text-transform:uppercase;
letter-spacing:1.4px;
font-size:10px;
font-weight:800
}

aside a{
display:flex;
align-items:center;
gap:11px;
color:#cbd5e1;
text-decoration:none;
padding:12px 13px;
border-radius:10px;
margin:4px 0;
font-size:14px;
font-weight:650;
transition:.18s
}

aside a:hover{
background:#15253a;
color:#fff
}

aside a.active{
background:linear-gradient(90deg,var(--orange),#ff8b1f);
color:#fff;
box-shadow:0 8px 20px rgba(255,122,0,.22)
}

aside .nav-icon{
width:19px;
text-align:center;
opacity:.9
}

main{
margin-left:250px;
padding:34px 38px 50px;
max-width:1500px
}

h1{
margin:0 0 7px;
font-size:32px;
letter-spacing:-.6px
}

h2{margin:0 0 8px}

p{color:var(--muted)}

.page-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:26px
}

.eyebrow{
font-size:12px;
text-transform:uppercase;
letter-spacing:1.6px;
color:var(--orange2);
font-weight:800;
margin-bottom:8px
}

.range-pill{
border:1px solid var(--line);
background:#0c192a;
color:#cbd5e1;
border-radius:10px;
padding:10px 13px;
font-size:13px
}

.grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
margin:22px 0
}

.card,.stat-card{
background:linear-gradient(145deg,rgba(15,31,50,.96),rgba(10,23,39,.96));
border:1px solid var(--line);
border-radius:16px;
padding:20px;
box-shadow:var(--shadow);
margin-bottom:18px
}

.card span,.stat-label{
display:block;
color:var(--muted);
font-size:12px
}

.card strong,.stat-value{
display:block;
font-size:27px;
margin-top:8px;
letter-spacing:-.4px
}

.stat-top{
display:flex;
justify-content:space-between;
align-items:center
}

.stat-icon{
width:38px;
height:38px;
border-radius:12px;
display:grid;
place-items:center;
background:rgba(255,122,0,.13);
color:var(--orange2);
font-weight:900
}

.delta{
font-size:11px;
color:var(--green);
margin-top:7px
}

.dashboard-grid{
display:grid;
grid-template-columns:1.55fr 1fr;
gap:18px
}

.chart{
height:270px;
position:relative;
overflow:hidden
}

.chart svg{
width:100%;
height:220px;
margin-top:14px
}

.chart-legend{
display:flex;
gap:18px;
font-size:12px;
color:#cbd5e1
}

.legend-dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
background:var(--orange);
margin-right:6px
}

.legend-dot.green{background:var(--green)}

.table-wrap{overflow:auto}

table{
width:100%;
border-collapse:collapse;
min-width:650px
}

th,td{
text-align:left;
padding:14px 12px;
border-bottom:1px solid #1c2b40
}

th{
color:#71829a;
font-size:11px;
text-transform:uppercase;
letter-spacing:.7px
}

td{
color:#dbe4ef;
font-size:13px
}

.badge,.status{
display:inline-flex;
align-items:center;
padding:5px 9px;
border-radius:999px;
font-size:11px;
font-weight:800;
background:rgba(34,197,94,.12);
color:#4ade80
}

.badge.orange{
background:rgba(255,122,0,.12);
color:#ff9d3d
}

.badge.red{
background:rgba(239,68,68,.12);
color:#f87171
}

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

button{
background:linear-gradient(90deg,var(--orange),#ff8b1f);
color:#fff;
border:0;
border-radius:9px;
padding:10px 15px;
cursor:pointer;
font-weight:800;
box-shadow:0 8px 18px rgba(255,122,0,.15)
}

button:hover{filter:brightness(1.06)}

input,select,textarea{
width:100%;
padding:11px 12px;
border:1px solid #2a3a50;
background:#091625;
color:#e5edf7;
border-radius:9px;
font:inherit
}

textarea{min-height:90px}

.form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px
}

.form-grid textarea{grid-column:1/-1}

.alert{
background:rgba(239,68,68,.12);
color:#fca5a5;
border:1px solid rgba(239,68,68,.25);
padding:10px;
border-radius:9px;
margin-top:18px
}

.muted{
color:var(--muted);
font-size:12px;
margin-top:18px;
line-height:1.5
}

.subtle{
color:#64748b;
font-size:12px
}

.mini-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px
}

.footer-note{
color:#64748b;
font-size:11px;
text-align:center;
padding:22px 0
}

.quick-actions{
display:flex;
gap:10px;
flex-wrap:wrap
}

.quick-actions a{
border:1px solid var(--line);
color:#dbe4ef;
text-decoration:none;
padding:9px 12px;
border-radius:9px;
font-size:12px
}

.quick-actions a:hover{
border-color:#40536c;
background:#101f33
}

.login{
min-height:100vh;
display:grid;
place-items:center;
background:radial-gradient(circle at top,rgba(255,122,0,.14),transparent 38%),var(--bg)
}

.login-card{
width:min(430px,92vw);
background:#0d1a2b;
border:1px solid var(--line);
border-radius:20px;
padding:34px;
box-shadow:var(--shadow)
}

.logo{
font-size:26px;
font-weight:900;
color:var(--orange)
}

.login-card form{
display:grid;
gap:9px;
margin-top:24px
}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
align-items:center;
justify-content:center;
padding:20px;
z-index:100
}

.modal-box{
background:#0d1a2b;
border:1px solid var(--line);
color:#fff;
width:100%;
max-width:600px;
max-height:90vh;
overflow-y:auto;
border-radius:15px;
padding:28px;
position:relative
}

.modal-close{
position:absolute;
right:15px;
top:12px;
border:0;
background:none;
box-shadow:none;
font-size:25px;
cursor:pointer
}

.detail-row{
padding:12px 0;
border-bottom:1px solid var(--line)
}

.detail-label{
color:var(--muted);
font-size:13px
}

.detail-value{
font-weight:700;
margin-top:4px
}

@media(max-width:1100px){
.grid{grid-template-columns:repeat(3,1fr)}
.dashboard-grid{grid-template-columns:1fr}
}

@media(max-width:800px){
aside{
position:static;
width:100%;
display:flex;
overflow:auto;
align-items:center;
padding:8px;
border-right:0;
border-bottom:1px solid var(--line)
}

aside .brand{
min-width:185px;
padding:8px 10px!important;
margin:0
}

.brand img{width:155px}

aside a{white-space:nowrap}

.nav-label{display:none}

main{
margin-left:0;
padding:22px 16px
}

.grid{grid-template-columns:repeat(2,1fr)}

.form-grid,.mini-grid{
grid-template-columns:1fr
}

.page-head{
flex-direction:column
}

.card{overflow:auto}
}

@media(max-width:520px){
.grid{grid-template-columns:1fr}
.stat-value{font-size:24px}
}