/* ==========================================================================
   Sugoi Account portal — additions on top of the site CSS.
   The site files in site/theme/ are verbatim copies and are NOT edited.
   Grown from src/mockup/account.css (the CEO-reviewed mockup); the Google
   button rules are gone (the button is hidden until Google sign-in ships).
   Every rule here either (a) reuses a site component's exact values under a
   new selector because the site scoped it to one page context, or (b) builds
   a portal-only piece (tabs, meter, device rows, OTP) out of site tokens.
   Tokens only: --peri --peri-lo --page --page-2 --dark --ink --ink-2 --line
   --spectrum --display --body --body-read. Spacing on a 4px grid.
   ========================================================================== */

body.lese .ic { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body.lese .ic use { pointer-events:none; }

/* route visibility */
body.lese [hidden] { display:none !important; }

/* nav: signed-in pill = the site's own .nav-cta (white pill), icon sized */
body.lese .acct-cta .ic { width:16px; height:16px; }

/* --------------------------------------------------------------------------
   Peri band. .ahero is from site/about-page.css; portal variant only trims
   the tall marketing padding so the dashboard starts above the fold.
   -------------------------------------------------------------------------- */
body.lese .ahero-portal { padding:clamp(36px,5vw,56px) 0 clamp(32px,4vw,48px); text-align:left; }
body.lese .ahero-portal h1 { font-size:clamp(32px,4.4vw,48px); }
body.lese .ahero-portal p { margin:8px 0 0; font-size:15px; }

/* --------------------------------------------------------------------------
   Sign in — white card on the .ahero band. Card = .foot-news surface scaled up.
   -------------------------------------------------------------------------- */
body.lese .auth { padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px); }
body.lese .auth-card { max-width:440px; margin:0 auto; background:#fff; border-radius:26px; padding:clamp(28px,5vw,40px); text-align:left; color:var(--ink); box-shadow:0 40px 80px -40px rgba(24,33,37,.6); }
body.lese .auth-card .dog { width:56px; margin:0 0 16px; }
body.lese .auth-card h2 { font-size:28px; color:var(--ink); }
body.lese .ahero .auth-card p.auth-lede { font-family:var(--body-read); color:var(--ink-2); font-size:15px; margin:8px 0 0; }
body.lese .auth-card .back { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:14px; color:var(--peri-lo); margin-bottom:20px; }
body.lese .auth-card .back:hover { color:var(--ink); }
body.lese .auth-form { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
body.lese .field-label { font-family:var(--display); font-weight:600; font-size:13px; color:var(--peri-lo); }
/* input = exact values of the site's .foot-news input[type=email] */
body.lese .acct-input { width:100%; padding:11px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:14px; font-family:var(--body-read); }
body.lese .acct-input:focus { outline:none; border-color:var(--peri); }
body.lese .btn-block { width:100%; justify-content:center; }
body.lese .btn .ic { width:18px; height:18px; }
body.lese .ahero .auth-card p.auth-fine { font-family:var(--body-read); font-size:12.5px; color:#6b7684; line-height:1.7; margin:20px 0 0; }
body.lese .auth-card .center { text-align:center; }
body.lese .auth-card .muted { color:var(--ink-2); font-weight:600; }
body.lese .otp { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
body.lese .otp input { width:100%; aspect-ratio:1/1.15; text-align:center; font-family:var(--display); font-weight:700; font-size:24px; color:var(--ink); background:var(--page-2); border:1px solid var(--line); border-radius:14px; }
body.lese .otp input.is-focus, body.lese .otp input:focus { outline:none; border:2px solid var(--peri); background:#fff; }

/* --------------------------------------------------------------------------
   Shell: tab rail + content
   -------------------------------------------------------------------------- */
body.lese .acct-shell { display:grid; grid-template-columns:224px 1fr; gap:40px; padding-top:40px; padding-bottom:96px; align-items:start; }
/* tab rail = the site's nav dropdown card (.nav-dd .dd-card) as a sticky panel */
body.lese .acct-tabs { position:sticky; top:84px; display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:0 22px 46px -26px rgba(24,33,37,.25); }
body.lese .acct-tabs a { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; color:var(--ink-2); font-size:14px; font-weight:500; transition:background .14s ease, color .14s ease; white-space:nowrap; }
body.lese .acct-tabs a:hover { background:var(--page); color:var(--ink); }
body.lese .acct-tabs a.is-active { background:var(--dark); color:#fff; font-weight:700; }
body.lese .acct-content { min-width:0; }

body.lese .acct-head { max-width:none; margin-bottom:28px; }
body.lese .acct-head h2 { font-size:clamp(28px,3.6vw,38px); margin-top:0; }
body.lese .acct-head p { font-family:var(--body-read); margin-top:8px; }

/* --------------------------------------------------------------------------
   Pills. .pill-eb (mint) and .tag-new (spectrum) are the site's own; the
   neutral tint pill is the site .eyebrow colour pair; wait = site .cost .warn pair.
   -------------------------------------------------------------------------- */
body.lese .pill-eb { display:inline-flex; align-items:center; gap:4px; }
body.lese .pill-ic .ic { width:13px; height:13px; stroke-width:2.4; }
body.lese .tint-pill, body.lese .wait-pill { display:inline-flex; align-items:center; font-family:var(--display); font-size:12px; font-weight:600; border-radius:999px; padding:4px 11px; white-space:nowrap; }
body.lese .tint-pill { color:var(--peri-lo); background:rgba(126,134,173,.14); }
body.lese .wait-pill { color:#8a2a12; background:linear-gradient(135deg,#ffe2dc,#ffd0b0); }
body.lese .tag-new { margin-left:8px; }

/* --------------------------------------------------------------------------
   Small outline button = exact values of the site's .helpcard .hbtn
   -------------------------------------------------------------------------- */
body.lese .hbtn { display:inline-flex; align-items:center; gap:7px; padding:11px 22px; border-radius:999px; font-family:var(--display); font-weight:600; font-size:14px; border:1px solid var(--line); color:var(--ink); background:#fff; cursor:pointer; transition:transform .16s ease, border-color .16s ease; white-space:nowrap; }
body.lese .hbtn:hover { transform:translateY(-1px); border-color:var(--peri); }
body.lese .hbtn .ic { width:16px; height:16px; }
body.lese .hbtn-sm { padding:6px 14px; font-size:13px; gap:6px; }
body.lese .hbtn.is-done { border-color:#71ce7e; color:#1a7a44; }
body.lese .hbtn.danger { border-color:#ff907e; color:#8a2a12; }

/* --------------------------------------------------------------------------
   Responsive — same 900 / 560 breakpoints as the site
   -------------------------------------------------------------------------- */
@media (max-width:900px) {
  body.lese .acct-shell { grid-template-columns:1fr; gap:24px; padding-top:24px; }
  body.lese .acct-tabs { position:static; flex-direction:row; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  body.lese .acct-tabs::-webkit-scrollbar { display:none; }
}
@media (max-width:560px) {
  body.lese .wrap { padding:0 16px; }
  body.lese .acct-tabs a { padding:8px 12px; font-size:13.5px; }
  body.lese .acct-tabs a .ic { display:none; }
  body.lese .auth-card h2 { font-size:24px; }
  body.lese .otp { gap:6px; }
}

/* optical fix: the display font's tall line box pushed icons off-centre in pills */
body.lese .hbtn, body.lese .btn, body.lese .pill-eb, body.lese .acct-tabs a { line-height:1.2; }


/* --------------------------------------------------------------------------
   方案與點數 — option C, usage-page layout (CEO 2026-10-01). No card fills,
   no glow, no gradient: type, whitespace, 1px --line dividers, one solid bar.
   -------------------------------------------------------------------------- */
body.lese .num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
body.lese .usage-page { max-width:760px; }
body.lese .up-title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
body.lese .up-title h2 { font-size:clamp(24px,3vw,30px); }
body.lese .up-plan { font-family:var(--display); font-weight:600; font-size:18px; color:var(--ink-2); }
body.lese .up-notice { display:flex; align-items:center; gap:12px; margin-top:24px; padding:12px 12px 12px 16px; background:var(--page-2); border-radius:14px; }
body.lese .up-notice-ic { color:var(--ink-2); display:grid; place-items:center; }
body.lese .up-notice p { flex:1; min-width:0; font-family:var(--body-read); font-size:14px; color:var(--ink); line-height:1.5; }
body.lese .up-headline { margin-top:40px; padding-bottom:24px; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:clamp(24px,3.4vw,34px); line-height:1.3; color:var(--ink); }
body.lese .up-h { margin-top:56px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:20px; }
body.lese .up-row { display:grid; grid-template-columns:minmax(160px,1.1fr) 2fr minmax(120px,auto); align-items:center; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
body.lese .up-row-2 { grid-template-columns:1fr auto; }
body.lese .up-label { display:flex; flex-direction:column; gap:2px; min-width:0; }
body.lese .up-label b { font-family:var(--body-read); font-weight:700; font-size:15px; color:var(--ink); }
body.lese .up-label small { font-family:var(--body-read); font-size:13px; color:var(--ink-2); line-height:1.5; }
body.lese .up-bar { height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
body.lese .up-bar span { display:block; height:100%; border-radius:999px; background:var(--peri-lo); }
body.lese .up-bar.is-empty { background:none; }
body.lese .up-val { display:flex; align-items:center; justify-content:flex-end; gap:12px; font-family:var(--body-read); font-size:14px; color:var(--ink-2); white-space:nowrap; }
body.lese .up-val .num { color:var(--ink); font-weight:600; }
body.lese .up-link { font-size:13px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
body.lese .up-fine { margin-top:12px; font-family:var(--body-read); font-size:12.5px; color:#6b7684; }
@media (max-width:560px) {
  /* bar drops below; percentage sits on the label row */
  body.lese .up-row { grid-template-columns:1fr auto; row-gap:12px; column-gap:12px; }
  body.lese .up-row .up-label { grid-column:1; grid-row:1; }
  body.lese .up-row .up-val { grid-column:2; grid-row:1; align-self:start; }
  body.lese .up-row .up-bar { grid-column:1 / -1; grid-row:2; }
  body.lese .up-row .up-bar.is-empty { display:none; }
  body.lese .up-notice { flex-wrap:wrap; }
  body.lese .up-notice p { flex-basis:calc(100% - 40px); }
  body.lese .up-notice .hbtn { margin-left:36px; }
}

/* --------------------------------------------------------------------------
   Flat language for every portal page (CEO 2026-10-01): same vocabulary as
   the 方案與點數 usage page — rows, 1px --line dividers, outline buttons.
   No card fills, glows or shadows.
   -------------------------------------------------------------------------- */
body.lese .up-sub { margin-top:8px; font-family:var(--body-read); font-size:14.5px; color:var(--ink-2); max-width:62ch; }
body.lese .up-rows-top { margin-top:28px; border-top:1px solid var(--line); }
body.lese .up-fine-gap { margin-top:32px; }
body.lese .up-actions { margin-top:24px; }
body.lese .up-label b .tint-pill { margin-left:8px; vertical-align:2px; }
body.lese .link-btn { background:none; border:0; padding:0; cursor:pointer; font-family:var(--body-read); color:var(--ink-2); }
body.lese .hbtn { background:transparent; }
body.lese .hbtn.is-done { border-color:#71ce7e; color:#1a7a44; }
body.lese .hbtn.danger { border-color:#ff907e; color:#8a2a12; }

/* rows with a leading glyph (devices, emails) */
body.lese .up-row.ic-row { grid-template-columns:24px 1fr auto; gap:16px; }
body.lese .row-glyph { width:22px; height:22px; color:var(--ink-2); }
body.lese .row-act { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
body.lese .confirm { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.lese .confirm-q { font-family:var(--body-read); font-size:13px; color:#8a2a12; }

/* 我的產品 — each product is a section with its icon, not a card */
body.lese .prod-sec { padding:20px 0; border-bottom:1px solid var(--line); }
body.lese .prod-row { display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center; }
body.lese .prod-row img { width:44px; height:44px; border-radius:11px; object-fit:cover; }
body.lese .prod-row .up-label b { font-family:var(--display); font-size:17px; }
body.lese .prod-dl { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
body.lese .prod-kv { margin:16px 0 0 60px; display:flex; flex-direction:column; }
body.lese .prod-kv > div { display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:8px 0; }
body.lese .prod-kv dt { font-family:var(--body-read); font-size:13px; color:var(--ink-2); }
body.lese .prod-kv dd { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--body-read); font-size:14px; color:var(--ink); }
body.lese .prod-kv code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13.5px; letter-spacing:.04em; color:var(--ink); min-width:21ch; }
body.lese details.acts { margin:4px 0 0 60px; border-top:0; }
body.lese details.acts summary { padding:8px 0; font-family:var(--body-read); font-weight:600; font-size:13.5px; color:var(--ink); justify-content:flex-start; gap:6px; }
body.lese details.acts .chev { width:16px; height:16px; transition:transform .16s ease; }
body.lese details.acts[open] .chev { transform:rotate(180deg); }
body.lese details.acts ul { list-style:none; border-top:1px solid var(--line); }
body.lese .act-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
body.lese details.acts .up-fine { margin-top:8px; }

/* 帳號 */
body.lese #merge .merge-act { display:flex; align-items:center; gap:12px; }
body.lese .merge-fine { margin-top:8px; }
body.lese .add-email { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding-top:20px; }
body.lese .add-form { display:flex; gap:8px; flex:1; min-width:240px; }

@media (max-width:560px) {
  body.lese .up-row.ic-row { grid-template-columns:24px 1fr; }
  body.lese .up-row.ic-row .row-act { grid-column:2; grid-row:2; justify-content:flex-start; }
  body.lese .up-row.ic-row .up-label { grid-column:2; grid-row:1; }
  body.lese .up-row.ic-row .row-glyph { grid-column:1; grid-row:1; align-self:start; margin-top:2px; }
  body.lese .prod-row { grid-template-columns:44px 1fr; }
  body.lese .prod-dl { grid-column:1 / -1; justify-content:flex-start; }
  body.lese .prod-kv, body.lese details.acts { margin-left:0; }
  body.lese .prod-kv > div { grid-template-columns:1fr; gap:4px; }
  body.lese .prod-kv code { min-width:0; }
  body.lese .act-row { flex-wrap:wrap; }
  body.lese #merge .merge-act { margin-left:36px; }
}

/* AI plan page: full product name as page heading, 你的用量 as section heading */
body.lese .up-title-sec { margin-top:28px; }
body.lese .up-title-sec h3 { font-size:20px; }
body.lese .up-count { margin-left:8px; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink-2); }

/* --------------------------------------------------------------------------
   Tab rail, flat (CEO 2026-10-01): plain list on the page background.
   Active = weight + 2px ink bar on the left (desktop) / ink underline (mobile).
   Hover = text colour only.
   -------------------------------------------------------------------------- */
body.lese .acct-tabs { background:none; border:0; border-radius:0; box-shadow:none; padding:0; gap:2px; }
body.lese .acct-tabs a { border-radius:0; padding:8px 0 8px 16px; box-shadow:inset 2px 0 0 transparent; transition:color .14s ease; }
body.lese .acct-tabs a:hover { background:none; color:var(--ink); }
body.lese .acct-tabs a.is-active { background:none; color:var(--ink); font-weight:700; box-shadow:inset 2px 0 0 var(--ink); }
@media (max-width:900px) {
  body.lese .acct-tabs { gap:20px; border-bottom:1px solid var(--line); }
  body.lese .acct-tabs a { padding:10px 0; box-shadow:inset 0 -2px 0 transparent; }
  body.lese .acct-tabs a.is-active { box-shadow:inset 0 -2px 0 var(--ink); }
}

/* ==========================================================================
   Real-build additions (portal-web-launch). Same tokens, same flat language.
   ========================================================================== */

/* the sprite and the keyboard skip link */
body.lese .sprite { position:absolute; width:0; height:0; overflow:hidden; }
body.lese .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
body.lese .skip-link { position:absolute; left:16px; top:-48px; z-index:100; padding:10px 18px; background:var(--dark); color:#fff; border-radius:999px; font-family:var(--display); font-weight:600; font-size:14px; border:0; cursor:pointer; }
body.lese .skip-link:focus { top:12px; }
body.lese main { display:block; }

/* keyboard focus is always visible (the site theme removes the default outline on inputs) */
body.lese a:focus-visible, body.lese button:focus-visible, body.lese summary:focus-visible, body.lese [tabindex]:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
body.lese header.nav a:focus-visible, body.lese header.nav button:focus-visible, body.lese #mobile-menu a:focus-visible, body.lese #mobile-menu button:focus-visible { outline-color:#fff; }
body.lese .auth-card a:focus-visible, body.lese .auth-card button:focus-visible { outline-color:var(--ink); }
body.lese .acct-input:focus-visible, body.lese .otp input:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-color:var(--peri); }
body.lese .hbtn:focus-visible { outline-offset:2px; border-radius:999px; }

/* brand logo sizes (the site sets them inline; the CSP forbids inline styles) */
body.lese .brand img.brand-logo { height:38px; width:auto; }
body.lese .foot-brand .brand img.brand-logo { height:34px; }
body.lese .nav-dd .chev-s { display:inline; vertical-align:-1px; width:11px; height:11px; }
body.lese .nav-right { display:flex; align-items:center; gap:10px; }
body.lese .foot-grid.foot-grid-3 { grid-template-columns:1.6fr 1fr 1fr; }
body.lese .foot-note { margin-top:16px; font-size:11.5px; color:var(--peri-lo); line-height:1.7; }
body.lese .foot-social svg { fill:currentColor; stroke:none; }

/* header: language switch is a real button, account pill shows the signed-in email */
body.lese button.lang-toggle { border:0; cursor:pointer; line-height:1.2; }
body.lese .acct-cta { max-width:260px; }
body.lese .acct-cta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.lese .nav-out { display:inline-flex; align-items:center; font-family:var(--display); font-weight:600; font-size:13px; line-height:1.2; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .16s ease; }
body.lese .nav-out:hover { background:rgba(255,255,255,.16); }
body.lese #mobile-menu .nav-out-m { display:block; width:100%; text-align:left; font:inherit; font-size:15px; font-weight:500; color:rgba(255,255,255,.9); background:none; border:0; border-bottom:1px solid rgba(255,255,255,.12); padding:14px 22px; cursor:pointer; }
body.lese #mobile-menu .acct-line { padding:12px 22px 4px; color:rgba(255,255,255,.75); font-size:13px; word-break:break-all; }
@media (max-width:900px) { body.lese .nav-out { display:none; } }

/* states, messages, notices */
body.lese .state { padding:20px 0; font-family:var(--body-read); font-size:14px; color:var(--ink-2); }
body.lese .state p { margin:0 0 12px; }
body.lese .state-error { color:#8a2a12; }
body.lese .state-empty { color:var(--ink-2); }
body.lese .msg { margin-top:12px; font-family:var(--body-read); font-size:14px; line-height:1.55; }
body.lese .msg-error { color:#8a2a12; }
body.lese .msg-note { color:var(--ink-2); }
body.lese .ahero .auth-card p.msg { margin-top:12px; font-size:13.5px; text-align:left; }
body.lese .ahero .auth-card p.msg-error { color:#8a2a12; }
body.lese .ahero .auth-card p.msg-note { color:var(--ink-2); }
body.lese .up-notice.up-warn { border:1px solid #ffd0b0; background:#fff7f1; }
body.lese .up-title + .msg, body.lese .up-sub + .msg { margin-top:16px; }
body.lese .boot { padding:96px 24px; text-align:center; }
body.lese .boot .state { max-width:420px; margin:0 auto; }
body.lese .hbtn[disabled], body.lese .btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
body.lese .hbtn.is-done { border-color:#71ce7e; color:#1a7a44; }
body.lese .hbtn .ext, body.lese .up-link .ext { font-size:.9em; }
body.lese .auth-card .link-btn.back { font-family:var(--display); font-weight:600; font-size:14px; color:var(--peri-lo); }
body.lese .auth-card .link-btn.back .ic { width:15px; height:15px; stroke-width:2.2; }
body.lese .auth-card .resend { line-height:1.9; }
body.lese .auth-card .resend .up-link { margin-left:6px; font-size:12.5px; color:var(--ink-2); }
body.lese .auth-card .resend .up-link[disabled] { opacity:.5; cursor:not-allowed; text-decoration:none; }
body.lese .link-btn[disabled] { cursor:not-allowed; }

/* my products */
body.lese .prod-glyph { display:grid; place-items:center; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); color:var(--ink-2); }
body.lese .prod-kv dd small, body.lese .prod-kv dd .key-note { font-family:var(--body-read); font-size:12.5px; color:var(--ink-2); }
body.lese .prod-kv dd.key { gap:10px; }
body.lese .prod-kv code[data-revealed] { font-weight:600; letter-spacing:.06em; word-break:break-all; }
body.lese .confirm-q { max-width:46ch; }
body.lese .act-row { align-items:flex-start; }
body.lese .act-row .row-act { justify-content:flex-end; }
body.lese details.acts summary { cursor:pointer; list-style:none; }
body.lese details.acts summary::-webkit-details-marker { display:none; }

/* plan and points */
body.lese .up-bar[role="meter"] span { min-width:2px; }
body.lese .up-row .up-val .link-btn { color:var(--ink); }
body.lese .dev-row .row-act { justify-content:flex-end; }
body.lese .up-count { margin-left:8px; }
body.lese .up-title .up-plan { color:var(--ink-2); }

/* purchase history */
body.lese .order-row .up-label small { display:block; }
body.lese .order-row .up-label .receipt { margin-left:0; }
body.lese .up-val.order-amount { flex-direction:column; align-items:flex-end; gap:4px; }
body.lese .order-amount .refunded { color:#8a2a12; font-size:12.5px; }
body.lese .billing-note { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
body.lese .orders-note { margin-top:16px; }

/* account */
body.lese .email-row .up-label small { display:block; }
body.lese .email-row .owned-note { color:#8a2a12; }
body.lese .pending-row .up-label .add-form { margin-top:10px; flex-wrap:wrap; }
body.lese .pending-row .code-input { max-width:11ch; text-align:center; letter-spacing:.2em; font-family:var(--display); font-weight:700; }
body.lese .add-form .add-msg { flex-basis:100%; margin:4px 0 0; }
body.lese .merge-confirm { margin:8px 0 0; padding:16px 18px; background:var(--page-2); border-radius:14px; font-family:var(--body-read); font-size:14px; }
body.lese .merge-confirm p { margin:0 0 8px; }
body.lese .merge-act { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body.lese .audit-row .up-label small { display:block; }
body.lese #delete-account { margin-top:48px; }
body.lese #audit .state-empty { margin-top:12px; }

@media (max-width:560px) {
  /* two-line rows: label on top, value and actions underneath (the mockup rules above pin .up-val to column 2) */
  body.lese .up-row.up-row-2 { grid-template-columns:minmax(0,1fr); row-gap:10px; }
  body.lese .up-row.up-row-2 .up-label { grid-column:1; grid-row:1; }
  body.lese .up-row.up-row-2 .up-val { grid-column:1; grid-row:2; align-self:start; justify-content:flex-start; white-space:normal; flex-wrap:wrap; }
  body.lese .up-val.order-amount { flex-direction:row; align-items:center; }
  body.lese .order-row .up-label small { overflow-wrap:anywhere; }
  body.lese .up-row.ic-row.pending-row { grid-template-columns:24px minmax(0,1fr); }
  body.lese .pending-row .code-input { max-width:9ch; }
  body.lese .prod-dl { justify-content:flex-start; }
  body.lese .up-row .up-val { white-space:normal; }
  body.lese .confirm { flex-direction:column; align-items:flex-start; }
  body.lese .email-row .up-label b { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion: reduce) { body.lese * { transition:none !important; scroll-behavior:auto !important; } html { scroll-behavior:auto; } }
body.lese .mobile-inner { padding:12px 0 20px; }

/* main is only focused programmatically (screen-reader focus management after a page change): no ring around the whole page */
body.lese main[tabindex]:focus, body.lese main[tabindex]:focus-visible { outline:none; }
/* long button labels (the Lemon Squeezy link in English) wrap instead of pushing the page wider */
body.lese .up-actions .hbtn { white-space:normal; max-width:100%; text-align:left; line-height:1.35; }

/* the tab row wraps instead of scrolling sideways, so no label is ever clipped (at 390 px in either language, and narrower) */
@media (max-width:900px) {
  body.lese .acct-tabs { flex-wrap:wrap; overflow:visible; column-gap:20px; row-gap:0; }
  body.lese .acct-tabs a { white-space:nowrap; }
}