/* Guitar Flow · warm, tactile practice room. Structural styles live in styles.css. */
:root { --bg:#101211; --panel:#1c201d; --text:#efece3; --muted:#949c91; --accent:#dfbd7e; --line:rgba(209,219,196,.13); }
body { background:radial-gradient(ellipse at 20% 0%,#30372a 0,transparent 55%),radial-gradient(ellipse at 95% 75%,#26251c 0,transparent 55%),#101211; background-attachment:fixed; }
.app { width:min(100% - 64px,1040px); padding:40px 0 32px; }
.studio-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-size:23px; letter-spacing:-.7px; font-weight:650; }
.brand img { border-radius:12px; box-shadow:0 4px 12px #0005; }
.brand em { font-family:Georgia,serif; font-weight:400; color:var(--accent); }
.brand small { display:block; font-size:10px; color:var(--muted); letter-spacing:2px; font-weight:400; margin-top:3px; }
.session-goal { font-size:11px; color:#b7beae; display:flex; align-items:center; gap:8px; }
.session-goal i { width:6px; height:6px; border-radius:50%; background:#aabd93; box-shadow:0 0 12px #aabd9340; }
.card { background:linear-gradient(150deg,#252a23ec,#171b18f5); box-shadow:inset 0 1px #ffffff0b,0 20px 60px #0003; }
.controls { padding:12px; border-radius:20px; }
.practice-row { gap:12px; }
.control { background:#0e110e55; border-color:#ffffff08; padding:10px 16px; min-width:0; }
.control-label { letter-spacing:1px; }
.bpm-value,.stepper-value { font-variant-numeric:tabular-nums; }
.bpm-control button,.stepper button,.settings-reset,.player .ghost,.player-menu-button { background:linear-gradient(#30362e,#20261f); border-color:#ffffff12; box-shadow:inset 0 1px #ffffff10,0 3px 0 #0b0e0b,0 5px 8px #0003; }
.settings-reset { align-self:center; min-height:48px; }
button { touch-action:manipulation; }
button:disabled { opacity:.32; cursor:default; }
button:disabled:hover { transform:none; color:var(--muted); }
.stage { padding:24px; margin-top:18px; border-radius:26px; }
.stage-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 24px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:2px; color:#a5ad9d; }
#practiceStatus { color:var(--muted); font-size:11px; }
.stage-top { grid-template-columns:1.15fr 1fr; gap:30px; align-items:center; }
.box { background:none; border:0; padding:0; }
.chord-focus { perspective:1000px; align-items:center; gap:18px; padding:8px 4px 15px; }
.chord-diagram-card { max-width:210px; padding:20px 12px 16px; border-radius:22px; transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s; }
.chord-diagram-card.current { background:radial-gradient(ellipse at 10% 0%,#655e3a70,transparent 65%),linear-gradient(145deg,#34392c,#22281f); border:1px solid #c7b37d55; box-shadow:inset 0 1px #fff4,0 6px 0 #10160e,0 16px 25px #0005; transform:rotateY(-5deg) rotateX(3deg); }
.chord-diagram-card.upcoming { background:linear-gradient(145deg,#252d25,#1b211c); border-color:#b4c1a525; transform:scale(.88) rotateY(7deg); box-shadow:inset 0 1px #ffffff12,0 4px 0 #10160e,0 12px 22px #0003; }
.diagram-label { font-size:10px; letter-spacing:1px; }
.diagram-label strong { font-family:Georgia,serif; font-size:48px; font-weight:400; margin:9px 0; color:#edd9ae; }
.upcoming .diagram-label strong { font-size:38px; color:#b4c1a5; }
.chord-diagram { height:145px; }
.chord-fingering { font-size:11px; letter-spacing:3px; margin-top:8px; }
.chord-meta { border:0; margin-top:6px; padding-top:8px; gap:9px; }
.diagram-legend { font-size:9px; color:#88917f; }
.rhythm-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.rhythm-heading > span:last-child { font:12px ui-monospace,monospace; color:var(--muted); }
.beat-grid { gap:8px; perspective:800px; }
.beat-cell { min-width:0; min-height:105px; display:flex; flex-direction:column; justify-content:center; padding:12px 3px; border-radius:14px; background:linear-gradient(#282e26,#1a201a); border-color:#a4b29720; box-shadow:0 4px 0 #0c110c,inset 0 1px #ffffff0b; transition:transform .14s,background .14s,box-shadow .14s; }
.beat-cell .beat-val { font-size:clamp(15px,2vw,23px); overflow-wrap:anywhere; }
.beat-cell.active { transform:translateY(3px) rotateX(-3deg); background:linear-gradient(#625838,#423d27); border-color:#dfbd7e80; box-shadow:0 1px 0 #171b12,inset 0 1px #ffffff22,0 0 22px #dfbd7e10; }
.beatline { margin-top:16px; }
.rhythm-caption { margin:20px 0 0; text-align:center; font-size:10px; color:var(--muted); }
.player { margin-top:28px; padding:16px; border-radius:18px; background:linear-gradient(120deg,#121811,#1d231b); box-shadow:inset 0 1px #ffffff08,0 6px 18px #0002; grid-template-columns:fit-content(42%) minmax(74px,1fr) auto; gap:16px; }
.player-song { max-width:100%; }
.player-song strong { font-size:13px; font-weight:500; }
.player-time strong { font-size:26px; font-weight:450; letter-spacing:1px; }
.player .player-play { width:54px; height:54px; border-radius:50%; color:#29281c; background:linear-gradient(145deg,#f3dfb5,#c4a363); border-color:#ecd4a3; box-shadow:inset 0 2px #fff6,0 4px 0 #73603d,0 7px 18px #0005; }
.player .player-play[aria-pressed=true] { background:linear-gradient(145deg,#ddca9f,#bca16e); box-shadow:inset 0 2px 5px #3c311d44,0 2px 0 #73603d; transform:translateY(2px); }
.player .player-play.is-countdown { font-size:24px; font-weight:700; }
.player .ghost,.player-menu,.player-menu-button { width:44px; height:44px; min-height:44px; }
.player-menu { flex-basis:44px; }
.player-actions { gap:10px; }
.player-icon .icon { width:22px; height:22px; }
.player-progress { height:3px; }
.player-menu-select:focus-visible + .player-menu-button { outline:2px solid var(--accent); outline-offset:4px; }
.player button:not(:disabled):active,.settings-reset:not(:disabled):active,.bpm-control button:not(:disabled):active,.stepper button:not(:disabled):active,.player-menu:active .player-menu-button { transform:translateY(3px); box-shadow:inset 0 1px 4px #0004,0 1px 0 #0b0e0b; }
.studio-footer { display:flex; justify-content:space-between; margin:22px 5px 0; color:#89927f; font-size:10px; letter-spacing:.5px; }
.feedback-toast { position:fixed; bottom:145px; left:50%; transform:translate(-50%,10px); opacity:0; pointer-events:none; padding:11px 18px; border-radius:30px; background:#313a2ef5; color:#e2dfd1; border:1px solid #bfccaa33; font-size:12px; box-shadow:0 8px 25px #0004; transition:opacity .2s,transform .2s; z-index:40; max-width:calc(100% - 32px); text-align:center; }
.feedback-toast.visible { opacity:1; transform:translate(-50%,0); }
@media (hover:hover) and (pointer:fine) {
  .chord-diagram-card.current:hover { transform:rotateY(0) rotateX(0) translateY(-4px); box-shadow:inset 0 1px #fff4,0 9px 0 #10160e,0 24px 30px #0005; }
  .chord-diagram-card.upcoming:hover { transform:scale(.93) rotateY(0); }
}
@media (max-width:760px) {
  .app { width:calc(100% - 28px); padding:22px 0 calc(145px + env(safe-area-inset-bottom)); }
  .studio-header { margin-bottom:20px; }
  .brand { font-size:21px; }
  .session-goal { font-size:10px; }
  .stage { padding:20px 16px; }
  .stage-heading { margin-bottom:18px; }
  .stage-top { grid-template-columns:1fr; gap:26px; }
  .chord-focus { max-width:460px; margin:auto; }
  .chord-diagram-card { max-width:190px; padding:12px 8px; }
  .chord-diagram { height:105px; }
  .diagram-label strong { font-size:36px; margin:6px 0; }
  .upcoming .diagram-label strong { font-size:30px; }
  .chord-fingering { margin-top:4px; }
  .stage-heading .eyebrow { font-size:9px; letter-spacing:1px; white-space:nowrap; }
  .stage-heading { align-items:start; }
  #practiceStatus { font-size:10px; text-align:right; }
  .beat-cell { min-height:76px; }
  .beat-cell .beat-val { font-size:23px; }
  .rhythm-heading { margin-bottom:12px; }
  .player { margin:0; padding:12px 14px; grid-template-columns:fit-content(58%) minmax(70px,1fr); gap:10px; background:linear-gradient(130deg,#22291ff5,#141c14fa); }
  .player-time strong { font-size:23px; }
  .player-actions { justify-content:flex-end; }
  .player-song strong { font-size:12px; }
  .studio-footer { justify-content:center; }
  .keyboard-hint { display:none; }
  .bpm-control,.stepper { gap:4px; }
  .control { padding:10px 8px; }
  .bpm-control button,.stepper button { flex-basis:30px; width:30px; height:38px; }
  .bpm-value { font-size:20px; }
  .practice-row { grid-template-columns:repeat(2,minmax(0,1fr)) 32px; gap:6px; }
  .settings-reset { grid-column:auto; width:32px; min-height:44px; }
  .control { padding:8px 6px; }
  .bpm-control,.stepper { gap:2px; }
  .bpm-control button,.stepper button { flex-basis:24px; width:24px; padding:0; }
  .bpm-value,.stepper-value { font-size:18px; }
  .bpm-value small,.stepper-value small { font-size:8px; }
  .stage-top { gap:18px; }
}
@media (max-width:380px) {
  .session-goal { display:none; }
  .stage-heading { flex-wrap:wrap; gap:6px; }
  .chord-diagram { height:115px; }
  .chord-diagram-card { padding:14px 6px; }
  .diagram-label strong { font-size:38px; }
  .beat-cell .beat-val { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .chord-diagram-card.current,.chord-diagram-card.upcoming,.beat-cell.active { transform:none; }
}