/* ANCHOR:CSS_GLOBAL_START */
:root{
  --bg:#fbf0ff;
  --card:#ffffff;
  --text:#3a2a46;
  --muted:#7d6b8b;
  --primary:#c43dff;
  --primary-2:#7a5cff;
  --success:#2db36b;
  --danger:#ff6464;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:12px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% -100px, #ffe9ff 0, #fbf0ff 40%, #f7eaff 100%);
}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}

.site-header,.site-footer{display:flex;align-items:center;justify-content:center;padding:16px 12px;}
.logo{height:44px}
.logo.small{height:36px}
.brand-sub{color:var(--muted);font-size:.9rem;margin-top:6px;text-align:center}

main#app{padding:20px 12px 60px;max-width:980px;margin:0 auto}
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;max-width:560px;margin:0 auto;
}
.center{text-align:center}
.title{margin:8px 0 10px;font-size:2rem;background:linear-gradient(45deg,var(--primary),var(--primary-2));-webkit-background-clip:text;color:transparent}
.sub{color:var(--muted);margin:8px 0 18px}

.links{margin-top:10px}
.links .dot{margin:0 8px;color:#b4a6c4}

.section-title{margin:10px 0 16px;font-size:1.6rem;color:#6a2fa3}
.label{display:block;margin:8px 0 14px;color:#6f5a86}
.input{width:100%;padding:12px 14px;border:1px solid #eadcf7;border-radius:12px;background:#fff}

.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.row.center{justify-content:center}
.row.between{justify-content:space-between;align-items:center}

.btn{
  padding:12px 16px;border-radius:12px;border:1px solid #e7d9fb;background:#fff;color:var(--text);
  cursor:pointer;box-shadow:var(--shadow);transition:transform .05s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(45deg,var(--primary),var(--primary-2));color:#fff;border:none}
.btn.danger{background:#ffd7d7;border:1px solid #ffb5b5;color:#7e2a2a}

.screen{display:none;animation:fade .25s ease}
.screen.show{display:block}
@keyframes fade{from{opacity:.01;transform:translateY(4px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:14px 0}
.grid-compact{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.category-card{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px}
.category-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600}
.category-name-input{flex:1;padding:4px 8px;border:1px solid #eadcf7;border-radius:6px;background:#fff;font-weight:600;font-size:inherit;margin-right:8px;max-width:200px}
.option{display:flex;align-items:center;margin:6px 0}
.option input{width:100%;padding:10px;border:1px solid #eadcf7;border-radius:10px}

.badge{padding:2px 8px;background:#efe6ff;border-radius:999px;color:#6b53a1;font-size:.75rem}

.magic-circle{
  width:120px;height:120px;border-radius:999px;margin:18px auto;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;color:#b063ff;border:6px solid #f0dcff;box-shadow:var(--shadow);
}

.elim-option{
  padding:12px;border:1px solid #eadcf7;border-radius:10px;margin:6px 0;background:#fff;
}
.elim-option.eliminated{text-decoration:line-through;color:#bdaacb;background:#fbf6ff}
.elim-option.final{background:#ecfff4;border-color:#9be0bf;box-shadow:0 0 0 2px #d5f6e6 inset}

/* ANCHOR:CSS_GLOBAL_END */

/* ANCHOR:BRANDING_TWEAKS */
.site-header{display:none}

/* Footer logo sits inside the app frame; anchored to main#app */
.site-footer{
  position:absolute;   /* relative to main#app */
  right:12px;
  bottom:16px;
  z-index:1;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.site-footer a{pointer-events:auto;}
.site-footer .logo{width:120px;height:auto}

/* HIDE logo on the results screen ONLY */
[data-screen="results"] .site-footer{ display:none !important; }

/* Extra space at bottom of results (safe to keep) */
[data-screen="results"] .wrap{ padding-bottom:120px; }


/* ANCHOR:SETUP_TOP_ACTIONS */
.top-actions{margin:8px 0 16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.gap{display:flex; gap:10px}

/* ANCHOR:MAGIC_REVEAL */
.magic-big{font-size:42px; font-weight:800; margin:8px 0 12px}

/* ANCHOR:SHARE_LINE */
.share-line{ margin-top:10px; text-align:center; color:#5f5f7b; }
.share-line a{ color:#6b37ff; font-weight:600; text-decoration:none; }
.share-line a:hover{ text-decoration:underline; }

/* ANCHOR:SEO_ACCORDION */
.seo-accordion{
  max-width:560px;
  margin:24px auto 0;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.seo-accordion-header{
  width:100%;
  padding:16px 20px;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--text);
  font-size:1rem;
  font-weight:600;
  transition:background-color 0.2s ease;
}
.seo-accordion-header:hover{
  background:#faf5ff;
}
.seo-accordion-title{
  color:#6a2fa3;
}
.seo-accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease-out, padding 0.3s ease-out;
  padding:0 20px;
}
.seo-accordion-content p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
  font-size:0.95rem;
}
.seo-accordion-content p:last-child{
  margin-bottom:0;
}
.seo-accordion-content a{
  color:var(--primary-2);
  text-decoration:none;
  font-weight:500;
}
.seo-accordion-content a:hover{
  text-decoration:underline;
}
.seo-accordion-content strong{
  color:var(--text);
  font-weight:600;
}
/* Expanded state */
.seo-accordion.expanded .seo-accordion-content{
  max-height:1000px;
  padding:0 20px 20px;
}
.seo-accordion.expanded .seo-accordion-chevron{
  transform:rotate(180deg);
  display:inline-block;
}
.seo-accordion-chevron{
  display:inline-block;
  transition:transform 0.2s ease;
  margin-right:6px;
}

/* ANCHOR:ELIM_HIGHLIGHT_STYLES (visible, overrides earlier rules) */
.elim-option{
  position: relative;
  transition: background-color .12s linear, border-color .12s linear, box-shadow .12s linear;
}
.elim-option.highlight{
  background:#f6f0ff !important;
  border:3px solid #7c3aed !important;
  outline:3px solid rgba(167,139,250,.6) !important;
  box-shadow:
    0 0 0 2px rgba(139,92,246,.35) inset,
    0 0 0 8px rgba(139,92,246,.18) !important;
}
.elim-option.highlight::after{
  content:"";
  position:absolute; inset:0; border-radius:10px;
  box-shadow:0 0 0 0 rgba(124,58,237,.25);
  animation:mashPulse .38s ease-in-out;
  pointer-events:none;
}
@keyframes mashPulse{
  0%{ box-shadow:0 0 0 0 rgba(124,58,237,.25); }
  100%{ box-shadow:0 0 0 12px rgba(124,58,237,0); }
}
/* ANCHOR:ELIM_POP */
@keyframes elimPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.elim-option.eliminated {
  animation: elimPop .28s ease-out;
}

/* ANCHOR:REMOVE_BUTTON */
.remove-btn {
  color: var(--danger);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.remove-btn:hover {
  background: #ffe6e6;
  border-radius: 4px;
}

/* ANCHOR:DROPDOWN_STYLES */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown menu */
.dropdown .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 100;
  padding: 8px 0;
  max-height: 300px;
  overflow-y: auto;
}

/* Show menu when dropdown is open */
.dropdown.open .menu {
  display: block;
}

/* Menu items */
.dropdown .menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dropdown .menu button:hover {
  background: #faf5ff;
}