:root {
  --bg:#070806;
  --bg-2:#0d100c;
  --panel:#10130f;
  --panel-2:#0b0d0b;
  --text:#f1e7d7;
  --muted:#938b7e;
  --muted-2:#6f6a62;
  --gold:#d3ab6d;
  --gold-2:#efcf96;
  --gold-dark:#8b6032;
  --gold-soft:rgba(211,171,109,.10);
  --line:rgba(224,190,131,.14);
  --line-soft:rgba(255,255,255,.055);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --radius:20px;
  --shadow:0 24px 80px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html,body{min-height:100%;background:#050605}
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 18% 4%,rgba(154,103,50,.12),transparent 26%),
    radial-gradient(circle at 86% 16%,rgba(77,91,59,.10),transparent 30%),
    linear-gradient(180deg,#090a08,#050605 72%);
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.013) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 50% -20%,rgba(255,216,160,.08),transparent 34%);
}
button,input,select{font:inherit}
button{color:inherit}

.app-shell{
  width:min(100%,520px);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  z-index:1;
  background:linear-gradient(180deg,rgba(8,10,8,.94),rgba(6,7,6,.98));
  border-left:1px solid rgba(224,190,131,.06);
  border-right:1px solid rgba(224,190,131,.06);
}

.topbar{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:46px 1fr 46px; align-items:center;
  height:64px; padding:8px 14px;
  background:rgba(7,8,7,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(224,190,131,.08);
}
.brand-mini{
  text-align:center;
  font-family:var(--serif);
  color:#d7bb8d;
  font-size:18px;
  letter-spacing:.01em;
}
.icon-btn{
  width:42px;height:42px;border:0;border-radius:50%;background:transparent;
  cursor:pointer;font-size:19px;color:#caa66e;
}
.icon-btn:hover{background:var(--gold-soft)}

.app-main{padding:22px 18px 112px}
.bottom-nav{
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%);
  width:min(calc(100% - 24px),496px);
  display:grid; grid-template-columns:repeat(5,1fr); gap:3px;
  padding:7px;
  border:1px solid rgba(224,190,131,.15);
  border-radius:22px;
  background:rgba(10,12,10,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  z-index:50;
}
.nav-item{
  border:0;background:transparent;border-radius:15px;padding:8px 3px;
  display:flex;flex-direction:column;gap:2px;align-items:center;
  color:#706b63;cursor:pointer;
}
.nav-item span{font-size:17px}
.nav-item small{font-size:9px;letter-spacing:.04em}
.nav-item.active{color:#e2c28f;background:linear-gradient(180deg,rgba(211,171,109,.14),rgba(211,171,109,.05))}

h1,h2,h3,p{margin-top:0}
.page-title{
  font-family:var(--serif);
  font-size:38px; line-height:1.03; font-weight:500;
  letter-spacing:-.035em; text-align:center; margin-bottom:8px;
  color:#efe0c9;
}
.subtitle{text-align:center;color:var(--muted);line-height:1.5;margin-bottom:24px;font-size:13px}

/* intro */
.hero{
  min-height:calc(100vh - 98px);
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  position:relative;overflow:hidden;padding:14px 0 24px;
}
.hero::before{
  content:""; position:absolute; inset:5% -18% auto; height:52%;
  background:radial-gradient(ellipse at center,rgba(211,171,109,.09),transparent 60%);
  pointer-events:none;
}
.orb{
  width:236px; aspect-ratio:1; margin:0 auto 30px; border-radius:50%; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,#7f603e 0 6%,#171713 6.5% 18%,#070807 18.5% 100%);
  border:1px solid rgba(224,190,131,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.46),inset 0 0 0 1px rgba(255,255,255,.025);
}
.orb::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.045) 5.5px 6px,transparent 6.5px 11px);
}
.orb::after{
  content:"M  to  M";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:35%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:#22180e;background:radial-gradient(circle at 35% 28%,#edcf9d,#a9773c 78%);
  font-family:var(--serif);font-size:14px;letter-spacing:.03em;
}
.hero h1{font-family:var(--serif);font-size:clamp(48px,12vw,66px);line-height:.9;margin:0 0 14px;font-weight:500;letter-spacing:-.055em;color:#efd9b7}
.hero p{margin:0 auto 26px;color:#91897c;max-width:340px;line-height:1.6;font-size:13px}

.primary-btn,.secondary-btn{
  width:100%;border-radius:16px;padding:15px 16px;cursor:pointer;font-weight:750;
}
.primary-btn{
  border:1px solid #e0bc80;
  color:#17120c;
  background:linear-gradient(180deg,#eccb94,#b57e43);
  box-shadow:0 10px 24px rgba(157,102,46,.14);
}
.secondary-btn{
  border:1px solid rgba(224,190,131,.16);
  color:#b8aa95;
  background:linear-gradient(180deg,#11140f,#090b09);
}
.primary-btn:hover{filter:brightness(1.035)}
.secondary-btn:hover{border-color:rgba(224,190,131,.32);color:#ead8ba}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.audition-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px;align-items:stretch}
.audition-actions .primary-btn,.audition-actions .secondary-btn{padding:14px 8px;font-size:11px;white-space:nowrap}

/* moods */
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:3px 0 4px}
.mood-card{
  aspect-ratio:1; min-height:0; border-radius:50%; padding:10px;
  border:1px solid rgba(224,190,131,.14);
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.025),transparent 24%),
    linear-gradient(145deg,#151814,#090b09);
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.14),0 9px 20px rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.mood-card:hover{transform:translateY(-2px);border-color:rgba(224,190,131,.42);box-shadow:0 0 0 2px rgba(211,171,109,.06),0 12px 26px rgba(0,0,0,.27)}
.mood-card .emoji{font-size:27px;filter:saturate(.65) sepia(.12)}
.mood-card .label{font-family:var(--serif);font-size:13px;font-weight:500;color:#d4c4aa}
.mood-card.negative{background:linear-gradient(145deg,#171412,#090a09)}
.mood-card.positive{background:linear-gradient(145deg,#111611,#080a08)}
.spectrum-caption{display:flex;justify-content:space-between;color:#6f6a61;font-size:9px;text-transform:uppercase;letter-spacing:.17em;margin:15px 5px 20px}

/* cards */
.card{
  border:1px solid rgba(224,190,131,.13);
  background:
    radial-gradient(circle at 20% 0%,rgba(211,171,109,.035),transparent 28%),
    linear-gradient(180deg,#10130f,#090b09);
  border-radius:var(--radius);padding:17px;
  box-shadow:0 18px 40px rgba(0,0,0,.19);
}
.card + .card{margin-top:12px}
.mood-pill{display:inline-flex;gap:8px;align-items:center;padding:8px 11px;border-radius:999px;background:rgba(211,171,109,.08);border:1px solid rgba(211,171,109,.14);font-family:var(--serif);font-size:13px;color:#cfb58e}
.progression-head{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:12px}
.key-block{margin-top:12px}
.key-label{display:block;color:#716b62;font-size:8px;font-weight:850;letter-spacing:.18em;margin-bottom:3px}
.key-name{font-family:var(--serif);font-size:24px;font-weight:500;color:#ecd9ba;letter-spacing:-.02em}
.toggle-row{display:flex;gap:8px;align-items:center;color:#80796f;font-size:10px}
.toggle{width:42px;height:24px;border-radius:999px;background:#252620;padding:3px;border:1px solid rgba(255,255,255,.06);cursor:pointer}
.toggle::after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#bbb1a2;transition:.18s ease}
.toggle.on{background:linear-gradient(90deg,#79562f,#b7864f);border-color:rgba(224,190,131,.3)}
.toggle.on::after{transform:translateX(18px);background:#f0d6aa}

.chord-line{display:flex;align-items:center;justify-content:space-between;gap:7px;font-family:var(--serif);font-size:clamp(27px,8vw,38px);font-weight:500;letter-spacing:-.035em;margin:18px 0 4px;color:#f0dfc4}
.arrow{color:#786d5d;font-weight:400;font-size:.75em}
.numeral-line{display:flex;justify-content:space-between;color:#9c9387;font-size:12px;padding:0 6px 13px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 14px}
.stat{background:#0a0c09;border:1px solid rgba(224,190,131,.08);border-radius:13px;padding:10px 6px;text-align:center}
.stat strong{display:block;font-family:var(--serif);font-size:14px;font-weight:500;color:#d7c2a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{color:#69655e;font-size:8px;letter-spacing:.12em}

.sound-panel{margin-top:13px;padding-top:13px;border-top:1px solid rgba(224,190,131,.10)}
.sound-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;color:#7f786e;font-size:10px}
.sound-panel-head>span{font-weight:800;text-transform:uppercase;letter-spacing:.15em;font-size:8px}
.sound-panel-head strong{color:#cdb38c;font-family:var(--serif);font-size:12px;font-weight:500;text-align:right}
.sound-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px;border-radius:14px;background:#080a08;border:1px solid rgba(224,190,131,.07)}
.sound-selector button{border:1px solid transparent;background:transparent;color:#716d65;border-radius:10px;padding:9px 4px;font-size:9px;font-weight:700;cursor:pointer}
.sound-selector button.active{color:#17120b;background:linear-gradient(180deg,#e0bb7d,#b98342);border-color:#e7c68e;box-shadow:0 8px 20px rgba(170,111,51,.13)}

/* shape controls */
.shape-card{padding:16px}
.shape-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}
.shape-heading strong{display:block;font-family:var(--serif);font-size:19px;font-weight:500;color:#e2d0b5}
.shape-heading span:not(.shape-flavour){display:block;color:#79736a;font-size:10px;margin-top:3px}
.shape-flavour{max-width:45%;padding:6px 9px;border-radius:999px;background:rgba(211,171,109,.05);border:1px solid rgba(211,171,109,.13);color:#b69f7d;font-family:var(--serif);font-size:11px;text-align:center}
.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shape-btn{border:1px solid rgba(224,190,131,.12);background:#0a0c09;border-radius:13px;padding:11px 8px;cursor:pointer;font-size:10px;font-weight:700;color:#938b7e}
.shape-btn:hover{border-color:rgba(224,190,131,.35);color:#e5d3b5;background:rgba(211,171,109,.04)}
.shape-meters{margin-top:14px;display:grid;gap:8px}
.shape-meter{display:grid;grid-template-columns:58px 1fr 18px;gap:8px;align-items:center;color:#6f6a62;font-size:9px}
.shape-meter>div{height:4px;border-radius:99px;background:#1c1f19;overflow:hidden}
.shape-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#75805f,#d0a35d)}
.shape-meter b{color:#9d9588;font-size:9px;text-align:right}

/* learn */
.key-chip{width:max-content;max-width:100%;margin:-8px auto 15px;padding:6px 11px;border-radius:999px;background:rgba(211,171,109,.06);border:1px solid rgba(211,171,109,.15);color:#c6ac83;font-family:var(--serif);font-size:12px;font-weight:500}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#090b09;border:1px solid rgba(224,190,131,.09);border-radius:999px;padding:4px;margin-bottom:12px}
.segmented button{border:0;background:transparent;border-radius:999px;padding:9px 5px;cursor:pointer;color:#6f6a62;font-size:9px;font-weight:700}
.segmented button.active{background:linear-gradient(180deg,#d5ad70,#9e713c);color:#17120b}
.chord-detail{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.05)}
.chord-detail:first-of-type{border-top:0}
.chord-detail h3{margin:0 0 4px;font-family:var(--serif);font-size:25px;font-weight:500;color:#ebd7b8}
.notes{color:#9c9488;font-size:11px;word-spacing:6px}
.keyboard{display:flex;height:64px;align-items:stretch;position:relative;border-radius:7px;overflow:hidden;background:#e9e0d1;border:1px solid #26271f}
.white-key{flex:1;background:linear-gradient(180deg,#f2eadc,#d7cfc0);border-right:1px solid #aaa294;position:relative}
.white-key.active{background:linear-gradient(180deg,#e6c37f,#bb8141)}
.black-key{position:absolute;top:0;width:10%;height:40px;background:linear-gradient(180deg,#191a16,#050605);border-radius:0 0 3px 3px;z-index:3}
.black-key.active{background:linear-gradient(180deg,#9a6a34,#58391d)}

/* play screen: same working markup, cinematic record treatment */
.play-card{position:relative;text-align:center;padding-top:18px;overflow:hidden}
.play-card::before{
  content:"";display:block;width:min(78vw,330px);max-width:100%;aspect-ratio:1;margin:16px auto -236px;border-radius:50%;
  background:
    radial-gradient(circle,#d4ab6d 0 7%,#171713 7.5% 15%,#060706 15.5% 100%);
  border:1px solid rgba(224,190,131,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.02);
}
.play-card::after{
  content:"";position:absolute;right:9%;top:70px;width:9px;height:205px;border-radius:9px;
  background:linear-gradient(90deg,#76532e,#e2bb7b 45%,#6c4927);
  transform:rotate(19deg);transform-origin:top;
  box-shadow:2px 3px 8px rgba(0,0,0,.4);opacity:.95;
}
.play-card .mood-pill,.play-card .play-key{position:relative;z-index:2}
.current-chord{position:relative;z-index:3;font-family:var(--serif);font-size:54px;letter-spacing:-.045em;margin:118px 0 0;color:#17120b;text-shadow:0 1px rgba(255,255,255,.18)}
.step-count{position:relative;z-index:3;color:#3b2d1f;margin:1px 0 96px;font-size:10px;font-weight:800}
.play-card>.keyboard{display:none}
.play-card>.notes{position:relative;z-index:3;margin-top:0!important;color:#cdb790!important;font-family:var(--serif);font-size:14px!important}
.big-play{width:78px;height:78px;border-radius:50%;border:1px solid #e0bc80;background:linear-gradient(145deg,#ebca91,#aa743a);color:#17110a;font-size:25px;cursor:pointer;box-shadow:0 10px 25px rgba(160,103,46,.14);margin:18px auto}
.transport{display:flex;justify-content:center;gap:22px;align-items:center;position:relative;z-index:3}
.transport button:not(.big-play){width:43px;height:43px;border-radius:50%;border:1px solid rgba(224,190,131,.16);background:#0a0c09;color:#9d9588;cursor:pointer}
.progress-dots{display:flex;justify-content:center;gap:8px;margin-top:13px;position:relative;z-index:3}
.dot{width:8px;height:8px;border-radius:50%;background:#3b3b33}
.dot.active{background:#d0a35d;box-shadow:0 0 11px rgba(208,163,93,.36)}

/* library / settings */
.form-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.form-row:first-child{border-top:0}
.form-row label{font-family:var(--serif);font-size:17px;font-weight:500}
.form-row .value{color:#8c857a;font-size:12px}
.range{width:100%;accent-color:#b88648}
.library-list{display:grid;gap:9px}
.library-item{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid rgba(224,190,131,.12);border-radius:16px;background:linear-gradient(180deg,#10130f,#090b09)}
.play-mini{width:40px;height:40px;border-radius:50%;border:1px solid rgba(224,190,131,.20);background:var(--gold-soft);color:#d9bb89;cursor:pointer}
.library-item h3{font-family:var(--serif);font-size:16px;font-weight:500;margin:0 0 3px;color:#dfcfb5}
.library-item p{color:#777168;font-size:9px;margin:0}
.empty{text-align:center;color:#7d776e;padding:36px 12px}
.toast{position:fixed;top:77px;left:50%;transform:translateX(-50%) translateY(-10px);opacity:0;pointer-events:none;background:#10130f;border:1px solid rgba(224,190,131,.20);padding:10px 15px;border-radius:999px;color:#d5c2a4;font-size:11px;transition:.2s;z-index:100;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:390px){
  .app-main{padding-left:14px;padding-right:14px}
  .mood-grid{gap:9px}
  .mood-card .emoji{font-size:24px}
  .mood-card .label{font-size:12px}
  .chord-detail{grid-template-columns:1fr 126px}
  .sound-selector{grid-template-columns:repeat(2,1fr)}
  .audition-actions .primary-btn,.audition-actions .secondary-btn{font-size:10px;padding:13px 6px}
  .play-card::before{margin-bottom:-224px}
  .current-chord{margin-top:110px}
  .step-count{margin-bottom:92px}
}
@media(min-width:700px){
  body{padding:18px 0}
  .app-shell{min-height:calc(100vh - 36px);border-radius:30px;overflow:hidden;box-shadow:0 28px 100px rgba(0,0,0,.65)}
  .bottom-nav{bottom:25px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* =========================================================
   MOOD PICKER — cinematic editorial redesign (screen 1 only)
   ========================================================= */
body[data-route="mood"] .app-shell{
  background:
    linear-gradient(180deg,rgba(6,8,7,.22),rgba(5,6,5,.92) 56%,#050605 100%),
    radial-gradient(circle at 16% 10%,rgba(167,105,49,.20),transparent 28%),
    radial-gradient(circle at 80% 8%,rgba(54,82,60,.18),transparent 27%),
    linear-gradient(135deg,#10130f,#060706 62%);
}
body[data-route="mood"] .app-shell::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,transparent 0 10%,rgba(229,198,143,.025) 10.2% 10.4%,transparent 10.6% 89.4%,rgba(229,198,143,.025) 89.6% 89.8%,transparent 90%),
    radial-gradient(ellipse at 50% 16%,rgba(218,170,102,.08),transparent 36%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 38px);
  mix-blend-mode:screen;
}
body[data-route="mood"] .topbar{
  position:relative;
  height:56px;
  background:transparent;
  border-bottom:0;
  backdrop-filter:none;
  z-index:3;
}
body[data-route="mood"] .brand-mini{opacity:0;pointer-events:none}
body[data-route="mood"] #settingsBtn{
  border:1px solid rgba(221,183,121,.14);
  background:rgba(10,12,10,.52);
  color:#d4ad72;
  width:38px;height:38px;
  font-size:16px;
}
body[data-route="mood"] .app-main{
  position:relative;z-index:2;
  padding:0 20px 112px;
}
body[data-route="mood"] .bottom-nav{
  border-color:rgba(221,183,121,.13);
  background:rgba(7,9,7,.94);
  box-shadow:0 18px 58px rgba(0,0,0,.52);
}

.mood-page{position:relative;min-height:calc(100vh - 168px);padding-bottom:16px}
.mood-masthead{text-align:center;margin:-7px 0 26px}
.mood-kicker{
  color:#8e7453;font-size:8px;font-weight:800;letter-spacing:.32em;
  margin-bottom:9px;
}
.mood-brand{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(38px,10vw,52px);
  line-height:.95;
  font-weight:500;
  letter-spacing:-.055em;
  color:#efd6ad;
  text-shadow:0 8px 30px rgba(0,0,0,.45);
}
.mood-brand em{font-size:.66em;font-weight:400;color:#a7875d}
.mood-masthead>p{
  margin:11px auto 0;
  max-width:300px;
  color:#746e65;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.015em;
}
.mood-question{
  position:relative;
  margin:0 auto 16px;
  padding:15px 17px 14px;
  max-width:380px;
  border-top:1px solid rgba(224,190,131,.10);
  border-bottom:1px solid rgba(224,190,131,.08);
  text-align:left;
}
.mood-question>span{
  display:block;
  color:#7f684b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.28em;
  margin-bottom:6px;
}
.mood-question h2{
  margin:0 0 5px;
  font-family:var(--serif);
  font-size:27px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.025em;
  color:#ead9be;
}
.mood-question p{margin:0;color:#69645c;font-size:9px;line-height:1.5}

body[data-route="mood"] .mood-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,108px));
  justify-content:center;
  gap:11px 12px;
  padding:2px 0 7px;
}
body[data-route="mood"] .mood-card{
  --ring:rgba(213,174,111,.22);
  --icon:#b99b72;
  width:100%;
  max-width:108px;
  aspect-ratio:1;
  position:relative;
  border-radius:50%;
  padding:13px 8px 11px;
  border:1px solid var(--ring);
  background:
    radial-gradient(circle at 35% 27%,rgba(255,255,255,.045),transparent 22%),
    radial-gradient(circle at 50% 110%,rgba(205,158,92,.10),transparent 48%),
    linear-gradient(145deg,rgba(24,25,21,.98),rgba(8,10,8,.99));
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,.18),
    inset 0 0 26px rgba(255,255,255,.012),
    0 13px 30px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow:hidden;
  isolation:isolate;
}
body[data-route="mood"] .mood-card::after{
  content:"";position:absolute;inset:4px;border-radius:50%;z-index:-1;
  border:1px solid rgba(255,255,255,.025);
  background:linear-gradient(140deg,rgba(255,255,255,.025),transparent 36%);
}
body[data-route="mood"] .mood-card:hover,
body[data-route="mood"] .mood-card:focus-visible{
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(231,194,131,.58);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.16),0 0 0 2px rgba(216,171,99,.07),0 16px 34px rgba(0,0,0,.38);
  outline:none;
}
body[data-route="mood"] .mood-card .emoji{display:none}
.mood-icon{display:grid;place-items:center;width:34px;height:34px;color:var(--icon)}
.mood-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
body[data-route="mood"] .mood-card .label{
  color:#cfc0aa;
  font-family:var(--serif);
  font-size:12px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.01em;
}
/* individual emotional tinting: subtle, not rainbow UI */
body[data-route="mood"] .mood-card[data-mood="heartbroken"]{--ring:rgba(166,88,75,.34);--icon:#c68475;background:radial-gradient(circle at 50% 100%,rgba(112,48,42,.17),transparent 46%),linear-gradient(145deg,#1a1412,#0a0908)}
body[data-route="mood"] .mood-card[data-mood="sad"]{--ring:rgba(103,119,128,.31);--icon:#94a3a5;background:radial-gradient(circle at 50% 100%,rgba(65,79,87,.18),transparent 46%),linear-gradient(145deg,#141719,#090a0a)}
body[data-route="mood"] .mood-card[data-mood="lonely"]{--ring:rgba(118,111,94,.26);--icon:#c1b18c}
body[data-route="mood"] .mood-card[data-mood="frustrated"]{--ring:rgba(147,78,57,.32);--icon:#bd775e;background:radial-gradient(circle at 50% 100%,rgba(129,58,39,.17),transparent 46%),linear-gradient(145deg,#19130f,#0a0908)}
body[data-route="mood"] .mood-card[data-mood="overwhelmed"]{--ring:rgba(109,119,118,.29);--icon:#9daaaa}
body[data-route="mood"] .mood-card[data-mood="melancholy"]{--ring:rgba(172,129,76,.36);--icon:#d1a66f;background:radial-gradient(circle at 50% 100%,rgba(164,109,48,.17),transparent 46%),linear-gradient(145deg,#18140e,#090908)}
body[data-route="mood"] .mood-card[data-mood="calm"]{--ring:rgba(94,124,94,.28);--icon:#94b08f;background:radial-gradient(circle at 50% 100%,rgba(66,104,71,.15),transparent 46%),linear-gradient(145deg,#111711,#080a08)}
body[data-route="mood"] .mood-card[data-mood="hopeful"]{--ring:rgba(168,139,81,.29);--icon:#cfb46f}
body[data-route="mood"] .mood-card[data-mood="grateful"]{--ring:rgba(136,118,76,.31);--icon:#c5aa70}
body[data-route="mood"] .mood-card[data-mood="inspired"]{--ring:rgba(185,151,85,.38);--icon:#e0bb76}
body[data-route="mood"] .mood-card[data-mood="happy"]{--ring:rgba(210,159,63,.44);--icon:#efbf55;background:radial-gradient(circle at 50% 100%,rgba(199,137,36,.18),transparent 48%),linear-gradient(145deg,#1b170d,#090a08)}
body[data-route="mood"] .mood-card[data-mood="excited"]{--ring:rgba(191,113,74,.42);--icon:#e59667;background:radial-gradient(circle at 50% 100%,rgba(188,78,44,.17),transparent 48%),linear-gradient(145deg,#1a120f,#0a0908)}

.mood-signoff{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:19px auto 4px;max-width:330px}
.mood-signoff>span{height:1px;background:linear-gradient(90deg,transparent,rgba(215,175,111,.18))}
.mood-signoff>span:last-child{background:linear-gradient(90deg,rgba(215,175,111,.18),transparent)}
.mood-signoff p{margin:0;text-align:center;color:#625d55;font-size:8px;text-transform:uppercase;letter-spacing:.16em;line-height:1.7}
.mood-signoff em{font-family:var(--serif);font-size:11px;text-transform:none;letter-spacing:.02em;color:#a88a60;font-weight:400}

@media(max-width:370px){
  body[data-route="mood"] .app-main{padding-left:14px;padding-right:14px}
  body[data-route="mood"] .mood-grid{grid-template-columns:repeat(3,minmax(0,96px));gap:9px}
  body[data-route="mood"] .mood-card{max-width:96px}
  .mood-brand{font-size:39px}
  .mood-question h2{font-size:24px}
}