:root{color-scheme:dark;--bg:#080807;--panel:#11110f;--panel2:#171612;--line:#30291d;--gold:#c6a568;--gold2:#ead3a2;--muted:#8f897d;--text:#eee9df;--danger:#d77970;--green:#8fb99a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#292216 0,#0b0a08 42%,var(--bg) 75%);color:var(--text);min-height:100vh}a{color:var(--gold2);text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.shell{max-width:1500px;margin:auto;padding:26px 30px 42px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.brand{font-size:25px;letter-spacing:.32em;font-weight:800;color:var(--gold2);text-shadow:0 0 22px #c6a56835}.brand span{color:#fff}.nav{display:flex;gap:9px;flex-wrap:wrap}.nav a,.btn{border:1px solid var(--line);background:linear-gradient(180deg,#201c15,#13120f);color:var(--gold2);padding:10px 15px;border-radius:9px;font-size:13px;letter-spacing:.04em}.nav a:hover,.btn:hover{border-color:var(--gold);background:#282116}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch}.panel{background:linear-gradient(145deg,#171612f5,#0e0e0cf5);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px #0008;padding:22px;min-width:0}.player-panel,.queue-panel{min-height:610px;height:610px;display:flex;flex-direction:column}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}.track-title{font-size:22px;font-weight:650;margin:10px 0 4px;overflow-wrap:anywhere;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0;}.sub{color:var(--muted);font-size:12px}.visual{height:190px;margin:24px 0 16px;border:1px solid #3a2f1d;border-radius:12px;background:radial-gradient(ellipse at center,#332718 0,#15120d 55%,#0a0908 100%);overflow:hidden;position:relative}.visual canvas{display:block;width:100%;height:100%}.fallback{height:100%;display:flex;align-items:center;justify-content:center;gap:5px}.fallback i{width:5px;height:22%;border-radius:4px;background:linear-gradient(#ead3a2,#9d783e);animation:wave 1s ease-in-out infinite alternate}.fallback i:nth-child(3n){animation-delay:.25s}.fallback i:nth-child(2n){animation-delay:.5s}@keyframes wave{to{height:85%;opacity:.55}}audio{display:none}.seekrow{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.seekrow input{flex:1;accent-color:var(--gold)}input[type=range]{accent-color:var(--gold)}.controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}.iconbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#17140f;color:var(--gold2);font-size:16px}.iconbtn.main{width:58px;height:58px;background:linear-gradient(145deg,#e4c88e,#98713c);color:#17120a;border:0;font-size:21px;box-shadow:0 0 25px #c6a56835}.iconbtn.active{border-color:var(--gold);color:#fff}.volume{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.volume input{width:130px}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.sectionhead h2{font-size:14px;letter-spacing:.14em;margin:0;color:var(--gold2)}.queue{overflow:auto;flex:1;min-height:0;padding-right:4px}.track{display:flex;align-items:center;gap:12px;padding:12px 10px;border-bottom:1px solid #29251d;border-radius:8px}.track.current{background:#b38b4b18;border:1px solid #8d6d3b66}.track .num{color:#8e7957;width:22px;font-size:12px}.track .info{min-width:0;flex:1}.track .info strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track .info small{color:var(--muted);font-size:10px}.track button{background:none;border:0;color:var(--muted);font-size:16px}.track button:hover{color:var(--gold2)}.formrow{display:flex;gap:9px;margin-top:16px}.field{background:#090908;border:1px solid #383023;border-radius:8px;padding:11px 12px;color:var(--text);min-width:0;width:100%;outline:none}.field:focus{border-color:var(--gold)}.notice{font-size:12px;color:var(--muted);min-height:18px;margin-top:10px}.notice.error{color:var(--danger)}.notice.ok{color:var(--green)}.page-title{font-size:24px;color:var(--gold2);margin:8px 0 6px}.page-desc{color:var(--muted);font-size:13px;margin:0 0 22px}.playlist-list{display:grid;gap:10px}.playlist-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#11100d}.playlist-card.active{border-color:#9d783e;background:#211a10}.playlist-card .name{flex:1;font-weight:600}.playlist-card small{color:var(--muted)}.two-col{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:16px}.tree,.bookmark-list{border:1px solid var(--line);border-radius:10px;padding:12px;min-height:300px;max-height:520px;overflow:auto;background:#0b0b09}.tree button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--text);padding:8px;border-radius:6px}.tree button:hover,.tree button.selected{background:#332817;color:var(--gold2)}.bookmark{display:flex;gap:10px;padding:10px;border-bottom:1px solid #27231b;font-size:13px}.bookmark span{flex:1;overflow-wrap:anywhere}.muted{color:var(--muted)}.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:#8d8a80}.dot.ok{background:#78b58b}.dot.bad{background:#cb756c}.dot.wait{background:#c6a568}.actions{display:flex;gap:8px;flex-wrap:wrap}.small{font-size:11px;padding:7px 10px}.gold{color:var(--gold2)}.empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:13px}.foot{margin-top:24px;color:#655f53;font-size:10px;text-align:center;letter-spacing:.1em}@media(max-width:900px){.grid{grid-template-columns:1fr}.player-panel,.queue-panel{height:auto;min-height:500px}.two-col{grid-template-columns:1fr}.shell{padding:18px}.topbar{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.formrow{flex-direction:column}.brand{font-size:21px}.panel{padding:16px}.controls{gap:7px}}

/* PLAYER REFINEMENT — controlli compatti e visualizzatore più ampio */
.player-panel,.queue-panel{height:calc(100vh - 190px);min-height:650px}
.player-panel{gap:0}
.player-panel .track-title{margin-top:13px}
.player-panel .sub{margin-bottom:2px}
.visual{flex:1;min-height:300px;height:auto;margin:30px 0 26px}
.transport-row{display:flex;align-items:center;gap:20px;width:100%;margin-bottom:4px}
.transport-row .seekrow{flex:1;min-width:0;gap:10px}
.transport-row .seekrow input{min-width:40px}
.volume{flex:0 0 auto;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:10px;letter-spacing:.08em}
.volume input{width:92px;margin:0}
#volLabel{width:30px;text-align:right;font-size:10px}
.controls{margin:24px 0 10px;gap:14px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;flex:0 0 auto}
.iconbtn.main{display:grid;place-items:center;padding:0;line-height:0;overflow:hidden}
.iconbtn.main svg{display:block;width:23px;height:23px;fill:currentColor;flex:none}
.track-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.track-actions button{width:27px;height:28px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:15px;line-height:1}
.track-actions button:hover:not(:disabled){border-color:#705832;background:#211a10;color:var(--gold2)}
.track-actions button:disabled{opacity:.22;cursor:default}
.track-actions .track-delete{font-size:20px;color:#a98c79}
.track-actions .track-delete:hover{color:#e58d82!important;border-color:#70423b!important;background:#241411!important}
.track{gap:10px;padding:11px 8px}
.track .info strong{font-size:13px}
@media(max-width:1100px){.player-panel,.queue-panel{height:auto;min-height:620px}.visual{min-height:280px}}
@media(max-width:700px){.transport-row{flex-wrap:wrap;gap:12px}.transport-row .seekrow{flex-basis:100%}.volume{margin-left:auto}.track-actions{gap:2px}.track-actions button{width:25px}}

/* =====================================================
   SC A L E T T A 2.0 — CONTROLLI E MODALI
   BLACK & GOLD
   ===================================================== */

/* Barra comandi: selettore a sinistra, mute a destra */
.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.controls .mode-toggle,
.controls .mute-toggle {
    width: auto;
    min-width: 76px;
    height: 42px;
    flex: 0 0 auto;
    padding: 10px 15px;
    border: 1px solid #705832;
    border-radius: 9px;
    background: linear-gradient(145deg, #211b12, #12100c);
    color: var(--gold2);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    transition: background .2s, border-color .2s, color .2s;
}

.controls .mode-toggle:hover,
.controls .mute-toggle:hover {
    border-color: var(--gold);
    background: #302416;
    color: #fff;
}

.controls .mode-toggle.active,
.controls .mute-toggle.active {
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 0 12px #c6a56830;
}

/* Modale personalizzata */
.sc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.sc-modal-backdrop.open { display: flex; }

.sc-modal {
    width: min(440px, 100%);
    padding: 27px;
    border: 1px solid #66502e;
    border-radius: 16px;
    background: linear-gradient(145deg, #1b1914, #0c0c0a);
    box-shadow: 0 24px 80px #000c, 0 0 30px #c6a56812;
    animation: scModalIn .2s ease-out;
}

@keyframes scModalIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sc-modal .eyebrow {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: .22em;
}

.sc-modal h2 {
    margin: 14px 0 9px;
    color: var(--gold2);
    font-size: 19px;
    font-weight: 650;
}

.sc-modal p {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.sc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.sc-modal-actions .btn { min-width: 105px; padding: 10px 15px; }

.sc-modal-actions .sc-modal-ok {
    border-color: #9d783e;
    background: linear-gradient(180deg, #3a2c18, #21190f);
    color: var(--gold2);
}

.sc-modal-actions .sc-modal-ok:hover {
    border-color: var(--gold2);
    background: #49371e;
}

@media (max-width: 520px) {
    .controls { gap: 5px; }
    .controls .mode-toggle,
    .controls .mute-toggle {
        width: auto;
        min-width: 66px;
        height: 36px;
        flex: 0 0 auto;
        padding: 8px 10px;
        border-radius: 9px;
    }
    .controls .iconbtn:not(.main) {
        width: 36px;
        height: 36px;
    }
    .controls .iconbtn.main {
        width: 52px;
        height: 52px;
    }
    .sc-modal { padding: 21px; }
}


/* =====================================================
   SC A L E T T A — SINGLE PAGE / VIEW LAYERS
   ===================================================== */
html, body { width:100%; height:100%; overflow:hidden; }
body { min-height:0; }
.app-shell {
    height:100vh; height:100dvh; max-height:100vh; max-height:100dvh;
    display:flex; flex-direction:column; overflow:hidden;
    padding:18px 30px 12px;
}
.app-shell > .topbar { flex:0 0 auto; margin-bottom:14px; }
.app-views { flex:1 1 auto; min-height:0; overflow:hidden; }
.app-view { display:none; width:100%; height:100%; min-height:0; overflow:hidden; }
.app-view.active { display:block; }
.app-view.management-view.active { display:flex; flex-direction:column; gap:12px; }
.player-grid { width:100%; height:100%; min-height:0; }
.player-grid .player-panel, .player-grid .queue-panel { height:100%; min-height:0; }
.player-grid .visual { flex:1 1 auto; min-height:120px; height:auto; }
.player-grid .queue { min-height:0; }
.app-shell > .foot { flex:0 0 auto; margin-top:7px; }

.nav-link {
    border:1px solid var(--line); background:linear-gradient(180deg,#201c15,#13120f);
    color:var(--gold2); padding:10px 15px; border-radius:9px; font-size:13px;
    letter-spacing:.04em; cursor:pointer;
}
.nav-link:hover, .nav-link.active { border-color:var(--gold); background:#282116; color:#fff; }

.management-heading { flex:0 0 auto; }
.management-heading .page-title { margin:0 0 5px; font-size:22px; }
.management-heading .page-desc { margin:0; }
.playlist-manage-panel { flex:0 0 auto; padding:14px 18px; }
.manage-select-row { display:flex; align-items:flex-end; gap:14px; min-width:0; }
.manage-select-wrap { flex:1 1 360px; min-width:180px; }
.manage-select-wrap .eyebrow { display:block; margin:0 0 7px; }
.manage-select-wrap select { margin:0; }
.playlist-count { flex:0 1 230px; color:var(--muted); font-size:11px; padding:0 0 12px; }
.manage-actions { flex:0 0 auto; }
.create-row { margin-top:9px; }
.create-row .field { max-width:420px; }
#pmsg { min-height:0; margin-top:5px; }
.danger-btn { border-color:#70423b!important; color:#e58d82!important; }
.danger-btn:hover { border-color:#b66b60!important; background:#241411!important; }

.import-panel { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:16px 18px; }
.import-panel .sectionhead { flex:0 0 auto; margin-bottom:10px; }
.import-columns { flex:1 1 auto; min-height:0; grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr); }
.import-column { display:flex; flex-direction:column; min-height:0; }
.import-label { flex:0 0 auto; margin-bottom:7px; }
.import-columns .tree, .import-columns .bookmark-list { flex:1 1 auto; width:100%; height:100%; min-height:0; max-height:none; overflow:auto; }
.import-controls { flex:0 0 auto; margin-top:10px; }
.import-controls .field { flex:1 1 auto; }
.import-controls .btn { flex:0 0 auto; }
#imsg { flex:0 0 auto; min-height:0; margin-top:5px; }
.child-folder { display:block; margin:5px 0; text-align:left; }

.auth-view { overflow-y:auto; padding-bottom:12px; }
.auth-panel { width:min(820px,100%); }
.auth-divider { height:1px; background:var(--line); margin:22px 0 18px; }
.auth-upload .eyebrow { margin-bottom:8px; }
.auth-upload .formrow { margin-top:0; }

.player-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-notice[hidden] { display:none; }
.player-notice button { flex:0 0 auto; border:0; background:transparent; color:var(--danger); font-size:20px; line-height:1; padding:0 3px; }
.player-notice button:hover { color:#fff; }
#mute { white-space:nowrap; }

@media (max-width:1100px) {
    .app-shell { padding:14px 18px 10px; }
    .player-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .player-grid .player-panel, .player-grid .queue-panel { height:100%; min-height:0; }
    .player-grid .visual { min-height:120px; }
}
@media (max-width:760px) {
    .app-shell > .topbar { align-items:flex-start; flex-direction:column; gap:10px; }
    .nav { width:100%; gap:6px; }
    .nav-link { flex:1 1 auto; padding:9px 8px; font-size:11px; }
    .player-grid { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(420px,1fr) minmax(260px,.8fr); overflow-y:auto; }
    .player-grid .player-panel, .player-grid .queue-panel { height:auto; min-height:0; }
    .player-grid .visual { min-height:145px; }
    .manage-select-row { flex-wrap:wrap; align-items:center; gap:8px; }
    .manage-select-wrap { flex:1 1 100%; }
    .playlist-count { flex:1 1 auto; padding:0; }
    .import-columns { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
    .two-col { gap:9px; }
}
@media (max-width:520px) {
    .app-shell { padding:12px 12px 8px; }
    .brand { font-size:20px; }
    .nav-link { font-size:10px; letter-spacing:0; }
    .player-grid { grid-template-rows:minmax(400px,1fr) minmax(260px,.8fr); }
    .player-grid .panel { padding:14px; }
    .controls { gap:5px; }
    .controls .mode-toggle, .controls .mute-toggle { width:auto; min-width:58px; height:36px; flex:0 0 auto; padding:8px 9px; border-radius:9px; font-size:9px; }
    .controls .iconbtn:not(.main) { width:36px; height:36px; }
    .controls .iconbtn.main { width:50px; height:50px; }
    .manage-actions .btn { padding:7px 8px; }
    .import-panel { padding:12px; }
    .import-columns { grid-template-columns:1fr; grid-template-rows:minmax(110px,.7fr) minmax(140px,1fr); }
    .import-controls { flex-wrap:wrap; }
    .import-controls .btn { width:100%; }
    .playlist-manage-panel { padding:12px; }
}