/* ═══ TERAN ILDIZ v6 — 3 mavzu: qora · kumush · oq ═══ */

/* ─── QORA (default) ─── */
:root {
  --bg: #0d0e12; --bg2: #12141a; --bg3: #1a1c24;
  --surf: #1e2028; --surf2: #252830;
  --bdr: rgba(255,255,255,.07); --bdr2: rgba(255,255,255,.12);
  --acc: #e2e4ed; --acc2: #ffffff; --acc3: rgba(255,255,255,.08);
  --ink: #f0f2f8; --txt: #b8bcd0; --muted: #6e7290; --dim: #3a3d52;
  --nav-bg: #0d0e12; --nav-bdr: rgba(255,255,255,.06);
  --btn-bg: rgba(255,255,255,.08); --btn-bdr: rgba(255,255,255,.14);
  --btn-hover: rgba(255,255,255,.15);
  --sh: 0 2px 16px rgba(0,0,0,.5); --sh2: 0 8px 32px rgba(0,0,0,.6);
  --r: 14px; --dur: .22s; --ease: cubic-bezier(.25,.46,.45,.94);
  --nh: 58px; --ch: 46px; --ff: 'Inter', system-ui, sans-serif;
  --fs: 'Cinzel', serif; --fd: 'Cinzel Decorative', serif;
  --top: calc(var(--nh) + var(--ch));
}

/* ─── KUMUSH ─── */
[data-theme="silver"] {
  --bg: #e8eaef; --bg2: #dfe1e8; --bg3: #d4d6de;
  --surf: #f4f5f8; --surf2: #ffffff;
  --bdr: rgba(0,0,0,.09); --bdr2: rgba(0,0,0,.15);
  --acc: #1a1c28; --acc2: #0a0c18; --acc3: rgba(0,0,0,.06);
  --ink: #0c0e1a; --txt: #2e3248; --muted: #6a6e88; --dim: #a8adc4;
  --nav-bg: #1a1c28; --nav-bdr: rgba(255,255,255,.06);
  --btn-bg: rgba(255,255,255,.15); --btn-bdr: rgba(255,255,255,.2);
  --btn-hover: rgba(255,255,255,.25);
  --sh: 0 2px 12px rgba(0,0,0,.12); --sh2: 0 8px 28px rgba(0,0,0,.15);
}

/* ─── OQ ─── */
[data-theme="white"] {
  --bg: #ffffff; --bg2: #f4f5f8; --bg3: #e8eaef;
  --surf: #ffffff; --surf2: #f8f9fc;
  --bdr: rgba(0,0,0,.07); --bdr2: rgba(0,0,0,.12);
  --acc: #111318; --acc2: #000008; --acc3: rgba(0,0,0,.05);
  --ink: #080a14; --txt: #282c44; --muted: #60648a; --dim: #9ea2be;
  --nav-bg: #111318; --nav-bdr: rgba(255,255,255,.06);
  --btn-bg: rgba(255,255,255,.12); --btn-bdr: rgba(255,255,255,.18);
  --btn-hover: rgba(255,255,255,.22);
  --sh: 0 1px 8px rgba(0,0,0,.08); --sh2: 0 6px 24px rgba(0,0,0,.12);
}

/* ═══ RESET ═══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--txt);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, input, a { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* ═══ NAVBAR ═══ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nh);
  background: var(--nav-bg);
  display: flex; align-items: center;
  padding: 0 clamp(12px,3vw,24px); gap: 8px;
  z-index: 900;
  border-bottom: 1px solid var(--nav-bdr);
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark { width:36px; height:36px; flex-shrink:0; }
.logo-tx { display:flex; flex-direction:column; }
.logo-nm { font-family:var(--fd); font-size:clamp(9px,2vw,11.5px); color:#e8eaef; letter-spacing:2.5px; line-height:1; }
.logo-sb { font-size:7px; color:rgba(255,255,255,.35); letter-spacing:2px; margin-top:2px; }
.nav-r { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }

/* Search */
.srch { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:5px 12px; transition:all var(--dur); }
.srch:focus-within { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); }
.srch i { font-size:11px; color:rgba(255,255,255,.35); flex-shrink:0; }
#srchIn { background:none; border:none; outline:none; color:#e8eaef; font-size:13px; width:clamp(50px,9vw,120px); transition:width var(--dur); }
#srchIn:focus { width:clamp(75px,15vw,180px); }
#srchIn::placeholder { color:rgba(255,255,255,.25); }
.srch-x { display:none; align-items:center; justify-content:center; width:16px; height:16px; color:rgba(255,255,255,.35); font-size:10px; border-radius:50%; }
.srch-x:hover { color:rgba(255,255,255,.7); }

/* Nav buttons */
.nb { display:flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--btn-bdr); border-radius:18px; font-size:11px; color:rgba(255,255,255,.6); transition:all var(--dur); white-space:nowrap; min-height:32px; background:var(--btn-bg); }
.nb:hover { background:var(--btn-hover); color:#fff; border-color:rgba(255,255,255,.28); }
.nb-t { font-size:11px; }
.hbg { display:none; width:36px; height:36px; justify-content:center; padding:0; border-radius:50%; }

/* Theme cycle button */
#themeBtn { font-size:14px; width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; }

/* PWA install — HER DOIM KO'RINADI (mobilda ham) */
#instBtn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  gap: 5px;
  display: flex !important; /* har doim ko'rinadi */
}
#instBtn:hover { background: rgba(255,255,255,.2); }
#instBtn.installed { display: none !important; }

/* ═══ CATBAR ═══ */
#catbar {
  position: fixed; top: var(--nh); left: 0; right: 0; height: var(--ch);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-bdr);
  z-index: 850; display: flex; align-items: stretch;
}
.cats { display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; padding:0 clamp(8px,2vw,14px); -webkit-overflow-scrolling:touch; flex:1; }
.cats::-webkit-scrollbar { display:none; }
.nc { display:flex; align-items:center; gap:5px; padding:5px clamp(8px,1.5vw,13px); border-radius:16px; font-size:clamp(10px,1.3vw,11px); font-weight:500; color:rgba(255,255,255,.38); white-space:nowrap; border:1px solid transparent; transition:all var(--dur); flex-shrink:0; }
.nc i { font-size:10px; transition:transform .2s; }
.nc:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); }
.nc:hover i { transform:scale(1.2) rotate(-5deg); }
.nc.on { color:#fff; background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.18); }
.nc.on i { animation:icp .3s var(--ease); }
@keyframes icp { 0%{transform:scale(.7)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ═══ SIDEBAR ═══ */
.side { position:fixed; inset:0; z-index:1100; display:flex; }
.side[hidden] { display:none; }
.side-in { width:min(290px,83vw); height:100%; background:var(--nav-bg); display:flex; flex-direction:column; position:relative; z-index:2; overflow-y:auto; animation:slin .22s var(--ease); }
@keyframes slin { from{transform:translateX(-100%)} to{transform:translateX(0)} }
.side-ov { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.side-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.side-hd span { font-family:var(--fd); font-size:12px; color:#e8eaef; letter-spacing:1.5px; }
.side-hd button { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,.4); }
.side-hd button:hover { background:rgba(255,255,255,.08); color:#fff; }
.side-srch { display:flex; align-items:center; gap:7px; margin:12px 14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:7px 12px; }
.side-srch i { font-size:11px; color:rgba(255,255,255,.3); }
#srchMob { background:none; border:none; outline:none; color:#e8eaef; font-size:13px; flex:1; }
#srchMob::placeholder { color:rgba(255,255,255,.25); }
.side-nav { flex:1; padding:6px; }
.mnc { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:9px; font-size:13px; color:rgba(255,255,255,.45); transition:all var(--dur); text-align:left; }
.mnc i { font-size:14px; width:18px; text-align:center; flex-shrink:0; transition:transform .2s; }
.mnc:hover { background:rgba(255,255,255,.07); color:#fff; }
.mnc:hover i { transform:scale(1.15); }
.mnc.on { background:rgba(255,255,255,.12); color:#fff; font-weight:500; }
.side-bt { padding:14px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:8px; }

/* PWA tugma sidebar ichida — KATTA va aniq */
.pwa-install-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600;
  transition: all var(--dur); cursor: pointer;
}
.pwa-install-btn:hover { background:rgba(255,255,255,.2); }
.pwa-install-btn.hidden { display:none; }
.pwa-ios-hint { font-size:11px; color:rgba(255,255,255,.4); text-align:center; padding:4px 8px; line-height:1.5; }

/* Theme switcher in sidebar */
.theme-btns { display:flex; gap:6px; }
.th-btn { flex:1; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:600; color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); transition:all var(--dur); text-align:center; }
.th-btn:hover, .th-btn.on { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.25); }

/* ═══ MAIN — LAYOUT FIX ═══ */
.main {
  position: relative; z-index: 1;
  padding-top: calc(var(--top) + 20px);
  padding-left: clamp(12px, 3vw, 28px);
  padding-right: clamp(12px, 3vw, 28px);
  padding-bottom: 80px;
  max-width: 1600px; margin: 0 auto; width: 100%;
  /* BUG FIX: min-height prevents content stuck at top */
  min-height: 100dvh;
}
.phd { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--bdr); }
.pttl { font-family:var(--fd); font-size:clamp(14px,3vw,22px); color:var(--ink); letter-spacing:1.5px; }
.pcnt { font-size:11px; color:var(--muted); background:var(--bg2); padding:3px 10px; border-radius:12px; border:1px solid var(--bdr); font-family:var(--fs); }

/* ═══ GRID ═══ */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(215px,100%), 1fr)); gap:clamp(12px,2vw,20px); }
.card { background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh); transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); animation:fup .38s var(--ease) backwards; cursor:pointer; }
.card:hover { transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--bdr2); }
@keyframes fup { from{opacity:0;transform:translateY(16px)} }
.cov { height:clamp(95px,14vw,135px); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--bdr); background:var(--bg3); }
.cov-ic { font-size:clamp(26px,5vw,38px); color:var(--dim); transition:all .35s var(--ease); }
.card:hover .cov-ic { color:var(--ink); transform:scale(1.12); }
.wav { position:absolute; bottom:10px; left:0; right:0; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.wav span { width:3px; border-radius:2px; background:var(--muted); animation:wv 1.4s ease-in-out infinite; }
.wav span:nth-child(1){height:10px} .wav span:nth-child(2){height:20px;animation-delay:.22s} .wav span:nth-child(3){height:12px;animation-delay:.44s}
@keyframes wv { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }
.cbd { padding:clamp(11px,2vw,16px); flex:1; display:flex; flex-direction:column; gap:7px; }
.cbadge { display:inline-block; font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:2px 8px; border-radius:10px; align-self:flex-start; border:1.5px solid var(--bdr2); color:var(--muted); background:var(--bg2); }
.cttl { font-family:var(--fs); font-size:clamp(12px,1.8vw,13.5px); font-weight:700; color:var(--ink); line-height:1.3; }
.cdsc { font-size:clamp(10.5px,1.3vw,11.5px); color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.cft { display:flex; align-items:center; justify-content:space-between; padding-top:9px; margin-top:auto; border-top:1px solid var(--bdr); }
.csub { font-size:10px; color:var(--dim); font-family:var(--fs); }
.cbtn { display:flex; align-items:center; gap:5px; background:var(--acc3); border:1.5px solid var(--bdr2); color:var(--txt); padding:6px 13px; border-radius:14px; font-size:11px; font-weight:600; transition:all var(--dur); }
.cbtn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.empty { grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--muted); }
.empty i { font-size:48px; margin-bottom:16px; display:block; opacity:.2; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.2} 50%{opacity:.35} }
.empty p { font-family:var(--fs); font-size:14px; letter-spacing:1px; }

/* ═══ PANELS ═══ */
.panel { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:var(--bg2); animation:pan .22s var(--ease); }
.panel[hidden] { display:none; }
@keyframes pan { from{opacity:0} }
.pbar { height:56px; background:var(--nav-bg); display:flex; align-items:center; padding:0 12px; gap:10px; flex-shrink:0; border-bottom:1px solid var(--nav-bdr); }
.pb { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:rgba(255,255,255,.5); transition:all var(--dur); border:1px solid rgba(255,255,255,.08); }
.pb:hover { background:rgba(255,255,255,.1); color:#fff; }
.pttl2 { flex:1; font-family:var(--fs); font-size:13px; color:#e8eaef; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ PDF READER — KITOB USLUBI ═══ */
.pdf-reader { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#1a1c22; position:relative; }
.pdf-ext-bar { display:flex; justify-content:flex-end; padding:6px 12px; background:rgba(0,0,0,.3); border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.pdf-ext-bar a { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.4); font-size:11px; padding:4px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.1); transition:all var(--dur); }
.pdf-ext-bar a:hover { color:#fff; border-color:rgba(255,255,255,.25); }

/* Canvas zone — touch'da chapga/o'ngga bosish uchun */
.pdf-stage { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#111318; }
.pdf-canvas-wrap { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:auto; padding:12px; }
#pdfCv { display:none; max-width:100%; border-radius:2px; box-shadow:0 4px 40px rgba(0,0,0,.6), 0 1px 8px rgba(0,0,0,.4); }

/* Chapga/o'ngga bosish zonalari — KATTA va ko'rinmas */
.pdf-zone { position:absolute; top:0; bottom:0; width:30%; z-index:10; cursor:pointer; display:flex; align-items:center; padding:0 8px; opacity:0; transition:opacity .2s; }
.pdf-zone:hover { opacity:1; }
.pdf-zone-prev { left:0; justify-content:flex-start; background:linear-gradient(to right, rgba(0,0,0,.25), transparent); }
.pdf-zone-next { right:0; justify-content:flex-end; background:linear-gradient(to left, rgba(0,0,0,.25), transparent); }
.pdf-zone i { font-size:28px; color:rgba(255,255,255,.7); filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* PDF bottom controls */
.pdf-bot { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(10,10,14,.9) 40%); padding:24px 20px 16px; display:none; align-items:center; justify-content:center; gap:14px; z-index:20; }
.pdf-bot.show { display:flex; }
.pdf-pg-btn { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.8); font-size:16px; display:flex; align-items:center; justify-content:center; transition:all var(--dur); }
.pdf-pg-btn:hover:not(:disabled) { background:rgba(255,255,255,.2); color:#fff; transform:scale(1.08); }
.pdf-pg-btn:disabled { opacity:.25; cursor:not-allowed; }
.pdf-pg-info { color:rgba(255,255,255,.7); font-family:var(--fs); font-size:12px; min-width:80px; text-align:center; font-weight:600; letter-spacing:.5px; }
.pdf-progress { width:100px; height:3px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
.pdf-progress-fill { height:100%; background:rgba(255,255,255,.55); transition:width .3s; }

/* PDF loader + error */
.pdf-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--bg2); z-index:30; }
.pdf-overlay.hidden { display:none; }
.spin { width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.1); border-top-color:rgba(255,255,255,.6); animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.pdf-overlay p { color:rgba(255,255,255,.5); font-family:var(--fs); font-size:12px; letter-spacing:1px; }
.pdf-err-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#e8eaef; padding:10px 22px; border-radius:20px; font-size:12.5px; font-weight:600; transition:all var(--dur); }
.pdf-err-btn:hover { background:rgba(255,255,255,.18); }
#pdfFr { display:none; width:100%; height:100%; border:none; position:absolute; inset:0; z-index:5; }

/* Varoqlash flip animatsiyasi */
@keyframes flipR { 0%{transform:perspective(800px) rotateY(0)} 50%{transform:perspective(800px) rotateY(-8deg) scale(.97);opacity:.8} 100%{transform:perspective(800px) rotateY(0)} }
@keyframes flipL { 0%{transform:perspective(800px) rotateY(0)} 50%{transform:perspective(800px) rotateY(8deg) scale(.97);opacity:.8} 100%{transform:perspective(800px) rotateY(0)} }
.pdf-flip-r { animation:flipR .35s var(--ease); }
.pdf-flip-l { animation:flipL .35s var(--ease); }

/* ═══ AUDIO ═══ */
.aov { background:var(--nav-bg)!important; }
.ascr { flex:1; overflow-y:auto; scrollbar-width:none; padding-bottom:24px; }
.ascr::-webkit-scrollbar { display:none; }
.ahd { display:flex; align-items:center; padding:10px 14px; gap:10px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.2); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px); }
.adn, .ax { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,.38); transition:all var(--dur); flex-shrink:0; }
.adn:hover, .ax:hover { background:rgba(255,255,255,.08); color:#fff; }
.ahd-c { flex:1; text-align:center; min-width:0; }
.apl-nm { font-size:8.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:2px; }
.atrk { font-family:var(--fs); font-size:clamp(12px,2vw,14px); color:#e8eaef; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.disc-a { display:flex; align-items:center; justify-content:center; padding:clamp(18px,4vw,32px) 0 clamp(12px,3vw,20px); }
.disc { width:clamp(145px,38vw,190px); height:clamp(145px,38vw,190px); border-radius:50%; background:radial-gradient(circle,#1e2028,#0d0e12); border:2.5px solid rgba(255,255,255,.1); box-shadow:0 0 0 8px rgba(255,255,255,.03),var(--sh2); position:relative; display:flex; align-items:center; justify-content:center; transition:box-shadow 1s; }
.disc.sp { animation:vspin 4s linear infinite; box-shadow:0 0 0 8px rgba(255,255,255,.05),0 0 30px rgba(255,255,255,.08),var(--sh2); }
@keyframes vspin { to{transform:rotate(360deg)} }
.dr { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.06); top:50%; left:50%; transform:translate(-50%,-50%); }
.dr.r1{width:82%;height:82%} .dr.r2{width:62%;height:62%} .dr.r3{width:42%;height:42%} .dr.r4{width:24%;height:24%;border-color:rgba(255,255,255,.1)}
.dc { position:relative; z-index:2; width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg,#2d3050,#1a1c28); border:1.5px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:15px; color:rgba(255,255,255,.75); }
.prog-r { display:flex; align-items:center; gap:10px; padding:0 18px 14px; }
.at { font-size:11px; color:rgba(255,255,255,.3); font-family:var(--fs); flex-shrink:0; width:30px; font-weight:600; }
.at:last-child { text-align:right; }
.ptrk { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.09); position:relative; cursor:pointer; }
.pfill { position:absolute; left:0; top:0; height:100%; background:rgba(255,255,255,.55); border-radius:2px; transition:width .2s linear; pointer-events:none; }
.pinp { position:absolute; inset:0; -webkit-appearance:none; appearance:none; width:100%; height:100%; background:transparent; cursor:pointer; opacity:0; margin:-10px 0; height:24px; top:50%; transform:translateY(-50%); }
.pinp::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:#fff; border-radius:50%; }
.ptrk:hover .pinp { opacity:1; }
.actrl { display:flex; align-items:center; justify-content:center; gap:clamp(5px,2vw,12px); padding:0 18px 16px; }
.ac { display:flex; align-items:center; justify-content:center; border-radius:50%; color:rgba(255,255,255,.45); transition:all var(--dur); position:relative; border:1px solid rgba(255,255,255,.08); }
.ac b { font-size:7.5px; position:absolute; bottom:-1px; right:-1px; color:rgba(255,255,255,.5); font-weight:800; }
.ac.sk{width:42px;height:42px;font-size:18px} .ac.rw,.ac.fw{width:38px;height:38px;font-size:16px}
.ac.pl { width:60px; height:60px; font-size:22px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22); color:#fff; }
.ac:hover { color:#fff; background:rgba(255,255,255,.09); transform:scale(1.08); }
.ac.pl:hover { background:rgba(255,255,255,.18); }
.vol-r { display:flex; align-items:center; gap:10px; padding:0 26px 16px; }
.vol-r i { font-size:12px; color:rgba(255,255,255,.28); }
.volsl { flex:1; -webkit-appearance:none; appearance:none; height:3px; border-radius:2px; background:rgba(255,255,255,.09); cursor:pointer; }
.volsl::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; background:#fff; border-radius:50%; }
.plw { border-top:1px solid rgba(255,255,255,.07); margin:0 14px; }
.plt { font-family:var(--fs); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.28); padding:13px 4px 8px; font-weight:700; }
.pll { max-height:min(240px,28vh); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }
.pit { display:flex; align-items:center; gap:9px; padding:8px 6px; border-radius:7px; font-size:12px; color:rgba(255,255,255,.38); cursor:pointer; transition:all var(--dur); border-bottom:1px solid rgba(255,255,255,.04); }
.pin { width:22px; text-align:right; flex-shrink:0; font-size:10px; color:rgba(255,255,255,.22); font-weight:600; }
.pit-t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pic { font-size:10px; color:rgba(255,255,255,.55); flex-shrink:0; animation:vpulse 1.5s ease-in-out infinite; }
@keyframes vpulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.pit:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); padding-left:10px; }
.pit.act { background:rgba(255,255,255,.09); color:#fff; padding-left:10px; border-left:2px solid rgba(255,255,255,.45); }

/* ═══ MINI PLAYER ═══ */
.mini { position:fixed; bottom:0; left:0; right:0; z-index:800; background:var(--nav-bg); border-top:1px solid rgba(255,255,255,.1); padding-bottom:max(env(safe-area-inset-bottom,0px),4px); animation:sup .28s var(--ease); }
.mini[hidden] { display:none; }
@keyframes sup { from{transform:translateY(100%)} }
.mp { height:2px; background:rgba(255,255,255,.06); }
.mpf { height:100%; background:rgba(255,255,255,.45); transition:width .2s linear; }
.mr { display:flex; align-items:center; gap:10px; padding:8px clamp(12px,3vw,18px); }
.md { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:13px; color:rgba(255,255,255,.45); }
.md.sp { animation:vspin 4s linear infinite; }
.mt { flex:1; font-size:clamp(12px,1.8vw,13px); color:#e8eaef; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.mcs { display:flex; align-items:center; gap:1px; }
.mcs button { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; color:rgba(255,255,255,.4); transition:all var(--dur); }
.mcs button:hover { color:#fff; background:rgba(255,255,255,.07); }
.mpl { background:rgba(255,255,255,.12)!important; color:#fff!important; border:1px solid rgba(255,255,255,.18)!important; }
.mx { font-size:12px!important; color:rgba(255,255,255,.28)!important; }
.mx:hover { color:rgba(255,255,255,.7)!important; }

/* ═══ TOAST ═══ */
.toast { position:fixed; bottom:72px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--nav-bg); border:1px solid rgba(255,255,255,.14); color:#e8eaef; padding:9px 20px; border-radius:22px; font-size:12px; font-family:var(--fs); letter-spacing:.3px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .28s,transform .28s; z-index:9999; max-width:90vw; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══ PWA INSTALL BANNER (mobil uchin) ═══ */
.pwa-banner { position:fixed; bottom:0; left:0; right:0; z-index:850; background:var(--nav-bg); border-top:2px solid rgba(255,255,255,.12); padding:14px 20px max(env(safe-area-inset-bottom,0px),14px); display:flex; align-items:center; gap:14px; animation:sup .3s var(--ease); }
.pwa-banner[hidden] { display:none; }
.pwa-banner-ic { width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pwa-banner-ic svg { width:28px; height:28px; }
.pwa-banner-tx { flex:1; min-width:0; }
.pwa-banner-tx strong { display:block; color:#fff; font-size:13px; font-weight:700; }
.pwa-banner-tx span { font-size:11px; color:rgba(255,255,255,.45); }
.pwa-banner-install { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; padding:9px 16px; border-radius:10px; font-size:12px; font-weight:700; white-space:nowrap; flex-shrink:0; transition:all var(--dur); }
.pwa-banner-install:hover { background:rgba(255,255,255,.22); }
.pwa-banner-close { width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); font-size:12px; flex-shrink:0; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) { .logo-sb{display:none} .nb-t{display:none} .nb{padding:5px 9px} .hbg{display:flex} #srchIn{width:55px} #srchIn:focus{width:105px} }
@media(max-width:600px) {
  #catbar{display:none} :root{--top:var(--nh)}
  .main{padding-top:calc(var(--nh)+14px);padding-left:12px;padding-right:12px;padding-bottom:90px}
  .grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .cov{height:90px} .cov-ic{font-size:26px} .cbd{padding:10px}
  .cttl{font-size:12px} .cdsc{-webkit-line-clamp:2}
  .cbtn{padding:5px 10px;font-size:10.5px}
  .disc{width:150px;height:150px} .ac.pl{width:56px;height:56px;font-size:21px} .actrl{gap:8px}
  .pdf-zone{width:40%}
}
@media(max-width:380px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── PDF top bar ─── */
.pdf-top-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 14px; background:rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.pdf-top-bar a { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.4); font-size:11px; padding:4px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.1); transition:all .2s; }
.pdf-top-bar a:hover { color:#fff; border-color:rgba(255,255,255,.25); }

/* ─── PDF reader structure ─── */
.pdf-reader { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; background:#111318; }
.pdf-stage  { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pdf-canvas-wrap { width:100%; height:100%; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:12px; }
#pdfCv { border-radius:2px; box-shadow:0 4px 32px rgba(0,0,0,.6),0 1px 6px rgba(0,0,0,.4); }

/* Tap zones */
.pdf-zone { position:absolute; top:0; bottom:60px; width:32%; z-index:10; display:flex; align-items:center; opacity:0; transition:opacity .2s; cursor:pointer; }
.pdf-zone:hover { opacity:1; }
.pdf-zone:active { opacity:1; }
.pdf-zone-prev { left:0; justify-content:flex-start; padding-left:8px; background:linear-gradient(to right, rgba(0,0,0,.3), transparent); }
.pdf-zone-next { right:0; justify-content:flex-end; padding-right:8px; background:linear-gradient(to left, rgba(0,0,0,.3), transparent); }
.pdf-zone i { font-size:24px; color:rgba(255,255,255,.7); filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
@media(max-width:600px) { .pdf-zone{width:42%;} .pdf-zone i{font-size:20px;} }

/* PDF overlay (loading/error) */
.pdf-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:#111318; z-index:20; }
.pdf-overlay p { color:rgba(255,255,255,.45); font-family:'Cinzel',serif; font-size:12px; letter-spacing:1px; }
.pdf-err-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#e8eaef; padding:10px 20px; border-radius:18px; font-size:12px; font-weight:600; transition:.2s; cursor:pointer; }
.pdf-err-btn:hover { background:rgba(255,255,255,.18); }

/* PDF controls bottom */
.pdf-ctrl { display:none; align-items:center; justify-content:center; gap:14px; padding:10px 20px 14px; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); flex-shrink:0; border-top:1px solid rgba(255,255,255,.06); }
.pdf-pg-btn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.8); font-size:15px; display:flex; align-items:center; justify-content:center; transition:.2s; cursor:pointer; }
.pdf-pg-btn:hover:not(:disabled) { background:rgba(255,255,255,.2); color:#fff; }
.pdf-pg-btn:disabled { opacity:.25; cursor:not-allowed; }
.pdf-pg-info { color:rgba(255,255,255,.65); font-family:'Cinzel',serif; font-size:12px; min-width:70px; text-align:center; font-weight:600; }

/* Canvas flip animations */
@keyframes flip-r { 0%{transform:perspective(800px) rotateY(0) scale(1)} 45%{transform:perspective(800px) rotateY(-10deg) scale(.97);opacity:.75} 100%{transform:perspective(800px) rotateY(0) scale(1)} }
@keyframes flip-l { 0%{transform:perspective(800px) rotateY(0) scale(1)} 45%{transform:perspective(800px) rotateY(10deg) scale(.97);opacity:.75} 100%{transform:perspective(800px) rotateY(0) scale(1)} }
.flip-r { animation:flip-r .35s cubic-bezier(.25,.46,.45,.94); }
.flip-l { animation:flip-l .35s cubic-bezier(.25,.46,.45,.94); }

/* PWA banner */
.pwa-banner { position:fixed; bottom:0; left:0; right:0; z-index:850; background:var(--nav-bg); border-top:2px solid rgba(255,255,255,.14); padding:14px 16px; padding-bottom:max(env(safe-area-inset-bottom,0px),14px); display:flex; align-items:center; gap:12px; box-shadow:0 -4px 24px rgba(0,0,0,.4); animation:sup .3s ease; }
.pwa-banner[hidden] { display:none; }
.pwa-banner-ic { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pwa-banner-tx { flex:1; min-width:0; }
.pwa-banner-tx strong { display:block; color:#fff; font-size:13px; font-weight:700; margin-bottom:2px; }
.pwa-banner-tx span { font-size:11px; color:rgba(255,255,255,.45); }
.pwa-banner-install { background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.28); color:#fff; padding:10px 16px; border-radius:10px; font-size:12.5px; font-weight:700; white-space:nowrap; flex-shrink:0; transition:.2s; cursor:pointer; }
.pwa-banner-install:hover { background:rgba(255,255,255,.24); }
.pwa-banner-close { width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.32); font-size:12px; flex-shrink:0; cursor:pointer; }
.pwa-banner-close:hover { color:rgba(255,255,255,.7); }

/* Theme switcher in sidebar */
.theme-btns { display:flex; gap:6px; }
.th-btn { flex:1; padding:9px 4px; border-radius:8px; border:1px solid rgba(255,255,255,.1); font-size:10.5px; font-weight:600; color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); transition:.2s; text-align:center; cursor:pointer; }
.th-btn:hover,.th-btn.on { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22); }