@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
:root{--petrol:#396680;--ink:#203f52;--pale:#e9f7fb;--blue:#8fc8df;--line:#c8e0e8;--white:#fff;--danger:#a64c53}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#dceff4,#f8fbfc);color:var(--ink);font:15px/1.55 Lexend,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}.card{background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px #24465722;border-radius:18px}.login{max-width:460px;margin:12vh auto;padding:42px}.login h1,.content h1{font-size:clamp(30px,4vw,46px);line-height:1.06;margin:7px 0 18px}.login em{font-style:normal;color:var(--petrol)}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;margin:0;color:var(--petrol)}.muted{color:#597585}.login label,.field label{display:grid;gap:5px;font-weight:600;margin:16px 0}input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:#fff;color:var(--ink);width:100%}textarea{min-height:82px;resize:vertical}button.primary,button[type=submit],.login button:not(.link){background:var(--petrol);color:#fff;border-radius:9px;padding:11px 17px;font-weight:700}button.primary:hover,button[type=submit]:hover{background:#264f66}.link{color:var(--petrol);background:transparent;padding:8px 0;text-decoration:underline}.error{color:var(--danger);min-height:20px}.hidden{display:none!important}.logout{margin-top:auto;text-align:left;color:#c7e6f1}#app{min-height:100vh}#app:has(aside){display:grid;grid-template-columns:238px 1fr}aside{background:var(--petrol);color:#fff;padding:32px 20px;min-height:100vh;display:flex;flex-direction:column;gap:23px}.logo{font-size:29px;font-weight:700;letter-spacing:-.08em}.logo span{letter-spacing:-.04em}aside .eyebrow{color:var(--blue)}nav{display:grid;gap:5px}nav button{background:transparent;color:#d8ecf2;text-align:left;padding:11px 12px;border-radius:8px;font-weight:600}nav button:hover,nav button.active{background:#ffffff1d;color:#fff}.side-note{margin-top:auto;border-top:1px solid #ffffff36;padding-top:16px;color:#d9edf4}.side-note small{color:#a9cedd}.content{padding:42px;max-width:1450px;width:100%;margin:auto}header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:20px}.stat small{color:#587888}.stat strong{display:block;font-size:27px;margin-top:8px}.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:20px}.panel{padding:22px}.panel h2{font-size:18px;margin:0 0 14px}.hint{background:var(--pale);border-left:4px solid var(--petrol);padding:14px 15px;border-radius:0 8px 8px 0;color:#375f73}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th{text-align:left;font-size:11px;letter-spacing:.08em;color:#688494;padding:10px;border-bottom:1px solid var(--line)}.table td{padding:13px 10px;border-bottom:1px solid #e8f1f4;vertical-align:middle}.table tr:last-child td{border:0}.badge{font-size:11px;font-weight:700;border-radius:999px;padding:4px 9px;background:var(--pale);color:var(--petrol)}.badge.paid{background:#def3ea;color:#287255}.badge.warning{background:#fff0d8;color:#915c14}.actions{display:flex;gap:6px;flex-wrap:wrap}.small-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 8px;color:var(--petrol);font-size:12px;font-weight:600}.empty{padding:22px;color:#66808e;text-align:center}dialog{border:0;border-radius:16px;box-shadow:0 20px 70px #16334255;max-width:600px;width:calc(100% - 30px);padding:0}dialog::backdrop{background:#17354366}#modal-form{padding:30px;position:relative}.close{position:absolute;right:12px;top:10px;background:transparent;color:var(--petrol);font-size:25px}.modal-title{margin:0 25px 8px 0;font-size:25px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.item-row{display:grid;grid-template-columns:1.8fr .5fr .75fr auto;gap:7px;margin:8px 0}.subtle{font-size:12px;color:#66808e}.danger{color:var(--danger)}@media(max-width:800px){#app:has(aside){display:block}aside{min-height:auto;padding:18px;display:block}aside nav{grid-template-columns:repeat(3,1fr);margin-top:15px}.side-note,.logout{display:none}.content{padding:24px 16px}.stats,.grid2{grid-template-columns:1fr 1fr}header{align-items:flex-start}.item-row{grid-template-columns:1fr 52px 75px auto}}@media(max-width:500px){.stats,.grid2,.two{grid-template-columns:1fr}.login{margin:30px 15px;padding:28px}.content h1{font-size:34px}header{display:grid}.primary{width:100%}}
dialog:has(.invoice-line){max-width:980px}.invoice-line-labels,.invoice-line{display:grid;grid-template-columns:minmax(185px,1.1fr) minmax(245px,1.55fr) minmax(95px,.58fr) minmax(135px,.78fr) 48px;gap:14px;align-items:end}.invoice-line-labels{margin-top:24px;color:#688494;font-size:11px;font-weight:700;letter-spacing:.04em}.invoice-line{padding:14px 0;border-top:1px solid #e8f1f4}.invoice-line .field label{margin:0}.invoice-line .invoice-remove{height:43px;align-self:end;display:grid;place-items:center}.invoice-line input,.invoice-line select{min-width:0}@media(max-width:820px){dialog:has(.invoice-line){max-width:680px}.invoice-line-labels{display:none}.invoice-line{grid-template-columns:1fr 1fr}.invoice-line .invoice-remove{grid-column:2;justify-self:end;width:48px}}@media(max-width:520px){.invoice-line{grid-template-columns:1fr}.invoice-line .invoice-remove{grid-column:1;justify-self:start}}