/* INCI AI App — app.css */
/* index.html'den ayrıldı — dokunma */

    /* ============================================================
       CSS VARIABLES — TEMA SİSTEMİ
    ============================================================ */
    :root {
      /* Brand (default: Forest Green) */
      --c-primary:    #2F453A;
      --c-secondary:  #5A7666;
      --c-accent:     #9DC6AB;
      --c-light:      #DBEEDC;
      --c-bg:         #FBFDFC;
      --c-surface:    #F2F8F4;
      --c-text:       #2F453A;
      --c-muted:      #5A7666;
      --c-border:     #B8D8C4;

      /* Semantic */
      --c-safe:       #2e7d32;
      --c-safe-bg:    #e8f5e9;
      --c-warn:       #e65100;
      --c-warn-bg:    #fff8e1;
      --c-danger:     #c62828;
      --c-danger-bg:  #ffebee;
      --c-white:      #ffffff;

      /* Layout */
      --radius:       5px;
      --radius-lg:    8px;
      --nav-h:        54px;
      --left-w:       460px;

      /* Typography */
      --font-head:    'Montserrat', sans-serif;
      --font-body:    'DM Sans', sans-serif;

      /* Transitions */
      --ease:         cubic-bezier(0.4, 0, 0.2, 1);
      --t-fast:       0.18s;
      --t-med:        0.35s;
      --t-slow:       0.5s;

      /* Font scale */
      --fs-base:      1.0625rem; /* 17px — orta yaş+ okunabilirlik */
    }

    /* DARK MODE */
    [data-theme="dark"] {
      --c-bg:       #1a2420;
      --c-surface:  #243028;
      --c-light:    #1a2e22;
      --c-text:     #e8f2ed;
      --c-muted:    #9DC6AB;
      --c-border:   #3a5548;
    }

    /* TEMA VARYANTLARI */
    [data-color="g2"] { --c-primary:#4A7C60; --c-secondary:#5A9070; --c-accent:#8DC8A8; --c-light:#D5EDE0; --c-bg:#F8FDFA; }
    [data-color="g3"] { --c-primary:#6BA888; --c-secondary:#7AB898; --c-accent:#A8D8C0; --c-light:#E0F4EC; --c-bg:#F5FDF9; }
    [data-color="r1"] { --c-primary:#7B2D3E; --c-secondary:#9B4D5E; --c-accent:#D4A0AA; --c-light:#F5E0E3; --c-bg:#FDFBFB; }
    [data-color="r2"] { --c-primary:#A04060; --c-secondary:#B86080; --c-accent:#E0A8BC; --c-light:#FAE8EF; --c-bg:#FDFBFC; }
    [data-color="r3"] { --c-primary:#C46070; --c-secondary:#D48090; --c-accent:#EAB8C0; --c-light:#FAEAEC; --c-bg:#FDFBFC; }
    [data-color="b1"] { --c-primary:#1F3A5F; --c-secondary:#2E5285; --c-accent:#7EB3D4; --c-light:#D8EAF5; --c-bg:#F8FBFD; }
    [data-color="b2"] { --c-primary:#3D5A80; --c-secondary:#5A7AA0; --c-accent:#98B8D8; --c-light:#DCE8F2; --c-bg:#F8FBFD; }
    [data-color="b3"] { --c-primary:#4A80A8; --c-secondary:#6A98B8; --c-accent:#A8CCE4; --c-light:#DFF0F8; --c-bg:#F5FBFF; }
    [data-color="y1"] { --c-primary:#7A5020; --c-secondary:#9A7030; --c-accent:#D4A870; --c-light:#F5E8D0; --c-bg:#FDFAF5; }
    [data-color="y2"] { --c-primary:#9A7030; --c-secondary:#BA9050; --c-accent:#DEC080; --c-light:#FAF0D8; --c-bg:#FDFCF5; }
    [data-color="y3"] { --c-primary:#C49040; --c-secondary:#D4A850; --c-accent:#E8CC90; --c-light:#FFF8E0; --c-bg:#FFFDF5; }

    /* FONT SIZE SCALE */
    [data-fontsize="sm"] { --fs-base: 0.875rem; }
    [data-fontsize="md"] { --fs-base: 1rem; }
    [data-fontsize="lg"] { --fs-base: 1.125rem; }


    /* ============================================================
       GRADIENTS & ANIMATIONS — Sprint 3
    ============================================================ */

    /* Navbar gradient */
    #navbar {
      background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 80%, var(--c-secondary)) 100%) !important;
    }

    /* Dark mode navbar */
    [data-theme="dark"] #navbar {
      background: linear-gradient(135deg, #0f1e1a 0%, var(--c-primary) 100%) !important;
    }

    /* Sol panel gradient */
    .left-panel {
      background: linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-bg) 95%, var(--c-accent)) 100%) !important;
    }

    /* Analyze butonu gradient + glow */
    .analyze-btn {
      background: linear-gradient(135deg, var(--c-primary) 0%, color-mix(in srgb, var(--c-primary) 70%, var(--c-secondary)) 100%) !important;
      box-shadow: 0 4px 16px color-mix(in srgb, var(--c-primary) 40%, transparent);
      transition: transform .25s, box-shadow .25s !important;
    }
    .analyze-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px color-mix(in srgb, var(--c-primary) 50%, transparent) !important;
    }

    /* Skor dairesi gradient */
    .score-ring-progress {
      filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 60%, transparent));
    }

    /* Sonuç kartı gradient */
    .result-header, .score-section {
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-primary) 8%, var(--c-bg)) 0%,
        color-mix(in srgb, var(--c-accent) 6%, var(--c-bg)) 100%
      ) !important;
    }

    /* Dark mode özel gradientler */
    [data-theme="dark"] .left-panel {
      background: linear-gradient(180deg, #1a2420 0%, #1e2c28 100%) !important;
    }
    [data-theme="dark"] .result-header,
    [data-theme="dark"] .score-section {
      background: linear-gradient(135deg, #1a2e2a 0%, #243028 100%) !important;
    }

    /* Fade-in animasyonu */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Sonuç ekranı animasyonu */
    #result-section { animation: fadeInUp .5s ease both; }
    .score-wrap     { animation: scaleIn .6s .1s ease both; }
    .verdict-badge  { animation: fadeInUp .5s .2s ease both; }
    .result-summary { animation: fadeInUp .5s .3s ease both; }
    .result-accordion { animation: fadeInUp .5s .4s ease both; }

    /* Loading animasyonu — yaprak */
    .loading-leaf {
      filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 50%, transparent));
    }

    /* Feature kartları hover */
    .punya-card, .accordion-item {
      transition: transform .25s, box-shadow .25s !important;
    }
    .punya-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 15%, transparent) !important;
    }

    /* Drawer gradient */
    .drawer {
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--c-primary) 98%, var(--c-accent)) 0%,
        var(--c-primary) 100%
      ) !important;
    }
    [data-theme="dark"] .drawer {
      background: linear-gradient(180deg, #0f1e1a 0%, #1a2e2a 100%) !important;
    }

    /* Puan badge gradient */
    .points-badge {
      background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 70%, var(--c-primary)));
    }

    /* Disclaimer banner */
    .ai-disclaimer {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
      border-left: 3px solid #f59e0b !important;
    }
    [data-theme="dark"] .ai-disclaimer {
      background: linear-gradient(135deg, #2a2010 0%, #332810 100%) !important;
      border-left-color: #d97706 !important;
      color: #fcd34d !important;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: hidden;
      max-width: 100vw;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      background: var(--c-bg);
      color: var(--c-text);
      line-height: 1.6;
      min-height: 100vh;
      transition:
        background-color var(--t-med) var(--ease),
        color var(--t-med) var(--ease);
      overflow-x: hidden;
      max-width: 100vw;
    }

    /* ============================================================
       NAVBAR
    ============================================================ */
    #navbar {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--nav-h);
      background: var(--c-primary);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 8px;
      transition: background-color var(--t-med) var(--ease);
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }

    /* Logo */
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }

    .nav-logo-img {
      height: 32px;
      width: auto;
      transition: opacity var(--t-fast) var(--ease);
    }

    .nav-logo-text {
      display: flex;
      flex-direction: column;
    }

    .nav-logo-name {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .nav-logo-sub {
      font-size: 10px;
      color: var(--c-accent);
      letter-spacing: 0.08em;
      font-weight: 500;
    }

    .nav-sep {
      width: 1px;
      height: 28px;
      background: rgba(255,255,255,0.2);
      margin: 0 4px;
    }

    /* Desktop nav links */
    .nav-links {
      display: none;
      align-items: center;
      gap: 4px;
      margin-left: 8px;
    }

    .nav-link {
      color: rgba(255,255,255,0.75);
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-head);
      letter-spacing: 0.04em;
      padding: 6px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition:
        color var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff;
      background: rgba(255,255,255,0.1);
    }

    .nav-spacer { flex: 1; }

    /* Right side */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-lang {
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 5px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.2);
      transition: background var(--t-fast) var(--ease);
      position: relative;
    }

    .nav-lang:hover { background: rgba(255,255,255,0.2); }

    .nav-login {
      background: #fff;
      color: var(--c-primary);
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-head);
      padding: 6px 14px;
      border-radius: var(--radius);
      cursor: pointer;
      letter-spacing: 0.04em;
      border: none;
      white-space: nowrap;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .nav-login:hover { transform: translateY(-1px); }

    /* Mobil nav düzeltme */
    @media (max-width: 480px) {
      .nav-login { font-size: 10px; padding: 5px 10px; }
      .nav-lang { font-size: 10px; padding: 4px 8px; }
      .nav-right { gap: 4px; }
      #theme-toggle-btn { display: flex; }
    }

    /* Hamburger */
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 6px;
      border-radius: var(--radius);
      transition: background var(--t-fast) var(--ease);
      margin-left: 4px;
    }

    .hamburger:hover { background: rgba(255,255,255,0.1); }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2.5px;
      background: rgba(255,255,255,0.9);
      border-radius: 2px;
      transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease);
    }

    .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* Guest info */
    .nav-guest-badge {
      display: none;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      color: rgba(255,255,255,0.7);
      padding: 4px 8px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius);
      white-space: nowrap;
    }

    .nav-guest-badge span { color: var(--c-accent); font-weight: 700; }

    /* ============================================================
       MOBILE DRAWER MENU
    ============================================================ */
    #drawer-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 200;
      opacity: 0;
      transition: opacity var(--t-med) var(--ease);
    }

    #drawer-overlay.open {
      display: block;
      opacity: 1;
    }

    #drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: 280px;
      background: var(--c-bg);
      z-index: 201;
      transform: translateX(100%);
      transition: transform var(--t-med) var(--ease);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    }

    #drawer.open { transform: translateX(0); }

    .drawer-header {
      background: var(--c-primary);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .drawer-logo {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.04em;
    }

    .drawer-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 18px;
      transition: background var(--t-fast) var(--ease);
    }

    .drawer-close:hover { background: rgba(255,255,255,0.2); }

    .drawer-body { flex: 1; padding: 12px 0; }

    .drawer-section-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 12px 18px 4px;
    }

    .drawer-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      cursor: pointer;
      color: var(--c-text);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: background var(--t-fast) var(--ease);
      position: relative;
    }

    .drawer-item:hover { background: var(--c-light); }

    .drawer-item .di-icon {
      width: 20px;
      text-align: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .drawer-item .di-badge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      background: var(--c-accent);
      color: var(--c-primary);
    }

    .drawer-item .di-soon {
      margin-left: auto;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 99px;
      background: var(--c-surface);
      color: var(--c-muted);
      border: 1px solid var(--c-border);
    }

    .drawer-divider {
      height: 1px;
      background: var(--c-border);
      margin: 8px 18px;
      opacity: 0.5;
    }

    .drawer-pro-cta {
      margin: 12px 14px;
      padding: 12px 14px;
      background: var(--c-primary);
      border-radius: var(--radius-lg);
      color: #fff;
      cursor: pointer;
      transition: opacity var(--t-fast) var(--ease);
    }

    .drawer-pro-cta:hover { opacity: 0.9; }

    .drawer-pro-cta .dpc-label {
      font-size: 10px;
      color: var(--c-accent);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 3px;
    }

    .drawer-pro-cta .dpc-title {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .drawer-pro-cta .dpc-sub {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
    }

    /* ============================================================
       LANGUAGE DROPDOWN
    ============================================================ */
    .lang-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--c-bg);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      min-width: 140px;
      display: none;
      z-index: 300;
    }

    .lang-dropdown.open { display: block; }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--c-text);
      transition: background var(--t-fast) var(--ease);
    }

    .lang-option:hover { background: var(--c-light); }
    .lang-option.active { color: var(--c-primary); font-weight: 700; }
    .lang-flag { font-size: 16px; }

    /* ============================================================
       MAIN LAYOUT
    ============================================================ */
    #app {
      min-height: calc(100vh - var(--nav-h));
      display: flex;
      flex-direction: column;
    }

    /* Desktop: two column */
    @media (min-width: 1280px) {
      #app { flex-direction: row; align-items: flex-start; }
      .nav-links { display: flex; }
      .hamburger { display: none; }
      .nav-guest-badge { display: flex; }
    }

    /* ============================================================
       LEFT PANEL — INPUT
    ============================================================ */
    #left-panel {
      width: 100%;
      padding: 24px 20px;
      background: var(--c-bg);
      transition: background-color var(--t-med) var(--ease);
    }

    @media (min-width: 1280px) {
      #left-panel {
        width: var(--left-w);
        flex-shrink: 0;
        min-height: calc(100vh - var(--nav-h));
        position: sticky;
        top: var(--nav-h);
        border-right: 1px solid var(--c-border);
        overflow-y: auto;
        max-height: calc(100vh - var(--nav-h));
      }
    }

    /* Hero text */
    .hero-title {
      font-family: var(--font-head);
      font-size: clamp(22px, 5vw, 28px);
      font-weight: 900;
      color: var(--c-text);
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 6px;
      transition: color var(--t-med) var(--ease);
    }

    .hero-sub {
      font-size: 13px;
      color: var(--c-muted);
      margin-bottom: 20px;
      line-height: 1.6;
      transition: color var(--t-med) var(--ease);
    }

    /* Language pills — mobile only */
    .lang-pills {
      display: flex;
      gap: 5px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    @media (min-width: 1280px) { .lang-pills { display: none; } }

    .lang-pill {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 4px 10px;
      border: 1.5px solid var(--c-primary);
      color: var(--c-primary);
      cursor: pointer;
      border-radius: var(--radius);
      background: transparent;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    }

    .lang-pill.active {
      background: var(--c-primary);
      color: #fff;
    }

    /* Form label */
    .form-label {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 6px;
      display: block;
      transition: color var(--t-med) var(--ease);
    }

    /* Product type select */
    .product-select {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid var(--c-accent);
      border-radius: var(--radius);
      background: var(--c-surface);
      font-size: 13px;
      font-family: var(--font-body);
      color: var(--c-text);
      cursor: pointer;
      margin-bottom: 14px;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A7666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      transition:
        border-color var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
      outline: none;
    }

    .product-select:focus { border-color: var(--c-primary); }

    /* INCI textarea */
    .inci-wrap {
      border: 1.5px solid var(--c-accent);
      border-radius: var(--radius);
      background: var(--c-surface);
      padding: 12px;
      margin-bottom: 12px;
      position: relative;
      transition:
        border-color var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
    }

    .inci-wrap:focus-within { border-color: var(--c-primary); }

    #inci-input {
      width: 100%;
      min-height: 100px;
      border: none;
      background: transparent;
      font-size: 13px;
      font-family: var(--font-body);
      color: var(--c-text);
      resize: none;
      outline: none;
      line-height: 1.7;
      transition: color var(--t-med) var(--ease);
    }

    #inci-input::placeholder { color: var(--c-muted); opacity: 0.7; }

    .paste-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: var(--c-primary);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      font-family: var(--font-head);
      padding: 4px 10px;
      border-radius: var(--radius);
      cursor: pointer;
      letter-spacing: 0.06em;
      border: none;
      transition:
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .paste-btn:hover { transform: translateY(-1px); }

    /* Action buttons row */
    .action-row {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .action-btn {
      flex: 1;
      min-width: 0;
      padding: 10px 8px;
      border: 1.5px solid var(--c-secondary);
      border-radius: var(--radius);
      background: transparent;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
    }

    .action-btn:hover {
      background: var(--c-light);
      border-color: var(--c-primary);
      color: var(--c-primary);
      transform: translateY(-1px);
    }

    /* Desktop: no "Foto Çek" button */
    .mobile-only { display: flex; }
    @media (min-width: 1280px) { .mobile-only { display: none !important; } }

    /* Analyze button */
    .analyze-btn {
      width: 100%;
      padding: 14px;
      background: var(--c-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 800;
      font-family: var(--font-head);
      letter-spacing: 0.08em;
      cursor: pointer;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition:
        background var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
      position: relative;
      overflow: hidden;
    }

    .analyze-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background var(--t-fast) var(--ease);
    }

    .analyze-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(47, 69, 58, 0.3);
    }

    .analyze-btn:hover::after { background: rgba(255,255,255,0.06); }
    .analyze-btn:active { transform: translateY(0); }

    .analyze-btn.loading {
      pointer-events: none;
      opacity: 0.8;
    }

    /* Guest note */
    .guest-note {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-bottom: 8px;
      transition: color var(--t-med) var(--ease);
    }

    .guest-note a {
      color: var(--c-primary);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }

    /* AI powered badge */
    .ai-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 10px;
      color: var(--c-muted);
      margin-top: 4px;
    }

    .ai-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-accent);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ============================================================
       RIGHT PANEL — RESULTS
    ============================================================ */
    #right-panel {
      flex: 1;
      min-height: 300px;
      background: var(--c-surface);
      transition: background-color var(--t-med) var(--ease);
    }

    @media (min-width: 1280px) {
      #right-panel { min-height: calc(100vh - var(--nav-h)); }
    }

    /* Empty state */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      min-height: 300px;
      opacity: 0.6;
    }

    .empty-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--c-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 16px;
    }

    .empty-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 6px;
    }

    .empty-sub {
      font-size: 13px;
      color: var(--c-muted);
      max-width: 280px;
    }

    /* Loading state */
    .loading-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      min-height: 300px;
    }

    .loading-state.visible { display: flex; }

    .loading-leaf {
      width: 56px;
      height: 56px;
      margin-bottom: 20px;
      animation: spin 2s linear infinite;
    }

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

    .loading-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 6px;
    }

    .loading-step {
      font-size: 12px;
      color: var(--c-muted);
      margin-bottom: 20px;
      min-height: 18px;
      transition: opacity var(--t-fast) var(--ease);
    }

    .loading-bar-wrap {
      width: 200px;
      height: 3px;
      background: var(--c-border);
      border-radius: 99px;
      overflow: hidden;
    }

    .loading-bar {
      height: 100%;
      background: var(--c-primary);
      border-radius: 99px;
      width: 0%;
      transition: width 0.4s var(--ease);
    }

    /* ============================================================
       BARCODE SCANNER OVERLAY
    ============================================================ */
    #barcode-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 500;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #barcode-overlay.open { display: flex; }

    .barcode-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      transition: background var(--t-fast) var(--ease);
    }

    .barcode-close:hover { background: rgba(255,255,255,0.2); }

    .barcode-title {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }

    .barcode-sub {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 24px;
      text-align: center;
    }

    #barcode-video-wrap {
      position: relative;
      width: min(360px, 90vw);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #000;
    }

    #barcode-video {
      width: 100%;
      display: block;
    }

    .barcode-frame {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .barcode-frame-inner {
      width: 80%;
      height: 40%;
      border: 2px solid var(--c-accent);
      border-radius: 4px;
      position: relative;
    }

    .barcode-scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--c-accent);
      animation: scan 2s ease-in-out infinite;
      opacity: 0.8;
    }

    @keyframes scan {
      0%, 100% { top: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      50% { top: calc(100% - 2px); }
    }

    .barcode-status {
      margin-top: 20px;
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      text-align: center;
    }

    /* Manual barcode input */
    .barcode-manual {
      margin-top: 16px;
      display: flex;
      gap: 8px;
      width: min(360px, 90vw);
    }

    .barcode-manual-input {
      flex: 1;
      padding: 10px 14px;
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.08);
      color: #fff;
      font-size: 13px;
      outline: none;
      transition: border-color var(--t-fast) var(--ease);
    }

    .barcode-manual-input::placeholder { color: rgba(255,255,255,0.4); }
    .barcode-manual-input:focus { border-color: var(--c-accent); }

    .barcode-manual-btn {
      padding: 10px 16px;
      background: var(--c-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-head);
      cursor: pointer;
      transition: opacity var(--t-fast) var(--ease);
    }

    .barcode-manual-btn:hover { opacity: 0.85; }

    /* Product found toast */
    .barcode-found {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--c-primary);
      color: #fff;
      padding: 14px 24px;
      border-radius: var(--radius-lg);
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      z-index: 600;
      transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
      opacity: 0;
      white-space: nowrap;
      max-width: 90vw;
      text-align: center;
    }

    .barcode-found.show {
      display: block;
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       TOAST NOTIFICATION
    ============================================================ */
    #toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--c-text);
      color: var(--c-bg);
      padding: 12px 20px;
      border-radius: var(--radius-lg);
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      z-index: 1000;
      opacity: 0;
      transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
      pointer-events: none;
      white-space: nowrap;
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: var(--c-primary);
      padding: 16px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      transition: background-color var(--t-med) var(--ease);
    }

    .footer-copy {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
    }

    .footer-links {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .footer-link {
      font-size: 10px;
      color: rgba(255,255,255,0.45);
      cursor: pointer;
      text-decoration: none;
      transition: color var(--t-fast) var(--ease);
    }

    .footer-link:hover { color: rgba(255,255,255,0.8); }

    /* ============================================================
       RESULT SCREEN
    ============================================================ */
    .result-score-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 0 20px;
    }

    .score-circle {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      border: 5px solid var(--c-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--c-light);
      margin-bottom: 12px;
      position: relative;
      transition: border-color var(--t-med) var(--ease);
    }

    .score-circle.good  { border-color: var(--c-safe); }
    .score-circle.warn  { border-color: #f59e0b; }
    .score-circle.bad   { border-color: var(--c-danger); }

    .score-num {
      font-family: var(--font-head);
      font-size: 32px;
      font-weight: 900;
      color: var(--c-primary);
      line-height: 1;
      transition: color var(--t-med) var(--ease);
    }

    .score-circle.good .score-num { color: var(--c-safe); }
    .score-circle.warn .score-num { color: #d97706; }
    .score-circle.bad  .score-num { color: var(--c-danger); }

    .score-label {
      font-size: 9px;
      color: var(--c-muted);
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .score-badge {
      font-size: 12px;
      font-weight: 800;
      font-family: var(--font-head);
      padding: 6px 18px;
      border-radius: var(--radius);
      letter-spacing: 0.06em;
      background: var(--c-accent);
      color: var(--c-primary);
    }
    .score-badge.good  { background: #dcfce7; color: #15803d; }
    .score-badge.warn  { background: #fef3c7; color: #92400e; }
    .score-badge.bad   { background: #fee2e2; color: #b91c1c; }
    [data-theme="dark"] .score-badge.good { background: #14532d; color: #86efac; }
    [data-theme="dark"] .score-badge.warn { background: #451a03; color: #fcd34d; }
    [data-theme="dark"] .score-badge.bad  { background: #450a0a; color: #fca5a5; }

    /* ── Analiz Sonuç Kutusu — Sprint 9 ── */
    .result-summary {
      background: var(--c-surface);
      border-top: 3px solid var(--c-primary);
      padding: 24px 28px;
      margin: 0;
      font-size: calc(var(--fs-base) * 0.9375);
      color: var(--c-text);
      line-height: 1.8;
      width: 100%;
      box-sizing: border-box;
      transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
    }
    [data-fontsize="lg"] .result-summary { font-size: 1rem; line-height: 1.85; }

    /* AI HTML Typography — okunabilirlik öncelikli */
    .result-summary h1, .result-summary h2 {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 1.1);
      font-weight: 800;
      color: var(--c-primary);
      margin: 20px 0 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--c-border);
      line-height: 1.3;
    }
    .result-summary h2:first-child { margin-top: 0; }
    .result-summary h3 {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 0.975);
      font-weight: 700;
      color: var(--c-secondary);
      margin: 16px 0 8px;
    }
    .result-summary h4 {
      font-size: calc(var(--fs-base) * 0.9375);
      font-weight: 700;
      color: var(--c-text);
      margin: 12px 0 6px;
    }
    .result-summary p { margin: 0 0 12px; }
    .result-summary p:last-child { margin-bottom: 0; }
    .result-summary strong { color: var(--c-primary); font-weight: 700; }
    .result-summary em { color: var(--c-secondary); font-style: italic; }
    .result-summary ul, .result-summary ol { padding-left: 20px; margin: 8px 0 12px; }
    .result-summary li { margin-bottom: 6px; line-height: 1.7; }
    .result-summary table {
      width: 100%; border-collapse: collapse;
      margin: 12px 0; font-size: calc(var(--fs-base) * 0.875);
      border-radius: 6px; overflow: hidden;
    }
    .result-summary table th {
      background: var(--c-primary); color: #fff;
      padding: 8px 12px; text-align: left; font-weight: 700;
    }
    .result-summary table td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--c-border);
      color: var(--c-text);
    }
    .result-summary table tr:nth-child(even) td { background: var(--c-light); }
    .result-summary hr {
      border: none; border-top: 1px solid var(--c-border); margin: 14px 0;
    }
    /* Inline badge override — AI çıktısından gelen renkli span'lar */
    .result-summary span[style*="background"],
    .result-summary span[style*="background-color"] {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: calc(var(--fs-base) * 0.8125);
      line-height: 1.6;
    }
    /* Colored divs from AI — dark/light safe */
    .result-summary div[style*="background:#f0fdf4"],
    .result-summary div[style*="background: #f0fdf4"] {
      background: color-mix(in srgb, #22c55e 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #22c55e 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#fef2f2"],
    .result-summary div[style*="background: #fef2f2"] {
      background: color-mix(in srgb, #ef4444 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #ef4444 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#fffbeb"],
    .result-summary div[style*="background: #fffbeb"] {
      background: color-mix(in srgb, #f59e0b 10%, var(--c-surface)) !important;
      color: var(--c-text) !important;
      border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--c-border)) !important;
    }
    .result-summary div[style*="background:#f8fafc"],
    .result-summary div[style*="background: #f8fafc"],
    .result-summary div[style*="background:#f9fafb"],
    .result-summary div[style*="background: #f9fafb"] {
      background: var(--c-light) !important;
      color: var(--c-text) !important;
      border: 1px solid var(--c-border) !important;
    }
    /* Force text color in AI output divs */
    .result-summary div[style*="color:#"] { color: var(--c-text) !important; }
    .result-summary div[style*="color: #"] { color: var(--c-text) !important; }
    /* Koruma: hardcoded dark renk yazılar light modda sorun çıkarmaz,
       dark modda ise bunları override et */
    [data-theme="dark"] .result-summary *[style*="color:#1"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#2"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#3"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#4"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#5"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#6"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#7"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#8"] { color: var(--c-text) !important; }
    [data-theme="dark"] .result-summary *[style*="color:#9"] { color: var(--c-text) !important; }
    /* Dark mode: AI hardcoded arka planları override */
    [data-theme="dark"] .result-summary *[style*="background:#f"],
    [data-theme="dark"] .result-summary *[style*="background: #f"],
    [data-theme="dark"] .result-summary *[style*="background-color:#f"],
    [data-theme="dark"] .result-summary *[style*="background:#e"],
    [data-theme="dark"] .result-summary *[style*="background:#d"] {
      background: var(--c-surface) !important;
    }
    /* Inline badges from AI output */
    .result-summary span[style*="#22c55e"],
    .result-summary span[style*="#ef4444"],
    .result-summary span[style*="#f59e0b"] {
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: calc(var(--fs-base) * 0.8125);
    }

    /* ── AI Çıktı CSS Sistemi — Sprint 9 ──────────────────────────────
       Tüm dillerde aynı görünüm. inline CSS yok, sadece bu class'lar.
    ────────────────────────────────────────────────────────────────── */
    .ai-section {
      margin: 0 0 20px;
      padding: 0;
    }
    .ai-title {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 1.05);
      font-weight: 800;
      color: var(--c-primary);
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--c-border);
      line-height: 1.3;
    }
    .ai-subtitle {
      font-family: var(--font-head);
      font-size: calc(var(--fs-base) * 0.95);
      font-weight: 700;
      color: var(--c-secondary);
      margin: 14px 0 6px;
    }
    .ai-text {
      font-size: calc(var(--fs-base) * 0.9375);
      color: var(--c-text);
      line-height: 1.8;
      margin: 0 0 10px;
    }
    .ai-text:last-child { margin-bottom: 0; }

    /* Badges */
    .ai-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 5px;
      font-size: calc(var(--fs-base) * 0.75);
      font-weight: 700;
      font-family: var(--font-head);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      vertical-align: middle;
      margin-right: 6px;
    }
    .ai-badge.safe    { background: #dcfce7; color: #15803d; }
    .ai-badge.caution { background: #fef3c7; color: #92400e; }
    .ai-badge.danger  { background: #fee2e2; color: #b91c1c; }
    .ai-badge.neutral { background: var(--c-light); color: var(--c-muted); border: 1px solid var(--c-border); }
    [data-theme="dark"] .ai-badge.safe    { background: #14532d; color: #86efac; }
    [data-theme="dark"] .ai-badge.caution { background: #451a03; color: #fcd34d; }
    [data-theme="dark"] .ai-badge.danger  { background: #450a0a; color: #fca5a5; }
    [data-theme="dark"] .ai-badge.neutral { background: var(--c-surface); color: var(--c-muted); }

    /* Ingredient highlight */
    .ai-ingredient {
      font-weight: 600;
      color: var(--c-primary);
      border-bottom: 1px dotted var(--c-accent);
    }

    /* Flag items */
    .ai-flag {
      padding: 12px 16px;
      margin: 8px 0;
      border-radius: 8px;
      border-left: 3px solid var(--c-border);
      background: var(--c-light);
    }
    .ai-flag.danger  { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, var(--c-surface)); }
    .ai-flag.caution { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--c-surface)); }
    .ai-flag.safe    { border-left-color: #22c55e; background: color-mix(in srgb, #22c55e 8%, var(--c-surface)); }
    .ai-flag.neutral { border-left-color: var(--c-muted); background: var(--c-light); }
    .ai-flag-title {
      font-weight: 700;
      font-size: calc(var(--fs-base) * 0.9);
      color: var(--c-text);
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-flag-body {
      font-size: calc(var(--fs-base) * 0.875);
      color: var(--c-text);
      line-height: 1.7;
      margin: 0;
      opacity: 0.9;
    }

    /* Info box */
    .ai-infobox {
      padding: 14px 18px;
      margin: 10px 0;
      border-radius: 8px;
      background: var(--c-light);
      border: 1px solid var(--c-border);
      font-size: calc(var(--fs-base) * 0.9);
      color: var(--c-text);
      line-height: 1.75;
    }

    /* Verdict */
    .ai-verdict {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 8px;
      background: var(--c-light);
      border: 1px solid var(--c-border);
      font-weight: 700;
      font-size: calc(var(--fs-base) * 0.95);
      color: var(--c-text);
    }

    /* Score breakdown bar */
    .score-breakdown {
      padding: 0 20px 16px;
    }

    .breakdown-label {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 10px;
    }

    .breakdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
    }

    .breakdown-name {
      font-size: 11px;
      color: var(--c-text);
      width: 130px;
      flex-shrink: 0;
    }

    .breakdown-bar-wrap {
      flex: 1;
      height: 6px;
      background: var(--c-border);
      border-radius: 99px;
      overflow: hidden;
    }

    .breakdown-bar {
      height: 100%;
      border-radius: 99px;
      width: 0%;
      transition: width 0.8s var(--ease);
    }

    .breakdown-val {
      font-size: 10px;
      font-weight: 700;
      color: var(--c-muted);
      width: 36px;
      text-align: right;
    }

    /* Accordions */
    .accordion-wrap {
      padding: 0 20px;
      margin-bottom: 16px;
    }

    .acc-item {
      border-bottom: 0.5px solid var(--c-border);
      transition: border-color var(--t-med) var(--ease);
    }

    .acc-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      cursor: pointer;
      user-select: none;
      gap: 8px;
    }

    .acc-title {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 700;
      color: var(--c-text);
      transition: color var(--t-med) var(--ease);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .acc-count {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 99px;
      background: var(--c-surface);
      color: var(--c-muted);
      border: 1px solid var(--c-border);
    }

    .acc-arrow {
      font-size: 13px;
      color: var(--c-muted);
      transition: transform 0.25s var(--ease);
      flex-shrink: 0;
    }

    .acc-body {
      font-size: 13px;
      color: var(--c-muted);
      padding: 0 0 12px;
      line-height: 1.7;
      display: none;
      transition: color var(--t-med) var(--ease);
    }

    .acc-item.open .acc-arrow { transform: rotate(180deg); }
    .acc-item.open .acc-body  { display: block; }

    /* Ingredient tags */
    .ing-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }

    .ing-tag {
      font-size: 11px;
      padding: 3px 9px;
      border-radius: var(--radius);
      font-weight: 600;
      cursor: pointer;
      transition: opacity var(--t-fast) var(--ease);
    }

    .ing-tag:hover { opacity: 0.75; }
    .ing-tag.safe   { background: var(--c-safe-bg); color: var(--c-safe); }
    .ing-tag.warn   { background: #fef3c7; color: #92400e; }
    .ing-tag.bad    { background: var(--c-danger-bg); color: var(--c-danger); }
    .ing-tag.active { background: var(--c-light); color: var(--c-secondary); }

    /* Action row (prompt copy, new analysis) */
    .result-actions {
      display: flex;
      gap: 8px;
      padding: 0 20px 20px;
      flex-wrap: wrap;
    }

    .result-action-btn {
      flex: 1;
      min-width: 120px;
      padding: 10px 14px;
      border: 1.5px solid var(--c-border);
      border-radius: var(--radius);
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-secondary);
      cursor: pointer;
      text-align: center;
      transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    }

    .result-action-btn:hover {
      background: var(--c-light);
      border-color: var(--c-primary);
      color: var(--c-primary);
    }

    .result-action-btn.pro {
      border-color: var(--c-accent);
      color: var(--c-muted);
      font-size: 11px;
    }

    /* Punya section */
    .punya-section {
      margin: 0 20px 24px;
      padding: 16px;
      background: var(--c-surface);
      border-radius: var(--radius-lg);
      border: 1px solid var(--c-border);
      transition:
        background-color var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease);
    }

    .punya-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .punya-title {
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .punya-sub {
      font-size: 10px;
      color: var(--c-muted);
      text-decoration: underline;
      cursor: pointer;
    }

    .punya-cards {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .punya-cards::-webkit-scrollbar { display: none; }

    .punya-card {
      flex-shrink: 0;
      width: 150px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius);
      padding: 10px;
      background: var(--c-bg);
      cursor: pointer;
      transition:
        border-color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        background-color var(--t-med) var(--ease);
    }

    .punya-card:hover {
      border-color: var(--c-primary);
      transform: translateY(-2px);
    }

    .punya-card-img {
      width: 100%;
      height: 80px;
      background: var(--c-light);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-bottom: 8px;
      transition: background-color var(--t-med) var(--ease);
    }

    .punya-card-name {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: 3px;
      transition: color var(--t-med) var(--ease);
    }

    .punya-card-score {
      font-size: 10px;
      color: var(--c-primary);
      font-weight: 600;
      margin-bottom: 8px;
      transition: color var(--t-med) var(--ease);
    }

    .punya-cmp-btn {
      width: 100%;
      padding: 6px;
      border: 1.5px solid var(--c-primary);
      border-radius: var(--radius);
      background: transparent;
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-primary);
      cursor: pointer;
      transition:
        background var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease);
    }

    .punya-cmp-btn:hover {
      background: var(--c-primary);
      color: #fff;
    }

    /* ============================================================
       LOGIN MODAL
    ============================================================ */
    #login-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 400;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #login-overlay.open { display: flex; }

    .login-modal {
      background: var(--c-bg);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      position: relative;
      transition: background-color var(--t-med) var(--ease);
    }

    .login-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--c-surface);
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: var(--c-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--t-fast) var(--ease);
    }

    .login-close:hover { background: var(--c-light); }

    .login-logo {
      text-align: center;
      margin-bottom: 20px;
    }

    .login-logo-name {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 900;
      color: var(--c-primary);
      letter-spacing: 0.04em;
    }

    .login-logo-sub {
      font-size: 11px;
      color: var(--c-muted);
      letter-spacing: 0.07em;
    }

    .login-tagline {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .login-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 800;
      color: var(--c-text);
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: 12px;
      color: var(--c-muted);
      margin-bottom: 18px;
      line-height: 1.5;
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      border: 1.5px solid var(--c-border);
      border-radius: var(--radius);
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-head);
      color: var(--c-text);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition:
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease);
    }

    .login-btn:hover { background: var(--c-light); border-color: var(--c-primary); }

    .login-btn.primary {
      background: var(--c-primary);
      border-color: var(--c-primary);
      color: #fff;
    }

    .login-btn.primary:hover { opacity: 0.9; }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
    }

    .login-divider-line {
      flex: 1;
      height: 0.5px;
      background: var(--c-border);
    }

    .login-divider-text {
      font-size: 11px;
      color: var(--c-muted);
    }

    .login-guest {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: var(--c-muted);
      cursor: pointer;
      padding: 8px;
      text-decoration: underline;
      background: none;
      border: none;
    }

    .login-guest-note {
      font-size: 11px;
      color: var(--c-muted);
      text-align: center;
      margin-top: 10px;
      line-height: 1.6;
    }

    .login-lang-row {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-top: 16px;
    }

    /* ============================================================
       UTILITY
    ============================================================ */
    .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;
    }

    /* Smooth all color transitions */
    * {
      transition-property: background-color, border-color, color;
      transition-duration: var(--t-med);
      transition-timing-function: var(--ease);
    }

    /* Override for elements that need instant or custom transitions */
    .hamburger span,
    .analyze-btn,
    .action-btn,
    .nav-login,
    .paste-btn,
    .drawer-item,
    .lang-option,
    .lang-pill,
    .drawer-close,
    .barcode-close { transition: all var(--t-fast) var(--ease); }

    #drawer, #drawer-overlay { transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
    @media (min-width: 1280px) {
      #empty-tips { display: block !important; }
      .empty-state { opacity: 1; padding: 32px; }
    }
  
    [data-theme="dark"][data-color="g1"] { --c-bg:#0e1812; --c-surface:#1a2420; }
    [data-theme="dark"][data-color="b1"] { --c-bg:#090f1c; --c-surface:#0f1a2e; }
    [data-theme="dark"][data-color="y1"] { --c-bg:#120c04; --c-surface:#1e1408; }
    [data-theme="dark"][data-color="r1"] { --c-bg:#130608; --c-surface:#1e0c10; }

    .model-btn{padding:8px 14px;flex-direction:column;align-items:flex-start;border-radius:var(--radius);font-size:10px;font-weight:700;font-family:var(--font-head);border:1.5px solid var(--c-border);background:transparent;color:var(--c-muted);cursor:pointer;transition:all var(--t-fast) var(--ease);display:inline-flex;align-items:center;gap:4px}
    .model-btn.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
    .pro-tag{font-size:8px;padding:1px 4px;border-radius:3px;background:var(--c-accent);color:var(--c-primary);font-weight:800}
    #ai-model-row{margin:0 0 10px;display:none}

    [data-theme="dark"] .result-summary {
      background: var(--c-light);
      border-left-color: var(--c-primary);
    }
    [data-theme="dark"] .result-summary h2,
    [data-theme="dark"] .result-summary h3 { border-bottom-color: #2a4035; }
    [data-theme="dark"] .result-summary table tr:nth-child(even) td { background: #1e2e24; }