/* ============================================================
   POVEO.RO — TOKENS (identici cu sistemul de design)
   ============================================================ */
:root{
  --bg:#0E1326; --bg-2:#0A0F20; --surface:#18203A; --surface-2:#212B49;
  --surface-glass:rgba(20,27,49,.72);
  --text:#F7F9FF; --text-secondary:#A7B0CC; --text-muted:#6C7796;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --accent:#F6B63E; --accent-2:#F59A3C; --accent-soft:rgba(246,182,62,.14);
  --on-accent:#2A1C00; --accent-grad:linear-gradient(135deg,#F8C95A 0%,#F2A23C 100%);
  --star:#F6C453; --success:#5BCE8E; --danger:#F2785C;
  --cat-aventura:#36A18C; --cat-educatie:#C58B4E; --cat-mitologie:#8A6CE6;
  --cat-populare:#E97E62; --cat-engleza:#4F8DE0; --cat-basme:#D86BB0;
  --cat-fabule:#5BB573; --cat-autor:#E06B8B;
  --shadow-sm:0 2px 8px rgba(0,0,0,.30); --shadow-md:0 8px 24px rgba(0,0,0,.38);
  --shadow-lg:0 18px 48px rgba(0,0,0,.45); --glow:0 6px 22px rgba(246,182,62,.40);
  --font-display:"Baloo 2",system-ui,sans-serif; --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --dock-h:118px;
}
[data-theme="light"]{
  --bg:#F4F5FB; --bg-2:#EAECF6; --surface:#FFFFFF; --surface-2:#F2F4FB;
  --surface-glass:rgba(255,255,255,.82);
  --text:#161D33; --text-secondary:#515A7B; --text-muted:#8B93AD;
  --border:rgba(19,26,46,.09); --border-strong:rgba(19,26,46,.16);
  --accent:#E89A1C; --accent-2:#E5891E; --accent-soft:rgba(232,154,28,.14);
  --on-accent:#2A1C00; --accent-grad:linear-gradient(135deg,#F7C254 0%,#EC9A23 100%);
  --star:#E9A722; --success:#2E9E68; --danger:#DD5B3E;
  --shadow-sm:0 2px 8px rgba(22,29,51,.06); --shadow-md:0 10px 28px rgba(22,29,51,.10);
  --shadow-lg:0 20px 52px rgba(22,29,51,.14); --glow:0 8px 22px rgba(232,154,28,.28);
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease; padding-bottom:var(--dock-h);
  background-image:
    radial-gradient(1100px 560px at 82% -8%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%),
    radial-gradient(900px 520px at -8% 6%,color-mix(in srgb,var(--cat-mitologie) 10%,transparent),transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;}
svg{display:block;}
.shell{max-width:1320px;margin:0 auto;padding:0 28px;}

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:24px;
  padding:16px 28px; max-width:1320px; margin:0 auto;
  background:var(--surface-glass); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:11px;}
.brand-mark{display:flex;align-items:flex-end;gap:3px;height:26px;}
.brand-mark span{width:4px;border-radius:var(--r-full);background:var(--accent-grad);}
.brand-mark span:nth-child(1){height:12px;} .brand-mark span:nth-child(2){height:22px;}
.brand-mark span:nth-child(3){height:16px;} .brand-mark span:nth-child(4){height:26px;}
.brand-mark span:nth-child(5){height:18px;}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.3px;}
.brand-name b{color:var(--accent);}
.brand .star{color:var(--accent);margin-left:-4px;margin-top:-10px;}
.brand .star svg{width:13px;height:13px;}
.brand-logo{height:36px;width:auto;display:block;} /* pentru logo-imagine în bară (PNG/SVG transparent, orizontal) */

.nav-menu{display:flex;align-items:center;gap:6px;margin:0 auto;}
.nav-link{
  font-weight:600;font-size:15px;color:var(--text-secondary);
  padding:9px 18px;border-radius:var(--r-full);cursor:pointer;
  text-decoration:none;transition:all .2s ease;
}
.nav-link:hover{color:var(--text);}
.nav-link.active{background:var(--accent-grad);color:var(--on-accent);box-shadow:var(--glow);}

.nav-right{display:flex;align-items:center;gap:12px;}
.search{
  display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-full);padding:9px 16px;width:200px;
}
.search svg{width:16px;height:16px;color:var(--text-muted);}
.search input{border:0;outline:0;background:transparent;color:var(--text);
  font-family:var(--font-body);font-size:14px;width:100%;}
.search input::placeholder{color:var(--text-muted);}
.btn-sub{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--accent-grad);color:var(--on-accent);font-family:var(--font-body);
  font-weight:700;font-size:14px;padding:10px 18px;border-radius:var(--r-full);box-shadow:var(--glow);
  transition:transform .15s ease;
}
.btn-sub:hover{transform:translateY(-2px);}
.btn-sub svg{width:16px;height:16px;}
.icn-btn{
  width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);cursor:pointer;display:grid;place-items:center;
  transition:all .2s ease;
}
.icn-btn:hover{border-color:var(--accent);color:var(--accent);}
.icn-btn svg{width:18px;height:18px;}
.avatar{
  width:42px;height:42px;border-radius:var(--r-full);position:relative;cursor:pointer;
  background:linear-gradient(135deg,#5C6BD6,#8A6CE6);display:grid;place-items:center;
  border:2px solid var(--accent);
}
.avatar svg{width:22px;height:22px;color:#fff;}
.avatar .badge-star{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:var(--r-full);
  background:var(--accent);display:grid;place-items:center;}
.avatar .badge-star svg{width:9px;height:9px;color:var(--on-accent);}

/* ============================================================
   TOP SECTION — Hero + Categorii
   ============================================================ */
.top-section{display:grid;grid-template-columns:1.55fr 1.1fr;gap:18px;margin:26px 0 36px;}

.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:34px;min-height:300px;
  display:flex;flex-direction:column;justify-content:center;
  /* ===== FUNDAL HERO — AICI pui imaginea ta =====
     Lași gol => se vede scena CSS de noapte (degrade).
     Pentru imaginea ta: pe <div class="hero"> din HTML adaugi
     style="--hero-img:url('img/hero-spatiu.jpg')"  (vezi nota din chat). */
  background:
    linear-gradient(95deg, rgba(10,14,30,.94) 0%, rgba(10,14,30,.50) 46%, rgba(10,14,30,.05) 100%),
    var(--hero-img, none),
    linear-gradient(120deg,#1B2A5C 0%,#2A1E54 52%,#14224A 100%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);
}
.hero .scene{position:absolute;inset:0;}
.hero .stars{position:absolute;inset:0;background-image:
  radial-gradient(2px 2px at 62% 24%,#fff,transparent),
  radial-gradient(2px 2px at 78% 40%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 88% 22%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 70% 64%,#fff,transparent),
  radial-gradient(2px 2px at 92% 56%,#fff,transparent);opacity:.6;}
.hero .moon{position:absolute;right:9%;top:20%;color:#FCE39A;
  filter:drop-shadow(0 0 26px rgba(252,227,154,.55));animation:float 6s ease-in-out infinite;}
.hero .moon svg{width:104px;height:104px;}
.hero .planet{position:absolute;right:26%;top:14%;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#9b7be0,#4b3a8f);opacity:.8;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-body{position:relative;max-width:58%;}
.hero .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:#FCE39A;margin-bottom:10px;}
.hero h1{color:#fff;font-size:38px;font-weight:800;letter-spacing:-.5px;line-height:1.08;}
.hero .narr{color:rgba(255,255,255,.74);font-size:15px;margin:8px 0 18px;}
.hero .progress{height:6px;background:rgba(255,255,255,.18);border-radius:var(--r-full);
  overflow:hidden;margin-bottom:20px;max-width:72%;}
.hero .progress i{display:block;height:100%;width:38%;background:var(--accent-grad);border-radius:var(--r-full);}
.btn-play{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  background:var(--accent-grad);color:var(--on-accent);font-family:var(--font-body);
  font-weight:700;font-size:15px;padding:13px 26px;border-radius:var(--r-full);box-shadow:var(--glow);
  transition:transform .15s ease;align-self:flex-start;
}
.btn-play:hover{transform:translateY(-2px);}
.btn-play svg{width:17px;height:17px;}

.cat-side{display:flex;flex-direction:column;gap:14px;}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1;}
.tile{
  position:relative;border-radius:var(--r-lg);padding:16px;min-height:208px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;cursor:pointer;
  border:1px solid rgba(0,0,0,.10);transition:transform .25s ease,box-shadow .25s ease;
  /* colorat saturat în AMBELE teme + voal sub text => alb mereu lizibil */
  background:
    linear-gradient(to top,rgba(8,10,22,.55),rgba(8,10,22,0) 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--tint) 96%,#fff),color-mix(in srgb,var(--tint) 62%,#07060f));
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.tile .ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);color:#fff;opacity:.95;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.tile .ico svg{width:54px;height:54px;}
.tile .glow{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.30),transparent 68%);pointer-events:none;}
.tile .tl-title{position:relative;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;}
.tile .tl-sub{position:relative;font-size:12px;color:rgba(255,255,255,.85);}

.pills2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pill{
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);
  padding:13px 16px;font-weight:700;font-size:14px;color:var(--text);transition:all .2s ease;
}
.pill:hover{border-color:var(--accent);transform:translateY(-2px);}
.pill svg{width:18px;height:18px;color:var(--accent);}

/* ============================================================
   RAILS
   ============================================================ */
.rails{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;}
.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.rail-head .title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:21px;letter-spacing:-.3px;}
.rail-head .av{width:30px;height:30px;border-radius:var(--r-full);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cat-autor),#9a4f86);color:#fff;}
.rail-head .av svg{width:17px;height:17px;}
.rail-head .more{width:30px;height:30px;border-radius:var(--r-full);border:1px solid var(--border-strong);
  background:transparent;color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;transition:all .2s;}
.rail-head .more:hover{border-color:var(--accent);color:var(--accent);}
.rail-head .more svg{width:16px;height:16px;}

.rail-track{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;}
.rail-track::-webkit-scrollbar{height:7px;}
.rail-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);}
.rail-track::-webkit-scrollbar-track{background:transparent;}

.scard{flex:0 0 138px;width:138px;cursor:pointer;scroll-snap-align:start;}
.sc-cover{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;}
.scard:hover .sc-cover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.sc-cover .moon{color:rgba(255,255,255,.92);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));}
.sc-cover .moon svg{width:46px;height:46px;}
.sc-cover .free{position:absolute;top:8px;left:8px;}
.sc-cover .pfab{position:absolute;right:9px;bottom:9px;width:34px;height:34px;border-radius:var(--r-full);
  background:var(--accent-grad);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--glow);
  opacity:0;transform:translateY(6px);transition:all .25s ease;}
.scard:hover .pfab{opacity:1;transform:translateY(0);}
.sc-cover .pfab svg{width:14px;height:14px;}
.sc-meta{padding:9px 2px 0;}
.sc-title{font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;}
.sc-sub{font-size:11px;color:var(--text-muted);margin-bottom:5px;}
.rating{display:inline-flex;gap:1px;}
.rating svg{width:13px;height:13px;}
.rating .on{color:var(--star);} .rating .off{color:var(--border-strong);}

.badge-free{font-family:var(--font-body);font-weight:700;font-size:10px;letter-spacing:.3px;
  padding:4px 9px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--success) 22%,#06140d);color:#bff0d4;display:inline-flex;align-items:center;gap:4px;}
.badge-free svg{width:11px;height:11px;}

/* copertă-placeholder (gradiente până la arta finală) */
.g-night{background:linear-gradient(160deg,#2B3F7A,#14224A);}
.g-rose{background:linear-gradient(160deg,#C56BA0,#6A3E78);}
.g-forest{background:linear-gradient(160deg,#2F8F77,#163F46);}
.g-amber{background:linear-gradient(160deg,#E6A14D,#B5631F);}
.g-violet{background:linear-gradient(160deg,#7B63D6,#3A2C73);}
.g-teal{background:linear-gradient(160deg,#3C9AA8,#1B4A55);}

/* ============================================================
   DOCK — Player + Footer (fix jos)
   ============================================================ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface-glass);backdrop-filter:blur(18px);border-top:1px solid var(--border-strong);}
.dock-progress{height:3px;background:var(--border);}
.dock-progress i{display:block;height:100%;width:6%;background:var(--accent-grad);}
.player{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:13px 28px;}
.now{display:flex;align-items:center;gap:12px;min-width:230px;}
.now .thumb{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;}
.now .thumb svg{width:24px;height:24px;color:rgba(255,255,255,.92);}
.now .tt{font-family:var(--font-display);font-weight:600;font-size:14px;}
.now .tm{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.controls{display:flex;align-items:center;gap:16px;margin:0 auto;}
.controls button{background:transparent;border:0;color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;transition:color .2s;}
.controls button:hover{color:var(--text);}
.controls button svg{width:20px;height:20px;}
.controls .main{width:48px;height:48px;border-radius:var(--r-full);background:var(--accent-grad);
  color:var(--on-accent);box-shadow:var(--glow);}
.controls .main svg{width:18px;height:18px;}
.player-right{display:flex;align-items:center;gap:12px;min-width:200px;justify-content:flex-end;}
.player-right .sleep{background:transparent;border:0;color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;transition:color .2s;}
.player-right .sleep:hover{color:var(--accent);}
.player-right .sleep svg{width:19px;height:19px;}
.vol{-webkit-appearance:none;appearance:none;width:110px;height:5px;border-radius:var(--r-full);
  background:var(--border-strong);outline:0;cursor:pointer;}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:var(--glow);}
.vol::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--accent);}

.footer{border-top:1px solid var(--border);}
.footer-inner{max-width:1320px;margin:0 auto;padding:9px 28px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:6px 16px;font-size:12px;color:var(--text-muted);}
.footer-inner .hi{color:var(--accent);font-weight:700;}
.footer-inner a{color:var(--text-muted);text-decoration:none;transition:color .2s;}
.footer-inner a:hover{color:var(--text);}
.footer-inner .sep{opacity:.4;}

@media (max-width:1080px){
  .top-section{grid-template-columns:1fr;}
  .rails{grid-template-columns:1fr;}
  .nav-menu{display:none;}
  .hero-body{max-width:100%;}
}
@media (max-width:640px){
  .player-right{display:none;} .now{min-width:0;}
  .search{width:130px;}
}