/* ---------- Base ---------- */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#4b5563;
  --border:#e5e7eb;
  --accent:#111827;
  --maxw:1200px;
  --gap:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ---------- Header ---------- */
header{
  max-width:var(--maxw);
  margin:12px auto 0;
  padding:0 5px;
}

/* Bigger logo */
.logo {
  display:flex; align-items:center; gap:12px;
  font-weight:800;
  font-size:2.1rem;           /* was ~1.4rem */
  letter-spacing:-0.6px;
  margin: 0 0 6px 0;          /* closer to the top */
  line-height:1.05;
}
.logo-icon { font-size:2.4rem; }
.logo-text { font-family:"Inter", system-ui, sans-serif; }
.logo-text .dot { color:#2563eb; }

.bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}

/* Labels */
#setLabel span,
#subsetLabel{ font-weight:600; }

/* ---------- Select (custom display + native select) ---------- */
.select-wrap{ position:relative; }
.select-display{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  min-width:210px;
  background:#fff;
  display:flex; align-items:center; gap:8px;
}
.sel-emoji{ font-size:18px; }

.styled-select{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* Subset select */
#subsetWrap select{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  background:#fff;
}

/* Helper + count */
.helper{ color:#6b7280; }
.count{ margin-left:auto; font-weight:700; }

/* ---------- Language pill ---------- */
.lang-toggle{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.lang-tab{
  padding:8px 14px;
  border:0; background:transparent; cursor:pointer;
  border-radius:999px; font-weight:700; letter-spacing:.2px;
}
.lang-tab[aria-selected="true"]{ background:#111827; color:#fff; }

/* ---------- Layout ---------- */
.layout{
  max-width:var(--maxw);
  margin:12px auto;
  padding:0 12px;
  display:grid;
  grid-template-columns: 1fr 320px; /* main | right rail */
  gap:20px;
  align-items:start;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

/* ---------- Grid of characters ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px,1fr));
  gap:10px;
}
.card{
  display:grid; place-items:center;
  height:64px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:transform .04s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-color:#d1d5db;
  transform:translateY(-1px);
}
.glyph{
  font-size:28px; line-height:1;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff;
  padding:10px 14px; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  opacity:0; pointer-events:none;
  transition:opacity .15s, transform .15s;
  z-index:50;
  font-weight:700;
}
.toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; background:rgba(255,255,255,.6);
  display:none; place-items:center; z-index:40;
}
.loader.show{ display:grid; }
.spinner{
  width:32px; height:32px; border-radius:50%;
  border:3px solid #cbd5e1; border-top-color:#111827;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Right rail / Ad ---------- */
aside.ad{ align-self:start; }

.ad-box{
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* “Real ad” look with configurable padding */
.ad-spot{
  --pad:22px;                /* adjust desktop padding here */
  padding:var(--pad);
  text-align:center;
}
@media (max-width:900px){
  .ad-spot{ --pad:16px; }    /* tighter on mobile */
}

/* Brand strip */
.ad-brand{
  display:flex; justify-content:center; align-items:center;
  height:56px; margin:2px 0 10px;
}
.ad-brand img{
  height:100%; width:auto; display:block;
}

/* Ad copy */
.ad-head{
  margin:8px 0 8px;
  font-size:18px; line-height:1.05; font-weight:600; letter-spacing:.2px;
}
.ad-sub{
  margin:0 0 14px;
  font-size:14px; line-height:1.5; color:#4b5563;
}

/* CTA */
.ad-cta{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:#111827; color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 4px 12px rgba(17,24,39,.18);
}
.ad-cta:hover{ filter:brightness(1.05); }

/* Footnote */
.ad-foot{
  margin-top:12px; font-size:12px; color:#6b7280;
}

/* Optional: ad label bar if you keep it elsewhere */
.ad-label{
  display:none; /* hide if you don’t use the top bar */
  font-size:12px; color:#6b7280; padding:6px 8px; border-bottom:1px solid var(--border);
}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}


/* === Mobile-safe logo overrides (force precedence) === */
:root{
  --logo-text-size: 2.1rem;   /* desktop */
  --logo-emoji-size: 2.4rem;  /* desktop */
}

header .logo{
  display:flex; align-items:center; gap:12px;
  font-weight:800;
  font-size: var(--logo-text-size) !important;   /* force override */
  letter-spacing:-0.6px;
  margin:0 0 6px 0;
  line-height:1.05;
}
header .logo-icon{ 
  font-size: var(--logo-emoji-size) !important;  /* force override */
  line-height:1; 
}
header .logo-text{ 
  font-family:"Inter", system-ui, sans-serif; 
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header .logo-text .dot{ color:#2563eb; }

/* Tablet down */
@media (max-width: 900px){
  :root{
    --logo-text-size: 1.7rem;
    --logo-emoji-size: 1.9rem;
  }
}

/* Phones */
@media (max-width: 600px){
  :root{
    --logo-text-size: 1.4rem;
    --logo-emoji-size: 1.6rem;
  }
  header .logo{ gap:8px; }
}

/* Tiny phones */
@media (max-width: 420px){
  :root{
    --logo-text-size: 1.25rem;
    --logo-emoji-size: 1.45rem;
  }
  /* If still too wide, allow wrapping instead of ellipsis: */
  /* header .logo{ flex-direction:column; align-items:flex-start; gap:4px; }
     header .logo-text{ white-space:normal; } */
}


/* --- Softer ad typography (override) --- */
.ad-head{
  font-size:16px !important;     /* was 18px */
  line-height:1.3 !important;    /* breathe a bit more */
  font-weight:500 !important;     /* medium instead of semi-bold */
  letter-spacing:0 !important;    /* remove the punchy tracking */
  color:#111827 !important;       /* keep readable, not shouty */
  margin:6px 0 6px !important;
}

.ad-sub{
  font-size:13px !important;      /* slightly smaller body */
  line-height:1.55 !important;
  color:#4b5563 !important;       /* calm gray */
  margin:0 0 12px !important;
}

/* CTA a touch lighter too */
.ad-cta{
  font-weight:600 !important;     /* was 700 */
  padding:9px 12px !important;    /* a little slimmer */
  border-radius:8px !important;
}

/* Footnote stays subtle */
.ad-foot{
  font-size:12px !important;
  color:#6b7280 !important;
}

/* Mobile tweaks */
@media (max-width: 900px){
  .ad-head{ font-size:15px !important; }
  .ad-sub { font-size:13px !important; }
}
@media (max-width: 480px){
  .ad-head{ font-size:14px !important; }
  .ad-sub { font-size:12.5px !important; }
}


/* Ensure hidden actually hides, even with aggressive resets */
[hidden] { display: none !important; }

/* Floating button: force bottom-right */
.fb-btn{
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  z-index: 2147483647; /* win any stack */
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #111827;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Backdrop + modal */
.fb-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 2147483646;
  display: grid; place-items: center;
}

.fb-modal{
  width: min(520px, 92vw);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  padding: 16px;
  position: relative;
}

.fb-close{
  position: absolute; right: 10px; top: 8px;
  border: 0; background: transparent;
  font-size: 22px; cursor: pointer;
}

.fb-label{ display:block; font-weight:600; margin:10px 0 6px; }
#fbEmail, #fbMsg{
  width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:10px; font:inherit;
}
#fbMsg{ resize:vertical; }

.fb-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.fb-cancel{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 12px; cursor:pointer;
}
.fb-send{
  background:#111827; color:#fff; border:1px solid #111827; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:700;
}

/* Accessibility utility */
.visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* Prevent background scroll when modal open (optional) */
body.fb-lock { overflow: hidden !important; }