/* ===== App theme aligned to site.css (v3.0) ===== */
.app-shell{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Keep app sections visually consistent with marketing */
.app-shell .card,
.app-shell .panel,
.app-shell .box{
  background: rgba(246,247,251,0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.app-shell a{ color: var(--accent); }
/* Buttons: inherit pill style */
.app-shell .btn,
.app-shell button,
.app-shell input[type="button"],
.app-shell input[type="submit"]{
  border-radius: 999px;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
body{background:transparent;color:inherit;}
a{color:inherit}
.app-header{
  position:sticky;top:0;z-index:20;
  background:#000;border-bottom:1px solid #222;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px
}
.app-header h1{font-size:1.05rem;margin:0}
.app-header a.back{font-weight:700;text-decoration:none;opacity:0.9}
main{padding:14px 14px 170px}
.card{
  background:#111;border:1px solid #222;border-radius:16px;padding:14px
}
.h2{font-size:1.25rem;margin:0 0 12px}
.muted{color:#aaa;font-size:0.9rem}
.cta{
  display:block;margin-top:14px;text-align:center;
  background:#1b1b1f;border:1px solid #2a2a33;
  color:#fff;text-decoration:none;font-weight:800;
  padding:12px;border-radius:14px
}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list li{
  border:1px solid #222;background:#111;border-radius:14px;
  padding:12px;cursor:pointer
}
.list li:hover{background:#14141a}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#1a1a1f;border:1px solid #2a2a33;font-size:0.75rem;color:#bbb}

/* Strum area (shared) */
#strum-area{
  position:fixed;left:0;right:0;bottom:0;height:148px;
  background:#0a0a0c;border-top:1px solid #222;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 14px;gap:10px;touch-action:none;
}
#fret-indicator{
  padding:6px 12px;border-radius:999px;font-weight:800;
  background:#000;border:1px solid #222;font-size:0.9rem
}
#strum-pad{
  width:min(640px, 92vw);height:56px;border-radius:28px;
  background:#2a2a30;border:1px solid #3a3a44;
  transition:transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  position:relative;overflow:hidden;
}

/* Down-strum gravity */
#strum-pad.down{
  transform:translateY(5px) scaleY(0.96);
  box-shadow:inset 0 -14px 0 rgba(255,255,255,0.45), 0 10px 18px rgba(0,0,0,0.45);
}
#strum-pad.up{
  transform:translateY(-1px) scaleY(0.99);
  box-shadow:inset 0 6px 0 rgba(255,255,255,0.22);
}
#strum-pad.soft-up{opacity:0.55}

/* Velocity accents */
#strum-pad.fast{box-shadow:0 0 18px rgba(255,255,255,0.35)}
#strum-pad.slow{opacity:0.85}

/* Toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:164px;z-index:999;
  background:#000;border:1px solid #222;color:#fff;
  padding:10px 12px;border-radius:12px;font-weight:700;font-size:0.9rem;
  opacity:0;transition:opacity 160ms ease;
}
.toast.show{opacity:0.95}
.toast .action{margin-left:10px;text-decoration:underline;cursor:pointer;color:#fff}

/* Larger screens */
@media(min-width:768px){
  main{padding:18px 18px 170px;max-width:980px;margin:0 auto}
}

.mini-btn{
  display:inline-block;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #2a2a33;
  background:#15151b;
  text-decoration:none;
  font-weight:900;
  font-size:0.85rem;
  margin-right:8px;
}
.mini-btn:hover{background:#1b1b22}