/* =========================================================
   Invoice Maker — minimal black/white/gray, system fonts only
   ========================================================= */

:root{
  --paper:#ffffff;
  --paper-alt:#f7f7f7;
  --ink:#141414;
  --ink-soft:#5a5a5a;
  --ink-faint:#8a8a8a;
  --line:#e0e0e0;
  --line-strong:#c9c9c9;
  --accent:#1f2123;
  --accent-contrast:#ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --radius: 3px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --topbar-h: 56px;
  --site-header-h: 64px;
  --tmpl-accent:#1f2123;
  --tmpl-accent-soft:#eeeeee;
}

[data-theme="dark"]{
  --paper:#131313;
  --paper-alt:#1a1a1a;
  --ink:#ececec;
  --ink-soft:#a6a6a6;
  --ink-faint:#787878;
  --line:#2c2c2c;
  --line-strong:#3a3a3a;
  --accent:#ececec;
  --accent-contrast:#111111;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--paper-alt);
  color:var(--ink);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:600; }
p{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:8px 14px; z-index:100;
}
.skip-link:focus{ left:8px; top:8px; }

button, select, input, textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:var(--site-header-h); z-index:20;
  height:var(--topbar-h);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  height:100%;
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:-0.01em; }
.brand-mark{ font-size:20px; }
.brand-name{ font-size:16px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; position:relative; }

.btn{
  appearance:none; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink);
  padding:8px 14px; border-radius:var(--radius);
  cursor:pointer; font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s ease, border-color .12s ease, transform .05s ease;
}
.btn:hover{ border-color:var(--ink-faint); }
.btn:active{ transform:translateY(1px); }
.btn-ghost{ background:transparent; }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
.btn-primary:hover{ opacity:.88; }
.btn-sm{ padding:5px 10px; font-size:12px; }
.theme-icon{ font-size:14px; }

.menu{ position:relative; }
.menu-list{
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--radius); box-shadow:var(--shadow);
  min-width:230px; padding:4px; z-index:30;
}
.menu-item{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  width:100%; text-align:left; background:none; border:none;
  padding:9px 10px; border-radius:2px; cursor:pointer; font-weight:600; font-size:13px;
  color:var(--ink);
}
.menu-item:hover{ background:var(--paper-alt); }
.menu-hint{ font-weight:400; color:var(--ink-faint); font-size:11px; }

/* ---------- Layout ---------- */
.layout{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:minmax(320px, 420px) 1fr;
  gap:0;
  min-height:calc(100vh - var(--topbar-h) - var(--site-header-h));
}
.form-panel{
  border-right:1px solid var(--line);
  padding:20px; overflow-y:auto;
  max-height:calc(100vh - var(--topbar-h) - var(--site-header-h));
  background:var(--paper);
}
.preview-panel{
  padding:28px; background:var(--paper-alt);
  display:flex; justify-content:center;
  overflow-y:auto;
  max-height:calc(100vh - var(--topbar-h) - var(--site-header-h));
}
.preview-scroll{ width:100%; max-width:820px; }

/* ---------- Form fields ---------- */
.field-group{
  padding:16px 0; border-bottom:1px solid var(--line);
}
.field-group:first-child{ padding-top:0; }
.field-group-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.field-group-head h2{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }

.field{ display:block; margin-bottom:10px; }
.field:last-child{ margin-bottom:0; }
.field-label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
.field-optional{ color:var(--ink-faint); font-weight:400; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=file], select, textarea{
  width:100%; padding:8px 10px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper); color:var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus-visible{
  outline:2px solid var(--ink); outline-offset:1px;
}
textarea{ resize:vertical; font-family:inherit; }
input[type=file]{ padding:6px 8px; font-size:12px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

.privacy-note{ font-size:11.5px; color:var(--ink-faint); margin-top:16px; }

/* ---------- Line item editor ---------- */
.items-editor{ display:flex; flex-direction:column; gap:8px; }
.item-row{
  display:grid;
  grid-template-columns: 1fr 56px 76px 56px 32px;
  gap:6px; align-items:center;
}
.item-row input{ padding:7px 8px; font-size:13px; }
.item-remove{
  background:none; border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--ink-soft); cursor:pointer; height:32px; width:32px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.item-remove:hover{ color:var(--ink); border-color:var(--ink-faint); }
.item-row-labels{
  display:grid; grid-template-columns: 1fr 56px 76px 56px 32px; gap:6px;
  font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;
  padding:0 2px 2px;
}

/* ---------- Paper / invoice preview ---------- */
.paper{
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:40px 44px;
  min-height:1000px;
  color:var(--ink);
  position:relative;
}
.paper-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.logo-preview{ max-height:52px; max-width:200px; object-fit:contain; margin-bottom:10px; display:block; }
.paper-brand{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.paper-address, .paper-contact, .paper-taxid{ font-size:12.5px; color:var(--ink-soft); white-space:pre-line; margin-top:2px; }
.paper-taxid{ font-family:var(--font-mono); color:var(--ink); margin-top:6px; }

.paper-head-right{ text-align:right; }
.invoice-title{
  font-size:26px; font-weight:800; letter-spacing:.08em;
  color:var(--ink); margin-bottom:10px;
}
.invoice-meta div{ display:flex; justify-content:flex-end; gap:8px; font-size:12.5px; margin-top:2px; }
.invoice-meta span{ color:var(--ink-faint); }
.invoice-meta b{ font-family:var(--font-mono); font-weight:600; min-width:90px; text-align:right; }

.paper-rule{ height:1px; background:var(--line-strong); margin:22px 0; }

.paper-parties{ margin-bottom:22px; }
.party-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:4px; }
.party-name{ font-size:15px; font-weight:700; }
.party-address, .party-contact{ font-size:12.5px; color:var(--ink-soft); white-space:pre-line; margin-top:2px; }
.party-taxid{ font-family:var(--font-mono); font-size:12.5px; margin-top:4px; }

/* ledger-style faint rule background behind the items table */
.items-table{
  width:100%; border-collapse:collapse;
  background-image: repeating-linear-gradient( to bottom, transparent, transparent 27px, var(--line) 28px );
  background-position: 0 38px;
}
[data-theme="dark"] .items-table{ opacity:1; }
.items-table thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); font-weight:600; padding:0 8px 8px 0;
  border-bottom:1px solid var(--line-strong);
}
.items-table td{ padding:6px 8px 6px 0; font-size:13px; vertical-align:top; }
.col-qty, .col-rate, .col-tax, .col-amt{ text-align:right; white-space:nowrap; }
.items-table td.col-qty, .items-table td.col-rate, .items-table td.col-tax, .items-table td.col-amt{
  font-family:var(--font-mono);
}
.item-desc-cell{ max-width:0; }
.item-desc-name{ font-weight:600; }
.item-desc-sub{ color:var(--ink-soft); font-size:11.5px; }

.paper-totals{ display:flex; justify-content:flex-end; margin-top:14px; }
.totals-box{ width:260px; }
.totals-box .row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
.totals-box .row span:first-child{ color:var(--ink-soft); }
.totals-box .row b{ font-family:var(--font-mono); font-weight:600; }
.totals-box .grand{ border-top:1px solid var(--ink); margin-top:6px; padding-top:8px; }
.totals-box .grand span{ font-weight:700; color:var(--ink); }
.totals-box .grand b{ font-size:16px; }

.paper-words{ margin-top:10px; font-size:11.5px; color:var(--ink-soft); font-style:italic; text-align:right; }

.paper-foot{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;
  margin-top:44px; padding-top:16px; border-top:1px solid var(--line);
}
.foot-col{ font-size:12px; color:var(--ink-soft); white-space:pre-line; }
.terms{ margin-top:8px; color:var(--ink-faint); font-size:11px; }
.sig-col{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; }
.signature-preview{ max-height:44px; max-width:160px; object-fit:contain; margin-bottom:4px; }
.sig-line{ width:150px; border-top:1px solid var(--line-strong); padding-top:4px; text-align:center; font-size:10.5px; color:var(--ink-faint); }
.sig-line::after{ content:"Authorized signatory"; }

/* ---------- Footer ---------- */
.page-footer{
  text-align:center; font-size:11.5px; color:var(--ink-faint);
  padding:16px; border-top:1px solid var(--line); background:var(--paper);
}
.page-footer a{ color:var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .layout{ grid-template-columns:1fr; }
  .form-panel, .preview-panel{ max-height:none; }
  .form-panel{ border-right:none; border-bottom:1px solid var(--line); }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .paper{ padding:24px 20px; }
  .paper-foot{ grid-template-columns:1fr; }
  .sig-col{ align-items:flex-start; }
}
@media (max-width:520px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .item-row, .item-row-labels{ grid-template-columns:1fr 1fr; }
  .btn-label{ display:none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* ---------- Print (native "Save as PDF") ---------- */
@media print{
  @page{ size:A4; margin:12mm; }
  body{ background:#fff; font-size:12px; }
  .topbar, .form-panel, .page-footer, .privacy-note{ display:none !important; }
  .layout{ display:block; max-width:none; }
  .preview-panel{ padding:0; max-height:none; overflow:visible; display:block; }
  .preview-scroll{ max-width:none; }
  .paper{ box-shadow:none; border:none; min-height:0; padding:0; }
  [data-theme="dark"] .paper,[data-theme="dark"] body{ background:#fff; color:#111; }
}

/* =========================================================
   Template system — 10 style layouts × 5 color palettes
   Layout classes change structure/typography. Palette classes
   only set the accent colors. Combine both on the same .paper.
   ========================================================= */

/* ---- Palettes (accent colors only) ---- */
.paper.palette-charcoal{ --tmpl-accent:#1f2123; --tmpl-accent-soft:#eeeeee; }
.paper.palette-navy    { --tmpl-accent:#1d3557; --tmpl-accent-soft:#eaf0f7; }
.paper.palette-forest  { --tmpl-accent:#1f4d3a; --tmpl-accent-soft:#e8f3ee; }
.paper.palette-burgundy{ --tmpl-accent:#5c1a2b; --tmpl-accent-soft:#f7ebee; }
.paper.palette-teal    { --tmpl-accent:#164e52; --tmpl-accent-soft:#e7f2f2; }

/* ---- Layout: Classic Ledger (default look, no overrides needed) ---- */

/* ---- Layout: Modern Band ---- */
.paper.layout-modern .paper-head{
  background:var(--tmpl-accent); color:#fff;
  margin:-40px -44px 26px; padding:30px 44px;
}
.paper.layout-modern .paper-address,
.paper.layout-modern .paper-contact,
.paper.layout-modern .invoice-meta span{ color:rgba(255,255,255,.72); }
.paper.layout-modern .paper-taxid,
.paper.layout-modern .invoice-meta b,
.paper.layout-modern .invoice-title{ color:#fff; }

/* ---- Layout: Minimal Mono ---- */
.paper.layout-mono, .paper.layout-mono *{ font-family:var(--font-mono) !important; letter-spacing:0 !important; }
.paper.layout-mono{ box-shadow:none; border:1px solid var(--line-strong); }
.paper.layout-mono .items-table{ background-image:none; }
.paper.layout-mono .invoice-title{ font-weight:700; font-size:22px; }

/* ---- Layout: Bold Rule ---- */
.paper.layout-bold .paper-rule{ height:4px; background:var(--tmpl-accent); margin:18px 0 22px; }
.paper.layout-bold .invoice-title{
  font-size:34px; border-bottom:4px solid var(--tmpl-accent);
  padding-bottom:8px; display:inline-block;
}
.paper.layout-bold .paper-brand{ font-size:22px; }

/* ---- Layout: Compact Receipt ---- */
.paper.layout-receipt{ max-width:460px; margin:0 auto; }
.paper.layout-receipt .paper-head{ flex-direction:column; align-items:center; text-align:center; }
.paper.layout-receipt .paper-head-right{ text-align:center; margin-top:10px; }
.paper.layout-receipt .invoice-meta div{ justify-content:center; }
.paper.layout-receipt .paper-rule{ background:none; border-top:1px dashed var(--line-strong); height:0; }
.paper.layout-receipt .items-table{ background-image:none; }
.paper.layout-receipt .paper-parties{ text-align:center; }

/* ---- Layout: Corporate Serif ---- */
.paper.layout-serif .paper-brand,
.paper.layout-serif .invoice-title,
.paper.layout-serif .party-name,
.paper.layout-serif .field-group-head h2{
  font-family:Georgia, Cambria, "Times New Roman", Times, serif;
}
.paper.layout-serif .invoice-title{ letter-spacing:.02em; font-weight:700; }
.paper.layout-serif .paper-rule{ height:2px; background:var(--tmpl-accent); }

/* ---- Layout: Boxed Sections ---- */
.paper.layout-boxed .paper-parties,
.paper.layout-boxed .items-table,
.paper.layout-boxed .paper-foot{
  border:1px solid var(--line-strong); border-radius:4px; padding:14px;
}
.paper.layout-boxed .paper-foot{ margin-top:20px; }
.paper.layout-boxed .items-table{ border-collapse:separate; border-spacing:0; background-image:none; }

/* ---- Layout: Underline Accent ---- */
.paper.layout-underline .party-label,
.paper.layout-underline .field-group-head h2{ color:var(--tmpl-accent); }
.paper.layout-underline .items-table thead th{ color:var(--tmpl-accent); border-bottom:2px solid var(--tmpl-accent); }
.paper.layout-underline .invoice-title{ border-bottom:2px solid var(--tmpl-accent); display:inline-block; padding-bottom:4px; }

/* ---- Layout: Dark Header ---- */
.paper.layout-darkhead .paper-head{
  background:#161616; color:#fff; margin:-40px -44px 26px; padding:30px 44px;
}
.paper.layout-darkhead .invoice-title{ color:var(--tmpl-accent); }
.paper.layout-darkhead .paper-address,
.paper.layout-darkhead .paper-contact,
.paper.layout-darkhead .invoice-meta span{ color:rgba(255,255,255,.65); }
.paper.layout-darkhead .invoice-meta b,
.paper.layout-darkhead .paper-taxid{ color:#fff; }

/* ---- Layout: Outline Table ---- */
.paper.layout-outline .items-table{ background-image:none; border:1px solid var(--line-strong); border-collapse:collapse; }
.paper.layout-outline .items-table th,
.paper.layout-outline .items-table td{ border:1px solid var(--line-strong); padding:6px 8px; }

/* ---- Template picker modal ---- */
.tmpl-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50;
  display:none; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto;
}
.tmpl-modal-overlay:not([hidden]){ display:flex; }
.tmpl-modal{
  background:var(--paper); border-radius:6px; max-width:1000px; width:100%;
  padding:20px; box-shadow:var(--shadow);
}
.tmpl-modal-head{ display:flex; justify-content:space-between; align-items:center; }
.tmpl-modal-head h2{ font-size:16px; }
.tmpl-modal-sub{ font-size:12.5px; color:var(--ink-soft); margin:6px 0 14px; }
.tmpl-grid{
  display:grid; grid-template-columns:repeat(auto-fill, 150px); gap:14px;
  justify-content:center; max-height:70vh; overflow-y:auto; padding:4px;
}
.tmpl-card{
  cursor:pointer; border:1px solid transparent; border-radius:4px; padding:6px;
  text-align:center; background:none;
}
.tmpl-card:hover{ background:var(--paper-alt); }
.tmpl-card.selected{ border-color:var(--ink); }
.tmpl-thumb-wrap{
  width:150px; height:118px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:#fff; border-radius:2px;
}
.tmpl-thumb{
  width:900px; transform:scale(.1666); transform-origin: top left; pointer-events:none;
}
.tmpl-name{ font-size:11px; margin-top:6px; color:var(--ink-soft); line-height:1.25; }

@media (max-width:560px){
  .tmpl-grid{ grid-template-columns:repeat(auto-fill, 130px); }
  .tmpl-thumb-wrap{ width:130px; height:102px; }
  .tmpl-thumb{ transform:scale(.1444); }
}

/* =========================================================
   Site header / nav / footer (shared across all pages)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:30;
  height:var(--site-header-h);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header-inner{
  height:100%; max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; gap:16px;
}
.site-logo{ display:flex; align-items:center; height:100%; }
.site-logo img{ height:34px; width:auto; display:block; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:36px; height:36px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper); cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; height:2px; width:18px; margin:0 auto; background:var(--ink); }

.site-nav{ display:flex; align-items:center; gap:22px; }
.site-nav a{
  color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:13.5px;
  padding:4px 0; border-bottom:2px solid transparent;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a.current{ color:var(--ink); border-bottom-color:var(--ink); }

.nav-dropdown{ position:relative; }
.nav-dropdown-btn{
  display:flex; align-items:center; gap:4px; background:none; border:none;
  color:var(--ink-soft); font-weight:600; font-size:13.5px; cursor:pointer; padding:4px 0;
  font-family:inherit;
}
.nav-dropdown-btn:hover{ color:var(--ink); }
.nav-dropdown-btn .chev{ font-size:10px; }
.nav-dropdown-list{
  display:none; position:absolute; right:0; top:calc(100% + 10px);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); min-width:190px; padding:4px; z-index:31;
}
.nav-dropdown-list.open{ display:block; }
.nav-dropdown-list a{
  display:block; padding:8px 10px; font-size:13px; font-weight:600;
  color:var(--ink); text-decoration:none; border-radius:2px;
}
.nav-dropdown-list a:hover{ background:var(--paper-alt); }
.nav-dropdown-list a.current{ color:var(--ink-faint); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:var(--site-header-h);
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:6px 0;
    box-shadow:var(--shadow);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:12px 20px; border-bottom:1px solid var(--line); }
  .nav-dropdown{ width:100%; }
  .nav-dropdown-btn{ width:100%; padding:12px 20px; justify-content:space-between; border-bottom:1px solid var(--line); }
  .nav-dropdown-list{
    display:none; position:static; box-shadow:none; border:none; border-radius:0;
    background:var(--paper-alt); width:100%;
  }
  .nav-dropdown-list.open{ display:block; }
}

.site-footer{
  background:var(--paper); border-top:1px solid var(--line);
}
.site-footer-inner{
  max-width:1400px; margin:0 auto; padding:26px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.footer-links a{ color:var(--ink-soft); text-decoration:none; font-size:12.5px; font-weight:600; }
.footer-links a:hover{ color:var(--ink); }
.footer-copy{ font-size:11.5px; color:var(--ink-faint); }
.footer-copy a{ color:var(--ink-soft); }

/* =========================================================
   Simple content pages (about / contact / privacy / disclaimer / terms)
   ========================================================= */
.content-wrap{ max-width:760px; margin:0 auto; padding:48px 20px 64px; }
.content-wrap h1{ font-size:26px; margin-bottom:8px; letter-spacing:-.01em; }
.content-wrap .content-lede{ color:var(--ink-soft); font-size:14.5px; margin-bottom:32px; }
.content-wrap h2{ font-size:16px; margin:28px 0 8px; }
.content-wrap p{ font-size:14px; line-height:1.7; color:var(--ink); margin-bottom:12px; }
.content-wrap ul{ margin:0 0 12px; padding-left:20px; }
.content-wrap li{ font-size:14px; line-height:1.7; margin-bottom:4px; }
.content-wrap a{ color:var(--ink); }
.content-wrap .updated-note{ font-size:12px; color:var(--ink-faint); margin-top:36px; border-top:1px solid var(--line); padding-top:14px; }
.contact-box{
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px;
}
.contact-box a.btn{ margin-top:6px; }
.todo-note{
  background:var(--paper-alt); border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:12px 14px; font-size:12.5px; color:var(--ink-soft); margin:14px 0;
}
.todo-note b{ color:var(--ink); }