/* InvoiceSheet Lite — tokens and layout from Design.md (single design source) */
:root{
  --bg:#01434F;
  --bg-deep:#003844;
  --bg-lift:#0A4D58;
  --surface:#FFFFFF;
  --surface-soft:#F7FCFA;
  --mint:#EBF7F3;
  --mint-strong:#D6F0EA;
  --ink:#102326;
  --ink-muted:#5E7276;
  --line:#E4EEEC;
  --brand:#01434F;
  --brand-hover:#0A4D58;
  --on-brand:#F7FCFA;
  --success:#1F8A6E;
  --danger:#B42318;
}
*{box-sizing:border-box}
html,body{margin:0}
/* Fonts: only the self-hosted OFL-1.1 fonts in /fonts/fonts.css (Inter for Latin, Noto Sans SC for
   Chinese; free for commercial use), then the visitor's own system font via generic families. Never
   name or ship a commercial font here. */
body{
  font-family:"Inter Variable","Noto Sans SC Variable",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;line-height:1.5;
  min-height:100vh;
}
.page{max-width:880px;margin:0 auto;padding:0 24px 64px;position:relative}
.page::before{ /* single very soft darker blob behind the main card */
  content:"";position:absolute;top:120px;left:50%;transform:translateX(-50%);
  width:720px;height:520px;max-width:90vw;border-radius:50%;
  background:var(--bg-lift);opacity:.45;filter:blur(120px);pointer-events:none;
}
.page>*{position:relative}

/* header: wordmark + language switch + account */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:28px 0 36px}
.wordmark{display:flex;align-items:center;gap:8px;color:#F7FCFA;font-size:14px;font-weight:600;text-decoration:none}
.wordmark svg{display:block}
.topbar-end{display:flex;align-items:center;gap:4px;flex-shrink:0}
.lang-wrap{position:relative}
.lang-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:30px;height:30px;padding:0;
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:rgba(247,252,250,.55);
  transition:background .15s,color .15s;
}
.lang-toggle:hover,.lang-wrap.open .lang-toggle{background:var(--bg-lift);color:#F7FCFA}
.lang-toggle:focus-visible{outline:2px solid #B7D5CE;outline-offset:2px}
.lang-toggle svg{display:block;flex:0 0 auto}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  min-width:120px;padding:6px;
  background:var(--surface);border-radius:16px;
  box-shadow:0 18px 40px rgba(0,30,36,0.18);
  display:flex;flex-direction:column;gap:2px;
}
.lang-menu[hidden]{display:none!important}
.lang-menu button{
  display:block;width:100%;text-align:left;
  background:none;border:0;border-radius:12px;padding:8px 12px;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-muted);cursor:pointer;
}
.lang-menu button:hover{background:var(--surface-soft);color:var(--ink)}
.lang-menu button.on{background:var(--mint);color:var(--brand)}

.acct-wrap{position:relative}
.acct-chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;max-width:min(220px,46vw);
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:rgba(247,252,250,.8);
  transition:background .15s,color .15s;
}
.acct-chip:hover,.acct-wrap.open .acct-chip{background:var(--bg-lift);color:#F7FCFA}
.acct-chip:focus-visible{outline:2px solid #B7D5CE;outline-offset:2px}
.acct-chip .acct-icon{display:block;flex:0 0 auto}
.acct-chip #acct-chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-avatar{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:var(--mint);color:var(--brand);
  font-size:10px;font-weight:700;line-height:18px;text-align:center;
}
.acct-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(320px,calc(100vw - 32px));
  background:var(--surface);color:var(--ink);
  border-radius:20px;padding:16px;
  box-shadow:0 18px 40px rgba(0,30,36,0.18);
}
.acct-panel-title{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 6px}
.acct-panel p{font-size:13px;color:var(--ink-muted);margin:0 0 10px}
.acct-panel .acct-status-line{font-weight:600;color:var(--success);margin:0 0 4px}
.acct-panel .acct-status-line.off{color:var(--danger)}
.acct-panel .acct-usage-line{margin:0 0 10px}
.acct-panel .acct-note:empty,.acct-panel .acct-msg:empty{display:none}
.acct-panel .acct-msg{margin:8px 0 0}
.acct-switch{margin:0 0 4px}
.acct-switch .text-btn{font-size:13px}
.acct-form{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.acct-form input{
  font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%;
}
.acct-form input:focus{outline:none;border-color:#B7D5CE}
.acct-panel .btn{height:40px;font-size:14px;width:100%}
.acct-panel #acct-manage{margin-bottom:10px}
.acct-restore{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.acct-restore summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-muted);list-style:none}
.acct-restore summary::-webkit-details-marker{display:none}
.acct-restore summary:hover{text-decoration:underline;text-underline-offset:3px}
.acct-restore[open] summary{margin-bottom:8px}
.acct-restore.plain{border-top:0;padding-top:0}
.acct-restore.plain summary{display:none}
html.i18n-pending .page,html.i18n-pending .modal-bg{visibility:hidden}

/* cards */
.card{
  background:var(--surface);
  border-radius:28px;
  padding:28px;
  box-shadow:0 18px 40px rgba(0,30,36,0.18);
  margin-bottom:20px;
}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px}
h1{font-size:40px;font-weight:600;letter-spacing:-0.02em;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.subtitle{color:var(--ink-muted);margin:0 0 22px}
.card-title{font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:0 0 16px;color:var(--ink)}

/* dropzone */
.dropzone{
  background:var(--mint);
  border:1.5px dashed #B7D5CE;
  border-radius:20px;
  min-height:168px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;cursor:pointer;padding:24px;
  transition:background .15s;
}
.dropzone:hover,.dropzone.over{background:var(--mint-strong)}
.dropzone .dz-main{font-weight:600;color:var(--ink)}
.dropzone .dz-sub{font-size:13px;color:var(--ink-muted)}
.dropzone.has-file{background:var(--mint-strong);border-style:solid}
.filechip{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.filechip .size{color:var(--ink-muted)}
.text-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* extract in progress: spinner inside the pill, stepped bar under the file chip */
.btn-spin{display:none;width:14px;height:14px;margin-right:10px;border-radius:50%;border:2px solid rgba(247,252,250,.35);border-top-color:var(--on-brand);animation:spin .8s linear infinite}
.btn.busy .btn-spin{display:inline-block}
.btn.busy{cursor:progress}
@keyframes spin{to{transform:rotate(360deg)}}
.dropzone.busy{cursor:progress}
.dropzone.busy:hover{background:var(--mint-strong)}
.dropzone.busy #dz-remove{visibility:hidden}
.dz-progress{width:min(280px,100%);display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px}
.pg-bar{display:flex;gap:4px;width:100%}
.pg-seg{flex:1;height:4px;border-radius:999px;background:var(--surface);overflow:hidden;position:relative;transition:background .2s}
.pg-seg.done{background:var(--brand)}
.pg-seg.current::after{content:"";position:absolute;inset:0 auto 0 0;width:45%;border-radius:999px;background:var(--brand);opacity:.7;animation:pg-slide 1.1s ease-in-out infinite}
@keyframes pg-slide{from{transform:translateX(-100%)}to{transform:translateX(225%)}}
.pg-label{font-size:13px;color:var(--ink-muted);min-height:1.5em}
@media (prefers-reduced-motion:reduce){
  .btn-spin{animation-duration:2.4s}
  .pg-seg.current::after{animation:none;width:100%;opacity:.4}
}

/* errors — inline, danger, no toasts */
.error-msg{color:var(--danger);font-size:14px;margin:12px 0 0;display:none}
.error-msg.on{display:block}

/* samples — small text links */
.samples{font-size:13px;color:var(--ink-muted);margin:12px 0 0}
.samples a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.samples a:hover{color:var(--brand)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 22px;border-radius:999px;border:0;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  transition:background .15s,opacity .15s;text-decoration:none;
}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.btn-secondary{background:var(--surface);color:var(--brand);border:1px solid var(--line)}
.btn-secondary:hover{background:var(--surface-soft)}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* mode control — discreet */
.mode-row{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;font-size:13px;color:var(--ink-muted)}
.mode-row label,.mode-row #quota{white-space:nowrap}
.mode-row select{
  font:inherit;font-size:13px;color:var(--ink-muted);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:2px 0;cursor:pointer;
}
.mode-row select:focus{outline:none;border-bottom-color:var(--brand)}
.byok-panel{margin-top:14px;background:var(--surface-soft);border-radius:20px;padding:16px;display:none}
.byok-panel.on{display:block}
.byok-panel .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.byok-panel label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-muted)}
.byok-panel input,.byok-panel select{
  font:inherit;font-size:14px;font-weight:400;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%;
}
.byok-panel input:focus,.byok-panel select:focus{outline:none;border-color:#B7D5CE}
.byok-note{font-size:13px;color:var(--ink-muted);margin:10px 0 0}
/* relay option — a normal horizontal checkbox row */
.byok-panel label.byok-relay{
  flex-direction:row;align-items:flex-start;gap:8px;
  margin-top:12px;font-size:13px;font-weight:400;letter-spacing:normal;color:var(--ink);
}
.byok-relay input[type="checkbox"]{width:auto;flex:0 0 auto;margin:3px 0 0;accent-color:var(--brand)}
.byok-relay span{flex:1;min-width:0}
.byok-relay-note{margin-top:4px;padding-left:21px} /* aligns with the relay label text column */

/* result card */
#result-card{display:none}
#result-card.on{display:block;animation:rise 180ms ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.status-row{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--success);margin-bottom:6px}
.meta-line{font-size:13px;color:var(--ink-muted);margin:0 0 16px}

/* preview table */
.tbl-wrap{overflow-x:auto;border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--surface-soft);color:var(--ink-muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:10px 12px;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* compare-with-original — quiet collapsible panel inside the result card */
.compare{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.compare summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--brand);
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.compare summary::-webkit-details-marker{display:none}
.compare summary:hover{text-decoration:underline;text-underline-offset:3px}
.compare summary .chev{flex:0 0 auto;transition:transform .15s ease}
.compare[open] summary .chev{transform:rotate(90deg)}
.compare-hint{font-weight:400;color:var(--ink-muted);margin-left:2px}
.compare-hint::before{content:"· "}
.compare-body{display:flex;gap:16px;margin-top:14px;align-items:flex-start}
.compare-src{flex:0 0 46%;max-width:46%}
.compare-src img{display:block;width:100%;border-radius:12px;background:#fff;border:1px solid var(--line)}
.compare-src embed{display:block;width:100%;height:360px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.compare-fields{flex:1;margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;align-content:start}
.compare-fields dt{color:var(--ink-muted);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.compare-fields dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:640px){.compare-body{flex-direction:column}.compare-src{flex:none;max-width:100%;width:100%}}

/* local history — compact secondary list */
.history-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.history .card-title{margin:0}
.history-scope{font-size:13px;color:var(--ink-muted)}
.history-list{list-style:none;margin:0;padding:0;max-height:336px;overflow-y:auto}
.history-list li+li{border-top:1px solid var(--line)}
.history-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;border-radius:12px;padding:10px 8px;margin:2px 0;
  font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
}
.history-row:hover{background:var(--surface-soft)}
.history-row.active{background:var(--mint)}
.history-row:focus-visible{outline:2px solid #B7D5CE;outline-offset:-2px}
.history-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.history-sub{flex:0 1 auto;font-size:13px;color:var(--ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.history-mode{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--brand);background:var(--mint);border-radius:999px;padding:2px 9px}
.history-row.active .history-mode{background:var(--surface)}
.history-older{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);padding:14px 8px 4px}
.history-list li.history-older{border-top:0}
.history-empty{font-size:14px;color:var(--ink-muted);margin:4px 0 0}
.history-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.history-foot .text-btn{font-size:13px}
.text-btn.quiet{color:var(--ink-muted)}
.text-btn.danger{color:var(--danger)}
.history-ask{color:var(--ink)}
.history-ask-actions{display:inline-flex;gap:16px}
@media (max-width:640px){.history-sub .when-time{display:none}}

/* how it works */
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;align-items:center;gap:14px}
.step-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--brand);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* quiet ad slot (free tier) — rendered only when the server enables ads;
   never shows an empty dashed placeholder */
.ad-slot{
  margin:0 0 20px;min-height:64px;border-radius:20px;
  background:var(--bg-lift);color:rgba(247,252,250,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;overflow:hidden;
}
.ad-slot:empty{display:none}

/* footer */
footer{font-size:13px;color:rgba(247,252,250,.65);text-align:center;padding:24px 0 0}
footer a{color:rgba(247,252,250,.85);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
footer a:hover{color:#F7FCFA}
footer a:focus-visible{outline:2px solid #B7D5CE;outline-offset:2px;border-radius:2px}
.footer-note{margin:0 0 8px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}

/* legal pages (privacy / terms): one long readable card; the article in the other language is hidden by JS */
.legal{max-width:760px;margin-left:auto;margin-right:auto}
.legal h1{font-size:32px}
.legal h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:28px 0 8px;color:var(--ink)}
.legal p,.legal li{color:var(--ink);font-size:15px;line-height:1.65}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal li+li{margin-top:6px}
.legal a{color:var(--brand);text-underline-offset:3px}
.legal code{font-size:13px;background:var(--surface-soft);border-radius:6px;padding:1px 6px}
.legal .updated{color:var(--ink-muted);font-size:13px;margin-bottom:20px}
.legal.bilingual article+article{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.legal article[hidden]{display:none}

/* modal (paywall / plan) — kept quiet */
.modal-bg{position:fixed;inset:0;background:rgba(0,30,36,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-bg.on{display:flex}
.modal{background:var(--surface);border-radius:28px;max-width:520px;width:100%;padding:28px;max-height:92vh;overflow:auto;box-shadow:0 18px 40px rgba(0,30,36,0.18)}
.modal:focus{outline:none}
.modal .legal-note a{color:var(--ink-muted);text-underline-offset:3px}
.modal h2{font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:0 0 8px}
.modal .usage-line{color:var(--ink)!important;font-weight:600;background:var(--mint);border-radius:12px;padding:10px 14px}
.modal .usage-line:empty{display:none}
.modal p{color:var(--ink-muted);font-size:14px;margin:0 0 12px}
.modal .plans{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.modal .plan{background:var(--surface-soft);border-radius:20px;padding:16px;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.modal .plan b{color:var(--ink)}
.modal .plan span{font-size:13px;color:var(--ink-muted)}
.modal input{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%}
.modal .btn{height:40px;font-size:14px}
.modal .lic-row{display:flex;gap:8px;margin-top:8px}
.modal .lic-row .btn{flex:0 0 auto;white-space:nowrap}
.modal .msg{font-size:13px;color:var(--ink-muted);margin:8px 0 0}
.modal .close-row{text-align:right;margin-top:14px}
.modal .sub-card{background:var(--mint);margin:14px 0}
.modal .sub-status{display:inline-block;margin-left:6px;font-size:12px;font-weight:600;letter-spacing:.04em;border-radius:999px;padding:1px 9px;background:var(--surface);color:var(--success)}
.modal .sub-status.off{color:var(--danger)}
.modal .btn:disabled{opacity:.55;cursor:not-allowed}
.modal .acct-hint{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.modal .acct-hint .text-btn{font-size:13px}

.hidden{display:none!important}

@media (max-width:640px){
  .page{padding:0 16px 48px}
  h1{font-size:32px}
  .card{padding:20px}
  .btn-primary.extract{width:100%}
  .byok-panel .grid{grid-template-columns:1fr}
}