:root{--bg:#070b16;--card:rgba(20,28,52,.75);--line:rgba(120,160,255,.18);--txt:#e6ecff;--mut:#8b9acb;--acc:#5aa9ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(ellipse at 30% 20%,#101a3a,var(--bg));color:var(--txt);font-family:'Segoe UI',Inter,system-ui,sans-serif}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
h1{margin:0;font-size:1.25rem;letter-spacing:.5px;background:linear-gradient(90deg,#8fc7ff,#7affb2);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.db-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,255,136,.09);border:1px solid rgba(0,255,136,.28);border-radius:20px;padding:3px 10px;font-size:.78rem;color:#8ef7c2;box-shadow:0 0 10px rgba(0,255,136,.1)}
.db-dot{width:7px;height:7px;border-radius:50%;background:#00ff88;box-shadow:0 0 8px #00ff88;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
.db-sep{opacity:.4}
.controls{display:flex;gap:8px;flex-wrap:wrap}
select,input,button{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;transition:.2s}
button{cursor:pointer}
button:hover,select:hover,input:focus{border-color:var(--acc);box-shadow:0 0 12px rgba(90,169,255,.35);outline:none}
.layout{display:flex;height:calc(100% - 62px)}
#globe{flex:1;min-width:0;position:relative}
.panel{width:380px;padding:0;overflow-y:auto;background:var(--card);border-left:1px solid var(--line);backdrop-filter:blur(12px);display:flex;flex-direction:column}
.panel-section{padding:18px}
.panel h2{margin:0 0 4px;font-size:1.3rem}
.sub{color:var(--mut);font-size:.85rem;margin:2px 0 14px}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;margin:0 0 18px}
dt{color:var(--mut);font-size:.85rem}
dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
dd.good{color:#2ee66b}dd.bad{color:#ff7a7a}
.legend{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mut)}
.legend-title{font-weight:600;margin-bottom:2px;color:var(--txt);font-size:.9rem}
.legend i{display:inline-block;width:22px;height:6px;border-radius:3px;margin-right:8px;vertical-align:middle}
.orbit-selector{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px 4px;gap:2px}
.ctrl-label{font-size:.8rem;color:var(--mut);padding:0 6px}
.orbit-btn{background:transparent;border:0;color:var(--mut);padding:4px 10px;border-radius:8px;font-size:.85rem;cursor:pointer;transition:.2s}
.orbit-btn:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.orbit-btn.active{background:var(--acc);color:#fff;font-weight:600;box-shadow:0 0 10px rgba(90,169,255,.4)}
#visibleToggle{transition:.2s}
#visibleToggle.active{background:#00ff88;color:#070b16;font-weight:700;border-color:#00ff88;box-shadow:0 0 14px rgba(0,255,136,.5)}
.visible-sats-container{margin:0 0 16px;background:rgba(12,20,42,.7);border:1px solid rgba(0,255,136,.3);border-radius:10px;padding:10px 12px}
.visible-title{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;color:#00ffcc;margin-bottom:8px}
.visible-sats-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;padding-right:4px}
.visible-sat-row{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:.82rem;background:rgba(255,255,255,.03);transition:.15s}
.visible-sat-row:hover{background:rgba(90,169,255,.18)}
.visible-sat-row.active{background:rgba(0,255,136,.18);border-left:3px solid #00ff88;font-weight:700}
.visible-sat-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.visible-sat-right{display:flex;gap:8px;font-family:monospace;font-size:.78rem}
.visible-sat-el{color:#00ff88;font-weight:700}
.visible-sat-az{color:var(--mut)}

/* Semiblocco Radio */
.panel-radio{border-top:1px solid var(--line);background:rgba(10,16,34,.55);flex:1}
.radio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.radio-header h3{margin:0;font-size:1.05rem;color:#8fc7ff}
.badge-count{background:rgba(90,169,255,.18);border:1px solid var(--acc);color:#8fc7ff;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:700}
.radio-list{display:flex;flex-direction:column;gap:10px}
.radio-card{background:rgba(24,34,64,.7);border:1px solid var(--line);border-radius:10px;padding:10px 12px;transition:.15s}
.radio-card:hover{border-color:rgba(120,180,255,.35);background:rgba(28,40,76,.85)}
.radio-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:6px}
.radio-card-title{font-size:.85rem;font-weight:600;color:#fff;line-height:1.2}
.radio-pill{font-size:.7rem;padding:2px 6px;border-radius:4px;font-weight:600;white-space:nowrap}
.pill-active{background:rgba(46,230,107,.18);color:#2ee66b;border:1px solid rgba(46,230,107,.4)}
.pill-inactive{background:rgba(255,100,100,.15);color:#ff8888;border:1px solid rgba(255,100,100,.3)}
.radio-freqs{display:flex;flex-direction:column;gap:4px;font-size:.82rem}
.freq-line{display:flex;justify-content:space-between;align-items:center}
.freq-label{color:var(--mut);font-size:.75rem}
.freq-val{font-family:'Consolas','Fira Code',monospace;font-weight:700;color:#00ffcc}
.freq-uplink .freq-val{color:#ffc837}
.radio-meta{display:flex;gap:8px;font-size:.75rem;color:var(--mut);margin-top:6px;padding-top:4px;border-top:1px dashed rgba(120,160,255,.12)}
.radio-empty{color:var(--mut);font-style:italic;font-size:.85rem;text-align:center;padding:16px 0}
@media(max-width:800px){.layout{flex-direction:column}.panel{width:100%;border-left:0;border-top:1px solid var(--line)}#globe{min-height:55vh}}

/* Popup albero satelliti */
dialog#tree{width:min(460px,92vw);max-height:80vh;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(14,20,40,.96);color:var(--txt);box-shadow:0 20px 60px rgba(0,0,0,.6)}
dialog#tree::backdrop{background:rgba(3,6,14,.65);backdrop-filter:blur(3px)}
dialog#tree[open]{display:flex;flex-direction:column;gap:10px;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.dlg-head{display:flex;justify-content:space-between;align-items:center}
.dlg-head h2{margin:0;font-size:1.1rem}
#treeFilter{width:100%}
.tree{overflow:auto;min-height:200px;padding-right:4px}
.tree details{margin:2px 0}
.tree summary{cursor:pointer;padding:6px 8px;border-radius:8px;list-style:none;user-select:none}
.tree summary::before{content:'▸';display:inline-block;width:1.2em;transition:transform .15s;color:var(--acc)}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tree summary:hover{background:rgba(90,169,255,.12)}
.tree summary em{float:right;font-style:normal;color:var(--mut);font-size:.8rem}
.tree details.grp>summary{font-weight:600}
.tree .body{margin-left:14px;border-left:1px solid var(--line);padding-left:6px}
.tree ul{list-style:none;margin:0 0 4px 14px;padding:0}
.tree li{padding:4px 8px;border-radius:6px;cursor:pointer;font-size:.92rem}
.tree li:hover{background:rgba(46,230,107,.15)}
.tree li.sel{color:#2ee66b;font-weight:600}
.tree .empty{color:var(--mut);padding:6px 8px;font-size:.85rem}

/* Bridge & Tracking Styles */
.bridge-badge{font-size:.7rem;padding:2px 7px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;transition:.2s}
.bridge-badge.badge-on{background:rgba(16,185,129,.18);color:#10b981;border:1px solid rgba(16,185,129,.4)}
.bridge-badge.badge-off{background:rgba(100,116,139,.18);color:#94a3b8;border:1px solid rgba(100,116,139,.3)}

.active-tracker-bar{background:linear-gradient(135deg,rgba(16,36,64,.85),rgba(6,25,35,.9));border:1px solid #00ffaa;border-radius:10px;padding:10px 12px;margin-bottom:12px;box-shadow:0 0 16px rgba(0,255,170,.18);animation:trackerGlow 3s infinite alternate}
@keyframes trackerGlow{from{border-color:rgba(0,255,170,.5)}to{border-color:rgba(0,229,255,.9);box-shadow:0 0 20px rgba(0,229,255,.25)}}

.tracker-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.tracker-title{font-size:.72rem;font-weight:800;letter-spacing:.8px;color:#00ffaa;display:flex;align-items:center;gap:6px}
.tracker-sat-badge{background:rgba(0,255,170,.15);border:1px solid rgba(0,255,170,.35);color:#a7f3d0;font-size:.7rem;padding:1px 6px;border-radius:4px;font-weight:700}
.tracker-freq-main{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0}
.tracker-freq-val{font-family:'Consolas','Fira Code',monospace;font-size:1.15rem;font-weight:800;color:#00ffcc}
.tracker-doppler-val{font-family:'Consolas','Fira Code',monospace;font-size:.82rem;font-weight:700;color:#38bdf8}
.tracker-sub{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--mut);border-top:1px dashed rgba(255,255,255,.1);padding-top:6px;margin-top:4px}
.btn-tracker-stop{background:rgba(239,68,68,.18);color:#fca5a5;border:1px solid rgba(239,68,68,.4);border-radius:6px;padding:2px 8px;font-size:.72rem;font-weight:700;cursor:pointer;transition:.15s}
.btn-tracker-stop:hover{background:rgba(239,68,68,.35);color:#fff}

.radio-card.is-tracked{border-color:#00ffaa;background:rgba(16,40,64,.85);box-shadow:0 0 12px rgba(0,255,170,.2)}
.btn-listen-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:.72rem;font-weight:700;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);transition:.2s}
.btn-listen-badge:hover{background:rgba(90,169,255,.2);border-color:var(--acc);color:#fff;box-shadow:0 0 8px rgba(90,169,255,.3)}
.btn-listen-badge.is-listening{background:rgba(0,255,170,.2);border-color:#00ffaa;color:#00ffaa;box-shadow:0 0 10px rgba(0,255,170,.35)}

.sdr-top-btn{background:rgba(0,255,170,.12);color:#00ffaa;border-color:rgba(0,255,170,.35);font-weight:700}
.sdr-top-btn:hover{background:rgba(0,255,170,.25);border-color:#00ffaa;box-shadow:0 0 14px rgba(0,255,170,.4);color:#fff}

.tracker-mode-badge{background:rgba(56,189,248,.18);border:1px solid rgba(56,189,248,.4);color:#38bdf8;font-size:.68rem;padding:1px 6px;border-radius:4px;font-weight:700}
.badge-mode-picker{background:rgba(147,197,253,.1);border:1px solid rgba(147,197,253,.25);color:#93c5fd;font-size:.68rem;padding:2px 6px;border-radius:4px;font-weight:600}

/* Pulsante Segui Satellite */
.btn-follow-sat{background:rgba(255,212,0,.08);color:#ffe066;border:1px solid rgba(255,212,0,.3);border-radius:8px;padding:4px 10px;font-size:.78rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:.2s;white-space:nowrap}
.btn-follow-sat:hover{background:rgba(255,212,0,.22);border-color:#ffd400;color:#fff;box-shadow:0 0 12px rgba(255,212,0,.35)}
.btn-follow-sat.is-following{background:linear-gradient(135deg,rgba(255,212,0,.25),rgba(255,160,0,.35));border-color:#ffd400;color:#fff;box-shadow:0 0 14px rgba(255,212,0,.45)}

/* Topbar Calendario */
.calendar-top-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(180,120,255,.12);border-color:rgba(180,120,255,.35);color:#d8b4fe;font-weight:700}
.calendar-top-btn:hover{background:rgba(180,120,255,.25);border-color:#c084fc;color:#fff;box-shadow:0 0 12px rgba(192,132,252,.35)}

/* Modal Calendario */
dialog.dlg-calendar{width:min(720px,94vw);max-height:86vh;padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(13,18,36,.96);color:var(--txt);box-shadow:0 24px 70px rgba(0,0,0,.75);backdrop-filter:blur(16px)}
dialog.dlg-calendar[open]{display:flex;flex-direction:column;gap:14px;animation:pop .18s ease}

.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:rgba(20,28,52,.6);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.calendar-add-box{display:flex;gap:6px;flex:1;min-width:240px}
.calendar-add-box input{flex:1;font-size:.85rem;padding:6px 10px}
.calendar-add-box button{background:var(--acc);color:#fff;font-weight:700;border:0;padding:6px 12px;font-size:.82rem}
.calendar-time-filter{display:flex;align-items:center;gap:4px}
.time-filter-btn{background:transparent;border:1px solid var(--line);color:var(--mut);padding:4px 8px;border-radius:6px;font-size:.78rem;cursor:pointer}
.time-filter-btn.active{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700}

/* Chips satelliti seguiti */
.calendar-chips-section{display:flex;flex-direction:column;gap:6px}
.chips-title{font-size:.75rem;font-weight:700;color:var(--mut);letter-spacing:.4px}
.calendar-chips-list{display:flex;flex-wrap:wrap;gap:6px;max-height:90px;overflow-y:auto;padding-right:2px}
.sat-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,212,0,.12);border:1px solid rgba(255,212,0,.3);border-radius:16px;padding:3px 10px;font-size:.78rem;color:#ffe066;font-weight:600}
.sat-chip .chip-name{cursor:pointer}
.sat-chip .chip-name:hover{text-decoration:underline;color:#fff}
.sat-chip .chip-del{background:none;border:none;color:#ff8888;cursor:pointer;padding:0;font-size:.8rem;font-weight:800;line-height:1}
.sat-chip .chip-del:hover{color:#ff4444}

/* Lista Passaggi */
.calendar-passes-container{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.calendar-passes-header{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;letter-spacing:.5px;border-bottom:1px solid var(--line);padding-bottom:6px}
.calendar-passes-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:48vh;padding-right:4px}

/* Card singolo passaggio */
.pass-card{display:flex;justify-content:space-between;align-items:center;background:rgba(22,31,60,.7);border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.18s;gap:12px}
.pass-card:hover{background:rgba(30,42,80,.9);border-color:var(--acc);transform:translateX(3px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.pass-card.is-active-now{border-color:#00ffaa;background:linear-gradient(90deg,rgba(0,255,170,.14),rgba(22,31,60,.8));box-shadow:0 0 16px rgba(0,255,170,.25);animation:passActiveGlow 2.5s infinite alternate}
@keyframes passActiveGlow{from{border-color:rgba(0,255,170,.6)}to{border-color:rgba(0,229,255,1);box-shadow:0 0 20px rgba(0,229,255,.35)}}
.pass-card.is-soon{border-color:#ffd400;background:rgba(255,212,0,.08)}

.pass-card-left{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.pass-sat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pass-sat-name{font-weight:800;font-size:.92rem;color:#fff}
.pass-norad{font-size:.72rem;color:var(--mut);font-family:monospace}
.pass-times-row{display:flex;gap:10px;font-size:.78rem;color:var(--txt);align-items:center}
.pass-time-item{display:flex;align-items:center;gap:4px}
.pass-time-lbl{color:var(--mut);font-size:.72rem}
.pass-time-val{font-family:'Consolas',monospace;font-weight:700}
.pass-details-row{display:flex;gap:12px;font-size:.74rem;color:var(--mut);align-items:center}

.pass-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.pass-countdown{font-family:'Consolas',monospace;font-size:.82rem;font-weight:800;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.05);color:#38bdf8}
.pass-countdown.cd-now{background:rgba(0,255,170,.2);color:#00ffaa;border:1px solid rgba(0,255,170,.4);animation:pulse 1.8s infinite}
.pass-countdown.cd-soon{background:rgba(255,212,0,.2);color:#ffd400;border:1px solid rgba(255,212,0,.4)}
.pass-el-badge{font-size:.75rem;padding:2px 8px;border-radius:10px;font-weight:800}
.el-high{background:rgba(0,255,170,.18);color:#00ffaa;border:1px solid rgba(0,255,170,.4)}
.el-med{background:rgba(56,189,248,.18);color:#38bdf8;border:1px solid rgba(56,189,248,.4)}
.el-low{background:rgba(255,160,0,.15);color:#ffaa00;border:1px solid rgba(255,160,0,.3)}

/* Toast Promemoria */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-card{pointer-events:auto;background:rgba(13,18,36,.96);border:1px solid #00ffaa;border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.6);min-width:280px;max-width:380px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:slideInToast .25s ease}
@keyframes slideInToast{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-body{display:flex;flex-direction:column;gap:2px}
.toast-title{font-size:.85rem;font-weight:800;color:#00ffcc}
.toast-sub{font-size:.75rem;color:#cbd5e1}
.toast-btn{background:rgba(0,255,170,.2);border:1px solid #00ffaa;color:#00ffaa;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:700;cursor:pointer}
.toast-btn:hover{background:#00ffaa;color:#070b16}
.toast-close{background:none;border:none;color:var(--mut);font-size:1rem;cursor:pointer;padding:0}

/* User Auth Header & Profile */
.user-auth-section { display: flex; align-items: center; }
.user-auth-btn { background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 255, 170, 0.2)); border: 1px solid rgba(0, 255, 170, 0.5); color: #00ffcc; font-weight: 700; font-size: .82rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: .2s; }
.user-auth-btn:hover { background: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(0, 255, 170, 0.35)); border-color: #00ffaa; color: #fff; box-shadow: 0 0 12px rgba(0, 255, 170, 0.3); }

.user-profile-menu { display: flex; align-items: center; gap: 8px; background: rgba(22, 31, 60, 0.8); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.user-name-display { font-size: .8rem; font-weight: 700; color: #00ffcc; }
.user-logout-btn { background: rgba(255, 77, 77, 0.15); border: 1px solid rgba(255, 77, 77, 0.4); color: #ff7777; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; cursor: pointer; transition: .15s; }
.user-logout-btn:hover { background: #ff4d4d; color: #fff; border-color: #ff4d4d; }

/* Auth Modal */
.auth-modal { border: none; padding: 0; background: transparent; max-width: 440px; width: 92vw; border-radius: 16px; overflow: hidden; }
.auth-modal::backdrop { background: rgba(3, 7, 18, 0.78); backdrop-filter: blur(6px); }
.auth-card { background: rgba(13, 18, 36, 0.96); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }

.auth-tabs { display: flex; gap: 8px; }
.auth-tab-btn { background: transparent; border: none; font-size: .95rem; font-weight: 800; color: var(--mut); padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .18s; border-bottom: 2px solid transparent; }
.auth-tab-btn.active { color: #00ffcc; border-bottom-color: #00ffcc; background: rgba(0, 255, 204, 0.08); }
.auth-tab-btn:hover:not(.active) { color: #fff; }

.auth-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-notice { padding: 10px 14px; border-radius: 8px; font-size: .8rem; line-height: 1.4; }
.auth-notice.notice-err { background: rgba(255, 77, 77, 0.15); border: 1px solid #ff4d4d; color: #ffaaaa; }
.auth-notice.notice-ok { background: rgba(0, 255, 170, 0.15); border: 1px solid #00ffaa; color: #00ffcc; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field label { font-size: .78rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.auth-field input { background: rgba(7, 11, 22, 0.85); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: #fff; font-size: .9rem; outline: none; transition: .15s; }
.auth-field input:focus { border-color: #00ffcc; box-shadow: 0 0 10px rgba(0, 255, 204, 0.25); }

.auth-submit-btn { background: linear-gradient(135deg, #00ffaa, #00e5ff); border: none; color: #070b16; font-weight: 800; font-size: .92rem; padding: 11px; border-radius: 8px; cursor: pointer; transition: .2s; margin-top: 4px; }
.auth-submit-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 255, 170, 0.4); }

.auth-footer { padding: 12px 24px 18px; border-top: 1px solid rgba(255,255,255,0.06); }
.auth-info-note { font-size: .75rem; color: #94a3b8; line-height: 1.45; margin: 0; }
/* Guest Lock Badge on Listen button */
.btn-listen-badge.is-guest-locked { border-color: rgba(255, 170, 0, 0.5); color: #ffbb33; background: rgba(255, 170, 0, 0.08); }
.btn-listen-badge.is-guest-locked:hover { background: rgba(255, 170, 0, 0.2); border-color: #ffaa00; box-shadow: 0 0 10px rgba(255, 170, 0, 0.3); }

/* Panel Attribution Footer */
.panel-attribution { padding: 10px 12px; font-size: .68rem; color: #64748b; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 10px; }
.panel-attribution a { color: #94a3b8; text-decoration: none; }
.panel-attribution a:hover { color: #00ffcc; text-decoration: underline; }

/* Modal Bridge & Launcher */
dialog.dlg-bridge { width: min(640px, 94vw); max-height: 88vh; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 20, 40, .96); color: var(--txt); box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow-y: auto; }
dialog.dlg-bridge::backdrop { background: rgba(3, 6, 14, .75); backdrop-filter: blur(5px); }
dialog.dlg-bridge[open] { display: flex; flex-direction: column; gap: 14px; animation: pop .18s ease; }

.btn-bridge-download { background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.4); color: #00e5ff; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; cursor: pointer; transition: .2s; display: inline-flex; align-items: center; gap: 4px; }
.btn-bridge-download:hover { background: rgba(0, 229, 255, 0.25); border-color: #00e5ff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.35); color: #fff; }

.bridge-modal-content { display: flex; flex-direction: column; gap: 14px; }
.bridge-desc { font-size: .84rem; color: var(--mut); line-height: 1.45; margin: 0; }
.bridge-desc strong { color: #fff; }

.bridge-compat-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: rgba(20, 28, 52, .5); border: 1px solid var(--line); border-radius: 8px; }
.compat-label { font-size: .75rem; color: var(--mut); font-weight: 600; }
.compat-tag { background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); color: #70e2ff; border-radius: 6px; font-size: .72rem; font-weight: 700; padding: 2px 7px; }

.bridge-download-section { display: flex; flex-direction: column; gap: 10px; }
.section-title { font-size: .92rem; color: #fff; margin: 0; font-weight: 700; }

.bridge-cards-container { display: flex; flex-direction: column; gap: 10px; }
.bridge-platform-card { display: flex; gap: 12px; align-items: center; background: rgba(22, 31, 60, .75); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: .18s; }
.bridge-platform-card:hover { border-color: var(--acc); background: rgba(28, 40, 76, .9); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.platform-icon { font-size: 1.8rem; flex-shrink: 0; }
.platform-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.platform-name { font-size: .88rem; font-weight: 800; color: #fff; }
.platform-details { font-size: .74rem; color: var(--mut); line-height: 1.35; }
.platform-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

.btn-dl-primary { background: linear-gradient(135deg, #0284c7, #0369a1); color: #fff; font-size: .75rem; font-weight: 700; padding: 6px 12px; border-radius: 6px; text-decoration: none; transition: .18s; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(2, 132, 199, .3); }
.btn-dl-primary:hover { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 4px 14px rgba(14, 165, 233, .45); transform: translateY(-1px); }
.btn-dl-secondary { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--txt); font-size: .75rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; text-decoration: none; transition: .18s; display: inline-flex; align-items: center; gap: 4px; }
.btn-dl-secondary:hover { background: rgba(255, 255, 255, .15); border-color: var(--acc); color: #fff; transform: translateY(-1px); }

.bridge-instructions-box { background: rgba(10, 16, 32, .6); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.instr-title { font-size: .78rem; font-weight: 700; color: #a7f3d0; margin-bottom: 4px; }
.instr-list { margin: 0; padding-left: 18px; font-size: .75rem; color: var(--mut); line-height: 1.5; }
.instr-list code { background: rgba(255,255,255,.08); color: #38bdf8; padding: 1px 5px; border-radius: 4px; font-family: monospace; }

.bridge-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; }
.btn-bridge-retry { background: rgba(16, 185, 129, .15); border: 1px solid #10b981; color: #10b981; font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: .18s; }
.btn-bridge-retry:hover { background: #10b981; color: #070b16; }

/* Subscriptions & Badges */
.user-sub-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; cursor: pointer; transition: .18s; display: inline-flex; align-items: center; gap: 4px; }
.user-sub-badge:hover { transform: translateY(-1px); box-shadow: 0 0 10px rgba(255,255,255,.2); }
.user-sub-badge.sub-active { background: rgba(16, 185, 129, .18); border: 1px solid #10b981; color: #34d399; }
.user-sub-badge.sub-expired { background: rgba(245, 158, 11, .18); border: 1px solid #f59e0b; color: #fbbf24; animation: pulse 2s infinite; }
.user-sub-badge.sub-free { background: rgba(100, 116, 139, .2); border: 1px solid #64748b; color: #94a3b8; }
.user-sub-badge.sub-admin { background: rgba(255, 212, 0, .2); border: 1px solid #ffd400; color: #ffe066; font-weight: 800; }

.admin-panel-btn { background: rgba(255, 212, 0, .15); border: 1px solid rgba(255, 212, 0, .45); color: #ffd400; font-size: .74rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: .18s; }
.admin-panel-btn:hover { background: #ffd400; color: #070b16; box-shadow: 0 0 12px rgba(255, 212, 0, .4); }

/* Modal Abbonamento & PayPal */
dialog.dlg-sub { width: min(680px, 94vw); max-height: 88vh; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 20, 40, .96); color: var(--txt); box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow-y: auto; }
dialog.dlg-sub::backdrop { background: rgba(3, 6, 14, .75); backdrop-filter: blur(5px); }
dialog.dlg-sub[open] { display: flex; flex-direction: column; gap: 14px; animation: pop .18s ease; }

.sub-modal-content { display: flex; flex-direction: column; gap: 14px; }
.sub-status-box { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-status-box.is-active { background: rgba(16, 185, 129, .12); border-color: #10b981; }
.sub-status-box.is-expired { background: rgba(245, 158, 11, .12); border-color: #f59e0b; }
.sub-status-box.is-free { background: rgba(100, 116, 139, .15); border-color: #64748b; }
.sub-status-box.is-admin { background: rgba(255, 212, 0, .12); border-color: #ffd400; }
.sub-status-title { font-size: .95rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.sub-status-details { font-size: .78rem; color: var(--mut); line-height: 1.4; }

.sub-features-card { background: rgba(20, 28, 52, .55); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sub-feat-title { font-size: .85rem; font-weight: 700; color: #8fc7ff; margin-bottom: 8px; }
.sub-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .sub-feat-grid { grid-template-columns: 1fr; } }
.sub-feat-item { font-size: .75rem; color: var(--mut); line-height: 1.35; }
.sub-feat-item strong { color: #e2e8f0; }

.sub-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 600px) { .sub-plans-grid { grid-template-columns: 1fr; } }
.sub-plan-card { background: rgba(22, 31, 60, .75); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: .18s; position: relative; }
.sub-plan-card:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.sub-plan-card.is-popular { border-color: #ffd400; background: linear-gradient(180deg, rgba(255,212,0,.08), rgba(22,31,60,.85)); }
.plan-popular-badge { position: absolute; top: -10px; right: 14px; background: #ffd400; color: #070b16; font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: .5px; }

.sub-plan-header { display: flex; justify-content: space-between; align-items: baseline; }
.sub-plan-name { font-size: 1.05rem; font-weight: 800; color: #fff; }
.sub-plan-price { font-size: 1.35rem; font-weight: 800; color: #00ffcc; font-family: 'Consolas', monospace; }
.sub-plan-price small { font-size: .75rem; color: var(--mut); font-weight: 600; }
.sub-plan-desc { font-size: .76rem; color: var(--mut); margin: 0; line-height: 1.4; }

.btn-select-plan { background: linear-gradient(135deg, #0070ba, #003087); color: #fff; border: none; border-radius: 8px; padding: 10px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: .2s; }
.btn-select-plan:hover { background: linear-gradient(135deg, #008be5, #0045c7); box-shadow: 0 4px 14px rgba(0, 112, 186, .45); }
.btn-plan-popular { background: linear-gradient(135deg, #ffd400, #ffaa00); color: #070b16; font-weight: 800; }
.btn-plan-popular:hover { background: linear-gradient(135deg, #ffe066, #ffbb33); box-shadow: 0 4px 16px rgba(255, 212, 0, .45); }

.paypal-container-box { background: rgba(10, 16, 32, .8); border: 1px solid var(--acc); border-radius: 12px; padding: 14px; margin-top: 10px; }
.paypal-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .85rem; font-weight: 700; color: #00ffcc; }
.btn-paypal-cancel { background: transparent; border: 1px solid var(--line); color: var(--mut); font-size: .72rem; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.btn-paypal-cancel:hover { color: #fff; border-color: #ff5555; }
.paypal-simulate-box { margin-top: 10px; padding: 10px; background: rgba(255, 212, 0, .08); border: 1px dashed #ffd400; border-radius: 8px; text-align: center; }
.sim-text { font-size: .75rem; color: #ffe066; margin: 0 0 8px; }
.btn-sim-pay { background: #ffd400; color: #070b16; border: none; font-weight: 800; font-size: .8rem; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.btn-sim-pay:hover { background: #ffe066; }
.sub-footer-note { font-size: .74rem; color: var(--mut); text-align: center; line-height: 1.4; border-top: 1px solid var(--line); padding-top: 10px; }

/* Modal Admin */
dialog.dlg-admin { width: min(940px, 96vw); max-height: 90vh; padding: 20px; border: 1px solid rgba(255, 212, 0, .3); border-radius: 16px; background: rgba(12, 16, 34, .97); color: var(--txt); box-shadow: 0 20px 60px rgba(0,0,0,.7); overflow-y: auto; }
dialog.dlg-admin::backdrop { background: rgba(3, 6, 14, .8); backdrop-filter: blur(6px); }
dialog.dlg-admin[open] { display: flex; flex-direction: column; gap: 14px; animation: pop .18s ease; }

.admin-modal-content { display: flex; flex-direction: column; gap: 14px; }
.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.admin-tab-btn { background: transparent; border: none; color: var(--mut); font-size: .85rem; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .18s; }
.admin-tab-btn:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-tab-btn.active { color: #ffd400; background: rgba(255, 212, 0, .12); border: 1px solid rgba(255, 212, 0, .3); }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-toolbar input { flex: 1; max-width: 320px; font-size: .82rem; padding: 7px 10px; }
.btn-admin-refresh { background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--txt); font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.btn-admin-refresh:hover { background: rgba(255,255,255,.15); color: #fff; }

.admin-table-container { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(20, 28, 52, .5); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .78rem; text-align: left; }
.admin-table th { background: rgba(14, 20, 40, .85); padding: 10px 12px; color: var(--mut); font-weight: 700; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.admin-table tr:hover { background: rgba(255,255,255,.03); }

.admin-actions-cell { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-adm-act { background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--txt); font-size: .7rem; font-weight: 700; padding: 3px 7px; border-radius: 5px; cursor: pointer; transition: .15s; }
.btn-adm-act:hover { background: var(--acc); color: #070b16; border-color: var(--acc); }
.btn-adm-act.btn-act-month { background: rgba(16, 185, 129, .15); border-color: rgba(16, 185, 129, .4); color: #34d399; }
.btn-adm-act.btn-act-month:hover { background: #10b981; color: #070b16; }
.btn-adm-act.btn-act-year { background: rgba(255, 212, 0, .15); border-color: rgba(255, 212, 0, .4); color: #ffd400; }
.btn-adm-act.btn-act-year:hover { background: #ffd400; color: #070b16; }
.btn-adm-act.btn-act-revoke { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .4); color: #f87171; }
.btn-adm-act.btn-act-revoke:hover { background: #ef4444; color: #fff; }

.admin-form { display: flex; flex-direction: column; gap: 14px; background: rgba(20, 28, 52, .5); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.admin-form-group { font-size: .85rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; }
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .admin-form-row { grid-template-columns: 1fr; } }
.admin-form-field { display: flex; flex-direction: column; gap: 5px; }
.admin-form-field label { font-size: .78rem; font-weight: 700; color: var(--mut); }
.admin-form-field input, .admin-form-field select { font-size: .85rem; padding: 8px 10px; background: rgba(7, 11, 24, .8); border: 1px solid var(--line); border-radius: 8px; color: #fff; }
.field-help { font-size: .72rem; color: var(--mut); }
.field-help code { color: #38bdf8; }
.admin-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.btn-admin-save { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; font-weight: 800; font-size: .85rem; padding: 10px 18px; border-radius: 8px; cursor: pointer; transition: .2s; }
.btn-admin-save:hover { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 4px 14px rgba(16, 185, 129, .4); }
.admin-notice.ok { background: rgba(16, 185, 129, .15); color: #34d399; border: 1px solid #10b981; }
.admin-notice.err { background: rgba(239, 68, 68, .15); color: #f87171; border: 1px solid #ef4444; }

.user-del-btn { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .3); color: #f87171; font-size: .82rem; padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: .15s; }
.user-del-btn:hover { background: #ef4444; color: #fff; box-shadow: 0 0 10px rgba(239, 68, 68, .4); }

.btn-adm-act.btn-act-del { background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
.btn-adm-act.btn-act-del:hover { background: #ef4444; color: #fff; }

.badge-2fa-on { background: rgba(16, 185, 129, .15); color: #34d399; border: 1px solid rgba(16, 185, 129, .35); font-size: .68rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
.badge-2fa-off { background: rgba(148, 163, 184, .1); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .25); font-size: .68rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }

.code-chip { font-family: 'Consolas', monospace; font-size: .88rem; font-weight: 800; letter-spacing: 1.5px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 212, 0, .4); color: #ffd400; padding: 4px 10px; border-radius: 6px; user-select: all; }