/* Lengolo lite client — one stylesheet, no framework, no images. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  overflow-x:hidden;background:var(--surface);
  color:var(--ink);
  font:16px/1.5 var(--font-ui);
  -webkit-text-size-adjust:100%;
}
a{color:var(--blue-ink)}
h1,h2,h3{font-family:var(--font-heading);margin:0}

/* ---------- phone shell ---------- */
.phone{
  width:100%;max-width:420px;margin:0 auto;background:#fff;overflow-x:hidden;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:100vh;
  min-height:100dvh;          /* follows the shrinking URL bar on a handset */
}
.app-header{
  background:var(--blue);color:#fff;padding:9px 16px 0;
  border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow);
}
.brand-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px}
.brand{min-width:0;font-family:var(--font-heading);font-size:18px;letter-spacing:-.01em;overflow:hidden}
.brand small{
  display:block;font:9px/1.25 var(--font-ui);letter-spacing:.06em;
  text-transform:uppercase;opacity:.8;white-space:nowrap;
}
.data{justify-self:end;min-width:0;font-size:9.5px;opacity:.9;text-align:right;line-height:1.25;white-space:nowrap}

/* the stamp: one decorative element, and it carries the name */
.stamp{
  display:inline-flex;width:40px;height:32px;margin:0 10px;flex:0 0 auto;
  background:#FFFBE6;border:0;border-radius:1px;
  transform:rotate(-6deg);flex-direction:column;align-items:center;justify-content:center;
  color:#123B6B;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
  /* one notch, repeated: the perforated edge of a real postage stamp */
  -webkit-mask:
    radial-gradient(circle 2.6px at 50% 0, #0000 96%, #000) 0 0/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, #0000 96%, #000) 0 100%/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, #0000 96%, #000) 0 0/100% 7px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, #0000 96%, #000) 100% 0/100% 7px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 2.6px at 50% 0, #0000 96%, #000) 0 0/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, #0000 96%, #000) 0 100%/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, #0000 96%, #000) 0 0/100% 7px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, #0000 96%, #000) 100% 0/100% 7px repeat-y;
  mask-composite: intersect;
}
.stamp b{font-family:var(--font-heading);font-size:13px}
.stamp small{font-size:5px;letter-spacing:.1em;margin-top:1px}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 16px 4px;
  padding: 4px;
  font-size: 10.5px;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}

.nav a {
  flex: 1;
  text-align: center;
  color: #fff;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav a[aria-current="page"] {
  background: var(--tab-active, #FFE083);
  color: var(--tab-ink, var(--blue-ink, #1e293b));
  font-weight: 700;
}

.nav a:hover:not([aria-current="page"]) {
  background: rgba(255, 255, 255, .12);
}

.sort{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 16px;background:var(--yellow-chrome);
  border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;color:var(--blue-ink);
}
.sort .group{display:flex;gap:14px}
.sort .links{display:flex;gap:10px;align-items:center}
.sort .drafts{color:var(--blue-ink);text-decoration:none;border-bottom:1px solid var(--blue-ink)}
.sort a{color:var(--blue-ink);text-decoration:none;opacity:.85}
.sort a[aria-current="true"]{opacity:1;text-decoration:underline}

/* ---------- message list ---------- */
.list{list-style:none;margin:0;padding:0;flex:1}
.list li{border-bottom:1px solid var(--line);border-left:3px solid transparent}
.list li.unread{border-left-color:var(--yellow)}
.row{display:block;padding:11px 16px;text-decoration:none;color:inherit;line-height:1.35}
.from{display:flex;justify-content:space-between;gap:8px;font-weight:650;font-size:13px}
.from span:last-child{font-weight:400;color:var(--muted);font-size:11px;white-space:nowrap}
.subject{display:block;font-size:12.5px;color:var(--subject, #3A2B38);margin-top:2px}
.size{display:block;font-size:10.5px;color:var(--size-ink, var(--blue-ink));margin-top:3px;letter-spacing:.03em}
.empty{padding:32px 16px;color:var(--muted);font-size:13px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);background:var(--paper);font-size:11.5px;font-weight:700}
.pager a{color:var(--blue-ink);text-decoration:none}

.app-footer{
  display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;white-space:nowrap;
  margin-top:auto;            /* pin to the bottom however short the page */
  padding:11px 12px calc(11px + env(safe-area-inset-bottom));
  font-size:9.5px;font-weight:700;color:var(--blue-ink);
  background:var(--yellow-chrome);border-top:1px solid var(--line);
}
.app-footer a{color:var(--blue-ink);text-decoration:none}

/* ---------- message view ---------- */
.msg-head{padding:14px 16px;border-bottom:1px solid var(--line)}
.msg-head h2{font-size:17px;margin-bottom:4px}
.who{font-size:12px;color:var(--muted)}
.body{padding:16px;font-size:13.5px;color:#2B3A45;white-space:pre-line;flex:1}
.banner{
  margin:12px 16px 0;border:1px dashed var(--yellow);background:#FFF8D0;color:#7A4A16;
  font-size:11.5px;padding:9px 11px;border-radius:8px;
}
.banner b{display:block;font-size:12px;color:#5D3510;margin-bottom:2px}
.actions{display:flex;gap:10px;padding:16px 16px 20px;flex-wrap:wrap;align-items:center}
.btn{
  font-size:12.5px;padding:9px 18px;border-radius:999px;
  border:1px solid #D9DEE7;background:#fff;color:#374151;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;line-height:1.2;
}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}


/* buttons get a physical press (shared by app and site) */
.btn{
  background:linear-gradient(180deg,#FFFFFF,#F7F8FA);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(30,40,60,.10), 0 3px 8px rgba(30,40,60,.06);
}
.btn.primary{
  background:linear-gradient(180deg,#2A6FB8,#1D5FAE 60%,#1A55A0);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 0 rgba(0,0,0,.16) inset, 0 4px 12px rgba(15,37,66,.26);
}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(30,40,60,.14)}

/* steps: numbered coins (shared) */
.steps li:before{
  background:linear-gradient(180deg,#2A6FB8,#1D5FAE);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px rgba(15,37,66,.25);
}

/* ---------- compose ---------- */.field{padding:11px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.field b{color:var(--ink)}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.field input,.field textarea{
  width:100%;border:0;outline:0;font-size:14px;color:var(--ink);background:transparent;padding:2px 0;
}
.field textarea{min-height:150px;resize:vertical}
.meta-row{
  display:flex;justify-content:space-between;gap:10px;padding:10px 16px;
  font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);
}
.compose{display:flex;justify-content:space-between;position:fixed;left:0;right:0;bottom:0;max-width:420px;margin:auto;background:var(--paper);z-index:3}
.compose .btn{width:48%;height:44px}
.compose-page .phone{padding-bottom:84px}
.compose-page .nav{display:none}

/* ---------- screening ---------- */
.card{padding:14px 16px;border-bottom:1px solid var(--line)}
.card h3{font-size:13px;font-weight:650}
.card .addr{font-weight:400;color:var(--muted);font-size:11px}
.card .subj{font-size:12px;color:#33424d;margin-top:3px}
.card .prev{font-size:11.5px;color:var(--muted);margin-top:5px}
.card .why{font-size:10.5px;color:#8A7A63;margin-top:7px}
.card .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 0 0}
.card .actions .btn{text-align:center}
.decided{padding:14px 16px;border-bottom:1px solid var(--line);opacity:.8}
.badge{color:var(--success);font-size:11px;font-weight:700}
.intro{padding:12px 16px;background:#FDF6EC;border-bottom:1px solid var(--line);font-size:11.5px;color:#7A4A16}

/* ---------- receipt ---------- */
.receipt{margin:16px;border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.receipt .top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.seal{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:12px;font-weight:700}
.receipt .num{font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted)}
.steps{list-style:none;margin:0 0 12px;padding:0}
.steps li{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px dotted var(--line)}
.steps .t{color:var(--muted);font-family:ui-monospace,Consolas,monospace;font-size:11px}
.hash{font:11px/1.6 ui-monospace,Consolas,monospace;background:var(--surface);border:1px solid var(--line);padding:10px 12px;border-radius:8px;word-break:break-all;color:#42525E}
.legend{font-size:11.5px;color:var(--muted);margin-top:10px}
.legal{font-size:11px;color:var(--muted);margin-top:12px;font-style:italic}

/* ---------- theme chooser ---------- */
.card-title{font-size:15px;margin:0 0 6px;font-family:var(--font-heading)}
.theme-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
}
.theme-card.is-current{background:var(--surface)}
.theme-swatch{
  display:flex;width:54px;height:34px;border-radius:8px;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);flex:0 0 auto;
}
.theme-swatch i{flex:1}
.swatch-classic i:nth-child(1){background:#1D5FAE}
.swatch-classic i:nth-child(2){background:#FFC107}
.swatch-classic i:nth-child(3){background:#FFFBE6}
.swatch-modern i:nth-child(1){background:#1B3A6B}
.swatch-modern i:nth-child(2){background:#F18902}
.swatch-modern i:nth-child(3){background:#FFFFFF}
.swatch-rose i:nth-child(1){background:#8C2F5A}
.swatch-rose i:nth-child(2){background:#F48FB1}
.swatch-rose i:nth-child(3){background:#FFF7FA}
.swatch-night i:nth-child(1){background:#0E1726}
.swatch-night i:nth-child(2){background:#FFC107}
.swatch-night i:nth-child(3){background:#0B1220}
.theme-name{flex:1;font-weight:600;font-size:13px}
.theme-name small{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.theme-pick{font-size:14px;color:var(--blue-ink)}

/* ---------- utilities (inline styles are forbidden by our CSP) ---------- */
.card.ok{border-left:3px solid var(--success)}
.card.bad{border-left:3px solid var(--danger)}
.intro.error{background:#FBD5D5;color:#7A1A1A}
.actions.split{display:grid;grid-template-columns:1fr auto}
.actions.tight{padding:10px 0 0}
.actions.nopad{padding-bottom:0}
.actions.toppad{padding-top:10px}
.actions.form-actions{padding:9px 0 0}
.btn.full{flex:1 0 100%}
.fill{flex:1}
.num.mt{margin-top:6px}
.num.right{text-align:right}

/* ---------- night: surfaces that were hard-coded light ---------- */
[data-theme="night"] .phone{background:var(--paper)}
[data-theme="night"] .receipt{background:var(--surface)}
/* the stamp is an object, not a surface: it stays cream in the dark */
[data-theme="night"] .stamp{
  background:#FFFBE6;color:#123B6B;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
[data-theme="night"] .stamp b,
[data-theme="night"] .stamp small{color:#123B6B}
[data-theme="night"] .subject{color:#C9D6E8}
[data-theme="night"] .size{color:#8FA5BF}
[data-theme="night"] .list .row{background:transparent}
[data-theme="night"] .btn{
  background:linear-gradient(180deg,#1B2740,#141E33);
  color:#E8EDF5;border-color:#2C3D5C;
}
[data-theme="night"] .btn.primary{
  background:linear-gradient(180deg,#2F6FB0,#1D5FAE 60%,#1A55A0);
  color:#fff;border-color:#1D5FAE;
}
[data-theme="night"] .intro{background:rgba(255,193,7,.12);color:#FFD98A;border-color:#3A4A66}
[data-theme="night"] .field input,
[data-theme="night"] .field textarea{color:var(--ink)}
[data-theme="night"] .hash{background:var(--surface);color:#C7D3E4}
[data-theme="night"] .swatch-night i:nth-child(1){background:#0E1726}
[data-theme="night"] .swatch-night i:nth-child(2){background:#FFC107}
[data-theme="night"] .swatch-night i:nth-child(3){background:#0B1220}

/* ---------- the receipt is paper, not a panel ---------- */
.paper{
  position:relative;margin:18px 20px 20px;padding:20px 16px 14px;
  border:1px solid #EAD99B;border-radius:14px;
  background:linear-gradient(180deg,#FFFDF2,#FFF8D6 70%,#FFF3C4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 3px rgba(80,60,10,.10),
    0 10px 24px rgba(80,60,10,.14);
  transform:rotate(-2.4deg);
}
.paper:before{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(29,95,174,.35);
  border-radius:9px;pointer-events:none;
}
.paper-stamp{
  position:absolute;right:14px;top:12px;width:40px;height:32px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:0;background:#FFFFFF;color:#123B6B;
  transform:rotate(6deg);filter:drop-shadow(0 1px 2px rgba(80,60,10,.35));
  font-family:var(--font-heading);line-height:1;
  -webkit-mask:
    radial-gradient(circle 2.6px at 50% 0, #0000 96%, #000) 0 0/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, #0000 96%, #000) 0 100%/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, #0000 96%, #000) 0 0/100% 7px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, #0000 96%, #000) 100% 0/100% 7px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 2.6px at 50% 0, #0000 96%, #000) 0 0/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 50% 100%, #0000 96%, #000) 0 100%/7px 100% repeat-x,
    radial-gradient(circle 2.6px at 0 50%, #0000 96%, #000) 0 0/100% 7px repeat-y,
    radial-gradient(circle 2.6px at 100% 50%, #0000 96%, #000) 100% 0/100% 7px repeat-y;
  mask-composite: intersect;
}
.paper-stamp b{font-size:13px}
.paper-stamp small{font-size:5px;letter-spacing:.1em;margin-top:2px}
.paper-kicker{
  margin:0;font-size:8.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#8A6D1E;
}
.paper-no{font:13px/1.4 ui-monospace,Consolas,monospace;color:#123B6B;margin:3px 0 0}
.paper-meta{font:11px/1.5 ui-monospace,Consolas,monospace;color:#6B5A24;margin:2px 0 10px}
.paper .seal{color:#0A6B45;margin-bottom:6px}
.paper .steps li{color:#4A3F14;border-bottom-color:rgba(138,109,30,.25)}
.paper .steps .t{color:#8A6D1E}
.paper .hash{
  background:rgba(255,255,255,.55);border-color:#EAD99B;color:#3F3A1E;
}
.paper .legend{color:#6B5A24}
.paper .legal{color:#7A6528;border-top:1px dotted rgba(138,109,30,.3);padding-top:8px}
.paper-foot{margin:10px 0 0;font-size:11px}
.paper-foot a{color:#123B6B;font-weight:700;text-decoration:none;border-bottom:1px solid #123B6B}

/* ---------- app chrome gets the same lighting as the site ---------- */
.app-header{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 4px 14px rgba(10,25,45,.20);
}
.sort{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(60,50,10,.05)}
.list li{background:transparent}
.list .row:active{background:rgba(0,0,0,.03)}
.field input:focus,
.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-radius:3px}

[data-theme="night"] .app-header{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.45);
}
[data-theme="night"] .sort{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
[data-theme="night"] .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="night"] .list .row:active{background:rgba(255,255,255,.04)}

/* ---------- payment QR: a code printed on the receipt paper ---------- */
.qr{
  display:flex;justify-content:center;align-items:center;
  margin:12px 0 6px;padding:10px;background:#FFFDF2;
  border:1px solid #EAD99B;border-radius:10px;
}
.qr svg{display:block;width:100%;max-width:190px;height:auto}
.pay-amount{
  margin:6px 0 2px;text-align:center;
  font-family:var(--font-heading);font-size:26px;color:#123B6B;
  letter-spacing:-.01em;
}
.paper .steps li b{
  display:inline-block;min-width:14px;color:#8A6D1E;
}