/* ABADONIA · shared styles */
:root {
  --void: #07060a; --void2: #0d0a12; --panel: rgba(16, 12, 22, .72); --panel2: rgba(24, 18, 32, .86);
  --line: rgba(231, 184, 102, .16); --line2: rgba(231, 184, 102, .32);
  --ink: #efe6d8; --dim: #a79cae; --mute: #6f6577;
  --ember: #ff4d2e; --ember2: #ff8a4c; --gold: #e7b866; --gold2: #f7dca0; --veil: #8a6bff;
  --ok: #4fd18b; --bad: #ff5a5a;
  --serif: 'Cinzel', 'Trajan Pro', Georgia, serif; --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: clip; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(255, 77, 46, .4); }

.btn { --b: var(--ember); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.7em; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--serif); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #ff7448, #e5341a); color: #fff7ee; box-shadow: 0 0 0 1px rgba(255, 180, 140, .35) inset, 0 10px 40px -10px rgba(255, 77, 46, .8), 0 0 60px -20px rgba(255, 77, 46, .9);
  transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 200, 160, .5) inset, 0 16px 50px -10px rgba(255, 77, 46, .95), 0 0 80px -16px rgba(255, 77, 46, 1); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn.ghost { background: rgba(255, 255, 255, .03); color: var(--gold2); box-shadow: 0 0 0 1px var(--line2) inset; backdrop-filter: blur(8px); }
.btn.ghost:hover { background: rgba(231, 184, 102, .08); box-shadow: 0 0 0 1px rgba(231, 184, 102, .6) inset, 0 10px 40px -16px rgba(231, 184, 102, .6); }
.btn.gold { background: linear-gradient(180deg, #f7d58c, #c9913a); color: #1a1006; box-shadow: 0 0 0 1px rgba(255, 240, 200, .5) inset, 0 10px 40px -12px rgba(231, 184, 102, .8); }
.btn.sm { padding: .6em 1.1em; font-size: .7rem; }
.btn.block { width: 100%; }

.eyebrow { font-family: var(--serif); font-size: .72rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* modal */
.ab-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 6, .72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.ab-modal.on { opacity: 1; }
.ab-modal .card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px 24px 22px; border-radius: 20px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 77, 46, .14), transparent 60%), linear-gradient(180deg, #17111f, #0c0910);
  box-shadow: 0 0 0 1px var(--line2), 0 40px 120px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(255, 77, 46, .5); transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.ab-modal.on .card { transform: none; }
.ab-modal.wide .card { width: min(880px, 100%); }
.ab-modal h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.35rem; letter-spacing: .06em; text-align: center; }
.ab-modal .sub { margin: 0 0 18px; color: var(--dim); font-size: .92rem; text-align: center; line-height: 1.5; }
.ab-modal .x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .05); cursor: pointer; font-size: 18px; color: var(--dim); }
.ab-modal .x:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.wlist { display: grid; gap: 8px; }
.wopt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; text-decoration: none;
  background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; transition: background .15s, box-shadow .15s, transform .15s; }
.wopt:hover { background: rgba(255, 77, 46, .09); box-shadow: 0 0 0 1px rgba(255, 120, 80, .45) inset; transform: translateX(2px); }
.wopt img, .wopt .ph { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.wopt .ph { display: grid; place-items: center; background: #2a2133; font-family: var(--serif); color: var(--gold); }
.wopt b { display: block; font-weight: 600; font-size: 1rem; }
.wopt small { color: var(--mute); font-size: .78rem; }
.wopt .tag { margin-left: auto; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.ab-modal .fine { margin: 16px 0 0; text-align: center; color: var(--mute); font-size: .76rem; line-height: 1.5; }
.ab-steps { display: grid; gap: 10px; margin: 6px 0 4px; }
.ab-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--mute); transition: color .2s, background .2s; }
.ab-step i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; box-shadow: 0 0 0 1px currentColor inset; }
.ab-step.on { color: var(--ink); background: rgba(255, 77, 46, .1); }
.ab-step.on i { border: 2px solid var(--ember); border-top-color: transparent; box-shadow: none; animation: spin .8s linear infinite; }
.ab-step.done { color: var(--ok); }
.ab-step.done i { background: var(--ok); color: #071; box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 34px; height: 34px; margin: 10px auto; border-radius: 50%; border: 3px solid rgba(255, 77, 46, .2); border-top-color: var(--ember); animation: spin .8s linear infinite; }

/* toasts */
.ab-toasts { position: fixed; z-index: 120; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.ab-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; font-size: .92rem; line-height: 1.4;
  background: rgba(20, 15, 26, .94); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line2), 0 20px 60px -10px rgba(0, 0, 0, .8); animation: tin .35s cubic-bezier(.2, .9, .3, 1.2); }
.ab-toast::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.ab-toast.ok::before { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.ab-toast.bad::before { background: var(--bad); box-shadow: 0 0 12px var(--bad); }
.ab-toast.fire::before { background: var(--ember); box-shadow: 0 0 14px var(--ember); }
.ab-toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(12px) scale(.97); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; } }