/* WishMarket. Tokens follow the WishMarket design system handoff
   (screens/_ds/.../tokens). Base metrics mirror the Bootstrap 5.3 defaults
   the handoff screens were built on, without loading Bootstrap. */
@font-face { font-family: Optimistic; src: url('/static/Optimistic.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('/static/Manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --green-50:#F0FBF0; --green-100:#DEF7DC; --green-200:#B9EEB8; --green-300:#8CE58A; --green-400:#5DD46B; --green-500:#34BE5C; --green-600:#1F9F4C; --green-700:#16803F; --green-800:#106634; --green-900:#0C4F29;
  --teal-50:#EAFBF6; --teal-100:#CDF3E7; --teal-200:#9AE6CD; --teal-300:#63D2B0; --teal-400:#3AB897; --teal-500:#23977A; --teal-600:#1A7C64; --teal-700:#146152; --teal-800:#0F4B40; --teal-900:#0B3931;
  --lime-300:#C3EE7C; --lime-400:#A6E24A; --lime-500:#8FCB2E;
  --neutral-0:#FFFFFF; --neutral-25:#FCFCF9; --neutral-50:#F7F6F1; --neutral-100:#EFEEE6; --neutral-200:#E2E0D3; --neutral-300:#C9C6B4; --neutral-400:#A8A492; --neutral-500:#827E6C; --neutral-600:#605D4F; --neutral-700:#47453A; --neutral-800:#302E26; --neutral-900:#1C1B16;
  --amber-500:#F0A73E; --red-500:#E2554A; --red-600:#C7433A; --red-700:#AC372F; --blue-500:#3E8FD0; --yellow-100:#FFF6D6;
  --brand-primary:var(--green-500); --brand-primary-hover:var(--green-600); --brand-primary-active:var(--green-700); --brand-primary-tint:var(--green-100);
  --brand-secondary:var(--teal-500); --brand-secondary-hover:var(--teal-600); --brand-secondary-tint:var(--teal-100);
  --accent-lime:var(--lime-400);
  --surface-page:var(--neutral-0); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-25); --surface-inverse:var(--neutral-900);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300); --border-strong:var(--neutral-400);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-600); --text-tertiary:var(--neutral-500); --text-on-brand:#FFFFFF; --text-disabled:var(--neutral-400);
  --color-success:var(--green-600); --color-success-bg:var(--green-100); --color-warning:var(--amber-500); --color-warning-bg:#FCF0DC; --color-danger:var(--red-500); --color-danger-bg:#FBE4E1; --color-info:var(--blue-500); --color-info-bg:#E4F0FA;
  --focus-ring:var(--green-500);
  --font-display:Optimistic,'Segoe UI Historic','Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:64px;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.02em; --tracking-normal:0em; --tracking-wide:0.04em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(28,27,22,.06); --shadow-md:0 4px 14px rgba(28,27,22,.08); --shadow-lg:0 16px 40px rgba(28,27,22,.14); --shadow-brand:0 10px 24px rgba(52,190,92,.28);
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --duration-fast:120ms; --duration-normal:200ms;
  interpolate-size:allow-keywords;
}

/* Base */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
html:has(dialog.modal[open]) { overflow:hidden; }
body { margin:0; font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal); color:var(--text-primary); background:var(--surface-page); -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
h1,h2,h3,h4 { margin:0 0 var(--space-2); font-family:var(--font-display); font-weight:500; line-height:1.2; letter-spacing:var(--tracking-tight); }
p { margin:0 0 var(--space-4); }
a { color:var(--brand-primary); text-decoration:none; }
a:hover { color:var(--brand-primary-hover); text-decoration:underline; }
img,svg { vertical-align:middle; }
button,input,textarea,select { margin:0; font:inherit; color:inherit; }
button { cursor:pointer; }
strong,b { font-weight:700; }
hr { margin:0; border:0; border-top:1px solid var(--border-subtle); }
.icon { flex-shrink:0; }
.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; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.mono { font-family:var(--font-mono); }
.page { min-height:100vh; display:flex; flex-direction:column; }
.page > main { flex:1; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:6px 12px; border:1px solid transparent; border-radius:var(--radius-pill); background:transparent; color:var(--text-primary); font-size:var(--text-base); font-weight:600; line-height:var(--leading-normal); text-align:center; text-decoration:none; white-space:nowrap; user-select:none; transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); }
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:0; box-shadow:0 0 0 .2rem rgba(52,190,92,.35); }
.btn:active { transform:scale(.97); }
.btn:disabled,.btn[aria-disabled=true] { opacity:.65; pointer-events:none; }
.btn-lg { padding:13px 24px; font-size:var(--text-md); }
.btn-sm { padding:8px 14px; font-size:var(--text-sm); }
.btn-block { width:100%; }
.btn-primary { background:var(--brand-primary); border-color:var(--brand-primary); color:var(--text-on-brand); }
.btn-primary:hover { background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); color:var(--text-on-brand); box-shadow:var(--shadow-brand); }
.btn-primary:active { background:var(--brand-primary-active); border-color:var(--brand-primary-active); }
.btn-outline { background:transparent; border-color:var(--border-default); color:var(--text-primary); }
.btn-outline:hover,.btn-outline:active { background:var(--surface-sunken); color:var(--text-primary); }
.btn-danger { background:var(--red-500); border-color:var(--red-500); color:#fff; }
.btn-danger:hover { background:var(--red-600); border-color:var(--red-600); color:#fff; }
.btn-danger:active { background:var(--red-700); border-color:var(--red-700); }
.btn-danger:focus-visible { box-shadow:0 0 0 .2rem rgba(226,85,74,.35); }
.btn-outline-danger { border-color:var(--red-500); color:var(--red-600); }
.btn-outline-danger:hover,.btn-outline-danger:active { background:var(--color-danger-bg); color:var(--red-700); }
.btn .icon { width:18px; height:18px; }
.link-button { padding:0; border:0; background:none; color:var(--brand-primary); font-weight:600; }
.link-button:hover { color:var(--brand-primary-hover); text-decoration:underline; }

/* Page purpose and transient feedback share the existing type and color tokens. */
.wm-page-subtitle { margin:0 0 var(--space-4); color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.wm-heading-centered { text-align:center; }
.wm-toast { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-5) var(--space-6); border:1px solid var(--green-200); border-radius:var(--radius-md); background:var(--green-50); color:var(--text-primary); font-size:var(--text-sm); font-weight:700; overflow-wrap:anywhere; }
.wm-toast [data-toast-message] { flex:1; min-width:0; }
.wm-toast [data-toast-dismiss] { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; padding:0; border:1px solid currentColor; border-radius:var(--radius-pill); background:transparent; color:inherit; cursor:pointer; }
.wm-toast [data-toast-dismiss][hidden] { display:none; }
.wm-toast [data-toast-dismiss]:hover { background:var(--green-200); }
.wm-toast [data-toast-dismiss]:active { background:var(--green-300); }
.wm-toast [data-toast-dismiss]:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.wm-toast-region { position:fixed; z-index:100; right:var(--space-4); bottom:var(--space-4); width:min(380px,calc(100% - 32px)); }
.wm-toast-region .wm-toast { box-shadow:var(--shadow-md); }

/* Form controls */
.form-control { display:block; width:100%; padding:6px 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-base); line-height:var(--leading-normal); appearance:none; transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); }
.form-control::placeholder { color:var(--text-tertiary); opacity:1; }
.form-control:focus { outline:0; border-color:var(--brand-primary); box-shadow:0 0 0 .2rem rgba(52,190,92,.18); }
.form-control:disabled,.form-control[readonly] { background:var(--neutral-100); color:var(--text-secondary); }
textarea.form-control { resize:vertical; }
.form-check { display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--leading-normal); text-align:left; }
.form-check input { appearance:none; flex-shrink:0; width:16px; height:16px; margin-top:3px; border:1px solid var(--border-default); border-radius:4px; background:var(--surface-card) no-repeat center/12px; }
.form-check input:checked { border-color:var(--brand-primary); background-color:var(--brand-primary); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check input:focus-visible { outline:0; border-color:var(--brand-primary); box-shadow:0 0 0 .2rem rgba(52,190,92,.18); }
.switch { appearance:none; flex-shrink:0; width:2em; height:1em; margin:0; border:1px solid var(--border-default); border-radius:2em; background:var(--surface-card) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e") no-repeat left center/contain; cursor:pointer; transition:background-position .15s ease-in-out; }
.switch:checked { border-color:var(--brand-primary); background-color:var(--brand-primary); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position:right center; }
.switch:focus-visible { outline:0; border-color:var(--brand-primary); box-shadow:0 0 0 .2rem rgba(52,190,92,.18); }

/* Status messages */
.alert { margin:0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-sm); line-height:var(--leading-normal); text-align:left; }
.alert-success { background:var(--color-success-bg); color:var(--green-800); }
.alert-danger { background:var(--color-danger-bg); color:#8F2A22; }
.alert-info { background:var(--neutral-100); color:var(--text-secondary); }
.alert-warning { background:var(--color-warning-bg); color:var(--text-primary); }

/* Authenticated top bar */
.lo-topbar { position:relative; display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--border-subtle); background:var(--surface-page); }
.lo-brand { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-size:var(--text-md); font-weight:700; line-height:var(--leading-normal); color:var(--text-primary); white-space:nowrap; }
.lo-brand:hover { color:var(--text-primary); text-decoration:none; }
.lo-brand img { width:28px; height:28px; }
.lo-right { display:flex; align-items:center; gap:var(--space-4); }
.lo-create-btn .icon,.lo-wishes-pill .icon { display:none; width:18px; height:18px; }
.lo-wishes-pill { position:relative; display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-sm); font-weight:600; transition:box-shadow var(--duration-fast) var(--ease-standard); }
.lo-wishes-pill:hover { background:var(--neutral-100); box-shadow:var(--shadow-sm); color:var(--text-primary); text-decoration:none; }
.lo-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:var(--radius-pill); background:var(--brand-primary); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.lo-account { position:relative; }
.lo-avatar-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--brand-primary-tint); color:var(--brand-primary); font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; transition:background var(--duration-fast) var(--ease-standard); }
.lo-avatar-btn:hover { background:var(--brand-secondary-tint); }
.lo-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:10; min-width:180px; overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); box-shadow:var(--shadow-md); }
.lo-menu[hidden] { display:none; }
.lo-menu form { margin:0; }
.lo-menu a,.lo-menu button { display:flex; align-items:center; gap:var(--space-2); width:100%; padding:var(--space-3) var(--space-4); border:0; background:none; color:var(--text-primary); font-size:var(--text-sm); text-align:left; }
.lo-menu a:hover,.lo-menu button:hover { background:var(--neutral-100); color:var(--text-primary); text-decoration:none; }
.lo-menu .icon { width:16px; height:16px; color:var(--text-secondary); }

/* Public top bars */
.sp-topbar { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--border-subtle); }
.legal-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; min-height:72px; padding:0 48px; border-bottom:1px solid var(--border-subtle); background:#fff; }
.legal-topbar .lo-brand img { width:24px; height:24px; }

/* Footer */
.site-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:28px 48px; border-top:1px solid var(--border-subtle); background:var(--surface-page); color:var(--text-secondary); font-size:var(--text-sm); }
.site-footer nav { display:flex; gap:var(--space-6); }
.site-footer a { color:var(--text-secondary); text-decoration:none; }
.site-footer a:hover { color:var(--text-secondary); text-decoration:underline; }

/* Back controls */
.ve-back,.rf-back { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-primary); box-shadow:var(--shadow-sm); transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); }
.ve-back { position:fixed; top:var(--space-6); left:var(--space-6); z-index:5; }
.rf-back { position:absolute; top:var(--space-6); left:var(--space-6); padding:0; }
.ve-back:hover,.rf-back:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); color:var(--text-primary); text-decoration:none; }
.ve-back .icon,.rf-back .icon { width:18px; height:18px; }
.wd-backbar { padding:var(--space-6) var(--space-6) 0; }
.wd-back { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-sm); font-weight:600; box-shadow:var(--shadow-sm); transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); }
.wd-back.muted { color:var(--text-secondary); box-shadow:none; }
.wd-back:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); color:var(--text-primary); text-decoration:none; }
.wd-back .icon { width:16px; height:16px; }

/* Homepage */
.wm-hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:max(100vh,640px); padding:var(--space-16) var(--space-6) var(--space-24); text-align:center; }
.wm-logo { width:64px; height:64px; margin-bottom:var(--space-3); }
.wm-brand { margin-bottom:var(--space-6); font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; }
.wm-title { max-width:620px; font-size:58px; font-weight:700; line-height:var(--leading-tight); }
.wm-title span { color:var(--brand-primary); }
.wm-subtitle { margin:40px 0 0; color:var(--text-secondary); font-size:var(--text-md); }
.wm-form { display:flex; flex-direction:column; gap:var(--space-3); width:100%; max-width:360px; margin-top:var(--space-8); }
.wm-form .form-control { padding:12px; background:var(--neutral-50); }
.wm-helper { margin-top:calc(-1*var(--space-1)); color:var(--text-tertiary); font-size:var(--text-xs); }
.wm-form .alert { margin-top:var(--space-1); }
.wm-learn-more { position:absolute; bottom:var(--space-6); left:50%; display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-5); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-sm); font-weight:600; white-space:nowrap; box-shadow:var(--shadow-sm); transform:translateX(-50%); transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); }
.wm-learn-more:hover { color:var(--text-primary); text-decoration:none; box-shadow:var(--shadow-md); transform:translateX(-50%) translateY(-2px); }
.wm-learn-more .icon { width:16px; height:16px; }
.wm-section2 { display:flex; flex-direction:column; align-items:center; gap:var(--space-16); padding:var(--space-24) var(--space-6); background:var(--surface-sunken); }
.wm-block-head { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); max-width:720px; }
.wm-eyebrow { color:var(--brand-primary); font-size:var(--text-sm); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.wm-h2 { max-width:620px; font-size:var(--text-3xl); font-weight:700; text-align:center; }
.wm-lede { max-width:560px; margin-top:var(--space-2); color:var(--text-secondary); font-size:var(--text-md); text-align:center; }
.wm-video { position:relative; width:100%; max-width:820px; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--green-500),var(--teal-600)); box-shadow:var(--shadow-lg); }
.wm-video-play { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--radius-pill); background:rgba(255,255,255,.95); box-shadow:var(--shadow-md); transform:translate(-50%,-50%); }
.wm-video-play .icon { width:28px; height:28px; margin-left:2px; color:var(--brand-primary); }
.wm-video-caption { position:absolute; right:0; bottom:0; left:0; padding:var(--space-5); background:linear-gradient(to top,rgba(12,79,41,.55),transparent); color:#fff; font-size:var(--text-sm); font-weight:600; text-align:left; }
.wm-cta-final { display:flex; flex-direction:column; align-items:center; gap:var(--space-5); padding:var(--space-24) var(--space-6); text-align:center; }

/* Sign-in and sign-up */
.ve-wrap { display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:15vh var(--space-6) var(--space-8); text-align:center; }
.ve-logo { width:40px; height:40px; margin-bottom:var(--space-5); }
.ve-success { margin-bottom:var(--space-5); }
.ve-success .icon { width:40px; height:40px; color:var(--brand-primary); }
.ve-title { font-size:var(--text-xl); font-weight:700; }
.ve-subtitle { max-width:320px; margin-top:var(--space-3); color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.ve-subtitle strong { color:var(--text-secondary); }
.ve-subtitle form { display:inline; }
.ve-wrap > .alert { width:100%; max-width:296px; }
.lg-form { display:flex; flex-direction:column; gap:var(--space-3); width:100%; max-width:296px; margin-top:var(--space-5); text-align:left; }
.lg-form + .lg-form { margin-top:var(--space-3); }
.lg-email { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); width:100%; padding:12px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--neutral-100); color:var(--text-secondary); font-size:var(--text-sm); }
.lg-email > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-email a { flex-shrink:0; color:var(--brand-primary); font-size:var(--text-xs); font-weight:600; }
.lg-confirmed { display:flex; flex-shrink:0; align-items:center; gap:var(--space-1); color:var(--brand-primary); font-size:var(--text-xs); font-weight:600; }
.lg-confirmed .icon { width:14px; height:14px; }
.lg-forgot { align-self:flex-end; margin-top:calc(-1*var(--space-1)); color:var(--brand-primary); font-size:var(--text-xs); font-weight:600; }
.lg-hint { margin:calc(-1*var(--space-1)) 0 0; color:var(--text-tertiary); font-size:var(--text-xs); line-height:var(--leading-normal); }
.ve-actions { width:100%; max-width:296px; margin-top:var(--space-2); }
.lg-form .ve-actions { margin-top:calc(var(--space-2) - var(--space-3)); }
.lg-form .ve-actions.lg-spaced { margin-top:var(--space-2); }
.ve-actions .btn { width:100%; }
.lg-new { width:100%; max-width:296px; margin:var(--space-6) 0 0; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.lg-new p { margin:0 0 var(--space-3); font-size:1.2em; }
.lg-local { width:100%; max-width:296px; margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid var(--border-subtle); }
.lg-local p { margin:0 0 var(--space-3); color:var(--text-tertiary); font-size:var(--text-xs); }
.ve-codes { min-inline-size:0; margin-inline:0; padding:0; border:0; display:flex; justify-content:center; gap:var(--space-2); margin-top:var(--space-5); }
.ve-code { min-width:0; width:52px; height:52px; padding:1px 2px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--neutral-100); color:var(--text-primary); font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; text-align:center; transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard); }
.ve-code:focus { outline:0; border-color:var(--brand-primary); background:var(--surface-card); box-shadow:0 0 0 1px var(--brand-primary); }
.ve-form { display:flex; flex-direction:column; align-items:center; width:100%; }
.ve-form .ve-actions { margin-top:var(--space-5); }

/* Wish creation */
.lo-main { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding:var(--space-16) var(--space-6); }
.contents { display:contents; }
.ve-wrap.compact { min-height:0; padding-top:var(--space-16); padding-bottom:var(--space-16); }
.lo-h1 { font-size:var(--text-3xl); font-weight:700; text-align:center; }
.lo-hint { max-width:520px; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); text-align:center; }
.lo-question { display:block; margin:0 0 var(--space-4); color:var(--text-primary); font-size:var(--text-lg); font-weight:600; }
.lo-footnote { color:var(--text-tertiary); font-size:var(--text-xs); }
.lo-promptbox { position:relative; width:100%; max-width:640px; margin-top:var(--space-4); padding-bottom:6px; }
.lo-prompt { display:block; width:100%; min-height:140px; padding:var(--space-5) 64px var(--space-5) var(--space-5); border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-md); line-height:var(--leading-normal); resize:none; box-shadow:var(--shadow-sm); }
.lo-prompt.short { min-height:100px; }
.lo-prompt::placeholder { color:var(--text-tertiary); }
.lo-prompt:focus { outline:0; border-color:var(--focus-ring); box-shadow:0 0 0 2px var(--focus-ring); }
.lo-submit { position:absolute; right:var(--space-4); bottom:var(--space-4); display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--brand-primary); color:#fff; transition:background var(--duration-fast) var(--ease-standard); }
.lo-submit:hover { background:var(--brand-primary-hover); }
.lo-submit:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.lo-submit .icon { width:18px; height:18px; }
.lo-examples-label { margin:var(--space-2) 0 var(--space-4); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:600; }
.lo-examples { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); width:100%; max-width:640px; }
.lo-example { padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-secondary); font-size:var(--text-xs); line-height:var(--leading-normal); transition:background var(--duration-fast) var(--ease-standard); }
.lo-example:hover { background:var(--neutral-100); }
.lo-main > .alert { width:100%; max-width:520px; }
.rf-eyebrow { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--yellow-100); color:var(--brand-secondary); font-size:var(--text-xs); font-weight:700; }
.rf-eyebrow .icon { width:14px; height:14px; }
.rf-wish { display:flex; align-items:flex-start; gap:var(--space-2); width:100%; max-width:520px; margin-top:var(--space-2); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--neutral-100); color:var(--text-primary); font-size:var(--text-sm); line-height:var(--leading-normal); text-align:left; overflow-wrap:anywhere; }
.rf-wish.wide { max-width:480px; padding:var(--space-4); }
.rf-wish .icon { width:16px; height:16px; margin-top:2px; color:var(--text-tertiary); }
.rv-section { width:100%; max-width:480px; margin-top:var(--space-6); text-align:center; }
.rv-label { margin:0 0 var(--space-1); font-size:var(--text-lg); font-weight:700; }
.rv-sub { margin:0 0 var(--space-3); color:var(--text-tertiary); font-size:var(--text-xs); line-height:var(--leading-normal); }
.rv-options { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); margin:var(--space-6) 0 0; min-inline-size:0; padding:0; border:0; }
.rv-option { position:relative; display:block; }
.rv-option input { position:absolute; opacity:0; pointer-events:none; }
.rv-option span { display:block; padding:var(--space-3) var(--space-2); border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-sm); font-weight:600; text-align:center; cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard); }
.rv-option span:hover { background:var(--neutral-100); }
.rv-option input:checked + span { border-color:var(--brand-primary); background:var(--brand-primary-tint); color:var(--brand-primary); }
.rv-option input:focus-visible + span { outline:2px solid var(--focus-ring); outline-offset:2px; }
.rv-actions { width:100%; max-width:480px; margin-top:var(--space-6); }
.rv-actions .btn { width:100%; }
.wc-card { display:flex; flex-direction:column; gap:var(--space-3); width:100%; max-width:480px; margin-top:var(--space-2); padding:var(--space-5); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); box-shadow:var(--shadow-sm); text-align:left; }
.wc-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); font-size:var(--text-sm); }
.wc-row + .wc-row { padding-top:var(--space-3); border-top:1px solid var(--border-subtle); }
.wc-row-label { flex-shrink:0; color:var(--text-tertiary); }
.wc-row-value { font-weight:600; text-align:right; overflow-wrap:anywhere; }
.wc-row-description { flex-direction:column; align-items:stretch; gap:var(--space-1); }
.wc-row-description .wc-row-value { text-align:left; }
.see-full { display:block; margin:var(--space-1) 0 0; padding:0; border:0; background:transparent; color:var(--brand-primary-active); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.see-full:hover { color:var(--green-800); }
.wc-next { width:100%; max-width:480px; margin-top:var(--space-6); text-align:left; }
.wc-next-title { margin:0 0 var(--space-3); font-size:var(--text-lg); font-weight:700; text-align:center; }
.wc-step { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-2) 0; }
.wc-step-icon { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-pill); background:var(--brand-primary-tint); color:var(--brand-primary); }
.wc-step-icon .icon { width:16px; height:16px; }
.wc-step p { margin:0; padding-top:6px; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.wc-actions { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); width:100%; max-width:480px; margin-top:var(--space-4); }
.wc-actions .btn { width:100%; }
.wc-link { color:var(--brand-primary-active); font-size:var(--text-sm); font-weight:600; }

/* Tables shared by My Wishes and Wish details */
.sort-link { display:inline-flex; align-items:center; gap:2px; color:inherit; }
.sort-link:hover { color:var(--text-secondary); text-decoration:none; }
.sort-link.active { color:var(--text-primary); }
.sort-link .icon { width:12px; height:12px; }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
.pagination-summary { color:var(--text-tertiary); font-size:var(--text-xs); }
.pager { display:flex; gap:var(--space-2); margin-left:auto; }
.pager a,.pager span { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-primary); font-size:var(--text-base); transition:background var(--duration-fast) var(--ease-standard); }
.pager a:hover { background:var(--neutral-100); color:var(--text-primary); text-decoration:none; }
.pager .disabled { opacity:.4; }
.pager .active { border-color:var(--neutral-300); background:var(--neutral-200); }
.pager .icon { width:15px; height:15px; }
.see-link { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-secondary); transition:background var(--duration-fast) var(--ease-standard); }
.see-link:hover { background:var(--neutral-100); color:var(--text-primary); text-decoration:none; }
.see-link .icon { width:15px; height:15px; }
.thumb { display:block; width:36px; height:36px; overflow:hidden; border-radius:var(--radius-md); background:var(--neutral-100); }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; }

/* My Wishes */
.mw-wrap { flex:1; display:flex; flex-direction:column; gap:var(--space-6); width:100%; max-width:960px; margin:0 auto; padding:var(--space-10) var(--space-6) var(--space-16); }
.mw-h1 { font-size:var(--text-2xl); font-weight:700; text-align:center; }
.mw-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); }
.mw-tab { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--text-secondary); font-size:var(--text-sm); font-weight:600; transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard); }
.mw-tab:hover { background:var(--neutral-100); color:var(--text-secondary); text-decoration:none; }
.mw-tab .icon { width:15px; height:15px; }
.mw-tab[aria-current=page] { border-color:var(--brand-primary); background:var(--brand-primary); color:#fff; }
.mw-tab[aria-current=page] .lo-badge { background:rgba(255,255,255,.25); }
.mw-card { overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.mw-row { display:grid; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); }
.mw-row + .mw-row { border-top:1px solid var(--border-subtle); }
.mw-row.head { padding-top:var(--space-3); padding-bottom:var(--space-3); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:700; line-height:var(--leading-normal); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.mw-row:not(.head):hover { background:var(--green-50); }
.mw-live { grid-template-columns:150px minmax(0,1fr) 160px 110px 48px; }
.mw-granted { grid-template-columns:150px 52px minmax(0,1fr) 160px 160px 48px; }
.mw-closed { grid-template-columns:130px minmax(0,1fr) 160px 65px 100px 160px 40px; }
.mw-id { overflow:hidden; color:var(--text-tertiary); font-family:var(--font-mono); font-size:var(--text-xs); line-height:var(--leading-normal); text-overflow:ellipsis; white-space:nowrap; }
.mw-id:hover { color:var(--text-secondary); }
.mw-desc { display:block; min-width:0; width:100%; min-height:24px; padding:0; overflow:hidden; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-primary); font-size:var(--text-sm); text-align:left; text-decoration:underline; text-decoration-color:var(--border-default); text-underline-offset:3px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.mw-desc:hover { color:var(--brand-primary-active); text-decoration-color:currentColor; }
.mw-desc:active { color:var(--green-800); }
.modal-wish .modal-card { min-height:min(480px,90dvh); max-height:90dvh; overflow:hidden; }
.modal-wish h2 { flex-shrink:0; margin:0; padding-right:var(--space-8); font-size:var(--text-xl); }
.mw-full-description { flex:1; min-height:0; margin:0; overflow:auto; color:var(--text-secondary); white-space:pre-wrap; overflow-wrap:anywhere; }
.modal-wish .btn { flex-shrink:0; }
.mw-cell { color:var(--text-secondary); font-size:var(--text-sm); white-space:nowrap; }
.mw-meta-wrap { display:contents; }
.mw-reason-cell { display:flex; align-items:center; }
.mw-reason { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--radius-sm); color:var(--text-secondary); }
.mw-reason .icon { width:17px; height:17px; }
.mw-tooltip { position:absolute; z-index:2; bottom:calc(100% + var(--space-1)); left:50%; width:max-content; max-width:220px; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--surface-inverse); box-shadow:var(--shadow-md); color:var(--text-on-brand); font-size:var(--text-xs); font-weight:600; line-height:var(--leading-normal); opacity:0; pointer-events:none; transform:translateX(-50%); visibility:hidden; white-space:normal; }
.mw-reason:not([data-tooltip-suppressed]):hover .mw-tooltip,.mw-reason:not([data-tooltip-suppressed]):focus-visible .mw-tooltip { opacity:1; pointer-events:auto; visibility:visible; }
.mw-offers-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--radius-pill); background:var(--brand-primary); color:#fff; font-size:var(--text-xs); font-weight:700; }
.mw-offers-badge.zero { background:var(--neutral-200); color:var(--text-tertiary); }
.mw-granted-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--radius-pill); background:var(--brand-primary-tint); color:var(--brand-primary); font-size:var(--text-xs); font-weight:700; vertical-align:middle; }
.mw-granted-tag .icon { width:12px; height:12px; }
.mw-empty { padding:var(--space-10) var(--space-5); color:var(--text-tertiary); font-size:var(--text-sm); text-align:center; }

/* Wish details */
.wd-wrap { flex:1; display:flex; flex-direction:column; gap:var(--space-5); width:100%; max-width:1280px; margin:0 auto; padding:var(--space-6) var(--space-6) var(--space-16); }
.wd-wrap.granted { max-width:1000px; }
.wd-wrap.closed { max-width:640px; }
.wd-wrap .wm-page-subtitle { text-align:center; }
.wd-columns { display:grid; grid-template-columns:380px minmax(0,1fr); gap:var(--space-6); align-items:start; }
.wd-wrap.granted .wd-columns { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.wd-col { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.wd-h1 { font-size:var(--text-2xl); font-weight:700; text-align:center; }
.wd-h2 { font-size:var(--text-lg); font-weight:700; text-align:center; }
.wd-card { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.wd-row { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; font-size:var(--text-sm); line-height:var(--leading-normal); }
.wd-row + .wd-row { border-top:1px solid var(--border-subtle); }
.wd-row-label { color:var(--text-tertiary); }
.wd-row-value { font-weight:600; text-align:right; overflow-wrap:anywhere; }
.wd-row-description { flex-direction:column; gap:var(--space-1); }
.wd-row-description .wd-row-value { text-align:left; }
.wd-close-btn { margin-top:var(--space-2); }
.wd-close-btn .btn { width:100%; }
.wd-offers-card { overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.wd-offer-row { display:grid; grid-template-columns:80px 40px 80px minmax(130px,1fr) 90px 90px 32px; align-items:center; gap:var(--space-2); padding:var(--space-3); }
.wd-offer-row:not(.head) { grid-template-areas:"id thumb status product price expiration action"; }
.wd-offer-row + .wd-offer-row { border-top:1px solid var(--border-subtle); }
.wd-offer-row.head { color:var(--text-tertiary); font-size:var(--text-xs); font-weight:700; line-height:var(--leading-normal); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.wd-offer-row:not(.head):hover { background:var(--green-50); }
.wd-offer-id { grid-area:id; overflow:hidden; color:var(--text-tertiary); font-family:var(--font-mono); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.wd-offer-row .thumb { grid-area:thumb; }
.wd-offer-row .see-link { grid-area:action; justify-self:end; }
.wd-offer-cell { color:var(--text-primary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.wd-offer-title { grid-area:product; overflow-wrap:anywhere; }
.wd-offer-meta { display:contents; }
.wd-offer-status { grid-area:status; display:inline-flex; align-items:center; gap:var(--space-1); color:var(--green-700); font-size:var(--text-sm); font-weight:600; white-space:nowrap; }
.wd-offer-status.closed { color:var(--text-secondary); }
.wd-offer-status .icon { width:16px; height:16px; flex:none; }
.wd-offer-meta .wd-offer-cell[data-label="Price"] { grid-area:price; }
.wd-offer-meta .wd-offer-cell[data-label="Expiration"] { grid-area:expiration; }
.wd-offer-meta .wd-offer-cell[data-label="Coupon"] { grid-area:expiration; }
.wd-offers-card.has-store-referrals .wd-offer-row { grid-template-columns:60px 40px 70px minmax(100px,1fr) 80px 110px 120px; }
.wd-store-name { display:block; margin-top:var(--space-1); color:var(--text-secondary); font-size:var(--text-xs); }
.wd-no-coupon { display:inline-block; padding:var(--space-1) var(--space-2); border-radius:var(--radius-pill); background:var(--neutral-100); color:var(--text-secondary); font-size:var(--text-xs); text-align:center; }
.wd-store-action { grid-area:action; font-size:var(--text-xs); }
.wd-store-action.btn { min-height:40px; padding:var(--space-2) var(--space-3); white-space:normal; text-align:center; }
.wd-price-discount { display:block; color:var(--brand-primary); font-size:var(--text-xs); font-weight:600; }
.wd-empty { padding:var(--space-10) var(--space-5); color:var(--text-tertiary); font-size:var(--text-sm); text-align:center; }
.wd-wrap > .alert { max-width:640px; }
.ao-img { display:flex; align-items:center; justify-content:center; width:100%; height:260px; overflow:hidden; border-radius:var(--radius-md); background:var(--neutral-100); color:var(--text-tertiary); font-size:var(--text-sm); }
.ao-img img { display:block; width:100%; height:100%; object-fit:contain; }
.ao-img [hidden] { display:none; }
.ao-redeemed-price { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-4); font-size:var(--text-sm); }
.ao-price { font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; text-align:right; }
.ao-title { margin-top:var(--space-4); font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; line-height:1.2; }
.ao-desc { margin:var(--space-2) 0 0; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.ao-url { display:inline-flex; align-items:center; gap:var(--space-2); max-width:100%; color:var(--brand-primary); font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere; }
.ao-url .icon { width:14px; height:14px; }
.ao-sale-date { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-subtle); font-size:var(--text-sm); }
.ao-sale-label { color:var(--text-tertiary); }
.ao-sale-date time { font-weight:600; text-align:right; }
.ao-coupon { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-5); padding:var(--space-4); border-radius:var(--radius-md); background:var(--neutral-50); }
.ao-coupon-label { color:var(--text-tertiary); font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.ao-coupon-code { color:var(--text-primary); font-family:var(--font-mono); font-size:var(--text-xl); font-weight:700; letter-spacing:1px; overflow-wrap:anywhere; }
.ao-coupon-note { margin:var(--space-1) 0 0; color:var(--text-tertiary); font-size:var(--text-xs); }
.ao-coupon-copy { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--brand-primary); border-radius:var(--radius-pill); background:var(--surface-card); color:var(--brand-primary); }
.ao-coupon-copy:hover { background:var(--brand-primary-tint); }
.ao-coupon-copy .icon { width:16px; height:16px; }
.ao-coupon-copy.copied { background:var(--brand-primary-tint); }
.ao-status { margin:var(--space-5) 0 0; color:var(--text-secondary); font-size:var(--text-sm); }
.ao-review-btn { margin-top:var(--space-5); }
.ao-review-btn .btn { width:100%; }
.ao-review { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-subtle); }
.ao-review h3 { font-size:var(--text-base); font-weight:700; }
.ao-review-rating { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--text-sm); }
.ao-review-stars { display:inline-flex; gap:var(--space-1); }
.ao-review-star { display:flex; color:var(--neutral-300); }
.ao-review-star .icon { width:20px; height:20px; }
.ao-review-star.filled { color:var(--brand-secondary); }
.ao-review-star.filled .icon { fill:currentColor; }
.ao-review-body { margin:var(--space-3) 0 0; font-size:var(--text-sm); white-space:pre-wrap; overflow-wrap:anywhere; }
.ao-review-date { margin:var(--space-3) 0 0; color:var(--text-secondary); font-size:var(--text-xs); }

/* Modals: native <dialog> with the handoff's scrim and card */
.modal { width:calc(100% - 48px); max-width:440px; max-height:90vh; margin:auto; padding:0; overflow:visible; border:0; border-radius:var(--radius-xl); background:transparent; color:var(--text-primary); }
.modal.modal-wide { max-width:480px; }
.modal::backdrop { background:rgba(28,27,22,.45); backdrop-filter:blur(2px); }
.modal[open] { animation:modal-in var(--duration-normal) var(--ease-out); }
@keyframes modal-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.modal-card { position:relative; display:flex; flex-direction:column; gap:var(--space-4); max-height:90vh; overflow-y:auto; padding:var(--space-6); border-radius:var(--radius-xl); background:var(--surface-card); box-shadow:var(--shadow-lg); }
.modal-card.plain { display:block; }
.modal-close { position:absolute; top:var(--space-4); right:var(--space-4); z-index:1; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--neutral-100); color:var(--text-secondary); }
.modal-close:hover { background:var(--neutral-200); }
.modal-close .icon { width:16px; height:16px; }
.modal h3 { margin:0 0 var(--space-2); padding-right:var(--space-6); font-size:var(--text-xl); font-weight:700; }
.modal-body { display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-2); }
.modal-field { display:flex; flex-direction:column; gap:var(--space-2); }
.modal-field label { color:var(--text-tertiary); font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.sp-email-label { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.sp-email-value { display:block; padding:6px 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--neutral-100); color:var(--text-secondary); font-size:var(--text-base); line-height:var(--leading-normal); overflow-wrap:anywhere; }
.sp-login-badge { display:inline-flex; align-items:center; gap:4px; color:var(--green-800); font-size:var(--text-xs); font-weight:600; letter-spacing:normal; text-transform:none; white-space:nowrap; }
.sp-login-badge .icon { width:14px; height:14px; }
.modal-note { margin:0 0 var(--space-4); color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.modal-card > .modal-note { margin:0; }
.modal-confirm { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-md); background:var(--neutral-50); }
.modal-confirm p { margin:0; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.modal-actions { display:flex; gap:var(--space-3); margin-top:var(--space-3); }
.modal-actions .btn,.modal-confirm-actions .btn { flex:1; }
.modal-confirm-actions { display:flex; gap:var(--space-3); }
.modal-stack-actions { display:flex; flex-direction:column; gap:var(--space-3); }
.modal-stack-actions .btn { width:100%; }
.modal form { margin:0; }
.modal [data-step][hidden] { display:none; }
.modal-img { width:100%; height:220px; margin-bottom:var(--space-4); overflow:hidden; border-radius:var(--radius-md); background:var(--neutral-100); }
.modal-img img { display:block; width:100%; height:100%; object-fit:cover; }
.modal-offer h3 { margin:0 0 var(--space-1); }
.modal-id { margin-bottom:var(--space-4); color:var(--text-tertiary); font-family:var(--font-mono); font-size:var(--text-xs); }
.modal-desc { margin:0 0 var(--space-4); color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-normal); }
.modal-offer .modal-note { margin:0 0 var(--space-4); }
.wd-cancellation-reason { margin-bottom:var(--space-5); padding:var(--space-4); border-radius:var(--radius-md); background:var(--neutral-50); font-size:var(--text-sm); }
.wd-cancellation-reason > span { color:var(--text-tertiary); font-weight:600; }
.wd-cancellation-reason p { margin:var(--space-2) 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.modal-rows { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); }
.modal-row { display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; border-top:1px solid var(--border-subtle); font-size:var(--text-sm); line-height:var(--leading-normal); }
.modal-row-label { color:var(--text-tertiary); }
.modal-row-value { font-weight:600; text-align:right; }
.modal-discount { padding:0 var(--space-2); border-radius:var(--radius-sm); background:var(--color-success-bg); color:var(--green-800); }
.modal-done { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; text-align:center; }
.modal-done h3 { margin:0; padding:0; }
.modal-done .modal-note { margin:0; }
.modal form > [data-step] > .alert { margin-bottom:var(--space-4); }
.modal-done-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-pill); background:var(--brand-primary-tint); color:var(--brand-primary); }
.modal-done-icon .icon { width:24px; height:24px; }
.modal-done-title { color:var(--text-primary); font-weight:600; }
.modal-done-text { color:var(--text-secondary); font-size:var(--text-sm); }
.rv-stars { display:flex; gap:var(--space-2); margin:0 0 var(--space-4); padding:0; border:0; }
.rv-star { position:relative; display:block; width:36px; height:36px; color:var(--neutral-300); cursor:pointer; transition:color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); }
.rv-star input { position:absolute; opacity:0; pointer-events:none; }
.rv-star .icon { width:100%; height:100%; }
.rv-star.filled { color:var(--brand-secondary); }
.rv-star:hover { transform:scale(1.1); }
.rv-star:has(input:focus-visible) { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm); }
.rv-textarea-label { display:block; margin-bottom:var(--space-2); font-size:var(--text-sm); font-weight:600; }
.rv-textarea { min-height:100px; margin-bottom:var(--space-2); padding:var(--space-3); font-size:var(--text-sm); }
.rv-hint { margin:0 0 var(--space-5); color:var(--text-tertiary); font-size:var(--text-xs); line-height:var(--leading-normal); }

/* My account */
.ma-wrap { flex:1; display:flex; flex-direction:column; gap:var(--space-6); width:100%; max-width:960px; margin:0 auto; padding:var(--space-6) var(--space-6) var(--space-16); }
.ma-h1 { font-size:var(--text-2xl); font-weight:700; }
.ma-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--space-6); align-items:start; }
.ma-nav { display:flex; flex-direction:column; gap:var(--space-1); }
.ma-nav-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); color:var(--text-secondary); font-size:var(--text-sm); font-weight:600; line-height:var(--leading-normal); transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard); }
.ma-nav-item .icon { width:17px; height:17px; }
.ma-nav-item:hover,.ma-nav-item[aria-current=page] { background:var(--neutral-100); color:var(--text-primary); text-decoration:none; }
.ma-panel { display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.ma-h2 { font-size:var(--text-lg); font-weight:700; text-align:center; }
.ma-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.ma-stat { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.ma-stat-icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-pill); background:var(--brand-primary-tint); color:var(--brand-primary); }
.ma-stat-icon .icon { width:18px; height:18px; }
.ma-stat-value { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700; }
.ma-stat-label { color:var(--text-secondary); font-size:var(--text-sm); }
.ma-card { overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.ma-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); width:100%; margin:0; padding:var(--space-4) var(--space-5); border:0; background:none; color:inherit; text-align:left; }
.ma-row + .ma-row { border-top:1px solid var(--border-subtle); }
.ma-row > div:first-child,.ma-row > label { flex:1; min-width:0; }
.ma-row.clickable { cursor:pointer; transition:background var(--duration-fast) var(--ease-standard); }
.ma-row.clickable:hover { background:var(--neutral-100); }
.ma-row-label { display:block; font-size:var(--text-sm); font-weight:600; line-height:var(--leading-normal); }
.ma-row-sub { display:block; margin-top:2px; overflow:hidden; color:var(--text-tertiary); font-size:var(--text-xs); line-height:var(--leading-normal); text-overflow:ellipsis; white-space:nowrap; }
.ma-row-time-zone { flex-wrap:wrap; }
.ma-row-time-zone > div:first-child { flex:1 1 220px; }
.ma-row-time-zone .ma-row-sub { white-space:normal; overflow-wrap:anywhere; }
.ma-row-time-zone .btn { flex-shrink:0; }
.ma-row-value { flex-shrink:0; overflow:hidden; color:var(--text-secondary); font-size:var(--text-sm); text-overflow:ellipsis; white-space:nowrap; }
.ma-row-action { display:flex; align-items:center; gap:var(--space-2); color:var(--text-tertiary); }
.ma-row-action .icon { width:16px; height:16px; }
.ma-row.danger .ma-row-label { color:#C0392B; }
.ma-row form { display:flex; margin:0; }
.ma-danger-note { margin:0; padding:0 var(--space-5) var(--space-5); color:var(--text-tertiary); font-size:var(--text-xs); }

/* Support */
.sp-wrap { flex:1; display:flex; flex-direction:column; gap:var(--space-10); width:100%; max-width:760px; margin:0 auto; padding:var(--space-10) var(--space-6) var(--space-16); }
.sp-h1 { font-size:var(--text-2xl); font-weight:700; text-align:center; }
.sp-lede { margin:var(--space-2) 0 0; color:var(--text-secondary); font-size:var(--text-sm); text-align:center; }
.sp-section { display:flex; flex-direction:column; gap:var(--space-4); }
.sp-h2 { font-size:var(--text-lg); font-weight:700; text-align:center; }
.sp-faq { overflow:hidden; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.sp-faq-item + .sp-faq-item { border-top:1px solid var(--border-subtle); }
.sp-faq-q { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-5); font-size:var(--text-sm); font-weight:600; list-style:none; cursor:pointer; }
.sp-faq-q::-webkit-details-marker { display:none; }
.sp-faq-q:hover { background:var(--neutral-100); }
.sp-faq-q .icon { width:16px; height:16px; color:var(--text-tertiary); transition:transform var(--duration-fast) var(--ease-standard); }
.sp-faq-item[open] .sp-faq-q .icon { transform:rotate(180deg); }
.sp-faq-item::details-content { height:0; overflow:clip; transition:height var(--duration-fast) var(--ease-standard),content-visibility var(--duration-fast) var(--ease-standard) allow-discrete; }
.sp-faq-item[open]::details-content { height:auto; }
.sp-faq-item p { margin:0; padding:0 var(--space-5) var(--space-4); color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-relaxed); }
.sp-contact-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.sp-contact-text { display:flex; flex-direction:column; gap:2px; }
.sp-contact-title { font-size:var(--text-sm); font-weight:600; }
.sp-contact-sub { color:var(--text-tertiary); font-size:var(--text-xs); }

/* Legal */
.legal-main { flex:1; width:100%; max-width:720px; margin:0 auto; padding:48px; }
.legal-main h1 { font-size:var(--text-3xl); font-weight:700; text-align:center; }
.legal-updated { margin:0 0 48px; color:var(--text-tertiary); text-align:center; }
.legal-main section { margin-bottom:var(--space-6); }
.legal-draft { margin-bottom:var(--space-10); text-align:center; }
.legal-main h2 { font-size:var(--text-lg); font-weight:700; }
.legal-main p { color:var(--text-secondary); line-height:var(--leading-relaxed); }

/* Transitional pages kept for older links (Match and Offer lists, terms
   acknowledgement, errors). */
.simple-main { flex:1; width:100%; max-width:760px; margin:0 auto; padding:var(--space-10) var(--space-6) var(--space-16); }
.simple-main h1 { font-size:var(--text-2xl); font-weight:700; text-align:center; }
.legacy-card-list { display:grid; gap:var(--space-4); margin:var(--space-6) 0 0; padding:0; list-style:none; }
.legacy-card-list li { padding:var(--space-6); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--surface-card); }
.legacy-card-list dl { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-5); margin:0; font-size:var(--text-sm); }
.legacy-card-list dt { color:var(--text-tertiary); }
.legacy-card-list dd { margin:0; overflow-wrap:anywhere; }
.legacy-card-list form { margin-top:var(--space-5); }

@media (max-width:1230px) {
  .wd-wrap:not(.granted) .wd-columns { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px) {
  .wd-columns,.wd-wrap.granted .wd-columns { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1180px) {
  .wd-offer-row.head { display:none; }
  .wd-offer-row:not(.head),.wd-offers-card.has-store-referrals .wd-offer-row:not(.head) { grid-template-columns:48px minmax(0,1fr) auto; grid-template-areas:"thumb product action" "thumb id action" "meta meta meta"; row-gap:var(--space-1); padding:var(--space-3); }
  .wd-offers-card.has-store-referrals .wd-offer-row.wd-store-referral { grid-template-areas:"thumb product product" "thumb id id" "meta meta meta" "action action action"; }
  .wd-store-action { margin-top:var(--space-2); }
  .wd-offer-row .thumb { align-self:start; }
  .wd-offer-row .see-link { align-self:start; }
  .wd-offer-meta { grid-area:meta; display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-1); padding-top:var(--space-2); border-top:1px solid var(--border-subtle); }
  .wd-offer-status { order:1; }
  .wd-offer-meta .wd-offer-cell[data-label="Price"] { order:0; }
  .wd-offer-meta .wd-offer-cell[data-label="Expiration"] { order:2; }
  .wd-offer-meta .wd-offer-cell[data-label="Coupon"] { order:2; }
  .wd-offer-meta .wd-offer-cell { color:var(--text-secondary); font-size:var(--text-xs); }
  .wd-offer-meta .wd-offer-cell::before { content:attr(data-label) ": "; color:var(--text-tertiary); }
  .wd-price-discount { display:inline; margin-left:var(--space-1); }
}
@media (max-width:1000px) {
  .mw-row.head { display:none; }
  .mw-row:not(.head) { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title action" "id action" "meta meta"; row-gap:var(--space-1); padding:var(--space-3) var(--space-4); }
  .mw-row.mw-granted:not(.head) { grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"thumb title action" "thumb id action" "meta meta meta"; }
  .mw-row .thumb { grid-area:thumb; align-self:start; }
  .mw-desc { grid-area:title; font-weight:600; }
  .mw-id { grid-area:id; }
  .mw-row .see-link { grid-area:action; justify-self:end; align-self:start; }
  .mw-meta-wrap { grid-area:meta; display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-1); padding-top:var(--space-2); border-top:1px solid var(--border-subtle); }
  .mw-meta-wrap > span,.mw-meta-wrap .mw-cell,.mw-meta-wrap .mw-offers-badge { font-size:var(--text-xs); line-height:var(--leading-normal); }
  .mw-meta-wrap [data-label]::before { content:attr(data-label) ": "; color:var(--text-tertiary); }
  .mw-meta-wrap .push { margin-left:auto; }
  .mw-closed .mw-meta-wrap .push { margin-left:0; }
}
@media (max-width:820px) {
  .wm-title { font-size:var(--text-3xl); }
  .wm-section2 { padding:var(--space-16) var(--space-5); }
}
@media (max-width:640px) {
  .wm-title { font-size:var(--text-xl); }
  .lo-topbar { padding:var(--space-3) var(--space-4); }
  .lo-create-btn,.lo-wishes-pill { position:relative; width:36px; height:36px; padding:0; justify-content:center; }
  .lo-create-btn .lo-btn-text,.lo-wishes-pill .lo-btn-text { display:none; }
  .lo-create-btn .icon,.lo-wishes-pill .icon { display:inline-flex; }
  .lo-wishes-pill .lo-badge { position:absolute; top:-4px; right:-4px; }
  .lo-right { gap:var(--space-2); }
  .lo-menu { right:0; }
  .sp-topbar { padding:var(--space-3) var(--space-4); }
  .legal-topbar { padding:0 var(--space-4); }
  .site-footer { flex-direction:column; text-align:center; padding:28px var(--space-4); }
  .site-footer > :nth-child(1) { order:2; }
  .site-footer > :nth-child(2) { order:1; justify-content:center; }
  .site-footer > :nth-child(3) { order:3; }
  .ve-back { top:var(--space-4); left:var(--space-4); }
  .rf-back { top:var(--space-4); left:var(--space-4); }
  .lo-main { padding:var(--space-20) var(--space-4) var(--space-12); }
  .ve-codes { gap:6px; }
  .ve-code { width:44px; height:48px; }
  .wd-backbar { padding:var(--space-4) var(--space-4) 0; }
  .wd-wrap { padding:var(--space-4) var(--space-4) var(--space-12); }
  .mw-wrap { padding:var(--space-6) var(--space-4) var(--space-12); }
  .pagination { flex-direction:column; align-items:center; text-align:center; }
  .pager { margin-left:0; }
  .ma-wrap { padding:var(--space-4) var(--space-4) var(--space-12); }
  .ma-h1 { text-align:center; }
  .ma-wrap > div > .wm-page-subtitle { text-align:center; }
  .ma-layout { grid-template-columns:minmax(0,1fr); }
  .ma-nav { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:var(--space-2); }
  .ma-nav-item { padding:var(--space-2) var(--space-4); border:1px solid var(--border-default); border-radius:var(--radius-pill); background:var(--surface-card); }
  .ma-nav-item[aria-current=page] { border-color:var(--brand-secondary); }
  .sp-wrap { padding:var(--space-6) var(--space-4) var(--space-12); }
  .sp-contact-card { flex-direction:column; align-items:stretch; text-align:center; }
  .legal-main { padding:var(--space-8) var(--space-4); }
  .modal { width:calc(100% - 32px); }
  .modal-card { padding:var(--space-5); }
  .rv-options { gap:6px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Keep the Administrator identity and account controls visible together. */
.administrator-chrome { position:sticky; top:0; z-index:30; }
.administrator-banner { display:flex; align-items:center; gap:12px; padding:8px 24px; background:var(--color-warning-bg); color:var(--text-primary); font-size:14px; }
.administrator-banner > svg { flex-shrink:0; }
.administrator-banner > span { min-width:0; overflow-wrap:anywhere; }
.administrator-banner form { margin:0 0 0 auto; flex-shrink:0; }
.administrator-banner button { color:inherit; background:none; border:0; padding:8px 0; font:inherit; text-decoration:underline; cursor:pointer; }

.extension-draft { max-width: 480px; margin: 24px auto; padding: 20px; text-align: left; border: 1px solid var(--border-subtle, #e2e0d3); border-radius: 12px; }
.extension-draft label { display: block; margin-bottom: 8px; font-weight: 600; }
.extension-draft p { font-size: 14px; margin: 12px 0; }

.wm-form[hidden] { display: none; }