:root { --ink:#172523; --muted:#62706c; --line:#dbe3de; --paper:#fffefa; --mint:#d7f4dd; --green:#146b45; --accent:#ee714d; }
.charge-item span { display:grid; gap:2px; }.charge-item small { color:var(--muted); font-size:.75rem; }
@page { margin:10mm; }
@media print {
  body { margin:0; background:#fff; }
  body > .topbar, .hero, .workspace { display:none !important; }
  main { max-width:none; margin:0; padding:0; }
  .layout { display:block; }
  #charge-print { position:static; width:auto; height:auto; min-height:0; border:0; box-shadow:none; padding:0; }
  #charge-print .section-title, #charge-print #charge-form, #charge-print .result-actions { display:none !important; }
  #charge-print .charge-result { grid-template-columns:190px minmax(0,1fr); column-gap:28px; margin:0; }
  #charge-print .qr { width:190px; margin:18px 0 0; break-inside:avoid; }
  #charge-print .payload { height:190px; min-height:0; margin:18px 0 0; resize:none; overflow:hidden; }
}
.charge-result:not(.empty):not(.error) { display:grid; grid-template-columns:minmax(120px,42%) minmax(0,1fr); column-gap:14px; align-items:start; }
.charge-result:not(.empty):not(.error) > .charge-header, .charge-result:not(.empty):not(.error) > .charge-items, .charge-result:not(.empty):not(.error) > .total, .charge-result:not(.empty):not(.error) > .result-actions { grid-column:1/-1; }
.charge-result:not(.empty):not(.error) > .qr { width:100%; margin:18px 0 12px; }
.charge-result:not(.empty):not(.error) > .payload { min-height:0; height:auto; margin:18px 0 12px; align-self:stretch; }
* { box-sizing:border-box; } body { margin:0; font:16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:#f5f5ee; } .topbar { max-width:1160px; margin:auto; padding:24px 28px; display:flex; justify-content:space-between; color:var(--muted); font-size:.88rem; } .brand { color:var(--ink); text-decoration:none; font-size:1.35rem; font-weight:800; letter-spacing:-.07em; } .brand span { color:var(--green); } main { max-width:1160px; margin:auto; padding:26px 28px 64px; } .hero { max-width:670px; margin:34px 0 48px; } .eyebrow,.step { color:var(--green); font-weight:800; letter-spacing:.09em; font-size:.7rem; margin:0 0 8px; } h1 { font-size:clamp(2.6rem,6vw,5rem); letter-spacing:-.075em; line-height:.96; margin:0 0 20px; } h1 em { color:var(--green); font-family:Georgia,serif; font-weight:400; } .hero>p:last-child { color:var(--muted); font-size:1.1rem; max-width:570px; } .layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr); gap:22px; align-items:start; }.workspace { display:grid; gap:22px; }.card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 3px 0 rgba(23,37,35,.025); }.charge-card { position:sticky; top:20px; }.section-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:19px; }.section-title h2 { font-size:1.15rem; letter-spacing:-.04em; margin:0; }.text-button,.remove { border:0; background:transparent; color:var(--green); font:inherit; cursor:pointer; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.form-grid label,.service-form label { display:grid; gap:6px; color:var(--muted); font-size:.82rem; } input,select { width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; padding:11px 12px; font:inherit; color:var(--ink); } input:focus,select:focus { outline:2px solid #97d9af; border-color:var(--green); }.button { border:1px solid var(--green); border-radius:8px; padding:10px 14px; background:transparent; color:var(--green); font-weight:750; cursor:pointer; }.primary { background:var(--green); color:#fff; border:0; }.form-grid .button { align-self:end; }.hidden { display:none!important; }.inline-form { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; }.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.chip { padding:7px 10px; border-radius:999px; background:var(--mint); color:#24553b; font-size:.88rem; }.chip button { margin-left:7px; border:0; background:none; cursor:pointer; color:inherit; font-size:1.1rem; }.service-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.service-form>fieldset { grid-column:1/-1; border:0; padding:0; margin:0; }.service-form legend { font-size:.82rem; color:var(--muted); margin-bottom:8px; }.checklist { display:flex; flex-wrap:wrap; gap:8px; }.checklist label { display:flex; align-items:center; gap:5px; background:#f1f6f1; padding:6px 9px; border-radius:7px; color:var(--ink); }.checklist input { width:auto; }.hint { color:var(--muted); font-size:.85rem; margin:0; }.service-list { border-top:1px solid var(--line); margin-top:22px; }.service { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }.service p { color:var(--muted); font-size:.85rem; margin:3px 0; }.service-amount { display:block; text-align:right; }.remove { font-size:.78rem; display:block; margin:5px 0 0 auto; }.charge-result { margin-top:20px; }.empty { color:var(--muted); }.charge-header { padding-bottom:14px; border-bottom:1px solid var(--line); }.charge-header h3 { margin:0 0 5px; font-size:1.15rem; }.charge-header p { margin:0; color:var(--muted); font-size:.85rem; }.charge-items { margin:12px 0; }.charge-item,.total { display:flex; justify-content:space-between; gap:10px; padding:7px 0; }.total { border-top:2px solid var(--ink); padding-top:12px; font-size:1.12rem; }.qr { display:block; width:210px; max-width:100%; margin:18px auto 12px; }.qr canvas,.qr img,.qr svg { width:100%!important; height:auto!important; }.qr-error { margin:18px 0 12px; padding:10px; border-radius:8px; background:#fff0eb; color:#b03b2a; font-size:.88rem; }.payload { width:100%; resize:vertical; min-height:95px; font:11px/1.35 ui-monospace,monospace; }.result-actions { display:flex; gap:9px; margin-top:10px; }.result-actions .button { flex:1; }.error { color:#b03b2a; background:#fff0eb; padding:10px; border-radius:8px; font-size:.88rem; } @media (max-width:820px) { .layout { grid-template-columns:1fr; }.charge-card { position:static; }.topbar { padding:18px 20px; } main { padding:14px 20px 40px; }.hero { margin:22px 0 32px; } } @media (max-width:520px) { .topbar>span { display:none; }.form-grid,.service-form,.inline-form { grid-template-columns:1fr; }.card { padding:19px; } }