:root{--bg:#07101f;--bg2:#0b1528;--panel:#111d33;--panel2:#16243d;--line:rgba(255,255,255,.09);--text:#f7f9ff;--muted:#97a6be;--accent:#8b7cf6;--accent2:#5fd5d0;--danger:#fb7185;--success:#34d399;--shadow:0 20px 60px rgba(0,0,0,.28);--player-h:92px;--sidebar-w:246px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% 0,rgba(89,79,180,.16),transparent 28%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;padding-bottom:var(--player-h)}.sidebar{position:fixed;inset:0 auto var(--player-h) 0;width:var(--sidebar-w);padding:28px 20px;border-right:1px solid var(--line);background:rgba(7,16,31,.88);backdrop-filter:blur(20px);display:flex;flex-direction:column;z-index:40}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,var(--accent),#5f51c8);font-size:25px;box-shadow:0 10px 30px rgba(139,124,246,.3)}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:11px;margin-top:2px}.main-nav{display:grid;gap:7px;margin-top:38px}.main-nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;color:var(--muted);border-radius:13px;font-weight:600;font-size:14px}.main-nav a span{font-size:20px;width:22px;text-align:center}.main-nav a:hover,.main-nav a.active{background:rgba(139,124,246,.13);color:#fff}.sidebar-spacer{flex:1}.profile-card{display:flex;gap:10px;align-items:center;padding:12px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:14px;margin-bottom:9px}.profile-card .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);font-weight:800}.profile-card strong,.profile-card small{display:block;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-card small{font-size:10px;color:var(--muted);margin-top:2px}.sidebar-link{padding:8px 10px;color:var(--muted);font-size:13px}.sidebar-link.center{text-align:center}.main-content{grid-column:2;padding:0 36px 48px;min-width:0}.topbar{height:82px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;background:linear-gradient(var(--bg) 70%,transparent)}.search-wrap{flex:1;max-width:520px;position:relative}.search-wrap span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px}.search-wrap input{width:100%;height:46px;padding:0 16px 0 45px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--text);outline:none}.search-wrap input:focus{border-color:rgba(139,124,246,.65);box-shadow:0 0 0 3px rgba(139,124,246,.12)}.icon-button{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:#fff;font-size:20px}.mobile-only{display:none}.btn{border:0;border-radius:13px;padding:11px 17px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--accent),#6655d5)}.btn-soft{color:#dfe3ff;background:rgba(139,124,246,.12);border:1px solid rgba(139,124,246,.2)}.btn-danger{color:#ffdce2;background:rgba(251,113,133,.13);border:1px solid rgba(251,113,133,.24)}.btn-large{padding:14px 20px}.full{width:100%}.hero{min-height:310px;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding:44px 48px;background:linear-gradient(120deg,#182545,#222854 58%,#35306c);position:relative;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03));pointer-events:none}.hero-copy{position:relative;z-index:2;max-width:590px}.eyebrow{display:inline-block;color:var(--accent2);font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.hero h1,.page-heading h1,.auth-card h1,.admin-top h1{font-size:clamp(30px,4vw,49px);line-height:1.08;margin:10px 0 14px;letter-spacing:-.035em}.hero p{color:#c1c9dc;line-height:1.65;max-width:530px;margin:0 0 24px}.moon-scene{height:260px;position:relative}.moon{position:absolute;width:145px;height:145px;border-radius:50%;right:18%;top:22px;background:#fff9d7;box-shadow:0 0 60px rgba(255,249,215,.46)}.moon:after{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(133,118,180,.14);left:28px;top:28px;box-shadow:52px 31px 0 -8px rgba(133,118,180,.11),20px 78px 0 -12px rgba(133,118,180,.1)}.cloud{position:absolute;height:45px;width:145px;border-radius:60px;background:rgba(219,225,255,.14);backdrop-filter:blur(3px)}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:70px;height:70px;left:20px;bottom:0}.cloud:after{width:55px;height:55px;right:18px;bottom:0}.cloud-a{right:2%;bottom:40px}.cloud-b{left:10%;bottom:16px;transform:scale(.72);opacity:.65}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:42px 42px;opacity:.35}.category-strip{display:flex;gap:10px;overflow:auto;padding:26px 2px 10px;scrollbar-width:none}.category-strip::-webkit-scrollbar{display:none}.category-chip{flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--muted);padding:10px 15px;border-radius:999px;font-weight:700}.category-chip span{margin-right:5px}.category-chip:hover,.category-chip.active{background:rgba(139,124,246,.14);border-color:rgba(139,124,246,.35);color:#fff}.section-heading,.page-heading,.admin-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 18px}.section-heading h2,.page-heading h1,.admin-section-heading h2{margin:0 0 5px}.section-heading p,.page-heading p,.admin-section-heading p{margin:0;color:var(--muted)}.section-heading>span{color:var(--muted);font-size:13px}.sound-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.sound-card{min-width:0}.sound-cover{aspect-ratio:1/1;position:relative;border-radius:22px;overflow:hidden;background:var(--panel)}.sound-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s transform}.sound-card:hover .sound-cover img{transform:scale(1.035)}.round-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border:0;border-radius:50%;color:#fff;background:rgba(7,16,31,.72);backdrop-filter:blur(12px);font-size:20px;padding-left:4px;opacity:0;transition:.2s}.sound-card:hover .round-play,.sound-card.playing .round-play{opacity:1}.sound-card.playing .round-play{background:var(--accent);padding-left:0}.featured-badge{position:absolute;left:12px;top:12px;padding:6px 9px;border-radius:999px;background:rgba(7,16,31,.7);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.sound-info{display:flex;gap:8px;padding:12px 3px}.sound-info>div{min-width:0;flex:1}.sound-info small{color:var(--accent2);font-size:11px;font-weight:700}.sound-info h3{font-size:16px;margin:4px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sound-info p{margin:0;color:var(--muted);font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.favorite-button{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#c3cad8;font-size:22px}.favorite-button.active{background:rgba(251,113,133,.13);border-color:rgba(251,113,133,.3);color:var(--danger)}.player{position:fixed;z-index:60;left:0;right:0;bottom:0;height:var(--player-h);padding:14px 26px;display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(240px,1fr);align-items:center;background:rgba(10,19,35,.94);border-top:1px solid var(--line);backdrop-filter:blur(22px)}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-track img{width:58px;height:58px;object-fit:cover;border-radius:14px;background:var(--panel)}.player-copy{min-width:0}.player-copy strong,.player-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-copy span{color:var(--muted);font-size:12px;margin-top:4px}.player-controls{display:flex;align-items:center;gap:14px}.control-button,.main-play{border:0;color:#fff;background:transparent}.control-button{opacity:.72}.main-play{width:52px;height:52px;border-radius:50%;background:#f5f7ff;color:#10182b;font-size:18px;font-weight:900}.player-actions{justify-self:end;display:flex;align-items:center;gap:20px}.timer-button{border:1px solid var(--line);background:rgba(255,255,255,.045);color:#e6eaff;border-radius:12px;padding:9px 12px;display:flex;gap:7px}.volume-control{display:flex;align-items:center;gap:8px}.volume-control input{width:100px;accent-color:var(--accent)}.modal[hidden],.sleep-screen[hidden]{display:none}.modal{position:fixed;z-index:100;inset:0;padding:20px;background:rgba(2,6,15,.75);display:grid;place-items:center;backdrop-filter:blur(8px)}.modal-panel{width:min(470px,100%);border:1px solid var(--line);border-radius:24px;padding:28px;background:var(--panel);box-shadow:var(--shadow);position:relative}.modal-panel h2{margin:8px 0}.modal-panel>p{color:var(--muted);margin:0 0 20px}.modal-close{position:absolute;right:18px;top:15px;background:transparent;border:0;color:#fff;font-size:28px}.timer-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.timer-options button{padding:14px;border-radius:13px;border:1px solid var(--line);color:#fff;background:rgba(255,255,255,.04);font-weight:700}.timer-options button:hover{border-color:var(--accent);background:rgba(139,124,246,.12)}.custom-time{display:block;color:var(--muted);font-size:13px;margin:16px 0}.custom-time span{display:flex;margin-top:8px}.custom-time input{flex:1;min-width:0;border:1px solid var(--line);background:#0c1729;color:#fff;padding:11px;border-radius:12px 0 0 12px}.custom-time button{border:0;border-radius:0 12px 12px 0;background:var(--accent);color:#fff;padding:0 16px}.sleep-screen{position:fixed;inset:0;z-index:120;background:radial-gradient(circle at 50% 30%,#24285c,#070d19 60%);display:flex;flex-direction:column;align-items:center;justify-content:center}.sleep-screen>button:first-child{position:absolute;right:25px;top:25px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;font-size:25px}.sleep-moon{font-size:90px;color:#fff6bf;text-shadow:0 0 45px rgba(255,246,191,.4)}.sleep-screen>strong{font-size:clamp(72px,14vw,150px);font-weight:300;letter-spacing:-.06em}.sleep-screen>span{color:#cbd3e4;font-size:18px}.sleep-play{width:72px;height:72px;border-radius:50%;border:0;margin:28px 0 15px;background:#fff;color:#111827;font-size:24px}.sleep-screen small{color:var(--muted)}.toast-stack{position:fixed;right:18px;bottom:calc(var(--player-h) + 18px);z-index:150;display:grid;gap:8px}.toast{max-width:340px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#18243a;box-shadow:var(--shadow);font-size:13px}.toast.error{border-color:rgba(251,113,133,.4)}.empty-state{text-align:center;padding:70px 20px;border:1px dashed rgba(255,255,255,.14);border-radius:24px}.empty-state.compact{padding:40px 20px}.empty-icon{font-size:44px;color:var(--accent)}.empty-state h2{margin:10px 0 5px}.empty-state p{color:var(--muted);margin:0 0 18px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0 25px}.stat-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.stat-card small,.stat-card span,.stat-card strong{display:block}.stat-card small,.stat-card span{color:var(--muted)}.stat-card strong{font-size:28px;margin:6px 0}.stat-card strong.stat-text{font-size:18px;margin-top:13px}.stat-card span{font-size:11px}.history-list{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:12px 15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}.history-item img{width:54px;height:54px;border-radius:13px;object-fit:cover}.history-main strong,.history-main span,.history-duration strong,.history-duration span{display:block}.history-main span,.history-duration span{color:var(--muted);font-size:11px;margin-top:4px}.history-duration{text-align:right}.auth-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,rgba(139,124,246,.2),transparent 35%),var(--bg)}.auth-shell{width:min(460px,100%)}.auth-brand{display:flex;justify-content:center;align-items:center;gap:8px;font-size:20px;font-weight:800;margin-bottom:20px}.auth-brand span{font-size:30px;color:#fff4bd}.auth-card{padding:32px;border:1px solid var(--line);border-radius:24px;background:rgba(17,29,51,.86);box-shadow:var(--shadow)}.auth-card h1{font-size:34px}.auth-card>p{color:var(--muted);line-height:1.5}.auth-card form{display:grid;gap:15px;margin-top:24px}.auth-card label,.admin-form label{display:grid;gap:7px;color:#cdd5e5;font-size:13px;font-weight:700}.auth-card input,.admin-form input,.admin-form select,.admin-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:#0c1729;color:#fff;outline:none}.auth-card input:focus,.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{border-color:var(--accent)}.auth-footer{text-align:center;font-size:13px}.auth-footer a{color:var(--accent2);font-weight:800}.alert{padding:12px 15px;border-radius:12px;margin:14px 0;font-size:13px}.alert.error{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.3);color:#ffd5dc}.alert.success{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#caffeb}.admin-page{display:grid;grid-template-columns:230px 1fr;min-height:100vh;background:var(--bg)}.admin-sidebar{position:fixed;inset:0 auto 0 0;width:230px;padding:25px 18px;border-right:1px solid var(--line);background:#091326}.admin-sidebar nav{display:grid;gap:5px;margin-top:36px}.admin-sidebar nav a{padding:11px 13px;color:var(--muted);border-radius:11px}.admin-sidebar nav a:hover,.admin-sidebar nav a.active{background:rgba(139,124,246,.12);color:#fff}.admin-main{grid-column:2;padding:30px 36px 60px;min-width:0}.admin-top{display:flex;justify-content:space-between;align-items:center}.admin-top h1{font-size:34px;margin:7px 0}.admin-user{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.admin-stats{grid-template-columns:repeat(4,1fr)}.admin-section{margin-top:35px;padding:25px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025);scroll-margin-top:20px}.admin-form{padding:20px;border-radius:17px;background:#0c1729;margin-bottom:20px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.span-2{grid-column:span 2}.checks{display:flex;gap:18px;align-items:center}.checks label,.check-inline{display:flex!important;align-items:center;gap:7px!important}.checks input,.check-inline input{width:auto!important}.form-actions{display:flex;gap:10px;margin-top:18px}.admin-table-wrap{overflow:auto}.admin-table-wrap table{width:100%;border-collapse:collapse;min-width:750px}.admin-table-wrap th,.admin-table-wrap td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.admin-table-wrap th{color:var(--muted);font-size:11px;text-transform:uppercase}.table-sound{display:flex;gap:10px;align-items:center}.table-sound img{width:42px;height:42px;border-radius:10px;object-fit:cover}.table-sound strong,.table-sound small{display:block}.table-sound small{max-width:260px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-badge{padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800}.status-badge.on{background:rgba(52,211,153,.12);color:#81f4cb}.status-badge.off{background:rgba(251,113,133,.12);color:#ffafbd}.table-actions{display:flex;gap:10px}.table-actions a,.table-actions button{color:var(--accent2);background:none;border:0;padding:0;font-weight:700}.table-actions button{color:var(--danger)}.compact-form{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;align-items:end;gap:12px}.category-admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.category-admin-grid article{display:flex;gap:10px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px}.category-admin-grid article>span{font-size:24px}.category-admin-grid strong,.category-admin-grid small{display:block}.category-admin-grid small{color:var(--muted);font-size:10px;margin-top:3px}.sidebar-backdrop{display:none}
@media(max-width:1100px){.sound-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr .6fr}.admin-stats{grid-template-columns:repeat(2,1fr)}.category-admin-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){:root{--sidebar-w:0px;--player-h:78px}.app-shell{display:block}.sidebar{width:270px;bottom:0;transform:translateX(-105%);transition:.25s;z-index:90}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80}.sidebar-backdrop.show{display:block}.main-content{padding:0 18px 35px}.mobile-only{display:grid}.topbar{height:72px}.hero{min-height:300px;padding:34px 28px;grid-template-columns:1fr}.moon-scene{position:absolute;inset:0;opacity:.3}.hero-copy{max-width:600px}.sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.player{height:78px;padding:10px 14px;grid-template-columns:1fr auto}.player-track img{width:50px;height:50px}.player-actions{display:none}.player-controls{gap:8px}.control-button{display:none}.main-play{width:48px;height:48px}.admin-page{display:block}.admin-sidebar{position:static;width:auto;border-right:0;padding:18px}.admin-sidebar nav{display:flex;overflow:auto;margin-top:18px}.admin-main{padding:22px 18px}.compact-form{grid-template-columns:1fr 1fr}.category-admin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar .btn-soft{display:none}.search-wrap input{font-size:13px}.hero{padding:30px 22px;border-radius:22px}.hero h1{font-size:34px}.hero p{font-size:14px}.sound-grid{gap:12px}.sound-cover{border-radius:17px}.round-play{opacity:1;width:46px;height:46px}.sound-info p{display:none}.sound-info h3{font-size:14px}.category-strip{padding-top:18px}.section-heading{margin-top:21px}.player-copy strong{font-size:13px}.player-copy span{font-size:10px}.stats-grid{grid-template-columns:1fr}.history-item{grid-template-columns:46px 1fr}.history-item img{width:46px;height:46px}.history-duration{grid-column:2;text-align:left;display:flex;gap:7px}.admin-top{align-items:flex-start}.admin-user{display:none}.admin-stats,.form-grid,.category-admin-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.compact-form{grid-template-columns:1fr}.admin-section{padding:17px}.timer-options{grid-template-columns:1fr 1fr}.auth-card{padding:25px 20px}}

/* ===== SonoSono 2.0: layout moderno, mixer e GIFs ===== */
:root{
    --bg:#070d18;
    --bg2:#0b1322;
    --panel:#111a2a;
    --panel2:#172235;
    --line:rgba(255,255,255,.055);
    --shadow:0 24px 70px rgba(0,0,0,.34);
    --player-h:108px;
    --sidebar-w:224px;
}
body{
    background:
        radial-gradient(circle at 76% -10%,rgba(139,124,246,.14),transparent 32%),
        radial-gradient(circle at 20% 20%,rgba(95,213,208,.06),transparent 30%),
        var(--bg);
}
.app-shell{padding-bottom:calc(var(--player-h) + 16px)}
.sidebar{
    inset:0 auto 0 0;
    padding:26px 18px;
    border-right:0;
    background:rgba(7,13,24,.8);
    box-shadow:18px 0 55px rgba(0,0,0,.12);
}
.brand-mark{border-radius:15px;box-shadow:0 12px 32px rgba(139,124,246,.22)}
.main-nav a{border-radius:14px}
.profile-card{
    border:0;
    background:rgba(255,255,255,.055);
}
.main-content{
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding:0 clamp(22px,3vw,46px) 54px;
}
.topbar{
    height:86px;
    background:linear-gradient(180deg,rgba(7,13,24,.96) 0%,rgba(7,13,24,.82) 70%,transparent 100%);
}
.search-wrap{max-width:560px}
.search-wrap input{
    height:48px;
    border:0;
    border-radius:16px;
    background:rgba(255,255,255,.065);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.search-wrap input:focus{
    border:0;
    box-shadow:0 0 0 3px rgba(139,124,246,.18),inset 0 1px 0 rgba(255,255,255,.04);
}
.icon-button{
    border:0;
    background:rgba(255,255,255,.065);
}
.btn-soft{border:0}
.hero{
    min-height:326px;
    border-radius:32px;
    padding:46px 50px;
    background:
        radial-gradient(circle at 78% 24%,rgba(255,255,255,.08),transparent 23%),
        linear-gradient(120deg,#17233e,#202751 58%,#35316b);
    box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.category-strip{padding-top:28px}
.category-chip{
    border:0;
    background:rgba(255,255,255,.055);
    padding:11px 16px;
}
.category-chip:hover,.category-chip.active{
    border-color:transparent;
    background:rgba(139,124,246,.18);
    box-shadow:inset 0 0 0 1px rgba(139,124,246,.12);
}
.sound-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}
.sound-card{
    padding:8px;
    border-radius:26px;
    background:rgba(255,255,255,.025);
    transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.sound-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.05);
    box-shadow:0 18px 42px rgba(0,0,0,.2);
}
.sound-card.mixed{background:rgba(95,213,208,.075)}
.sound-cover{
    aspect-ratio:4/3;
    border-radius:20px;
}
.sound-info{padding:13px 6px 7px}
.favorite-button{
    border:0;
    background:rgba(255,255,255,.06);
}
.favorite-button.active{border:0}
.mix-button{
    position:absolute;
    right:12px;
    top:12px;
    z-index:3;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:rgba(7,13,24,.7);
    backdrop-filter:blur(12px);
    font-size:22px;
    line-height:1;
    transition:.2s ease;
}
.mix-button:hover,.mix-button.active{
    background:var(--accent2);
    color:#07101f;
    transform:scale(1.06);
}
.featured-badge{left:12px;top:12px;border:0}
.player{
    left:calc(var(--sidebar-w) + 24px);
    right:24px;
    bottom:16px;
    height:92px;
    padding:13px 20px;
    border:0;
    border-radius:24px;
    background:rgba(15,24,39,.93);
    box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);
    grid-template-columns:minmax(210px,1fr) auto minmax(350px,1fr);
}
.player-track{position:relative}
.player-track img{width:62px;height:62px;border-radius:17px}
.mix-indicator{
    display:grid;
    place-items:center;
    min-width:31px;
    height:25px;
    padding:0 8px;
    border-radius:999px;
    background:rgba(95,213,208,.16);
    color:var(--accent2);
    font-size:11px;
    font-weight:800;
}
.main-play{box-shadow:0 10px 30px rgba(0,0,0,.22)}
.timer-button{
    border:0;
    background:rgba(255,255,255,.065);
    border-radius:13px;
}
.volume-control input{width:92px}
.modal-panel{
    border:0;
    border-radius:28px;
    background:rgba(17,26,42,.98);
    box-shadow:0 30px 90px rgba(0,0,0,.52);
}
.timer-options button{
    border:0;
    background:rgba(255,255,255,.055);
}
.timer-options button:hover{border-color:transparent}
.mixer-panel{width:min(700px,100%)}
.mixer-tracks{display:grid;gap:12px;margin-top:20px}
.mixer-track{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 170px auto;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:19px;
    background:rgba(255,255,255,.05);
}
.mixer-track.secondary-empty{opacity:.63}
.mixer-track img{
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:16px;
    background:var(--panel2);
}
.mixer-track-copy{min-width:0}
.mixer-track-copy small,.mixer-track-copy strong,.mixer-track-copy span{display:block}
.mixer-track-copy small{
    color:var(--accent2);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.mixer-track-copy strong{
    margin:5px 0 3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mixer-track-copy span{color:var(--muted);font-size:12px}
.mixer-volume{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}
.mixer-volume input{width:100%;accent-color:var(--accent)}
.remove-mix{
    border:0;
    border-radius:11px;
    padding:9px 11px;
    background:rgba(251,113,133,.12);
    color:#ffdce2;
    font-weight:700;
}
.sleep-screen{overflow:hidden;background:#070d18}
.sleep-background{
    position:absolute;
    inset:-4%;
    width:108%;
    height:108%;
    object-fit:cover;
    filter:blur(8px) saturate(.82);
    transform:scale(1.02);
    opacity:.58;
}
.sleep-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(4,8,16,.46),rgba(4,8,16,.78));
}
.sleep-screen>*:not(.sleep-background):not(.sleep-overlay){position:relative;z-index:2}
.sleep-screen>button:first-of-type{position:absolute;z-index:3}
.toast{
    border:0;
    border-radius:14px;
    background:#18243a;
}
.empty-state{
    border:0;
    background:rgba(255,255,255,.025);
}
.stat-card{
    border:0;
    background:rgba(255,255,255,.045);
}
.history-item{
    border:0;
    background:rgba(255,255,255,.04);
}
.auth-card{
    border:0;
    background:rgba(17,29,51,.9);
}
.auth-card input,.admin-form input,.admin-form select,.admin-form textarea{
    border:0;
    background:rgba(255,255,255,.06);
}
.auth-card input:focus,.admin-form input:focus,.admin-form select:focus,.admin-form textarea:focus{
    border-color:transparent;
    box-shadow:0 0 0 3px rgba(139,124,246,.18);
}
.admin-sidebar{border-right:0;background:#091326}
.admin-main{max-width:1480px;width:100%;margin:0 auto}
.admin-user{border:0;background:rgba(255,255,255,.055)}
.admin-section{
    border:0;
    background:rgba(255,255,255,.035);
}
.admin-form{background:rgba(5,12,24,.5)}
.category-admin-grid article{
    border:0;
    background:rgba(255,255,255,.045);
}
.admin-form label>small{color:var(--muted);font-weight:500;line-height:1.4}
.mixer-top-button{display:none}
.mj-ad-section{width:100%;margin:0 0 22px}
.mj-ad-section[hidden],.mj-ad-section[data-ad-empty="1"]{display:none}
.mj-ad-frame{display:block;width:100%;height:122px;border:0;border-radius:18px;background:transparent;overflow:hidden}
.top-ad{margin-top:22px}
.sidebar-ad{margin:18px 0 0}
.sidebar-ad-frame{height:158px;border-radius:16px}
.result-ad{margin-top:24px}
.result-ad-frame{height:122px}

@media(max-width:1180px){
    .sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .player{grid-template-columns:minmax(180px,1fr) auto minmax(280px,1fr)}
    .player-actions{gap:10px}
    .volume-control{display:none}
}

@media(max-width:820px){
    :root{--sidebar-w:0px;--player-h:96px}
    .app-shell{padding-bottom:calc(var(--player-h) + 12px)}
    .main-content{max-width:none;padding:0 16px 36px}
    .sidebar-ad{display:none}
    .mj-ad-frame{height:158px;border-radius:16px}
    .sidebar{bottom:0}
    .topbar{height:72px}
    .mixer-top-button{display:grid}
    .hero{padding:34px 28px;border-radius:26px}
    .sound-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .player{
        left:10px;
        right:10px;
        bottom:10px;
        height:78px;
        padding:10px 12px;
        border-radius:20px;
        grid-template-columns:minmax(0,1fr) auto;
    }
    .player-track img{width:52px;height:52px;border-radius:14px}
    .player-actions{display:none}
    .mix-indicator{height:22px;min-width:28px}
    .mixer-track{grid-template-columns:56px minmax(0,1fr)}
    .mixer-track img{width:56px;height:56px}
    .mixer-volume{grid-column:1/-1}
    .remove-mix{grid-column:1/-1;justify-self:start}
}

@media(max-width:560px){
    .hero{padding:29px 21px}
    .sound-card{padding:6px;border-radius:21px}
    .sound-cover{border-radius:17px;aspect-ratio:1/1}
    .mix-button{width:34px;height:34px;right:9px;top:9px;font-size:20px}
    .featured-badge{left:9px;top:9px}
    .sound-info{padding:11px 4px 5px}
    .mixer-panel{padding:24px 18px}
    .mixer-track{padding:12px;gap:11px}
    .player-copy strong{max-width:150px}
    .sleep-background{filter:blur(5px) saturate(.82)}
}
.sleep-screen>button:first-of-type{
    position:absolute;
    right:25px;
    top:25px;
    z-index:3;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.11);
    color:#fff;
    font-size:25px;
    backdrop-filter:blur(10px);
}

/* ===== SonIA 3.0: product workspace ===== */
:root{
    --bg:#090d18;
    --bg2:#0d1321;
    --panel:#121927;
    --panel2:#182132;
    --line:rgba(255,255,255,.075);
    --text:#f4f6fb;
    --muted:#8c96a9;
    --accent:#7c6cf2;
    --accent2:#8ae1cf;
    --accent-soft:rgba(124,108,242,.14);
    --player-h:88px;
    --sidebar-w:236px;
    --radius:20px;
}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body{
    background:
        radial-gradient(circle at 90% -10%,rgba(124,108,242,.09),transparent 28%),
        var(--bg);
    font-feature-settings:"cv02","cv03","cv04","cv11";
}
button,a,input{transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.app-shell{padding-bottom:calc(var(--player-h) + 18px)}
.sidebar{
    inset:0 auto var(--player-h) 0;
    padding:26px 18px 22px;
    background:#0b101c;
    border-right:1px solid var(--line);
    box-shadow:none;
}
.brand{padding:0 7px}
.brand-mark{
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(145deg,#8b7cf6,#6857dd);
    box-shadow:0 10px 28px rgba(107,89,224,.22);
}
.brand-mark svg{width:21px;height:21px}
.brand strong{font-size:15px;letter-spacing:-.01em}
.brand small{font-size:10px}
.main-nav{gap:4px;margin-top:38px}
.nav-label{
    color:#596477;
    padding:0 12px 8px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.main-nav a{
    position:relative;
    gap:12px;
    min-height:44px;
    padding:11px 12px;
    border-radius:12px;
    color:#909aac;
    font-weight:650;
}
.main-nav a svg{width:19px;height:19px}
.main-nav a:hover{background:rgba(255,255,255,.045);color:#dce2ee}
.main-nav a.active{background:var(--accent-soft);color:#fff}
.main-nav a.active:before{
    content:"";
    position:absolute;
    left:-18px;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:0 4px 4px 0;
    background:var(--accent);
}
.sidebar-session{
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:22px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:15px;
    background:rgba(255,255,255,.025);
    color:var(--text);
    text-align:left;
}
.sidebar-session:hover{background:rgba(255,255,255,.05);border-color:rgba(124,108,242,.28)}
.sidebar-session>span:first-child{
    flex:0 0 35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--accent-soft);
    color:#aaa0ff;
}
.sidebar-session svg{width:17px}
.sidebar-session strong,.sidebar-session small{display:block}
.sidebar-session strong{font-size:11px;margin-bottom:3px}
.sidebar-session small{font-size:9px;color:var(--muted)}
.profile-card{background:rgba(255,255,255,.03);border-color:var(--line)}
.profile-card .avatar{background:linear-gradient(145deg,#8373f2,#5c4dc0)}
.main-content{padding:0 34px 45px;max-width:1520px;width:100%;margin:0 auto}
.topbar{
    height:74px;
    gap:10px;
    background:rgba(9,13,24,.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.search-wrap{max-width:430px}
.search-wrap span{left:14px;width:18px;height:18px;display:grid;place-items:center}
.search-wrap span svg{width:18px;height:18px}
.search-wrap input{
    height:42px;
    border-radius:12px;
    background:#101725;
    border-color:transparent;
    padding-left:42px;
}
.search-wrap input:hover{background:#131b2a}
.search-wrap input:focus{background:#131b2a;border-color:rgba(124,108,242,.5)}
.icon-button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#101725;
    border-color:transparent;
}
.icon-button:hover{background:#172032;transform:translateY(-1px)}
.icon-button svg{width:19px;height:19px}
.btn svg{width:17px;height:17px}
.btn{border-radius:12px}
.btn-primary{background:#7868ed;box-shadow:0 10px 24px rgba(104,85,221,.2)}
.btn-primary:hover{background:#8475f5;transform:translateY(-1px);box-shadow:0 12px 30px rgba(104,85,221,.28)}
.btn-soft{background:var(--accent-soft);border-color:transparent}
.btn-glass{color:#e6e8f0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.btn-glass:hover{background:rgba(255,255,255,.11)}
.mobile-wordmark,.mobile-dock{display:none}
.dashboard-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:28px 2px 20px;
}
.dashboard-heading .eyebrow{color:#8f99ab;letter-spacing:.08em}
.dashboard-heading h1{
    margin:7px 0 0;
    font-size:clamp(25px,3vw,34px);
    line-height:1.12;
    letter-spacing:-.035em;
}
.status-pill{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    font-size:11px;
}
.status-pill i{width:7px;height:7px;border-radius:50%;background:#66d7a9;box-shadow:0 0 0 4px rgba(102,215,169,.1)}
.hero{
    min-height:248px;
    grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);
    gap:30px;
    padding:34px 38px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:
        radial-gradient(circle at 75% 10%,rgba(138,225,207,.08),transparent 25%),
        linear-gradient(115deg,#171d31,#1c203a 56%,#242342);
    box-shadow:0 18px 55px rgba(0,0,0,.2);
}
.hero:after{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.025))}
.hero-copy{max-width:600px}
.session-label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#aaa2fa;
    font-size:11px;
    font-weight:750;
    letter-spacing:.04em;
}
.session-label svg{width:16px;height:16px}
.hero h2{
    margin:13px 0 10px;
    font-size:clamp(27px,3.4vw,42px);
    line-height:1.06;
    letter-spacing:-.045em;
}
.hero p{max-width:520px;margin-bottom:22px;font-size:14px;line-height:1.55;color:#aeb6c6}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .btn{min-height:44px}
.button-play{font-size:11px}
.focus-visual{
    position:relative;
    min-height:178px;
    align-self:stretch;
    overflow:hidden;
    border-radius:20px;
    background:#111726;
}
.focus-visual>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.7) brightness(.58);transform:scale(1.04)}
.focus-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,10,18,.78))}
.focus-orbit{
    position:absolute;
    z-index:2;
    inset:50% auto auto 50%;
    width:86px;
    height:86px;
    transform:translate(-50%,-60%);
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    box-shadow:0 0 0 14px rgba(255,255,255,.035),0 0 0 28px rgba(255,255,255,.018);
}
.focus-orbit span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#181b32;background:rgba(247,245,226,.94);box-shadow:0 0 28px rgba(255,247,196,.18)}
.focus-orbit svg{width:25px;height:25px}
.focus-meta{position:absolute;z-index:2;left:18px;right:18px;bottom:15px}
.focus-meta small,.focus-meta strong{display:block}
.focus-meta small{margin-bottom:3px;color:#b1b9c8;font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.focus-meta strong{font-size:13px}
.category-strip{padding:22px 0 8px;gap:8px}
.category-chip{
    padding:9px 13px;
    border-radius:11px;
    background:transparent;
    font-size:12px;
}
.category-chip:hover{background:rgba(255,255,255,.045)}
.category-chip.active{background:var(--accent-soft);border-color:rgba(124,108,242,.2);color:#dad6ff}
.section-heading{margin:25px 0 15px}
.section-heading h2{font-size:20px;letter-spacing:-.02em}
.section-heading p{font-size:12px}
.sound-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sound-card{
    padding:7px;
    border:1px solid transparent;
    border-radius:20px;
    background:rgba(255,255,255,.025);
}
.sound-card:hover{background:rgba(255,255,255,.045);border-color:var(--line);transform:translateY(-2px)}
.sound-card.playing{background:var(--accent-soft);border-color:rgba(124,108,242,.25)}
.sound-cover{aspect-ratio:1.12/1;border-radius:15px}
.sound-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,8,14,.34));pointer-events:none}
.sound-cover img{transition:.4s transform,.4s filter}
.sound-card:hover .sound-cover img{transform:scale(1.045);filter:saturate(1.08)}
.round-play{z-index:2;width:48px;height:48px;background:rgba(9,13,24,.74);border:1px solid rgba(255,255,255,.12)}
.sound-card.playing .round-play{background:var(--accent)}
.mix-button{z-index:3}
.featured-badge{z-index:2;background:rgba(9,13,24,.68);backdrop-filter:blur(8px)}
.sound-info{padding:11px 5px 6px}
.sound-info small{color:#9690da;font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.sound-info h3{font-size:14px;margin-top:5px}
.sound-info p{font-size:11px}
.favorite-button{flex-basis:33px;width:33px;height:33px;border:0;background:transparent}
.favorite-button:hover{background:rgba(255,255,255,.06)}
.player{
    left:var(--sidebar-w);
    height:var(--player-h);
    padding:12px 28px;
    grid-template-columns:minmax(210px,1fr) auto minmax(280px,1fr);
    background:rgba(13,19,33,.96);
    border-top:1px solid var(--line);
    box-shadow:0 -14px 40px rgba(0,0,0,.18);
}
.player-track img{width:56px;height:56px;border-radius:13px}
.player-copy strong{font-size:13px}
.player-copy span{font-size:10px}
.mix-indicator{background:var(--accent-soft);color:#bdb6ff}
.main-play{width:48px;height:48px;background:#f1f0fa;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.timer-button{min-height:40px;padding:8px 11px;font-size:11px}
.timer-button svg{width:16px;height:16px}
.volume-control svg{width:18px;height:18px;color:var(--muted)}
.modal-panel{border:1px solid var(--line);background:#141c2a}
.mobile-dock{display:none}

@media(max-width:1180px){
    .sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .hero{grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr)}
    .player{grid-template-columns:minmax(180px,1fr) auto minmax(240px,1fr);padding-inline:18px}
}
@media(max-width:820px){
    :root{--sidebar-w:0px;--player-h:74px;--mobile-nav-h:68px}
    body{padding-bottom:var(--mobile-nav-h)}
    .app-shell{padding-bottom:calc(var(--player-h) + var(--mobile-nav-h) + 26px)}
    .sidebar{display:none}
    .sidebar-backdrop{display:none!important}
    .main-content{padding:0 16px 30px}
    .topbar{height:64px;gap:8px}
    .topbar:after{left:-16px;right:-16px}
    .mobile-wordmark{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800}
    .mobile-wordmark span{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:#fff}
    .mobile-wordmark svg{width:16px;height:16px}
    .mobile-only{display:none}
    .search-wrap{margin-left:auto;flex:0 1 300px}
    .search-wrap input{height:39px}
    .icon-button{width:39px;height:39px}
    .dashboard-heading{padding-top:22px}
    .dashboard-heading h1{font-size:27px}
    .status-pill{display:none}
    .hero{min-height:246px;padding:28px;grid-template-columns:minmax(0,1fr) 240px}
    .focus-visual{min-height:185px}
    .sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .player{
        left:10px;
        right:10px;
        bottom:calc(var(--mobile-nav-h) + 8px);
        height:70px;
        padding:9px 11px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:18px;
        grid-template-columns:minmax(0,1fr) auto;
        box-shadow:0 14px 40px rgba(0,0,0,.42);
    }
    .player-track img{width:50px;height:50px}
    .player-actions{display:none}
    .mobile-dock{
        position:fixed;
        z-index:59;
        left:0;
        right:0;
        bottom:0;
        height:var(--mobile-nav-h);
        display:grid;
        grid-template-columns:repeat(4,1fr);
        padding:7px max(10px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
        background:rgba(11,16,28,.97);
        border-top:1px solid var(--line);
        backdrop-filter:blur(20px);
    }
    .mobile-dock a,.mobile-dock button{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border:0;
        background:transparent;
        color:#737f92;
        font-size:9px;
        font-weight:700;
    }
    .mobile-dock svg{width:19px;height:19px}
    .mobile-dock a.active{color:#a79dff}
    .mobile-dock a.active:before{content:"";position:absolute;top:-7px;width:24px;height:2px;border-radius:0 0 3px 3px;background:var(--accent)}
}
@media(max-width:660px){
    .search-wrap{flex:0 0 40px}
    .search-wrap span{inset:0;position:absolute;width:40px;height:39px;transform:none;z-index:2;pointer-events:none}
    .search-wrap input{width:40px;padding:0;color:transparent;cursor:pointer}
    .search-wrap input::placeholder{color:transparent}
    .search-wrap:focus-within{position:absolute;left:0;right:90px;z-index:4}
    .search-wrap:focus-within input{width:100%;padding:0 14px 0 42px;color:var(--text);cursor:text;box-shadow:0 0 0 8px var(--bg)}
    .search-wrap:focus-within input::placeholder{color:var(--muted)}
    .hero{grid-template-columns:1fr;padding:25px 22px}
    .focus-visual{display:none}
}
@media(max-width:560px){
    .dashboard-heading{padding:19px 1px 16px}
    .dashboard-heading h1{font-size:25px}
    .hero{border-radius:20px;min-height:235px}
    .hero h2{font-size:29px}
    .hero p{font-size:13px}
    .hero-actions .btn{padding-inline:14px}
    .category-strip{margin-right:-16px;padding-right:16px}
    .sound-grid{gap:9px}
    .sound-card{padding:5px;border-radius:17px}
    .sound-cover{aspect-ratio:1/1;border-radius:13px}
    .sound-info{padding:9px 3px 4px}
    .sound-info h3{font-size:13px}
    .player-copy strong{max-width:145px}
    .section-heading p{display:none}
}

/* ===== SonIA 3.1: sharper geometry and mobile alignment ===== */
:root{--radius:10px}
.brand-mark,
.main-nav a,
.sidebar-session,
.profile-card,
.search-wrap input,
.icon-button,
.btn,
.category-chip,
.sound-card,
.sound-cover,
.player-track img,
.timer-button,
.modal-panel,
.timer-options button,
.mixer-track,
.mixer-track img,
.remove-mix,
.toast,
.empty-state,
.stat-card,
.history-item,
.history-item img,
.auth-card,
.auth-card input,
.admin-form input,
.admin-form select,
.admin-form textarea{
    border-radius:8px;
}
.hero,.focus-visual{border-radius:10px}
.btn,
.category-chip,
.timer-button,
.mobile-wordmark,
.mobile-dock a,
.mobile-dock button{
    white-space:nowrap;
}
.btn,
.category-chip,
.timer-button,
.icon-button,
.mobile-wordmark span,
.mobile-dock a,
.mobile-dock button,
.main-play,
.round-play,
.favorite-button,
.mix-button{
    align-items:center;
    justify-content:center;
}
.btn svg,
.timer-button svg,
.category-chip span,
.mobile-dock svg,
.icon-button svg{
    flex:0 0 auto;
}
.category-chip{
    display:inline-flex;
    gap:6px;
    line-height:1;
}
.category-chip span{
    width:15px;
    height:15px;
    display:inline-grid;
    place-items:center;
    margin:0;
    line-height:1;
}
.button-play{
    width:15px;
    height:15px;
    display:inline-grid;
    place-items:center;
    flex:0 0 15px;
    padding-left:1px;
    line-height:1;
}
.main-play,.round-play,.favorite-button,.mix-button{display:grid;place-items:center;line-height:1}
.main-play,.round-play{padding:0 0 0 2px}
.sound-card.playing .round-play{padding:0}
.mix-button{padding:0}
.section-heading h2,
.sound-info h3,
.player-copy strong,
.player-copy span,
.mixer-track-copy strong,
.mixer-track-copy span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.status-pill,.mix-indicator{border-radius:999px}
.focus-orbit,.focus-orbit span,.main-play,.round-play,.favorite-button,.sleep-play{border-radius:50%}

@media(max-width:820px){
    .mobile-wordmark span{border-radius:6px}
    .player{border-radius:9px}
    .player-track img{border-radius:6px}
    .mobile-dock a,.mobile-dock button{line-height:1}
    .mobile-dock svg{display:block;margin:0 auto}
}
@media(max-width:560px){
    .main-content{padding-inline:14px}
    .topbar:after{left:-14px;right:-14px}
    .dashboard-heading{padding:18px 0 15px}
    .dashboard-heading .eyebrow{font-size:10px}
    .dashboard-heading h1{
        max-width:100%;
        font-size:clamp(20px,6vw,24px);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .hero{
        min-height:auto;
        padding:24px 20px;
        border-radius:9px;
    }
    .session-label{white-space:nowrap}
    .hero h2{
        margin-top:14px;
        font-size:clamp(22px,6.8vw,27px);
        white-space:nowrap;
        letter-spacing:-.04em;
    }
    .hero p{margin-bottom:20px}
    .hero-actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }
    .hero-actions .btn{
        width:100%;
        min-width:0;
        min-height:42px;
        padding:10px 8px;
        gap:6px;
        border-radius:7px;
        font-size:12px;
    }
    .hero-actions .btn svg{width:16px;height:16px}
    .category-strip{
        margin-right:-14px;
        padding-right:14px;
        gap:6px;
    }
    .category-chip{
        min-height:34px;
        padding:8px 10px;
        border-radius:6px;
        font-size:11px;
    }
    .section-heading{align-items:center;margin:23px 0 12px}
    .section-heading h2{max-width:235px;font-size:18px}
    .sound-card{border-radius:7px}
    .sound-cover{border-radius:5px}
    .featured-badge{border-radius:4px}
    .sound-info{align-items:flex-start}
    .sound-info h3{max-width:100%}
    .player{left:8px;right:8px;border-radius:8px}
    .main-play{width:44px;height:44px}
    .mobile-dock{padding-inline:6px}
    .mobile-dock a,.mobile-dock button{gap:5px;font-size:9px}
}
@media(max-width:370px){
    .hero{padding-inline:16px}
    .hero h2{font-size:21px}
    .hero-actions .btn{font-size:11px}
    .section-heading h2{max-width:210px}
}

/* ===== Privacy and legal surfaces ===== */
.app-footer{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:48px;
    padding:20px 2px 0;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
}
.app-footer a{margin-left:auto;color:#b6bfd0}
.app-footer a:hover{color:#fff}
.auth-legal{
    margin:16px auto 0;
    max-width:390px;
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
    text-align:center;
}
.auth-legal a{color:#bdb6ff}
.privacy-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 85% -10%,rgba(124,108,242,.09),transparent 25%),
        #090d18;
}
.privacy-topbar{
    position:sticky;
    z-index:20;
    top:0;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(24px,calc((100vw - 1180px)/2));
    border-bottom:1px solid var(--line);
    background:rgba(9,13,24,.9);
    backdrop-filter:blur(18px);
}
.privacy-brand{display:flex;align-items:center;gap:10px;font-size:14px}
.privacy-brand span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:6px;
    background:var(--accent);
}
.privacy-brand svg{width:17px;height:17px}
.privacy-back{
    display:flex;
    align-items:center;
    gap:6px;
    color:#aab3c3;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.privacy-back:hover{color:#fff}
.privacy-back svg{width:16px;height:16px}
.privacy-layout{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:290px minmax(0,720px);
    justify-content:space-between;
    gap:80px;
    padding:72px 0 84px;
}
.privacy-summary{
    position:sticky;
    top:108px;
    align-self:start;
}
.privacy-kicker{
    color:#9e94f7;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.privacy-summary h1{
    max-width:270px;
    margin:12px 0 18px;
    font-size:42px;
    line-height:1.02;
    letter-spacing:-.05em;
}
.privacy-summary>p{
    margin:0;
    color:#9da7b8;
    font-size:13px;
    line-height:1.7;
}
.privacy-summary dl{margin:28px 0;padding:16px 0;border-block:1px solid var(--line)}
.privacy-summary dl div{display:flex;justify-content:space-between;gap:18px;padding:5px 0;font-size:10px}
.privacy-summary dt{color:#687386}
.privacy-summary dd{margin:0;color:#b7c0cf;text-align:right}
.privacy-index{display:grid;gap:4px}
.privacy-index a{
    padding:7px 0;
    color:#7f8a9c;
    font-size:11px;
    font-weight:700;
}
.privacy-index a:hover{color:#fff;transform:translateX(3px)}
.privacy-content{min-width:0}
.privacy-content>section{
    position:relative;
    scroll-margin-top:100px;
    padding:44px 0;
    border-bottom:1px solid var(--line);
}
.privacy-content .privacy-intro{padding-top:0}
.privacy-content h2{
    margin:7px 0 18px;
    font-size:25px;
    letter-spacing:-.035em;
}
.privacy-content h3{margin:0 0 7px;font-size:13px}
.privacy-content p{
    margin:0 0 14px;
    color:#a1abba;
    font-size:13px;
    line-height:1.78;
}
.privacy-content p:last-child{margin-bottom:0}
.privacy-intro>p{
    color:#e2e6ee;
    font-size:18px;
    line-height:1.65;
    letter-spacing:-.015em;
}
.privacy-highlight{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:25px;
    padding:15px 16px;
    border-left:2px solid var(--accent2);
    background:rgba(138,225,207,.055);
}
.privacy-highlight svg{flex:0 0 19px;width:19px;height:19px;color:var(--accent2);margin-top:2px}
.privacy-highlight p{color:#c3d7d2;font-size:12px;line-height:1.6}
.privacy-number{
    display:block;
    color:#7065cc;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}
.privacy-data-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid var(--line);
}
.privacy-data-grid>div{min-width:0;padding:18px}
.privacy-data-grid>div:nth-child(odd){border-right:1px solid var(--line)}
.privacy-data-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.privacy-data-grid p{font-size:11px;line-height:1.65}
.privacy-list{list-style:none;margin:22px 0;padding:0;border-top:1px solid var(--line)}
.privacy-list li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.privacy-list li>span{color:#6f7a8e;font-size:9px;font-weight:800;padding-top:3px}
.privacy-list li p{margin:0;color:#c1c8d4;font-size:12px;line-height:1.55}
.privacy-rights{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}
.privacy-rights span{
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:5px;
    color:#bbc3d0;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
}
.privacy-source-links{display:flex;flex-wrap:wrap;gap:8px!important;margin-top:20px!important}
.privacy-source-links a{
    padding-bottom:2px;
    border-bottom:1px solid rgba(124,108,242,.45);
    color:#aaa2fa;
    font-size:10px;
    font-weight:700;
}
.privacy-source-links a:hover{color:#d4d0ff;border-color:#d4d0ff}
.privacy-content .privacy-contact{
    margin-top:45px;
    padding:30px;
    border:0;
    border-left:3px solid var(--accent);
    background:#111827;
}
.privacy-contact h2{max-width:520px;margin-top:10px;font-size:28px}
.privacy-contact .btn{margin-top:8px}
.privacy-disclaimer{
    margin:25px 0 0!important;
    color:#687386!important;
    font-size:10px!important;
}
.privacy-footer{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:22px;
    padding:22px 0 32px;
    border-top:1px solid var(--line);
    color:#687386;
    font-size:10px;
}
.privacy-footer a{color:#9aa4b5}
.privacy-footer a:first-of-type{margin-left:auto}
.privacy-footer a:hover{color:#fff}

@media(max-width:820px){
    .app-footer{margin-bottom:10px}
    .privacy-topbar{padding-inline:18px}
    .privacy-layout{
        width:min(100% - 36px,720px);
        display:block;
        padding:40px 0 60px;
    }
    .privacy-summary{position:static;margin-bottom:35px}
    .privacy-summary h1{max-width:500px;font-size:36px}
    .privacy-summary>p{max-width:580px}
    .privacy-summary dl{max-width:500px}
    .privacy-index{display:none}
    .privacy-footer{width:calc(100% - 36px)}
}
@media(max-width:560px){
    .privacy-topbar{height:60px;padding-inline:14px}
    .privacy-back{font-size:0;gap:0}
    .privacy-back svg{width:20px;height:20px}
    .privacy-layout{width:calc(100% - 28px);padding-top:32px}
    .privacy-summary h1{font-size:31px;white-space:nowrap}
    .privacy-summary dl div{font-size:9px}
    .privacy-content>section{padding:35px 0}
    .privacy-content h2{font-size:22px}
    .privacy-intro>p{font-size:16px}
    .privacy-data-grid{grid-template-columns:1fr}
    .privacy-data-grid>div:nth-child(odd){border-right:0}
    .privacy-data-grid>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
    .privacy-content .privacy-contact{margin-inline:-14px;padding:25px 20px}
    .privacy-contact h2{font-size:23px}
    .privacy-rights{gap:6px}
    .privacy-rights span{font-size:9px}
    .privacy-footer{width:calc(100% - 28px);gap:14px}
}

/* ===== SonIA 3.3: full-width workspace, mixer states and fullscreen sleep ===== */
html,
body{
    width:100%;
    min-width:100%;
    background-color:#090d18;
    overflow-x:hidden;
}
.app-shell{width:100%}
.main-content{
    width:100%;
    max-width:none;
    margin:0;
}
.search-wrap{
    width:100%;
    max-width:none;
}
.sound-card.mix-primary,
.sound-card.mixed{
    background:rgba(124,108,242,.1);
    border-color:rgba(124,108,242,.28);
}
.sound-card.mix-primary .mix-button,
.sound-card.mixed .mix-button{
    background:var(--accent2);
    color:#07101f;
}
#closeSleepScreen{
    position:fixed;
    z-index:10;
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
    left:auto;
    bottom:auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0 0 3px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:rgba(7,13,24,.6);
    color:#fff;
    font-size:25px;
    line-height:1;
    backdrop-filter:blur(14px);
}
#closeSleepScreen:hover{background:rgba(255,255,255,.16)}

@media(max-width:660px){
    .topbar{
        height:112px;
        width:auto;
        margin-inline:-16px;
        padding-inline:16px;
        display:grid;
        grid-template-columns:minmax(0,1fr) 39px 39px;
        grid-template-rows:48px 42px;
        align-content:center;
        column-gap:8px;
        row-gap:6px;
    }
    .mobile-wordmark{grid-column:1;grid-row:1}
    .mixer-top-button{grid-column:2;grid-row:1}
    #sleepModeButton{grid-column:3;grid-row:1}
    .search-wrap{
        position:relative;
        grid-column:1/-1;
        grid-row:2;
        width:100%;
        max-width:none;
        margin:0;
        flex:none;
    }
    .search-wrap span{
        position:absolute;
        inset:auto auto auto 14px;
        top:50%;
        width:18px;
        height:18px;
        transform:translateY(-50%);
        pointer-events:none;
    }
    .search-wrap input{
        width:100%;
        height:42px;
        padding:0 14px 0 42px;
        color:var(--text);
        cursor:text;
    }
    .search-wrap input::placeholder{color:var(--muted)}
    .search-wrap:focus-within{
        position:relative;
        inset:auto;
        z-index:auto;
    }
    .search-wrap:focus-within input{
        width:100%;
        padding:0 14px 0 42px;
        color:var(--text);
        box-shadow:none;
    }
    .dashboard-heading{padding-top:20px}
}
@media(max-width:560px){
    .topbar{
        margin-inline:-14px;
        padding-inline:14px;
    }
}