/* ========== TOKENS ========== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  --ink-50:#eef2f6;--ink-100:#d6dee7;--ink-200:#a9b9c9;--ink-300:#7a8ea3;--ink-400:#4f6478;
  --ink-500:#2d4154;--ink-600:#1a2b3d;--ink-700:#0e1e2e;--ink-800:#071421;--ink-900:#030b14;
  --teal-50:#edf7f9;--teal-100:#d4ecf0;--teal-200:#a8d8e0;--teal-300:#7cc2cf;--teal-400:#5aa9b8;
  --teal-500:#3f8c9c;--teal-600:#2d7081;--teal-700:#225764;--teal-800:#1a424c;--teal-900:#122e35;
  --paper-0:#ffffff;--paper-50:#fbfaf7;--paper-100:#f5f3ed;--paper-200:#ece8de;--paper-300:#ddd7c7;
  --grade-good-50:#eaf5ec;--grade-good-500:#4c8c5a;--grade-good-700:#305a3b;
  --grade-neutral-50:#f1f0ea;--grade-neutral-500:#8a866f;--grade-neutral-700:#56533f;
  --grade-caution-50:#fbf1df;--grade-caution-500:#c68a2a;--grade-caution-700:#8a5c13;
  --grade-avoid-50:#f7e6e4;--grade-avoid-500:#b84b3c;--grade-avoid-700:#7f2e22;
  --bg:var(--paper-50);--bg-raised:var(--paper-0);--bg-sunken:var(--paper-100);--bg-inverse:var(--ink-800);
  --fg:var(--ink-800);--fg-muted:var(--ink-500);--fg-subtle:var(--ink-300);--fg-on-inverse:var(--paper-50);--fg-on-accent:var(--paper-0);
  --accent:var(--teal-500);--accent-hover:var(--teal-600);--accent-press:var(--teal-700);--accent-subtle:var(--teal-50);
  --link:var(--teal-600);--link-visited:var(--ink-600);--link-hover:var(--teal-700);
  --border:var(--ink-100);--border-strong:var(--ink-200);--border-subtle:var(--paper-200);
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Lora",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
  --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:17px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:38px;--fs-4xl:48px;--fs-5xl:64px;
  --lh-tight:1.15;--lh-snug:1.3;--lh-normal:1.5;--lh-relaxed:1.65;
  --ls-tight:-0.02em;--ls-snug:-0.01em;--ls-normal:0;--ls-wide:0.04em;--ls-caps:0.08em;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --r-xs:2px;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:16px;--r-pill:999px;
  --shadow-0:0 0 0 1px var(--border);
  --shadow-1:0 1px 2px rgba(7,20,33,0.04),0 0 0 1px var(--border);
  --shadow-2:0 2px 6px rgba(7,20,33,0.06),0 1px 2px rgba(7,20,33,0.05);
  --shadow-3:0 8px 24px rgba(7,20,33,0.10),0 2px 4px rgba(7,20,33,0.06);
  --shadow-focus:0 0 0 3px rgba(63,140,156,0.35);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --width-prose:68ch;--width-content:1120px;--width-wide:1280px;
}
html[data-theme="dark"] {
  --bg:#0b1620;--bg-raised:#111f2c;--bg-sunken:#081019;
  --fg:#e6ecf2;--fg-muted:#9fb1c3;--fg-subtle:#6a7f93;
  --accent:#6fc0d0;--accent-hover:#88d0de;--accent-press:#a0dce8;--accent-subtle:#15333c;
  --link:#7cc2cf;--link-visited:#a9b9c9;--link-hover:#a8d8e0;
  --border:#1f3140;--border-strong:#2b4254;--border-subtle:#16252f;
  --paper-0:#121f2b;--paper-50:#0b1620;--paper-100:#0e1a25;--paper-200:#16242f;
  --grade-good-50:#12291c;--grade-good-500:#5ea572;--grade-good-700:#a0d4ae;
  --grade-neutral-50:#1e1d17;--grade-neutral-500:#a29c82;--grade-neutral-700:#d4cdb0;
  --grade-caution-50:#2b1e0c;--grade-caution-500:#d7a14a;--grade-caution-700:#f0c988;
  --grade-avoid-50:#2c1512;--grade-avoid-500:#d2695b;--grade-avoid-700:#f2a89d;
  --shadow-1:0 1px 2px rgba(0,0,0,0.35),0 0 0 1px var(--border);
  --shadow-2:0 2px 8px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.3);
  --shadow-3:0 12px 30px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.35);
  --shadow-focus:0 0 0 3px rgba(124,194,207,0.35);
}

/* ========== RESET & BASE ========== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
body{font-family:var(--font-display);color:var(--fg);background:var(--bg);font-size:var(--fs-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--link);text-decoration:none;cursor:pointer;}
a:hover{color:var(--link-hover);}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}

/* ========== TOPBAR ========== */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--width-wide);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px;}
.brand-mark{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;}
.brand-mark svg{width:26px;height:26px;flex-shrink:0;}
.brand-mark .wm{font-weight:800;font-size:18px;color:var(--fg);letter-spacing:-0.01em;}
.brand-mark .wm .ru{color:var(--teal-600);font-weight:700;font-size:11px;vertical-align:top;margin-left:2px;}
html[data-theme="dark"] .brand-mark .wm .ru{color:var(--accent);}
.topbar-search{flex:1;max-width:480px;position:relative;}
.topbar-search input{width:100%;padding:9px 40px 9px 34px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:13px;color:var(--fg);outline:none;transition:border-color 150ms var(--ease-out),box-shadow 150ms var(--ease-out),background 150ms;font-family:var(--font-display);}
.topbar-search input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);background:var(--bg-raised);}
.topbar-search input::placeholder{color:var(--fg-subtle);}
.topbar-search>.leading-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-subtle);pointer-events:none;}
.topbar-search .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg-raised);}
.topbar-nav{display:flex;gap:4px;font-size:13px;font-weight:500;}
.topbar-nav a{color:var(--fg-muted);cursor:pointer;padding:7px 11px;border-radius:6px;transition:color 120ms,background 120ms;}
.topbar-nav a:hover{color:var(--fg);background:var(--bg-sunken);text-decoration:none;}
.topbar-nav a.active{color:var(--fg);font-weight:600;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--fg-muted);transition:color 120ms,background 120ms;}
.theme-toggle:hover{color:var(--fg);background:var(--bg-sunken);}

/* ========== PAGE SHELL ========== */
.page{max-width:var(--width-content);margin:0 auto;padding:40px 28px 80px;}
.page-wide{max-width:var(--width-wide);}

/* ========== BUTTONS ========== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);font-size:14px;font-weight:600;line-height:1;border:1px solid transparent;transition:all 150ms var(--ease-out);font-family:var(--font-display);white-space:nowrap;}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none;}
.btn-primary:active{background:var(--accent-press);}
.btn-secondary{background:var(--bg-raised);color:var(--fg);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--bg-sunken);border-color:var(--fg-subtle);text-decoration:none;}
.btn-ghost{background:transparent;color:var(--fg-muted);}
.btn-ghost:hover{background:var(--bg-sunken);color:var(--fg);text-decoration:none;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed;}

/* ========== CARDS ========== */
.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;}
.card-flat{padding:0;}

/* ========== GRADES ========== */
.grade-dot{width:10px;height:10px;border-radius:999px;flex-shrink:0;display:inline-block;}
.grade-dot.good{background:var(--grade-good-500);}
.grade-dot.neutral{background:var(--grade-neutral-500);}
.grade-dot.caution{background:var(--grade-caution-500);}
.grade-dot.avoid{background:var(--grade-avoid-500);}
.grade-dot.unknown{background:var(--fg-subtle);opacity:0.5;}
.grade-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:0.02em;font-family:var(--font-display);}
.grade-pill.good{background:var(--grade-good-50);color:var(--grade-good-700);}
.grade-pill.neutral{background:var(--grade-neutral-50);color:var(--grade-neutral-700);}
.grade-pill.caution{background:var(--grade-caution-50);color:var(--grade-caution-700);}
.grade-pill.avoid{background:var(--grade-avoid-50);color:var(--grade-avoid-700);}

/* ========== INCI ROW ========== */
.inci-row{display:grid;grid-template-columns:20px minmax(160px,260px) minmax(120px,1fr) minmax(140px,220px) 56px 18px;gap:14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background 120ms var(--ease-out);}
.inci-row:last-child{border-bottom:0;}
.inci-row:hover{background:var(--bg-sunken);}
.inci-row .name{font-family:var(--font-mono);font-size:13px;color:var(--fg);font-weight:500;}
.inci-row .ru{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);font-style:italic;}
.inci-row .fns{display:flex;gap:5px;flex-wrap:wrap;}
.inci-row .fn-chip{font-size:10px;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:999px;background:var(--bg-sunken);color:var(--fg-muted);border:1px solid var(--border);font-weight:600;}
.inci-row .pct{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);font-variant-numeric:tabular-nums;}
.inci-row .arrow{color:var(--fg-subtle);font-size:14px;transition:transform 120ms,color 120ms;}
.inci-row:hover .arrow{color:var(--fg);transform:translateX(2px);}

/* ========== TABS ========== */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto;}
.tabs .tab{padding:11px 18px;font-size:14px;font-weight:500;color:var(--fg-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color 120ms var(--ease-out),border-color 120ms var(--ease-out);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;background:transparent;font-family:var(--font-display);}
.tabs .tab:hover{color:var(--fg);}
.tabs .tab.active{color:var(--fg);border-bottom-color:var(--accent);font-weight:600;}
.tabs .tab .count{font-family:var(--font-mono);font-size:11px;padding:1px 7px;border-radius:999px;background:var(--bg-sunken);color:var(--fg-muted);font-weight:600;}
.tabs .tab.active .count{background:var(--accent-subtle);color:var(--accent);}

/* ========== TYPOGRAPHY HELPERS ========== */
.eyebrow{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-muted);font-weight:700;}
.eyebrow.accent{color:var(--accent);}
.h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:var(--fg);margin:0;}
.h2{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-0.01em;line-height:1.2;color:var(--fg);margin:0;}
.h3{font-size:var(--fs-lg);font-weight:600;line-height:1.3;color:var(--fg);margin:0;}
.muted{color:var(--fg-muted);}
.mono{font-family:var(--font-mono);}
.serif{font-family:var(--font-serif);}

/* ========== LAYOUT ========== */
.stack>*+*{margin-top:var(--sp-4);}
.stack-sm>*+*{margin-top:var(--sp-2);}
.stack-lg>*+*{margin-top:var(--sp-8);}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.divider{height:1px;background:var(--border);margin:32px 0;border:0;}
.spacer-sm{height:16px;}.spacer-md{height:32px;}.spacer-lg{height:56px;}

/* ========== HERO ========== */
.hero{padding:0;position:relative;overflow:hidden;}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero h1{font-size:52px;font-weight:800;letter-spacing:-0.025em;line-height:1.05;margin:0 0 16px;color:var(--fg);}
.hero h1 .accent{color:var(--accent);}
html[data-theme="dark"] .hero h1 .accent{color:var(--accent-hover);}
.hero .sub{font-family:var(--font-serif);font-size:19px;line-height:1.55;color:var(--fg-muted);margin:0 0 32px;max-width:58ch;}
.hero-search{display:flex;align-items:stretch;gap:0;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:6px;box-shadow:var(--shadow-1);transition:border-color 150ms,box-shadow 150ms;}
.hero-search:focus-within{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.hero-search .leading{display:flex;align-items:center;padding:0 8px 0 12px;color:var(--fg-subtle);}
.hero-search input{flex:1;border:0;outline:0;background:transparent;font-size:16px;padding:10px 0;color:var(--fg);font-family:var(--font-display);}
.hero-search input::placeholder{color:var(--fg-subtle);}
.hero-search .btn{border-radius:calc(var(--r-lg) - 6px);}
.hero-quick-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--fg-muted);}
.hero-quick-links a{font-weight:600;color:var(--accent);}
html[data-theme="dark"] .hero-quick-links a{color:var(--accent-hover);}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--border);padding-top:24px;}
.hero-stat .num{font-size:28px;font-weight:800;letter-spacing:-0.01em;color:var(--fg);font-variant-numeric:tabular-nums;}
.hero-stat .lbl{font-size:12px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:4px;}

/* ========== SEARCH DROPDOWN ========== */
.search-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);z-index:60;overflow:hidden;max-height:480px;overflow-y:auto;}
.search-group{padding:10px 0;border-bottom:1px solid var(--border-subtle);}
.search-group:last-child{border-bottom:0;}
.search-group-header{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-muted);}
.search-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background 100ms;}
.search-item:hover{background:var(--bg-sunken);}
.search-item .icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--bg-sunken);color:var(--fg-muted);flex-shrink:0;}
.search-item .title{font-weight:600;color:var(--fg);font-size:14px;}
.search-item .title .mono{font-family:var(--font-mono);font-weight:500;}
.search-item .sub{font-size:12px;color:var(--fg-muted);margin-top:1px;}
.search-item .right{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);}

/* ========== SECTION HEADS & FEATURE CARDS ========== */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;gap:16px;flex-wrap:wrap;}
.section-head .link{font-size:14px;font-weight:600;color:var(--accent);}
html[data-theme="dark"] .section-head .link{color:var(--accent-hover);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.feature-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;cursor:pointer;transition:border-color 150ms,transform 150ms;}
.feature-card:hover{border-color:var(--border-strong);}
.feature-card h3{font-size:20px;font-weight:700;margin:8px 0 6px;color:var(--fg);letter-spacing:-0.01em;}
.feature-card p{font-family:var(--font-serif);font-size:14px;line-height:1.55;color:var(--fg-muted);margin:0 0 16px;}
.feature-card .icon-bg{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-subtle);color:var(--accent);margin-bottom:4px;}
html[data-theme="dark"] .feature-card .icon-bg{color:var(--accent-hover);}
.feature-card .cta{color:var(--accent);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:4px;}

/* ========== BRANDS ========== */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.brand-cell{display:block;padding:14px 16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);font-weight:600;font-size:14px;color:var(--fg);cursor:pointer;transition:all 120ms var(--ease-out);}
.brand-cell .count{float:right;color:var(--fg-subtle);font-weight:500;font-family:var(--font-mono);font-size:12px;}
.brand-cell:hover{border-color:var(--accent);background:var(--accent-subtle);color:var(--fg);text-decoration:none;}

/* ========== FUNCTION CARDS ========== */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.fn-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:all 150ms;}
.fn-card:hover{border-color:var(--accent);}
.fn-card .t{font-size:15px;font-weight:700;color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:8px;}
.fn-card .t .count{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);font-weight:500;}
.fn-card .d{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);margin-top:6px;line-height:1.45;}
.fn-card .samples{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px;}
.fn-card .samples .s{font-family:var(--font-mono);font-size:11px;color:var(--fg-muted);background:var(--bg-sunken);padding:2px 7px;border-radius:4px;}

/* ========== PRODUCT PAGE ========== */
.product-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}
.product-thumb{aspect-ratio:3/4;width:100%;background:var(--bg-sunken);border-radius:var(--r-lg);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--fg-subtle);font-size:12px;text-align:center;padding:20px;position:relative;}
.product-thumb .placeholder-stamp{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-subtle);margin-bottom:12px;padding:4px 10px;border:1px dashed var(--border-strong);border-radius:999px;}
.product-thumb .name{font-family:var(--font-serif);font-size:17px;color:var(--fg);font-style:italic;line-height:1.3;}
.product-meta-side{margin-top:16px;display:grid;gap:8px;font-size:13px;}
.product-meta-side .row-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-subtle);}
.product-meta-side .row-item:last-child{border-bottom:0;}
.product-meta-side .k{color:var(--fg-muted);font-size:12px;}
.product-meta-side .v{color:var(--fg);font-family:var(--font-mono);font-size:12px;text-align:right;}
.product-header-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.summary-stat{padding:14px 16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);position:relative;overflow:hidden;}
.summary-stat .num{font-size:26px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1;}
.summary-stat .lbl{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:6px;}
.summary-stat.good .num{color:var(--grade-good-700);}
.summary-stat.caution .num{color:var(--grade-caution-700);}
.summary-stat.avoid .num{color:var(--grade-avoid-700);}
.dist-bar{height:10px;border-radius:999px;overflow:hidden;display:flex;background:var(--bg-sunken);border:1px solid var(--border);}
.dist-bar .seg{height:100%;}
.dist-bar .seg.good{background:var(--grade-good-500);}
.dist-bar .seg.neutral{background:var(--grade-neutral-500);}
.dist-bar .seg.caution{background:var(--grade-caution-500);}
.dist-bar .seg.avoid{background:var(--grade-avoid-500);}
.dist-legend{display:flex;gap:14px;margin-top:10px;font-size:12px;flex-wrap:wrap;}
.dist-legend>div{display:flex;align-items:center;gap:6px;color:var(--fg-muted);}
.dist-legend>div b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;}
.actives-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.active-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:border-color 150ms;}
.active-card:hover{border-color:var(--accent);}
.active-card .name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--fg);}
.active-card .ru{font-family:var(--font-serif);font-size:13px;color:var(--fg-muted);font-style:italic;margin-top:1px;}
.active-card .desc{font-family:var(--font-serif);font-size:13px;color:var(--fg);margin-top:10px;line-height:1.5;}
.active-card .meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--fg-muted);}
.similar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.similar-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;cursor:pointer;transition:border-color 150ms;}
.similar-card:hover{border-color:var(--accent);}
.mini-thumb{aspect-ratio:1;background:var(--bg-sunken);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--fg-subtle);font-family:var(--font-serif);font-style:italic;font-size:13px;text-align:center;padding:12px;margin-bottom:12px;}
.similar-card .brand{font-size:11px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.similar-card .title{font-size:14px;font-weight:600;color:var(--fg);margin:3px 0 8px;line-height:1.3;}
.similar-card .match{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--accent);background:var(--accent-subtle);padding:3px 8px;border-radius:999px;font-weight:600;}

/* ========== INCI TOOLTIP ========== */
.inci-tooltip{position:fixed;z-index:90;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:14px 16px;max-width:340px;pointer-events:none;font-size:13px;}
.inci-tooltip .t{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.inci-tooltip .t .name{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--fg);}
.inci-tooltip .ru{font-family:var(--font-serif);font-style:italic;color:var(--fg-muted);font-size:13px;margin-bottom:8px;}
.inci-tooltip .desc{font-family:var(--font-serif);font-size:13px;line-height:1.5;color:var(--fg);}
.inci-tooltip .footer{margin-top:10px;padding-top:8px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--fg-muted);display:flex;justify-content:space-between;}

/* ========== COMPOSER / SCANNER / COMPARE ========== */
.composer-input{width:100%;min-height:180px;padding:16px 18px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--fg);outline:0;transition:border-color 150ms var(--ease-out),box-shadow 150ms;resize:vertical;}
.composer-input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.scanner-frame{position:relative;background:#0a0d12;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;border:1px solid var(--border);}
.scanner-line{position:absolute;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan 2.4s ease-in-out infinite;box-shadow:0 0 12px var(--accent);}
@keyframes scan{0%,100%{top:10%;}50%{top:90%;}}
.scanner-corner{position:absolute;width:28px;height:28px;border:3px solid var(--accent);}

/* ========== COMPARE ========== */
.compare-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
.compare-slot{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;position:relative;min-height:180px;}
.compare-slot .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;cursor:pointer;color:var(--fg-muted);border:2px dashed var(--border);border-radius:var(--r-md);padding:32px;transition:all 150ms;}
.compare-slot .empty:hover{border-color:var(--accent);color:var(--accent);}
.compare-slot .remove{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--fg-muted);}
.compare-slot .remove:hover{background:var(--bg-sunken);color:var(--fg);}
.compare-table{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-raised);}
.compare-header{display:grid;gap:0;padding:14px 16px;background:var(--bg-sunken);border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;color:var(--fg-muted);}
.compare-row{display:grid;gap:0;padding:10px 16px;border-bottom:1px solid var(--border-subtle);align-items:center;font-size:13px;transition:background 100ms;}
.compare-row:last-child{border-bottom:0;}
.compare-row.shared{background:color-mix(in srgb,var(--accent-subtle) 60%,transparent);}
.compare-row:hover{background:var(--bg-sunken);}
.cell-ing{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0;}
.cell-ing .name{font-family:var(--font-mono);font-size:12px;color:var(--fg);}
.cell-ing .ru{font-family:var(--font-serif);font-size:11px;color:var(--fg-muted);font-style:italic;}
.cell-presence{display:flex;align-items:center;justify-content:center;font-size:12px;}
.cell-presence.has{color:var(--grade-good-700);}
.cell-presence.no{color:var(--fg-subtle);}

/* ========== MODAL ========== */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(7,20,33,0.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade 160ms ease-out;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:28px;animation:pop 180ms ease-out;}
@keyframes pop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.modal h3{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.modal .sub{color:var(--fg-muted);font-family:var(--font-serif);font-size:14px;margin:0 0 20px;}
.modal .field{margin-bottom:14px;}
.modal label{display:block;font-size:12px;font-weight:700;color:var(--fg);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.modal input,.modal textarea,.modal select{width:100%;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;color:var(--fg);outline:0;transition:border-color 150ms,box-shadow 150ms;font-family:var(--font-display);}
.modal textarea{font-family:var(--font-display);min-height:96px;resize:vertical;}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}

/* ========== MISC ========== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--bg-sunken);color:var(--fg);border:1px solid var(--border);}
.chip.accent{background:var(--accent-subtle);color:var(--accent);border-color:transparent;font-weight:600;}
html[data-theme="dark"] .chip.accent{color:var(--accent-hover);}
.az-filter{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:20px;}
.az-filter a{padding:4px 9px;border-radius:4px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--fg-muted);cursor:pointer;}
.az-filter a.active{background:var(--accent);color:#fff;}
.az-filter a.disabled{color:var(--fg-subtle);cursor:default;opacity:0.5;}
.az-filter a:hover:not(.disabled):not(.active){background:var(--bg-sunken);color:var(--fg);}
.breadcrumb{font-size:13px;color:var(--fg-muted);margin-bottom:16px;}
.breadcrumb a{color:var(--fg-muted);}
.breadcrumb a:hover{color:var(--fg);text-decoration:underline;}
.breadcrumb .sep{margin:0 6px;color:var(--fg-subtle);}
.breadcrumb .cur{color:var(--fg);font-weight:500;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-3);z-index:300;font-size:13px;font-weight:500;animation:slide-up 200ms ease-out;}
@keyframes slide-up{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
.source-block{margin-top:48px;padding:16px 20px;background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--r-md);font-family:var(--font-mono);font-size:12px;color:var(--fg-muted);line-height:1.7;}
.source-block a{color:var(--accent);}
.compare-dock{position:fixed;bottom:20px;right:20px;z-index:200;display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:var(--r-md);padding:12px 16px;font-size:13px;font-weight:600;box-shadow:var(--shadow-3);cursor:pointer;transition:background 150ms;}
.compare-dock:hover{background:var(--accent-hover);}

/* ========== FOOTER ========== */
.site-footer{margin-top:80px;padding:40px 28px 48px;border-top:1px solid var(--border);background:var(--bg-sunken);font-size:13px;color:var(--fg-muted);}
.site-footer-inner{max-width:var(--width-wide);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;}
.site-footer h5{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg);font-weight:700;margin:0 0 12px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:8px;}
.site-footer a{color:var(--fg-muted);}
.site-footer a:hover{color:var(--fg);}
.site-footer .copyright{font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle);margin-top:10px;}

/* ========== SCANNER LAYOUT ========== */
.scanner-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.ean-input{flex:1;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-mono);font-size:15px;color:var(--fg);outline:0;width:100%;transition:border-color 150ms,box-shadow 150ms;}
.ean-input:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}

/* ========== FORM FIELDS ========== */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--fg-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;color:var(--fg);outline:0;font-family:var(--font-display);transition:border-color 150ms,box-shadow 150ms;}
.field textarea{font-family:var(--font-display);resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:var(--shadow-focus);}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-track{background:transparent;}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .feature-grid{grid-template-columns:1fr;}
  .product-layout{grid-template-columns:1fr;}
  .hero h1{font-size:38px!important;}
  .scanner-layout{grid-template-columns:1fr;}
  .compare-picker{grid-template-columns:1fr;}
  .site-footer-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .summary-grid{grid-template-columns:repeat(2,1fr)!important;}
  .topbar-nav{display:none;}
  .topbar-inner{gap:12px;}
}

a.inci-row,a.fn-card,a.similar-card{color:inherit;text-decoration:none}
button.theme-toggle{font-size:17px}
.scanner-corner{position:absolute;width:34px;height:24px;border:2px solid var(--accent)}
.scan-demo.scanning .scanner-line{display:block}
.scanner-line{display:none;position:absolute;left:4%;right:4%;top:50%;height:2px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:scanline 1.2s linear infinite}
@keyframes scanline{0%{top:10%}50%{top:90%}100%{top:10%}}
.search-results{display:grid;gap:12px}
.topbar-search .suggest{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);z-index:90;overflow:hidden}
.topbar-search .suggest a{display:block;padding:9px 14px;color:var(--fg);font-size:13px}
.topbar-search .suggest a:hover{background:var(--bg-sunken);text-decoration:none}