/* Visual refresh 2026 — Speak AI */
:root{
  --bg:#071019;--paper:#0d1826;--ink:#f7fbff;--muted:#91a4b8;--line:#203247;
  --board:#f7fbff;--board-ink:#071019;--accent:#67f5b5;--accent-ink:#062319;
  --violet:#7b7cff;--ok:#67f5b5;--radius:20px;
  --sphere:radial-gradient(circle at 30% 24%,#fff 0%,#d8fff0 7%,#67f5b5 25%,#57c7ff 50%,#7b7cff 76%,#241a69 100%);
  --grad:linear-gradient(90deg,#67f5b5,#57c7ff 52%,#8c7dff);
}
body{
  background:
    radial-gradient(circle at 72% -8%,rgba(87,199,255,.16),transparent 34rem),
    radial-gradient(circle at 12% 92%,rgba(103,245,181,.11),transparent 30rem),
    var(--bg);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.card,.tile,.lvl-card,.me{
  border-color:rgba(126,170,205,.18)!important;
  box-shadow:0 18px 48px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.card,.tile{background:linear-gradient(145deg,rgba(17,31,47,.94),rgba(10,22,35,.94))!important;}
@media(min-width:900px){
  body.shell .side:not([hidden]){
    width:270px;background:rgba(7,16,25,.88);border-right:1px solid rgba(103,245,181,.1);
    box-shadow:18px 0 70px -55px rgba(87,199,255,.7);backdrop-filter:blur(22px);
  }
  body.shell #app{margin-left:270px}
  body.shell #app.container{max-width:1240px;margin-left:max(270px,calc(270px + (100vw - 270px - 1240px)/2));padding:32px 42px 56px}
}
.side-a{border:1px solid transparent;transition:.18s ease}
.side-a:hover{background:rgba(87,199,255,.07);border-color:rgba(87,199,255,.1)}
.side-a.on{background:linear-gradient(90deg,rgba(103,245,181,.14),rgba(87,199,255,.07));color:#fff;border-color:rgba(103,245,181,.18);box-shadow:inset 3px 0 0 var(--accent)}
.dash-head h1,.mega{letter-spacing:-.055em}
.lvl-card{background:linear-gradient(150deg,#14273a,#101a2a 68%)!important;border-color:rgba(87,199,255,.18)!important}
.daily{background:linear-gradient(135deg,#67f5b5 0%,#a7f3d0 48%,#57c7ff 140%)!important;color:#061813!important;box-shadow:0 30px 70px -35px rgba(103,245,181,.75)!important}
.daily .btn{background:#071019!important;color:#eafff7!important}
.quick .card,.tile{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.quick .card:hover,.tile:hover{transform:translateY(-3px);border-color:rgba(103,245,181,.28)!important;box-shadow:0 22px 55px -34px rgba(87,199,255,.65)!important}
.btn{border-radius:14px}
.btn.accent{background:linear-gradient(135deg,#67f5b5,#57c7ff);color:#061813}
input,select,textarea{background:#0a1522;border-color:#23374b;border-radius:13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:#67f5b5;box-shadow:0 0 0 3px rgba(103,245,181,.12)}
.orb{box-shadow:inset -16px -20px 36px rgba(20,13,76,.6),inset 10px 12px 24px rgba(255,255,255,.28),0 28px 70px -20px rgba(87,199,255,.75)!important}
.bottomnav{background:rgba(7,16,25,.94)!important;border-color:rgba(103,245,181,.16)!important}
.bottomnav a.on{background:rgba(103,245,181,.12)!important;color:#fff!important}
@media(max-width:560px){.container{padding-inline:14px}.card{border-radius:18px}.daily{border-radius:22px}}