/* ═══════════════════════════════════════════
   KARIND — Customer App
   style.css
═══════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* ── TOKENS ── */
:root {
  --bg: #0a0a0a;
  --card: #161616;
  --card2: #222222;
  --card3: #2a2a2a;
  --red: #e50914;
  --red-d: #b2070f;
  --red-glow: rgba(229,9,20,.18);
  --tx: #ffffff;
  --tx2: #c0c0cc;
  --muted: #888898;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --green: #1db954;
  --gold: #f5c518;
  --purple: #7c6fff;
  --play-accent: #ff3c5c;
  --sh-bg: #0f0f0f;
  --bnav-bg: rgba(8,8,8,0.96);
  --inp-bg: #1e1e1e;
  --inp-ph: #444;
  --profile-grad: linear-gradient(140deg, rgba(229,9,20,.14) 0%, rgba(229,9,20,.04) 100%);
  --profile-bor: rgba(229,9,20,.18);
  --play-grad: linear-gradient(140deg, rgba(255,60,92,.16) 0%, rgba(229,9,20,.06) 100%);
  --play-bor: rgba(255,60,92,.22);
}

[data-theme="light"] {
  --bg: #f2f2f7;
  --card: #ffffff;
  --card2: #e8e8ed;
  --card3: #d8d8df;
  --tx: #0d0d0d;
  --tx2: #3a3a4a;
  --muted: #6e6e80;
  --border: rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.12);
  --gold: #b8940a;
  --sh-bg: #ffffff;
  --bnav-bg: rgba(242,242,247,0.96);
  --inp-bg: #e4e4ea;
  --inp-ph: #9999aa;
  --profile-grad: linear-gradient(140deg, rgba(229,9,20,.07) 0%, rgba(229,9,20,.02) 100%);
  --profile-bor: rgba(229,9,20,.12);
  --play-grad: linear-gradient(140deg, rgba(255,60,92,.08) 0%, rgba(229,9,20,.03) 100%);
  --play-bor: rgba(255,60,92,.15);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--tx);
  -webkit-tap-highlight-color: transparent;
  transition: background .25s, color .25s;
}

.screen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  transition: background .25s;
}

/* ── PAGES ── */
.page { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.page.active { display: flex; }
.scroll { flex: 1; overflow-y: scroll; scrollbar-width: none; padding-bottom: 20px; }
.scroll::-webkit-scrollbar { display: none; }

/* ── TOPBAR ── */
.topbar {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: .5px solid transparent;
  transition: border-color .3s, background .25s;
  padding-top: max(13px, env(safe-area-inset-top));
}
.topbar.sc { border-bottom-color: var(--border2); }
.tb-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px 0; }
.tb-brand { display: flex; align-items: center; gap: 8px; }
.tb-logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #e50914, #8f0609);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(229,9,20,.32);
  flex-shrink: 0;
}
.tb-bname { font-size: 14px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; letter-spacing: -.3px; }
.tb-bsub { font-size: 8px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 1px; }
.tb-auth { display: flex; gap: 6px; }
.greet { padding: 11px 16px 4px; overflow: hidden; max-height: 66px; opacity: 1; transition: max-height .3s, opacity .3s, padding .3s; }
.topbar.sc .greet { max-height: 0; opacity: 0; padding: 0 16px; }
.g-label { font-size: 9px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 2px; }
.g-name { font-size: 19px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; letter-spacing: -.3px; }
.srow { padding: 5px 12px 10px; }
.srch { background: var(--card2); border-radius: 12px; border: .5px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 9px 13px; transition: background .25s; }
.srch input { flex: 1; background: none; border: none; outline: none; font-size: 13px; color: var(--tx); font-family: 'Inter', sans-serif; }
.srch input::placeholder { color: var(--inp-ph); }

/* ── PILLS ── */
.pill { padding: 7px 13px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; border: none; white-space: nowrap; transition: transform .12s, background .15s; }
.pill:active { transform: scale(.93); }
.pill-primary { background: var(--red); color: #fff; }
.pill-outline { background: transparent; color: var(--tx); border: 1px solid var(--border2); }

/* ── BOTTOM NAV ── */
.bnav {
  flex-shrink: 0;
  background: var(--bnav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: .5px solid var(--border2);
  padding: 7px 0 max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: background .25s;
}
.ni { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; user-select: none; background: none; border: none; padding: 2px 6px; min-width: 0; flex: 1; }
.nico { width: 38px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background .15s; }
.nico.on { background: var(--red-glow); }
.nico.on-play { background: rgba(255,60,92,.18); }
.nl { font-size: 9px; color: var(--muted); font-family: 'Inter', sans-serif; transition: color .15s; white-space: nowrap; }
.nl.on { color: var(--red); font-weight: 700; }
.nl.on-play { color: var(--play-accent); font-weight: 700; }

/* ── PLAY NAV BADGE ── */
.play-dot { width: 5px; height: 5px; background: var(--play-accent); border-radius: 50%; position: absolute; top: -1px; right: -1px; }

/* ── BANNER ── */
.bwrap { overflow: hidden; margin-bottom: 16px; }
.btrack { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.bslide { min-width: 100%; padding: 0 13px; }
.bcard { border-radius: 20px; height: 162px; position: relative; overflow: hidden; cursor: pointer; }
.bbg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bol { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.3) 55%, transparent 100%); }
.bcont { position: absolute; inset: 0; padding: 14px 17px; display: flex; flex-direction: column; justify-content: flex-end; }
.btag { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; margin-bottom: 7px; display: inline-block; width: fit-content; }
.btit { font-size: 18px; font-weight: 900; color: #fff; font-family: 'Poppins', sans-serif; line-height: 1.2; margin-bottom: 4px; }
.bsub { font-size: 10px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.bacts { display: flex; align-items: center; gap: 10px; }
.bbt { padding: 7px 17px; background: var(--red); color: #fff; border: none; border-radius: 20px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.bbt:active { background: var(--red-d); }
.bgh { font-size: 11px; color: rgba(255,255,255,.72); cursor: pointer; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: var(--card2); transition: .3s; cursor: pointer; }
.dot.on { width: 18px; background: var(--red); }

/* ── EQ ANIMATION ── */
@keyframes eq1 { 0%,100%{height:5px} 50%{height:16px} }
@keyframes eq2 { 0%,100%{height:12px} 50%{height:4px} }
@keyframes eq3 { 0%,100%{height:8px} 50%{height:18px} }
@keyframes eq4 { 0%,100%{height:15px} 50%{height:6px} }
@keyframes eq5 { 0%,100%{height:6px} 50%{height:14px} }
.eq { width: 3px; border-radius: 2px; display: inline-block; }
.eq:nth-child(1) { animation: eq1 .9s ease-in-out infinite; }
.eq:nth-child(2) { animation: eq2 .7s ease-in-out infinite; }
.eq:nth-child(3) { animation: eq3 1.1s ease-in-out infinite; }
.eq:nth-child(4) { animation: eq4 .8s ease-in-out infinite; }
.eq:nth-child(5) { animation: eq5 1s ease-in-out infinite; }

/* ── SECTIONS ── */
.sec-hd { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 9px; }
.sec-t { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.sec-a { font-size: 11px; color: var(--red); font-weight: 600; cursor: pointer; }
.hs { display: flex; gap: 11px; padding: 0 13px; overflow-x: scroll; scrollbar-width: none; margin-bottom: 16px; }
.hs::-webkit-scrollbar { display: none; }

/* ── SONG CARD ── */
.sc-card { min-width: 112px; max-width: 112px; flex-shrink: 0; cursor: pointer; }
.sc-img {
  width: 112px; height: 112px; border-radius: 13px;
  background-size: cover; background-position: center;
  margin-bottom: 7px; position: relative; overflow: hidden;
  background-color: var(--card2);
}
.sc-play { position: absolute; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.sc-card:active .sc-play { opacity: 1; }
.sc-rank { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.74); backdrop-filter: blur(6px); border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 800; color: var(--gold); font-family: 'Poppins', sans-serif; }
.sc-badge { position: absolute; top: 6px; right: 6px; font-size: 7px; font-weight: 800; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.sc-badge-genre { background: rgba(229,9,20,.22); border: .5px solid rgba(229,9,20,.35); color: #ff8080; }
.sc-badge-new { background: rgba(29,158,117,.28); border: .5px solid rgba(29,158,117,.45); color: #5dd9a0; }
.sc-badge-locked { background: rgba(255,60,92,.2); border: .5px solid rgba(255,60,92,.4); color: #ff7a8a; }
.sc-tt { font-size: 11.5px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ar { font-size: 10px; color: var(--tx2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── LIST ITEM ── */
.lwrap { padding: 0 13px 8px; }
.li {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 15px;
  padding: 11px 12px; margin-bottom: 7px;
  border: .5px solid var(--border); cursor: pointer;
  transition: transform .12s, background .15s;
}
.li:active { transform: scale(.98); background: var(--card2); }
.li-img { width: 52px; height: 52px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); position: relative; overflow: hidden; }
.li-play-ov { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.li:active .li-play-ov { opacity: 1; }
.li-bd { flex: 1; min-width: 0; }
.li-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.li-tt { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.li-genre { flex-shrink: 0; font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(124,111,255,.18); color: #a29aff; border: .5px solid rgba(124,111,255,.28); text-transform: uppercase; letter-spacing: .5px; }
.li-sub { font-size: 10.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-chev { flex-shrink: 0; opacity: .28; }

/* ── GENRE CHIPS ── */
.gchips { display: flex; gap: 7px; padding: 0 13px 12px; overflow-x: scroll; scrollbar-width: none; }
.gchips::-webkit-scrollbar { display: none; }
.gchip { flex-shrink: 0; padding: 6px 13px; background: var(--card); border: .5px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: .15s; }
.gchip.on { background: var(--red); color: #fff; border-color: var(--red); }

/* ── VENUE CHIPS ── */
.vchips { display: flex; gap: 7px; padding: 0 13px 12px; overflow-x: scroll; scrollbar-width: none; }
.vchips::-webkit-scrollbar { display: none; }
.vchip { flex-shrink: 0; padding: 7px 13px; background: var(--card); border: .5px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: .15s; }
.vchip.on { background: var(--red-glow); color: var(--red); border-color: rgba(229,9,20,.3); }

/* ── VENUE SECTION ── */
.venue-hd { display: flex; align-items: center; gap: 9px; padding: 0 15px 9px; }
.venue-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.venue-title { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.venue-sub { font-size: 10px; color: var(--muted); }

/* ── SHEETS ── */
.sh-ov { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.74); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sh-ov.on { opacity: 1; pointer-events: all; }
.sh-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--sh-bg); border-radius: 26px 26px 0 0;
  border-top: .5px solid var(--border2);
  z-index: 901; transform: translateY(100%);
  transition: transform .36s cubic-bezier(.25,.46,.45,.94), background .25s;
  max-height: 93%; display: flex; flex-direction: column;
  padding-bottom: max(env(safe-area-inset-bottom), 14px);
}
.sh-sheet.on { transform: translateY(0); }
.sh-handle { width: 38px; height: 4px; background: var(--card3); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }
.sh-hd { padding: 14px 18px 8px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.sh-title { font-size: 16px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.sh-close { width: 28px; height: 28px; background: var(--card2); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sh-body { padding: 6px 18px 22px; overflow-y: auto; scrollbar-width: none; flex: 1; }
.sh-body::-webkit-scrollbar { display: none; }
.sh-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

/* ── FORM ELEMENTS ── */
.f-group { margin-bottom: 10px; }
.f-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; display: block; }
.f-inp {
  width: 100%; background: var(--inp-bg); border-radius: 11px;
  border: .5px solid var(--border); padding: 12px 14px;
  font-size: 13px; color: var(--tx); font-family: 'Inter', sans-serif;
  outline: none; transition: border-color .2s, background .25s;
}
.f-inp:focus { border-color: rgba(229,9,20,.5); }
.f-inp::placeholder { color: var(--inp-ph); }
.f-tabs { display: flex; background: var(--card2); border-radius: 12px; padding: 3px; margin-bottom: 13px; }
.f-tab { flex: 1; padding: 8px; border: none; background: none; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s; }
.f-tab.on { background: var(--card); color: var(--tx); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.f-err { font-size: 10.5px; color: #ff6b6b; margin-top: 4px; display: none; }
.f-err.on { display: block; }
.f-link { font-size: 11px; color: var(--red); font-weight: 600; cursor: pointer; }
.f-footer { text-align: center; font-size: 11px; color: var(--muted); margin-top: 13px; }
.f-footer span { color: var(--red); font-weight: 700; cursor: pointer; }
.pw-wrap { position: relative; }
.pw-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 4px; }
.sh-div { text-align: center; font-size: 10px; color: var(--muted); margin: 11px 0; position: relative; }
.sh-div::before, .sh-div::after { content: ''; position: absolute; top: 50%; width: 42%; height: .5px; background: var(--border); }
.sh-div::before { left: 0; } .sh-div::after { right: 0; }

/* ── BUTTONS ── */
.btn-p { width: 100%; padding: 13px; background: var(--red); color: #fff; border: none; border-radius: 13px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; margin-bottom: 9px; transition: background .15s; }
.btn-p:active { background: var(--red-d); }
.btn-s { width: 100%; padding: 13px; background: var(--card); color: var(--tx); border: .5px solid var(--border2); border-radius: 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.btn-s:active { background: var(--card2); }
.btn-ghost { width: 100%; padding: 11px; background: none; color: var(--muted); border: .5px solid var(--border); border-radius: 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

/* ── OTP ── */
.otp-row { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.otp-box { width: 44px; height: 52px; background: var(--inp-bg); border: .5px solid var(--border); border-radius: 11px; font-size: 21px; font-weight: 800; color: var(--tx); text-align: center; font-family: 'Poppins', sans-serif; outline: none; transition: border-color .2s; }
.otp-box:focus { border-color: var(--red); }
.step-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 18px; }
.step-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--card2); transition: .3s; }
.step-dot.on { width: 22px; background: var(--red); }
.step-dot.done { background: var(--green); }

/* ── DETAIL SHEET ── */
.ds-hero { width: 100%; aspect-ratio: 1; max-height: 190px; border-radius: 17px; background-size: cover; background-position: center; margin-bottom: 15px; position: relative; overflow: hidden; }
.ds-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent 55%); }
.ds-title { font-size: 20px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 3px; }
.ds-artist { font-size: 13px; color: var(--tx2); margin-bottom: 12px; }
.ds-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ds-chip { font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ds-info { background: var(--card); border-radius: 15px; padding: 4px 14px; border: .5px solid var(--border); margin-bottom: 14px; }
.ds-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--border); }
.ds-row:last-child { border-bottom: none; }
.ds-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-lbl { font-size: 9px; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.ds-val { font-size: 13px; color: var(--tx); font-weight: 700; }
.preview-box { background: var(--card); border-radius: 15px; padding: 12px 14px; border: .5px solid var(--border); margin-bottom: 14px; }
.preview-lbl { font-size: 9px; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.preview-player { display: flex; align-items: center; gap: 11px; }
.preview-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--red); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .1s; }
.preview-btn:active { transform: scale(.88); }
.preview-prog { flex: 1; }
.preview-bar { width: 100%; height: 3px; background: var(--card2); border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.preview-fill { height: 100%; background: var(--red); border-radius: 2px; width: 0%; transition: width .22s linear; }
.preview-times { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }
.preview-notice { font-size: 9px; color: var(--muted); margin-top: 8px; text-align: center; opacity: .7; }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--card2); color: var(--tx);
  padding: 10px 20px; border-radius: 22px;
  font-size: 12px; font-weight: 600;
  opacity: 0; transition: all .28s; z-index: 1100;
  pointer-events: none;
  box-shadow: 0 4px 22px rgba(0,0,0,.32);
  border: .5px solid var(--border2);
  white-space: nowrap; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════
   PAGE: BERITA
══════════════════════════════════ */
.pg-header { flex-shrink: 0; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.pg-h1 { font-size: 20px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.pg-h2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.news-hero { margin: 10px 13px 14px; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; }
.news-hero-img { height: 172px; background-size: cover; background-position: center; }
.news-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.86), transparent 52%); }
.news-hero-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; }
.news-tag { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-bottom: 7px; }
.news-hero-t { font-size: 16px; font-weight: 800; color: #fff; font-family: 'Poppins', sans-serif; line-height: 1.3; margin-bottom: 3px; }
.news-hero-d { font-size: 10px; color: rgba(255,255,255,.58); }
.news-list { padding: 0 13px; }
.news-card { display: flex; gap: 11px; background: var(--card); border-radius: 15px; padding: 11px; margin-bottom: 9px; border: .5px solid var(--border); cursor: pointer; transition: transform .12s, background .15s; }
.news-card:active { transform: scale(.98); background: var(--card2); }
.news-card-img { width: 68px; height: 68px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); }
.news-card-bd { flex: 1; min-width: 0; }
.news-card-t { font-size: 12.5px; font-weight: 700; color: var(--tx); line-height: 1.4; margin-bottom: 3px; font-family: 'Plus Jakarta Sans', sans-serif; }
.news-card-d { font-size: 10px; color: var(--muted); }
.news-sh-img { width: 100%; height: 168px; border-radius: 15px; background-size: cover; background-position: center; margin-bottom: 14px; }
.news-sh-t { font-size: 19px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; line-height: 1.3; margin-bottom: 5px; margin-top: 8px; }
.news-sh-meta { font-size: 10px; color: var(--muted); margin-bottom: 14px; }
.news-sh-p { font-size: 12.5px; color: var(--tx2); line-height: 1.75; margin-bottom: 11px; }
.news-hl { background: rgba(229,9,20,.06); border: .5px solid rgba(229,9,20,.2); border-radius: 13px; padding: 13px 15px; font-size: 12px; color: var(--red); line-height: 1.6; margin-bottom: 10px; }
[data-theme="light"] .news-hl { background: rgba(229,9,20,.04); }

/* ══════════════════════════════════
   PAGE: PROFIL
══════════════════════════════════ */
.prof-topbar { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.prof-topbar-title { font-size: 18px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.prof-topbar-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.prof-toggles { display: flex; gap: 7px; }
.toggle-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: .5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background .15s; flex-shrink: 0; }
.toggle-btn:active { transform: scale(.9); }
.toggle-btn.lang { font-size: 10px; font-weight: 800; font-family: 'Inter', sans-serif; color: var(--tx); }

/* Profile Card */
.profile-card { margin: 14px; background: var(--profile-grad); border-radius: 20px; padding: 20px; border: .5px solid var(--profile-bor); }
.profile-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #e50914, #8f0609); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; font-family: 'Poppins', sans-serif; margin-bottom: 11px; }
.profile-name { font-size: 17px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 2px; }
.profile-email { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(124,111,255,.16); color: #a29aff; border: .5px solid rgba(124,111,255,.28); }

/* Active License Card */
.license-card { margin: 0 14px 14px; background: linear-gradient(135deg, rgba(29,185,84,.14), rgba(29,185,84,.04)); border-radius: 18px; padding: 16px; border: .5px solid rgba(29,185,84,.22); }
.license-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(29,185,84,.18); color: var(--green); border: .5px solid rgba(29,185,84,.3); margin-bottom: 10px; }
.license-name { font-size: 16px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 3px; }
.license-meta { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.slot-bar-wrap { margin-bottom: 4px; }
.slot-bar { height: 5px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.slot-fill { height: 100%; background: linear-gradient(90deg, var(--green), #1ed760); border-radius: 3px; transition: width .4s ease; }
.slot-txt { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px; }

/* Section block */
.section-block { margin: 0 14px 14px; }
.section-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 9px; padding-left: 1px; }

/* Upgrade Cards */
.upg-card { background: var(--card); border-radius: 15px; padding: 13px 14px; border: .5px solid var(--border); margin-bottom: 7px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: transform .12s, background .15s; }
.upg-card:active { transform: scale(.98); background: var(--card2); }
.upg-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.upg-t { font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 2px; font-family: 'Plus Jakarta Sans', sans-serif; }
.upg-s { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* Menu Items */
.menu-item { display: flex; align-items: center; gap: 11px; background: var(--card); border-radius: 13px; padding: 12px 13px; margin-bottom: 6px; cursor: pointer; border: .5px solid var(--border); transition: transform .12s, background .15s; }
.menu-item:active { transform: scale(.98); }
.menu-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-t { font-size: 13px; font-weight: 600; color: var(--tx); flex: 1; }

/* Hero (logged out) */
.prof-hero { padding: 22px 18px 18px; text-align: center; }
.prof-logo-big { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(135deg, #e50914, #8f0609); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 6px 22px rgba(229,9,20,.28); }
.prof-hero-t { font-size: 21px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.prof-hero-s { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.prof-btns { display: flex; gap: 9px; padding: 0 18px 18px; }
.prof-btns .btn-s, .prof-btns .btn-p { flex: 1; margin-bottom: 0; }
.ben-card { margin: 0 14px 14px; background: var(--card); border-radius: 18px; padding: 13px 15px; border: .5px solid var(--border); }
.ben-title { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.ben-item { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: .5px solid var(--border); }
.ben-item:last-child { border-bottom: none; }
.ben-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ben-t { font-size: 12.5px; font-weight: 700; color: var(--tx); margin-bottom: 1px; }
.ben-s { font-size: 10.5px; color: var(--muted); }

/* Package Cards */
.pkg-card {
  background: var(--card); border-radius: 18px; padding: 16px;
  border: .5px solid var(--border); margin-bottom: 10px; cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.pkg-card:active { transform: scale(.98); }
.pkg-card.selected { border-color: var(--red); background: var(--red-glow); }
.pkg-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pkg-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pkg-name { font-size: 15px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 2px; }
.pkg-price { font-size: 12px; color: var(--muted); }
.pkg-price b { color: var(--tx); font-size: 16px; }
.pkg-slots { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.pkg-desc { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 7px; }
.pkg-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); display: none; align-items: center; justify-content: center; }
.pkg-card.selected .pkg-check { display: flex; }

/* ══════════════════════════════════
   PAGE: PLAY
══════════════════════════════════ */
.play-topbar { flex-shrink: 0; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.play-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.play-header-ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--play-accent), #e50914); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(255,60,92,.3); }
.play-h1 { font-size: 18px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.play-h2 { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* License Info strip */
.play-license-strip { background: var(--play-grad); border: .5px solid var(--play-bor); border-radius: 16px; padding: 14px 16px; margin: 10px 13px 14px; }
.pls-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pls-name { font-size: 14px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.pls-expiry { font-size: 10px; color: var(--muted); }
.pls-expiry b { color: var(--tx); }
.pls-slot-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pls-slot-label { font-size: 10px; color: var(--muted); }
.pls-slot-count { font-size: 10px; font-weight: 700; color: var(--tx); }
.pls-bar { height: 4px; background: var(--card2); border-radius: 2px; overflow: hidden; }
.pls-fill { height: 100%; background: linear-gradient(90deg, var(--play-accent), #e50914); border-radius: 2px; transition: width .4s ease; }

/* Play list header */
.play-list-hd { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 9px; }
.play-list-t { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.play-add-btn { display: flex; align-items: center; gap: 5px; padding: 7px 13px; background: var(--red); color: #fff; border: none; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.play-add-btn:active { background: var(--red-d); }

/* Play list item */
.pl-item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 15px; padding: 11px 12px; margin-bottom: 7px; border: .5px solid var(--border); cursor: pointer; transition: transform .12s, background .15s; }
.pl-item:active { transform: scale(.98); background: var(--card2); }
.pl-img { width: 52px; height: 52px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); position: relative; overflow: hidden; }
.pl-playing-ov { position: absolute; inset: 0; background: rgba(229,9,20,.55); display: none; align-items: center; justify-content: center; }
.pl-item.is-playing .pl-playing-ov { display: flex; }
.pl-bd { flex: 1; min-width: 0; }
.pl-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pl-tt { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pl-lock { flex-shrink: 0; display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--play-accent); font-weight: 700; opacity: .8; }
.pl-ar { font-size: 10.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mini Player */
.mini-player {
  position: fixed; left: 13px; right: 13px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, #1a0a0b, #1e0a10);
  border: .5px solid rgba(255,60,92,.25);
  border-radius: 18px; padding: 12px 14px;
  display: none; align-items: center; gap: 12px;
  z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  transform: translateY(20px); opacity: 0;
}
.mini-player.on { display: flex; transform: translateY(0); opacity: 1; }
.mp-img { width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); }
.mp-bd { flex: 1; min-width: 0; }
.mp-tt { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ar { font-size: 10px; color: rgba(255,255,255,.55); }
.mp-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mp-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.mp-btn:active { background: rgba(255,255,255,.2); }
.mp-btn.play-pause { background: var(--play-accent); }
.mp-btn.play-pause:active { background: #e0253f; }
.mp-prog { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); border-radius: 0 0 18px 18px; overflow: hidden; }
.mp-prog-fill { height: 100%; background: var(--play-accent); width: 0%; transition: width .25s linear; border-radius: 0 0 18px 18px; }

/* Play empty state */
.play-empty { padding: 40px 28px; text-align: center; }
.play-empty-icon { font-size: 52px; margin-bottom: 14px; opacity: .6; }
.play-empty-t { font-size: 16px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.play-empty-s { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* No-package state */
.no-pkg-banner { margin: 14px 13px; background: var(--play-grad); border: .5px solid var(--play-bor); border-radius: 20px; padding: 22px 20px; text-align: center; }
.no-pkg-icon { font-size: 42px; margin-bottom: 12px; }
.no-pkg-t { font-size: 17px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.no-pkg-s { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }