/* cauldron.wtf, Luxury theme: the shared design system. Loaded on every page only while the Luxury site theme is on.
   Near-black surfaces, one glowing silver-blue light, a restrained potion-green, gold kept for Premium. Unbounded for headings, Manrope for text.
   The motif is the "brew line": a thin liquid horizon that glows where the light hits it (.lx-line), with a few rising bubbles. */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  /* surfaces, darkest first */
  --lx-0: #060609; --lx-1: #0b0b0f; --lx-2: #111116; --lx-3: #17171d; --lx-4: #1f1f27;
  --lx-edge: rgba(255, 255, 255, .07); --lx-edge-2: rgba(255, 255, 255, .11); --lx-edge-3: rgba(255, 255, 255, .16);
  --lx-text: #f3f1f7; --lx-soft: #b7b3c2; --lx-mute: #8a8696; --lx-faint: #5f5c69;
  --lx-gold: #d8b673; --lx-gold-rgb: 216 182 115; --lx-red: #ef6b7f;
  --lx-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --lx-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lx-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  /* radius scale */
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px;
  --lx-ease: cubic-bezier(.2, .7, .2, 1);
  --lx-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px -24px rgba(0, 0, 0, .8);
  /* the old names the rest of the site uses, pointed at the new palette */
  --void: var(--lx-0); --char: var(--lx-2); --char-2: var(--lx-3); --line: #1c1c23; --line-2: #2a2a33;
  --text: var(--lx-text); --mute: var(--lx-mute); --gold: var(--lx-gold); --radius: var(--r3); --wrap: 1180px;
}
html { background: var(--lx-0); }
body { font: 400 16px/1.6 var(--lx-sans); letter-spacing: -.003em; color: var(--lx-text); background: var(--lx-0);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgb(var(--v-rgb) / .35); color: #fff; }
h1, h2 { font-family: var(--lx-display); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; color: var(--lx-text); text-shadow: none; }
:focus-visible { outline: 2px solid rgb(var(--v-rgb) / .9); outline-offset: 3px; border-radius: var(--r1); }

/* buttons */
.btn { font: 500 15px/1 var(--lx-sans); letter-spacing: -.005em; border-radius: var(--r2); padding: 12px 18px; gap: 8px;
       transition: background .25s var(--lx-ease), border-color .25s var(--lx-ease), color .25s, box-shadow .35s var(--lx-ease), transform .25s var(--lx-ease); }
.btn-main { color: var(--on-accent); font-weight: 700; background: linear-gradient(180deg, #f4f8ff, var(--violet-2) 55%, var(--violet));
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgb(var(--v-rgb) / .6), 0 0 28px -6px rgb(var(--v-rgb) / .75); }
.btn-main:hover { color: var(--on-accent); background: linear-gradient(180deg, #ffffff, var(--violet-2) 50%, var(--violet-hover)); transform: translateY(-1px);
                  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgb(var(--v-rgb) / .7), 0 0 40px -4px rgb(var(--v-rgb) / .9); }
.btn-main:active { transform: translateY(0); }
.btn-ghost { background: rgba(255, 255, 255, .03); border-color: var(--lx-edge-2); color: var(--lx-text); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--lx-edge-3); color: #fff; }
.btn-small { padding: 9px 14px; font-size: 14px; border-radius: 9px; }
.btn .arr { transition: transform .25s var(--lx-ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-gold { color: #1a1305; background: linear-gradient(180deg, #ecd3a0, var(--lx-gold)); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 24px -12px rgb(var(--lx-gold-rgb) / .8); }
.btn-gold:hover { color: #1a1305; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 14px 30px -12px rgb(var(--lx-gold-rgb) / .9); }

/* surfaces */
.glass, .lx-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .012)), var(--lx-1);
                    border: 1px solid var(--lx-edge); border-radius: var(--r4); box-shadow: var(--lx-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* nav: compact dark glass */
.nav { background: rgba(6, 6, 9, .62); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
       border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.nav.scrolled { border-bottom-color: var(--lx-edge); background: rgba(6, 6, 9, .8); }
.nav .wrap { height: 60px; gap: 32px; }
.brand { font: 700 15px var(--lx-display); letter-spacing: -.02em; gap: 10px; }
.brand img { height: 22px; filter: drop-shadow(0 0 8px rgb(var(--v-rgb) / .45)); }
.nav-links { gap: 4px; margin-left: 8px; margin-right: auto; }
.nav-links a { font-size: 14px; font-weight: 450; color: var(--lx-mute); padding: 7px 12px; border-radius: 8px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--lx-text); background: rgba(255, 255, 255, .045); }
.nav-cta { gap: 8px; align-items: center; }
.nav-cta .btn-ghost { border-color: transparent; background: none; color: var(--lx-soft); }
.nav-cta .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.menu { border-top: 1px solid var(--lx-edge); background: rgba(6, 6, 9, .96); }
.menu a { font-weight: 500; border-bottom-color: var(--lx-edge); }
.menu-btn { border-color: var(--lx-edge-2); border-radius: 9px; width: 38px; height: 38px; }

/* forms */
label { font-weight: 500; font-size: 13.5px; color: var(--lx-soft); }
input, textarea, select { font: 400 15px/1.4 var(--lx-sans); background: var(--lx-1); border-color: var(--lx-edge-2); border-radius: var(--r2);
                          transition: border-color .2s, box-shadow .2s, background .2s; }
input:hover, textarea:hover, select:hover { border-color: var(--lx-edge-3); }
input:focus, textarea:focus, select:focus { border-color: rgb(var(--v-rgb) / .8); box-shadow: 0 0 0 4px rgb(var(--v-rgb) / .14); background: var(--lx-0); }

/* the brew line motif */
.lx-line { position: relative; height: 1px; border: 0; margin: 0;
           background: linear-gradient(90deg, transparent, var(--lx-edge-2) 18%, rgb(var(--v-rgb) / .9) 50%, var(--lx-edge-2) 82%, transparent); }
.lx-line::after { content: ""; position: absolute; left: 50%; top: 0; width: 40%; height: 40px; transform: translate(-50%, -50%); pointer-events: none;
                  background: radial-gradient(closest-side, rgb(var(--v-rgb) / .28), transparent); }
.lx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s4); font: 500 12px var(--lx-mono); letter-spacing: .12em;
              text-transform: uppercase; color: var(--lx-mute); }
.lx-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ichor); box-shadow: 0 0 10px rgb(var(--g-rgb) / .8); }
.lx-glow { color: var(--violet-2); text-shadow: 0 0 22px rgb(var(--v-rgb) / .55), 0 0 60px rgb(var(--v-rgb) / .25); }

/* footer */
.foot { border-top: 1px solid var(--lx-edge); color: var(--lx-mute); font-size: 14px; }

/* scroll reveals (only when the page script runs, so nothing hides without it) */
.lx-js .rv { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--lx-ease), transform .9s var(--lx-ease); transition-delay: var(--d, 0s); }
.lx-js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lx-js .rv { opacity: 1; transform: none; } }

/* every control in the new type (the older pages name their font by hand) */
button, input, select, textarea, .btn { font-family: var(--lx-sans) !important; }
.redeem input, .cp-row input, .timing input[inputmode] { font-family: var(--lx-mono) !important; }

/* ---------------------------------------------------------------- dashboard */
.app .side { gap: 24px; padding: 20px 14px; border-right: 1px solid var(--lx-edge); background: var(--lx-1); }
.app .side .brand { padding: 4px 10px 10px; }
.app .tabs { gap: 2px; }
.app .tabs a { font-size: 14px; font-weight: 500; padding: 9px 12px; border-radius: 9px; color: var(--lx-mute); transition: color .2s, background .2s; }
.app .tabs a:hover { background: rgba(255, 255, 255, .04); color: var(--lx-text); }
.app .tabs a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px var(--lx-edge); }
.app .tabs a[aria-current="page"] .t-ico { color: var(--violet-2); filter: drop-shadow(0 0 6px rgb(var(--v-rgb) / .6)); }
.app .t-ico { width: 17px; height: 17px; stroke-width: 1.6; }
.app .me { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid var(--lx-edge); }
.app .me b { font-size: 14px; font-weight: 600; } .app .me span { font-size: 12.5px; }
.app .main { padding: 48px 56px 96px; max-width: 1200px; }
.app .main::before { content: ""; position: fixed; top: -200px; right: -100px; width: 700px; height: 500px; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--v-rgb) / .1), transparent); }
.app .pane-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--lx-edge); position: relative; }
.app .pane-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: linear-gradient(90deg, rgb(var(--v-rgb) / .9), transparent); }
.app .pane-head h1 { font: 500 30px/1.2 var(--lx-display); letter-spacing: -.02em; margin: 0 0 8px; }
.app .pane-head p { margin: 0; color: var(--lx-mute); font-size: 15px; max-width: 70ch; }
.app .pane { animation: lx-pane .5s var(--lx-ease); }
@keyframes lx-pane { from { opacity: 0; transform: translateY(8px); } }
.app .card { padding: 24px 26px; }
.app .card h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 18px; }
.app .grid-2 { gap: 16px; margin-bottom: 16px; }
.app .facts { gap: 12px 24px; font-size: 14.5px; }
.app .facts dt { color: var(--lx-mute); } .app .facts dd { font-weight: 500; }
.app .facts dd a { color: var(--violet-2); text-decoration: none; border-bottom: 1px solid rgb(var(--v-rgb) / .4); }
.app .stats { gap: 12px; margin-bottom: 16px; }
.app .stat-tile { padding: 20px 22px; border-radius: var(--r3); }
.app .stat-tile::before { background: linear-gradient(90deg, transparent, rgb(var(--v-rgb) / .6), transparent); }
.app .stat-tile b { font: 600 28px/1.1 var(--lx-display); letter-spacing: -.02em; margin-bottom: 6px; }
.app .stat-tile b i { font: 500 15px var(--lx-mono); color: var(--lx-faint); }
.app .stat-tile span { font-size: 13px; font-weight: 500; color: var(--lx-soft); }
.app .stat-tile small { color: var(--lx-faint); }
.app .status { font-size: 16px; font-weight: 600; }
.app .status.big { font: 600 22px var(--lx-display); letter-spacing: -.02em; }
.app .status.active { color: var(--lx-gold); } .app .status.active::before { background: var(--lx-gold); box-shadow: 0 0 10px rgb(var(--lx-gold-rgb) / .9); }
.app .meter { height: 6px; background: var(--lx-3); border-color: var(--lx-edge); }
.app .meter span { background: linear-gradient(90deg, #a98445, var(--lx-gold)); box-shadow: 0 0 10px rgb(var(--lx-gold-rgb) / .5); }
.app .plans { gap: 1px; background: var(--lx-edge); border-radius: var(--r3); overflow: hidden; border: 1px solid var(--lx-edge); }
.app .plan { border: 0; border-radius: 0; background: var(--lx-1); padding: 20px; transition: background .25s; }
.app .plan:hover { background: var(--lx-2); box-shadow: none; }
.app .plan .price { font: 600 28px/1.2 var(--lx-display); letter-spacing: -.02em; color: var(--lx-text); }
.app .plan.life { box-shadow: inset 0 1px 0 rgb(var(--lx-gold-rgb) / .6); background: radial-gradient(90% 70% at 100% 0%, rgb(var(--lx-gold-rgb) / .1), transparent 70%), var(--lx-1); }
.app .plan.life .price { color: #f1dfb8; }
.app .ed-tabs, .app .subtabs { background: var(--lx-1); border-color: var(--lx-edge); border-radius: 11px; }
.app .ed-tabs button { font-weight: 500; transition: color .2s, background .2s; }
.app .ed-tabs button[aria-selected="true"], .app .subtabs button[aria-selected="true"] { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--lx-edge-2); color: #fff; }
.app .subtabs button { font-weight: 500; }
.app .locked { background: rgb(var(--lx-gold-rgb) / .06); border-color: rgb(var(--lx-gold-rgb) / .25); color: #ead3a4; }
.app .preview { border-color: var(--lx-edge); border-radius: var(--r4); }
.app .admin th { font: 500 11.5px var(--lx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lx-faint); }
.app .admin td, .app .admin th { border-bottom-color: var(--lx-edge); }
.toast { background: var(--lx-3); border-color: var(--lx-edge-2); border-radius: 11px; font-weight: 500; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
.loading { background: var(--lx-0); }
@media (max-width: 760px) {
  .app .side { padding: 10px 16px; background: rgba(6, 6, 9, .96); }
  .app .tabs { background: rgba(9, 9, 12, .94); border-top-color: var(--lx-edge); }
  .app .tabs a { font-size: 11px; padding: 6px 2px; }
  .app .tabs a[aria-current="page"] { box-shadow: none; background: rgba(255, 255, 255, .06); }
  .app .main { padding: 28px 16px 110px; }
  .app .pane-head { margin-bottom: 24px; padding-bottom: 18px; }
  .app .pane-head h1 { font-size: 26px; }
  .app .stat-tile b { font-size: 24px; }
}

/* ---------------------------------------------------------------- log in, sign up, 404 */
.center::before { background: radial-gradient(closest-side, rgb(var(--v-rgb) / .16), rgb(var(--vd-rgb) / .05) 60%, transparent) !important; }
.box.glass { max-width: 400px; padding: 36px 32px 28px; border-radius: var(--r4); overflow: hidden; }
.box.glass::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--v-rgb) / .9), transparent); }
.box img.mark { height: 36px; margin-bottom: 22px; }
.box h1, .nf h1 { font: 500 26px/1.25 var(--lx-display); letter-spacing: -.02em; margin-bottom: 8px; }
.box .intro { font-size: 15px; margin-bottom: 28px; }
.box .keep { font-size: 14px; }
.box .switch { font-size: 14px; }
.box .switch a { color: var(--violet-2); }
.pw button { font-weight: 500 !important; font-size: 13px !important; }
.app .seg input { width: 1px; height: 1px; left: 0; top: 0; }
/* the purple default pictures the dashboard script fills in, shown as the silver-blue potion */
.app .me img[src$="/assets/potion-big.png"], .app .me img[src$="/assets/potion-pixel.png"], .app .discord img.def, .app .plan img[src$="/assets/potion-violet.png"] { content: url("/assets/potion-frost.png"); image-rendering: auto; }