/* Number fields retain keyboard controls and validation without native arrows. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.option-group { flex:0 0 auto; min-width:0; margin:0 0 12px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--bg-card); overflow:visible; }
.option-group > summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:18px 20px; cursor:pointer; list-style:none; position:relative; padding-right:46px; border-radius:16px; }
.option-group > summary::-webkit-details-marker { display:none; }
.option-group > summary::after { content:'+'; position:absolute; right:20px; font-size:22px; color:var(--accent); font-weight:400; }
.option-group[open] > summary::after { content:'−'; }
.option-group > summary strong { font-size:14px; }
.option-group > summary span { flex-basis:100%; color:var(--text-dim); font-size:12px; line-height:1.5; }
.option-group > summary:hover { background:rgba(180,150,230,.06); }
.option-group > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.option-content { padding:8px 20px 20px; min-width:0; }
.option-content > .feature-card,.option-content > .meter-box { margin:0; box-shadow:none; background:transparent; }
.option-content > .power-panel { margin:0; }
.option-content .field { margin-top:16px; }
#settings-profile .feature-heading { justify-content:flex-end; margin-bottom:16px; }
#settings-profile .toggle-row { margin-top:22px; }
#settings-profile .toggle-row { display:flex; align-items:flex-start; gap:12px; line-height:1.6; clear:both; }
#settings-profile .toggle-row input { flex:0 0 auto; margin-top:4px; accent-color:var(--accent); }
#settings-profile p { color:var(--text-dim); line-height:1.6; margin:12px 0; }
#settings-profile #btn-save-profile { max-width:320px; display:block; }
#settings-security .account-protection { border:0; padding:16px 0; }
#tab-ajustes .scroll-panel-body { gap:0; }
#customize-fields { display:block; }
.appearance-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.local-section-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:6px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--bg-card); }
.local-section-tabs button { flex:1 1 140px; justify-content:center; padding:12px 16px; border-color:transparent; }
.local-section-tabs [aria-selected="true"] { background:var(--accent); color:#18111f; font-weight:800; }
#music-app > [role="tabpanel"] { margin:0; }
#music-app > [hidden] { display:none!important; }
#music-app .help-note { line-height:1.65; max-width:78ch; }
#spotify-status { padding:16px; border-radius:14px; background:var(--bg-input); line-height:1.6; margin:20px 0 14px; overflow-wrap:anywhere; }
#spotify-status[data-state="pending"] { border:1px solid var(--accent); background:rgba(160,130,230,.12); }
#spotify-status[data-state="error"] { border:1px solid var(--danger); }
.spotify-steps { display:flex; flex-wrap:wrap; gap:10px 24px; padding:14px 0; margin:0; list-style:none; color:var(--text-dim); font-size:12px; }
.spotify-steps li.current { color:var(--text-primary); font-weight:800; }
.spotify-link-notice { position:fixed; z-index:180; right:22px; bottom:22px; max-width:min(440px,calc(100vw - 32px)); display:flex; flex-wrap:wrap; gap:12px; padding:18px; border:1px solid var(--accent); border-radius:18px; color:var(--text-primary); background:var(--bg-card); box-shadow:0 12px 40px #0005; }
.spotify-link-notice p { flex-basis:100%; margin:0; }
.spotify-link-notice[hidden] { display:none; }
#spotify-diagnostics { margin-top:18px; overflow-wrap:anywhere; }
#spotify-diagnostics details { padding:12px; border:1px solid var(--border-subtle); border-radius:12px; }
#spotify-diagnostics p { padding-top:10px; line-height:1.6; }
#spotify-manual-link { display:inline-flex; margin-top:14px; padding:12px 16px; border-radius:12px; color:var(--text-primary); border:1px solid var(--accent); }
#spotify-manual-link[hidden] { display:none; }
.founder-trophy { display:grid; grid-template-columns:190px minmax(0,1fr); gap:30px; padding:32px; align-items:center; min-height:260px; }
.founder-emblem { width:190px; height:190px; display:grid; place-items:center; position:relative; isolation:isolate; }
.founder-emblem .founder-orbit { position:absolute; width:100%; height:100%; inset:0; transform:none; margin:0; z-index:-1; }
.founder-emblem .founder-glyph { display:grid; place-items:center; width:140px; height:140px; flex:none; padding:0; margin:0; animation:none; }
.founder-emblem .founder-glyph .tay-icon { width:104px; height:104px; display:block; }
.founder-trophy > div:last-child { min-width:0; position:relative; z-index:1; overflow-wrap:anywhere; }
.founder-trophy h2 { font-size:clamp(24px,3vw,38px); }
.founder-trophy::after { opacity:.22; pointer-events:none; }
.twitch-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); gap:28px; padding:clamp(22px,3vw,40px); border:1px solid #a879dc70; border-radius:24px; background:linear-gradient(120deg,var(--bg-card),#9146ff18); overflow:hidden; }
.twitch-info { min-width:0; align-self:center; }
.twitch-status { display:inline-flex; align-items:center; gap:8px; border:1px solid #b384f550; border-radius:30px; padding:8px 12px; margin-bottom:24px; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--text-primary); background:#9146ff14; }
.is-live .twitch-status { color:#fff; background:#b7224b; border-color:#f17697; }
.twitch-info .eyebrow { color:var(--text-dim); margin-bottom:12px; }
.twitch-info h2 { font-size:clamp(26px,3vw,40px); line-height:1.15; margin:0 0 16px; overflow-wrap:anywhere; }
.twitch-info p { line-height:1.65; color:var(--text-dim); }
.btn-twitch { width:auto; margin-top:24px; padding:14px 22px; background:#8240d5; color:white; border:1px solid #c394ff; }
.btn-twitch:hover { background:#9654e8; }
.twitch-art { min-width:0; min-height:210px; aspect-ratio:16/10; border:1px solid #b384f535; background:radial-gradient(ellipse at 50% 30%,#9146ff40,transparent 70%),#15101e; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; overflow:hidden; position:relative; }
.twitch-art img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.twitch-signal { color:#c6a3ff; padding:20px; border:1px solid #b384f550; border-radius:22px; transform:rotate(-6deg); background:#9146ff18; }
.twitch-signal .tay-icon { width:64px; height:64px; stroke-width:1.2; }
.twitch-art-name { color:#f4eaff; font-size:22px; font-weight:800; letter-spacing:1px; }
#twitch-app > h3 { margin:32px 0 18px; }
#twitch-app > .help-note { margin:14px 4px; }
.twitch-history { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px; }
.twitch-history-card { min-width:0; }
.twitch-history-card h4 { margin:12px 0; overflow-wrap:anywhere; }
.twitch-history-card p { color:var(--text-dim); }
.twitch-hero.is-live { border-color:#af70fb; }
#tab-admin .option-content > .meter-box { border:0; padding:0; }
#tab-admin .admin-user-row { flex-wrap:wrap; min-width:0; }
#tab-admin .admin-user-row div { min-width:0; flex-wrap:wrap; max-width:100%; overflow-wrap:anywhere; }
.founder-trophy::before { font-size:100px; right:20px; top:8px; opacity:.5; pointer-events:none; }
#tab-admin .admin-user-row .role-list { flex-wrap:wrap; }
#tab-admin .admin-form-row { min-width:0; }
#tab-admin .admin-form-row > * { min-width:0; }
@media(max-width:700px) { #tab-admin .admin-form-row { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:10px!important; } #tab-admin .admin-form-row button { width:100%!important; } }
@media(max-width:1100px) { .twitch-hero { grid-template-columns:1fr; } .twitch-art { min-height:140px; max-height:230px; aspect-ratio:auto; } .founder-trophy { grid-template-columns:150px minmax(0,1fr); padding:24px; gap:22px; } .founder-emblem { width:150px; height:150px; } }
@media(max-width:600px) { .option-group > summary { padding:16px 40px 16px 14px; } .option-content { padding:6px 14px 16px; } .appearance-group-grid { grid-template-columns:1fr; } .founder-trophy { grid-template-columns:1fr; gap:22px; text-align:center; } .founder-emblem { margin:auto; } .twitch-hero { padding:22px; } .twitch-info h2 { font-size:26px; } }