:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --surface-2:#fafbff;
    --border:#e4e7ef;
    --border-strong:#cbd1dd;
    --text:#1b2030;
    --text-soft:#5b6478;
    --text-muted:#8891a4;
    --accent:#2f4bff;
    --accent-soft:#eaeeff;
    --accent-strong:#1a32c9;
    --ok:#0f8a5f;
    --ok-soft:#e4f6ee;
    --warn:#b4731c;
    --warn-soft:#fdf3e0;
    --danger:#b5284a;
    --danger-soft:#fce7ec;
    --chip-bg:#eef0f6;
    --tt-bg:#1b2030;
    --tt-text:#ffffff;
    --tt-body:#cfd3df;
    --tt-code:#9aa6ff;
    --code-block-bg:#0f1220;
    --code-block-text:#cdd3e1;
    --danger-border:#f3c5cf;
    --shadow-sm:0 1px 2px rgba(20,28,50,.05);
    --shadow:0 6px 24px -12px rgba(20,28,50,.25);
    --radius:14px;
    --radius-sm:8px;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  html[data-theme="dark"]{
    --bg:#0f1116;
    --surface:#171a22;
    --surface-2:#1d2029;
    --border:#2a2f3d;
    --border-strong:#3a4154;
    --text:#e6e8ee;
    --text-soft:#a5adbd;
    --text-muted:#7a8297;
    --accent:#7a8cff;
    --accent-soft:#242949;
    --accent-strong:#9aa9ff;
    --ok:#4ed39e;
    --ok-soft:#1c3329;
    --warn:#e0a24a;
    --warn-soft:#3a2e1a;
    --danger:#f27792;
    --danger-soft:#3a1f27;
    --chip-bg:#242834;
    --tt-bg:#2a2f3d;
    --tt-text:#ffffff;
    --tt-body:#c8cbd5;
    --tt-code:#9aa6ff;
    --code-block-bg:#0a0c14;
    --code-block-text:#cdd3e1;
    --danger-border:#4a2a35;
    --shadow-sm:0 1px 2px rgba(0,0,0,.2);
    --shadow:0 6px 24px -12px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    transition:background .2s,color .2s;
  }
  .page{max-width:1180px;margin:0 auto;padding:32px 28px 80px}
  header.top{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:24px;gap:16px;flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand-mark{
    width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg,var(--accent) 0%,#7a8cff 100%);
    display:grid;place-items:center;color:#fff;font-weight:700;
    box-shadow:var(--shadow);
    font-family:var(--mono);
  }
  .brand h1{font-size:17px;margin:0;letter-spacing:-.01em}
  .brand small{display:block;color:var(--text-muted);font-weight:500;font-size:12px}
  .tag{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--accent-soft);color:var(--accent-strong);
    padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
    letter-spacing:.02em;
  }
  .tag.ok{background:var(--ok-soft);color:var(--ok)}
  .tag.warn{background:var(--warn-soft);color:var(--warn)}
  .tag.danger{background:var(--danger-soft);color:var(--danger)}
  .tag.neutral{background:var(--chip-bg);color:var(--text-soft)}

  /* Header controls (lang/theme) */
  .controls{display:flex;gap:8px;align-items:center}
  .seg{
    display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);overflow:hidden;
  }
  .seg button{
    background:transparent;border:none;padding:6px 10px;
    font-family:inherit;font-size:12px;font-weight:600;
    color:var(--text-soft);cursor:pointer;letter-spacing:.03em;
    transition:.12s;
  }
  .seg button + button{border-left:1px solid var(--border)}
  .seg button.active{background:var(--accent-soft);color:var(--accent-strong)}
  .seg button:hover:not(.active){color:var(--text)}
  .icon-btn{
    background:var(--surface);border:1px solid var(--border-strong);
    width:34px;height:32px;border-radius:var(--radius-sm);
    display:grid;place-items:center;cursor:pointer;color:var(--text-soft);
    transition:.12s;
  }
  .icon-btn:hover{color:var(--accent);border-color:var(--accent)}

  /* Drop zone */
  .dropzone{
    display:block;
    background:var(--surface);
    border:1.5px dashed var(--border-strong);
    border-radius:var(--radius);
    padding:44px 28px;
    text-align:center;
    cursor:pointer;
    transition:.15s border-color,.15s background;
  }
  .dropzone:hover,.dropzone.drag{
    border-color:var(--accent);
    background:var(--accent-soft);
  }
  .dropzone h2{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
  .dropzone p{margin:0;color:var(--text-soft)}
  .dropzone input{display:none}
  .dz-icon{
    width:44px;height:44px;margin:0 auto 10px;
    display:grid;place-items:center;border-radius:12px;
    background:var(--accent-soft);color:var(--accent);
  }
  .hint{color:var(--text-muted);font-size:12px;margin-top:10px}

  .actions{display:flex;gap:8px;align-items:center}
  button.btn{
    border:1px solid var(--border-strong);
    background:var(--surface);color:var(--text);
    padding:8px 14px;border-radius:var(--radius-sm);
    font-family:inherit;font-size:13px;font-weight:500;
    cursor:pointer;transition:.12s;
  }
  button.btn:hover{border-color:var(--accent);color:var(--accent)}
  button.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  button.btn.primary:hover{background:var(--accent-strong)}

  /* Invoice layout */
  .hero{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:26px 28px;
    box-shadow:var(--shadow-sm);
    display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;
    margin-bottom:20px;
  }
  .hero-main h2{margin:0 0 4px;font-size:22px;letter-spacing:-.015em}
  .hero-main .sub{color:var(--text-soft);font-size:13.5px}
  .hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .hero-totals{text-align:right;min-width:220px}
  .hero-totals .label{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
  .hero-totals .amount{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .hero-totals .amount-sub{color:var(--text-soft);font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums}

  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:820px){.grid-2{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.hero-totals{text-align:left}}

  .card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:20px 22px;
    box-shadow:var(--shadow-sm);
    margin-bottom:16px;
  }
  .card h3{
    font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-muted);margin:0 0 14px;font-weight:600;
    display:flex;align-items:center;gap:8px;
  }
  .card h3 .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

  .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
  .kv dt{color:var(--text-muted);font-weight:500}
  .kv dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
  .kv dd.mono{font-family:var(--mono);font-size:12.5px}
  .kv dd strong{font-weight:600}

  .party-name{font-size:16px;font-weight:600;margin-bottom:2px;letter-spacing:-.01em}
  .party-addr{color:var(--text-soft);font-size:13px;margin-bottom:12px}

  table.lines{width:100%;border-collapse:collapse;font-size:13px}
  table.lines th{
    text-align:left;padding:10px 12px;font-weight:600;color:var(--text-muted);
    border-bottom:1px solid var(--border);font-size:11.5px;letter-spacing:.05em;
    text-transform:uppercase;
  }
  table.lines td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
  table.lines tbody tr:last-child td{border-bottom:none}
  table.lines td.num,table.lines th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  table.lines tr:hover td{background:var(--surface-2)}
  .line-desc{max-width:520px}
  .line-nat{margin-left:6px}

  .recap-row{
    display:grid;grid-template-columns:auto auto auto 1fr auto;gap:16px;
    padding:10px 0;align-items:center;font-size:13.5px;
    border-bottom:1px dashed var(--border);
  }
  .recap-row:last-child{border-bottom:none}
  .recap-row .imp{font-variant-numeric:tabular-nums;text-align:right}

  .totals-block{
    background:var(--surface-2);border-radius:var(--radius-sm);
    padding:14px 16px;margin-top:12px;
  }
  .totals-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
  .totals-row.grand{font-size:16px;font-weight:700;margin-top:6px;padding-top:10px;border-top:1px solid var(--border)}
  .totals-row .v{font-variant-numeric:tabular-nums}

  .pay-row{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
    padding:12px 14px;background:var(--surface-2);border-radius:var(--radius-sm);
    margin-bottom:8px;
  }
  .pay-row .lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
  .pay-row .val{font-size:13.5px;font-variant-numeric:tabular-nums}
  .iban{font-family:var(--mono);font-size:12.5px;word-break:break-all}

  .code{
    display:inline-flex;align-items:center;gap:4px;
    font-family:var(--mono);font-size:11.5px;font-weight:600;
    background:var(--chip-bg);color:var(--text-soft);
    padding:2px 7px;border-radius:5px;
    border-bottom:1.5px dotted var(--border-strong);
    cursor:help;vertical-align:middle;
  }
  .code:hover{background:var(--accent-soft);color:var(--accent-strong);border-bottom-color:var(--accent)}

  .hint-label{
    border-bottom:1.5px dotted var(--border-strong);cursor:help;
  }
  .hint-label:hover{border-bottom-color:var(--accent);color:var(--accent-strong)}

  #tooltip{
    position:fixed;z-index:1000;pointer-events:none;
    max-width:320px;background:var(--tt-bg);color:var(--tt-text);
    padding:10px 12px;border-radius:8px;
    font-size:12.5px;line-height:1.45;
    box-shadow:0 10px 30px -6px rgba(0,0,0,.3);
    opacity:0;transform:translateY(4px);
    transition:.12s opacity,.12s transform;
  }
  #tooltip.show{opacity:1;transform:translateY(0)}
  #tooltip .tt-title{font-weight:600;margin-bottom:3px;color:var(--tt-text)}
  #tooltip .tt-code{font-family:var(--mono);color:var(--tt-code);font-size:11.5px}
  #tooltip .tt-body{color:var(--tt-body)}

  .error{
    background:var(--danger-soft);color:var(--danger);
    padding:14px 16px;border-radius:var(--radius-sm);
    border:1px solid var(--danger-border);font-size:13.5px;
  }

  .hidden{display:none !important}

  details.raw{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:14px 18px;margin-top:16px;
  }
  details.raw summary{cursor:pointer;font-weight:600;color:var(--text-soft);font-size:13px}
  details.raw pre{
    font-family:var(--mono);font-size:11.5px;
    background:var(--code-block-bg);color:var(--code-block-text);padding:16px;border-radius:var(--radius-sm);
    overflow:auto;max-height:420px;margin-top:12px;
  }
  details.raw pre .xtag{color:#7fa4ff}
  details.raw pre .xattr{color:#ffb57f}
  details.raw pre .xval{color:#a6e3a1}

  footer.bottom{margin-top:40px;text-align:center;color:var(--text-muted);font-size:12px}
  a{color:var(--accent)}