:root{--bg:#f4f6f8;--card:#fff;--text:#17202a;--muted:#697581;--line:#dfe4e8;--dark:#111820;--blue:#1f5f92;--blue2:#eaf2f8;--green:#26734d;--red:#a73838;--orange:#9a6421;--radius:14px;--shadow:0 10px 25px rgba(18,35,52,.06)}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px} a{color:inherit;text-decoration:none}.layout{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:#121921;color:#edf3f7;padding:24px 18px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.brand img{width:40px;height:48px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}.brand small{display:block;color:#aebbc6;font-size:11px}.brand strong{font-size:16px;letter-spacing:.2px}.nav{display:flex;flex-direction:column;gap:5px}.nav a{padding:11px 12px;border-radius:9px;color:#cfd8df}.nav a:hover,.nav a.active{background:#202b36;color:#fff}.nav .section{font-size:10px;color:#788896;text-transform:uppercase;letter-spacing:1.2px;margin:16px 10px 5px}.sidebar-footer{position:absolute;left:18px;right:18px;bottom:18px;border-top:1px solid #2b3641;padding-top:14px;color:#9eacb7;font-size:12px}.main{min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:5}.topbar .user{display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;background:#e4ebf0;display:grid;place-items:center;font-weight:700}.content{padding:30px 32px 50px;max-width:1500px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.page-head h1{margin:0;font-size:27px}.page-head p{margin:6px 0 0;color:var(--muted)}.btn{border:0;border-radius:9px;padding:10px 15px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px}.btn-primary{background:var(--blue);color:#fff}.btn-dark{background:#18212a;color:#fff}.btn-secondary{background:#fff;border:1px solid var(--line);color:#26323b}.btn-danger{background:#fff2f2;color:var(--red);border:1px solid #f2cccc}.btn-sm{padding:7px 10px;font-size:12px}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:19px;box-shadow:var(--shadow)}.stat .label{color:var(--muted);font-size:12px}.stat .value{font-size:29px;font-weight:750;margin-top:8px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-head{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.card-head h2,.card-head h3{margin:0;font-size:16px}.card-body{padding:19px}.table-wrap{overflow:auto}table.data{width:100%;border-collapse:collapse}table.data th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6d7983;text-align:left;padding:11px 14px;background:#f8fafb;border-bottom:1px solid var(--line)}table.data td{padding:12px 14px;border-bottom:1px solid #edf0f2;vertical-align:middle}table.data tr:last-child td{border-bottom:0}.right{text-align:right!important}.muted{color:var(--muted)}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.badge-draft{background:#fff4df;color:#8a5b10}.badge-finalized{background:#e8f6ee;color:#23623f}.badge-cancelled{background:#fdeaea;color:#8f3434}.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px}.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:#44515d}.field input,.field select,.field textarea{width:100%;border:1px solid #cfd7de;border-radius:8px;padding:10px 11px;font:inherit;background:#fff;color:var(--text);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6c9ec5;box-shadow:0 0 0 3px rgba(31,95,146,.1)}.field textarea{min-height:105px;resize:vertical}.hint{font-size:11px;color:var(--muted);margin-top:5px}.section-title{font-size:15px;font-weight:750;margin:8px 0 14px}.divider{height:1px;background:var(--line);margin:19px 0}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.invoice-items{width:100%;border-collapse:collapse}.invoice-items th{background:#f7f9fa;padding:9px;font-size:11px;text-align:left;color:#5c6871}.invoice-items td{padding:7px;border-bottom:1px solid var(--line);vertical-align:top}.invoice-items input,.invoice-items select{width:100%;border:1px solid #ccd4db;border-radius:7px;padding:9px}.remove-row{width:34px;height:34px;border:1px solid #e4bdbd;background:#fff7f7;color:#a63a3a;border-radius:8px;cursor:pointer}.product-picker{display:flex;gap:8px;align-items:end;margin-bottom:10px}.alert{padding:12px 14px;border-radius:9px;margin-bottom:16px;border:1px solid}.alert-error{background:#fff1f1;border-color:#efcaca;color:#8c3333}.alert-success{background:#edf8f1;border-color:#c8e8d4;color:#245f3d}.toolbar{display:flex;gap:9px;flex-wrap:wrap}.searchbar{display:flex;gap:8px;align-items:center}.searchbar input,.searchbar select{border:1px solid #ced6dd;border-radius:8px;padding:9px 10px;background:#fff}.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.kv{display:grid;grid-template-columns:155px 1fr;gap:8px 14px;font-size:13px}.kv .k{color:var(--muted)}.summary-box{margin-left:auto;width:360px;max-width:100%;background:#f8fafb;border:1px solid var(--line);border-radius:10px;padding:14px}.summary-row{display:flex;justify-content:space-between;padding:5px 0}.summary-row.total{font-size:17px;font-weight:800;border-top:1px solid #cfd6dc;margin-top:7px;padding-top:10px}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eef3f6,#f9fbfc)}.login-card{width:min(430px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 50px rgba(15,31,45,.12);padding:32px}.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:25px}.login-brand img{width:55px}.login-card h1{font-size:24px;margin:0}.login-card p{color:var(--muted)}.login-card .field{margin-bottom:14px}.login-card .btn{width:100%;margin-top:7px}.note{background:#f3f7fa;border:1px solid #d9e5ed;border-radius:10px;padding:12px 14px;color:#44515b;font-size:12px}.admin-grid{grid-template-columns:1fr 1fr}.inline-form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.inline-form .wide{grid-column:span 2}.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.layout{grid-template-columns:80px 1fr}.sidebar{padding:20px 11px}.brand div,.nav span,.sidebar-footer{display:none}.brand{justify-content:center}.nav a{text-align:center;padding:11px 4px}.content{padding:24px 20px}.stats{grid-template-columns:repeat(2,1fr)}.detail-grid,.admin-grid{grid-template-columns:1fr}.col-3,.col-4,.col-6,.col-8{grid-column:span 12}}
@media(max-width:620px){.layout{display:block}.sidebar{display:none}.topbar{padding:0 16px}.content{padding:18px 14px}.stats{grid-template-columns:1fr 1fr}.page-head{flex-direction:column}.form-grid{display:block}.field{margin-bottom:12px}.invoice-items{min-width:800px}}