/* ═══════════════════════════════════════════════════════
       Verdict — Design Tokens (unified :root)
       ═══════════════════════════════════════════════════════ */
    :root {
      /* Animation timing */
      --dur-fast: 150ms;
      --dur-normal: 250ms;
      --dur-slow: 400ms;
      --ease-smooth: cubic-bezier(0.22,1,0.36,1);
      --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
      --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
      --spring: cubic-bezier(0.16, 1, 0.3, 1);
      --duration-fast: 0.15s;
      --duration-normal: 0.3s;
      --duration-slow: 0.45s;
      /* Liquid Glass */
      --glass-bg: rgba(255, 255, 255, 0.15);
      --glass-bg-thick: rgba(255, 255, 255, 0.22);
      --glass-bg-sheet: rgba(255, 255, 255, 0.88);
      --glass-border: rgba(255, 255, 255, 0.35);
      --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12), inset 0 2px 12px rgba(255, 255, 255, 0.25);
      --glass-shadow-elevated: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
      --glass-blur: saturate(180%) blur(20px);
      --glass-blur-thick: saturate(180%) blur(30px);
      --glass-specular: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
      --glass-radius: 22px;
      --glass-radius-pill: 999px;
      /* Radius system (nuance-tools.css values) */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      /* Z-index layers */
      --z-base: 1;
      --z-sticky: 100;
      --z-overlay: 500;
      --z-modal: 1000;
      --z-toast: 1500;
    }

    /* Splash: hidden by default in CSS — no flash */

    /* ═══════════════════════════════════════════════════════
       Verdict — Page-specific styles
       ═══════════════════════════════════════════════════════ */

    /* ── Hero ── */
    .verdict-hero {
      text-align: center;
      padding: 48px 0 8px;
      animation: fadeInUp 0.5s ease forwards;
    }



    /* ── Tab toggle ── */
    .input-section {
      margin-top: 36px;
    }

    .tab-toggle {
      display: flex;
      background: var(--stone-100);
      border-radius: var(--radius-md);
      padding: 3px;
      gap: 2px;
      margin-bottom: 24px;
    }

    .tab-toggle button {
      flex: 1;
      padding: 10px 4px;
      border: none;
      border-radius: var(--radius-sm);
      background: transparent;
      font-family: inherit;
      font-size: 11px;
      font-weight: 500;
      color: var(--stone-500);
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
      min-width: 0;
    }


    .tab-content { display: none; }
    .tab-content.active { display: block; animation: fadeIn 0.3s ease; }

    .free-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      color: var(--stone-400);
      margin-top: 16px;
      letter-spacing: 0.3px;
    }

    .free-note svg { flex-shrink: 0; }

    /* ── INCI textarea ── */
    .inci-textarea {
      width: 100%;
      min-height: 120px;
      padding: 16px;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      font-size: 14px;
      font-family: inherit;
      color: var(--stone-900);
      background: var(--stone-50);
      resize: vertical;
      outline: none;
      transition: all 0.25s ease;
      line-height: 1.6;
    }

    .inci-textarea:focus {
      border-color: var(--coral);
      background: #fff;
      box-shadow: 0 0 0 3px var(--coral-glow);
    }

    .inci-textarea::placeholder { color: var(--stone-300); }

    .inci-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      gap: 12px;
    }

    /* ── OCR Photo Button ── */
    .ocr-photo-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--stone-600);
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

    .ocr-photo-btn:hover {
      border-color: var(--coral);
      color: var(--coral);
      background: var(--coral-bg);
    }

    .ocr-photo-btn svg { flex-shrink: 0; }

    .ocr-loader {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: var(--stone-50);
      border-radius: var(--radius-md);
      border: 1.5px solid var(--stone-200);
      margin-top: 12px;
      font-size: 13px;
      color: var(--stone-500);
    }

    .ocr-loader .spinner {
      width: 18px;
      height: 18px;
      border: 2px solid var(--stone-200);
      border-top-color: var(--coral);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ── Scanner tab ── */
    .scanner-desktop-msg {
      text-align: center;
      padding: 40px 20px;
      color: var(--stone-500);
      font-size: 14px;
      line-height: 1.6;
    }

    .scanner-desktop-msg a {
      color: var(--coral);
      text-decoration: none;
      font-weight: 500;
    }

    .scanner-desktop-msg a:hover { text-decoration: underline; }

    .scanner-overlay {
      position: relative;
      background: #000;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      animation: fadeIn 0.3s ease;
      margin-bottom: 16px;
    }

    .scanner-frame {
      width: 100%;
      aspect-ratio: 4/3;
      border: none;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .scanner-frame #scanner-reader {
      width: 100%;
      height: 100%;
    }

    .scanner-frame #scanner-reader video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* Hide html5-qrcode default UI */
    #scanner-reader img[alt="Info"],
    #scanner-reader a,
    #scanner-reader__dashboard_section { display: none !important; }

    .scanner-hint {
      color: var(--stone-500);
      font-size: 14px;
      font-weight: 400;
      margin: 12px 0 0;
      text-align: center;
    }

    .scanner-cancel-btn {
      padding: 10px 24px;
      border: 1.5px solid var(--stone-200);
      border-radius: 12px;
      background: white;
      color: var(--stone-600);
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
      margin-top: 12px;
    }

    .scanner-cancel-btn:hover {
      background: var(--stone-50);
      border-color: var(--stone-300);
    }

    .scanner-fallback {
      text-align: center;
      padding: 32px 20px;
    }

    .scanner-fallback p {
      font-size: 14px;
      color: var(--stone-500);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .scanner-fallback .fallback-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    /* ── Search results dropdown ── */
    .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #fff;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
      z-index: var(--z-sticky);
      max-height: 360px;
      overflow-y: auto;
      display: none;
      margin-top: 4px;
    }

    .search-results.visible { display: block; animation: fadeIn 0.2s ease; }

    .search-result-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      cursor: pointer;
      transition: background 0.15s ease;
      border-bottom: 1px solid var(--stone-100);
      overflow: hidden;
    }

    .search-result-item:last-child { border-bottom: none; }

    .search-result-item:hover {
      background: var(--coral-bg);
    }

    .search-result-img {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: var(--stone-100);
      flex-shrink: 0;
    }

    .search-result-img-placeholder {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      background: var(--stone-100);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone-300);
      flex-shrink: 0;
    }

    .search-result-info { flex: 1; min-width: 0; }

    .search-result-brand {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--stone-400);
      margin-bottom: 2px;
    }

    .search-result-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--stone-900);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-result-loading {
      padding: 24px;
      text-align: center;
      color: var(--stone-400);
      font-size: 13px;
    }

    .search-result-empty {
      padding: 24px;
      text-align: center;
      color: var(--stone-400);
      font-size: 13px;
      line-height: 1.6;
    }

    .search-section-label {
      padding: 8px 16px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--stone-400);
      background: var(--stone-50);
      border-bottom: 1px solid var(--stone-100);
    }

    .verified-badge {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7) !important;
      color: #16A34A !important;
    }

    .verified-tag {
      display: inline-block;
      font-size: 9px;
      padding: 1px 6px;
      background: #F0FDF4;
      color: #16A34A;
      border-radius: 4px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      vertical-align: middle;
      margin-left: 6px;
    }

    .community-badge {
      background: linear-gradient(135deg, #EFF6FF, #DBEAFE) !important;
      color: #2563EB !important;
    }

    .community-tag {
      display: inline-block;
      font-size: 9px;
      padding: 1px 6px;
      background: #EFF6FF;
      color: #2563EB;
      border-radius: 4px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      vertical-align: middle;
      margin-left: 6px;
    }

    .known-concentration {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #DCFCE7;
      border-radius: 8px;
      border: 1px solid #86EFAC;
      font-size: 12px;
      font-weight: 500;
      color: #15803D;
      margin: 8px 0;
    }

    .known-concentration svg { flex-shrink: 0; }

    .conc-gauge-wrap { margin: 4px 0 8px; }
    .conc-gauge {
      position: relative;
      height: 6px;
      background: var(--stone-100);
      border-radius: 3px;
      overflow: visible;
    }
    .conc-gauge-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .conc-gauge-threshold {
      position: absolute;
      height: 14px;
      width: 2px;
      background: var(--stone-400);
      top: -4px;
      border-radius: 1px;
    }
    .conc-gauge-labels {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--stone-400);
      margin-top: 4px;
    }
    .conc-gauge-min { font-weight: 600; }

    /* Verdict one-liner */
    .verdict-oneliner {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-style: italic;
      color: var(--stone-600);
      text-align: center;
      max-width: 500px;
      margin: 0 auto 20px;
      line-height: 1.6;
      opacity: 0;
      animation: fadeInUp 0.6s ease 0.4s forwards;
    }

    /* Sub-score labels */
    .score-sub-labels {
      display: flex;
      justify-content: space-between;
      max-width: 260px;
      margin: 16px auto 0;
    }
    .sub-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .sub-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--stone-800);
    }
    .sub-name {
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--stone-400);
    }

    .obf-fallback-btn {
      display: inline-block;
      margin-top: 8px;
      padding: 8px 16px;
      background: var(--coral);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .obf-fallback-btn:hover { background: #D42E4C; }

    /* ── History panel ── */
    .history-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 16px;
      padding: 8px 14px;
      background: transparent;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      color: var(--stone-500);
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

    .history-trigger:hover {
      border-color: var(--coral);
      color: var(--coral);
      background: var(--coral-bg);
    }

    .history-trigger svg { flex-shrink: 0; }

    .history-panel {
      display: none;
      margin-top: 12px;
      background: #fff;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      box-shadow: 0 8px 30px rgba(0,0,0,0.06);
      max-height: 320px;
      overflow-y: auto;
      animation: fadeIn 0.2s ease;
    }

    .history-panel.visible { display: block; }

    .history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.15s ease;
      border-bottom: 1px solid var(--stone-100);
    }

    .history-item:last-child { border-bottom: none; }
    .history-item:hover { background: var(--coral-bg); }

    .history-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .history-info { flex: 1; min-width: 0; }

    .history-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--stone-900);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .history-meta {
      font-size: 11px;
      color: var(--stone-400);
      margin-top: 2px;
    }

    .history-score {
      font-size: 14px;
      font-weight: 600;
      flex-shrink: 0;
    }

    /* ── Loading skeleton ── */
    .skeleton-wrap { padding: 40px 0; }

    .skeleton {
      background: linear-gradient(90deg, var(--stone-100) 25%, var(--stone-50) 50%, var(--stone-100) 75%);
      background-size: 200% 100%;
      animation: skeletonPulse 1.5s ease infinite;
      border-radius: var(--radius-md);
    }

    @keyframes skeletonPulse {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .skeleton-circle {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      margin: 0 auto 24px;
    }

    .skeleton-line {
      height: 16px;
      margin: 0 auto 12px;
    }

    .skeleton-line.w60 { width: 60%; }
    .skeleton-line.w40 { width: 40%; }
    .skeleton-line.w80 { width: 80%; }

    .skeleton-card {
      height: 120px;
      margin-bottom: 16px;
    }

    /* ═══════════════════════════════════════════════════════
       STATE 2 — Results
       ═══════════════════════════════════════════════════════ */

    #verdict-results { display: none; }

    /* ── Section headers ── */
    .result-section-header {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 500;
      color: var(--stone-900);
      margin: 32px 0 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--stone-100);
      letter-spacing: -0.3px;
    }

    .result-section-header:first-child { margin-top: 0; }

    /* ── Score card — THE viral screenshot ── */
    .score-card {
      background: #FFFFFF;
      border-radius: 20px;
      padding: 40px 24px 32px;
      border: var(--card-border);
      box-shadow: 0 4px 30px rgba(230, 59, 90, 0.06);
      text-align: center;
      position: relative;
      overflow: hidden;
      margin-bottom: 28px;
    }

    .score-card-product {
      margin-bottom: 28px;
    }

    .score-card-brand {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--stone-400);
      margin-bottom: 4px;
    }

    .score-card-name {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 500;
      color: var(--stone-900);
      letter-spacing: -0.2px;
    }

    /* ── Circular score ring ── */
    .score-ring-wrap {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto 20px;
    }

    .score-ring-svg {
      width: 180px;
      height: 180px;
      transform: rotate(-90deg);
    }

    .score-ring-bg {
      fill: none;
      stroke: var(--stone-100);
      stroke-width: 6;
    }

    .score-ring-fill {
      fill: none;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-dasharray: 502.65;
      stroke-dashoffset: 502.65;
      transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.5s ease;
    }

    .score-number {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .score-number-value {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 48px;
      font-weight: 200;
      line-height: 1;
      letter-spacing: -1px;
    }

    .score-number-suffix {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      color: var(--stone-400);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* ── Grade label ── */
    .score-grade {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    .grade-excellent { background: var(--green-bg); color: #16A34A; }
    .grade-good { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .grade-caution { background: var(--amber-bg); color: #D97706; }
    .grade-alert { background: var(--red-bg); color: #B91C1C; }
    .grade-unknown { background: var(--stone-100); color: var(--stone-500); }
    /* Grade colors on score-ring-wrap: color only, no background */
    .score-ring-wrap.grade-excellent,
    .score-ring-wrap.grade-good,
    .score-ring-wrap.grade-caution,
    .score-ring-wrap.grade-alert,
    .score-ring-wrap[class*="grade-"],
    .score-card [class*="grade-"],
    .score-card .score-ring-wrap {
      background: none !important;
      background-color: transparent !important;
    }
    .score-card { background: #FFFFFF !important; }


    .score-subtitle {
      font-size: 13px;
      color: var(--stone-500);
      font-weight: 400;
    }

    /* ── Watermark ── */
    .score-watermark {
      position: absolute;
      bottom: 16px;
      right: 20px;
      font-family: 'Playfair Display', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--stone-200);
      pointer-events: none;
    }

    /* ── Regulatory summary card ── */
    .reg-summary-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      margin-bottom: 20px;
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
    }

    .reg-summary-indicators {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .reg-summary-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--stone-800);
    }

    .reg-summary-row svg { flex-shrink: 0; }

    .reg-indicator-green { color: #16A34A; }
    .reg-indicator-red { color: #B91C1C; }
    .reg-indicator-amber { color: #D97706; }

    /* ── Actif cards ── */
    .actif-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--stone-400);
      margin-bottom: 16px;
      margin-top: 8px;
    }

    .actif-card {
      background: #FFFFFF;
      border-radius: var(--radius-lg);
      padding: 24px;
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      margin-bottom: 16px;
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
    }

    .actif-card-header {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 16px;
    }

    .actif-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
    }

    .actif-dot-green { background: var(--green); }
    .actif-dot-amber { background: var(--amber); }
    .actif-dot-red { background: var(--red); }

    .actif-header-info { flex: 1; }

    .actif-name {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--stone-900);
      margin-bottom: 4px;
    }

    .actif-variant {
      font-size: 12px;
      color: var(--stone-500);
      margin-bottom: 6px;
    }

    .actif-category-tag {
      display: inline-flex;
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--stone-100);
      color: var(--stone-500);
    }

    /* ── Position warning ── */
    .position-warning {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--amber-bg);
      border-radius: var(--radius-sm);
      margin-bottom: 16px;
      font-size: 12px;
      color: #92400E;
      font-weight: 500;
    }

    .position-warning svg { flex-shrink: 0; color: var(--amber); }

    /* ── Claims check ── */
    .claims-section {
      margin-bottom: 16px;
    }

    .claims-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--stone-400);
      margin-bottom: 10px;
    }

    .claim-item {
      padding: 12px 0;
      border-bottom: 1px solid var(--stone-100);
    }

    .claim-item:last-child { border-bottom: none; }

    .claim-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--stone-800);
      margin-bottom: 4px;
    }

    .claim-verdict {
      font-size: 12px;
      color: var(--stone-500);
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .claim-bar-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .claim-bar {
      flex: 1;
      height: 4px;
      background: var(--stone-100);
      border-radius: 2px;
      overflow: hidden;
    }

    .claim-bar-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .claim-bar-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--stone-400);
      white-space: nowrap;
    }

    /* ── Red flags ── */
    .red-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .red-flag-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      background: var(--coral-bg);
      color: var(--coral);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      cursor: help;
    }

    .red-flag-badge svg { flex-shrink: 0; }

    /* ── Product-level Fact-Check Section ── */
    .product-factcheck {
      margin: 20px 0 24px;
      padding: 20px;
      background: linear-gradient(135deg, #FAFAF9 0%, #FFF8F6 100%);
      border: 1px solid var(--coral-bg, #FFF5F0);
      border-radius: var(--radius-lg);
    }
    .product-factcheck-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 16px;
    }
    .product-factcheck-icon {
      width: 32px; height: 32px; border-radius: 10px;
      background: var(--coral); display: flex; align-items: center; justify-content: center;
    }
    .product-factcheck-icon svg { color: #fff; }
    .product-factcheck-title {
      font-size: 14px; font-weight: 700; color: var(--stone-900);
      letter-spacing: 0.5px;
    }
    .product-factcheck-subtitle {
      font-size: 11px; color: var(--stone-400); font-weight: 400;
    }
    .pfc-item {
      display: flex; gap: 12px; padding: 14px 0;
      border-bottom: 1px solid var(--stone-100);
      animation: slideUpFade 0.4s ease both;
    }
    .pfc-item:last-child { border-bottom: none; }
    .pfc-icon {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
    }
    .pfc-verified .pfc-icon { background: #DCFCE7; color: #16A34A; }
    .pfc-partial .pfc-icon { background: #FEF3C7; color: #D97706; }
    .pfc-unverified .pfc-icon { background: #FEE2E2; color: #B91C1C; }
    .pfc-info .pfc-icon { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .pfc-body { flex: 1; min-width: 0; }
    .pfc-claim {
      font-size: 13px; font-weight: 600; color: var(--stone-800);
      margin-bottom: 2px;
    }
    .pfc-claim-status {
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .pfc-verified .pfc-claim-status { color: #16A34A; }
    .pfc-partial .pfc-claim-status { color: #D97706; }
    .pfc-unverified .pfc-claim-status { color: #B91C1C; }
    .pfc-info .pfc-claim-status { color: var(--coral, #E63B5A); }
    .pfc-detail {
      font-size: 12px; color: var(--stone-500); line-height: 1.5; margin-top: 4px;
    }
    .pfc-evidence {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 600; color: var(--stone-400);
      margin-top: 4px;
    }
    .pfc-evidence-dot {
      width: 5px; height: 5px; border-radius: 50%; background: currentColor;
    }

    /* ── Product-level Marketing Alerts ── */
    .product-mkt-alerts {
      margin: 0 0 20px;
      padding: 16px;
      background: #FFFBEB;
      border: 1px solid #FDE68A;
      border-radius: var(--radius-lg);
    }
    .product-mkt-alerts-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    }
    .product-mkt-alerts-title {
      font-size: 12px; font-weight: 700; color: #92400E;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .pma-item {
      display: flex; gap: 10px; padding: 10px 0;
      border-bottom: 1px solid rgba(253,224,71,0.4);
    }
    .pma-item:last-child { border-bottom: none; }
    .pma-icon {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: #FEF3C7; display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: #D97706;
    }
    .pma-severity-high .pma-icon { background: #FEE2E2; color: #B91C1C; }
    .pma-body { flex: 1; }
    .pma-term {
      font-size: 12px; font-weight: 600; color: #92400E;
    }
    .pma-note {
      font-size: 11px; color: #A16207; line-height: 1.5; margin-top: 2px;
    }

    @keyframes slideUpFade {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── Skin Match Badge ── */
    .skin-match-wrap {
      display: flex; justify-content: center; margin: 16px 0 4px;
      animation: slideUpFade 0.4s ease both; animation-delay: 0.2s;
    }
    .skin-match-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 20px; border-radius: 14px;
      font-size: 13px; font-weight: 600; line-height: 1.3;
      max-width: 100%;
    }
    .skin-match-badge svg { flex-shrink: 0; }
    .skin-match-good { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
    .skin-match-ok { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
    .skin-match-caution { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
    .skin-match-bad { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
    .skin-match-details {
      margin: 8px auto 0; max-width: 360px; text-align: center;
    }
    .skin-match-detail-item {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; color: var(--stone-500); margin: 2px 6px;
    }
    .skin-match-detail-good { color: #16A34A; }
    .skin-match-detail-bad { color: #B91C1C; }
    .skin-match-detail-warn { color: #D97706; }
    .skin-match-cta {
      display: block; margin: 8px auto 0; padding: 6px 14px;
      background: none; border: 1px solid var(--stone-200); border-radius: 8px;
      font-family: inherit; font-size: 11px; font-weight: 500; color: var(--stone-500);
      cursor: pointer; transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }
    .skin-match-cta:hover { border-color: var(--coral); color: var(--coral); }

    /* ── Product Feedback (ADN Cosmétique) ── */
    .product-feedback { margin: 20px 0; padding: 16px; background: #fff; border-radius: 16px; border: 1px solid var(--stone-100); text-align: center; }
    .feedback-question { font-size: 13px; color: var(--stone-500); margin: 0 0 10px; }
    .feedback-buttons { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
    .fb-btn { padding: 8px 12px; border-radius: 20px; border: 1.5px solid var(--stone-200); background: #fff; font-size: 13px; cursor: pointer; transition: transform 0.2s, opacity 0.2s, border-color 0.2s; font-family: inherit; }
    .fb-btn:active, .fb-btn.fb-selected { transform: scale(0.95); }
    .fb-love.fb-selected { border-color: #EC4899; background: #FDF2F8; color: #BE185D; }
    .fb-ok.fb-selected { border-color: #10B981; background: #F0FDF4; color: #047857; }
    .fb-meh.fb-selected { border-color: #F59E0B; background: #FFFBEB; color: #B45309; }
    .fb-bad.fb-selected { border-color: #EF4444; background: #FEF2F2; color: #B91C1C; }
    .fb-reaction.fb-selected { border-color: #B91C1C; background: #FEE2E2; color: #991B1B; }
    .fb-saved { font-size: 12px; color: var(--stone-400); margin-top: 8px; }

    /* ── Personal Score ── */
    .personal-score-section { margin: 16px 0; padding: 16px; background: linear-gradient(135deg, #FFF8F6, var(--coral-bg)); border-radius: 16px; border: 1px solid var(--coral-bg, #FFF5F0); animation: slideUpFade 0.4s ease both; animation-delay: 0.25s; }
    .personal-header { display: flex; align-items: center; gap: 8px; }
    .personal-icon { width: 20px; height: 20px; flex-shrink: 0; }
    .personal-title { font-size: 13px; font-weight: 600; color: var(--stone-900); flex: 1; }
    .personal-badge { font-size: 16px; font-weight: 700; color: var(--coral); }
    .personal-diff { font-size: 12px; font-weight: 600; }
    .personal-better { color: #16A34A; }
    .personal-worse { color: #B91C1C; }
    .personal-same { color: #6B7280; }
    .personal-subtitle { font-size: 11px; color: #6B7280; margin: 4px 0 8px; }
    .personal-note { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 12px; color: #374151; line-height: 1.4; }
    .personal-note svg { flex-shrink: 0; margin-top: 1px; }
    .note-hero strong { color: #16A34A; }
    .note-danger strong { color: #B91C1C; }
    .note-suspect strong { color: #D97706; }

    /* ── Ingredient DNA Profile (2026 card design) ── */
    .dna-profile { padding: 0; }
    .dna-header-card { background: linear-gradient(135deg, var(--stone-900), #292524); border-radius: 20px; padding: 24px 20px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden; }
    .dna-header-card::before { content: ''; position: absolute; top: -30%; right: -10%; width: 200px; height: 200px; border-radius: 50%; background: var(--coral-bg, #FFF5F0); }
    .dna-header-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .dna-header-top svg { width: 24px; height: 24px; color: var(--coral); flex-shrink: 0; }
    .dna-header-top span { font-size: 14px; font-weight: 600; opacity: 0.9; }
    .dna-header-count { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
    .dna-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .dna-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
    .dna-pill-hero { background: rgba(34,197,94,0.15); color: #86EFAC; }
    .dna-pill-suspect { background: rgba(230,59,90,0.2); color: #FCA5A5; }
    .dna-pill svg { width: 12px; height: 12px; }
    .dna-section { margin-bottom: 14px; }
    .dna-section h4 { font-size: 13px; font-weight: 700; color: var(--stone-500); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; }
    .dna-ingredient { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; margin-bottom: 6px; border-radius: 14px; transition: transform 0.15s; }
    .dna-ingredient:active { transform: scale(0.98); }
    .dna-hero { background: #F0FDF4; border: 1px solid rgba(34,197,94,0.1); }
    .dna-hero strong { color: #16A34A; font-size: 13px; font-weight: 600; }
    .dna-suspect { background: #FEF2F2; border: 1px solid rgba(239,68,68,0.1); }
    .dna-suspect strong { color: #B91C1C; font-size: 13px; font-weight: 600; }
    .dna-ingredient span { font-size: 11px; color: var(--stone-400); }
    .dna-share-btn { display: block; width: 100%; padding: 14px; background: linear-gradient(135deg, var(--stone-900), #292524); color: #fff; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; margin: 14px 0 8px; font-family: inherit; transition: transform 0.15s; }
    .dna-share-btn:active { transform: scale(0.97); }
    .dna-empty { text-align: center; padding: 28px 20px; background: linear-gradient(135deg, #FFF8F6, var(--coral-bg)); border-radius: 20px; border: 1px solid var(--coral-bg, #FFF5F0); }
    .dna-empty-icon { margin-bottom: 10px; }
    .dna-empty-icon svg { width: 40px; height: 40px; color: var(--coral); }
    .dna-progress { width: 60%; margin: 12px auto 6px; height: 6px; background: rgba(230,59,90,0.1); border-radius: 3px; overflow: hidden; }
    .dna-progress-bar { height: 100%; background: linear-gradient(90deg, var(--coral), #C93251); border-radius: 3px; transition: width 0.5s; }
    .dna-disclaimer { font-size: 10px; color: var(--stone-400); font-style: italic; margin-top: 12px; line-height: 1.5; }

    /* ── DNA Toast ── */
    .dna-toast { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; padding: 14px 18px; background: var(--stone-900); color: #fff; border-radius: 14px; font-size: 13px; line-height: 1.5; z-index: var(--z-modal); opacity: 0; transform: translateY(20px); transition: transform var(--dur-normal) var(--ease-smooth), opacity var(--dur-normal) var(--ease-smooth); pointer-events: none; }
    .dna-toast-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

    /* ── Checkin Widget ── */
    .checkin-widget { background: #fff; border-radius: 20px; padding: 18px; margin: 0 0 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid var(--stone-100); max-width: 480px; margin-left: auto; margin-right: auto; }
    .checkin-top { display: flex; align-items: center; gap: 16px; width: 100%; }
    .checkin-streak { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .streak-icon { width: 28px; height: 28px; color: #F59E0B; }
    .streak-icon svg { width: 28px; height: 28px; }
    .streak-count { font-size: 32px; font-weight: 800; color: var(--stone-900); line-height: 1; }
    .streak-label { font-size: 12px; color: var(--stone-400); font-weight: 500; }
    .checkin-action { flex: 1; text-align: right; }
    .checkin-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 14px; background: linear-gradient(135deg, #E63B5A, #C93251); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.15s; }
    .checkin-btn:active { transform: scale(0.96); }
    .checkin-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
    .checkin-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #16A34A; font-weight: 600; }
    .checkin-done svg { flex-shrink: 0; width: 16px; height: 16px; }
    .checkin-week { display: flex; gap: 6px; width: 100%; justify-content: center; max-width: 320px; }
    .checkin-day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
    .checkin-day-label { font-size: 10px; color: var(--stone-400); font-weight: 600; }
    .checkin-day-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--stone-200); transition: background 0.2s; }
    .checkin-full .checkin-day-dot { background: #16A34A; }
    .checkin-half .checkin-day-dot { background: #F59E0B; }
    .checkin-today .checkin-day-label { color: var(--coral); font-weight: 700; }
    .checkin-today .checkin-day-dot { background: var(--coral); box-shadow: 0 0 0 3px rgba(230,59,90,0.15); }
    .checkin-today.checkin-full .checkin-day-dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
    .checkin-today.checkin-half .checkin-day-dot { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
    .checkin-future .checkin-day-dot { background: var(--stone-100); }

    /* ── Checkin Routine Popup ── */
    .checkin-popup { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
    .checkin-popup.visible { opacity: 1; pointer-events: auto; }
    .checkin-popup-inner { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 440px; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .checkin-popup.visible .checkin-popup-inner { transform: translateY(0); }
    .checkin-popup-title { font-size: 16px; font-weight: 700; color: var(--stone-900); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
    .checkin-popup-title svg { width: 20px; height: 20px; color: #16A34A; }
    .checkin-popup-sub { font-size: 12px; color: var(--stone-400); margin: 0 0 14px; }
    .checkin-popup-products { margin-bottom: 16px; }
    .checkin-popup-product { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--stone-100); }
    .checkin-popup-product:last-child { border-bottom: none; }
    .checkin-popup-score { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--stone-50); color: var(--stone-600); }
    .checkin-popup-name { font-size: 13px; color: var(--stone-800); }
    .checkin-popup-brand { font-size: 11px; color: var(--stone-400); }
    .checkin-confirm-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #16A34A, #10B981); color: #fff; border: none; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .checkin-empty-msg { text-align: center; padding: 12px 0; }
    .checkin-empty-msg p { font-size: 13px; color: var(--stone-500); margin: 0 0 12px; }
    .checkin-goto-routine { padding: 12px 24px; background: var(--coral); color: #fff; border: none; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
    @media(min-width:641px) { .checkin-popup { align-items: center; } .checkin-popup-inner { border-radius: 20px; } }

    /* ── XP Levels Preview ── */
    .xp-levels-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
    .xp-level-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--stone-50); }
    .xp-level-row.xp-current { background: var(--coral-bg, #FFF5F0); border: 1px solid rgba(230,59,90,0.12); }
    .xp-level-row.xp-locked { opacity: 0.5; }
    .xp-level-icon { width: 28px; text-align: center; flex-shrink: 0; }
    .xp-level-icon svg { width: 20px; height: 20px; }
    .xp-level-info { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
    .xp-level-name { font-size: 13px; font-weight: 600; color: var(--stone-800); }
    .xp-level-xp { font-size: 11px; color: var(--stone-400); white-space: nowrap; }

    /* ── Simplified Home Screen ── */
    .home-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; max-width: 480px; margin: 0 auto; }
    .home-title { font-size: 26px; font-weight: 700; margin: 0; color: var(--stone-900); }
    .home-subtitle { font-size: 13px; color: var(--stone-500); margin: 2px 0 0; }
    .home-header-right { display: flex; align-items: center; gap: 8px; }
    .home-streak-pill { padding: 4px 10px; border-radius: 12px; background: #FEF3C7; color: #B45309; font-size: 12px; font-weight: 700; }
    .home-xp-pill { padding: 4px 10px; border-radius: 12px; background: var(--coral-bg); color: var(--coral); font-size: 11px; font-weight: 600; }
    .home-notif-btn { position: relative; background: none; border: none; padding: 6px; cursor: pointer; color: var(--stone-400); }
    .home-notif-btn svg { width: 20px; height: 20px; }
    .notif-badge { position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    .home-checkin-compact { margin: 0 auto 10px; max-width: 480px; }
    .checkin-compact-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 16px; background: var(--stone-50); border: 1px solid var(--stone-100); border-radius: 14px; cursor: pointer; font-size: 13px; color: var(--stone-700); font-family: inherit; transition: transform 0.15s; }
    .checkin-compact-btn:active { transform: scale(0.98); }
    .checkin-confirm { padding: 5px 14px; background: var(--coral); color: #fff; border-radius: 10px; font-size: 12px; font-weight: 600; }
    .home-shopping-cta { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--coral-bg); border: 1px solid rgba(230,59,90,0.1); border-radius: 14px; cursor: pointer; font-size: 13px; color: var(--stone-700); margin: 0 auto 8px; max-width: 480px; font-family: inherit; transition: transform 0.15s; }
    .home-shopping-cta:active { transform: scale(0.98); }
    .home-shopping-cta svg { width: 18px; height: 18px; color: var(--coral); flex-shrink: 0; }
    .home-shopping-active { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--coral); color: #fff; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 600; margin: 0 auto 8px; max-width: 480px; }
    .shopping-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #FCD34D; animation: pulse 2s infinite; flex-shrink: 0; }
    .home-context-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--stone-100); border-radius: 14px; margin: 0 auto 8px; max-width: 480px; cursor: pointer; transition: transform 0.15s; }
    .home-context-card:active { transform: scale(0.98); }
    .context-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .context-icon svg { width: 20px; height: 20px; }
    .context-tracker .context-icon { background: #F5F3FF; }
    .context-dna .context-icon { background: var(--coral-bg); }
    .context-tip .context-icon { background: #FEF3C7; }
    .context-text { flex: 1; min-width: 0; }
    .context-text strong { display: block; font-size: 13px; color: var(--stone-900); }
    .context-text span { font-size: 12px; color: var(--stone-500); line-height: 1.4; }
    .context-arrow { color: var(--stone-300); flex-shrink: 0; }
    .context-arrow svg { width: 16px; height: 16px; }
    /* Duel */
    .duel-card { background: #fff; border: 1px solid var(--stone-100); border-radius: 16px; padding: 20px 16px; margin: 0 auto 8px; max-width: 480px; text-align: center; }
    .duel-label { font-size: 11px; font-weight: 700; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    .duel-versus { display: flex; align-items: stretch; gap: 8px; }
    .duel-choice { flex: 1; padding: 14px 10px 12px; background: var(--stone-50); border: 1.5px solid var(--stone-200); border-radius: 14px; cursor: pointer; text-align: center; font-family: inherit; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
    .duel-choice:active { background: var(--stone-100); transform: scale(0.97); }
    .duel-choice .duel-score-ring { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; margin-bottom: 4px; }
    .duel-choice strong { display: block; font-size: 12px; color: var(--stone-900); line-height: 1.3; }
    .duel-choice .duel-product-name { font-size: 11px; color: var(--stone-500); display: block; margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .duel-choice .duel-slot { font-size: 10px; color: var(--stone-400); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
    .duel-choice .duel-vote-label { font-size: 11px; font-weight: 600; color: var(--coral); margin-top: 6px; }
    .duel-vs { font-size: 13px; font-weight: 800; color: var(--coral); flex-shrink: 0; align-self: center; }
    /* Duel result (after vote) */
    .duel-result-card { background: #fff; border: 1px solid var(--stone-100); border-radius: 16px; padding: 16px; margin: 0 auto 8px; max-width: 480px; }
    .duel-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .duel-result-label { font-size: 11px; font-weight: 700; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.5px; }
    .duel-result-versus { display: flex; gap: 8px; }
    .duel-result-side { flex: 1; padding: 12px 10px; border-radius: 12px; text-align: center; min-width: 0; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); }
    .duel-result-side:active { transform: scale(0.97); }
    .duel-result-side.winner { background: linear-gradient(135deg, rgba(22,163,106,0.08), rgba(22,163,106,0.04)); border: 1.5px solid rgba(22,163,106,0.2); }
    .duel-result-side.loser { background: linear-gradient(135deg, rgba(239,68,68,0.04), rgba(239,68,68,0.02)); border: 1.5px solid rgba(239,68,68,0.12); }
    .duel-result-side.tied { background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(59,130,246,0.03)); border: 1.5px solid rgba(59,130,246,0.15); }
    .duel-tie-label { text-align:center; padding:10px 16px; margin-top:8px; font-size:13px; font-weight:600; color:#2563EB; background:rgba(59,130,246,0.06); border-radius:10px; }
    .duel-reason { text-align:center; padding:6px 16px; margin-top:6px; font-size:11px; color:var(--stone-500); line-height:1.5; }
    .duel-actifs { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; }
    .duel-actif-chip { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--coral-bg, var(--coral-bg, #FFF5F0)); color: var(--coral); font-size: 10px; font-weight: 500; }
    .duel-see-analysis { display: block; margin-top: 6px; font-size: 11px; color: var(--coral); font-weight: 500; }
    .duel-result-side .duel-score-ring { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; margin: 0 auto 6px; }
    .duel-result-side .duel-winner-badge { font-size: 10px; font-weight: 700; color: #16A34A; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
    .duel-result-side strong { display: block; font-size: 12px; color: var(--stone-900); line-height: 1.3; }
    .duel-result-side .duel-product-name { font-size: 11px; color: var(--stone-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; margin-top: 2px; }
    .duel-result-cta { display: block; width: 100%; margin-top: 12px; padding: 10px; background: var(--stone-50); border: 1px solid var(--stone-100); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--coral); cursor: pointer; font-family: inherit; text-align: center; transition: background var(--dur-fast); }
    .duel-result-cta:active { background: var(--stone-100); }

    /* ═══ NUANCES — Animated Mascot with Eyes ═══ */
    .nuance-blobs { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
    .nuance-blobs svg { overflow: visible; }
    .vera-mascot { -webkit-tap-highlight-color: transparent; user-select: none; will-change: transform; }
    .vera-mascot[data-vera-interactive="1"] { cursor: pointer; }
    .vera-mascot[data-vera-interactive="0"] { cursor: default; }
    .vera-mascot[data-vera-interactive="1"]:active { transform: scale(0.95); }
    .vera-pupil { transition: transform 0.15s ease-out; }
    .vera-eyes { transition: transform 0.15s ease; transform-origin: center 26px; }
    /* State: happy — eyes become arcs */
    .mascot-happy .vera-eye-l ellipse, .mascot-happy .vera-eye-r ellipse { ry: 2 !important; }
    .mascot-happy .vera-pupil { cy: 27px !important; r: 1 !important; }
    /* State: celebrating — bounce */
    @keyframes veraCelebrate { 0%,100%{transform:translateY(0) scale(1)} 25%{transform:translateY(-4px) scale(1.05,0.95)} 50%{transform:translateY(0) scale(0.95,1.05)} 75%{transform:translateY(-2px) scale(1.02)} }
    .mascot-celebrating { animation: veraCelebrate 0.8s cubic-bezier(0.34,1.56,0.64,1) infinite; }
    /* State: sleepy — droopy */
    .mascot-sleepy .vera-eye-l ellipse, .mascot-sleepy .vera-eye-r ellipse { ry: 1.2 !important; }
    .mascot-sleepy .vera-pupil { opacity: 0.5; r: 0.8 !important; }
    /* State: curious — asymmetric */
    .mascot-curious .vera-eye-l ellipse { rx: 3.5 !important; ry: 4 !important; }
    .mascot-curious .vera-eye-r ellipse { rx: 2.5 !important; ry: 3 !important; }
    /* State: alert — wide open */
    .mascot-alert .vera-eye-l ellipse, .mascot-alert .vera-eye-r ellipse { rx: 4 !important; ry: 4.5 !important; }
    .mascot-alert .vera-pupil { r: 1.8; }
    /* Float animations (kept for blob motion) */
    .nuance-blob-1 { animation: nuanceFloat1 8s ease-in-out infinite; transform-origin: center; }
    .nuance-blob-2 { animation: nuanceFloat2 9s ease-in-out infinite; transform-origin: center; }
    @keyframes nuanceFloat1 {
      0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
      25% { transform: translate(2px,-3px) scale(1.04) rotate(5deg); }
      50% { transform: translate(-1px,2px) scale(0.97) rotate(-3deg); }
      75% { transform: translate(3px,1px) scale(1.02) rotate(2deg); }
    }
    @keyframes nuanceFloat2 {
      0%,100% { transform: translate(0,0) scale(1) rotate(0deg); }
      25% { transform: translate(-3px,2px) scale(0.96) rotate(-4deg); }
      50% { transform: translate(2px,-2px) scale(1.05) rotate(3deg); }
      75% { transform: translate(-1px,-1px) scale(0.98) rotate(-2deg); }
    }
    .nuance-blobs.celebrating .nuance-blob-1,
    .nuance-blobs.celebrating .nuance-blob-2 { animation-duration: 1.5s; }
    @media (prefers-reduced-motion: reduce) {
      .nuance-blob-1, .nuance-blob-2, .nuance-blob-glow, .mascot-celebrating { animation: none !important; }
      .vera-pupil, .vera-eyes { transition: none !important; }
    }

    /* ═══ Nuance Home Greeting ═══ */
    .vera-greeting { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
    .vera-coach-mascot { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; position: relative; flex-shrink: 0; }
    .vera-coach-mascot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(230,59,90,0.16), rgba(230,59,90,0)); opacity: 0.9; pointer-events: none; }
    .vera-greeting-text { flex: 1; min-width: 0; }
    .vera-greeting-text h1 { font-size: 22px; font-weight: 700; color: var(--stone-900); margin: 0; font-family: 'Playfair Display', serif; }
    .vera-greeting .home-header-right { display: flex; align-items: center; gap: 6px; }
    .vera-bubble { background: var(--stone-50); border: 1px solid var(--stone-100); border-radius: 14px 14px 14px 4px; padding: 8px 12px; font-size: 12px; color: var(--stone-600); line-height: 1.45; max-width: 240px; animation: slideUpFade 0.4s ease 0.3s both; box-shadow: 0 6px 20px rgba(28,25,23,0.04); }
    .vera-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .vera-action-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(230,59,90,0.18); background: var(--coral-bg, #FFF5F0); color: var(--coral); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }
    .vera-action-btn:active { transform: scale(0.98); background: rgba(230,59,90,0.1); }

    /* ═══ Daily Ring (Apple Health-inspired) ═══ */
    .daily-ring-section { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--stone-100); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
    .daily-ring-visual { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
    .daily-ring-visual svg { width: 72px; height: 72px; transform: rotate(-90deg); }
    .daily-ring-visual .ring-track { fill: none; stroke-width: 5; opacity: 0.15; }
    .daily-ring-visual .ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.34,1.56,0.64,1); }
    .daily-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--stone-900); letter-spacing: -0.5px; line-height: 1; }
    .daily-ring-info { flex: 1; min-width: 0; }
    .daily-ring-title { font-size: 13px; font-weight: 700; color: var(--stone-900); margin-bottom: 6px; }
    .daily-ring-legend { display: flex; flex-direction: column; gap: 4px; }
    .daily-ring-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--stone-500); }
    .daily-ring-item .ring-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .daily-ring-item.done { color: var(--stone-400); text-decoration: line-through; }
    .daily-ring-complete { text-align: center; margin-top: 6px; font-size: 11px; font-weight: 600; color: #16A34A; animation: slideUpFade 0.4s ease; }

    /* ═══ Daily Quests ═══ */
    .quests-section { margin-bottom: 12px; }
    .quests-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .quests-title { font-size: 13px; font-weight: 700; color: var(--stone-900); display: flex; align-items: center; gap: 6px; }
    .quests-bonus { font-size: 11px; color: var(--coral); font-weight: 600; }
    .quest-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--stone-100); border-radius: 12px; padding: 12px; margin-bottom: 6px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast); }
    .quest-card:active { transform: scale(0.98); background: var(--stone-50); }
    .quest-card.quest-done { opacity: 0.6; }
    .quest-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--stone-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast); }
    .quest-done .quest-check { background: #16A34A; border-color: #16A34A; }
    .quest-text { flex: 1; min-width: 0; }
    .quest-text strong { display: block; font-size: 13px; color: var(--stone-900); }
    .quest-text span { font-size: 11px; color: var(--stone-400); }
    .quest-xp { font-size: 12px; font-weight: 700; color: var(--coral); white-space: nowrap; }
    .quest-done .quest-xp { color: var(--stone-400); }

    /* ═══ Confetti Celebration ═══ */
    .confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
    .confetti-piece { position: absolute; width: 8px; height: 8px; top: -10px; animation: confettiFall 2.5s ease-in forwards; }
    @keyframes confettiFall {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }

    /* Notification center */
    .notif-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px 20px; }
    .notif-panel { background: #fff; border-radius: 20px; padding: 24px; max-width: 400px; width: 100%; max-height: 80vh; overflow-y: auto; animation: slideUpFade 0.3s ease; }
    .notif-panel h3 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
    .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--stone-100); font-size: 13px; color: #374151; }
    .notif-item:last-child { border-bottom: none; }
    .notif-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--stone-500); }
    .notif-section-title { font-size: 11px; font-weight: 700; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--stone-100); }
    .notif-tip { font-size: 13px; color: #374151; line-height: 1.6; }
    .notif-close { display: block; width: 100%; margin-top: 14px; padding: 12px; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--stone-400); cursor: pointer; font-family: inherit; }
    @media(min-width:641px) { .notif-overlay { padding-top: 100px; } }

    /* ── Expertise Bar ── */
    .expertise-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-radius: 16px; margin: 0 auto 10px; border: 1px solid var(--stone-100); max-width: 480px; transition: box-shadow 0.2s; }
    .expertise-icon { flex-shrink: 0; }
    .expertise-icon svg { width: 24px; height: 24px; }
    .expertise-info { flex: 1; }
    .expertise-name { font-size: 13px; font-weight: 700; color: var(--stone-900); display: block; }
    .expertise-progress { height: 5px; background: var(--stone-100); border-radius: 3px; margin-top: 4px; overflow: hidden; }
    .expertise-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #E63B5A, #C93251); transition: width 0.5s ease; }
    .expertise-xp { font-size: 11px; color: var(--stone-400); font-weight: 600; white-space: nowrap; }

    /* ── Daily Tip ── */
    .daily-tip { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border-radius: 16px; padding: 14px 16px; margin: 0 auto 10px; border: 1px solid rgba(245,158,11,0.12); max-width: 480px; transition: transform 0.15s; }
    .daily-tip:active { transform: scale(0.99); }
    .tip-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .tip-header svg { width: 18px; height: 18px; color: #B45309; flex-shrink: 0; }
    .tip-label { font-size: 11px; font-weight: 700; color: #B45309; text-transform: uppercase; letter-spacing: 0.5px; }
    .tip-text { font-size: 13px; color: #78350F; line-height: 1.6; margin: 0; }

    /* ── Smart Alerts ── */
    .smart-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 auto 10px; border-radius: 16px; font-size: 13px; max-width: 480px; transition: transform 0.15s; }
    .smart-alert svg { flex-shrink: 0; width: 18px; height: 18px; }
    .alert-urgent { background: #FEF2F2; border: 1px solid rgba(239,68,68,0.12); }
    .alert-urgent svg { color: #B91C1C; }
    .alert-seasonal { background: #EFF6FF; border: 1px solid rgba(59,130,246,0.12); }
    .alert-seasonal svg { color: var(--coral, #E63B5A); }
    .alert-suggestion { background: #F0FDF4; border: 1px solid rgba(34,197,94,0.12); }
    .alert-suggestion svg { color: #16A34A; }
    .alert-text { flex: 1; color: #374151; margin: 0; line-height: 1.4; }

    /* ── Discover Feed ── */
    .discover-feed { margin: 16px auto; max-width: 480px; }
    .discover-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
    .discover-title svg { width: 18px; height: 18px; color: var(--coral); }
    .discover-card { background: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: transform 0.15s; border: 1px solid var(--stone-100); }
    .discover-card:active { transform: scale(0.98); }
    .discover-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
    .discover-card-header svg { width: 16px; height: 16px; color: var(--stone-500); }
    .discover-label { font-size: 10px; font-weight: 700; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.5px; }
    .discover-content { font-size: 15px; font-weight: 600; color: var(--stone-900); margin: 0; }
    .discover-subtitle { font-size: 12px; color: var(--stone-500); margin: 3px 0 0; }

    /* ── Weekly Insights ── */
    .weekly-insights { background: #fff; border-radius: 20px; padding: 18px; margin: 16px auto; border: 1px solid var(--stone-100); max-width: 480px; }
    .weekly-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
    .weekly-title svg { width: 18px; height: 18px; color: var(--coral); }
    .weekly-stats { display: flex; gap: 8px; margin-bottom: 10px; }
    .weekly-stat { flex: 1; text-align: center; background: var(--stone-50); border-radius: 12px; padding: 10px 6px; }
    .weekly-stat-value { display: block; font-size: 20px; font-weight: 800; color: var(--stone-900); }
    .weekly-stat-label { font-size: 10px; color: var(--stone-400); }
    .weekly-highlight { font-size: 12px; color: #374151; line-height: 1.5; margin: 0; }

    /* ── Streak Celebration ── */
    .streak-celebration { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
    .streak-celebration.visible { opacity: 1; pointer-events: auto; }
    .streak-celebration-card { background: #fff; border-radius: 24px; padding: 40px 32px; text-align: center; max-width: 300px; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
    .streak-celebration.visible .streak-celebration-card { transform: scale(1); }

    /* ── Skin Tracker ── */
    .tracker-capture-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; background: #000; border-radius: 20px; position: relative; overflow: hidden; margin-bottom: 16px; }
    .tracker-guide { position: relative; width: 220px; height: 293px; }
    .tracker-face-outline { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
    #tracker-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scaleX(-1); width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
    .tracker-instructions { position: absolute; bottom: 80px; left: 16px; right: 16px; z-index: 3; }
    .tracker-checklist { background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 10px 14px; }
    .tracker-check { font-size: 12px; color: rgba(255,255,255,0.8); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
    .tracker-check svg { width: 14px; height: 14px; flex-shrink: 0; }
    .tracker-check-item { font-size: 12px; color: rgba(255,255,255,0.8); padding: 4px 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
    .tracker-checkbox { accent-color: var(--coral); width: 16px; height: 16px; }
    .tracker-capture-btn { position: absolute; bottom: 20px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
    .capture-ring { width: 50px; height: 50px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
    .tracker-capture-btn:active .capture-ring { transform: scale(0.85); }
    .tracker-review-screen { width: 100%; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
    .tracker-review-preview-wrap { width: 100%; background: #111; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; }
    .tracker-review-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tracker-review-insight { margin: 0; }
    .tracker-review-copy { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .tracker-review-copy strong { font-size: 13px; color: var(--stone-900); }
    .tracker-review-copy span { font-size: 12px; color: var(--stone-600); line-height: 1.5; }
    .tracker-review-points, .tracker-review-tips { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
    .tracker-review-point, .tracker-review-tip { font-size: 12px; color: var(--stone-600); line-height: 1.45; padding-left: 16px; position: relative; }
    .tracker-review-point::before, .tracker-review-tip::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
    .tracker-review-actions { display: flex; flex-direction: column; gap: 8px; }

    /* ── Evolution Dashboard ── */
    .evolution-dashboard { padding: 4px 0; }
    .evolution-dashboard h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
    .evolution-dashboard h3 svg { width: 20px; height: 20px; color: var(--coral); }
    .evolution-subtitle { font-size: 12px; color: var(--stone-400); margin-bottom: 16px; }
    .evolution-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
    .evolution-metric { background: #fff; border-radius: 14px; padding: 12px; border: 1px solid var(--stone-100); }
    .metric-header { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
    .metric-header svg { width: 14px; height: 14px; flex-shrink: 0; }
    .metric-label { font-size: 11px; font-weight: 600; color: var(--stone-500); }
    .metric-value { font-size: 26px; font-weight: 800; color: var(--stone-900); line-height: 1; }
    .metric-max { font-size: 13px; font-weight: 400; color: var(--stone-400); }
    .metric-bar { height: 4px; background: var(--stone-100); border-radius: 2px; margin: 6px 0 4px; overflow: hidden; }
    .metric-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
    .metric-trend { font-size: 10px; font-weight: 600; }
    .trend-up { color: #16A34A; }
    .trend-down { color: #B91C1C; }
    .trend-stable { color: var(--stone-400); }

    /* ── Snapshot Timeline ── */
    .evolution-timeline { margin: 16px 0; }
    .evolution-timeline h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
    .timeline-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--stone-100); }
    .timeline-item:last-child { border-bottom: none; }
    .timeline-thumb { width: 40px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--stone-100); }
    .timeline-date { display: block; font-size: 12px; font-weight: 600; color: var(--stone-900); }
    .timeline-score { font-size: 11px; color: var(--stone-500); }

    /* ── Correlation ── */
    .correlation-section { margin: 16px 0; }
    .correlation-section h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
    .correlation-disclaimer { font-size: 10px; color: var(--stone-400); font-style: italic; margin-bottom: 10px; }
    .correlation-item { background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 6px; border-left: 3px solid; }
    .impact-positive { border-left-color: #16A34A; }
    .impact-negative { border-left-color: #EF4444; }
    .correlation-product strong { display: block; font-size: 13px; color: var(--stone-900); }
    .correlation-product span { font-size: 11px; color: var(--stone-500); }
    .correlation-impacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .impact-tag { padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; }
    .impact-tag-good { background: #F0FDF4; color: #16A34A; }
    .impact-tag-bad { background: #FEF2F2; color: #B91C1C; }

    /* ── Skin Calendar ── */
    .skin-timeline { margin: 16px 0; }
    .skin-timeline h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
    .skin-timeline h4 svg { width: 16px; height: 16px; }
    .st-event { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--stone-100); }
    .st-event:last-child { border-bottom: none; }
    .st-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
    .st-dot-add { background: #16A34A; }
    .st-dot-remove { background: #EF4444; }
    .st-dot-pause { background: #F59E0B; }
    .st-dot-note { background: #3B82F6; }
    .st-dot-reaction { background: #B91C1C; }
    .st-dot-snap { background: #8B5CF6; }
    .st-body { flex: 1; }
    .st-body strong { font-size: 12px; color: var(--stone-900); }
    .st-body span { font-size: 11px; color: var(--stone-500); display: block; }

    /* ── Tracker Buttons ── */
    .evolution-capture-btn { display: block; width: 100%; padding: 14px; background: linear-gradient(135deg, #E63B5A, #C93251); color: #fff; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; margin: 12px 0 6px; }
    .evolution-share-btn { display: block; width: 100%; padding: 12px; background: #fff; border: 1.5px solid var(--stone-200); border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--stone-600); cursor: pointer; font-family: inherit; }
    .evolution-empty { text-align: center; padding: 28px 16px; }
    .evolution-empty svg { width: 44px; height: 44px; color: var(--stone-300); margin-bottom: 10px; }
    .tracker-disclaimer { font-size: 10px; color: var(--stone-400); font-style: italic; margin-top: 14px; line-height: 1.5; }
    .skin-insight-card { margin: 14px 0 0; padding: 12px; background: var(--stone-50); border-radius: 12px; }
    .skin-quality-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
    .skin-quality-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    .skin-quality-badge.quality-high { background: #ECFDF3; color: #15803D; }
    .skin-quality-badge.quality-medium { background: #FEF3C7; color: #B45309; }
    .skin-quality-badge.quality-low { background: #FEE2E2; color: #B91C1C; }
    .skin-quality-note { font-size: 11px; color: var(--stone-500); line-height: 1.45; }
    .skin-concern-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .skin-concern-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--stone-200); font-size: 11px; font-weight: 600; color: var(--stone-700); }
    /* Skin comparison */
    .evolution-compare-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--stone-700); cursor: pointer; font-family: inherit; margin-bottom: 8px; }
    .skin-compare-photos { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
    .skin-compare-side { flex: 1; text-align: center; }
    .skin-compare-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; background: var(--stone-100); }
    .skin-compare-thumb-empty { width: 100%; aspect-ratio: 3/4; border-radius: 12px; background: var(--stone-100); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--stone-400); }
    .skin-compare-side .skin-insight-card { margin-top: 10px; text-align: left; }
    .skin-compare-arrow { flex-shrink: 0; color: var(--coral); transform: rotate(-90deg); }
    .skin-compare-date { display: block; font-size: 11px; color: var(--stone-500); margin-top: 6px; }
    .skin-compare-score { display: block; font-size: 16px; font-weight: 700; color: var(--stone-800); }
    .skin-compare-overall { text-align: center; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
    .skin-compare-overall.positive { background: #F0FDF4; color: #16A34A; }
    .skin-compare-overall.negative { background: #FEF2F2; color: #B91C1C; }
    .skin-compare-overall.neutral { background: var(--stone-50); color: var(--stone-500); }
    .skin-compare-metrics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
    .skin-compare-metric { display: flex; align-items: center; gap: 10px; }
    .skin-compare-metric .metric-label { width: 70px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
    .skin-compare-bar-wrap { flex: 1; height: 8px; background: var(--stone-100); border-radius: 4px; position: relative; overflow: hidden; }
    .skin-compare-bar { position: absolute; top: 0; left: 0; height: 100%; border-radius: 4px; transition: width 0.5s ease; }
    .skin-compare-bar.old { z-index: 1; }
    .skin-compare-bar.new { z-index: 2; }
    .skin-compare-diff { font-size: 12px; font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }
    .skin-compare-diff.trend-up { color: #16A34A; }
    .skin-compare-diff.trend-down { color: #EF4444; }
    .skin-compare-diff.trend-stable { color: var(--stone-400); }
    .skin-compare-routine { margin-top: 12px; padding: 12px; background: var(--stone-50); border-radius: 12px; }
    .skin-compare-routine h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
    .routine-change { font-size: 12px; color: var(--stone-600); display: flex; align-items: center; gap: 6px; padding: 3px 0; }
    .routine-change.add .ni { color: #16A34A; }
    .routine-change.remove .ni { color: #EF4444; }
    /* Collapsible sections */
    .evolution-toggle, .timeline-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 8px 0; font-size: 13px; color: var(--coral); font-weight: 500; cursor: pointer; font-family: inherit; }
    .evolution-toggle .ni, .timeline-toggle .ni { transition: transform 0.2s ease; }
    .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    .timeline-header h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin: 0; }
    .timeline-count { font-size: 11px; color: var(--stone-400); }
    .timeline-preview { display: flex; gap: 4px; margin: 8px 0; }
    .timeline-dot-mini { width: 8px; height: 8px; border-radius: 50%; background: var(--stone-200); }
    .timeline-dot-mini.st-dot-add { background: #16A34A; }
    .timeline-dot-mini.st-dot-remove { background: #EF4444; }
    .timeline-dot-mini.st-dot-pause { background: #F59E0B; }
    .timeline-dot-mini.st-dot-note { background: #3B82F6; }
    .timeline-dot-mini.st-dot-reaction { background: #B91C1C; }
    .timeline-dot-mini.st-dot-snap { background: #8B5CF6; }
    .timeline-dot-mini.st-dot-am { background: #F59E0B; }
    .timeline-dot-mini.st-dot-pm { background: #8B5CF6; }

    /* ── Routine Calendar Action Sheet ── */
    .cal-action-sheet { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
    .cal-action-sheet.visible { opacity: 1; pointer-events: auto; }
    .cal-sheet-inner { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 440px; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .cal-action-sheet.visible .cal-sheet-inner { transform: translateY(0); }
    .cal-sheet-title { font-size: 14px; font-weight: 700; color: var(--stone-900); margin: 0 0 12px; text-align: center; }
    .cal-sheet-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: none; background: var(--stone-50); border-radius: 12px; margin-bottom: 6px; font-family: inherit; font-size: 14px; color: var(--stone-700); cursor: pointer; transition: background 0.15s; text-align: left; }
    .cal-sheet-btn:active { background: var(--stone-100); }
    .cal-sheet-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--stone-500); }
    .cal-sheet-btn.cal-danger { color: #B91C1C; }
    .cal-sheet-btn.cal-danger svg { color: #B91C1C; }
    .cal-sheet-cancel { display: block; width: 100%; padding: 14px; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--stone-400); cursor: pointer; margin-top: 4px; }

    /* ── Shopping Mode (refonte) ── */
    .shopping-badge-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); background: linear-gradient(135deg, var(--coral), #D42E4C); color: #fff; font-size: 13px; font-weight: 600; z-index: var(--z-overlay); cursor: pointer; box-shadow: 0 2px 8px rgba(230,59,90,0.3); }
    .badge-left { display: flex; align-items: center; gap: 8px; }
    .badge-left svg { width: 16px; height: 16px; flex-shrink: 0; }
    .badge-right { display: flex; align-items: center; gap: 10px; }
    .badge-pulse { width: 6px; height: 6px; border-radius: 50%; background: #FCD34D; animation: pulse 2s infinite; }
    .badge-count { font-weight: 400; opacity: 0.9; }
    .badge-see { padding: 3px 10px; background: rgba(255,255,255,0.2); border-radius: 8px; font-size: 11px; font-weight: 700; }
    .shopping-intro-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .shopping-intro-panel { background: #fff; border-radius: 24px; padding: 32px 24px; max-width: 380px; width: 100%; position: relative; animation: slideUpFade 0.3s ease; }
    .shopping-intro-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--stone-400); cursor: pointer; }
    .shopping-intro-header { text-align: center; margin-bottom: 20px; }
    .shopping-intro-header svg { color: var(--coral); }
    .shopping-intro-header h2 { font-size: 22px; font-weight: 700; margin: 12px 0 4px; }
    .shopping-intro-header p { font-size: 14px; color: var(--stone-500); }
    .shopping-intro-step { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--stone-100); }
    .shopping-intro-step:last-child { border-bottom: none; }
    .intro-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--coral-bg); color: var(--coral); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
    .intro-step-text strong { display: block; font-size: 14px; color: var(--stone-900); margin-bottom: 2px; }
    .intro-step-text span { font-size: 12px; color: var(--stone-500); line-height: 1.4; }
    .shopping-store-field { width: 100%; padding: 12px 16px; border: 1.5px solid var(--stone-200); border-radius: 12px; font-size: 14px; text-align: center; margin: 16px 0; font-family: inherit; box-sizing: border-box; }
    .shopping-store-field:focus { border-color: var(--coral); outline: none; }
    .shopping-activate-btn { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--coral), #D42E4C); color: #fff; border: none; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .shopping-activate-btn:active { transform: scale(0.98); }
    .shopping-intro-note { text-align: center; font-size: 12px; color: var(--stone-400); margin-top: 10px; }
    .shopping-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
    .shopping-panel { background: #fff; border-radius: 24px 24px 0 0; padding: 24px 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px)); width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; animation: slideUpFade 0.3s ease; }
    .shopping-panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
    .shopping-panel-header h2 { flex: 1; font-size: 18px; font-weight: 700; margin: 0; }
    .shopping-panel-header h2 svg { vertical-align: middle; margin-right: 6px; width: 20px; height: 20px; }
    .shopping-store-tag { padding: 3px 10px; background: var(--coral-bg); color: var(--coral); border-radius: 8px; font-size: 11px; font-weight: 600; }
    .shopping-panel-close { background: none; border: none; color: var(--stone-400); cursor: pointer; }
    .shopping-panel-empty { text-align: center; padding: 32px 16px; }
    .shopping-panel-empty svg { color: var(--stone-300); }
    .shopping-panel-empty h3 { font-size: 18px; font-weight: 700; color: #374151; margin: 16px 0 8px; }
    .shopping-panel-empty p { font-size: 13px; color: var(--stone-500); line-height: 1.5; margin-bottom: 20px; }
    .shopping-winner-card { background: linear-gradient(135deg, var(--coral-bg), #FFE4EA); border: 1.5px solid rgba(230,59,90,0.15); border-radius: 18px; padding: 18px; margin-bottom: 14px; text-align: center; }
    .winner-badge-label { font-size: 11px; font-weight: 700; color: var(--coral); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
    .winner-product-row { display: flex; align-items: center; gap: 14px; justify-content: center; }
    .winner-score-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--coral); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; }
    .winner-details { text-align: left; }
    .winner-details strong { display: block; font-size: 15px; color: var(--stone-900); }
    .winner-details>span { display: block; font-size: 12px; color: var(--stone-500); }
    .winner-match-label { font-size: 11px; font-weight: 600; color: var(--coral); margin-top: 2px; }
    .shopping-product-list h3 { font-size: 13px; font-weight: 600; color: var(--stone-400); margin: 0 0 8px; }
    .shopping-product-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--stone-100); }
    .shopping-product-item:last-child { border-bottom: none; }
    .item-winner { font-weight: 600; }
    .product-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--stone-100); color: var(--stone-500); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .item-winner .product-rank { background: var(--coral-bg); color: var(--coral); }
    .product-mini-score { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .product-item-info { flex: 1; min-width: 0; }
    .product-item-info strong { display: block; font-size: 12px; color: var(--stone-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-item-info>span { display: block; font-size: 11px; color: var(--stone-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .product-remove-btn { background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; }
    .shopping-panel-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
    .shopping-action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }
    .shopping-action-primary { background: var(--coral); color: #fff; }
    .shopping-action-secondary { background: #fff; border: 1.5px solid var(--stone-200) !important; color: var(--stone-700); }
    .shopping-action-share { background: linear-gradient(135deg, var(--coral), #D42E4C); color: #fff; }
    .shopping-deactivate-btn { display: block; width: 100%; margin-top: 12px; padding: 12px; background: none; border: none; font-size: 13px; color: var(--stone-400); cursor: pointer; font-family: inherit; text-decoration: underline; }
    @media(min-width:641px) { .shopping-panel-overlay { align-items: center; } .shopping-panel { border-radius: 24px; } }
    .shopping-mode-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: linear-gradient(135deg, var(--coral-bg), #FFE4EA); border: 1.5px solid rgba(230,59,90,0.15); border-radius: 16px; cursor: pointer; margin: 0 auto 10px; text-align: left; font-family: inherit; max-width: 480px; transition: transform 0.15s, box-shadow 0.2s; }
    .shopping-mode-btn:active { transform: scale(0.98); }
    .shopping-btn-icon svg { width: 22px; height: 22px; color: var(--coral); }
    .shopping-btn-text { flex: 1; }
    .shopping-btn-text strong { display: block; font-size: 14px; color: var(--stone-900); }
    .shopping-btn-text span { font-size: 11px; color: var(--stone-500); }
    .shopping-btn-arrow svg { width: 16px; height: 16px; color: var(--stone-400); }
    .shopping-mode-active { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--coral), #D42E4C); border: none; border-radius: 16px; cursor: default; margin: 0 auto 10px; color: #fff; position: relative; font-family: inherit; max-width: 480px; }
    .shopping-active-top { display: flex; align-items: center; gap: 10px; }
    .shopping-pulse { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #FCD34D; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }
    .shopping-active-info { flex: 1; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
    .shopping-active-info svg { width: 20px; height: 20px; flex-shrink: 0; }
    .shopping-active-actions { display: flex; gap: 8px; }
    .shopping-see-btn { padding: 8px 16px; background: rgba(255,255,255,0.2); border: none; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer; font-family: inherit; }
    .shopping-see-btn:active { background: rgba(255,255,255,0.35); }
    .shopping-end-quick { padding: 8px 12px; background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.8); cursor: pointer; font-family: inherit; }
    .shopping-scan-hint { font-size: 12px; color: rgba(255,255,255,0.7); text-align: center; }
    .shopping-counter-fab { position: fixed; top: 72px; right: 16px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--coral),#D42E4C); color: #fff; display: flex; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 4px 12px rgba(230,59,90,0.4); z-index: var(--z-overlay); cursor: pointer; font-size: 14px; font-weight: 700; }
    .shopping-counter-fab svg { width: 16px; height: 16px; }
    .counter-bounce { animation: counterBounce 0.4s ease; }
    @keyframes counterBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
    .shopping-start-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .shopping-start-content { background: #fff; border-radius: 24px; padding: 32px 24px; text-align: center; max-width: 360px; width: 100%; animation: slideUpFade 0.3s ease; }
    .shopping-start-content h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
    .shopping-start-content p { font-size: 13px; color: #6B7280; line-height: 1.5; margin: 0 0 16px; }
    .shopping-location-input { width: 100%; padding: 12px 16px; border: 1.5px solid #E5E7EB; border-radius: 12px; font-size: 14px; text-align: center; margin-bottom: 14px; font-family: inherit; box-sizing: border-box; }
    .shopping-location-input:focus { border-color: var(--coral); outline: none; }
    .shopping-start-steps { margin-bottom: 16px; text-align: left; }
    .shopping-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: #374151; }
    .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--coral-bg); color: var(--coral); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .shopping-start-go { width: 100%; padding: 14px; background: linear-gradient(135deg,var(--coral),#D42E4C); color: #fff; border: none; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .shopping-verdict-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); overflow-y: auto; padding: 20px; display: flex; align-items: flex-start; justify-content: center; }
    .shopping-verdict-panel { background: #F9FAFB; border-radius: 24px; padding: 24px; max-width: 420px; width: 100%; margin: 40px 0; animation: slideUpFade 0.3s ease; }
    .shopping-verdict-header { text-align: center; margin-bottom: 16px; }
    .shopping-verdict-header h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
    .shopping-location-tag { display: inline-block; padding: 3px 10px; background: var(--coral-bg); color: var(--coral); border-radius: 8px; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
    .shopping-count { display: block; font-size: 12px; color: #6B7280; }
    .shopping-winner { background: #fff; border-radius: 20px; padding: 20px; text-align: center; border: 2px solid #F59E0B; margin-bottom: 14px; }
    .winner-crown { margin-bottom: 6px; }
    .winner-crown svg { width: 28px; height: 28px; }
    .winner-label { font-size: 11px; font-weight: 700; color: #B45309; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
    .winner-product { display: flex; align-items: center; gap: 12px; justify-content: center; }
    .winner-score { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--coral),#D42E4C); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; }
    .winner-info { text-align: left; }
    .winner-info strong { display: block; font-size: 15px; color: #1C1917; }
    .winner-info>span { display: block; font-size: 12px; color: #6B7280; }
    .winner-match { font-size: 10px; font-weight: 600; color: var(--coral); }
    .winner-claims,.winner-savings { margin-top: 8px; font-size: 11px; padding: 4px 10px; border-radius: 8px; display: inline-block; }
    .winner-claims { background: #F0FDF4; color: #374151; }
    .winner-savings { background: #FEF3C7; color: #92400E; margin-left: 4px; }
    .shopping-ranking { margin-bottom: 14px; }
    .shopping-ranking h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
    .shopping-rank-item { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 5px; }
    .rank-winner { border: 1.5px solid var(--coral); }
    .rank-position { width: 22px; height: 22px; border-radius: 50%; background: #F3F4F6; color: #6B7280; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .rank-winner .rank-position { background: var(--coral-bg); color: var(--coral); }
    .rank-score { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .rank-score.grade-excellent { background: #DCFCE7; color: #16A34A; }
    .rank-score.grade-good { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .rank-score.grade-caution { background: #FEF3C7; color: #D97706; }
    .rank-score.grade-poor { background: #FEE2E2; color: #B91C1C; }
    .rank-info { flex: 1; min-width: 0; }
    .rank-info strong { display: block; font-size: 12px; color: #1C1917; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rank-info>span { display: block; font-size: 10px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rank-details { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .rank-match { font-size: 9px; font-weight: 600; color: var(--coral); }
    .rank-tier { font-size: 10px; color: #9CA3AF; }
    .shopping-missing { background: #FFFBEB; border-radius: 14px; padding: 12px; margin-bottom: 14px; border: 1px solid rgba(245,158,11,0.2); }
    .shopping-missing h4 { font-size: 13px; font-weight: 600; color: #92400E; margin: 0 0 4px; }
    .shopping-missing p { font-size: 12px; color: #78350F; margin: 0; }
    .shopping-actions { display: flex; flex-direction: column; gap: 6px; }
    .shopping-share-btn { padding: 14px; background: linear-gradient(135deg,#E63B5A,#C93251); color: #fff; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .shopping-add-btn { padding: 12px; background: #fff; border: 1.5px solid var(--coral); border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--coral); cursor: pointer; font-family: inherit; }
    .shopping-end-btn { padding: 10px; background: none; border: none; font-size: 13px; color: #6B7280; cursor: pointer; font-family: inherit; }

    /* ── Animation tokens ── */
    /* :root animation tokens → merged into top-level :root */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ── iOS Scroll ── */
    .main-screen, .tab-content, [id$="-tab"] { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
    .main-screen::-webkit-scrollbar, .tab-content::-webkit-scrollbar { display: none; }
    .main-screen, .tab-content { scrollbar-width: none; }

    /* ── Uniform transitions ── */
    button, .btn, [onclick] { transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
    .home-context-card, .duel-choice, .discover-card, .checkin-compact-btn, .daily-tip, .smart-alert { transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out); }
    .metric-fill, .expertise-fill, .dna-progress-bar { transition: width var(--dur-slow) var(--ease-smooth); }

    /* ── Overlay backdrops ── */
    .shopping-intro-overlay, .shopping-panel-overlay, .notif-overlay, .cal-action-sheet, .checkin-popup, .streak-celebration { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

    /* ── Alerts ── */
    .alert-notice {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 14px;
      background: var(--amber-bg);
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      font-size: 12px;
      color: #92400E;
      line-height: 1.5;
    }

    .alert-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--amber); }

    /* ── Scientific reference ── */
    .actif-reference {
      font-size: 11px;
      color: var(--stone-400);
      font-style: italic;
      line-height: 1.5;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--stone-100);
    }

    .pubmed-live {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fff7f5 0%, #ffffff 100%);
      border: 1px solid #f5ddd8;
    }

    .pubmed-link {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      color: var(--stone-900);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
    }

    .pubmed-link:hover {
      color: var(--coral);
    }

    .pubmed-count {
      color: var(--coral);
      font-size: 16px;
    }

    .pubmed-latest {
      display: block;
      margin-top: 6px;
      color: var(--stone-500);
      font-size: 11px;
      line-height: 1.5;
    }

    /* ── Summary section ── */
    .verdict-summary {
      background: #FFFFFF;
      border-radius: var(--radius-lg);
      padding: 28px;
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      margin-bottom: 28px;
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
    }

    .verdict-summary-title {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--stone-900);
      margin-bottom: 14px;
    }

    .verdict-summary p {
      font-size: 14px;
      color: var(--stone-600);
      line-height: 1.7;
      margin-bottom: 10px;
    }

    .verdict-summary p:last-child { margin-bottom: 0; }

    /* ── Scoring mode badge ── */
    .scoring-mode-badge {
      display: inline-flex;
      padding: 4px 12px;
      background: var(--blue-bg);
      color: #3B82F6;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 6px;
    }

    /* ── Product type toggle ── */
    .product-type-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 13px;
      color: var(--stone-600);
    }

    .toggle-btn {
      padding: 8px 14px;
      border: 1.5px solid var(--stone-200);
      border-radius: 8px;
      background: #fff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      color: var(--stone-600);
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }

    .toggle-btn:hover { border-color: var(--coral); color: var(--coral); }

    .toggle-btn.active {
      background: var(--coral-bg);
      border-color: var(--coral);
      color: var(--coral);
      font-weight: 600;
    }

    /* ── Regulatory sections ── */
    .reg-section {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px 28px;
      margin-top: 16px;
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
    }

    .reg-critical { border-left: 3px solid #EF4444; }
    .reg-warning { border-left: 3px solid #F59E0B; }
    .reg-info { border-left: 3px solid #3B82F6; }

    .reg-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--stone-900);
      margin-bottom: 14px;
    }

    .reg-critical .reg-section-header svg { color: #EF4444; }
    .reg-warning .reg-section-header svg { color: #F59E0B; }
    .reg-info .reg-section-header svg { color: var(--coral, #E63B5A); }

    .reg-count {
      background: var(--stone-100);
      color: var(--stone-500);
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
    }

    .reg-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--stone-100);
      flex-wrap: wrap;
    }

    .reg-item:last-of-type { border-bottom: none; }

    .reg-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--stone-800);
    }

    .reg-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .reg-badge-critical { background: var(--red-bg); color: #B91C1C; }
    .reg-badge-amber { background: var(--amber-bg); color: #D97706; }
    .reg-badge-info { background: var(--stone-100); color: var(--stone-500); }

    .reg-note {
      font-size: 11px;
      color: var(--stone-400);
      line-height: 1.5;
      width: 100%;
      margin-top: 4px;
    }

    .reg-allergen-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .reg-allergen-tag {
      display: inline-flex;
      padding: 4px 10px;
      background: var(--blue-bg);
      color: #2563EB;
      font-size: 11px;
      font-weight: 500;
      border-radius: 6px;
    }

    .reg-allergen-banned {
      background: var(--red-bg);
      color: #B91C1C;
    }

    /* ── Composition compl\u00E8te (INCI tags) ── */
    .inci-tags-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 4px 0;
    }

    .inci-tag-rich {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 10px;
      border: 1px solid #E5E7EB;
      background: #F9FAFB;
      min-width: 0;
    }

    .inci-tag-pos {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.06);
      font-size: 9px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
    }

    .inci-tag-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .inci-tag-name {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .inci-tag-func {
      font-size: 10px;
      font-weight: 400;
      opacity: 0.75;
      line-height: 1.3;
      margin-top: 1px;
    }

    .inci-tag-green { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
    .inci-tag-amber { background: #FEF3C7; color: #B45309; border-color: #FCD34D; }
    .inci-tag-red { background: #FECACA; color: #B91C1C; border-color: #F87171; }
    .inci-tag-orange { background: #FED7AA; color: #C2410C; border-color: #FB923C; }
    .inci-tag-blue { background: var(--coral-bg, #FFF5F0); color: #1D4ED8; border-color: #93C5FD; }
    .inci-tag-gray { background: #F3F4F6; color: #6B7280; border-color: #D1D5DB; }
    .inci-tag-teal { background: #CCFBF1; color: #0F766E; border-color: #5EEAD4; }
    .inci-tag-slate { background: #E2E8F0; color: #334155; border-color: #94A3B8; }
    .inci-tag-purple { background: #E9D5FF; color: #6D28D9; border-color: #A78BFA; }

    /* ── M\u00E9thodologie accordion ── */
    .methodology-card {
      background: #fff;
      border-radius: var(--radius-lg);
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      margin-bottom: 16px;
      overflow: hidden;
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
    }

    .methodology-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 18px 24px;
      border: none;
      background: transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      color: var(--stone-800);
      cursor: pointer;
      text-align: left;
      transition: background 0.2s ease;
    }

    .methodology-toggle:hover { background: var(--stone-50); }

    .methodology-toggle svg {
      transition: transform 0.3s ease;
      color: var(--stone-400);
      flex-shrink: 0;
    }

    .methodology-toggle.open svg { transform: rotate(180deg); }

    .methodology-body {
      display: none;
      padding: 0 24px 20px;
      font-size: 13px;
      color: var(--stone-600);
      line-height: 1.7;
    }

    .methodology-body.visible { display: block; animation: fadeIn 0.3s ease; }

    .methodology-body p { margin-bottom: 10px; }

    .methodology-body strong {
      font-weight: 600;
      color: var(--stone-800);
    }

    .methodology-body a {
      color: var(--coral);
      text-decoration: none;
    }

    .methodology-body a:hover { text-decoration: underline; }

    /* ── Replacement suggestion ── */
    .actif-suggestion {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 14px;
      background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
      border-radius: 8px;
      border: 1px solid rgba(59, 130, 246, 0.1);
      font-size: 12px;
      color: #1E40AF;
      line-height: 1.5;
      margin-top: 10px;
    }

    .actif-suggestion svg { flex-shrink: 0; margin-top: 2px; color: var(--coral, #E63B5A); }
    .actif-suggestion strong { font-weight: 600; }

    /* ── Authority signature ── */
    .validation-signature {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      background: linear-gradient(135deg, #FAFAF9, #F5F5F4);
      border-radius: 16px;
      border: 1px solid var(--stone-100);
    }
    .validation-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--coral), #F06580);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 500;
      flex-shrink: 0;
    }
    .validation-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--stone-400);
      font-weight: 600;
      margin-bottom: 2px;
    }
    .validation-name {
      font-family: 'Playfair Display', serif;
      font-weight: 500;
      font-size: 15px;
      color: var(--stone-900);
      margin-bottom: 2px;
    }
    .validation-title {
      font-size: 12px;
      color: var(--stone-500);
      line-height: 1.5;
    }

    /* ── CTA bottom section ── */
    .verdict-cta-section {
      text-align: center;
      padding: 32px 0 16px;
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
    }

    .verdict-cta-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .verdict-cta-buttons .btn { min-width: 260px; }

    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--stone-600);
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

    .share-btn:hover {
      border-color: var(--coral);
      color: var(--coral);
      background: var(--coral-bg);
    }

    .share-btn svg { flex-shrink: 0; }

    .compare-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 52px;
      padding: 14px 18px;
      margin: 12px 0 20px;
      border: 1.5px solid var(--stone-200);
      border-radius: var(--radius-md);
      background: var(--stone-50);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--stone-700);
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    }

    .compare-btn:hover {
      border-color: var(--coral);
      color: var(--coral);
      background: var(--coral-bg);
    }

    .compare-btn svg { flex-shrink: 0; }

    .verdict-branding {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--stone-100);
    }

    .verdict-branding-logo {
      font-family: 'Playfair Display', serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--stone-300);
      margin-bottom: 8px;
    }

    .verdict-branding-disclaimer {
      font-size: 11px;
      color: var(--stone-400);
      line-height: 1.6;
      max-width: 400px;
      margin: 0 auto;
    }

    .signup-cta-link {
      display: block;
      font-size: 13px;
      color: var(--stone-500);
      text-decoration: none;
      transition: color 0.2s;
    }

    .signup-cta-link:hover { color: var(--coral); }

    /* ── No-match state ── */
    .no-match-state {
      text-align: center;
      padding: 48px 24px;
    }

    .no-match-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 20px;
      background: var(--stone-100);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--stone-300);
    }

    .no-match-state h3 {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 400;
      color: var(--stone-800);
      margin-bottom: 8px;
    }

    .no-match-state p {
      font-size: 14px;
      color: var(--stone-500);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    /* ── Tooltip (for red flags) ── */
    .tooltip-wrap {
      position: relative;
    }

    .tooltip-text {
      display: none;
      position: fixed;
      background: var(--stone-900);
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      padding: 10px 14px;
      border-radius: 12px;
      white-space: normal;
      left: 16px; right: 16px;
      width: auto; max-width: 340px;
      text-align: left;
      z-index: var(--z-modal);
      pointer-events: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    @media (hover: hover) {
      .tooltip-wrap:hover .tooltip-text {
        display: block; position: absolute;
        bottom: calc(100% + 8px); top: auto;
        left: 50%; right: auto; width: 260px;
        transform: translateX(-50%);
      }
    }
    .tooltip-wrap.tooltip-active .tooltip-text { display: block; }

    /* ── Compare mode ── */
    .compare-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .compare-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--coral);
      margin-bottom: 8px;
      text-align: center;
    }

    .compare-highlights {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      border: var(--card-border);
      box-shadow: var(--card-shadow);
      margin: 24px 0;
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
    }

    .compare-highlights-title {
      font-family: 'Playfair Display', serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--stone-900);
      margin-bottom: 14px;
    }

    .compare-highlight-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      font-size: 14px;
      color: var(--stone-700);
      border-bottom: 1px solid var(--stone-100);
    }

    .compare-highlight-item:last-child { border-bottom: none; }

    .compare-highlight-item svg { flex-shrink: 0; color: var(--coral); }

    .compare-restart-btn {
      display: block;
      margin: 20px auto;
      padding: 12px 28px;
    }
    /* Compare modal */
    .compare-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--compare-keyboard-inset, 0px)); }
    .compare-overlay.visible { opacity: 1; }
    .compare-modal-inner { background: var(--surface, #fff); border-radius: 24px; width: 100%; max-width: 520px; max-height: calc(var(--compare-viewport-height, 100vh) - 24px); overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 18px 48px rgba(28,25,23,0.18); }
    .compare-overlay.visible .compare-modal-inner { transform: translateY(0); }
    .compare-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .compare-modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
    .compare-modal-header button { background: none; border: none; font-size: 24px; color: var(--stone-400); cursor: pointer; padding: 4px; min-width: 40px; min-height: 40px; }
    .compare-modal-subtitle { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--stone-500); }
    .compare-slot { padding: 18px; background: var(--stone-50); border-radius: 16px; margin-bottom: 14px; }
    .compare-slot.filled { border-left: 3px solid var(--coral); }
    .compare-slot-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--coral); font-weight: 600; margin-bottom: 8px; }
    .compare-slot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
    .compare-slot strong { display: block; font-size: 14px; color: var(--stone-800); margin-bottom: 4px; }
    .compare-slot span { font-size: 12px; color: var(--stone-500); }
    .compare-slot-edit { border: none; background: #fff; color: var(--coral); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
    .compare-search-input { width: 100%; margin-top: 4px; }
    .compare-modal-action { width: 100%; min-height: 50px; border: none; border-radius: 14px; background: linear-gradient(135deg, #E63B5A, #C93251); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
    .compare-modal-action:disabled { opacity: 0.45; cursor: not-allowed; }
    .compare-modal-action:not(:disabled):active { transform: translateY(1px); }
    button.history-card { width: 100%; border: none; background: transparent; font: inherit; text-align: left; }

    /* ── Responsive ── */
    @media (min-width: 768px) {
      .compare-container {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
          .verdict-hero { padding: 32px 0 4px; }
      .score-card { padding: 32px 16px 24px; border-radius: 16px; }
      .score-card-name { font-size: 17px; }
      .score-number-value { font-size: 40px; }
      .score-ring-wrap { width: 160px; height: 160px; }
      .score-ring-svg { width: 160px; height: 160px; }
      .actif-card { padding: 20px 16px; }
      .verdict-summary { padding: 24px 20px; }
      .verdict-cta-buttons .btn { min-width: 100%; }
      .tab-toggle button { padding: 10px 8px; font-size: 12px; }
      .inci-actions { flex-direction: column; }
    }

    @media (max-width: 380px) {
        .score-number-value { font-size: 34px; }
      .score-ring-wrap { width: 140px; height: 140px; }
      .score-ring-svg { width: 140px; height: 140px; }
    }

    /* ── Photo identification tab ── */
    .photo-identify-zone {
      text-align: center;
      padding: 32px 16px;
    }
    .photo-icon { color: inherit; }
    .photo-title {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      font-weight: 400;
      color: var(--stone-900);
      margin-bottom: 8px;
    }
    .photo-subtitle {
      font-size: 13px;
      color: var(--stone-500);
      margin-bottom: 24px;
      line-height: 1.5;
    }
    .photo-capture-btn { margin-bottom: 16px; }
    .photo-preview {
      width: 100%;
      max-width: 300px;
      border-radius: var(--radius-lg);
      margin: 16px auto;
      display: block;
      border: 1px solid var(--stone-200);
    }
    .photo-success {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: #DCFCE7;
      border: 1px solid #86EFAC;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: #15803D;
      margin-top: 12px;
      text-align: left;
    }
    .photo-error {
      padding: 12px 16px;
      background: #FEF2F2;
      border: 1px solid #FECACA;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: #B91C1C;
      margin-top: 12px;
      text-align: left;
      line-height: 1.6;
    }
    .photo-partial {
      padding: 12px 16px;
      background: #FFFBEB;
      border: 1px solid #FDE68A;
      border-radius: var(--radius-md);
      font-size: 13px;
      color: #B45309;
      margin-top: 12px;
      text-align: left;
      line-height: 1.6;
    }
    .photo-match {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      font-size: 12px;
      color: #16A34A;
      margin-top: 8px;
    }
    .photo-confidence {
      font-size: 11px;
      color: var(--stone-400);
    }

    /* ── Polish: Sequential section reveal ── */
    .result-section { will-change: opacity, transform; }

    /* ── Polish: Score pulse + glow ── */
    @keyframes scorePulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.04); }
      100% { transform: scale(1); }
    }
    .score-ring-wrap.pulse { animation: scorePulse 0.4s ease; }
    .score-ring-wrap.grade-excellent { filter: drop-shadow(0 0 20px rgba(34,197,94,0.15)); }
    .score-ring-wrap.grade-good { filter: drop-shadow(0 0 20px rgba(230,59,90,0.12)); }
    .score-ring-wrap.grade-caution { filter: drop-shadow(0 0 20px rgba(245,158,11,0.15)); }
    .score-ring-wrap.grade-alert { filter: drop-shadow(0 0 20px rgba(239,68,68,0.15)); }

    /* ── Polish: Community counter ── */
    .community-counter { text-align:center; padding:24px; margin:24px 0; opacity:0.5; transition:opacity 0.3s; }
    .community-counter:hover { opacity:1; }
    .counter-number { font-family:'Playfair Display',serif; font-size:28px; font-weight:500; color:var(--stone-800); }
    .counter-label { display:block; font-size:12px; color:var(--stone-400); margin-top:4px; letter-spacing:0.3px; }

    /* ── Polish: INCI tag tooltips ── */
    .inci-tag-rich { position: relative; cursor: default; }
    .inci-tag-rich::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #1C1917;
      color: white;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 11px;
      line-height: 1.4;
      max-width: 260px;
      white-space: normal;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s, transform 0.15s;
      z-index: var(--z-sticky);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .inci-tag-rich::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: #1C1917;
      opacity: 0;
      transition: opacity 0.15s;
      z-index: var(--z-sticky);
    }
    .inci-tag-rich:hover::after, .inci-tag-rich:hover::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    @media (hover: none) {
      .inci-tag-rich:active::after, .inci-tag-rich:active::before { opacity: 1; }
    }

    /* ── Polish: Multi-share panel ── */
    .share-panel { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .share-panel .share-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 16px; border: 1.5px solid var(--stone-200);
      border-radius: 10px; background: #fff; font-family: inherit;
      font-size: 12px; font-weight: 500; color: var(--stone-600);
      cursor: pointer; transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }
    .share-panel .share-btn:hover { border-color: var(--coral); color: var(--coral); }

    /* ── Story share hero CTA ── */
    .share-story-hero {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; max-width: 340px; margin: 0 auto 12px;
      padding: 16px 28px; border: none; border-radius: 16px;
      background: linear-gradient(135deg, #E63B5A 0%, #D42E4C 100%);
      color: #fff; font-family: inherit; font-size: 15px; font-weight: 600;
      cursor: pointer; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 4px 20px rgba(230,59,90,0.3), 0 1px 3px rgba(0,0,0,0.1);
    }
    .share-story-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(230,59,90,0.4); }
    .share-story-hero:active { transform: translateY(0); }
    .share-story-hero svg { flex-shrink: 0; }

    /* ── Story preview modal ── */
    .story-preview-modal {
      position: fixed; inset: 0; z-index: var(--z-modal);
      background: rgba(0,0,0,0.85);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
      -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    }
    .story-preview-modal.visible { opacity: 1; pointer-events: auto; }
    .story-preview-img {
      max-height: 70vh; max-width: 90vw; border-radius: 20px;
      box-shadow: 0 20px 80px rgba(0,0,0,0.5);
      transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .story-preview-modal.visible .story-preview-img { transform: scale(1); }
    .story-preview-actions {
      display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center;
    }
    .story-preview-actions button {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 24px; border-radius: 14px; border: none;
      font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }
    .story-preview-actions .story-act-share {
      background: #E63B5A; color: #fff;
      box-shadow: 0 4px 16px rgba(230,59,90,0.35);
    }
    .story-preview-actions .story-act-share:hover { background: #D42E4C; }
    .story-preview-actions .story-act-download {
      background: rgba(255,255,255,0.15); color: #fff;
      border: 1.5px solid rgba(255,255,255,0.25);
    }
    .story-preview-actions .story-act-download:hover { background: rgba(255,255,255,0.25); }
    .story-preview-actions .story-act-close {
      background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
    }
    .story-preview-actions .story-act-close:hover { color: #fff; }
    .story-preview-hint {
      color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 16px; text-align: center;
    }

    /* ── Polish: Sticky CTA on mobile ── */
    .sticky-bar { display:none; position:fixed; bottom:calc(56px + env(safe-area-inset-bottom, 20px)); left:0; right:0; padding:10px 16px; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--stone-100); z-index:var(--z-sticky); }
    .sticky-bar-btn { width:100%; padding:14px; background:var(--coral); color:#fff; border:none; border-radius:12px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
    @media (max-width:768px) { .sticky-bar.visible { display:block; } }

    /* ── Similar products grid ── */
    .similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
    .similar-card { display:block; padding:20px; background:white; border:1px solid var(--stone-100); border-radius:14px; text-decoration:none; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); }
    .similar-card:hover { border-color:var(--coral); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); }
    .similar-brand { font-size:11px; font-weight:600; color:var(--stone-400); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
    .similar-name { font-size:15px; font-weight:500; color:var(--stone-900); margin-bottom:4px; }
    .similar-category { font-size:12px; color:var(--stone-400); margin-bottom:12px; }
    .similar-arrow { font-size:13px; color:var(--coral); font-weight:500; }

    /* ── Compare table ── */
    .compare-table { border-radius:14px; overflow:hidden; border:1px solid var(--stone-100); margin:24px 0; }
    .compare-row { display:grid; grid-template-columns:1.2fr 1fr 1fr; border-bottom:1px solid var(--stone-50); }
    .compare-row:last-child { border-bottom:none; }
    .compare-cell { padding:12px 16px; font-size:13px; text-align:center; }
    .compare-cell.label { text-align:left; color:var(--stone-500); font-size:12px; font-weight:500; }
    .compare-cell.winner { background:#F0FDF4; color:#16A34A; font-weight:600; }
    .compare-header .compare-cell { font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--stone-400); background:var(--stone-50); padding:10px 16px; }

    /* ── Score explanation accordion ── */
    .score-explanation { max-width:400px; margin:12px auto; text-align:center; }
    .score-explanation summary { font-size:12px; color:var(--stone-400); cursor:pointer; user-select:none; }
    .score-explanation summary:hover { color:var(--coral); }
    .score-explanation p { font-size:12px; color:var(--stone-500); line-height:1.6; margin-top:8px; text-align:left; padding:12px 16px; background:var(--stone-50); border-radius:10px; }

    /* ── Better skeleton loading ── */
    .skeleton-result { padding:24px; }
    .skeleton-ring { width:160px; height:160px; border-radius:50%; margin:0 auto 16px; }
    .skeleton-sub-scores { display:flex; justify-content:center; gap:24px; margin-bottom:16px; }
    .skeleton-pill { width:60px; height:40px; border-radius:8px; }
    .skeleton-verdict-line { height:20px; width:70%; margin:0 auto 24px; border-radius:10px; }
    .skeleton-line-new { height:14px; border-radius:7px; margin:8px auto; }
    .skeleton-line-new.w60 { width:60%; }
    .skeleton-card-new { height:60px; border-radius:12px; margin:8px 0; }
    .skeleton-card-new.tall { height:120px; }
    .skeleton-spacer { height:24px; }
    .skeleton-spacer-sm { height:12px; }
    .skeleton-ring,.skeleton-pill,.skeleton-line-new,.skeleton-card-new,.skeleton-verdict-line {
      background:linear-gradient(90deg,var(--stone-100) 25%,var(--stone-50) 50%,var(--stone-100) 75%);
      background-size:200% 100%;
      animation:shimmer 1.5s infinite;
    }
    @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

    /* ── DB update info ── */
    .db-update-info { text-align:center; font-size:11px; color:var(--stone-400); padding:16px; margin-top:8px; }

    /* ── Photo step indicators ── */
    .photo-steps { display:flex; justify-content:center; gap:32px; margin:16px 0; }
    .photo-step { display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0.3; transition:opacity 0.4s; }
    .photo-step.active,.photo-step.done { opacity:1; }
    .step-icon { width:32px; height:32px; border-radius:50%; background:var(--stone-200); color:white; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; transition:background 0.3s; }
    .photo-step.active .step-icon { background:var(--coral); }
    .photo-step.done .step-icon { background:#22C55E; }
    .photo-step span { font-size:11px; color:var(--stone-500); }

    /* ── History mini-cards ── */
    .history-card { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:white; border:1px solid rgba(0,0,0,0.06); cursor:pointer; transition:all 0.2s; text-decoration:none; color:inherit; }
    .history-card:hover { border-color:var(--coral); background:var(--coral-bg); }
    .history-card .history-score { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
    .history-card .history-score.grade-excellent { background:#DCFCE7; color:#16A34A; }
    .history-card .history-score.grade-good { background:#DBEAFE; color:#2563EB; }
    .history-card .history-score.grade-caution { background:#FEF3C7; color:#D97706; }
    .history-card .history-score.grade-alert { background:#FEE2E2; color:#B91C1C; }
    .history-card .history-score.grade-unknown { background:var(--stone-100); color:var(--stone-500); }
    .history-brand { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--stone-400); }

    /* ── Typed insight cards ── */
    .insight { display:flex; gap:12px; padding:14px 16px; border-radius:12px; margin-bottom:8px; }
    .insight-positive { background:#F0FDF4; }
    .insight-positive .insight-icon { color:#16A34A; }
    .insight-warning { background:#FFFBEB; }
    .insight-warning .insight-icon { color:#D97706; }
    .insight-info { background:#EFF6FF; }
    .insight-info .insight-icon { color:#3B82F6; }
    .insight-icon { width:20px; flex-shrink:0; margin-top:1px; }
    .insight p { font-size:13px; line-height:1.6; color:var(--stone-700); margin:0; }

    /* ── Claim badges ── */
    .claim-check { display:flex; align-items:center; gap:6px; padding:4px 0; }
    .claim-badge-icon { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .claim-supported .claim-badge-icon { background:#DCFCE7; color:#16A34A; }
    .claim-unsupported .claim-badge-icon { background:#FEE2E2; color:#B91C1C; }
    .claim-unsupported strong { text-decoration:line-through; color:#991B1B; }

    /* ── Quick-actions sticky header ── */
    .quick-actions { position:fixed; bottom:calc(80px + env(safe-area-inset-bottom, 20px)); left:50%; transform:translateX(-50%) translateY(100%); width:auto; max-width:calc(100% - 40px); z-index:var(--z-overlay); background:var(--glass-bg-thick); -webkit-backdrop-filter:var(--glass-blur-thick); backdrop-filter:var(--glass-blur-thick); border:0.5px solid var(--glass-border); border-radius:var(--glass-radius); box-shadow:var(--glass-shadow-elevated); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; padding:8px 16px; }
    .quick-actions.visible { transform:translateX(-50%) translateY(0) !important; }
    .quick-actions-inner { max-width:800px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:52px; }
    .quick-product { display:flex; align-items:center; gap:10px; min-width:0; }
    .quick-score { font-size:20px; font-weight:700; flex-shrink:0; }
    .quick-score.grade-excellent { color:#16A34A; }
    .quick-score.grade-good { color:#3B82F6; }
    .quick-score.grade-caution { color:#D97706; }
    .quick-score.grade-alert { color:#B91C1C; }
    .quick-name { font-size:14px; color:var(--stone-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; font-weight:500; }
    .quick-btns { display:flex; gap:6px; flex-shrink:0; }
    .quick-btns button { padding:10px 16px; border:none; background:var(--stone-100); color:var(--stone-700); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:10px; transition:all 0.15s; -webkit-tap-highlight-color:transparent; }
    .quick-btns button:active { transform:scale(0.95); background:var(--stone-200); }

    /* ── Mobile compare stacking ── */
    @media (max-width:640px) {
      .compare-container { grid-template-columns:1fr !important; }
      .compare-container > div { width:100% !important; }
    }

    /* ── Simple/Expert mode toggle ── */
    .mode-toggle-wrap { text-align:center; margin:16px 0 8px; }
    .mode-toggle { display:inline-flex; align-items:center; gap:8px; }
    .mode-label { font-size:11px; font-weight:500; color:var(--stone-400); text-transform:uppercase; letter-spacing:0.5px; }
    .mode-switch { position:relative; width:36px; height:20px; display:inline-block; }
    .mode-switch input { opacity:0; width:0; height:0; }
    .mode-slider { position:absolute; inset:0; background:var(--stone-200); border-radius:10px; cursor:pointer; transition:background 0.25s; }
    .mode-slider::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.12); transition:transform 0.25s; }
    .mode-switch input:checked + .mode-slider { background:var(--coral); }
    .mode-switch input:checked + .mode-slider::after { transform:translateX(16px); }

    /* Expert-only content */
    .expert-only { display:none !important; }
    body.expert-mode .expert-only { display:block !important; }
    body.expert-mode .expert-inline { display:inline !important; }

    /* ── Routine Checker ── */
    .routine-builder { max-width:800px; margin:0 auto; padding:8px 0; }
    .routine-intro { text-align:center; margin-bottom:32px; }
    .routine-title { font-family:'Playfair Display',serif; font-size:24px; font-weight:400; color:var(--stone-900); margin-bottom:8px; }
    .routine-subtitle { font-size:14px; color:var(--stone-500); line-height:1.6; }
    .routine-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
    .routine-col { background:white; border:1px solid var(--stone-100); border-radius:16px; padding:16px; min-height:120px; display:flex; flex-direction:column; }
    .routine-col-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
    .routine-col-icon { font-size:20px; }
    .routine-col-header h3 { font-size:16px; font-weight:600; color:var(--stone-900); }
    .routine-products { min-height:96px; margin-bottom:12px; }
    .routine-product-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:var(--stone-50); border:1px solid var(--stone-100); margin-bottom:8px; animation:fadeInUp 0.3s ease; }
    .routine-product-score { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
    .routine-product-score.grade-excellent { background:#DCFCE7; color:#16A34A; }
    .routine-product-score.grade-good { background:#DBEAFE; color:#2563EB; }
    .routine-product-score.grade-caution { background:#FEF3C7; color:#D97706; }
    .routine-product-score.grade-alert { background:#FEE2E2; color:#B91C1C; }
    .routine-product-score.grade-unknown { background:var(--stone-100); color:var(--stone-500); }
    .routine-product-info { flex:1; min-width:0; }
    .routine-product-brand { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--stone-400); }
    .routine-product-name { font-size:13px; font-weight:500; color:var(--stone-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .routine-remove { background:none; border:none; color:var(--stone-300); font-size:18px; cursor:pointer; padding:4px; line-height:1; flex-shrink:0; }
    .routine-remove:hover { color:var(--coral); }
    .routine-add-btn { width:100%; padding:12px; border:2px dashed var(--stone-200); border-radius:10px; background:transparent; font-family:inherit; font-size:13px; font-weight:500; color:var(--stone-400); cursor:pointer; transition:all 0.2s; }
    .routine-add-btn:hover { border-color:var(--coral); color:var(--coral); }
    .routine-search-modal { position:fixed; inset:0; z-index:var(--z-modal); background:rgba(0,0,0,0.5); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity 0.3s ease; }
    .routine-search-modal.visible { opacity:1; }
    .routine-search-inner { width:100%; max-width:500px; background:white; border-radius:20px 20px 0 0; padding:24px; max-height:70vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .routine-search-modal.visible .routine-search-inner { transform:translateY(0); }
    .routine-search-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
    .routine-search-header h3 { font-size:16px; font-weight:600; color:var(--stone-900); }
    .routine-search-close { background:none; border:none; color:var(--stone-400); font-size:24px; cursor:pointer; line-height:1; padding:4px; }
    .routine-search-input { width:100%; padding:12px 16px; border:1px solid var(--stone-200); border-radius:12px; font-size:15px; outline:none; margin-bottom:12px; }
    .routine-search-input:focus { border-color:var(--coral); }
    .routine-search-item { padding:12px; border-radius:10px; cursor:pointer; transition:background 0.2s; }
    .routine-search-item:hover { background:var(--coral-bg); }
    .routine-search-item.disabled { opacity:0.4; pointer-events:none; }
    .routine-search-item + .routine-search-item { margin-top:4px; }
    .routine-search-brand { font-size:11px; font-weight:600; color:var(--stone-400); text-transform:uppercase; letter-spacing:0.3px; }
    .routine-search-name { font-size:14px; font-weight:500; color:var(--stone-900); }
    .routine-search-hint { font-size:11px; color:var(--stone-400); text-align:center; margin-top:12px; }
    .routine-search-empty { font-size:13px; color:var(--stone-400); text-align:center; padding:20px 12px; }
    .routine-already { font-size:10px; color:var(--stone-400); font-style:italic; display:inline-block; margin-top:4px; }
    .routine-verdict-section { margin-top:24px; background:white; border:1px solid var(--stone-100); border-radius:18px; padding:24px; box-shadow:0 16px 40px rgba(28,25,23,0.06); }
    .routine-verdict-header { text-align:center; margin-bottom:24px; }
    .routine-verdict-header h2 { font-family:'Playfair Display',serif; font-size:28px; font-weight:400; color:var(--stone-900); margin-bottom:6px; }
    .routine-avg-score { display:inline-flex; flex-direction:column; align-items:center; padding:16px 32px; border-radius:16px; margin:12px 0; }
    .routine-avg-score.grade-excellent { background:#DCFCE7; color:#166534; }
    .routine-avg-score.grade-good { background:#DBEAFE; color:#1D4ED8; }
    .routine-avg-score.grade-caution { background:#FEF3C7; color:#B45309; }
    .routine-avg-score.grade-alert { background:#FEE2E2; color:#B91C1C; }
    .routine-avg-number { font-size:36px; font-weight:700; }
    .routine-avg-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; opacity:0.7; }
    .routine-summary { font-size:13px; color:var(--stone-500); line-height:1.6; }
    .routine-section { margin-bottom:24px; }
    .routine-section h3 { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--stone-400); margin-bottom:12px; }
    .routine-alert { padding:16px; border-radius:12px; margin-bottom:10px; }
    .routine-alert-alert { background:#FEF2F2; border-left:3px solid #EF4444; }
    .routine-alert-warning { background:#FFFBEB; border-left:3px solid #F59E0B; }
    .routine-alert-info { background:#EFF6FF; border-left:3px solid #3B82F6; }
    .routine-alert-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .routine-alert-header strong { font-size:14px; color:var(--stone-900); }
    .routine-badge-alert { background:#FEE2E2; color:#991B1B; }
    .routine-badge-warning { background:#FEF3C7; color:#92400E; }
    .routine-badge-info { background:#DBEAFE; color:#1E40AF; }
    [class*="routine-badge-"] { font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:4px; letter-spacing:0.5px; }
    .routine-alert p { font-size:13px; line-height:1.6; color:var(--stone-600); }
    .routine-synergy { padding:16px; border-radius:12px; background:#F0FDF4; border-left:3px solid #22C55E; margin-bottom:10px; }
    .routine-synergy strong { font-size:14px; color:#166534; display:block; margin-bottom:4px; }
    .routine-synergy p { font-size:13px; line-height:1.6; color:#15803D; }
    .routine-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
    @media(max-width:640px) { .routine-columns { grid-template-columns:1fr; } }
    @media(min-width:641px) {
      .routine-search-modal { align-items:center; }
      .routine-search-inner { border-radius:20px; max-height:60vh; }
    }

    /* ═══ Native App Mode (Capacitor / PWA standalone) ═══ */
    .native-app header[role="banner"],
    .native-app #mobile-menu,
    .native-app .site-footer,
    .native-app .install-banner,
    .native-app .verdict-branding,
    .native-app .community-counter {
      display: none !important;
    }

    /* ═══ VERDICT APP MODE: hide site chrome on mobile ═══ */
    @media (max-width: 768px) {
      header[role="banner"] { display: none !important; }
      #mobile-menu { display: none !important; }
      .site-footer { display: none !important; }
      .install-banner, .ios-install-hint, [class*="install-banner"] { display: none !important; }
    }

    html.native-app body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      -webkit-user-select: none;
      user-select: none;
      overscroll-behavior: none;
      background: #FAFAF9;
    }

    /* Allow text selection on results */
    .native-app .inci-tag-name, .native-app .actif-card,
    .native-app .verdict-summary, .native-app textarea,
    .native-app input { -webkit-user-select: text; user-select: text; }

    .native-app .input-section { margin-top: 8px; padding-top: 0; }

    .native-app .verdict-hero { display: none; }

    .native-app .utility-bar {
      position: sticky;
      top: env(safe-area-inset-top);
      z-index: var(--z-sticky);
      background: rgba(255,248,246,0.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 8px 16px;
      margin: 0 -16px;
      width: calc(100% + 32px);
    }

    .native-app .tab-toggle {
      position: sticky;
      top: calc(env(safe-area-inset-top) + 44px);
      z-index: var(--z-sticky);
      background: rgba(255,248,246,0.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 0;
      margin: 0 -16px;
      padding: 6px 12px;
      width: calc(100% + 32px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .native-app .tab-toggle button { font-size: 11px; padding: 8px 4px; letter-spacing: -0.2px; }
    .native-app .verdict-container { padding-top: 8px; }
    .native-app .input-section { margin-top: 0; padding-top: 0; }
    .native-app .trending-section { margin-bottom: 12px; }
    .native-app .input-section { padding-top: 8px; }

    .native-app .validation-section {
      margin-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* ═══ Mobile responsive (all modes) ═══ */
    @media (max-width: 768px) {
      .tab-toggle button { min-height: 44px; }
      .search-result-item { min-height: 54px; padding: 12px 14px; }
      .share-panel .share-btn { min-height: 48px; padding: 14px 16px; }
      .score-ring-svg { width: 160px; height: 160px; }
      .score-sub-labels { max-width: 100%; gap: 16px; }
      .sub-value { font-size: 18px; }
      .sub-name { font-size: 9px; }
      .verdict-oneliner { font-size: 15px; max-width: 90%; }
      .actif-card { padding: 14px; }
      .inci-tags-grid { gap: 6px; }
      .inci-tag-rich { font-size: 11px; padding: 6px 10px; }
      .quick-actions-inner { height: 52px; padding: 0 4px; }
      .quick-btns button { padding: 6px 8px; font-size: 11px; }
      .quick-name { max-width: 140px; font-size: 12px; }
      .routine-columns { grid-template-columns: 1fr; gap: 12px; }
      .compare-container { flex-direction: column !important; }
      .compare-container > div { width: 100% !important; }
      .verdict-hero { padding: 24px 0 4px; }
        }

    @media (max-width: 380px) {
      .tab-toggle button { font-size: 10px; padding: 6px 2px; }
      .score-ring-svg { width: 140px; height: 140px; }
      .score-sub-labels { gap: 12px; }
      .sub-value { font-size: 16px; }
    }

    /* Smooth scroll + no iOS rubber band */
    html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
    body { overscroll-behavior-y: none; }
    .routine-search-inner { overscroll-behavior: contain; }



    /* ── Uniform action buttons ── */
    .btn-coral, .action-primary {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 24px;
      background: var(--coral) !important;
      color: white !important;
      border: none !important;
      border-radius: 14px !important;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
      box-shadow: 0 2px 8px rgba(230,59,90,0.2);
    }
    .btn-coral:active, .action-primary:active {
      transform: scale(0.97);
      box-shadow: 0 1px 4px rgba(230,59,90,0.15);
    }

    /* ── Empty states ── */
    .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; animation: fadeInUp 0.4s ease; }
    .empty-state-visual { margin-bottom:20px; opacity:0.5; }
    .empty-state-title { font-size:17px; font-weight:600; color:var(--stone-800); margin-bottom:6px; font-family:inherit; }
    .empty-state-text { font-size:13px; color:var(--stone-500); margin-bottom:20px; max-width:260px; line-height:1.5; }
    .empty-state-hint { font-size:11px; color:var(--stone-400); margin-top:10px; }
    /* ── Trending ingredients ── */
    .trending-section { margin-bottom:16px; }
    .trending-header { margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
    .trending-title { font-size:14px; font-weight:600; color:var(--stone-800); }
    .trending-scroll { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .trending-chip { display:flex; align-items:center; gap:8px; padding:10px 16px; background:white; border:1px solid rgba(0,0,0,0.04); border-radius:14px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all 0.25s cubic-bezier(0.16,1,0.3,1); font-family:inherit; -webkit-tap-highlight-color:transparent; box-shadow:0 1px 3px rgba(0,0,0,0.02),0 1px 2px rgba(0,0,0,0.01); }
    .trending-chip:active { transform:scale(0.95); box-shadow:0 1px 2px rgba(230,59,90,0.1); border-color:rgba(230,59,90,0.15); }
    .trending-icon { width:32px; height:32px; border-radius:10px; background:var(--coral-bg, #FFF5F0); display:flex; align-items:center; justify-content:center; color:var(--coral); flex-shrink:0; }
    .trending-info { display:flex; flex-direction:column; gap:1px; }
    .trending-name { font-size:13px; font-weight:600; color:var(--stone-800); }
    .trending-badge { font-size:10px; font-weight:600; color:var(--coral); }

    /* ── Ingredient spotlight ── */
    .spotlight-modal { position:fixed; inset:0; z-index:var(--z-modal); background:rgba(15,15,35,0.2); -webkit-backdrop-filter:var(--glass-blur-thick); backdrop-filter:var(--glass-blur-thick); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
    .spotlight-modal.visible { opacity:1; pointer-events:auto; }
    .spotlight-inner { width:100%; max-width:500px; background:#F2F2F7; border:0.5px solid rgba(0,0,0,0.06); box-shadow:0 -4px 24px rgba(0,0,0,0.08); border-radius:20px 20px 0 0; padding:24px; max-height:85vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); }
    .spotlight-modal.visible .spotlight-inner { transform:translateY(0); }
    @media(min-width:641px) { .spotlight-modal{align-items:center} .spotlight-inner{border-radius:20px} }
    .spotlight-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:24px; color:var(--stone-400); cursor:pointer; }
    .spotlight-header { margin-bottom:20px; }
    .spotlight-header h2 { font-family:'Playfair Display',serif; font-size:24px; margin-bottom:4px; }
    .spotlight-cat { font-size:12px; color:var(--coral); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
    .spotlight-section { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(0,0,0,0.05); }
    .spotlight-section:last-child { border-bottom:none; }
    .spotlight-section h3 { font-size:13px; font-weight:600; color:var(--stone-400); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
    .ingredient-result { cursor:pointer; }
    .ingredient-result:hover { background:var(--coral-bg) !important; }

    /* ── Utility Bar ── */
    .utility-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 0; margin-bottom:4px; }

    /* ── Skin Profile ── */
    .skin-profile-modal { position:fixed; inset:0; z-index:var(--z-modal); background:rgba(0,0,0,0.5); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity 0.3s; pointer-events:none; }
    .skin-profile-modal.visible { opacity:1; pointer-events:auto; }
    .skin-profile-inner { width:100%; max-width:500px; background:white; border-radius:20px 20px 0 0; padding:24px; max-height:80vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); }
    .skin-profile-modal.visible .skin-profile-inner { transform:translateY(0); }
    @media(min-width:641px) { .skin-profile-modal { align-items:center; } .skin-profile-inner { border-radius:20px; } }
    .skin-profile-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
    .skin-profile-header h3 { font-family:'Playfair Display',serif; font-size:20px; }
    .skin-profile-close { background:none; border:none; font-size:24px; color:var(--stone-400); cursor:pointer; }
    .skin-profile-section { margin-bottom:20px; }
    .skin-label { display:block; font-size:13px; font-weight:600; color:var(--stone-600); margin-bottom:10px; }
    .skin-chips { display:flex; flex-wrap:wrap; gap:8px; }
    .skin-chip { padding:8px 16px; border-radius:20px; border:1px solid var(--stone-200); background:white; font-size:13px; font-family:inherit; color:var(--stone-600); cursor:pointer; transition:all 0.2s; -webkit-tap-highlight-color:transparent; }
    .skin-chip:active { transform:scale(0.95); }
    .skin-chip.selected { background:var(--coral); border-color:var(--coral); color:white; }
    .skin-profile-save { width:100%; padding:14px; border:none; border-radius:14px; background:var(--coral); color:white; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:8px; }
    .personal-insights { background:linear-gradient(135deg,#FFF8F6,#FFF0F3); border:1px solid #FFE4E9; border-radius:14px; padding:16px; margin:16px 0; }
    .personal-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; font-weight:600; color:var(--coral); }
    .personal-edit { margin-left:auto; background:none; border:1px solid var(--coral); color:var(--coral); padding:4px 10px; border-radius:20px; font-size:11px; cursor:pointer; font-family:inherit; }

    /* ── Dupe Finder ── */
    .dupe-card { background:linear-gradient(135deg,#F0FDF4,#ECFDF5) !important; border-color:#BBF7D0 !important; }
    .dupe-card:hover { box-shadow:0 8px 24px rgba(34,197,94,0.1) !important; }
    .dupe-overlap { font-size:11px; font-weight:600; color:#16A34A; background:#DCFCE7; padding:3px 8px; border-radius:10px; display:inline-block; margin-bottom:8px; }

    /* ── Quick Check ── */
    .quick-check { text-align:center; padding:40px 24px; border-radius:20px; margin:16px 0; animation:springIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .quick-safe { background:linear-gradient(135deg,#F0FDF4,#DCFCE7); color:#166534; }
    .quick-ok { background:linear-gradient(135deg,#DBEAFE,#EFF6FF); color:#1E40AF; }
    .quick-warning { background:linear-gradient(135deg,#FEF3C7,#FFFBEB); color:#92400E; }
    .quick-danger { background:linear-gradient(135deg,#FEE2E2,#FEF2F2); color:#991B1B; }
    .quick-status { font-family:'Playfair Display',serif; font-size:28px; font-weight:500; margin-bottom:12px; }
    .quick-score-big { font-size:64px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
    .quick-score-big span { font-size:22px; font-weight:400; opacity:0.6; }
    .quick-keywords { font-size:13px; opacity:0.7; margin:16px 0 24px; }
    .quick-details-btn { background:rgba(255,255,255,0.6); backdrop-filter:blur(8px); border:none; padding:12px 28px; border-radius:14px; font-size:15px; font-weight:500; cursor:pointer; font-family:inherit; transition:all 0.2s; }
    .quick-details-btn:active { transform:scale(0.96); }
    @keyframes springIn { from { opacity:0; transform:scale(0.9) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }

    /* ── Badges Gamification ── */
    .badge-toast{position:fixed;top:calc(20px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-120%);display:flex;align-items:center;gap:12px;background:white;border-radius:16px;padding:14px 20px;box-shadow:0 12px 40px rgba(0,0,0,0.15);z-index:var(--z-toast);transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);max-width:320px}
    .badge-toast.visible{transform:translateX(-50%) translateY(0)}
    .badge-toast-icon{font-size:32px;flex-shrink:0}
    .badge-toast-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--coral)}
    .badge-toast-name{font-size:16px;font-weight:600;color:var(--stone-900)}
    .badge-toast-desc{font-size:11px;color:var(--stone-500)}
    .badges-modal{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(15,15,35,0.2);-webkit-backdrop-filter:var(--glass-blur-thick);backdrop-filter:var(--glass-blur-thick);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;pointer-events:none}
    .badges-modal.visible{opacity:1;pointer-events:auto}
    .badges-inner{width:90%;max-width:420px;max-height:80vh;background:white;border-radius:20px;padding:24px;overflow-y:auto;transform:scale(0.9);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
    .badges-modal.visible .badges-inner{transform:scale(1)}
    @media(max-width:768px){
      .badges-modal{align-items:flex-end}
      .badges-inner{width:100%;max-width:none;border-radius:20px 20px 0 0;max-height:85vh;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(100%) !important}
      .badges-modal.visible .badges-inner{transform:translateY(0) !important}
      .badges-grid{grid-template-columns:repeat(3,1fr) !important;gap:10px !important}
      .badge-card{padding:12px 6px}
      .badge-card-icon{font-size:24px}
      .badge-card-name{font-size:11px}
      .badge-card-desc{font-size:9px}
    }
    .badges-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}
    .badges-header h3{font-family:'Playfair Display',serif;font-size:20px;flex:1}
    .badges-count{font-size:14px;font-weight:600;color:var(--coral)}
    .badges-close{background:none;border:none;font-size:24px;color:var(--stone-400);cursor:pointer}
    .badges-progress{height:4px;background:var(--stone-100);border-radius:2px;margin-bottom:20px;overflow:hidden}
    .badges-progress-fill{height:100%;background:linear-gradient(90deg,var(--coral),#F06580);border-radius:2px;transition:width 0.5s ease}
    .badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    @media(max-width:380px){.badges-grid{grid-template-columns:repeat(2,1fr)}}
    .badge-card{text-align:center;padding:16px 8px;border-radius:14px;border:1px solid var(--stone-100);transition:all 0.2s}
    .badge-card.locked{opacity:0.3;filter:grayscale(1)}
    .badge-card.unlocked{background:var(--coral-bg);border-color:rgba(230,59,90,0.2)}
    .badge-card-icon{font-size:28px;margin-bottom:6px}
    .badge-card-name{font-size:12px;font-weight:600;color:var(--stone-800)}
    .badge-card-desc{font-size:10px;color:var(--stone-500);margin-top:2px}

    /* ── Favorite Button ── */
    .favorite-btn{position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.08);cursor:pointer;transition:transform 0.2s;z-index:var(--z-base)}
    .favorite-btn:active{transform:scale(0.85)}
    .favorite-btn svg{width:22px;height:22px;stroke-width:1.5;transition:all 0.2s}
    .favorite-btn.active svg{fill:var(--coral);stroke:var(--coral)}
    .favorite-btn:not(.active) svg{fill:none;stroke:var(--stone-400)}

    /* ── Product Alerts ── */
    .product-alert{display:flex;gap:12px;padding:14px 16px;border-radius:12px;margin-bottom:16px;animation:alertSlideIn 0.4s ease}
    @keyframes alertSlideIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
    .product-alert-recall{background:linear-gradient(135deg,#FEF2F2,#FEE2E2);border:1px solid #FECACA}
    .product-alert-reform{background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1px solid #BFDBFE}
    .product-alert-icon{flex-shrink:0;margin-top:2px}
    .product-alert-recall .product-alert-icon{color:#B91C1C}
    .product-alert-reform .product-alert-icon{color:#2563EB}
    .product-alert-title{font-size:13px;font-weight:600;margin-bottom:2px}
    .product-alert-recall .product-alert-title{color:#991B1B}
    .product-alert-reform .product-alert-title{color:#1E40AF}
    .product-alert-text{font-size:13px;line-height:1.5}
    .product-alert-recall .product-alert-text{color:#B91C1C}
    .product-alert-reform .product-alert-text{color:#1D4ED8}

    /* ── Personal Stats ── */
    .personal-stats{background:linear-gradient(135deg,#1C1917,#292524);border-radius:16px;padding:20px;margin:20px 0;color:white}
    .personal-stats-title{font-family:'Playfair Display',serif;font-size:16px;margin-bottom:16px}
    .personal-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
    @media(max-width:380px){.personal-stats-grid{grid-template-columns:repeat(2,1fr)}}
    .pstat{text-align:center}
    .pstat-value{display:block;font-size:22px;font-weight:700;color:white;font-variant-numeric:tabular-nums}
    .pstat-label{font-size:10px;color:#A8A29E;text-transform:uppercase;letter-spacing:0.3px}
    .pstat-badges-btn{width:100%;padding:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:white;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background 0.2s}
    .pstat-badges-btn:hover{background:rgba(255,255,255,0.15)}

    /* ── Mobile overlap fix (profile/trophy vs tabs, favorite vs name) ── */
    @media (max-width: 480px) {
      .score-card { position: relative; }
      .score-card-name { padding-right: 44px; }
      .favorite-btn { top: 12px; right: 12px; }
    }

    /* ═══ 2026 REDESIGN ═══ */
    .verdict-hero { display: none !important; }
    .utility-bar { display: none !important; }
    .tab-toggle { display: none !important; }
    .free-note { display: none !important; }

    .app-masthead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0 6px;
    }
    .masthead-btn {
      width: 34px; height: 34px; border-radius: 10px;
      border: 1px solid var(--stone-150, #E7E5E4); background: white;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--stone-400); transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .masthead-btn:active { transform: scale(0.92); background: var(--coral-bg); border-color: var(--coral); color: var(--coral); }

    .nav-pills {
      display: flex; gap: 4px; padding: 0 0 8px;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      position: relative;
    }
    .nav-pills::-webkit-scrollbar { display: none; }

    .quick-access { margin-bottom: 16px; }
    .section-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
    }
    .section-label {
      font-size: 14px; font-weight: 600; color: var(--stone-800);
    }
    .section-see-all {
      font-size: 13px; color: var(--coral); background: none; border: none;
      cursor: pointer; font-weight: 500; font-family: inherit;
    }
    .recent-item {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 14px 16px; background: white; border-radius: 14px; border: none;
      cursor: pointer; text-align: left; font-family: inherit;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .recent-item:active { transform: scale(0.98); }
    .recent-score {
      width: 42px; height: 42px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 16px; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .recent-score.grade-excellent { background: #DCFCE7; color: #16A34A; }
    .recent-score.grade-good { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .recent-score.grade-caution { background: #FEF3C7; color: #D97706; }
    .recent-score.grade-alert { background: #FEE2E2; color: #B91C1C; }
    .recent-info { flex: 1; min-width: 0; }
    .recent-name { display: block; font-size: 15px; font-weight: 600; color: var(--stone-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .recent-brand { font-size: 13px; color: var(--stone-400); }
    .recent-chevron { color: var(--stone-300); flex-shrink: 0; }

    /* Search bar premium */
    .search-wrapper {
      transition: transform 0.2s ease;
    }
    .search-wrapper:focus-within {
      transform: translateY(-2px);
    }
    .search-wrapper .search-input {
      border: 1.5px solid transparent !important;
      border-radius: 16px !important;
      background: white !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.02) !important;
      padding: 14px 14px 14px 44px !important;
      font-size: 15px !important;
      transition: all 0.3s ease !important;
    }
    .search-wrapper .search-input:focus {
      border-color: var(--coral) !important;
      box-shadow: 0 0 0 4px var(--coral-bg, #FFF5F0), 0 4px 16px rgba(0,0,0,0.04) !important;
    }

    /* ── Mobile tightening ── */
    @media (max-width: 768px) {
      .app-masthead { padding: 4px 0 4px; }
      .nav-pills { padding: 0 0 6px; gap: 3px; }
          .trending-section { margin-bottom: 8px; }
      .trending-chip { padding: 8px 12px; }
      .trending-name { font-size: 12px; }
      .trending-badge { font-size: 9px; }
      .quick-access { margin-bottom: 10px; }
      .routine-columns { grid-template-columns: 1fr; gap: 10px; }
      .routine-col { min-height: 100px; padding: 14px; }
      .routine-col-header h3 { font-size: 15px; }
      .routine-intro h2 { font-size: 20px; }
      .routine-intro p { font-size: 13px; }
    }

        /* PWA standalone masthead */
    .native-app .app-masthead {
      position: sticky;
      top: env(safe-area-inset-top);
      z-index: var(--z-sticky);
      background: rgba(250, 250, 249, 0.95);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 12px 16px;
      margin: 0 -16px;
      width: calc(100% + 32px);
    }
    .native-app .nav-pills {
      position: sticky;
      top: calc(env(safe-area-inset-top) + 48px);
      z-index: var(--z-sticky);
      background: rgba(250, 250, 249, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 4px 16px 8px;
      margin: 0 -16px;
    }
    /* ── Premium background ── */
    .tool-page {
      background: #FAFAF9;
      min-height: 100vh;
    }
    /* grain texture removed — iOS 26 uses clean backgrounds */



    /* ── Scanner feedback ── */
    .scanner-overlay .scanner-frame {
      position: relative;
    }
    .scanner-overlay .scanner-frame::after {
      content: '';
      position: absolute;
      left: 5%;
      right: 5%;
      height: 3px;
      background: var(--coral, #E63B5A);
      box-shadow: 0 0 16px rgba(230,59,90,0.6);
      animation: scanLine 2s ease-in-out infinite;
      border-radius: 3px;
      z-index: var(--z-base);
    }
    @keyframes scanLine {
      0%, 100% { top: 15%; }
      50% { top: 85%; }
    }
    .scanner-hint {
      transition: color 0.3s ease;
    }
    .scanner-hint.status-found { color: #16A34A !important; }
    .scanner-hint.status-error { color: #B91C1C !important; }
    .scanner-hint.status-notfound { color: #D97706 !important; }
    .scan-alternatives {
      position: absolute;
      bottom: 100px;
      left: 16px;
      right: 16px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      padding: 20px;
      text-align: center;
      animation: fadeInUp 0.3s ease;
    }
    .scan-alt-text { font-size: 14px; color: var(--stone-700); margin-bottom: 16px; line-height: 1.5; }
    .scan-alt-buttons { display: flex; gap: 8px; justify-content: center; }
    .scan-alt-buttons .btn-outline {
      padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 500;
      border: 1.5px solid var(--stone-300); background: white; color: var(--stone-700);
      cursor: pointer; font-family: inherit;
    }

    /* ═══════════════════════════════════════════════════════
       TAB BAR APP — iOS native pattern
       ═══════════════════════════════════════════════════════ */




    /* Badge detail bottom sheet */
    .bottom-sheet {
      position: fixed; inset: 0; z-index: var(--z-modal);
      background: rgba(15,15,35,0.3);
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .bottom-sheet.visible { opacity: 1; pointer-events: auto; }
    .bottom-sheet-inner {
      width: 100%; max-width: 500px;
      background: #F8F8FA;
      border-radius: 20px 20px 0 0;
      padding: 12px 24px calc(24px + env(safe-area-inset-bottom));
      max-height: 85vh; overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .bottom-sheet.visible .bottom-sheet-inner { transform: translateY(0); }
    .bottom-sheet-handle {
      width: 36px; height: 4px; background: var(--stone-200);
      border-radius: 2px; margin: 0 auto 20px;
    }
    .badge-detail { text-align: center; padding-bottom: 8px; }
    .badge-detail-icon { font-size: 48px; margin-bottom: 12px; }
    .badge-detail-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--stone-900); }
    .badge-detail-desc { font-size: 14px; color: var(--stone-500); margin-bottom: 16px; }
    .badge-detail-status {
      font-size: 14px; font-weight: 600; padding: 8px 20px;
      border-radius: 20px; display: inline-block;
    }
    .badge-detail-status.unlocked { color: #16A34A; background: #DCFCE7; }
    .badge-detail-status.locked { color: var(--stone-500); background: var(--stone-100); }
    .badge-progress-bar {
      height: 6px; background: var(--stone-100); border-radius: 3px;
      overflow: hidden; margin-bottom: 8px;
    }
    .badge-progress-fill {
      height: 100%; background: var(--coral); border-radius: 3px;
      transition: width 0.5s ease;
    }
    .badge-progress-text { font-size: 13px; color: var(--stone-500); font-weight: 500; }

    /* Badge card improvements */
    .badge-card {
      border: 2px solid var(--stone-100) !important;
      cursor: pointer !important;
    }
    .badge-card.unlocked {
      border-color: var(--coral) !important;
      background: linear-gradient(135deg, white, #FFF5F7) !important;
      box-shadow: 0 2px 8px var(--coral-bg, #FFF5F0) !important;
    }

    /* iOS auto-zoom prevention */
    .inci-textarea, #inci-input-inline, textarea { font-size: 16px !important; }
    /* Hide cookie consent on Verdict app */
    .cookie-consent, #cookie-consent, [class*="cookie-consent"],
    #cc-main, #cc--main, [id*="cookie"], [class*="cc-"],
    .cc-window, .cc-banner, .cc-revoke, .cc-floating,
    #ncb, #ncb-prefs, .ncb-card { display: none !important; }

    /* BUG 2: Force transparent on result sections */
    #verdict-results, #compare-container, #result-slot-1, #result-slot-2 {
      background: transparent !important;
    }

    /* ═══ DESKTOP: restore site layout ═══ */
    @media (min-width: 769px) {
      .tab-bar { display: none !important; }
      body { padding-bottom: 0 !important; }

      /* Restore site chrome */
      header[role="banner"] { display: flex !important; }
      .site-footer { display: block !important; }
      .app-masthead { display: flex !important; }
      .nav-pills { display: flex !important; }

      /* Re-hide elements that should stay hidden */
      .utility-bar { display: none !important; }
      .tab-toggle { display: none !important; }
      .verdict-hero { display: none !important; }
      .free-note { display: none !important; }

      /* Screen titles smaller on desktop */
      .screen-title { font-size: 24px; padding: 12px 0; }

      /* Search mode toggle inline */
      .search-mode-toggle { max-width: 300px; }
    }


    /* Uniform margins on all main screens */
    #search-tab,
    #scan-tab,
    #photo-tab,
    #routine-tab,
    #profile-tab,
    .main-screen { padding: 0 20px; }
    .screen-title { padding: 20px 0 14px; }

    /* Screen transitions */
    .main-screen.active-screen {
      display: block;
    }
    /* Fade-in only for non-camera screens */
    #routine-tab.active-screen,
    #profile-tab.active-screen {
      animation: screenFadeIn 0.2s ease;
    }
    @keyframes screenFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Main app screens (not tab-content) */
    .main-screen { display: none; }
    .main-screen.active-screen { display: block; }

    /* ── In-page scanner ── */
    #scanner-video-area {
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      max-width: 100%;
      height: calc(100vh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 20px));
      max-height: 70vh;
    }
    #scanner-video-area video {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      border-radius: 16px;
    }
    #scanner-video-area img[alt="Info"],
    #scanner-video-area a,
    #scanner-video-area > div:last-child:not(:first-child) { display: none !important; }

    /* ── In-page camera ── */
    .photo-camera-wrapper {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      height: calc(100vh - 180px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 20px));
      max-height: 70vh;
    }
    .photo-camera-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .photo-shutter-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 72px; height: 72px;
      border-radius: 50%;
      border: 4px solid white;
      background: rgba(255,255,255,0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      z-index: var(--z-base);
    }
    .photo-shutter-btn:active { transform: translateX(-50%) scale(0.9); }
    .photo-shutter-ring {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: white;
    }
    .photo-preview {
      width: 100%;
      border-radius: 16px;
      margin-bottom: 12px;
    }
    .photo-analyzing {
      font-size: 14px;
      color: var(--coral);
      font-weight: 500;
      text-align: center;
      margin-top: 8px;
    }

    /* ── btn-outline ── */
    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      border: 1.5px solid var(--stone-200);
      border-radius: 12px;
      background: white;
      color: var(--stone-600);
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }
    .btn-outline:active { transform: scale(0.97); background: var(--stone-50); }


    /* ── Torch/Flash button ── */
    .torch-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,0.4);
      border: none;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: var(--z-base);
      transition: background 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .torch-btn:active { transform: scale(0.9); }
    .torch-btn.torch-active {
      background: #FBBF24;
      color: #1C1917;
    }
    #scanner-video-area, .photo-camera-wrapper { position: relative; }

    /* ── Fixed screen header ── */
    .screen-header {
      height: 56px;
      display: flex;
      align-items: flex-end;
      padding: 0 0 8px;
    }
    .screen-header .screen-title {
      padding: 0;
      margin: 0;
      line-height: 1;
    }

    /* Fix 1: No extra top padding on search screen */
    #search-tab, #verdict-search { padding-top: 0 !important; margin-top: 0 !important; }

    /* Fix 2: Scanner spacing */
    #scanner-video-area { margin-bottom: 12px; }
    #scanner-status-msg { margin-bottom: 8px; }

    /* Fix 3: Camera hint text */
    .camera-hint { text-align:center; font-size:14px; color:var(--stone-500); margin:12px 0 8px; }

    /* NETTOYAGE: anciens elements de nav — zero espace */
    .verdict-hero,
    .app-masthead,
    .nav-pills,
    .utility-bar,
    .tab-toggle,
    .input-section { padding: 0 !important; margin: 0 !important; }
    #verdict-search { padding: 0 !important; margin: 0 !important; }

    /* Uniform camera zones */
    #scanner-video-area,
    .photo-camera-wrapper {
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 12px;
      background: #000;
      position: relative;
    }
    .camera-hint,
    #scanner-status-msg {
      text-align: center;
      font-size: 14px;
      color: var(--stone-500);
      margin: 12px 0 8px;
      display: block;
    }


    /* Uniform camera layout — Scanner and Photo pixel-match */
    .photo-identify-zone { padding: 0; margin: 0; }

    #scanner-video-area,
    .photo-camera-wrapper {
      border-radius: 16px !important;
      overflow: hidden !important;
      background: #000 !important;
      position: relative !important;
      margin: 0 0 8px !important;
    }

    .camera-hint {
      text-align: center !important;
      font-size: 14px !important;
      color: var(--stone-500) !important;
      margin: 8px 0 12px !important;
      padding: 0 !important;
    }

    .camera-action-btn {
      display: block;
      margin: 0 auto;
      padding: 10px 24px;
      border: 1px solid var(--stone-200);
      border-radius: 12px;
      background: white;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      color: var(--stone-600);
      cursor: pointer;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .camera-action-btn:active { transform: scale(0.97); background: var(--stone-50); }


    /* Scanner/Photo title margin */
    .screen-header { margin-bottom: 16px; }
    /* camera-action-btn removed */

    /* ═══ DIAGNOSTIC DE PEAU ═══ */
    .diagnostic-cta {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 16px; background: linear-gradient(135deg, #FFF5F7, #FFF0F3);
      border: 1px solid rgba(230,59,90,0.12); border-radius: 16px;
      cursor: pointer; transition: transform 0.2s, opacity 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent;
    }
    .diagnostic-cta:active { transform: scale(0.98); }
    .diagnostic-cta-icon {
      width: 48px; height: 48px; border-radius: 14px; background: white;
      display: flex; align-items: center; justify-content: center;
      color: var(--coral); flex-shrink: 0; box-shadow: 0 2px 8px rgba(230,59,90,0.1);
    }
    .diagnostic-cta-text { flex: 1; }
    .diagnostic-cta-text strong { display: block; font-size: 16px; color: var(--stone-900); margin-bottom: 2px; }
    .diagnostic-cta-text span { font-size: 13px; color: var(--stone-500); }

    /* Overlay */
    .diagnostic-overlay {
      position: fixed; inset: 0; z-index: var(--z-modal); background: #FAFAF9;
      display: flex; flex-direction: column;
      opacity: 0; transition: opacity 0.3s;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: env(safe-area-inset-top, 16px) 20px calc(20px + env(safe-area-inset-bottom));
    }
    .diagnostic-inner { transition: opacity 0.2s ease, transform 0.2s ease; }
    .diagnostic-overlay.visible { opacity: 1; }
    .diagnostic-inner { max-width: 480px; margin: 0 auto; width: 100%; }

    .diagnostic-nav { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
    .diagnostic-back {
      background: none; border: none; color: var(--stone-500); cursor: pointer; padding: 4px;
      -webkit-tap-highlight-color: transparent;
    }
    .diagnostic-progress { flex: 1; height: 3px; background: var(--stone-100); border-radius: 2px; overflow: hidden; }
    .diagnostic-progress-fill { height: 100%; background: var(--coral); border-radius: 2px; transition: width 0.3s ease; }
    .diagnostic-step-label { font-size: 12px; color: var(--stone-400); font-weight: 500; min-width: 28px; text-align: right; }
    .diagnostic-close-btn {
      background: none; border: none; font-size: 24px; color: var(--stone-400); cursor: pointer; padding: 4px 8px;
    }

    .diagnostic-title {
      font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600;
      color: var(--stone-900); margin: 24px 0 8px; letter-spacing: -0.3px;
    }
    .diagnostic-subtitle { font-size: 15px; color: var(--stone-500); margin-bottom: 32px; line-height: 1.5; }

    .diagnostic-options { display: flex; flex-direction: column; gap: 10px; }
    .diagnostic-option {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 16px; background: white; border: 1.5px solid var(--stone-100);
      border-radius: 14px; cursor: pointer; text-align: left;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s; width: 100%; font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .diagnostic-option:active { transform: scale(0.97); }
    .diagnostic-option {
      transition: all var(--duration-fast) var(--spring);
    }
    .diagnostic-option.selected {
      border-color: rgba(230,59,90,0.3);
      background: var(--coral-bg, #FFF5F0);
      box-shadow: 0 4px 16px var(--coral-bg, #FFF5F0), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .diagnostic-option-text { flex: 1; }
    .diagnostic-option-text strong { display: block; font-size: 16px; color: var(--stone-900); margin-bottom: 2px; }
    .diagnostic-option-text span { font-size: 13px; color: var(--stone-500); }
    .diagnostic-option-check {
      width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--stone-200);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--coral);
    }
    .diagnostic-option.selected .diagnostic-option-check {
      background: var(--coral); border-color: var(--coral); color: white;
    }

    /* Results */
    .routine-rec-section { margin-bottom: 24px; }
    .routine-rec-time {
      display: flex; align-items: center; gap: 8px;
      font-size: 16px; font-weight: 600; color: var(--stone-800); margin-bottom: 12px;
    }
    .rec-product-card {
      display: flex; align-items: center; gap: 14px; padding: 16px;
      background: white; border-radius: 14px; margin-bottom: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .rec-product-order {
      width: 28px; height: 28px; border-radius: 50%; background: var(--stone-100);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 600; color: var(--stone-500); flex-shrink: 0;
    }
    .rec-product-info { flex: 1; min-width: 0; }
    .rec-product-slot {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--coral); display: block; margin-bottom: 2px;
    }
    .rec-product-name {
      display: block; font-size: 15px; color: var(--stone-900);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rec-product-brand { font-size: 13px; color: var(--stone-400); }
    .rec-product-score {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px; flex-shrink: 0;
    }
    .rec-product-why { padding: 0 16px 12px 58px; margin-bottom: 8px; }
    .rec-product-why p { font-size: 12px; color: var(--stone-500); line-height: 1.5; margin: 2px 0; }
    .rec-product-why p::before { content: '\2192  '; color: var(--coral); }
    .routine-rec-actions { padding: 16px 0 24px; display: flex; flex-direction: column; gap: 10px; }
    .btn-full { width: 100%; padding: 14px; text-align: center; }
    .btn-text { background: none; border: none; color: var(--stone-400); font-size: 14px; cursor: pointer; padding: 8px; font-family: inherit; }


    /* Enhanced spotlight (trending detail) typography */
    .spotlight-inner { font-size: 14px; }
    .spotlight-inner h2 { font-size: 26px; }
    .spotlight-inner h3 { font-size: 15px; }
    .spotlight-inner .spotlight-cat { font-size: 13px; }
    .diagnostic-close { background:none; border:none; color:var(--stone-400); cursor:pointer; padding:4px; -webkit-tap-highlight-color:transparent; }
    .diagnostic-close:active { color:var(--stone-600); }
    .diagnostic-next-btn {
      width:100%; padding:16px; border:none; border-radius:14px;
      background:var(--coral); color:white; font-size:16px; font-weight:600;
      cursor:pointer; margin-top:20px; transition:opacity 0.2s; font-family:inherit;
    }
    .diagnostic-next-btn.disabled { opacity:0.4; pointer-events:none; }

    /* ═══ PROFILE AUTH ═══ */
    .profile-auth-cta {
      display:flex; align-items:center; gap:14px; padding:16px;
      background:white; border-radius:16px; margin-bottom:20px;
      cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.03); transition:all 0.2s;
      -webkit-tap-highlight-color:transparent;
    }
    .profile-auth-cta:active { transform:scale(0.98); }
    .profile-auth-icon {
      width:44px; height:44px; border-radius:12px; background:var(--coral-bg,#FFF0F3);
      display:flex; align-items:center; justify-content:center; color:var(--coral); flex-shrink:0;
    }
    .profile-auth-text { flex:1; }
    .profile-auth-text strong { display:block; font-size:15px; color:var(--stone-900); }
    .profile-auth-text span { font-size:12px; color:var(--stone-500); }

    .profile-auth-connected {
      display:flex; align-items:center; gap:12px; padding:16px;
      background:white; border-radius:16px; margin-bottom:20px;
      box-shadow:0 1px 3px rgba(0,0,0,0.03);
    }
    .profile-auth-avatar {
      width:44px; height:44px; border-radius:50%; background:var(--coral);
      color:white; display:flex; align-items:center; justify-content:center;
      font-weight:700; font-size:16px; flex-shrink:0;
    }
    .profile-auth-info { flex:1; }
    .profile-auth-info strong { display:block; font-size:15px; color:var(--stone-900); }
    .profile-auth-info span { font-size:12px; color:#16A34A; }
    .profile-auth-logout {
      background:none; border:1px solid var(--stone-200); padding:6px 14px;
      border-radius:10px; font-size:12px; color:var(--stone-500); cursor:pointer; font-family:inherit;
    }

    .login-sheet-inner {
      padding: calc(env(safe-area-inset-top, 20px) + 40px) 24px calc(24px + env(safe-area-inset-bottom));
      background: #F2F2F7;
      height: 100%; max-height: 100%;
      border-radius: 0 !important;
      display: flex; flex-direction: column; justify-content: center;
    }
    .login-title { font-family:'Playfair Display',serif; font-size:24px; margin-bottom:6px; color:var(--stone-900); }
    .login-subtitle { font-size:14px; color:var(--stone-500); margin-bottom:24px; line-height:1.5; }
    .login-input {
      width:100%; padding:14px 16px; border:1.5px solid var(--stone-200);
      border-radius:12px; font-size:16px; margin-bottom:10px; outline:none;
      font-family:inherit; transition:border-color 0.2s; box-sizing:border-box;
    }
    .login-input:focus { border-color:var(--coral); }
    .login-switch { text-align:center; font-size:13px; color:var(--stone-500); margin-top:16px; }
    .login-switch a { color:var(--coral); cursor:pointer; font-weight:500; }
    .login-error { text-align:center; font-size:13px; color:#B91C1C; margin-top:8px; min-height:18px; }


    /* ═══ SPLASH SCREEN ═══ */
    .verdict-splash {
      position:fixed; inset:0; z-index:var(--z-toast);
      background:linear-gradient(135deg, #E63B5A 0%, #D42E4C 50%, #C02040 100%);
      display:flex; align-items:center; justify-content:center;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .verdict-splash.fade-out { opacity:0; transform:scale(1.05); pointer-events:none !important; }
    .verdict-splash.dismissed { display:none !important; }
    .splash-content { text-align:center; }
    .splash-logo-mark {
      margin-bottom:20px; opacity:0; transform:scale(0.5);
      animation: splashLogoIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s forwards;
    }
    @keyframes splashLogoIn { to { opacity:1; transform:scale(1); } }
    .splash-check {
      stroke-dasharray:30; stroke-dashoffset:30;
      animation: splashCheckDraw 0.5s ease 0.6s forwards;
    }
    @keyframes splashCheckDraw { to { stroke-dashoffset:0; } }
    .splash-wordmark {
      opacity:0; transform:translateY(10px);
      animation: splashWordIn 0.5s ease 0.4s forwards;
    }
    @keyframes splashWordIn { to { opacity:1; transform:translateY(0); } }
    .splash-word { font-family:'Playfair Display',serif; font-size:42px; font-weight:500; color:white; letter-spacing:-0.5px; }
    .splash-dot { font-family:'Playfair Display',serif; font-size:42px; font-weight:500; color:rgba(255,255,255,0.6); }
    .splash-tagline {
      font-size:14px; color:rgba(255,255,255,0.6); letter-spacing:2px;
      text-transform:uppercase; margin-top:8px; opacity:0;
      animation: splashWordIn 0.5s ease 0.8s forwards;
    }

    /* ═══ WELCOME SCREEN ═══ */
    /* ═══ ONBOARDING SLIDES ═══ */
    .onboarding {
      position:fixed; inset:0; z-index:var(--z-toast);
      background:linear-gradient(135deg, #E63B5A 0%, #D42E4C 50%, #C02040 100%);
      display:flex; flex-direction:column;
      padding:env(safe-area-inset-top, 20px) 0 calc(20px + env(safe-area-inset-bottom));
      overflow:hidden;
    }
    .onboarding-slides {
      flex:1; position:relative; overflow:hidden;
      touch-action:pan-x;
    }
    .onboarding-slide {
      position:absolute; inset:0;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      text-align:center; padding:0 40px;
      opacity:0; transform:translateX(80px);
      transition:opacity 0.5s var(--ease-out, ease), transform 0.5s var(--spring, ease);
      pointer-events:none;
    }
    .onboarding-slide.active {
      opacity:1; transform:translateX(0); pointer-events:auto;
    }
    .onboarding-slide.exit-left {
      opacity:0; transform:translateX(-60px);
    }
    .onboarding-icon {
      margin-bottom:24px; opacity:0.9;
    }
    .onboarding-slide h2 {
      font-family:'Playfair Display',serif;
      font-size:32px; font-weight:600; color:white;
      margin-bottom:12px; letter-spacing:-0.3px;
    }
    .onboarding-slide p {
      font-size:16px; color:rgba(255,255,255,0.8);
      line-height:1.6; max-width:280px;
    }
    .onboarding-dots {
      display:flex; justify-content:center; gap:8px;
      padding:20px 0 16px; flex-shrink:0;
    }
    .onboarding-dots .dot {
      width:8px; height:8px; border-radius:50%;
      background:rgba(255,255,255,0.3);
      transition:all 0.3s;
    }
    .onboarding-dots .dot.active {
      background:white; width:24px; border-radius:4px;
    }
    .onboarding-actions {
      padding:0 32px; flex-shrink:0;
      display:flex; flex-direction:column; gap:8px;
    }
    .onboarding-next {
      width:100%; padding:16px;
      background:white; color:#E63B5A;
      border:none; border-radius:16px;
      font-size:17px; font-weight:600;
      cursor:pointer; font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      transition:transform 0.15s;
      -webkit-tap-highlight-color:transparent;
    }
    .onboarding-next:active { transform:scale(0.97); }
    .onboarding-skip {
      background:none; border:none;
      color:rgba(255,255,255,0.6); font-size:14px;
      padding:10px; cursor:pointer; text-align:center;
      font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    }

    /* Guest badge */
    .profile-guest-badge {
      font-size:11px; font-weight:500; color:var(--stone-400);
      background:var(--stone-100); padding:3px 8px; border-radius:8px;
      vertical-align:middle; margin-left:8px; font-family:'Inter',sans-serif;
    }


    /* Disable zoom */
    * { touch-action: manipulation; }
    body { -webkit-text-size-adjust: 100%; }

    /* Hide sticky CTA on mobile — tab bar handles navigation */
    @media (max-width: 768px) {
      .sticky-bar { display: none !important; }
    }

    /* OAuth buttons */
    .oauth-btn {
      width: 100%; padding: 14px 16px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      border: 1.5px solid var(--stone-200); border-radius: 12px;
      background: white; font-size: 15px; font-weight: 500;
      color: var(--stone-800); cursor: pointer; font-family: inherit;
      margin-bottom: 8px; transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .oauth-btn:active { transform: scale(0.98); background: var(--stone-50); }
    .oauth-btn svg { flex-shrink: 0; }
    .oauth-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 12px 0; color: var(--stone-400); font-size: 13px;
    }
    .oauth-divider::before, .oauth-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--stone-200);
    }

    /* ═══ iOS DESIGN SYSTEM ═══ */

    /* Background: iOS system gray */
    body { background: #F2F2F7 !important; }
    .main-screen, #verdict-search { background: #F2F2F7; }
    .tool-page { background: #F2F2F7 !important; }

    /* Screen titles: SF Pro style */
    .screen-title {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
      font-size: 34px !important;
      font-weight: 700 !important;
      color: #000000 !important;
      letter-spacing: 0.37px !important;
    }

    /* Section titles */
    .profile-section-title, .section-label, .trending-title {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      color: #000000;
      font-weight: 600;
    }

    /* Cards: shadow-based, no borders */
    .score-card, .recent-item, .trending-chip,
    .profile-stat-card, .diagnostic-cta, .rec-product-card,
    .profile-auth-cta, .profile-auth-connected {
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
      border: none !important;
      background: #FFFFFF !important;
    }
    .recent-item:active, .trending-chip:active, .diagnostic-cta:active {
      box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.05) !important;
    }

    /* Profile stats */
    .profile-stat-value {
      font-size: 26px !important;
      font-weight: 700 !important;
      color: #000000 !important;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
    }
    .profile-stat-label { color: #8E8E93 !important; }

    /* Badges: clean iOS cards */
    .badge-card {
      background: #FFFFFF !important;
      border-radius: 16px !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
      border: none !important;
    }
    .badge-card.unlocked {
      border: 2px solid #E63B5A !important;
    }
    .badge-card.locked { opacity: 0.35 !important; }

    /* Search bar: iOS Spotlight style */
    .search-wrapper .search-input {
      background: rgba(142, 142, 147, 0.12) !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 17px !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      color: #000000 !important;
      box-shadow: none !important;
    }
    .search-wrapper .search-input::placeholder { color: #8E8E93; }
    .search-wrapper .search-input:focus {
      box-shadow: 0 0 0 3px rgba(230, 59, 90, 0.1), 0 4px 16px rgba(31,38,135,0.06) !important;
      transform: translateY(-1px);
      transition: all var(--duration-normal) var(--spring) !important;
    }
    .search-wrapper {
      transition: transform var(--duration-normal) var(--spring);
    }
    .search-wrapper:focus-within {
      transform: translateY(-1px);
    }

    /* Segmented control: iOS native */
    .search-mode-toggle {
      background: rgba(142, 142, 147, 0.12) !important;
      border-radius: 9px !important;
      padding: 2px !important;
    }
    .search-mode-btn {
      border-radius: 7px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      color: #000000 !important;
    }
    .search-mode-btn.active {
      background: #FFFFFF !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
    }

    /* Quick actions: match glass style */
    /* quick-actions glass handled above */


    /* ═══ ALTERNATIVES SECTION ═══ */
    /* ═══ SOURCES & METHODOLOGY SECTION ═══ */
    .verdict-sources {
      margin: 24px 0; padding: 20px;
      background: white; border-radius: 16px;
      border-left: 3px solid #2563EB;
    }
    .verdict-sources h3 {
      font-size: 15px; font-weight: 600; color: #1C1917; margin-bottom: 6px;
    }
    .sources-disclaimer {
      font-size: 12px; color: #6B7280; line-height: 1.6;
      margin-bottom: 12px; font-style: italic;
    }
    .sources-list h4 { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
    .source-ref {
      font-size: 11px; color: #4B5563; line-height: 1.5;
      margin-bottom: 4px; padding-left: 10px;
      border-left: 2px solid #E5E7EB;
    }
    .source-ref a { color: #2563EB; text-decoration: none; }
    .sources-regulation { margin-top: 12px; font-size: 12px; color: #6B7280; }
    .sources-methodology-link {
      display: block; margin-top: 12px;
      font-size: 12px; color: #2563EB; text-decoration: none; font-weight: 500;
    }
    .evidence-badge {
      display: inline-block; font-size: 9px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.3px;
      padding: 2px 6px; border-radius: 4px; margin-left: 6px;
    }
    .evidence-strong { background: #DCFCE7; color: #16A34A; }
    .evidence-moderate { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .evidence-limited { background: #FEF3C7; color: #D97706; }
    .evidence-theoretical { background: #F3F4F6; color: #6B7280; }

    .alternatives-section {
      margin: 24px 0; padding: 20px;
      background: white; border-radius: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .alternatives-title {
      font-size: 17px; font-weight: 600; color: #1C1917; margin-bottom: 4px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    }
    .alternatives-desc {
      font-size: 13px; color: #8E8E93; margin-bottom: 16px;
    }
    .alternative-card {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 0; border-bottom: 0.33px solid rgba(0,0,0,0.06);
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .alternative-card:last-child { border-bottom: none; }
    .alternative-card:active { opacity: 0.7; }
    .alt-score {
      width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px; flex-shrink: 0;
    }
    .alt-score.grade-excellent { background: #DCFCE7; color: #16A34A; }
    .alt-score.grade-good { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .alt-score.grade-caution { background: #FEF3C7; color: #D97706; }
    .alt-info { flex: 1; min-width: 0; }
    .alt-info strong { display: block; font-size: 15px; color: #1C1917; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .alt-info span { font-size: 13px; color: #8E8E93; }
    .alt-better {
      display: inline-block; font-size: 10px; font-weight: 600;
      color: #16A34A; background: #F0FDF4;
      padding: 2px 6px; border-radius: 4px; margin-top: 2px;
    }

    /* ═══ ASSISTANT SKINCARE — iMessage-style chat ═══ */
    /* Key principle: NO position:fixed on container.
       Capacitor resize:body shrinks the webview when keyboard opens.
       We use 100% height so the layout follows the body resize naturally. */

    #assistant-tab { padding: 0 !important; }
    #assistant-tab.active-screen {
      display: flex !important; flex-direction: column;
      height: 100%; max-height: 100%;
      overflow: hidden;
      /* transition for smooth keyboard resize */
      transition: height 0.15s ease, max-height 0.15s ease;
    }

    .assistant-screen {
      display: flex; flex-direction: column;
      flex: 1; min-height: 0; overflow: hidden;
      background: #F2F2F7;
    }

    .assistant-messages {
      flex: 1; min-height: 0;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 12px 16px 8px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .assistant-screen.has-messages .assistant-messages {
      justify-content: flex-end;
    }

    /* Message bubbles */
    .assistant-msg {
      max-width: 82%; padding: 10px 14px;
      font-size: 15px; line-height: 1.5;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
      animation: msgIn 0.25s ease-out;
    }
    @keyframes msgIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .assistant-msg.bot {
      align-self: flex-start;
      background: #fff;
      border-radius: 18px 18px 18px 4px;
      color: #1C1917;
    }
    .assistant-msg.user {
      align-self: flex-end;
      background: #E63B5A; color: #fff;
      border-radius: 18px 18px 4px 18px;
    }
    .assistant-msg p { margin: 0 0 6px; }
    .assistant-msg p:last-child { margin: 0; }
    .msg-source {
      font-size: 11px; color: #A1A1AA; margin-top: 4px;
      font-style: italic;
    }

    /* Typing indicator */
    .typing-dots { display: flex; gap: 5px; padding: 4px 0; }
    .typing-dots span {
      width: 7px; height: 7px; border-radius: 50%;
      background: #D4D4D8;
      animation: typingBounce 1.4s ease infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typingBounce {
      0%,60%,100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }

    /* Input bar — sits at bottom of flex, above tab bar */
    .assistant-input-card {
      flex-shrink: 0;
      display: flex; align-items: center; gap: 10px;
      margin: 0 12px 8px; padding: 8px 8px 8px 16px;
      background: #fff; border-radius: 24px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);
    }
    .assistant-input-card input {
      flex: 1; min-width: 0;
      border: none; outline: none; background: transparent;
      font-size: 16px; color: #1C1917;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    }
    .assistant-input-card input::placeholder { color: #A1A1AA; }
    .assistant-input-bottom { display: none; }

    .assistant-send-btn {
      width: 34px; height: 34px; border-radius: 50%;
      background: #E63B5A; border: none;
      display: none; align-items: center; justify-content: center;
      color: #fff; cursor: pointer; flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }
    .assistant-send-btn.visible { display: flex; }
    .assistant-send-btn:active { transform: scale(0.88); }

    /* Limit warning */
    .assistant-limit-warning {
      text-align: center; font-size: 12px; color: #D97706;
      padding: 4px 16px; display: none; flex-shrink: 0;
    }

    /* Greeting */
    .assistant-greeting {
      text-align: center; padding: 32px 32px 20px;
    }
    .assistant-greeting-icon {
      width: 44px; height: 44px; margin: 0 auto 12px;
      color: #E63B5A; opacity: 0.5;
    }
    .assistant-greeting-icon svg { width: 44px; height: 44px; }
    .assistant-greeting h3 {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
      font-size: 20px; font-weight: 600; color: #1C1917; margin-bottom: 6px;
    }
    .assistant-greeting p {
      font-size: 14px; color: #71717A; line-height: 1.5;
      max-width: 260px; margin: 0 auto;
    }
    .assistant-screen.has-messages .assistant-greeting { display: none; }
    .assistant-screen.has-messages .assistant-suggestions-inline { display: none; }
    .assistant-suggestions { display: none; }

    /* Misc */
    .back-to-top, .scroll-to-top, [class*="back-to-top"],
    [class*="scroll-top"], #back-to-top, #scroll-to-top,
    .to-top-btn, #to-top { display: none !important; }
    .quick-actions.qa-hidden {
      transform: translateX(-50%) translateY(100px) !important;
      opacity: 0; pointer-events: none;
    }

    /* Screen subtitles */
    .screen-subtitle {
      display: block;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: #8E8E93;
      margin-top: 2px;
      letter-spacing: 0;
    }
    .screen-header {
      flex-direction: column;
      align-items: flex-start;
      height: auto;
      padding-bottom: 12px;
    }

    /* Camera info button — top left */
    .cam-info-btn {
      position: absolute;
      top: 12px;
      left: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,0.4);
      border: none;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: var(--z-base);
      -webkit-tap-highlight-color: transparent;
    }
    .cam-info-btn:active { background: rgba(0,0,0,0.6); }

    /* Info popup */
    .cam-info-popup {
      position: fixed;
      top: 0; left: 0; right: 0;
      bottom: calc(70px + env(safe-area-inset-bottom, 20px));
      z-index: var(--z-modal);
      background: rgba(15,15,35,0.2);
      -webkit-backdrop-filter: var(--glass-blur-thick);
      backdrop-filter: var(--glass-blur-thick);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.25s;
      pointer-events: none;
    }
    .cam-info-popup.visible { opacity: 1; pointer-events: auto; }
    .cam-info-card {
      background: var(--glass-bg-sheet);
      -webkit-backdrop-filter: var(--glass-blur-thick);
      backdrop-filter: var(--glass-blur-thick);
      border: 0.5px solid var(--glass-border);
      box-shadow: var(--glass-shadow-elevated);
      border-radius: var(--glass-radius);
      padding: 28px 24px;
      max-width: 300px;
      width: calc(100% - 48px);
      text-align: center;
      transform: scale(0.9);
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .cam-info-popup.visible .cam-info-card { transform: scale(1); }
    .cam-info-card h3 {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      font-size: 18px; font-weight: 600; color: #1C1917; margin-bottom: 12px;
    }
    .cam-info-step {
      display: flex; align-items: flex-start; gap: 10px;
      text-align: left; padding: 8px 0;
    }
    .cam-info-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: #E63B5A; color: white;
      font-size: 13px; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cam-info-step p {
      font-size: 14px; color: #3C3C43; line-height: 1.4;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      margin: 0;
    }
    .cam-info-close {
      margin-top: 16px; padding: 10px 24px;
      background: #E63B5A; color: white; border: none;
      border-radius: 12px; font-size: 15px; font-weight: 600;
      cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    }


    /* Quick-actions hidden by default, shown only by JS observer */
    .quick-actions { display: none; }
    .quick-actions.visible { display: flex; }

    /* ═══ LIQUID GLASS DESIGN TOKENS (iOS 26 / WWDC25) ═══ */
    /* :root glass tokens → merged into top-level :root */


    /* Cards — Liquid Glass elevation */
    .score-card, .rec-product-card, .profile-stat-card,
    .profile-auth-cta, .profile-auth-connected, .diagnostic-cta {
      box-shadow: 0 4px 16px rgba(31,38,135,0.06), 0 1px 2px rgba(0,0,0,0.03) !important;
    }
    .recent-item, .trending-chip, .suggestion-chip {
      box-shadow: 0 2px 8px rgba(31,38,135,0.05), 0 1px 2px rgba(0,0,0,0.02) !important;
    }
    .recent-item:active, .trending-chip:active, .suggestion-chip:active, .diagnostic-cta:active {
      box-shadow: 0 4px 16px rgba(31,38,135,0.1), 0 1px 2px rgba(0,0,0,0.04) !important;
    }


    /* iOS 26 Long-Press-and-Slide */
    .tab-bar.sliding-mode {
      transform: translateX(-50%) scale(1.04);
      transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .tab-bar.sliding-mode .tab-active-indicator {
      transition: left 0.08s ease, width 0.08s ease !important;
      background: rgba(255,255,255,0.45);
      box-shadow: 0 0 16px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .tab-bar-item.slide-hover .tab-icon {
      transform: scale(1.15);
      transition: transform 0.1s cubic-bezier(0.16,1,0.3,1);
    }


    /* iOS spring + timing tokens → merged into top-level :root */


    /* Universal tap feedback */
    button, [onclick], .clickable {
      -webkit-tap-highlight-color: transparent;
    }
    /* Scale feedback for all tappable cards */
    .recent-item, .trending-chip, .suggestion-chip,
    .diagnostic-cta, .profile-auth-cta, .profile-skin-chip,
    .badge-card, .profile-history-item, .oauth-btn, .welcome-feature {
      transition: transform var(--duration-fast) var(--spring), box-shadow var(--duration-normal) ease;
    }


    /* Screen appear animation */
    .main-screen.active-screen {
      animation: screenIn var(--duration-normal) var(--ease-out);
    }
    @keyframes screenIn {
      from { opacity: 0.6; }
      to { opacity: 1; }
    }
    /* Sauf scan/photo (camera = pas d'animation) */
    #scan-tab.active-screen, #photo-tab.active-screen, #assistant-tab.active-screen {
      animation: none;
    }


    /* Score reveal pulse */
    .score-ring-wrap.pulse {
      animation: scorePulse 0.5s var(--spring);
    }
    @keyframes scorePulse {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.03); }
      100% { transform: scale(1); opacity: 1; }
    }


    /* Profile stats stagger animation */
    .profile-stat-card {
      animation: statIn var(--duration-normal) var(--spring) backwards;
    }
    .profile-stat-card:nth-child(1) { animation-delay: 0s; }
    .profile-stat-card:nth-child(2) { animation-delay: 0.05s; }
    .profile-stat-card:nth-child(3) { animation-delay: 0.1s; }
    .profile-stat-card:nth-child(4) { animation-delay: 0.15s; }
    @keyframes statIn {
      from { opacity: 0; transform: translateY(8px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }


    /* Empty state appear */
    .empty-state {
      animation: emptyIn 0.5s var(--ease-out, ease);
      padding: 32px 24px;
    }
    .empty-state-title {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      font-weight: 600;
    }
    .empty-state-text {
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    }
    @keyframes emptyIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }


    /* Smooth scroll + momentum */
    * { scroll-behavior: smooth; }
    .assistant-messages, .assistant-suggestions,
    .trending-scroll, .quick-access-list {
      scroll-behavior: smooth;
      scrollbar-width: none;
    }


    /* Pull to refresh indicator */
    .ptr-indicator {
      text-align: center;
      padding: 12px 0 0;
      color: #8E8E93;
      font-size: 12px;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.3s var(--spring, ease);
    }
    .ptr-indicator.pulling { opacity: 1; transform: translateY(0); }
    .ptr-indicator.refreshing .ptr-spinner {
      display: inline-block;
      width: 16px; height: 16px;
      border: 2px solid #E5E5EA;
      border-top-color: #E63B5A;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }


    /* Score celebration */
    .confetti-container {
      position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden;
    }
    .confetti-dot {
      position: absolute; width: 8px; height: 8px; border-radius: 50%;
      animation: confettiFall 1.5s var(--ease-out, ease) forwards;
    }
    @keyframes confettiFall {
      0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
    }
    .score-celebration-text {
      position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
      font-size: 48px; font-weight: 700; color: #16A34A;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      pointer-events: none; z-index: var(--z-toast);
      animation: celebText 1.2s var(--spring, ease) forwards;
    }
    @keyframes celebText {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
      30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-30px); }
    }


    /* Share button premium */
    .share-float-btn {
      position: fixed; bottom: calc(90px + env(safe-area-inset-bottom, 20px));
      left: 50%; transform: translateX(-50%);
      display: none; align-items: center; gap: 8px;
      padding: 12px 24px;
      background: var(--glass-bg-sheet, rgba(255,255,255,0.88));
      -webkit-backdrop-filter: var(--glass-blur, saturate(180%) blur(20px));
      backdrop-filter: var(--glass-blur, saturate(180%) blur(20px));
      border: 0.5px solid var(--glass-border, rgba(255,255,255,0.35));
      border-radius: var(--glass-radius-pill, 999px);
      box-shadow: var(--glass-shadow-elevated);
      font-size: 15px; font-weight: 600; color: #1C1917;
      cursor: pointer; z-index: var(--z-overlay);
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      animation: slideUp 0.3s var(--spring, ease);
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateX(-50%) translateY(20px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }


    /* Compare hint button */
    .compare-hint {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; margin-top: 12px; padding: 12px 16px;
      background: var(--stone-50); border: 1px solid var(--stone-200);
      border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--stone-700);
      cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    .compare-hint:active { background: #F2F2F7; color: #E63B5A; }


    /* Product count */
    .product-count {
      text-align: center; font-size: 12px; color: #C7C7CC;
      padding: 8px 0 4px;
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    }
    .product-count strong { color: #8E8E93; font-weight: 600; }


    /* ═══ iOS NATIVE FIXES ═══ */
    /* Prevent long-press callout menus on images/links */
    img, a, button, svg { -webkit-touch-callout: none; }

    /* Prevent text selection on UI elements (keep on content) */
    .tab-bar, .tab-bar-item, .screen-header, .suggestion-chip,
    .trending-chip, .recent-item, .diagnostic-option,
    .onboarding, .badge-card, .quick-actions {
      -webkit-user-select: none;
      user-select: none;
    }

    /* Allow text selection on content that should be copyable */
    .assistant-msg, .spotlight-inner, .actif-card, .inci-tag-name,
    .verdict-summary, .score-card, textarea, input {
      -webkit-user-select: text;
      user-select: text;
    }

    /* Prevent rubber-band overscroll on the body */
    html, body {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
    }

    /* iOS keyboard: make sure inputs don't get hidden */
    .assistant-input-card input:focus,
    .search-wrapper .search-input:focus,
    .login-input:focus,
    .inci-textarea:focus,
    #inci-input-inline:focus {
      /* Scroll into view handled by JS below */
    }

    /* Smooth momentum scrolling everywhere */
    .assistant-messages, .spotlight-inner, .diagnostic-inner,
    .routine-search-inner, .badges-inner {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* iOS status bar space in Capacitor */
    .native-app .assistant-screen,
    .native-app #assistant-tab.active-screen {
      padding-top: env(safe-area-inset-top, 0px);
    }


    /* Consistent radius system → merged into top-level :root */


    /* Pressed states — every tappable element responds */
    .profile-history-item:active { background: rgba(0,0,0,0.02); }
    .badge-card:active { transform: scale(0.96); }
    .profile-skin-chip:active { transform: scale(0.96); }
    .oauth-btn:active { transform: scale(0.98); background: rgba(0,0,0,0.02); }
    .btn-coral:active { transform: scale(0.97); filter: brightness(0.95); }
    .btn-outline:active { transform: scale(0.97); }
    .onboarding-next:active { transform: scale(0.97); }


    /* Shimmer for loading states */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton-shimmer {
      background: linear-gradient(90deg, #F2F2F7 25%, #E8E8ED 50%, #F2F2F7 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s ease infinite;
      border-radius: var(--radius-md, 14px);
    }


    /* Native keyboard handling */
    .assistant-input-card {
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .native-app .assistant-input-card {
      transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
    }

    /* Native app: scanner/photo no-scroll + content above tab bar */
    .native-app .scanner-screen,
    .native-app .photo-screen {
      overflow: hidden;
      height: calc(100vh - 90px - env(safe-area-inset-bottom, 34px));
    }
    .native-app .scanner-screen .scanner-results,
    .native-app .photo-screen .photo-results {
      padding-bottom: 10px;
    }

    /* All screens in native mode: don't go under tab bar */
    .native-app .verdict-container {
      max-height: calc(100vh - 90px - env(safe-area-inset-bottom, 34px));
      overflow-y: auto;
      overflow-x: hidden;
    }
    .native-app .verdict-container.scanner-active {
      overflow: hidden;
    }

    /* Spotlight modal — content must not go under native tab bar */
    .native-app .spotlight-inner {
      max-height: calc(85vh - 90px);
      padding-bottom: calc(24px + 20px);
    }

    /* Bottom sheet same fix */
    .native-app .bottom-sheet-content {
      max-height: calc(85vh - 90px);
      padding-bottom: calc(24px + 20px);
    }


    /* Spotlight content spacing for readability */
    .spotlight-section:last-child {
      padding-bottom: 20px;
    }
    .spotlight-inner .spotlight-header h2 {
      font-size: 22px;
    }


    /* Native: camera blocks fit between header and tab bar */
    .native-app .photo-camera-area,
    .native-app .scanner-camera-area {
      height: calc(100vh - 220px - env(safe-area-inset-bottom, 34px));
      max-height: 65vh;
    }

    /* Kill old nav patterns */
    .nav-pills { display: none !important; }
    .app-masthead { display: none !important; }
    .utility-bar { display: none !important; }
    .tab-toggle { display: none !important; }
    .free-note { display: none !important; }

    /* Hide site chrome on mobile */
    @media (max-width: 768px) {
      header[role="banner"] { display: none !important; }
      #mobile-menu { display: none !important; }
      .site-footer { display: none !important; }
    }
    .install-banner, .ios-install-hint, [class*="install-banner"] { display: none !important; }

    /* Tab bar */
    /* ═══ LIQUID GLASS TAB BAR (iOS 26) ═══ */
    .tab-bar {
      --tab-bar-scale: 1;
      position: fixed;
      bottom: calc(10px + env(safe-area-inset-bottom, 16px));
      left: 50%;
      transform: translateX(-50%) scale(var(--tab-bar-scale));
      transform-origin: center bottom;
      width: auto;
      max-width: calc(100% - 32px);
      display: flex;
      align-items: center;
      gap: 0;
      background: var(--glass-bg);
      -webkit-backdrop-filter: var(--glass-blur-thick);
      backdrop-filter: var(--glass-blur-thick);
      border-radius: 999px;
      padding: 5px 6px;
      border: 0.5px solid var(--glass-border);
      box-shadow: var(--glass-shadow-elevated);
      z-index: var(--z-modal);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
    }
    /* Specular highlight */
    .tab-bar::after {
      content: ''; position: absolute; top: 0; left: 15%; right: 15%;
      height: 50%; border-radius: 999px 999px 0 0; pointer-events: none; z-index: var(--z-base);
      background: var(--glass-specular);
    }

    /* Active indicator blob */
    .tab-active-indicator {
      position: absolute;
      height: calc(100% - 8px);
      top: 4px;
      border-radius: 999px;
      background: var(--glass-bg-thick);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 12px rgba(31,38,135,0.08);
      transition: left 0.35s cubic-bezier(0.16,1,0.3,1), width 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
      z-index: 0;
      pointer-events: none;
    }
    .tab-bar.syncing-indicator .tab-active-indicator {
      transition: opacity 0.2s ease;
    }

    .tab-bar-item {
      position: relative; z-index: var(--z-base);
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 8px 14px;
      background: none; border: none; cursor: pointer;
      color: rgba(0,0,0,0.35);
      font-size: 10px; font-weight: 500;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
      letter-spacing: 0.01em;
      transition: color 0.25s ease, opacity 0.3s ease;
      -webkit-tap-highlight-color: transparent;
      border-radius: 999px;
    }
    .tab-bar-item.active { color: rgba(0,0,0,0.85); }
    .tab-bar-item:active { transform: scale(0.88); transition: transform 0.1s; }
    .tab-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
    .tab-label { display: none; }

    /* Separator + FAB */
    .tab-bar-separator {
      width: 0.5px; height: 20px; background: rgba(0,0,0,0.1);
      margin: 0 4px; flex-shrink: 0;
      transition: height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
    }
    .tab-bar-fab {
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(230, 59, 90, 0.65);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
      border: 0.5px solid rgba(255,255,255,0.3);
      color: white; display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
      box-shadow: 0 8px 24px rgba(230,59,90,0.25), inset 0 2px 8px rgba(255,255,255,0.2);
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      -webkit-tap-highlight-color: transparent;
      margin-left: 2px;
    }
    .tab-bar-fab.active {
      background: rgba(230, 59, 90, 1);
      box-shadow: 0 0 0 3px rgba(230,59,90,0.2), 0 2px 8px rgba(230,59,90,0.4);
    }
    .tab-bar-fab:active { transform: scale(0.85); }
    .tab-bar-fab svg { width: 22px; height: 22px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }

    /* Minimize on scroll */
    /* labels already hidden */
    .tab-bar.minimized { --tab-bar-scale: 0.92; opacity: 0.95; }
    .tab-bar.minimized .tab-bar-item { opacity: 0.94; }
    .tab-bar.minimized .tab-bar-separator { opacity: 0.88; }

    /* Body padding for tab bar */
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 20px)); }

    /* Compact masthead — only on search screen */
    .app-masthead {
      padding: 4px 0 2px;
    }

    /* Screen titles */
    .screen-title {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 600;
      color: var(--stone-900);
      padding: 20px 0 16px;
      letter-spacing: -0.3px;
      margin: 0;
    }

    /* Tab content full screen */
    .tab-content {
      min-height: calc(100vh - 70px - env(safe-area-inset-bottom));
    }

    /* Search mode toggle (replaces INCI tab) */
    .search-mode-toggle {
      display: flex;
      background: var(--stone-100);
      border-radius: 10px;
      padding: 3px;
      margin-bottom: 14px;
    }
    .search-mode-btn {
      flex: 1;
      padding: 8px;
      border: none;
      border-radius: 8px;
      background: transparent;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      color: var(--stone-500);
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s, border-color 0.2s;
    }
    .search-mode-btn.active {
      background: white;
      color: var(--stone-900);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* Profile tab */
    .profile-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 24px;
    }
    .profile-stat-card {
      text-align: center;
      padding: 16px 8px;
      background: white;
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .profile-stat-value {
      display: block;
      font-size: 22px;
      font-weight: 700;
      color: var(--stone-900);
      font-variant-numeric: tabular-nums;
    }
    .profile-stat-label {
      font-size: 11px;
      color: var(--stone-400);
      margin-top: 2px;
      display: block;
    }
    .profile-section {
      margin-bottom: 28px;
    }
    .profile-section-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--stone-900);
      margin-bottom: 12px;
    }
    .profile-badges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    @media(max-width:380px) { .profile-badges-grid { grid-template-columns: repeat(2,1fr); } }
    .profile-history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 0;
      border: none;
      background: transparent;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }
    .profile-history-item:last-child { border-bottom: none; }
    .profile-history-score {
      width: 40px; height: 40px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 14px; flex-shrink: 0;
    }
    .profile-history-score.grade-excellent { background: #DCFCE7; color: #16A34A; }
    .profile-history-score.grade-good { background: var(--coral-bg, #FFF5F0); color: var(--coral, #E63B5A); }
    .profile-history-score.grade-caution { background: #FEF3C7; color: #D97706; }
    .profile-history-score.grade-alert { background: #FEE2E2; color: #B91C1C; }
    .profile-history-info { flex: 1; min-width: 0; }
    .profile-history-name { font-size: 14px; font-weight: 500; color: var(--stone-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .profile-history-brand { font-size: 12px; color: var(--stone-400); }
    .profile-skin-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media(max-width:380px) { .profile-skin-chips { grid-template-columns: repeat(2, 1fr); } }
    .profile-skin-chip {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 14px 8px; border-radius: 14px; font-size: 12px; font-weight: 600;
      border: 1.5px solid var(--stone-200); background: white; color: var(--stone-600);
      cursor: pointer; transition: transform 0.2s, opacity 0.2s, border-color 0.2s; text-align: center;
    }
    .profile-skin-chip:active { transform: scale(0.96); }
    .profile-skin-chip svg { width: 28px; height: 28px; color: var(--stone-400); transition: color 0.2s; }
    .profile-skin-chip.selected {
      background: var(--coral-bg); border-color: var(--coral); color: var(--coral);
    }
    .profile-skin-chip.selected svg { color: var(--coral); }
    .profile-empty { font-size: 14px; color: var(--stone-400); padding: 20px 0; }

    /* Search bar large */
    .search-wrapper .search-input {
      height: 52px;
      padding: 0 16px 0 48px;
      font-size: 16px;
      border-radius: 14px;
    }

    /* Bigger typography on mobile */
    @media (max-width: 768px) {
      .screen-title { font-size: 32px; padding: 12px 0 14px; }
      .search-wrapper .search-input { height: 54px; font-size: 16px; border-radius: 16px; }
      .section-label { font-size: 15px; }
      .trending-name { font-size: 15px; }
      .trending-badge { font-size: 12px; }
      .recent-name { font-size: 16px; }
      .recent-brand { font-size: 13px; }
      .profile-stats { grid-template-columns: repeat(2, 1fr); }
    }

    /* Scanner fullscreen overlay (launched from tab bar) */
    .scanner-fullscreen-overlay {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      background: black;
      display: none;
    }
    .scanner-fullscreen-overlay.active { display: block; }
    .scanner-fs-close {
      position: absolute;
      top: calc(16px + env(safe-area-inset-top));
      right: 16px;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,0.4);
      border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      z-index: var(--z-base);
    }

    /* Onboarding skin picker buttons */
    .ob-skin-btn {
      padding: 10px 18px; border-radius: 20px;
      border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
      color: #fff; font-family: inherit; font-size: 13px; font-weight: 500;
      cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent;
    }
    .ob-skin-btn:active { transform: scale(0.95); }
    .ob-skin-btn.selected {
      background: rgba(255,255,255,0.25); border-color: #fff; font-weight: 600;
    }

    /* Tab transitions */
    .main-screen { opacity: 0; transition: opacity 120ms ease; }
    .main-screen.active-screen { opacity: 1; }

    /* Screen reader only — accessible but hidden visually */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ═══════════════════════════════════════════════════════
       P1 — Shopping mode fix
       ═══════════════════════════════════════════════════════ */
    body.shopping-active .main-screen,
    body.shopping-active .tab-content,
    body.shopping-active .vera-greeting {
      padding-top: calc(36px + env(safe-area-inset-top, 0px));
      transition: padding-top 0.3s ease;
    }

    /* ═══════════════════════════════════════════════════════
       P1 — Accessibility: focus visible
       ═══════════════════════════════════════════════════════ */
    button:focus-visible, a:focus-visible, input:focus-visible,
    textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--coral);
      outline-offset: 2px;
    }

    /* ═══════════════════════════════════════════════════════
       P1 — Dark Mode overrides for verdict.css
       ═══════════════════════════════════════════════════════ */
    @media (prefers-color-scheme: dark) {
      body { background: var(--bg); color: var(--stone-900); }

      /* Surfaces */
      .score-card, .tool-card, .actif-card, .reg-section, .verdict-summary,
      .similar-card, .routine-col, .methodology-card, .compare-table,
      .history-card, .recent-item, .daily-ring-section, .duel-result-card,
      .duel-choice, .product-feedback, .personal-score-section,
      .dna-header-card, .weekly-insights, .discover-card, .routine-verdict-section,
      .reg-summary-card, .quick-access, .shopping-panel-content,
      .badges-modal-content, .spotlight-modal-inner, .skin-profile-inner,
      .assistant-input-card, .assistant-screen {
        background: var(--surface);
        border-color: rgba(255,255,255,0.06);
        color: var(--stone-900);
      }

      /* Inputs */
      .search-input, .tool-select, textarea, input[type="text"],
      .inci-textarea, .routine-search-input, .assistant-input-card input,
      .battle-search, .doctor-search-input {
        background: var(--stone-100);
        border-color: var(--stone-200);
        color: var(--stone-900);
      }
      .search-input::placeholder, textarea::placeholder, input::placeholder {
        color: var(--stone-400);
      }

      /* Search results dropdown */
      .search-results, .search-result-item {
        background: var(--stone-100);
        border-color: var(--stone-200);
      }
      .search-result-item:hover { background: rgba(230,59,90,0.1); }

      /* Tab bar glass */
      .tab-bar {
        --glass-bg: rgba(30, 28, 26, 0.5);
        --glass-bg-thick: rgba(30, 28, 26, 0.75);
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);
      }
      .tab-bar-item { color: rgba(255,255,255,0.35); }
      .tab-bar-item.active { color: rgba(255,255,255,0.85); }

      /* Onboarding / Splash */
      .onboarding { background: linear-gradient(135deg, #E63B5A 0%, #C02040 100%); }
      .verdict-splash { background: linear-gradient(135deg, #E63B5A 0%, #C02040 100%); }

      /* Score ring */
      .score-ring-bg { stroke: var(--stone-200); }

      /* Tags */
      .inci-tag-gray { background: var(--stone-100); color: var(--stone-500); border-color: var(--stone-200); }
      .inci-tag-slate { background: var(--stone-100); color: #94A3B8; border-color: #334155; }

      /* Modals / Overlays */
      .spotlight-modal, .badges-modal, .skin-profile-modal {
        background: rgba(0,0,0,0.6);
      }

      /* Routine */
      .routine-col { background: var(--surface); border-color: var(--stone-200); }
      .routine-product-card { background: var(--stone-100); border-color: var(--stone-200); }
      .routine-add-btn { border-color: var(--stone-200); color: var(--stone-400); }
      .routine-add-btn:hover { border-color: var(--coral); color: var(--coral); }

      /* Share panel */
      .share-panel .share-btn {
        background: var(--stone-100); border-color: var(--stone-200); color: var(--stone-500);
      }

      /* Insights */
      .insight-positive { background: rgba(34,197,94,0.1); }
      .insight-warning { background: rgba(245,158,11,0.1); }
      .insight-info { background: rgba(59,130,246,0.1); }

      /* Known concentration */
      .known-concentration { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); }

      /* Conc gauge */
      .conc-gauge { background: var(--stone-200); }

      /* Reg sections */
      .reg-section { background: var(--surface); }

      /* Validation signature */
      .validation-signature { background: linear-gradient(135deg, var(--stone-100), var(--stone-200)); border-color: rgba(255,255,255,0.06); }

      /* Nav pills, suggestions */
      .sug-chips button, .nav-pill, .trending-chip {
        background: var(--stone-100); border-color: var(--stone-200); color: var(--stone-500);
      }

      /* Vera bubble */
      .vera-bubble { background: var(--stone-100); border-color: var(--stone-200); color: var(--stone-500); }

      /* Remaining white surfaces */
      .score-card { background: var(--surface); }
      .home-context-card, .checkin-widget, .quest-card, .duel-card,
      .expertise-bar, .fb-btn, .checkin-popup-inner,
      .masthead-btn, .streak-card, .streak-day,
      .cal-header, .cal-day, .shopping-intro-card, .shopping-panel-content,
      .shopping-session-product, .shopping-start-card,
      .onboarding-feature, .cam-info-popup {
        background: var(--surface);
        border-color: rgba(255,255,255,0.06);
      }

      /* All generic white backgrounds */
      .recent-item, .trending-chip, .nav-pill {
        background: var(--surface);
        border-color: var(--stone-200);
      }

      /* Buttons with white bg */
      .btn-outline, .toggle-btn, .ocr-photo-btn, .compare-btn, .share-btn,
      .scanner-cancel-btn, .routine-add-btn, .methodology-toggle {
        background: var(--surface);
        border-color: var(--stone-200);
        color: var(--stone-500);
      }

      /* Score card product text */
      .score-card-brand, .score-card-name { color: var(--stone-900); }
      .score-watermark { color: var(--stone-200); }

      /* Text colors */
      .actif-name, .result-section-header, .verdict-summary-title,
      .compare-highlights-title, .section-label, .recent-name,
      .duel-result-side strong { color: var(--stone-900); }

      /* Subtle backgrounds */
      .search-section-label, .compare-header .compare-cell {
        background: var(--stone-100);
      }
      .compare-cell.winner { background: rgba(34,197,94,0.1); color: #86EFAC; }

      /* Diagnostic / profile modals */
      .diagnostic-card, .profile-auth-card, .login-card {
        background: var(--surface);
        border-color: var(--stone-200);
      }

      /* All remaining white surfaces — complete coverage */
      .notif-panel, .cal-sheet-inner, .correlation-item,
      .evolution-metric, .capture-ring,
      .search-wrapper, .alternatives-section, .history-panel,
      .skin-chip, .profile-skin-chip,
      .shopping-intro-panel, .shopping-panel, .shopping-rank-item,
      .shopping-winner, .shopping-start-content,
      .badge-card, .badge-toast, .badges-inner,
      .routine-search-inner, .streak-celebration-card,
      .diagnostic-option, .rec-product-card,
      .profile-auth-connected, .profile-auth-cta, .profile-stat-card,
      .scan-alt-buttons {
        background: var(--surface);
        border-color: rgba(255,255,255,0.06);
      }
      .shopping-action-secondary, .evolution-share-btn,
      .search-mode-btn, .oauth-btn, .camera-action-btn {
        background: var(--surface);
        border-color: var(--stone-200);
        color: var(--stone-500);
      }
      .assistant-msg.bot {
        background: var(--stone-100);
        color: var(--stone-900);
      }
      .onboarding-next {
        background: linear-gradient(135deg, #E63B5A, #C02040);
        color: #fff;
      }
      .photo-shutter-ring { border-color: rgba(255,255,255,0.3); }
      .shopping-add-btn {
        background: var(--surface);
        border-color: var(--stone-200);
        color: var(--stone-500);
      }

      /* Footer */
      .site-footer { background: var(--stone-50); }
    }

    /* ═══════════════════════════════════════════════════════
       MASCOTTE — Particules, coeurs, respiration, typewriter
       ═══════════════════════════════════════════════════════ */

    /* Particules au tap */
    @keyframes veraParticle {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
    }
    @keyframes veraParticleFly {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      100% { transform: translate(var(--vp-x), var(--vp-y)) scale(0); opacity: 0; }
    }

    /* Coeurs au long press */
    @keyframes veraHeart {
      0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 1; }
      100% { transform: translate(var(--hx), var(--hy)) scale(1.2) rotate(var(--hr)); opacity: 0; }
    }

    /* Respiration idle */
    .vera-mascot:not(.mascot-celebrating) {
      animation: veraBreathing 4s ease-in-out infinite, veraSwayIdle 6s ease-in-out infinite;
    }
    @keyframes veraBreathing {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1.5px); }
    }
    @keyframes veraSwayIdle {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-1.5px) rotate(1.5deg); }
      75% { transform: translateY(-1px) rotate(-1deg); }
    }

    /* Typewriter cursor */
    .vera-typing::after {
      content: '|';
      animation: veraCursor 0.6s step-end infinite;
      color: var(--coral);
      font-weight: 300;
      margin-left: 1px;
    }
    @keyframes veraCursor {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .vera-mascot, .vera-typing::after { animation: none; }
    }

  

    /* ═══ COMPARATEUR EXPERT 2.0 ═══ */

    /* Verdict Expert Card */
    .expert-verdict-card {
      background: linear-gradient(135deg, #FFFBF7 0%, #FFF5F0 100%);
      border: 1px solid var(--stone-100);
      border-radius: 20px;
      padding: 24px 20px;
      margin: 0 0 20px;
      text-align: center;
    }
    .expert-verdict-winner {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin-bottom: 12px;
    }
    .expert-verdict-crown { color: #F59E0B; }
    .expert-verdict-winner-name {
      font-size: 18px; font-weight: 800; color: var(--stone-800);
    }
    .expert-verdict-tie {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-size: 16px; font-weight: 700; color: var(--stone-600);
      margin-bottom: 12px;
    }
    .expert-verdict-text {
      font-size: 14px; line-height: 1.6; color: var(--stone-600);
      margin: 0 0 20px; max-width: 480px; margin-left: auto; margin-right: auto;
    }

    /* Sub-score bars */
    .expert-bars { display: flex; flex-direction: column; gap: 10px; }
    .expert-bar-row {
      display: flex; align-items: center; gap: 8px;
    }
    .expert-bar-val {
      font-size: 12px; font-weight: 700; color: var(--stone-400);
      width: 28px; text-align: center; flex-shrink: 0;
    }
    .expert-bar-val.bar-winner { color: var(--coral); }
    .expert-bar-track {
      flex: 1; height: 28px; background: var(--stone-50);
      border-radius: 8px; position: relative; display: flex; align-items: center;
      overflow: hidden;
    }
    .expert-bar-label {
      position: absolute; left: 50%; transform: translateX(-50%);
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--stone-500); z-index: 2;
      white-space: nowrap;
    }
    .expert-bar-fill {
      position: absolute; top: 0; height: 100%; border-radius: 8px;
      background: var(--stone-200); transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .expert-bar-fill.bar-winner { background: var(--coral); opacity: 0.25; }
    .expert-bar-left { left: 0; border-radius: 8px 0 0 8px; }
    .expert-bar-right { right: 0; border-radius: 0 8px 8px 0; }

    /* Recommendations */
    .expert-recos {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      margin-top: 20px; text-align: left;
    }
    .expert-reco {
      padding: 14px; background: #fff; border-radius: 14px;
      border: 1px solid var(--stone-100);
    }
    .expert-reco strong {
      display: block; font-size: 12px; font-weight: 700;
      color: var(--coral); margin-bottom: 4px;
    }
    .expert-reco span { font-size: 13px; color: var(--stone-600); line-height: 1.5; }

    /* Face-à-face section */
    .expert-facetoface {
      background: #fff; border: 1px solid var(--stone-100);
      border-radius: 20px; padding: 24px 20px; margin-bottom: 20px;
    }
    .expert-section-title {
      display: flex; align-items: center; gap: 8px;
      font-size: 16px; font-weight: 800; color: var(--stone-800);
      margin: 0 0 16px;
    }
    .expert-section-title svg { color: var(--coral); }
    .expert-subtitle {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700; color: var(--stone-700);
      margin: 20px 0 12px;
    }
    .expert-subtitle svg { color: var(--coral); }

    /* Duel cards */
    .expert-duels { display: flex; flex-direction: column; gap: 8px; }
    .expert-duel {
      background: var(--stone-50); border-radius: 14px; padding: 14px 16px;
      border: 1px solid transparent; transition: border-color 0.2s;
    }
    .expert-duel.duel-win-left { border-left: 3px solid #22C55E; }
    .expert-duel.duel-win-right { border-right: 3px solid #22C55E; }
    .duel-center { text-align: center; margin-bottom: 8px; }
    .duel-name { display: block; font-size: 14px; font-weight: 700; color: var(--stone-800); }
    .duel-cat { display: block; font-size: 11px; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.5px; }
    .duel-sides { display: flex; align-items: center; justify-content: center; gap: 16px; }
    .duel-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
    .duel-side-winner .duel-score { color: #22C55E; }
    .duel-vs { font-size: 10px; font-weight: 800; color: var(--stone-300); }
    .duel-score { font-size: 20px; font-weight: 800; color: var(--stone-700); }
    .duel-pct { font-size: 11px; font-weight: 600; background: var(--coral); color: #fff; padding: 2px 8px; border-radius: 999px; }
    .duel-pos-ok { font-size: 10px; color: #22C55E; font-weight: 600; }
    .duel-pos-warn { font-size: 10px; color: #F59E0B; font-weight: 600; }

    /* Exclusive actifs */
    .expert-exclusives {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
      margin-top: 16px;
    }
    .expert-excl-title {
      font-size: 12px; font-weight: 700; color: var(--stone-500);
      margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .expert-excl-item {
      display: flex; flex-direction: column; gap: 2px;
      padding: 10px 12px; background: var(--stone-50); border-radius: 10px;
      margin-bottom: 6px;
    }
    .excl-name { font-size: 13px; font-weight: 700; color: var(--stone-800); }
    .excl-cat { font-size: 10px; color: var(--stone-400); text-transform: uppercase; letter-spacing: 0.3px; }
    .excl-note { font-size: 11px; color: var(--stone-500); }

    /* Regulatory grid */
    .expert-reg-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .expert-reg-col { display: flex; flex-direction: column; gap: 6px; }
    .expert-reg-col strong { font-size: 12px; color: var(--stone-600); }
    .reg-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; padding: 6px 10px; border-radius: 8px;
    }
    .reg-critical { background: #FEF2F2; color: #B91C1C; font-weight: 600; }
    .reg-warn { background: #FFFBEB; color: #B45309; }
    .reg-info { background: var(--stone-50); color: var(--stone-500); }
    .reg-clean { background: #F0FDF4; color: #16A34A; font-weight: 600; }

    /* Skin compatibility */
    .expert-skin-compat {
      background: #fff; border: 1px solid var(--stone-100);
      border-radius: 20px; padding: 24px 20px; margin-bottom: 20px;
    }
    .expert-skin-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
      margin-bottom: 16px;
    }
    .expert-skin-col {
      text-align: center; padding: 16px 12px;
      background: var(--stone-50); border-radius: 14px;
    }
    .expert-skin-col strong { display: block; font-size: 13px; margin-bottom: 6px; }
    .expert-skin-score { font-size: 22px; font-weight: 800; color: var(--stone-800); margin: 4px 0; }
    .expert-routine-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; color: var(--stone-500);
      background: #fff; padding: 4px 10px; border-radius: 999px;
      margin-top: 6px;
    }
    .expert-skin-details { text-align: left; margin-top: 8px; }
    .skin-detail-good { font-size: 11px; color: #16A34A; margin-bottom: 3px; }
    .skin-detail-bad { font-size: 11px; color: #B91C1C; margin-bottom: 3px; }
    .expert-skin-cta {
      text-align: center; padding: 20px; background: var(--stone-50);
      border-radius: 14px;
    }
    .expert-skin-cta p { font-size: 13px; color: var(--stone-500); margin: 0 0 12px; }

    /* Conflicts */
    .expert-conflicts {
      background: #FEF2F2; border-radius: 14px; padding: 16px;
      margin-top: 16px;
    }
    .expert-conflict-header {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700; color: #B91C1C;
      margin-bottom: 8px;
    }
    .expert-conflict-item {
      font-size: 12px; color: #7F1D1D; line-height: 1.5;
      padding: 4px 0; border-bottom: 1px solid rgba(185,28,28,0.1);
    }
    .expert-conflict-item:last-child { border-bottom: none; }

    /* Combine ok */
    .expert-combine { margin-top: 16px; }
    .expert-combine-ok {
      display: flex; align-items: center; gap: 8px;
      padding: 14px 16px; background: #F0FDF4; border-radius: 14px;
      font-size: 13px; font-weight: 600; color: #16A34A;
    }

    /* Routine grid */
    .expert-routine-wrap { margin-top: 16px; }
    .expert-routine-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .expert-routine-col {
      padding: 14px; background: var(--stone-50); border-radius: 12px;
      text-align: center;
    }
    .expert-routine-col strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
    .expert-routine-col span { font-size: 13px; color: var(--stone-600); }

    /* Mobile responsive */
    @media (max-width: 600px) {
      .expert-recos { grid-template-columns: 1fr; }
      .expert-exclusives { grid-template-columns: 1fr; }
      .expert-reg-grid { grid-template-columns: 1fr; }
      .expert-skin-grid { grid-template-columns: 1fr; }
      .expert-routine-grid { grid-template-columns: 1fr; }
      .expert-verdict-card { padding: 20px 16px; }
      .expert-facetoface { padding: 20px 16px; }
      .expert-skin-compat { padding: 20px 16px; }
    }


    /* ═══ FIXES COMPARATEUR — 27/03 ═══ */

    /* FIX 1: Modal plein écran sur mobile, plus haut sur desktop */
    .compare-overlay {
      align-items: stretch;
      padding: 0;
      padding-top: env(safe-area-inset-top, 0px);
    }
    .compare-modal-inner {
      max-height: none;
      height: 100%;
      border-radius: 0;
      max-width: none;
      display: flex;
      flex-direction: column;
    }
    .compare-modal-inner .search-results {
      max-height: 40vh;
      overflow-y: auto;
    }
    @media (min-width: 768px) {
      .compare-overlay {
        align-items: center;
        padding: 24px;
      }
      .compare-modal-inner {
        max-height: 85vh;
        height: auto;
        border-radius: 24px;
        max-width: 520px;
      }
    }

    /* FIX 2: Marge sous le bouton "Voir la comparaison" */
    .compare-modal-action {
      margin-top: 12px;
      margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      flex-shrink: 0;
    }

    /* FIX 3: Résultats comparaison plus digestes — fiches condensées */
    .compare-container .score-card {
      padding: 16px;
    }
    .compare-container .score-ring-svg {
      width: 120px;
      height: 120px;
    }
    .compare-container .score-number-value {
      font-size: 36px;
    }
    .compare-container .score-number-suffix {
      font-size: 11px;
    }
    .compare-container .result-section {
      margin-bottom: 8px;
    }
    /* Masquer les sections secondaires dans la vue comparaison */
    .compare-container .score-explanation,
    .compare-container .mode-toggle-wrap,
    .compare-container .score-watermark,
    .compare-container .product-feedback,
    .compare-container .similar-grid,
    .compare-container .result-section:not(:first-child):not(:nth-child(2)) {
      display: none !important;
    }
    /* Garder uniquement score + actifs reconnus dans la fiche condensée */
    .compare-container .result-section:nth-child(2) .actif-card {
      padding: 10px 12px;
    }
    .compare-container .vera-bubble {
      font-size: 12px;
      padding: 6px 10px;
    }
    /* Labels produit plus visibles */
    .compare-label {
      font-size: 10px;
      padding: 4px 12px;
      background: var(--coral);
      color: #fff;
      display: inline-block;
      border-radius: 999px;
      margin-bottom: 10px;
    }

    /* FIX 4: Anti-overflow horizontal */
    html, body {
      overflow-x: hidden;
      max-width: 100vw;
    }
    #verdict-results,
    #compare-container,
    #result-slot-1,
    #result-slot-2,
    .compare-highlights-wrap,
    .expert-verdict-card,
    .expert-facetoface,
    .expert-skin-compat,
    .compare-table,
    .expert-duels,
    .expert-exclusives,
    .expert-reg-grid,
    .expert-skin-grid,
    .expert-routine-grid,
    .expert-recos {
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    .compare-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .compare-row {
      min-width: 0;
    }
    .compare-cell {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      min-width: 0;
    }
    /* Prevent images/SVGs from causing overflow */
    .compare-container img,
    .compare-container svg,
    .expert-verdict-card img,
    .expert-facetoface img {
      max-width: 100%;
      height: auto;
    }
    /* Expert bars anti-overflow */
    .expert-bar-row {
      max-width: 100%;
      box-sizing: border-box;
    }
    .expert-bar-track {
      min-width: 0;
      overflow: hidden;
    }
    /* Duel cards anti-overflow */
    .expert-duel {
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .duel-name, .duel-cat, .excl-name, .excl-cat, .excl-note {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Exclusive columns anti-overflow on mobile */
    @media (max-width: 600px) {
      .expert-excl-col {
        min-width: 0;
        overflow: hidden;
      }
    }
    /* Prevent zoom on iOS inputs */
    .compare-overlay input,
    .compare-overlay textarea,
    .compare-overlay select {
      font-size: 16px;
    }


    /* ═══ PROFILE UX FIXES ═══ */

    /* Generic Modal */
    .generic-modal-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.5); display: flex;
      align-items: flex-end; justify-content: center;
      opacity: 0; transition: opacity 0.3s ease;
      padding: 0; padding-top: env(safe-area-inset-top, 0px);
    }
    .generic-modal-overlay.visible { opacity: 1; }
    .generic-modal-inner {
      background: #fff; width: 100%; max-height: 85vh;
      border-radius: 20px 20px 0 0; overflow-y: auto;
      padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%); transition: transform 0.3s ease;
    }
    .generic-modal-overlay.visible .generic-modal-inner { transform: translateY(0); }
    .generic-modal-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 16px; position: sticky; top: 0; background: #fff; z-index: 1;
      padding-bottom: 12px; border-bottom: 1px solid var(--stone-100);
    }
    .generic-modal-header h3 { font-size: 17px; font-weight: 700; margin: 0; }
    .generic-modal-header button {
      background: none; border: none; font-size: 24px; color: var(--stone-400);
      cursor: pointer; padding: 4px; min-width: 40px; min-height: 40px;
    }
    .generic-modal-body { padding-bottom: 8px; }
    @media (min-width: 768px) {
      .generic-modal-overlay { align-items: center; padding: 24px; }
      .generic-modal-inner {
        max-width: 520px; border-radius: 20px; max-height: 80vh;
      }
    }

    /* Profile "voir tout" button */
    .profile-see-all-btn {
      display: block; width: 100%; margin-top: 12px;
      padding: 10px; text-align: center; font-size: 13px;
      border-radius: 12px; border: 1px solid var(--stone-200);
      background: var(--stone-50); color: var(--stone-600);
      font-weight: 600; cursor: pointer; font-family: inherit;
    }
    .profile-see-all-btn:active { background: var(--stone-100); }

    /* XP current level card (compact) */
    .xp-current-level-card {
      display: flex; align-items: center; gap: 12px;
      padding: 16px; background: var(--stone-50);
      border-radius: 14px; margin-top: 10px;
    }
    .xp-level-icon-big svg { width: 32px; height: 32px; }

    /* History modal list */
    .profile-history-modal-list {
      display: flex; flex-direction: column; gap: 6px;
    }

    /* Tracker tips (replace checkboxes) */
    .tracker-tips {
      display: flex; gap: 8px; justify-content: center;
      flex-wrap: wrap; padding: 8px 0;
    }
    .tracker-tip-item {
      display: flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; color: var(--stone-500);
      background: rgba(255,255,255,0.9); padding: 6px 10px;
      border-radius: 999px; border: 1px solid var(--stone-100);
    }
    .tracker-tip-item svg { color: var(--coral); width: 14px; height: 14px; }

    /* Skin score explanation */
    .skin-score-explain { margin-bottom: 16px; }
    .skin-score-big {
      font-size: 42px; font-weight: 800; color: var(--stone-800);
      text-align: center; margin-bottom: 4px;
    }
    .skin-score-big span { font-size: 16px; font-weight: 500; color: var(--stone-400); }
    .skin-score-why {
      font-size: 12px; color: var(--stone-500); text-align: center;
      margin: 0 0 12px; line-height: 1.5;
    }
    .skin-score-breakdown {
      display: flex; flex-direction: column; gap: 8px;
    }
    .skin-dim-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; background: var(--stone-50);
      border-radius: 10px;
    }
    .skin-dim-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
    .skin-dim-info { flex: 1; min-width: 0; }
    .skin-dim-label { display: block; font-size: 13px; font-weight: 700; color: var(--stone-800); }
    .skin-dim-desc { display: block; font-size: 10px; color: var(--stone-400); line-height: 1.3; }
    .skin-dim-val {
      font-size: 18px; font-weight: 800; flex-shrink: 0;
      width: 36px; text-align: right;
    }
    .skin-dim-val.score-good { color: #16A34A; }
    .skin-dim-val.score-ok { color: #F59E0B; }
    .skin-dim-val.score-low { color: #EF4444; }

    /* Zone alert */
    .skin-zone-alert {
      margin-top: 12px; padding: 12px 14px;
      background: #FEF2F2; border-radius: 12px;
      border-left: 3px solid #EF4444;
    }
    .skin-zone-alert strong {
      display: block; font-size: 13px; color: #B91C1C; margin-bottom: 2px;
    }
    .skin-zone-alert span { font-size: 12px; color: #7F1D1D; }


    /* ═══ SKIN TRACKER V2 ═══ */

    /* Fullscreen capture modal */
    .skin-capture-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: #000; display: flex; flex-direction: column;
      opacity: 0; transition: opacity 0.3s ease;
    }
    .skin-capture-overlay.visible { opacity: 1; }
    .skin-capture-modal {
      flex: 1; display: flex; flex-direction: column;
      position: relative; overflow: hidden;
    }
    .skin-capture-close {
      position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
      z-index: 10; background: rgba(255,255,255,0.15);
      border: none; border-radius: 50%; width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; cursor: pointer; backdrop-filter: blur(8px);
    }
    .skin-capture-modal .tracker-capture-screen {
      flex: 1; display: flex; flex-direction: column;
      background: #000;
    }
    .skin-capture-modal .tracker-guide { flex: 1; }
    .skin-capture-modal .tracker-instructions {
      background: rgba(0,0,0,0.6); padding: 12px 16px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .skin-capture-modal .tracker-tip-item {
      background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.8);
    }
    .skin-capture-modal .tracker-tip-item svg { color: rgba(255,255,255,0.6); }
    .skin-capture-modal .tracker-capture-btn {
      position: absolute; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
      left: 50%; transform: translateX(-50%); z-index: 5;
    }
    /* Review screen in modal */
    .skin-capture-modal .tracker-review-screen {
      background: #000; color: #fff;
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .skin-capture-modal .tracker-review-preview-wrap { max-height: 55vh; overflow: hidden; }
    .skin-capture-modal .tracker-review-preview { width: 100%; object-fit: cover; }
    .skin-capture-modal .skin-insight-card { background: rgba(255,255,255,0.08); border: none; }
    .skin-capture-modal .tracker-review-actions { padding: 0 16px; }

    /* Annotated photo with zone overlays */
    .skin-annotated-wrap {
      position: relative; border-radius: 16px; overflow: hidden;
      margin-bottom: 16px; background: var(--stone-100);
    }
    .skin-analysis-photo {
      width: 100%; display: block; border-radius: 16px;
    }
    .skin-zone-overlay {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none;
    }

    /* Analysis detail view */
    .skin-detail-view { padding: 0 0 8px; }
    .skin-detail-photo-section { margin-bottom: 16px; }
    .skin-detail-date {
      display: flex; align-items: center; gap: 4px; justify-content: center;
      font-size: 11px; color: var(--stone-400); margin-top: 8px;
    }
    .skin-detail-score-row { text-align: center; margin-bottom: 20px; }
    .skin-detail-score {
      font-size: 48px; font-weight: 800; line-height: 1;
    }
    .skin-detail-score span { font-size: 18px; font-weight: 500; opacity: 0.5; }
    .skin-detail-overall {
      font-size: 14px; font-weight: 600; color: var(--stone-600); margin-top: 4px;
    }

    /* Dimension breakdown */
    .skin-detail-dims {
      display: flex; flex-direction: column; gap: 12px;
      margin-bottom: 20px;
    }
    .skin-detail-dim {
      padding: 14px 16px; background: var(--stone-50);
      border-radius: 14px;
    }
    .skin-dim-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .skin-dim-icon-wrap { flex-shrink: 0; color: var(--coral); }
    .skin-dim-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--stone-800); }
    .skin-dim-score { font-size: 18px; font-weight: 800; flex-shrink: 0; }
    .skin-dim-bar {
      height: 6px; background: var(--stone-200); border-radius: 3px;
      overflow: hidden; margin-bottom: 8px;
    }
    .skin-dim-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
    .skin-dim-finding {
      font-size: 12px; color: var(--stone-500); line-height: 1.5;
      margin: 4px 0 0; padding-left: 4px;
      border-left: 2px solid var(--stone-200);
    }

    /* Zone alerts */
    .skin-detail-zones { margin-bottom: 20px; }
    .skin-detail-section-title {
      display: flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 700; color: var(--stone-800);
      margin: 0 0 10px;
    }
    .skin-detail-section-title svg { color: var(--coral); }
    .skin-zone-card {
      padding: 12px 14px; background: var(--stone-50);
      border-radius: 12px; border-left: 3px solid #EF4444;
      margin-bottom: 8px;
    }
    .skin-zone-card strong { font-size: 13px; color: var(--stone-800); }
    .skin-zone-card .skin-zone-score {
      float: right; font-size: 14px; font-weight: 800;
    }
    .skin-zone-card p {
      font-size: 12px; color: var(--stone-500); margin: 4px 0 0;
      line-height: 1.4;
    }

    /* Recommendations */
    .skin-detail-recos { margin-bottom: 16px; }
    .skin-reco-item {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 13px; color: var(--stone-700); line-height: 1.5;
      padding: 8px 0; border-bottom: 1px solid var(--stone-100);
    }
    .skin-reco-item:last-child { border-bottom: none; }
    .skin-reco-item svg { flex-shrink: 0; color: #22C55E; margin-top: 2px; }

    /* Timeline clickable items */
    .timeline-item-clickable {
      display: flex; align-items: center; gap: 10px;
      width: 100%; background: none; border: none; padding: 8px 4px;
      font: inherit; text-align: left; cursor: pointer;
      border-radius: 10px; transition: background 0.15s;
    }
    .timeline-item-clickable:active { background: var(--stone-50); }
    .timeline-arrow { margin-left: auto; color: var(--stone-300); flex-shrink: 0; }


    /* ═══ SKIN TRACKER V3 ═══ */

    /* Modal — white, clean, slide-up */
    .st3-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.4);
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; transition: opacity 0.3s ease;
    }
    .st3-overlay.visible { opacity: 1; }
    .st3-modal {
      background: #fff; width: 100%; max-height: 95vh;
      border-radius: 24px 24px 0 0; overflow: hidden;
      display: flex; flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .st3-overlay.visible .st3-modal { transform: translateY(0); }
    .st3-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid var(--stone-100);
      flex-shrink: 0;
    }
    .st3-header h3 { font-size: 17px; font-weight: 700; margin: 0; }
    .st3-body {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .st3-error {
      text-align: center; padding: 48px 24px;
    }
    .st3-error p { font-size: 14px; color: var(--stone-500); margin: 0 0 16px; }

    /* Camera */
    .st3-camera-wrap {
      position: relative; background: #000;
      aspect-ratio: 3/4; max-height: 55vh; overflow: hidden;
    }
    #st3-video {
      width: 100%; height: 100%; object-fit: cover;
      transform: scaleX(-1);
    }
    .st3-face-guide {
      position: absolute; inset: 0; display: flex;
      align-items: center; justify-content: center;
      pointer-events: none; z-index: 2;
    }
    .st3-face-guide svg { width: 70%; height: 80%; opacity: 0.6; }

    /* Conditions */
    .st3-conditions {
      display: flex; justify-content: center; gap: 6px;
      padding: 14px 16px 8px; flex-wrap: wrap;
    }
    .st3-cond {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 999px;
      font-size: 12px; font-weight: 600;
      background: var(--stone-50); color: var(--stone-400);
      border: 1.5px solid var(--stone-200);
      transition: all 0.3s ease;
    }
    .st3-cond svg { width: 14px; height: 14px; }
    .st3-cond.st3-cond-ok {
      background: #F0FDF4; color: #16A34A;
      border-color: #BBF7D0;
    }
    .st3-cond.st3-cond-ok svg { color: #16A34A; }

    .st3-status {
      text-align: center; font-size: 13px; color: var(--stone-500);
      padding: 4px 16px 16px; min-height: 20px;
    }

    /* Capture button */
    .st3-capture-btn {
      display: flex; align-items: center; justify-content: center;
      width: 68px; height: 68px; border-radius: 50%; border: none;
      background: none; cursor: pointer; margin: 0 auto 20px;
      padding: 0;
    }
    .st3-capture-ring {
      width: 62px; height: 62px; border-radius: 50%;
      border: 4px solid var(--coral); background: transparent;
      position: relative;
    }
    .st3-capture-ring::after {
      content: ''; position: absolute; inset: 4px;
      border-radius: 50%; background: var(--coral);
      transition: transform 0.15s;
    }
    .st3-capture-btn:active .st3-capture-ring::after {
      transform: scale(0.85);
    }

    /* Analyzing state */
    .st3-analyzing {
      text-align: center; padding: 32px 20px;
    }
    .st3-analyze-preview {
      width: 160px; height: 200px; border-radius: 16px;
      overflow: hidden; margin: 0 auto 20px;
    }
    .st3-analyze-preview img { width: 100%; height: 100%; object-fit: cover; }
    .st3-analyze-loader { margin: 0 auto 12px; }
    .st3-loader-ring {
      width: 40px; height: 40px; border: 3px solid var(--stone-100);
      border-top-color: var(--coral); border-radius: 50%;
      margin: 0 auto; animation: st3spin 0.8s linear infinite;
    }
    @keyframes st3spin { to { transform: rotate(360deg); } }
    .st3-analyze-text { font-size: 15px; font-weight: 700; color: var(--stone-800); margin: 0 0 4px; }
    .st3-analyze-sub { font-size: 12px; color: var(--stone-400); margin: 0; }

    /* Results */
    .st3-results { padding: 20px 18px; }

    /* Score header */
    .st3-score-header { text-align: center; margin-bottom: 20px; }
    .st3-score-ring { width: 120px; height: 120px; margin: 0 auto 8px; }
    .st3-score-ring svg { width: 100%; height: 100%; }
    .st3-score-label { font-size: 15px; font-weight: 700; color: var(--stone-700); }
    .st3-score-date { font-size: 11px; color: var(--stone-400); margin-top: 2px; }

    /* Photo + map tabs */
    .st3-photo-section { margin-bottom: 20px; }
    .st3-photo-tabs {
      display: flex; gap: 4px; padding: 0 0 10px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .st3-tab {
      padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--stone-200);
      background: var(--stone-50); color: var(--stone-500);
      font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
      white-space: nowrap; flex-shrink: 0;
    }
    .st3-tab.active { background: var(--coral); color: #fff; border-color: var(--coral); }
    .st3-photo-view { border-radius: 16px; overflow: hidden; background: var(--stone-100); }
    .st3-photo { width: 100%; display: block; transition: opacity 0.2s; }

    /* Dimension cards */
    .st3-dims { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .st3-dim-card {
      padding: 14px 16px; background: var(--stone-50);
      border-radius: 14px;
    }
    .st3-dim-top { display: flex; align-items: center; gap: 10px; }
    .st3-dim-icon { flex-shrink: 0; }
    .st3-dim-info { flex: 1; min-width: 0; }
    .st3-dim-name { display: block; font-size: 13px; font-weight: 700; color: var(--stone-800); margin-bottom: 4px; }
    .st3-dim-bar { height: 5px; background: var(--stone-200); border-radius: 3px; overflow: hidden; }
    .st3-dim-bar > div { height: 100%; border-radius: 3px; }
    .st3-dim-val { font-size: 20px; font-weight: 800; flex-shrink: 0; }
    .st3-dim-detail {
      font-size: 12px; color: var(--stone-500); line-height: 1.5;
      margin: 8px 0 0; padding-left: 28px;
    }

    /* Section titles */
    .st3-section-title {
      display: flex; align-items: center; gap: 6px;
      font-size: 14px; font-weight: 700; color: var(--stone-800);
      margin: 0 0 10px;
    }
    .st3-section-title svg { color: var(--coral); }

    /* Zone cards with crops */
    .st3-zones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .st3-zone-card {
      display: flex; gap: 12px; padding: 12px;
      background: var(--stone-50); border-radius: 14px;
      border-left: 3px solid #F59E0B;
    }
    .st3-zone-crop {
      width: 64px; height: 64px; border-radius: 10px;
      background-size: 250%; background-repeat: no-repeat;
      flex-shrink: 0;
    }
    .st3-zone-info { flex: 1; min-width: 0; }
    .st3-zone-name { font-size: 13px; font-weight: 700; color: var(--stone-800); }
    .st3-zone-info p { font-size: 12px; color: var(--stone-500); margin: 4px 0 0; line-height: 1.4; }

    /* Recos */
    .st3-recos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
    .st3-reco {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 13px; color: var(--stone-700); line-height: 1.5;
      padding: 8px 12px; background: #F0FDF4; border-radius: 10px;
    }
    .st3-reco svg { flex-shrink: 0; color: #16A34A; margin-top: 2px; }

    /* Actions */
    .st3-actions { display: flex; flex-direction: column; gap: 8px; }
    .btn-full { width: 100%; padding: 14px; border-radius: 14px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
    .btn-coral.btn-full { background: linear-gradient(135deg, #E63B5A, #C93251); color: #fff; border: none; }
    .btn-outline.btn-full { background: none; border: 1.5px solid var(--stone-200); color: var(--stone-600); }

    /* Desktop */
    @media (min-width: 768px) {
      .st3-overlay { align-items: center; padding: 24px; }
      .st3-modal { max-width: 480px; border-radius: 24px; max-height: 90vh; }
    }


    /* ═══ FIXES 28/03 — Camera + Close button ═══ */

    /* FIX 2: Camera video overflow — contain within modal */
    .st3-camera-wrap {
      position: relative; background: #000;
      aspect-ratio: 3/4; max-height: 55vh; overflow: hidden;
      margin: 0 auto; /* center, don't touch edges */
      max-width: 100%;
    }
    #st3-video {
      width: 100%; height: 100%; object-fit: cover;
      transform: scaleX(-1);
      display: block; /* remove inline gap */
    }
    /* Ensure modal body doesn't overflow */
    .st3-body { overflow-x: hidden; }
    .st3-modal { overflow: hidden; }

    /* FIX 3: Close button clearly visible */

    /* FIX 3: Compare button — more space below */
    .compare-btn { margin-bottom: 28px; }

    /* FIX 4: Daily rings — Apple Watch spring animation */
    .daily-ring-visual .ring-fill {
      transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* Ring celebration pulse when complete */
    @keyframes ringPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }
    .daily-ring-section.ring-complete .daily-ring-visual {
      animation: ringPulse 0.6s ease 0.8s;
    }

    /* FIX 5: Duel card — cleaner design when shown */
    .duel-card { border-radius: 16px; overflow: hidden; }
    .duel-tie-label { display: none !important; } /* Hide tie labels */
    .duel-result-card {
      border: 1px solid var(--stone-100);
      border-radius: 16px;
      overflow: hidden;
    }

    /* FIX 6: Tone down blue/purple backgrounds */
    .grade-good { background: var(--coral-bg, #FFF5F0); color: #2563EB; }
    .reg-info { border-left-color: var(--stone-300); }
    .reg-info .reg-section-header svg { color: var(--stone-500); }

    /* Softer metric colors for skin tracker */
    .evolution-metric .metric-fill { opacity: 0.8; }

    /* FIX 7: Vera mascot — smoother idle float */
    .vera-mascot {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .vera-coach-mascot {
      cursor: pointer; background: none; border: none; padding: 0;
    }
    .vera-coach-mascot:active .vera-mascot {
      transform: scale(0.9);
    }
    /* Gentle float animation for Vera */
    /* Vera breathing — pure CSS, lightweight */
    @keyframes veraBreath {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.015); }
    }
    .vera-greeting .vera-mascot {
      animation: veraBreath 4s ease-in-out infinite;
    }

    /* FIX 8: Skin analysis loading — show progress steps */
    .st3-analyze-sub {
      animation: fadeInUp 0.5s ease 0.3s both;
    }
    .st3-analyzing {
      min-height: 50vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
    }


    /* ═══ COLOR + MODAL + SCORE FIXES 28/03 v2 ═══ */

    /* Remove old greeting-rotating styles */
    .greeting-rotating { display: none !important; }

    /* Modal horizontal overflow fix */
    .generic-modal-inner {
      overflow-x: hidden;
      max-width: 100vw;
      box-sizing: border-box;
    }
    .generic-modal-body {
      overflow-x: hidden;
      word-break: break-word;
    }
    .generic-modal-body * {
      max-width: 100%;
      box-sizing: border-box;
    }
    .profile-history-modal-list {
      overflow-x: hidden;
    }

    /* Replace ALL blue score badges with corail-based */
    .grade-good {
      background: var(--coral-bg, #FFF5F0);
      color: var(--coral, #E63B5A);
    }
    .history-card .history-score.grade-good {
      background: var(--coral-bg, #FFF5F0);
      color: var(--coral, #E63B5A);
    }
    .rank-score.grade-good {
      background: var(--coral-bg, #FFF5F0);
      color: var(--coral, #E63B5A);
    }
    .score-ring-wrap.grade-good {
      filter: drop-shadow(0 0 20px rgba(230,59,90,0.12));
    }

    /* Recent / history score — mini ring instead of flat badge */
    .history-card .history-score,
    .profile-history-item .profile-history-score {
      position: relative;
      width: 44px; height: 44px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800;
      background: transparent;
      border: 3px solid var(--stone-100);
    }
    .history-card .history-score.grade-excellent,
    .profile-history-item .profile-history-score.grade-excellent {
      border-color: #22C55E; color: #16A34A; background: transparent;
    }
    .history-card .history-score.grade-good,
    .profile-history-item .profile-history-score.grade-good {
      border-color: var(--coral); color: var(--coral); background: transparent;
    }
    .history-card .history-score.grade-caution,
    .profile-history-item .profile-history-score.grade-caution {
      border-color: #F59E0B; color: #D97706; background: transparent;
    }
    .history-card .history-score.grade-alert,
    .profile-history-item .profile-history-score.grade-alert {
      border-color: #EF4444; color: #B91C1C; background: transparent;
    }

    /* Soften remaining blue accents */
    .reg-info { border-left-color: var(--stone-200); background: var(--stone-50); }
    .reg-info .reg-section-header svg { color: var(--stone-400); }

    /* Vera bubble typewriter cursor blink */
    .vera-bubble {
      min-height: 18px;
    }
    .vera-bubble::after {
      content: '|';
      animation: cursorBlink 0.8s step-end infinite;
      color: var(--coral);
      font-weight: 300;
      margin-left: 1px;
    }
    @keyframes cursorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    /* Hide cursor after typing done (add .typed class via JS) */
    .vera-bubble.typed::after { display: none; }


    /* Close button — single source of truth */
    .st3-close {
      background: #1C1917;
      color: #fff;
      border: none;
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      -webkit-tap-highlight-color: transparent;
    }
    .st3-close:active { background: #292524; }
    .st3-close svg { width: 18px; height: 18px; }

    /* Extended 380px breakpoint coverage */
    @media (max-width: 380px) {
      .trending-scroll { grid-template-columns: 1fr !important; }
      .duel-versus, .duel-result-versus { flex-direction: column; gap: 8px; }
      .expert-recos, .expert-exclusives, .expert-reg-grid,
      .expert-skin-grid, .expert-routine-grid { grid-template-columns: 1fr !important; }
      .compare-row { grid-template-columns: 0.8fr 1fr 1fr; }
      .routine-columns { grid-template-columns: 1fr !important; }
      .st3-conditions { gap: 4px; }
      .st3-cond { padding: 5px 8px; font-size: 10px; }
    }

    /* ═══ MASCOT V2 ═══ */
    
    /* Mouth animations per state */
    .vera-mouth { transition: opacity 0.3s ease; }
    .mascot-happy .vera-mouth path { 
      d: path("M19,31 Q24,36 29,31");
    }
    .mascot-celebrating .vera-mouth path {
      d: path("M18,30 Q24,37 30,30");
    }
    
    /* Cheek blush glow on interaction */
    .vera-mascot circle[fill="#FF6B81"] {
      transition: opacity 0.3s ease;
    }
    .vera-mascot:active circle[fill="#FF6B81"],
    .mascot-happy circle[fill="#FF6B81"],
    .mascot-celebrating circle[fill="#FF6B81"] {
      opacity: 0.3;
    }
    
    /* Improved greeting glow */
    .vera-coach-mascot::before {
      animation: veraGlow 3s ease-in-out infinite;
    }
    @keyframes veraGlow {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }
    
    /* Bubble speech tail improvement */
    .vera-bubble {
      position: relative;
    }
    .vera-bubble::before {
      content: '';
      position: absolute; left: -6px; top: 12px;
      width: 12px; height: 12px;
      background: var(--stone-50);
      border-left: 1px solid var(--stone-100);
      border-bottom: 1px solid var(--stone-100);
      transform: rotate(45deg);
      z-index: -1;
    }

    /* ═══ MASCOT V2 — DevTeam recommendations ═══ */
    
    /* Dizzy state (10 rapid taps easter egg) */
    @keyframes veraDizzy {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(8deg) scale(1.05); }
      50% { transform: rotate(-6deg) scale(0.95); }
      75% { transform: rotate(4deg) scale(1.02); }
      100% { transform: rotate(0deg); }
    }
    .mascot-dizzy { animation: veraDizzy 0.5s ease infinite; }
    .mascot-dizzy .vera-pupil { animation: veraDizzyEyes 0.3s ease infinite; }
    @keyframes veraDizzyEyes {
      0%, 100% { cx: 20.5; }
      50% { cx: 19.5; }
    }
    
    /* Sleepy state (after 23h) */
    .mascot-sleepy .vera-mouth path {
      d: path("M22,32 Q24,32 26,32");
    }
    
    /* Specular highlight on blob */
    .vera-mascot svg::after {
      content: '';
      position: absolute;
      top: 15%; left: 20%;
      width: 30%; height: 20%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.3), transparent);
      border-radius: 50%;
      pointer-events: none;
    }
    
    /* Performance containment */
    .vera-mascot {
      contain: layout style;
    }
    
    /* Result reaction animation */
    .vera-result-reaction .vera-mascot {
      animation: veraReact 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @keyframes veraReact {
      0% { transform: scale(0.8) translateY(8px); opacity: 0; }
      60% { transform: scale(1.1) translateY(-2px); opacity: 1; }
      100% { transform: scale(1) translateY(0); opacity: 1; }
    }
    .vera-result-reaction .vera-bubble {
      animation: slideUpFade 0.4s ease 0.2s both;
    }
    
    /* Improved Vera greeting - subtle ring pulse */
    .vera-coach-mascot::after {
      content: '';
      position: absolute; inset: -12px;
      border: 1.5px solid rgba(230,59,90,0.1);
      border-radius: 50%;
      animation: veraRingPulse 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes veraRingPulse {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(1.15); opacity: 0; }
    }

    /* P0: Minimum 48px tap targets */
    .trending-chip { min-height: 48px; }
    .checkin-compact-btn { min-height: 48px; }
    .daily-ring-item { min-height: 32px; }
    .tab-bar-item { min-height: 48px; min-width: 48px; }
    .quest-row { min-height: 48px; }
    button, [onclick], [role="button"] { min-height: 44px; }

    /* P0: Profile sub-navigation */
    .profile-sub-nav {
      display: flex; gap: 6px; padding: 0 0 16px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .profile-sub-nav::-webkit-scrollbar { display: none; }
    .profile-sub-nav button {
      padding: 8px 16px; border-radius: 999px;
      background: var(--stone-50); border: 1px solid var(--stone-100);
      font-size: 12px; font-weight: 600; color: var(--stone-500);
      white-space: nowrap; cursor: pointer; font-family: inherit;
      flex-shrink: 0;
    }
    .profile-sub-nav button.active {
      background: var(--coral, #E63B5A); color: #fff;
      border-color: var(--coral, #E63B5A);
    }
    .profile-section-panel { display: none; }
    .profile-section-panel.active { display: block; }

    /* P1: Compact actif cards */
    .actif-card { padding: 14px; margin-bottom: 10px; }
    .actif-card-header { gap: 10px; margin-bottom: 10px; }
    .actif-sub-scores { gap: 6px; }

    /* P1: INCI inline search */
    .inci-search-inline {
      margin: 8px 0 12px; position: relative;
    }
    .inci-search-input {
      width: 100%; padding: 10px 14px; border: 1px solid var(--stone-200);
      border-radius: 10px; font-size: 13px; font-family: inherit;
      background: var(--stone-50); box-sizing: border-box;
    }
    .inci-search-input:focus { border-color: var(--coral, #E63B5A); outline: none; }
    .inci-highlight { background: rgba(230,59,90,0.15); border-radius: 2px; padding: 0 2px; }

    /* P1: Share comparison */
    .compare-share-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 12px; border-radius: 14px;
      background: var(--stone-900); color: #fff;
      border: none; font-size: 13px; font-weight: 700;
      cursor: pointer; font-family: inherit; margin-top: 12px;
    }
    .compare-share-btn svg { flex-shrink: 0; }