:root{
  --bg:#090b10;--panel:#10141d;--panel2:#151a24;--line:#252c3a;--text:#f4f7fb;--muted:#8d97a8;
  --violet:#7c5cff;--cyan:#00d4ff;--green:#37e58d;--amber:#ffbd4a;--red:#ff5f6d;--radius:22px;
}
*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 20% 0%,#161b2a 0,#090b10 42%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{min-height:100vh;padding-bottom:88px}.shell{width:min(1180px,100%);margin:auto;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 2px 22px;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(9,11,16,.96) 65%,rgba(9,11,16,0))}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.08em}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--cyan));display:grid;place-items:center;color:#081019;font-weight:900;box-shadow:0 0 28px rgba(0,212,255,.18)}
.pill{border:1px solid var(--line);background:#121721;color:var(--muted);padding:9px 12px;border-radius:999px}.icon-btn{border:1px solid var(--line);background:#111722;color:#fff;width:42px;height:42px;border-radius:14px}
.hero{padding:28px 0 18px}.eyebrow{color:var(--cyan);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(2rem,6vw,4.4rem);line-height:.98;margin:10px 0 12px;max-width:780px}.hero p{color:var(--muted);font-size:1.04rem;max-width:680px}
.primary{border:0;color:white;background:linear-gradient(135deg,var(--violet),#4c7dff 55%,var(--cyan));padding:14px 18px;border-radius:16px;font-weight:800;box-shadow:0 12px 34px rgba(83,91,255,.24)}.secondary{border:1px solid var(--line);background:#111722;color:#fff;padding:13px 17px;border-radius:16px;font-weight:750}.danger{background:#241319;border-color:#4d222d}
.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{background:linear-gradient(180deg,rgba(20,25,36,.94),rgba(14,18,26,.94));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.card-pad{padding:20px}.continue{grid-column:span 7;min-height:230px;position:relative;overflow:hidden}.continue:after{content:"";position:absolute;inset:auto -70px -90px auto;width:260px;height:260px;background:radial-gradient(circle,var(--violet),transparent 66%);opacity:.15}.stats{grid-column:span 5}.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px}.section-title h2{margin:0;font-size:1.15rem}.song-title{font-size:1.6rem;font-weight:850;margin:6px 0}.meta{color:var(--muted)}.progress{height:8px;background:#202735;border-radius:999px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:inherit}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.metric{padding:14px;border:1px solid var(--line);border-radius:16px;background:#0d1118}.metric strong{display:block;font-size:1.35rem}.metric span{color:var(--muted);font-size:.78rem}
.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.song-card{padding:16px}.cover{height:120px;border-radius:18px;background:linear-gradient(135deg,#201c37,#101a26);display:flex;align-items:flex-end;padding:14px;font-weight:800;position:relative;overflow:hidden}.cover:after{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-30px;top:-30px}.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:#c7ced9;font-size:.78rem;background:#0d1118}
.bottom-nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;background:rgba(15,19,27,.9);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:20px;z-index:30}.nav-btn{border:0;background:transparent;color:var(--muted);padding:10px;border-radius:14px;font-size:.78rem}.nav-btn.active{background:#1b2230;color:#fff}
.screen{animation:fade .22s ease}@keyframes fade{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
.dropzone{border:1px dashed #394359;border-radius:24px;padding:42px 20px;text-align:center;background:linear-gradient(180deg,#111722,#0c1017)}.drop-icon{width:64px;height:64px;border-radius:20px;margin:auto auto 14px;background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(0,212,255,.16));display:grid;place-items:center;font-size:1.7rem}
.analysis-list{display:grid;gap:10px;margin-top:18px}.analysis-item{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:#0e131b}.status-ok{color:var(--green)}.status-run{color:var(--cyan)}.status-wait{color:#687385}
.instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.instrument-card{padding:22px;min-height:180px}.instrument-art{font-size:3rem;margin-bottom:18px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mode-card{padding:18px}.mode-card strong{font-size:1.1rem}.mode-card p{color:var(--muted);min-height:42px}
.play-shell{width:min(1400px,100%);margin:auto;padding:12px}.play-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.play-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.scoreboard{display:flex;gap:8px}.score-pill{padding:8px 11px;border-radius:12px;border:1px solid var(--line);background:#10151e;font-size:.78rem}.score-pill strong{color:#fff}
.stage{position:relative;border:1px solid #222a38;border-radius:26px;background:radial-gradient(circle at 50% 50%,#121827,#090c12 65%);overflow:hidden;min-height:510px;box-shadow:inset 0 0 80px rgba(0,0,0,.26)}.stage-grid{position:absolute;inset:82px 28px 90px;display:grid;grid-template-rows:repeat(6,1fr);gap:0}.string{position:relative;border-bottom:1px solid #4a5364}.string:first-child{border-top:1px solid #4a5364}.string-label{position:absolute;left:-20px;top:50%;transform:translateY(-50%);font-size:.75rem;color:#657085}.hit-line{position:absolute;left:28%;top:72px;bottom:82px;width:2px;background:linear-gradient(180deg,transparent,var(--cyan),#fff,var(--cyan),transparent);box-shadow:0 0 22px rgba(0,212,255,.55);z-index:6}.hit-line:after{content:"NOW";position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:900;letter-spacing:.2em;color:var(--cyan)}
.beat-ruler{position:absolute;left:28px;right:28px;top:40px;height:28px;color:#596577;font-size:.66rem}.beat{position:absolute;transform:translateX(-50%)}.note{position:absolute;height:32px;border-radius:10px;background:linear-gradient(90deg,#6650e8,#8c73ff);border:1px solid #9b8cff;display:flex;align-items:center;padding-left:10px;font-weight:900;box-shadow:0 8px 20px rgba(124,92,255,.15);overflow:hidden;z-index:5;transition:filter .15s}.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill,0%);background:rgba(255,255,255,.22);transition:width .08s linear}.note.good{background:linear-gradient(90deg,#168d58,#37e58d);border-color:#61f1a7}.note.bad{background:linear-gradient(90deg,#7b2632,#ff5f6d);border-color:#ff8992}.note.late{background:linear-gradient(90deg,#966815,#ffbd4a);border-color:#ffd47d}.note .fret{position:relative;z-index:2}.chord-block{position:absolute;min-width:92px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,#15212c,#111821);border:1px solid #2b4053;text-align:center;z-index:7}.chord-name{font-weight:900}.strum{font-size:1.35rem;color:var(--cyan);line-height:1}.event-feedback{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:.18s}.event-feedback.show{opacity:1}
.transport{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px}.play-main{width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--violet),var(--cyan));font-size:1.2rem;font-weight:900;color:#fff}.transport-btn{height:42px;padding:0 13px;border-radius:13px;border:1px solid var(--line);background:#10151e;color:#dce2ea}.timeline{padding:0 22px 18px}.timeline-bar{height:5px;background:#222a37;border-radius:999px;overflow:hidden}.timeline-fill{height:100%;width:28%;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.report-hero{text-align:center;padding:32px}.grade{font-size:4.8rem;font-weight:950;line-height:1;background:linear-gradient(135deg,#fff,var(--cyan));-webkit-background-clip:text;color:transparent}.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.report-box{padding:18px;text-align:center}.report-box strong{font-size:1.5rem;display:block}.weak-list{display:grid;gap:10px}.weak{padding:14px 16px;border-radius:15px;border:1px solid var(--line);background:#0e131b;display:flex;justify-content:space-between;align-items:center}
.install-banner{display:none;position:fixed;right:18px;bottom:96px;z-index:40;max-width:360px;padding:16px;border-radius:18px;background:#141a24;border:1px solid #2e3949;box-shadow:0 20px 60px rgba(0,0,0,.45)}.install-banner.show{display:block}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-20px);padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:#141a24;opacity:0;pointer-events:none;transition:.2s;z-index:60}.toast.show{opacity:1;transform:translateX(-50%)}
@media(max-width:820px){
  .continue,.stats{grid-column:span 12}.song-grid{grid-template-columns:1fr 1fr}.mode-grid{grid-template-columns:1fr}.report-grid{grid-template-columns:1fr 1fr}.stage{min-height:430px}.hit-line{left:24%}.stage-grid{inset:76px 18px 86px}.hero h1{font-size:2.6rem}.instrument-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .shell{padding:14px}.song-grid{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr 1fr 1fr}.topbar{padding-bottom:12px}.hero{padding-top:14px}.stage{border-radius:18px;min-height:410px}.play-shell{padding:6px}.play-top{padding:4px 4px}.scoreboard{display:none}.stage-grid{inset:70px 12px 86px}.hit-line{left:22%}.string-label{left:-8px}.note{height:28px;font-size:.78rem}.report-grid{grid-template-columns:1fr 1fr}.bottom-nav{bottom:8px}.install-banner{left:12px;right:12px;bottom:92px;max-width:none}
}

/* Player V1 - notation-first */
.game-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:8px;padding:10px;margin-bottom:10px;background:rgba(14,18,26,.96)}
.game-toolbar .transport-btn{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px}
.game-toolbar .transport-btn strong{font-size:1.05rem}.game-toolbar .transport-btn span{font-size:.66rem;color:var(--muted)}
.game-toolbar .transport-btn.active{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(0,212,255,.22)}
.game-toolbar .play-main{width:58px;height:58px;justify-self:center}
.stage{min-height:500px}
.stage-grid{inset:86px 28px 64px}
.hit-line{top:78px;bottom:56px}.hit-line>span{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:900;letter-spacing:.18em;color:var(--cyan)}
.hit-line:after{content:none}
.string{border-bottom-color:#424b5c}.string:first-child{border-top-color:#424b5c}
.string-no{position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:.58rem;color:#465064}
.note{height:30px;background:color-mix(in srgb,var(--note-color) 78%,#121722);border-color:color-mix(in srgb,var(--note-color) 88%,white 12%);box-shadow:0 6px 18px color-mix(in srgb,var(--note-color) 22%,transparent);color:#081018;padding-left:10px}
.note::before{background:rgba(255,255,255,.42)}
.note.hit-good{outline:2px solid var(--green);outline-offset:2px}.note.hit-bad{outline:2px solid var(--red);outline-offset:2px}.note.hit-late{outline:2px solid var(--amber);outline-offset:2px}
.chord-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:64px;padding:7px;background:linear-gradient(180deg,rgba(21,33,44,.96),rgba(14,21,29,.98));border:1px solid #395066;overflow:hidden}
.chord-block.hit-good{border-color:var(--green);box-shadow:0 0 0 2px rgba(55,229,141,.16)}.chord-block.hit-bad{border-color:var(--red)}.chord-block.hit-late{border-color:var(--amber)}
.chord-name{font-size:1rem;line-height:1}.strum-flow{font-size:1.55rem;color:var(--cyan);line-height:1}.chord-strings{font-size:.58rem;color:var(--muted);white-space:nowrap}
.game-progress{padding:12px 10px 2px}.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem;margin-top:5px}.play-legend{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}.play-legend .chip{font-size:.7rem}
@media(max-width:820px){.game-toolbar{grid-template-columns:repeat(6,1fr)}.game-toolbar .transport-btn{padding:3px;height:48px}.fullscreen-btn{display:flex}.stage{min-height:470px}.stage-grid{inset:82px 16px 58px}.hit-line{top:74px;bottom:52px}}
@media(max-width:560px){.play-shell{padding:8px}.play-top{margin-bottom:8px}.game-toolbar{gap:5px;padding:7px}.game-toolbar .transport-btn span{display:none}.game-toolbar .transport-btn{height:44px}.game-toolbar .play-main{width:50px;height:50px}.stage{min-height:455px}.stage-grid{inset:80px 12px 56px}.hit-line{top:72px;bottom:50px}.play-legend{padding:0 4px}.play-legend .chip{padding:6px 8px}}


/* Global bottom navigation clearance */
:root{
  --bottom-nav-height:64px;
  --bottom-nav-edge:12px;
  --bottom-nav-clearance:calc(var(--bottom-nav-height) + var(--bottom-nav-edge) + env(safe-area-inset-bottom, 0px));
  --content-bottom-clearance:calc(var(--bottom-nav-clearance) + 34px);
}
html{scroll-padding-bottom:var(--content-bottom-clearance)}
.shell{padding-bottom:var(--content-bottom-clearance)}
.screen{min-height:calc(100dvh - 110px)}
.bottom-cta{margin-top:22px;padding-bottom:8px;position:relative;z-index:1}
.bottom-nav{bottom:calc(var(--bottom-nav-edge) + env(safe-area-inset-bottom, 0px))}
.install-banner{bottom:calc(var(--bottom-nav-clearance) + 14px)}
@media(max-width:560px){
  :root{--bottom-nav-height:62px;--bottom-nav-edge:8px;--content-bottom-clearance:calc(var(--bottom-nav-clearance) + 42px)}
  .shell{padding-bottom:var(--content-bottom-clearance)}
  .screen{min-height:calc(100dvh - 96px)}
  .bottom-cta{padding-bottom:12px}
  .install-banner{bottom:calc(var(--bottom-nav-clearance) + 12px)}
}




/* Tablature geometry: six strings are actual lines, events sit on line centers */
.stage-grid .string{border:0!important;position:relative}
.stage-grid .string:first-child{border:0!important}
.stage-grid .string::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  transform:translateY(-.5px);
  background:#424b5c;
  z-index:1;
}
.stage-grid .string-label,.stage-grid .string-no{z-index:3;background:rgba(9,12,18,.88);padding:0 3px;border-radius:4px}
#eventsLayer{position:absolute;inset:0;pointer-events:none;z-index:4}

/* Real bottom-navigation reserve: physical spacer, not only padding */
.bottom-nav-spacer{
  height:calc(var(--bottom-nav-height) + var(--bottom-nav-edge) + env(safe-area-inset-bottom,0px) + 34px);
  width:100%;
  flex:0 0 auto;
  pointer-events:none;
}
@media(max-width:560px){
  .bottom-nav-spacer{height:calc(var(--bottom-nav-height) + var(--bottom-nav-edge) + env(safe-area-inset-bottom,0px) + 46px)}
}

/* Dedicated phone/tablet landscape gameplay */
@media (orientation:landscape) and (max-height:720px){
  .play-shell{
    width:100%;max-width:none;height:100dvh;margin:0;
    padding:6px 10px max(4px,env(safe-area-inset-bottom,0px));
    overflow:hidden;
  }
  .play-screen{
    height:100%;min-height:0!important;
    display:grid;
    grid-template-rows:44px 54px minmax(150px,1fr) 27px;
    gap:6px;
    overflow:hidden;
  }
  .play-top{height:44px;margin:0;padding:0 2px;align-items:center;min-width:0}
  .play-meta{gap:8px;min-width:0}.play-meta .icon-btn{width:38px;height:38px;border-radius:12px;flex:0 0 auto}
  .play-meta>div{min-width:0}.play-meta strong{font-size:.95rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.play-meta .meta{font-size:.68rem}
  .scoreboard{display:flex;gap:5px;flex:0 0 auto}.score-pill{padding:6px 9px;font-size:.68rem;border-radius:10px;white-space:nowrap}
  .game-toolbar{height:54px;margin:0;padding:5px 7px;gap:6px;border-radius:16px}
  .game-toolbar .transport-btn{height:42px;border-radius:11px;min-width:0}
  .game-toolbar .transport-btn strong{font-size:.92rem}.game-toolbar .transport-btn span{display:block;font-size:.56rem}
  .game-toolbar .play-main{width:46px;height:46px;font-size:1rem}
  .stage{min-height:150px!important;height:100%!important;margin:0;border-radius:18px}
  .stage-grid{inset:46px 18px 30px!important}
  .beat-ruler{top:14px;height:20px}
  .hit-line{top:40px!important;bottom:25px!important}
  .hit-line>span{bottom:-21px;font-size:.53rem}
  .event-feedback{top:4px;font-size:.64rem}
  .note{height:26px;font-size:.72rem;border-radius:8px}
  .chord-block{padding:4px;gap:2px;border-radius:10px}
  .chord-name{font-size:.82rem}.strum-flow{font-size:1.08rem}.chord-strings{font-size:.48rem}
  .game-progress{height:27px;padding:3px 8px 0;margin:0}
  .timeline-bar{height:4px}.progress-meta{font-size:.58rem;margin-top:3px}
  .play-legend{display:none!important}
}

/* Ocarina 12-hole Alto C player */
.instrument-card[data-instrument]{cursor:pointer;transition:.18s}.instrument-card[data-instrument]:hover{transform:translateY(-2px);border-color:#3a465b}.instrument-card.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,.14),0 16px 44px rgba(0,0,0,.22)}
.ocarina-stage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:12px;min-height:500px}
.ocarina-runway,.fingering-card{position:relative;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 55% 45%,#131a28,#090c12 68%);overflow:hidden}
.ocarina-runway{min-height:500px}.ocarina-hit-line{position:absolute;left:27%;top:38px;bottom:24px;width:2px;z-index:8;background:linear-gradient(180deg,transparent,var(--cyan),#fff,var(--cyan),transparent);box-shadow:0 0 20px rgba(0,212,255,.45)}.ocarina-hit-line span{position:absolute;bottom:4px;left:9px;font-size:.6rem;font-weight:900;letter-spacing:.18em;color:var(--cyan)}
.ocarina-lanes{position:absolute;inset:40px 14px 24px}.ocarina-lane{height:12.5%;position:relative}.ocarina-lane:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#263143}.ocarina-lane>span{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:.62rem;color:#647085;background:#0b0f16;padding:2px 5px;border-radius:6px;z-index:2}
#ocarinaEventsLayer{position:absolute;inset:0;z-index:6;pointer-events:none}.ocarina-note-bar{position:absolute;height:34px;border:1px solid #78cfff;border-radius:12px;background:linear-gradient(90deg,#238ac6,#53d5ff);color:#051019;font-weight:900;padding:7px 10px;overflow:hidden;box-shadow:0 7px 20px rgba(0,212,255,.16)}.ocarina-note-bar:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,0%);background:rgba(255,255,255,.38)}.ocarina-note-bar.hit-good{outline:2px solid var(--green);outline-offset:2px}.ocarina-note-bar.hit-late{outline:2px solid var(--amber);outline-offset:2px}.ocarina-feedback{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:10;font-size:.7rem;letter-spacing:.1em;font-weight:900;color:#e8edf5}.ocarina-feedback.show{color:#fff}
.fingering-card{padding:18px;display:flex;flex-direction:column;justify-content:space-between}.fingering-head{display:flex;justify-content:space-between;align-items:end;gap:10px}.fingering-head strong{font-size:2rem}.ocarina-body{position:relative;width:min(100%,330px);aspect-ratio:1.65/1;margin:12px auto 6px;border-radius:48% 52% 50% 46% / 50% 48% 52% 50%;background:linear-gradient(145deg,#30394a,#151b27 60%,#0d1118);border:1px solid #455067;box-shadow:inset 0 0 35px rgba(255,255,255,.04),0 18px 40px rgba(0,0,0,.25)}.ocarina-body:before{content:"";position:absolute;left:-17%;top:34%;width:28%;height:28%;border-radius:18px 0 0 18px;background:linear-gradient(90deg,#232c3a,#171d28);border:1px solid #3f4b60;border-right:0}.ocarina-mouth{position:absolute;left:-18%;top:43%;width:8%;height:8%;border-radius:999px;background:#06080c;box-shadow:inset 0 0 0 2px #333d4d}.ocarina-hole{position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:2px solid #7b8799;background:#d9e0e8;box-shadow:0 0 0 3px rgba(0,0,0,.18)}.ocarina-hole.sub{width:11px;height:11px}.ocarina-hole.thumb{width:20px;height:20px;border-style:dashed}.ocarina-hole.covered{background:#080b10;border-color:#151a23;box-shadow:0 0 0 2px #677388,0 0 16px rgba(0,212,255,.12)}
.breath-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:.68rem;color:var(--muted)}.breath-meter>div{height:7px;background:#222a38;border-radius:999px;overflow:hidden}.breath-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:inherit}.breath-meter strong{color:var(--green)}.ocarina-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.ocarina-metrics>span{padding:10px;border:1px solid var(--line);border-radius:13px;background:#0d1118}.ocarina-metrics small{display:block;color:var(--muted);font-size:.6rem}.ocarina-metrics strong{font-size:1rem}.fingering-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:.65rem;color:var(--muted)}.hole-demo{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #7b8799;background:#e2e7ed;margin-right:3px;vertical-align:-1px}.hole-demo.covered{background:#090c11}
@media(max-width:820px){.ocarina-stage{grid-template-columns:1fr}.ocarina-runway{min-height:390px}.fingering-card{min-height:360px}.ocarina-body{max-width:300px}}
@media(max-width:560px){.ocarina-runway{min-height:370px}.fingering-card{padding:14px;min-height:330px}.ocarina-body{max-width:280px}.ocarina-hole{width:16px;height:16px}.ocarina-hole.thumb{width:18px;height:18px}}
@media(orientation:landscape) and (max-height:720px){.ocarina-stage{grid-template-columns:minmax(0,1.7fr) minmax(250px,.7fr);min-height:0;height:100%;gap:7px}.ocarina-runway{min-height:0;height:100%}.fingering-card{min-height:0;height:100%;padding:9px}.ocarina-body{width:min(92%,230px);margin:2px auto}.fingering-head strong{font-size:1.35rem}.breath-meter,.fingering-legend{font-size:.55rem}.ocarina-metrics{margin-top:4px;gap:4px}.ocarina-metrics>span{padding:5px}.ocarina-lanes{inset:26px 10px 14px}.ocarina-hit-line{top:24px;bottom:13px}.ocarina-feedback{top:4px;font-size:.58rem}}

/* Explicit attack visualization: strums and breath re-attacks */
.strum-sequence{position:absolute;inset:28px 5px 20px;pointer-events:none}
.strum-hit{position:absolute;top:50%;transform:translate(-50%,-50%);font-style:normal;font-weight:900;color:var(--cyan);font-size:1.05rem;line-height:1}
.strum-hit:after{content:"";position:absolute;left:50%;top:115%;height:12px;width:1px;background:rgba(0,212,255,.28)}
.chord-block{position:absolute}
.chord-block .chord-name{position:absolute;top:5px;left:50%;transform:translateX(-50%);z-index:2}
.chord-block .chord-strings{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);z-index:2}
.breath-attacks{position:absolute;inset:0;pointer-events:none}
.breath-attacks i{position:absolute;top:3px;bottom:3px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.82);box-shadow:0 0 9px rgba(255,255,255,.25);border-radius:999px}
.breath-attacks i:before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(0,212,255,.55)}
.ocarina-note-label{position:relative;z-index:2}
@media(orientation:landscape) and (max-height:720px){.strum-hit{font-size:.82rem}.strum-sequence{inset:20px 3px 16px}}

/* V13: each strum/breath is a standalone gameplay event */
.chord-attack{min-width:54px!important;padding:6px 4px!important;justify-content:center!important;overflow:visible!important}
.chord-attack .chord-name{position:absolute;top:7px;left:50%;transform:translateX(-50%);font-size:.95rem;line-height:1;white-space:nowrap}
.strum-big{font-size:2.35rem;line-height:1;font-weight:950;color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.28);margin-top:12px}
.breath-attack-card{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px!important;min-width:48px}
.breath-cue{font-size:1.65rem;line-height:1;font-weight:900;color:#ecfbff;text-shadow:0 0 12px rgba(0,212,255,.45)}
@media(orientation:landscape) and (max-height:720px){
  .chord-attack .chord-name{top:4px;font-size:.72rem}
  .strum-big{font-size:1.7rem;margin-top:8px}
  .breath-cue{font-size:1.25rem}
}

/* V14: density-aware attack layout, no visual overlap */
.chord-attack{
  min-width:0!important;
  transform:translateX(-50%);
  padding:5px 2px!important;
  box-sizing:border-box;
}
.chord-attack .chord-name{top:6px;font-size:.82rem}
.strum-big{font-size:2.05rem;margin-top:11px}
.breath-attack-card{
  min-width:0!important;
  transform:translateX(-50%);
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding:4px 3px!important;
  box-sizing:border-box;
}
.breath-attack-card .ocarina-note-label{font-size:.72rem;line-height:1}
.breath-cue{font-size:1.15rem;line-height:.9}
@media(max-width:560px){
  .chord-attack .chord-name{font-size:.76rem}
  .strum-big{font-size:1.9rem}
  .breath-attack-card .ocarina-note-label{font-size:.68rem}
}
@media(orientation:landscape) and (max-height:720px){
  .chord-attack .chord-name{top:3px;font-size:.68rem}
  .strum-big{font-size:1.45rem;margin-top:7px}
  .breath-attack-card .ocarina-note-label{font-size:.6rem}
  .breath-cue{font-size:.9rem}
}

/* V15: sustained chord / sustained breath semantics */
.sustained-event{
  transform:none!important;
  overflow:hidden!important;
  justify-content:flex-start!important;
  box-sizing:border-box;
}
.sustained-event::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--sustain-fill,0%);
  background:linear-gradient(90deg,rgba(55,229,141,.20),rgba(0,212,255,.10));
  border-right:1px solid rgba(255,255,255,.20);
  z-index:0;
}
.sustain-head{
  position:absolute;
  left:8px;top:7px;
  display:flex;
  align-items:center;
  gap:7px;
  z-index:2;
}
.sustain-head b{font-size:.9rem;line-height:1}
.sustain-head i{font-style:normal;font-size:1.75rem;line-height:.9;color:var(--cyan);font-weight:950}
.sustain-label{
  position:absolute;
  right:8px;bottom:6px;
  z-index:2;
  font-size:.52rem;
  letter-spacing:.12em;
  font-weight:900;
  color:#8e9cb0;
  white-space:nowrap;
}
.breath-sustain{height:36px!important;flex-direction:row!important}
.breath-sustain .sustain-head{top:50%;transform:translateY(-50%)}
.breath-sustain .sustain-head b{font-size:.78rem;color:#06111a}
.breath-sustain .sustain-head i{font-size:1.35rem;color:#082334}
.breath-sustain .sustain-label{bottom:50%;transform:translateY(50%);color:#17364a}
@media(max-width:560px){
  .sustain-head{left:6px;top:5px;gap:5px}
  .sustain-head b{font-size:.78rem}
  .sustain-head i{font-size:1.45rem}
  .sustain-label{right:6px;bottom:5px;font-size:.46rem}
}
@media(orientation:landscape) and (max-height:720px){
  .sustain-head{left:5px;top:3px;gap:4px}
  .sustain-head b{font-size:.66rem}
  .sustain-head i{font-size:1.15rem}
  .sustain-label{right:5px;bottom:3px;font-size:.4rem}
}

/* V16: instrument icons, tuner, learn prerequisites, challenge */
.instrument-art{height:72px;display:flex;align-items:center;margin-bottom:14px}.instrument-svg{width:72px;height:72px;fill:none;stroke:#d9e6f7;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 7px 18px rgba(0,212,255,.08))}.instrument-card.selected .instrument-svg{stroke:var(--cyan)}.ocarina-svg circle{fill:#0a0d13;stroke-width:3}.tuner-inline{margin-top:14px}
.compact-hero{padding-bottom:10px}.tuner-card{max-width:840px;margin:0 auto}.tuner-note{text-align:center;display:flex;flex-direction:column;gap:4px}.tuner-note span{font-size:4.2rem;font-weight:950}.tuner-note strong{color:var(--muted)}.tuner-gauge{margin:28px 0}.tuner-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem;padding:0 4px}.tuner-track{height:66px;position:relative;border-bottom:2px solid #30394a}.tuner-track:before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--red),var(--amber),var(--green),var(--amber),var(--red));opacity:.65}.tuner-center{position:absolute;left:50%;bottom:-10px;top:0;width:2px;background:var(--green)}#tunerNeedle{position:absolute;left:50%;bottom:-6px;width:4px;height:56px;border-radius:4px;background:#fff;transform:translateX(-50%);box-shadow:0 0 18px rgba(255,255,255,.45);transition:left .1s linear}.tuner-state{text-align:center;font-weight:900;color:var(--amber);min-height:24px}.tuner-state.good{color:var(--green)}.tuner-string-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}.tuner-string{background:#0d121b;border:1px solid var(--line);color:#e8edf5;border-radius:14px;padding:10px 14px;min-width:72px}.tuner-string small{display:block;color:var(--muted);font-size:.58rem}.tuner-string.active{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,.12)}
.learn-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.learn-visual{min-height:320px;display:flex;align-items:center;justify-content:center}.shape-grid{display:flex;gap:8px;align-items:end;justify-content:center;flex-wrap:wrap}.shape-grid>div{width:58px;height:108px;border:1px solid #334056;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px;background:#0d121b}.shape-grid span{color:var(--muted);font-size:.7rem}.shape-grid strong{font-size:2rem}.single-fingering{width:170px;height:170px;border-radius:50%;border:2px solid var(--cyan);display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#172536,#0b1018)}.single-fingering strong{font-size:4rem}.single-fingering span{color:var(--muted)}.learn-progress h2{font-size:2rem}.learn-dots{display:flex;gap:10px;margin:24px 0}.learn-dots i{width:22px;height:22px;border-radius:50%;border:2px solid #39465a}.learn-dots i.done{background:var(--green);border-color:var(--green);box-shadow:0 0 16px rgba(55,229,141,.28)}.learn-ocarina{width:min(100%,350px)}.learn-complete{max-width:760px;margin:40px auto;text-align:center}
.practice-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.practice-feature{min-height:230px}.practice-feature h2{font-size:2rem}.practice-feature p{color:var(--muted);min-height:58px}.record-line{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);margin:10px 0}.record-line strong{font-size:1.5rem}.muted-feature{opacity:.64}.challenge-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.challenge-head>div:nth-child(2){flex:1}.challenge-head h1{margin:3px 0;font-size:3rem}.challenge-clock{text-align:right}.challenge-clock strong{display:block;font-size:2.4rem;font-variant-numeric:tabular-nums}.challenge-clock span{color:var(--muted);font-size:.65rem}.challenge-card{padding:18px;max-width:850px;margin:0 auto}.challenge-visual{min-height:320px;display:flex;align-items:center;justify-content:center}.challenge-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.challenge-stats span{padding:12px;border:1px solid var(--line);border-radius:14px;background:#0c1119}.challenge-stats small{display:block;color:var(--muted)}.challenge-stats strong{font-size:1.6rem}.challenge-rules{display:flex;gap:10px;margin:12px 0;color:var(--muted);font-size:.72rem}.danger{border-color:rgba(255,95,109,.4)!important}.challenge-buttons button{min-height:52px}.challenge-instruments .instrument-card{min-height:165px}
@media(max-width:820px){.learn-grid,.practice-actions{grid-template-columns:1fr}.challenge-visual{min-height:260px}}
@media(max-width:560px){.instrument-art{height:58px}.instrument-svg{width:58px;height:58px}.tuner-note span{font-size:3.4rem}.shape-grid>div{width:48px;height:90px}.shape-grid strong{font-size:1.55rem}.learn-visual{min-height:250px}.challenge-head h1{font-size:2.2rem}.challenge-clock strong{font-size:1.7rem}.challenge-visual{min-height:240px}.challenge-rules{flex-wrap:wrap}}

/* V17: illustrated instrument language + tuner instrument picker */
.instrument-art{height:92px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.instrument-art.large{height:132px;margin:0}
.instrument-svg.instrument-illustrated{width:104px;height:104px;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.32));transition:transform .2s ease,filter .2s ease}
.instrument-card:hover .instrument-svg,.tuner-instrument-choice:hover .instrument-svg{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 16px 24px rgba(0,212,255,.14))}
.wood-dark{fill:#74472e;stroke:#d7aa73;stroke-width:2}.wood-light{fill:#c9874c;stroke:#f0bd7a;stroke-width:1.5}.uku-dark{fill:#6b3d2b;stroke:#d49b68;stroke-width:2}.uku-light{fill:#d19558;stroke:#f3c37e;stroke-width:1.5}
.sound-hole{fill:#17110f;stroke:#39251c;stroke-width:2}.sound-ring{fill:none;stroke:#f4d29b;stroke-width:2}.fretboard{fill:#2b211d;stroke:#a07855;stroke-width:1.3}.headstock{fill:#6c402c;stroke:#d8aa77;stroke-width:1.5}.bridge{fill:#2c211c}.strings{fill:none;stroke:#f2e6d5;stroke-width:1;opacity:.9}.frets{fill:none;stroke:#b69c81;stroke-width:1}.peg{fill:#d8dbe1;stroke:#6f7480;stroke-width:1}
.ocarina-shadow{fill:#233449;stroke:#658cb2;stroke-width:2}.ocarina-body-fill{fill:#4f82a9;stroke:#91c4e8;stroke-width:2}.ocarina-mouthpiece{fill:#416f94;stroke:#8ab9dc;stroke-width:2}.ocarina-hole-fill{fill:#101b27;stroke:#9ed4ef;stroke-width:1.4}.ocarina-hole-small{fill:#142331;stroke:#82bbdd;stroke-width:1.2}.ocarina-highlight{fill:none;stroke:#c7edff;stroke-width:4;stroke-linecap:round;opacity:.55}
.instrument-card.selected .instrument-svg{filter:drop-shadow(0 15px 22px rgba(0,212,255,.28))}
.tuner-picker-hero{max-width:880px;margin-bottom:18px}.tuner-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:0 auto 18px}.tuner-instrument-choice{position:relative;display:grid;grid-template-columns:150px 1fr 36px;align-items:center;gap:18px;padding:24px;cursor:pointer;min-height:190px;transition:.18s}.tuner-instrument-choice:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 18px 45px rgba(0,0,0,.25)}.tuner-instrument-choice h2{font-size:2rem;margin:5px 0}.tuner-instrument-choice p{color:var(--muted);line-height:1.5}.choice-arrow{font-size:2rem;color:var(--cyan);font-weight:900}.text-action{border:0;background:none;color:var(--cyan);font-weight:800;padding:8px 0;cursor:pointer}.tuner-instrument-mini{display:flex;align-items:center;gap:12px;margin-bottom:-18px}.tuner-instrument-mini .instrument-art{height:62px;width:62px;margin:0}.tuner-instrument-mini .instrument-svg{width:62px;height:62px}.tuner-instrument-mini small{display:block;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.tuner-instrument-mini strong{display:block;font-size:1rem;margin-top:2px}
@media(max-width:760px){.tuner-picker-grid{grid-template-columns:1fr}.tuner-instrument-choice{grid-template-columns:108px 1fr 26px;min-height:150px;padding:18px}.instrument-art.large{height:100px}.instrument-art.large .instrument-svg{width:94px;height:94px}.tuner-instrument-choice h2{font-size:1.55rem}}
@media(max-width:480px){.tuner-instrument-choice{grid-template-columns:82px 1fr 20px;gap:10px}.instrument-art.large{height:82px}.instrument-art.large .instrument-svg{width:78px;height:78px}.tuner-instrument-choice p{font-size:.72rem}.instrument-art{height:78px}.instrument-svg.instrument-illustrated{width:86px;height:86px}}

/* V18: arrangement difficulty + explicit playback rates */
.arrangement-card{margin:18px 0}.arrangement-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.arrangement-head h2{margin:5px 0 4px}.difficulty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.difficulty-option{min-height:108px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:16px;background:#0d121b;color:var(--text);cursor:pointer;transition:.16s}.difficulty-option strong{display:block;font-size:.95rem}.difficulty-option span{display:block;color:var(--muted);font-size:.7rem;line-height:1.4;margin-top:7px}.difficulty-option:hover{border-color:#45536b;transform:translateY(-1px)}.difficulty-option.active{border-color:var(--cyan);background:linear-gradient(180deg,rgba(0,212,255,.10),#0d121b);box-shadow:0 0 0 2px rgba(0,212,255,.10)}
.speed-control{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 11px;border:1px solid var(--line);border-radius:14px;background:#10151e}.speed-control>span{font-size:.66rem;color:var(--muted);white-space:nowrap}.speed-control>span strong{display:block;color:#fff;font-size:.86rem}.speed-options{display:flex;gap:4px}.speed-option{height:31px;min-width:43px;padding:0 7px;border:1px solid transparent;border-radius:9px;background:#171e29;color:#aeb8c7;font-size:.66rem;font-weight:850;cursor:pointer}.speed-option.active{background:rgba(0,212,255,.14);border-color:var(--cyan);color:#fff}.speed-option:hover{color:#fff}
@media(max-width:760px){.difficulty-grid{grid-template-columns:1fr 1fr}.arrangement-head{flex-direction:column;gap:8px}.speed-control{gap:6px;padding:4px 5px}.speed-control>span{display:none}.speed-option{min-width:38px;padding:0 5px}}
@media(max-width:480px){.difficulty-grid{grid-template-columns:1fr}.difficulty-option{min-height:82px}.speed-options{gap:2px}.speed-option{min-width:34px;font-size:.6rem}}

/* V20: full-span strum gesture, distinct instruments, profile/settings */
.guitar-body-back{fill:#6b3d27;stroke:#d29b68;stroke-width:2}.guitar-body-front{fill:#c98243;stroke:#f1bd79;stroke-width:1.6}.ukulele-body-back{fill:#7b5430;stroke:#d4b274;stroke-width:2}.ukulele-body-front{fill:#d6a45e;stroke:#f0d094;stroke-width:1.6}.ukulele-accent{fill:none;stroke:#6c4228;stroke-width:3;stroke-linecap:round;opacity:.7}.guitar-icon{transform:scale(1.05)}.ukulele-icon{transform:scale(.94)}.instrument-card:hover .ukulele-icon{transform:translateY(-3px) scale(.975)}.instrument-card:hover .guitar-icon{transform:translateY(-3px) scale(1.08)}
.chord-attack:not(.sustained-event){overflow:hidden!important}.chord-attack:not(.sustained-event) .chord-name{top:3px;left:4px;transform:none;padding:2px 4px;border-radius:5px;background:rgba(8,12,18,.74);z-index:4;font-size:.68rem}.strum-full{position:absolute;inset:3px 0 3px 0;z-index:2;pointer-events:none}.strum-full:before{content:"";position:absolute;left:50%;top:7px;bottom:7px;width:3px;border-radius:999px;background:linear-gradient(180deg,rgba(0,212,255,.4),var(--cyan),#fff,var(--cyan),rgba(0,212,255,.4));transform:translateX(-50%);box-shadow:0 0 10px rgba(0,212,255,.42)}.strum-full:after{content:"";position:absolute;left:50%;width:11px;height:11px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan)}.strum-full.down:after{bottom:5px;transform:translateX(-50%) rotate(45deg)}.strum-full.up:after{top:5px;transform:translateX(-50%) rotate(225deg)}
.profile-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-nav-icon{display:grid;place-items:center}.nav-profile{display:flex;align-items:center;justify-content:center;gap:6px}.nav-profile .profile-icon{width:16px;height:16px}.profile-hero{display:flex;align-items:center;gap:18px;margin-bottom:16px}.profile-hero h1{margin:4px 0}.profile-avatar{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(0,212,255,.18));border:1px solid var(--line)}.profile-avatar .profile-icon{width:38px;height:38px}.profile-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:14px}.profile-grid>section:last-child{grid-column:1/-1}.settings-card h2{margin:6px 0}.setting-row{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#0d121b;display:flex;justify-content:space-between;align-items:center;gap:20px}.setting-row>div:first-child span{display:block;color:var(--cyan);font-weight:800;margin-top:7px}.segmented-control{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#090d13}.notation-option{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:10px;padding:9px 12px;cursor:pointer;text-align:left}.notation-option strong,.notation-option small{display:block}.notation-option small{font-size:.62rem;margin-top:3px}.notation-option.active{border-color:var(--cyan);background:rgba(0,212,255,.11);color:#fff}.settings-note{font-size:.68rem;color:var(--muted);margin-top:12px}.muted-settings{opacity:.75}
@media(max-width:760px){.profile-grid{grid-template-columns:1fr}.profile-grid>section:last-child{grid-column:auto}.setting-row{align-items:stretch;flex-direction:column}.segmented-control{width:100%}.nav-profile{flex-direction:column;gap:2px}.nav-profile .profile-icon{width:15px;height:15px}}

/* V21: ocarina sustain readability */
.breath-sustain{
  height:42px!important;
  display:grid!important;
  grid-template-columns:auto 20px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px 10px!important;
  overflow:hidden!important;
}
.breath-sustain .ocarina-sustain-note{
  position:relative;
  z-index:3;
  font-size:.95rem;
  line-height:1;
  font-weight:950;
  color:#06111a;
  white-space:nowrap;
}
.breath-sustain .ocarina-sustain-cue{
  position:relative;
  z-index:3;
  font-size:1.05rem;
  line-height:1;
  font-weight:900;
  color:#0a2b40;
  text-align:center;
}
.breath-sustain .ocarina-sustain-label{
  position:relative;
  z-index:3;
  justify-self:end;
  max-width:100%;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(6,17,26,.12);
  color:#16384e;
  font-size:.48rem;
  line-height:1;
  letter-spacing:.08em;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:560px){
  .breath-sustain{grid-template-columns:auto 16px minmax(0,1fr)!important;gap:4px!important;padding:4px 7px!important}
  .breath-sustain .ocarina-sustain-note{font-size:.88rem}
  .breath-sustain .ocarina-sustain-cue{font-size:.92rem}
  .breath-sustain .ocarina-sustain-label{font-size:.42rem;padding:3px 5px;letter-spacing:.06em}
}
@media(max-width:390px){
  .breath-sustain .ocarina-sustain-label{font-size:0;width:26px;height:18px;padding:0;display:grid;place-items:center}
  .breath-sustain .ocarina-sustain-label:after{content:"TIENI";font-size:.38rem;letter-spacing:.04em}
}

/* V22: guided song setup wizard + scrollable non-player landscape */
.song-wizard-screen{width:min(900px,100%);margin:0 auto;padding:8px 0 18px}.wizard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0 14px}.wizard-heading h2{margin:4px 0 0;font-size:1.2rem}.wizard-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}.wizard-step{border:1px solid var(--line);background:#0c1118;color:var(--muted);border-radius:14px;padding:9px 8px;display:flex;align-items:center;gap:8px;text-align:left}.wizard-step span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#171e29;font-size:.7rem;font-weight:900;flex:0 0 auto}.wizard-step b{font-size:.7rem}.wizard-step.active{border-color:var(--cyan);color:#fff;background:rgba(0,212,255,.08)}.wizard-step.active span,.wizard-step.done span{background:var(--cyan);color:#041016}.wizard-step.done{color:#d7e5f4}.wizard-step:disabled{opacity:.45}
.wizard-card{overflow:hidden}.wizard-song-cover{padding:28px;background:radial-gradient(circle at 90% 15%,rgba(124,92,255,.22),transparent 38%),linear-gradient(135deg,#121827,#0c1118)}.wizard-song-cover h1{font-size:clamp(1.8rem,6vw,3.2rem);margin:7px 0}.wizard-song-cover p{color:var(--muted);margin:0}.wizard-analysis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}.wizard-analysis span{background:#0e131b;padding:14px}.wizard-analysis small,.wizard-summary small{display:block;color:var(--muted);font-size:.56rem;text-transform:uppercase;letter-spacing:.08em}.wizard-analysis strong{display:block;margin-top:3px}.wizard-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 18px}.wizard-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.wizard-summary span{border:1px solid var(--line);background:#0d121a;border-radius:12px;padding:8px 11px}.wizard-summary strong{font-size:.72rem}.wizard-card h1{font-size:1.55rem;margin:5px 0}.wizard-instruments{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.wizard-instrument{border:1px solid var(--line);background:#0d121a;color:#fff;border-radius:17px;padding:12px;cursor:pointer;text-align:center}.wizard-instrument .instrument-art{height:74px;margin-bottom:6px}.wizard-instrument .instrument-svg{width:78px;height:78px}.wizard-instrument strong,.wizard-instrument span{display:block}.wizard-instrument span{font-size:.62rem;color:var(--muted);margin-top:4px}.wizard-instrument.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,212,255,.10)}.wizard-difficulties{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.wizard-difficulty{border:1px solid var(--line);background:#0d121a;color:#fff;border-radius:14px;padding:13px;text-align:left;cursor:pointer}.wizard-difficulty strong,.wizard-difficulty span{display:block}.wizard-difficulty span{color:var(--muted);font-size:.67rem;margin-top:5px;line-height:1.35}.wizard-difficulty.selected{border-color:var(--cyan);background:rgba(0,212,255,.08)}.wizard-modes{display:grid;gap:8px;margin-top:16px}.wizard-mode{width:100%;display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:10px;border:1px solid var(--line);border-radius:15px;background:#0d121a;color:#fff;padding:12px;text-align:left;cursor:pointer}.wizard-mode>span{color:var(--cyan);font-size:.66rem;font-weight:900}.wizard-mode strong,.wizard-mode small{display:block}.wizard-mode small{color:var(--muted);font-size:.68rem;margin-top:3px}.wizard-mode>b{font-size:1.1rem;text-align:right}.wizard-mode.primary-mode{border-color:#5b63ff;background:linear-gradient(90deg,rgba(124,92,255,.15),rgba(0,212,255,.06))}
@media(max-width:620px){.wizard-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.wizard-step{justify-content:center;padding:8px 4px}.wizard-step b{display:none}.wizard-analysis{grid-template-columns:1fr 1fr}.wizard-instruments{grid-template-columns:1fr 1fr}.wizard-instrument:last-child{grid-column:1/-1}.wizard-difficulties{grid-template-columns:1fr}.wizard-actions{padding:12px;flex-wrap:wrap}.wizard-actions .primary{margin-left:auto}}
@media(orientation:landscape) and (max-height:720px){
  html,body,#app{height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
  .shell:not(.play-shell){min-height:100dvh;height:auto!important;overflow:visible!important;padding-bottom:var(--content-bottom-clearance)}
  .screen:not(.play-screen){height:auto!important;min-height:0!important;overflow:visible!important}
  .song-wizard-screen{width:min(980px,96vw);padding-top:0}.wizard-heading{margin:2px 0 8px}.wizard-steps{margin-bottom:8px}.wizard-card h1{font-size:1.2rem}.wizard-song-cover{padding:16px 20px}.wizard-song-cover h1{font-size:1.65rem}.wizard-analysis span{padding:9px 12px}.wizard-instruments{grid-template-columns:repeat(3,1fr);margin-top:8px}.wizard-instrument{padding:8px}.wizard-instrument .instrument-art{height:52px}.wizard-instrument .instrument-svg{width:58px;height:58px}.wizard-difficulties{grid-template-columns:repeat(2,1fr);margin-top:8px}.wizard-difficulty{padding:9px}.wizard-modes{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.wizard-mode{grid-template-columns:28px 1fr 20px;padding:9px}.wizard-actions{padding:9px 12px}.bottom-nav{position:fixed}
}

/* V23: accounts, plans and admin console mockup */
.profile-identity{flex:1}.account-plan-card{grid-column:1/-1}.account-plan-head,.admin-section-head,.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.plan-badge{display:inline-flex;padding:6px 9px;border-radius:999px;border:1px solid var(--line);font-size:.62rem;font-weight:950;letter-spacing:.08em}.plan-badge.free{color:#b9c6d7}.plan-badge.pro{color:#7cecff;border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.08)}.plan-badge.admin{color:#d4c2ff;border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.1)}.plan-limits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.plan-limits span,.admin-kpis span{padding:11px;border:1px solid var(--line);border-radius:13px;background:#0d121a}.plan-limits small,.admin-kpis small{display:block;color:var(--muted);font-size:.58rem;text-transform:uppercase}.plan-limits strong,.admin-kpis strong{display:block;margin-top:4px}.account-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}.auth-shell{min-height:calc(100dvh - 180px);display:grid;place-items:center;padding:18px}.auth-card{width:min(520px,100%);padding:26px}.auth-brand{margin-bottom:28px}.auth-card h1{margin:5px 0 7px}.auth-card label,.admin-form-grid label{display:grid;gap:6px;color:var(--muted);font-size:.68rem;margin-top:12px}.admin-input{width:100%;border:1px solid var(--line);background:#0b1017;color:#fff;border-radius:11px;padding:10px 11px;outline:none}.admin-input:focus{border-color:var(--cyan)}.auth-submit{width:100%;margin-top:16px}.auth-divider{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.62rem;margin:18px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.demo-account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.upgrade-shell{max-width:720px;margin:24px auto}.upgrade-price{display:flex;align-items:baseline;gap:8px;margin:20px 0}.upgrade-price strong{font-size:2.2rem}.upgrade-price span{color:var(--muted)}.admin-head{margin:10px 0 16px}.admin-head h1{margin:4px 0}.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.admin-section{margin-bottom:12px}.admin-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.admin-plan-editor{border:1px solid var(--line);border-radius:16px;padding:14px;background:#0d121a}.admin-plan-title{display:flex;justify-content:space-between;align-items:center}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.admin-form-grid label small{font-size:.52rem}.admin-check{display:flex!important;grid-auto-flow:column;justify-content:start;align-items:center;gap:8px!important;margin-top:12px!important}.admin-user-list{display:grid;gap:7px;margin-top:14px}.admin-user-row{display:grid;grid-template-columns:minmax(160px,1.3fr) 80px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:10px;background:#0d121a}.admin-user-row small{display:block;color:var(--muted);margin-top:3px}.admin-user-actions{display:flex;gap:5px}.tiny{padding:7px 9px;font-size:.62rem}.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gateway-state{padding:12px;border:1px solid var(--line);border-radius:13px;background:#0d121a;margin:12px 0}.gateway-state p{font-size:.72rem;color:var(--muted);line-height:1.5}.text-action{cursor:pointer}
@media(max-width:760px){.plan-limits,.admin-kpis{grid-template-columns:1fr 1fr}.admin-plan-grid,.admin-two-col{grid-template-columns:1fr}.admin-user-row{grid-template-columns:1fr auto}.admin-user-row>.meta{grid-column:1/-1}.admin-user-actions{grid-column:1/-1}.demo-account-grid{grid-template-columns:1fr}.account-actions,.admin-head,.admin-section-head{align-items:stretch;flex-direction:column}.profile-hero{flex-wrap:wrap}.profile-identity{min-width:180px}}
@media(max-width:480px){.admin-form-grid{grid-template-columns:1fr}.plan-limits{grid-template-columns:1fr 1fr}.admin-kpis{grid-template-columns:1fr 1fr}}

/* V24: scalable admin console + registration/email verification */
.admin-console{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;max-width:1280px;margin:0 auto}.admin-sidebar{position:sticky;top:14px;min-height:calc(100dvh - 120px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#111722,#0b1018);padding:13px;display:flex;flex-direction:column;box-shadow:0 20px 48px rgba(0,0,0,.2)}.admin-sidebar-brand{display:flex;align-items:center;gap:10px;padding:7px 6px 16px;border-bottom:1px solid var(--line)}.admin-sidebar-brand .brand-mark{width:34px;height:34px;font-size:.9rem}.admin-sidebar-brand b,.admin-sidebar-brand small{display:block}.admin-sidebar-brand small{color:var(--muted);font-size:.58rem;margin-top:2px}.admin-sidebar nav{display:grid;gap:4px;padding:12px 0;flex:1}.admin-nav-item{border:0;background:transparent;color:var(--muted);border-radius:12px;padding:10px 11px;display:flex;align-items:center;gap:10px;text-align:left;font-weight:800;cursor:pointer}.admin-nav-item i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#151d29;color:#8f9db0}.admin-nav-item.active{background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(0,212,255,.08));color:#fff}.admin-nav-item.active i{color:var(--cyan);background:rgba(0,212,255,.12)}.admin-nav-exit{border:1px solid var(--line);background:#0c1119;color:var(--muted);border-radius:11px;padding:9px;cursor:pointer}.admin-main{min-width:0}.admin-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:8px 0 18px}.admin-page-head h1{margin:4px 0;font-size:2rem}.admin-kpis span em{display:block;color:var(--muted);font-style:normal;font-size:.56rem;margin-top:3px}.admin-dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}.admin-user-mini{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.admin-user-mini:last-child{border-bottom:0}.admin-user-mini small{display:block;color:var(--muted);margin-top:3px}.quick-actions{display:grid;gap:8px;margin-top:14px}.admin-users-panel{padding:0;overflow:hidden}.user-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 170px 190px;gap:8px;padding:14px;border-bottom:1px solid var(--line)}.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:0 10px;background:#0b1017;color:var(--muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:10px 0}.admin-input.compact{margin:0}.user-table-head,.admin-user-row-full{display:grid;grid-template-columns:minmax(190px,1.4fr) 110px 90px 120px minmax(150px,auto);gap:10px;align-items:center}.user-table-head{padding:9px 14px;color:var(--muted);font-size:.56rem;text-transform:uppercase;letter-spacing:.05em;background:#0b1017;border-bottom:1px solid var(--line)}.admin-user-row-full{padding:12px 14px;border-bottom:1px solid var(--line)}.admin-user-row-full:last-child{border-bottom:0}.admin-user-row-full small{display:block;color:var(--muted);margin-top:3px}.user-status{display:inline-flex;width:max-content;padding:5px 7px;border-radius:999px;font-size:.56rem;font-weight:900}.user-status.active{color:#69e8af;background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.25)}.user-status.pending{color:#ffd477;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.24)}.user-status.suspended{color:#ff8f9d;background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.25)}.row-actions{display:flex;gap:5px;justify-content:flex-end}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:var(--muted);font-size:.65rem}.payment-checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.payment-checklist span{padding:10px;border:1px solid var(--line);border-radius:11px;background:#0d121a;color:var(--muted)}.email-template-list{display:grid;gap:8px;margin-top:12px}.email-template{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#0d121a;color:#fff;border-radius:13px;padding:11px;cursor:pointer}.email-template span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#151e2b;color:var(--cyan)}.email-template small{display:block;color:var(--muted);margin-top:3px}.email-template em{font-style:normal;font-size:.52rem;color:var(--muted)}.email-template.active{border-color:rgba(0,212,255,.38)}
.auth-links{display:flex;justify-content:space-between;align-items:center;gap:10px}.auth-back{border:0;background:none;color:var(--muted);padding:0 0 18px;cursor:pointer}.auth-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.auth-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}.verify-card{width:min(590px,100%);padding:30px;text-align:center}.verify-orb{width:68px;height:68px;border-radius:23px;margin:0 auto 18px;display:grid;place-items:center;font-size:1.7rem;background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(0,212,255,.25));border:1px solid rgba(0,212,255,.25);box-shadow:0 15px 40px rgba(0,212,255,.08)}.verify-card h1{margin:6px 0}.verify-card p{color:var(--muted);line-height:1.55}.verify-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0}.verify-steps span{border:1px solid var(--line);border-radius:12px;padding:10px 6px;color:var(--muted);font-size:.65rem}.verify-steps b{display:block;margin-top:4px}.verify-steps .done,.verify-steps .active{border-color:rgba(0,212,255,.35);color:#fff}.verify-steps .done{background:rgba(0,212,255,.07)}.verify-actions{display:flex;justify-content:center;gap:10px;margin-top:12px}.email-preview-shell{max-width:820px;margin:0 auto}.email-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.email-preview-toolbar h1{margin:4px 0}.mail-preview{border-radius:24px;overflow:hidden;background:#f4f7fb;color:#162033;box-shadow:0 24px 70px rgba(0,0,0,.35)}.mail-top{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;background:#0b1018;color:#dfe7f4;font-size:.72rem}.mail-brand{display:flex;align-items:center;gap:9px}.mail-brand .brand-mark{width:34px;height:34px}.mail-hero{text-align:center;padding:44px 40px 34px;background:radial-gradient(circle at 50% 0,rgba(0,212,255,.18),transparent 45%),linear-gradient(180deg,#101827,#f4f7fb 76%)}.mail-wave{width:58px;height:58px;border-radius:19px;margin:0 auto 20px;display:grid;place-items:center;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#745cff,#00d4ff);box-shadow:0 15px 35px rgba(52,145,255,.28)}.mail-hero h2{font-size:2rem;line-height:1.08;margin:8px 0 14px;color:#fff}.mail-hero p{max-width:520px;margin:0 auto 20px;line-height:1.55;color:#536075}.mail-cta{display:block;margin:0 auto 12px;border:0;border-radius:13px;padding:13px 20px;color:#fff;font-weight:950;background:linear-gradient(90deg,#745cff,#00bfe8);cursor:pointer}.mail-hero small{color:#7c8798}.mail-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:22px 28px}.mail-features span{border:1px solid #dfe5ed;border-radius:14px;padding:14px;background:#fff}.mail-features b,.mail-features small{display:block}.mail-features small{color:#778294;margin-top:4px}.mail-footer{text-align:center;padding:19px 24px 25px;color:#8993a2;font-size:.65rem;border-top:1px solid #e0e5ec;background:#fff}
@media(max-width:900px){.admin-console{grid-template-columns:1fr}.admin-sidebar{position:static;min-height:0;display:block;padding:9px;overflow:hidden}.admin-sidebar-brand{border-bottom:0;padding-bottom:8px}.admin-sidebar nav{display:flex;overflow-x:auto;gap:5px;padding:4px 0 8px}.admin-nav-item{min-width:max-content;padding:8px 10px}.admin-nav-exit{width:100%}.admin-dashboard-grid{grid-template-columns:1fr}.user-toolbar{grid-template-columns:1fr 1fr}.search-box{grid-column:1/-1}.user-table-head{display:none}.admin-user-row-full{grid-template-columns:1fr auto auto}.admin-user-row-full>.meta{grid-column:1/2}.row-actions{grid-column:1/-1;justify-content:flex-start}.admin-page-head{align-items:stretch;flex-direction:column}.admin-page-head h1{font-size:1.65rem}}
@media(max-width:560px){.auth-name-grid{grid-template-columns:1fr}.verify-steps{grid-template-columns:1fr}.verify-actions{flex-direction:column}.mail-hero{padding:34px 18px 28px}.mail-hero h2{font-size:1.55rem}.mail-features{grid-template-columns:1fr;padding:16px}.email-preview-toolbar{align-items:stretch;flex-direction:column}.user-toolbar{grid-template-columns:1fr}.search-box{grid-column:auto}.admin-user-row-full{grid-template-columns:1fr auto}.admin-user-row-full .plan-badge{grid-row:2}.admin-user-row-full>.meta{grid-column:1/-1}.payment-checklist{grid-template-columns:1fr}}

/* V25: SMTP/SMTPS admin configuration */
.admin-email-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}.smtp-config-card{grid-row:span 2}.smtp-grid{margin-top:14px}.smtp-auth-check{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:#0b1017;color:#fff!important}.smtp-auth-check input{width:18px;height:18px}.smtp-secret-note{margin-top:12px;padding:10px 12px;border:1px solid rgba(250,204,21,.18);background:rgba(250,204,21,.05);border-radius:11px;color:#cabf9a;font-size:.64rem;line-height:1.45}.smtp-actions{display:flex;gap:8px;margin-top:14px}.smtp-test-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}.smtp-test-status{margin-top:10px;padding:10px 11px;border-radius:10px;border:1px solid var(--line);background:#0d121a;color:var(--muted);font-size:.66rem}.smtp-test-status.testing{color:#ffd477;border-color:rgba(250,204,21,.25)}.smtp-test-status.success{color:#69e8af;border-color:rgba(74,222,128,.25);background:rgba(74,222,128,.05)}
@media(max-width:900px){.admin-email-grid{grid-template-columns:1fr}.smtp-config-card{grid-row:auto}}
@media(max-width:560px){.smtp-actions,.smtp-test-row{grid-template-columns:1fr;display:grid}.smtp-actions>*{width:100%}}

/* V26: payment lifecycle and reconciliation */
.payments-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.payment-subscriptions,.payment-events{grid-column:1/-1}.subscription-rules{display:grid;gap:8px;margin-top:14px}.subscription-rules div,.payment-safety span{padding:11px;border:1px solid var(--line);border-radius:12px;background:#0d121a}.subscription-rules strong,.subscription-rules span,.payment-safety b,.payment-safety small{display:block}.subscription-rules span,.payment-safety small{color:var(--muted);font-size:.65rem;line-height:1.45;margin-top:4px}.payment-table-head,.payment-row{display:grid;grid-template-columns:minmax(180px,1.4fr) 190px 90px minmax(160px,1fr);gap:10px;align-items:center}.payment-table-head{padding:9px 0;color:var(--muted);font-size:.56rem;text-transform:uppercase;border-bottom:1px solid var(--line)}.payment-row{padding:12px 0;border-bottom:1px solid var(--line);font-size:.7rem}.payment-row:last-child{border-bottom:0}.payment-row small{display:block;color:var(--muted);margin-top:3px}.subscription-status{width:max-content;padding:5px 7px;border-radius:999px;font-size:.53rem;font-weight:950;letter-spacing:.04em}.subscription-status.active{color:#69e8af;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.24)}.subscription-status.canceling{color:#ffd477;background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.24)}.subscription-status.refunded{color:#ff9cac;background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.22)}.subscription-status.pastdue{color:#ffb46b;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.22)}.event-list{display:grid;gap:6px;margin-top:12px}.event-list>div{display:grid;grid-template-columns:12px 1fr 24px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:11px;background:#0d121a}.event-list small{display:block;color:var(--muted);margin-top:3px}.event-list em{font-style:normal;color:#69e8af}.event-dot{width:8px;height:8px;border-radius:50%}.event-dot.ok{background:#4ade80}.event-dot.warn{background:#facc15}.event-dot.danger{background:#fb7185}.payment-safety{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
@media(max-width:900px){.payments-grid{grid-template-columns:1fr}.payment-subscriptions,.payment-events{grid-column:auto}.payment-table-head{display:none}.payment-row{grid-template-columns:1fr auto}.payment-row>:nth-child(3),.payment-row>:nth-child(4){grid-column:1/-1}.payment-safety{grid-template-columns:1fr}}