:root{
  --bg:#E3E5E1; --surface:#FFFFFF; --surface-2:#F0F1EE; --field:#F8F9F7; --ink:#18191B; --muted:#5A5E64; --line:#D3D6D0; --shadow:0 1px 2px rgba(20,22,20,.07), 0 3px 10px rgba(20,22,20,.05);
  --accent:#F5821F; --accent-ink:#18191B; --accent-soft:rgba(245,130,31,.13);
  --good:#23794A; --good-soft:rgba(35,121,74,.12); --bad:#B9332B; --bad-soft:rgba(185,51,43,.11);
  --info:#2C5C9A; --info-soft:rgba(44,92,154,.11);
  --radius:10px; --font:"Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D0E10; --surface:#1B1D20; --surface-2:#25282D; --field:#131518; --ink:#ECEDEE; --muted:#A0A4AB; --line:#363A40; --shadow:0 1px 2px rgba(0,0,0,.45);
    --accent-soft:rgba(245,130,31,.18); --good:#5BC28A; --good-soft:rgba(91,194,138,.14);
    --bad:#F07A70; --bad-soft:rgba(240,122,112,.14); --info:#8DB4EA; --info-soft:rgba(141,180,234,.14);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0E10; --surface:#1B1D20; --surface-2:#25282D; --field:#131518; --ink:#ECEDEE; --muted:#A0A4AB; --line:#363A40; --shadow:0 1px 2px rgba(0,0,0,.45);
  --accent-soft:rgba(245,130,31,.18); --good:#5BC28A; --good-soft:rgba(91,194,138,.14);
  --bad:#F07A70; --bad-soft:rgba(240,122,112,.14); --info:#8DB4EA; --info-soft:rgba(141,180,234,.14);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
img{max-width:100%}
.hidden{display:none !important}

/* shell */
.shell{display:flex; min-height:100%}
.rail{display:none}
.main{flex:1; min-width:0; padding:0 16px 96px}
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); display:flex; align-items:center; gap:10px; padding:14px 0 12px; min-height:60px}
.topbar h1{font-size:22px; font-weight:650; margin:0; letter-spacing:-.01em; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{flex:1; background:none; border:0; padding:9px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11.5px; color:var(--muted)}
.tabs button svg{width:22px; height:22px}
.tabs button[aria-current="page"]{color:var(--ink); font-weight:600}
.tabs button[aria-current="page"] svg{color:var(--accent)}
@media (min-width:900px){
  .tabs{display:none}
  .rail{display:flex; flex-direction:column; gap:4px; width:228px; flex:none; position:sticky; top:0; height:100vh; padding:22px 14px; border-right:1px solid var(--line); background:var(--surface)}
  .rail .who{padding:4px 10px 18px; display:flex; gap:10px; align-items:center}
  .rail .who img,.rail .who .mono{width:38px; height:38px; border-radius:50%; object-fit:contain; background:var(--surface-2)}
  .rail .who .mono{display:grid; place-items:center; font-weight:700; color:var(--accent-ink); background:var(--accent)}
  .rail .who b{display:block; font-size:14px; line-height:1.2}
  .rail .who small{color:var(--muted); font-size:12px}
  .rail button.nav{display:flex; align-items:center; gap:10px; background:none; border:0; text-align:left; padding:9px 10px; border-radius:8px; color:var(--muted); font-weight:500}
  .rail button.nav svg{width:19px; height:19px}
  .rail button.nav:hover{background:var(--surface-2); color:var(--ink)}
  .rail button.nav[aria-current="page"]{background:var(--surface-2); color:var(--ink); font-weight:600}
  .rail button.nav[aria-current="page"] svg{color:var(--accent)}
  .rail .newbtn{margin:0 0 14px}
  .main{padding:0 32px 48px}
  .fab{display:none !important}
}
.wrap{max-width:1080px; margin:0 auto}

/* buttons & fields */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 13px; font-weight:550; font-size:14px; white-space:nowrap; min-height:38px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.dark{background:var(--ink); color:var(--bg); border-color:transparent}
.btn.ghost{background:none; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px; min-height:32px; font-size:13px}
.btn svg{width:17px; height:17px}
.iconbtn{width:38px; height:38px; display:grid; place-items:center; border-radius:8px; border:0; background:none; color:var(--muted)}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn svg{width:20px; height:20px}
.fab{position:fixed; right:16px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:7; box-shadow:0 6px 18px rgba(0,0,0,.18); border-radius:28px; padding:13px 18px; font-size:15px}
label.f{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:500; min-width:0}
.in{width:100%; border:1px solid var(--line); background:var(--field); border-radius:8px; padding:9px 11px; font-size:15px; color:var(--ink); min-height:40px}
.in:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{resize:vertical; min-height:60px; line-height:1.4}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:520px){.grid3{grid-template-columns:1fr 1fr}}

/* surfaces */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:18px}
.panel h2{font-size:15.5px; margin:-16px -16px 16px; padding:12px 16px 11px; font-weight:650; background:var(--surface-2); border-bottom:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; display:flex; align-items:center; gap:9px}
.panel h2::before{content:""; width:4px; height:16px; border-radius:2px; background:var(--accent); flex:none}
.panel h2 + .sub{margin-top:-6px}
.panel h2.plain{margin:0 0 12px; padding:0; background:none; border:0; border-radius:0; font-size:17px}
.panel h2.plain::before{display:none}
.panel .sub{color:var(--muted); font-size:13px; margin:-8px 0 12px}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:26px 0 10px}
.sechead h2{font-size:17px; margin:0; font-weight:650}
.muted{color:var(--muted)}
.right{text-align:right}

/* status */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:20px; padding:2px 9px; white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.draft{color:var(--muted); background:var(--surface-2); border:1px solid var(--line)}
.pill.sent{color:var(--info); background:var(--info-soft)}
.pill.overdue{color:var(--bad); background:var(--bad-soft)}
.pill.paid{color:var(--good); background:var(--good-soft)}

/* dashboard */
.figures{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.figures > div{padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--info); border-radius:var(--radius); box-shadow:var(--shadow)}
.figures > div:nth-child(2){border-top-color:var(--bad)}
.figures > div:nth-child(3){border-top-color:var(--good)}
.figures span{font-weight:600}
.figures span{display:block; font-size:12.5px; color:var(--muted)}
.figures b{display:block; font-size:22px; font-weight:650; letter-spacing:-.01em; margin-top:2px}
.figures small{color:var(--muted); font-size:12px}
.figures .bad b{color:var(--bad)}
@media (max-width:600px){
  .figures{grid-template-columns:1fr 1fr}
  .figures{gap:10px}
  .figures > div:nth-child(3){grid-column:1 / -1}
  .figures b{font-size:19px}
}
.attn{border-left:3px solid var(--bad)}
.attn-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.attn-row:first-of-type{border-top:0; padding-top:2px}
.attn-row .what{flex:1; min-width:180px}
.attn-row .what b{display:block}
.attn-row .what small{color:var(--bad); font-weight:550}
.attn-row .amt{font-weight:650}
.chartwrap{overflow-x:auto}
.chart svg{display:block; width:100%; min-width:520px; height:220px}
.chart text{fill:var(--muted); font-size:11px; font-family:var(--font)}
.chart .bar{fill:var(--accent)}
.chart .ghost{fill:var(--line)}
.chart .val{fill:var(--ink); font-size:10.5px; font-weight:600}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg button{border:0; background:none; padding:6px 11px; font-size:13px; color:var(--muted); font-weight:550}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.years{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px}
.years button{text-align:left; border:1px solid var(--line); background:var(--surface-2); border-radius:8px; padding:10px 12px}
.years button[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.years b{display:block; font-size:17px}
.years span{font-size:12.5px; color:var(--muted)}
.months{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:12px}
.months td{padding:5px 0; border-top:1px solid var(--line)}
.months td:last-child{text-align:right; font-weight:600}
.months tr.mh td{border-top:0; font-size:12px; font-weight:600; color:var(--muted); padding-bottom:6px}
@media (max-width:520px){
  .line .nums{grid-template-columns:1fr 1fr 1fr}
  .line .nums .total{grid-column:1 / -1; padding:2px 0 0; font-size:16px}
}

/* lists */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.search{position:relative; flex:1; min-width:220px}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted)}
.search .in{padding-left:35px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:5px 12px; font-size:13px; font-weight:550; color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .n{opacity:.7; margin-left:3px}
.list{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.row{display:grid; grid-template-columns:64px 1fr auto auto; gap:14px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left}
.row:first-child{border-top:0}
.swrow{position:relative; overflow:hidden}
.swrow + .swrow{border-top:1px solid var(--line)}
.swrow .row{position:relative; z-index:1; border-top:0; background:var(--surface); touch-action:pan-y; transition:transform .22s ease; -webkit-user-select:none; user-select:none}
.swrow.dragging .row{transition:none}
.swrow[data-act] {background:var(--good)}
.swrow[data-act="sent"]{background:var(--info)}
.swact{position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 26px; border:0; background:none; color:#fff; font-weight:700; font-size:15px; cursor:pointer}
.swrow.armed .swact{font-size:17px}
.swhint{font-size:12.5px; margin:8px 2px 0}
@media (hover:hover) and (pointer:fine){.swhint{display:none}}
.row:hover{background:var(--surface-2)}
.row .num{font-weight:650; color:var(--muted)}
.row .who b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .who small{color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .amt{font-weight:650; text-align:right}
.row .amt small{display:block; font-weight:400; color:var(--muted); font-size:12px}
@media (max-width:600px){
  .row{grid-template-columns:1fr auto; gap:4px 12px; padding:12px 14px}
  .row .num{display:none}
  .row .st{grid-column:2; grid-row:2; justify-self:end}
  .row .amt{grid-row:1; grid-column:2}
}
.empty{padding:34px 20px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:4px}
.empty .btn{margin-top:14px}
.crow{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 16px; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left}
.crow:first-child{border-top:0}
.crow:hover{background:var(--surface-2)}
.crow small{display:block; color:var(--muted)}
.crow .o{color:var(--bad); font-weight:600; font-size:13px}

/* editor */
.editor{display:grid; grid-template-columns:minmax(0,1fr); gap:20px}
@media (min-width:1180px){
  .editor{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
  .editor .previewcol{position:sticky; top:72px; align-self:start; max-height:calc(100vh - 90px); overflow:auto}
  .modeswitch{display:none !important}
  .editor .editcol, .editor .previewcol{display:block !important}
}
.modeswitch{margin-bottom:12px}
.saveind{font-size:12.5px; color:var(--muted); white-space:nowrap}
@media (max-width:520px){.saveind,.wide-only{display:none}}
.client-pick{position:relative}
.suggest{position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:4; max-height:260px; overflow:auto}
.suggest button{display:block; width:100%; text-align:left; border:0; background:none; padding:9px 12px; border-top:1px solid var(--line)}
.suggest button:first-child{border-top:0}
.suggest button:hover,.suggest button.on{background:var(--surface-2)}
.suggest small{color:var(--muted); display:block}
.quick{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.quick button{border:1px dashed var(--line); background:var(--surface-2); border-radius:7px; padding:6px 10px; font-size:13px; font-weight:550; text-align:left}
.quick button:hover{border-color:var(--accent); border-style:solid}
.quick button small{color:var(--muted); font-weight:400; margin-left:4px}
.line{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:9px; padding:10px 10px 10px 12px; margin-bottom:12px; background:var(--surface-2)}
.line .in{background:var(--surface)}
.line .nums2{display:grid; grid-template-columns:1fr 90px 116px; gap:8px; align-items:end; margin-top:8px}
.line .nums2 .in{min-height:34px; padding:6px 10px; font-size:14px}
.line .lcat{font-size:12px; color:var(--muted); padding-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px}
@media (max-width:520px){.line .nums2{grid-template-columns:1fr 1fr} .line .lcat{grid-column:1 / -1; padding:0}}
.line .lnum{flex:none; width:26px; height:26px; margin-top:7px; border-radius:50%; background:var(--ink); color:var(--surface); display:grid; place-items:center; font-size:12.5px; font-weight:700}
.line .top{display:flex; gap:8px; align-items:flex-start}
.line .top .in{font-weight:600}
.line .nums{display:grid; grid-template-columns:72px 72px 1fr auto; gap:8px; align-items:end; margin-top:8px}
.line .nums .total{font-weight:650; text-align:right; padding-bottom:9px; white-space:nowrap}
.line textarea.in{margin-top:8px; min-height:44px; font-size:14px}
.line .acts{display:flex; gap:2px; flex:none}
.line .acts .iconbtn{width:34px; height:34px}
.totals{margin-top:6px; display:grid; gap:6px; justify-items:end}
.totals div{display:flex; gap:24px; min-width:220px; justify-content:space-between}
.totals .grand{font-size:18px; font-weight:700}
.statusbox .steps{display:grid; gap:10px}
.step{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:8px}
.step.done{border-color:transparent; background:var(--surface-2)}
.step b{display:block; font-size:14px}
.step small{color:var(--muted)}

/* paper preview */
.paper{background:#fff; color:#111; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.10); width:100%; max-width:780px; margin:0 auto; container-type:inline-size; font-family:Helvetica, Arial, sans-serif; aspect-ratio:8.5/11}
.paper .pg{--u:calc(100cqw / 612); padding:calc(var(--u)*22) calc(var(--u)*36) calc(var(--u)*26); font-size:calc(var(--u)*9); line-height:1.28}
.paper .box{border:calc(var(--u)*.8) solid #333; border-radius:calc(var(--u)*3); padding:calc(var(--u)*1.5) calc(var(--u)*6)}
.paper .dhd{display:grid; grid-template-columns:1fr calc(var(--u)*110) 1fr; gap:calc(var(--u)*18); align-items:start}
.paper .dhd .l{text-align:right; padding-top:calc(var(--u)*6)} .paper .dhd .r{text-align:left; padding-top:calc(var(--u)*6)}
.paper .dhd b{display:block; font-size:calc(var(--u)*12.5); letter-spacing:.01em; margin-bottom:calc(var(--u)*1)}
.paper .dhd .lg{display:flex; justify-content:center}
.paper .dhd .lg img{max-width:calc(var(--u)*100); max-height:calc(var(--u)*74); object-fit:contain}
.paper .dhd .lg .none{width:calc(var(--u)*70); height:calc(var(--u)*70); border:1px dashed #bbb; border-radius:50%; display:grid; place-items:center; color:#aaa; font-size:calc(var(--u)*8)}
.paper .drule{border-top:calc(var(--u)*1.2) solid #1e1e1e; margin:calc(var(--u)*6) 0 calc(var(--u)*9)}
.paper .dstrip{display:flex; justify-content:space-between; color:var(--paper-accent,#F5821F); font-weight:700; font-size:calc(var(--u)*13); border-bottom:calc(var(--u)*.5) solid #aaa; padding-bottom:calc(var(--u)*5)}
.paper .dstrip.n1{justify-content:flex-start}
.paper .dtitle{display:flex; align-items:center; gap:calc(var(--u)*10); margin:calc(var(--u)*14) 0 calc(var(--u)*8)}
.paper .dtitle h4{margin:0; font-size:calc(var(--u)*21); text-decoration:underline; text-underline-offset:calc(var(--u)*3); text-decoration-thickness:calc(var(--u)*1.2)}
.paper .dtitle .no{font-weight:700; font-size:calc(var(--u)*13)}
.paper .dtitle .dt{margin-left:auto; display:flex; gap:calc(var(--u)*5); align-items:center; font-weight:700; font-size:calc(var(--u)*10)}
.paper .dtitle .dt .box{font-weight:400; min-width:calc(var(--u)*90)}
.paper .dinfo{display:grid; grid-template-columns:calc(var(--u)*262) 1fr; gap:calc(var(--u)*12)}
.paper .cbox{border:calc(var(--u)*.8) solid #333; border-radius:calc(var(--u)*3); font-size:calc(var(--u)*11); line-height:1.25}
.paper .cbox b{display:block; font-size:calc(var(--u)*12); padding:calc(var(--u)*3) calc(var(--u)*6)}
.paper .cbox b + div{border-top:calc(var(--u)*.7) solid #333}
.paper .cbox div{padding:calc(var(--u)*1.5) calc(var(--u)*6)}
.paper .cinfo{font-weight:700; font-size:calc(var(--u)*8.5); margin-top:calc(var(--u)*6); display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--u)*4)}
.paper .cinfo .box{font-weight:400; font-size:calc(var(--u)*10.5)}
.paper .grids{display:grid; grid-template-columns:1.2fr 1fr; gap:calc(var(--u)*4)}
.paper .kv{display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u)*1.5) calc(var(--u)*3); align-items:center; font-size:calc(var(--u)*8.5); margin:0}
.paper .kv dt{font-weight:700; text-align:right; margin:0; white-space:nowrap}
.paper .kv dd{margin:0; border:calc(var(--u)*.5) solid #444; padding:0 calc(var(--u)*3); min-height:calc(var(--u)*11.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.paper .callout{margin-top:calc(var(--u)*6); text-align:center; font-weight:700; font-size:calc(var(--u)*9.5)}
.paper .dnotes{margin-top:calc(var(--u)*12); padding:calc(var(--u)*4) calc(var(--u)*7); white-space:pre-wrap; min-height:calc(var(--u)*36); font-size:calc(var(--u)*9)}
.paper .dtab{width:100%; border-collapse:collapse; margin-top:calc(var(--u)*14); font-size:calc(var(--u)*9)}
.paper .dtab th{text-align:left; font-weight:700; font-size:calc(var(--u)*9.5); border-bottom:calc(var(--u)*.8) solid #1e1e1e; padding:0 calc(var(--u)*3) calc(var(--u)*4)}
.paper .dtab td{vertical-align:top; padding:calc(var(--u)*5) calc(var(--u)*3) calc(var(--u)*2)}
.paper .dtab .nm{font-weight:700; display:block}
.paper .dtab .ds{display:block; white-space:pre-wrap; color:#232323; font-size:calc(var(--u)*8.5)}
.paper .dtab .r{text-align:right; white-space:nowrap} .paper .dtab .c{text-align:center; white-space:nowrap}
.paper .dend{display:flex; gap:calc(var(--u)*20); justify-content:space-between; border-top:calc(var(--u)*.8) solid #1e1e1e; margin-top:calc(var(--u)*8); padding-top:calc(var(--u)*10)}
.paper .dterms{white-space:pre-wrap; color:#5a5a5a; font-size:calc(var(--u)*7.8); max-width:calc(var(--u)*250)}
.paper .dtot{min-width:calc(var(--u)*196); font-size:calc(var(--u)*9.5)}
.paper .dtot div{display:flex; justify-content:space-between; gap:calc(var(--u)*16); padding:calc(var(--u)*2.5) 0}
.paper .dtot span:first-child{font-weight:700}
.paper .dtot .grand{font-size:calc(var(--u)*11); font-weight:700; border-top:calc(var(--u)*.5) solid #aaa; margin-top:calc(var(--u)*2)}
.paper .stamp{display:inline-block; border:calc(var(--u)*1.5) solid #23794A; color:#23794A; font-weight:700; padding:calc(var(--u)*2) calc(var(--u)*12); border-radius:calc(var(--u)*3); letter-spacing:.06em}
.paper .dfoot{display:flex; justify-content:space-between; align-items:center; gap:calc(var(--u)*10); margin-top:calc(var(--u)*28); font-weight:700; font-size:calc(var(--u)*9.5)}
.paper .dfoot .mid{text-decoration:underline; font-size:calc(var(--u)*12)}

/* settings */
.chk{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); cursor:pointer}
.panel h2 + .chk, .panel .sub + .chk{border-top:0; padding-top:0}
.chk input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--accent); flex:none}
.chk b{display:block; font-size:14.5px}
.chk small{display:block; color:var(--muted); font-size:13px; margin-top:2px}
.catrow{display:grid; grid-template-columns:1fr 96px 80px auto; grid-template-areas:"n r u x" "d d d d" "c c p p"; gap:8px; align-items:end; padding:12px 0; border-top:1px solid var(--line)}
.catrow:first-of-type{border-top:0}
.catrow .cn{grid-area:n} .catrow .cr{grid-area:r} .catrow .cu{grid-area:u} .catrow .cx{grid-area:x; margin-bottom:2px} .catrow .cd{grid-area:d} .catrow .cc{grid-area:c} .catrow .cp{grid-area:p}
.catrow textarea.in{min-height:40px}
@media (max-width:760px){.catrow{grid-template-columns:1fr 80px 64px auto; grid-template-areas:"n n n x" "r u . ." "d d d d" "c c p p"}}
.remotebar{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--info-soft); border:1px solid var(--info); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-weight:550}
.warn{background:rgba(214,140,0,.13); border:1px solid rgba(214,140,0,.5); border-radius:8px; padding:8px 11px; font-size:13.5px; margin-top:10px}
details.ins{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
details.ins summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--muted)}
.cksum{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.cksum div{background:var(--surface-2); border-radius:8px; padding:10px 12px} .cksum b{display:block; font-size:20px} .cksum span{font-size:12.5px; color:var(--muted)} .cksum .bad b{color:var(--bad)}
.ckrow{display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:12px 0; border-top:1px solid var(--line); align-items:center}
.panel h2 + .ckrow{border-top:0; padding-top:0}
.ckrow.dmg .ckname b{color:var(--bad)}
.ckname small{display:block; color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52ch}
.ckctl{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.ckc{display:flex; align-items:center; gap:4px} .ckc > span{font-size:12px; color:var(--muted); margin-right:2px}
.ckb,.ckn{min-width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-weight:650; color:var(--ink)}
.ckn.done{background:var(--good); border-color:var(--good); color:#fff}
.ckctl .chip[aria-pressed="true"]{background:var(--bad); border-color:var(--bad); color:#fff}
.figures.neutral > div:nth-child(2){border-top-color:var(--accent)}
.cknote{grid-column:1 / -1; min-height:34px; padding:6px 10px; font-size:14px}
@media (max-width:600px){.ckrow{grid-template-columns:1fr} .ckctl{justify-content:flex-start}}
table.rep{width:100%; border-collapse:collapse; font-size:14px}
table.rep th{text-align:left; font-size:12.5px; color:var(--muted); font-weight:600; padding:0 10px 6px 0}
table.rep td{padding:7px 10px 7px 0; border-top:1px solid var(--line)}
table.rep .r{text-align:right; white-space:nowrap} table.rep tr.tot td{font-weight:700}
.repgrid{gap:14px} @media (max-width:760px){.repgrid{grid-template-columns:1fr}}
.paper .dtab tr.sec td{background:#eeefec; font-weight:700; font-size:calc(var(--u)*9.5); padding:calc(var(--u)*3) calc(var(--u)*4)}
.paper .dtab tr.subt td{font-weight:700; border-top:calc(var(--u)*.5) solid #bbb; padding-bottom:calc(var(--u)*8)}
.paper.terms{aspect-ratio:auto; margin-top:16px}
.paper.terms .pg{font-size:calc(var(--u)*8.4); line-height:1.32}
.paper.terms .thd{display:flex; justify-content:space-between; align-items:baseline; border-bottom:calc(var(--u)*1.2) solid #1e1e1e; padding-bottom:calc(var(--u)*6); font-size:calc(var(--u)*10)}
.paper.terms .thd b{font-size:calc(var(--u)*12)}
.paper.terms h4{font-size:calc(var(--u)*15); margin:calc(var(--u)*12) 0 calc(var(--u)*2)}
.paper.terms .tref{color:#666; margin:0 0 calc(var(--u)*10)}
.paper.terms p{margin:0 0 calc(var(--u)*6)}
.paper.terms .tsig{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*30); margin-top:calc(var(--u)*16)}
.paper.terms .tsig b{display:block; font-size:calc(var(--u)*10); margin-bottom:calc(var(--u)*8)}
.paper.terms .tsig span{display:grid; grid-template-columns:calc(var(--u)*62) 1fr; align-items:end; color:#666; margin-bottom:calc(var(--u)*12)}
.paper.terms .tsig i{font-style:normal; color:#111; border-bottom:calc(var(--u)*.6) solid #444; min-height:calc(var(--u)*13); padding-left:calc(var(--u)*3)}
.logo-edit{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.logo-edit .lg{width:88px; height:88px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; color:var(--muted); font-size:12px}
.logo-edit .lg img{width:100%; height:100%; object-fit:contain}
.swatches{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.swatches button{width:30px; height:30px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}

/* modal & toast */
.scrim{position:fixed; inset:0; background:rgba(10,10,12,.45); z-index:20; display:flex; align-items:flex-end; justify-content:center}
@media (min-width:640px){.scrim{align-items:center}}
.modal{background:var(--surface); width:100%; max-width:520px; border-radius:14px 14px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px)); max-height:88vh; overflow:auto}
@media (min-width:640px){.modal{border-radius:14px; padding-bottom:18px}}
.modal h3{margin:0 0 6px; font-size:18px}
.modal p{margin:0 0 14px; color:var(--muted)}
.modal .acts{display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:10px; display:flex; gap:12px; align-items:center; font-size:14px; max-width:calc(100% - 32px); box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast button{background:none; border:0; color:var(--accent); font-weight:650; padding:2px 4px}
@media (min-width:900px){.toast{bottom:24px}}
.gate{max-width:440px; margin:18vh auto 0; text-align:center; padding:0 20px}
.gate h1{font-size:22px; margin:0 0 8px}
.gate p{color:var(--muted)}
.spin{width:22px; height:22px; border:2.5px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp .8s linear infinite; margin:0 auto 14px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}