:root {
  --bg: #101e22;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-solid: #16232a;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --primary: #25c0f4;
  --accent: #25c0f4;
  --success: #34d399;
  --error: #fb7185;
  --warning: #fbbf24;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: rgba(0, 0, 0, 0.02);
  --surface-solid: #ffffff;
  --text: #1a202c;
  --text-secondary: #64748b;
  --primary: #0ea5e9;
  --accent: #0ea5e9;
  --success: #16a34a;
  --error: #e11d48;
  --warning: #d97706;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Material icon helper */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glass morphism */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* Utility classes */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.p-md { padding: 16px; }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }

h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1rem; font-weight: 600; }
p { line-height: 1.5; }

a {
  color: var(--primary);
  text-decoration: none;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: 100px;
}

/* Bottom navigation — matches user's design */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  background: rgba(16, 30, 34, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 100;
}

.bottom-nav a,
.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: color 0.15s;
}

.bottom-nav a:hover,
.bottom-nav button:hover {
  color: var(--primary);
}

.bottom-nav .active,
.bottom-nav a.active,
.bottom-nav button.active {
  color: var(--primary);
}

.bottom-nav .material-symbols-outlined {
  font-size: 28px;
}

/* Hide scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Page header with back button */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
}

/* ===== LIGHT THEME OVERRIDES ===== */
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.9);
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .activity-section {
  background: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .list-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary);
}
[data-theme="light"] .avatar {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .numpad-key:active {
  background: var(--primary);
  color: #fff;
}