:root {
  --ink: #1d1d3b;
  --text: #2b2d38;
  --muted: #5d6170;
  --muted-2: #8a8e9c;
  --line: #e3e5ea;
  --line-2: #eceef2;
  --bg: #fafafa;
  --white: #ffffff;
  --primary: #423d99;
  --primary-h: #37327f;
  --lav: #ebe9f8;
  --lav-2: #f3f2fa;
  --lav-line: #cfc9f2;
  --rail: #1d1d3b;
  --rail-active: #111121;
  --rail-hover: #2a2a4d;
  --rail-icon: #787787;
  --rail-text: #bbbec4;
  --danger: #d4384a;
  --badge: oklch(0.62 0.19 25);
  --ok: #22b35e;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --font: 'Geist', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-h); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
img { display: block; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
  display: inline-block; letter-spacing: normal; text-transform: none; white-space: nowrap;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; flex-shrink: 0;
}
.ms.fill { font-variation-settings: 'FILL' 1; }

@keyframes popItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aiPulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes aiDot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes logoShine { 0% { transform: translateX(-160%) skewX(-20deg); } 33% { transform: translateX(260%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.anim { animation: popItem .35s var(--ease) both; animation-delay: var(--d, 0s); }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #c9ccd4; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }


/* Smooth, instant-feeling page changes (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
.rail { view-transition-name: rail; }
.topbar { view-transition-name: topbar; }
.m-tabbar { view-transition-name: tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
::view-transition-group(rail), ::view-transition-group(topbar), ::view-transition-group(tabbar) { animation: none; }