/* =========================================================
   THEME-VARIABLES + AUTO/LIGHT/DARK SUPPORT (DROP-IN)
   - Auto: uses system @media (prefers-color-scheme)
   - Manual override: [data-theme="light"] / [data-theme="dark"]
   ========================================================= */

:root{
  /* neutrals */
  --text: #111;
  --heading: #0b1726;
  --border: rgba(0,0,0,0.08);
  --overlay: rgba(0,0,0,.35);

  /* surfaces */
  --card-bg: rgba(255,255,255,0.86);
  --panel-bg: rgba(0,0,0,0.035);
  --altbox-bg: rgba(255,255,255,0.78);
  --input-bg: rgba(255,255,255,0.95);
  --shadow-1: 0 10px 24px rgba(0,0,0,0.08);
  --shadow-2: 0 24px 70px rgba(0,0,0,.12);

  /* accents */
  --accent: #00cfff;
  --accent-2: #0077ff;
  --accent-border: rgba(0,153,255,0.28);
  --accent-border-focus: rgba(0,153,255,0.62);
  --accent-focus-ring: rgba(0,204,255,0.20);
  --result: #0077aa;
  --brand-link: #0077ff;
  --verified: #00b3a6;

  /* gradients */
  --grad-1: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-2: linear-gradient(to right, var(--accent), #3a47d5);
}

/* Auto-dark from OS */
@media (prefers-color-scheme: dark){
  :root{
    --text: #fff;
    --heading: #e9f2ff;
    --border: rgba(255,255,255,0.18);
    --overlay: rgba(0,0,0,.6);

    --card-bg: rgba(18,22,28,0.46);
    --panel-bg: rgba(0,0,0,0.38);
    --altbox-bg: rgba(0,0,0,0.5);
    --input-bg: rgba(0,0,0,0.2);
    --shadow-1: 0 0 10px rgba(0,255,255,0.15);
    --shadow-2: 0 24px 70px rgba(0,0,0,.5);

    --accent: #00ffff;
    --accent-2: #0077ff;
    --accent-border: rgba(0,255,255,0.25);
    --accent-border-focus: rgba(0,255,255,0.65);
    --accent-focus-ring: rgba(0,255,255,0.22);
    --result: #00f6ff;
    --brand-link: #00e5ff;
    --verified: #00ffd0;
  }
}

/* Manual override: force LIGHT */
[data-theme="light"]{
  --text: #111;
  --heading: #0b1726;
  --border: rgba(0,0,0,0.08);
  --overlay: rgba(0,0,0,.35);

  --card-bg: rgba(255,255,255,0.86);
  --panel-bg: rgba(0,0,0,0.035);
  --altbox-bg: rgba(255,255,255,0.78);
  --input-bg: rgba(255,255,255,0.95);
  --shadow-1: 0 10px 24px rgba(0,0,0,0.08);
  --shadow-2: 0 24px 70px rgba(0,0,0,.12);

  --accent: #00cfff;
  --accent-2: #0077ff;
  --accent-border: rgba(0,153,255,0.28);
  --accent-border-focus: rgba(0,153,255,0.62);
  --accent-focus-ring: rgba(0,204,255,0.20);
  --result: #0077aa;
  --brand-link: #0077ff;
  --verified: #00b3a6;
}

/* Manual override: force DARK */
[data-theme="dark"]{
  --text: #fff;
  --heading: #e9f2ff;
  --border: rgba(255,255,255,0.18);
  --overlay: rgba(0,0,0,.6);

  --card-bg: rgba(18,22,28,0.46);
  --panel-bg: rgba(0,0,0,0.38);
  --altbox-bg: rgba(0,0,0,0.5);
  --input-bg: rgba(0,0,0,0.2);
  --shadow-1: 0 0 10px rgba(0,255,255,0.15);
  --shadow-2: 0 24px 70px rgba(0,0,0,.5);

  --accent: #00ffff;
  --accent-2: #0077ff;
  --accent-border: rgba(0,255,255,0.25);
  --accent-border-focus: rgba(0,255,255,0.65);
  --accent-focus-ring: rgba(0,255,255,0.22);
  --result: #00f6ff;
  --brand-link: #00e5ff;
  --verified: #00ffd0;
}

/* =========================================================
   COMPONENTS (same selectors as your existing CSS)
   ========================================================= */

/* Wrapper */
#smileone-check-buy-wrapper{
  background: var(--altbox-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  color: var(--text);
  box-shadow: var(--shadow-1);
  transition: box-shadow .3s ease-in-out, transform .3s ease-in-out;
}

/* Inputs */
#smileone-check-buy-wrapper input[type="text"]{
  width:100%; padding:10px 12px; margin:8px 0;
  border:1px solid var(--accent-border);
  background: var(--input-bg); color: var(--text); border-radius:8px;
  outline:none; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease-in-out, border-color .2s ease-in-out, transform .2s ease-in-out;
}
#smileone-check-buy-wrapper input[type="text"]::placeholder{ color: rgba(0,0,0,0.45); }
[data-theme="dark"] #smileone-check-buy-wrapper input[type="text"]::placeholder{ color: rgba(255,255,255,0.55); }
#smileone-check-buy-wrapper input[type="text"]:focus{
  border-color: var(--accent-border-focus);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
  transform: translateY(-1px);
}

/* Primary button */
#ar2-check-btn{
  background: var(--grad-1);
  color:#fff; border:0; padding:10px 20px; border-radius:8px; cursor:pointer;
  box-shadow: 0 8px 16px rgba(0, 119, 255, 0.18);
  font-weight:700; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, filter .2s ease-in-out;
  margin-top:10px;
}
#ar2-check-btn:hover{ transform:translateY(-1px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 119, 255, 0.22); filter: saturate(1.05); }
#ar2-check-btn:active{ transform: translateY(0) scale(.99); }

/* IGN result */
#ar2-ign-result{ margin-top:15px; font-size:1rem; color: var(--result); font-weight:600; text-shadow:none; }

/* Alt box */
.ar2-check-buy-box{
  background: var(--altbox-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding:20px; border-radius:12px; border:1px solid var(--border); box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  margin-top:20px; text-align:center; color: var(--text);
}
.ar2-check-buy-box input{
  width:100%; padding:12px; margin-bottom:10px; border-radius:8px;
  border:1px solid var(--accent-border); background: var(--input-bg);
  color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.05); outline:none;
}
.ar2-check-buy-box input:focus{
  border-color: var(--accent-border-focus);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

/* Secondary button */
.ar2-check-btn{
  background: var(--grad-2);
  color:#fff; padding:10px 25px; border-radius:10px; font-weight:700; border:0; cursor:pointer;
  box-shadow: 0 8px 16px rgba(58,71,213,0.18); transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}
.ar2-check-btn:hover{ transform:translateY(-1px); box-shadow: 0 12px 22px rgba(58,71,213,0.22); }

/* Modal */
#ar2-ign-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: var(--overlay); z-index:99999;
}
#ar2-ign-card{
  width:92%; max-width:520px; border-radius:16px; padding:18px 20px;
  backdrop-filter: blur(20px) saturate(1.04); -webkit-backdrop-filter: blur(20px) saturate(1.04);
  background: var(--card-bg); border:1px solid var(--border);
  box-shadow: var(--shadow-2);
  color: var(--text); font-size:14px;
  position:relative; transform:scale(.88); opacity:0; /* entrance */
}

#ar2-ign-card h3{ margin:0 0 6px; font-size:18px; color: var(--heading); }
#ar2-ign-card .ar2-panel{
  margin-top:10px; padding:12px; border-radius:12px;
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 1px rgba(0,153,255,0.10);
}
#ar2-ign-card .ar2-row{ display:flex; justify-content:space-between; margin:6px 0; gap:12px; color: var(--text); }
#ar2-ign-card .ar2-row.ar2-heading{ justify-content:flex-start; opacity:.95; font-weight:700; color: var(--heading); }

/* Actions */
#ar2-ign-card .ar2-actions{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px; }
#ar2-ign-card button{ border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; }
#ar2-ign-continue{
  background: var(--grad-1); color:#fff; position:relative; overflow:hidden;
  box-shadow: 0 10px 22px rgba(47,125,255,.22); transition: transform .15s ease, box-shadow .15s ease;
}
#ar2-ign-cancel{
  background: rgba(255,255,255,0.95); color:#0b1726; border:1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] #ar2-ign-cancel{ background: rgba(255,255,255,0.88); color:#111; }
#ar2-ign-continue:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(47,125,255,.26); }
#ar2-ign-cancel:hover{ transform: translateY(-1px); }

/* Brand */
#ar2-brand{ margin-top:10px; font-size:12px; opacity:.9; text-align:center; color: var(--heading); }
#ar2-brand a{ color: var(--brand-link); text-decoration:none; }

/* Verified icon + line */
.ar2-ign-line{ display:inline-flex; align-items:center; gap:8px; color: var(--heading); }
.ar2-verified-svg{ width:18px; height:18px; color: var(--verified); filter: drop-shadow(0 0 4px color-mix(in oklab, var(--verified), transparent 65%)); }

/* Knife-shine */
#ar2-ign-continue::before{
  content:""; position:absolute; top:-120%; left:-70%;
  width:60%; height:300%; transform:rotate(25deg);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  animation: ar2Knife 2.2s linear infinite; pointer-events:none;
}
@keyframes ar2Knife{ 0%{ left:-70%; } 100%{ left:130%; } }

/* Bloom entrance */
#ar2-ign-modal.ar2-bloom #ar2-ign-card{ animation: ar2BloomIn 420ms cubic-bezier(.2,.9,.2,1.02) forwards; }
@keyframes ar2BloomIn{
  0%{ transform:scale(.88); opacity:0; filter:saturate(.98); }
  60%{ transform:scale(1.02); opacity:1; filter:saturate(1.02); }
  100%{ transform:scale(1.0); opacity:1; }
}

/* Remove decorative layer */
#ar2-ign-card::before{ content:none !important; }

/* Focus rings */
#ar2-ign-card button:focus,
#ar2-check-btn:focus,
.ar2-check-btn:focus,
#smileone-check-buy-wrapper input[type="text"]:focus{
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}