:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f4f7fb; color: #0b1e3c; }
.container { max-width: 900px; margin: 0 auto; padding: 16px 16px 88px; }
a { color: #2f6bff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* SPA transitions */
#spa-root { transition: opacity .22s ease, transform .22s ease; will-change: opacity, transform; }
#spa-root.spa-fade-out { opacity: 0; transform: translateY(8px); }
#spa-root.spa-fade-in { opacity: 1; transform: translateY(0); }

/* Mobile-first UI components */
.navbar { display:flex; align-items:center; justify-content:space-between; background:#fff; padding:12px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.08); position:sticky; top:10px; z-index:20; }
.brand { margin:0; font-size:18px; }
.icon-btn { border:0; background:#eef3ff; border-radius:10px; padding:8px 10px; cursor:pointer; }

.sidebar { position:fixed; left:-280px; top:0; width:260px; height:100vh; background:#fff; z-index:50; box-shadow:0 10px 24px rgba(0,0,0,.15); transition:left .25s ease; padding:16px; }
.sidebar.open { left:0; }
.sidebar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sidebar-nav { display:flex; flex-direction:column; gap:8px; }
.nav-link { padding:10px; border-radius:10px; background:#f5f7ff; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:.25s; z-index:40; }
.sidebar-overlay.show { opacity:1; visibility:visible; }

.card-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
.ui-card { background:#fff; border-radius:14px; padding:14px; box-shadow:0 6px 16px rgba(0,0,0,.06); }
.ui-card h3 { margin:0 0 8px; }
.ui-card p { margin:0 0 12px; color:#425466; }
.btn { border:0; border-radius:10px; padding:10px 12px; background:#2f6bff; color:#fff; cursor:pointer; }
.btn.btn-outline { background:#fff; color:#2f6bff; border:1px solid #2f6bff; }

.bottom-nav { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #e6e9f2; display:grid; grid-template-columns:repeat(3,1fr); z-index:30; }
.bottom-item { padding:12px; text-align:center; color:#667085; }
.bottom-item.active { color:#2f6bff; font-weight:700; }

.modal { position:fixed; inset:0; display:none; z-index:60; }
.modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal-content { position:absolute; left:16px; right:16px; bottom:16px; background:#fff; border-radius:16px; padding:16px; animation:slideUp .2s ease; }
@keyframes slideUp { from { transform:translateY(16px); opacity:.6; } to { transform:translateY(0); opacity:1; } }

.toast { position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:74px; background:#111827; color:#fff; padding:10px 14px; border-radius:999px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:70; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (min-width: 768px) {
  .container { padding:20px 20px 24px; }
  .bottom-nav { position:static; margin-top:16px; border:0; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.06); }
  .card-grid { grid-template-columns:repeat(3,1fr); }
}