/* Shared surfaces for the shop, daily quests and the embedded wheel. */
:root {
  --nl-bg: var(--nl-tone-07090e, #07090e);
  --nl-surface: var(--nl-tone-101722, #101722);
  --nl-card: var(--nl-tone-111925, #111925);
  --nl-border: var(--nl-tone-293649, #293649);
  --nl-text: var(--nl-tone-edf3fc, #edf3fc);
  --nl-muted: var(--nl-tone-96a6bc, #96a6bc);
  --nl-blue: var(--nl-primary, var(--nl-tone-277bd2, #277bd2));
  --nl-selected: var(--nl-soft, var(--nl-tone-d8e7fa, #d8e7fa));
}

html body #wkqOverlay .wkq-dialog,
html body #vipDevModal #vipModalContent {
  background: var(--nl-surface) !important;
  border: 1px solid var(--nl-border) !important;
  border-radius: 12px !important;
  color: var(--nl-text) !important;
  font-family: Inter, system-ui, sans-serif !important;
  box-shadow: 0 24px 80px #0007 !important;
}
html body #wkqOverlay .wkq-backdrop,
html body #vipDevModal .vip-modal-backdrop {
  background: var(--nl-tone-030912d9, #030912d9) !important;
  backdrop-filter: blur(12px) !important;
}
html body #wkqOverlay .wkq-dialog { width: min(940px, 100%); padding: 28px; }
html body #wkqOverlay .wkq-dialog-head { border-color: var(--nl-border); padding-bottom: 22px; }
html body #wkqOverlay .wkq-kicker { color: var(--nl-highlight, var(--nl-tone-8faacb, #8faacb)); font-weight: 600; letter-spacing: 1.4px; }
html body #wkqOverlay .wkq-dialog-head h2 { font-size: 26px; font-weight: 600; letter-spacing: -.7px; margin-top: 10px; }
html body #wkqOverlay .wkq-dialog-head p { color: var(--nl-muted); line-height: 1.7; }
html body #wkqOverlay .wkq-close,
html body #vipDevModal .wk-shop-top-close,
html body #vipDevModal .wk-shop-fixed-close {
  border: 1px solid var(--nl-border) !important;
  background: var(--nl-tone-192536, #192536) !important;
  border-radius: 7px !important;
  color: var(--nl-tone-b9c9df, #b9c9df) !important;
  box-shadow: none !important;
}
html body :is(#wkqOverlay,#wkqPage) #wkqst { color: var(--nl-text); }
html body :is(#wkqOverlay,#wkqPage) #wkqst :is(.q,.tier) { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: 9px; box-shadow: none; padding: 18px; }
html body :is(#wkqOverlay,#wkqPage) #wkqst .q.is-ready { border-color: var(--nl-tone-6385ad, #6385ad); }
html body :is(#wkqOverlay,#wkqPage) #wkqst .q-name { font-size: 14px; font-weight: 600; }
html body :is(#wkqOverlay,#wkqPage) #wkqst .q-ic { background: var(--nl-tone-1a2d43, #1a2d43); color: var(--nl-highlight, var(--nl-tone-a9c8ed, #a9c8ed)); border-radius: 7px; }
html body :is(#wkqOverlay,#wkqPage) #wkqst .bar { background: var(--nl-tone-263449, #263449); height: 5px; }
html body :is(#wkqOverlay,#wkqPage) #wkqst .bar i { background: var(--nl-tone-739dcc, #739dcc); }
html body :is(#wkqOverlay,#wkqPage) #wkqst .chip { background: var(--nl-tone-1d2a3c, #1d2a3c); color: var(--nl-tone-b1c4de, #b1c4de); font-weight: 500; }
html body :is(#wkqOverlay,#wkqPage) #wkqst :is(.q-count,.qh span,.pass-h span,.tier small,.guest) { color: var(--nl-muted); }
html body :is(#wkqOverlay,#wkqPage) #wkqst .pass { border-color: var(--nl-border); margin-top: 24px; padding-top: 22px; }
html body :is(#wkqOverlay,#wkqPage) #wkqst :is(.q.is-ready button,.tier.is-ready button,.guest a) { background: var(--nl-blue); border-color: var(--nl-blue); color: white; border-radius: 7px; box-shadow: none; }
html body :is(#wkqOverlay,#wkqPage) #wkqst .guest { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: 9px; padding: 20px; line-height: 1.7; }

/* The shop keeps the catalogue's width and quiet tab treatment. */
html body #vipDevModal.wk-shop-page { background: var(--nl-bg) !important; }
html body #vipDevModal.wk-shop-page #vipModalContent {
  max-width: 1160px !important;
  margin: 28px auto !important;
  padding: 28px !important;
  background: var(--nl-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #vipDevModal .wk-shop-header-bar { background: none !important; border-bottom: 1px solid var(--nl-border) !important; padding-bottom: 24px !important; margin-bottom: 24px !important; }
html body #vipDevModal .wk-shop-header-titles h1 { font-size: 28px !important; font-weight: 600 !important; letter-spacing: -.8px !important; color: var(--nl-text) !important; }
html body #vipDevModal .wk-shop-header-badge { background: none !important; color: var(--nl-highlight, var(--nl-tone-8faacb, #8faacb)) !important; border: 0 !important; letter-spacing: 1px !important; font-weight: 500 !important; }
html body #vipDevModal .wk-shop-back-btn { background: var(--nl-tone-151f2e, #151f2e) !important; color: var(--nl-tone-b7c8de, #b7c8de) !important; border: 1px solid var(--nl-border) !important; border-radius: 7px !important; }
html body #vipDevModal .wk-shop-tabs { gap: 8px !important; padding: 0 0 22px !important; background: none !important; border: 0 !important; }
html body #vipDevModal .wk-shop-tab { background: none !important; color: var(--nl-tone-a4b5cb, #a4b5cb) !important; border: 1px solid var(--nl-border) !important; border-radius: 7px !important; padding: 11px 15px !important; font-weight: 500 !important; font-size: 12px !important; box-shadow: none !important; }
html body #vipDevModal .wk-shop-tab.is-active { background: var(--nl-selected) !important; color: var(--nl-tone-142237, #142237) !important; border-color: var(--nl-selected) !important; }
html body #vipDevModal .wk-shop-tab i { color: inherit !important; }
html body #vipDevModal .wk-clean-box { background: var(--nl-card) !important; border: 1px solid var(--nl-border) !important; border-radius: 10px !important; box-shadow: none !important; padding: 28px !important; }
html body #vipDevModal .wk-clean-item-title { font-size: 21px !important; font-weight: 600 !important; letter-spacing: -.5px !important; color: var(--nl-text) !important; }
html body #vipDevModal .wk-clean-item-title i { color: var(--nl-highlight, var(--nl-tone-a9c8ed, #a9c8ed)) !important; }
html body #vipDevModal :is(.wk-clean-subtext,.wk-clean-price-period,.wk-clean-note) { color: var(--nl-muted) !important; line-height: 1.7 !important; }
html body #vipDevModal .wk-clean-price-badge { background: var(--nl-tone-19283a, #19283a) !important; border: 1px solid var(--nl-tone-334a65, #334a65) !important; border-radius: 8px !important; box-shadow: none !important; }
html body #vipDevModal .wk-clean-price-val { color: var(--nl-soft, var(--nl-tone-d8e7fa, #d8e7fa)) !important; font-weight: 600 !important; letter-spacing: -1px !important; }
html body #vipDevModal .wk-clean-list { color: var(--nl-tone-bbc8da, #bbc8da) !important; }
html body #vipDevModal .wk-clean-list i { color: var(--nl-tone-91b2d7, #91b2d7) !important; }
html body #vipDevModal :is(.wk-clean-btn-stripe,.wk-clean-btn-paypal) { border-radius: 7px !important; background: var(--nl-blue) !important; border: 1px solid var(--nl-blue) !important; color: white !important; box-shadow: none !important; font-weight: 600 !important; transform: none !important; }
html body #vipDevModal .wk-clean-btn-paypal { background: var(--nl-tone-1c2b40, #1c2b40) !important; border-color: var(--nl-tone-3b5575, #3b5575) !important; }
html body #vipDevModal input { background: var(--nl-tone-0c131e, #0c131e) !important; color: var(--nl-text) !important; border: 1px solid var(--nl-tone-34475f, #34475f) !important; border-radius: 7px !important; }

/* Wheel.html runs in an iframe and imports these same tokens. */
html body.nl-wheel { background: var(--nl-bg); background-image: none; color: var(--nl-text); --bg: var(--nl-bg); --panel: var(--nl-surface); --panel-2: var(--nl-card); --line: var(--nl-border); --text: var(--nl-text); --muted: var(--nl-muted); --accent: var(--nl-blue); --display: Inter, system-ui, sans-serif; }
.nl-wheel .page { max-width: 1440px; margin: auto; }
.nl-wheel .stage { background: var(--nl-tone-0c121c, #0c121c); }
.nl-wheel .stage::before { background: radial-gradient(ellipse at center,var(--nl-tone-21365044, #21365044),transparent 65%); }
.nl-wheel .side { background: var(--nl-surface); border-color: var(--nl-border); padding: 32px 28px; gap: 24px; }
.nl-wheel .brand img { width: 100px; height: 48px; object-fit: contain; border-radius: 0; }
.nl-wheel .brand span { display: none; }
.nl-wheel h1 { font-family: Inter,system-ui,sans-serif; text-transform: none; font-size: 30px; letter-spacing: -1px; font-weight: 600; }
.nl-wheel h2 { color: var(--nl-tone-bac9dd, #bac9dd); font-weight: 500; letter-spacing: .4px; }
.nl-wheel .lead { color: var(--nl-muted); line-height: 1.7; }
.nl-wheel .account { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: 9px; box-shadow: none; }
.nl-wheel .btn-discord { background: var(--nl-blue); color: white; border: 1px solid var(--nl-blue); border-radius: 7px; box-shadow: none; font-weight: 600; }
.nl-wheel .block { border-color: var(--nl-border); }
.nl-wheel .odds .name,.nl-wheel .history { color: var(--nl-tone-b5c4d8, #b5c4d8); }
.nl-wheel .wheel-box { filter: drop-shadow(0 18px 24px #0005); }
.nl-wheel .bulb.on { fill: var(--nl-tone-9fbfe7, #9fbfe7); filter: none; }
.nl-wheel .hub { background: var(--nl-soft, var(--nl-tone-d8e7fa, #d8e7fa)); color: var(--nl-tone-142237, #142237); animation: none !important; box-shadow: 0 0 0 6px var(--nl-tone-142237, #142237),0 0 0 8px var(--nl-tone-6685ac, #6685ac); }
.nl-wheel .hub:disabled { background: var(--nl-tone-192638, #192638); color: var(--nl-tone-b1c6e1, #b1c6e1); }
.nl-wheel .hub-main { font-family: Inter,system-ui,sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.5px; }
.nl-wheel .hub-sub { text-transform: none; letter-spacing: 0; }
.nl-wheel .result-card { background: var(--nl-surface); border: 1px solid var(--nl-border); border-radius: 12px; box-shadow: 0 24px 80px #0008; }
.nl-wheel .result-card button { background: var(--nl-blue); color: white; border-radius: 7px; }
html body .wk-wheel-close { background: var(--nl-tone-192536, #192536); border: 1px solid var(--nl-border); border-radius: 7px; color: var(--nl-tone-c5d3e6, #c5d3e6); font-weight: 500; }
@media (max-width: 700px) {
  html body #wkqOverlay { padding: 12px; }
  html body #wkqOverlay .wkq-dialog { padding: 20px; border-radius: 12px; }
  html body #wkqOverlay .wkq-dialog-head h2 { font-size: 23px; }
  html body #vipDevModal.wk-shop-page #vipModalContent { padding: 18px !important; margin: 0 auto !important; }
  html body #vipDevModal .wk-shop-header-left { flex-wrap: wrap !important; gap: 16px !important; }
  html body #vipDevModal .wk-shop-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; }
  html body #vipDevModal .wk-shop-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
  html body #vipDevModal .wk-clean-box { padding: 20px !important; }
  html body #vipDevModal .wk-clean-top { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .nl-wheel .side { padding: 24px 20px; }
  .nl-wheel .wheel-box { width: min(86vw,480px); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-wheel .result-card { animation: none; }
}
html body #vipDevModal .wk-shop-fixed-close { display: none !important; }
html body #vipDevModal .wk-clean-price-badge { min-width: 160px !important; padding: 14px 18px !important; flex-shrink: 0 !important; }
html body #vipDevModal .wk-clean-list li { background: var(--nl-tone-162131, #162131) !important; border-color: var(--nl-border) !important; border-radius: 7px !important; }
html body.nl-quests { background: var(--nl-bg) !important; color: var(--nl-text) !important; }
.nl-quests .dq-shell { width: min(1248px,calc(100% - 72px)); padding-top: 24px; }
.nl-quests .dq-nav { border-color: var(--nl-border); padding-bottom: 20px; }
.nl-quests .dq-brand img { width: 112px; height: 54px; border-radius: 0; }
.nl-quests .dq-brand span { display: none; }
.nl-quests .dq-back { background: var(--nl-tone-151f2e, #151f2e); border-color: var(--nl-border); color: var(--nl-tone-b7c8de, #b7c8de); border-radius: 7px; font-weight: 500; }
.nl-quests .dq-hero { padding: 34px 0 22px; }
.nl-quests .dq-kicker { color: var(--nl-highlight, var(--nl-tone-8faacb, #8faacb)); font-size: 10px; letter-spacing: 1.4px; font-weight: 600; }
.nl-quests .dq-hero h1 { color: var(--nl-text); font-size: 36px; font-weight: 600; letter-spacing: -1px; }
.nl-quests .dq-hero p { color: var(--nl-muted); font-size: 13px; line-height: 1.8; }
html body.nl-quests #wkqPage { padding: 0 !important; margin: 0 !important; max-width: none !important; }
html body.nl-quests #wkqPage #wkqst { margin: 0; padding: 0; border: 0; background: none; }
@media(max-width:700px) { .nl-quests .dq-shell { width: calc(100% - 36px); } .nl-quests .dq-hero h1 { font-size: 30px; } }
@media (max-width: 700px) {
  html body #vipDevModal .wk-shop-header-titles { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; }
  html body #vipDevModal .wk-shop-header-titles h1 { font-size: 23px !important; line-height: 1.25 !important; white-space: nowrap !important; }
  html body #vipDevModal .wk-shop-header-badge { white-space: nowrap !important; }
}