:root{--bg: #eff3ea;--card: #ffffff;--card-border: #dce3d5;--ink: #1c2b22;--ink-soft: #5b6b5e;--mustard: #e2a73b;--mustard-ink: #5a4013;--tomato: #c1440e;--basil: #4b7a51;--basil-bg: #e7f0e3;--tomato-bg: #fbe8e0;--mustard-bg: #fbf0dc;--radius: 14px;--shadow: 0 2px 10px rgba(28, 43, 34, .08);--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.app-shell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);position:relative}.app-content{flex:1;padding:16px 16px 96px;overflow-y:auto}h1,h2,h3{font-family:var(--font-display);margin:0 0 4px;letter-spacing:-.01em}.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}.mono{font-family:var(--font-mono)}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.btn-primary{background:var(--ink);color:#fff;border:none;border-radius:999px;padding:14px 20px;font-weight:600;font-size:15px;width:100%;transition:transform .15s ease,opacity .15s ease}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--card-border);border-radius:999px;padding:10px 16px;font-weight:600;font-size:14px}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--font-mono)}.pill-basil{background:var(--basil-bg);color:var(--basil)}.pill-tomato{background:var(--tomato-bg);color:var(--tomato)}.pill-mustard{background:var(--mustard-bg);color:var(--mustard-ink)}.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--card-border);border-top-color:var(--ink);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:48px 16px;color:var(--ink-soft)}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}