:root {
  --bg: #0b1020;
  --panel: #151b2e;
  --panel-2: #1d2540;
  --line: #2a3350;
  --text: #eef2ff;
  --muted: #9aa6c7;
  --fuel: #2f9e6f;
  --rx: #3b82f6;
  --danger: #ef4444;
  --radius: 18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  min-height: 100%;
}

body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 120px; }

.loading { text-align: center; color: var(--muted); padding: 80px 0; }

/* Header */
.topbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; min-height: 44px;
}
.topbar h1 { font-size: 20px; margin: 0; flex: 1; letter-spacing: .3px; }
.back-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; width: 44px; height: 44px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; height: 44px; padding: 0 14px; cursor: pointer; font-size: 14px;
}

/* Big cards */
.card-grid { display: grid; gap: 14px; }
.big-card {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px; cursor: pointer; color: var(--text);
}
.big-card:active { transform: scale(.99); }
.big-card .emoji {
  width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.big-card.fuel .emoji { background: color-mix(in srgb, var(--fuel) 25%, transparent); }
.big-card.rx .emoji { background: color-mix(in srgb, var(--rx) 25%, transparent); }
.big-card .label { font-size: 20px; font-weight: 600; }
.big-card .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.big-card .chev { margin-left: auto; color: var(--muted); font-size: 22px; }

/* Group buttons */
.group-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 18px; cursor: pointer; color: var(--text);
  margin-bottom: 12px; font-size: 18px; font-weight: 600;
}
.group-btn .count { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 14px; }
.group-btn:active { transform: scale(.99); }

/* QR / prescription display */
.pass { margin-bottom: 26px; }
.pass .pass-label { color: var(--muted); font-size: 14px; margin: 0 0 8px; display:flex; align-items:center; gap:8px; }
.pass .pass-label .del {
  margin-left: auto; background: transparent; border: none; color: var(--danger);
  font-size: 13px; cursor: pointer; padding: 6px;
}
.qrcard {
  background: #ffffff; border-radius: 16px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
}
.qrcard img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 6px; }

/* Install bar */
.install-bar {
  width: 100%; margin-top: 16px;
  background: color-mix(in srgb, var(--rx) 20%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--rx) 55%, var(--line));
  color: var(--text); border-radius: 14px; padding: 15px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.install-bar:active { transform: scale(.99); }

/* Floating add button */
.fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #5b8cff, #3b82f6);
  color: #fff; border: none; border-radius: 999px;
  padding: 16px 26px; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 30px rgba(59,130,246,.45);
  display: flex; align-items: center; gap: 8px;
}

/* Forms */
.form { display: grid; gap: 16px; }
.field label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 14px; font-size: 16px;
}
.seg { display: flex; gap: 10px; }
.seg button {
  flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.seg button.active.fuel { border-color: var(--fuel); background: color-mix(in srgb, var(--fuel) 22%, var(--panel)); }
.seg button.active.rx { border-color: var(--rx); background: color-mix(in srgb, var(--rx) 22%, var(--panel)); }

.filedrop {
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center;
  color: var(--muted); cursor: pointer; background: var(--panel);
}
.filedrop.has { color: var(--text); border-color: var(--rx); }
.preview { margin-top: 12px; background:#fff; border-radius: 12px; padding: 10px; }
.preview img { width: 100%; display: block; border-radius: 6px; }

.btn-primary {
  background: linear-gradient(135deg, #5b8cff, #3b82f6); color: #fff; border: none;
  border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 700; cursor: pointer; width: 100%;
}
.btn-primary:disabled { opacity: .5; }

.empty { text-align: center; color: var(--muted); padding: 50px 10px; }
.empty .big { font-size: 40px; margin-bottom: 10px; }

.banner {
  background: color-mix(in srgb, var(--danger) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  color: #ffd7d7; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px;
}
.banner.offline { background: color-mix(in srgb, #eab308 16%, var(--panel)); border-color:#9a7b16; color:#fde68a; }

/* Confirm modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; max-width: 360px; width: 100%;
}
.modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.modal .actions { display: flex; gap: 10px; }
.modal .actions button {
  flex: 1; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line);
}
.modal .cancel { background: var(--panel); color: var(--text); }
.modal .confirm-danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Login */
.login-wrap { max-width: 360px; margin: 14vh auto 0; text-align: center; }
.login-wrap .logo { font-size: 54px; margin-bottom: 8px; }
.login-wrap h1 { margin: 0 0 4px; font-size: 26px; }
.login-wrap p { color: var(--muted); margin: 0 0 24px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; margin-bottom: 10px; }
.muted-note { color: var(--muted); font-size: 13px; }