/* =========================
   Mental Boost — Champion UI CSS
   ========================= */

/* ===== Tokens ===== */
:root{
  --bg: #0b0f14;
  --card: #0f1621;
  --soft: #0f1b2b;
  --text: #e8eef7;
  --muted: #9fb3c8;
  --brand: #6aa6ff;
  --brand-2: #87f0d1;
  --ring: rgba(134,173,255,.55);

  --radius-xs: .4rem;
  --radius-sm: .6rem;
  --radius-md: .8rem;
  --radius-lg: 1rem;

  --shadow-1: 0 10px 30px rgba(0,0,0,.25);
  --shadow-2: 0 16px 48px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(135,240,209,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(106,166,255,.18), transparent 60%),
    linear-gradient(180deg, #0a1018, var(--bg));
  min-height:100vh;
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

/* ===== Skip link (a11y) ===== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:var(--radius-sm)}

/* ===== Header / Nav (glass) ===== */
.site-header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(15, 22, 33, 0.75);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease, border-color .25s ease;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{
  font-weight:800; color:var(--text); text-decoration:none; letter-spacing:.3px;
  display:flex; align-items:center; gap:.5rem
}
.badge{
  font-size:.7rem; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#001; padding:.18rem .45rem; border-radius:var(--radius-xs); font-weight:700
}

.nav-toggle{display:none; background:transparent; border:0; color:var(--text); font-size:1.3rem}
.nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav-list a{
  color:var(--muted); text-decoration:none; padding:.45rem .7rem; border-radius:var(--radius-sm);
  transition: background .15s ease, color .15s ease
}
.nav-list a.active, .nav-list a:hover{
  color:#0b0f14; background: linear-gradient(90deg, var(--brand), var(--brand-2)); font-weight:600
}

.mode-toggle{
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04);
  color:var(--text); padding:.4rem .6rem; border-radius:var(--radius-sm); cursor:pointer
}
.mode-toggle:hover{background:rgba(255,255,255,.08)}
.mode-toggle:active{transform:translateY(1px)}
.mode-toggle:focus{outline:2px solid var(--ring); outline-offset:2px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:var(--radius-sm); font-weight:700;
  text-decoration:none; border:1px solid transparent; transition:transform .08s ease, background .15s ease, color .15s ease
}
.btn:active{transform:translateY(1px)}
.btn[disabled], .btn:disabled{opacity:.55; cursor:not-allowed}

.btn-primary{
  color:#001; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow-1);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:focus{outline:2px solid var(--ring); outline-offset:2px}

.btn-ghost{
  color: var(--brand);
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.08);
}
.btn-ghost:hover{
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}
.btn-ghost:focus{outline:2px solid var(--ring); outline-offset:2px}

/* ===== Links (content) ===== */
a{transition: color .15s ease}
main a{color: var(--brand-2)}
main a:hover{color: var(--brand)}
main a:visited{color: #0080ff}

/* ===== Hero ===== */
.hero{display:grid; grid-template-columns:1.05fr .85fr; gap:2rem; padding:2.2rem 0}
.hero-text h1{font-size:clamp(2rem, 3.2vw, 3rem); line-height:1.1; margin:.2rem 0 .7rem}
.lead{color:var(--muted); max-width:48ch}
.cta{display:flex; gap:.8rem; margin:1.2rem 0}
.trust{margin:.8rem 0 0; padding:0; list-style:none; color:var(--muted); display:grid; gap:.3rem}

/* ===== Stats (home right card) ===== */
.stats-card{
  background: linear-gradient(145deg, #0f1522, #141c2b);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-2);
  display:grid; gap:.9rem; align-content:start;
}
.stat-item{
  background:#0b1420;
  border:1px solid rgba(255,255,255,.06);
  color:#eaf1ff;
  border-radius:.9rem;
  padding:.9rem 1.1rem;
  display:flex; align-items:center; gap:.8rem;
}
.stat-item span{
  font-size:1.9rem; font-weight:800;
  background: linear-gradient(90deg, #fff, #9ac6ff);
  -webkit-background-clip:text; color:transparent
}
.stat-item small{color:var(--muted)}

/* ===== Sections ===== */
.section-title{font-size:1.6rem; margin:1.6rem 0 .9rem}
.features{padding:1rem 0 2.2rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg); padding:1rem 1.1rem;
  box-shadow: var(--shadow-1);
}
.card-soft{background: var(--soft)}
.card h3{margin:.2rem 0 .4rem}
.link{color:var(--brand-2); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}
.bullets{margin:.6rem 0 0; padding-left:1rem}
.note{margin-top:1rem; color:var(--muted)}

/* ===== Page scaffolding ===== */
.page{padding:1.2rem 0 2.2rem}
.page-header h1{margin:0}
.page-header .sub{color:var(--muted); margin:.3rem 0 1rem}

/* ===== Quotes page ===== */
.quote-card{display:grid; gap:1rem}
.quote{
  font-size:clamp(1.2rem, 2.4vw, 1.6rem); font-weight:700;
  background:
    radial-gradient(400px 200px at 0% 0%, rgba(106,166,255,.2), transparent 60%),
    radial-gradient(400px 200px at 100% 0%, rgba(135,240,209,.2), transparent 60%);
  padding:1rem; border-radius:var(--radius-md); min-height:3.5rem
}
.quote-toolbar{display:flex; gap:.6rem}
.copy-msg{color:var(--muted); min-height:1.2rem}

/* ===== Mood page ===== */
.mood-form .row{display:grid; gap:.35rem; margin-bottom:.7rem}
.mood-form input, .mood-form select{
  background:rgba(0,0,0,.05); color:var(--text); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm); padding:.6rem .7rem
}
.mood-form input:focus, .mood-form select:focus{outline:2px solid var(--ring); outline-offset:2px}
.mood-form .actions{display:flex; gap:.6rem}
.save-msg{color:var(--muted)}
.history{display:grid; gap:.5rem; max-height:380px; overflow:auto}
.entry{
  background:rgba(0,0,0,.05); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm);
  padding:.6rem .7rem; display:flex; justify-content:space-between; gap:.6rem; align-items:center
}
.entry small{color:var(--muted)}
.chart-canvas{
  width:100%; height:auto; background:#0b1420;
  border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); margin-top:.5rem
}
.legend{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem}
.legend .dot{display:inline-block; width:.8rem; height:.8rem; border-radius:50%; margin-right:.35rem}

/* ===== Relax ===== */
.relax{text-align:center}
.breather{
  width:140px; height:140px; margin: .6rem auto 1rem; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(135,240,209,.7), rgba(106,166,255,.8));
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%{transform: scale(1); opacity:.9}
  50%{transform: scale(1.55); opacity:1}
  100%{transform: scale(1); opacity:.9}
}
@media (prefers-reduced-motion: reduce){
  .breather{animation:none}
}
.breath-instruction{font-weight:700}
.actions{display:flex; gap:.6rem; justify-content:center; margin:.6rem 0}
.audio{margin-top:.6rem}
.muted{color:var(--muted)}
.pref-note{margin-top:.4rem}

/* ===== Footer ===== */
.site-footer{border-top:1px solid rgba(255,255,255,.06); margin-top:1rem}
.footer-inner{padding:1rem 0; color:var(--muted)}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-list{
    display:none; position:absolute; right:1rem; top:3.2rem; background:rgba(15,22,33,.98);
    padding:.6rem; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm)
  }
  .nav-list.show{display:grid}
}

/* ===== Focus & Transitions ===== */
a, button, input, select{transition: box-shadow .08s ease}
a:focus, button:focus, input:focus, select:focus{outline:2px solid var(--ring); outline-offset:2px}

/* ===== Light mode ===== */
.light{
  --bg: #f6f8fb;
  --card: #ffffff;
  --soft: #f1f3f6;
  --text: #1f2933;
  --muted: #4b5563;
  --brand: #4dabf7;
  --brand-2: #63e6be;
  --ring: rgba(77,171,247,.55);
}
.light body{
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(77,171,247,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(99,230,190,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f8fb);
}
.light .site-header{
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* light-mode stats card (深色卡 + 亮字，确保可读性) */
.light .stats-card{
  background: linear-gradient(145deg, #fdfdfd, #f0f4f8);
  border:1px solid rgba(0,0,0,.06);
}
.light .stat-item{
  background:#101827;        /* 深色底 */
  color:#ffffff;              /* 主文字亮色 */
  border-color: rgba(0,0,0,.18);
}
.light .stat-item small{
  color:#f0f4f8;              /* 说明文字更亮，解决“看不清”问题 */
}

/* light-mode ghost buttons */
.light .btn-ghost{
  color:#0b3c74;
  border-color: rgba(0,0,0,.15);
  background-color: rgba(0,0,0,.05);
}
.light .btn-ghost:hover{background-color: rgba(0,0,0,.08); color:#000}