/* NEXBET — VIP: cabinet tab #vip and the /vip page (includes/vip-block.tpl, vip.tpl). Prefix nxv-.
   Loaded after style.css (head.tpl). Tokens only, both themes. The level card and its progress track are dark in BOTH themes (NX-63):
   the track is a translucent white, never var(--skeleton) (a cream bar on the dark card read as 100 %). */

.nxv{display:flex;flex-direction:column;gap:18px;min-width:0;container-type:inline-size;container-name:nxv}
.nxv-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.nxv-h{margin:0;font-size:16px;font-weight:800}

/* level card */
.nxv-hero{display:flex;align-items:center;gap:18px;min-width:0;padding:18px 20px;border-radius:var(--r-lg);background:var(--balance-bg) padding-box,var(--gold-frame) border-box;border:1px solid transparent;color:#fff}
.nxv-hero--glass{background:#0b0a0dcc;border:1px solid #ffffff1a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nxv-hero__in{flex:1;min-width:0}
.nxv-hero__k{display:block;font-size:12px;font-weight:600;color:#f2c14b}
.nxv-hero__n{display:block;margin-bottom:10px;font-size:22px;font-weight:900;line-height:1.15;overflow-wrap:anywhere}
.nxv-bar{height:8px;border-radius:4px;background:#ffffff26;box-shadow:inset 0 1px 2px #0006;overflow:hidden}
.nxv-bar i{display:block;height:100%;max-width:100%;border-radius:4px;background:linear-gradient(90deg,#ffd768,#fbc654 50%,#eaab3c);box-shadow:0 0 12px -2px #f2b63299}
.nxv-hero__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:#d7dbe3;font-variant-numeric:tabular-nums}
.nxv-hero__next{min-width:0;overflow-wrap:anywhere}
.nxv-hero__pct{flex:none;font-size:13px;font-weight:800;color:#f2c14b}
.nxv-hero__ex{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff1f;font-size:12px;color:#d7dbe3}
.nxv-hero__ex b{color:#f2c14b;font-size:16px;font-variant-numeric:tabular-nums}
.nxv-hero__ex .nx-btn{flex:0 0 auto}

/* level emblem: engine picture, or an initial on a gold disc when the picture is missing */
.nxv-medal{position:relative;flex:none;display:grid;place-items:center;width:64px;height:64px;font-size:22px;font-weight:900;color:#1a1206}
.nxv-medal b{display:none}
.nxv-medal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.nxv-medal.is-nopic{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#b9801f);box-shadow:inset 0 2px 0 #ffffff80,0 6px 18px -6px #000}
.nxv-medal.is-nopic b{display:block}.nxv-medal.is-nopic img{display:none}
.nxv-medal--sm{width:44px;height:44px;font-size:16px}

/* program intro (no level data yet) */
.nxv-intro{padding:18px 20px;border-radius:var(--r-lg);background:var(--panel) padding-box,var(--panel-border) border-box;border:1px solid transparent;box-shadow:var(--shadow)}
.nxv-intro b{display:block;font-size:16px;font-weight:800}.nxv-intro p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* points + exchange */
.nxv-pts{display:flex;flex-direction:column;gap:12px;min-width:0}
.nxv-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.nxv-tile{min-width:0;padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.nxv-tile small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.nxv-tile b{display:block;margin-top:4px;font-size:22px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nxv-tile--main{border-color:var(--gold-line);background:linear-gradient(180deg,#f2c14b1a,#f2c14b08),var(--surface-2)}
.nxv-tile--main b{color:var(--gold-text)}
.nxv-ex{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 20px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line)}
.nxv-ex__t{margin:0;font-size:15px;font-weight:800}
.nxv-ex__rate{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.nxv-ex__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.nxv-ex__f{flex:2 1 220px;min-width:0}
.nxv-ex__inrow{display:flex;gap:8px}.nxv-ex__inrow input{flex:1;min-width:0}.nxv-ex__inrow .nx-btn{flex:none;min-height:46px}
.nxv-ex__get{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.nxv-ex__get b{display:flex;align-items:center;min-height:46px;font-size:20px;font-weight:800;color:var(--gold-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nxv-ex__btn{flex:0 0 auto;min-height:46px;padding:0 28px}
.nxv-ex__hint{margin:0;padding:10px 12px;border-radius:var(--r);background:var(--hover);font-size:12.5px;line-height:1.5;color:var(--muted)}
.nxv-ex__hint[hidden]{display:none}
.nxv-ex input:disabled,.nxv-ex button:disabled{opacity:.5;cursor:not-allowed;filter:none}
.nxv-ex .answer{text-align:left}

/* levels */
.nxv-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px;align-items:stretch}
.nxv-lv{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-radius:var(--r-lg);background:var(--panel) padding-box,var(--panel-border) border-box;border:1px solid transparent;box-shadow:var(--shadow)}
.nxv-lv--cur{background:var(--panel) padding-box,var(--gold-frame) border-box;border-width:1.5px;box-shadow:var(--shadow),0 0 30px -12px #f2b63280}
.nxv-lv--next{background:var(--panel);border:1px dashed var(--gold-line)}
.nxv-lv--lock .nxv-medal{opacity:.55;filter:grayscale(.7)}
.nxv-lv__h{display:flex;align-items:center;gap:12px;min-width:0}
.nxv-lv__t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.nxv-lv__n{font-size:15px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.nxv-lv__tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;line-height:1.5;border:1px solid}
.nxv-lv__tag .nx-ic{width:12px;height:12px;stroke-width:2.4}
.nxv-lv__tag--cur{color:var(--gold-text);border-color:var(--gold-line);background:#f2c14b1f}
.nxv-lv__tag--done{color:var(--success);border-color:color-mix(in oklab,var(--success) 35%,transparent);background:color-mix(in oklab,var(--success) 14%,transparent)}
.nxv-lv__tag--next{color:var(--wait);border-color:color-mix(in oklab,var(--wait) 35%,transparent);background:color-mix(in oklab,var(--wait) 14%,transparent)}
.nxv-lv__dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:12px}
.nxv-lv__dl dt{color:var(--muted)}.nxv-lv__dl dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nxv-lv__d{font-size:12.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.nxv-lv__d>*:first-child{margin-top:0}.nxv-lv__d>*:last-child{margin-bottom:0}.nxv-lv__d p{margin:0 0 6px}.nxv-lv__d ul,.nxv-lv__d ol{margin:0 0 6px;padding-left:18px}.nxv-lv__d img{max-width:100%;height:auto}

/* rules */
.nxv-rules__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nxv-rules__l li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--muted)}
.nxv-rules__l i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:12px;font-weight:900;color:var(--accent-ink);background:var(--gold-grad)}
.nxv-rules__l span{min-width:0;overflow-wrap:anywhere}

/* /vip page: points + exchange next to the rules, levels full width below */
.nxv-page{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.nxv-page__main,.nxv-page__side{min-width:0}
.nxv--levels .nxv-h{font-size:20px;font-weight:900}
.nxv--levels .nxv-levels{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.nxv--points .nxv-pts{scroll-margin-top:84px}
.nx-vip__me .nxv-hero{padding:18px 20px}

/* narrow containers (cabinet on phones, side-by-side columns) */
@container nxv (max-width:479px){
  .nxv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.nxv-tile--main{grid-column:1/-1}
  .nxv-hero{gap:14px;padding:16px}.nxv-medal:not(.nxv-medal--sm){width:52px;height:52px;font-size:18px}.nxv-hero__n{font-size:19px}
  .nxv-ex{padding:16px}.nxv-ex__f,.nxv-ex__get{flex:1 1 100%}.nxv-ex__btn{flex:1 1 100%}
}
@media (max-width:899px){.nxv-page{grid-template-columns:minmax(0,1fr);gap:18px}}