:root{
  --bg:#0b1220;
  --panel:#0f1720;
  --muted:#9aa6b2;
  --accent:#ef4444;
  --note:#60a5fa;
  --second:#fbbf24;
  --third:#34d399;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{background:var(--bg);color:#e6eef8;display:flex;flex-direction:column;}

/* Login */
.login-screen{display:flex;justify-content:center;align-items:center;height:100vh;}
.login-box{background:var(--panel);padding:30px;border-radius:12px;width:320px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.5);}
.login-box h2{margin-bottom:12px;}
.login-box p{margin-bottom:20px;color:var(--muted);}
.login-box input{width:100%;padding:10px;margin-bottom:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:#fff;}
.login-box button{width:100%;padding:10px;background:linear-gradient(90deg,var(--accent),#fb923c);border:none;color:#fff;border-radius:8px;cursor:pointer;}



/* App */
.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.03);}
.title-wrap h1{margin:0;font-size:1.2rem;}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:0.9rem;}
.actions button{background:linear-gradient(90deg,var(--accent),#35291f);border:none;padding:8px 12px;border-radius:8px;color:white;cursor:pointer;}
.container{display:flex;gap:18px;padding:18px;align-items:flex-start;}
.controls{width:280px;background:var(--panel);padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
.controls label{display:block;margin-bottom:6px;}
#chord-select{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:black;color:inherit;}
.toggles{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.toggles label{font-size:0.92rem;color:var(--muted);}
.legend{margin-top:12px;display:flex;flex-direction:column;gap:8px;color:var(--muted);}
.legend .badge{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;}
.legend .tonic{background:linear-gradient(90deg,var(--accent),#fb923c);}
.legend .second{background:var(--second);}
.legend .third{background:var(--third);}
.legend .other{background:var(--note);}
.info{margin-top:12px;}
.info h4{margin:0 0 8px 0;}
.fretboard-wrap{flex:1;min-width:320px;}
.svg-container{background:var(--glass);padding:14px;border-radius:12px;}
.fretboard-controls{margin-top:8px;color:var(--muted);}
.app-footer{text-align:center;padding:8px 0;color:var(--muted);margin-top:auto;}

/* buttons */
.login-box .btn-primary{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, #c86b6b, #8b3b3b);
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
  margin-right:12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 18px 45px rgba(200,80,80,0.18); }
.login-error{color:#f87171;margin-top:6px;font-size:0.9rem;}

@media(max-width:900px){.container{padding:12px;flex-direction:column}.controls{width:100%;}}