/* ═══════════════════════════════════════
   MATIVERA+ — COMPLETE APP LAYOUT CSS
   ═══════════════════════════════════════ */
:root {
    --ms-bg: var(--mv-bg);
    --ms-bg2: var(--mv-bg);
    --ms-sidebar: var(--mv-bg);
    --ms-card: rgba(11,18,32,0.7);
    --ms-card-solid: var(--mv-bg);
    --ms-border: var(--mv-border-soft);
    --ms-text: var(--mv-text-soft); --ms-muted: var(--mv-text-2);
    --ms-dim: var(--mv-text-2);
    --ms-purple: var(--mv-accent);
    --ms-purple-light: var(--mv-accent-soft);
    --ms-blue: var(--mv-accent);
    --ms-green: var(--mv-success);
    --ms-orange: var(--mv-warning);
    --ms-pink: var(--mv-accent);
    --ms-red: var(--mv-danger);
    --ms-cyan: var(--mv-accent);
    --ms-r: 1rem;
    --ms-r-sm: 0.75rem;
    --ms-r-lg: 1.25rem;
    --ms-sidebar-w: 15rem;
    --ms-roadmap-w: 18rem;
    --ms-player-h: 4.75rem;}
.nav, .site-footer, footer.site-footer { display: none !important;}
main.container.page { max-width: 100% !important; padding: 0 !important; margin: 0 !important; width: 100% !important;}
body { overflow: hidden !important; background: var(--ms-bg) !important;}

.ms-app {
    display: grid;
    grid-template-columns: var(--ms-sidebar-w) 1fr var(--ms-roadmap-w);
    grid-template-rows: 1fr var(--ms-player-h);
    grid-template-areas: "sidebar main roadmap" "player player player";
    width: 100vw;
    height: 100vh;             /* fallback iOS vechi */
    height: 100svh;            /* fallback fără JS */
    height: var(--ms-app-h, 100svh);  /* JS (VisualViewport): mulat pe bara oricărui browser → player mereu vizibil */
    font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
    color: var(--ms-text);
    position: fixed; top: 0; left: 0; z-index: 9999;
    background: var(--mv-bg);}
#msBgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none;}

.ms-sidebar {
    grid-area: sidebar; grid-row: 1 / 2;
    background: var(--ms-sidebar);
    border-right: 1px solid var(--ms-border);
    display: flex; flex-direction: column;
    padding: 1.5rem 0.875rem;
    z-index: 2; overflow-y: auto; scrollbar-width: none;}
.ms-sidebar::-webkit-scrollbar { display: none;}
.ms-sidebar-logo {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0 0.5rem; margin-bottom: 2rem;
    text-decoration: none; color: var(--mv-text);}
.ms-sidebar-logo img, .ms-sidebar-logo svg { width: 2rem; height: 2rem; flex-shrink: 0;}
.ms-sidebar-logo span { font-size: 1.05rem; font-weight: 700; white-space: nowrap;}
.ms-nav { list-style: none; padding: 0; margin: 0; flex: 1;}
.ms-nav li { margin-bottom: 0.25rem;}
.ms-nav a {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.875rem; border-radius: var(--ms-r);
    color: var(--ms-muted); text-decoration: none;
    font-size: 0.875rem; font-weight: 500; transition: all 0.2s;}
.ms-nav a i { width: 1.25rem; text-align: center; font-size: 1rem;}
.ms-nav a:hover { color: var(--mv-text); background: var(--mv-elev-1);}
.ms-nav a.active { background: rgba(110,193,255,0.15);
    color: var(--mv-text); font-weight: 600;}
.ms-sidebar-premium { display: none;}

.ms-sidebar-legal {
    margin-top: auto;
    padding: 0.625rem 0.75rem;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 0;}
.ms-sidebar-legal a {
    font-size: 0.55rem; color: var(--mv-text-2);
    text-decoration: none; padding: 0.1rem 0.3rem;
    transition: color 0.2s;}
.ms-sidebar-legal a:hover { color: var(--mv-text-2);}
.ms-sidebar-copy {
    width: 100%; font-size: 0.5rem; color: var(--mv-text-2);
    text-align: center; margin-top: 0.2rem;}

.ms-main {
    grid-area: main;
    overflow-y: auto; overflow-x: hidden;
    padding: 1.5rem 2rem 2rem;
    z-index: 1; scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;}
.ms-main::-webkit-scrollbar { width: 6px;}
.ms-main::-webkit-scrollbar-thumb { background: var(--mv-elev-3); border-radius: 3px;}

.ms-topbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;}
.ms-search { flex: 1; max-width: 32rem; position: relative;}
.ms-search input {
    width: 100%; padding: 0.7rem 1rem 0.7rem 2.75rem;
    background: var(--mv-elev-1);
    border: 1px solid var(--ms-border);
    border-radius: 2rem; color: var(--mv-text);
    font-size: 0.85rem; font-family: inherit;
    outline: none; transition: border-color 0.2s, background 0.2s;}
.ms-search input::placeholder { color: var(--ms-muted);}
.ms-search input:focus { border-color: rgba(110,193,255,0.3); background: var(--mv-elev-3);}
.ms-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ms-muted); font-size: 0.85rem;}
.ms-topbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto;}
.ms-mobile-toggle { display: none; background: none; border: none; color: var(--mv-text); font-size: 1.25rem; cursor: pointer; padding: 0.5rem;}

.ms-welcome { margin-bottom: 2rem;}
.ms-welcome h1 { font-size: 1.75rem; font-weight: 800; color: var(--mv-text); margin-bottom: 0.5rem; line-height: 1.3;}
.ms-welcome p { font-size: 0.9rem; color: var(--ms-muted);}

.ms-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.125rem;}
.ms-section-title { font-size: 1.05rem; font-weight: 700; color: var(--mv-text); display: flex; align-items: center; gap: 0.5rem;}
.ms-section-title .plus { color: var(--ms-purple-light); cursor: pointer; font-size: 1.1rem;}

.ms-collections { margin-bottom: 2.25rem; position: relative;}
.ms-coll-track { display: flex; gap: 0.875rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; padding-right: 1rem; scrollbar-width: none;}
.ms-coll-track::-webkit-scrollbar { display: none;}
.ms-coll-card {
    flex: 0 0 calc(25% - 0.75rem); min-width: 12rem; scroll-snap-align: start;
    border-radius: var(--ms-r-lg); overflow: hidden; position: relative; cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
    border: 1px solid var(--mv-border-soft); background: var(--ms-card-solid);}
.ms-coll-card:hover {}
.ms-coll-img { width: 100%; height: 0; padding-bottom: 75%; position: relative; overflow: hidden;}
.ms-coll-img canvas { position: absolute; inset: 0; width: 100%; height: 100%;}
.ms-coll-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.12);}
.ms-coll-play {
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: var(--mv-elev-4);
    display: flex; align-items: center; justify-content: center;
    color: var(--mv-text); font-size: 1.1rem; transition: transform 0.2s, background 0.2s;
    border: 1px solid var(--mv-border);}
.ms-coll-card:hover .ms-coll-play { background: var(--mv-elev-4);}
.ms-coll-badge {
    position: absolute; top: 0.75rem; left: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    color: var(--mv-text); font-size: 0.85rem; border: 1px solid var(--mv-border); z-index: 2;}
.ms-coll-heart { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--mv-text-2); font-size: 1rem; cursor: pointer; transition: color 0.2s; z-index: 2;}
.ms-coll-heart:hover { color: var(--ms-pink);}
.ms-coll-info { padding: 0.875rem 1rem 0.75rem; background: var(--ms-card-solid); position: relative;}
.ms-coll-name { font-size: 0.9rem; font-weight: 700; color: var(--mv-text); margin-bottom: 0.25rem;}
.ms-coll-desc { font-size: 0.72rem; color: var(--ms-muted); line-height: 1.45; margin-bottom: 0.375rem;}
.ms-coll-dur { font-size: 0.68rem; color: var(--ms-dim); display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem;}
.ms-coll-nav {
    position: absolute; top: 40%;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(20,24,50,0.92); border: 1px solid var(--mv-border);
    color: var(--mv-text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.85rem; z-index: 3;
    transition: background 0.2s;}
.ms-coll-nav:hover { background: rgba(59,130,246,0.3);}
.ms-coll-next { right: -0.75rem;}
.ms-coll-prev { left: -0.75rem;}

.ms-popular { margin-bottom: 1.5rem;}
.ms-sound-list { display: flex; flex-direction: column; gap: 0.25rem;}
.ms-sound-item { display: grid; grid-template-columns: 3.25rem 1fr auto auto auto auto; align-items: center; gap: 0.875rem; padding: 0.5rem 0.875rem; border-radius: var(--ms-r); transition: background 0.15s;}
.ms-sound-item:hover { background: var(--mv-elev-1);}
.ms-si-thumb { width: 3.25rem; height: 3.25rem; border-radius: 0.625rem; overflow: hidden; flex-shrink: 0; position: relative; cursor: pointer;}
.ms-si-thumb canvas { width: 100%; height: 100%; display: block;}
.ms-si-play { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0.625rem; background: rgba(0,0,0,0.25); border: none; color: var(--mv-text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; opacity: 0; transition: opacity 0.2s;}
.ms-sound-item:hover .ms-si-play { opacity: 1;}
.ms-si-info { min-width: 0;}
.ms-si-title { font-size: 0.9rem; font-weight: 600; color: var(--mv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-si-sub { font-size: 0.72rem; color: var(--ms-muted);}
.ms-si-info { min-width: 0;}
.ms-si-title { font-size: 0.85rem; font-weight: 600; color: var(--mv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-si-sub { font-size: 0.7rem; color: var(--ms-muted);}
.ms-si-tag { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.65rem; font-weight: 600; white-space: nowrap;}
.ms-tag-relaxare { background: rgba(16,185,129,0.12); color: var(--mv-success);}
.ms-tag-somn { background: rgba(99,102,241,0.12); color: var(--mv-accent);}
.ms-tag-vindecare { background: rgba(168,85,247,0.12); color: var(--mv-accent);}
.ms-tag-concentrare { background: rgba(251,191,36,0.12); color: var(--mv-warning);}
.ms-tag-respiratie { background: rgba(6,182,212,0.12); color: var(--mv-accent);}
.ms-tag-focus { background: rgba(59,130,246,0.12); color: var(--mv-accent);}
.ms-si-dur { font-size: 0.75rem; color: var(--ms-muted); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right;}
.ms-si-heart { background: none; border: none; color: var(--ms-dim); cursor: pointer; font-size: 0.85rem; transition: color 0.2s; padding: 0.25rem;}
.ms-si-heart:hover { color: var(--ms-pink);}
.ms-si-more { background: none; border: none; color: var(--ms-dim); cursor: pointer; font-size: 0.85rem; padding: 0.25rem;}
.ms-see-all { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.75rem; color: var(--ms-muted); font-size: 0.8rem; cursor: pointer; transition: color 0.2s;}
.ms-see-all:hover { color: var(--mv-text);}

/* Roadmap Sidebar */
.ms-roadmap { grid-area: roadmap; background: rgba(12,16,36,0.5); border-left: 1px solid var(--ms-border); padding: 1rem 0.875rem; overflow-y: auto; z-index: 2; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;}
.ms-roadmap::-webkit-scrollbar { width: 3px;}
.ms-roadmap::-webkit-scrollbar-thumb { background: var(--mv-elev-3); border-radius: 2px;}
.ms-rm-header { margin-bottom: 0.875rem;}
.ms-rm-title { font-size: 0.8rem; font-weight: 700; color: var(--mv-text); display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem;}
.ms-rm-title i { color: var(--ms-purple-light); font-size: 0.75rem;}
.ms-rm-subtitle { font-size: 0.6rem; color: var(--ms-muted);}
.ms-rm-timeline { position: relative;}
.ms-rm-timeline::before { content: ''; position: absolute; left: 0.8rem; top: 1.5rem; bottom: 3rem; width: 1.5px; background: linear-gradient(180deg, rgba(59,130,246,0.3), rgba(110,193,255,0.2));}
.ms-rm-step { position: relative; padding-left: 2.5rem; margin-bottom: 0.875rem;}
.ms-rm-orb { position: absolute; left: 0; top: 0.1rem; width: 1.625rem; height: 1.625rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: var(--mv-text);}
.ms-rm-orb::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; opacity: 0.3; animation: orbPulse 3s ease-in-out infinite;}
.ms-orb-purple { background: rgba(139,92,246,0.25);}
.ms-orb-purple::before { box-shadow: 0 0 12px var(--ms-purple);}
.ms-orb-green { background: rgba(16,185,129,0.25);}
.ms-orb-green::before { box-shadow: 0 0 12px var(--ms-green);}
.ms-orb-orange { background: rgba(245,158,11,0.25);}
.ms-orb-orange::before { box-shadow: 0 0 12px var(--ms-orange);}
.ms-orb-blue { background: rgba(59,130,246,0.25);}
.ms-orb-blue::before { box-shadow: 0 0 12px var(--ms-blue);}
.ms-orb-pink { background: rgba(236,72,153,0.25);}
.ms-orb-pink::before { box-shadow: 0 0 12px var(--ms-pink);}
.ms-rm-step-title { font-size: 0.7rem; font-weight: 700; margin-bottom: 0.1rem;}
.ms-rm-step-desc { font-size: 0.58rem; color: var(--ms-muted); margin-bottom: 0.4rem; line-height: 1.4;}
.ms-rm-sound { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; background: var(--mv-elev-1); border: 1px solid var(--ms-border); border-radius: 0.5rem; transition: background 0.2s; cursor: pointer;}
.ms-rm-sound:hover { background: var(--mv-elev-2);}
.ms-rm-sound-play { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: var(--mv-text-2); overflow: hidden; position: relative;}
.ms-rm-sound-play canvas { position: absolute; inset: 0; width: 100%; height: 100%;}
.ms-rm-sound-play i { position: relative; z-index: 1;}
.ms-rm-sound-info { flex: 1; min-width: 0;}
.ms-rm-sound-name { font-size: 0.62rem; font-weight: 600; color: var(--mv-text);}
.ms-rm-sound-dur { font-size: 0.55rem; color: var(--ms-muted);}
.ms-rm-sound-heart { background: none; border: none; color: var(--ms-dim); cursor: pointer; font-size: 0.6rem; padding: 0.15rem;}
.ms-rm-cta { margin-top: 0.75rem; display: flex; width: 100%; padding: 0.5rem; border-radius: 0.625rem; background: var(--mv-accent); color: var(--mv-text-inverse); border: none; font-size: 0.65rem; font-weight: 600; cursor: pointer; align-items: center; justify-content: center; gap: 0.375rem; font-family: inherit; transition: transform 0.15s, box-shadow 0.2s;}
.ms-rm-cta:hover {}

/* Player Bar */
.ms-player { grid-area: player; background: rgba(10,13,30,0.95); border-top: 1px solid var(--ms-border); display: grid; grid-template-columns: var(--ms-sidebar-w) 1fr var(--ms-roadmap-w); align-items: center; padding: 0 1.5rem; z-index: 10;}
.ms-pl-left { display: flex; align-items: center; gap: 0.75rem; padding-right: 1rem;}
.ms-pl-thumb { width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; position: relative;}
.ms-pl-thumb canvas { width: 100%; height: 100%; display: block;}
.ms-pl-info { min-width: 0;}
.ms-pl-title { font-size: 0.8rem; font-weight: 600; color: var(--mv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ms-pl-sub { font-size: 0.65rem; color: var(--ms-muted);}
.ms-pl-heart { background: none; border: none; color: var(--ms-dim); cursor: pointer; font-size: 0.9rem; margin-left: 0.5rem; transition: color 0.2s;}
.ms-pl-heart:hover { color: var(--ms-pink);}
.ms-pl-center { display: flex; flex-direction: column; align-items: center; gap: 0.375rem;}
.ms-pl-controls { display: flex; align-items: center; gap: 1.25rem;}
.ms-pl-btn { background: none; border: none; color: var(--mv-text-2); font-size: 0.9rem; cursor: pointer; transition: color 0.15s;}
.ms-pl-btn:hover { color: var(--mv-text);}
.ms-pl-btn.active { color: var(--ms-purple-light);}
.ms-pl-play-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mv-text); border: none; color: var(--mv-bg); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.1s;}
.ms-pl-play-btn:hover { opacity: 0.9;}
/* Iconița play (triunghi) — nudge optic la dreapta ca să pară centrată în cerc (masa vizuală e în stânga); pauza rămâne neatinsă */
.ms-pl-play-btn .fa-play {}
.ms-pl-progress { display: flex; align-items: center; gap: 0.5rem; width: 100%; max-width: 32rem;}
.ms-pl-time { font-size: 0.65rem; color: var(--ms-muted); font-variant-numeric: tabular-nums; min-width: 2.25rem;}
.ms-pl-bar { flex: 1; height: 0.25rem; background: var(--mv-elev-3); border-radius: 0.125rem; position: relative; cursor: pointer; overflow: hidden;}
.ms-pl-fill { height: 100%; border-radius: 0.125rem; width: 45%; background: linear-gradient(90deg, var(--mv-accent), var(--mv-accent)); transition: width 0.15s;}
.ms-pl-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;}
.ms-pl-vol { display: flex; align-items: center; gap: 0.375rem;}
.ms-pl-vol-bar { width: 5rem; height: 0.25rem; background: var(--mv-elev-3); border-radius: 0.125rem; position: relative; cursor: pointer; overflow: hidden;}
.ms-pl-vol-fill { height: 100%; width: 70%; background: var(--mv-text); border-radius: 0.125rem;}
.ms-pl-extra { background: none; border: none; color: var(--mv-text-2); font-size: 0.85rem; cursor: pointer; transition: color 0.15s;}
.ms-pl-extra:hover { color: var(--mv-text);}

/* Empty page placeholder */
.ms-empty-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center;}
.ms-empty-icon { font-size: 3rem; color: var(--mv-text-2); margin-bottom: 1.25rem;}
.ms-empty-title { font-size: 1.25rem; font-weight: 700; color: var(--mv-text); margin-bottom: 0.5rem;}
.ms-empty-desc { font-size: 0.85rem; color: var(--ms-muted); max-width: 20rem; line-height: 1.5;}

@keyframes orbPulse { 0%, 100% { transform: scale(1); opacity: 0.3;} 50% { transform: scale(1.3); opacity: 0.15;} }

@media (max-width: 1400px) {
    :root { --ms-roadmap-w: 16rem; --ms-sidebar-w: 13.5rem;}
    .ms-main { padding: 1.25rem 1.5rem 1.5rem;}
    .ms-coll-card { flex: 0 0 calc(33.33% - 0.75rem); min-width: 11rem;}
    .ms-welcome h1 { font-size: 1.5rem;}
}
@media (max-width: 1100px) {
    :root { --ms-sidebar-w: 4.5rem;}
    .ms-sidebar-logo span, .ms-nav a span, .ms-sidebar-legal { display: none;}
    .ms-nav a { justify-content: center; padding: 0.7rem;}
    .ms-nav a i { margin: 0; font-size: 1.1rem;}
    .ms-sidebar { padding: 1.25rem 0.5rem; align-items: center;}
    .ms-sidebar-logo { padding: 0; justify-content: center;}
    .ms-player { grid-template-columns: var(--ms-sidebar-w) 1fr var(--ms-roadmap-w);}
    .ms-coll-card { flex: 0 0 calc(33.33% - 0.75rem);}
}
@media (max-width: 900px) {
    .ms-app { grid-template-columns: 1fr; grid-template-rows: 1fr auto var(--ms-player-h); grid-template-areas: "main" "roadmap" "player";}
    .ms-sidebar { display: none;}
    .ms-coll-nav { display: none;}
    .ms-coll-track { -webkit-overflow-scrolling: touch; scroll-padding: 0 1rem;}
    .ms-roadmap { border-left: none; border-top: 1px solid var(--ms-border); max-height: 20rem;}
    .ms-player { grid-template-columns: 1fr 2fr 1fr;}
    .ms-mobile-toggle { display: flex;}
    .ms-main { padding: 1rem 1.25rem 1.25rem;}
    .ms-welcome h1 { font-size: 1.375rem;}
    .ms-sidebar.open {
        display: flex; position: fixed; top: 0; left: 0; bottom: 0;
        width: min(8.5rem, 50vw); z-index: 1000;
        background: rgba(9,16,24,0.97);
        padding: 1.25rem 0.625rem;
        border-right: 1px solid var(--ms-border);
        animation: slideIn 0.2s ease-out;}
    .ms-sidebar.open .ms-sidebar-logo { margin-bottom: 1.25rem;}
    .ms-sidebar.open .ms-sidebar-logo img, .ms-sidebar.open .ms-sidebar-logo svg { width: 1.5rem; height: 1.5rem;}
    .ms-sidebar.open .ms-sidebar-logo span { display: block; font-size: 0.9rem;}
    .ms-sidebar.open .ms-nav a span { display: block;}
    .ms-sidebar.open .ms-nav a { justify-content: flex-start; padding: 0.5rem 0.625rem; font-size: 0.8rem; border-radius: 0.625rem;}
    .ms-sidebar.open .ms-nav a i { font-size: 0.85rem; width: 1.1rem;}
    .ms-sidebar.open .ms-nav li { margin-bottom: 0.125rem;}
    .ms-sidebar.open .ms-sidebar-legal { display: flex;}
    .ms-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999;}
    .ms-sidebar-overlay.open { display: block;}
    @keyframes slideIn { from { transform: translateX(-100%);} to { transform: translateX(0);} }
}
@media (max-width: 640px) {
    :root { --ms-player-h: 4rem;}
    /* player „auto" → baza lui = baza app-ului, nu iese sub bara browserului */
    .ms-app { grid-template-rows: 1fr auto; grid-template-areas: "main" "player";}
    .ms-main { padding: 0.875rem 1rem; min-height: 0;}
    .ms-topbar { flex-wrap: wrap; gap: 0.625rem;}
    .ms-search { max-width: 100%; order: 2; flex-basis: 100%;}
    .ms-welcome h1 { font-size: 1.25rem;}
    .ms-welcome p { font-size: 0.8rem;}
    .ms-coll-card { flex: 0 0 calc(50% - 0.5rem); min-width: 9rem;}
    .ms-coll-img { padding-bottom: 65%;}
    .ms-sound-item { grid-template-columns: 2.75rem 1fr auto auto; gap: 0.5rem; padding: 0.5rem 0.625rem;}
    .ms-si-thumb { width: 2.75rem; height: 2.75rem;}
    .ms-si-play { font-size: 0.55rem;}
    .ms-si-tag, .ms-si-more { display: none;}
    .ms-roadmap { display: none;}
    .ms-roadmap.ms-rm-inline { display: block; padding: 1rem 0; margin-top: 1rem; border-top: 1px solid var(--ms-border); border-left: none;}
    /* Player mobil identic cu pagina Acasă: bară de progres subțire sus, titlu+artist 2 rânduri, controale aerisite */
    .ms-player {
        grid-template-columns: minmax(0, 1fr) auto; align-items: center;
        padding: 0.5rem 0.9rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        gap: 0.6rem; min-height: 3.85rem; box-sizing: border-box; position: relative;}
    .ms-pl-center .ms-pl-progress {
        display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0;
        max-width: none; padding: 0; gap: 0; margin: 0;}
    .ms-pl-progress .ms-pl-time { display: none;}
    .ms-pl-progress .ms-pl-bar { flex: 1; height: 3px; border-radius: 0;}
    .ms-pl-progress .ms-pl-fill { border-radius: 0; transition: width 0.2s linear;}
    .ms-pl-left { padding-right: 0; gap: 0.6rem; min-width: 0;}
    .ms-pl-thumb { width: 2.6rem; height: 2.6rem; border-radius: 0.5rem;}
    .ms-pl-title { font-size: 0.8rem; line-height: 1.15;}
    .ms-pl-sub { display: block; font-size: 0.62rem; line-height: 1.1; margin-top: 0.1rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .ms-pl-heart { display: none;}
    .ms-pl-center { flex-direction: row; justify-content: flex-end; gap: 0;}
    .ms-pl-controls { gap: 1.15rem; align-items: center;}
    .ms-pl-btn { font-size: 0.95rem;}
    .ms-pl-play-btn { width: 2.5rem; height: 2.5rem; font-size: 0.85rem;}
    .ms-pl-right { display: none;}
}
/* Telefoane înguste: ascunde shuffle+repeat */
@media (max-width: 400px) {
    #msShuffleBtn, #msRepeatBtn { display: none;}
    .ms-pl-controls { gap: 1.4rem;}
}

/* ── Mativera+ data pages (sunete / playlisturi / respirație / favorate / istoric) ── */
.ms-page-head { margin-bottom: 1.5rem;}
.ms-page-head h1 { font-size: 1.6rem; font-weight: 800; color: var(--mv-text); margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.6rem;}
.ms-page-head h1 i { color: var(--ms-purple-light, var(--mv-accent-soft));}
.ms-page-head p { color: var(--mv-text-2); font-size: 0.9rem; margin: 0;}
.ms-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;}
.ms-chip { padding: 0.45rem 1rem; border-radius: 2rem; background: var(--mv-elev-1); border: 1px solid var(--mv-border-soft); color: var(--mv-text-soft); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;}
.ms-chip:hover { color: var(--mv-text); background: var(--mv-elev-3);}
.ms-chip.active { background: rgba(110,193,255,0.2); color: var(--mv-text); border-color: rgba(110,193,255,0.3);}
.ms-section-sub { font-size: 0.78rem; color: var(--mv-text-2); margin: 1.5rem 0 0.75rem; text-transform: uppercase; font-weight: 700;}
.ms-now-playing { background: linear-gradient(90deg, rgba(110,193,255,0.12), transparent) !important;}
.ms-now-playing .ms-si-title { color: var(--ms-purple-light, var(--mv-accent-soft));}

/* Playlist grid */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem,1fr)); gap: 1rem;}
.ms-pl-card { background: var(--ms-card-solid,var(--mv-bg)); border: 1px solid var(--mv-border-soft); border-radius: 1rem; overflow: hidden; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s;}
.ms-pl-card:hover {}
.ms-pl-card-img { height: 9rem; position: relative; display: flex; align-items: flex-end; padding: 0.85rem;}
.ms-pl-card-play { position: absolute; right: 0.85rem; bottom: 0.85rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #10d39e; color: var(--mv-text-2); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: all 0.2s;}
.ms-pl-card:hover .ms-pl-card-play { opacity: 1; transform: none;}
.ms-pl-card-body { padding: 0.75rem 0.9rem 1rem;}
.ms-pl-card-name { font-weight: 700; color: var(--mv-text); font-size: 0.95rem; margin-bottom: 0.2rem;}
.ms-pl-card-meta { font-size: 0.72rem; color: var(--mv-text-2);}

/* Breathing cards */
.ms-breath-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem,1fr)); gap: 1rem;}
.ms-breath-card { background: var(--ms-card-solid,var(--mv-bg)); border: 1px solid var(--mv-border-soft); border-radius: 1.1rem; padding: 1.3rem; cursor: pointer; transition: transform 0.25s, border-color 0.25s; position: relative; overflow: hidden;}
.ms-breath-card:hover {}
.ms-breath-orb { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--mv-text); margin-bottom: 0.9rem;}
.ms-breath-card h3 { font-size: 1.02rem; font-weight: 700; color: var(--mv-text); margin: 0 0 0.3rem;}
.ms-breath-card p { font-size: 0.78rem; color: var(--mv-text-2); line-height: 1.5; margin: 0 0 0.9rem;}
.ms-breath-pattern { display: flex; gap: 0.4rem; flex-wrap: wrap;}
.ms-breath-pattern span { font-size: 0.66rem; padding: 0.2rem 0.55rem; border-radius: 0.4rem; background: var(--mv-elev-2); color: var(--mv-text); font-weight: 700;}
.ms-breath-cta { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--ms-purple-light,var(--mv-accent-soft));}

/* Breathing player overlay */
.ms-breath-stage { position: fixed; inset: 0; z-index: 10050; background: rgba(6,10,20,0.96); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;}
.ms-breath-stage.open { display: flex;}
.ms-breath-circle { width: 14rem; height: 14rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mv-text); font-size: 1.3rem; font-weight: 700; transition: transform 0.2s linear, box-shadow 0.4s; transform: scale(0.6);}
.ms-breath-phase { font-size: 1.1rem; color: var(--mv-text-soft);}
.ms-breath-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--mv-elev-3); border: none; color: var(--mv-text); font-size: 1.1rem; cursor: pointer;}
.ms-empty-inline { text-align: center; padding: 3rem 1rem; color: var(--mv-text-2);}
.ms-empty-inline i { font-size: 2.5rem; display: block; margin-bottom: 0.75rem;}

/* ═══ GATING Elite: sunete încuiate, roadmap încuiat, upsell ═══ */
.ms-sound-item.ms-locked { opacity: 0.62;}
.ms-sound-item.ms-locked .ms-si-title { color: var(--mv-text-soft);}
.ms-sound-item.ms-locked .ms-si-play { background: var(--mv-elev-2); color: var(--mv-warning);}
.ms-sound-item.ms-locked:hover { opacity: 0.82; background: rgba(255,213,107,0.05);}
.ms-si-elite { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 700;
  color: var(--mv-warning); background: rgba(255,213,107,0.12); border: 1px solid rgba(255,213,107,0.35);
  padding: 0.2rem 0.5rem; border-radius: 999px; text-transform: uppercase; white-space: nowrap;}
.ms-si-elite i { font-size: 0.6rem;}

/* Roadmap încuiat: TOT blocat (fără scroll), timeline blurat + overlay complet */
.ms-roadmap.ms-rm-locked { position: relative; overflow: hidden !important;}
.ms-rm-locked .ms-rm-header,
.ms-rm-locked .ms-rm-timeline,
.ms-rm-locked .ms-rm-cta-elite { opacity: 0.45; pointer-events: none; -webkit-user-select: none; user-select: none;}
.ms-rm-cta-elite { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; background: var(--mv-warning); color: var(--mv-text-inverse); font-weight: 800;}
/* overlay peste TOT roadmap-ul (inclusiv header) → „full blocat indiferent de conținut" */
.ms-rm-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; z-index: 5; background: rgba(9,14,28,0.45);}
.ms-rm-lock-inner { text-align: center; max-width: 240px; background: rgba(10,16,32,0.72);
  border: 1px solid rgba(255,213,107,0.25); border-radius: 18px; padding: 1.5rem 1.25rem;}
.ms-rm-lock-inner > i { font-size: 1.6rem; color: var(--mv-warning); margin-bottom: 0.6rem; display: block;}
.ms-rm-lock-title { font-weight: 800; color: var(--mv-text-soft); font-size: 1rem; margin-bottom: 0.35rem;}
.ms-rm-lock-sub { color: var(--mv-accent); font-size: 0.8rem; line-height: 1.5; margin-bottom: 1rem;}
.ms-rm-lock-btn { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; font-weight: 700; font-size: 0.85rem; background: var(--mv-warning); color: var(--mv-text-inverse); padding: 0.6rem 1.1rem; border-radius: 999px;}

/* Modal upsell Elite */
.ms-upsell { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;
  background: rgba(4,8,18,0.72); padding: 1.25rem;}
.ms-upsell.open { display: flex; animation: msUpFade 0.18s ease;}
@keyframes msUpFade { from{opacity: 0;} to{opacity: 1;} }
.ms-upsell-card { position: relative; width: 100%; max-width: 360px; text-align: center; background: #111a2e; border: 1px solid rgba(255,213,107,0.28);
  border-radius: 22px; padding: 2rem 1.5rem 1.5rem;}
.ms-upsell-x { position: absolute; top: 0.85rem; right: 0.85rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--mv-elev-2); border: none; color: var(--mv-text-2); cursor: pointer;}
.ms-upsell-crown { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--mv-text-2);
  background: linear-gradient(135deg,var(--mv-warning),var(--mv-warning)); box-shadow:0 8px 24px rgba(240,147,90,0.4);}
.ms-upsell-title { font-size: 1.35rem; font-weight: 800; color: var(--mv-text-soft); margin-bottom: 0.5rem;}
.ms-upsell-sub { color: var(--mv-accent); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.4rem;}
.ms-upsell-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; background: var(--mv-warning); color: var(--mv-text-inverse); font-weight: 800; font-size: 0.95rem;
  padding: 0.85rem; border-radius: 14px; margin-bottom: 0.6rem;}
.ms-upsell-later { width: 100%; background: none; border: none; color: var(--mv-text-2); font-size: 0.85rem; cursor: pointer; padding: 0.5rem;}