/* Fide Group v3 — new visual direction: deep navy + burnt-orange, shadows & gradients allowed.
   Pure re-skin layer: overrides tokens + adds depth/motion on top of fide.css + fide-v2.css. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap&subset=cyrillic,latin");

:root{
--bg-page:#F5F6FC;--bg-surface:#FFFFFF;--bg-sunken:#EEF1FA;--bg-hover:#F1F3FC;
--fg-1:#0F1524;--fg-2:#5B6478;--fg-disabled:#9AA3B8;
--border-1:#E3E7F2;--border-2:#CBD2E6;
--accent:#D14315;--accent-hover:#E8541C;--accent-press:#B23A12;--on-accent:#FFFFFF;--accent-soft:#FFE8DD;--accent-ink:#9A3310;
--accent-2:#2563EB;--accent-2-soft:#E3ECFE;
--success:#15803D;--success-soft:#E3F6E9;--error:#D1253D;--error-soft:#FDE6EA;
--skeleton:#E9ECF7;--backdrop:rgba(10,14,28,.55);--focus-ring:#D14315;--focus-inner:#0F1524;
--cta-bg:var(--accent);--cta-bg-hover:var(--accent-hover);--cta-fg:#FFFFFF;
--status-found:var(--success);--status-found-bg:var(--success-soft);--status-missing:var(--accent-ink);--status-missing-bg:var(--accent-soft);--status-invalid:var(--error);--status-invalid-bg:var(--error-soft);--fresh-stale:var(--accent-ink);

--radius-control:10px;--radius-card:18px;--radius-pill:999px;--radius-sm:6px;

--shadow-sm:0 1px 2px rgba(15,21,36,.06),0 1px 1px rgba(15,21,36,.05);
--shadow-md:0 14px 28px -10px rgba(15,21,36,.18);
--shadow-lg:0 30px 64px -18px rgba(15,21,36,.30);
--shadow-accent:0 12px 26px -6px rgba(209,67,21,.4);
--gradient-accent:linear-gradient(135deg,#FF7A45,#D1253D);
--gradient-blue:linear-gradient(135deg,#2563EB,#7C3AED);
--gradient-green:linear-gradient(135deg,#059669,#10B981);
--font-display:"Manrope",var(--font-sans);
}
[data-theme="dark"]{
--bg-page:#090D18;--bg-surface:#121829;--bg-sunken:#0D1322;--bg-hover:#182238;
--fg-1:#F1F4FF;--fg-2:#93A0C2;--fg-disabled:#5A6480;
--border-1:#202A45;--border-2:#2D3A5C;
--accent:#FF6A3D;--accent-hover:#FF8259;--accent-press:#E85A2E;--accent-soft:#2B1B14;--accent-ink:#FFB08A;
--accent-2:#60A5FA;--accent-2-soft:#152040;
--success:#4ADE80;--success-soft:#0E2A1C;--error:#FB7185;--error-soft:#381019;
--skeleton:#1B2338;--backdrop:rgba(4,6,14,.68);--focus-inner:#F1F4FF;
--cta-bg:#E8541C;--cta-bg-hover:#FF6A3D;--cta-fg:#FFFFFF;
--status-found-bg:#0E2A1C;--status-missing-bg:#2B1B14;--status-invalid-bg:#381019;
--shadow-sm:0 1px 2px rgba(0,0,0,.45);
--shadow-md:0 18px 36px -10px rgba(0,0,0,.55);
--shadow-lg:0 34px 72px -18px rgba(0,0,0,.65);
--shadow-accent:0 16px 32px -8px rgba(255,106,61,.38);
}
@media (prefers-color-scheme:dark){
[data-theme="system"]{
--bg-page:#090D18;--bg-surface:#121829;--bg-sunken:#0D1322;--bg-hover:#182238;
--fg-1:#F1F4FF;--fg-2:#93A0C2;--fg-disabled:#5A6480;
--border-1:#202A45;--border-2:#2D3A5C;
--accent:#FF6A3D;--accent-hover:#FF8259;--accent-press:#E85A2E;--accent-soft:#2B1B14;--accent-ink:#FFB08A;
--accent-2:#60A5FA;--accent-2-soft:#152040;
--success:#4ADE80;--success-soft:#0E2A1C;--error:#FB7185;--error-soft:#381019;
--skeleton:#1B2338;--backdrop:rgba(4,6,14,.68);--focus-inner:#F1F4FF;
--cta-bg:#E8541C;--cta-bg-hover:#FF6A3D;--cta-fg:#FFFFFF;
--status-found-bg:#0E2A1C;--status-missing-bg:#2B1B14;--status-invalid-bg:#381019;
--shadow-sm:0 1px 2px rgba(0,0,0,.45);
--shadow-md:0 18px 36px -10px rgba(0,0,0,.55);
--shadow-lg:0 34px 72px -18px rgba(0,0,0,.65);
--shadow-accent:0 16px 32px -8px rgba(255,106,61,.38);
}
}

/* ---- Type: Manrope for display, Inter stays for body ---- */
h1,h2,h3,.logo,.f-steps__t,.panel h2{font-family:var(--font-display);letter-spacing:-.02em}
h2{font-weight:800}

/* ---- Shape & elevation on controls ---- */
.f-btn,.f-iconbtn,.f-input,.f-select,.f-stepper,textarea.f-input{border-radius:var(--radius-control)}
.f-cat,.f-pcard,.panel,.f-table-wrap,.f-empty,.f-notice,.f-upload,.upload-cta,.perk,.fact,.f-steps,.f-suggest,.f-sheet,.status .panel{
  border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
}
.f-cat:hover,.perk:hover,.fact:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.f-pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.f-sheet{box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){.f-cat:hover,.perk:hover,.fact:hover,.f-pcard:hover{transform:none}}

/* ---- Buttons: gradient primary CTA with glow ---- */
.f-btn--primary{background:var(--cta-bg);color:var(--cta-fg);border:0;box-shadow:var(--shadow-accent)}
.f-btn--primary:hover{background:var(--cta-bg-hover);box-shadow:0 16px 34px -8px rgba(209,67,21,.5);transform:translateY(-1px)}
.f-btn--primary:active{transform:translateY(0)}
.f-btn--secondary{box-shadow:var(--shadow-sm)}
.f-btn--secondary:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.f-btn--primary:hover,.f-btn--secondary:hover{transform:none}}

/* ---- Header: glass ---- */
.site-header{background:color-mix(in srgb,var(--bg-surface) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-1)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800}
.logo-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--gradient-accent);box-shadow:var(--shadow-accent);flex:none}
.logo-mark svg{width:16px;height:16px;color:#fff}

/* ---- Hero: gradient wash + soft glow blobs ---- */
.hero{position:relative;overflow:hidden;border-bottom:0;background:linear-gradient(180deg,var(--bg-sunken),var(--bg-page))}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
.hero::before{width:520px;height:520px;background:var(--accent);opacity:.28;top:-220px;right:-140px}
.hero::after{width:440px;height:440px;background:var(--accent-2);opacity:.22;bottom:-220px;left:-120px}
.hero>.f-container{position:relative;z-index:1}
.hero h1{color:var(--fg-1)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero h1{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* ---- Search: glow focus ---- */
.f-search--hero .f-search__box{border-radius:20px;box-shadow:var(--shadow-md);background:var(--bg-surface)}
.f-search--compact .f-search__box{box-shadow:var(--shadow-sm)}
.f-search:focus-within .f-search__box{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-md)}

/* ---- Category tiles: gradient icon badges, rotating palette ---- */
.cat-art{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--gradient-accent);box-shadow:var(--shadow-accent)}
.cat-art svg{color:#fff;stroke:#fff}
.cat-grid>a:nth-child(3n+2) .cat-art{background:var(--gradient-blue);box-shadow:0 12px 26px -6px rgba(37,99,235,.4)}
.cat-grid>a:nth-child(3n) .cat-art{background:var(--gradient-green);box-shadow:0 12px 26px -6px rgba(5,150,105,.4)}
.f-cat__arrow{background:var(--bg-sunken)}
.f-cat:hover .f-cat__arrow{background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-accent)}

/* ---- Chips: gradient active state ---- */
.f-chip[aria-pressed="true"],.f-chip.is-active{background:var(--gradient-accent);border-color:transparent;color:#fff;box-shadow:var(--shadow-accent)}

/* ---- Brand logos: lifted badges ---- */
.brand-strip{box-shadow:var(--shadow-sm);border-radius:var(--radius-card);overflow:hidden}
.brand-strip a{transition:background-color .2s ease,transform .2s ease}
.brand-strip a:hover{transform:translateY(-2px)}
.brand-logo{border-radius:8px;box-shadow:var(--shadow-sm)}

/* ---- Status / availability glow ---- */
.f-avail--in .f-avail__dot{box-shadow:0 0 0 3px var(--success-soft)}

/* ---- Mobile sticky bar & toast lift ---- */
.m-bar{box-shadow:0 -16px 32px -16px rgba(15,21,36,.18)}
[data-theme="dark"] .m-bar,[data-theme="system"] .m-bar{box-shadow:0 -16px 32px -16px rgba(0,0,0,.5)}
.toast{box-shadow:var(--shadow-lg)}

/* ---- Perk / fact icon circles get accent wash ---- */
.perk .ic{background:var(--accent-soft);color:var(--accent-ink)}