
:root{
  --bg:#0e0e10;--panel:#17171a;--panel2:#202025;--text:#f6f6f7;--muted:#a8a8b0;
  --border:#33333a;--accent:#ff3b30;--accent2:#ff6b61;--danger:#ff453a;
}
body.light{
  --bg:#f2f2f4;--panel:#ffffff;--panel2:#ececf0;--text:#17171a;--muted:#66666f;
  --border:#d3d3d8;--accent:#d91f16;--accent2:#ef473d;--danger:#c91810;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea{font:inherit}
button{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 14px;cursor:pointer}
button:hover{filter:brightness(1.08)}
.primary{background:var(--accent);border-color:var(--accent);color:white;font-weight:800}
.danger{color:white;background:var(--danger);border-color:var(--danger)}
.icon-btn{width:44px;height:44px;padding:0;display:grid;place-items:center}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
.brand{font-size:24px;font-weight:900}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}
.top-actions{display:flex;gap:8px}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:calc(100vh - 78px)}
.sidebar{border-right:1px solid var(--border);padding:14px;background:var(--panel)}
.searchbox input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}
.side-actions{padding:10px 0}
.side-actions button{width:100%}
.song-list{display:flex;flex-direction:column;gap:7px}
.song-item{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel2);cursor:pointer;font-weight:700}
.song-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel2))}
.content{padding:24px;min-width:0}
.song-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:800}
h1{margin:.25rem 0 0;font-size:clamp(30px,5vw,64px)}
.song-actions{display:flex;gap:8px;flex-wrap:wrap}
.lyrics-view{margin-top:24px;white-space:pre-wrap;line-height:1.7;font-size:clamp(20px,2.4vw,34px);background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px;min-height:55vh}
.nav-controls{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px;z-index:50}
.hidden{display:none!important}
.modal-card{width:min(820px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:20px}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.modal-card label{display:block;margin-top:14px;font-weight:700}
.modal-card input,.modal-card textarea{width:100%;margin-top:7px;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}
.modal-card textarea{resize:vertical;line-height:1.5}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.concert{position:fixed;inset:0;background:#000;color:#fff;z-index:100;display:flex;flex-direction:column}
.concert-top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #222}
.concert-title{font-size:clamp(22px,4vw,44px);font-weight:900}
.concert-actions{display:flex;gap:8px}
.concert-actions button,.concert-nav button{background:#161616;border-color:#333;color:white}
.concert-lyrics{flex:1;overflow:auto;padding:28px 7vw 120px;white-space:pre-wrap;line-height:1.55;font-size:42px}
.concert-nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:18px}
.concert-nav button{font-size:28px;padding:14px 28px}
@media(max-width:800px){
  .layout{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--border)}
  .song-list{max-height:260px;overflow:auto}
  .song-head{flex-direction:column}
  .content{padding:16px}
  .lyrics-view{padding:18px}
}
