:root {
  --bg: #0f172a; --surface: #1e293b; --surface2: #334155;
  --accent: #22d3ee; --accent2: #06b6d4; --danger: #f43f5e;
  --text: #f1f5f9; --muted: #94a3b8; --success: #22c55e;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100dvh;
  display:flex; flex-direction:column;
}
.container { max-width:480px; margin:0 auto; padding:16px; width:100%; }

.tab-bar {
  display:flex; gap:4px; margin-bottom:24px;
  background:var(--surface); border-radius:12px; padding:4px;
}
.tab-bar button {
  flex:1; padding:10px; border:none; border-radius:10px;
  background:transparent; color:var(--muted); font-size:0.9rem;
  font-weight:600; cursor:pointer; transition:all .2s;
}
.tab-bar button.active { background:var(--accent); color:var(--bg); }

.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:0.8rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;
}
.form-group input, .form-group select {
  width:100%; padding:12px 16px; border:1px solid var(--surface2);
  border-radius:10px; background:var(--surface); color:var(--text);
  font-size:1rem; outline:none; transition:border .2s;
}
.form-group input:focus, .form-group select:focus { border-color:var(--accent); }
.form-group input::placeholder { color:var(--muted); opacity:.6; }

.btn {
  width:100%; padding:14px; border:none; border-radius:10px;
  font-size:1rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.btn-primary { background:var(--accent); color:var(--bg); }
.btn-primary:hover { background:var(--accent2); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-outline {
  background:transparent; border:1px solid var(--surface2); color:var(--text);
}
.btn-outline:hover { background:var(--surface); }
.btn-outline:disabled { opacity:.3; cursor:not-allowed; }
.btn-outline:disabled:hover { background:transparent; }

.app-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
}
.app-header h1 { font-size:1.5rem; }
.app-header .user-badge { display:flex; align-items:center; gap:8px; }
.app-header .user-badge span { font-size:.85rem; color:var(--muted); }
.logout-btn {
  background:none; border:1px solid var(--surface2); color:var(--muted);
  padding:6px 12px; border-radius:8px; cursor:pointer; font-size:.8rem;
}
.logout-btn:hover { color:var(--danger); border-color:var(--danger); }

.error-msg, .success-msg {
  padding:10px 14px; border-radius:10px; font-size:.85rem; margin-bottom:16px; display:none;
}
.error-msg { background:rgba(244,63,94,.15); color:var(--danger); }
.success-msg { background:rgba(34,197,94,.15); color:var(--success); }

.add-card {
  background:var(--surface); border-radius:16px; padding:20px; margin-bottom:24px;
}
.add-card h2 {
  font-size:1rem; margin-bottom:16px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.add-row { display:flex; gap:12px; align-items:flex-end; }
.add-row .form-group { flex:1; margin-bottom:0; }
.add-row .btn { width:auto; padding:12px 24px; white-space:nowrap; }

.filter-card {
  background:var(--surface); border-radius:16px; padding:16px 20px; margin-bottom:16px;
}
.filter-quick { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.filter-chip {
  padding:6px 14px; border-radius:20px; border:1px solid var(--surface2);
  background:transparent; color:var(--muted); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.filter-chip:hover { border-color:var(--accent); color:var(--text); }
.filter-chip.active { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.filter-custom { display:flex; gap:12px; align-items:flex-end; }
.filter-custom .form-group { margin-bottom:0; flex:1; }
.filter-custom .form-group input { padding:8px 12px; font-size:.85rem; }

.readings-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.readings-header h2 {
  font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
}
.readings-header .count {
  font-size:.85rem; color:var(--muted); background:var(--surface);
  padding:4px 10px; border-radius:20px;
}
.reading-item {
  background:var(--surface); border-radius:12px; padding:16px; margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:center; animation:fadeIn .3s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.reading-value { font-size:1.5rem; font-weight:700; }
.reading-value .unit { font-size:.9rem; font-weight:400; color:var(--muted); margin-left:4px; }
.reading-meta { text-align:right; font-size:.8rem; color:var(--muted); }
.reading-meta .date { margin-bottom:4px; }
.reading-delete {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:1.1rem; padding:4px; transition:color .2s;
}
.reading-delete:hover { color:var(--danger); }

.empty-state { text-align:center; padding:48px 16px; color:var(--muted); }
.empty-state p { font-size:1.1rem; margin-bottom:8px; }
.empty-state .hint { font-size:.85rem; }

.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--surface2);
  padding:12px 20px; border-radius:12px; font-size:.9rem;
  box-shadow:0 8px 32px rgba(0,0,0,.4); display:none; z-index:100; white-space:nowrap;
}
.toast.show { display:block; animation:fadeIn .3s ease; }
.toast.error { border-color:var(--danger); color:var(--danger); }
.toast.success { border-color:var(--success); color:var(--success); }

.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.metric-card { background:var(--surface); border-radius:12px; padding:16px; text-align:center; }
.metric-card .value { font-size:1.6rem; font-weight:700; color:var(--accent); }
.metric-card .label { font-size:.75rem; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.03em; }
.metric-card .sub { font-size:.75rem; color:var(--muted); margin-top:2px; }
.metric-card .good { color:var(--success); }
.metric-card .bad { color:var(--danger); }
.metric-card .warn { color:#fbbf24; }
.metrics-section { margin-bottom:20px; }
.metrics-section h3 { font-size:.9rem; color:var(--muted); margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; }
.metrics-hbar { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:.8rem; }
.metrics-hbar .bar { flex:1; height:6px; border-radius:3px; background:var(--surface2); overflow:hidden; }
.metrics-hbar .bar-fill { height:100%; border-radius:3px; background:var(--accent); transition:width .3s; }

.spinner {
  display:inline-block; width:16px; height:16px;
  border:2px solid var(--bg); border-top-color:transparent;
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.menu-dots {
  position:relative; background:none; border:1px solid var(--surface2);
  color:var(--muted); width:34px; height:34px; border-radius:8px;
  cursor:pointer; font-size:1.2rem; line-height:1; display:flex;
  align-items:center; justify-content:center; transition:all .2s;
}
.menu-dots:hover { color:var(--text); border-color:var(--muted); }
.menu-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); right:0;
  background:var(--surface); border:1px solid var(--surface2);
  border-radius:10px; overflow:hidden; z-index:50; min-width:140px;
}
.menu-dropdown.show { display:block; }
.menu-dropdown button {
  display:block; width:100%; padding:10px 16px; border:none;
  background:transparent; color:var(--text); font-size:.85rem;
  text-align:left; cursor:pointer; transition:background .2s;
}
.menu-dropdown button:hover { background:var(--surface2); }

#page-loader {
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.85); align-items:center; justify-content:center;
  flex-direction:column; gap:12px;
}
#page-loader .spinner { width:32px; height:32px; border-width:3px; border-color:var(--accent); border-top-color:transparent; }
#page-loader span { color:var(--muted); font-size:.85rem; }

@media (max-width:600px) {
  .add-row { flex-direction:column; }
  .add-row .btn { width:100%; }
  .container { padding:12px; }
  .add-row .form-group { min-width:100% !important; }
}