/* VIP Rewards modal: black card, red actions, tier gems. Written dark (the modal is dark in every theme). */
.vip-layer{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px}
.vip-back{position:absolute;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(3px)}
.vip-card{position:relative;width:min(880px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#0f1114;color:#eef1f5;border:1px solid #2a2e35;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:26px 34px 22px;font-family:Manrope,system-ui,sans-serif;display:grid;gap:20px}
.vip-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#eef1f5;font-size:20px;cursor:pointer}
.vip-x:hover{background:#1c1f25}
.vip-logo{width:130px;height:32px;background:url(/art/sublines-logo.png) left center/contain no-repeat}
.vip-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.vip-eyebrow{margin:0 0 6px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#a8afb9}
.vip-head h2{margin:0;font:900 clamp(26px,3.4vw,36px)/1.05 Manrope,sans-serif;letter-spacing:-.02em;color:#fff;text-transform:none}
.vip-sub{margin:6px 0 0;color:#b9c0ca;font:600 16px Manrope,sans-serif}
.vip-rank{display:flex;align-items:center;gap:14px}
.vip-pill{padding:9px 22px;border:1.5px solid #eef1f5;border-radius:999px;font:800 16px Manrope,sans-serif;color:#fff;white-space:nowrap}
/* gems */
.vip-gem .g1{fill:var(--g1)}.vip-gem .g2{fill:var(--g2)}.vip-gem .g3{fill:var(--g3)}.vip-gem .g4{fill:var(--g4)}.vip-gem .g5{fill:var(--g5)}
.vip-gem{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));flex:none}
.vg-bronze{--g1:#b8733a;--g2:#8e5427;--g3:#d99a63;--g4:#6f3f1c;--g5:#f0c49b}
.vg-silver{--g1:#b7bec8;--g2:#8b939e;--g3:#dde2e8;--g4:#6c737d;--g5:#f6f8fa}
.vg-gold{--g1:#d9ad3c;--g2:#b18526;--g3:#f2d27a;--g4:#8a6418;--g5:#fff0b8}
.vg-platinum{--g1:#9fb3c2;--g2:#74889a;--g3:#cfe0ea;--g4:#596b7b;--g5:#eef7fb}
.vg-diamond{--g1:#78b7ff;--g2:#4a8ee6;--g3:#b9dcff;--g4:#2f6cc0;--g5:#e9f5ff}
/* progress */
.vip-prog{border:1px solid #2a2e35;border-radius:14px;padding:16px 22px;display:grid;gap:10px;background:#121418}
.vp-row{display:flex;justify-content:space-between;gap:10px;font:800 15px Manrope,sans-serif;color:#fff}
.vp-sub{font:600 14px Manrope,sans-serif;color:#b9c0ca}
.vp-bar{height:10px;border-radius:99px;background:#2a2e35;overflow:hidden}
.vp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff1f3d,#e5132f)}
.vp-note{margin:0;font:600 12px Manrope,sans-serif;color:#8a929d}
.vp-w0{width:0}.vp-w2{width:2%}.vp-w4{width:4%}.vp-w6{width:6%}.vp-w8{width:8%}.vp-w10{width:10%}.vp-w12{width:12%}.vp-w14{width:14%}.vp-w16{width:16%}.vp-w18{width:18%}.vp-w20{width:20%}.vp-w22{width:22%}.vp-w24{width:24%}.vp-w26{width:26%}.vp-w28{width:28%}.vp-w30{width:30%}.vp-w32{width:32%}.vp-w34{width:34%}.vp-w36{width:36%}.vp-w38{width:38%}.vp-w40{width:40%}.vp-w42{width:42%}.vp-w44{width:44%}.vp-w46{width:46%}.vp-w48{width:48%}.vp-w50{width:50%}.vp-w52{width:52%}.vp-w54{width:54%}.vp-w56{width:56%}.vp-w58{width:58%}.vp-w60{width:60%}.vp-w62{width:62%}.vp-w64{width:64%}.vp-w66{width:66%}.vp-w68{width:68%}.vp-w70{width:70%}.vp-w72{width:72%}.vp-w74{width:74%}.vp-w76{width:76%}.vp-w78{width:78%}.vp-w80{width:80%}.vp-w82{width:82%}.vp-w84{width:84%}.vp-w86{width:86%}.vp-w88{width:88%}.vp-w90{width:90%}.vp-w92{width:92%}.vp-w94{width:94%}.vp-w96{width:96%}.vp-w98{width:98%}.vp-w100{width:100%}
/* sections */
.vs-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.vs-head h3{margin:0;font:900 24px Manrope,sans-serif;color:#fff;letter-spacing:-.01em}
.vs-day{display:inline-flex;align-items:center;gap:8px;font:800 15px Manrope,sans-serif;color:#fff}
.vs-day svg{width:22px;height:22px}
.vd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
.vd{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border:1px solid #2a2e35;border-radius:10px;background:#121418;text-align:center}
.vd b{font:800 14px Manrope,sans-serif;color:#fff}
.vd-ic svg{width:32px;height:32px;display:block}
.vd em{font:600 13px Manrope,sans-serif;font-style:normal;color:#b9c0ca}
.vd small{font:700 11px Manrope,sans-serif;color:#8a929d}
.vd-ready{border:1.5px solid #e5132f;box-shadow:0 0 0 1px #e5132f inset,0 0 24px rgba(229,19,47,.25)}
.vd-ready em{color:#fff;font-weight:800}
.vd-claimed small{text-decoration:line-through}
.vd-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;font:600 14px Manrope,sans-serif;color:#b9c0ca}
.vd-foot .primary{min-width:240px;min-height:44px;border-radius:9px}
.vd-foot .primary:disabled{background:#2a2e35!important;color:#8a929d!important;border-color:#2a2e35!important;opacity:1}
.vip-rewards{border-top:1px solid #2a2e35;padding-top:18px}
.vr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vr{border:1px solid #2a2e35;border-radius:12px;padding:20px 22px;display:grid;gap:8px;background:#121418}
.vr-top{display:flex;align-items:center;gap:14px}
.vr-ic svg{width:44px;height:44px;display:block}
.vr h4{margin:0;font:900 22px Manrope,sans-serif;color:#fff}
.vr-title{margin:0;font:700 15px Manrope,sans-serif;color:#d5dae1}
.vr-amt{margin:0;font:800 15px Manrope,sans-serif;color:#fff}
.vr-st{margin:4px 0 0;display:flex;align-items:center;gap:8px;font:600 14px Manrope,sans-serif;color:#b9c0ca}
.vr-st i{width:10px;height:10px;border-radius:50%;background:#59606b}
.vr-st i.on{background:#16c45a;box-shadow:0 0 0 3px rgba(22,196,90,.18)}
.vr-btn{min-height:48px;border-radius:9px;font-size:17px!important;margin-top:6px}
.vr-btn.secondary:disabled{opacity:1;color:#8a929d!important;background:#181b20!important;border-color:#2a2e35!important}
.vip-link{border:0;background:none;color:#eef1f5;font:700 14px Manrope,sans-serif;cursor:pointer}
.vip-link:hover{text-decoration:underline;text-underline-offset:3px}
.vip-hist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.vip-hist li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:8px 12px;border-radius:8px;background:#121418;border:1px solid #23272e;font:600 13px Manrope,sans-serif;color:#d5dae1}
.vip-hist b{color:#fff}.vip-hist small{color:#8a929d}
.vip-empty{display:block!important;color:#8a929d!important}
.vip-foot{display:flex;justify-content:space-between;gap:12px;font:600 13px Manrope,sans-serif;color:#8a929d}
.vip-rules{border:1px solid #2a2e35;border-radius:12px;padding:14px 18px;background:#121418}
.vip-rules h4{margin:0 0 8px;font:800 15px Manrope,sans-serif;color:#fff}
.vip-rules ul{margin:0;padding-left:18px;display:grid;gap:6px;font:500 13px/1.5 Manrope,sans-serif;color:#c3c9d2}
.vip-rules b{color:#fff}
/* icons */
.ic-ok{fill:#16c45a}.ic-stroke{fill:none;stroke:#04130a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:#c9cfd8}.ic-line{fill:none;stroke:#c9cfd8;stroke-width:1.8;stroke-linecap:round}
.ic-red{fill:#e5132f}.ic-red2{fill:#ff3352}.ic-white{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}.ic-dot{fill:#c9cfd8}
.vd-7 .ic-fill{fill:#3a3f47}
/* entry in the profile menu */
.vip-menu-item{display:flex!important;align-items:center;gap:10px}
.vip-menu-item .vip-gem{width:20px;height:20px}
.vip-menu-item small{margin-left:auto;font:800 11px Manrope,sans-serif;color:#a8afb9}
@media (max-width:720px){
  .vip-card{padding:20px 16px;gap:16px}
  .vd-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vr-grid{grid-template-columns:minmax(0,1fr)}
  .vd-foot .primary{width:100%;min-width:0}
  .vip-head h2{font-size:26px}
}