:root{
--primary:#6366f1;
--primary2:#8b5cf6;
--success:#10b981;
--danger:#ef4444;
--warning:#f59e0b;

--bg:#0f172a;
--card:#111827cc;
--card-solid:#1e293b;
--input:#0f172a;
--border:#334155;

--text:#f8fafc;
--muted:#94a3b8;

--radius:22px;
--shadow:0 20px 40px rgba(0,0,0,.35);
}

[data-theme="light"]{
--bg:#f1f5f9;
--card:#ffffffcc;
--card-solid:#ffffff;
--input:#ffffff;
--border:#e2e8f0;
--text:#0f172a;
--muted:#64748b;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:
radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 30%),
radial-gradient(circle at bottom right, rgba(16,185,129,.12), transparent 30%),
var(--bg);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
transition:.3s;
}

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-thumb{
background:var(--border);
border-radius:20px;
}

header{
position:sticky;
top:0;
z-index:999;
display:flex;
align-items:center;
gap:12px;
padding:16px;
backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
}

.logo{
flex:1;
}

.logo h1{
font-size:20px;
font-weight:800;
}

.logo p{
font-size:12px;
color:var(--muted);
}

.top-btn{
border:none;
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;
padding:12px 18px;
border-radius:14px;
font-weight:700;
cursor:pointer;
transition:.25s;
}

.top-btn:hover{
transform:translateY(-2px);
}

.theme{
width:46px;
height:46px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:var(--card-solid);
border:1px solid var(--border);
cursor:pointer;
font-size:20px;
}

nav{
display:flex;
gap:10px;
padding:16px;
overflow:auto;
position:sticky;
top:79px;
z-index:998;
backdrop-filter:blur(16px);
border-bottom:1px solid var(--border);
}

.nav-btn{
border:none;
background:var(--card-solid);
padding:12px 20px;
border-radius:999px;
color:var(--muted);
font-weight:700;
cursor:pointer;
white-space:nowrap;
border:1px solid var(--border);
transition:.25s;
}

.nav-btn.active{
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;
box-shadow:0 10px 20px rgba(99,102,241,.3);
}

.wrapper{
max-width:1200px;
margin:auto;
padding:20px;
}

.tab{
display:none;
animation:fade .3s ease;
}

.tab.active{
display:block;
}

@keyframes fade{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:none;}
}

.card{
background:var(--card);
backdrop-filter:blur(18px);
border:1px solid var(--border);
padding:22px;
border-radius:var(--radius);
margin-bottom:20px;
box-shadow:var(--shadow);
transition:.3s;
}

.card:hover{
transform:translateY(-3px);
}

.title{
font-size:15px;
font-weight:800;
margin-bottom:20px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:16px;
}

.full{
grid-column:1/-1;
}

label{
display:block;
font-size:12px;
margin-bottom:8px;
font-weight:700;
color:var(--muted);
}

input,select,textarea{
width:100%;
padding:14px 16px;
background:var(--input);
border:1px solid var(--border);
border-radius:16px;
outline:none;
color:var(--text);
font-size:14px;
transition:.25s;
}

input:focus, select:focus, textarea:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(99,102,241,.2);
}

.btn{
border:none;
padding:14px 20px;
border-radius:16px;
font-weight:800;
cursor:pointer;
transition:.25s;
width:100%;
}

.primary{
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;
}

.danger{
background:var(--danger);
color:#fff;
}

.btn:hover{
transform:translateY(-2px);
}

.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-bottom:20px;
}

.stat{
padding:25px;
text-align:center;
}

.stat h2{
font-size:38px;
margin-top:10px;
font-weight:800;
}

.list{
display:flex;
flex-direction:column;
gap:12px;
}

.item{
padding:18px;
background:var(--card-solid);
border-radius:18px;
border:1px solid var(--border);
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
}

.small{
font-size:12px;
color:var(--muted);
}

.badge{
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
}

.low{background:rgba(239,68,68,.15); color:#ef4444;}
.good{background:rgba(16,185,129,.15); color:#10b981;}

.toast{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%) translateY(120px);
background:#111827;
color:#fff;
padding:14px 24px;
border-radius:999px;
font-weight:700;
transition:.35s;
z-index:99999;
}

.toast.show{
transform:translateX(-50%) translateY(0);
}

.wa-btn{
background:#25D366;
color:#fff;
padding:8px 16px;
font-size:12px;
font-weight:700;
border-radius:12px;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:6px;
transition:.2s;
white-space:nowrap;
}

.wa-btn:hover{
transform:scale(1.05);
}

#invoice-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}
#invoice{
    width:210mm;
    min-height:397mm;
    padding:15mm;
    background:#fff;
    color:#000;
    font-family:Arial;
    box-sizing:border-box;
    margin-top: -499px;
}

.inv-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
border-bottom:3px solid #4f46e5;
padding-bottom:15px;
margin-bottom:20px;
}

.inv-company h1{
font-size:28px;
color:#4f46e5;
margin-bottom:6px;
}

.inv-company p{
font-size:13px;
color:#444;
margin:2px 0;
}

.inv-meta{
text-align:right;
}

.inv-meta h2{
font-size:32px;
margin-bottom:10px;
color:#111827;
}

.inv-meta p{
font-size:13px;
margin:4px 0;
}

.inv-section{
margin-bottom:20px;
}

.inv-section h3{
font-size:13px;
color:#4f46e5;
margin-bottom:8px;
text-transform:uppercase;
}

.inv-section p{
margin:3px 0;
font-size:14px;
}

.invoice-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.invoice-table th{
background:#4f46e5;
color:#fff;
padding:12px;
border:1px solid #d1d5db;
font-size:13px;
text-align:left;
}

.invoice-table td{
border:1px solid #d1d5db;
padding:12px;
font-size:13px;
min-height:45px;
vertical-align:middle;
}

.invoice-table tbody tr{
page-break-inside:avoid;
display:table-row;
}

.invoice-table tr:nth-child(even){
background:#f9fafb;
}

.inv-total-box{
margin-top:20px;
width:300px;
margin-left:auto;
}

.inv-total-box table{
width:100%;
border-collapse:collapse;
}

.inv-total-box td{
border:1px solid #d1d5db;
padding:10px;
font-size:14px;
}

.inv-grand{
background:#4f46e5;
color:#fff;
font-weight:bold;
font-size:16px;
}

.inv-footer{
margin-top:40px;
text-align:center;
font-size:12px;
color:#666;
border-top:1px dashed #ccc;
padding-top:15px;
}

@media(max-width:768px){
header{flex-wrap:wrap;}
.top-btn{flex:1;}
nav{top:128px;}
.card{padding:18px;}
}