*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── DEFAULT DARK ── */
:root {
  --bg:#0e0f11; --surface:#1a1b1e; --surface2:#222428; --surface3:#2a2d33;
  --border:#2e3138; --border2:#383d45; --text:#e8eaf0; --text2:#9da3ae;
  --text3:#5f6775; --primary:#5865f2; --primary-h:#4752c4;
  --green:#23a55a; --yellow:#f0b232; --red:#ed4245; --radius:8px;
  color-scheme:dark;
}
/* ── LIGHT ── */
:root.light {
  --bg:#f5f5f7; --surface:#ffffff; --surface2:#f0f0f3; --surface3:#e8e8ed;
  --border:#d8d8de; --border2:#c8c8d0; --text:#1a1b1e; --text2:#52555e;
  --text3:#9da3ae; --primary:#5865f2; --primary-h:#4752c4; color-scheme:light;
}
/* ── SANRIO ── */
:root.sanrio {
  --bg:#fff0f5; --surface:#ffffff; --surface2:#fff5f8; --surface3:#fce8f0;
  --border:#f5c0d0; --border2:#efaac0; --text:#4a2040; --text2:#9a607a;
  --text3:#c9a0b0; --primary:#ff6b9d; --primary-h:#e5558a;
  --green:#5cba6e; --yellow:#ffb347; --red:#ff5672; --radius:14px; color-scheme:light;
}
:root.sanrio body { font-family:'Segoe UI','Hiragino Maru Gothic ProN',system-ui,sans-serif; }
:root.sanrio .card { border-radius:18px; }
:root.sanrio input,:root.sanrio select { border-radius:12px; }
:root.sanrio .btn { border-radius:20px; }
:root.sanrio .btn-primary { background:#ff6b9d; box-shadow:0 4px 14px rgba(255,107,157,.35); }
:root.sanrio .btn-primary:not(:disabled):hover { background:#e5558a; }
:root.sanrio header { background:#fff0f5; border-bottom:2px solid #f5c0d0; }
:root.sanrio .status-btn.active { border-color:#ff6b9d; background:rgba(255,107,157,.1); }
:root.sanrio .login-logo { background:#ff6b9d; box-shadow:0 8px 28px rgba(255,107,157,.4); }
:root.sanrio .brand-icon { background:#ff6b9d; }
:root.sanrio .keepalive-banner.ka-server { background:rgba(92,186,110,.1); border-color:rgba(255,107,157,.35); }
:root.sanrio ::-webkit-scrollbar-thumb { background:#efaac0; border-radius:6px; }
:root.sanrio .toggle.on { background:#ff6b9d; border-color:#ff6b9d; }
:root.sanrio .stat-card,.preset-item { border-radius:14px; }
/* ── CYBERPUNK ── */
:root.cyberpunk {
  --bg:#080b14; --surface:#0e1421; --surface2:#111928; --surface3:#1a2235;
  --border:#1e3a5a; --border2:#0ea5e9; --text:#e0f4ff; --text2:#7ec8e3;
  --text3:#2d6a8a; --primary:#00f5ff; --primary-h:#00c8d4;
  --green:#00ff88; --yellow:#ffe600; --red:#ff003c; --radius:4px; color-scheme:dark;
}
:root.cyberpunk body { font-family:'Courier New','Consolas',monospace; }
:root.cyberpunk .card { border-radius:4px; border-color:#0ea5e9; box-shadow:0 0 12px rgba(0,245,255,.07); }
:root.cyberpunk input,:root.cyberpunk select { border-radius:2px; border-color:#1e3a5a; font-family:'Courier New',monospace; }
:root.cyberpunk input:focus,:root.cyberpunk select:focus { border-color:#00f5ff; box-shadow:0 0 0 2px rgba(0,245,255,.2); }
:root.cyberpunk .btn { border-radius:2px; font-family:'Courier New',monospace; letter-spacing:.05em; }
:root.cyberpunk .btn-primary { background:transparent; border:1.5px solid #00f5ff; color:#00f5ff; box-shadow:0 0 10px rgba(0,245,255,.3),inset 0 0 10px rgba(0,245,255,.05); text-transform:uppercase; }
:root.cyberpunk .btn-primary:not(:disabled):hover { background:rgba(0,245,255,.12); box-shadow:0 0 20px rgba(0,245,255,.5); }
:root.cyberpunk .btn-ghost { border-color:#1e3a5a; font-family:'Courier New',monospace; }
:root.cyberpunk header { background:#080b14; border-bottom:1px solid #0ea5e9; box-shadow:0 1px 0 rgba(0,245,255,.15); }
:root.cyberpunk .brand-name { text-transform:uppercase; letter-spacing:.1em; color:#00f5ff; text-shadow:0 0 10px rgba(0,245,255,.5); }
:root.cyberpunk .login-logo { background:transparent; border:2px solid #00f5ff; box-shadow:0 0 20px rgba(0,245,255,.4),inset 0 0 20px rgba(0,245,255,.05); border-radius:4px; }
:root.cyberpunk .login-title { color:#00f5ff; text-shadow:0 0 15px rgba(0,245,255,.5); letter-spacing:.08em; text-transform:uppercase; }
:root.cyberpunk .brand-icon { background:transparent; border:1px solid #00f5ff; border-radius:2px; }
:root.cyberpunk .status-btn.active { border-color:#00f5ff; background:rgba(0,245,255,.08); color:#00f5ff; }
:root.cyberpunk .toggle.on { background:#00f5ff; border-color:#00f5ff; }
:root.cyberpunk .conn-dot.connected,:root.cyberpunk .conn-dot.server-active { background:#00ff88; box-shadow:0 0 6px #00ff88; }
:root.cyberpunk .dot-online { background:#00ff88; box-shadow:0 0 5px #00ff88; }
:root.cyberpunk .dot-dnd { background:#ff003c; box-shadow:0 0 5px #ff003c; }
:root.cyberpunk .stat-card { border-radius:2px; }
:root.cyberpunk .login-sub { font-family:'Courier New',monospace; color:#7ec8e3; }
:root.cyberpunk .keepalive-banner.ka-server { background:rgba(0,255,136,.05); border-color:rgba(0,255,136,.3); }
:root.cyberpunk label.field-label { font-family:'Courier New',monospace; color:#00f5ff; letter-spacing:.08em; }
:root.cyberpunk .preset-item { border-radius:2px; }
/* ── MINIMAL ── */
:root.minimal {
  --bg:#f9f9f9; --surface:#ffffff; --surface2:#f3f3f3; --surface3:#ebebeb;
  --border:#e0e0e0; --border2:#cccccc; --text:#111111; --text2:#555555;
  --text3:#999999; --primary:#111111; --primary-h:#333333;
  --green:#2a7a3b; --yellow:#9a7800; --red:#c0392b; --radius:2px; color-scheme:light;
}
:root.minimal body { font-family:'Georgia','Times New Roman',serif; }
:root.minimal .card { border-radius:0; border-color:#e0e0e0; box-shadow:none; }
:root.minimal input,:root.minimal select { border-radius:0; font-family:'Georgia',serif; border-color:#cccccc; }
:root.minimal input:focus,:root.minimal select:focus { border-color:#111; box-shadow:none; }
:root.minimal .btn { border-radius:0; font-family:'Georgia',serif; }
:root.minimal .btn-primary { background:#111; color:#fff; }
:root.minimal .btn-primary:not(:disabled):hover { background:#333; }
:root.minimal header { background:#fff; border-bottom:1px solid #e0e0e0; box-shadow:none; }
:root.minimal .brand-name { font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-family:'Georgia',serif; }
:root.minimal .brand-icon { background:#111; border-radius:0; }
:root.minimal .login-logo { background:#111; border-radius:0; box-shadow:none; }
:root.minimal .login-title { font-weight:300; letter-spacing:.1em; text-transform:uppercase; font-family:'Georgia',serif; }
:root.minimal .status-btn { border-radius:0; }
:root.minimal .status-btn.active { border-color:#111; background:#f3f3f3; color:#111; }
:root.minimal .toggle.on { background:#111; border-color:#111; }
:root.minimal .keepalive-banner { border-radius:0; }
:root.minimal .stat-card,:root.minimal .preset-item { border-radius:0; }
:root.minimal label.field-label { font-family:'Georgia',serif; font-style:italic; text-transform:none; letter-spacing:0; color:#555; }
:root.minimal .login-sub { font-family:'Georgia',serif; font-style:italic; }

body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; line-height:1.5; transition:background .25s,color .25s; }
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.hidden { display:none !important; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes music-eq { 0%,100%{height:4px} 50%{height:14px} }
.spin { animation:spin .9s linear infinite; display:inline-block; }
.pulse { animation:pulse 2s ease-in-out infinite; }

input,select,textarea { background:var(--surface3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); padding:9px 12px; font-size:14px; width:100%; outline:none; transition:border-color .15s,box-shadow .15s; font-family:inherit; }
input::placeholder { color:var(--text3); }
input:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(88,101,242,.15); }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
input[type="number"] { -moz-appearance:textfield; } input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; }
select option { background:var(--surface2); }
label.field-label { display:block; font-size:11px; font-weight:700; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border-radius:var(--radius); border:none; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s,opacity .15s; font-family:inherit; white-space:nowrap; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:not(:disabled):hover { background:var(--primary-h); }
.btn-ghost { background:var(--surface3); color:var(--text2); border:1px solid var(--border2); }
.btn-ghost:not(:disabled):hover { background:var(--border2); color:var(--text); }
.btn-danger-soft { background:rgba(237,66,69,.12); color:#f47c7e; border:none; }
.btn-danger-soft:hover { background:rgba(237,66,69,.2); }
.btn-sm { padding:6px 14px; font-size:12px; } .btn-xs { padding:4px 9px; font-size:11px; }
.btn-icon { padding:6px; border-radius:6px; background:transparent; border:none; cursor:pointer; color:var(--text2); transition:background .15s,color .15s; }
.btn-icon:hover { background:var(--surface3); color:var(--text); }
.btn-link { font-size:12px; color:var(--primary); background:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; padding:0; }
.btn-link:hover { text-decoration:underline; } .btn-link:disabled { opacity:.4; cursor:not-allowed; }
.btn-link-muted { color:var(--text3); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.card-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:14px; }
.section-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid var(--border); }
.toggle-wrap { display:flex; align-items:center; gap:8px; cursor:pointer; }
.toggle { width:38px; height:21px; background:var(--surface3); border-radius:11px; position:relative; transition:background .2s; border:1px solid var(--border2); flex-shrink:0; cursor:pointer; }
.toggle:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.toggle.on { background:var(--primary); border-color:var(--primary); }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.toggle.on::after { transform:translateX(17px); }
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dot-online { background:var(--green); } .dot-idle { background:var(--yellow); }
.dot-dnd { background:var(--red); } .dot-invisible { background:var(--text3); }
.status-btn { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:var(--radius); border:1px solid var(--border2); background:var(--surface2); color:var(--text2); cursor:pointer; font-size:13px; font-weight:500; transition:all .15s; font-family:inherit; }
.status-btn:hover { color:var(--text); background:var(--surface3); }
.status-btn.active { border-color:var(--primary); background:rgba(88,101,242,.12); color:var(--text); }

/* keep-alive banner */
.keepalive-banner { border-radius:12px; padding:14px 16px; display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.ka-server { background:rgba(35,165,90,.1); border:1px solid rgba(35,165,90,.28); }
.ka-browser { background:rgba(240,178,50,.05); border:1px solid rgba(240,178,50,.2); }
.ka-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ka-icon-server { background:rgba(35,165,90,.15); } .ka-icon-browser { background:rgba(240,178,50,.12); }
.ka-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.ka-desc { font-size:12px; color:var(--text2); line-height:1.5; }
.ka-status-line { font-size:11px; margin-top:5px; font-weight:600; }
.ka-active { color:var(--green); } .ka-inactive { color:var(--text3); } .ka-warn { color:var(--yellow); }
.ka-error-box { background:rgba(237,66,69,.08); border:1px solid rgba(237,66,69,.2); border-radius:7px; padding:7px 10px; margin-top:8px; font-size:11px; color:#f28b8d; font-family:monospace; word-break:break-all; }
.timer-box { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.timer-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
.timer-val { font-size:12px; font-weight:700; color:var(--yellow); font-variant-numeric:tabular-nums; }
.server-retry-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.server-retry-row input { flex:1; font-size:12px; padding:6px 10px; }

/* server test */
.test-result { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px; }
.test-ok { background:rgba(35,165,90,.12); color:var(--green); }
.test-fail { background:rgba(237,66,69,.1); color:#f47c7e; }
.test-row { display:flex; align-items:center; gap:7px; margin-top:6px; flex-wrap:wrap; }

/* image info */
.img-info-box { background:rgba(240,178,50,.06); border:1px solid rgba(240,178,50,.22); border-radius:8px; padding:11px 13px; margin-top:7px; font-size:11px; color:var(--text2); line-height:1.7; }
.img-appid-warn { display:none; align-items:center; gap:7px; background:rgba(237,66,69,.12); border:1px solid rgba(237,66,69,.4); border-radius:7px; padding:9px 12px; margin-bottom:10px; font-size:12px; color:#f47c7e; font-weight:600; }
.img-appid-warn svg { flex-shrink:0; }
.img-info-box .iib-title { font-size:11px; font-weight:700; color:var(--yellow); display:flex; align-items:center; gap:5px; margin-bottom:5px; }
.img-info-box strong { color:var(--text); }
.img-info-box code { background:var(--surface3); border-radius:4px; padding:1px 4px; font-family:monospace; font-size:10px; color:var(--text); }
.img-info-box ol { padding-left:15px; margin-top:3px; } .img-info-box ol li { margin-bottom:1px; }
.img-info-box .iib-method { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.06); }

/* music detector */
.music-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.music-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.music-title-row { display:flex; align-items:center; gap:7px; }
.music-eq { display:flex; align-items:flex-end; gap:2px; height:16px; }
.music-eq span { width:3px; background:var(--primary); border-radius:1px; animation:music-eq .8s ease-in-out infinite; }
.music-eq span:nth-child(2) { animation-delay:.15s; } .music-eq span:nth-child(3) { animation-delay:.3s; }
.music-detected-box { background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; display:flex; align-items:center; gap:10px; }
.music-art { width:38px; height:38px; border-radius:6px; background:var(--surface3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; overflow:hidden; }
.music-info { flex:1; min-width:0; }
.music-song { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-artist { font-size:11px; color:var(--text2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-actions { display:flex; gap:5px; align-items:center; }
.music-manual-row { display:flex; gap:6px; margin-top:8px; }
.music-manual-row input { flex:1; font-size:12px; padding:6px 10px; }
.music-note { font-size:11px; color:var(--text3); margin-top:7px; line-height:1.5; }

/* theme picker */
.theme-picker { display:flex; gap:5px; align-items:center; }
.theme-swatch { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s,border-color .15s; flex-shrink:0; }
.theme-swatch:hover { transform:scale(1.15); }
.theme-swatch.active { border-color:var(--primary); transform:scale(1.1); }
.theme-swatch-dark { background:#1a1b1e; border-color:#383d45; }
.theme-swatch-light { background:#ffffff; border-color:#d8d8de; }
.theme-swatch-sanrio { background:#ff6b9d; }
.theme-swatch-cyber { background:#00f5ff; }
.theme-swatch-minimal { background:#111111; }

/* schedule */
.rule-item { display:flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:12px; }
.rule-item .rule-desc { flex:1; min-width:0; }
.rule-item .rule-time { font-weight:700; color:var(--text); }
.rule-item .rule-status { color:var(--text2); }
.rule-item .rule-days { color:var(--text3); font-size:10px; }
.day-chips { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.day-chip { padding:3px 7px; border-radius:20px; font-size:10px; font-weight:700; cursor:pointer; border:1px solid var(--border2); background:var(--surface3); color:var(--text3); transition:all .12s; user-select:none; }
.day-chip.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.add-rule-form { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; }
.rule-form-row { display:flex; gap:7px; align-items:flex-end; margin-top:8px; flex-wrap:wrap; }
.rule-form-row input,.rule-form-row select { flex:1; min-width:80px; font-size:12px; padding:6px 9px; }

/* rotation */
.rotation-presets { display:flex; flex-direction:column; gap:4px; margin:8px 0; max-height:140px; overflow-y:auto; }
.rotation-preset-row { display:flex; align-items:center; gap:7px; font-size:12px; }
.rotation-preset-row label { flex:1; cursor:pointer; }

/* countdown */
.countdown-row { display:flex; gap:6px; align-items:center; margin-top:8px; }
.countdown-row input[type="number"] { width:70px; flex:none; text-align:center; }
.countdown-display { background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:6px 12px; display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:12px; }
.countdown-time { font-weight:700; color:var(--yellow); font-variant-numeric:tabular-nums; }

/* afk */
.afk-status { font-size:11px; font-weight:600; margin-top:6px; }

/* preset import/export */
.preset-io-row { display:flex; gap:5px; margin-bottom:10px; }
.preset-io-row .btn { flex:1; font-size:11px; padding:5px 8px; }

/* login */
#login-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; }
.login-logo { width:60px; height:60px; background:var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 28px rgba(88,101,242,.35); }
.login-logo svg { width:32px; height:32px; fill:#fff; }
.login-box { width:100%; max-width:420px; }
.login-title { font-size:22px; font-weight:800; text-align:center; margin-bottom:4px; }
.login-sub { font-size:12px; color:var(--text2); text-align:center; margin-bottom:24px; }
.token-wrap { position:relative; }
.token-wrap input { padding-right:42px; }
.eye-btn { position:absolute; right:11px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text3); padding:4px; display:flex; transition:color .15s; }
.eye-btn:hover { color:var(--text2); }
.login-error { background:rgba(237,66,69,.1); border:1px solid rgba(237,66,69,.28); border-radius:var(--radius); padding:10px 13px; color:#f28b8d; font-size:13px; margin-bottom:12px; display:flex; gap:7px; align-items:flex-start; }
.how-to { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px; margin-top:14px; font-size:12px; color:var(--text3); }
.how-to-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; cursor:pointer; color:var(--text2); font-family:inherit; font-size:12px; font-weight:600; padding:0; }
.how-to-toggle svg { transition:transform .2s; } .how-to-toggle.open svg { transform:rotate(180deg); }
.how-to-content { margin-top:10px; } .how-to ol { padding-left:16px; line-height:1.8; }
.how-to .note { margin-top:7px; color:var(--text3); font-style:italic; }

/* dashboard */
header { background:var(--surface); border-bottom:1px solid var(--border); padding:11px 22px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
.header-left { display:flex; align-items:center; gap:14px; }
.brand { display:flex; align-items:center; gap:8px; }
.brand-icon { width:28px; height:28px; background:var(--primary); border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-icon svg { width:15px; height:15px; fill:#fff; }
.brand-name { font-weight:700; font-size:14px; }
.header-right { display:flex; align-items:center; gap:8px; }
.conn-badge { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; }
.conn-dot { width:7px; height:7px; border-radius:50%; }
.conn-dot.connected { background:var(--green); } .conn-dot.connecting { background:var(--yellow); }
.conn-dot.server-active { background:var(--green); box-shadow:0 0 0 2px rgba(35,165,90,.22); }
.conn-dot.disconnected,.conn-dot.error { background:var(--text3); }
.user-btn { display:flex; align-items:center; gap:7px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:5px 9px; cursor:pointer; transition:background .15s; position:relative; font:inherit; color:var(--text); }
.user-btn:hover { background:var(--surface3); }
.avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.username { font-size:12px; font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chevron { color:var(--text3); font-size:9px; transition:transform .2s; }
.user-btn.open .chevron { transform:rotate(180deg); }
.user-menu { position:absolute; top:calc(100% + 5px); right:0; background:var(--surface); border:1px solid var(--border2); border-radius:10px; min-width:170px; box-shadow:0 8px 28px rgba(0,0,0,.45); overflow:hidden; z-index:200; }
.user-menu-header { padding:11px 13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; }
.user-menu-header img { width:34px; height:34px; border-radius:50%; }
.user-menu-name { font-size:13px; font-weight:700; } .user-menu-tag { font-size:11px; color:var(--text3); }
.user-menu-item { display:flex; align-items:center; gap:7px; padding:9px 13px; cursor:pointer; font-size:13px; font-weight:500; transition:background .12s; color:#f47c7e; background:none; border:none; width:100%; text-align:left; font-family:inherit; }
.user-menu-item:hover { background:rgba(237,66,69,.1); }
.stats-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 22px; max-width:980px; margin:0 auto; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.stat-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.stat-val { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.main-grid { display:grid; grid-template-columns:1fr 280px; gap:16px; padding:0 22px 28px; max-width:980px; margin:0 auto; }
.left-col { display:flex; flex-direction:column; gap:14px; }
.action-row { display:flex; gap:8px; } .action-row .btn-primary { flex:1; }
.preset-list { display:flex; flex-direction:column; gap:7px; max-height:260px; overflow-y:auto; }
.preset-item { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:9px 11px; }
.preset-info { flex:1; min-width:0; }
.preset-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preset-meta { font-size:11px; color:var(--text3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preset-actions { display:flex; gap:3px; opacity:0; transition:opacity .15s; }
.preset-item:hover .preset-actions { opacity:1; }
.preset-item.editing .preset-actions { opacity:1; }
.preset-edit-form { display:flex; flex-direction:column; gap:6px; width:100%; }
.preset-edit-form input { font-size:12px; margin:0; }
.preset-edit-btns { display:flex; gap:5px; flex-wrap:wrap; }
.preset-edit-btns .btn { font-size:11px; padding:4px 8px; flex:1; min-width:0; }
.preset-edit-btns .btn-cancel { flex:0 0 auto; }
.save-preset-form { margin-bottom:10px; }
.save-row { display:flex; gap:6px; }
.add-preset-btn { width:100%; padding:8px; border:1.5px dashed var(--border2); border-radius:var(--radius); background:transparent; color:var(--text3); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s; font-family:inherit; margin-bottom:10px; }
.add-preset-btn:hover { border-color:var(--primary); color:var(--primary); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ts-actions { display:flex; gap:10px; margin-top:7px; }
.btn-row { display:flex; gap:6px; margin-bottom:7px; } .btn-row input { flex:1; }
.remove-btn { background:rgba(237,66,69,.1); border:none; border-radius:6px; color:#f47c7e; font-size:17px; line-height:1; padding:0 9px; cursor:pointer; flex-shrink:0; transition:background .15s; }
.remove-btn:hover { background:rgba(237,66,69,.2); }
.hint { font-size:11px; color:var(--text3); margin-top:3px; }

/* ── RICH PRESENCE PREVIEW ── */
.rp-wrap { margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.rp-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.rp-label-dot { width:7px; height:7px; border-radius:50%; background:#23a559; display:inline-block; animation:rp-blink 2s ease-in-out infinite; }
@keyframes rp-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.rp-card { background:#111214; border-radius:8px; padding:14px 14px 10px; }
.rp-card-inner { display:flex; gap:12px; align-items:flex-start; }
.rp-assets { flex-shrink:0; position:relative; width:60px; height:60px; }
.rp-lg { width:60px; height:60px; border-radius:8px; object-fit:cover; display:block; }
.rp-lg-ph { width:60px; height:60px; border-radius:8px; background:#1e1f22; display:flex; align-items:center; justify-content:center; font-size:26px; }
.rp-sm { width:20px; height:20px; border-radius:50%; object-fit:cover; position:absolute; bottom:-3px; right:-3px; border:2px solid #111214; display:block; }
.rp-sm-ph { width:20px; height:20px; border-radius:50%; background:#313338; position:absolute; bottom:-3px; right:-3px; border:2px solid #111214; display:none; }
.rp-info { flex:1; min-width:0; }
.rp-type-badge { font-size:12px; font-weight:700; color:#fff; margin-bottom:1px; }
.rp-aname { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-detail-line, .rp-state-line { font-size:12px; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.rp-elapsed { font-size:11px; color:rgba(255,255,255,.45); margin-top:4px; }
.rp-btns { margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.rp-btn-item { background:rgba(255,255,255,.08); border-radius:3px; color:#fff; font-size:13px; font-weight:600; padding:7px 0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-empty { font-size:12px; color:rgba(255,255,255,.3); text-align:center; padding:6px 0; }

/* ── FOOTER ── */
.panda-footer { text-align:center; padding:18px 16px 10px; font-size:11px; color:var(--text3); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center; border-top:1px solid var(--border); margin-top:8px; }
.panda-footer a { color:var(--text3); text-decoration:none; font-weight:600; transition:color .15s; }
.panda-footer a:hover { color:var(--primary); }
.panda-footer .panda-made { font-weight:700; color:var(--text2); letter-spacing:.01em; }
.panda-footer .dot-sep { color:var(--border2); }
:root.sanrio .panda-footer a:hover { color:#ff6b9d; }
:root.cyberpunk .panda-footer a:hover { color:#00f5ff; }
:root.cyberpunk .panda-footer { font-family:'Courier New',monospace; }
#login-page .panda-footer { border-top:none; margin-top:18px; }

@media (max-width:680px) {
  .stats-bar { grid-template-columns:1fr 1fr; }
  .main-grid { grid-template-columns:1fr; padding:0 12px 24px; }
  .grid-2 { grid-template-columns:1fr; }
  header { padding:10px 14px; }
  .stats-bar { padding:12px; }
  .username { display:none; }
  .stat-card:last-child { grid-column:span 2; }
  .theme-picker { gap:3px; }
}

  /* ── KAWAII CLOUD THEME + POLISH ── */
  :root.kawaii {
    --bg:#fff7fd; --surface:#ffffff; --surface2:#fff0fb; --surface3:#ffe5f6;
    --border:#ffc8ea; --border2:#ffa8dd; --text:#4d2340; --text2:#9b5c83;
    --text3:#c48aaf; --primary:#ff7ac8; --primary-h:#f15cb7;
    --green:#7bd88f; --yellow:#ffd166; --red:#ff6b8f; --radius:18px; color-scheme:light;
  }
  :root.kawaii body { background:#fff7fd; }
  :root.kawaii header { background:rgba(255,255,255,.78); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,168,221,.55); box-shadow:0 18px 40px rgba(255,122,200,.14); }
  :root.kawaii .card,:root.kawaii .music-card,:root.kawaii .stat-card { border-color:rgba(255,168,221,.65); box-shadow:0 18px 45px rgba(255,122,200,.12); }
  :root.kawaii .btn-primary { background:#ff7ac8; box-shadow:0 10px 24px rgba(255,122,200,.28); }
  :root.kawaii .btn-primary:not(:disabled):hover { background:#f15cb7; }
  :root.kawaii .brand-icon,.kawaii-bubble { background:#ff9cda; box-shadow:0 10px 25px rgba(255,122,200,.3); }
  :root.kawaii .toggle.on { background:#ff7ac8; border-color:#ff7ac8; }
  :root.kawaii .status-btn.active { border-color:#ff7ac8; background:rgba(255,122,200,.12); }
  :root.kawaii .preset-item { background:#fff0fb; }
  .theme-orb { position:relative; }
  .theme-orb-btn { width:42px;height:42px;border-radius:999px;border:1px solid var(--border2);background:var(--surface3);color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s; }
  .theme-orb-btn:hover,.theme-orb.open .theme-orb-btn { transform:translateY(-1px) rotate(-8deg); box-shadow:0 14px 30px rgba(0,0,0,.18); }
  .theme-menu { position:absolute;right:0;top:50px;width:230px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:10px;box-shadow:0 25px 70px rgba(0,0,0,.28);z-index:30;display:none; }
  .theme-orb.open .theme-menu { display:block; animation:themePop .18s ease-out; }
  @keyframes themePop { from{opacity:0;transform:translateY(-6px) scale(.96)} to{opacity:1;transform:none} }
  .theme-menu-title { font-size:11px;color:var(--text3);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin:2px 4px 8px; }
  .theme-choice { display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;background:transparent;color:var(--text2);border-radius:13px;padding:8px;cursor:pointer;font-family:inherit;text-align:left;font-size:12px;font-weight:700; }
  .theme-choice:hover { background:var(--surface2); color:var(--text); }
  .theme-choice.active { border-color:var(--primary); background:rgba(255,122,200,.1); color:var(--text); }
  .theme-dot { width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.15); }
  .theme-dot.dark { background:#5865f2; }
  .theme-dot.kawaii { background:#ff7ac8; }
  .theme-dot.light { background:#5865f2; }
  .theme-dot.sanrio { background:#ff6b9d; }
  .theme-dot.cyberpunk { background:#00f5ff; }
  .theme-dot.minimal { background:#111111; }
  .profile-card { display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px; }
  .profile-card img { width:54px;height:54px;border-radius:17px;object-fit:cover;border:2px solid var(--border2); }
  .profile-name { font-weight:800;color:var(--text);font-size:15px; }
  .profile-sub,.profile-running { color:var(--text2);font-size:12px;line-height:1.45; }
  .profile-running { margin-top:4px;color:var(--primary);font-weight:700; }
  .stop-all-panel { margin-top:10px;border:1px solid rgba(237,66,69,.25);background:rgba(237,66,69,.07);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;justify-content:space-between; }
  .stop-all-panel strong { color:var(--text);font-size:13px;display:block; }
  .stop-all-panel span { color:var(--text2);font-size:12px; }
  .asset-status { margin-top:6px;font-size:11px;color:var(--text3);line-height:1.45; }
  .preset-tools { display:flex;gap:7px;margin-bottom:10px; }

/* ── GLASS SURFACE REFINEMENT ── */
/* Surface-only enhancement. Existing selectors, spacing, theme names, and interactions remain unchanged. */
:root {
  --glass-surface:rgba(26,27,30,.78);
  --glass-subtle:rgba(34,36,40,.68);
  --glass-control:rgba(42,45,51,.72);
  --glass-header:rgba(14,15,17,.84);
  --glass-border:rgba(232,234,240,.16);
  --glass-shadow:0 16px 42px rgba(0,0,0,.20);
}
:root.light {
  --glass-surface:rgba(255,255,255,.80);
  --glass-subtle:rgba(240,240,243,.76);
  --glass-control:rgba(255,255,255,.72);
  --glass-header:rgba(245,245,247,.86);
  --glass-border:rgba(26,27,30,.15);
  --glass-shadow:0 16px 42px rgba(26,27,30,.10);
}
:root.sanrio,:root.kawaii {
  --glass-surface:rgba(255,255,255,.80);
  --glass-subtle:rgba(255,240,251,.74);
  --glass-control:rgba(255,255,255,.70);
  --glass-header:rgba(255,247,253,.84);
  --glass-border:rgba(255,168,221,.58);
  --glass-shadow:0 16px 42px rgba(255,122,200,.13);
}
:root.cyberpunk {
  --glass-surface:rgba(14,20,33,.80);
  --glass-subtle:rgba(17,25,40,.74);
  --glass-control:rgba(26,34,53,.70);
  --glass-header:rgba(8,11,20,.86);
  --glass-border:rgba(14,165,233,.38);
  --glass-shadow:0 16px 42px rgba(0,0,0,.28);
}

header,
.card,
.music-card,
.stat-card,
.profile-card,
.user-menu,
.theme-menu,
.how-to,
.rule-item,
.add-rule-form,
.countdown-display,
.timer-box,
.img-info-box,
.preset-item,
.music-detected-box,
.rp-card,
.stop-all-panel,
.keepalive-banner {
  border-color:var(--glass-border);
  background:var(--glass-surface);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
header,.user-menu,.theme-menu { background:var(--glass-header); }
.rule-item,
.add-rule-form,
.countdown-display,
.timer-box,
.img-info-box,
.preset-item,
.music-detected-box,
.rp-card,
.stop-all-panel,
.keepalive-banner { background:var(--glass-subtle); }

input,
select,
textarea,
.btn-ghost,
.status-btn,
.user-btn,
.day-chip,
.theme-orb-btn {
  border-color:var(--glass-border);
  background:var(--glass-control);
}
input:hover,
select:hover,
textarea:hover,
.btn-ghost:hover,
.status-btn:hover,
.user-btn:hover,
.day-chip:hover,
.theme-orb-btn:hover { border-color:var(--border2); }

/* Explicit Kawaii, Cyberpunk, and Sanrio surface cleanup. */
:root.sanrio header,
:root.sanrio .card,
:root.sanrio .music-card,
:root.sanrio .stat-card,
:root.sanrio .preset-item,
:root.sanrio .login-logo,
:root.sanrio .brand-icon,
:root.sanrio .btn-primary,
:root.sanrio .status-btn.active,
:root.kawaii header,
:root.kawaii .card,
:root.kawaii .music-card,
:root.kawaii .stat-card,
:root.kawaii .preset-item,
:root.kawaii .login-logo,
:root.kawaii .brand-icon,
:root.kawaii .kawaii-bubble,
:root.kawaii .btn-primary,
:root.kawaii .status-btn.active,
:root.cyberpunk header,
:root.cyberpunk .card,
:root.cyberpunk .music-card,
:root.cyberpunk .stat-card,
:root.cyberpunk .preset-item,
:root.cyberpunk .login-logo,
:root.cyberpunk .brand-icon,
:root.cyberpunk .btn-primary,
:root.cyberpunk .status-btn.active {
  background-image:none;
}
:root.sanrio header,
:root.kawaii header,
:root.cyberpunk header { background:var(--glass-header); }
:root.sanrio .card,
:root.sanrio .music-card,
:root.sanrio .stat-card,
:root.sanrio .preset-item,
:root.kawaii .card,
:root.kawaii .music-card,
:root.kawaii .stat-card,
:root.kawaii .preset-item,
:root.cyberpunk .card,
:root.cyberpunk .music-card,
:root.cyberpunk .stat-card,
:root.cyberpunk .preset-item { background:var(--glass-surface); }
:root.sanrio .login-logo,
:root.sanrio .brand-icon,
:root.kawaii .login-logo,
:root.kawaii .brand-icon,
:root.kawaii .kawaii-bubble,
:root.cyberpunk .login-logo,
:root.cyberpunk .brand-icon { background:var(--primary); }
:root.cyberpunk .btn-primary { background:rgba(0,245,255,.10); }
:root.cyberpunk .status-btn.active { background:rgba(0,245,255,.08); }
:root.sanrio .status-btn.active { background:rgba(255,107,157,.10); }
:root.kawaii .status-btn.active { background:rgba(255,122,200,.12); }

:root.minimal .card,
:root.minimal .music-card,
:root.minimal .stat-card,
:root.minimal .profile-card,
:root.minimal .user-menu,
:root.minimal .theme-menu,
:root.minimal .how-to,
:root.minimal .rule-item,
:root.minimal .add-rule-form,
:root.minimal .countdown-display,
:root.minimal .timer-box,
:root.minimal .img-info-box,
:root.minimal .preset-item,
:root.minimal .music-detected-box,
:root.minimal .rp-card,
:root.minimal .stop-all-panel,
:root.minimal .keepalive-banner,
:root.minimal header {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (prefers-reduced-motion:reduce) {
  header,
  .card,
  .music-card,
  .stat-card,
  .profile-card,
  .user-menu,
  .theme-menu,
  .how-to,
  .rule-item,
  .add-rule-form,
  .countdown-display,
  .timer-box,
  .img-info-box,
  .preset-item,
  .music-detected-box,
  .rp-card,
  .stop-all-panel,
  .keepalive-banner {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
  .btn-kawaii { background:rgba(255,122,200,.14); color:var(--primary); border:1px solid rgba(255,122,200,.28); }

.cookie-notice{position:fixed;z-index:100;left:50%;bottom:18px;transform:translateX(-50%);width:min(680px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 16px 40px rgba(0,0,0,.28);font-size:12px}.cookie-notice p{margin:4px 0 0;color:var(--text2);line-height:1.45}.cookie-notice a{color:var(--primary);text-underline-offset:3px}.cookie-notice button{flex:0 0 auto}@media(max-width:540px){.cookie-notice{align-items:stretch;flex-direction:column;gap:10px}.cookie-notice button{width:100%}}