/* ───────────────────────────────────────────────────────────────────────────
   Skindra Landing — Device frame + static app-screen recreations.
   Faithful, static (no React) recreations of the real app screens so the
   marketing page can show product value with real content in the HTML.
   Tuned for a ~300px-wide device screen.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Device bezel ──────────────────────────────────────────────────────────── */
.device {
  --dev-w: clamp(256px, 74vw, 316px);
  width: var(--dev-w);
  aspect-ratio: 296 / 620;
  border-radius: 13.5% / 6.4%;
  background: linear-gradient(160deg, #2a1d18, #16100d);
  padding: 2.8%;
  box-shadow:
    0 2px 4px rgba(44, 31, 26, 0.5) inset,
    0 30px 60px -20px rgba(44, 31, 26, 0.45),
    0 12px 28px -12px rgba(44, 31, 26, 0.3);
  flex: none;
}
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11% / 5.4%;
  overflow: hidden;
  background: var(--sk-canvas-gradient);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
/* dynamic island — sits inside the status band, clear of content */
.device-island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 29%;
  height: 3.4%;
  min-height: 15px;
  border-radius: 999px;
  background: #16100d;
  z-index: 30;
}

/* status bar — reserves a top safe-area band so the island never sits on content */
.scr-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 14px 18px 4px;
  box-sizing: border-box;
  flex: none;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--sk-text-primary);
}
.scr-status .sig {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 13px;
}

/* ── Screen stack (hero cycles through these) ──────────────────────────────── */
/* On the hero phone the cycling screens live in .scr-stack so the tab bar
   below stays persistent; the active footer tab signals the current screen. */
.scr-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.scr.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* When a device shows just one static screen */
.device--single .scr {
  position: relative;
  opacity: 1;
  flex: 1;
  min-height: 0;
}
/* the hero phone is shorter than the rail phones — tighten the cycling screens
   so taller layouts (e.g. the plan) fit without clipping */
.device.main .scr-body { padding-top: 4px; }
.device.main .plan-title { font-size: 16px; margin-bottom: 6px; }
.device.main .plan-goal { padding: 8px 10px; }
.device.main .pstep { padding: 11px; }
.device.main .pstep + .pstep { margin-top: 8px; }
.device.main .pstep-head { margin-bottom: 8px; }
.device.main .pstep-instr { margin-bottom: 7px; font-size: 10.5px; }
.device.main .pstep-reason p { font-size: 9.5px; }
.device.main .pstep-pills { margin-bottom: 8px; }
.device.main .scard { padding: 12px; }
.device.main .scard + .pstep { margin-top: 9px; }

.scr-body {
  flex: 1;
  min-height: 0;
  padding: 8px 16px 14px;
  overflow: hidden;
}
.scr-h {
  font-family: var(--sk-font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.4px;
  color: var(--sk-text-primary);
  margin: 6px 0 2px;
}
.scr-sub {
  font-family: var(--sk-font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sk-text-secondary);
  margin: 0 0 12px;
}

/* generic card inside a screen */
.scard {
  background: var(--sk-surface);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--sk-shadow-sm);
}
.scard + .scard { margin-top: 11px; }

/* ── SCAN screen ───────────────────────────────────────────────────────────── */
.scan-view {
  margin: 10px 0 0;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 18%, #fff 0%, var(--sk-surface-subtle) 70%);
  aspect-ratio: 1 / 1.12;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--sk-shadow-sm) inset;
}
.scan-tube {
  width: 34%;
  height: 64%;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(150deg, #fbeae4, #f0d8cf);
  box-shadow: 0 8px 20px -6px rgba(44, 31, 26, 0.28);
  position: relative;
}
.scan-tube::before {
  content: "";
  position: absolute;
  inset: 12% 24% auto;
  height: 16%;
  border-radius: 4px;
  background: var(--sk-primary);
  opacity: 0.85;
}
.scan-bracket {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--sk-primary);
}
.scan-bracket.tl { top: 16%; left: 16%; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-bracket.tr { top: 16%; right: 16%; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-bracket.bl { bottom: 16%; left: 16%; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-bracket.br { bottom: 16%; right: 16%; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-line {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--sk-primary), transparent);
  box-shadow: 0 0 10px var(--sk-primary-light);
  animation: scanline 2.6s ease-in-out infinite;
}
@keyframes scanline {
  0%, 100% { top: 22%; opacity: 0.5; }
  50% { top: 74%; opacity: 1; }
}
.scan-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  padding: 10px;
  background: var(--sk-surface);
  border-radius: 14px;
  box-shadow: var(--sk-shadow-sm);
  font-family: var(--sk-font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--sk-text-secondary);
}
.scan-cap ion-icon { font-size: 16px; color: var(--sk-primary); }

/* ── RESULT / score screen ─────────────────────────────────────────────────── */
.prod-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.prod-thumb {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--sk-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.prod-thumb ion-icon { font-size: 21px; color: var(--sk-text-tertiary); }
.prod-brand { font-family: var(--sk-font-body); font-size: 11px; color: var(--sk-text-secondary); }
.prod-name { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14.5px; color: var(--sk-text-primary); letter-spacing: -0.2px; }

.score-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  padding: 15px 16px;
  background: var(--sk-status-helpful-bg);
}
.score-num {
  font-family: var(--sk-font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--sk-status-helpful);
}
.score-label { font-family: var(--sk-font-heading); font-weight: 600; font-size: 15px; color: var(--sk-status-helpful); }
.score-note { font-family: var(--sk-font-body); font-size: 11px; color: var(--sk-text-secondary); margin-top: 1px; }

.tally-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--sk-border-subtle);
}
.tally-row:last-child { border-bottom: 0; }
.tally-val { font-family: var(--sk-font-body); font-weight: 600; font-size: 12px; color: var(--sk-text-secondary); }

/* Ampel chip */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 11px;
}
.ampel .dot { width: 7px; height: 7px; border-radius: 999px; }
.ampel.helpful { background: var(--sk-status-helpful-bg); color: var(--sk-status-helpful); }
.ampel.helpful .dot { background: var(--sk-status-helpful); }
.ampel.neutral { background: var(--sk-status-neutral-bg); color: var(--sk-status-neutral-text); }
.ampel.neutral .dot { background: var(--sk-status-neutral); }
.ampel.irritating { background: var(--sk-status-irritating-bg); color: var(--sk-status-irritating); }
.ampel.irritating .dot { background: var(--sk-status-irritating); }

/* ── DETAIL / ingredient groups ────────────────────────────────────────────── */
.ing-group { margin-top: 12px; }
.ing-group:first-child { margin-top: 4px; }
.ing-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ing-head .dot { width: 8px; height: 8px; border-radius: 999px; }
.ing-head .lbl { font-family: var(--sk-font-body); font-weight: 600; font-size: 11.5px; }
.ing-head .n { font-family: var(--sk-font-body); font-weight: 600; font-size: 11px; opacity: 0.7; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--sk-font-body);
  font-weight: 500;
  font-size: 10.5px;
  background: var(--sk-surface-subtle);
  color: var(--sk-text-secondary);
}
.chip.helpful { background: var(--sk-status-helpful-bg); color: var(--sk-status-helpful); }
.chip.neutral { background: var(--sk-status-neutral-bg); color: var(--sk-status-neutral-text); }
.chip.irritating { background: var(--sk-status-irritating-bg); color: var(--sk-status-irritating); }

/* ── LIBRARY screen ────────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 11px;
  background: var(--sk-surface);
  color: var(--sk-text-secondary);
  box-shadow: var(--sk-shadow-sm);
}
.filter-pill.on { background: var(--sk-primary); color: #fff; box-shadow: none; }
.ing-card {
  background: var(--sk-surface);
  border-radius: 14px;
  padding: 12px 13px;
  margin-bottom: 9px;
  box-shadow: var(--sk-shadow-sm);
  border-left: 3px solid var(--sk-border);
}
.ing-card.helpful { border-left-color: var(--sk-status-helpful); }
.ing-card.neutral { border-left-color: var(--sk-status-neutral); }
.ing-card.irritating { border-left-color: var(--sk-status-irritating); }
.ing-card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ing-card .inci { font-family: var(--sk-font-body); font-weight: 600; font-size: 12px; color: var(--sk-text-primary); letter-spacing: 0.2px; flex: 1; }
.ing-card p { font-family: var(--sk-font-body); font-size: 10.5px; line-height: 1.5; color: var(--sk-text-secondary); margin: 0; }

/* ── HAUT / profile screen ─────────────────────────────────────────────────── */
.haut-card {
  background: var(--sk-status-neutral-bg);
  border-radius: 18px;
  padding: 15px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.haut-big { font-family: var(--sk-font-heading); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -1px; color: var(--sk-status-neutral); }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sk-border-subtle); }
.hist-row:last-child { border-bottom: 0; }
.hist-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.hist-pill { margin-left: auto; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px; font-family: var(--sk-font-body); font-weight: 600; font-size: 11px; }

/* bottom tab bar inside a screen */
.scr-tabs {
  display: flex;
  justify-content: space-around;
  padding: 9px 6px 7px;
  border-top: 1px solid var(--sk-border-subtle);
  background: var(--sk-tabbar-bg);
}
.scr-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--sk-tabbar-inactive); font-family: var(--sk-font-body); font-size: 8.5px; font-weight: 500; transition: color 420ms ease; }
.scr-tab ion-icon { font-size: 19px; transition: transform 420ms cubic-bezier(0.22,1,0.36,1); }
.scr-tab.on { color: var(--sk-tabbar-active); font-weight: 600; }
.scr-tab.on ion-icon { transform: translateY(-1px) scale(1.08); }
.scr-home { display: flex; justify-content: center; padding: 4px 0 7px; background: var(--sk-tabbar-bg); }
.scr-home span { width: 32%; height: 4px; border-radius: 3px; background: var(--sk-text-primary); opacity: 0.8; }

/* a soft primary button rendered inside screens */
.scr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  border-radius: 13px;
  background: var(--sk-primary);
  color: #fff;
  font-family: var(--sk-font-body);
  font-weight: 600;
  font-size: 12.5px;
  margin-top: 12px;
}
.scr-btn ion-icon { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAITHFUL APP-SCREEN RECREATIONS (match the real Skindra app layouts)
   ═══════════════════════════════════════════════════════════════════════════ */

/* generic in-screen card title */
.card-title { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14px; letter-spacing: -0.2px; color: var(--sk-text-primary); margin: 0 0 9px; }
.card-sub { font-family: var(--sk-font-body); font-size: 10.5px; line-height: 1.45; color: var(--sk-text-secondary); margin: -5px 0 10px; }

/* a left-aligned page heading variant (with optional back chevron row) */
.scr-top { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.scr-top ion-icon { font-size: 18px; color: var(--sk-text-primary); flex: none; }
.scr-top .scr-h { margin: 0; }

/* ── MEINE HAUT · Assessment-Detail ───────────────────────────────────────── */
.asmt-hero {
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 14px;
  text-align: center;
  box-shadow: var(--sk-shadow-md);
  background: var(--sk-status-neutral-bg);
}
.asmt-dot { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 999px; }
.asmt-score { font-family: var(--sk-font-heading); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -1.5px; }
.asmt-max { font-family: var(--sk-font-body); font-size: 11px; color: var(--sk-text-secondary); margin-top: 2px; }
.asmt-label { font-family: var(--sk-font-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.2px; margin-top: 6px; }
.asmt-date { font-family: var(--sk-font-body); font-size: 11px; color: var(--sk-text-secondary); margin-top: 3px; }
.asmt-poem { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; }
.asmt-poem .i { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; font-style: italic; }
.asmt-poem span { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-tertiary); }

.ans-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.ans-row + .ans-row { border-top: 1px solid var(--sk-border-subtle); }
.ans-label { font-family: var(--sk-font-body); font-size: 11.5px; color: var(--sk-text-secondary); }
.ans-chip { font-family: var(--sk-font-body); font-weight: 500; font-size: 11px; color: var(--sk-text-primary); background: var(--sk-background); border-radius: 999px; padding: 3px 11px; flex: none; }
.ans-emoji { font-size: 18px; }

/* zone param badges (Betroffene Stellen) */
.zone-name { font-family: var(--sk-font-body); font-weight: 600; font-size: 11.5px; color: var(--sk-text-primary); }
.zone-frac { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-secondary); }
.pbadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pbadge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--sk-background); font-family: var(--sk-font-body); font-size: 9.5px; }
.pbadge b { font-weight: 600; color: var(--sk-text-primary); }
.pbadge span { color: var(--sk-text-secondary); }
.pbadge.lo { background: #EEF5EF; }
.pbadge.mid { background: #F7F1E8; }
.pbadge.hi { background: #FAEEEC; }

/* ── MEINE PRODUKTE · Übersicht ───────────────────────────────────────────── */
.seg-bar { display: flex; gap: 6px; margin: 2px 0 12px; }
.seg {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 4px; border-radius: 999px; background: var(--sk-surface);
  box-shadow: var(--sk-shadow-sm);
  font-family: var(--sk-font-body); font-weight: 600; font-size: 9.5px; color: var(--sk-text-secondary);
}
.seg ion-icon { font-size: 12px; }
.seg.on { background: var(--sk-primary); color: #fff; box-shadow: none; }
.seg .seg-n { background: var(--sk-surface-subtle); color: var(--sk-text-secondary); min-width: 14px; height: 14px; border-radius: 999px; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
.seg.on .seg-n { background: rgba(255,255,255,0.25); color: #fff; }

.plist-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--sk-surface); border-radius: 16px; padding: 11px 12px;
  box-shadow: var(--sk-shadow-sm);
}
.plist-row + .plist-row { margin-top: 9px; }
.plist-img { width: 46px; height: 46px; border-radius: 12px; background: var(--sk-surface-subtle); display: flex; align-items: center; justify-content: center; flex: none; }
.plist-img ion-icon { font-size: 20px; color: var(--sk-text-tertiary); }
.plist-info { flex: 1; min-width: 0; }
.plist-titlerow { display: flex; align-items: center; gap: 6px; }
.plist-name { font-family: var(--sk-font-body); font-weight: 600; font-size: 12.5px; color: var(--sk-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist-titlerow ion-icon { font-size: 12px; flex: none; }
.plist-brand { font-family: var(--sk-font-body); font-size: 10.5px; color: var(--sk-text-secondary); margin: 1px 0 5px; }
.plist-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plist-score { font-family: var(--sk-font-body); font-weight: 600; font-size: 10px; padding: 2px 9px; border-radius: 999px; }
.plist-date { font-family: var(--sk-font-body); font-size: 9.5px; color: var(--sk-text-tertiary); }
.plist-row > ion-icon.chev { font-size: 15px; color: var(--sk-text-tertiary); flex: none; }

/* ── PRODUKT-DETAIL · Scan-Ergebnis + Einschätzung ────────────────────────── */
.pd-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.pd-thumb { width: 50px; height: 50px; border-radius: 14px; background: var(--sk-surface-subtle); display: flex; align-items: center; justify-content: center; flex: none; }
.pd-thumb ion-icon { font-size: 23px; color: var(--sk-text-tertiary); }
.pd-info { flex: 1; min-width: 0; }
.pd-brand { font-family: var(--sk-font-body); font-size: 10.5px; color: var(--sk-text-secondary); }
.pd-name { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14px; letter-spacing: -0.2px; color: var(--sk-text-primary); line-height: 1.2; }
.pd-actions { display: flex; gap: 4px; flex: none; }
.pd-actions ion-icon { font-size: 21px; }
.status-chips { display: flex; gap: 6px; margin-bottom: 11px; }
.status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--sk-surface); box-shadow: var(--sk-shadow-sm); font-family: var(--sk-font-body); font-weight: 600; font-size: 9.5px; }
.status-chip ion-icon { font-size: 11px; }

.ai-score { display: flex; align-items: center; gap: 13px; border-radius: 15px; padding: 13px 15px; margin-bottom: 11px; }
.ai-num { font-family: var(--sk-font-heading); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -1.5px; flex: none; }
.ai-label { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14px; }
.ai-sub { font-family: var(--sk-font-body); font-size: 10.5px; color: var(--sk-text-secondary); margin-top: 1px; }
.ai-comment { font-family: var(--sk-font-body); font-size: 11px; line-height: 1.55; color: var(--sk-text-secondary); margin: 0; }

/* ingredient-group comment line (Inhaltsstoffe card) */
.ing-comment { font-family: var(--sk-font-body); font-size: 10px; line-height: 1.5; color: var(--sk-text-secondary); margin: 0 0 8px; }

/* ── PFLEGEPLAN · Dein Plan ───────────────────────────────────────────────── */
.plan-title { font-family: var(--sk-font-heading); font-weight: 600; font-size: 18px; letter-spacing: -0.4px; color: var(--sk-text-primary); margin: 0 0 8px; }
.plan-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.rating-pill { font-family: var(--sk-font-body); font-weight: 600; font-size: 10px; padding: 3px 10px; border-radius: 999px; }
.plan-date { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-tertiary); }
.plan-situation { font-family: var(--sk-font-body); font-size: 11px; line-height: 1.55; color: var(--sk-text-secondary); margin: 0 0 10px; }
.plan-goal { display: flex; gap: 8px; align-items: flex-start; background: var(--sk-surface-subtle); border-radius: 12px; padding: 10px 12px; }
.plan-goal ion-icon { font-size: 13px; color: var(--sk-primary); flex: none; margin-top: 1px; }
.plan-goal p { font-family: var(--sk-font-body); font-weight: 500; font-size: 11px; line-height: 1.5; color: var(--sk-text-primary); margin: 0; }

.sec-head { margin: 4px 0 10px; }
.sec-title { font-family: var(--sk-font-heading); font-weight: 600; font-size: 16px; letter-spacing: -0.3px; color: var(--sk-text-primary); margin: 0 0 3px; }
.sec-sub { font-family: var(--sk-font-body); font-size: 10.5px; line-height: 1.45; color: var(--sk-text-secondary); margin: 0; }

.pstep { background: var(--sk-surface); border-radius: 18px; padding: 13px; box-shadow: var(--sk-shadow-sm); }
.pstep + .pstep { margin-top: 9px; }
.pstep-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pstep-num { width: 26px; height: 26px; border-radius: 999px; background: var(--sk-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sk-font-body); font-weight: 600; font-size: 12px; flex: none; }
.pstep-img { width: 38px; height: 38px; border-radius: 10px; background: var(--sk-surface-subtle); display: flex; align-items: center; justify-content: center; flex: none; }
.pstep-img ion-icon { font-size: 17px; color: var(--sk-text-tertiary); }
.pstep-prod { flex: 1; min-width: 0; }
.pstep-name { font-family: var(--sk-font-body); font-weight: 600; font-size: 12.5px; color: var(--sk-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep-brand { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-secondary); }
.pstep-head > ion-icon.chev { font-size: 14px; color: var(--sk-text-tertiary); flex: none; }
.pstep-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.ppill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-family: var(--sk-font-body); font-weight: 500; font-size: 9.5px; }
.ppill.time { background: rgba(122,173,200,0.22); color: var(--sk-contrast); }
.ppill.time ion-icon { font-size: 11px; }
.ppill.area { background: var(--sk-surface-subtle); color: var(--sk-text-secondary); }
.pstep-instr { font-family: var(--sk-font-body); font-size: 11px; line-height: 1.5; color: var(--sk-text-primary); margin: 0 0 9px; }
.pstep-reason { border-left: 3px solid var(--sk-status-helpful); padding-left: 10px; }
.pstep-reason p { font-family: var(--sk-font-body); font-size: 10px; line-height: 1.5; color: var(--sk-text-secondary); margin: 0; }

/* stacking helpers so span-based info blocks lay out as rows of lines */
.pd-info { display: flex; flex-direction: column; gap: 1px; }
.pd-brand, .pd-name { display: block; }
.plist-brand { display: block; }
.plist-titlerow .plist-name { flex: 1; min-width: 0; }
.pstep-prod { display: flex; flex-direction: column; }
.pstep-name, .pstep-brand { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   UPDATED APP-SCREEN RECREATIONS (2026 design refresh)
   New building blocks for: Scannen · Hautverlauf · Inhaltsstoffe · Routine.
   All colours pulled from --sk-* tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* allow bottom-anchored FABs / sheets to sit inside a screen body */
.scr-body { position: relative; }

/* ── SCANNEN · Scan-Ergebnis ──────────────────────────────────────────────── */
.scan-found {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sk-status-helpful-bg);
  color: var(--sk-status-helpful);
  border-radius: 999px; padding: 5px 12px;
  font-family: var(--sk-font-body); font-weight: 600; font-size: 10.5px;
  margin-bottom: 11px;
}
.scan-found ion-icon { font-size: 13px; }

/* erkannte Inhaltsstoffe: dot + Name + INCI */
.ing-dotrow { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.ing-dotrow + .ing-dotrow { border-top: 1px solid var(--sk-border-subtle); }
.ing-dotrow .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.ing-dotrow .nm { font-family: var(--sk-font-body); font-weight: 600; font-size: 11.5px; color: var(--sk-text-primary); }
.ing-dotrow .inci { font-family: var(--sk-font-body); font-size: 9.5px; color: var(--sk-text-tertiary); letter-spacing: 0.3px; }

/* KI-Analyse card */
.ki-card {
  background: var(--sk-surface); border-radius: 18px; padding: 14px;
  border: 1px solid var(--sk-accent-light);
  box-shadow: var(--sk-shadow-sm);
}
.ki-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ki-badge { width: 26px; height: 26px; border-radius: 9px; background: var(--sk-status-irritating-bg); display: flex; align-items: center; justify-content: center; flex: none; }
.ki-badge ion-icon { font-size: 14px; color: var(--sk-accent); }
.ki-title { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14px; letter-spacing: -0.2px; color: var(--sk-text-primary); }
.ki-lead { font-family: var(--sk-font-body); font-size: 11px; line-height: 1.5; color: var(--sk-text-secondary); margin: 0 0 10px; }
.ki-check { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.ki-check ion-icon { font-size: 12px; color: var(--sk-status-helpful); flex: none; }
.ki-check span { font-family: var(--sk-font-body); font-size: 10.5px; color: var(--sk-text-secondary); }

/* primary button rendered inside a screen */
.scr-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--sk-primary); color: var(--sk-on-primary);
  border-radius: 999px; padding: 11px 18px;
  font-family: var(--sk-font-body); font-weight: 600; font-size: 12.5px;
  box-shadow: 0 6px 16px -6px rgba(184, 92, 74, 0.5);
}
.scr-cta ion-icon { font-size: 14px; }

/* ── HAUTVERLAUF · Meine Haut ─────────────────────────────────────────────── */
.skin-streak {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  width: 66px; height: 66px; border-radius: 999px;
  background: var(--sk-status-helpful-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  box-shadow: var(--sk-shadow-md);
}
.skin-streak ion-icon { font-size: 16px; color: var(--sk-status-helpful); }
.skin-streak .num { font-family: var(--sk-font-heading); font-weight: 700; font-size: 15px; line-height: 1; color: var(--sk-status-helpful); }
.skin-streak .unit { font-family: var(--sk-font-body); font-weight: 500; font-size: 8.5px; color: var(--sk-text-secondary); }
.skin-checkin { position: relative; margin-top: 40px; padding-top: 40px; }

.checkin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.checkin-top .lbl { font-family: var(--sk-font-body); font-weight: 500; font-size: 11px; color: var(--sk-text-secondary); }
.checkin-top .day { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-tertiary); }
.checkin-score { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.checkin-score .big { font-family: var(--sk-font-heading); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.8px; color: var(--sk-status-helpful); }
.checkin-score .of { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-secondary); }
.checkin-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--sk-status-helpful-bg); border-radius: 999px; padding: 3px 10px; font-family: var(--sk-font-body); font-weight: 500; font-size: 10.5px; color: var(--sk-status-helpful); }
.checkin-pill .d { width: 7px; height: 7px; border-radius: 999px; background: var(--sk-status-helpful); }
.checkin-trend { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; background: var(--sk-surface-subtle); border-radius: 999px; padding: 2px 8px; font-family: var(--sk-font-body); font-weight: 600; font-size: 10px; color: var(--sk-status-helpful); }
.checkin-trend ion-icon { font-size: 11px; }

.sev-bar { position: relative; height: 9px; border-radius: 999px; margin-bottom: 7px;
  background: linear-gradient(90deg, var(--sk-status-helpful) 0%, var(--sk-status-neutral) 50%, var(--sk-status-irritating) 100%); }
.sev-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 999px; background: var(--sk-status-helpful); border: 2px solid var(--sk-surface); box-shadow: var(--sk-shadow-sm); }
.sev-scale { display: flex; justify-content: space-between; font-family: var(--sk-font-body); font-size: 9px; color: var(--sk-text-tertiary); }

/* ── INHALTSSTOFFE · Bibliothek ───────────────────────────────────────────── */
.lib-filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lib-filter { display: inline-flex; align-items: center; gap: 6px; background: var(--sk-surface-subtle); border: 1px solid var(--sk-border); border-radius: 999px; padding: 6px 12px; font-family: var(--sk-font-body); font-weight: 500; font-size: 11px; color: var(--sk-text-secondary); }
.lib-filter ion-icon { font-size: 12px; }
.lib-filter ion-icon.chev { font-size: 11px; color: var(--sk-text-tertiary); }
.lib-count { margin-left: auto; font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-tertiary); }
.ing-card .de { font-family: var(--sk-font-body); font-size: 10px; color: var(--sk-text-tertiary); }
.ing-card .tag { margin-left: auto; border-radius: 7px; padding: 2px 8px; font-family: var(--sk-font-body); font-weight: 600; font-size: 9.5px; }
.ing-card.helpful .tag { background: var(--sk-status-helpful-bg); color: var(--sk-status-helpful); }
.ing-card.neutral .tag { background: var(--sk-status-neutral-bg); color: var(--sk-status-neutral-text); }
.ing-card.irritating .tag { background: var(--sk-status-irritating-bg); color: var(--sk-status-irritating); }
.ing-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ing-tag { background: var(--sk-surface-subtle); border: 1px solid var(--sk-border-subtle); border-radius: 999px; padding: 2px 9px; font-family: var(--sk-font-body); font-weight: 500; font-size: 9.5px; color: var(--sk-text-tertiary); }

/* ── ROUTINE · Maskottchen + Streak ───────────────────────────────────────── */
.rt-streak { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--sk-surface); border-radius: 999px; padding: 9px 16px; box-shadow: var(--sk-shadow-sm); }
.rt-streak ion-icon { font-size: 16px; color: var(--sk-status-helpful); }
.rt-streak span { font-family: var(--sk-font-heading); font-weight: 600; font-size: 12.5px; letter-spacing: -0.2px; color: var(--sk-status-helpful); }
.rt-stage { position: relative; height: 188px; margin-top: 4px; }
.rt-bubble { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); background: var(--sk-surface); border-radius: 14px; padding: 7px 13px; box-shadow: var(--sk-shadow-md); max-width: 200px; text-align: center; z-index: 3; }
.rt-bubble span { font-family: var(--sk-font-heading); font-weight: 600; font-size: 11px; letter-spacing: -0.2px; color: var(--sk-text-primary); }
.rt-bubble::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--sk-surface); border-bottom-right-radius: 3px; }
.rt-cell { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }
.rt-cell .halo { position: absolute; width: 104px; height: 104px; border-radius: 999px; background: var(--sk-accent-light); opacity: 0.18; }
.rt-cream { position: absolute; bottom: 4px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.rt-cream.left { left: 14%; }
.rt-cream.right { right: 14%; }
.rt-cream .bub { position: relative; width: 52px; height: 52px; border-radius: 999px; background: var(--sk-surface); border: 2px solid var(--sk-primary-light); box-shadow: var(--sk-shadow-sm); display: flex; align-items: center; justify-content: center; font-family: var(--sk-font-heading); font-weight: 600; font-size: 19px; color: var(--sk-primary); }
.rt-cream.done .bub { background: var(--sk-status-helpful-bg); border-color: var(--sk-status-helpful); color: var(--sk-status-helpful); }
.rt-cream .tick { position: absolute; bottom: -2px; right: -2px; width: 17px; height: 17px; border-radius: 999px; background: var(--sk-status-helpful); border: 2px solid var(--sk-surface); display: flex; align-items: center; justify-content: center; }
.rt-cream .tick ion-icon { font-size: 9px; color: var(--sk-on-primary); }
.rt-cream .nm { margin-top: 5px; max-width: 84px; text-align: center; font-family: var(--sk-font-body); font-weight: 500; font-size: 9.5px; line-height: 1.2; color: var(--sk-text-primary); }
.rt-cream .flame { font-family: var(--sk-font-body); font-weight: 500; font-size: 9px; color: var(--sk-text-secondary); }
.rt-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sk-surface); border-radius: 22px 22px 0 0; box-shadow: 0 -5px 18px -8px rgba(44, 31, 26, 0.25); padding: 8px 16px 14px; z-index: 4; }
.rt-handle { width: 32px; height: 4px; border-radius: 999px; background: var(--sk-border); margin: 0 auto 8px; }
.rt-sheet-top { display: flex; align-items: center; justify-content: space-between; }
.rt-sheet-top .t { font-family: var(--sk-font-heading); font-weight: 600; font-size: 14px; letter-spacing: -0.3px; color: var(--sk-text-primary); }
.rt-sheet-top .c { font-family: var(--sk-font-body); font-weight: 500; font-size: 11px; color: var(--sk-text-secondary); }
.rt-progress { height: 10px; border-radius: 999px; background: var(--sk-surface-subtle); margin-top: 10px; overflow: hidden; }
.rt-progress-fill { height: 100%; border-radius: 999px; background: var(--sk-primary); }
.rt-sheet .hint { font-family: var(--sk-font-body); font-size: 9.5px; color: var(--sk-text-tertiary); margin: 8px 0 0; }