:root{
      --primary:#10b981; /* emerald */
      --accent:#0ea5e9;  /* sky */
      --bg:#f6fbff;
      --text:#0f172a;
      --muted:#64748b;
      --danger:#ef4444;
      --warning:#f59e0b;
      --card:#ffffff;
      --shadow:0 10px 25px rgba(2,6,23,.08);
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
    header{
      position:sticky;top:0;z-index:5;background:linear-gradient(90deg,var(--accent),var(--primary));
      color:#fff;padding:14px 20px;box-shadow:var(--shadow)
    }
    header .brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.3px}
    header .brand .logo{width:36px;height:36px;border-radius:50%;background:#fff1;border:2px solid #fff5;display:grid;place-items:center}
    header .brand .mini{font-size:12px;opacity:.9}

    .layout{display:grid;grid-template-columns:260px 1fr;gap:18px; padding:18px}
    .sidebar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
    .sidebar .section{padding:6px 8px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
    .nav{display:grid;gap:6px}
    .nav button{all:unset;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;color:#0b1220}
    .nav button:hover{background:#0ea5e911}
    .nav button.active{background:#10b98115;border:1px solid #10b98133}

    .content{display:grid;gap:18px}
    .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
    .card h3{margin:0 0 8px 0;font-size:14px;color:var(--muted);font-weight:600}
    .card .big{font-size:26px;font-weight:800}

    .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
    .toolbar input, .toolbar select{padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff}
    .toolbar .btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:700;color:#fff;background:var(--primary)}
    .btn.secondary{background:var(--accent)}
    .btn.danger{background:var(--danger)}

    table{width:100%;border-collapse:separate;border-spacing:0 8px}
    th,td{text-align:left;padding:12px;background:#fff}
    th{font-size:12px;color:var(--muted);font-weight:700}
    tbody tr{box-shadow:var(--shadow);border-radius:12px}
    tbody td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
    tbody td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

    .field{display:grid;gap:6px}
    .field label{font-size:12px;color:var(--muted)}
    .field input,.field select, .field textarea{padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}

    .stack{display:grid;gap: 12px; overflow: hidden;}

    .badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
    .badge.warn{background:#f59e0b22;color:#8a5200}
    .badge.ok{background:#10b98122;color:#0a6a50}
    .badge.err{background:#ef444422;color:#7a1111}

    .hidden{display:none}

    .footer{padding:16px;text-align:center;color:var(--muted);font-size:12px}
    
    .sidebar .stack button,
    .sidebar .stack input {
     width: 100%;
     box-sizing: border-box;
  }


    /* Print invoice */
    @media print{
      body{background:#fff}
      .layout,.sidebar,header,.not-print{display:none}
      #printArea{display:block}
    }