:root {
  --nude: #F2DDD5;
  --rose: #D9877A;
  --rose-deep: #B85C4A;
  --terracotta: #C4614A;
  --terra-dark: #8C3C2A;
  --blush: #F7EDE9;
  --blush-deep: #EED5CC;
  --gold: #C49A6C;
  --gold-light: #F5EAD8;
  --ink: #1C0E0A;
  --ink-soft: #4A2820;
  --cream: #FDF8F4;
  --warm-white: #FFF9F6;
  --muted: #A07060;
}

/* ── DARK MODE ── */
@media (prefers-color-scheme: dark) {
  /* Auth card gets a darker panel on system dark mode */
  .auth-card { background: rgba(30,40,22,.92) !important; border-color: rgba(212,168,144,.15) !important; }
  .auth-field input { background: rgba(20,28,14,.8) !important; color: rgba(255,255,255,.9) !important; border-color: rgba(212,168,144,.2) !important; }
  .auth-field input:focus { background: rgba(20,28,14,.95) !important; }
  .cat-btn { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.85) !important; }
  .cat-strip-wrap::after { background: linear-gradient(to right, transparent, #3A4832) !important; }
  .confirm-sheet { background: linear-gradient(170deg,#2A3420,#1E2818) !important; }
  .fav-inner { background: linear-gradient(170deg,#2A3420,#1E2818) !important; }
  .fav-item { background: rgba(255,255,255,.06) !important; border-color: rgba(212,168,144,.1) !important; }
  .land-cat-pill { background: rgba(255,255,255,.08) !important; border-color: rgba(212,168,144,.12) !important; }
  .land-progress-chip { background: rgba(255,255,255,.08) !important; }
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  background: #3A4832;
  color: var(--ink);
  display: flex; flex-direction: column;
  height: 100%; max-width: 480px;
  margin: 0 auto; position: relative;
}

/* ── ZELLIGE BG ── */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.035;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23B85C4A'%3E%3Cpath d='M30 2L58 30L30 58L2 30Z' fill='none' stroke='%23B85C4A' stroke-width='0.8'/%3E%3Cpath d='M30 14L46 30L30 46L14 30Z' fill='none' stroke='%23C49A6C' stroke-width='0.6'/%3E%3Cpath d='M30 22L38 30L30 38L22 30Z' fill='%23D9877A' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══ PAGE VEIL ══ */
#page-veil { position:fixed; inset:0; z-index:500; background:#3A4832; opacity:0; pointer-events:none; transition:opacity 0.22s ease; }
#page-veil.fading { opacity:1; pointer-events:all; }

@keyframes screenIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════ AUTH ══════════════════ */
#auth-screen {
  position:relative; z-index:10; flex:1; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem 1.5rem;
  background:linear-gradient(160deg,#3A4832 0%,#2E3C26 60%,#243020 100%); overflow-y:auto;
}
#auth-screen.on { display:flex; animation:screenIn .3s ease; }
.auth-logo { text-align:center; margin-bottom:1.6rem; }
.auth-logo-icon { font-size:2.8rem; animation:pulse 2.5s ease-in-out infinite; display:block; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.auth-logo-title { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,5vw,2rem); font-weight:500; color:rgba(255,255,255,.92); line-height:1.2; margin-top:.4rem; }
.auth-logo-title em { color:#D4A890; font-style:italic; }
.auth-logo-sub { font-family:'DM Sans',sans-serif; font-size:.62rem; color:rgba(255,255,255,.38); letter-spacing:.15em; text-transform:uppercase; margin-top:.3rem; }
.auth-card { width:100%; max-width:360px; background:white; border-radius:24px; padding:1.6rem 1.5rem 1.5rem; box-shadow:0 20px 60px rgba(184,92,74,.14),0 4px 16px rgba(184,92,74,.08); border:1px solid rgba(184,92,74,.1); }
.auth-tabs { display:flex; background:var(--blush); border-radius:12px; padding:4px; margin-bottom:1.4rem; gap:3px; }
.auth-tab { flex:1; padding:9px; border:none; background:transparent; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; color:var(--muted); cursor:pointer; transition:all .22s; }
.auth-tab.active { background:white; color:var(--rose-deep); box-shadow:0 2px 8px rgba(184,92,74,.15); font-weight:600; }
.auth-field { margin-bottom:.9rem; }
.auth-field label { display:block; font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:600; color:var(--ink-soft); letter-spacing:.07em; text-transform:uppercase; margin-bottom:.35rem; }
.auth-field input { width:100%; padding:11px 14px; border:1.5px solid rgba(184,92,74,.18); border-radius:12px; font-family:'DM Sans',sans-serif; font-size:.9rem; color:var(--ink); background:var(--warm-white); outline:none; transition:border-color .2s,background .2s; }
.auth-field input:focus { border-color:var(--rose-deep); background:white; }
.auth-field input::placeholder { color:var(--muted); opacity:.6; }
.auth-error { background:#FFF0F0; border:1px solid rgba(184,92,74,.3); border-radius:10px; padding:9px 13px; font-family:'DM Sans',sans-serif; font-size:.78rem; color:var(--rose-deep); margin-bottom:1rem; display:none; line-height:1.5; }
.auth-error.show { display:block; }
.btn-auth { width:100%; padding:14px; border:none; border-radius:14px; background:linear-gradient(135deg,var(--rose-deep) 0%,var(--terracotta) 100%); color:white; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1rem; font-weight:600; cursor:pointer; transition:all .22s; box-shadow:0 6px 20px rgba(184,92,74,.35); letter-spacing:.04em; margin-top:.25rem; }
.btn-auth:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(184,92,74,.45); }
.btn-auth:active { transform:scale(.97); }
.btn-auth:disabled { opacity:.6; cursor:not-allowed; transform:none !important; box-shadow:none; }
.auth-loading { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to{transform:rotate(360deg)} }
.auth-pw-wrap { position:relative; display:flex; align-items:center; }
.auth-pw-wrap input { flex:1; padding-right:42px !important; }
.btn-pw-toggle { position:absolute; right:10px; background:none; border:none; cursor:pointer; font-size:.95rem; color:var(--muted); padding:4px 6px; line-height:1; transition:color .2s; }
.btn-pw-toggle:hover { color:var(--rose-deep); }
.auth-forgot { text-align:center; margin-top:.5rem; }
.btn-forgot { background:none; border:none; font-size:.75rem; color:var(--muted); cursor:pointer; font-family:'DM Sans',sans-serif; text-decoration:underline; text-underline-offset:3px; transition:color .2s; padding:4px; }
.btn-forgot:hover { color:var(--rose-deep); }
.auth-footer { text-align:center; margin-top:1rem; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.68rem; color:var(--muted); direction:rtl; letter-spacing:.02em; }

/* ══════════════════ EDITION SELECT ══════════════════ */
#edition-select {
  position:relative; z-index:10; flex:1; display:none; flex-direction:column;
  align-items:center; padding:4rem 1.5rem 3rem; text-align:center;
  background:linear-gradient(160deg,#3A4832 0%,#2E3C26 60%,#243020 100%);
  overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
#edition-select.on { display:flex; animation:screenIn .3s ease; }

.es-user-bar { position:fixed; top:0; right:50%; transform:translateX(50%); width:100%; max-width:480px; padding:10px 14px; display:flex; align-items:center; justify-content:flex-end; gap:8px; z-index:20; background:linear-gradient(to bottom,rgba(42,52,32,.96) 70%,transparent); }
.es-user-email { font-family:'DM Sans',sans-serif; font-size:.68rem; color:rgba(255,255,255,.45); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout-small { display:flex; align-items:center; gap:5px; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:50px; padding:5px 12px; font-family:'DM Sans',sans-serif; font-size:.7rem; color:rgba(255,255,255,.45); cursor:pointer; transition:all .2s; white-space:nowrap; }
.btn-logout-small:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.3); }

.es-ornament { font-size:3rem; margin-bottom:.5rem; animation:pulse 2.5s ease-in-out infinite; }
.es-brand { font-family:'DM Sans',sans-serif; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:.6rem; }
.es-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,7vw,2.8rem); font-weight:500; line-height:1.15; color:rgba(255,255,255,.92); margin-bottom:.3rem; }
.es-title em { color:#D4A890; font-style:italic; }
.es-subtitle { font-family:'DM Sans',sans-serif; font-size:.9rem; color:rgba(255,255,255,.48); margin-bottom:.6rem; }

/* Lifetime counter */
.es-lifetime { font-family:'DM Sans',sans-serif; font-size:.68rem; color:#D4A890; font-weight:600; letter-spacing:.04em; margin-bottom:1.8rem; display:none; }

/* Fav open button */
.btn-fav-open { display:none; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:50px; padding:6px 14px; font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600; color:rgba(255,255,255,.75); cursor:pointer; transition:all .2s; margin-bottom:1.8rem; }
.btn-fav-open:hover { background:rgba(255,255,255,.14); color:white; }

/* Edition groups */
.edition-group { width:100%; max-width:380px; margin-bottom:1.6rem; }
.eg-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:0 2px; }
.eg-icon { font-size:1rem; }
.eg-label { font-family:'DM Sans',sans-serif; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.45); }
.eg-divider { flex:1; height:1px; background:linear-gradient(to right,rgba(255,255,255,.15),transparent); margin-left:4px; }
.eg-price { font-size:.62rem; font-weight:700; color:var(--rose-deep); background:var(--blush-deep); border-radius:50px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
.ec-free-badge { position:absolute; top:8px; right:8px; z-index:2; font-size:.58rem; font-weight:800; letter-spacing:.04em; background:#2EBE8A; color:white; border-radius:50px; padding:2px 7px; text-transform:uppercase; }

/* Edition grid */
.editions-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.editions-grid.solo { grid-template-columns:1fr; max-width:180px; margin:0 auto; }
.editions-grid.trio .edition-card:last-child { grid-column:1/-1; max-width:180px; justify-self:center; width:100%; }
.edition-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 12px 14px; border-radius:16px; border:2px solid rgba(184,92,74,.12); border-top:3px solid var(--accent); background:white; cursor:pointer; transition:all .28s; box-shadow:0 2px 8px rgba(184,92,74,.06); }
.edition-card:hover { border-color:var(--accent); transform:translateY(-5px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.edition-card:active { transform:scale(.97); }
/* Gloss shine overlay */
.edition-card::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); pointer-events:none; z-index:1; }
/* Edition gradient color identities — light backgrounds (dark text) */
.edition-card.talking     { --accent:#D4A574; background:linear-gradient(135deg,#F5C5BB 0%,#E8A090 100%); border-color:rgba(232,160,144,.35); }
.edition-card.engaged     { --accent:#C9A84C; background:linear-gradient(135deg,#F0C87A 0%,#D4956A 100%); border-color:rgba(212,149,106,.35); }
.edition-card.stillus     { --accent:#A85A82; background:linear-gradient(135deg,#E8B87A 0%,#C47850 100%); border-color:rgba(196,120,80,.35); }
.edition-card.ourfuture   { --accent:#4A7A9B; background:linear-gradient(135deg,#2C3E6A 0%,#1A2A4A 100%); border-color:rgba(74,122,155,.35); color:white; }
.edition-card.friends     { --accent:#DFB840; background:linear-gradient(135deg,#F5D878 0%,#DFB840 100%); border-color:rgba(223,184,64,.35); }
.edition-card.loveyourself { --accent:#C87AAA; background:linear-gradient(135deg,#F0C0C8 0%,#D09098 100%); border-color:rgba(208,144,152,.35); }
.edition-card.whoknows    { --accent:#D4A044; background:linear-gradient(135deg,#F0C878 0%,#D09840 100%); border-color:rgba(208,152,64,.35); }
/* Edition gradient color identities — dark backgrounds (white text) */
.edition-card.couples     { --accent:#D9877A; background:linear-gradient(135deg,#E8A090 0%,#C96B58 100%); border-color:rgba(201,107,88,.35); color:white; }
.edition-card.married     { --accent:#8B3A5C; background:linear-gradient(135deg,#C49AAA 0%,#8E5F72 100%); border-color:rgba(142,95,114,.35); color:white; }
.edition-card.secretfiles { --accent:#5B8DB8; background:linear-gradient(135deg,#5A8A9A 0%,#2E5F6E 100%); border-color:rgba(46,95,110,.35); color:white; }
.edition-card.family      { --accent:#D4845A; background:linear-gradient(135deg,#8AAA7A 0%,#5A7A4A 100%); border-color:rgba(90,122,74,.35); color:white; }
.edition-card.betweenus   { --accent:#7B8DC8; background:linear-gradient(135deg,#4A6A8A 0%,#2A3E5A 100%); border-color:rgba(42,62,90,.35); color:white; }
.edition-card.overthinkers { --accent:#6B7FBB; background:linear-gradient(135deg,#5A5A8A 0%,#3A3A6A 100%); border-color:rgba(58,58,106,.35); color:white; }
.edition-card.healing     { --accent:#5B9B7A; background:linear-gradient(135deg,#C0A8D0 0%,#9078A8 100%); border-color:rgba(144,120,168,.35); color:white; }
.edition-card.solo        { --accent:#9B7BBB; background:linear-gradient(135deg,#78A8A8 0%,#4A7878 100%); border-color:rgba(74,120,120,.35); color:white; }
.edition-card.masks       { --accent:#B8864A; background:linear-gradient(135deg,#707080 0%,#404050 100%); border-color:rgba(64,64,80,.35); color:white; }
.edition-card.future      { --accent:#6A9FBB; background:linear-gradient(135deg,#78A8D0 0%,#4878A8 100%); border-color:rgba(72,120,168,.35); color:white; }
.edition-card.redflags    { --accent:#CC3A3A; background:linear-gradient(135deg,#D07070 0%,#A83838 100%); border-color:rgba(168,56,56,.35); color:white; }
.edition-card.girlsnight  { --accent:#D4679A; background:linear-gradient(135deg,#E890A8 0%,#C05878 100%); border-color:rgba(192,88,120,.35); color:white; }
.edition-card.firstimpact { --accent:#7BAABB; background:linear-gradient(135deg,#90A8C0 0%,#607888 100%); border-color:rgba(96,120,136,.35); color:white; }
.edition-card.artist      { --accent:#B87AB8; background:linear-gradient(135deg,#8878C0 0%,#504888 100%); border-color:rgba(80,72,136,.35); color:white; }
.edition-card.spicy            { --accent:#DC143C; background:linear-gradient(135deg,#C84848 0%,#881818 100%); border-color:rgba(136,24,24,.35); color:white; }
.edition-card.loveaftermidnight { --accent:#9B59B6; background:linear-gradient(135deg,#2C0A3A 0%,#1A0828 60%,#0D0515 100%); border-color:rgba(155,89,182,.35); color:white; }
.edition-card.free50      { --accent:#2EBE8A; background:linear-gradient(135deg,#D4EDDA 0%,#A8D8B8 100%); border-color:rgba(46,190,138,.3); border-top-color:#2EBE8A; }
.edition-card-free        { width:100%; max-width:280px; }
.edition-card-free .ec-label { font-style:italic; }
/* Free Taster 5-card grid */
.editions-grid.last-center .edition-card:last-child { grid-column:1/-1; max-width:180px; justify-self:center; }
.edition-card.free50-cat  { --accent:#2EBE8A; border-top-color:var(--accent); }
.edition-card.f50-fun     { --accent:#E8704A; background:linear-gradient(135deg,#FDEBD0 0%,#FAD5A8 100%); border-color:rgba(232,112,74,.25); }
.edition-card.f50-love    { --accent:#E87AA0; background:linear-gradient(135deg,#FCE4EC 0%,#F8BBD0 100%); border-color:rgba(232,122,160,.25); }
.edition-card.f50-deep    { --accent:#7B6BB8; background:linear-gradient(135deg,#EDE7F6 0%,#D1C4E9 100%); border-color:rgba(123,107,184,.25); }
.edition-card.f50-group   { --accent:#4A90A4; background:linear-gradient(135deg,#E0F4F8 0%,#B2DFDB 100%); border-color:rgba(74,144,164,.25); }
.edition-card.f50-final   { --accent:#7B8DC8; background:linear-gradient(135deg,#1A1A2E 0%,#16213E 100%); border-color:rgba(123,141,200,.3); color:white; }
/* White text for name/label/progress on dark-background cards */
.edition-card.couples .ec-name, .edition-card.married .ec-name, .edition-card.secretfiles .ec-name,
.edition-card.family .ec-name, .edition-card.betweenus .ec-name, .edition-card.overthinkers .ec-name,
.edition-card.healing .ec-name, .edition-card.solo .ec-name, .edition-card.masks .ec-name,
.edition-card.future .ec-name, .edition-card.redflags .ec-name, .edition-card.girlsnight .ec-name,
.edition-card.firstimpact .ec-name, .edition-card.artist .ec-name, .edition-card.spicy .ec-name,
.edition-card.loveaftermidnight .ec-name, .edition-card.f50-final .ec-name, .edition-card.ourfuture .ec-name { color:#fff; }
.edition-card.couples .ec-label, .edition-card.married .ec-label, .edition-card.secretfiles .ec-label,
.edition-card.family .ec-label, .edition-card.betweenus .ec-label, .edition-card.overthinkers .ec-label,
.edition-card.healing .ec-label, .edition-card.solo .ec-label, .edition-card.masks .ec-label,
.edition-card.future .ec-label, .edition-card.redflags .ec-label, .edition-card.girlsnight .ec-label,
.edition-card.firstimpact .ec-label, .edition-card.artist .ec-label, .edition-card.spicy .ec-label,
.edition-card.loveaftermidnight .ec-label, .edition-card.f50-final .ec-label { color:rgba(255,255,255,.78); }
.edition-card.couples .ec-progress, .edition-card.married .ec-progress, .edition-card.secretfiles .ec-progress,
.edition-card.family .ec-progress, .edition-card.betweenus .ec-progress, .edition-card.overthinkers .ec-progress,
.edition-card.healing .ec-progress, .edition-card.solo .ec-progress, .edition-card.masks .ec-progress,
.edition-card.future .ec-progress, .edition-card.redflags .ec-progress, .edition-card.girlsnight .ec-progress,
.edition-card.firstimpact .ec-progress, .edition-card.artist .ec-progress, .edition-card.spicy .ec-progress,
.edition-card.loveaftermidnight .ec-progress, .edition-card.f50-final .ec-progress { color:rgba(255,255,255,.65); }
.edition-card.couples .ec-progress.has-data, .edition-card.married .ec-progress.has-data, .edition-card.secretfiles .ec-progress.has-data,
.edition-card.family .ec-progress.has-data, .edition-card.betweenus .ec-progress.has-data, .edition-card.overthinkers .ec-progress.has-data,
.edition-card.healing .ec-progress.has-data, .edition-card.solo .ec-progress.has-data, .edition-card.masks .ec-progress.has-data,
.edition-card.future .ec-progress.has-data, .edition-card.redflags .ec-progress.has-data, .edition-card.girlsnight .ec-progress.has-data,
.edition-card.firstimpact .ec-progress.has-data, .edition-card.artist .ec-progress.has-data, .edition-card.spicy .ec-progress.has-data,
.edition-card.loveaftermidnight .ec-progress.has-data, .edition-card.f50-final .ec-progress.has-data { color:#fff; }
/* Icon circle: lighter tint on dark cards */
.edition-card.couples .ec-icon-wrap::before, .edition-card.married .ec-icon-wrap::before,
.edition-card.secretfiles .ec-icon-wrap::before, .edition-card.family .ec-icon-wrap::before,
.edition-card.betweenus .ec-icon-wrap::before, .edition-card.overthinkers .ec-icon-wrap::before,
.edition-card.healing .ec-icon-wrap::before, .edition-card.solo .ec-icon-wrap::before,
.edition-card.masks .ec-icon-wrap::before, .edition-card.future .ec-icon-wrap::before,
.edition-card.redflags .ec-icon-wrap::before, .edition-card.girlsnight .ec-icon-wrap::before,
.edition-card.firstimpact .ec-icon-wrap::before, .edition-card.artist .ec-icon-wrap::before,
.edition-card.spicy .ec-icon-wrap::before,
.edition-card.loveaftermidnight .ec-icon-wrap::before { background:rgba(255,255,255,.2); }
.ec-icon-wrap { position:relative; width:58px; height:58px; display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; z-index:2; }
.ec-icon-wrap::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent); opacity:.12; transition:opacity .28s; }
.edition-card:hover .ec-icon-wrap::before { opacity:.28; }
.ec-icon { font-size:2rem; position:relative; z-index:1; }
.ec-icon-img { width:58px; height:58px; object-fit:contain; position:relative; z-index:1; }
.ec-name  { font-family:'Playfair Display',serif; font-size:1rem; font-weight:500; color:var(--ink); margin-bottom:.15rem; position:relative; z-index:2; }
.ec-label { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:500; position:relative; z-index:2; }
.ec-progress { position:relative; z-index:2; }
.ec-progress { font-family:'DM Sans',sans-serif; font-size:.58rem; font-weight:600; color:var(--muted); margin-top:4px; min-height:.8em; }
.ec-progress.has-data { color:var(--rose-deep); }

/* Quick Continue banner */
.quick-continue { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 16px; width:100%; max-width:380px; cursor:pointer; transition:all .22s; margin-bottom:1rem; text-align:left; }
.quick-continue:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.2); }
.quick-continue:active { transform:scale(.98); }
.qc-play { font-size:1rem; color:#D4A890; flex-shrink:0; }
.qc-text { flex:1; min-width:0; }
.qc-edition { font-family:'Playfair Display',serif; font-size:.9rem; color:rgba(255,255,255,.88); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qc-detail { font-family:'DM Sans',sans-serif; font-size:.62rem; color:rgba(255,255,255,.45); margin-top:1px; }
.qc-arrow { color:#D4A890; font-size:1rem; flex-shrink:0; }

/* Landing progress bar */
/* ══════════════════ LANDING ══════════════════ */
#landing {
  position:relative; z-index:10; flex:1; display:none; flex-direction:column;
  align-items:stretch;
  background:linear-gradient(160deg,#3A4832 0%,#2E3C26 60%,#243020 100%);
}
#landing.on { display:flex; animation:screenIn .3s ease; }

/* ── Topbar — mirrors game topbar ── */
.land-topbar {
  flex-shrink:0; display:flex; align-items:center; padding:10px 14px;
  background:rgba(0,0,0,.22); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.land-topbar-logo { font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:700; color:rgba(255,255,255,.85); }
.land-topbar-center { flex:1; text-align:center; font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.65); padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.land-topbar-back { background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:50px; padding:5px 13px; font-family:'DM Sans',sans-serif; font-size:.74rem; color:rgba(255,255,255,.65); cursor:pointer; transition:all .2s; white-space:nowrap; }
.land-topbar-back:hover { background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.35); }

/* ── Hero card area — fills remaining height ── */
.land-hero { flex:1; display:flex; align-items:center; justify-content:center; padding:14px 20px 8px; overflow:hidden; }
.land-hero-card {
  width:100%; max-width:340px;
  background:#D8C0BA;
  border-radius:24px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  border:1px solid rgba(30,26,20,.1);
  box-shadow:0 2px 0 rgba(255,255,255,.18),0 18px 52px rgba(0,0,0,.42),0 2px 10px rgba(0,0,0,.28);
  clip-path:inset(0 round 24px);
  animation:cardSlideIn .42s cubic-bezier(.34,1.56,.64,1);
}
.land-hero-card::before {
  content:''; position:absolute; inset:10px; border:1px solid rgba(30,26,20,.2);
  border-radius:14px; pointer-events:none; z-index:4;
}
.land-hero-card::after {
  content:''; position:absolute; inset:0;
  background:inherit; filter:url(#card-grain);
  z-index:0; pointer-events:none;
}
/* top badge showing edition badge text */
.land-hero-badge {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(30,26,20,.1); border-radius:20px; padding:3px 14px; z-index:6;
  white-space:nowrap;
}
.land-hero-badge-text { font-family:'DM Sans',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(30,26,20,.75); }

/* card body — centered content */
.land-hero-body {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:52px 28px 18px; text-align:center; gap:7px; position:relative; z-index:1;
}
.land-hero-icon { font-size:3.2rem; animation:pulse 2.5s ease-in-out infinite; margin-bottom:2px; }
.land-hero-name { font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:500; color:#1E1A14; line-height:1.2; }
.land-hero-name em { font-style:italic; color:rgba(30,26,20,.6); }
.land-hero-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.95rem; font-weight:700; color:rgba(30,26,20,.55); direction:rtl; }
.land-hero-dots { color:rgba(30,26,20,.25); font-size:.45rem; letter-spacing:5px; margin:3px 0; }
.land-hero-tagline { font-family:'Playfair Display',serif; font-style:italic; font-size:.84rem; color:rgba(30,26,20,.58); line-height:1.75; max-width:230px; }

/* card footer — total questions */
.land-hero-footer {
  padding:9px 20px 13px; display:flex; align-items:center; justify-content:center;
  border-top:1px solid rgba(30,26,20,.1); position:relative; z-index:1;
}
.land-hero-total { font-family:'DM Sans',sans-serif; font-size:.6rem; font-weight:600; color:rgba(30,26,20,.4); letter-spacing:.1em; text-transform:uppercase; }

/* ── Category pills — horizontal scroll ── */
.land-cat-section { flex-shrink:0; padding:8px 16px 4px; }
.land-cats { display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.land-cats::-webkit-scrollbar { display:none; }
.land-cat-pill { flex-shrink:0; padding:6px 14px; border-radius:20px; font-size:.76rem; font-family:'DM Sans',sans-serif; font-weight:600; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); }

/* ── Progress bar ── */
.land-progress-bar-wrap { flex-shrink:0; padding:6px 20px 0; display:none; }
.land-progress-label { font-family:'DM Sans',sans-serif; font-size:.64rem; color:rgba(255,255,255,.4); margin-bottom:5px; text-align:center; }
.land-progress-track { height:4px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }
.land-progress-fill { height:100%; background:linear-gradient(to right,var(--rose),var(--rose-deep)); border-radius:4px; transition:width .5s ease; }

/* ── Bottom action area ── */
.land-bottom { flex-shrink:0; padding:10px 16px 20px; display:flex; flex-direction:column; gap:8px; }
.btn-enter { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 36px; border:none; border-radius:50px; background:linear-gradient(135deg,var(--rose-deep) 0%,var(--terracotta) 100%); color:white; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1rem; font-weight:600; cursor:pointer; transition:all .25s; box-shadow:0 6px 24px rgba(184,92,74,.4); letter-spacing:.04em; width:100%; }
.btn-enter:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(184,92,74,.5); }
.btn-enter:active { transform:scale(.97); }
.land-progress-chip { display:none; font-family:'DM Sans',sans-serif; font-size:.72rem; color:rgba(255,255,255,.7); font-weight:600; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:4px 14px; text-align:center; }
.land-bottom-row { display:flex; align-items:center; justify-content:center; gap:20px; }
.btn-start-fresh { display:none; font-size:.74rem; color:rgba(255,255,255,.38); cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; text-decoration:underline; text-underline-offset:3px; }
.btn-start-fresh:hover { color:rgba(255,255,255,.7); }
.edition-badge { display:none; } /* now shown inside card badge — hide legacy element */

/* ══════════════════ GAME ══════════════════ */
#game { display:none; flex-direction:column; height:100%; position:relative; z-index:10; background:#3A4832; }
#game.on { display:flex; animation:screenIn .3s ease; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 10px; background:rgba(0,0,0,.28); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.topbar-logo { font-family:'Playfair Display',serif; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:5px; }
.topbar-edition { font-family:'DM Sans',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); }
.topbar-actions { display:flex; gap:5px; align-items:center; }
.topbar-back { background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:50px; padding:4px 8px; font-size:.72rem; font-family:'DM Sans',sans-serif; color:rgba(255,255,255,.65); cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.topbar-back:hover { background:rgba(255,255,255,.12); color:white; }
.topbar-home-icon { width:24px; height:24px; object-fit:contain; display:block; }
.btn-sound { background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:50px; padding:5px 9px; font-size:.78rem; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.65); line-height:1; }
.btn-sound:hover { background:rgba(255,255,255,.12); }
.btn-challenges { background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:50px; padding:5px 9px; font-size:.78rem; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.65); line-height:1; }
.btn-challenges:hover { background:rgba(255,255,255,.12); }
.btn-challenges.off { opacity:.35; }
#game.challenges-hidden .card-challenge { display:none; }

/* Cat strip with bidirectional fade */
.cat-strip-wrap { position:relative; flex-shrink:0; }
.cat-strip-wrap::before { content:''; position:absolute; left:0; top:0; bottom:0; width:20px; background:linear-gradient(to left,transparent,#3A4832); pointer-events:none; z-index:1; }
.cat-strip-wrap::after  { content:''; position:absolute; right:0; top:0; bottom:0; width:40px; background:linear-gradient(to right,transparent,#3A4832); pointer-events:none; z-index:1; }
.cat-strip { display:flex; gap:6px; padding:10px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cat-strip::-webkit-scrollbar { display:none; }
.cat-btn { flex-shrink:0; display:flex; align-items:center; gap:4px; padding:7px 12px; border-radius:20px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.88); cursor:pointer; transition:all .22s; white-space:nowrap; }
.cat-btn:hover { border-color:rgba(255,255,255,.45); color:white; }
.cat-btn.active { background:rgba(255,255,255,.92); border-color:transparent; color:#1E1A14; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.cat-progress { font-size:.5rem; font-weight:700; opacity:.65; font-family:'DM Sans',sans-serif; }
.cat-btn.active .cat-progress { opacity:1; color:rgba(30,26,20,.55); }
.cat-btn.cat-done { border-color:rgba(60,160,100,.35); }
.cat-btn.cat-done .cat-progress { color:#3CA064; }
.cat-btn.active.cat-done { background:linear-gradient(135deg,#2E7D52,#48A96E); }
/* Progress fill bar */
.cat-pb { width:100%; height:3px; background:rgba(0,0,0,.1); border-radius:2px; margin-top:3px; overflow:hidden; }
.cat-btn.active .cat-pb { background:rgba(255,255,255,.25); }
.cat-pb-fill { height:100%; width:0%; border-radius:2px; transition:width .35s ease; background:#4CAF50; }
.cat-pb-fill.pb-mid  { background:linear-gradient(90deg,#FFC107,#FF9800); }
.cat-pb-fill.pb-high { background:linear-gradient(90deg,#FF5722,#E91E63); }
.cat-pb-fill.pb-done { background:#3CA064; }
/* Topbar streak badge */
.topbar-center { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; overflow:hidden; }
.topbar-streak {
  font-size:.65rem; font-weight:700; color:#E65100;
  background:rgba(255,152,0,.13); border-radius:50px;
  padding:2px 8px; white-space:nowrap; letter-spacing:.02em;
}
.topbar-streak.streak-hot { background:rgba(255,87,34,.15); color:#BF360C; }

/* Card stage */
.card-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 16px; overflow:hidden; user-select:none; }
.q-card-wrap { width:100%; max-width:380px; perspective:1000px; }
.q-card { width:100%; min-height:min(520px,calc(100dvh - 270px)); border-radius:24px; position:relative; overflow:hidden; display:flex; flex-direction:column; cursor:grab; animation:cardSlideIn .42s cubic-bezier(.34,1.56,.64,1); box-shadow:0 20px 60px rgba(184,92,74,.22),0 4px 16px rgba(184,92,74,.12); transition:box-shadow .15s; clip-path:inset(0 round 24px); }
.q-card:active { cursor:grabbing; }
.q-card.swipe-left  { animation:swipeLeft  .28s ease-in forwards; }
.q-card.swipe-right { animation:swipeRight .28s ease-in forwards; }
@keyframes cardSlideIn { 0%{opacity:0;transform:translateY(40px) rotate(-1.5deg) scale(.93)} 100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@keyframes swipeLeft  { to{opacity:0;transform:translateX(-110%) rotate(-8deg)} }
@keyframes swipeRight { to{opacity:0;transform:translateX(110%) rotate(8deg)} }

/* ══ WHODESIGN VINTAGE PARCHMENT CARDS ══ */
/* 🌷 Blush Rose */
.card-soft,.card-desires,.card-wklove,.card-selflove,.card-stillus { background:#D8C0BA; }
/* 🔥 Warm Sand */
.card-real,.card-power,.card-redflag,.card-masks,.card-whathurt { background:#D4BCA0; }
/* 🌙 Slate Blue */
.card-between,.card-secrets,.card-mindvheart,.card-overthink,.card-dreamlife,.card-wkmind,.card-firstlook,.card-artblock { background:#B8C8D8; }
/* 🌿 Sage */
.card-future,.card-healing,.card-softness,.card-greenflag,.card-success { background:#B8C8BC; }
/* 💜 Dusty Lavender */
.card-psych,.card-chaos,.card-insecure,.card-whoami,.card-unmask,.card-seeing,.card-softenergy,.card-futurefear,.card-perception,.card-feminine,.card-opinions { background:#C4BAD0; }
/* 🍂 Ochre */
.card-promise,.card-family,.card-wkmemory,.card-challenges { background:#D4C4A0; }
/* ⚡ Dusty Mauve */
.card-spicy,.card-artist,.card-artdreams,.card-girlhood,.card-forevergrls { background:#C8B4D0; }
/* 🔮 Special */
.card-friendship { background:#C0B8D4; }
.card-upsell     { background:#C8C0B0; }

/* ── Vintage card grain + shadow ── */
/* Grain lives in ::before so it textures only the background — text stays above */
.q-card { box-shadow:0 2px 0 rgba(255,255,255,.18),0 16px 48px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.25); }
.q-card::before {
  content:''; position:absolute; inset:0;
  background:inherit; filter:url(#card-grain);
  z-index:0; pointer-events:none;
}

/* ── Card frame + corner ornaments ── */
.card-vintage-frame {
  position:absolute; inset:10px; border:1px solid rgba(30,26,20,.22);
  border-radius:14px; pointer-events:none; z-index:4;
}
.card-corner {
  position:absolute; z-index:5; font-size:10px; line-height:1;
  color:rgba(30,26,20,.3); pointer-events:none; user-select:none;
}
.card-corner.cc-tl { top:6px;  left:7px; }
.card-corner.cc-tr { top:6px;  right:7px; }
.card-corner.cc-bl { bottom:6px; left:7px; }
.card-corner.cc-br { bottom:6px; right:7px; }

/* ── Illustration zone ── */
.card-illus-zone {
  height:155px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:.9rem; flex-shrink:0;
}
.card-illus-sym {
  position:relative; z-index:2; font-size:4.2rem; line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.1));
  margin-bottom:.4rem;
}
.card-sp {
  position:absolute; color:rgba(30,26,20,.25); pointer-events:none;
  font-style:normal; user-select:none; line-height:1;
}
.card-sp.s1 { top:16%; left:9%;  font-size:.6rem; }
.card-sp.s2 { top:10%; right:10%; font-size:.85rem; }
.card-sp.s3 { top:38%; left:6%;  font-size:.45rem; }
.card-sp.s4 { top:35%; right:7%; font-size:.55rem; }
.card-sp.s5 { top:55%; left:12%; font-size:.5rem; letter-spacing:.1em; }
.card-sp.s6 { top:52%; right:12%; font-size:.42rem; }

/* ── Card badge ── */
.card-badge {
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:rgba(30,26,20,.1); border-radius:20px;
  padding:3px 12px; display:flex; align-items:center; gap:5px; z-index:6;
}
.badge-sym { font-size:.8rem; }
.cat-sym-img { width:1.2em; height:1.2em; object-fit:contain; vertical-align:middle; }
.cat-sym-img.illus-sym-img { width:64px; height:64px; object-fit:contain; display:block; }
.cat-sym-img.badge-sym-img { width:16px; height:16px; object-fit:contain; vertical-align:middle; }
.cat-sym-img.done-icon-img { width:48px; height:48px; object-fit:contain; display:block; margin:0 auto; }
.badge-en  { font-family:'DM Sans',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(30,26,20,.88); }
.badge-ar  { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.65rem; font-weight:600; color:rgba(30,26,20,.85); direction:rtl; }

/* ── Card body — Arabic first ── */
.card-body {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:10px 22px 58px; text-align:center;
  position:relative; z-index:1; gap:10px;
}
.card-q-ar {
  font-family:'IBM Plex Sans Arabic',sans-serif; font-size:clamp(.98rem,3vw,1.15rem);
  font-weight:800; line-height:1.55; color:#1E1A14; direction:rtl;
}
.card-divider { width:28px; height:1px; background:rgba(30,26,20,.2); flex-shrink:0; }
.card-q-en {
  font-family:'Playfair Display',serif; font-size:clamp(.95rem,3vw,1.1rem);
  font-weight:400; font-style:italic; line-height:1.6; color:#1E1A14;
}

/* ── Card footer ── */
.card-stat {
  font-family:'DM Sans',sans-serif; font-size:.62rem; color:rgba(30,26,20,.45);
  text-align:center; padding:0 1rem; margin-top:auto; opacity:0;
  transition:opacity .4s ease .2s;
}
.card-stat.visible { opacity:1; }
.card-footer { position:absolute; bottom:12px; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between; z-index:6; }
.card-num  { font-family:'DM Sans',sans-serif; font-size:.6rem; color:rgba(30,26,20,.65); font-weight:600; }
.card-footer-actions { display:flex; gap:5px; align-items:center; }
.btn-card-action {
  background:rgba(30,26,20,.08); border:1px solid rgba(30,26,20,.15);
  border-radius:50%; width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; font-size:.8rem; cursor:pointer;
  color:rgba(30,26,20,.6); transition:all .2s; line-height:1;
}
.btn-card-action:hover { background:rgba(30,26,20,.15); }
.btn-card-action.fav-active { background:rgba(180,30,60,.15); border-color:rgba(180,30,60,.3); color:#8B1A2A; }

/* Challenge + choices blocks — adapted for light parchment */
.card-choices { margin-top:8px; padding:7px 9px; background:rgba(30,26,20,.08); border-radius:12px; border:1px solid rgba(30,26,20,.12); display:flex; flex-direction:column; gap:4px; }
.choice-opt  { font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:600; color:rgba(30,26,20,.85); background:rgba(30,26,20,.08); border-radius:50px; padding:3px 10px; white-space:nowrap; }
.choice-or   { font-size:.6rem; color:rgba(30,26,20,.4); font-style:italic; }
.choice-opt-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.66rem; font-weight:500; color:rgba(30,26,20,.65); }
.card-challenge { margin-top:8px; padding:7px 11px; background:rgba(30,26,20,.08); border-radius:12px; border:1px solid rgba(30,26,20,.12); text-align:center; }
.card-challenge-icon { font-size:.82rem; display:block; margin-bottom:2px; }
.card-challenge-en { font-family:'DM Sans',sans-serif; font-size:.7rem; color:rgba(30,26,20,.8); font-weight:600; line-height:1.5; margin-bottom:2px; }
.card-challenge-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.68rem; color:rgba(30,26,20,.6); direction:rtl; line-height:1.6; }

/* Upsell card overrides */
.btn-upsell-cta { background:rgba(30,26,20,.75); color:white; border:none; border-radius:50px; padding:.5rem 1.4rem; font-size:.8rem; font-weight:700; cursor:pointer; letter-spacing:.04em; white-space:nowrap; }
.btn-upsell-cta:hover { background:rgba(30,26,20,.9); }

/* choice-row layout helpers */
.choice-row { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.choice-row-ar { direction:rtl; }

/* Welcome card */
.welcome-card { width:100%; max-width:380px; min-height:280px; border-radius:24px; background:linear-gradient(160deg,rgba(248,236,212,0.85),rgba(238,218,188,0.7)); border:1px solid rgba(184,92,74,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:1.5rem; box-shadow:0 4px 24px rgba(184,92,74,.1); }
.welcome-card h3 { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:500; color:var(--ink); }
.welcome-card p  { font-size:.82rem; color:var(--muted); line-height:1.65; max-width:240px; }
.welcome-card .wc-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.8rem; color:var(--gold); direction:rtl; }
.sineya-tray { width:185px; height:185px; flex-shrink:0; margin-bottom:.25rem; }
.sineya-svg  { width:100%; height:100%; filter:drop-shadow(0 7px 22px rgba(184,92,74,.38)); }

/* All-done card */
.done-card { width:100%; max-width:380px; min-height:320px; border-radius:24px; background:linear-gradient(155deg,#1A2A1A 0%,#2E5E3A 50%,#3D8A4D 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:2rem; box-shadow:0 20px 60px rgba(30,100,60,.3); animation:cardSlideIn .42s cubic-bezier(.34,1.56,.64,1); }
.done-card-icon { font-size:3rem; }
.done-card-title { font-family:'Playfair Display',serif; font-size:1.3rem; color:white; font-weight:500; }
.done-card-sub { font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.7; }
.done-card-sub strong { color:rgba(255,255,255,.92); }
.done-card-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.78rem; color:rgba(180,220,190,.7); direction:rtl; }
.btn-done-continue { padding:12px 28px; border:1px solid rgba(255,255,255,.3); border-radius:50px; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); color:white; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.95rem; font-weight:600; cursor:pointer; transition:all .2s; margin-top:4px; }
.btn-done-continue:hover { background:rgba(255,255,255,.28); }
.upsell-body { text-align:center; }
.upsell-lock-icon { font-size:2.4rem; margin-bottom:.6rem; display:block; }
.btn-upsell-cta { background:linear-gradient(135deg,#B85C4A,#D4837A); color:white; border:none; border-radius:50px; padding:.5rem 1.4rem; font-size:.8rem; font-weight:700; cursor:pointer; letter-spacing:.04em; white-space:nowrap; }
.btn-upsell-cta:hover { opacity:.88; }

/* Bottom bar */
.bottom-bar { flex-shrink:0; padding:10px 14px 16px; background:rgba(0,0,0,.28); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.07); }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:10px; }
.stat-cell { background:rgba(255,255,255,.1); border-radius:10px; padding:7px 4px; text-align:center; border:1px solid rgba(255,255,255,.1); }
.stat-n { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:500; color:var(--rose-deep); }
.stat-l { font-size:.52rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-family:'DM Sans',sans-serif; margin-top:1px; }
.draw-row { display:flex; gap:8px; }
.btn-skip { width:54px; flex-shrink:0; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:1rem; cursor:pointer; transition:all .2s; }
.btn-skip-label { font-size:.5rem; color:rgba(255,255,255,.55); font-family:'DM Sans',sans-serif; text-transform:uppercase; letter-spacing:.06em; }
.btn-skip:hover:not(:disabled) { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
.btn-skip:disabled { opacity:.3; cursor:not-allowed; }
.btn-draw { flex:1; border:none; border-radius:14px; padding:14px 10px; background:linear-gradient(135deg,var(--rose-deep),var(--terracotta)); color:white; font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1rem; font-weight:600; cursor:pointer; transition:all .22s; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 16px rgba(184,92,74,.3); letter-spacing:.03em; }
.btn-draw:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(184,92,74,.4); }
.btn-draw:active { transform:scale(.97); }

/* ══ THEME TOGGLE ══ */
.btn-theme { background:transparent; border:1px solid rgba(184,92,74,.2); border-radius:50px; padding:5px 9px; font-size:.78rem; cursor:pointer; transition:all .2s; color:var(--muted); line-height:1; }
.btn-theme:hover { background:var(--blush); }

/* Force dark (manual override) — olive palette */
body.force-dark .auth-card { background:rgba(30,40,22,.92) !important; border-color:rgba(212,168,144,.15) !important; }
body.force-dark .auth-field input { background:rgba(20,28,14,.8) !important; color:rgba(255,255,255,.9) !important; border-color:rgba(212,168,144,.2) !important; }
body.force-dark .auth-field input:focus { background:rgba(20,28,14,.95) !important; }
body.force-dark .cat-btn { background:rgba(255,255,255,.08) !important; color:rgba(255,255,255,.85) !important; }
body.force-dark .cat-strip-wrap::after { background:linear-gradient(to right,transparent,#3A4832) !important; }
body.force-dark .confirm-sheet,body.force-dark .summary-sheet { background:linear-gradient(170deg,#2A3420,#1E2818) !important; }
body.force-dark .fav-inner { background:linear-gradient(170deg,#2A3420,#1E2818) !important; }
body.force-dark .fav-item { background:rgba(255,255,255,.06) !important; border-color:rgba(212,168,144,.1) !important; }
body.force-dark .land-cat-pill { background:rgba(255,255,255,.08) !important; border-color:rgba(212,168,144,.12) !important; }
body.force-dark .land-progress-chip { background:rgba(255,255,255,.08) !important; }
body.force-dark .quick-continue { background:rgba(255,255,255,.06) !important; }

/* Force light (override dark media query) */
body.force-light .auth-card { background:white !important; border-color:rgba(184,92,74,.1) !important; }
body.force-light .auth-field input { background:var(--warm-white) !important; }
body.force-light .welcome-card { background:linear-gradient(160deg,rgba(253,248,244,.92),rgba(247,237,233,.88)) !important; }
body.force-light .stat-cell,body.force-light .btn-skip { background:var(--warm-white) !important; }
body.force-light .confirm-sheet,body.force-light .summary-sheet { background:white !important; }
body.force-light .btn-confirm-cancel { background:white !important; }
body.force-light .land-cat-pill,body.force-light .cat-btn { background:white !important; }
body.force-light .fav-inner { background:white !important; }
body.force-light .fav-item { background:var(--blush) !important; }
body.force-light .land-progress-chip,body.force-light .quick-continue { background:var(--blush) !important; }

/* ══ PAIR SCREEN ══ */
#pair-screen { display:none; flex-direction:column; align-items:center; justify-content:center;
  min-height:100dvh; background:linear-gradient(160deg,#3A4832 0%,#2E3C26 60%,#243020 100%); padding:2rem; }
#pair-screen.on { display:flex; animation:screenIn .3s ease; }
.pair-wrap { width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.pair-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
  color:rgba(255,255,255,.92); text-align:center; line-height:1.3; margin-bottom:0; }
.pair-title-ar { font-size:.9rem; color:rgba(255,255,255,.45); display:block; margin-top:.2rem; }
.pair-subtitle { font-size:.8rem; color:rgba(255,255,255,.45); text-align:center; line-height:1.5; margin-bottom:.4rem; }
.pair-subtitle-ar { display:block; margin-top:.2rem; direction:rtl; }
.pair-step-block { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:1.1rem 1rem; display:flex; flex-direction:column; gap:.7rem; }
.pair-step-label { font-size:.72rem; font-weight:700; color:rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:.5rem; }
.pair-step-num { width:18px; height:18px; border-radius:50%; background:var(--rose-deep);
  color:white; font-size:.65rem; font-weight:800; display:inline-flex; align-items:center;
  justify-content:center; flex-shrink:0; }
.pair-code-box { width:100%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:1.4rem;
  font-size:2rem; font-weight:800; letter-spacing:.3em; text-align:center;
  color:rgba(255,255,255,.92); font-family:'Courier New',monospace; user-select:all; cursor:copy; }
.btn-pair-share { width:100%; background:rgba(255,255,255,.1); color:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.2); border-radius:50px;
  padding:.9rem; font-size:1rem; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-pair-share:hover { background:rgba(255,255,255,.18); }
.pair-or { color:rgba(255,255,255,.35); font-size:.82rem; letter-spacing:.05em; }
.pair-code-input { width:100%; background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.1); border-radius:16px;
  padding:1.1rem; font-size:1.9rem; font-weight:800; letter-spacing:.28em; text-align:center;
  color:rgba(255,255,255,.92); font-family:'Courier New',monospace; outline:none; transition:border-color .2s; }
.pair-code-input:focus { border-color:var(--rose); }
.pair-error { color:#FF8080; font-size:.82rem; min-height:1.2em; text-align:center; }
.btn-pair-join { width:100%; background:var(--rose-deep); border:none; border-radius:50px;
  padding:.85rem; font-size:1rem; font-weight:600; color:white; cursor:pointer; transition:all .2s; box-shadow:0 6px 20px rgba(184,92,74,.4); }
.btn-pair-join:hover { opacity:.88; }
.btn-pair-later { background:none; border:none; color:rgba(255,255,255,.35); font-size:.88rem; cursor:pointer;
  padding:.5rem; text-decoration:underline; text-underline-offset:3px; }
.pair-chip { display:none; align-items:center; gap:4px; font-size:.72rem; color:var(--muted);
  background:var(--blush); border-radius:50px; padding:3px 10px; }
.btn-pair-manage { display:inline-flex; align-items:center; gap:4px; font-size:.72rem;
  font-weight:600; color:var(--muted); background:var(--blush); border:1px solid rgba(184,92,74,.2);
  border-radius:50px; padding:4px 11px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.btn-pair-manage:hover { background:var(--blush-deep); color:var(--ink); }
.btn-pair-manage.is-paired { color:var(--ink-soft); background:var(--nude); border-color:rgba(184,92,74,.35); }
.btn-unpair { background:none; border:1.5px solid rgba(180,60,60,.3); border-radius:50px;
  color:#CC5555; font-size:.82rem; padding:.45rem 1.2rem; cursor:pointer; margin-top:.3rem;
  transition:all .2s; }
.btn-unpair:hover { background:rgba(180,60,60,.08); }

/* ══ UNLOCK MODAL ══ */
/* ── Locked category tabs ── */
.cat-btn.cat-locked {
  opacity:1;
  background: repeating-linear-gradient(
    135deg,
    var(--blush-deep) 0px, var(--blush-deep) 6px,
    var(--blush) 6px, var(--blush) 12px
  );
  color: var(--muted);
  border: 1.5px dashed var(--muted);
  position: relative;
  overflow: hidden;
}
.cat-btn.cat-locked::after {
  content: 'PREMIUM';
  position: absolute;
  top: 3px; right: 5px;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
  opacity: .7;
}

/* ── Unlock modal ── */
#unlock-modal { position:fixed; inset:0; z-index:510;
  display:none; align-items:flex-end; justify-content:center; }
.btn-card-share { opacity:.75; }
.btn-card-share:hover { opacity:1; }
#unlock-modal.open { display:flex; animation:screenIn .25s ease; }
.unlock-backdrop { position:absolute; inset:0; background:rgba(28,14,10,.6); backdrop-filter:blur(6px); }
.unlock-sheet {
  position:relative; z-index:1;
  width:100%; max-width:480px;
  background: linear-gradient(170deg, #2A3420 0%, #1E2818 100%);
  border-radius:28px 28px 0 0;
  padding:2.2rem 1.8rem 2.8rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  border-top: 3px solid rgba(212,168,144,.25);
  max-height:92dvh; overflow-y:auto;
}
.unlock-close-btn {
  position:absolute; top:14px; right:14px;
  background:var(--blush-deep); border:none; border-radius:50%;
  width:36px; height:36px; font-size:1rem; cursor:pointer;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
/* Preview cards */
.unlock-preview {
  width:100%; display:flex; flex-direction:column; gap:.6rem;
}
.unlock-preview-card {
  width:100%; border-radius:16px; padding:1.1rem 1.2rem;
  position:relative; overflow:hidden; min-height:80px;
}
.unlock-preview-text { position:relative; z-index:1; }
.unlock-preview-en {
  font-family:'Playfair Display',serif;
  font-size:.95rem; font-weight:600; color:var(--ink);
  filter:blur(4px); user-select:none;
}
.unlock-preview-ar {
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.85rem; color:var(--ink-soft); margin-top:.3rem;
  filter:blur(4px); user-select:none;
}
.unlock-preview-blur {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 20%, rgba(255,255,255,.6) 100%);
}
.unlock-preview-label {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:.75rem; font-weight:700; color:var(--ink);
  background:white; border-radius:50px; padding:3px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.12); white-space:nowrap; z-index:2;
}
/* Offer section */
.unlock-offer { width:100%; display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; }
.unlock-crown {
  animation: pulse 2s ease-in-out infinite;
}
.unlock-crown-img {
  width:80px; height:80px; object-fit:contain;
  filter: drop-shadow(0 4px 14px rgba(180,100,20,.4));
  display:block; margin:0 auto;
}
.unlock-title {
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:1.3rem; font-weight:900;
  color:rgba(255,255,255,.92); text-align:center; line-height:1.3;
}
.unlock-title span { display:block; font-size:.85rem; color:rgba(255,255,255,.48); font-family:'DM Sans',sans-serif; font-weight:400; margin-top:.2rem; }
.unlock-price-row { display:flex; align-items:center; gap:.6rem; }
.unlock-price { font-size:1.1rem; font-weight:800; color:#D4A890; }
.unlock-once { font-size:.75rem; color:rgba(255,255,255,.4); }
.unlock-perks {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.4rem;
}
.unlock-perk {
  display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; color:rgba(255,255,255,.72); font-weight:500;
}
.unlock-perk-icon { font-size:.9rem; flex-shrink:0; color:#D4A890; }
.unlock-social-proof {
  font-size:.75rem; color:rgba(255,255,255,.38); font-style:italic;
}
/* Promo input section */
.unlock-promo-section {
  width:100%; flex-direction:column; align-items:center; gap:.7rem;
}
/* Action buttons */
.unlock-actions {
  width:100%; flex-direction:column; gap:.6rem;
}
.btn-unlock-learn {
  width:100%; background:transparent;
  border:1.5px solid rgba(212,168,144,.3); border-radius:50px;
  padding:.85rem; font-size:.9rem; font-weight:600;
  color:rgba(212,168,144,.8); cursor:pointer; transition:background .2s;
}
.btn-unlock-learn:hover { background:rgba(212,168,144,.1); }
.promo-input {
  width:100%; background:rgba(0,0,0,.3);
  border:2px solid rgba(255,255,255,.12); border-radius:14px;
  padding:1rem; font-size:1.15rem; font-weight:700;
  letter-spacing:.2em; text-align:center;
  color:rgba(255,255,255,.92); font-family:'Courier New',monospace;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.promo-input::placeholder { color:rgba(255,255,255,.3); }
.promo-input:focus {
  border-color:rgba(212,168,144,.5);
  box-shadow: 0 0 0 4px rgba(212,168,144,.1);
}
.btn-activate {
  width:100%;
  background: linear-gradient(135deg, var(--rose-deep) 0%, var(--terracotta) 100%);
  color:white; border:none; border-radius:50px;
  padding:1rem; font-size:1rem; font-weight:700;
  cursor:pointer; letter-spacing:.03em;
  box-shadow: 0 6px 20px rgba(184,92,74,.45);
  transition: transform .15s, box-shadow .15s;
}
.btn-activate:hover { box-shadow:0 6px 22px rgba(184,92,74,.4); transform:translateY(-1px); }
.btn-activate:active { transform:scale(.97); box-shadow:none; }

/* ══ SESSION SUMMARY ══ */
#session-summary { position:fixed; inset:0; z-index:410; background:rgba(28,14,10,.45); display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(4px); }
#session-summary.open { display:flex; }
.summary-sheet { width:100%; max-width:480px; background:linear-gradient(170deg,#2A3420 0%,#1E2818 100%); border-top:3px solid rgba(212,168,144,.2); border-radius:24px 24px 0 0; padding:2rem 1.5rem 2.5rem; text-align:center; animation:slideUp .32s cubic-bezier(.34,1.56,.64,1); }
.summary-icon { font-size:2.5rem; margin-bottom:.6rem; }
.summary-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.15rem; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:.3rem; }
.summary-msg { font-size:.78rem; color:rgba(255,255,255,.45); margin-bottom:1.4rem; line-height:1.6; }
.summary-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1.6rem; }
.sum-stat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 8px; }
.sum-stat-n { font-family:'Playfair Display',serif; font-size:1.6rem; color:#D4A890; font-weight:600; }
.sum-stat-l { font-size:.58rem; font-family:'DM Sans',sans-serif; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.btn-summary-ok { width:100%; padding:14px; border:none; border-radius:14px; background:linear-gradient(135deg,var(--rose-deep),var(--terracotta)); color:white; font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(184,92,74,.35); }

/* ══ RANDOM EDITION ══ */
.btn-random { display:flex; align-items:center; gap:7px; background:transparent; border:1.5px dashed rgba(255,255,255,.2); border-radius:50px; padding:8px 18px; font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.45); cursor:pointer; transition:all .22s; margin-bottom:1.4rem; }
.btn-random:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.38); transform:scale(1.04); }
.btn-random:active { transform:scale(.97); }

/* ══ CONFIRM HOME MODAL ══ */
#confirm-home { position:fixed; inset:0; z-index:400; background:rgba(28,14,10,.45); display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(4px); }
#confirm-home.open { display:flex; }
.confirm-sheet { width:100%; max-width:480px; background:linear-gradient(170deg,#2A3420 0%,#1E2818 100%); border-top:3px solid rgba(212,168,144,.2); border-radius:24px 24px 0 0; padding:2rem 1.5rem 2.5rem; text-align:center; animation:slideUp .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.confirm-icon  { font-size:2.5rem; margin-bottom:.75rem; }
.confirm-home-icon { width:56px; height:56px; object-fit:contain; display:block; margin:0 auto; }
.confirm-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.15rem; font-weight:700; color:rgba(255,255,255,.92); margin-bottom:.4rem; }
.confirm-sub   { font-size:.8rem; color:rgba(255,255,255,.45); margin-bottom:1.5rem; line-height:1.6; }
.confirm-btns  { display:flex; gap:10px; }
.btn-confirm-cancel { flex:1; padding:13px; cursor:pointer; transition:all .2s; border:1.5px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.06); font-family:'DM Sans',sans-serif; font-size:.9rem; color:rgba(255,255,255,.6); }
.btn-confirm-cancel:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.9); }
.btn-confirm-ok { flex:1; padding:13px; cursor:pointer; border:none; border-radius:14px; background:linear-gradient(135deg,var(--rose-deep),var(--terracotta)); color:white; font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:600; box-shadow:0 4px 14px rgba(184,92,74,.35); }

/* ══ FAVOURITES SHEET ══ */
#fav-sheet { position:fixed; inset:0; z-index:450; display:none; flex-direction:column; justify-content:flex-end; }
#fav-sheet.open { display:flex; }
.fav-backdrop { position:absolute; inset:0; background:rgba(28,14,10,.45); backdrop-filter:blur(4px); }
.fav-inner { position:relative; background:linear-gradient(170deg,#2A3420 0%,#1E2818 100%); border-top:3px solid rgba(212,168,144,.2); border-radius:24px 24px 0 0; max-height:82vh; display:flex; flex-direction:column; animation:slideUp .32s cubic-bezier(.34,1.56,.64,1); }
.fav-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.fav-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.1rem; font-weight:700; color:rgba(255,255,255,.88); }
.fav-close { background:rgba(255,255,255,.1); border:none; border-radius:50%; width:32px; height:32px; font-size:1rem; cursor:pointer; color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; }
.fav-list { overflow-y:auto; padding:1rem 1.5rem; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.fav-item { background:rgba(255,255,255,.07); border-radius:14px; padding:12px 14px; position:relative; border:1px solid rgba(255,255,255,.08); }
.fav-item-meta { font-family:'DM Sans',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#D4A890; margin-bottom:5px; }
.fav-item-q-en { font-family:'Playfair Display',serif; font-size:.9rem; color:rgba(255,255,255,.88); line-height:1.55; margin-bottom:4px; }
.fav-item-q-ar { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.78rem; color:rgba(255,255,255,.5); direction:rtl; line-height:1.6; }
.fav-item-del { position:absolute; top:10px; right:10px; background:transparent; border:none; font-size:.85rem; color:rgba(255,255,255,.35); cursor:pointer; padding:2px 6px; border-radius:6px; transition:all .2s; }
.fav-item-del:hover { background:rgba(184,92,74,.2); color:#D4A890; }
.fav-empty { padding:2rem 1.5rem; text-align:center; font-family:'DM Sans',sans-serif; font-size:.85rem; color:rgba(255,255,255,.38); line-height:1.7; display:none; }

/* TOAST */
.toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--nude); padding:8px 18px; border-radius:50px; font-family:'DM Sans',sans-serif; font-size:.78rem; opacity:0; transition:all .3s; z-index:999; white-space:nowrap; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ══ SESSION RESUME PROMPT ══ */
#resume-sheet { position:fixed; inset:0; z-index:500; display:none; flex-direction:column; justify-content:flex-end; }
#resume-sheet.open { display:flex; }
.resume-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.resume-inner {
  position:relative; background:var(--warm-white);
  border-top:2px solid var(--gold); border-radius:24px 24px 0 0;
  padding:1.8rem 1.5rem 2.2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  animation:slideUp .32s cubic-bezier(.34,1.56,.64,1);
}
.resume-dismiss {
  position:absolute; top:.9rem; right:1rem; background:none; border:none;
  color:var(--muted); font-size:1rem; cursor:pointer; padding:.3rem;
}
.resume-icon    { font-size:2rem; line-height:1; }
.resume-title   { font-size:1rem; font-weight:700; color:var(--ink); font-family:'Playfair Display',serif; }
.resume-edition { font-size:.95rem; font-weight:600; color:var(--rose-deep); }
.resume-detail  { font-size:.78rem; color:var(--ink-soft); font-family:'DM Sans',sans-serif; }
.resume-when    { font-size:.72rem; color:var(--muted); font-family:'DM Sans',sans-serif; margin-bottom:.4rem; }
.resume-cta {
  width:100%; max-width:320px; padding:.85rem; border-radius:50px; border:none; cursor:pointer;
  background:var(--rose-deep); color:#fff; font-size:.95rem; font-weight:700;
  font-family:'DM Sans',sans-serif; transition:opacity .15s;
}
.resume-cta:hover { opacity:.88; }

/* ══ STREAK MILESTONE ══ */
#streak-milestone { display:none; position:fixed; inset:0; z-index:1200; align-items:center; justify-content:center; }
#streak-milestone.open { display:flex; }
.sm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.sm-sheet {
  position:relative; z-index:1; background:var(--warm-white); border:1px solid var(--gold);
  border-radius:28px; padding:2.8rem 2rem 2.2rem; text-align:center;
  width:min(340px, 90vw); overflow:hidden;
  animation:smPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes smPop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
.sm-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.sm-particle {
  position:absolute; width:8px; height:8px; border-radius:50%;
  animation:smFall var(--dur) var(--delay) ease-in both;
}
@keyframes smFall {
  0%   { transform:translateY(-20px) rotate(0deg);   opacity:1; }
  100% { transform:translateY(420px) rotate(720deg); opacity:0; }
}
.sm-icon  { font-size:3.2rem; line-height:1; margin-bottom:.4rem; }
.sm-days  { font-size:4rem; font-weight:900; color:var(--rose-deep); line-height:1; font-family:'Playfair Display',serif; }
.sm-label { font-size:.78rem; color:var(--muted); font-family:'DM Sans',sans-serif; margin-bottom:.8rem; letter-spacing:.03em; }
.sm-title { font-size:1.35rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; font-family:'Playfair Display',serif; }
.sm-msg   { font-size:.85rem; color:var(--ink-soft); font-family:'DM Sans',sans-serif; margin-bottom:1.6rem; line-height:1.55; }
.sm-btn   {
  width:100%; padding:.85rem; border-radius:50px; border:none; cursor:pointer;
  background:var(--rose-deep); color:#fff; font-size:.95rem; font-weight:700;
  font-family:'DM Sans',sans-serif; letter-spacing:.02em;
  transition:opacity .15s;
}
.sm-btn:hover { opacity:.88; }

/* LIVE SESSION BANNER */
.live-banner { display:flex; align-items:center; gap:8px; justify-content:center;
  background:var(--blush-deep); padding:6px 16px; font-family:'DM Sans',sans-serif;
  font-size:.75rem; font-weight:600; color:var(--ink-soft); letter-spacing:.03em; }
.live-dot { width:8px; height:8px; background:#E05555; border-radius:50%;
  display:inline-block; animation:pulse 1.4s ease-in-out infinite; flex-shrink:0; }
/* Viewer mode — draw button disabled */
.btn-draw:disabled { opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* ── Live answer bar ── */
#live-answer-bar { display:flex; flex-direction:column; gap:.5rem;
  padding:.6rem 1rem; background:var(--blush-deep); border-bottom:1px solid rgba(0,0,0,.06); }
.live-ans-my { display:flex; gap:.5rem; align-items:flex-end; }
.live-ans-input { flex:1; border:1.5px solid rgba(196,97,74,.25); border-radius:12px;
  background:var(--cream); padding:.5rem .75rem; font-size:.85rem; font-family:'DM Sans',sans-serif;
  color:var(--ink); resize:none; outline:none; }
.live-ans-input:focus { border-color:var(--rose-deep); }
.live-ans-send { background:var(--rose-deep); color:white; border:none; border-radius:10px;
  padding:.5rem .85rem; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.live-ans-send:disabled { opacity:.5; cursor:not-allowed; }
.live-ans-partner { background:rgba(255,255,255,.6); border-radius:12px; padding:.5rem .75rem;
  font-size:.82rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.live-ans-partner-label { font-weight:600; color:var(--ink-soft); flex:1; }
.live-ans-reveal { background:var(--ink); color:white; border:none; border-radius:8px;
  padding:.3rem .7rem; font-size:.75rem; font-weight:600; cursor:pointer; }
.live-ans-partner-text { width:100%; font-style:italic; color:var(--ink); line-height:1.5;
  padding-top:.3rem; border-top:1px solid rgba(0,0,0,.08); }

/* ── Live invitation modal ── */
.live-invite-sheet { text-align:center; }
.invite-pulse { font-size:2.8rem; animation:pulse 1.2s ease-in-out infinite; margin-bottom:.5rem; }
.invite-title { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700;
  color:var(--ink); margin-bottom:.3rem; }
.invite-edition { font-size:1rem; font-weight:600; color:var(--rose-deep); margin-bottom:.4rem; }
.invite-sub { font-size:.82rem; color:var(--muted); margin-bottom:1.2rem; }
.invite-accept { width:100%; margin-bottom:.5rem; }

/* PLAY TOGETHER BUTTONS */
.btn-play-together { width:100%; background:linear-gradient(135deg,var(--rose-deep),#8B3A2A);
  color:white; border:none; border-radius:50px; padding:.9rem; font-size:.95rem;
  font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(184,92,74,.35); transition:transform .15s; }
.btn-play-together:active { transform:scale(.97); }
.btn-join-partner { width:100%; background:var(--blush-deep); border:2px solid var(--rose);
  color:var(--ink); border-radius:50px; padding:.85rem; font-size:.9rem;
  font-weight:600; cursor:pointer; transition:all .2s; }
.btn-join-partner:hover { background:var(--nude); }

/* TOGETHER EDITION PICKER */
.modal-overlay { position:fixed; inset:0; z-index:600; background:rgba(28,14,10,.6);
  display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(6px); }
.together-sheet { width:100%; max-width:480px; background:var(--cream);
  border-radius:24px 24px 0 0; padding:1.8rem 1.4rem 2.4rem;
  display:flex; flex-direction:column; gap:1rem; max-height:80dvh; }
.together-title { font-family:'Playfair Display',serif; font-size:1.2rem;
  font-weight:700; color:var(--ink); text-align:center; }
.together-edition-list { display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  overflow-y:auto; max-height:55dvh; padding-right:2px; }
.together-ed-btn { background:var(--blush); border:1.5px solid var(--blush-deep);
  border-radius:14px; padding:.75rem .5rem; font-size:.82rem; font-weight:600;
  color:var(--ink); cursor:pointer; text-align:center; transition:all .2s; }
.together-ed-btn:hover { background:var(--blush-deep); }

/* ══ ONBOARDING ══ */
#onboard-screen {
  position:fixed; inset:0; z-index:200;
  background:#3A4832;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  overflow:hidden;
}
.onboard-slides {
  display:flex; flex-direction:row;
  width:100%; height:100%;
  transform:translateX(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.onboard-slide {
  min-width:100%; width:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2.5rem 2rem 5rem;
  gap:1.2rem; text-align:center;
  flex-shrink:0;
}
.onboard-emoji {
  font-size:4rem; line-height:1;
  margin-bottom:.4rem;
}
.onboard-title {
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:1.6rem; font-weight:900;
  color:rgba(255,255,255,.92); line-height:1.35;
}
.onboard-title-ar {
  display:block;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:1.2rem; font-weight:700;
  color:rgba(255,255,255,.55);
  margin-top:.25rem;
}
.onboard-body {
  font-family:'DM Sans', sans-serif;
  font-size:.9rem; color:rgba(255,255,255,.55);
  line-height:1.6; max-width:320px;
}
.btn-onboard-next {
  width:100%; max-width:320px;
  margin-top:.8rem;
  background:var(--rose-deep); color:#fff;
  border:none; border-radius:50px;
  padding:.95rem 1.5rem;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size:1rem; font-weight:700;
  cursor:pointer; transition:background .2s;
  box-shadow:0 6px 20px rgba(184,92,74,.4);
}
.btn-onboard-next:hover { background:var(--rose); }
.onboard-dots {
  position:absolute; bottom:1.6rem;
  display:flex; gap:.5rem;
  align-items:center; justify-content:center;
}
.onboard-dots .dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.22); transition:all .25s;
}
.onboard-dots .dot.active {
  background:rgba(255,255,255,.85); width:22px; border-radius:4px;
}
.btn-onboard-skip {
  position:absolute; top:1rem; right:1rem; z-index:10;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none;
  font-size:1.1rem; color:rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.btn-onboard-skip:hover { background:rgba(255,255,255,.18); }
.onboard-visual {
  font-size:5rem; line-height:1; margin-bottom:.2rem;
}
/* Per-slide backgrounds — all dark olive variants */
.ob-slide-1 { background:linear-gradient(160deg,#3A4832 0%,#2E3C26 100%); }
.ob-slide-2 { background:linear-gradient(160deg,#323E2A 0%,#263220 100%); }
.ob-slide-3 { background:linear-gradient(160deg,#2E3828 0%,#243020 100%); }
/* Edition mini-cards (slide 2) */
.onboard-edition-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.6rem; width:100%; max-width:320px;
  margin:.4rem 0;
}
.onboard-edition-card {
  background:rgba(255,255,255,.08); border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  padding:.7rem .4rem;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; color:rgba(255,255,255,.78);
}
.onboard-edition-card span:first-child { font-size:1.6rem; }
/* Path boxes (slide 3) */
.onboard-path-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.8rem; width:100%; max-width:320px;
  margin:.4rem 0;
}
.onboard-path-box {
  background:rgba(255,255,255,.07); border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  padding:1.1rem .8rem;
  display:flex; flex-direction:column; align-items:center;
  gap:.4rem; text-align:center;
}
.onboard-path-icon { font-size:2rem; }
.onboard-path-label {
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.85rem; font-weight:700; color:rgba(255,255,255,.88);
}
.onboard-path-desc {
  font-size:.72rem; color:rgba(255,255,255,.45); line-height:1.4;
}

/* ══ EDITION QUIZ ══ */
#quiz-screen {
  position:fixed; inset:0; z-index:190;
  background:linear-gradient(160deg,#3A4832 0%,#2E3C26 60%,#243020 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  overflow-y:auto; padding:5rem 1.2rem 3rem;
}
.quiz-wrap {
  width:100%; max-width:420px;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.quiz-title {
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:1.6rem; font-weight:900;
  color:rgba(255,255,255,.92); text-align:center; line-height:1.3;
}
.quiz-title-ar {
  display:block; font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:1rem; font-weight:700; color:rgba(255,255,255,.5); margin-top:.2rem;
}
.quiz-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.75rem; width:100%;
}
.quiz-card {
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.1);
  border-radius:18px; padding:1.1rem .8rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  cursor:pointer; transition:all .2s; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.quiz-card:active { transform:scale(.97); }
.quiz-card.selected {
  border-color:var(--rose-deep);
  background:rgba(184,92,74,.2); box-shadow:0 4px 16px rgba(184,92,74,.3);
}
.quiz-card-icon { font-size:2.2rem; }
.quiz-card-label { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.82); }
/* Recommendation panel */
.quiz-rec { width:100%; animation:fadeUp .3s ease; }
.quiz-rec-label {
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:.6rem;
}
.quiz-rec-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:1.4rem; display:flex; flex-direction:column;
  align-items:center; gap:.5rem; text-align:center;
}
.quiz-rec-badges { display:flex; gap:.4rem; justify-content:center; min-height:1.4rem; }
.quiz-rec-badge {
  font-size:.65rem; font-weight:800; border-radius:50px;
  padding:3px 10px; letter-spacing:.03em;
}
.quiz-rec-badge.free    { background:rgba(30,190,138,.15); color:#4AFFC0; }
.quiz-rec-badge.popular { background:rgba(255,200,80,.12); color:#FFCC55; }
.quiz-rec-icon { font-size:3rem; }
.quiz-rec-name {
  font-family:'Playfair Display',serif;
  font-size:1.2rem; font-weight:700; color:rgba(255,255,255,.88);
}
.quiz-rec-tagline { font-size:.83rem; color:rgba(255,255,255,.45); line-height:1.5; max-width:240px; }
.quiz-rec-cta {
  width:100%; background:var(--rose-deep); color:#fff;
  border:none; border-radius:50px; padding:.9rem 1.5rem;
  font-size:1rem; font-weight:600; cursor:pointer;
  margin-top:.6rem; transition:background .2s;
  box-shadow:0 6px 20px rgba(184,92,74,.4);
}
.quiz-rec-cta:hover { background:var(--rose); }
.quiz-browse-all {
  width:100%; background:none; border:none;
  color:var(--muted); font-size:.85rem; cursor:pointer;
  padding:.7rem; margin-top:.2rem; transition:color .2s;
}
.quiz-browse-all:hover { color:var(--ink); }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ PAIRING CHIP (edition-select) ══ */
.pairing-chip-bar {
  width:100%; max-width:480px;
  padding:0 14px 10px;
  position:relative;
}
.pairing-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blush-deep); border-radius:50px;
  padding:8px 14px; cursor:pointer;
  transition:background .2s; min-height:44px;
  border:1.5px solid rgba(184,92,74,.15);
  max-width:100%;
}
.pairing-chip:hover { background:var(--blush); }
.pairing-chip.is-paired {
  background:#E8F4FD; border-color:rgba(30,130,200,.2);
}
.pairing-chip-icon { font-size:1.1rem; flex-shrink:0; }
.pairing-chip-text {
  display:flex; flex-direction:column; gap:1px;
  overflow:hidden; min-width:0;
}
.pairing-chip-main {
  font-size:.8rem; font-weight:700; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pairing-chip-sub {
  font-size:.68rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pairing-chip-caret {
  font-size:1.1rem; color:var(--muted); flex-shrink:0; margin-left:2px;
}
.pairing-menu {
  position:absolute; top:calc(100% - 4px); left:14px;
  background:white; border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  min-width:200px; z-index:30;
  overflow:hidden; border:1px solid rgba(0,0,0,.06);
}
.pairing-menu-item {
  padding:13px 16px; font-size:.85rem; font-weight:500;
  color:var(--ink); cursor:pointer; transition:background .15s;
}
.pairing-menu-item:hover { background:var(--blush-deep); }
.pairing-menu-danger { color:#CC3A3A; }
.pairing-menu-danger:hover { background:#FFF0F0; }

/* ══ PROFILE SHEET ══ */
#profile-sheet { position:fixed; inset:0; z-index:400; display:none; align-items:flex-end; justify-content:center; }
#profile-sheet.open { display:flex; }
.profile-inner { width:100%; max-width:480px; background:linear-gradient(170deg,#2A3420 0%,#1E2818 100%); border-top:3px solid rgba(212,168,144,.2); border-radius:24px 24px 0 0;
  padding:1.6rem 1.4rem 3rem; display:flex; flex-direction:column; align-items:center;
  gap:.9rem; max-height:90dvh; overflow-y:auto; }
.profile-header { width:100%; display:flex; align-items:center; justify-content:space-between; }
.profile-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.1rem; font-weight:700; color:rgba(255,255,255,.88); }
.profile-avatar { font-size:3rem; background:rgba(255,255,255,.1); border-radius:50%;
  width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-top:.4rem; }
.profile-name { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; color:rgba(255,255,255,.88); }
.profile-email { font-size:.78rem; color:rgba(255,255,255,.4); }
.profile-stats-grid { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.3rem 0; }
.profile-stat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:.8rem .5rem; text-align:center; }
.profile-stat-val { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:#D4A890; }
.profile-stat-label { font-size:.65rem; color:rgba(255,255,255,.38); margin-top:2px; line-height:1.3; }
.profile-row { width:100%; display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:.75rem 1rem;
  font-size:.85rem; font-weight:500; color:rgba(255,255,255,.7); }
.profile-btn-upgrade { width:100%; background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  color:white; border:none; border-radius:50px; padding:.9rem; font-size:.92rem;
  font-weight:700; cursor:pointer; box-shadow:0 4px 18px rgba(184,92,74,.4); }
.profile-divider { width:100%; border:none; border-top:1px solid rgba(255,255,255,.08); }
.profile-name-label { font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.4); align-self:flex-start; }
.profile-name-edit { width:100%; display:flex; flex-direction:column; gap:.5rem; }
.profile-name-input { width:100%; background:rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.1);
  border-radius:12px; padding:.75rem 1rem; font-size:.95rem; color:rgba(255,255,255,.88);
  font-family:'DM Sans',sans-serif; outline:none; transition:border-color .2s; }
.profile-name-input:focus { border-color:var(--rose); }
.profile-btn-save { align-self:flex-end; background:var(--rose-deep); color:white;
  border:none; border-radius:50px; padding:.5rem 1.4rem; font-size:.85rem;
  font-weight:600; cursor:pointer; }
.profile-signout { width:100%; text-align:center; margin-top:.2rem; color:rgba(255,255,255,.35) !important; }

/* ══ CARD FLIP ANIMATION ══ */
@keyframes cardFlip {
  0%   { transform: perspective(600px) rotateY(90deg) scale(.92); opacity:0; }
  60%  { transform: perspective(600px) rotateY(-8deg)  scale(1.02); opacity:1; }
  100% { transform: perspective(600px) rotateY(0deg)   scale(1);    opacity:1; }
}
.q-card-wrap { animation: cardFlip .38s cubic-bezier(.25,.46,.45,.94) both; }

/* ══ BROWSE / LIBRARY MODE ══ */
.btn-browse-mode {
  width:100%; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.22);
  border-radius:50px; padding:.75rem 1.4rem; font-size:.88rem;
  font-weight:600; color:rgba(255,255,255,.78); cursor:pointer; margin-top:.3rem;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-browse-mode:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); color:white; }
.btn-browse-mode:active { transform:scale(.98); }
.browse-empty {
  grid-column: 1/-1; display:flex; flex-direction:column; align-items:center;
  gap:.8rem; padding:3rem 1rem; text-align:center;
  color:var(--muted); font-size:.9rem; line-height:1.6;
}
.browse-empty span:first-child { font-size:2rem; }

.browse-sheet-overlay {
  position:fixed; inset:0; z-index:500; display:none;
  flex-direction:column; justify-content:flex-end;
}
.browse-backdrop {
  position:absolute; inset:0; background:rgba(28,14,10,.45);
  backdrop-filter:blur(4px);
}
.browse-inner {
  position:relative; background:linear-gradient(170deg,#2A3420 0%,#1E2818 100%);
  border-top:3px solid rgba(212,168,144,.2); border-radius:24px 24px 0 0;
  max-height:88vh; display:flex; flex-direction:column;
  animation:slideUp .32s cubic-bezier(.34,1.56,.64,1);
}
.browse-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 1.5rem 1rem; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.browse-title { font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.1rem; font-weight:700; color:rgba(255,255,255,.88); }
.browse-close {
  background:rgba(255,255,255,.08); border:none; font-size:1.2rem; color:rgba(255,255,255,.55);
  cursor:pointer; padding:.3rem .6rem; border-radius:50px;
  transition:background .15s;
}
.browse-close:hover { background:rgba(255,255,255,.16); }
.browse-filter-bar {
  display:flex; gap:.4rem; overflow-x:auto; padding:.6rem 1rem;
  scrollbar-width:none; flex-shrink:0;
}
.browse-filter-bar::-webkit-scrollbar { display:none; }
.browse-chip {
  flex-shrink:0; border:none; border-radius:50px; padding:.4rem .9rem;
  font-size:.78rem; font-weight:600; background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65); cursor:pointer; transition:background .15s, color .15s;
}
.browse-chip.active { background:var(--rose-deep); color:white; }
.browse-shuffle-chip { padding:.4rem .7rem; }
.browse-meta {
  padding:.2rem 1rem .5rem; font-size:.78rem; color:rgba(255,255,255,.4);
  flex-shrink:0;
}
.browse-grid {
  display:grid; grid-template-columns:1fr; gap:.7rem;
  padding:0 1rem 2rem; overflow-y:auto; flex:1;
}
.browse-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1rem; position:relative;
  transition:box-shadow .2s;
}
.browse-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.25); border-color:rgba(255,255,255,.14); }
.browse-card.browse-locked { opacity:.5; pointer-events:none; }
.browse-card-top {
  display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem;
}
.browse-num {
  font-size:.68rem; font-weight:700; color:rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums; flex-shrink:0;
}
.browse-tag {
  font-size:.68rem; font-weight:700; border-radius:50px; padding:2px 9px;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.72); flex-shrink:0;
}
.browse-lock { margin-left:auto; font-size:.9rem; }
.browse-q-en {
  font-size:.92rem; font-weight:600; color:rgba(255,255,255,.88);
  margin-bottom:.3rem; padding-right:2rem; line-height:1.4;
}
.browse-q-ar {
  font-size:.85rem; color:rgba(255,255,255,.72); text-align:right;
  direction:rtl; margin-bottom:.4rem;
  font-family:'IBM Plex Sans Arabic',sans-serif;
}
.browse-ans {
  font-size:.72rem; color:#D4A890; font-weight:600;
  margin-top:.2rem; margin-bottom:.3rem;
  font-style:italic;
}
.browse-fav {
  position:absolute; bottom:.65rem; right:.8rem;
  background:none; border:none; font-size:1.1rem;
  cursor:pointer; color:rgba(255,255,255,.4); line-height:1;
  padding:.2rem;
}
.browse-fav.fav-active { color:#FF8080; }

/* ══ CATEGORY TAB COLOR ACCENTS ══ */
.cat-btn[data-cat*="soft"]     { border-bottom:2px solid #E8B4AC; }
.cat-btn[data-cat*="real"]     { border-bottom:2px solid #8B2A1A; }
.cat-btn[data-cat*="psych"]    { border-bottom:2px solid #7B6FA0; }
.cat-btn[data-cat*="between"]  { border-bottom:2px solid #2A4A8A; }
.cat-btn[data-cat*="power"]    { border-bottom:2px solid #3A2A1A; }
.cat-btn[data-cat*="desires"]  { border-bottom:2px solid #9B4090; }
.cat-btn[data-cat*="future"]   { border-bottom:2px solid #1A7060; }
.cat-btn[data-cat*="friend"]   { border-bottom:2px solid #5A4ABA; }
.cat-btn[data-cat*="spicy"]    { border-bottom:2px solid #CC1A3A; }
.cat-btn[data-cat*="lam"]      { border-bottom:2px solid #8B2A6A; }
.cat-btn[data-cat*="deep"]     { border-bottom:2px solid #4A2870; }
.cat-btn[data-cat*="midnight"] { border-bottom:2px solid #1A1A4A; }
.cat-btn[data-cat*="secret"]   { border-bottom:2px solid #4A3010; }
.cat-btn[data-cat*="chaos"]    { border-bottom:2px solid #8B4A1A; }
.cat-btn[data-cat*="fam"]      { border-bottom:2px solid #2A6A4A; }
.cat-btn[data-cat*="solo"]     { border-bottom:2px solid #5A3A2A; }
.cat-btn[data-cat*="cringe"]   { border-bottom:2px solid #6B1B47; }
.cat-btn[data-cat*="heal"]     { border-bottom:2px solid #3DB89F; }
.cat-btn[data-cat*="mask"]     { border-bottom:2px solid #4A3058; }
.cat-btn[data-cat*="distance"] { border-bottom:2px solid #2A4060; }
.cat-btn[data-cat*="stayed"]   { border-bottom:2px solid #6B3A1A; }
.cat-btn[data-cat*="unsaid"]   { border-bottom:2px solid #5A2A68; }
.cat-btn[data-cat*="pattern"]  { border-bottom:2px solid #3A5A2A; }
.cat-btn[data-cat*="choos"]    { border-bottom:2px solid #8B3A1A; }
.cat-btn[data-cat*="final"]    { border-bottom:2px solid #B85C4A; }
.cat-btn[data-cat*="promise"]  { border-bottom:2px solid #C4614A; }
.cat-btn[data-cat*="home"]     { border-bottom:2px solid #6B4A3A; }
.cat-btn[data-cat*="debate"]   { border-bottom:2px solid #3A2A5A; }
.cat-btn[data-cat*="laugh"]    { border-bottom:2px solid #8B6A2A; }
.cat-btn[data-cat*="likely"]   { border-bottom:2px solid #4A7A3A; }
.cat-btn[data-cat*="energy"]   { border-bottom:2px solid #5A3A8B; }
.cat-btn[data-cat*="feels"]    { border-bottom:2px solid #8B4A5A; }
.cat-btn[data-cat*="night"]    { border-bottom:2px solid #1A2A5A; }
.cat-btn[data-cat*="forever"]  { border-bottom:2px solid #8B2A3A; }

/* ── Zellige geometric background overlay ── */
.zellige-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30Z' fill='none' stroke='%23C4614A' stroke-width='0.8'/%3E%3Cpath d='M15 15 L45 15 L45 45 L15 45Z' fill='none' stroke='%23C4614A' stroke-width='0.4'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}