:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --ink:#172033;
    --muted:#667085;
    --primary:#111827;
    --accent:#2563eb;
    --success:#0f9d58;
    --danger:#dc2626;
    --warning:#d97706;
    --line:#e6eaf0;
}

*{box-sizing:border-box}

html{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--ink);
}

body{margin:0}

.container{
    width:min(1120px,calc(100% - 28px));
    margin:auto;
}

.topbar{
    background:#fff;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:20;
}

.navwrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px;
    gap:16px;
}

.brand{
    text-decoration:none;
    color:var(--ink);
    font-weight:800;
    font-size:18px;
}

nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    font-weight:700;
}

main{padding:28px 0 60px}

.hero{padding:34px 0}

.hero h1{
    font-size:clamp(30px,7vw,56px);
    line-height:1.02;
    margin:0 0 12px;
    letter-spacing:-1.8px;
}

.hero p{
    max-width:700px;
    color:var(--muted);
    font-size:17px;
    line-height:1.65;
}

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

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px;
    box-shadow:0 8px 30px rgba(15,23,42,.045);
}

.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

.card h2,.card h3{margin-top:0}

.muted{color:var(--muted)}
.big{font-size:30px;font-weight:850}

label{
    display:block;
    font-size:13px;
    font-weight:800;
    margin:0 0 7px;
}

.field{margin-bottom:16px}

input,textarea,select{
    width:100%;
    border:1px solid #d9dee8;
    background:#fff;
    border-radius:12px;
    padding:13px 14px;
    font:inherit;
    outline:none;
}

input:focus,textarea:focus,select:focus{
    border-color:#7aa7ff;
    box-shadow:0 0 0 4px rgba(37,99,235,.09);
}

textarea{
    min-height:105px;
    resize:vertical;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:12px;
    padding:12px 16px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    cursor:pointer;
}

.btn.blue{background:var(--accent)}
.btn.ghost{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
}
.btn.danger{background:var(--danger)}
.btn.full{width:100%}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.alert{
    padding:13px 15px;
    border-radius:12px;
    margin-bottom:16px;
    background:#eef2ff;
}

.alert.success{
    background:#eaf8ef;
    color:#176c3b;
}

.alert.error{
    background:#fff0f0;
    color:#9f1d1d;
}

.badge{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:850;
    background:#eef2f7;
}

.badge.success{
    background:#eaf8ef;
    color:#176c3b;
}

.badge.pending{
    background:#fff6df;
    color:#895b00;
}

.badge.failed{
    background:#fff0f0;
    color:#a21c1c;
}

table{
    width:100%;
    border-collapse:collapse;
}

.tablewrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:14px;
}

th,td{
    padding:12px 13px;
    border-bottom:1px solid var(--line);
    text-align:left;
    white-space:nowrap;
    font-size:14px;
}

th{
    background:#f8fafc;
    font-size:12px;
    color:var(--muted);
}

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

.kpi strong{
    display:block;
    color:var(--ink);
    font-size:28px;
    margin-top:4px;
}

.invoice-total{
    display:flex;
    justify-content:space-between;
    border-top:2px solid var(--ink);
    padding-top:14px;
    margin-top:15px;
    font-size:20px;
    font-weight:900;
}

.item-row{
    display:grid;
    grid-template-columns:1fr 100px 140px 42px;
    gap:8px;
    margin-bottom:8px;
}

.remove{
    border:0;
    border-radius:10px;
    background:#fee2e2;
    color:#991b1b;
    font-weight:900;
}

footer{
    padding:28px 0;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:13px;
    background:#fff;
}

.center{
    max-width:600px;
    margin:20px auto;
}

.copybox{
    display:flex;
    gap:8px;
}

.copybox input{flex:1}

@media(max-width:760px){
    .col-4,.col-6,.col-8{grid-column:span 12}

    .navwrap{
        align-items:flex-start;
        padding:14px 0;
        flex-direction:column;
    }

    nav{padding-bottom:4px}

    .card{
        padding:17px;
        border-radius:16px;
    }

    .item-row{
        grid-template-columns:1fr 74px 100px 38px;
    }

    .hero{padding-top:14px}

    th,td{padding:10px}

    .actions .btn{flex:1}

    .copybox{flex-direction:column}
}