/* Интерфейс «Kimi»: собранные градиенты, мягкие тени, живая светлая тема. Подключается после ui-modern.css, старые файлы не трогаем. */
/* Игровой характер — через свечения, сетку и градиенты; серьёзность — через строгие поверхности и спокойную типографику. */

/* ===== БАЗА ===== */
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--input-focus); outline-offset: 2px; }
/* светлая тема: едва заметная цветная дымка сверху — меньше сплошного серого, приятнее глазу */
:root:not([data-theme="dark"]) body { background: radial-gradient(900px 460px at 6% -10%, rgba(122, 82, 200, .08), transparent 60%), radial-gradient(1100px 520px at 98% -12%, rgba(18, 156, 181, .09), transparent 62%), var(--bg-main); }
:root:not([data-theme="dark"]) main { background: transparent; }

/* ===== ШАПКА ===== */
header { backdrop-filter: saturate(180%) blur(14px); }
header::before { height: 3px; opacity: .9; }
.logo h2 { background: linear-gradient(90deg, #8fb8ff, #7fd4c9 50%, #d3aef2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
header nav li a { transition: color .18s, background .18s; }
input:checked + .slider { background: var(--accent-grad); }

/* ===== КНОПКИ ===== */
.btn, button { border-radius: 10px; }
button.default, .btn-accent { background: var(--accent-grad); box-shadow: 0 2px 10px var(--ring); }
button.default:hover, .btn-accent:hover { background: var(--accent-grad); filter: brightness(1.06); box-shadow: 0 6px 16px var(--ring); }
.btn-green { background: var(--accent-green) !important; }
.btn-green:hover { filter: brightness(1.07); }
.btn-red { background: var(--accent-red) !important; }
.btn-red:hover { filter: brightness(1.07); }
.btn-blue { background: var(--accent-grad) !important; }
.btn-primary { background: var(--accent-grad); }
.btn-secondary:hover, .btn-white:hover { border-color: var(--accent); color: var(--accent); }

/* ===== ПОЛЯ ВВОДА ===== */
input[type="text"], input[type="password"], input[type="number"], textarea, select { border-radius: 10px; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px var(--ring); }

/* ===== ПАНЕЛИ И КАРТОЧКИ ===== */
/* в светлой теме — тонкая чёткая кайма вместо «невидимой» рамки, карточки собраннее */
.stat-ico, .cat-ico, .feat-ico, .step-ico { border-radius: 12px; }
.step-ico { transition: transform .2s; }
.stat-item:hover .stat-ico, .cat-card:hover .cat-ico, .feat-card:hover .feat-ico, .step-card:hover .step-ico { transform: scale(1.07); }

/* ===== ЦВЕТНЫЕ ТИНТЫ: добавляем оранжевый и розовый ===== */
.tint-orange { background: color-mix(in srgb, var(--c-orange) 13%, transparent); color: var(--c-orange); }
.tint-pink { background: color-mix(in srgb, var(--c-pink) 13%, transparent); color: var(--c-pink); }
:is(.stat-item, .cat-card, .feat-card, .step-card, .pf-link):has(.tint-orange):hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--c-orange) 14%, transparent); }
:is(.stat-item, .cat-card, .feat-card, .step-card, .pf-link):has(.tint-pink):hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--c-pink) 14%, transparent); }
.section-eyebrow.eb-orange { color: var(--c-orange); }
.section-eyebrow.eb-pink { color: var(--c-pink); }
.stat-num.n-orange { color: var(--c-orange); }
.stat-num.n-pink { color: var(--c-pink); }

/* в светлой теме цветные подложки карточек чуть заметнее — больше пестроты без кислотности */
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-blue) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-blue) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-sky) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-sky) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-cyan) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-cyan) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-teal) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-teal) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-green) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-green) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-amber) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-amber) 13%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-orange) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 13%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-rose) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-rose) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-pink) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-pink) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-violet) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-violet) 12%, var(--surface)), var(--surface) 70%); }
:root:not([data-theme="dark"]) :is(.cat-card, .stat-item):has(.tint-indigo) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-indigo) 12%, var(--surface)), var(--surface) 70%); }
/* в тёмной — как было, лишь добираем новые оттенки */
[data-theme="dark"] :is(.cat-card, .stat-item):has(.tint-orange) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 8%, var(--surface)), var(--surface) 65%); }
[data-theme="dark"] :is(.cat-card, .stat-item):has(.tint-pink) { background: linear-gradient(160deg, color-mix(in srgb, var(--c-pink) 8%, var(--surface)), var(--surface) 65%); }

/* ===== HERO ===== */
.hero { border-radius: 20px; background: radial-gradient(90% 130% at 88% 8%, var(--hero-glow1), transparent 55%), radial-gradient(70% 120% at 4% 100%, var(--hero-glow2), transparent 58%), radial-gradient(55% 80% at 45% 115%, var(--hero-glow3), transparent 60%), linear-gradient(135deg, var(--hero-bg1), var(--hero-bg2)); box-shadow: 0 24px 60px rgba(13, 20, 40, .22); }
.hero-orb { background: radial-gradient(circle at 35% 35%, var(--hero-glow1), transparent 60%), radial-gradient(circle at 70% 70%, var(--hero-glow2), transparent 65%); }
.hero-badge { letter-spacing: .02em; box-shadow: 0 0 0 4px rgba(125, 165, 198, .08); }
.hero-btn-primary { background: var(--accent-grad); box-shadow: 0 8px 22px var(--ring); }
.hero-btn-primary:hover { background: var(--accent-grad); filter: brightness(1.08); box-shadow: 0 12px 28px var(--ring); }
.hero-btn-green { background: var(--accent-green) !important; }
.hero-btn-secondary { transition: background .2s, transform .2s; }
.hero-search input { padding: 9px 14px; }
.hero-search-btn { border-radius: 999px; background: var(--accent-grad) !important; padding: 10px 24px; }
.hero-chip { transition: background .18s, border-color .18s, color .18s, transform .18s; }
.hero-deal, .hero-perk { border-radius: 16px; }

/* Светлая тема: hero светлый, текст тёмный. Переменные переопределены только внутри .hero —
   CTA, карточка заказчика и шапка профиля, которые тоже берут --hero-*, остаются прежними */
:root:not([data-theme="dark"]) .hero { --hero-bg1: #f8faff; --hero-bg2: #e9effd; --hero-glow1: rgba(99, 122, 236, .16); --hero-glow2: rgba(148, 92, 210, .12); --hero-glow3: rgba(45, 178, 200, .14); --hero-grid: rgba(61, 91, 214, .06); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(27, 39, 64, .08); }
:root:not([data-theme="dark"]) .hero::before { background: radial-gradient(60% 80% at 8% 100%, rgba(122, 95, 192, .08), transparent 60%); }
:root:not([data-theme="dark"]) .hero-badge { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); box-shadow: none; }
:root:not([data-theme="dark"]) .hero-badge::before { background: var(--c-teal); box-shadow: 0 0 0 4px rgba(14, 150, 138, .15); }
:root:not([data-theme="dark"]) .hero-title { color: var(--text); }
:root:not([data-theme="dark"]) .hero-accent { background: linear-gradient(90deg, var(--c-blue), var(--c-violet)); -webkit-background-clip: text; background-clip: text; }
:root:not([data-theme="dark"]) .hero-sub, :root:not([data-theme="dark"]) .hero-chips-label { color: var(--muted); }
:root:not([data-theme="dark"]) .hero-search input { background: var(--input-bg); border-color: var(--input-border); color: var(--input-color); }
:root:not([data-theme="dark"]) .hero-search input::placeholder { color: var(--placeholder); }
:root:not([data-theme="dark"]) .hero-search input:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px var(--ring); }
:root:not([data-theme="dark"]) .hero-chip { background: var(--surface); border-color: var(--border); color: var(--text); }
:root:not([data-theme="dark"]) .hero-chip:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
:root:not([data-theme="dark"]) .hero-btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text) !important; }
:root:not([data-theme="dark"]) .hero-btn-secondary:hover { background: var(--surface-2); color: var(--accent) !important; }
:root:not([data-theme="dark"]) .hero-deal { background: rgba(255, 255, 255, .88); border-color: var(--border); box-shadow: var(--box-shadow); }
:root:not([data-theme="dark"]) .hd-ico { background: var(--green-soft); color: var(--c-green); }
:root:not([data-theme="dark"]) :is(.hd-title, .hd-step b, .hero-perk b) { color: var(--text); }
:root:not([data-theme="dark"]) :is(.hd-sub, .hd-text, .hd-note, .hero-perk span) { color: var(--muted); }
:root:not([data-theme="dark"]) .hd-step:not(:last-child)::after { background: var(--border); }
:root:not([data-theme="dark"]) .hd-dot { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
:root:not([data-theme="dark"]) .hd-step.is-final .hd-dot { background: var(--c-green); border-color: var(--c-green); color: #fff; }
:root:not([data-theme="dark"]) .hd-note { border-top-color: var(--border); }
:root:not([data-theme="dark"]) .hd-note svg { color: var(--c-amber); }
:root:not([data-theme="dark"]) .hero-perk { background: rgba(255, 255, 255, .7); border-color: var(--border); }

/* ===== СТАТИСТИКА: в светлой теме цифры с градиентом ===== */
:root:not([data-theme="dark"]) .stat-num.n-blue { background: linear-gradient(135deg, var(--c-blue), var(--c-indigo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root:not([data-theme="dark"]) .stat-num.n-green { background: linear-gradient(135deg, var(--c-green), var(--c-teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root:not([data-theme="dark"]) .stat-num.n-amber { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root:not([data-theme="dark"]) .stat-num.n-violet { background: linear-gradient(135deg, var(--c-violet), var(--c-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
:root:not([data-theme="dark"]) .stat-num.n-red { background: linear-gradient(135deg, var(--c-rose), var(--c-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ===== СЕКЦИИ ===== */
:root:not([data-theme="dark"]) main > section.section:nth-of-type(even) { background: linear-gradient(150deg, color-mix(in srgb, var(--c-violet) 5%, var(--surface-2)), var(--surface-2) 45%, color-mix(in srgb, var(--c-cyan) 5%, var(--surface-2))); border: 1px solid var(--border); }
.section-eyebrow::before { width: 22px; height: 3px; background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 30%, transparent)); opacity: 1; }
.section-title { letter-spacing: -.02em; }

/* ===== ТАБЛИЦЫ / ВКЛАДКИ / ПАГИНАЦИЯ ===== */
table { border-radius: 12px; overflow: auto; box-shadow: var(--shadow-soft); }
th { padding: 8px 12px; font-weight: 700; letter-spacing: .03em; }
td { padding: 7px 12px; }
.tabs > ul:after { background: var(--border); height: 2px; border-radius: 2px; }
.tabs > ul li { border-radius: 9px; margin: 0 3px 4px 0; padding: 8px 16px; font-weight: 600; }
.tabs > ul li:hover { background: var(--accent-soft); color: var(--accent); }
.tabs > ul li.active, .tabs ul li.active:hover { background: var(--accent-grad); color: #fff; border-radius: 9px; box-shadow: 0 3px 10px var(--ring); }
.pagination a:hover { color: var(--accent); }
.pagination a.active { color: var(--accent); font-weight: 700; }
.pagination a.active:before { background: var(--accent-soft); }

/* ===== ПРОЕКТЫ ===== */
.project { border-radius: 14px; }
.project-status { letter-spacing: .5px; }
.notification-count { background: var(--accent-red); }

/* ===== ФОРМЫ / ПРОФИЛЬ ===== */
.form-head { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 70%); }
.upload-zone { transition: border-color .2s, background .2s; }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.progress-fill { background: var(--accent-grad); }
.profile-hero, .pf-side-head { background: radial-gradient(100% 150% at 88% 8%, var(--hero-glow1), transparent 55%), radial-gradient(70% 120% at 0% 100%, var(--hero-glow2), transparent 55%), linear-gradient(135deg, var(--hero-bg1), var(--hero-bg2)); }

/* ===== CTA / АУДИТОРИИ ===== */
.cta { border-radius: 20px; background: radial-gradient(100% 150% at 90% 8%, var(--hero-glow1), transparent 55%), radial-gradient(80% 130% at 8% 95%, var(--hero-glow2), transparent 55%), linear-gradient(135deg, var(--hero-bg1), var(--hero-bg2)); }
.audience-card.is-client { background: radial-gradient(120% 160% at 90% 10%, var(--hero-glow1), transparent 55%), radial-gradient(80% 120% at 5% 95%, var(--hero-glow2), transparent 55%), linear-gradient(135deg, var(--hero-bg1), var(--hero-bg2)); }

/* ===== FAQ / МЕЛОЧИ ===== */
:root:not([data-theme="dark"]) .faq-item[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.work-cat, .blog-category, .post-category, .portfolio-category, .portfolio-public-category { background: var(--accent-soft); color: var(--accent); }

/* ===== ПОДВАЛ ===== */
footer { background: linear-gradient(180deg, var(--footer-bg), color-mix(in srgb, var(--footer-bg) 85%, #000)); }
footer::before { height: 3px; opacity: .8; }
.footer-col a { transition: color .18s, padding-left .18s; }
.footer-col a:hover { padding-left: 4px; }
.footer-subscribe button { border-radius: 10px; }