@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/bricolage-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/hanken-grotesk-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/hanken-grotesk-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/hanken-grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--bg: #f4f2ec;
--surface: #ffffff;
--raised: #f8f6f1;
--ink: #191713;
--ink-2: #45413a;
--muted: #68635a;
--line: #e0dcd2;
--line-strong: #c4bfb2;
--primary: #f0590e;
--primary-hover: #ff6f2a;
--primary-soft: #fdeadd;
--primary-ink: #a83a00;
--on-primary: #ffffff;
--side-bg: #191713; --side-ink: #f1eee7; --side-muted: #aaa397; --side-line: #35322c; --side-hover: #2a2722;
--c1: #f0590e; --c1-soft: #fdeadd; --c1-ink: #a83a00;
--c2: #2456d6; --c2-soft: #e6edfc; --c2-ink: #1c47b8;
--c3: #6d3bd1; --c3-soft: #eee7fb; --c3-ink: #5a2bb8;
--c4: #0a8577; --c4-soft: #dcf2ee; --c4-ink: #076a5f;
--c5: #c2256e;
--t0: #9a958a; --t1: #e3a008; --t2: #2456d6; --t3: #0a8577; --t4: #23923f;
--ti0: #545048; --ti1: #7a5300; --ti2: #1c47b8; --ti3: #076a5f; --ti4: #176b2c;
--v-ok: #1a7f37; --v-warn: #f0b400; --v-risk: #e8590c; --v-spam: #b3141f;
--vi-ok: #14652b; --vi-warn: #765300; --vi-risk: #a23a00; --vi-spam: #9d1019;
--von-ok: #ffffff; --von-warn: #191713; --von-risk: #191713; --von-spam: #ffffff;
--good: #14652b; --good-soft: #e0f1e4;
--bad: #9d1019; --bad-soft: #fbe6e7;
--warn: #765300; --warn-soft: #fbf0cf;
--gold: #e3a008; --silver: #a8a396; --bronze: #c0763c;
--grid: #ece8df;
--shadow: none;
--radius: 8px;
--ease: cubic-bezier(.16, 1, .3, 1);
--spring: cubic-bezier(.34, 1.56, .64, 1);
--font: "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
--display: "Bricolage Grotesque", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #100f0d;
--surface: #191816;
--raised: #211f1c;
--ink: #f1eee7;
--ink-2: #cbc6bb;
--muted: #a09a8e;
--line: #302d28;
--line-strong: #4a463f;
--primary: #ff7a33;
--primary-hover: #ff9154;
--primary-soft: #3a2010;
--primary-ink: #ffa26b;
--on-primary: #ffffff;
--side-bg: #0a0908; --side-ink: #f1eee7; --side-muted: #a09a8e; --side-line: #2a2723; --side-hover: #1d1b18;
--c1: #ff7a33; --c1-soft: #3a2010; --c1-ink: #ffa26b;
--c2: #6a98ff; --c2-soft: #17264a; --c2-ink: #93b4ff;
--c3: #a985ff; --c3-soft: #281c4a; --c3-ink: #c3a9ff;
--c4: #2fc4b2; --c4-soft: #0d302c; --c4-ink: #62d9ca;
--c5: #f472b6;
--t0: #7b766b; --t1: #f2c230; --t2: #6a98ff; --t3: #2fc4b2; --t4: #4cc764;
--ti0: #c0baad; --ti1: #f2c230; --ti2: #93b4ff; --ti3: #62d9ca; --ti4: #6edc84;
--v-ok: #4cc764; --v-warn: #f2c230; --v-risk: #ff7b3d; --v-spam: #ff5c66;
--vi-ok: #6edc84; --vi-warn: #f2c230; --vi-risk: #ff9a68; --vi-spam: #ff8990;
--von-ok: #10140f; --von-warn: #191713; --von-risk: #191713; --von-spam: #190a0b;
--good: #6edc84; --good-soft: #12301a;
--bad: #ff8990; --bad-soft: #3b1517;
--warn: #f2c230; --warn-soft: #382c08;
--gold: #f2c230; --silver: #b5afa2; --bronze: #dc955d;
--grid: #2b2823;
color-scheme: dark;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--primary); color: var(--on-primary); }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--primary); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
kbd.key { font: 600 11px/1 var(--font); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 6px; flex: none; }
mark { background: color-mix(in srgb, var(--v-warn) 45%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { width: 0; } }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { stroke-dasharray: 0 999; } }
@keyframes shine { to { background-position: -200% 0; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.loadbar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; overflow: hidden; opacity: 0; transition: opacity .3s .15s; pointer-events: none; }
.loadbar::before { content: ""; position: absolute; inset: 0; width: 30%; background: var(--primary); }
.loadbar.on { opacity: 1; transition-delay: 0s; }
.loadbar.on::before { animation: slide 1.1s ease-in-out infinite; }
.top { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 20px 0 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; width: 224px; height: 100%; padding: 0 16px; flex: none; background: var(--side-bg); color: var(--side-ink); text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.brand img { width: 32px; height: 32px; flex: none; transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand span { color: var(--side-ink); padding-bottom: 2px; }
.brand:focus-visible { outline-color: var(--side-ink); outline-offset: -4px; }
.search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 640px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 3px 3px 12px; transition: border-color .15s, background .15s; }
.search:focus-within { border-color: var(--ink); background: var(--surface); }
.search > svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 7px 4px; font-size: 14.5px; }
.search kbd { transition: opacity .15s; }
.search:focus-within kbd { opacity: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; color: var(--ink-2); transition: background .15s, color .15s, transform .12s; }
.icon-btn:hover { background: var(--raised); color: var(--ink); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; transition: transform .4s var(--spring); }
.icon-btn:hover svg { transform: rotate(24deg); }
:root[data-theme="dark"] .moon, :root:not([data-theme="dark"]) .sun { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; text-decoration: none; padding: 7px 12px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.35; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
.btn:hover { background: var(--raised); border-color: var(--ink); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; padding: 8px 16px; font-size: 13.5px; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn.wide { width: 100%; padding: 10px 14px; }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ghost-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: inherit; opacity: .7; cursor: pointer; transition: opacity .15s, transform .12s; flex: none; }
.ghost-btn:hover { opacity: 1; }
.ghost-btn:active { transform: scale(.88); }
.ghost-btn svg { width: 16px; height: 16px; }
.ghost-btn.done { opacity: 1; color: #4cc764; }
.text-btn { border: 0; background: none; padding: 2px 4px; border-radius: 4px; color: var(--primary-ink); font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.text-btn:hover { text-decoration-color: currentColor; }
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; }
.side { position: sticky; top: 56px; height: calc(100vh - 56px); padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 16px; background: var(--side-bg); color: var(--side-ink); overflow-y: auto; scrollbar-color: var(--side-line) transparent; }
.nav { display: grid; gap: 1px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); padding: 14px 10px 6px; }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--side-ink); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.nav a svg { width: 17px; height: 17px; flex: none; color: var(--side-muted); transition: color .15s; }
.nav a:hover { background: var(--side-hover); }
.nav a:hover svg { color: var(--side-ink); }
.nav a:focus-visible { outline-color: var(--side-ink); }
.nav a[aria-current="page"], .nav a.active { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.nav a[aria-current="page"] svg, .nav a.active svg { color: var(--on-primary); }
.badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--side-hover); color: var(--side-ink); border-radius: 4px; padding: 1px 6px; }
.nav a[aria-current="page"] .badge, .nav a.active .badge { background: var(--on-primary); color: var(--primary); }
.side-card { margin-top: auto; border-top: 1px solid var(--side-line); padding-top: 4px; }
.sources { padding: 0 10px; display: grid; gap: 7px; font-size: 12px; }
.sources div { display: flex; justify-content: space-between; gap: 8px; }
.sources dt { color: var(--side-muted); }
.sources dd { color: var(--side-ink); font-weight: 600; text-align: right; }
.sources dd.ok::before, .sources dd.wait::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #4cc764; }
.sources dd.wait::before { background: #f2c230; animation: pulse 1.2s ease-in-out infinite; }
.side-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--side-muted); margin: 12px 10px 0; }
.side-hint kbd.key { background: var(--side-hover); border-color: var(--side-line); color: var(--side-ink); }
.main { padding: 20px 24px 56px; min-width: 0; max-width: 1480px; display: grid; }
.view { display: grid; gap: 14px; }
.notice { display: flex; gap: 10px; align-items: center; background: var(--warn-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--v-warn) 50%, transparent); border-radius: 6px; padding: 9px 12px; margin-bottom: 14px; font-size: 13px; }
.notice svg { width: 17px; height: 17px; color: var(--warn); flex: none; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title { margin-right: auto; min-width: 0; }
h1 { font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-title p { color: var(--muted); font-size: 13px; margin-top: 3px; }
h2 { font: 700 15px/1.3 var(--display); letter-spacing: -0.005em; }
.favicon { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #fff; color: #191713; font: 700 22px/1 var(--display); text-transform: uppercase; overflow: hidden; border: 1px solid var(--line); }
.favicon img { width: 30px; height: 30px; animation: pop .3s var(--spring); }
.favicon.sm { width: 40px; height: 40px; font-size: 17px; }
.favicon.sm img { width: 24px; height: 24px; }
.tag { font: 600 11.5px/1.4 var(--font); letter-spacing: 0; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.tag:empty { display: none; }
.tag.on { background: var(--good-soft); color: var(--good); border-color: transparent; }
.hint { color: var(--muted); font-size: 12px; }
.link { color: var(--primary-ink); font-weight: 600; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:hover svg { transform: translateX(3px); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.pad { padding: 12px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -16px -18px 14px; padding: 9px 18px; min-height: 46px; border-bottom: 1px solid var(--line); }
.card-head.wrap { flex-wrap: wrap; }
.card-head.pad, .card.flush > .card-head { margin: 0; }
.card-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: 12.5px; }
.card-foot:has(> span:empty):not(:has(> .btn:not([hidden]))) { display: none; }
.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-main { grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); }
.g-wide { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); }
.g-main > .card, .g-wide > .card { display: flex; flex-direction: column; }
.ico { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.ico svg { width: 17px; height: 17px; }
.ico.c1 { background: var(--c1-soft); color: var(--c1-ink); } .ico.c2 { background: var(--c2-soft); color: var(--c2-ink); } .ico.c3 { background: var(--c3-soft); color: var(--c3-ink); } .ico.c4 { background: var(--c4-soft); color: var(--c4-ink); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
@media (max-width: 1100px) {
.g-main, .g-wide { grid-template-columns: minmax(0, 1fr); }
}
.nav-burger, .nav-scrim { display: none; }
@media (max-width: 920px) {
.top { padding-right: 10px; gap: 8px; }
.nav-burger { display: grid; flex: none; margin-left: 10px; }
.brand { width: auto; padding: 0 6px; background: transparent; }
.brand-word { display: none; }
.brand span, .search kbd { display: none; }
.shell { grid-template-columns: minmax(0, 1fr); }
.side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(290px, 84vw); height: auto; padding: 16px 12px; transform: translateX(-102%); transition: transform .26s var(--ease); box-shadow: none; }
body.nav-open .side { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
body.nav-open { overflow: hidden; }
.nav-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(18, 14, 8, .5); animation: fade .2s ease both; }
.nav-scrim[hidden] { display: none; }
.main { padding: 14px 12px 40px; }
}
@media (max-width: 700px) {
.g-2 { grid-template-columns: minmax(0, 1fr); }
h1 { font-size: 22px; }
}
@media (max-width: 640px) {
.top { flex-wrap: wrap; height: auto; position: relative; padding: 0 10px 10px 0; row-gap: 6px; }
.brand { height: 52px; }
.top-right { order: 2; margin-left: auto; height: 52px; }
.top-right .icon-btn, .top-right .um-btn { align-self: center; }
.search { order: 3; flex: 1 0 calc(100% - 10px); max-width: none; margin: 0 0 0 10px; }
.um-btn .um-plan { display: none; }
}
@media (max-width: 520px) {
.search .btn { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
.chart .line, .spark .line, .chart .fit { stroke-dashoffset: 0; }
}
.brand img.brand-word { width: auto; height: 46px; }
.brand:hover img.brand-word { transform: none; }
.brand img.brand-badge { display: none; }
@media (max-width: 900px) {
.brand img.brand-word { display: none; }
.brand img.brand-badge { display: block; }
}
.kosto-digging { position: relative; }
.kosto-digging .kosto-img { transform-origin: 55% 88%; animation: kosto-dig .62s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.kosto-digging::before, .kosto-digging::after {
content: ""; position: absolute; left: 6%; top: 46%; width: calc(var(--ks, 96px) * .07); height: calc(var(--ks, 96px) * .07);
border-radius: 45% 55% 50% 50%; background: var(--primary, #f0590e); opacity: 0; pointer-events: none;
animation: kosto-clump 1.24s cubic-bezier(.2, .7, .4, 1) infinite;
}
.kosto-digging::after { left: 14%; top: 52%; width: calc(var(--ks, 96px) * .05); height: calc(var(--ks, 96px) * .05); animation-delay: .62s; }
@keyframes kosto-dig {
from { transform: rotate(-3.5deg) translateY(0); }
to { transform: rotate(3deg) translateY(calc(var(--ks, 96px) * .035)); }
}
@keyframes kosto-clump {
0% { opacity: 0; transform: translate(0, 0) scale(.6); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(calc(var(--ks, 96px) * -.28), calc(var(--ks, 96px) * -.34)) scale(1.1) rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) {
.kosto-digging .kosto-img, .kosto-digging::before, .kosto-digging::after { animation: none; }
}
.notice.notice-ok { background: color-mix(in srgb, var(--v-ok) 14%, var(--surface)); border-color: color-mix(in srgb, var(--v-ok) 50%, transparent); }
.notice.notice-ok svg { color: var(--v-ok); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tscroll { position: relative; max-width: 100%; }
.tscroll-in { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tscroll::before, .tscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tscroll::before { left: 0; background: linear-gradient(to right, var(--surface, #fff), transparent); }
.tscroll::after { right: 0; background: linear-gradient(to left, var(--surface, #fff), transparent); }
.tscroll.can-l::before, .tscroll.can-r::after { opacity: 1; }
.kpis, .stat-strip { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kpis { --n: 5; }
.kpi, .stat { display: grid; gap: 5px; align-content: start; min-width: 0; padding: 14px 16px 13px; border-left: 1px solid var(--line); text-decoration: none; color: inherit; }
.kpi:first-child, .stat:first-child { border-left: 0; }
a.kpi { transition: background .15s; }
a.kpi:hover { background: var(--raised); }
.kpi-top, .stat small { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-top i, .stat small i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw, var(--ink)); flex: none; }
.kpi-top svg { width: 14px; height: 14px; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
a.kpi:hover .kpi-top svg { transform: translateX(3px); color: var(--primary-ink); }
.kpi-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.kpi-val b, .stat b { font: 700 30px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.stat b { display: block; font-size: 24px; overflow: hidden; text-overflow: ellipsis; }
.stat b small { display: inline; font: 500 13px var(--font); color: var(--muted); letter-spacing: 0; text-transform: none; }
.kpi-of { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: -4px; }
.kpi > small { color: var(--muted); font-size: 12px; min-height: 17px; }
.stat-strip:empty { display: none; }
.pill { font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 7px; background: color-mix(in srgb, var(--tc, var(--muted)) 18%, transparent); color: var(--ti, var(--ink-2)); white-space: nowrap; }
.pill:empty { display: none; }
.delta { font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 6px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.delta.up { background: var(--good-soft); color: var(--good); }
.delta.down { background: var(--bad-soft); color: var(--bad); }
.delta svg { width: 12px; height: 12px; stroke-width: 2.2; }
.sk { display: inline-block; width: 96px; height: 28px; border-radius: 4px; vertical-align: middle; }
.sk, .sk-line, .skel td span, .chart-skel, .pod.sk-pod i { background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.2s linear infinite; }
.sk-line { display: block; height: 10px; border-radius: 3px; }
.stack { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; background: var(--grid); }
.stack i { display: block; min-width: 3px; animation: grow .7s var(--ease) both; }
.stack.wide { flex: 1; min-width: 120px; max-width: 300px; }
.kpi .stack, .kpi .rail, .kpi .scale { margin: 5px 0 1px; }
.scale { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.scale i { height: 8px; border-radius: 2px; }
.scale .t0 { background: var(--t0); } .scale .t1 { background: var(--t1); } .scale .t2 { background: var(--t2); } .scale .t3 { background: var(--t3); } .scale .t4 { background: var(--t4); }
.scale span, .rail span, .meter span { position: absolute; top: -4px; bottom: -4px; left: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--surface); transition: left .8s var(--ease); }
.rail { position: relative; height: 8px; border-radius: 2px; background: var(--grid); }
.rail i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--c3); transition: width .8s var(--ease); }
.spark { height: 28px; }
.spark svg { width: 100%; height: 28px; display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--c4); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s cubic-bezier(.65, 0, .35, 1) forwards; }
.vchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 7px; white-space: nowrap; background: color-mix(in srgb, var(--vc) 18%, var(--surface)); color: var(--vi); }
.vchip::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--vc); }
.vchip.plain::before { display: none; }
.v-ok { --vc: var(--v-ok); --vi: var(--vi-ok); --von: var(--von-ok); }
.v-warn { --vc: var(--v-warn); --vi: var(--vi-warn); --von: var(--von-warn); }
.v-risk { --vc: var(--v-risk); --vi: var(--vi-risk); --von: var(--von-risk); }
.v-spam { --vc: var(--v-spam); --vi: var(--vi-spam); --von: var(--von-spam); }
.v-none { --vc: var(--t0); --vi: var(--ti0); --von: var(--ink); }
.v-info { --vc: var(--c2); --vi: var(--c2-ink); --von: var(--ink); }
.chart { position: relative; min-height: 190px; }
.chart svg { display: block; width: 100%; stroke: none; overflow: visible; }
.chart.fill { flex: 1; min-height: 270px; }
.chart.fill > svg, .chart.fill > .chart-skel, .chart.fill > .chart-msg { position: absolute; inset: 0; height: 100%; }
.chart text { fill: var(--muted); font-size: 12px; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .gridline.base { stroke: var(--line-strong); }
.chart .line { fill: none; stroke: var(--c4); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; }
.chart .area-fill { fill: var(--c4); opacity: .1; animation: fade .8s .4s both; }
.chart .dot { fill: var(--surface); stroke: var(--c4); stroke-width: 2.4; }
.chart .cross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
.chart .end-dot { fill: var(--c4); stroke: var(--surface); stroke-width: 2.5; animation: pop .35s 1s var(--spring) both; transform-box: fill-box; transform-origin: center; }
.chart .end-label { fill: var(--ink); font-size: 12px; font-weight: 700; animation: fade .3s 1.1s both; }
.chart .best-dot { fill: var(--surface); stroke: var(--t4); stroke-width: 2.4; animation: pop .35s 1.1s var(--spring) both; transform-box: fill-box; transform-origin: center; }
.chart .best-label { fill: var(--good); font-size: 11.5px; font-weight: 700; animation: fade .3s 1.2s both; }
.chart .axis-title { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.chart .pt { fill: var(--c2); stroke: var(--surface); stroke-width: 1.5; }
.chart .pt.api { fill: var(--c3); }
.chart .fit { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s .2s var(--ease) forwards; }
.chart .diag { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 4; }
.chart .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .radar-label { fill: var(--ink-2); font-size: 12px; font-weight: 700; }
.chart .radar-shape { transform-origin: 160px 146px; animation: pop .6s var(--ease) both; }
.chart .radar-dot, .chart .pt { transform-box: fill-box; transform-origin: center; animation: pop .35s .4s var(--spring) both; transition: r .15s; }
.chart .radar-dot:hover, .chart .pt:hover { r: 7; }
.chart .seg { fill: none; stroke-width: 26; cursor: default; transition: opacity .2s; animation: sweep .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.chart .seg.dim { opacity: .25; }
.chart .donut-num { fill: var(--ink); font: 700 28px var(--display); letter-spacing: -0.02em; }
.chart .donut-sub { fill: var(--muted); font-size: 12px; }
.chart .bar-total { fill: var(--line-strong); }
.chart .bar-flag { fill: var(--v-spam); }
.chart .bar-total, .chart .bar-flag { transform-box: fill-box; transform-origin: bottom; animation: growY .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.chart .bar-hit { fill: transparent; }
.chart .bar-hit:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.chart .bar-pct { fill: var(--vi-spam); font-size: 11px; font-weight: 700; }
.chart-msg { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 190px; color: var(--muted); text-align: center; padding: 0 16px; font-size: 13px; }
.chart-msg svg { width: 22px; height: 22px; }
.chart-skel { border-radius: 4px; opacity: .7; }
.chart-skel.round { width: 190px; border-radius: 50%; mask-image: radial-gradient(circle, transparent 52%, #000 53%); }
.no-anim *, .no-anim { animation: none !important; }
.no-anim .line, .no-anim .fit { stroke-dashoffset: 0; }
.radar-wrap { max-width: 420px; margin: 0 auto; }
.donut-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; }
.chart.donut { min-height: 190px; }
.tip { position: fixed; z-index: 50; left: 0; top: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 6px)); transition: opacity .12s, transform .15s var(--ease), left .08s linear, top .08s linear; }
.tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 11px)); }
.tip.below { transform: translate(-50%, 8px); }
.tip.below.on { transform: translate(-50%, 13px); }
.tip b { font-weight: 700; }
.tip small { display: block; font-size: 11px; opacity: .75; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: #4cc764; stroke-width: 2.4; }
.legend-rows { display: grid; }
.legend-rows li { display: grid; grid-template-columns: 8px minmax(0, 1.3fr) minmax(40px, 1fr) auto 4ch; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); transition: background .15s; }
.legend-rows li:last-child { border-bottom: 0; }
.legend-rows li:hover { background: var(--raised); }
.legend-rows i, .legend-inline i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); flex: none; }
.legend-rows span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-rows u { display: block; height: 6px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.legend-rows u::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--sw); animation: grow .8s var(--ease) both; }
.legend-rows b { font-weight: 700; text-align: right; }
.legend-rows small { color: var(--muted); text-align: right; }
.legend-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 10px; }
.legend-inline li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.legend-inline i.dot { border-radius: 50%; }
.legend-inline i.ln { width: 16px; height: 3px; }
.legend-inline i.ln.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); height: 2px; }
.bars { display: grid; }
.bars li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line); transition: background .15s; }
.bars li:last-child { border-bottom: 0; }
.bars li:hover { background: var(--raised); }
.bars span { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars div { height: 10px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.bars div i { display: block; height: 100%; background: var(--sw, var(--c2)); width: var(--w, 0%); animation: grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.bars b { font-weight: 700; text-align: right; }
.bars b small { color: var(--muted); font-weight: 400; margin-left: 6px; display: inline-block; min-width: 3.5ch; }
.bars li.hint { display: block; }
.table-wrap { overflow: auto; }
.table-wrap.tall { max-height: calc(100vh - 300px); min-height: 280px; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { padding: 8px 18px; text-align: left; white-space: nowrap; border-top: 1px solid var(--line); }
thead th { position: sticky; top: 0; z-index: 2; background: var(--raised); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); border-top: 0; border-bottom: 1px solid var(--line-strong); }
tbody tr:first-child td { border-top: 0; }
th.num, td.num { text-align: right; }
th.idx, td.idx { width: 1%; padding-right: 0; color: var(--muted); text-align: right; font-size: 12px; }
th.grow, td.grow { width: 38%; }
th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; }
th button:hover { color: var(--ink); }
th button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
th button::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .25s var(--ease); }
th button:hover::after { opacity: .4; }
th[aria-sort] button { color: var(--primary-ink); }
th[aria-sort] button::after { opacity: 1; }
th[aria-sort="ascending"] button::after { transform: translateY(-2px) rotate(180deg); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--raised); }
table.fresh tbody tr { animation: rise .35s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
table.fresh .scorecell i::after { animation: grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
.dom { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; color: var(--ink); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; border-radius: 4px; }
.dom > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dom:hover, tr:hover .dom { color: var(--primary-ink); }
.dom:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.av { position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--avb); color: var(--avc); flex: none; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12%; background: #fff; border-radius: inherit; }
td .sub { color: var(--muted); font-weight: 600; margin-left: 8px; font-size: 11.5px; background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
td .dom + .vchip { margin-left: 8px; }
.scorecell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.scorecell i { display: block; width: 88px; height: 6px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.scorecell i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--tc); }
.scorecell b { font-weight: 700; min-width: 34px; text-align: center; border-radius: 4px; padding: 1px 5px; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--ti); }
td.msg { color: var(--muted); white-space: normal; padding: 32px 18px; text-align: center; }
td .del { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
td .del:hover { color: var(--bad); background: var(--bad-soft); }
.skel td span { display: block; height: 10px; border-radius: 3px; }
.skel td:first-child span { height: 22px; }
.skel tr:hover { background: none; }
table.matrix th:not(:first-child), table.matrix td:not(:first-child) { text-align: right; }
table.matrix thead th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
table.matrix thead th i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--sw); margin-right: 7px; }
table.matrix td:first-child { color: var(--ink-2); font-weight: 500; }
table.matrix td.best b { display: inline-flex; align-items: center; gap: 5px; background: var(--good-soft); color: var(--good); border-radius: 4px; padding: 1px 7px; font-weight: 700; }
table.matrix td.best svg { width: 12px; height: 12px; stroke-width: 2.6; }
table.matrix tr.group td { background: var(--raised); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); padding-top: 6px; padding-bottom: 6px; }
td.url { white-space: normal; min-width: 280px; max-width: 560px; }
.url a, .ex a { color: var(--c2-ink); text-decoration: none; overflow-wrap: anywhere; font-size: 12.5px; }
.url a:hover, .ex a:hover { text-decoration: underline; text-underline-offset: 3px; }
.url b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.toolbar .count { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.input-ico { position: relative; }
.input-ico svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-ico input { width: 220px; }
.toolbar input, .inline-form input, .cmp-inputs input, textarea, select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 10px; outline: 0; transition: border-color .15s; }
.toolbar .input-ico input { padding-left: 32px; }
.toolbar input:focus, .inline-form input:focus, .cmp-inputs input:focus, textarea:focus, select:focus { border-color: var(--ink); }
.toolbar input:focus-visible, .inline-form input:focus-visible, .cmp-inputs input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.select { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.seg { position: relative; display: inline-flex; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px; }
.seg::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 4px; background: var(--ink); opacity: 0; transition: transform .25s var(--ease), width .25s var(--ease); }
.seg.ready::before { opacity: 1; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 4px 11px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; transition: color .15s, transform .12s; }
.seg button:hover { color: var(--ink); }
.seg button:active { transform: scale(.95); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--surface); }
.seg:not(.ready) button[aria-pressed="true"], .seg:not(.ready) button[aria-selected="true"] { background: var(--ink); }
.seg button:disabled { opacity: .45; cursor: default; }
.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.field-label { font-weight: 700; margin-right: auto; }
textarea { width: 100%; resize: vertical; line-height: 1.55; display: block; }
.card > .hint { margin: 8px 0 12px; }
.form-error { color: var(--bad); font-size: 13px; margin-top: 8px; }
.view > .form-error { margin: 0; background: var(--bad-soft); border-radius: 6px; padding: 8px 12px; }
.hbar { height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.hbar i { display: block; height: 100%; width: var(--w); background: var(--sw); animation: grow .8s var(--ease) both; }
.pbar { height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s linear; }
.blank { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 48px 24px; }
.blank > svg { width: 28px; height: 28px; color: var(--muted); margin-bottom: 6px; }
.blank b { font: 700 16px var(--display); }
.blank p { color: var(--muted); max-width: 52ch; }
.blank .chips { justify-content: center; margin-top: 10px; }
.blank .btn { margin-top: 10px; }
.blank.inner { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 36px 24px; }
.kosto { display: flex; align-items: center; gap: 14px; margin: 0; max-width: 100%; }
.kosto img { width: var(--ks, 96px); height: var(--ks, 96px); object-fit: contain; flex: none; }
.kosto figcaption { color: var(--ink-2); font: 600 14px/1.4 var(--display); max-width: 34ch; text-align: left; }
.kosto.on-color { margin-top: 6px; }
.kosto.on-color img { background: color-mix(in srgb, #fff 90%, transparent); border-radius: 50%; padding: 4px; --ks: 64px; }
.kosto.on-color figcaption { color: inherit; font-size: 13px; opacity: .95; }
.blank-art:empty { display: none; }
.blank-art { display: grid; justify-items: center; margin-bottom: 4px; }
.blank-art .kosto { flex-direction: column; text-align: center; gap: 6px; }
.blank-art .kosto figcaption { text-align: center; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.progress .kosto img { animation: bob 2.2s ease-in-out infinite; }
@media (max-width: 1100px) {
.stat-strip { --n: 2; }
.stat-strip .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.stat-strip .stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 920px) {
.toolbar .count { display: none; }
.table-wrap.tall { max-height: 72vh; }
th, td { padding: 8px 12px; }
th.grow, td.grow { position: sticky; left: 0; z-index: 1; background: var(--surface); width: auto; box-shadow: 1px 0 0 var(--line); }
thead th.grow { background: var(--raised); z-index: 3; }
tbody tr:hover td.grow { background: var(--raised); }
.scorecell i { width: 48px; }
}
@media (max-width: 700px) {
.hide-sm { display: none; }
.input-ico, .input-ico input { width: 100%; }
.toolbar .stack.wide { order: 5; flex-basis: 100%; max-width: none; }
td .dom { max-width: 44vw; }
td.url { min-width: 220px; }
.kpi-val b { font-size: 25px; }
}
@media (max-width: 520px) {
.stat-strip { --n: 1; }
.stat-strip .stat { border-left: 0; border-top: 1px solid var(--line); }
.stat-strip .stat:first-child { border-top: 0; }
}
tr.more td { text-align: center; padding: 14px; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: 8px; }
.search input:focus-visible, .search input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.home { display: grid; gap: 14px; align-content: start; }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hero-main { padding: 40px 36px 36px; }
.hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; display: block; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--primary-ink); }
.hero p { color: var(--ink-2); font-size: 15px; max-width: 50ch; margin: 14px 0 20px; }
.hero-search { max-width: 520px; margin-bottom: 12px; background: var(--surface); padding: 4px 4px 4px 14px; border-color: var(--ink); }
.hero-search input { padding: 9px 4px; font-size: 16px; }
.hero-search .btn { padding: 10px 20px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips > span { color: var(--muted); font-size: 13px; margin-right: 2px; }
.chip { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.chip:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip:active { transform: scale(.96); }
.formula { background: var(--side-bg); color: var(--side-ink); padding: 28px 28px 24px; display: grid; gap: 14px; align-content: center; }
:root[data-theme="dark"] .formula { border-left: 1px solid var(--line); }
.formula h2 { font: 700 11px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); }
.formula-bar { display: flex; height: 44px; border-radius: 4px; overflow: hidden; gap: 2px; }
.formula-bar i { display: grid; place-items: center; font: 700 14px var(--display); font-style: normal; color: #191713; background: var(--sw); animation: grow .9s var(--ease) both; white-space: nowrap; overflow: hidden; }
.formula li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--side-line); font-size: 13px; }
.formula li i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); margin-top: 6px; }
.formula li b { font-weight: 700; }
.formula li span { grid-column: 2; color: var(--side-muted); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts div { padding: 14px 18px; display: grid; gap: 1px; border-left: 1px solid var(--line); }
.facts div:first-child { border-left: 0; }
.facts b { font: 700 24px var(--display); letter-spacing: -0.02em; }
.facts span { color: var(--muted); font-size: 13px; }
.home-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: start; }
.rows a, .rows button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 18px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer; transition: background .12s; }
.rows > :first-child { border-top: 0; }
.rows a:hover, .rows button:hover { background: var(--raised); }
.rows a > svg:first-child { width: 18px; height: 18px; color: var(--primary-ink); }
.rows b { display: block; font-weight: 700; }
.rows small { color: var(--muted); font-size: 12.5px; }
.rows button > span:nth-child(2) { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .go { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.rows a:hover .go, .rows button:hover .go { transform: translateX(3px); color: var(--ink); }
.rows .none { padding: 18px; color: var(--muted); font-size: 13px; }
.hero-main { position: relative; }
.hero-kosto { position: absolute; top: 24px; right: 24px; max-width: 230px; }
.hero-kosto figcaption { font-size: 13px; max-width: 18ch; }
@media (min-width: 921px) and (max-width: 1360px) { .hero-kosto { display: none; } }
@media (max-width: 1560px) { .hero-kosto figcaption { display: none; } }
@media (prefers-reduced-motion: no-preference) { .hero-kosto .kosto-img { animation: hk-float 4.2s ease-in-out infinite; } @keyframes hk-float { 50% { transform: translateY(-6px) rotate(-2deg); } } }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.hm-sample { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--side-line); }
.hm-ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tc, #ff8a3d) calc(var(--p) * 1%), rgba(255, 255, 255, .13) 0); transition: --p 1.1s var(--ease); position: relative; box-shadow: 0 0 24px -8px var(--tc, #ff8a3d); }
.hm-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--side-bg); }
.hm-ring b { position: relative; font: 800 26px var(--display); letter-spacing: -0.02em; color: #fff; }
.hm-sd { display: grid; gap: 5px; min-width: 0; }
.hm-tag { font: 700 10px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); }
.hm-sd strong { font: 700 15px var(--display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-bars { display: grid; gap: 5px; margin-top: 2px; }
.hm-bars i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.hm-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--sw); border-radius: 3px; transition: width 1s var(--ease); }
@media (prefers-reduced-motion: reduce) { .hm-ring, .hm-bars i::after { transition: none; } }
.facts div { transition: background-color .2s; }
.facts div:hover { background: var(--raised); }
@media (max-width: 1100px) {
.home-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
.hero { grid-template-columns: minmax(0, 1fr); }
.hero-main { padding: 26px 20px; }
.hero h1 { font-size: 32px; }
.hero-kosto { display: block; position: static; max-width: 96px; margin: 0 0 8px; }
.hero-kosto figcaption { display: none; }
}
@media (max-width: 700px) {
.facts { grid-template-columns: minmax(0, 1fr); }
.facts div { border-left: 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.hero h1 { font-size: 28px; }
}
#recentCards button:has(.rc-score) { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.rc-score { font: 700 12px/1 var(--display); min-width: 30px; text-align: center; padding: 4px 7px; border-radius: 4px; background: color-mix(in srgb, var(--tc, var(--muted)) 18%, transparent); color: var(--ti, var(--ink-2)); }
.hero h1 em { background: linear-gradient(var(--primary-soft), var(--primary-soft)) 0 88% / 100% 30% no-repeat; padding: 0 2px; animation: hm-mark .8s var(--ease) .25s both; }
@keyframes hm-mark { from { background-size: 0 30%; } }
.formula li { animation: rise .5s var(--ease) both; }
.formula li:nth-child(2) { animation-delay: 70ms; }
.formula li:nth-child(3) { animation-delay: 140ms; }
.formula li:nth-child(4) { animation-delay: 210ms; }
.formula li i { transition: transform .25s var(--spring); }
.formula li:hover i { transform: scale(1.5) rotate(45deg); }
.hm-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; font: 700 10.5px/1.35 var(--font); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
.hm-badge svg { width: 11px; height: 11px; stroke-width: 2; }
.hm-badge.plan-starter { background: var(--c2-soft); color: var(--c2-ink); border-color: transparent; }
.hm-badge.plan-pro { background: var(--c3-soft); color: var(--c3-ink); border-color: transparent; }
.hm-badge.plan-agency { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.hm-plan { display: grid; align-content: start; position: relative; }
.hm-plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c3), var(--c4)); transform-origin: left; animation: hm-bar .9s var(--ease) both; }
@keyframes hm-bar { from { transform: scaleX(0); } }
.hm-plan-top { padding: 20px 20px 4px; animation: rise .45s var(--ease) both; }
.hm-kicker { display: flex; align-items: center; gap: 8px; font: 700 11px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.hm-plan h2 { font: 800 21px/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.hm-lead { color: var(--muted); font-size: 13px; margin-top: 8px; max-width: 60ch; text-wrap: pretty; }
.hm-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 20px 4px; }
.hm-meters li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); transition: border-color .15s, transform .2s var(--ease); }
.hm-meters li:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.hm-meters li > span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-meters li > b { font: 800 17px/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hm-meters li > b em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.hm-meters li > small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.hm-meters li > u { grid-column: 1 / -1; display: block; height: 5px; margin-top: 7px; border-radius: 3px; background: var(--line); overflow: hidden; text-decoration: none; }
.hm-meters li > u i { display: block; height: 100%; width: var(--w, 0%); min-width: 3px; border-radius: 3px; background: var(--primary); animation: grow .9s var(--ease) .2s both; }
.hm-note { margin: 12px 20px 0; padding: 9px 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 600; }
.hm-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px 0; }
.hm-locked > span { width: 100%; font: 700 11px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.hm-lchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 5px 4px 10px; border: 1px dashed var(--line-strong); border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: border-color .15s, background .15s, color .15s, transform .12s; }
.hm-lchip:hover { border-style: solid; border-color: var(--ink); color: var(--ink); background: var(--raised); }
.hm-lchip:active { transform: scale(.97); }
.hm-plan-act { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 20px; }
.hm-steps { display: grid; gap: 10px; padding: 14px 20px 22px; }
.hm-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
.hm-steps li > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 14px var(--display); font-style: normal; background: var(--c1-soft); color: var(--c1-ink); }
.hm-steps li:nth-child(2) > i { background: var(--c3-soft); color: var(--c3-ink); }
.hm-steps li:nth-child(3) > i { background: var(--c4-soft); color: var(--c4-ink); }
.hm-steps b { display: block; font-weight: 700; }
.hm-steps span { color: var(--muted); font-size: 13px; }
.hm-skel { display: grid; gap: 12px; padding: 22px 20px; }
.hm-skel i { display: block; height: 14px; border-radius: 4px; background: var(--raised); animation: pulse 1.4s ease-in-out infinite; }
.hm-skel i:first-child { width: 30%; }
.hm-skel i:nth-child(2) { height: 24px; width: 85%; }
.hm-skel i:nth-child(3), .hm-skel i:nth-child(4) { height: 52px; }
.hm-flows-head { margin: 10px 2px -2px; }
.hm-flows-head h2 { font: 800 20px var(--display); letter-spacing: -0.02em; }
.hm-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hm-flow { --fc: var(--c1); --fs: var(--c1-soft); --fi: var(--c1-ink); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); transition: border-color .2s; }
.hm-flow[data-group="wf_links"] { --fc: var(--c3); --fs: var(--c3-soft); --fi: var(--c3-ink); }
.hm-flow[data-group="wf_monitor"] { --fc: var(--c4); --fs: var(--c4-soft); --fi: var(--c4-ink); }
.hm-flow:hover { border-color: color-mix(in srgb, var(--fc) 55%, var(--line)); }
.hm-flow::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fc); transform-origin: left; animation: hm-bar .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.hm-flow > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 18px 18px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--fs) 70%, transparent), transparent); }
.hm-step { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--fs); color: var(--fi); font: 800 18px var(--display); border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent); transition: transform .3s var(--spring); }
.hm-flow:hover .hm-step { transform: rotate(-6deg) scale(1.08); }
.hm-flow h3 { font: 800 17px/1.2 var(--display); letter-spacing: -0.01em; }
.hm-flow > header p { color: var(--muted); font-size: 12.5px; margin-top: 2px; text-wrap: pretty; }
.hm-flow > header em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--fi); background: var(--fs); border-radius: 4px; padding: 2px 7px; white-space: nowrap; align-self: start; }
.hm-tools { display: grid; }
.hm-tool { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px 10px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .12s; }
.hm-tool:hover { background: var(--raised); }
.hm-tool:focus-visible { outline-offset: -2px; }
.hm-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--fs); color: var(--fi); transition: transform .25s var(--spring), background .15s, color .15s; }
.hm-ico svg { width: 18px; height: 18px; }
.hm-tool:hover .hm-ico { transform: scale(1.1) rotate(-4deg); background: var(--fc); color: var(--on-primary); }
.hm-tx { min-width: 0; }
.hm-tx b { display: block; font-weight: 700; }
.hm-tx small { display: block; color: var(--muted); font-size: 12.5px; text-wrap: pretty; }
.hm-tool .go { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease), color .15s; }
.hm-tool:hover .go { transform: translateX(3px); color: var(--ink); }
.hm-tool.locked .hm-ico { background: var(--raised); color: var(--muted); }
.hm-tool.locked:hover .hm-ico { background: var(--fs); color: var(--fi); }
@media (max-width: 1280px) {
.hm-flows { grid-template-columns: minmax(0, 1fr); }
.hm-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-tool:nth-child(odd) { border-right: 1px solid var(--line); }
}
@media (max-width: 700px) {
.hm-tools { grid-template-columns: minmax(0, 1fr); }
.hm-tool:nth-child(odd) { border-right: 0; }
.hm-meters { grid-template-columns: minmax(0, 1fr); }
.hm-plan h2 { font-size: 19px; }
.hm-flow > header { grid-template-columns: auto minmax(0, 1fr); }
.hm-flow > header em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero h1 em, .formula li, .hm-plan::before, .hm-plan-top, .hm-meters li, .hm-meters li > u i, .hm-steps li, .hm-skel i, .hm-flow, .hm-flow::before { animation: none; }
.hm-step, .hm-ico, .hm-meters li, .formula li i { transition: none; }
}
#ovBody, #ovData { display: grid; gap: 14px; align-content: start; }
.dhero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--side-bg); color: var(--side-ink); }
:root[data-theme="dark"] .dhero { border: 1px solid var(--line); background: var(--surface); }
.dhero-title { display: flex; align-items: center; gap: 6px; }
.dhero h1 { font-size: 30px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 6px; min-height: 20px; font-size: 13px; color: var(--side-muted); }
.mchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mchip + .mchip::before { content: ""; width: 1px; height: 12px; background: var(--side-line); margin: 0 10px; }
.mchip b { color: var(--side-ink); font-weight: 700; }
.mchip i { width: 8px; height: 8px; border-radius: 2px; background: var(--tc, #4cc764); }
.mchip.load i { width: 10px; height: 10px; border-radius: 50%; background: none; border: 2px solid var(--side-line); border-top-color: var(--primary); animation: spin .7s linear infinite; }
.insight { margin-top: 10px; color: color-mix(in srgb, var(--side-ink) 82%, transparent); font-size: 14px; line-height: 1.5; max-width: 78ch; min-height: 21px; }
.insight b { color: var(--side-ink); font-weight: 700; }
.dhero-actions { display: grid; gap: 8px; justify-items: end; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dhero .btn { background: transparent; border-color: var(--side-line); color: var(--side-ink); }
.dhero .btn:hover { background: var(--side-hover); border-color: var(--side-muted); }
.dhero :focus-visible { outline-color: var(--side-ink); }
.quick-cmp { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 300px; background: var(--side-hover); border: 1px solid var(--side-line); border-radius: 6px; padding: 3px 3px 3px 10px; transition: border-color .15s; }
.quick-cmp:focus-within { border-color: var(--primary); }
.quick-cmp svg { width: 15px; height: 15px; color: var(--side-muted); flex: none; }
.quick-cmp input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 5px 2px; font-size: 13px; color: var(--side-ink); }
.quick-cmp input::placeholder { color: var(--side-muted); }
.dhero .quick-cmp .btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dhero .quick-cmp .btn:hover { background: var(--primary-hover); }
.gauge { display: grid; place-items: center; margin: 0; }
.gauge svg { width: 100%; max-width: 290px; stroke: none; overflow: visible; }
.gauge path { fill: none; stroke-width: 18; stroke-linecap: butt; }
.gauge .tiers path { stroke-width: 5; }
.gauge .track { stroke: var(--grid); }
.gauge .value { stroke: var(--tc, var(--primary)); transition: stroke-dasharray .8s var(--ease), stroke .3s; }
.gauge .knob { transform-origin: 120px 128px; transform: rotate(var(--a, 0deg)); transition: transform .8s var(--ease); }
.gauge .knob rect { fill: var(--ink); }
.gauge-num { fill: var(--ink); font: 700 58px var(--display); letter-spacing: -0.03em; }
.gauge-grade { fill: var(--ink-2); font-size: 13px; font-weight: 700; }
.gauge-end { fill: var(--muted); font-size: 12px; }
.contrib { margin-top: 10px; }
.contrib-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-bottom: 6px; }
.contrib-head b { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.contrib-bar { display: flex; gap: 2px; height: 24px; border-radius: 3px; overflow: hidden; background: var(--grid); }
.contrib-bar i { display: grid; place-items: center; min-width: 0; height: 100%; background: var(--sw); color: #fff; font: 700 11.5px/1 var(--font); overflow: hidden; animation: grow .8s var(--ease) both; }
:root[data-theme="dark"] .contrib-bar i { color: #100f0d; }
.comp-head, .comps li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 72px; gap: 5px 12px; align-items: center; }
.comp-head { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin: 16px -18px 0; padding: 7px 18px; border-block: 1px solid var(--line); background: var(--raised); }
.comp-head span:not(:first-child) { text-align: right; }
.comps li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.comps li:last-child { border-bottom: 0; padding-bottom: 2px; }
.comp-name { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 8px; font-weight: 700; flex-wrap: wrap; }
.comp-name i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); flex: none; align-self: center; }
.comp-name small { color: var(--muted); font-weight: 400; font-size: 12px; }
.comps b { grid-area: 1 / 2; font: 700 17px var(--display); text-align: right; }
.comps em { grid-area: 1 / 3; font-style: normal; font-size: 12px; color: var(--ink-2); text-align: right; }
.comp-bar { grid-area: 2 / 1 / 3 / -1; height: 6px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.comp-bar i { display: block; height: 100%; width: var(--w); background: var(--sw); animation: grow .8s var(--ease) both; }
.comps .sk-line { grid-column: 1 / -1; height: 30px; }
.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -14px -18px 12px; border-bottom: 1px solid var(--line); }
.mini-stats > div { padding: 9px 18px 10px; min-width: 0; border-left: 1px solid var(--line); }
.mini-stats > div:first-child { border-left: 0; }
.mini-stats small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stats b { font: 700 18px var(--display); white-space: nowrap; }
.mini-stats em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mini-stats .up b { color: var(--good); } .mini-stats .down b { color: var(--bad); }
.mini-stats > .sk-line { height: 36px; margin: 9px 18px; }
.mini-stats:empty { display: none; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 216px; margin: 0 -18px; padding: 0 18px; border-bottom: 1px solid var(--line-strong); }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--ink); }
.pod .av { width: 40px; height: 40px; border-radius: 6px; font-size: 16px; outline: 2px solid var(--medal); outline-offset: 2px; transition: transform .3s var(--spring); }
.pod:hover .av { transform: translateY(-3px); }
.pod-dom { max-width: 100%; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
.pod:hover .pod-dom { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.pod-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pod-base { position: relative; width: 100%; height: var(--h); margin-top: 6px; border-radius: 4px 4px 0 0; display: grid; place-items: center; align-content: center; gap: 1px; background: var(--medal); color: #191713; transform-origin: bottom; animation: growY .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.pod-base b { font: 700 26px/1 var(--display); }
.pod-base small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.pod-rank { position: absolute; top: 6px; left: 8px; font: 700 12px/1 var(--display); opacity: .75; }
.pod.p1 { --medal: var(--gold); --h: 104px; order: 2; --i: 0; }
.pod.p2 { --medal: var(--silver); --h: 78px; order: 1; --i: 1; }
.pod.p3 { --medal: var(--bronze); --h: 58px; order: 3; --i: 2; }
.pod.sk-pod { cursor: default; }
.pod.sk-pod i { display: block; border-radius: 4px; }
.podium .chart-msg { grid-column: 1 / -1; align-self: center; }
.quality { display: flex; flex-direction: column; gap: 12px; flex: 1; margin-top: 14px; }
.q-top { display: flex; align-items: center; gap: 12px; }
.q-top small { display: block; color: var(--muted); font-size: 12px; }
.q-top b { font: 700 17px var(--display); }
.score-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 6px; background: var(--tc); color: #fff; font: 700 24px/1 var(--display); flex: none; }
:root[data-theme="dark"] .score-tile { color: #100f0d; }
.quality p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.quality p b { color: var(--ink); }
.q-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: auto -18px -16px; border-top: 1px solid var(--line); }
.q-stats div { padding: 9px 18px; min-width: 0; border-bottom: 1px solid var(--line); }
.q-stats div:nth-child(odd) { border-right: 1px solid var(--line); }
.q-stats div:nth-last-child(-n+2) { border-bottom: 0; }
.q-stats b { display: block; font: 700 18px var(--display); }
.q-stats small { color: var(--muted); font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-stats .bad b { color: var(--bad); }
.quality .sk-line { height: 14px; }
#ovTable th, #ovTable td { padding-inline: 12px; }
#ovTable th:first-child, #ovTable td:first-child { padding-left: 18px; }
#ovTable th:last-child, #ovTable td:last-child { padding-right: 18px; }
#ovTable .scorecell i { width: 64px; }
@media (max-width: 1320px) {
.kpis { --n: 3; }
.kpis .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
.kpis .kpi:nth-child(4) { border-left: 0; }
.kpis .kpi:nth-child(5) { grid-column: span 2; }
.donut-row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.donut-row .legend-rows { width: 100%; }
.dhero { grid-template-columns: auto minmax(0, 1fr); }
.dhero-actions { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 420px); justify-items: start; justify-content: space-between; align-items: center; }
}
@media (max-width: 700px) {
.kpis { --n: 2; }
.kpis .kpi { border-left: 1px solid var(--line); border-top: 1px solid var(--line); grid-column: auto; }
.kpis .kpi:nth-child(odd) { border-left: 0; }
.kpis .kpi:nth-child(-n+2) { border-top: 0; }
.kpis .kpi:nth-child(5) { grid-column: 1 / -1; }
.dhero { padding: 14px; gap: 12px; }
.dhero { align-items: start; }
.dhero .favicon { align-self: start; }
.meta-chips { gap: 4px 14px; }
.mchip + .mchip::before { display: none; }
.dhero h1 { font-size: 23px; }
.favicon { width: 44px; height: 44px; }
.dhero-actions { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.quick-cmp { min-width: 0; }
.mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-stats > div:nth-child(3) { border-left: 0; }
.mini-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.pod-meta { display: none; }
}
.src-tag { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--muted); border: 1px solid var(--line); }
.dhero-actions[hidden] { display: none; }
.kpi-top { flex-wrap: wrap; row-gap: 4px; } .src-tag { white-space: nowrap; }
.kpi > small.kpi-standing { color: var(--primary-ink); font-weight: 700; min-height: 0; margin-top: 2px; }
.sbadge { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1.4 var(--font); letter-spacing: 0; text-transform: none; padding: 2px 9px 2px 7px; border-radius: 999px; white-space: nowrap; animation: pop .35s var(--spring) both; }
.sbadge i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sbadge em { font-style: normal; font-weight: 600; padding-left: 7px; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.sbadge.sb-data { background: var(--good-soft); color: var(--good); }
.sbadge.sb-data i { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.sbadge.sb-approx { background: var(--warn-soft); color: var(--warn); }
.sbadge.sb-approx i { border: 2px solid var(--warn); }
.sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sdot.sb-data { background: var(--good); }
.sdot.sb-approx { box-shadow: inset 0 0 0 1.5px var(--warn); }
.score-mark { display: inline-flex; align-items: center; gap: 7px; }
.dot-key { display: inline-flex; gap: 10px; margin-left: 4px; font-size: 11.5px; color: var(--muted); }
.dot-key[hidden] { display: none; }
.dot-key span { display: inline-flex; align-items: center; gap: 5px; }
.gauge .range { stroke: var(--ink); stroke-width: 4; transition: stroke-dashoffset .8s var(--ease); animation: fade .6s .3s both; }
.gauge .range.dotted { stroke-linecap: round; stroke-width: 4.5; }
.gauge .range-ends { stroke: var(--ink); stroke-width: 8; animation: fade .6s .3s both; }
.gauge-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 6px; background: var(--raised); animation: rise .4s var(--ease) both; }
.gauge-meta[hidden] { display: none; }
.gauge-meta.sb-data { border-left-color: var(--good); }
.gm-range small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.gm-range b { font: 700 22px/1.1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.gauge-meta p { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.gauge-meta p:only-child { grid-column: 1 / -1; }
.scale u { position: absolute; top: -3px; bottom: -3px; min-width: 6px; border: 1.5px solid var(--ink); border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); transition: left .8s var(--ease), width .8s var(--ease); }
.scale u[hidden] { display: none; }
.kpi-more { font-size: 12px; }
.kpi-more[hidden] { display: none; }
.kpi-more summary { display: inline-flex; align-items: center; gap: 3px; list-style: none; cursor: pointer; font-weight: 700; color: var(--primary-ink); border-radius: 4px; }
.kpi-more summary::-webkit-details-marker { display: none; }
.kpi-more summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s var(--ease); }
.kpi-more[open] summary svg { transform: rotate(180deg); }
.kpi-more > div { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line-strong); animation: rise .25s var(--ease) both; }
.kpi-more li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: baseline; padding: 3px 0; }
.kpi-more li span { color: var(--ink-2); }
.kpi-more li b { font: 700 14px var(--display); text-align: right; }
.kpi-more li em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; color: var(--muted); }
.kpi-more p { margin-top: 6px; color: var(--ink-2); line-height: 1.45; white-space: normal; }
.kpi-more p b { color: var(--ink); }
.live-row { display: grid; gap: 6px; margin: -14px -18px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--good) 9%, transparent), transparent 70%); }
.live-row[hidden] { display: none; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.live-head span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.live-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2.4s ease-in-out infinite; }
.live-head b { font: 700 22px/1 var(--display); color: var(--good); }
.live-bar { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--bad) 38%, var(--grid)); }
.live-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px 0 0 4px; background: var(--good); animation: grow .8s var(--ease) both; }
.live-row small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.live-row small b { color: var(--ink); }
.live-row.mid .live-head b { color: var(--warn); }
.live-row.low .live-head b { color: var(--bad); }
.live-row.low { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 9%, transparent), transparent 70%); }
@media (max-width: 700px) {
.gauge-meta { grid-template-columns: minmax(0, 1fr); }
.dot-key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sbadge, .gauge .range, .gauge .range-ends, .gauge-meta, .kpi-more > div, .live-head i, .live-bar i { animation: none; }
}
#blBody { display: grid; gap: 14px; align-content: start; }
.vchip.name-flag { cursor: help; }
.bl-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 18px 32px; align-items: center; padding: 20px 24px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--primary) 32%, var(--side-bg)), var(--side-bg) 60%), var(--side-bg); animation: rise .45s var(--ease) both; }
.bl-hero::after { content: ""; position: absolute; right: -80px; top: -110px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--c2) 42%, transparent), transparent 68%); animation: bl-float 10s ease-in-out infinite; }
.bl-hero > * { position: relative; z-index: 1; }
.bl-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink) 72%, transparent); }
.bl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.bl-src { font: 700 10.5px/1 var(--font); letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 8%, transparent); color: var(--side-ink); }
.bl-src.data { border-color: color-mix(in srgb, var(--v-ok) 60%, transparent); background: color-mix(in srgb, var(--v-ok) 22%, transparent); }
.bl-num { display: block; margin-top: 6px; font: 800 clamp(40px, 7vw, 64px)/1.02 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.bl-sub { margin-top: 8px; max-width: 58ch; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--side-ink) 80%, transparent); text-wrap: pretty; }
.bl-hero.wait .bl-num { opacity: .35; }
.bl-life { display: grid; gap: 9px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 6%, transparent); animation: rise .5s var(--ease) .12s both; }
.bl-life-t { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink) 66%, transparent); }
.bl-life-bar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--side-ink) 12%, transparent); }
.bl-life-bar i { display: block; flex-basis: 0; min-width: 5px; border-radius: 3px; transform-origin: left; animation: bl-growx .8s var(--ease) .2s both; }
.bl-life-bar i.alive { background: var(--v-ok); }
.bl-life-bar i.dead { background: var(--v-spam); animation-delay: .32s; }
.bl-life-bar.none { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--side-ink) 16%, transparent) 0 5px, transparent 5px 10px); }
.bl-life-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: color-mix(in srgb, var(--side-ink) 80%, transparent); }
.bl-life-legend:empty { display: none; }
.bl-life-legend li { display: inline-flex; align-items: baseline; gap: 6px; }
.bl-life-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.bl-life-legend .alive i { background: var(--v-ok); }
.bl-life-legend .dead i { background: var(--v-spam); }
.bl-life-legend b { font: 800 18px/1 var(--display); color: var(--side-ink); font-variant-numeric: tabular-nums; }
.bl-life-legend small { font-size: 11.5px; color: color-mix(in srgb, var(--side-ink) 60%, transparent); }
.bl-life-scan { font-size: 12px; color: color-mix(in srgb, var(--side-ink) 62%, transparent); }
.bl-life-scan:empty { display: none; }
.bl-st-live { color: var(--good); }
.bl-st-dead { color: var(--bad); }
.bl-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; cursor: help; }
.bl-live i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bl-live.alive { background: var(--good-soft); color: var(--good); }
.bl-live.alive i { background: var(--v-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--v-ok) 55%, transparent); animation: bl-ping 2.4s ease-out infinite; animation-delay: calc(var(--r, 0) * 120ms); }
.bl-live.dead { background: var(--bad-soft); color: var(--bad); }
.bl-live.dead i { background: var(--v-spam); border-radius: 2px; }
tr:has(.bl-live.dead) .dom > span:last-child { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); color: var(--ink-2); }
.bl-infra { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; cursor: help; background: var(--c3-soft); color: var(--c3-ink); border: 1px dashed color-mix(in srgb, var(--c3) 45%, transparent); }
table.fresh .bl-live, table.fresh .bl-infra { animation: pop .35s var(--spring) both; animation-delay: calc(var(--r, 0) * 30ms + 140ms); }
.bl-tog { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.bl-tog[hidden] { display: none; }
.bl-tog:hover { border-color: var(--ink); color: var(--ink); }
.bl-tog:active { transform: scale(.97); }
.bl-tog:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bl-tog > i { position: relative; width: 28px; height: 16px; border-radius: 999px; flex: none; background: var(--line-strong); transition: background .2s; }
.bl-tog > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); transition: transform .25s var(--spring); }
.bl-tog[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.bl-tog[aria-pressed="true"] > i { background: var(--primary); }
.bl-tog[aria-pressed="true"] > i::after { transform: translateX(12px); background: var(--on-primary); }
.bl-tog.live[aria-pressed="true"] { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.bl-tog.live[aria-pressed="true"] > i { background: var(--v-ok); }
.bl-tog b { font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--ink-2); }
.bl-tog b[hidden] { display: none; }
.bl-chips { display: grid; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.bl-chips:not(:has(.bl-chip)) { display: none; }
.bl-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chiprow:empty { display: none; }
.bl-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.bl-chip:not(:has(b)) { padding-right: 11px; }
.bl-chip:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.bl-chip:active { transform: scale(.96); }
.bl-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bl-chip b { font-weight: 800; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--raised); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bl-chip.tld { font-family: var(--mono); font-size: 12px; }
.bl-chip.tld b { font-family: var(--font); background: var(--c2-soft); color: var(--c2-ink); }
.bl-chip.t1 b { background: color-mix(in srgb, var(--t1) 20%, transparent); color: var(--ti1); }
.bl-chip.t2 b { background: color-mix(in srgb, var(--t2) 20%, transparent); color: var(--ti2); }
.bl-chip.t3 b { background: color-mix(in srgb, var(--t3) 20%, transparent); color: var(--ti3); }
.bl-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.bl-chip[aria-pressed="true"] b { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); }
@keyframes bl-float { 50% { transform: translate(-22px, 18px) scale(1.07); } }
@keyframes bl-growx { from { transform: scaleX(0); } }
@keyframes bl-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v-ok) 55%, transparent); } 60%, 100% { box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 900px) {
.bl-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
}
@media (max-width: 760px) {
.bl-chips { padding: 10px 12px; }
.bl-chiprow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.bl-chip, .bl-tog { flex: none; }
.bl-live { margin-left: 6px; padding: 3px; }
.bl-live > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bl-live.dead { padding: 2px 7px 2px 6px; }
.bl-live.dead > span { position: static; width: auto; height: auto; clip-path: none; }
.bl-infra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.bl-hero, .bl-hero::after, .bl-eyebrow::before, .bl-life, .bl-life-bar i, .bl-live.alive i, table.fresh .bl-live, table.fresh .bl-infra { animation: none !important; }
.bl-tog, .bl-tog > i::after, .bl-chip { transition: none; }
}
#spBody { display: grid; gap: 14px; align-content: start; }
.g-spam { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); }
.verdict { display: grid; gap: 10px; align-content: start; padding: 20px 22px; border-radius: var(--radius); background: var(--vc); color: var(--von); min-width: 0; }
.verdict > small { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.verdict-word { font: 800 clamp(44px, 6vw, 68px)/.95 var(--display); letter-spacing: -0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.verdict-num { display: flex; align-items: baseline; gap: 6px; font: 700 30px/1 var(--display); }
.verdict-num span { font: 600 14px var(--font); opacity: .85; }
.meter { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 6px; }
.meter i { height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--von) 28%, transparent); }
.meter span { background: var(--von); box-shadow: 0 0 0 2px var(--vc); width: 5px; }
.meter-labels { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; opacity: .85; }
.verdict p { font-size: 13.5px; line-height: 1.5; font-weight: 500; max-width: 46ch; }
.signals li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 18px; border-top: 1px solid var(--line); }
.signals li:first-child { border-top: 0; }
.signals svg { width: 20px; height: 20px; padding: 3px; border-radius: 4px; stroke-width: 2.4; margin-top: 1px; background: var(--vc); color: var(--von); }
.signals b { display: block; font-weight: 700; }
.signals span { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.signals li.empty { display: block; color: var(--muted); }
.src { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--line); }
.src:first-child { border-left: 0; }
.src header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.src header b { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.src strong { font: 700 22px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src strong small { font: 500 13px var(--font); color: var(--muted); }
.src p { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.src p.err { color: var(--bad); }
.scripts-bar { display: flex; gap: 2px; height: 26px; border-radius: 3px; overflow: hidden; background: var(--grid); margin-bottom: 8px; }
.scripts-bar i { min-width: 3px; background: var(--sw); animation: grow .8s var(--ease) both; }
.cat { border-top: 1px solid var(--line); }
.cat:first-child { border-top: 0; }
.cat summary { display: grid; grid-template-columns: 118px minmax(0, 1.2fr) minmax(60px, 1fr) 96px 44px 16px; gap: 12px; align-items: center; padding: 9px 18px; cursor: pointer; list-style: none; transition: background .12s; }
.cat summary::-webkit-details-marker { display: none; }
.cat summary:hover { background: var(--raised); }
.cat summary > b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat summary > span:not(.vchip) { text-align: right; font-weight: 600; white-space: nowrap; }
.cat summary > .vchip { justify-self: start; }
.cat summary > small { text-align: right; color: var(--muted); }
.cat summary > svg { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.cat[open] summary > svg { transform: rotate(90deg); }
.cat[open] summary { background: var(--raised); }
.cat .hbar i { background: var(--vc); }
.ex { display: grid; background: var(--raised); border-top: 1px solid var(--line); padding: 2px 18px 6px 104px; }
.ex li { display: grid; gap: 1px; padding: 7px 0; border-top: 1px dashed var(--line-strong); min-width: 0; }
.ex li:first-child { border-top: 0; }
.ex b { font-weight: 600; overflow-wrap: anywhere; }
.ex small { color: var(--muted); font-size: 12px; }
.stat-strip.three { --n: 3; }
.stat-strip.four { --n: 4; }
#navSpam.prelim { background: transparent; color: var(--side-ink); box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
.progress { display: grid; gap: 14px; padding: 22px; }
.progress h2 { font-size: 18px; }
.progress > p { color: var(--ink-2); max-width: 70ch; }
.psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.psteps li { display: grid; gap: 6px; padding: 12px 14px; border-left: 1px solid var(--line); }
.psteps li:first-child { border-left: 0; }
.psteps b { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.psteps b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--primary); animation: spin .7s linear infinite; }
.psteps span { color: var(--muted); font-size: 12.5px; }
#spCats > .chart-msg { min-height: 96px; grid-auto-flow: column; justify-content: center; }
.verdict { position: relative; }
.verdict-word.long { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; }
.meter-labels { position: relative; display: block; height: 16px; }
.meter-labels span { position: absolute; top: 0; transform: translateX(-50%); }
.meter-labels span:first-child { transform: none; }
.meter-labels span:last-child { transform: translateX(-100%); }
.pts { font-style: normal; font-size: 11.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-left: 8px; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.cat summary > .pts { margin: 0; justify-self: end; text-align: center; }
.cat summary { grid-template-columns: 118px minmax(0, 1.2fr) minmax(60px, 1fr) 96px 44px 44px 16px; }
.src p.note { color: var(--muted); font-size: 12px; border-top: 1px dashed var(--line-strong); padding-top: 5px; margin-top: 2px; }
.progress-head { display: flex; align-items: center; gap: 18px; }
.progress-head > div:last-child { display: grid; gap: 6px; min-width: 0; }
.chart .bar-total.track { fill: var(--grid); }
.chart .bar-flag.thin { opacity: .45; }
.legend-inline i.thin { opacity: .45; }
.why-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 90px) 46px; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); }
.why-list li:first-child { border-top: 0; }
.why-name { display: grid; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.why-name small { color: var(--muted); font-weight: 500; font-size: 12px; }
.why-list u { display: block; height: 6px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.why-list u::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--vc); animation: grow .8s var(--ease) both; }
.why-list b { text-align: right; font: 700 15px var(--display); }
.why-list li.total { background: var(--raised); border-top: 1px solid var(--line-strong); grid-template-columns: minmax(0, 1fr) 60px; }
.why-list li.total b { font-size: 20px; }
.why-list li.none { display: block; color: var(--muted); }
.cover { display: grid; }
.cover div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 18px; border-top: 1px solid var(--line); }
.cover div:first-child { border-top: 0; }
.cover dt { color: var(--muted); }
.cover dd { font-weight: 700; }
.cover p { padding: 10px 18px 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; }
.kpi.prelim { background: color-mix(in srgb, var(--raised) 75%, var(--surface)); box-shadow: inset 3px 0 0 var(--line-strong); }
.kpi.prelim .kpi-val b { color: var(--ink-2); }
.kpi-act { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 11px; border-radius: 999px; font: 700 12px var(--font); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); transition: gap .2s var(--ease), background .2s var(--ease); }
.kpi-act[hidden] { display: none; }
.kpi-act::after { content: "\2192"; }
.kpi:hover .kpi-act { gap: 11px; background: color-mix(in srgb, var(--primary) 22%, transparent); }
.prelim-num { display: inline-block; min-width: 2.2em; padding: 2px 8px; border-radius: 4px; border: 1px dashed var(--line-strong); color: var(--ink-2); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.vchip.scan-prelim { border-style: dashed; }
@media (max-width: 1100px) {
.g-spam { grid-template-columns: minmax(0, 1fr); }
.stat-strip.three { --n: 3; }
.stat-strip.four { --n: 2; }
.stat-strip.four .src:nth-child(3) { border-left: 0; }
.stat-strip.four .src:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 920px) {
.cat summary { grid-template-columns: 118px minmax(0, 1fr) 80px 16px; }
.cat summary > .hbar, .cat summary > small, .cat summary > .pts { display: none; }
.ex { padding-left: 18px; }
}
@media (max-width: 700px) {
.stat-strip.three, .stat-strip.four, .psteps { grid-template-columns: minmax(0, 1fr); }
.stat-strip.three .src, .stat-strip.four .src, .psteps li { border-left: 0; border-top: 1px solid var(--line); }
.stat-strip.three .src:first-child, .stat-strip.four .src:first-child, .psteps li:first-child { border-top: 0; }
.progress-head { flex-direction: column; align-items: flex-start; }
}
.verdict.v-none { background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); }
.verdict-num.sub { font-size: 16px; opacity: .8; }
.verdict-num.sub span { font-size: 12px; }
.prelim-card { display: grid; gap: 10px; padding: 22px; }
.prelim-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prelim-head b { font: 700 18px var(--display); overflow-wrap: anywhere; }
.prelim-num { color: var(--muted); font-weight: 600; }
.prelim-card p { max-width: 90ch; color: var(--ink-2); }
.prelim-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.prelim-act .hint { max-width: 52ch; }
.cat.muted summary > b, .cat.muted summary > span:not(.vchip) { color: var(--muted); }
.cat.muted .hbar i { background: var(--t0); }
.cat-note { padding: 6px 18px 0; color: var(--muted); font-size: 12.5px; }
.hist-note { display: block; color: var(--muted); margin-top: 3px; }
.g-wide > .why { align-self: start; }
.cat summary > .vchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cover dd { text-align: right; }
.cover dd[class^="conf-"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--v-warn); }
.cover dd.conf-hi::before { background: var(--v-ok); }
.cover dd.conf-lo::before { background: var(--v-risk); }
.sp-sample { display: grid; gap: 14px; }
.sp-sample[hidden] { display: none; }
.sp-sample-head { display: flex; align-items: center; gap: 16px; }
.sp-sample-head h2 { font-size: 20px; margin: 2px 0 4px; }
.sp-sample-head p { color: var(--ink-2); max-width: 70ch; font-size: 14px; line-height: 1.5; }
.sp-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; color: var(--c3-ink); background: var(--c3-soft); }
.sp-sample-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c3) 9%, var(--surface)), color-mix(in srgb, var(--c1) 8%, var(--surface))); border: 1px solid var(--line); }
.sp-sample-grid { display: grid; grid-template-columns: minmax(220px, 4fr) minmax(0, 5fr) minmax(0, 5fr); gap: 14px; padding: 18px; filter: blur(3.5px) saturate(1.1); opacity: .9; pointer-events: none; user-select: none; }
.sp-sc { background: var(--surface); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 0 var(--line); }
.sp-sc > small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sp-sc.verdict-sc { background: var(--v-risk, var(--c1)); color: var(--von-risk, #191713); }
.sp-sc.verdict-sc strong { font: 800 40px/1 var(--display); text-transform: uppercase; }
.sp-sc.verdict-sc > small { color: inherit; }
.sp-cats { display: grid; gap: 10px; }
.sp-cats li { display: grid; grid-template-columns: minmax(90px, 1.3fr) minmax(0, 2fr) 42px; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.sp-cats u { display: block; height: 10px; border-radius: 5px; background: var(--grid); position: relative; overflow: hidden; }
.sp-cats u::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--vc, var(--c1)); border-radius: 5px; transform-origin: left; animation: sp-grow 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.sp-cats b { text-align: right; }
.sp-years { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.sp-years i { flex: 1; height: var(--h); min-height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, var(--c3), var(--c1)); transform-origin: bottom; animation: sp-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.sp-years-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
@keyframes sp-grow { from { transform: scaleX(0); } }
@keyframes sp-rise { from { transform: scaleY(0); } }
.sp-sample-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 16px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--surface) 78%, transparent) 30%, transparent 75%); }
.sp-sample-cta b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--c3-ink); background: var(--c3-soft); padding: 4px 12px; border-radius: 999px; }
.sp-sample-cta .btn { min-height: 48px; padding-inline: 26px; font-size: 15px; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); }
.sp-sample-cta .hint { max-width: 40ch; color: var(--ink-2); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: 6px 12px; border-radius: 10px; box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 10%, transparent); }
.sp-sample-stage { display: grid; }
.sp-sample-stage > .sp-sample-grid, .sp-sample-stage > .sp-sample-cta { grid-area: 1 / 1; }
.sp-sample-stage > .sp-sample-cta { position: relative; inset: auto; z-index: 1; min-height: 0; align-content: center; }
.sp-sample-stage > .sp-sample-cta > * { max-width: min(100%, 44ch); }
@media (max-width: 760px) {
.sp-sample-grid { grid-template-columns: minmax(0, 1fr); }
.sp-sample-head { align-items: flex-start; }
.sp-sample-stage { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .sp-cats u::after, .sp-years i { animation: none; } }
.dig-lane { position: relative; padding-top: 22px; }
.dig-lane .pbar { height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--grid) 0 10px, color-mix(in srgb, var(--grid) 80%, var(--line-strong)) 10px 20px); }
.dig-lane .pbar i { border-radius: 6px; background: repeating-linear-gradient(135deg, var(--primary) 0 10px, color-mix(in srgb, var(--primary) 70%, var(--c1-ink, #000)) 10px 20px); background-size: 28px 28px; animation: sp-stripe 1s linear infinite; transition: width .5s linear; }
.dig-head { position: absolute; top: -2px; left: 0; width: 40px; height: 40px; margin-left: -20px; transition: left .5s linear; animation: sp-bob .5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes sp-stripe { to { background-position: 28px 0; } }
@keyframes sp-bob { to { transform: translateY(-3px) rotate(-6deg); } }
.psteps li { transition: background .3s, opacity .3s; opacity: .62; }
.psteps li.on { opacity: 1; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.psteps li.done { opacity: 1; }
.psteps li.done b::before { animation: none; border-color: var(--t4); background: var(--t4); }
.psteps li:not(.on):not(.done) b::before { animation: none; border-top-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .dig-lane .pbar i, .dig-head { animation: none; } }
@media (pointer: coarse), (max-width: 760px) { #spStart, #spAgain, #spRefresh { min-height: 44px; } }
#spEmpty { min-height: 0; padding-block: 18px; }
#spSampleArt:empty { display: none; }
#cmpBody { display: grid; gap: 14px; align-content: start; }
.compare-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; }
.cmp-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; min-width: 260px; }
.cmp-inputs label { position: relative; display: block; }
.cmp-inputs i { position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--sw); }
.cmp-inputs input { width: 100%; padding: 7px 10px 7px 27px; }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cmp-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-left: 1px solid var(--line); border-top: 4px solid var(--sw); min-width: 0; }
.cmp-card:first-child { border-left: 0; }
.cmp-card header { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 60px; }
.cmp-score { display: flex; align-items: baseline; gap: 10px; }
.cmp-score strong { font: 700 40px/1 var(--display); letter-spacing: -0.03em; }
.cmp-card dl { display: grid; font-size: 13px; }
.cmp-card dl div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.cmp-card dt { color: var(--muted); }
.cmp-card dd { font-weight: 700; }
.lead-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #191713; background: var(--gold); border-radius: 4px; padding: 2px 7px 2px 5px; animation: pop .4s .4s var(--spring) both; }
.lead-badge svg { width: 13px; height: 13px; stroke-width: 2; }
.cmp-card .sk-line { height: 130px; }
.groups { display: grid; gap: 14px; }
.group > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.group ul { display: grid; gap: 4px; }
.group li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 10px; align-items: center; }
.group li div { height: 12px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.group li i { display: block; height: 100%; width: var(--w); background: var(--sw); animation: grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.group li b { font-weight: 700; font-size: 13px; text-align: right; }
@media (max-width: 920px) {
.cmp-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.cmp-card { border-left: 0; }
}
@media (max-width: 520px) {
.cmp-inputs { grid-template-columns: minmax(0, 1fr); }
}
.cmp-card.unknown { border-top-color: var(--line-strong); }
.cmp-card.unknown .cmp-score strong { color: var(--muted); }
.groups li div:empty { background: transparent; border: 1px dashed var(--line); }
.delta-list { display: grid; gap: 14px; }
.dl-metric > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.dl-metric ul { display: grid; gap: 5px; }
.dl-metric li { display: grid; grid-template-columns: 8px minmax(0, 9em) minmax(0, 1fr) 46px; gap: 8px; align-items: center; font-size: 13px; }
.dl-metric li > i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); }
.dl-metric li em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-metric li div { height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.dl-metric li u { display: block; height: 100%; width: var(--w); background: var(--sw); opacity: .55; text-decoration: none; }
.dl-metric li b { text-align: right; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.dl-metric li b.lead { color: var(--good); }
.cmp-src { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-top: -2px; }
.cmp-bar { position: relative; overflow: visible; }
.cmp-bar u { position: absolute; top: -3px; bottom: -3px; min-width: 6px; border: 1.5px solid var(--ink); border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); animation: fade .5s .4s both; }
#cmpTable td .sdot { margin-left: 7px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .cmp-bar u { animation: none; } }
#bulkBody, .bulk-out { display: grid; gap: 14px; align-content: start; }
.bulk-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
.bulk-out > .blank { height: 100%; align-content: center; }
.bulk-in .pbar { margin-top: 10px; }
@media (max-width: 920px) {
.bulk-grid { grid-template-columns: minmax(0, 1fr); }
}
.unk { color: var(--muted); font-style: italic; }
.sub.merged { color: var(--muted); }
.dist-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 16px 10px; font-size: 12.5px; color: var(--ink-2); }
.dist-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dist-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dist-legend b { font-weight: 700; color: var(--ink); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 8px; }
#calTable th, #calTable td { padding-inline: 12px; }
#calTable th:first-child, #calTable td:first-child { padding-left: 18px; }
#calTable .scorecell i { display: none; }
@media (max-width: 700px) {
.inline-form { grid-template-columns: minmax(0, 1fr); }
}
.chart .pt.g-ok { fill: var(--t4); }
.chart .pt.g-near { fill: var(--t1); }
.chart .pt.g-far { fill: var(--c5); }
.chart .pt.g-none { fill: var(--t0); }
.chart .pt { animation-delay: calc(.25s + var(--i, 0) * 60ms); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.chart .trail { fill: none; stroke: var(--c2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease) forwards; }
.no-anim .trail { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .chart .trail { stroke-dashoffset: 0; animation: none; } }
.legend-inline .dot.ok { background: var(--t4); } .legend-inline .dot.near { background: var(--t1); } .legend-inline .dot.far { background: var(--c5); }
.cal-goal { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c2) 8%, var(--surface)); }
.cal-goal[data-done="true"] { background: color-mix(in srgb, var(--t4) 12%, var(--surface)); }
.cal-ring { flex: none; width: 56px; height: 56px; }
.cal-ring .track { fill: none; stroke: var(--grid); stroke-width: 6; }
.cal-ring .prog { fill: none; stroke: var(--c2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len) 1000; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .9s var(--ease), stroke .3s; }
.cal-goal[data-done="true"] .cal-ring .prog { stroke: var(--t4); }
.cal-ring text { fill: var(--ink); stroke: none; font-size: 14px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.cal-goal b { display: block; font-size: 14px; }
.cal-goal p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .cal-ring .prog { transition: none; } }
.cal-goal[data-n="0"] .cal-ring .track { stroke-dasharray: 5 6; stroke: var(--line-strong); transform-origin: 50% 50%; }
.cal-goal[data-n="0"] .cal-ring text { fill: var(--c2-ink); }
.cal-goal.grew .cal-ring { animation: cal-pop .6s var(--spring, ease) both; }
.cal-goal.grew .cal-ring .prog { filter: drop-shadow(0 0 5px var(--c2)); }
@keyframes cal-pop { 40% { transform: scale(1.14) rotate(-4deg); } }
@media (prefers-reduced-motion: no-preference) {
.cal-goal[data-n="0"] .cal-ring .track { animation: cal-spin 14s linear infinite; }
.cal-goal[data-n="0"] .cal-ring text { animation: cal-breathe 2.4s ease-in-out infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }
@keyframes cal-breathe { 50% { opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) { .cal-goal.grew .cal-ring { animation: none; } }
.tl-view { display: grid; gap: 14px; align-content: start; }
.tl-body { display: grid; gap: 14px; align-content: start; }
.tl-body[hidden], .tl-view [data-st][hidden] { display: none; }
.th { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: end; padding: 18px 20px; border-radius: var(--radius); background: var(--side-bg); color: var(--side-ink); }
:root[data-theme="dark"] .th { border: 1px solid var(--line); background: var(--surface); }
.th-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); margin-bottom: 4px; }
.th h1 { font-size: 28px; }
.th-sub { margin-top: 6px; max-width: 74ch; color: color-mix(in srgb, var(--side-ink) 82%, transparent); font-size: 14px; line-height: 1.5; }
.th-switch { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 12px; border-top: 1px solid var(--side-line); min-height: 0; }
.th-switch:empty { display: none; }
.th-switch-l { font-size: 12px; color: var(--side-muted); margin-right: 6px; }
.th-switch-l b { color: var(--side-ink); font-weight: 700; }
.th-switch a { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--side-ink); border: 1px solid var(--side-line); border-radius: 4px; padding: 3px 9px; transition: background .15s, border-color .15s; }
.th-switch a:hover { background: var(--side-hover); border-color: var(--side-muted); }
.th :focus-visible { outline-color: var(--side-ink); }
.th .btn { background: transparent; border-color: var(--side-line); color: var(--side-ink); }
.th .btn:hover { background: var(--side-hover); border-color: var(--side-muted); }
.tl-form { display: grid; gap: 12px; padding: 14px 16px; }
.tl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fld { display: grid; gap: 4px; min-width: 0; flex: 1 1 200px; }
.fld > span, .fld > label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.fld input, .fld select, .fld textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; outline: 0; transition: border-color .15s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--ink); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fld.sw input { padding-left: 27px; }
.fld.sw { position: relative; }
.fld.sw::before { content: ""; position: absolute; left: 10px; bottom: 14px; width: 8px; height: 8px; border-radius: 2px; background: var(--sw, var(--ink)); }
.fld.sm { flex: 0 1 130px; }
.tl-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--muted); }
.chip-btn { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip-btn:hover { background: var(--raised); border-color: var(--ink); color: var(--ink); }
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip-btn small { font-weight: 500; opacity: .7; margin-left: 4px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-form .form-error:empty { display: none; }
.tl-form .form-error { margin: 0; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; cursor: pointer; }
.range { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.range input { accent-color: var(--primary); width: 130px; }
.range b { min-width: 2.2ch; text-align: right; }
.tl-dig { display: flex; align-items: center; justify-content: center; padding: 6px 0 14px; }
.tl-dig .kosto img { animation: bob 2.2s ease-in-out infinite; }
.tl-wait { display: grid; gap: 14px; align-content: start; }
.tl-teach { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; max-width: 760px; margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-align: left; background: var(--surface); }
.tl-teach li { display: block; padding: 12px 14px; border-left: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tl-teach li:first-child { border-left: 0; }
.tl-teach b { margin-bottom: 6px; font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.tl-teach b i { font-style: normal; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--primary); color: var(--on-primary); font-size: 11px; }
.tl-teach code, .code { font: 600 12px var(--mono); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.kvs { display: grid; margin: 0; }
.kv { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); gap: 12px; padding: 7px 18px; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.kv:first-child { border-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.kv dd.wrap { font-weight: 500; }
.kv dd small { font-weight: 500; color: var(--muted); }
.kv dd .vchip + .vchip, .kv dd .tag + .tag { margin-left: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sec-note { padding: 9px 18px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); background: var(--raised); overflow-wrap: anywhere; }
.sec-err { display: flex; gap: 8px; align-items: flex-start; padding: 12px 18px; color: var(--bad); background: var(--bad-soft); font-size: 13px; }
.sec-err svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.note-box { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--v-warn) 55%, transparent); background: var(--warn-soft); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.note-box svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 1px; }
.note-box.info { border-color: var(--line-strong); background: var(--raised); }
.note-box.info svg { color: var(--muted); }
.note-box.bad { border-color: color-mix(in srgb, var(--v-spam) 45%, transparent); background: var(--bad-soft); }
.note-box.bad svg { color: var(--bad); }
.note-box b { font-weight: 700; }
.note-box ul { display: grid; gap: 4px; margin-top: 4px; }
.vchip.v-none { background: var(--raised); border: 1px solid var(--line); }
.dial { position: relative; width: 150px; height: 150px; flex: none; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke: none; overflow: visible; }
.dial circle { fill: none; stroke-width: 13; }
.dial .trk { stroke: var(--grid); }
.dial .val { stroke: var(--vc, var(--primary)); stroke-linecap: butt; transition: stroke-dashoffset 1s var(--ease); }
.dial b { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; font: 700 40px/1 var(--display); letter-spacing: -0.03em; }
.dial b small { font: 600 12px var(--font); color: var(--muted); letter-spacing: 0; margin-top: 3px; }
.mbar { height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; min-width: 60px; }
.mbar i { display: block; height: 100%; width: var(--w, 0%); background: var(--sw, var(--c2)); animation: grow .8s var(--ease) both; }
.mbar.tall { height: 12px; }
.pair { display: flex; align-items: center; gap: 10px; }
.pair .mbar { flex: 1; }
.pair b { min-width: 3ch; text-align: right; font-weight: 700; }
.tl-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tl-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 9px 14px; margin-bottom: -1px; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; transition: color .15s, background .15s; }
.tl-tabs button:hover { color: var(--ink); background: var(--raised); }
.tl-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); }
.tl-tabs button small { font-weight: 700; font-size: 11.5px; color: var(--muted); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.selbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: var(--ink); color: var(--bg); border-radius: 0 0 var(--radius) var(--radius); }
.selbar b { font-weight: 700; }
.card.flush:has(.selbar) { overflow: clip; }
.selbar { box-shadow: 0 -6px 18px -8px rgba(0,0,0,.35); animation: selbar-in var(--mo-base, 220ms) var(--mo-out, ease-out); }
@keyframes selbar-in { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .selbar { animation: none; } }
.selbar .btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.selbar .btn.ghost { background: transparent; border-color: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--bg); }
.selbar :focus-visible { outline-color: var(--bg); }
td.sel, th.sel { width: 1%; padding-right: 0; }
td.sel input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; vertical-align: middle; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--grid); border: 1px solid var(--line-strong); }
.dots i.on { background: var(--c2); border-color: var(--c2); }
.dots.full i.on { background: var(--t4); border-color: var(--t4); }
.tl-undo { position: fixed; z-index: 71; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg); padding: 8px 8px 8px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.tl-undo.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tl-undo .btn { background: transparent; border-color: color-mix(in srgb, var(--bg) 45%, transparent); color: var(--bg); }
.tl-undo .btn:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.tl-undo :focus-visible { outline-color: var(--bg); }
.row-actions { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.sm-link { color: var(--primary-ink); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.sm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mute { color: var(--muted); }
.wrapcell { white-space: normal !important; }
@media (max-width: 920px) {
.th { grid-template-columns: minmax(0, 1fr); }
.th h1 { font-size: 24px; }
.tl-teach { grid-template-columns: minmax(0, 1fr); }
.tl-teach li { border-left: 0; border-top: 1px solid var(--line); }
.tl-teach li:first-child { border-top: 0; }
.kv { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr); padding: 7px 12px; }
}
@media (max-width: 600px) {
.th { padding: 14px; }
.th h1 { font-size: 21px; }
.dial { width: 124px; height: 124px; }
.dial b { font-size: 33px; }
.fld.sm { flex: 1 1 130px; }
.selbar { padding: 10px 12px; }
}
.tl-view .toolbar.pad { padding: 10px 16px; gap: 10px 14px; }
.tl-view .toolbar .select select { padding: 5px 8px; }
.tl-view .toolbar .range input { width: 96px; }
.tl-view .toolbar .count { white-space: nowrap; }
.sg-top { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); gap: 14px; align-items: start; }
.sg-verdict { display: grid; gap: 10px; align-content: start; padding: 20px 22px; border-radius: var(--radius); background: var(--vc); color: var(--von); }
.sg-verdict.v-none { background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); --von: var(--ink); }
.sg-verdict.v-info { background: var(--raised); color: var(--ink); border: 1px solid var(--line-strong); border-left: 4px solid var(--c2); --von: var(--ink); }
.sg-verdict small { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.sg-verdict strong { font: 800 clamp(26px, 3.2vw, 36px)/1.05 var(--display); letter-spacing: -0.02em; }
.sg-verdict p { font-size: 13.5px; line-height: 1.5; font-weight: 500; }
.sg-conf { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; margin-top: 4px; }
.sg-conf .mbar { background: color-mix(in srgb, var(--von) 22%, transparent); }
.sg-conf-s { font-size: 12px !important; opacity: .85; }
.sg-ev, .sg-pages, .pl-links { display: grid; }
.sg-ev li { display: grid; gap: 4px; padding: 11px 18px; border-top: 1px solid var(--line); }
.sg-ev li:first-child { border-top: 0; }
.sg-ev-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sg-ev-t { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.sg-ev-t span { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.sg-ev-u a, .sg-pages a, .pl-links a, .kv a { color: var(--c2-ink); text-decoration: none; font-size: 12.5px; overflow-wrap: anywhere; }
.sg-ev-u a:hover, .sg-pages a:hover, .pl-links a:hover, .kv a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-pages li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); align-items: start; }
.sg-pages li:first-child { border-top: 0; }
.sg-pages b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.sg-rel { display: grid; }
.sg-rel li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 4ch; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--line); font-size: 13px; }
.sg-rel li:first-child { border-top: 0; }
.sg-rel span { color: var(--ink-2); font-weight: 600; }
.sg-rel b { text-align: right; }
.sg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-actions > b { margin-right: 4px; }
.sg-actions .hint { margin-left: auto; }
.vt-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: 14px; align-items: stretch; }
.vt-score { display: flex; align-items: center; gap: 22px; border-left: 6px solid var(--vc); }
.vt-verdict { display: grid; gap: 6px; min-width: 0; }
.vt-verdict small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.vt-verdict strong { font: 800 clamp(24px, 3vw, 34px)/1.05 var(--display); letter-spacing: -0.02em; color: var(--vi); }
.vt-verdict p { color: var(--ink-2); font-size: 13.5px; max-width: 46ch; }
.vt-go { display: grid; gap: 12px; align-content: start; }
.vt-table td { white-space: normal; }
.vt-table .vt-detail { color: var(--ink-2); font-size: 13px; }
.vt-table .vt-bar { width: 110px; }
.vt-table tfoot td { border-top: 2px solid var(--line-strong); background: var(--raised); padding-top: 10px; padding-bottom: 10px; }
.vt-pts { display: inline-block; min-width: 3.4ch; text-align: center; font-weight: 700; border-radius: 4px; padding: 1px 7px; }
.vt-pts.pos { background: var(--good-soft); color: var(--good); }
.vt-pts.neg { background: var(--bad-soft); color: var(--bad); }
.vt-pts.zero { background: var(--raised); color: var(--muted); }
.vt-pts.total { background: var(--ink); color: var(--surface); font-size: 14px; }
.note-box .ico-w { display: contents; }
.pl-res { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: 0; }
.pl-checks { display: grid; align-content: start; padding: 8px 0; border-right: 1px solid var(--line); }
.pl-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 8px 18px; align-items: start; font-weight: 600; }
.pl-checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 4px; stroke-width: 2.4; background: var(--vc); color: var(--von); }
.pl-checks small { font-weight: 500; color: var(--muted); }
.pl-kv .kv { padding: 7px 18px; }
.pl-links li { display: grid; gap: 3px; padding: 9px 18px; border-top: 1px solid var(--line); }
.pl-links li:first-child { border-top: 0; }
.pl-l-h { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pl-notes { display: grid; border-top: 1px solid var(--line); }
.pl-notes li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 18px; font-size: 13px; color: var(--ink-2); }
.pl-notes svg { width: 16px; height: 16px; color: var(--muted); margin-top: 2px; }
.pl-ch { max-width: 260px; font-size: 12.5px; }
.hist { display: inline-flex; gap: 3px; align-items: center; }
.hist i { width: 9px; height: 18px; border-radius: 2px; background: var(--vc); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: var(--bad); filter: brightness(1.1); }
#plTable td.url { max-width: 420px; }
.wrapkv dd { font-weight: 500; }
.pr-funnel { display: grid; gap: 8px; }
.pr-fh { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.pr-funnel .stack { height: 14px; gap: 2px; }
.pr-add { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); background: var(--raised); }
.pr-add .form-error:empty { display: none; }
.pr-status { appearance: none; background: var(--surface) linear-gradient(var(--sw, var(--t0)), var(--sw, var(--t0))) left 0 center / 4px 100% no-repeat; border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 24px 5px 12px; font-weight: 600; font-size: 12.5px; cursor: pointer; background-image: linear-gradient(var(--sw, var(--t0)), var(--sw, var(--t0))), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2368635a' stroke-width='1.6'%3E%3Cpath d='M3 4.500l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left center, right 7px center; background-size: 4px 100%, 12px; }
.pr-status:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pr-next { min-width: 240px; max-width: 360px; }
.pr-next b { font-weight: 600; font-size: 13px; }
.pr-next small { display: block; margin-top: 2px; }
.pr-note { max-width: 240px; color: var(--ink-2); font-size: 13px; }
tr.ed td { background: var(--raised); padding: 12px 18px 14px; white-space: normal; }
tr.ed:hover { background: var(--raised); }
.pr-ed { display: grid; gap: 10px; }
.pr-ed .form-error { margin: 0; }
.pr-ed textarea { padding: 8px 10px; }
.pf-filters { display: grid; gap: 12px; }
.pf-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.pf-f { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-f > span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); flex: none; }
.pf-cats { align-items: flex-start; }
.pf-cats .chips-row { flex: 1; }
.lt { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 8px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--ink-2); }
.lt-dofollow { background: var(--good-soft); border-color: transparent; color: var(--good); }
.lt-nofollow { background: var(--raised); color: var(--ink-2); }
.lt-ugc { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.lt-karışık { background: var(--c3-soft); border-color: transparent; color: var(--c3-ink); }
.lt-bilinmiyor { border-style: dashed; color: var(--muted); font-weight: 600; }
.pf-ver { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); }
.pf-ver.ok { color: var(--good); font-weight: 600; }
.pf-ver svg { width: 13px; height: 13px; stroke-width: 2.4; }
td.pf-notes { min-width: 280px; max-width: 420px; font-size: 12.5px; color: var(--ink-2); }
td.pf-notes p + p { margin-top: 3px; }
td.pf-notes b { color: var(--ink); font-weight: 700; }
@media (max-width: 920px) {
.sg-top, .vt-top, .pl-res { grid-template-columns: minmax(0, 1fr); }
.pl-checks { border-right: 0; border-bottom: 1px solid var(--line); }
.vt-score { flex-direction: column; align-items: flex-start; }
.pf-row { gap: 10px 14px; }
}
@media (max-width: 600px) {
.sg-rel li { grid-template-columns: 70px minmax(0, 1fr) 3ch; padding: 9px 12px; }
.sg-ev li, .sg-pages li { padding-left: 12px; padding-right: 12px; }
.pf-f { flex-wrap: wrap; }
}
#pfTable th, #pfTable td { padding: 8px 12px; }
#pfTable th:first-child, #pfTable td:first-child { padding-left: 18px; }
#pfTable .scorecell i { width: 56px; }
#pfTable td.pf-notes { min-width: 240px; max-width: 360px; }
.pr-funnel .dist-legend { padding: 10px 0 0; }
.pr-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; padding: 12px 14px 16px; overflow-x: auto; align-items: start; }
.pr-col { background: var(--raised); border: 1px solid var(--line); border-top: 4px solid var(--sw, var(--t0)); border-radius: var(--radius); min-width: 0; }
.pr-col > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px 7px; }
.pr-col > header b { font: 700 13px/1.2 var(--display); }
.pr-col > header small { color: var(--muted); font-weight: 700; }
.pr-cards { display: grid; gap: 8px; padding: 0 8px 10px; }
.pr-card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; min-width: 0; transition: border-color var(--mo-fast, 120ms) ease; }
.pr-card:hover { border-color: var(--line-strong); }
.pr-card-d { min-width: 0; overflow: hidden; }
.pr-card-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.pr-card .pr-status { width: 100%; }
.pr-none { padding: 4px 6px 8px; text-align: center; }
@media (max-width: 900px) { .pr-board { grid-auto-columns: minmax(200px, 72%); } }
.fld-l { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }
.au-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 14px; align-items: start; }
.au-score { display: flex; align-items: center; gap: 22px; border-left: 6px solid var(--vc); }
.au-sc-main { display: grid; gap: 8px; min-width: 0; }
.au-sc-main small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.au-sc-main strong { font: 800 clamp(22px, 2.6vw, 30px)/1.05 var(--display); letter-spacing: -0.02em; color: var(--vi); }
.au-ns { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; width: fit-content; }
.au-n { display: grid; padding: 6px 14px; min-width: 76px; border-left: 1px solid var(--line); }
.au-n:first-child { border-left: 0; }
.au-n b { font: 700 22px/1.1 var(--display); color: var(--vi); }
.au-n span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.au-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; }
.au-meta a { color: var(--c2-ink); text-decoration: none; overflow-wrap: anywhere; }
.au-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-fix ol { display: grid; list-style: none; margin: 0; padding: 0; }
.au-fix li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); border-left: 4px solid var(--vc); }
.au-fix li:first-child { border-top: 0; }
.au-fix li > i { font: 800 13px/26px var(--display); width: 26px; height: 26px; text-align: center; border-radius: 50%; background: var(--vc); color: var(--von); font-style: normal; }
.au-fix b { display: block; font-weight: 700; font-size: 13.5px; }
.au-fix span { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.au-flash { animation: au-flash 900ms var(--mo-out, ease-out); }
@keyframes au-flash { 0% { outline: 3px solid var(--c1, #ff6a1a); outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { .au-flash { animation: none; } }
.au-groups { columns: 2; column-gap: 14px; }
.au-groups > .au-g { break-inside: avoid; margin-bottom: 14px; display: inline-block; width: 100%; }
.au-g .card-head { min-height: 42px; }
.au-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--vc); flex: none; }
.au-checks { display: grid; }
.au-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 18px; border-top: 1px solid var(--line); }
.au-checks li:first-child { border-top: 0; }
.au-checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 4px; stroke-width: 2.4; margin-top: 1px; background: var(--vc); color: var(--von); }
.au-checks b { display: block; font-weight: 700; font-size: 13.5px; }
.au-checks span { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.au-gl > small { display: block; padding: 8px 18px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); background: var(--raised); border-top: 1px solid var(--line); }
.au-gl:first-of-type > small { border-top: 0; }
.au-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.au-box { padding: 14px 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; min-width: 0; }
.au-box:nth-child(odd) { border-right: 1px solid var(--line); }
.au-data > .au-box:nth-child(-n+2) { border-top: 0; }
dl.au-box { padding: 6px 0; gap: 0; }
dl.au-box .kv { padding: 6px 18px; }
.au-box h3 { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 0; }
.au-box h3:first-child { margin-top: 0; }
.au-box p { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.au-box p.au-big { font: 600 15px/1.35 var(--font); color: var(--ink); }
.au-warn { color: var(--bad) !important; font-weight: 600; }
.au-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.au-h1 { display: grid; gap: 5px; font-size: 13px; }
.au-ext { display: grid; }
.au-ext li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 3ch; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.au-ext li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-ext b { text-align: right; }
.au-hl { display: grid; gap: 4px; font-size: 12.5px; }
.au-hl li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.au-hl a, .au-chain a, .au-meta a { color: var(--c2-ink); }
.au-chain { display: grid; }
.au-chain li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 9px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.au-chain li:first-child { border-top: 0; }
.au-chain li > span:not(.tag) { overflow-wrap: anywhere; color: var(--ink-2); }
.au-chain em { grid-column: 3; font-style: normal; color: var(--muted); overflow-wrap: anywhere; }
.au-chain li.end { background: var(--raised); }
.au-ch { display: grid; border-top: 1px solid var(--line); }
.au-ch li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 18px; font-size: 12.5px; border-top: 1px solid var(--line); }
.au-ch li:first-child { border-top: 0; }
.au-ch span { overflow-wrap: anywhere; color: var(--ink-2); }
.au-secs { display: grid; }
.au-sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 18px; border-top: 1px solid var(--line); align-items: center; font-size: 13px; }
.au-sec:first-child { border-top: 0; }
.au-sec span { font-weight: 600; overflow-wrap: anywhere; }
.au-sec b { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 4px; background: color-mix(in srgb, var(--vc) 18%, var(--surface)); color: var(--vi); }
.au-sec code { grid-column: 1 / -1; overflow-wrap: anywhere; }
.au-tech { display: grid; gap: 10px; padding: 12px 18px; }
.au-tech small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.pc-grid { align-items: start; }
.pc-txt { display: grid; gap: 4px; }
.pc-txt li { display: block; overflow-wrap: anywhere; word-break: break-all; }
.pc-issues { display: grid; gap: 3px; }
.pc-issues li { color: var(--bad); font-weight: 500; }
.kv dd .code { display: inline-block; margin: 1px 2px 1px 0; overflow-wrap: anywhere; word-break: break-all; }
.stat b .vchip { font-size: 13px; vertical-align: middle; }
.lb-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; line-height: 1; text-align: center; border-radius: 4px; font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.lb-pos.top { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; padding: 0; }
.lb-pos.top { color: #191713; }
.lb-pos.p1 { background: var(--gold); } .lb-pos.p2 { background: var(--silver); } .lb-pos.p3 { background: var(--bronze); }
#lbTable th.pos, #lbTable td.pos { width: 1%; text-align: left; padding-left: 18px; }
#lbDist li { grid-template-columns: 54px minmax(0, 1fr) 44px; }
.hi-titles { display: grid; }
.hi-titles li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); align-items: start; }
.hi-titles li:first-child { border-top: 0; }
.hi-titles b { font: 700 15px var(--display); color: var(--primary-ink); }
.hi-titles span { display: block; font-weight: 600; overflow-wrap: anywhere; }
.hi-titles a { color: var(--c2-ink); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.hi-titles a:hover { text-decoration: underline; text-underline-offset: 3px; }
#hiChart svg .bar-total { fill: var(--line-strong); }
#hiNa .form-error:empty { display: none; }
@media (max-width: 1100px) {
.au-top { grid-template-columns: minmax(0, 1fr); }
.au-groups { columns: 1; }
}
@media (max-width: 920px) {
.au-data { grid-template-columns: minmax(0, 1fr); }
.au-box:nth-child(odd) { border-right: 0; }
.au-data > .au-box:nth-child(2) { border-top: 1px solid var(--line); }
.au-score { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
.au-checks li { padding: 9px 12px; }
.au-checks li > .code { display: none; }
.au-chain li { grid-template-columns: auto minmax(0, 1fr); padding: 9px 12px; }
.au-chain em { grid-column: 1 / -1; }
.hi-titles li { padding: 10px 12px; grid-template-columns: 44px minmax(0, 1fr); }
}
#lbBody .g-wide { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
#lbTable th, #lbTable td { padding: 8px 12px; }
#lbTable .scorecell i { width: 56px; }
@media (max-width: 1100px) { #lbBody .g-wide { grid-template-columns: minmax(0, 1fr); } }
.pc-raw summary { cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.pc-raw[open] summary { margin-bottom: 6px; }
.hi-conf { --cc: var(--v-warn); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-left: 3px solid var(--cc); border-radius: var(--radius); background: var(--surface); overflow: hidden; animation: rise .4s var(--ease) both; }
.hi-conf.conf-hi { --cc: var(--v-ok); } .hi-conf.conf-lo { --cc: var(--v-risk); }
.hi-conf > div { display: grid; gap: 3px; padding: 12px 16px; min-width: 0; }
.hi-conf > div + div { border-left: 1px solid var(--line); }
.hi-conf small { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.hi-conf b { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.hi-conf i { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.hi-conf u { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--cc); animation: grow .8s var(--ease) both; }
.hi-conf p { grid-column: 1 / -1; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--raised); color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 620px) {
.hi-conf { grid-template-columns: minmax(0, 1fr); }
.hi-conf > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .hi-conf, .hi-conf u { animation: none; } }
.dx { --dx-up: var(--good); --dx-down: var(--bad); }
.dx .visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dx-in { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.dx-formnote { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.dx-formnote svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.dx-formrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dx-formrow .btn.primary { margin-left: auto; }
.dx-costline { font-size: 12.5px; color: var(--muted); }
.dx-cost i, .dx-free i, .dx-gate-facts .cost i, .dx-gate-facts .free i { font-style: normal; font: 700 12px var(--mono); padding: 1px 7px; border-radius: 4px; margin-right: 7px; background: var(--primary-soft); color: var(--primary-ink); }
.dx-free i, .dx-gate-facts .free i { background: var(--good-soft); color: var(--good); font-family: var(--font); }
.dx-est { display: inline-block; font: 700 10.5px/1.5 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--c3-ink); background: var(--c3-soft); border-radius: 4px; padding: 0 6px; cursor: help; vertical-align: middle; }
.dx-mute { color: var(--muted); }
.dx-none { color: var(--muted); font-style: normal; font-size: 12.5px; }
.dx-explain { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--c2); border-radius: 6px; background: var(--surface); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.dx-explain-ico svg { width: 17px; height: 17px; color: var(--c2); margin-top: 1px; display: block; }
.dx-explain p { margin: 0; max-width: 110ch; }
.dx-explain a { color: var(--primary-ink); font-weight: 700; text-underline-offset: 3px; }
.dx-gate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--side-bg); color: var(--side-ink); border: 1px solid var(--side-bg); }
:root[data-theme="dark"] .dx-gate { background: var(--surface); border-color: var(--line); color: var(--ink); }
.dx-gate-k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); margin-bottom: 4px; }
:root[data-theme="dark"] .dx-gate-k { color: var(--muted); }
.dx-gate-main > b { display: block; font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; }
.dx-gate-main > p:not(.dx-gate-k) { margin-top: 5px; max-width: 74ch; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, currentColor 80%, transparent); }
.dx-gate-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: color-mix(in srgb, currentColor 75%, transparent); }
.dx-gate-facts li { display: inline-flex; align-items: center; }
.dx-gate-facts li:not(.cost):not(.free)::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--primary); margin-right: 7px; }
.dx-gate-facts .cost i { background: color-mix(in srgb, var(--primary) 22%, transparent); color: #ffb98d; }
:root[data-theme="dark"] .dx-gate-facts .cost i { color: var(--primary-ink); }
.dx-gate-facts .free i { background: color-mix(in srgb, var(--v-ok) 28%, transparent); color: #8ee6a3; }
.dx-gate-act { display: grid; gap: 6px; justify-items: end; text-align: right; }
.dx-gate-act small { font-size: 11.5px; color: var(--side-muted); max-width: 26ch; }
:root[data-theme="dark"] .dx-gate-act small { color: var(--muted); }
.dx-gate-act.row { display: flex; flex-wrap: wrap; gap: 8px; justify-items: start; text-align: left; margin-top: 12px; }
.dx-gate .btn.primary { padding: 10px 18px; font-size: 14px; }
.dx-gate :focus-visible { outline-color: var(--side-ink); }
:root[data-theme="dark"] .dx-gate :focus-visible { outline-color: var(--ink); }
.btn.is-busy { position: relative; cursor: progress; }
.btn.is-busy::after { content: ""; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; }
.btn small { font-weight: 600; opacity: .75; margin-left: 6px; font-size: 11.5px; }
.dx-state.limit, .dx-state.forbidden { border-style: solid; border-color: color-mix(in srgb, var(--v-warn) 55%, var(--line)); }
.dx-state.off { background: var(--raised); }
.dx-state .btn { margin-top: 12px; }
.dx-stats .stat b { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dx-stats .stat b small { font: 600 13px var(--font); color: var(--muted); letter-spacing: 0; }
.dx-stats .stat b .up { color: var(--good); font-size: 22px; } .dx-stats .stat b .down { color: var(--bad); font-size: 22px; }
.dx-stats .stat b svg { width: 14px; height: 14px; stroke-width: 2.2; margin-right: 2px; }
.dx-sub { display: block; font-size: 12px; color: var(--muted); }
.dx-split { display: block; height: 6px; border-radius: 2px; background: var(--grid); overflow: hidden; margin-top: 5px; max-width: 160px; }
.dx-split i { display: block; height: 100%; width: var(--w); background: var(--c4); animation: grow .8s var(--ease) both; }
.dx-chart { min-height: 220px; }
.dx-chart .dx-bar .bar { transform-box: fill-box; transform-origin: bottom; animation: growY .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dx-chart .dx-bar .hit { fill: transparent; }
.dx-chart .dx-bar:hover .hit { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.dx-chart .val { fill: var(--ink); font-size: 13px; font-weight: 700; }
.dx-chart .lab { fill: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.dx-chart .dx-pt { fill: var(--surface); stroke: var(--c4); stroke-width: 2; cursor: default; transition: r .15s; }
.dx-chart .dx-pt:hover { r: 5.5; }
.dx-chart .dx-pt.out { stroke: var(--muted); stroke-dasharray: 2 2; }
.dx-rkgrid .dx-chart .line { stroke: var(--c2); }
.dx-rkgrid .dx-chart .dx-pt { stroke: var(--c2); }
.dx-chart .dx-area { fill: var(--c4); }
.dx-mv { display: grid; }
.dx-mv li { display: grid; grid-template-columns: 8px minmax(70px, 1fr) minmax(40px, 2fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.dx-mv li:last-child { border-bottom: 0; }
.dx-mv i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); }
.dx-mv u { display: block; height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.dx-mv u s { display: block; height: 100%; width: var(--w); background: var(--sw); animation: grow .8s var(--ease) both; }
.dx-mv b { font-weight: 700; text-align: right; min-width: 7ch; }
.dx-mv-note { margin-top: 10px; }
.dx-tabs > .card-head { padding-top: 0; padding-bottom: 0; align-items: flex-end; }
.dx-tabs .tl-tabs { border-bottom: 0; }
.dx-filters { padding: 10px 18px; gap: 10px 12px; }
.dx-filters select, .dx-filters input[type="number"] { padding: 6px 8px; }
.dx-rng { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dx-rng input { width: 70px; }
.dx-rng label { font-weight: 600; }
.dx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--raised); }
.dx-seln { margin-right: auto; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.dx-qform { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.dx-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--raised); }
.dx-qrow .dx-qform { margin: 0; }
.dx-qrow #bpQNote, .dx-qrow .btn { margin-left: auto; }
.dx-qrow #bpQNote ~ .btn { margin-left: 0; }
.dx-chips { display: inline-flex; gap: 6px; }
.dx-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-foot > .dx-pager { flex: 1; }
.dx-pg { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.dx-pg b { font-weight: 700; min-width: 5ch; text-align: center; color: var(--ink); }
.dx-pop { border-bottom: 1px solid var(--line); background: var(--raised); padding: 12px 18px; }
.dx-pop-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 13px; }
.dx-pop-in label { font-weight: 700; }
.dx-pop-in select { max-width: 360px; }
.dx-pop-in .hint { flex-basis: 100%; }
.dx td.grow, .dx th.grow { width: auto; min-width: 220px; max-width: 380px; white-space: normal; }
.dx-kw { font-weight: 600; overflow-wrap: anywhere; }
.dx-upd { font: 700 10.5px var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--good-soft); color: var(--good); }
th.dx-chk, td.dx-chk { width: 1%; padding-right: 0; }
td.dx-chk input, th.dx-chk input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; vertical-align: middle; }
tr.is-sel td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
tr.is-lost td { opacity: .72; }
.dx-pos { display: inline-flex; align-items: center; gap: 7px; }
.dx-pos b { font: 700 14px var(--display); min-width: 2.2ch; }
.dx-pos.top3 b { color: var(--good); }
.dx-pos.top10 b { color: var(--c2-ink); }
.dx-new { font: 700 10.5px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--c4-ink); background: var(--c4-soft); padding: 1px 6px; border-radius: 4px; }
.dx-out { font: 600 13px var(--font); color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 0 6px; }
.dx-int { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 4px; padding: 1px 8px; white-space: nowrap; }
.dx-int.i-info { background: var(--c2-soft); color: var(--c2-ink); }
.dx-int.i-com { background: var(--c3-soft); color: var(--c3-ink); }
.dx-int.i-nav { background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); padding: 0 7px; }
.dx-int.i-trx { background: var(--c1-soft); color: var(--c1-ink); }
.dx-diff, .dx-comp { display: inline-flex; align-items: center; gap: 8px; }
.dx-diff i, .dx-comp i { display: block; width: 52px; height: 6px; border-radius: 2px; background: var(--grid); position: relative; overflow: hidden; }
.dx-diff i::after, .dx-comp i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--dc, var(--c4)); }
table.fresh .dx-diff i::after, table.fresh .dx-comp i::after { animation: grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
.dx-diff.easy { --dc: var(--t4); } .dx-diff.mid { --dc: var(--t1); } .dx-diff.hard { --dc: var(--v-spam); }
.dx-comp { --dc: var(--c3); }
.dx-diff b, .dx-comp b { font-weight: 700; font-size: 12.5px; min-width: 2.4ch; }
.dx-spark { display: block; overflow: visible; }
.dx-spark path { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-spark circle { fill: var(--muted); stroke: none; }
.dx-spark.up path { stroke: var(--good); } .dx-spark.up circle { fill: var(--good); }
.dx-spark.down path { stroke: var(--bad); } .dx-spark.down circle { fill: var(--bad); }
.dx-url { color: var(--c2-ink); text-decoration: none; font-size: 12.5px; overflow-wrap: anywhere; }
.dx-url:hover { text-decoration: underline; text-underline-offset: 3px; }
td .delta { margin: 0; }
.dx-bar-cell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.dx-bar-cell i { display: block; width: 90px; height: 6px; border-radius: 2px; background: var(--grid); position: relative; overflow: hidden; }
.dx-bar-cell i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c1); }
.dx-bar-cell.c3 i::after { background: var(--c3); }
table.fresh .dx-bar-cell i::after { animation: grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
.dx-bar-cell b { font-weight: 700; min-width: 5ch; text-align: right; }
.dx-pair { display: grid; gap: 1px; }
.dx-pair .dx-url { font-size: 11.5px; color: var(--muted); }
td .dx-pair + .dx-pair { margin-top: 0; }
.dx-source { display: grid; gap: 1px; min-width: 0; }
.dx-source b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
td.dx-src { white-space: normal; }
.dx-rank { font: 700 12.5px var(--mono); color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.dx-anchor { font-weight: 600; }
.dx-types { display: grid; gap: 10px; }
.dx-types-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.dx-stack { height: 12px; border-radius: 3px; }
.dx-stack i { min-width: 4px; }
.dx-types .legend-inline { justify-content: flex-start; margin-top: 0; }
.legend-inline i { background: var(--sw); }
.dx-projects .table-wrap { max-height: 360px; }
.dx-pname { all: unset; cursor: pointer; display: grid; gap: 0; border-radius: 4px; padding: 1px 0; }
.dx-pname b { font-weight: 700; }
.dx-pname small { color: var(--muted); font-size: 12px; }
.dx-pname:hover b, .dx-pname.on b { color: var(--primary-ink); }
.dx-pname.on b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); margin-right: 8px; }
.dx-pname:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dx-cap { color: var(--muted); }
td .del.armed { background: var(--bad-soft); color: var(--bad); }
.dx-pform { background: var(--raised); }
.dx-ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-ph h2 { font-size: 20px; margin-right: 4px; }
.dx-movers { display: grid; }
.dx-movers li { border-bottom: 1px solid var(--line); }
.dx-movers li:last-child { border-bottom: 0; }
.dx-movers button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 4px; cursor: pointer; border-radius: 4px; }
.dx-movers button:hover { background: var(--raised); }
.dx-movers button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.dx-movers b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-moverempty { padding: 6px 0; }
.dx-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dx-kwbtn { all: unset; cursor: pointer; font-weight: 600; border-radius: 3px; }
.dx-kwbtn:hover, .dx-kwbtn.on { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.dx-kwbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dx-hhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dx-hhead b { margin-right: auto; overflow-wrap: anywhere; }
.dx-add textarea { min-height: 110px; }
.dx-addrow { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dx-check { display: grid; gap: 8px; align-content: start; }
.dx-check-body { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.dx-check .dx-gate-facts { color: var(--ink-2); margin-top: 2px; }
.dx-check .dx-gate-facts .cost i { background: var(--primary-soft); color: var(--primary-ink); }
.dx-capcard { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 32px; align-items: center; padding: 20px 22px; --cc: var(--c4); }
.dx-capcard.warn { --cc: var(--t1); } .dx-capcard.risk { --cc: var(--v-spam); }
.dx-capcard .dx-gate-k { color: var(--muted); }
.dx-capnum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dx-capnum b { font: 700 40px/1.1 var(--display); letter-spacing: -0.02em; }
.dx-capnum span { color: var(--muted); font-size: 14px; }
.dx-meter { position: relative; height: 14px; border-radius: 3px; background: var(--grid); margin: 12px 0 6px; overflow: visible; }
.dx-meter i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--cc); animation: grow 1s var(--ease) both; }
.dx-meter s { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.dx-meter-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.dx-capnote { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; padding-left: 16px; border-left: 3px solid var(--cc); }
.dx-hit { display: grid; justify-items: center; gap: 4px; }
.dx-tags { display: grid; }
.dx-tags li { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(40px, 2fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.dx-tags li:last-child { border-bottom: 0; }
.dx-tags u { display: block; height: 8px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.dx-tags u s { display: block; height: 100%; width: var(--w); background: var(--c1); animation: grow .8s var(--ease) both; }
.dx-tags b { text-align: right; font-weight: 700; }
.dx-budget .tl-row { align-items: end; }
.dx-ob { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0; animation: rise .4s var(--ease) both; }
.dx-ob-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--raised); }
.dx-ob-k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.dx-ob-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.dx-ob-links { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.dx-ob-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dx-ob-c { display: grid; gap: 3px; padding: 12px 16px; border-left: 1px solid var(--line); min-width: 0; }
.dx-ob-c:first-child { border-left: 0; }
.dx-ob-c small { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-ob-c small i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); flex: none; }
.dx-ob-c b { font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.dx-ob-c span { font-size: 12px; color: var(--muted); }
.dx-ob-quiet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; font-size: 13px; color: var(--ink-2); }
.dx-ob-quiet p { margin: 0; }
.dx-ob-quiet .hint { margin-left: auto; }
@media (max-width: 1100px) {
.dx-capcard { grid-template-columns: minmax(0, 1fr); }
.dx-stats[style*="--n:5"] { --n: 3; }
.dx-stats[style*="--n:5"] .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
.dx-stats[style*="--n:5"] .stat:nth-child(4) { border-left: 0; }
}
@media (max-width: 920px) {
.dx-gate { grid-template-columns: minmax(0, 1fr); }
.dx-gate-act { justify-items: start; text-align: left; }
.dx-ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-ob-c:nth-child(3) { border-left: 0; }
.dx-ob-c:nth-child(n+3) { border-top: 1px solid var(--line); }
.dx-formrow .btn.primary { margin-left: 0; }
.dx-rng input { width: 64px; }
.dx td.grow, .dx th.grow { min-width: 170px; }
}
@media (max-width: 600px) {
.dx-stats[style*="--n:5"] { --n: 2; }
.dx-stats[style*="--n:5"] .stat:nth-child(odd) { border-left: 0; }
.dx-stats[style*="--n:5"] .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.dx-stats[style*="--n:5"] .stat:nth-child(4) { border-left: 1px solid var(--line); }
.dx-capnum b { font-size: 32px; }
.dx-filters { padding: 10px 12px; }
.dx-filters .input-ico, .dx-filters .input-ico input { width: 100%; }
.dx-actions, .dx-qrow { padding: 8px 12px; }
.dx-ob-head { padding: 8px 12px; }
.dx-ob-links { margin-left: 0; width: 100%; }
.dx-ob-quiet { padding: 9px 12px; }
.dx-mv li { grid-template-columns: 8px minmax(60px, 1fr) minmax(30px, 1.4fr) auto; gap: 8px; }
.dx-tags li { grid-template-columns: minmax(80px, 1fr) minmax(30px, 1.4fr) auto; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.dx-in, .dx-mv li, .dx-tags li, .dx-ob { animation: none !important; }
.btn.is-busy::after { animation-duration: 2s !important; }
}
.dx-rkgrid { align-items: start; }
.dx td:last-child .dx-spark, .dx td .dx-spark { margin-right: 6px; }
.dx-credits-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 14px; border: 1px solid var(--line); border-left: 3px solid var(--primary); background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface) 62%); }
.dx-credits-txt { min-width: 0; }
.dx-credits-txt h2 { margin: 0; font: 700 16px/1.25 var(--display); letter-spacing: -0.01em; }
.dx-credits-txt p { margin: 5px 0 0; color: var(--ink-2); font-size: 13.5px; max-width: 46ch; }
.dx-credits-act { display: flex; gap: 10px; flex: none; }
@media (max-width: 560px) { .dx-credits-cta { flex-direction: column; align-items: stretch; } .dx-credits-act { flex-wrap: wrap; } .dx-credits-act .btn { flex: 1; } }
.dx-tags li { padding: 10px 8px; border-radius: 8px; transition: background .2s; }
.dx-tags li:hover { background: color-mix(in srgb, var(--vc, var(--c1)) 8%, transparent); }
.dx-tags li:nth-child(5n+1) { --vc: var(--c1); } .dx-tags li:nth-child(5n+2) { --vc: var(--c2); } .dx-tags li:nth-child(5n+3) { --vc: var(--c4); }
.dx-tags li:nth-child(5n+4) { --vc: var(--c3); } .dx-tags li:nth-child(5n) { --vc: var(--c5); }
.dx-tags li > span { display: flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.dx-tags li > span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vc); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc) 22%, transparent); }
.dx-tags u { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--vc, var(--c1)) 14%, var(--grid)); }
.dx-tags u s { min-width: 6px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--vc) 70%, #fff), var(--vc)); }
.dx-tags b { font-variant-numeric: tabular-nums; }
.stat-strip .stat:nth-child(1) b { color: var(--c2-ink); } .stat-strip .stat:nth-child(2) b { color: var(--c4-ink); }
.stat-strip .stat:nth-child(3) b { color: var(--c1-ink); } .stat-strip .stat:nth-child(4) b { color: var(--c3-ink); }
.dx-capcard { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--c4) 9%, var(--surface))); }
.dx-capcard.warn { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--v-warn, var(--gold)) 12%, var(--surface))); }
.dx-capcard.risk { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--v-spam, var(--c5)) 12%, var(--surface))); }
@media (max-width: 700px) { .dx-tags li { padding: 9px 4px; } }
@media (max-width: 700px) {
.pf-f, .pf-f .seg { max-width: 100%; min-width: 0; }
.pf-f .seg { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; max-width: calc(100vw - 56px); }
.pf-f > div { min-width: 0; max-width: 100%; }
.pf-f .seg button { flex: none; }
}
.usermenu { position: relative; }
.usermenu[hidden], .quota-hint[hidden] { display: none; }
.um-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s, transform .12s; }
.um-btn:hover { background: var(--raised); }
.um-btn:active { transform: scale(.97); }
.um-btn[aria-expanded="true"] { background: var(--raised); border-color: var(--ink); }
.um-av { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; background: var(--ink); color: var(--surface); font: 700 13px var(--display); flex: none; }
.um-plan { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; font-style: normal; }
.um-plan.plan-starter { background: var(--c2-soft); color: var(--c2-ink); border-color: transparent; }
.um-plan.plan-pro { background: var(--c3-soft); color: var(--c3-ink); border-color: transparent; }
.um-plan.plan-agency { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.um-chev { width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease); }
.um-btn[aria-expanded="true"] .um-chev { transform: rotate(180deg); }
.um-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 6px; display: grid; gap: 1px; animation: rise .16s var(--ease) both; }
.um-who { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.um-who b { font: 700 14px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-who .um-plan { justify-self: start; margin-top: 4px; }
.um-pop [role="menuitem"] { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 5px; border: 0; background: none; color: var(--ink); font: 500 13.5px var(--font); text-decoration: none; cursor: pointer; }
.um-pop [role="menuitem"]:hover, .um-pop [role="menuitem"]:focus-visible { background: var(--raised); outline: 0; }
.um-pop [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.um-pop #umOut { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 5px 5px; color: var(--bad); font-weight: 600; padding-top: 10px; }
.um-pop #umOut:disabled { opacity: .6; cursor: progress; }
.quota-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); background: var(--raised); border-radius: 6px; padding: 5px 9px; white-space: nowrap; cursor: default; }
.quota-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--v-ok); flex: none; }
.quota-hint b { font-weight: 700; color: var(--ink); }
.quota-hint em { font-style: normal; color: var(--muted); }
.quota-hint.low i { background: var(--v-warn); }
.quota-hint.out { border-color: var(--v-spam); }
.quota-hint.out i { background: var(--v-spam); }
.dx-note { position: fixed; z-index: 65; right: 20px; bottom: 20px; max-width: min(440px, calc(100vw - 32px)); display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: var(--radius); background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.45; border: 1px solid var(--ink); }
.dx-note.on { display: flex; animation: rise .25s var(--ease) both; }
.dx-note .btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; flex: none; }
.dx-note .ghost-btn { color: var(--bg); flex: none; opacity: .8; }
.dx-note :focus-visible { outline-color: var(--bg); }
:root[data-theme="dark"] .dx-note { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .dx-note .ghost-btn { color: var(--ink); }
:root[data-theme="dark"] .dx-note :focus-visible { outline-color: var(--ink); }
@media (max-width: 920px) {
.um-plan:not(.um-pop .um-plan) { display: none; }
.quota-hint em { display: none; }
}
@media (max-width: 600px) {
.quota-hint { display: none; }
.um-chev { display: none; }
.um-btn { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .um-pop, .dx-note.on { animation: none; } }
@media (max-width: 640px) {
.dx-note { left: 10px; right: 10px; bottom: 10px; max-width: none; flex-wrap: wrap; }
.dx-note.on ~ .main, body:has(.dx-note.on) .main { padding-bottom: 96px; }
}
.rk { --rk-top3: var(--t4); --rk-top10: var(--c2); --rk-top20: var(--c3); --rk-out: var(--line-strong); }
.rk-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 34%, var(--side-bg)), var(--side-bg) 58%), var(--side-bg); }
.rk-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--c3) 45%, transparent), transparent 68%); animation: rk-float 9s ease-in-out infinite; }
.rk-hero > * { position: relative; z-index: 1; }
.rk-hero-top { display: flex; gap: 18px; align-items: center; }
.rk-hero-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--primary) 24%, transparent); border: 1px solid var(--side-line); }
.rk-hero-art .kosto { margin: 0; }
.rk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.rk-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.rk-hero h2 { font: 800 clamp(22px, 3.2vw, 32px)/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.rk-hero-txt > p:last-child { margin-top: 8px; max-width: 62ch; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--side-ink) 80%, transparent); text-wrap: pretty; }
.rk-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rk-how li { position: relative; display: grid; gap: 5px; align-content: start; padding: 13px 15px 12px; border-radius: 12px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 5%, transparent);
animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.rk-how li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 60%, var(--side-line)); background: color-mix(in srgb, var(--side-ink) 9%, transparent); }
.rk-how li:not(:last-child)::after { content: ""; position: absolute; top: 31px; right: -13px; width: 13px; height: 2px; background: var(--side-line); }
.rk-how-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font: 800 16px/1 var(--display); background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -6px var(--primary); }
.rk-how li:nth-child(2) .rk-how-n { background: var(--c2); box-shadow: 0 6px 16px -6px var(--c2); }
.rk-how li:nth-child(3) .rk-how-n { background: var(--c4); box-shadow: 0 6px 16px -6px var(--c4); }
.rk-how b { font: 700 16px/1.25 var(--display); margin-top: 4px; }
.rk-how p { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--side-ink) 74%, transparent); }
.rk-how em, .rk-free { justify-self: start; font: 700 11px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; margin-top: 4px; }
.rk-how em.free { background: color-mix(in srgb, var(--v-ok) 26%, transparent); color: var(--side-ink); }
.rk-how em.cost { background: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--side-ink); }
.rk-free { background: var(--good-soft); color: var(--good); margin: 0; }
.rk-start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.rk-form { display: grid; gap: 12px; padding: 18px; border-radius: 12px; }
.rk-form.first { border: 2px solid var(--primary); box-shadow: 5px 5px 0 var(--primary); }
.rk-form.new, .rk-form.edit { background: var(--raised); max-width: 760px; animation: rise .3s var(--ease) both; }
.rk-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-form-head h2 { font: 800 19px/1.2 var(--display); letter-spacing: -0.01em; }
.rk-form .fld { flex: 1 1 auto; }
.rk-form .fld label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--primary-ink); margin-left: 6px; }
.rk-form textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.rk-form .tl-row .fld.sm { flex: 1 1 130px; }
.rk-form .tl-row .fld.ct-fld { flex: 2 1 200px; }
.rk-form .form-error { margin: 0; color: var(--bad); font-size: 13px; font-weight: 600; }
.rk-form .form-error:empty { display: none; }
.rk-form-act { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.rk-form-act .hint { flex: 1 1 200px; line-height: 1.45; }
.btn.rk-big { padding: 11px 20px; font-size: 14.5px; border-radius: 8px; }
.rk-sample { position: relative; border-style: dashed; border-color: var(--line-strong); }
.rk-sample .rk-table { pointer-events: none; }
.rk-sample-tag { font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--c3-soft); color: var(--c3-ink); }
.rk-sites { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.rk-site { all: unset; box-sizing: border-box; flex: none; display: grid; gap: 1px; min-width: 150px; max-width: 260px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; scroll-snap-align: start;
transition: border-color .15s, transform .15s var(--ease), background .15s; }
.rk-site:hover { border-color: var(--ink); transform: translateY(-1px); }
.rk-site:active { transform: scale(.98); }
.rk-site:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rk-site b { font: 700 14.5px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-site small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rk-site.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 -3px 0 var(--primary); }
.rk-site.on b { color: var(--primary-ink); }
.rk-site.on small { color: var(--ink-2); }
.rk-site.add { display: inline-flex; align-items: center; gap: 7px; min-width: 0; border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-2); }
.rk-site.add svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .3s var(--spring); }
.rk-site.add:hover svg { transform: rotate(90deg); }
.rk-site.add b { font: 700 13px var(--font); }
.rk-phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-phead h2 { font: 800 22px/1.2 var(--display); letter-spacing: -0.02em; margin-right: 4px; overflow-wrap: anywhere; }
.rk-phead-act { margin-left: auto; display: inline-flex; gap: 6px; }
.rk-danger { color: var(--bad); min-width: 92px; }
.rk-danger.armed { background: var(--bad-soft); border-color: var(--bad); }
.rk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rk-steps li { position: relative; display: flex; align-items: center; gap: 11px; padding: 12px 16px; min-width: 0; }
.rk-steps li + li { border-left: 1px solid var(--line); }
.rk-steps li i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 800 13px/1 var(--display); font-style: normal; background: var(--raised); color: var(--muted); border: 1.5px solid var(--line-strong); }
.rk-steps li i svg { width: 15px; height: 15px; stroke-width: 2.6; }
.rk-steps li span { display: grid; min-width: 0; }
.rk-steps li b { font: 700 13.5px/1.3 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-steps li small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-steps li.done i { background: var(--good); border-color: var(--good); color: var(--surface); }
.rk-steps li.done b { color: var(--ink-2); }
.rk-steps li.now { background: var(--primary-soft); }
.rk-steps li.now i { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); animation: rk-ring 1.8s ease-out infinite; }
.rk-steps li.now b { color: var(--primary-ink); }
.rk-steps li.now small { color: var(--ink-2); }
.rk-steps li.todo { opacity: .75; }
#rkProject:not(.rk-still) .rk-steps li.done i svg { animation: pop .4s var(--spring) both; animation-delay: .25s; }
.rk-action { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--primary) 30%, var(--side-bg)), var(--side-bg) 62%), var(--side-bg); }
.rk-action::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 34%, color-mix(in srgb, var(--side-ink) 7%, transparent) 49%, transparent 64%); background-size: 260% 100%; animation: rk-sheen 6s ease-in-out infinite; }
.rk-action > * { position: relative; z-index: 1; }
.rk-action.done { background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--v-ok) 26%, var(--side-bg)), var(--side-bg) 62%), var(--side-bg); }
.rk-action.wait { background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--c2) 32%, var(--side-bg)), var(--side-bg) 62%), var(--side-bg); }
.rk-action.none { background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--c3) 30%, var(--side-bg)), var(--side-bg) 62%), var(--side-bg); }
.rk-action-k { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; }
.rk-action.done .rk-action-k { color: var(--v-ok); }
.rk-action.wait .rk-action-k, .rk-action.none .rk-action-k { color: color-mix(in srgb, var(--side-ink) 70%, transparent); }
.rk-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulse 1.2s ease-in-out infinite; }
.rk-action h3 { font: 800 clamp(18px, 2.4vw, 23px)/1.18 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.rk-action-main > p:not(.rk-action-k):not(.rk-action-note) { margin-top: 7px; max-width: 66ch; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--side-ink) 76%, transparent); text-wrap: pretty; }
.rk-action-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: color-mix(in srgb, var(--side-ink) 9%, transparent); border: 1px solid var(--side-line); animation: rise .35s var(--ease) both; }
.rk-action-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--primary); }
.rk-action .note-box { margin-top: 12px; color: var(--ink); }
.rk-action-side { display: grid; gap: 8px; justify-items: stretch; text-align: center; min-width: 250px; max-width: 320px; }
.rk-action-side small { font-size: 11.5px; line-height: 1.45; color: color-mix(in srgb, var(--side-ink) 62%, transparent); }
.btn.rk-run { position: relative; padding: 13px 18px; border-radius: 10px; font-size: 15px; gap: 10px; white-space: normal; box-shadow: 0 10px 26px -10px var(--primary); transition: background .15s, border-color .15s, transform .12s, box-shadow .2s; }
.btn.rk-run:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--primary); }
.btn.rk-run:active:not(:disabled) { transform: scale(.98); }
.btn.rk-run em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font: 800 13px/1 var(--font); padding: 6px 9px; border-radius: 7px; white-space: nowrap; background: color-mix(in srgb, var(--on-primary) 22%, transparent); color: var(--on-primary); }
.btn.rk-run em svg { width: 15px; height: 15px; }
.btn.rk-run em.free { text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.btn.rk-run:disabled { opacity: 1; cursor: default; box-shadow: none; background: color-mix(in srgb, var(--v-ok) 30%, transparent); border-color: color-mix(in srgb, var(--v-ok) 55%, transparent); color: var(--side-ink); }
.btn.rk-run.is-busy { opacity: .85; cursor: progress; background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.rk-run:disabled svg { width: 17px; height: 17px; stroke-width: 2.6; }
.rk-left { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--side-ink); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 6%, transparent); transition: border-color .15s; }
.rk-left:hover { border-color: var(--side-muted); }
.rk-left svg { width: 15px; height: 15px; color: var(--primary); flex: none; }
.rk-left.short { border-color: var(--primary); border-radius: 10px; line-height: 1.4; text-align: left; }
.rk-link { all: unset; cursor: pointer; justify-self: center; font-size: 12.5px; font-weight: 700; color: var(--side-ink); text-decoration: underline; text-underline-offset: 3px; border-radius: 3px; }
.rk-link:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 2px; }
#rkUpsell:empty { display: none; }
.rk-action.run { background: radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--c2) 36%, var(--side-bg)), var(--side-bg) 62%), var(--side-bg); }
.rk-action.run .rk-action-k { color: var(--side-ink); }
.rk-prog { height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--side-ink) 12%, transparent); border: 1px solid var(--side-line); }
.rk-prog i { position: relative; display: block; height: 100%; min-width: 12px; border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); transition: width .7s var(--ease); }
.rk-prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--on-primary) 55%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: rk-sheen 1.6s linear infinite; }
.rk-prog-n { font: 800 13.5px/1.3 var(--display); color: var(--side-ink); }
.rk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rk-kpi { position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 14px 16px 13px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 13%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--line)); transition: transform .2s var(--ease), border-color .2s; }
.rk-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kc); }
.rk-kpi:hover { transform: translateY(-2px); border-color: var(--kc); }
.rk-kpi small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-kpi b { display: flex; align-items: baseline; gap: 10px; font: 800 30px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.rk-kpi > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-mv { display: inline-flex; align-items: center; gap: 2px; font-size: 24px; }
.rk-mv svg { width: 15px; height: 15px; stroke-width: 2.4; }
.rk-mv.up { color: var(--good); }
.rk-mv.down { color: var(--bad); }
.rk-dist { display: grid; gap: 12px; }
.rk-dist-head h2 { font: 700 15px/1.3 var(--display); }
.rk-bar { display: flex; gap: 3px; height: 18px; border-radius: 9px; overflow: hidden; background: var(--grid); }
.rk-bar i { display: block; min-width: 6px; flex-basis: 0; border-radius: 3px; transform-origin: left; transition: filter .15s; }
.rk-bar i:hover { filter: brightness(1.15); }
#rkProject:not(.rk-still) .rk-bar i { animation: rk-growx .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.rk-bar .top3, .rk-legend .top3 { background: var(--rk-top3); }
.rk-bar .top10, .rk-legend .top10 { background: var(--rk-top10); }
.rk-bar .top20, .rk-legend .top20 { background: var(--rk-top20); }
.rk-bar .out, .rk-legend .out { background: var(--rk-out); }
.rk-bar .none, .rk-legend .none { background: repeating-linear-gradient(135deg, var(--line) 0 4px, var(--grid) 4px 8px); }
.rk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); }
.rk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rk-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rk-legend b { font-weight: 800; color: var(--ink); }
.rk-legend small { color: var(--muted); font-size: 11.5px; }
.rk-tcard .card-head .btn svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .25s var(--spring); }
.rk-tcard .card-head .btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.rk-add { display: grid; gap: 10px; padding: 14px 18px; background: var(--primary-soft); border-bottom: 1px solid var(--line); animation: rise .28s var(--ease) both; }
.rk-add textarea { width: 100%; min-height: 96px; resize: vertical; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; outline: 0; line-height: 1.5; transition: border-color .15s; }
.rk-add textarea:focus { border-color: var(--primary); }
.rk-add-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rk-add .hint { color: var(--ink-2); }
.rk-add .form-error { margin: 0; color: var(--bad); font-size: 13px; font-weight: 600; }
.rk-add .form-error:empty { display: none; }
.rk-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.rk-q { display: flex; align-items: center; gap: 7px; flex: 0 1 240px; min-width: 160px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); transition: border-color .15s, background .15s; }
.rk-q:focus-within { border-color: var(--ink); background: var(--surface); }
.rk-q svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.rk-q input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 7px 0; font-size: 13.5px; }
.rk-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.rk-chip:hover { border-color: var(--ink); }
.rk-chip:active { transform: scale(.96); }
.rk-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rk-chip b { font-weight: 800; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--ink-2); }
.rk-chip.up b { background: var(--good-soft); color: var(--good); }
.rk-chip.down b { background: var(--bad-soft); color: var(--bad); }
.rk-chip.top10 b { background: var(--c2-soft); color: var(--c2-ink); }
.rk-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.rk-chip[aria-pressed="true"] b { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); }
.rk-table td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.rk-table th, .rk-table td { padding-left: 14px; padding-right: 14px; }
.rk-table th:first-child, .rk-table td.rk-c-kw { width: 34%; min-width: 190px; white-space: normal; padding-left: 18px; }
.rk-table tr.rk-row { cursor: pointer; }
.rk-sample .rk-table tr.rk-row { cursor: default; }
.rk-table tr.rk-row.open { background: var(--primary-soft); }
.rk-table tr.rk-row.open td { border-top-color: var(--primary); }
.rk-kw { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; line-height: 1.35; overflow-wrap: break-word; border-radius: 4px; }
.rk-kw svg { width: 14px; height: 14px; flex: none; color: var(--muted); stroke-width: 2.2; transition: transform .25s var(--ease), color .15s; }
.rk-kw[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--primary); }
tr.rk-row:hover .rk-kw { color: var(--primary-ink); }
tr.rk-row:hover .rk-kw svg { color: var(--primary); }
.rk-kw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
span.rk-kw { cursor: default; }
.rk-pos { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 9px; border-radius: 9px; font: 800 15px/1 var(--display); background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
.rk-pos.top3 { background: var(--rk-top3); border-color: var(--rk-top3); color: var(--surface); box-shadow: 0 5px 12px -6px var(--rk-top3); }
.rk-pos.top10 { background: var(--c2-soft); border-color: color-mix(in srgb, var(--c2) 40%, transparent); color: var(--c2-ink); }
.rk-pos.top20 { background: var(--c3-soft); border-color: color-mix(in srgb, var(--c3) 35%, transparent); color: var(--c3-ink); }
.rk-pos.out { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13px; }
.rk-pos.none { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
.rk-table.fresh .rk-pos { animation: pop .4s var(--spring) both; animation-delay: calc(var(--r, 0) * 30ms + 120ms); }
.rk-chg { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.rk-chg svg { width: 12px; height: 12px; stroke-width: 2.6; }
.rk-chg b { font: 800 13.5px/1 var(--display); }
.rk-chg.up { background: var(--good-soft); color: var(--good); }
.rk-chg.down { background: var(--bad-soft); color: var(--bad); }
.rk-chg.same { color: var(--muted); font-weight: 600; padding-left: 0; }
.rk-chg.first { background: var(--c2-soft); color: var(--c2-ink); font-weight: 700; }
.rk-spark { display: block; overflow: visible; }
.rk-spark path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s var(--ease) forwards; }
.rk-spark circle { stroke: none; fill: var(--muted); }
.rk-spark.up path { stroke: var(--v-ok); }
.rk-spark.up circle { fill: var(--v-ok); }
.rk-spark.down path { stroke: var(--v-spam); }
.rk-spark.down circle { fill: var(--v-spam); }
.rk-best { font: 800 14px var(--display); }
.rk-best.now { color: var(--good); }
.rk-best.now::after { content: "★"; margin-left: 4px; font-size: 11px; color: var(--gold); }
.rk-url { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font: 600 12.5px var(--mono); color: var(--ink-2); text-decoration: none; }
a.rk-url:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.rk-today { font-weight: 700; color: var(--good); }
.rk-wait { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c2-ink); }
.rk-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--c2); animation: pulse 1.1s ease-in-out infinite; }
.rk-lazy { display: inline-block; width: 70px; height: 12px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.2s linear infinite; }
.rk-c-rm { width: 1%; text-align: right; }
.rk-c-rm .del { opacity: .55; transition: opacity .15s; }
tr.rk-row:hover .rk-c-rm .del, .rk-c-rm .del:focus-visible, .rk-c-rm .del.armed { opacity: 1; }
.rk-msg { text-align: center; padding: 34px 18px; color: var(--muted); white-space: normal; }
.rk-tcard .card-foot > span { flex: 1 1 320px; line-height: 1.5; }
.rk-table tr.rk-detail, .rk-table tr.rk-detail:hover { background: var(--raised); }
.rk-table tr.rk-detail > td { padding: 0; white-space: normal; border-top: 0; }
.rk-detail-in { display: grid; gap: 10px; padding: 16px 18px 14px; border-left: 4px solid var(--primary); animation: rise .3s var(--ease) both; }
.rk-detail-head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.rk-detail-t { display: grid; gap: 1px; min-width: 0; }
.rk-detail-t b { font: 800 17px/1.25 var(--display); overflow-wrap: anywhere; }
.rk-detail-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-detail-stats > div { display: grid; gap: 4px; justify-items: start; min-width: 76px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.rk-detail-stats small { font: 700 10.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rk-detail-stats b { font: 800 16px/1.2 var(--display); min-height: 30px; display: flex; align-items: center; }
.rk-detail-msg { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; padding: 14px 0 6px; }
.rk-detail-msg svg { width: 18px; height: 18px; flex: none; }
.rk-chart { min-height: 210px; }
.rk-chart .rk-zone { fill: var(--v-ok); opacity: .07; }
.rk-chart .rk-area { fill: url(#rkGrad); stroke: none; animation: fade .8s .35s both; }
.rk-chart .line.rk-line { stroke: var(--primary); stroke-width: 2.6; }
.rk-chart .rk-pt { fill: var(--surface); stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pop .3s .5s var(--spring) both; transition: r .15s; cursor: default; }
.rk-chart .rk-pt:hover { r: 6; }
.rk-chart .rk-pt.out { stroke: var(--muted); stroke-dasharray: 2 2; }
.rk-chart .rk-pt.last { fill: var(--primary); stroke: var(--surface); }
.rk-chart.no-anim .rk-pt, .rk-chart.no-anim .rk-area { animation: none; }
.rk-chart.no-anim .line { animation: none; stroke-dashoffset: 0; }
.rk-notif { display: grid; gap: 14px; padding: 18px; border-radius: 12px; }
.rk-notif[hidden] { display: none; }
.rk-nf-head { display: flex; align-items: center; gap: 12px; }
.rk-nf-head > div { min-width: 0; flex: 1 1 auto; }
.rk-nf-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 18px -8px var(--primary); }
.rk-nf-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 12%; }
.rk-notif:hover .rk-nf-ico svg { animation: rk-bell .9s var(--ease) both; }
.rk-nf-head h2 { font: 800 19px/1.2 var(--display); letter-spacing: -0.01em; }
.rk-nf-head p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 74ch; text-wrap: pretty; }
.rk-nf-state { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 800 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
.rk-nf-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rk-nf-state.on { background: var(--good-soft); color: var(--good); }
.rk-nf-state.on i { animation: pulse 1.8s ease-in-out infinite; }
.rk-nf-state.off { background: var(--raised); color: var(--muted); border: 1px solid var(--line); }
.rk-nf-idle { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; background: var(--warn-soft); color: var(--warn); animation: rise .3s var(--ease) both; }
.rk-nf-idle svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.rk-nf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.rk-nf-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rk-nf-col h3 { font: 700 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rk-nf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: background .2s, border-color .2s, transform .2s var(--ease); }
.rk-nf-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--nc) 45%, var(--line)); }
.rk-nf-row.on { background: linear-gradient(100deg, color-mix(in srgb, var(--nc) 11%, var(--surface)), var(--surface) 72%); border-color: color-mix(in srgb, var(--nc) 36%, var(--line)); }
.rk-nf-tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--nc) 14%, var(--surface)); color: var(--nc); transition: background .2s, color .2s, transform .3s var(--spring); }
.rk-nf-tile svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rk-nf-row.on .rk-nf-tile { background: var(--nc); color: var(--on-primary); transform: scale(1.04); box-shadow: 0 6px 14px -8px var(--nc); }
.rk-nf-txt { display: grid; gap: 2px; min-width: 0; }
.rk-nf-txt b { font: 700 14px/1.3 var(--font); }
.rk-nf-txt small { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.rk-nf-txt a { color: var(--primary-ink); font-weight: 700; }
.rk-nf-row.soon { border-style: dashed; border-color: var(--line-strong); background: var(--raised); }
.rk-nf-row.soon .rk-nf-tile { background: var(--surface); color: var(--muted); }
.rk-nf-row.soon .rk-nf-txt b { color: var(--ink-2); }
.rk-soon { font: 800 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: var(--c3-soft); color: var(--c3-ink); white-space: nowrap; }
.rk-nf-link { all: unset; cursor: pointer; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; border-radius: 3px; }
.rk-nf-link:hover { color: var(--bad); }
.rk-nf-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rk-sw { all: unset; box-sizing: border-box; flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; cursor: pointer; background: var(--line-strong); transition: background .2s; }
.rk-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-primary); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 35%, transparent); transition: transform .28s var(--spring); }
.rk-sw[aria-checked="true"] { background: var(--nc, var(--primary)); }
.rk-sw[aria-checked="true"] i { transform: translateX(18px); }
.rk-sw:active:not(:disabled) i { width: 24px; }
.rk-sw[aria-checked="true"]:active:not(:disabled) i { transform: translateX(14px); }
.rk-sw:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rk-sw:disabled { opacity: .45; cursor: not-allowed; }
.rk-step { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow: hidden; }
.rk-step button { all: unset; box-sizing: border-box; cursor: pointer; width: 26px; height: 24px; display: grid; place-items: center; font: 800 15px/1 var(--font); color: var(--ink-2); transition: background .15s, color .15s; }
.rk-step button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-ink); }
.rk-step button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rk-step button:disabled { opacity: .35; cursor: default; }
.rk-step output { min-width: 26px; text-align: center; font: 800 13.5px/24px var(--display); color: var(--ink); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.rk-tg-box { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c2) 36%, var(--line)); background: var(--c2-soft); animation: rise .3s var(--ease) both; }
.rk-tg-box ol { margin: 0; padding: 0; list-style: none; counter-reset: tg; display: grid; gap: 8px; }
.rk-tg-box li { counter-increment: tg; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.rk-tg-box li::before { content: counter(tg); flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 800 12px/1 var(--display); background: var(--c2); color: var(--on-primary); }
.rk-tg-box code { font: 700 13.5px var(--mono); padding: 5px 9px; border-radius: 7px; background: var(--surface); border: 1px dashed var(--c2); color: var(--c2-ink); letter-spacing: .04em; user-select: all; }
.rk-tg-box small { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.rk-tg-box .rk-pulse { background: var(--c2); flex: none; }
@keyframes rk-bell { 0% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes rk-float { 50% { transform: translate(-24px, 20px) scale(1.08); } }
@keyframes rk-sheen { 0%, 100% { background-position: 150% 0; } 50% { background-position: -60% 0; } }
@keyframes rk-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes rk-growx { from { transform: scaleX(0); } }
@media (max-width: 1100px) {
.rk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
.rk-action { grid-template-columns: minmax(0, 1fr); }
.rk-action-side { min-width: 0; max-width: none; }
.rk-how { grid-template-columns: minmax(0, 1fr); }
.rk-how li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.rk-how li .rk-how-n { grid-row: span 3; }
.rk-how li b { margin-top: 0; }
.rk-how li:not(:last-child)::after { top: auto; bottom: -13px; right: auto; left: 31px; width: 2px; height: 13px; }
.rk-steps li small { display: none; }
.rk-steps li { padding: 10px 12px; gap: 8px; }
}
@media (max-width: 760px) {
.rk-hero { padding: 18px 16px; }
.rk-hero-art { width: 72px; height: 72px; border-radius: 16px; }
.rk-hero-art .kosto { --ks: 64px !important; }
.rk-hero-art .kosto img { width: 64px; height: 64px; }
.rk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-kpi:last-child { grid-column: 1 / -1; }
.rk-kpi b { font-size: 26px; }
.rk-phead-act { margin-left: 0; width: 100%; }
.rk-tools { padding: 10px 12px; }
.rk-q { flex: 1 1 100%; }
.rk-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.rk-chip { flex: none; }
.rk-table, .rk-table tbody { display: block; width: 100%; }
.rk-table thead { display: none; }
.rk-table tr.rk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 14px 12px; border-top: 1px solid var(--line); }
.rk-table tbody tr.rk-row:first-child { border-top: 0; }
.rk-table tr.rk-row td { display: grid; gap: 4px; align-content: start; justify-items: start; padding: 0; border: 0; white-space: normal; min-width: 0; }
.rk-table tr.rk-row td[data-l]::before { content: attr(data-l); font: 700 10px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rk-table tr.rk-row td.rk-c-kw { grid-column: 1 / 3; width: auto; min-width: 0; align-self: center; }
.rk-table tr.rk-row td.rk-c-pos { grid-column: 3; justify-items: end; text-align: right; }
.rk-table tr.rk-row td.rk-c-pos::before { display: none; }
.rk-table tr.rk-row td.rk-c-url { grid-column: 1 / 3; }
.rk-table tr.rk-row td.rk-c-rm { grid-column: 3; width: auto; justify-items: end; align-self: end; }
.rk-table tr.rk-row td.rk-c-rm .del { opacity: 1; }
.rk-url { max-width: 100%; }
.rk-pos { min-width: 46px; height: 36px; font-size: 17px; }
.rk-table tr.rk-detail { display: block; }
.rk-table tr.rk-detail > td { display: block; }
.rk-detail-in { padding: 14px 12px; }
.rk-detail-stats > div { flex: 1 1 70px; min-width: 0; }
.rk-table tr:not(.rk-row):not(.rk-detail), .rk-table tr:not(.rk-row):not(.rk-detail) td { display: block; }
}
@media (max-width: 520px) {
.rk-steps li b { font-size: 12px; white-space: normal; }
.rk-steps li i { width: 24px; height: 24px; font-size: 12px; }
.rk-hero-top { align-items: flex-start; }
.btn.rk-run { flex-wrap: wrap; }
}
@media (max-width: 860px) {
.rk-nf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
.rk-notif { padding: 14px 12px; }
.rk-nf-head { flex-wrap: wrap; }
.rk-nf-head > div { flex: 1 1 60%; }
.rk-nf-state { order: 3; }
.rk-nf-row { gap: 10px; padding: 10px; }
.rk-nf-tile { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.rk-prog i::after, .rk-notif:hover .rk-nf-ico svg, .rk-nf-state.on i, .rk-nf-idle, .rk-tg-box { animation: none !important; }
.rk-prog i, .rk-nf-row, .rk-nf-tile, .rk-sw, .rk-sw i { transition: none; }
.rk-hero::after, .rk-action::after, .rk-eyebrow::before, .rk-how li, .rk-steps li.now i, .rk-steps li.done i svg, .rk-bar i, .rk-spark path, .rk-pos, .rk-chart .rk-pt, .rk-chart .rk-area, .rk-detail-in, .rk-add, .rk-form, .rk-pulse, .rk-wait i, .rk-lazy, .rk-action-note { animation: none !important; }
.rk-spark path { stroke-dashoffset: 0; }
.rk-site, .rk-kpi, .rk-how li, .btn.rk-run { transition: none; }
}
.nav, .nav-group, .nav-group-b { grid-template-columns: minmax(0, 1fr); }
.nav-group-b a { min-width: 0; }
.nav-group { display: grid; gap: 1px; --gc: var(--side-muted); }
.nav-group[data-group="wf_analyze"] { --gc: #ff8a3d; }
.nav-group[data-group="wf_links"] { --gc: #a985ff; }
.nav-group[data-group="wf_monitor"] { --gc: #2fc4b2; }
.nav-group[data-group="wf_account"] { --gc: #6a98ff; }
.nav-group + .nav-group { margin-top: 6px; }
.nav-group-h { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px 7px; border: 0; border-radius: 6px; background: none; color: var(--side-muted); font: 700 10.5px var(--font); letter-spacing: .09em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color .15s, background .15s; }
.nav-group-h:hover { color: var(--side-ink); background: var(--side-hover); }
.nav-group-h:focus-visible { outline: 2px solid var(--side-ink); outline-offset: -2px; }
.nav-group-h > span { flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; }
.nav-group-h > i { flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--gc); transition: transform .25s var(--spring), box-shadow .2s; }
.nav-group-h:hover > i { transform: scale(1.25) rotate(45deg); }
.nav-group-c { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s var(--ease); }
.nav-group.shut .nav-group-c { transform: rotate(-90deg); }
.nav-group-b { display: grid; gap: 1px; }
.nav-group.shut .nav-group-b { display: none; }
.nav-group.shut:has(a[aria-current="page"]) .nav-group-h { color: var(--side-ink); }
.nav-group.shut:has(a[aria-current="page"]) .nav-group-h > i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 35%, transparent); }
.nav-group.opening .nav-group-b a { animation: nav-in .26s var(--ease) both; }
.nav-group.opening .nav-group-b a:nth-child(2) { animation-delay: 20ms; }
.nav-group.opening .nav-group-b a:nth-child(3) { animation-delay: 40ms; }
.nav-group.opening .nav-group-b a:nth-child(4) { animation-delay: 60ms; }
.nav-group.opening .nav-group-b a:nth-child(5) { animation-delay: 80ms; }
.nav-group.opening .nav-group-b a:nth-child(n+6) { animation-delay: 100ms; }
@keyframes nav-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.nav-group-b a:hover svg:first-child { color: var(--gc); }
.nav-group-b a[aria-current="page"]:hover svg:first-child { color: var(--on-primary); }
.nav a { white-space: normal; }
.nav-t { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.25; }
.nav-group-b a .badge { margin-left: 0; flex: none; }
.nav-plan { flex: none; max-width: 46%; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px; border-radius: 4px; font: 700 9.5px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; --pc: #6a98ff; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 34%, transparent); transition: background .15s, border-color .15s; }
.nav-plan.plan-pro { --pc: #b79bff; }
.nav-plan.plan-agency { --pc: #ff9a5c; }
.nav a .nav-plan svg { width: 10px; height: 10px; color: inherit; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover .nav-plan { background: color-mix(in srgb, var(--pc) 26%, transparent); }
.nav a[aria-current="page"] .nav-plan { color: var(--on-primary); background: color-mix(in srgb, var(--on-primary) 18%, transparent); border-color: color-mix(in srgb, var(--on-primary) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
.nav-group.opening .nav-group-b a { animation: none; }
.nav-group-h > i, .nav-group-c { transition: none; }
}
.nav .nav-plan { max-width: none; padding: 3px; gap: 0; align-self: center; }
.nav .nav-plan svg { width: 12px; height: 12px; }
.nav .nav-plan .np-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ct { position: relative; display: block; min-width: 0; }
.ct-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 37px; padding: 5px 9px 5px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .2s, transform .12s; }
.ct-btn:hover { border-color: var(--ink); background: var(--raised); }
.ct-btn:active { transform: scale(.98); }
.ct-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ct-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.ct-btn[aria-expanded="true"] .ct-chev { transform: rotate(180deg); }
.ct-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chev { flex: none; width: 15px; height: 15px; color: var(--muted); stroke-width: 2; transition: transform .25s var(--ease); }
.fld.ct-fld { flex: 0 1 244px; }
.ct.compact { display: inline-block; }
.ct.compact .ct-btn { min-height: 28px; padding: 2px 7px 2px 3px; border-radius: 999px; font-size: 12.5px; gap: 6px; }
.ct.compact .ct-tile { width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; }
.ct.compact .ct-tile svg { width: 13px; height: 13px; }
.ct.compact .ct-name { max-width: 150px; }
.ct-tile { flex: none; display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--sw, var(--c2)); color: var(--surface); font: 800 10.5px/1 var(--font); letter-spacing: .03em; }
.ct-tile svg { width: 15px; height: 15px; stroke-width: 1.8; }
.ct-tile.world { background: var(--primary); color: var(--on-primary); }
.ct-tile.rest { background: var(--line-strong); color: var(--ink); font-size: 14px; }
.ct-tile.flag { width: 26px; height: 19px; border-radius: 4px; overflow: hidden; background: var(--raised); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); }
.ct-tile.flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-btn:hover .ct-tile { animation: pop .35s var(--spring) both; }
.ct-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; min-width: 264px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden;
box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--ink) 55%, transparent); transform-origin: top left; animation: ct-open .2s var(--ease) both; }
.ct-pop.up { transform-origin: bottom left; }
.ct-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 8px 8px 14px; border-bottom: 1px solid var(--line); background: var(--raised); }
.ct-pop-h b { font: 700 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.ct-pop-h b::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.ct-x { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.ct-x:hover { background: var(--surface); color: var(--ink); }
.ct-x:focus-visible { outline: 2px solid var(--ink); }
.ct-x svg { width: 15px; height: 15px; stroke-width: 2; }
.ct-find { display: flex; align-items: center; gap: 8px; margin: 10px 10px 2px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); transition: border-color .15s; }
.ct-find:focus-within { border-color: var(--ink); }
.ct-find svg { flex: none; width: 15px; height: 15px; color: var(--muted); }
.ct-find input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font-size: 14px; }
.ct-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: grid; gap: 2px; align-content: start; }
.ct-grp { display: flex; align-items: center; gap: 7px; margin: 10px 8px 3px; font: 700 10.5px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ct-grp::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.ct-grp i { font-style: normal; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); }
.ct-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 14px;
animation: ct-row .28s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); transition: background .12s, transform .12s; }
.ct-opt:hover, .ct-opt:focus-visible { background: var(--raised); }
.ct-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ct-opt:active { transform: scale(.985); }
.ct-opt .ct-tile.flag { width: 30px; height: 22px; transition: transform .25s var(--spring); }
.ct-opt:hover .ct-tile.flag, .ct-opt:focus-visible .ct-tile.flag { transform: scale(1.12) rotate(-3deg); }
.ct-opt-t { flex: 1 1 auto; min-width: 0; display: grid; }
.ct-opt-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-opt-t em { font-style: normal; font-size: 12px; color: var(--muted); }
.ct-opt.world { padding: 9px; background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), var(--surface) 78%); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); }
.ct-opt.world:hover, .ct-opt.world:focus-visible { background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 22%, var(--surface)), var(--raised) 78%); }
.ct-opt.world .ct-opt-t b { font: 700 15px/1.25 var(--display); }
.ct-opt.world .ct-tile { width: 30px; height: 30px; border-radius: 9px; }
.ct-opt.world .ct-tile svg { width: 18px; height: 18px; }
.ct-opt[aria-selected="true"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.ct-opt[aria-selected="true"] .ct-opt-t b { color: var(--primary-ink); }
.ct-check { flex: none; width: 17px; height: 17px; color: var(--primary-ink); stroke-width: 2.4; animation: pop .3s var(--spring) both; }
.ct-none { margin: 0; padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.ct-note { margin: 0; padding: 8px 14px 10px; border-top: 1px solid var(--line); background: var(--raised); font-size: 12px; line-height: 1.45; color: var(--muted); }
.ct-scope { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: middle; background: var(--c2-soft); color: var(--c2-ink); }
.ct-scope.world { background: var(--primary-soft); color: var(--primary-ink); }
.ct-scope .ct-tile { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; }
.ct-scope .ct-tile svg { width: 12px; height: 12px; }
.ct-hint { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.dx-gate .ct-scope { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.ct-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface) 55%); animation: rise .4s var(--ease) both; }
.ct-bar > .ct-scope { font-size: 13px; padding: 4px 12px 4px 4px; }
.ct-bar > .ct-scope .ct-tile { width: 24px; height: 24px; font-size: 10px; }
.ct-bar > .ct-scope .ct-tile svg { width: 14px; height: 14px; }
.ct-bar-note { font-size: 12.5px; color: var(--muted); }
.ct-bar-sw { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ct-bar-sw em { font-style: normal; font-size: 12px; color: var(--muted); margin-right: 2px; }
.ct-pick { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: border-color .15s, background .15s, color .15s, transform .15s var(--ease); }
.ct-pick:hover { border-color: var(--ink); color: var(--ink); background: var(--raised); transform: translateY(-1px); }
.ct-pick:active { transform: scale(.97); }
.ct-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct-pick .ct-tile { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; }
.ct-pick .ct-tile svg { width: 12px; height: 12px; }
.ct-basis { display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 16px; font-size: 12.5px; line-height: 1.5; color: var(--c2-ink); background: var(--c2-soft); border-bottom: 1px solid var(--line); animation: fade .4s both; }
.pad > .ct-basis { margin-bottom: 12px; border: 0; border-radius: 6px; }
.ct-basis .ct-tile { width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; }
.ct-blocked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; padding: 18px 20px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--c2) 40%, var(--line)); background: linear-gradient(100deg, var(--c2-soft), var(--surface) 70%); animation: rise .4s var(--ease) both; }
.ct-blocked-art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c2); color: var(--surface); animation: pop .45s var(--spring) both; }
.ct-blocked-art svg { width: 28px; height: 28px; }
.ct-blocked b { display: block; font: 700 17px/1.3 var(--display); letter-spacing: -0.01em; }
.ct-blocked p { margin-top: 4px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ct-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ct-by { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ct-by li { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.ct-by-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(90px, 1.1fr) minmax(60px, 2.4fr) auto 44px minmax(0, auto); gap: 4px 12px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; }
button.ct-by-row { cursor: pointer; transition: background .15s, transform .15s var(--ease); }
button.ct-by-row:hover { background: var(--raised); transform: translateX(3px); }
button.ct-by-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ct-by-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-by-row u { display: block; height: 10px; border-radius: 5px; background: var(--grid); overflow: hidden; text-decoration: none; }
.ct-by-row s { display: block; height: 100%; width: var(--w); min-width: 3px; border-radius: 5px; background: var(--primary); transform-origin: left; animation: ct-grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
.ct-by li:nth-child(n+2) s { background: var(--c2); }
.ct-by li:nth-child(n+4) s { background: var(--c3); }
.ct-by li:nth-child(n+6) s { background: var(--c4); }
.ct-by-row b { font: 700 14px/1.2 var(--display); text-align: right; }
.ct-by-row em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: right; }
.ct-by-row small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dx-ob-scope { display: inline-flex; align-items: center; gap: 7px; }
.dx-ob-scope em { font-style: normal; font-size: 11.5px; color: var(--muted); }
@keyframes ct-open { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes ct-row { from { opacity: 0; transform: translateX(-6px); } }
@keyframes ct-grow { from { transform: scaleX(0); } }
@keyframes ct-sheet { from { transform: translateY(100%); } }
@media (max-width: 720px) {
.fld.ct-fld { flex: 1 1 100%; }
.ct-bar-sw { margin-left: 0; width: 100%; }
.ct-bar-note { display: none; }
.ct-blocked { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.ct-by-row { grid-template-columns: auto minmax(0, 1fr) auto 40px; }
.ct-by-row u { grid-column: 1 / -1; grid-row: 2; }
.ct-by-row small { display: none; }
}
.ct-scrim { display: none; }
@keyframes ct-fade { from { opacity: 0; } }
@media (max-width: 560px) {
.ct-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: color-mix(in srgb, var(--ink) 45%, transparent); animation: ct-fade .2s ease both; }
html.ct-lock, html.ct-lock body { overflow: hidden; }
.ct-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0 !important; width: 100% !important; border-radius: 16px 16px 0 0; border-width: 1px 0 0;
box-shadow: none; animation: ct-sheet .28s var(--ease) both; padding-bottom: env(safe-area-inset-bottom, 0); }
.ct-pop { height: 78vh; max-height: 78vh !important; }
.ct-pop::before { content: ""; flex: none; align-self: center; width: 38px; height: 4px; margin: 7px 0 0; border-radius: 2px; background: var(--line-strong); }
.ct-pop-h { background: transparent; border-bottom: 0; padding-top: 5px; }
.ct-opt { padding: 11px 10px; font-size: 15px; min-height: 46px; }
.ct-opt .ct-tile.flag { width: 34px; height: 25px; }
.ct-opt.world .ct-tile { width: 34px; height: 34px; }
.ct-find input { font-size: 16px; }
.ct-x { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.ct-scrim, .ct-pop, .ct-opt, .ct-check, .ct-bar, .ct-blocked, .ct-blocked-art, .ct-by li, .ct-by-row s, .ct-btn:hover .ct-tile { animation: none !important; }
.ct-pick:hover, button.ct-by-row:hover, .ct-opt:hover .ct-tile.flag, .ct-opt:focus-visible .ct-tile.flag { transform: none; }
}
.kw { --kw-info: var(--c2); --kw-com: var(--c3); --kw-trx: var(--c1); --kw-nav: var(--t0); --kw-easy: var(--t4); --kw-mid: var(--t1); --kw-hard: var(--v-spam); }
.kw .kw-l { display: none; }
.kw-console { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 18px 20px 16px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--primary) 32%, var(--side-bg)), var(--side-bg) 56%), var(--side-bg); }
.kw-console::after { content: ""; position: absolute; right: -80px; top: -110px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--c2) 42%, transparent), transparent 68%); animation: kw-float 10s ease-in-out infinite; }
.kw-console > * { position: relative; z-index: 1; }
.kw-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; }
.kw-modes { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 6%, transparent); max-width: 100%; }
.kw-modes button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 1px; padding: 8px 16px; border-radius: 9px; min-width: 0; transition: background .2s var(--ease), color .2s, transform .12s; }
.kw-modes button b { font: 700 14.5px/1.25 var(--display); white-space: nowrap; }
.kw-modes button small { font-size: 11.5px; color: color-mix(in srgb, var(--side-ink) 64%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-modes button:hover { background: color-mix(in srgb, var(--side-ink) 9%, transparent); }
.kw-modes button:active { transform: scale(.97); }
.kw-modes button:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 2px; }
.kw-modes button[aria-selected="true"] { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -10px var(--primary); }
.kw-modes button[aria-selected="true"] small { color: color-mix(in srgb, var(--on-primary) 86%, transparent); }
.kw-scope { display: grid; gap: 4px; flex: 0 1 232px; min-width: 190px; }
.kw-scope > span { font: 700 10.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.kw-form { display: grid; gap: 12px; }
.kw-form[hidden] { display: none; }
.kw-bar { display: flex; gap: 10px; align-items: stretch; }
.kw-seed { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: var(--surface); color: var(--ink); border: 2px solid transparent; cursor: text;
box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--side-bg) 85%, transparent); transition: border-color .15s, box-shadow .2s; }
.kw-seed:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
.kw-seed svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.kw-seed input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: inherit; padding: 14px 0; font: 600 17px/1.3 var(--font); }
.kw-seed input::placeholder { color: var(--muted); font-weight: 500; }
.btn.kw-go { flex: none; padding: 12px 20px; border-radius: 12px; font-size: 14.5px; white-space: normal; text-align: center; max-width: 300px; box-shadow: 0 10px 26px -12px var(--primary); transition: background .15s, border-color .15s, transform .12s, box-shadow .2s; }
.btn.kw-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--primary); }
.btn.kw-go[data-free="1"] { background: var(--v-ok); border-color: var(--v-ok); color: var(--von-ok); box-shadow: 0 10px 26px -12px var(--v-ok); }
.btn.kw-go:disabled { box-shadow: none; }
.kw-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kw-kinds button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; min-width: 0; --kc: var(--primary);
border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 5%, transparent); animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms);
transition: transform .2s var(--ease), border-color .2s, background .2s; }
.kw-kinds button:nth-child(2) { --kc: var(--c2); }
.kw-kinds button:nth-child(3) { --kc: var(--c3); }
.kw-kinds button:nth-child(4) { --kc: var(--c4); }
.kw-kinds button svg { flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
background: color-mix(in srgb, var(--kc) 26%, transparent); transition: background .2s, transform .3s var(--spring); }
.kw-kinds button span { display: grid; gap: 1px; min-width: 0; }
.kw-kinds button b { font: 700 14px/1.25 var(--display); }
.kw-kinds button small { font-size: 11.5px; line-height: 1.35; color: color-mix(in srgb, var(--side-ink) 66%, transparent); }
.kw-kinds button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kc) 70%, var(--side-line)); }
.kw-kinds button:active { transform: scale(.98); }
.kw-kinds button:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 2px; }
.kw-kinds button[aria-pressed="true"] { border-color: var(--kc); background: linear-gradient(140deg, color-mix(in srgb, var(--kc) 30%, transparent), color-mix(in srgb, var(--kc) 8%, transparent)); box-shadow: inset 0 -3px 0 var(--kc); }
.kw-kinds button[aria-pressed="true"] svg { background: var(--kc); color: var(--on-primary); transform: scale(1.06); }
.kw-basis-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--c2) 16%, transparent); animation: rise .3s var(--ease) both; }
.kw-basis-hint[hidden] { display: none; }
.kw-basis-hint svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.kw-cost { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-height: 36px; }
.kw-cost:empty { display: none; }
.kw-cost-note { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--side-ink) 68%, transparent); }
.kw-form .form-error { margin: 0; justify-self: start; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--bad-soft); color: var(--bad); animation: rise .25s var(--ease) both; }
.kw-form .form-error:empty { display: none; }
.kw-listrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 12px; align-items: stretch; }
.kw-list { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-width: 0; }
.kw-list > span { display: flex; justify-content: space-between; gap: 10px; font: 700 10.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.kw-list > span em { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--side-ink); }
.kw-list > span em.over { color: var(--v-risk); }
.kw-list textarea { width: 100%; min-height: 150px; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 2px solid transparent; outline: 0; background: var(--surface); color: var(--ink); font: 500 14.5px/1.55 var(--font); transition: border-color .15s, box-shadow .2s; }
.kw-list textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); }
.kw-listside { display: grid; gap: 10px; align-content: space-between; }
.kw-listside .btn.kw-go { max-width: none; }
.kw-tools { display: grid; gap: 6px; }
.kw-tools button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 1px; padding: 9px 12px 9px 36px; position: relative; border-radius: 10px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 5%, transparent); transition: border-color .2s, background .2s, transform .12s; }
.kw-tools button::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--side-muted); transition: border-color .2s, box-shadow .2s, background .2s; }
.kw-tools button b { font: 700 13.5px/1.3 var(--display); }
.kw-tools button small { font-size: 11.5px; color: color-mix(in srgb, var(--side-ink) 64%, transparent); }
.kw-tools button:hover { border-color: var(--side-muted); }
.kw-tools button:active { transform: scale(.985); }
.kw-tools button:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 2px; }
.kw-tools button[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); }
.kw-tools button[aria-pressed="true"]::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--side-bg); }
.kw-empty { display: grid; gap: 16px; padding: 20px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.kw-empty-top { display: flex; gap: 18px; align-items: center; }
.kw-empty-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 20px; background: var(--primary-soft); }
.kw-empty-art .kosto { margin: 0; }
.kw-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 6px; }
.kw-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 26%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.kw-empty h2 { font: 800 clamp(20px, 3vw, 28px)/1.15 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.kw-empty-top p:last-child { margin-top: 6px; max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.kw-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kw-how li { position: relative; display: grid; gap: 5px; align-content: start; padding: 14px 15px 13px; border-radius: 12px; --kc: var(--primary); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--line));
background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 11%, var(--surface)), var(--surface) 64%); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); transition: transform .2s var(--ease), border-color .2s; }
.kw-how li:nth-child(2) { --kc: var(--c2); }
.kw-how li:nth-child(3) { --kc: var(--c4); }
.kw-how li:hover { transform: translateY(-3px); border-color: var(--kc); }
.kw-how-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font: 800 16px/1 var(--display); background: var(--kc); color: var(--on-primary); box-shadow: 0 6px 16px -6px var(--kc); }
.kw-how b { font: 700 16px/1.25 var(--display); margin-top: 4px; }
.kw-how p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.kw-how em { justify-self: start; font: 700 11px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; margin-top: 4px; }
.kw-how em.free { background: var(--good-soft); color: var(--good); }
.kw-how em.cost { background: var(--primary-soft); color: var(--primary-ink); }
.kw-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.kw-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--line-strong); background: var(--raised); transition: border-color .15s, color .15s, transform .12s, background .15s; }
.kw-chip:hover { border-color: var(--primary); border-style: solid; color: var(--primary-ink); background: var(--primary-soft); transform: translateY(-1px); }
.kw-chip:active { transform: scale(.96); }
.kw-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kw-reshead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.kw-reshead h2 { font: 800 clamp(19px, 2.6vw, 24px)/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.kw-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kw-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
.kw-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kw-tag.kind { background: var(--c3-soft); color: var(--c3-ink); border-color: transparent; }
.kw-tag.free { background: var(--good-soft); color: var(--good); border-color: transparent; }
.kw-tag.fresh { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.kw-tag.fresh i { animation: pulse 1.4s ease-in-out 3; }
.kw-tag.stale { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.kw-note { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 9px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--raised); border: 1px solid var(--line); color: var(--ink-2); overflow-wrap: anywhere; }
.kw-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c2); }
.kw > .tl-view .ct-basis { border: 1px solid var(--line); border-radius: 10px; }
.kw-kpis { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; }
.kw-kpi { position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 14px 16px 13px; border-radius: 12px; --kc: var(--c2);
background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 13%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--line)); transition: transform .2s var(--ease), border-color .2s; }
.kw-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kc); transform-origin: top; animation: kw-growy .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.kw-kpi:hover { transform: translateY(-2px); border-color: var(--kc); }
.kw-kpi small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-kpi b { display: flex; align-items: baseline; gap: 8px; font: 800 28px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.kw-kpi > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-kpi-tag { font: 700 11px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; color: var(--surface); background: var(--kw-mid); }
.kw-kpi-tag.mid { color: var(--side-bg); }
.kw-kpi-tag.easy { background: var(--kw-easy); }
.kw-kpi-tag.hard { background: var(--kw-hard); }
.kw-kpi.skel { min-height: 86px; border-color: var(--line); background: var(--surface); }
.kw-kpi.skel::before { display: none; }
.kw-kpi.skel small, .kw-kpi.skel b { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.2s linear infinite; }
.kw-kpi.skel small { width: 60%; height: 10px; }
.kw-kpi.skel b { width: 44%; height: 26px; margin-top: 8px; }
.kw-mix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.kw-mix-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.kw-mix h3 { font: 700 15px/1.3 var(--display); }
.kw-mixbar { display: flex; gap: 3px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--grid); }
.kw-mixbar i { display: block; min-width: 6px; flex-basis: 0; border-radius: 3px; transform-origin: left; animation: kw-growx .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); transition: filter .15s; }
.kw-mixbar i:hover { filter: brightness(1.15); }
.kw-mixbar .i-info, .kw-leg.i-info i, .kw-int.i-info i { background: var(--kw-info); }
.kw-mixbar .i-com, .kw-leg.i-com i, .kw-int.i-com i { background: var(--kw-com); }
.kw-mixbar .i-trx, .kw-leg.i-trx i, .kw-int.i-trx i { background: var(--kw-trx); }
.kw-mixbar .i-nav, .kw-leg.i-nav i, .kw-int.i-nav i { background: var(--kw-nav); }
.kw-mixbar .easy, .kw-leg.easy i { background: var(--kw-easy); }
.kw-mixbar .mid, .kw-leg.mid i { background: var(--kw-mid); }
.kw-mixbar .hard, .kw-leg.hard i { background: var(--kw-hard); }
.kw-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-leg { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 9px; font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, background .15s, transform .12s; }
.kw-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.kw-leg span { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; }
.kw-leg small { font-weight: 600; font-size: 11px; color: var(--muted); }
.kw-leg b { font-weight: 800; color: var(--ink); }
.kw-leg em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.kw-leg:hover:not(:disabled) { border-color: var(--ink); }
.kw-leg:active:not(:disabled) { transform: scale(.96); }
.kw-leg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kw-leg:disabled { opacity: .45; cursor: default; }
.kw-leg[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kw-leg[aria-pressed="true"] b, .kw-leg[aria-pressed="true"] em, .kw-leg[aria-pressed="true"] small { color: var(--surface); }
.kw-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.kw-q { display: flex; align-items: center; gap: 7px; flex: 0 1 230px; min-width: 160px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); transition: border-color .15s, background .15s; }
.kw-q:focus-within { border-color: var(--ink); background: var(--surface); }
.kw-q svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.kw-q input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 7px 0; font-size: 13.5px; color: inherit; }
.kw-quicks { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-quick { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.kw-quick:hover { border-color: var(--ink); }
.kw-quick:active { transform: scale(.96); }
.kw-quick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kw-quick b { font-weight: 800; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--ink-2); }
.kw-quick.easy b { background: var(--good-soft); color: var(--good); }
.kw-quick.long b { background: var(--c2-soft); color: var(--c2-ink); }
.kw-quick.up b { background: var(--c3-soft); color: var(--c3-ink); }
.kw-quick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.kw-quick[aria-pressed="true"] b { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); }
.kw-rng { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.kw-rng label { font-weight: 600; white-space: nowrap; }
.kw-rng input { width: 72px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: inherit; outline: 0; }
.kw-rng input:focus { border-color: var(--ink); }
.kw-sort { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kw-sort select { padding: 6px 8px; }
.kw-count { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.kw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--raised); }
.kw-seln { margin-right: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.kw-actions .btn[data-cm-btn]:not(:disabled) { border-color: var(--primary); color: var(--primary-ink); }
#kwPop:empty { display: none; }
.kw-table td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.kw-table th, .kw-table td { padding-left: 13px; padding-right: 13px; }
.kw-kwd { font-weight: 700; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.kw-vol { display: inline-grid; gap: 3px; justify-items: end; min-width: 76px; }
.kw-vol b { font: 800 14.5px/1.1 var(--display); }
.kw-vol i { display: block; justify-self: stretch; height: 4px; border-radius: 2px; background: var(--grid); position: relative; overflow: hidden; }
.kw-vol i::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--w); border-radius: 2px; background: var(--c2); }
.kw-table.fresh .kw-vol i::after { animation: grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms + 100ms); }
.kw-trend { display: inline-flex; align-items: center; gap: 8px; }
.kw-diff { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; --dc: var(--kw-mid);
background: color-mix(in srgb, var(--dc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 38%, transparent); color: var(--ink); }
.kw-diff.easy { --dc: var(--kw-easy); }
.kw-diff.hard { --dc: var(--kw-hard); }
.kw-diff b { display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 4px; border-radius: 999px; font: 800 12.5px/1 var(--display); background: var(--dc); color: var(--surface); }
.kw-diff.mid b { color: var(--side-bg); }
.kw-diff em { font-style: normal; }
.kw-table.fresh .kw-diff b { animation: pop .4s var(--spring) both; animation-delay: calc(var(--r, 0) * 26ms + 120ms); }
.kw-int { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.kw-int i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kw-int.i-info { background: var(--c2-soft); color: var(--c2-ink); }
.kw-int.i-com { background: var(--c3-soft); color: var(--c3-ink); }
.kw-int.i-trx { background: var(--c1-soft); color: var(--c1-ink); }
.kw-int.i-nav { background: var(--raised); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.kw-more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: flex-end; }
.kw-more .note-box { flex-basis: 100%; }
.kw-tcard .card-foot .btn[data-cm-btn] { border-color: var(--primary); color: var(--primary-ink); background: var(--surface); }
.kw-tcard .card-foot .btn[data-free="1"] { border-color: var(--v-ok); color: var(--good); }
@keyframes kw-float { 50% { transform: translate(-26px, 22px) scale(1.08); } }
@keyframes kw-growx { from { transform: scaleX(0); } }
@keyframes kw-growy { from { transform: scaleY(0); } }
@media (max-width: 1100px) {
.kw-kpis { grid-template-columns: repeat(min(var(--n, 5), 3), minmax(0, 1fr)); }
.kw-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.kw-mix { grid-template-columns: minmax(0, 1fr); }
.kw-how { grid-template-columns: minmax(0, 1fr); }
.kw-how li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.kw-how li .kw-how-n { grid-row: span 3; }
.kw-how li b { margin-top: 0; }
.kw-listrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.kw-console { padding: 14px 14px 13px; border-radius: 12px; }
.kw-top { align-items: stretch; }
.kw-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.kw-modes button { padding: 8px 10px; text-align: center; }
.kw-modes button small { display: none; }
.kw-scope { flex: 1 1 100%; min-width: 0; }
.kw-bar { flex-direction: column; }
.kw-seed input { padding: 13px 0; font-size: 16px; }
.btn.kw-go { max-width: none; width: 100%; }
.kw-kinds button { padding: 9px 10px; gap: 8px; }
.kw-kinds button small { display: none; }
.kw-list textarea { font-size: 16px; }
.kw-empty { padding: 16px 14px; }
.kw-empty-art { width: 72px; height: 72px; border-radius: 16px; }
.kw-empty-art .kosto { --ks: 64px !important; }
.kw-empty-art .kosto img { width: 64px; height: 64px; }
.kw-kpis { grid-template-columns: repeat(min(var(--n, 5), 2), minmax(0, 1fr)); gap: 8px; }
.kw-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kw-kpi { padding: 12px 12px 11px 14px; }
.kw-kpi b { font-size: 23px; }
.kw-filters { padding: 10px 12px; gap: 8px 10px; }
.kw-q { flex: 1 1 100%; }
.kw-q input { font-size: 16px; }
.kw-quicks { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.kw-quick { flex: none; }
.kw-sort { display: inline-flex; flex: 1 1 100%; }
.kw-sort select { flex: 1; min-width: 0; }
.kw-count { margin-left: 0; }
.kw-actions { padding: 8px 12px; }
.kw-seln { flex-basis: 100%; }
.kw-actions .btn { flex: 1 1 auto; white-space: normal; }
.kw-tcard .table-wrap.tall { max-height: none; }
.kw-table, .kw-table tbody { display: block; width: 100%; }
.kw-table thead { display: none; }
.kw-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 10px; padding: 13px 12px 12px; border-top: 1px solid var(--line); }
.kw-table tbody tr:first-child { border-top: 0; }
.kw-table tbody td { display: grid; gap: 4px; align-content: start; justify-items: start; padding: 0; border: 0; white-space: normal; min-width: 0; width: auto; max-width: none; text-align: left; position: static; box-shadow: none; background: none; }
.kw-table tbody td.msg { grid-column: 1 / -1; justify-items: center; padding: 24px 8px; }
.kw .kw-table .kw-l { display: block; font: 700 10px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kw-table td.kw-c-sel { grid-column: 3; grid-row: 1; justify-items: end; align-self: center; }
.kw-table td.kw-c-sel input { width: 22px; height: 22px; }
.kw-table td.kw-c-kw { grid-column: 1 / 3; grid-row: 1; align-self: center; }
.kw-kwd { font-size: 15px; }
.kw-vol { justify-items: start; min-width: 0; width: 100%; }
.kw-vol i::after { inset: 0 auto 0 0; }
.kw-trend { flex-wrap: wrap; gap: 4px 6px; }
.kw-more { justify-content: flex-start; }
.kw-more .btn { white-space: normal; }
}
@media (max-width: 420px) {
.kw-kinds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kw-kinds button svg { width: 28px; height: 28px; padding: 6px; }
.kw-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-table td.kw-c-sel { grid-column: 2; }
.kw-table td.kw-c-kw { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
.kw-console::after, .kw-kinds button, .kw-basis-hint, .kw-how li, .kw-eyebrow::before, .kw-kpi::before, .kw-kpi.skel small, .kw-kpi.skel b, .kw-mixbar i, .kw-vol i::after, .kw-diff b, .kw-tag.fresh i, .kw-form .form-error { animation: none !important; }
.kw-kinds button, .kw-how li, .kw-kpi, .btn.kw-go, .kw-chip, .kw-modes button { transition: none; }
}
.lx-card { --lx: var(--c2); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--lx) 38%, var(--side-bg)), var(--side-bg) 60%), var(--side-bg); animation: lx-rise .45s var(--ease) both; }
.lx-card::after { content: ""; position: absolute; right: -80px; bottom: -110px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--lx) 40%, transparent), transparent 68%); animation: lx-float 9s ease-in-out infinite; }
.lx-card > * { position: relative; z-index: 1; }
.lx-card.lx-page { --lx: var(--c2); } .lx-card.lx-broken { --lx: var(--v-spam); } .lx-card.lx-pages { --lx: var(--c3); } .lx-card.lx-gap { --lx: var(--c4); } .lx-card.lx-bulk { --lx: var(--primary); }
.lx-card-art { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--lx) 30%, transparent); border: 1px solid color-mix(in srgb, var(--lx) 55%, var(--side-line)); animation: lx-pop .5s var(--spring) both .08s; }
.lx-card-art svg { width: 48px; height: 48px; fill: none; stroke: var(--side-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lx-card-art .lx-art-go { stroke: var(--primary); animation: lx-blink 2.2s ease-in-out infinite; }
.lx-card.lx-bulk .lx-art-go { stroke: var(--gold); }
.lx-kick { font: 700 11px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); margin: 0 0 5px; }
.lx-card h3 { font: 800 clamp(18px, 2.4vw, 23px)/1.18 var(--display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.lx-card-main > p:not(.lx-kick) { margin: 6px 0 0; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--side-ink) 80%, transparent); text-wrap: pretty; }
.lx-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: color-mix(in srgb, var(--side-ink) 76%, transparent); }
.lx-facts li { display: inline-flex; align-items: center; animation: lx-rise .45s var(--ease) both; animation-delay: calc(var(--i, 1) * 70ms + 120ms); }
.lx-facts li:nth-child(2) { --i: 2; } .lx-facts li:nth-child(3) { --i: 3; } .lx-facts li:nth-child(4) { --i: 4; }
.lx-facts li:not(.cost)::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lx); margin-right: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lx) 28%, transparent); }
.lx-facts .cost i { font-style: normal; font-weight: 800; margin-right: 7px; padding: 2px 8px; border-radius: 5px; background: var(--primary); color: var(--on-primary); }
.lx-card-act { display: grid; gap: 8px; justify-items: end; text-align: right; }
.lx-card-act .btn.primary { padding: 11px 20px; font-size: 14.5px; box-shadow: 0 10px 22px -12px var(--primary); transition: transform .18s var(--ease), box-shadow .18s; }
.lx-card-act .btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--primary); }
.lx-card-act .btn.primary:active:not(:disabled) { transform: translateY(0) scale(.98); }
.lx-card :focus-visible { outline-color: var(--side-ink); }
.lx-card .cm { justify-self: end; }
.lx-pane { padding: 16px 18px 18px; display: grid; gap: 14px; }
.lx-pane > .blank, .lx-pane > .up-state { margin: 0; }
.lx-urlrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lx-urlrow input { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 8%, transparent); color: var(--side-ink); font: inherit; font-size: 13.5px; }
.lx-urlrow input::placeholder { color: var(--side-muted); }
.lx-urlrow input:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 1px; }
.lx-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; font-size: 12px; color: var(--side-muted); }
.lx-picks button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 7%, transparent); color: var(--side-ink); border-radius: 999px; padding: 4px 11px; font: 600 12px/1.3 var(--font); cursor: pointer; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.lx-picks button:hover { transform: translateY(-1px); border-color: var(--lx); background: color-mix(in srgb, var(--lx) 24%, transparent); }
.lx-picks button b { font-weight: 800; margin-left: 6px; color: var(--side-muted); }
.lx-err { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #ffb4a8; min-height: 1em; }
#bpTabs, #gpTabs { overflow-y: hidden; min-width: 0; max-width: 100%; scrollbar-width: thin; }
.lx-skel { display: grid; gap: 10px; padding: 6px 0; }
.lx-skel span { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.2s linear infinite, lx-rise .4s var(--ease) both; animation-delay: 0s, calc(var(--i, 0) * 60ms); }
.lx-skel-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.lx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--raised); }
.lx-head b { font: 700 15px/1.3 var(--display); }
.lx-head .lx-target { font-size: 12.5px; color: var(--c2-ink); overflow-wrap: anywhere; text-decoration: none; }
.lx-head .lx-target:hover { text-decoration: underline; text-underline-offset: 3px; }
.lx-head .btn { margin-left: auto; }
.lx-from { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--good-soft); color: var(--good); animation: lx-pop .4s var(--spring) both; }
.lx-from.fresh { background: var(--primary-soft); color: var(--primary-ink); }
.lx-from::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lx-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; padding: 14px 18px 0; }
.lx-tile { --lx: var(--c2); position: relative; overflow: hidden; display: grid; gap: 3px; padding: 12px 14px 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--lx) 12%, var(--surface)), var(--surface) 70%); animation: lx-rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s var(--ease), border-color .2s; }
.lx-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lx); }
.lx-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lx) 55%, var(--line)); }
.lx-tile small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.lx-tile b { font: 800 26px/1.1 var(--display); letter-spacing: -0.02em; }
.lx-tile > span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lx-tile.t-bad { --lx: var(--v-spam); } .lx-tile.t-c3 { --lx: var(--c3); } .lx-tile.t-c4 { --lx: var(--c4); } .lx-tile.t-c1 { --lx: var(--c1); } .lx-tile.t-ok { --lx: var(--v-ok); }
.lx-top { margin: 14px 18px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lx-top > b { display: block; font: 700 13.5px/1.3 var(--display); margin-bottom: 8px; }
.lx-top ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.lx-top li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(60px, 4fr) auto; gap: 10px; align-items: center; font-size: 12.5px; animation: lx-rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.lx-top li > span:first-child { display: flex; gap: 8px; align-items: center; min-width: 0; }
.lx-top li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-top u { display: block; height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; text-decoration: none; }
.lx-top u s { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--v-risk), var(--v-spam)); transform-origin: left; animation: lx-grow .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.lx-top li > b { font-weight: 800; min-width: 3ch; text-align: right; }
.lx-code { display: inline-block; min-width: 3.4ch; text-align: center; font: 800 12px/1 var(--mono); padding: 4px 7px; border-radius: 5px; background: var(--good-soft); color: var(--good); }
.lx-code.gone { background: var(--bad-soft); color: var(--bad); }
.lx-code.srv { background: var(--v-spam); color: var(--von-spam); }
.lx-code.move { background: var(--warn-soft); color: var(--warn); }
.lx-spam, .lx-bar { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; }
.lx-spam i, .lx-bar i { display: block; width: 64px; height: 7px; border-radius: 4px; background: var(--grid); position: relative; overflow: hidden; }
.lx-spam i::after, .lx-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--v-ok); transform-origin: left; }
table.fresh .lx-spam i::after, table.fresh .lx-bar i::after { animation: lx-grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
.lx-spam.warn i::after { background: var(--v-warn); } .lx-spam.bad i::after { background: var(--v-spam); }
.lx-spam b, .lx-bar b { font-weight: 700; min-width: 3ch; text-align: right; }
.lx-spam.bad b { color: var(--bad); }
.lx-bar i::after { background: var(--c2); } .lx-bar.c4 i::after { background: var(--c4); } .lx-bar.c3 i::after { background: var(--c3); }
.lx-src { display: grid; gap: 2px; min-width: 0; }
.lx-src b { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
tr.lx-row-broken td:first-child { box-shadow: inset 3px 0 0 var(--v-spam); }
.lx-comps { display: inline-flex; gap: 4px; align-items: center; }
.lx-comps i { font: 700 11.5px/1 var(--font); font-style: normal; min-width: 2.6ch; text-align: center; padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--sw) 18%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--sw) 45%, var(--line)); }
.lx-comps i.off { background: var(--raised); color: var(--muted); border-color: var(--line); border-style: dashed; }
.lx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.lx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--sw); }
.lx-tab-new { font: 800 9.5px/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: var(--primary); color: var(--on-primary); animation: lx-pop .5s var(--spring) both; }
.lx-modes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.lx-enrich { --lx: var(--primary); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 14px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line)); background: linear-gradient(105deg, color-mix(in srgb, var(--primary) 13%, var(--surface)), var(--surface) 55%, color-mix(in srgb, var(--c3) 9%, var(--surface))); animation: lx-rise .45s var(--ease) both; }
.lx-enrich-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 18px -8px var(--primary); animation: lx-pop .5s var(--spring) both; }
.lx-enrich-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lx-enrich h3 { font: 800 16.5px/1.25 var(--display); letter-spacing: -0.01em; margin: 0; }
.lx-enrich p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 80ch; }
.lx-enrich-act { display: grid; gap: 7px; justify-items: end; }
.lx-pickrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.lx-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); font: 700 12.5px/1.2 var(--font); cursor: pointer; user-select: none; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.lx-pick:hover { transform: translateY(-1px); }
.lx-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lx-pick > i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.lx-pick > i::after { content: ""; width: 8px; height: 4px; border: solid var(--on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .2s var(--spring); margin-top: -2px; }
.lx-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.lx-pick:has(input:checked) > i { background: var(--primary); border-color: var(--primary); }
.lx-pick:has(input:checked) > i::after { transform: rotate(-45deg) scale(1); }
.lx-pick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.lx-pick.done { border-color: color-mix(in srgb, var(--v-ok) 60%, var(--line)); background: var(--good-soft); color: var(--good); cursor: default; }
.lx-pick.done > i { background: var(--v-ok); border-color: var(--v-ok); }
.lx-pick.done > i::after { transform: rotate(-45deg) scale(1); }
.lx-pick em { font-style: normal; font-weight: 600; color: var(--muted); }
.lx-cap { font-size: 12px; color: var(--muted); }
.lx-cap b { color: var(--ink); }
.lx-enrich.is-done { border-color: color-mix(in srgb, var(--v-ok) 45%, var(--line)); background: linear-gradient(105deg, color-mix(in srgb, var(--v-ok) 10%, var(--surface)), var(--surface) 60%); }
.lx-enrich.is-done .lx-enrich-ico { background: var(--v-ok); color: var(--von-ok); box-shadow: 0 8px 18px -8px var(--v-ok); }
.lx-enrich-msg { grid-column: 1 / -1; }
.lx-enrich-up { grid-column: 1 / -1; }
#bulkLx:empty { display: none; }
@keyframes lx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lx-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lx-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lx-float { 50% { transform: translate(-18px, -14px) scale(1.06); } }
@keyframes lx-blink { 50% { opacity: .35; } }
@media (max-width: 860px) {
.lx-card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
.lx-card-art { width: 60px; height: 60px; border-radius: 15px; }
.lx-card-art svg { width: 34px; height: 34px; }
.lx-card-act { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
.lx-card-act .btn.primary { width: 100%; }
.lx-card .cm { justify-self: start; }
.lx-enrich { grid-template-columns: auto minmax(0, 1fr); }
.lx-enrich-act { grid-column: 1 / -1; justify-items: stretch; }
.lx-enrich-act .btn { width: 100%; }
}
@media (max-width: 620px) {
.lx-pane { padding: 12px; }
.lx-card { grid-template-columns: minmax(0, 1fr); }
.lx-card-art { display: none; }
.lx-tiles { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 0; }
.lx-top { margin: 12px 12px 0; }
.lx-top li { grid-template-columns: minmax(0, 1fr) auto; }
.lx-top li u { display: none; }
.lx-head { padding: 10px 12px; }
.lx-head .btn { margin-left: 0; }
.lx-urlrow input { flex-basis: 100%; }
.lx-spam i, .lx-bar i { width: 36px; }
.lx-enrich { grid-template-columns: minmax(0, 1fr); padding: 12px; }
.lx-enrich-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.lx-card, .lx-card::after, .lx-card-art, .lx-art-go, .lx-facts li, .lx-skel span, .lx-from, .lx-tile, .lx-top li, .lx-top u s, .lx-tab-new, .lx-enrich, .lx-enrich-ico,
table.fresh .lx-spam i::after, table.fresh .lx-bar i::after { animation: none !important; }
.lx-card-act .btn.primary, .lx-tile, .lx-pick, .lx-picks button { transition: none; }
}
.sx { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sx:empty { display: none; }
.sx-wait { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--surface); }
.sx [data-in] { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.sx-mute { color: var(--muted); }
.sx-back { margin: -4px 0 0; }
.sx-card { overflow: hidden; }
.sx-card .card-head.wrap { row-gap: 6px; }
.sx-headmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sx-stamp { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--font); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.sx-stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sx-stamp.free { background: var(--good-soft); color: var(--good); }
.sx-stamp.paid { background: var(--primary-soft); color: var(--primary-ink); }
.sx-when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sx-none { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--line-strong); background: var(--surface); }
.sx-card > .sx-none { border: 0; border-radius: 0; }
.sx-none .kosto { margin: 0; flex: none; }
.sx-none b { display: block; font: 700 16px/1.3 var(--display); }
.sx-none p { margin-top: 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; max-width: 62ch; }
.sx-clean { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--good-soft); color: var(--good); }
.sx-clean svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--v-ok); color: var(--von-ok); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; animation: pop .5s var(--spring) both .2s; }
.sx-clean b { display: block; font: 700 15px/1.3 var(--display); }
.sx-clean span { font-size: 13px; }
.sx-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px 26px; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--primary) 32%, var(--side-bg)), var(--side-bg) 60%), var(--side-bg); }
.sx-hero::after { content: ""; position: absolute; right: -60px; top: -100px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--c3) 42%, transparent), transparent 68%); animation: sx-float 9s ease-in-out infinite; }
.sx-hero > * { position: relative; z-index: 1; min-width: 0; }
.sx-hero-main { flex: 1 1 320px; }
.sx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.sx-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.sx-hero h2 { font: 800 clamp(19px, 2.6vw, 26px)/1.18 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.sx-hero .sx-when { color: color-mix(in srgb, var(--side-ink) 70%, transparent); }
.sx-hero .sx-stamp.free { background: color-mix(in srgb, var(--v-ok) 26%, transparent); color: var(--side-ink); }
.sx-hero .sx-stamp.paid { background: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--side-ink); }
.sx-hero .vchip { color: var(--side-ink); background: color-mix(in srgb, var(--vc) 30%, transparent); }
.sx-hero-side { display: flex; align-items: center; gap: 20px; flex: none; }
.sx-ring { position: relative; width: 112px; height: 112px; flex: none; }
.sx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sx-ring circle { fill: none; stroke-width: 10; }
.sx-ring .trk { stroke: color-mix(in srgb, var(--side-ink) 14%, transparent); }
.sx-ring .val { stroke: var(--vc); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.sx-ring > b { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; font: 800 30px/1 var(--display); letter-spacing: -0.03em; }
.sx-ring > b small { max-width: 7ch; text-align: center; font: 600 9.5px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink) 68%, transparent); margin-top: 4px; }
.sx-counts { display: grid; gap: 7px; }
.sx-counts > div { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 9px; border-left: 4px solid var(--vc); background: color-mix(in srgb, var(--side-ink) 7%, transparent); }
.sx-counts b { font: 800 19px/1 var(--display); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.sx-counts span { font-size: 12.5px; color: color-mix(in srgb, var(--side-ink) 76%, transparent); }
.sx-redirect { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--v-warn) 55%, var(--line)); background: color-mix(in srgb, var(--v-warn) 9%, var(--surface)); }
.sx-redirect > svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--v-warn); color: var(--von-warn); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sx-redirect > div { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.sx-redirect b { font: 700 15px/1.3 var(--display); }
.sx-redirect p { font-size: 13px; overflow-wrap: anywhere; }
.sx-speeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sx-speed { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 14px 16px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; transition: background .2s; }
.sx-speed:hover { background: var(--raised); }
.sx-speed small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sx-speed > b { font: 700 24px/1.1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.sx-speed.v-none > b { color: var(--muted); }
.sx-bar { position: relative; width: 100%; height: 7px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.sx-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; background: var(--vc, var(--c2)); animation: grow .9s var(--ease) both .15s; }
.sx-bar u { position: absolute; top: 0; bottom: 0; left: var(--l); width: 2px; background: var(--ink); opacity: .45; }
.sx-fall { display: grid; gap: 10px; padding: 14px 18px 16px; }
.sx-fall-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--grid); }
.sx-fall-bar i { width: var(--w); min-width: 3px; background: var(--sw); transform-origin: left; animation: sx-scale .8s var(--ease) both; }
.sx-fall-bar i:nth-child(2) { animation-delay: .12s; } .sx-fall-bar i:nth-child(3) { animation-delay: .24s; } .sx-fall-bar i:nth-child(4) { animation-delay: .36s; }
.sx-fall ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.sx-fall li { display: inline-flex; align-items: center; gap: 6px; }
.sx-fall li i { width: 10px; height: 10px; border-radius: 3px; background: var(--sw); }
.sx-fall li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sx-card .au-checks li > .tag { align-self: center; }
.sx-more { border-top: 1px solid var(--line); }
.sx-more summary { cursor: pointer; padding: 10px 18px; font-weight: 700; font-size: 13px; color: var(--ink-2); list-style-position: inside; transition: background .15s, color .15s; }
.sx-more summary:hover { background: var(--raised); color: var(--ink); }
.sx-more[open] summary { border-bottom: 1px solid var(--line); }
.sx-notes { display: grid; margin: 0; padding: 0; list-style: none; }
.sx-notes li { display: flex; gap: 10px; align-items: baseline; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; border-left: 3px solid var(--vc); }
.sx-notes li:first-child { border-top: 0; }
.sx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sx-pad { display: grid; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sx-pad h3 { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.sx-pad h3:first-child { margin-top: 0; }
.sx-pad p { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.sx-pad p.sx-big { font: 600 15px/1.35 var(--font); color: var(--ink); }
.sx-len { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sx-len b { font: 600 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.sx-hcols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 132px; margin: 0; padding: 16px 18px 12px; list-style: none; border-bottom: 1px solid var(--line); }
.sx-hcols li { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 3px; height: 100%; justify-items: center; text-align: center; }
.sx-hcols i { align-self: end; width: 100%; max-width: 44px; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--c2); transform-origin: bottom; animation: growY .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .1s); }
.sx-hcols li:first-child i { background: var(--primary); }
.sx-hcols li.off i { background: var(--v-spam); }
.sx-hcols b { font: 700 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.sx-hcols span { font: 700 10.5px/1 var(--font); letter-spacing: .06em; color: var(--muted); }
.sx-tree { display: grid; gap: 6px; margin: 0; padding: 12px 18px; list-style: none; font-size: 13px; }
.sx-tree li { display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; min-width: 0; }
.sx-tree .l-h1 { font-weight: 700; }
.sx-tree .l-h2 { padding-left: 16px; color: var(--ink-2); }
.sx-tree .l-h3 { padding-left: 32px; color: var(--muted); }
.sx-tree .l-h1 .tag { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sx-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--raised); font-size: 12.5px; color: var(--ink-2); }
.sx-facts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sx-ress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-res { display: grid; gap: 3px; align-content: start; padding: 14px 16px; border-right: 1px solid var(--line); border-top: 4px solid var(--sw); min-width: 0; }
.sx-res:last-child { border-right: 0; }
.sx-res small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sx-res b { font: 700 24px/1.15 var(--display); letter-spacing: -0.02em; }
.sx-res span { font-size: 12.5px; color: var(--ink-2); }
.sx-res em { font-style: normal; color: var(--warn); font-weight: 600; }
.sx-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--line); }
.sx-flags small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }
.sx-total { font-size: 12.5px; color: var(--ink-2); }
.sx-total b { font: 800 17px/1 var(--display); color: var(--primary-ink); margin-right: 3px; }
.sx-tcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 16px 18px; }
.sx-tcat { display: grid; gap: 10px; align-content: start; padding: 13px 14px 14px; border-radius: 12px; border: 1px solid var(--line); border-top: 4px solid var(--sw); background: color-mix(in srgb, var(--sw) 5%, var(--surface)); min-width: 0; transition: transform .2s var(--ease), box-shadow .2s; }
.sx-tcat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sx-tcat h3 { display: flex; align-items: center; gap: 8px; font: 700 15px/1.25 var(--display); }
.sx-tcat h3 i { width: 10px; height: 10px; border-radius: 3px; background: var(--sw); flex: none; }
.sx-tcat h3 small { margin-left: auto; font: 700 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 999px; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
.sx-tgrp { display: grid; gap: 5px; }
.sx-tgrp > span { font: 700 10.5px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-tags b { font: 600 12.5px/1.3 var(--font); padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--sw) 45%, var(--line)); overflow-wrap: anywhere; animation: pop .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 35ms + .15s); transition: background .15s, transform .15s var(--ease); }
.sx-tags b:hover { background: color-mix(in srgb, var(--sw) 16%, var(--surface)); transform: translateY(-1px); }
.sx-social { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 12.5px; }
.sx-social small { color: var(--muted); }
.sx-social a { font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; transition: border-color .15s, color .15s; }
.sx-social a:hover { border-color: var(--ink); color: var(--ink); }
.sx-wgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-wcell { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.sx-wcell.wide { grid-column: span 2; background: linear-gradient(100deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface) 70%); }
.sx-wgrid > :last-child { grid-column-end: -1; border-right: 0; }
.sx-wcell small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.sx-wcell > b { font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sx-wcell > span { font-size: 12.5px; color: var(--ink-2); }
.sx-wcell em { font-style: normal; }
.sx-life { display: grid; gap: 8px; padding: 16px 18px 14px; }
.sx-life-bar { position: relative; height: 10px; border-radius: 5px; background: var(--grid); }
.sx-life-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--c2), var(--vc)); animation: grow 1.1s var(--ease) both .2s; }
.sx-life-bar u { position: absolute; top: 50%; left: var(--l); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--surface); border: 4px solid var(--vc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc) 22%, transparent); animation: pop .5s var(--spring) both 1s; }
.sx-life-ends { display: flex; justify-content: space-between; gap: 10px; font: 600 12.5px/1.3 var(--font); }
.sx-life-ends span { display: grid; gap: 1px; }
.sx-life-ends span:last-child { text-align: right; }
.sx-life-ends .now { text-align: center; color: var(--ink-2); }
.sx-life-ends small { font: 700 10.5px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
@keyframes sx-float { 50% { transform: translate(-18px, 14px) scale(1.06); } }
@keyframes sx-scale { from { transform: scaleX(0); } }
@media (max-width: 900px) {
.sx-duo { grid-template-columns: minmax(0, 1fr); }
.sx-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-ress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-res:nth-child(2) { border-right: 0; }
.sx-res:nth-child(n+3) { border-top-width: 4px; }
}
@media (max-width: 720px) {
.sx-hero { flex-direction: column; align-items: stretch; padding: 18px 16px; }
.sx-hero-main { flex: none; }
.sx-hero-side { justify-content: space-between; }
.sx-speeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-tcats { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; }
.sx-none { flex-direction: column; text-align: center; }
.sx-redirect .btn { width: 100%; }
.sx-card .au-checks li > .tag { display: none; }
.sx-pad, .sx-fall, .sx-life, .sx-facts, .sx-flags, .sx-social, .sx-tree { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 420px) {
.sx-ring { width: 92px; height: 92px; }
.sx-ring > b { font-size: 24px; }
.sx-wgrid { grid-template-columns: minmax(0, 1fr); }
.sx-wcell.wide { grid-column: auto; }
.sx-hcols { gap: 4px; padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.sx [data-in], .sx-hero::after, .sx-eyebrow::before, .sx-bar i, .sx-fall-bar i, .sx-hcols i, .sx-tags b, .sx-life-bar i, .sx-life-bar u, .sx-clean svg { animation: none !important; }
.sx-ring .val { transition: none; }
.sx-tcat, .sx-tags b { transition: none; }
}
@media print { .sx .dx-gate, .sx-back { display: none; } }
.bx { --bx-pos: var(--v-ok); --bx-neg: var(--v-spam); --bx-neu: var(--c2); --bx-unk: var(--line-strong); }
.bx-form .tl-row { align-items: end; }
.bx-fld-q { flex: 2 1 240px; }
.bx-fld-q input { font-weight: 600; }
.bx-fld-p { flex: 0 1 auto; }
.btn.bx-go { padding: 9px 18px; font-size: 14px; }
.bx-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-strong); }
.bx-pills button { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background .18s, color .18s, transform .12s; }
.bx-pills button:hover { color: var(--ink); }
.bx-pills button:active { transform: scale(.96); }
.bx-pills button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bx-pills button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.bx-pills.small button { padding: 4px 10px; font-size: 12.5px; }
.bx-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 34%, var(--side-bg)), var(--side-bg) 58%), var(--side-bg); }
.bx-hero.ai { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c3) 42%, var(--side-bg)), var(--side-bg) 60%), var(--side-bg); }
.bx-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent), transparent 68%); animation: bx-float 9s ease-in-out infinite; }
.bx-hero.ai::after { background: radial-gradient(circle, color-mix(in srgb, var(--primary) 42%, transparent), transparent 68%); }
.bx-hero > * { position: relative; z-index: 1; }
.bx-hero-top { display: flex; gap: 18px; align-items: center; }
.bx-hero-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--primary) 24%, transparent); border: 1px solid var(--side-line); }
.bx-hero.ai .bx-hero-art { background: color-mix(in srgb, var(--c3) 30%, transparent); }
.bx-hero-art .kosto { margin: 0; }
.bx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.bx-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.bx-hero h2 { font: 800 clamp(22px, 3.2vw, 32px)/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.bx-hero-txt > p:last-child { margin-top: 8px; max-width: 68ch; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--side-ink) 80%, transparent); text-wrap: pretty; }
.bx-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bx-how li { position: relative; display: grid; gap: 5px; align-content: start; padding: 13px 15px 12px; border-radius: 12px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 5%, transparent);
animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.bx-how li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 60%, var(--side-line)); background: color-mix(in srgb, var(--side-ink) 9%, transparent); }
.bx-how li:not(:last-child)::after { content: ""; position: absolute; top: 31px; right: -13px; width: 13px; height: 2px; background: var(--side-line); }
.bx-how-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font: 800 16px/1 var(--display); background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -6px var(--primary); }
.bx-how li:nth-child(2) .bx-how-n { background: var(--c2); box-shadow: 0 6px 16px -6px var(--c2); }
.bx-how li:nth-child(3) .bx-how-n { background: var(--c4); box-shadow: 0 6px 16px -6px var(--c4); }
.bx-how b { font: 700 16px/1.25 var(--display); margin-top: 4px; }
.bx-how p { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--side-ink) 74%, transparent); }
.bx-how em { justify-self: start; font: 700 11px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; margin-top: 4px; color: var(--side-ink); }
.bx-how em.free { background: color-mix(in srgb, var(--v-ok) 26%, transparent); }
.bx-how em.cost { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.bx-sample { position: relative; border-style: dashed; border-color: var(--line-strong); }
.bx-sample .bx-table, .bx-sample .ai-list { pointer-events: none; }
.bx-sample-tag { font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--c3-soft); color: var(--c3-ink); }
.bx-ask { display: grid; gap: 12px; }
.bx-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.bx-preview { opacity: .78; }
#bmFail:empty, #aiFail:empty, #aiMFail:empty, #bmMoreHost:empty, #aiMoreHost:empty, .ai-metrics:empty { display: none; }
.bx-wait { display: flex; gap: 16px; align-items: center; border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: linear-gradient(100deg, var(--primary-soft), var(--surface) 70%); animation: rise .35s var(--ease) both; }
.bx-wait-art { flex: none; }
.bx-wait-art .kosto { margin: 0; }
.bx-wait b { display: block; font: 800 17px/1.25 var(--display); }
.bx-wait p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.bx-wait > div:last-child { flex: 1; min-width: 0; }
.bx-wait-bar { display: block; position: relative; height: 5px; margin-top: 12px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.bx-wait-bar i { position: absolute; inset: 0 auto 0 0; width: 32%; border-radius: 3px; background: var(--primary); animation: slide 1.4s ease-in-out infinite; }
.bx-rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bx-rhead h2 { display: grid; font: 800 24px/1.15 var(--display); letter-spacing: -0.02em; margin-right: 6px; overflow-wrap: anywhere; min-width: 0; }
.bx-rhead h2 small { font: 700 11px/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); }
.bx-rhead.sub h2 { font-size: 18px; }
.bx-rhead-act { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bx-zero { padding: 40px 24px; }
.bx-zero .tag { margin-top: 10px; }
.bx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bx-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-wait .bx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-kpi { position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 14px 16px 13px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc, var(--line-strong)) 13%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--kc, var(--line-strong)) 30%, var(--line)); transition: transform .2s var(--ease), border-color .2s; }
.bx-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kc, var(--line-strong)); }
.bx-kpi:hover { transform: translateY(-2px); border-color: var(--kc, var(--line-strong)); }
.bx-kpi.sk { gap: 9px; min-height: 92px; }
.bx-kpi small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-kpi b { display: flex; align-items: baseline; gap: 6px; font: 800 30px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; min-width: 0; }
.bx-kpi b em { font: 700 15px/1 var(--display); font-style: normal; color: var(--muted); }
.bx-kpi > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-kpi-date { font-size: 19px; line-height: 1.8; }
.bx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.bx-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-card { display: grid; gap: 12px; align-content: start; }
.bx-card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bx-card-h h2 { font: 700 15px/1.3 var(--display); }
.bx-sub-h { font: 700 10.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bx-none { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }
.bx-chart { min-height: 220px; }
.bx-chart .bx-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.bx-chart .bx-col .bx-bar { animation: growY .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms + 120ms); }
.bx-chart.no-anim .bx-col .bx-bar { animation: none; }
.bx-chart .bx-bar.positive, .bx-legend .positive { fill: var(--bx-pos); background: var(--bx-pos); }
.bx-chart .bx-bar.neutral, .bx-legend .neutral { fill: var(--bx-neu); background: var(--bx-neu); }
.bx-chart .bx-bar.negative, .bx-legend .negative { fill: var(--bx-neg); background: var(--bx-neg); }
.bx-chart .bx-bar.unknown, .bx-legend .unknown { fill: var(--bx-unk); background: var(--bx-unk); }
.bx-chart .bx-hit { fill: transparent; cursor: default; }
.bx-chart .bx-col:hover .bx-bar { filter: brightness(1.15); }
.bx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
.bx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bx-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bx-sbar { display: flex; gap: 3px; height: 20px; border-radius: 10px; overflow: hidden; background: var(--grid); }
.bx-sbar i { display: block; min-width: 6px; flex-basis: 0; border-radius: 3px; transform-origin: left; animation: bx-growx .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); transition: filter .15s; }
.bx-sbar i:hover { filter: brightness(1.15); }
.bx-sbar .positive, .bx-slegend .positive { background: var(--bx-pos); }
.bx-sbar .neutral, .bx-slegend .neutral { background: var(--bx-neu); }
.bx-sbar .negative, .bx-slegend .negative { background: var(--bx-neg); }
.bx-slegend { display: grid; gap: 7px; }
.bx-slegend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; }
.bx-slegend i { width: 10px; height: 10px; border-radius: 3px; }
.bx-slegend b { font: 800 15px var(--display); }
.bx-slegend small { color: var(--muted); font-size: 12px; min-width: 44px; text-align: right; }
.bx-emo { display: grid; gap: 7px; }
.bx-emo li { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.bx-emo { --bc: var(--c3); }
.bx-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bx-bars li { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.bx-bars-l { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; }
.bx-bars-l a, .bx-bars-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-bars-l a { text-decoration: none; min-width: 0; }
.bx-bars-l a:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.bx-bars-l small { flex: none; font: 700 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: var(--primary); color: var(--on-primary); }
.bx-bars-t { display: block; height: 9px; border-radius: 5px; overflow: hidden; background: var(--grid); }
.bx-bars-t i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--bc, var(--c2)); transform-origin: left; animation: bx-growx .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
.bx-bars li.me .bx-bars-t i { background: var(--primary); }
.bx-bars li.me .bx-bars-l { color: var(--primary-ink); }
.bx-bars b { font: 800 13.5px var(--display); min-width: 28px; text-align: right; }
.bx-geo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bx-geo > div { display: grid; gap: 8px; align-content: start; }
.bx-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.bx-q { display: flex; align-items: center; gap: 7px; flex: 0 1 260px; min-width: 160px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); transition: border-color .15s, background .15s; }
.bx-q:focus-within { border-color: var(--ink); background: var(--surface); }
.bx-q svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.bx-q input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 7px 0; font-size: 13.5px; }
.bx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.bx-chip:hover { border-color: var(--ink); }
.bx-chip:active { transform: scale(.96); }
.bx-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bx-chip b { font-weight: 800; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--ink-2); }
.bx-chip.positive b, .bx-chip.cited b, .bx-chip.named b { background: var(--good-soft); color: var(--good); }
.bx-chip.negative b, .bx-chip.gap b { background: var(--bad-soft); color: var(--bad); }
.bx-chip.neutral b { background: var(--c2-soft); color: var(--c2-ink); }
.bx-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.bx-chip[aria-pressed="true"] b { background: color-mix(in srgb, var(--surface) 22%, transparent); color: var(--surface); }
.bx-table td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.bx-table th, .bx-table td { padding-left: 14px; padding-right: 14px; }
.bx-table th:first-child, .bx-table td:first-child { padding-left: 18px; }
.bx-table td.bx-c-what { white-space: normal; min-width: 260px; width: 52%; }
.bx-table td.bx-c-src { max-width: 240px; }
.bx-dom { display: flex; align-items: center; gap: 9px; min-width: 0; font-weight: 700; }
.bx-dom > span { overflow: hidden; text-overflow: ellipsis; }
.bx-dom i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font: 800 13px/1 var(--display); font-style: normal; background: var(--sw, var(--c2)); color: var(--surface); }
.bx-type { display: inline-block; margin: 5px 0 0 35px; font: 700 10.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bx-m-title { display: inline; font: 700 14.5px/1.35 var(--display); text-decoration: none; overflow-wrap: anywhere; }
a.bx-m-title:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.bx-m-title svg { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: var(--muted); stroke-width: 2; }
.bx-c-what p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bx-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.bx-sent::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bx-sent.positive { background: var(--good-soft); color: var(--good); }
.bx-sent.negative { background: var(--bad-soft); color: var(--bad); }
.bx-sent.neutral { background: var(--c2-soft); color: var(--c2-ink); }
.bx-sent.unknown { background: var(--raised); color: var(--muted); font-weight: 700; }
.bx-table.fresh .bx-sent { animation: pop .4s var(--spring) both; animation-delay: calc(var(--r, 0) * 30ms + 120ms); }
.bx-rank { display: inline-grid; grid-template-columns: 54px auto; align-items: center; gap: 8px; }
.bx-rank i { display: block; position: relative; height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.bx-rank i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--c4); }
.bx-table.fresh .bx-rank i::after { animation: grow .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 22ms); }
.bx-rank b { font: 800 13px var(--display); }
.bx-msg { text-align: center; padding: 34px 18px; color: var(--muted); white-space: normal; list-style: none; }
.bx-tcard .card-foot > span { flex: 1 1 320px; line-height: 1.5; }
.ai-plat { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font); padding: 6px 10px; border-radius: 999px; background: var(--c3-soft); color: var(--c3-ink); white-space: nowrap; }
.ai-plat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c3); }
.ai-plat.chat_gpt { background: var(--c4-soft); color: var(--c4-ink); }
.ai-plat.chat_gpt::before { background: var(--c4); }
.ai-ringrow { display: flex; align-items: center; gap: 16px; }
.ai-ringrow p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ai-gap { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-ink) !important; font-weight: 700; }
.ai-ring { flex: none; }
.ai-ring circle { fill: none; stroke-width: 12; }
.ai-ring-bg { stroke: var(--grid); }
.ai-ring-v { stroke: var(--v-ok); stroke-linecap: round; animation: ai-ring 1.1s var(--ease) both; animation-delay: .2s; }
.ai-ring text { stroke: none; }
.ai-ring-n { fill: var(--ink); font: 800 26px var(--display); letter-spacing: -0.02em; }
.ai-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ai-cloud li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: calc(13px * var(--s, 1)); font-weight: 700; background: var(--c4-soft); color: var(--c4-ink); animation: pop .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 40ms + 150ms); }
.ai-cloud li:nth-child(3n+2) { background: var(--c2-soft); color: var(--c2-ink); }
.ai-cloud li:nth-child(3n) { background: var(--c3-soft); color: var(--c3-ink); }
.ai-cloud li b { font: 800 11.5px var(--display); padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); }
.ai-list { margin: 0; padding: 0; list-style: none; }
.ai-item { display: grid; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); border-left: 4px solid transparent; transition: background .15s, border-color .15s; }
.ai-list > .ai-item:first-child { border-top: 0; }
.ai-item:hover { background: var(--raised); }
.ai-item.cited { border-left-color: var(--v-ok); }
.ai-item.named { border-left-color: var(--c2); }
.ai-item.results { border-left-color: var(--v-warn); }
.ai-item.open { background: var(--raised); }
.ai-list.fresh .ai-item { animation: rise .35s var(--ease) both; animation-delay: calc(var(--r, 0) * 26ms); }
.ai-q { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: flex-start; gap: 8px; font: 700 15.5px/1.35 var(--display); overflow-wrap: anywhere; border-radius: 4px; }
span.ai-q { cursor: default; }
.ai-q svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--muted); stroke-width: 2.2; transition: transform .25s var(--ease), color .15s; }
.ai-q[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--primary); }
.ai-q:hover { color: var(--primary-ink); }
.ai-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ai-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 4px 9px; border-radius: 7px; white-space: nowrap; background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
.ai-badge svg { width: 13px; height: 13px; stroke-width: 2.6; }
.ai-badge.cited { background: var(--good-soft); color: var(--good); border-color: transparent; }
.ai-badge.named { background: var(--c2-soft); color: var(--c2-ink); border-color: transparent; }
.ai-badge.results { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ai-badge.none { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.ai-vol { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ai-more { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); animation: rise .3s var(--ease) both; }
.ai-answer { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 96ch; overflow-wrap: anywhere; }
.ai-srcs, .ai-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ai-srcs li > * { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--line-strong); background: var(--raised); transition: border-color .15s; }
.ai-srcs li a:hover { border-color: var(--ink); }
.ai-srcs li i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 800 11px/1 var(--display); font-style: normal; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.ai-srcs li.me > * { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; }
.ai-srcs li.me i { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ai-tags li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 700; background: var(--c4-soft); color: var(--c4-ink); }
.ai-tags li small { font-weight: 600; font-size: 11px; opacity: .8; }
.ai-tags.plain li { background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); font-weight: 600; }
.ai-metrics { display: grid; gap: 14px; }
@keyframes bx-float { 50% { transform: translate(-24px, 20px) scale(1.08); } }
@keyframes bx-growx { from { transform: scaleX(0); } }
@keyframes ai-ring { from { stroke-dasharray: 0 100; } }
@media (max-width: 1100px) {
.bx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-grid.three > .ai-ringcard { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
.bx-how { grid-template-columns: minmax(0, 1fr); }
.bx-how li { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
.bx-how li .bx-how-n { grid-row: span 3; }
.bx-how li b { margin-top: 0; }
.bx-how li:not(:last-child)::after { top: auto; bottom: -13px; right: auto; left: 31px; width: 2px; height: 13px; }
.bx-grid, .bx-grid.three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.bx-hero { padding: 18px 16px; }
.bx-hero-art { width: 72px; height: 72px; border-radius: 16px; }
.bx-hero-art .kosto { --ks: 64px !important; }
.bx-hero-art .kosto img { width: 64px; height: 64px; }
.bx-form .tl-row > .fld, .bx-form .tl-row > .btn { flex: 1 1 100%; }
.bx-pills { display: flex; }
.bx-pills button { flex: 1 1 auto; text-align: center; }
.bx-pills.small { display: inline-flex; }
.bx-kpis, .tl-wait .bx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bx-kpis:not(.two) .bx-kpi:nth-child(5) { grid-column: 1 / -1; }
.bx-kpi b { font-size: 26px; }
.bx-rhead h2 { flex: 1 1 100%; font-size: 21px; }
.bx-rhead-act { margin-left: 0; width: 100%; }
.bx-rhead-act .btn { flex: 1 1 auto; white-space: normal; }
.bx-tools { padding: 10px 12px; }
.bx-q { flex: 1 1 100%; }
.bx-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; max-width: 100%; }
.bx-chip { flex: none; }
.bx-wait { flex-direction: column; align-items: flex-start; }
.bx-geo { grid-template-columns: minmax(0, 1fr); }
.ai-ringrow { flex-direction: column; align-items: flex-start; }
.ai-item { padding: 13px 12px; }
.bx-table, .bx-table tbody { display: block; width: 100%; }
.bx-table thead { display: none; }
.bx-table tr.bx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 14px 12px; border-top: 1px solid var(--line); }
.bx-table tbody tr.bx-row:first-child { border-top: 0; }
.bx-table tr.bx-row td { display: grid; gap: 4px; align-content: start; justify-items: start; padding: 0; border: 0; white-space: normal; min-width: 0; width: auto; max-width: none; }
.bx-table tr.bx-row td[data-l]::before { content: attr(data-l); font: 700 10px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bx-table tr.bx-row td.bx-c-src { grid-column: 1 / -1; grid-row: 1; }
.bx-table tr.bx-row td.bx-c-src::before { display: none; }
.bx-table tr.bx-row td.bx-c-what { grid-column: 1 / -1; grid-row: 2; }
.bx-type { margin-left: 35px; margin-top: 0; }
.bx-table tr:not(.bx-row), .bx-table tr:not(.bx-row) td { display: block; }
}
@media (max-width: 520px) {
.bx-hero-top { align-items: flex-start; }
.bx-bars li { grid-template-columns: minmax(0, 46%) minmax(0, 1fr) auto; gap: 8px; }
.bx-emo li { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.bx-hero::after, .bx-eyebrow::before, .bx-how li, .bx-wait, .bx-wait-bar i, .bx-chart .bx-col .bx-bar, .bx-sbar i, .bx-bars-t i, .bx-sent, .bx-rank i::after, .ai-ring-v, .ai-cloud li, .ai-item, .ai-more { animation: none !important; }
.bx-kpi, .bx-how li, .bx-pills button, .bx-chip { transition: none; }
}
.xd .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xd-hero { position: relative; overflow: hidden; display: grid; gap: 16px; padding: 20px 22px; border-radius: 14px; color: var(--side-ink); border: 1px solid var(--side-line);
background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--v-spam) 30%, var(--side-bg)), var(--side-bg) 56%), var(--side-bg); }
.xd-hero::before { content: ""; position: absolute; left: 38%; bottom: -150px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--primary) 38%, transparent), transparent 68%); animation: xd-float 11s ease-in-out infinite reverse; }
.xd-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--c2) 45%, transparent), transparent 68%); animation: xd-float 9s ease-in-out infinite; }
.xd-hero > * { position: relative; z-index: 1; }
.xd-hero-top { display: flex; gap: 18px; align-items: center; }
.xd-hero-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 20px; background: var(--side-ink); border: 1px solid transparent; }
.xd-hero-art .kosto { margin: 0; }
.xd-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 700 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.xd-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent); animation: pulse 1.9s ease-in-out infinite; }
.xd-free { font: 700 10.5px/1 var(--font); letter-spacing: .05em; padding: 5px 9px; border-radius: 999px; color: var(--side-ink); border: 1px solid color-mix(in srgb, var(--v-ok) 60%, transparent); background: color-mix(in srgb, var(--v-ok) 22%, transparent); }
.xd-hero h1 { font: 800 clamp(24px, 3.4vw, 34px)/1.1 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.xd-hero-txt > p:last-child { margin-top: 8px; max-width: 66ch; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--side-ink) 80%, transparent); text-wrap: pretty; }
.xd-tier { display: inline-flex; align-items: center; gap: 5px; font: 800 10.5px/1 var(--font); letter-spacing: .05em; padding: 5px 9px 5px 7px; border-radius: 999px; background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -8px var(--primary); }
.xd-tier svg { width: 13px; height: 13px; stroke-width: 2.2; }
.xd-hero-txt { flex: 1 1 320px; min-width: 0; }
.xd-count { flex: none; display: grid; gap: 4px; justify-items: start; min-width: 250px; padding: 14px 18px 13px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--v-spam) 55%, var(--side-line)); background: linear-gradient(150deg, color-mix(in srgb, var(--v-spam) 26%, transparent), color-mix(in srgb, var(--side-ink) 4%, transparent)); animation: rise .5s var(--ease) .1s both; }
.xd-count[hidden] { display: none; }
.xd-count-live { display: inline-flex; align-items: center; gap: 7px; font: 800 10.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--side-ink) 78%, transparent); }
.xd-count-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--v-spam); animation: xd-ping 1.8s ease-out infinite; }
.xd-count b { font: 800 clamp(30px, 3.6vw, 40px)/1.05 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.xd-count-l { font-size: 13.5px; font-weight: 700; color: var(--side-ink); }
.xd-count-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 4px; }
.xd-count-bars i { width: 5px; height: 100%; border-radius: 2px; transform-origin: bottom; background: color-mix(in srgb, var(--v-spam) 80%, var(--side-ink)); animation: xd-eq 1.7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -137ms); }
.xd-count-bars i:nth-child(3n) { background: var(--c1); }
.xd-count small { font-size: 11.5px; line-height: 1.4; color: color-mix(in srgb, var(--side-ink) 62%, transparent); max-width: 30ch; }
.xd-uses { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: stretch; }
.xd-uses-t { align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 10.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.xd-use { position: relative; padding: 12px 14px 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--side-ink) 4%, transparent); border: 1px dashed var(--side-line); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 380ms); transition: transform .2s var(--ease), border-color .2s; }
.xd-use::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--c4); }
.xd-use:nth-child(3)::before { background: var(--gold); }
.xd-use:nth-child(4)::before { background: var(--c3); }
.xd-use:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--side-ink) 40%, var(--side-line)); }
.xd-use b { font: 700 14px/1.3 var(--display); }
.xd-use p { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--side-ink) 72%, transparent); }
.xd-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.xd-how li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; align-items: start; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 5%, transparent);
animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.xd-how li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 60%, var(--side-line)); background: color-mix(in srgb, var(--side-ink) 9%, transparent); }
.xd-how-n { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font: 800 16px/1 var(--display); background: var(--v-spam); color: var(--side-ink); box-shadow: 0 6px 16px -6px var(--v-spam); }
.xd-how li:nth-child(2) .xd-how-n { background: var(--c2); box-shadow: 0 6px 16px -6px var(--c2); }
.xd-how li:nth-child(3) .xd-how-n { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px -6px var(--primary); }
.xd-how b { font: 700 15.5px/1.25 var(--display); align-self: center; }
.xd-how p { grid-column: 2; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--side-ink) 74%, transparent); }
.xd-hero .th-switch { padding-top: 12px; }
.xd-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); animation: rise .4s var(--ease) both; }
.xd-plan[hidden] { display: none; }
.xd-plan[data-tone="full"] { border-color: color-mix(in srgb, var(--v-ok) 45%, var(--line)); background: linear-gradient(100deg, var(--good-soft), var(--surface) 55%); }
.xd-plan[data-tone="open"] { border-color: color-mix(in srgb, var(--c4) 50%, var(--line)); background: linear-gradient(100deg, var(--c4-soft), var(--surface) 55%); }
.xd-plan[data-tone="ok"], .xd-plan[data-tone="last"] { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); background: linear-gradient(100deg, var(--primary-soft), var(--surface) 60%); }
.xd-plan[data-tone="out"], .xd-plan[data-tone="verify"], .xd-plan[data-tone="device"] { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: linear-gradient(100deg, var(--warn-soft), var(--surface) 60%); }
.xd-plan-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: var(--surface); }
.xd-plan-ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.xd-plan[data-tone="full"] .xd-plan-ic, .xd-plan[data-tone="open"] .xd-plan-ic { background: var(--v-ok); color: var(--von-ok); }
.xd-plan-txt { flex: 1 1 300px; min-width: 0; }
.xd-plan-txt b { font: 800 15px/1.25 var(--display); }
.xd-plan-txt p { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.xd-meter { display: grid; grid-template-columns: auto auto; gap: 3px 10px; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.xd-meter small { grid-column: 1 / -1; font: 700 10px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.xd-meter b { font: 800 13.5px/1.2 var(--display); white-space: nowrap; }
.xd-pips { display: inline-flex; gap: 5px; }
.xd-pips i { width: 15px; height: 15px; border-radius: 5px; border: 2px solid var(--line-strong); background: var(--raised); animation: pop .4s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.xd-pips i.on { border-color: var(--primary); background: var(--c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.xd-form { display: grid; gap: 14px; padding: 18px; border-radius: 12px; border: 2px solid var(--primary); box-shadow: 5px 5px 0 var(--primary); }
.xd-f { display: grid; gap: 7px; min-width: 0; }
.xd-f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
.xd-f-l { display: flex; align-items: center; gap: 8px; font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.xd-paid { display: none; align-items: center; gap: 4px; padding: 3px 7px 3px 5px; border-radius: 999px; font: 800 9.5px/1 var(--font); letter-spacing: .06em; cursor: help; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.xd-paid svg { width: 11px; height: 11px; stroke-width: 2.4; }
.xd[data-free="1"] .xd-paid { display: inline-flex; }
.xd-form-note { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.xd[data-free="1"] .xd-form-note { color: var(--primary-ink); font-weight: 600; }
.xd-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xd-opt { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-strong); background: var(--surface); transition: background .15s, border-color .15s, color .15s, transform .12s; }
.xd-opt.mono { font-family: var(--mono); font-size: 12.5px; }
.xd-opt:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.xd-opt:active { transform: scale(.96); }
.xd-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.xd-opt[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 6px 14px -8px var(--primary); }
.xd-other { width: 132px; padding: 6px 12px; border-radius: 999px; font: 600 12.5px var(--mono); background: var(--raised); border: 1px dashed var(--line-strong); outline: 0; transition: border-color .15s, background .15s; }
.xd-other:focus { border-color: var(--ink); border-style: solid; background: var(--surface); }
.xd-other.on { border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.xd-go { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.xd-q { display: grid; gap: 7px; flex: 1 1 240px; min-width: 0; }
.xd-q-in { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); transition: border-color .15s, background .15s; }
.xd-q-in:focus-within { border-color: var(--ink); background: var(--surface); }
.xd-q-in svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.xd-q-in input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 11px 0; font-size: 14.5px; }
.btn.xd-run { padding: 12px 18px; border-radius: 10px; font-size: 15px; gap: 10px; box-shadow: 0 10px 26px -10px var(--primary); transition: background .15s, border-color .15s, transform .12s, box-shadow .2s; }
.btn.xd-run:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--primary); }
.btn.xd-run svg { width: 17px; height: 17px; stroke-width: 2.4; }
.btn.xd-run em { font-style: normal; font: 800 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px; white-space: nowrap; background: color-mix(in srgb, var(--on-primary) 22%, transparent); color: var(--on-primary); }
.xd-form .form-error { margin: 0; color: var(--bad); font-size: 13px; font-weight: 600; }
.xd-form .form-error:empty { display: none; }
.xd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xd-kpi { position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 14px 16px 13px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--kc) 13%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--line));
animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s var(--ease), border-color .2s; }
.xd-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kc); }
.xd-kpi:hover { transform: translateY(-2px); border-color: var(--kc); }
.xd-kpi small { font: 700 11px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-kpi b { font: 800 30px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xd-kpi > span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xd-note { animation: rise .4s var(--ease) .15s both; line-height: 1.5; }
.xd-head-r { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.xd-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); }
.xd-sort button { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); transition: background .18s, color .18s; }
.xd-sort button:hover { color: var(--ink); }
.xd-sort button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.xd-sort button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.xd-warn { display: flex; gap: 8px; align-items: center; padding: 9px 18px; font-size: 13px; background: var(--warn-soft); border-bottom: 1px solid var(--line); }
.xd-warn[hidden] { display: none; }
.xd-warn svg { width: 17px; height: 17px; flex: none; color: var(--warn); }
.xd-table { width: 100%; }
.xd-table th, .xd-table td { padding: 10px 14px; vertical-align: middle; }
.xd-table th:first-child, .xd-table td.xd-c-dom { padding-left: 18px; }
.xd-c-dom { min-width: 220px; white-space: normal; }
.xd-domwrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.xd-n { flex: none; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 6px; border-radius: 8px; font: 800 12.5px/1 var(--display); background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
.xd-dom { display: grid; gap: 5px; min-width: 0; justify-items: start; }
.xd-name { all: unset; cursor: pointer; font: 700 14.5px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; border-radius: 3px; transition: color .15s; }
.xd-name:hover { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.xd-name:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.xd-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.xd-dead { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: help; background: var(--bad-soft); color: var(--bad); }
.xd-dead i { width: 7px; height: 7px; border-radius: 2px; background: var(--v-spam); }
.xd-infra { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--c3-soft); color: var(--c3-ink); border: 1px dashed color-mix(in srgb, var(--c3) 45%, transparent); }
.xd-refs { font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; cursor: help; }
.xd-live { display: inline-grid; grid-template-columns: auto 84px; gap: 3px 10px; align-items: center; cursor: help; }
.xd-live b { font: 800 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.xd-live-bar { display: block; height: 7px; border-radius: 4px; overflow: hidden; background: var(--bad-soft); }
.xd-live-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; background: var(--v-ok); transform-origin: left; }
.xd-table.fresh .xd-live-bar i { animation: xd-growx .7s var(--ease) both; animation-delay: calc(var(--r, 0) * 35ms + 160ms); }
.xd-live small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.xd-tops { display: flex; flex-wrap: wrap; gap: 5px; max-width: 320px; }
.xd-ref { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; padding: 3px 4px 3px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, transform .12s, background .15s; }
.xd-ref:hover { border-color: var(--tc); background: var(--raised); transform: translateY(-1px); }
.xd-ref:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.xd-ref .av { width: 20px; height: 20px; font-size: 11px; border-radius: 50%; flex: none; }
.xd-ref > span:not(.av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xd-ref b { flex: none; font: 800 11.5px/1 var(--font); padding: 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--ti); }
.xd-none { font-size: 12.5px; color: var(--muted); }
.xd-c-act { width: 1%; white-space: nowrap; text-align: right; }
.xd-table.fresh tr.xd-row { animation: rise .4s var(--ease) both; animation-delay: calc(var(--r, 0) * 28ms); }
.xd-table.fresh .xd-dead { animation: pop .35s var(--spring) both; animation-delay: calc(var(--r, 0) * 28ms + 160ms); }
.xd-zero { text-align: center; padding: 40px 18px; white-space: normal; }
.xd-zero b { font: 700 16px var(--display); }
.xd-zero p { margin-top: 6px; color: var(--muted); }
.xd-tld { font: 700 12.5px/1 var(--mono); padding: 4px 8px; border-radius: 6px; background: var(--c2-soft); color: var(--c2-ink); white-space: nowrap; }
.xd-wbtn svg { width: 14px; height: 14px; }
.xd-wbtn.on { background: var(--good-soft); border-color: color-mix(in srgb, var(--v-ok) 55%, transparent); color: var(--good); }
.xd-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; width: 168px; margin-left: auto; }
.xd-acts .btn { margin: 0; }
.xd-lockcell { all: unset; box-sizing: border-box; position: relative; display: inline-grid; place-items: center; cursor: pointer; padding: 5px 9px; border-radius: 9px; border: 1px dashed color-mix(in srgb, var(--gold) 70%, var(--line-strong)); background: color-mix(in srgb, var(--warn-soft) 55%, transparent); transition: border-color .15s, background .15s, transform .12s; }
.xd-lockcell:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.xd-lockcell:focus-visible, .xd-th-lock button:focus-visible, .xd-kpi.locked:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.xd-blur { display: inline-block; filter: blur(5px); opacity: .7; pointer-events: none; user-select: none; -webkit-user-select: none; }
.xd-lock-i { position: absolute; inset: 0; display: grid; place-items: center; }
.xd-lock-i svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; stroke-width: 2.2; background: var(--ink); color: var(--gold); box-shadow: 0 4px 12px -4px var(--ink); transition: transform .2s var(--spring); }
.xd-lockcell:hover .xd-lock-i svg { transform: scale(1.14) rotate(-8deg); }
.xd-table.fresh .xd-lock-i svg { animation: pop .4s var(--spring) both; animation-delay: calc(var(--r, 0) * 28ms + 220ms); }
.xd-fakeref { display: block; height: 22px; border-radius: 999px; background: linear-gradient(90deg, var(--line), var(--grid)); }
.xd-th-lock button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--warn); }
.xd-th-lock svg { width: 13px; height: 13px; stroke-width: 2.3; }
button.xd-kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xd-kpi.locked b { display: flex; align-items: center; gap: 8px; }
.xd-kpi.locked b svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 2.2; background: var(--ink); color: var(--gold); }
.xd-kpi.locked > span { color: var(--warn); font-weight: 700; }
.xd-csv.locked { border-style: dashed; color: var(--warn); }
.xd[data-access="basic"] .xd-sort { border-style: dashed; opacity: .85; }
.xd-try { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 16px 12px; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--primary); background: linear-gradient(110deg, var(--primary-soft), var(--surface) 70%); box-shadow: 5px 5px 0 var(--primary); animation: rise .45s var(--ease) .1s both; }
.xd-try[hidden] { display: none; }
.xd-try[data-tone="out"], .xd-try[data-tone="device"], .xd-try[data-tone="verify"] { border-color: var(--line-strong); box-shadow: none; background: var(--raised); }
.xd-try-txt { flex: 1 1 320px; min-width: 0; }
.xd-try-txt b { font: 800 clamp(17px, 2.2vw, 21px)/1.2 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.xd-try-txt p { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.xd-try-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn.xd-try-go { padding: 12px 18px; border-radius: 10px; font-size: 15px; gap: 10px; box-shadow: 0 10px 26px -10px var(--primary); }
.btn.xd-try-go svg { width: 17px; height: 17px; stroke-width: 2.4; }
.btn.xd-try-go em { font-style: normal; font: 800 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; padding: 6px 9px; border-radius: 7px; white-space: nowrap; background: color-mix(in srgb, var(--on-primary) 22%, transparent); color: var(--on-primary); }
#xdUpsell.flash > * { animation: xd-flash .9s var(--ease) both; }
.xd-watch[hidden] { display: none; }
.xd-watch .card-title h2 { display: inline-flex; align-items: center; gap: 8px; }
.xd-watch .card-title svg { width: 18px; height: 18px; color: var(--primary); }
.xd-watch-n { font: 800 12.5px/1 var(--font); padding: 6px 10px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.xd-watch-sub { padding: 10px 18px 0; font-size: 12.5px; color: var(--muted); }
.xd-watch-list { list-style: none; margin: 8px 0 0; padding: 0; }
.xd-w { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto auto auto; gap: 8px 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); animation: rise .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.xd-w.changed { background: linear-gradient(90deg, var(--good-soft), transparent 70%); }
.xd-w-st { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xd-w small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.xd-alive { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--good-soft); color: var(--good); }
.xd-alive i { width: 7px; height: 7px; border-radius: 50%; background: var(--v-ok); }
.xd-unk { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--raised); color: var(--muted); border: 1px solid var(--line); }
.xd-w-ch { padding: 2px 8px; border-radius: 999px; font: 800 10.5px/1.5 var(--font); letter-spacing: .05em; text-transform: uppercase; background: var(--v-ok); color: var(--von-ok); animation: pulse 1.9s ease-in-out infinite; }
.xd-locked { display: grid; gap: 0; border-top: 1px solid var(--line); }
.xd-locked[hidden] { display: none; }
.xd-ghost[hidden] { display: none; }
.xd-ghost { position: relative; display: grid; padding: 4px 0 0; -webkit-mask-image: linear-gradient(black 30%, transparent); mask-image: linear-gradient(black 30%, transparent); }
.xd-ghost-row { display: flex; gap: 28px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); filter: blur(1.5px); }
.xd-ghost-row span { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.6s linear infinite; animation-delay: calc(var(--i, 0) * 120ms); }
.xd-ghost-row span:first-child { margin-right: auto; height: 14px; }
.xd-ghost-n { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font: 800 13px/1 var(--font); white-space: nowrap; background: var(--ink); color: var(--surface); box-shadow: 0 10px 24px -10px var(--ink); animation: pop .45s var(--spring) .2s both; }
.xd-ghost-n svg { width: 15px; height: 15px; color: var(--gold); }
#xdUpsell { padding: 4px 16px 18px; }
#xdUpsell:empty { display: none; }
.xd-card .card-foot > span:first-child { flex: 1 1 320px; line-height: 1.5; }
.xd-pager { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.xd-pager:empty { display: none; }
@keyframes xd-float { 50% { transform: translate(-24px, 20px) scale(1.08); } }
@keyframes xd-growx { from { transform: scaleX(0); } }
@keyframes xd-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--v-spam) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes xd-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes xd-flash { 0% { transform: scale(.98); box-shadow: 0 0 0 0 var(--primary); } 40% { transform: scale(1.01); box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 45%, transparent); } 100% { transform: none; } }
@media (max-width: 1320px) {
.xd-c-top { display: none; }
}
@media (max-width: 1100px) {
.xd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.xd-count { min-width: 0; flex: 1 1 100%; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.xd-count-live, .xd-count small, .xd-count-bars { grid-column: 1 / -1; }
.xd-hero-top { flex-wrap: wrap; }
.xd-f3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.xd-how { grid-template-columns: minmax(0, 1fr); }
.xd-f3 { grid-template-columns: minmax(0, 1fr); }
.xd-uses { grid-template-columns: minmax(0, 1fr); }
.xd-uses-t { writing-mode: horizontal-tb; transform: none; }
.xd-w { grid-template-columns: minmax(0, 1fr) auto; }
.xd-w .xd-w-sc, .xd-w small { display: none; }
.xd-w-st { grid-column: 1; grid-row: 2; }
.xd-w .btn { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
.xd-hero { padding: 18px 16px; }
.xd-hero-art { width: 72px; height: 72px; border-radius: 16px; }
.xd-hero-art .kosto { --ks: 64px !important; }
.xd-hero-art .kosto img { width: 64px; height: 64px; }
.xd-hero-top { align-items: flex-start; }
.xd-form { grid-template-columns: minmax(0, 1fr); padding: 14px; box-shadow: 3px 3px 0 var(--primary); }
.xd-opts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.xd-opt, .xd-other { flex: none; }
.btn.xd-run { flex: 1 1 100%; flex-wrap: wrap; }
.xd-kpi b { font-size: 25px; }
.xd-head-r { width: 100%; justify-content: space-between; }
.xd-table, .xd-table tbody { display: block; width: 100%; }
.xd-table thead { display: none; }
.xd-table tr.xd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 14px 12px; border-top: 1px solid var(--line); }
.xd-table tbody tr.xd-row:first-child { border-top: 0; }
.xd-table tr.xd-row td { display: grid; gap: 5px; align-content: start; justify-items: start; padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left; }
.xd-table tr.xd-row td[data-l]::before { content: attr(data-l); font: 700 10px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.xd-table tr.xd-row td.xd-c-dom { grid-column: 1 / -1; min-width: 0; }
.xd-table tr.xd-row td.xd-c-score .scorecell i { display: none; }
.xd-table tr.xd-row td.xd-c-top { display: grid; grid-column: 1 / -1; }
.xd-table tr.xd-row td.xd-c-act { grid-column: 1 / -1; width: auto; display: block; }
.xd-acts { width: 100%; flex-wrap: nowrap; gap: 8px; }
.xd-acts .btn { flex: 1; justify-content: center; }
.xd-table.basic tr.xd-row td.xd-c-top { display: none; }
.xd-try { margin: 0 10px 10px; padding: 14px; box-shadow: 3px 3px 0 var(--primary); }
.xd-try-side { width: 100%; }
.btn.xd-try-go { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; }
.xd-plan { padding: 12px; }
.xd-meter { flex: 1 1 auto; }
.xd-count b { font-size: 30px; }
.xd-live { grid-template-columns: auto minmax(0, 1fr); }
.xd-tops { max-width: none; }
.xd-table tr:not(.xd-row), .xd-table tr:not(.xd-row) td { display: block; }
.xd-ghost-row span:nth-child(n+3) { display: none; }
#xdUpsell { padding: 4px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.xd-hero::before, .xd-hero::after, .xd-eyebrow::before, .xd-count, .xd-count-live i, .xd-count-bars i, .xd-use, .xd-plan, .xd-pips i, .xd-try, .xd-w, .xd-w-ch, .xd-table.fresh .xd-lock-i svg, #xdUpsell.flash > *, .xd-how li, .xd-kpi, .xd-note, .xd-table.fresh tr.xd-row, .xd-table.fresh .xd-dead, .xd-table.fresh .xd-live-bar i, .xd-ghost-row span, .xd-ghost-n { animation: none !important; }
.xd-opt, .xd-how li, .xd-kpi, .btn.xd-run, .xd-ref, .xd-use, .xd-lockcell, .xd-lock-i svg { transition: none; }
}
.nb { position: relative; display: flex; align-items: center; }
.nb[hidden] { display: none; }
.nb-btn { position: relative; }
.nb-btn svg { transform-origin: 50% 12%; }
.nb-btn:hover svg { transform: rotate(-14deg); }
.nb-btn.has { color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong)); background: var(--primary-soft); }
.nb-btn.ring svg { animation: nb-ring .9s var(--ease) both; }
.nb-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; font: 800 10.5px/1 var(--font); letter-spacing: -0.01em;
background: var(--primary); color: var(--on-primary); border: 2px solid var(--surface); box-shadow: 0 4px 10px -4px var(--primary); animation: pop .35s var(--spring) both; }
.nb-badge[hidden] { display: none; }
.nb-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--ink) 55%, transparent), 0 2px 0 var(--line);
transform-origin: 92% 0; animation: nb-open .22s var(--ease) both; }
.nb-panel[hidden] { display: none; }
.nb-panel::before { content: ""; position: absolute; top: -6px; right: 12px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--side-bg); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.nb-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; color: var(--side-ink);
background: radial-gradient(140% 220% at 100% 0%, color-mix(in srgb, var(--primary) 34%, var(--side-bg)), var(--side-bg) 60%), var(--side-bg); }
.nb-head b { font: 800 16px/1.2 var(--display); letter-spacing: -0.01em; }
.nb-all { all: unset; cursor: pointer; font: 700 12px/1 var(--font); padding: 6px 9px; border-radius: 7px; color: var(--side-ink); border: 1px solid var(--side-line); background: color-mix(in srgb, var(--side-ink) 8%, transparent); transition: border-color .15s, background .15s; }
.nb-all:hover:not(:disabled) { border-color: var(--side-muted); background: color-mix(in srgb, var(--side-ink) 14%, transparent); }
.nb-all:focus-visible { outline: 2px solid var(--side-ink); outline-offset: 2px; }
.nb-all:disabled { opacity: .45; cursor: default; }
.nb-list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; align-content: start; }
.nb-item { --nk: var(--c2); --nk-soft: var(--c2-soft); --nk-ink: var(--c2-ink); animation: rise .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.nb-item.top10 { --nk: var(--c4); --nk-soft: var(--c4-soft); --nk-ink: var(--c4-ink); }
.nb-item.complete { --nk: var(--c3); --nk-soft: var(--c3-soft); --nk-ink: var(--c3-ink); }
.nb-item a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 11px 12px 11px 14px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.nb-item a:hover { background: var(--raised); border-color: var(--line); transform: translateX(2px); }
.nb-item a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.nb-item.unread a { background: linear-gradient(100deg, color-mix(in srgb, var(--nk) 11%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--nk) 26%, var(--line)); }
.nb-item.unread a::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--primary); animation: pulse 1.8s ease-in-out infinite; }
.nb-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--nk-soft); color: var(--nk-ink); flex: none; }
.nb-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nb-main { display: grid; gap: 3px; min-width: 0; }
.nb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-top em { font: 800 10.5px/1 var(--font); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--nk-ink); }
.nb-top time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nb-main > b { font: 700 13.5px/1.35 var(--font); overflow-wrap: anywhere; }
.nb-item:not(.unread) .nb-main > b { font-weight: 600; color: var(--ink-2); }
.nb-body { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.nb-moves { margin: 3px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.nb-moves li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.nb-kw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.nb-mv { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--display); padding: 3px 7px; border-radius: 6px; }
.nb-mv i { font-style: normal; opacity: .6; }
.nb-mv b { font-weight: 800; font-size: 13px; }
.nb-mv.up { background: var(--good-soft); color: var(--good); }
.nb-mv.down { background: var(--bad-soft); color: var(--bad); }
.nb-rest { color: var(--muted); font-size: 12px; }
.nb-empty { display: grid; justify-items: center; gap: 8px; padding: 30px 22px 26px; text-align: center; }
.nb-empty-art { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: var(--primary-soft); color: var(--primary-ink); animation: nb-bob 3.2s ease-in-out infinite; }
.nb-empty-art svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-empty b { font: 800 16px/1.25 var(--display); }
.nb-empty p { margin: 0 0 4px; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.nb-skel { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 11px; padding: 12px; }
.nb-skel i { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; }
.nb-skel span { height: 11px; border-radius: 4px; }
.nb-skel span:last-child { width: 62%; }
.nb-skel i, .nb-skel span { background: linear-gradient(90deg, var(--grid) 25%, var(--line) 50%, var(--grid) 75%); background-size: 200% 100%; animation: shine 1.2s linear infinite; }
.nb-foot { margin: 0; padding: 9px 16px 10px; font-size: 11.5px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); background: var(--raised); }
@keyframes nb-open { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes nb-ring { 0% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-15deg); } 45% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 78% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes nb-bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@media (max-width: 760px) {
.nb { position: static; }
.nb-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 74px); transform-origin: 50% 0; }
.nb-panel::before { display: none; }
.nb-item a { padding: 12px 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.nb-panel, .nb-item, .nb-badge, .nb-btn.ring svg, .nb-empty-art, .nb-item.unread a::before, .nb-skel i, .nb-skel span { animation: none !important; }
.nb-item a, .nb-btn svg { transition: none; }
}
:root {
--mo-fast: 120ms; --mo-base: 220ms; --mo-slow: 360ms; --mo-hero: 560ms;
--mo-out: cubic-bezier(.16, 1, .3, 1);
--mo-in: cubic-bezier(.4, 0, 1, 1);
--mo-inout: cubic-bezier(.65, 0, .35, 1);
--mo-spring: cubic-bezier(.34, 1.56, .64, 1);
--mo-d1: 4px; --mo-d2: 8px; --mo-d3: 16px;
--mo-step: 40ms;
}
@keyframes rise { from { opacity: 0; transform: translateY(var(--mo-d2)); } to { opacity: 1; transform: none; } }
@keyframes grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes mo-view-in { from { opacity: 0; transform: translateY(var(--mo-d1)); } to { opacity: 1; transform: none; } }
@keyframes mo-stroke { to { stroke-dashoffset: 0; } }
@keyframes mo-busy { 50% { opacity: .78; } }
@keyframes mo-breathe { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -3px; scale: 1.025; } }
@keyframes mo-dot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mo-ex { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.view:not([hidden]) { animation: mo-view-in var(--mo-base) var(--mo-out) both; }
html.mo-vt .view:not([hidden]) { animation: none; view-transition-name: mo-view; }
html.mo-vt [data-mo-head] { view-transition-name: mo-head; }
html.mo-vt .nav-ind { view-transition-name: mo-ind; transition: none; }
::view-transition-group(mo-view) { animation-duration: 0s; }
::view-transition-old(mo-view) { animation: mo-vt-out 110ms var(--mo-in) both; }
::view-transition-new(mo-view) { animation: mo-vt-in 280ms var(--mo-out) 50ms both; }
::view-transition-group(mo-head), ::view-transition-group(mo-ind) { animation-duration: 340ms; animation-timing-function: var(--mo-out); }
@keyframes mo-vt-out { to { opacity: 0; transform: translateY(calc(var(--mo-d1) * -1)); } }
@keyframes mo-vt-in { from { opacity: 0; transform: translateY(var(--mo-d2)); } }
.nav { position: relative; }
.nav-ind { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 6px; background: var(--primary); pointer-events: none; opacity: 0; transform: translate3d(0, 0, 0); transition: transform 340ms var(--mo-out), opacity var(--mo-fast); }
.nav-ind.on { opacity: 1; }
.nav.mo-ind-on a[aria-current="page"], .nav.mo-ind-on a.active { background: transparent; }
.nav a { transition: background .15s, color .15s; }
.anim .page-head, .anim .card, .anim .verdict, .anim .cmp-cards, .anim .stat-strip { animation: rise 340ms var(--mo-out) both; animation-delay: calc(var(--i, 0) * var(--mo-step)); }
.anim .kpis { animation: none; }
.anim .kpis > * { animation: rise 340ms var(--mo-out) both; animation-delay: calc(var(--i, 0) * var(--mo-step) + var(--cd, 0) * 36ms); }
.kpis > :nth-child(1) { --cd: 0; } .kpis > :nth-child(2) { --cd: 1; } .kpis > :nth-child(3) { --cd: 2; }
.kpis > :nth-child(4) { --cd: 3; } .kpis > :nth-child(5) { --cd: 4; } .kpis > :nth-child(6) { --cd: 5; }
table.fresh tbody tr { animation: rise 300ms var(--mo-out) both; animation-delay: calc(var(--r, 0) * 24ms); }
table.fresh .scorecell i::after { animation: grow 600ms var(--mo-out) both; animation-delay: calc(var(--r, 0) * 24ms + 120ms); }
table.fresh .dots i.on { animation: mo-dot 260ms var(--mo-spring) both; animation-delay: calc(var(--r, 0) * 24ms + 200ms + var(--di, 0) * 50ms); }
.dots i:nth-child(2) { --di: 1; } .dots i:nth-child(3) { --di: 2; } .dots i:nth-child(4) { --di: 3; } .dots i:nth-child(5) { --di: 4; } .dots i:nth-child(6) { --di: 5; }
table.fresh tbody tr:nth-child(n+17), table.fresh tbody tr:nth-child(n+17) .scorecell i::after, table.fresh tbody tr:nth-child(n+17) .dots i.on, table tbody tr:nth-child(n+17) .mbar i, table tbody tr:nth-child(n+17) .scorecell i::after { animation: none; }
.bars div i, .legend-rows u::after, .hbar i, .stack i, .mbar i, .comp-bar i, .contrib-bar i, .formula-bar i, .scripts-bar i, .group li i { animation-duration: 640ms; animation-timing-function: var(--mo-out); }
.chart .bar-total, .chart .bar-flag { animation-duration: 520ms; animation-timing-function: var(--mo-out); }
.meter span, .scale span, .rail span { transition-duration: 720ms; transition-timing-function: var(--mo-out); }
.verdict .meter i { transform-origin: left center; }
html.mo-on .why-list u::after { animation: none; }
html.mo-on .vt-table .mbar i { animation: none; }
.blank-art .kosto-empty .kosto-img, .blank-art .kosto-idle .kosto-img { transform-origin: 50% 92%; animation: mo-breathe 3.6s ease-in-out 1.1s infinite; }
.blank-art .kosto-error .kosto-img { transform-origin: 50% 92%; animation: mo-breathe 4.4s ease-in-out 1.1s infinite; }
.progress .kosto img, .tl-dig .kosto img { animation: none; }
.kosto figcaption { will-change: auto; }
.btn.primary:disabled, .btn.primary[aria-busy="true"] { animation: mo-busy 1.1s ease-in-out infinite; }
.btn:not(:disabled):active, .chip-btn:active, .chip:active, .icon-btn:active { transform: scale(.97); transition-duration: 80ms; }
.chip-btn, .chip { transition-property: background, border-color, color, transform; transition-duration: .15s, .15s, .15s, .12s; }
.ghost-btn.done svg { animation: pop 280ms var(--mo-spring) both; }
.toast.on svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: mo-stroke 280ms 70ms var(--mo-inout) forwards; }
.cat[open] .ex { animation: mo-ex var(--mo-base) var(--mo-out) both; }
.tl-tabs button { transition: color .15s, border-color .2s var(--mo-out); }
details > summary { transition: background .12s; }
input[type="checkbox"], input[type="range"] { transition: transform .12s var(--mo-out); }
input[type="checkbox"]:active { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
.nav-ind { transition: none; }
.view:not([hidden]) { animation: none; }
.blank-art .kosto .kosto-img { animation: none; }
}
html.mo-on .anim #spVerdict.verdict { animation: none; }
html.mo-vt-held .view:not([hidden]) { animation: none; }
html.mo-vt .nav.mo-ind-on a[aria-current="page"], html.mo-vt .nav.mo-ind-on a.active { view-transition-name: mo-cur; }
::view-transition-group(mo-cur) { animation-duration: 340ms; animation-timing-function: var(--mo-out); }
::view-transition-old(mo-cur) { display: none; }
::view-transition-new(mo-cur) { animation: none; mix-blend-mode: normal; opacity: 1; }
::view-transition-old(mo-ind) { display: none; }
::view-transition-new(mo-ind) { animation: none; mix-blend-mode: normal; opacity: 1; }
.chart .line { animation-duration: 900ms; animation-timing-function: var(--mo-inout); }
.chart .area-fill { animation: fade 500ms 900ms both; }
.chart .end-dot { animation-delay: .9s; } .chart .end-label { animation-delay: 1s; }
.chart .best-dot { animation-delay: .95s; } .chart .best-label { animation-delay: 1.05s; }
.dial .val { transition-duration: .8s; transition-timing-function: var(--mo-out); }
@media (max-width: 920px), (pointer: coarse) {
.top .icon-btn, .top .nav-burger { width: 44px; height: 44px; }
.top .lang-btn, .top .um-btn { min-height: 44px; height: 44px; min-width: 44px; }
.top .search .btn { min-height: 44px; }
.nav a, .nav-group-h { min-height: 44px; }
.main .btn, .main .btn.small, .main .btn.primary { min-height: 44px; }
.main .seg button { min-height: 44px; padding-inline: 14px; }
.main .link, .main .text-btn, .main .chip-btn { min-height: 44px; display: inline-flex; align-items: center; }
.main button.chip, .main .bl-tog, .main .bl-chip, .main .ct-btn, .main .xd-opt { min-height: 44px; }
}
@media (pointer: coarse), (max-width: 860px) {
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]), select, textarea { min-height: 44px; }
select { padding-block: 8px; }
.fld input, .fld select, .fld textarea { min-height: 44px; }
.search { padding-block: 3px; min-width: 0; }
.search input { width: 0; }
.search input { min-height: 44px; padding-block: 8px; }
.search kbd { display: none; }
.search .btn { min-height: 44px; flex: none; }
.search svg { flex: none; }
.btn, button.btn, a.btn, .icon-btn, .cns-btn, .sw, [role="tab"], summary { min-height: 44px; }
.icon-btn { min-width: 44px; }
.sw { min-width: 52px; }
.btn { align-items: center; justify-content: center; }
[role="tab"], .seg button, .tabs button, #cycle button, .pill-tabs button { min-height: 44px; }
.seg, #cycle { gap: 4px; }
button:not(.sw) { min-height: 44px; min-width: 44px; }
.nav a, .nav-group-b a, .nav-group-h, .side a { min-height: 44px; display: flex; align-items: center; }
a.hm-lchip, a.sm-link, .up-btn, a.up-btn, .mg-btn { min-height: 44px; display: inline-flex; align-items: center; }
a.sm-link { padding-inline: 10px; min-width: 44px; justify-content: center; }
.ghost-btn, .text-btn, .ct-btn, .up-x { min-width: 44px; min-height: 44px; }
.mg-btn, .ct-btn, .ct.compact .ct-btn { min-height: 44px !important; min-width: 44px !important; }
.th-switch { gap: 8px; }
.th-switch a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; }
.pf-row { flex-wrap: wrap; }
.pf-row > *, .pf-f { min-width: 0; max-width: 100%; }
.pf-f { flex-wrap: wrap; }
.pf-f > div, .pf-f .seg { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
a.dx-credits { min-height: 44px; display: inline-flex; align-items: center; }
input[type=range] { min-height: 44px; }
.hit, .hit-lg, a.dx-status, .dx-key-list a, .legal-nav a, .sf li a, .sf-legal a, .tbl button, .tbl .tag-btn, .tbl a.tag,
table button:not(.btn):not(.icon-btn), table a.tag, th button { position: relative; }
.hit::after, .sf li a::after, .sf-legal a::after, .tbl button::after, table button:not(.btn):not(.icon-btn)::after, table a.tag::after, th button::after { content: ""; position: absolute; inset: -12px -6px; }
.hit-lg::after { content: ""; position: absolute; inset: -6px -4px; }
a.dx-status, .dx-key-list a { min-height: 44px; padding-inline: 12px; }
.acc-jump a, .dx-foot-links a { min-width: 44px; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; }
.acc-jump { gap: 4px 8px; }
.dx-foot-links { gap: 8px 18px; flex-wrap: wrap; }
a.brand, .dx-top .brand { min-width: 44px; }
#cx button, #cx [data-p] { min-height: 44px; }
a.link, #helpLine a, .refund a, #trust a { position: relative; }
a.link::after, #helpLine a::after, .refund a::after, #trust a::after { content: ""; position: absolute; inset: -12px -4px; }
.legal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.sf li a, .sf-legal a { display: inline-block; }
.sf ul { gap: 14px; }
th button { min-height: 44px; display: inline-flex; align-items: center; }
.au-lbl a, .au-alt a, .au-foot a, .dx-hint a { position: relative; }
.au-lbl a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -14px; padding-inline: 4px; box-sizing: border-box; }
.au-lbl a::after, .au-alt a::after, .au-foot a::after, .dx-hint a::after { content: ""; position: absolute; inset: -14px -10px; }
a.au-logo { min-height: 44px; display: inline-flex; align-items: center; }
.card-head a.hint, a.hint { display: inline-flex; align-items: center; min-height: 44px; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]), label.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
tr.click > td, tr.click > th { height: 44px; }
:is(p, li, dd, dt, td, small, figcaption, blockquote, .hint, .lead, .note) a:not([class]) { padding: 14px 8px; margin-inline: -8px; }
}
@media (max-width: 860px) {
.sh .wrap { min-width: 0; }
.sh-brand { min-width: 0; }
.sh-brand span { overflow: hidden; text-overflow: ellipsis; }
.sh-right { min-width: 0; flex: none; }
.sh-right .icon-btn { width: 44px; height: 44px; }
.sh-nav a, .sh-nav .sh-out { min-height: 44px; display: flex; align-items: center; }
.sh-nav .sh-cta { background: var(--primary); color: var(--primary-fg, #fff); border-radius: 8px; justify-content: center; margin-top: 10px; border-bottom: 0; font-weight: 700; }
}
@media (max-width: 560px) {
.sh-right .hide-xs { display: none; }
.sh .wrap { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 561px) { .sh-nav .only-xs { display: none; } }
@media (max-width: 420px) { .mr-box .mr-idle { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
.dx-top { flex-wrap: wrap; height: auto; padding-bottom: 6px; row-gap: 4px; }
.dx-top .top-right { flex: 1 1 100%; order: 3; margin-left: 0; justify-content: space-between; min-width: 0; }
.dx-top .dx-lang { min-width: 0; flex: 1 1 auto; overflow-x: auto; }
}
@media (max-width: 480px) { .card-head { flex-wrap: wrap; } .card-head > * { min-width: 0; max-width: 100%; } #scoreSource { max-width: 100%; } }
@media print{
@media print {
:root, :root[data-theme="dark"] {
--bg: #f4f2ec;
--surface: #ffffff;
--raised: #f8f6f1;
--ink: #191713;
--ink-2: #45413a;
--muted: #68635a;
--line: #e0dcd2;
--line-strong: #c4bfb2;
--primary: #f0590e;
--primary-hover: #ff6f2a;
--primary-soft: #fdeadd;
--primary-ink: #a83a00;
--on-primary: #1a1206;
--side-bg: #191713; --side-ink: #f1eee7; --side-muted: #aaa397; --side-line: #35322c; --side-hover: #2a2722;
--c1: #f0590e; --c1-soft: #fdeadd; --c1-ink: #a83a00;
--c2: #2456d6; --c2-soft: #e6edfc; --c2-ink: #1c47b8;
--c3: #6d3bd1; --c3-soft: #eee7fb; --c3-ink: #5a2bb8;
--c4: #0a8577; --c4-soft: #dcf2ee; --c4-ink: #076a5f;
--c5: #c2256e;
--t0: #9a958a; --t1: #e3a008; --t2: #2456d6; --t3: #0a8577; --t4: #23923f;
--ti0: #545048; --ti1: #7a5300; --ti2: #1c47b8; --ti3: #076a5f; --ti4: #176b2c;
--v-ok: #1a7f37; --v-warn: #f0b400; --v-risk: #e8590c; --v-spam: #b3141f;
--vi-ok: #14652b; --vi-warn: #765300; --vi-risk: #a23a00; --vi-spam: #9d1019;
--von-ok: #ffffff; --von-warn: #191713; --von-risk: #191713; --von-spam: #ffffff;
--good: #14652b; --good-soft: #e0f1e4;
--bad: #9d1019; --bad-soft: #fbe6e7;
--warn: #765300; --warn-soft: #fbf0cf;
--gold: #e3a008; --silver: #a8a396; --bronze: #c0763c;
--grid: #ece8df;
--shadow: none;
--radius: 8px;
--ease: cubic-bezier(.16, 1, .3, 1);
--spring: cubic-bezier(.34, 1.56, .64, 1);
--font: "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
--display: "Bricolage Grotesque", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
--mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
color-scheme: light;
}
@page { size: A4; margin: 14mm 12mm; }
html, body { background: #fff !important; color: #191713; height: auto; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.top, .side, .skip-link, .loadbar, .toast, .tip, .notice, .dhero-actions, .ghost-btn, .seg, .tl-form, .selbar, .quick-cmp, .btn, .link, .card-foot .btn, #ovAll, #ovAll2, .blank-art, .mascot { display: none !important; }
.shell { display: block; }
.main { display: block; max-width: none; padding: 0; }
.print-brand { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; margin: 0 0 14px; border-bottom: 2px solid #191713; }
.print-brand img { height: 30px; width: auto; display: block; }
.print-brand span { font-size: 11px; color: #45413a; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.card, .kpi, .stat, .au-g { break-inside: avoid; box-shadow: none !important; background: #fff !important; border: 1px solid #c4bfb2 !important; }
.grid, .g-main, .g-wide, .g-2 { display: block !important; }
.grid > *, .g-main > *, .g-wide > *, .g-2 > * { margin: 0 0 12px; }
.kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.table-wrap, .table-wrap.tall { max-height: none !important; overflow: visible !important; }
.dhero { background: none !important; border: 0 !important; border-bottom: 1px solid #c4bfb2 !important; border-radius: 0 !important; padding: 0 0 10px !important; margin-bottom: 12px; color: #191713 !important; }
.dhero *, .insight, .insight * { color: #191713 !important; }
.dhero .favicon { background: #fff !important; border: 1px solid #c4bfb2; }
.kpi { outline: none !important; }
a { color: inherit; text-decoration: none; }
.gauge, .chart, svg { max-width: 100%; }
}
}
.lang { position: relative; flex: none; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 9px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 13.5px/1 var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .12s; }
.lang-btn:hover { background: var(--raised); }
.lang-btn:active { transform: scale(.97); }
.lang-btn[aria-expanded="true"] { background: var(--raised); border-color: var(--ink); }
.lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lang-pop:focus { outline: none; border-color: var(--ink); }
.lang-btn:disabled { cursor: progress; }
.lang-flagbox { display: block; width: 20px; height: 15px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--line-strong); background: var(--raised); }
.lang-flag { display: block; width: 20px; height: 15px; object-fit: cover; }
.lang-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform .2s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang.busy .lang-flagbox { animation: lang-pulse .7s ease-in-out infinite alternate; }
.lang-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 196px; margin: 0; padding: 6px; list-style: none; display: grid; gap: 1px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); transform-origin: top right; animation: lang-in .16s var(--ease) both; }
.lang-pop[hidden] { display: none; }
.lang-pop.left { right: auto; left: 0; transform-origin: top left; }
.lang-opt { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 5px; font: 500 14px/1.2 var(--font); cursor: pointer; white-space: nowrap; animation: lang-row .22s var(--ease) both; animation-delay: calc(var(--n, 0) * 18ms); }
.lang-opt:nth-child(2) { --n: 1; } .lang-opt:nth-child(3) { --n: 2; } .lang-opt:nth-child(4) { --n: 3; }
.lang-opt:nth-child(5) { --n: 4; } .lang-opt:nth-child(6) { --n: 5; } .lang-opt:nth-child(7) { --n: 6; }
.lang-opt.on { background: var(--raised); }
.lang-opt[aria-selected="true"] { font-weight: 700; }
.lang-opt .lang-name { flex: 1; }
.lang-tick { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lang-opt[aria-selected="true"] .lang-tick { visibility: visible; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes lang-row { from { opacity: 0; transform: translateX(6px); } }
@keyframes lang-pulse { to { opacity: .35; } }
.au .lang-btn { height: 44px; border-radius: 8px; padding: 0 11px 0 12px; }
.lang--menu, .lang--foot { display: none; }
@media (max-width: 860px) {
.sh-right > .lang { display: none; }
.lang--menu { display: block; margin-top: 10px; }
.lang--menu .lang-btn { width: 100%; height: 44px; padding: 0 12px; justify-content: flex-start; }
.lang--menu .lang-btn .lang-name { position: static; width: auto; height: auto; clip-path: none; flex: 1; text-align: left; }
.lang--menu .lang-pop { position: static; margin-top: 6px; max-width: none; animation: none; }
}
@media (max-width: 600px) {
.au-head-r > .lang { display: none; }
.lang--foot { display: flex; flex-basis: 100%; justify-content: center; }
.lang--foot .lang-btn .lang-name { position: static; width: auto; height: auto; clip-path: none; }
.lang--foot .lang-pop { top: auto; bottom: calc(100% + 6px); right: auto; left: 50%; width: 208px; min-width: 0; margin-left: -104px; transform-origin: bottom center; }
}
@media (max-width: 720px) {
.lang-btn { height: 40px; padding: 0 8px; gap: 5px; }
.lang-btn .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang-opt { min-height: 44px; font-size: 15px; }
.lang-pop { min-width: 208px; max-width: calc(100vw - 24px); }
.au .lang-btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.lang-pop, .lang-opt, .lang.busy .lang-flagbox { animation: none; }
.lang-btn, .lang-chev { transition: none; }
}