/* =========================================================
   Duka Ledger — Offline Debt Book
   Design language: a physical shopkeeper's credit ledger.
   Paper, stitched spine, ruled lines, ink-stamped balances.
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --ink:            #16261F;
  --ink-soft:       #46524B;
  --ink-faint:      #8B9790;
  --paper:          #F7F3E9;
  --paper-raised:   #FFFDF8;
  --paper-dim:      #ECE5D3;
  --rule:           #D9D0B8;
  --brand:          #2F6B4F;
  --brand-dark:     #1F4A37;
  --brand-tint:     #E4EEE8;
  --owed:           #B5471B;
  --owed-tint:      #F6E6DD;
  --gold:           #B8860F;
  --gold-tint:      #F3E9CF;
  --danger:         #A8321F;
  --shadow:         0 1px 2px rgba(22,38,31,0.06), 0 4px 14px rgba(22,38,31,0.07);
  --shadow-lg:      0 8px 30px rgba(22,38,31,0.16);

  /* --- Type --- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"]{
  --ink:            #EFEAD9;
  --ink-soft:       #C4C0AE;
  --ink-faint:      #7C8378;
  --paper:          #14180F;
  --paper-raised:   #1D2317;
  --paper-dim:      #202519;
  --rule:           #33392A;
  --brand:          #6FBE93;
  --brand-dark:     #4C9A72;
  --brand-tint:     #1B2C22;
  --owed:           #E08858;
  --owed-tint:      #2E2016;
  --gold:           #E0B84C;
  --gold-tint:      #2B2415;
  --danger:         #E5745B;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
}

html{ scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
  /* subtle ruled-paper texture */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 35px,
      var(--rule) 35px,
      var(--rule) 36px
    );
  background-attachment:local;
}
[data-theme="dark"] body{
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 35px,
      var(--rule) 35px,
      var(--rule) 36px
    );
}

h1,h2,h3,.display{ font-family:var(--font-display); letter-spacing:.01em; }
.num, .amount, input[type="number"]{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

button{ font-family:inherit; }
a{ color:inherit; }

::selection{ background:var(--gold-tint); }

/* Focus visibility */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* =================== App shell =================== */
#app{
  max-width:560px;
  margin:0 auto;
  min-height:100%;
  padding-bottom:calc(var(--nav-h) + 24px + var(--safe-b));
  position:relative;
}

.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  backdrop-filter:saturate(180%) blur(6px);
  padding:14px 18px 10px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--rule);
}
.topbar .brandmark{
  display:flex; align-items:center; gap:10px;
}
.topbar .brandmark .stitch{
  width:8px; height:28px;
  border-left:2px dashed var(--brand);
}
.topbar h1{
  margin:0; font-size:19px; font-weight:600; color:var(--ink);
}
.topbar .sub{ font-size:11px; color:var(--ink-faint); margin-top:1px; }
.topbar-actions{ display:flex; align-items:center; gap:8px; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; padding:5px 10px;
  border-radius:999px; border:1px solid var(--rule);
  color:var(--ink-soft); background:var(--paper-raised);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); }
.pill.offline .dot{ background:var(--owed); }
.pill.offline{ color:var(--owed); border-color:var(--owed); background:var(--owed-tint); }

.iconbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule); background:var(--paper-raised);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
}
.iconbtn:active{ transform:scale(0.94); }
.badge-dot{
  position:absolute; top:6px; right:7px;
  width:9px; height:9px; border-radius:50%;
  background:var(--owed); border:2px solid var(--paper);
}

main{ padding:16px; }
.view{ display:none; animation:fade .18s ease; }
.view.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:22px 0 10px;
}
.section-title h2{ font-size:15px; margin:0; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.section-title a, .link-btn{
  font-size:13px; color:var(--brand); font-weight:600; background:none; border:none; cursor:pointer; padding:0;
}

/* =================== Cards / stitched notebook motif =================== */
.card{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-left:3px dashed var(--brand);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}

.stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.stat-card{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:14px 14px 12px;
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:2px;
}
.stat-card.owed::before{ background:var(--owed); }
.stat-card.paid::before{ background:var(--brand); }
.stat-card.count::before{ background:var(--gold); }
.stat-card.txn::before{ background:var(--ink-faint); }
.stat-card .label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; margin-bottom:6px; padding-left:6px;}
.stat-card .value{ font-size:22px; font-weight:700; padding-left:6px; }
.stat-card.owed .value{ color:var(--owed); }
.stat-card.paid .value{ color:var(--brand); }

.hero-total{
  background:linear-gradient(160deg, var(--brand-dark), var(--brand));
  color:#F7F3E9;
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.hero-total::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 34px, rgba(255,255,255,0.06) 34px, rgba(255,255,255,0.06) 35px);
}

.hero-total .label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; position:relative; }
.hero-total .value{ font-size:34px; font-weight:700; margin-top:4px; position:relative; }
.hero-total .foot{ display:flex; gap:16px; margin-top:14px; position:relative; font-size:12px; opacity:.92; }
.hero-total .foot b{ font-family:var(--font-mono); }

/* =================== Lists =================== */
.list{ display:flex; flex-direction:column; gap:8px; }
.row-card{
  display:flex; align-items:center; gap:12px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:12px 14px;
  cursor:pointer;
}
.row-card:active{ transform:scale(0.99); }
.avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex:none;
  font-family:var(--font-display);
}
.row-main{ flex:1; min-width:0; }
.row-main .title{ font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-main .subtitle{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-end{ text-align:right; flex:none; }
.row-end .amt{ font-weight:700; font-size:14.5px; }
.row-end .amt.owed{ color:var(--owed); }
.row-end .amt.paid{ color:var(--brand); }
.row-end .meta{ font-size:11px; color:var(--ink-faint); margin-top:2px; }

.badge{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.03em; }
.badge.debt{ background:var(--owed-tint); color:var(--owed); }
.badge.payment{ background:var(--brand-tint); color:var(--brand-dark); }
.badge.adjustment{ background:var(--gold-tint); color:var(--gold); }

/* =================== Empty states =================== */
.empty{
  text-align:center; padding:44px 20px;
  color:var(--ink-soft);
}
.empty .glyph{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:50%; border:2px dashed var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:var(--ink-faint); font-family:var(--font-display);
}
.empty h3{ margin:0 0 6px; font-size:16px; }
.empty p{ margin:0 0 16px; font-size:13.5px; color:var(--ink-faint); max-width:280px; margin-inline:auto; }

/* =================== Buttons =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-sm);
  padding:12px 18px;
  font-size:14.5px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  width:100%;
}
.btn svg, .iconbtn svg, .more-ic svg, .ic svg{ flex-shrink:0; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-outline{ background:transparent; border-color:var(--rule); color:var(--ink); }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-ghost{ background:transparent; color:var(--brand); }
.btn-sm{ padding:8px 12px; font-size:13px; width:auto; }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; }

/* =================== Forms =================== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.field .hint{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; }
input[type="text"], input[type="number"], input[type="tel"], input[type="date"], select, textarea{
  width:100%; padding:12px 13px;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:15px;
  font-family:var(--font-body);
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); }
textarea{ resize:vertical; min-height:70px; }
.currency-input{ position:relative; }
.currency-input .prefix{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-family:var(--font-mono); font-weight:600; pointer-events:none;
}
.currency-input input{ padding-left:46px; font-family:var(--font-mono); font-weight:600; }

.seg{ display:flex; border:1px solid var(--rule); border-radius:var(--radius-sm); overflow:hidden; }
.seg button{
  flex:1; padding:10px 6px; background:var(--paper-raised); border:none; color:var(--ink-soft);
  font-size:12.5px; font-weight:600; cursor:pointer; border-right:1px solid var(--rule);
}
.seg button:last-child{ border-right:none; }
.seg button.active{ background:var(--brand); color:#fff; }

.method-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.method-grid button{
  padding:9px 13px; border-radius:999px; border:1px solid var(--rule);
  background:var(--paper-raised); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.method-grid button.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

.method-option{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px;
}
.method-option .checkline{ margin:0; font-weight:600; }
.method-option-fields{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .18s ease, opacity .18s ease, margin-top .18s ease;
}
.method-option-fields.open{ max-height:120px; opacity:1; margin-top:10px; }
.method-option-fields input{ margin-bottom:8px; }
.method-option-fields input:last-child{ margin-bottom:0; }
.method-option-fields.two-col{ display:flex; gap:8px; }
.method-option-fields.two-col input{ margin-bottom:0; }

.searchbar{
  display:flex; align-items:center; gap:8px;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:999px;
  padding:9px 14px; margin-bottom:14px;
}
.searchbar input{ border:none; background:none; padding:0; flex:1; font-size:14.5px; }
.searchbar input:focus{ outline:none; }
.searchbar svg{ flex:none; color:var(--ink-faint); }

/* =================== Bottom nav =================== */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-width:560px; margin:0 auto;
  background:var(--paper-raised);
  border-top:1px solid var(--rule);
  display:flex;
  padding-bottom:var(--safe-b);
}
.bottomnav button{
  flex:1; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 2px 8px; color:var(--ink-faint); font-size:10.5px; font-weight:600;
  height:var(--nav-h);
}
.bottomnav button svg{ width:21px; height:21px; }
.bottomnav button.active{ color:var(--brand); }

.fab{
  position:fixed; z-index:35;
  right:calc(50% - 280px + 18px);
  bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  width:58px; height:58px; border-radius:50%;
  background:var(--owed); color:#fff;
  border:none; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; cursor:pointer;
}
@media (max-width:596px){
  .fab{ right:18px; }
}
.fab:active{ transform:scale(0.94); }

/* =================== Sheets / Modals =================== */
.overlay{
  position:fixed; inset:0; background:rgba(22,38,31,0.45);
  z-index:50; display:none; align-items:flex-end; justify-content:center;
}
.overlay.active{ display:flex; }
.sheet{
  background:var(--paper);
  width:100%; max-width:560px;
  border-radius:22px 22px 0 0;
  padding:10px 18px calc(20px + var(--safe-b));
  max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
  animation:up .22s ease;
}
@keyframes up{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet .grabber{ width:36px; height:4px; background:var(--rule); border-radius:2px; margin:6px auto 14px; }
.sheet-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sheet-header h2{ margin:0; font-size:17px; }

.modal-center{ align-items:center; padding:20px; }
#confirmDialog{ z-index:260; }
.dialog{
  background:var(--paper); border-radius:var(--radius-lg);
  padding:22px 20px; width:100%; max-width:340px;
  box-shadow:var(--shadow-lg); text-align:center;
  animation:pop .16s ease;
}
@keyframes pop{ from{ transform:scale(0.95); opacity:0; } to{ transform:none; opacity:1; } }
.dialog .glyph{ margin-bottom:8px; display:flex; justify-content:center; }
.dialog h3{ margin:0 0 8px; font-size:16.5px; }
.dialog p{ margin:0 0 18px; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

.sheet-actions{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.action-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 6px; border-bottom:1px solid var(--rule); cursor:pointer;
}
.action-row:last-child{ border-bottom:none; }
.action-row .ic{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand-dark); flex:none;
}
.action-row .ic.payment{ background:var(--gold-tint); color:var(--gold); }
.action-row .ic.customer{ background:var(--owed-tint); color:var(--owed); }
.action-row .t{ font-weight:600; font-size:14.5px; }
.action-row .s{ font-size:12px; color:var(--ink-faint); }

/* =================== Toasts =================== */
.toast-wrap{
  position:fixed; top:14px; left:0; right:0; z-index:270;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--ink); color:var(--paper);
  padding:11px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:8px;
  animation:toastin .2s ease;
  max-width:90%;
}
[data-theme="dark"] .toast{ background:var(--paper-raised); color:var(--ink); border:1px solid var(--rule); }
.toast.error{ background:var(--danger); color:#fff; }
.toast.success::before{ content:"✓"; }
@keyframes toastin{ from{ transform:translateY(-8px); opacity:0; } to{ transform:none; opacity:1; } }

/* =================== Profile =================== */
.profile-head{ text-align:center; padding:6px 0 4px; }
.profile-head .avatar{ width:64px; height:64px; font-size:22px; margin:0 auto 10px; }
.profile-head h2{ margin:0 0 3px; font-size:19px; }
.profile-head .phone{ color:var(--ink-faint); font-size:13.5px; }
.balance-banner{
  text-align:center; margin:16px 0 6px;
  padding:16px; border-radius:var(--radius-lg);
  background:var(--owed-tint);
}
.balance-banner.settled{ background:var(--brand-tint); }
.balance-banner .amt{ font-size:26px; font-weight:700; color:var(--owed); }
.balance-banner.settled .amt{ color:var(--brand-dark); }
.balance-banner .lbl{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; margin-top:4px; }

.mini-stats{ display:flex; gap:8px; margin:14px 0; }
.mini-stats .c{ flex:1; text-align:center; background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius); padding:10px 4px; }
.mini-stats .c .v{ font-weight:700; font-size:15px; }
.mini-stats .c .l{ font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

.timeline{ position:relative; padding-left:18px; margin-top:6px; }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1.5px; background:var(--rule); }
.tl-item{ position:relative; padding-bottom:18px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-18px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--brand);
}
.tl-item.payment::before{ border-color:var(--brand); }
.tl-item.debt::before{ border-color:var(--owed); }
.tl-item.adjustment::before{ border-color:var(--gold); }
.tl-date{ font-size:11px; color:var(--ink-faint); margin-bottom:3px; }
.tl-card{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius); padding:11px 13px; }
.tl-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.tl-desc{ font-size:13.5px; font-weight:600; }
.tl-amt{ font-weight:700; font-size:14.5px; white-space:nowrap; }
.tl-amt.debt{ color:var(--owed); }
.tl-amt.payment{ color:var(--brand); }
.tl-run{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
.tl-actions{ display:flex; gap:12px; margin-top:8px; }
.tl-actions button{ background:none; border:none; padding:0; font-size:11.5px; font-weight:600; color:var(--ink-faint); cursor:pointer; }
.tl-actions button:hover{ color:var(--brand); }

/* =================== Filters row =================== */
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:12px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; padding:7px 13px; border-radius:999px; border:1px solid var(--rule);
  font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--paper-raised); cursor:pointer; white-space:nowrap;
}
.chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.sortbar{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.sortbar select{ width:auto; padding:6px 10px; font-size:12.5px; }

/* =================== Statement / print =================== */
.statement{ background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius); padding:18px; }
.statement-head{ text-align:center; border-bottom:1px dashed var(--rule); padding-bottom:12px; margin-bottom:12px; }
.statement-head .biz{ font-family:var(--font-display); font-size:18px; font-weight:700; }
.statement-head .meta{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; }
table.stmt-table{ width:100%; border-collapse:collapse; font-size:12px; }
table.stmt-table th{ text-align:left; padding:6px 4px; border-bottom:1px solid var(--rule); font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); }
table.stmt-table td{ padding:7px 4px; border-bottom:1px solid var(--paper-dim); vertical-align:top; }
table.stmt-table td.num, table.stmt-table th.num{ text-align:right; font-family:var(--font-mono); }
.statement-totals{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--rule); font-size:13px; }
.statement-totals .row{ display:flex; justify-content:space-between; padding:4px 0; }
.statement-totals .row.final{ font-weight:700; font-size:15px; color:var(--owed); border-top:1px solid var(--rule); margin-top:4px; padding-top:8px; }

@media print{
  body{ background:#fff !important; background-image:none !important; color:#16261F !important; }
  .topbar,.bottomnav,.fab,.toast-wrap,.no-print{ display:none !important; }
  .overlay{ position:static !important; background:none !important; display:block !important; }
  .overlay:not(#statementSheet){ display:none !important; }
  .sheet{ box-shadow:none !important; max-height:none !important; }
  .sheet-header, .grabber, .sheet-actions, .btn-row{ display:none !important; }
  #app{ max-width:none; padding:0; }
  .statement{ border:none; box-shadow:none; background:#fff !important; }
  .statement *{ color:#16261F !important; }
  .statement-totals .row.final{ color:#B5471B !important; }
  table.stmt-table td, table.stmt-table th{ border-color:#ddd !important; }
}

/* =================== Lock screen =================== */
#lockScreen{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#welcomeScreen{
  position:fixed; inset:0; z-index:210;
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.welcome-inner{ width:100%; max-width:340px; text-align:center; }
.lock-inner{ width:100%; max-width:340px; text-align:center; }
.lock-brand{ margin-bottom:26px; }
.lock-title{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:2px; }
.pin-dots{ display:flex; justify-content:center; gap:16px; margin-bottom:8px; }
.pin-dot{
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--rule); background:transparent; transition:background .15s ease, border-color .15s ease;
}
.pin-dot.filled{ background:var(--brand); border-color:var(--brand); }
.pin-dot.shake{ animation:shake .3s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.lock-error{ color:var(--danger); font-size:12.5px; height:18px; margin-bottom:18px; }
.pin-pad{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  max-width:280px; margin:0 auto;
}
.pin-pad button{
  aspect-ratio:1; border-radius:50%;
  border:1px solid var(--rule); background:var(--paper-raised);
  font-size:20px; font-weight:600; color:var(--ink);
  cursor:pointer;
}
.pin-pad button:active{ background:var(--brand-tint); }
.pin-pad button[data-key="back"], .pin-pad button[data-key="bio"]{ border:none; background:none; font-size:19px; color:var(--ink-soft); }

/* =================== Scroll to top =================== */
.scroll-top-btn{
  position:fixed; z-index:34;
  left:calc(50% - 280px + 18px);
  bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  width:44px; height:44px; border-radius:50%;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--rule); box-shadow:var(--shadow);
  display:none; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
}
@media (max-width:596px){ .scroll-top-btn{ left:18px; } }
.scroll-top-btn.show{ display:flex; }

/* =================== Update banner =================== */
.update-banner{
  position:fixed; left:12px; right:12px; z-index:90;
  bottom:calc(var(--nav-h) + var(--safe-b) + 12px);
  max-width:536px; margin:0 auto;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius);
  padding:13px 14px; display:none; align-items:center; gap:12px;
  box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .update-banner{ background:var(--paper-raised); color:var(--ink); border:1px solid var(--rule); }
.update-banner.show{ display:flex; animation:up .22s ease; }
.update-banner .msg{ flex:1; font-size:13px; font-weight:600; }
.update-banner button{
  border:none; background:var(--brand); color:#fff; font-weight:700; font-size:12.5px;
  padding:9px 14px; border-radius:999px; cursor:pointer; flex:none;
}

/* =================== More grid (home page) =================== */
.more-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:8px;
}
.more-tile{
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:16px 14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .1s ease;
}
.more-tile::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brand);
  opacity:.55;
}
.more-tile:active{ transform:scale(0.97); }
.more-ic{
  width:38px; height:38px; border-radius:11px;
  background:var(--brand-tint); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; margin-bottom:10px;
}
.more-label{ font-weight:700; font-size:14.5px; color:var(--ink); }
.more-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

/* =================== Misc =================== */
.legal-text{ font-size:13px; line-height:1.6; color:var(--ink-soft); max-height:65vh; overflow-y:auto; }
.legal-text p{ margin:0 0 12px; }
.legal-text strong{ color:var(--ink); }

.list-row{
  display:flex; align-items:center; gap:12px;
  padding:13px 4px; border-bottom:1px solid var(--rule); cursor:pointer;
}
.list-row:last-child{ border-bottom:none; }
.list-row .ic{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand-dark); font-size:16px;
}
.list-row .body{ flex:1; min-width:0; }
.list-row .t{ font-weight:600; font-size:14px; }
.list-row .s{ font-size:12px; color:var(--ink-faint); margin-top:1px; }
.list-row .chev{ color:var(--ink-faint); font-size:16px; flex:none; }
.list-row.unread{ background:var(--gold-tint); border-radius:var(--radius-sm); }

.soda-card{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, var(--gold-tint), var(--paper-raised));
  border:1px solid var(--gold); border-radius:var(--radius-lg);
  padding:14px 16px;
}
.soda-emoji{ font-size:28px; flex:none; }
.soda-text{ flex:1; min-width:0; }
.soda-title{ font-weight:700; font-size:14px; }
.soda-sub{ font-size:12px; color:var(--ink-faint); margin-top:1px; }
.soda-btn{ width:auto; flex:none; padding:10px 16px; font-size:13px; background:var(--gold); border-color:var(--gold); }
.soda-btn:active{ transform:scale(0.97); }

.soda-detail-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:var(--radius);
  padding:14px 16px; margin:14px 0;
}
.soda-detail-row .num{ font-weight:700; font-size:16px; }
.soda-detail-row .lbl{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.divider{ height:1px; background:var(--rule); margin:18px 0; border:none; }
.muted{ color:var(--ink-faint); font-size:12.5px; }
.checkline{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.checkline input{ width:auto; }
.privacy-note{ font-size:12px; color:var(--ink-soft); line-height:1.55; background:var(--brand-tint); border-radius:var(--radius); padding:12px 14px; }
.warn-note{ font-size:12px; color:var(--owed); line-height:1.55; background:var(--owed-tint); border-radius:var(--radius); padding:12px 14px; }
.settings-group{ margin-bottom:22px; }
.settings-group h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:0 0 10px; }