/* Inter, self-hosted (SIL Open Font License) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Just the Azerbaijani letters (Əə Ğğ İ Şş; ı is in the basic face) and ₼: 4 KB instead of 85 KB.
   It comes after the full face because, where ranges overlap, the browser tries the last face
   first. The full one is still fetched for any other letter a name uses. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-az-wght-normal.woff2) format('woff2');
  unicode-range: U+011E-011F,U+0130,U+015E-015F,U+018F,U+0259,U+20BC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Design tokens */
:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --surface-2: #F3EEE6;
  --ink: #17140F;
  --ink-2: #4A443B;
  --muted: #6E675B;
  --line: #E8E1D6;
  --brand: #1F2A44;
  --accent: #E39B36;
  --accent-ink: #3A2306;
  --accent-soft: #FCEFD9;
  --ok: #1E9E6A;
  --ok-soft: #DDF5EA;
  --warn: #C9821B;
  /* The orange and green as text: the same hues, dark enough to read (4.5:1 or more) on their soft backgrounds. */
  --warn-ink: #915E13;
  --ok-ink: #177750;
  --danger: #D2463B;
  --danger-soft: #FCE3E0;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 20, 15, .04), 0 8px 24px rgba(23, 20, 15, .06);
  --shadow-lg: 0 24px 60px rgba(23, 20, 15, .14);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, .06); }
/* Landscape iPhones: keep content clear of the notch (the pages use viewport-fit=cover). */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* No double-tap zoom delay on things people tap. */
a, button, input, select, textarea, label { touch-action: manipulation; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.015em; text-wrap: balance; }
/* Long Russian/Azerbaijani words break (with a hyphen where the phone knows how) instead of running off small screens. */
h1, h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
p { text-wrap: pretty; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
/* A dialog's buttons: side by side when they fit, otherwise each on its own full-width line, and a long
   label breaks onto two lines instead of running off the dialog. */
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.dlg-actions .btn { min-width: 0; white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; }
/* Up to 500px the dialog is narrower than its widest pair of buttons can need (RU), so on every phone
   the buttons fill the row, and a button that wraps gets a line of its own at full width. */
@media (max-width: 500px) { .dlg-actions .btn { flex: 1 1 auto; } }
.spacer { flex: 1; }
.stack > * + * { margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .06s ease, background .15s ease, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.danger { background: var(--danger); color: #fff; }
/* Hover only where there's a mouse: on phones a tapped button would otherwise stay highlighted. */
@media (hover: hover) {
  .btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
  .btn.ghost:hover { background: var(--surface-2); box-shadow: none; }
}
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.lg { height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn.block { width: 100%; }
/* Password field with a show / hide button */
.pw { position: relative; }
.pw .input { padding-right: 46px; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 6px; display: grid; }
/* Buttons whose label may need two lines on a narrow phone (long AZ/RU words). */
.btn.wrap { white-space: normal; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; }
.btn.lg.wrap { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
.btn.sm.wrap { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
/* An icon keeps its size when a long label wraps (RU "Открыть и распечатать" on the QR page). */
.btn > svg { flex: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Forms */
.field { display: block; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
/* 16px text: iPhones zoom the whole page into any field with smaller text. */
.input, select.input, textarea.input { width: 100%; height: 46px; padding: 0 14px; font-size: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); outline: none; transition: border .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: var(--ink-2); box-shadow: 0 0 0 4px rgba(227, 155, 54, .18); }
.input.invalid { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 6px; }
.field:has(.field-err) .hint { display: none; } /* the message says the same, in red */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 1px; flex: none; }
.check.invalid input { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }
.check.invalid span { color: var(--danger); }
.seg { display: inline-flex; background: var(--surface-2); padding: 4px; border-radius: 12px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
input[type=color].swatch { -webkit-appearance: none; appearance: none; overflow: hidden; }
input[type=color].swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color].swatch::-webkit-color-swatch { border: 0; border-radius: 50%; }

/* Cards & layout */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h3 { font-size: 17px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.p-per { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; color: var(--ink-2); font-weight: 600; }
.p-per > span:first-child { white-space: nowrap; }
/* The dollar amount Creem charges for the manat price above. */
.p-usd { color: var(--muted); font-size: 13px; margin-top: 4px; }
.badge.warn { background: var(--accent-soft); color: var(--warn-ink); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty svg { margin: 0 auto 12px; opacity: .5; }

/* Toasts & modal */
#toasts { position: fixed; z-index: 1000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-weight: 500; animation: toast-in .25s ease; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.toast.error { background: var(--danger); color: #fff; }
.toast.ok::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--accent); /* the "check" line icon from common.js */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
/* The page behind an open dialog stays put (iPhone otherwise scrolls it under your finger). */
body:has(.modal-back) { overflow: hidden; }
.modal-back { position: fixed; inset: 0; background: rgba(15, 12, 8, .45); z-index: 900; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overscroll-behavior: contain; animation: fade .15s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal { background: var(--surface); border-radius: 20px; width: min(100%, 460px); max-height: 90vh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; padding: 24px; box-shadow: var(--shadow-lg); animation: pop .2s ease; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* Language switcher */
.lang-switch { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.lang-switch button { position: relative; min-height: 30px; min-width: 36px; border: 0; background: transparent; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted); letter-spacing: .03em; }
.lang-switch button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Finger-sized tap areas around the small language and logo links, without making them look bigger. */
.lang-switch button::after { content: ""; position: absolute; inset: -7px -1px; }
.logo-mark { position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: -7px -4px; }

/* Brand mark */
.logo-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; text-decoration: none; }
.logo-mark i { width: 36px; height: 28px; background: var(--mark, url(/brand/mark.svg)) center / contain no-repeat; flex: none; }
/* The default brand's name is drawn (public/brand/wordmark.svg, in the page as --word; the server sets
   data-wordmark only while BRAND_NAME is akartly): in the site's ink, or white where a dark screen sets --word-ink.
   Mark and word are about the same height, as on the brand board. The typed name stays in the link,
   unseen, for screen readers, and shows again in high-contrast mode, which would hide the drawn one,
   and in print, which leaves backgrounds out by default.
   (The mark's size gives way to a page's own, like the app-icon tile on a dark screen.) */
:where([data-wordmark]) .logo-mark:where(:has(> [data-brand])) { gap: 8px; }
:where([data-wordmark]) .logo-mark:where(:has(> [data-brand])) > i { width: 27px; height: 21px; }
[data-wordmark] .logo-mark > [data-brand] { flex: none; width: 89px; height: 33px; margin-block: -2px; overflow: hidden; white-space: nowrap; color: transparent; background: var(--word-ink, var(--ink));
  -webkit-mask: var(--word, url(/brand/wordmark.svg)) left center / contain no-repeat; mask: var(--word, url(/brand/wordmark.svg)) left center / contain no-repeat; }
@media (forced-colors: active), print {
  [data-wordmark] .logo-mark > [data-brand] { width: auto; height: auto; margin-block: 0; color: inherit; background: none; -webkit-mask: none; mask: none; }
}

/* ===== Wallet pass mockup (used on landing, dashboard, join page) ===== */
.pass { --pbg: #1F2A44; --pfg: #fff; --plabel: #F4C27A; width: 100%; max-width: 340px; border-radius: 18px; background: var(--pbg); color: var(--pfg); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 20px 50px rgba(0,0,0,.25); font-family: -apple-system, "SF Pro Text", var(--font); user-select: none; }
.pass .p-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; gap: 10px; }
.pass .p-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; min-width: 0; }
.pass .p-logo img { max-height: 30px; max-width: 120px; object-fit: contain; }
.pass .p-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass .p-field { text-align: right; flex: none; }
.pass .p-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--plabel); text-transform: uppercase; }
.pass .p-value { font-size: 17px; font-weight: 500; line-height: 1.2; }
.pass .p-strip { display: block; width: 100%; aspect-ratio: 375 / 144; object-fit: cover; background: rgba(255,255,255,.06); }
.pass .p-row { display: flex; justify-content: space-between; padding: 10px 16px; gap: 12px; }
.pass .p-row .p-value { font-size: 15px; }
.pass .p-qr { margin: 6px auto 16px; background: #fff; padding: 10px; border-radius: 10px; width: 132px; }
.pass .p-qr img, .pass .p-qr svg { width: 112px; height: 112px; }
.pass .p-qr small { display: block; text-align: center; color: #111; font-size: 11px; margin-top: 4px; letter-spacing: .1em; }
/* Phone frames drawn to a real iPhone's proportions: a 393×852 screen, the Dynamic Island floating 8px
   below the screen's top edge with the time and status icons level with it, and concentric corners
   (outer radius = screen radius + bezel). --s scales the whole frame from its 300px size. */
.phone { --s: 1; --bezel: calc(12px * var(--s)); width: 300px; max-width: 100%; border-radius: calc(51px * var(--s)); padding: var(--bezel); background: #0E0E10; box-shadow: var(--shadow-lg), 0 0 0 2px #2a2a2e inset; position: relative; }
.phone .screen { border-radius: calc(39px * var(--s)); background: #F2F2F7; overflow: hidden; padding: 52px 12px 24px; aspect-ratio: 393 / 852; position: relative; }
.phone .notch { position: absolute; top: calc(var(--bezel) + 8px * var(--s)); left: 50%; transform: translateX(-50%); width: calc(88px * var(--s)); height: calc(26px * var(--s)); background: #000; border-radius: 999px; z-index: 3; }
/* The status bar: the time left of the island; signal, Wi-Fi and battery right of it. .dark is for a dark screen. */
.phone::before, .phone::after { position: absolute; z-index: 3; top: calc(var(--bezel) + 8px * var(--s)); height: calc(26px * var(--s)); width: calc(50% - 44px * var(--s) - var(--bezel)); pointer-events: none; }
.phone::before { content: "9:41"; left: var(--bezel); text-align: center; font: 600 calc(14px * var(--s)) / calc(26px * var(--s)) var(--font); letter-spacing: -.01em; color: #111; }
.phone::after { content: ""; right: var(--bezel); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 12' fill='%23111'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M20.6 4.4a9.6 9.6 0 0 1 13.8 0l-1.5 1.5a7.5 7.5 0 0 0-10.8 0zM23.6 7.4a5.4 5.4 0 0 1 7.8 0l-1.5 1.5a3.3 3.3 0 0 0-4.8 0zM27.5 11.6l-1.4-1.4a2 2 0 0 1 2.8 0z'/%3E%3Crect x='38.5' y='1.5' width='20' height='9' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='40.5' y='3.5' width='16' height='5' rx='1.3'/%3E%3Crect x='59.6' y='4.5' width='1.6' height='3' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E") center / calc(62px * var(--s)) auto no-repeat; }
.phone.dark::before { color: #fff; }
.phone.dark::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 12' fill='%23fff'%3E%3Crect y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M20.6 4.4a9.6 9.6 0 0 1 13.8 0l-1.5 1.5a7.5 7.5 0 0 0-10.8 0zM23.6 7.4a5.4 5.4 0 0 1 7.8 0l-1.5 1.5a3.3 3.3 0 0 0-4.8 0zM27.5 11.6l-1.4-1.4a2 2 0 0 1 2.8 0z'/%3E%3Crect x='38.5' y='1.5' width='20' height='9' rx='2.6' fill='none' stroke='%23fff' stroke-opacity='.4'/%3E%3Crect x='40.5' y='3.5' width='16' height='5' rx='1.3'/%3E%3Crect x='59.6' y='4.5' width='1.6' height='3' rx='.8' fill-opacity='.45'/%3E%3C/svg%3E"); }
.phone.android { border-radius: calc(38px * var(--s)); }
.phone.android .screen { border-radius: calc(26px * var(--s)); background: #EEF0F4; }
.phone.android .notch { width: calc(12px * var(--s)); height: calc(12px * var(--s)); top: calc(var(--bezel) + 10px * var(--s)); }
.phone.android::before, .phone.android::after { top: calc(var(--bezel) + 3px * var(--s)); }
.phone.android::before { text-align: left; padding-left: calc(20px * var(--s)); font-size: calc(13px * var(--s)); font-weight: 500; }
/* Android's own status icons: Wi-Fi, signal and an upright battery. */
.phone.android::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 12' fill='%23111'%3E%3Cpath d='M6.5 11.6L.4 4.6a9.3 9.3 0 0 1 12.2 0z'/%3E%3Cpath d='M16 11.5L26 1.5v10z'/%3E%3Crect x='31' y='1.6' width='6.4' height='10' rx='1.3'/%3E%3Crect x='32.8' y='.4' width='2.8' height='1.6' rx='.5'/%3E%3C/svg%3E"); background-size: calc(38px * var(--s)) auto; background-position: right calc(20px * var(--s)) center; }

/* Lock-screen notification */
.lock-notif { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #111; border-radius: 18px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 4px 18px rgba(0,0,0,.12); text-align: left; }
.lock-notif img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.lock-notif b { font-size: 13px; display: block; }
.lock-notif p { margin: 0; font-size: 13px; line-height: 1.3; color: #222; word-break: break-word; }
.lock-notif time { font-size: 11px; color: #666; margin-left: auto; flex: none; }

/* Shown while the fake checkout is on (no Creem keys). */
@media print { .test-ribbon { display: none !important; } }
.test-ribbon { background: repeating-linear-gradient(-45deg, #FFE08A 0 14px, #FFD45C 14px 28px); color: #4A3500; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: center; padding: 5px 12px; text-transform: uppercase; }
/* Toasts stay clear of the phone tab bar. */
@media (max-width: 900px) { body.app #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* Above the design page's Save bar while it shows (see renderSave in app.js). */
body.savebar-on #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }
/* On the login and sign-up pages the form's button is often at the bottom of a phone screen. */
body.auth-page #toasts { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
@media (max-width: 900px) { body.app.savebar-on #toasts { bottom: calc(160px + env(safe-area-inset-bottom)); } }
/* The welcome after sign-up, at the top wherever the designer is one column (app.css): its first fields
   stay readable. Taps go through it (a toast is only text) to the phone top bar's buttons under it. */
@media (max-width: 1100px) { body.app.toast-top #toasts { top: calc(12px + env(safe-area-inset-top)); bottom: auto; } body.app.toast-top .toast { pointer-events: none; } }
/* A row of options that scrolls sideways instead of wrapping. */
.seg.scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg.scroll button { flex: none; white-space: nowrap; }
/* The side that has more options fades out, so options hidden past the edge aren't missed. */
.seg.scroll.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.seg.scroll.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.seg.scroll.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }