:root {
  --clr-bg: #f4f7f5;
  --clr-surface: #ffffff;
  --clr-surface-alt: #eef3f0;
  --clr-teal: #0d7c66;
  --clr-teal-light: #d1ede8;
  --clr-teal-dark: #09594a;
  --clr-accent: #f0a832;
  --clr-text: #1e2a27;
  --clr-text-muted: #5f7570;
  --clr-border: #c9dbd5;
  --clr-low: #16a34a;
  --clr-low-bg: #dcfce7;
  --clr-moderate: #ca8a04;
  --clr-moderate-bg: #fef9c3;
  --clr-high: #ea580c;
  --clr-high-bg: #ffedd5;
  --clr-critical: #dc2626;
  --clr-critical-bg: #fee2e2;
  --radius: 14px;
  --shadow: 0 2px 24px rgba(13,124,102,.08);
  --shadow-lg: 0 8px 40px rgba(13,124,102,.13);
}

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

body {
  font-family: 'Outfit', sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50%     { opacity:.55; }
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:1; transform:translateX(0); }
}

.anim-fade-up { animation: fadeUp .45s cubic-bezier(.22,.68,0,1.2) both; }

/* ─── SCREENS (only one visible at a time) ─── */
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }

/* ════════════════════════════════════════════
   SCREEN 1 – API KEY / LANDING
   ════════════════════════════════════════════ */
#screen-apikey {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e8f5f0 0%, #f4f7f5 50%, #eef3f0 100%);
}
#screen-apikey.active { display:flex; }

.apikey-card {
  background: var(--clr-surface);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 52px 44px 48px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  animation: fadeUp .6s cubic-bezier(.22,.68,0,1.2) both;
}

.apikey-logo {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--clr-teal), var(--clr-teal-dark));
  border-radius: 20px;
  margin: 0 auto 24px;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(13,124,102,.35);
}
.apikey-logo svg { width:36px; height:36px; }

.apikey-card h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--clr-teal-dark);
  margin-bottom: 6px;
}
.apikey-card .subtitle {
  font-size: 15px;
  color: var(--clr-text-muted);
  margin-bottom: 32px;
  font-weight: 300;
}

.apikey-card label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}
.apikey-card input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .25s;
  margin-bottom: 10px;
}
.apikey-card input:focus { border-color: var(--clr-teal); }

.hint {
  font-size: 13px;
  color: var(--clr-text-muted);
  text-align: left;
  margin-bottom: 28px;
}
.hint a { color: var(--clr-teal); text-decoration:none; font-weight:600; }
.hint a:hover { text-decoration:underline; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--clr-teal), var(--clr-teal-dark));
  color: #fff;
  box-shadow: 0 4px 16px rgba(13,124,102,.4);
  width: 100%;
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(13,124,102,.5); }

.btn-ghost {
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  width: 100%;
}
.btn-ghost:hover { background: var(--clr-teal-light); }

.btn-danger {
  background: #fef2f2;
  color: #dc2626;
  padding: 10px 16px;
  font-size:14px;
}
.btn-danger:hover { background:#fee2e2; }

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ════════════════════════════════════════════
   SCREEN 2 – MAIN APP
   ════════════════════════════════════════════ */

/* ─── HEADER ─── */
.header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(13,124,102,.06);
}
.header-left { display:flex; align-items:center; gap:14px; }
.header-logo {
  width:42px; height:42px;
  background: linear-gradient(135deg, var(--clr-teal), var(--clr-teal-dark));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 12px rgba(13,124,102,.3);
}
.header-logo svg { width:22px; height:22px; }
.header-title { font-family:'DM Serif Display',serif; font-size:20px; color:var(--clr-teal-dark); font-weight:400; }
.header-sub { font-size:12px; color:var(--clr-text-muted); font-weight:300; }

/* ─── TABS ─── */
.tabs { display:flex; gap:6px; }
.tab {
  padding: 9px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tab:hover { background: var(--clr-surface-alt); }
.tab.active { background: var(--clr-teal-light); color: var(--clr-teal-dark); }

/* ─── MAIN CONTENT ─── */
.main { max-width:780px; margin:0 auto; padding:36px 24px 60px; }

/* ─── CARD ─── */
.card {
  background: var(--clr-surface);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 36px;
  border: 1px solid var(--clr-border);
}
.card h2 {
  font-family: 'DM Serif Display',serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--clr-teal-dark);
  margin-bottom: 6px;
}
.card .card-sub {
  font-size:15px;
  color:var(--clr-text-muted);
  margin-bottom: 28px;
  font-weight: 300;
}

/* ─── FORM SECTIONS ─── */
.form-section { margin-bottom: 24px; }
.form-section label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--clr-text-muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}
.form-section label .icon { margin-right:6px; }

textarea {
  width:100%;
  padding:14px 18px;
  border:2px solid var(--clr-border);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:15px;
  resize:vertical;
  min-height:130px;
  outline:none;
  transition:border-color .25s;
  color:var(--clr-text);
  background:var(--clr-surface);
}
textarea:focus { border-color:var(--clr-teal); }
textarea::placeholder { color:#9aadaa; }

/* ─── UPLOAD BOX ─── */
.upload-box {
  border: 2px dashed var(--clr-border);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  background: var(--clr-bg);
}
.upload-box:hover { border-color:var(--clr-teal); background:var(--clr-teal-light); }
.upload-box .upload-icon { font-size:32px; margin-bottom:8px; }
.upload-box .upload-label { font-size:15px; font-weight:600; color:var(--clr-text); }
.upload-box .upload-hint { font-size:13px; color:var(--clr-text-muted); margin-top:4px; }

/* ─── IMAGE PREVIEW ─── */
.image-preview-wrap { position:relative; }
.image-preview-wrap img { width:100%; height:180px; object-fit:cover; border-radius:var(--radius); display:block; }
.image-remove-btn {
  position:absolute; top:10px; right:10px;
  background:rgba(220,38,38,.88);
  border:none; color:#fff;
  width:30px; height:30px;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ─── VOICE STATES ─── */
.voice-btn-recording {
  background: #ef4444;
  color: #fff;
  animation: pulse 1.4s infinite;
}
.voice-btn-recording:hover { filter:brightness(1.1); }

.voice-done {
  display:flex; align-items:center; justify-content:space-between;
  background:#f0fdf4; border:2px solid #bbf7d0;
  border-radius:var(--radius); padding:12px 18px;
}
.voice-done span { font-weight:600; color:#16a34a; font-size:15px; }

/* ─── SPINNER ─── */
.spinner {
  width:20px; height:20px;
  border:3px solid rgba(255,255,255,.3);
  border-top:3px solid #fff;
  border-radius:50%;
  animation: spin .7s linear infinite;
  display:inline-block;
}

/* ─── DASHBOARD ─── */
.dashboard-title {
  font-family:'DM Serif Display',serif;
  font-size:26px;
  font-weight:400;
  color:var(--clr-teal-dark);
  margin-bottom:24px;
}

.empty-state {
  background:var(--clr-surface);
  border-radius:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--clr-border);
  padding:72px 32px;
  text-align:center;
}
.empty-state .empty-icon { font-size:52px; margin-bottom:16px; }
.empty-state p { color:var(--clr-text-muted); font-size:16px; }
.empty-state .empty-sub { font-size:14px; margin-top:6px; color:#9aadaa; }

/* ─── REPORT CARD ─── */
.report-card {
  background:var(--clr-surface);
  border-radius:20px;
  box-shadow:var(--shadow);
  border:1px solid var(--clr-border);
  overflow:hidden;
  margin-bottom:22px;
  animation: slideIn .35s cubic-bezier(.22,.68,0,1.2) both;
}

.report-header {
  padding:18px 24px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.report-header .risk-label { font-size:18px; font-weight:700; }
.risk-badge {
  padding:4px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
}
.report-timestamp { font-size:13px; color:#9aadaa; margin-left:auto; }

/* risk colours */
.risk-LOW    .report-header { background:var(--clr-low-bg); border-left:5px solid var(--clr-low); }
.risk-LOW    .risk-label    { color:var(--clr-low); }
.risk-LOW    .risk-badge    { background:#bbf7d0; color:var(--clr-low); }

.risk-MODERATE .report-header { background:var(--clr-moderate-bg); border-left:5px solid var(--clr-moderate); }
.risk-MODERATE .risk-label    { color:var(--clr-moderate); }
.risk-MODERATE .risk-badge    { background:#fde047; color:var(--clr-moderate); }

.risk-HIGH .report-header { background:var(--clr-high-bg); border-left:5px solid var(--clr-high); }
.risk-HIGH .risk-label    { color:var(--clr-high); }
.risk-HIGH .risk-badge    { background:#fed7aa; color:var(--clr-high); }

.risk-CRITICAL .report-header { background:var(--clr-critical-bg); border-left:5px solid var(--clr-critical); }
.risk-CRITICAL .risk-label    { color:var(--clr-critical); }
.risk-CRITICAL .risk-badge    { background:#fecaca; color:var(--clr-critical); }

.report-body { padding:24px; }

.report-section { margin-bottom:20px; }
.report-section-title { font-size:14px; font-weight:700; color:var(--clr-text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.report-section p { font-size:15px; color:var(--clr-text); line-height:1.65; }

/* indicators */
.indicator-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:7px; }
.indicator-dot { color:var(--clr-teal); font-size:10px; margin-top:6px; flex-shrink:0; }

/* recommendations */
.rec-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
.rec-num {
  width:26px; height:26px; min-width:26px;
  background:var(--clr-teal-light);
  color:var(--clr-teal-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}

/* community message */
.community-msg {
  background:linear-gradient(135deg,#eef7f4,#eef2ff);
  border:1px solid var(--clr-teal-light);
  border-radius:var(--radius);
  padding:18px 22px;
}
.community-msg .cm-label { font-size:13px; font-weight:700; color:var(--clr-teal-dark); margin-bottom:6px; }
.community-msg p { font-size:15px; color:var(--clr-text-muted); font-style:italic; }

/* input badges */
.input-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.badge { padding:5px 13px; border-radius:8px; font-size:13px; font-weight:600; }
.badge-text { background:#dbeafe; color:#1d4ed8; }
.badge-voice { background:#ede9fe; color:#7c3aed; }
.badge-image { background:#dcfce7; color:#16a34a; }

/* ─── FOOTER ─── */
.footer {
  background:var(--clr-surface);
  border-top:1px solid var(--clr-border);
  padding:28px 24px;
  text-align:center;
}
.footer p { font-size:14px; color:var(--clr-text-muted); }
.footer .hl { color:var(--clr-teal); font-weight:600; }
.footer .sub { font-size:13px; color:#9aadaa; margin-top:4px; }

/* ─── RESPONSIVE ─── */
@media(max-width:600px){
  .card, .apikey-card { padding:28px 22px; }
  .header { padding:12px 18px; }
  .main { padding:24px 16px 56px; }
}