/* ═══════════════════════════════════════
   MINDFUL SOUNDS — COMPLETE APP LAYOUT
   ═══════════════════════════════════════ */

/* ── 1. Variables ── */
: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;}

/* ── 2. Hide site chrome ── */
.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;}

/* ── 3. App Layout ── */
.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 pt. iOS vechi (<15.4) fără unități noi */
    height: 100svh;            /* fallback fără JS: cea mai mică înălțime vizibilă */
    height: var(--ms-app-h, 100svh);  /* JS (VisualViewport): exact zona vizibilă → mulat pe bara oricărui browser, player mereu vizibil */
    font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
    color: var(--ms-text);
    /* top/left în loc de inset: 0 — evită conflictul bottom:0 vs height pe iOS */
    position: fixed; top: 0; left: 0; z-index: 9999;
    background: var(--mv-bg);}
#msBgCanvas {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;}

/* ── 4. Sidebar ── */
.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 {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: var(--ms-r);
    padding: 1.25rem 1rem;
    text-align: center;
    margin-top: 1rem;}
.ms-premium-icon {
    width: 3rem; height: 3rem; margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.1));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: var(--ms-purple-light);}
.ms-premium-title { font-size: 0.875rem; font-weight: 700; color: var(--mv-text); margin-bottom: 0.375rem;}
.ms-premium-desc { font-size: 0.7rem; color: var(--ms-muted); line-height: 1.5; margin-bottom: 0.875rem;}
.ms-premium-btn {
    display: inline-block; padding: 0.5rem 1.25rem; background: var(--mv-accent); color: var(--mv-text-inverse); border: none; border-radius: 2rem;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;}
.ms-premium-btn:hover {}

/* ── 5. Main Content ── */
.ms-sidebar-premium { display: none;}

.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;}

/* ── Top Bar ── */
.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-topbar-btn {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--mv-elev-1); border: 1px solid var(--ms-border);
    color: var(--ms-muted); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; font-size: 0.9rem;}
.ms-topbar-btn:hover { color: var(--mv-text); background: var(--mv-elev-3);}
.ms-user {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: var(--mv-elev-1); border: 1px solid var(--ms-border);
    border-radius: 2rem; cursor: pointer; transition: background 0.2s;}
.ms-user:hover { background: var(--mv-elev-3);}
.ms-user-avatar {
    width: 2.125rem; height: 2.125rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--mv-accent), var(--mv-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 600; color: var(--mv-text);}
.ms-user-info { line-height: 1.2;}
.ms-user-name { font-size: 0.8rem; font-weight: 600; color: var(--mv-text);}
.ms-user-sub { font-size: 0.65rem; color: var(--ms-muted);}

/* ── Welcome ── */
.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);}

/* ── Section Titles ── */
.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;}

/* ── 6. Collections Carousel ── */
.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;}

/* ── 7. Popular Sounds ── */
.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.625rem 0.875rem;
    border-radius: var(--ms-r-sm);
    transition: background 0.15s;}
.ms-sound-item:hover { background: var(--mv-elev-1);}

.ms-si-thumb { position: relative; cursor: pointer;}
.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-thumb {
    width: 3.25rem; height: 3.25rem; border-radius: 0.625rem;
    overflow: hidden; flex-shrink: 0;}
.ms-si-thumb canvas { width: 100%; height: 100%; display: block;}

.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);}

/* ── 8. 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 {}

/* ── 9. 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) are masa vizuală în stânga → nudge optic la dreapta ca să pară
   perfect centrată în cerc. Pauza (simetrică) 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);}

/* ── 10. Animations ── */
@keyframes orbPulse {
    0%, 100% { transform: scale(1); opacity: 0.3;}
    50% { transform: scale(1.3); opacity: 0.15;}
}

/* ── 11. Mobile menu toggle ── */
.ms-mobile-toggle {
    display: none; background: none; border: none;
    color: var(--mv-text); font-size: 1.25rem; cursor: pointer; padding: 0.5rem;}

/* ── 12. Responsive ── */

/* Large Laptop */
@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;}
}

/* Tablet */
@media (max-width: 1100px) {
    :root { --ms-sidebar-w: 4.5rem;}
    .ms-sidebar-logo span,
    .ms-nav a span,
    .ms-sidebar-premium { 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);}
}

/* Small Tablet */
@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-coll-nav { display: none;}
    .ms-coll-track { -webkit-overflow-scrolling: touch;}
    .ms-sidebar { display: none;}
    .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 { 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;}
    @keyframes slideIn { from { transform: translateX(-100%);} to { transform: translateX(0);} }
    .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;}
}

/* Phone */
@media (max-width: 640px) {
    :root { --ms-player-h: 4rem;}
    .ms-app {
        /* player pe „auto" (nu track fix) → randul are EXACT inaltimea playerului,
           deci baza lui coincide fix cu baza app-ului; nu mai iese 6px sub bara browserului */
        grid-template-rows: 1fr auto;
        grid-template-areas: "main" "player";}
    .ms-main { min-height: 0;}   /* permite randului 1fr sa se micsoreze si sa scroll-eze */
    .ms-main { padding: 0.875rem 1rem;}
    .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 { display: none;}
    .ms-si-more { display: none;}

    .ms-roadmap {
        display: none;
        border: none; max-height: none;}
    .ms-roadmap.ms-rm-inline {
        display: block;
        padding: 1rem 0; margin-top: 1rem;
        border-top: 1px solid var(--ms-border);}

    .ms-player {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        /* padding-bottom = spatiu normal + zona sigura (home indicator pe browserele fara bara jos) */
        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;               /* pentru linia de progres pinuita sus */
    ;}
    /* Linie de progres subtire, full-width, in varful barei — ca la playerele reale */
    .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;}
    /* Stanga: thumb + titlu + artist (2 randuri = arata intentionat, nu gol) */
    .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;}
    /* Centru: controale aerisite, aliniate dreapta */
    .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 inguste: ascunde shuffle+repeat, ramai cu prev/play/next aerisite */
@media (max-width: 400px) {
    #msShuffleBtn, #msRepeatBtn { display: none;}
    .ms-pl-controls { gap: 1.4rem;}
}