/* ═══════════════════════════════════════════
   KX Toolkit - design system
   Light-first, warm cream, brand blue accent
   Author: KX Developers
═══════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────── */
:root {
    --brand: #1F5BFF;
    --brand-ink: #0E3FCC;
    --brand-2: #5DA8FF;
    --brand-soft: #E8F0FF;
    --r-sm: 8px;
    --r:    12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="light"], :root {
    --bg:               #FBFAF7;
    --bg-2:             #F4F1EC;
    --surface:          #FFFFFF;
    --surface-2:        #F8F5F0;
    --surface-3:        #EFEBE3;
    --hairline:         #EAE6DD;
    --hairline-strong:  #D8D3C8;
    --ink:              #1B1B20;
    --ink-2:            #5C5A54;
    --ink-3:            #8E8B83;
    --shadow-1: 0 1px 2px rgba(20,20,28,.04), 0 2px 8px -2px rgba(20,20,28,.05);
    --shadow-2: 0 2px 6px -1px rgba(20,20,28,.06), 0 12px 28px -8px rgba(20,20,28,.10);
    --shadow-3: 0 4px 12px -2px rgba(20,20,28,.08), 0 24px 50px -16px rgba(20,20,28,.14);
}
[data-theme="dark"] {
    --bg:               #15140F;
    --bg-2:             #1B1A14;
    --surface:          #1F1D17;
    --surface-2:        #292720;
    --surface-3:        #34322A;
    --hairline:         #38352D;
    --hairline-strong:  #4A463C;
    --ink:              #F0EEE8;
    --ink-2:            #B5B1A6;
    --ink-3:            #807C70;
    --brand-soft:       #1A2A55;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.3);
    --shadow-2: 0 4px 12px -2px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.4);
    --shadow-3: 0 4px 12px -2px rgba(0,0,0,.5), 0 24px 50px -16px rgba(0,0,0,.5);
}

/* ─── Reset (only what's not in Bootstrap) ── */
.kx-body {
    background: var(--bg); color: var(--ink);
    font-family: var(--font-body), sans-serif;
    font-size: 16px; line-height: 1.6;
    font-feature-settings: 'cv02','cv11','ss01';
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    overflow-x: hidden;
}
/* Lower specificity (0,0,1) via :where() so component button rules
   like .kx-btn-brand can win without needing extra specificity. */
:where(.kx-body) a { color: inherit; text-decoration: none; }
.kx-body img, .kx-body svg { display: block; max-width: 100%; }

.kx-accent { color: var(--brand); font-weight: inherit; }

/* ─── Container ────────────────────────────── */
.kx-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ─── Skip link ───────────────────────────── */
.kx-skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 9999;
    background: var(--brand); color: #fff;
    padding: 10px 18px; border-radius: 10px;
    font-weight: 600; text-decoration: none;
    transform: translateY(-150%);
    transition: transform .15s var(--ease);
}
.kx-skip-link:focus { transform: translateY(0); color: #fff; }

/* ─── Topbar ───────────────────────────────── */
.kx-topbar {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease);
}
.kx-topbar.is-scrolled { border-bottom-color: var(--hairline); }
.kx-topbar-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 32px;
    padding: 14px 24px;
}
.kx-brand {
    display: inline-flex; align-items: center;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 10px;
    transition: background .2s var(--ease);
}
.kx-brand img {
    height: 32px; width: auto;
    display: block;
}
[data-theme="light"] .kx-brand:not(.kx-brand-text) { background: #15140F; }
.kx-brand.kx-brand-text { background: transparent; padding: 0; }
.kx-brand-name {
    font-weight: 700; font-size: 18px; line-height: 1;
    letter-spacing: -.025em; color: var(--ink);
    white-space: nowrap;
}

.kx-nav-links {
    display: flex; align-items: center; gap: 4px;
    justify-self: center;
}
.kx-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    font-weight: 500; font-size: 14px; line-height: 1;
    color: var(--ink-2); text-decoration: none; border-radius: 8px;
    transition: color .15s var(--ease), background .15s var(--ease);
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit;
}
.kx-nav-link:hover { color: var(--ink); background: var(--surface-2); }
.kx-nav-link.is-active { color: var(--brand); }

/* PRO nav link - subtle gradient text + warm icon, distinguishes paid section */
.kx-nav-link-pro {
    display: inline-flex; align-items: center; gap: 6px;
    background-image: linear-gradient(135deg, #F59E0B, #EF4444);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: .02em;
}
.kx-nav-link-pro > i {
    color: #F59E0B;
    -webkit-text-fill-color: #F59E0B;
}
.kx-nav-link-pro:hover {
    background-color: color-mix(in srgb, #F59E0B 12%, transparent);
}
.kx-nav-link-pro.is-active {
    background-color: color-mix(in srgb, #F59E0B 16%, transparent);
}
.kx-nav-link.has-caret::after {
    content: ''; display: inline-block; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-left: 4px; margin-top: -3px;
    transition: transform .15s var(--ease);
}
.kx-nav-link[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.kx-nav-link[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 1px; }

.kx-nav-actions { display: flex; align-items: center; gap: 8px; }

@media (max-width: 920px) {
    .kx-nav-links { display: none; }
    .kx-topbar-inner { grid-template-columns: auto auto; }
    .kx-nav-actions { gap: 6px; }
    .kx-text-hide-md { display: none; }
}

/* ─── Buttons ──────────────────────────────── */
.kx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    font-family: var(--font-body), sans-serif;
    font-weight: 500; font-size: 14px; line-height: 1.2;
    border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
    transition: transform .12s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
    white-space: nowrap;
}
.kx-btn-primary { background: var(--ink); color: var(--bg); }
.kx-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--ink); color: var(--bg); }
.kx-btn-brand { background: var(--brand); color: #fff; box-shadow: 0 4px 14px -4px var(--brand); }
.kx-btn-brand:hover { transform: translateY(-1px); background: var(--brand-ink); box-shadow: 0 12px 28px -8px var(--brand); color: #fff; }
.kx-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.kx-btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.kx-btn-icon {
    width: 36px; height: 36px; padding: 0;
    background: transparent; color: var(--ink-2);
    border: 1px solid var(--hairline); border-radius: 9px;
    cursor: pointer;
    transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.kx-btn-icon:hover { color: var(--ink); background: var(--surface-2); border-color: var(--hairline-strong); }
.kx-btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; }

/* ─── Mega menu ────────────────────────────── */
.kx-mega-panel {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(920px, calc(100vw - 32px));
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: var(--shadow-3);
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease);
    z-index: 200;
}
.kx-mega-panel.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.kx-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 14px;
}
@media (max-width: 1000px) { .kx-mega-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .kx-mega-grid { grid-template-columns: repeat(2, 1fr); } }
.kx-mega-cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: background .15s var(--ease);
}
.kx-mega-cat-item:hover { background: var(--surface-2); color: inherit; }
.kx-mega-cat-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    border-radius: 9px; font-size: 16px;
    flex-shrink: 0;
}
.kx-mega-cat-meta { min-width: 0; flex: 1; }
.kx-mega-cat-meta .name {
    display: block;
    font-weight: 600; font-size: 13px; line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink); margin-bottom: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-mega-cat-meta .count {
    display: block;
    font-size: 12px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.kx-mega-foot {
    border-top: 1px solid var(--hairline);
    padding: 12px;
    text-align: center;
    display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.kx-mega-foot a {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 13px;
    color: var(--brand); text-decoration: none;
    transition: gap .15s var(--ease);
}
.kx-mega-foot a:hover { gap: 10px; color: var(--brand); }
.kx-mega-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: transparent;
    display: none;
}
.kx-mega-backdrop.is-open { display: block; }
@media (max-width: 720px) { .kx-mega-panel { display: none !important; } }

/* ─── Hero ─────────────────────────────────── */
.kx-hero { padding: 80px 0 56px; position: relative; }
.kx-hero-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
}
.kx-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--ink-2); font-size: 13px; font-weight: 500;
    border-radius: 999px; margin-bottom: 28px;
    box-shadow: var(--shadow-1);
}
.kx-hero-eyebrow .pill {
    padding: 2px 8px; background: var(--brand-soft); color: var(--brand);
    border-radius: 999px;
    font-weight: 700; font-size: 11px; letter-spacing: .04em;
}
.kx-hero h1 {
    font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.05;
    letter-spacing: -.035em;
    margin: 0 0 24px;
    max-width: 920px;
    color: var(--ink);
}
.kx-hero p.lead {
    max-width: 580px;
    color: var(--ink-2); font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
    margin: 0 0 36px;
}
.kx-hero-search {
    max-width: 620px;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    transition: box-shadow .25s var(--ease), border-color .2s var(--ease);
}
.kx-hero-search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-2);
}
.kx-hero-search > i { color: var(--ink-3); font-size: 18px; }
.kx-hero-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--ink);
    font-family: var(--font-body), sans-serif; font-size: 16px;
    padding: 14px 0; min-width: 0;
}
.kx-hero-search input::placeholder { color: var(--ink-3); }
.kx-hero-search .kx-btn { padding: 12px 20px; font-size: 14px; }
.kx-hero-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px; max-width: 620px;
}
.kx-hero-tag {
    font-size: 12px; color: var(--ink-3); padding: 4px 10px;
    border: 1px solid var(--hairline); border-radius: 999px;
    text-decoration: none; transition: all .15s var(--ease);
}
.kx-hero-tag:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ─── Sections ─────────────────────────────── */
.kx-section { padding: 80px 0; position: relative; }
.kx-section-warm { background: var(--bg-2); }
.kx-section-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 16px; margin-bottom: 44px; flex-wrap: wrap;
}
.kx-section-head-center { text-align: center; flex-direction: column; align-items: center; }
.kx-section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 12px; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand); margin-bottom: 14px;
}
.kx-section-eyebrow::before {
    content: ''; width: 14px; height: 2px; background: var(--brand);
}
.kx-section-h2 {
    font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
    letter-spacing: -.03em; margin: 0 0 8px; color: var(--ink);
    max-width: 720px;
}
.kx-section-sub {
    color: var(--ink-2); font-size: 17px; margin: 8px 0 0; max-width: 580px;
    line-height: 1.55;
}
.kx-section-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; font-size: 14px; line-height: 1;
    color: var(--brand); text-decoration: none;
    padding: 10px 0;
    transition: gap .2s var(--ease);
}
.kx-section-link:hover { gap: 10px; color: var(--brand); }

/* ─── Categories grid ──────────────────────── */
.kx-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .kx-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .kx-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .kx-cat-grid { grid-template-columns: 1fr; } }
.kx-cat-card {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    position: relative; overflow: hidden;
}
.kx-cat-card:hover {
    transform: translateY(-3px); border-color: var(--hairline-strong);
    box-shadow: var(--shadow-2); color: inherit;
}
.kx-cat-icon {
    width: 48px; height: 48px; display: grid; place-items: center;
    background: var(--ic-bg, var(--surface-2));
    color: var(--ic-fg, var(--ink-2));
    border-radius: 12px; font-size: 22px;
}
.kx-cat-card h4 {
    margin: 0; font-weight: 700; font-size: 17px; line-height: 1.2;
    letter-spacing: -.02em; color: var(--ink);
}
.kx-cat-card p {
    margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kx-cat-card .kx-cat-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline);
    font-size: 13px;
}
.kx-cat-card .kx-cat-card-foot b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-cat-card .kx-cat-card-foot .arrow { color: var(--brand); transition: transform .18s var(--ease); }
.kx-cat-card:hover .kx-cat-card-foot .arrow { transform: translateX(4px); }

/* Soft warm category tints */
.kx-ic-blue   { --ic-bg: #E5EFFF; --ic-fg: #1F5BFF; }
.kx-ic-green  { --ic-bg: #E1F4E5; --ic-fg: #1F8F45; }
.kx-ic-orange { --ic-bg: #FCEDD9; --ic-fg: #C26209; }
.kx-ic-purple { --ic-bg: #EFE6FB; --ic-fg: #6B3FBE; }
.kx-ic-red    { --ic-bg: #FCE5E1; --ic-fg: #C8331C; }
.kx-ic-cyan   { --ic-bg: #DFF1F7; --ic-fg: #1A7C9E; }
.kx-ic-pink   { --ic-bg: #FBE4EE; --ic-fg: #B43373; }
.kx-ic-amber  { --ic-bg: #FBF1D2; --ic-fg: #9C7506; }
.kx-ic-teal   { --ic-bg: #DFF0EB; --ic-fg: #1F7A65; }
.kx-ic-indigo { --ic-bg: #E8E5FB; --ic-fg: #4537BE; }
[data-theme="dark"] .kx-ic-blue   { --ic-bg: #16264F; --ic-fg: #6EA0FF; }
[data-theme="dark"] .kx-ic-green  { --ic-bg: #142E1D; --ic-fg: #6BD18B; }
[data-theme="dark"] .kx-ic-orange { --ic-bg: #36210C; --ic-fg: #F0A560; }
[data-theme="dark"] .kx-ic-purple { --ic-bg: #271946; --ic-fg: #B193ED; }
[data-theme="dark"] .kx-ic-red    { --ic-bg: #361915; --ic-fg: #F08070; }
[data-theme="dark"] .kx-ic-cyan   { --ic-bg: #143037; --ic-fg: #67C0DD; }
[data-theme="dark"] .kx-ic-pink   { --ic-bg: #341725; --ic-fg: #ED81B5; }
[data-theme="dark"] .kx-ic-amber  { --ic-bg: #2E2510; --ic-fg: #E5BD55; }
[data-theme="dark"] .kx-ic-teal   { --ic-bg: #14302A; --ic-fg: #5DC0A6; }
[data-theme="dark"] .kx-ic-indigo { --ic-bg: #1F1D45; --ic-fg: #9587E8; }

/* ─── Featured editorial cards ─────────────── */
.kx-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .kx-tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kx-tool-grid { grid-template-columns: 1fr; } }
.kx-tool-edcard {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
    overflow: hidden;
}
.kx-tool-edcard:hover {
    transform: translateY(-4px); border-color: var(--hairline-strong);
    box-shadow: var(--shadow-2); color: inherit;
}
.kx-tool-cover {
    height: 160px;
    background: var(--cover-bg, var(--surface-2));
    position: relative; overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}
.kx-tool-cover::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 60% at 70% 30%, rgba(255,255,255,.4) 0%, transparent 70%);
}
.kx-tool-cover .ico-big {
    position: absolute; left: 24px; bottom: 20px;
    width: 56px; height: 56px; display: grid; place-items: center;
    background: var(--surface); color: var(--ic-fg);
    border-radius: 14px; font-size: 26px;
    box-shadow: var(--shadow-2);
    border: 1px solid var(--hairline);
}
.kx-tool-cover .badges { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.kx-tool-badge {
    padding: 4px 10px; font-weight: 600; font-size: 11px; line-height: 1;
    letter-spacing: .04em;
    background: rgba(255,255,255,.85); color: var(--ink); border-radius: 999px;
    backdrop-filter: blur(6px);
}
.kx-tool-badge.pro { background: var(--brand); color: #fff; }
[data-theme="dark"] .kx-tool-badge { background: rgba(28,28,21,.85); color: var(--ink); }
.kx-tool-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kx-tool-body h3 {
    margin: 0; font-weight: 700; font-size: 18px; line-height: 1.25;
    letter-spacing: -.02em; color: var(--ink);
}
.kx-tool-body p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.kx-tool-foot {
    display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px;
    font-size: 12px; color: var(--ink-3);
}
.kx-tool-foot .stars { color: #E0A82E; }
.kx-tool-foot .dot { color: var(--ink-3); }
.kx-cv-blue   { --cover-bg: #EAF1FF; }
.kx-cv-green  { --cover-bg: #E5F5E9; }
.kx-cv-orange { --cover-bg: #FCEFD9; }
.kx-cv-purple { --cover-bg: #F2EAFA; }
.kx-cv-cyan   { --cover-bg: #DFF1F7; }
.kx-cv-pink   { --cover-bg: #FBE4EE; }
[data-theme="dark"] .kx-cv-blue   { --cover-bg: linear-gradient(135deg, #1A2A55 0%, #14193F 100%); }
[data-theme="dark"] .kx-cv-green  { --cover-bg: linear-gradient(135deg, #142E1D 0%, #0E2516 100%); }
[data-theme="dark"] .kx-cv-orange { --cover-bg: linear-gradient(135deg, #36210C 0%, #2A1908 100%); }
[data-theme="dark"] .kx-cv-purple { --cover-bg: linear-gradient(135deg, #271946 0%, #1B1233 100%); }
[data-theme="dark"] .kx-cv-cyan   { --cover-bg: linear-gradient(135deg, #143037 0%, #0F2329 100%); }
[data-theme="dark"] .kx-cv-pink   { --cover-bg: linear-gradient(135deg, #341725 0%, #28111B 100%); }

/* ─── Compact tool cards ───────────────────── */
.kx-tool-grid-compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .kx-tool-grid-compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .kx-tool-grid-compact { grid-template-columns: repeat(2, 1fr); } }
.kx-tool-mini {
    display: flex; gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r);
    text-decoration: none; color: inherit;
    transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.kx-tool-mini:hover { transform: translateY(-2px); border-color: var(--hairline-strong); color: inherit; }
.kx-tool-mini .ic {
    width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 10px; font-size: 18px; flex-shrink: 0;
}
.kx-tool-mini .body { min-width: 0; }
.kx-tool-mini h4 {
    margin: 0; font-weight: 600; font-size: 14px; line-height: 1.2;
    letter-spacing: -.01em; color: var(--ink);
}
.kx-tool-mini p {
    margin: 4px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ─── Personas ─────────────────────────────── */
.kx-persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .kx-persona-grid { grid-template-columns: 1fr; } }
.kx-persona {
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: var(--shadow-1);
}
.kx-persona-head { display: flex; align-items: center; gap: 14px; }
.kx-persona-avatar {
    width: 56px; height: 56px; display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 50%; font-size: 24px;
}
.kx-persona h3 {
    margin: 0; font-weight: 700; font-size: 22px; line-height: 1.15;
    letter-spacing: -.02em; color: var(--ink);
}
.kx-persona-role { font-size: 13px; color: var(--ink-3); }
.kx-persona p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.kx-persona-tools {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 18px; border-top: 1px solid var(--hairline);
}
.kx-persona-tools a {
    font-weight: 500; font-size: 12px; line-height: 1;
    padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: 999px; color: var(--ink-2); text-decoration: none;
    transition: all .15s var(--ease);
}
.kx-persona-tools a:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ─── Stats band ───────────────────────────── */
.kx-stats-band {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    padding: 48px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
@media (max-width: 760px) { .kx-stats-band { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } }
.kx-stat { text-align: center; padding: 0 16px; border-right: 1px solid var(--hairline); }
.kx-stat:last-child { border-right: 0; }
@media (max-width: 760px) { .kx-stat:nth-child(2n) { border-right: 0; } }
.kx-stat-num {
    font-weight: 800; font-size: clamp(36px, 4.6vw, 56px); line-height: 1;
    color: var(--brand); margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}
.kx-stat-label { font-size: 13px; color: var(--ink-2); letter-spacing: .02em; }

/* ─── Reviews ──────────────────────────────── */
.kx-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .kx-reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .kx-reviews-grid { grid-template-columns: 1fr; } }
.kx-review {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column; gap: 18px;
}
.kx-review-stars { color: #E0A82E; font-size: 14px; letter-spacing: 2px; }
.kx-review-quote {
    font-size: 16px; line-height: 1.55; font-weight: 400;
    color: var(--ink); letter-spacing: -.005em; flex: 1; margin: 0;
}
.kx-review-author {
    display: flex; align-items: center; gap: 12px;
    padding-top: 18px; border-top: 1px solid var(--hairline);
}
.kx-review-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ic-bg); color: var(--ic-fg);
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px; line-height: 1;
}
.kx-review-name { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--ink); }
.kx-review-title { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ─── Trending strip ───────────────────────── */
.kx-trend-scroll {
    display: flex; gap: 14px; overflow-x: auto;
    padding: 8px 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scroll-padding: 24px;
}
.kx-trend-scroll > * { scroll-snap-align: start; }
.kx-trend-scroll::-webkit-scrollbar { height: 6px; }
.kx-trend-scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.kx-trend-card {
    flex: 0 0 280px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 12px;
    transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.kx-trend-card:hover { transform: translateY(-2px); border-color: var(--hairline-strong); color: inherit; }
.kx-trend-head { display: flex; align-items: center; justify-content: space-between; }
.kx-trend-rank {
    font-weight: 700; font-size: 22px; line-height: 1;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.kx-trend-card .ic-card {
    width: 36px; height: 36px; display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 9px; font-size: 16px;
}
.kx-trend-card h4 {
    margin: 0; font-weight: 700; font-size: 15px; line-height: 1.25;
    letter-spacing: -.01em; color: var(--ink);
}
.kx-trend-card p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.kx-trend-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 12px; margin-top: auto; border-top: 1px solid var(--hairline);
    font-size: 12px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.kx-trend-up { color: #1F8F45; font-weight: 600; }

/* ─── FAQ ──────────────────────────────────── */
.kx-faq-grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { .kx-faq-grid { grid-template-columns: 1fr; gap: 32px; } }
.kx-faq-aside h2 {
    font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1;
    letter-spacing: -.03em; margin: 0 0 16px;
    color: var(--ink);
}
.kx-faq-aside p { color: var(--ink-2); margin: 0 0 24px; line-height: 1.6; }
.kx-faq-list { display: flex; flex-direction: column; gap: 4px; }
.kx-faq-item {
    border-bottom: 1px solid var(--hairline);
    transition: background .15s var(--ease);
}
.kx-faq-item:first-child { border-top: 1px solid var(--hairline); }
.kx-faq-item summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 0;
    cursor: pointer;
    font-weight: 500; font-size: 17px; line-height: 1.4;
    color: var(--ink); letter-spacing: -.01em;
}
.kx-faq-item summary::-webkit-details-marker { display: none; }
.kx-faq-item summary .ico {
    flex-shrink: 0; width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px; background: var(--surface-2);
    color: var(--ink-2);
    transition: all .2s var(--ease);
    font-size: 14px;
}
.kx-faq-item[open] summary .ico {
    background: var(--brand); color: #fff;
    transform: rotate(45deg);
}
.kx-faq-answer {
    padding: 0 0 22px;
    color: var(--ink-2); font-size: 15px; line-height: 1.65;
}

/* ─── CTA band ─────────────────────────────── */
.kx-cta-band {
    max-width: 1240px; margin: 32px auto 0;
    padding: 80px 32px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    text-align: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-2);
}
.kx-cta-band::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 20% 30%, var(--brand-soft) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 80% 70%, #DFEFFB 0%, transparent 60%);
    opacity: .9; pointer-events: none;
}
[data-theme="dark"] .kx-cta-band::before {
    background:
        radial-gradient(ellipse 60% 60% at 20% 30%, var(--brand-soft) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 80% 70%, #142435 0%, transparent 60%);
    opacity: .8;
}
.kx-cta-band > * { position: relative; }
.kx-cta-band h2 {
    font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.1;
    letter-spacing: -.035em; margin: 0 0 16px;
    color: var(--ink);
}
.kx-cta-band p {
    max-width: 540px; margin: 0 auto 32px;
    color: var(--ink-2); font-size: 17px; line-height: 1.55;
}
.kx-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── Footer ───────────────────────────────── */
.kx-footer { padding: 80px 0 32px; margin-top: 80px; background: var(--bg-2); }
.kx-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 56px;
}
@media (max-width: 900px) { .kx-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .kx-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 540px) { .kx-footer-grid { grid-template-columns: 1fr 1fr; } }
.kx-footer-brand .kx-brand { margin-bottom: 18px; display: inline-flex; padding: 10px 18px; border-radius: 12px; }
.kx-footer-brand .kx-brand img { height: 40px; }
.kx-footer-brand p { color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0 0 20px; }
.kx-footer-socials { display: flex; gap: 8px; }
.kx-footer-socials a {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
    color: var(--ink-2); transition: color .15s var(--ease), background .15s var(--ease);
    text-decoration: none;
}
.kx-footer-socials a:hover { color: var(--brand); }
.kx-footer-h {
    font-weight: 700; font-size: 13px; line-height: 1;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); margin: 0 0 18px;
}
.kx-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kx-footer-list a { color: var(--ink-2); text-decoration: none; font-size: 14px; transition: color .15s var(--ease); }
.kx-footer-list a:hover { color: var(--brand); }
.kx-footer-bottom {
    padding-top: 32px; border-top: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    color: var(--ink-3); font-size: 13px;
}
.kx-footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.kx-footer-bottom-links a { color: var(--ink-3); text-decoration: none; }
.kx-footer-bottom-links a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════
   Admin panel - shell (sidebar + topbar + content)
   Internals (forms, tables, KPI cards) keep using
   their own classes; this just modernises the chrome.
═══════════════════════════════════════════ */
.kx-admin-body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body), sans-serif;
    font-size: 14px; line-height: 1.55;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 100dvh;
}

.kx-admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100dvh;
    transition: grid-template-columns .25s var(--ease);
}
.kx-admin-shell.is-collapsed { grid-template-columns: 64px 1fr; }
@media (max-width: 900px) {
    .kx-admin-shell, .kx-admin-shell.is-collapsed { grid-template-columns: 1fr; }
}

/* Sidebar */
.kx-admin-sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--hairline);
    padding: 20px 12px;
    height: 100dvh;
    position: sticky; top: 0;
    overflow: hidden auto;
    display: flex; flex-direction: column;
    gap: 6px;
    align-items: stretch;
    transition: padding .25s var(--ease);
    z-index: 60; /* Above the topbar (z 50) so collapsed-mode tooltips can extend over it */
}
/* When collapsed, allow tooltips to bleed out the right edge.
   No vertical scroll needed because everything fits in 64px width. */
.kx-admin-shell.is-collapsed .kx-admin-sidebar { padding: 20px 8px; overflow: visible; }
.kx-admin-sidebar::-webkit-scrollbar { width: 6px; }
.kx-admin-sidebar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
@media (max-width: 900px) {
    .kx-admin-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 260px; z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s var(--ease);
    }
    .kx-admin-sidebar.is-open { transform: translateX(0); }
}

.kx-admin-sidebar-brand {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700; font-size: 16px; letter-spacing: -.025em;
    min-width: 0;
    align-self: flex-start;
}
.kx-admin-sidebar-brand .kx-brand-fallback-icon {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 8px; font-size: 14px;
    flex-shrink: 0;
}
/* When a logo image is uploaded, hide the fallback icon by default;
   wrap the image in a dark chip so white-text logos read on the cream sidebar. */
.kx-admin-sidebar-brand.has-logo .kx-brand-fallback-icon { display: none; }
.kx-admin-sidebar-brand.has-logo {
    padding: 6px 12px;
    border-radius: 9px;
    width: max-content;
    max-width: 100%;
}
.kx-admin-sidebar-brand.has-logo img:not(.kx-brand-collapsed-icon) {
    height: 24px; width: auto;
    display: block;
    flex-shrink: 0;
}
[data-theme="light"] .kx-admin-sidebar-brand.has-logo { background: #15140F; }

/* Favicon-as-collapsed-brand: this <img> is hidden by default,
   and only shown when the sidebar is collapsed (replaces the shield icon). */
.kx-brand-collapsed-icon { display: none; }

/* Collapsed sidebar - icons only, hide labels & headings */
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand {
    padding: 0;
    margin-bottom: 8px;
    width: 48px;
    justify-content: center;
    background: transparent !important;
}
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand img:not(.kx-brand-collapsed-icon),
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand span { display: none; }
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand .kx-brand-collapsed-icon {
    display: block;
    width: 36px; height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 4px;
}
/* If a favicon is present, hide the fallback shield-icon when collapsed.
   The .has-favicon class on the brand controls this. */
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand:not(.has-favicon) .kx-brand-fallback-icon {
    display: grid;
    width: 36px; height: 36px;
    font-size: 16px;
}
.kx-admin-shell.is-collapsed .kx-admin-sidebar-brand.has-favicon .kx-brand-fallback-icon { display: none; }
.kx-admin-shell.is-collapsed .kx-admin-sidebar-heading { display: none; }
.kx-admin-shell.is-collapsed .kx-admin-sidebar-section { margin-top: 6px; }
.kx-admin-shell.is-collapsed .kx-admin-sidebar-section:not(:first-of-type) {
    border-top: 1px solid var(--hairline);
    padding-top: 6px;
}
.kx-admin-shell.is-collapsed .kx-admin-sidebar-link {
    justify-content: center;
    padding: 10px 8px;
    position: relative;
    font-size: 0;
}
.kx-admin-shell.is-collapsed .kx-admin-sidebar-link i {
    font-size: 17px;
    margin: 0;
}
/* Tooltip for collapsed state - pulled from data-label */
.kx-admin-shell.is-collapsed .kx-admin-sidebar-link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--ink); color: var(--bg);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s var(--ease), transform .15s var(--ease);
    z-index: 60;
    box-shadow: var(--shadow-2);
}
.kx-admin-shell.is-collapsed .kx-admin-sidebar-link:hover::after,
.kx-admin-shell.is-collapsed .kx-admin-sidebar-link:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Topbar collapse button - replaces the in-sidebar one. */
.kx-admin-topbar-collapse {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
    font-size: 16px;
}
.kx-admin-topbar-collapse:hover {
    color: var(--ink); background: var(--surface-2);
    border-color: var(--hairline-strong);
}
@media (max-width: 900px) { .kx-admin-topbar-collapse { display: none; } }

.kx-admin-sidebar-section {
    display: flex; flex-direction: column; gap: 1px;
    margin-top: 14px;
}
.kx-admin-sidebar-section:first-of-type { margin-top: 0; }
.kx-admin-sidebar-heading {
    padding: 6px 12px;
    font: 600 11px/1 inherit;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.kx-admin-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500; font-size: 14px; line-height: 1.3;
    transition: color .12s var(--ease), background .12s var(--ease);
}
.kx-admin-sidebar-link:hover {
    color: var(--ink); background: var(--surface-2);
}
.kx-admin-sidebar-link.active {
    color: var(--brand); background: var(--brand-soft);
    font-weight: 600;
}
.kx-admin-sidebar-link i {
    width: 20px; text-align: center; flex-shrink: 0;
    color: var(--ink-3); font-size: 15px;
}
.kx-admin-sidebar-link:hover i { color: var(--ink-2); }
.kx-admin-sidebar-link.active i { color: var(--brand); }

.kx-admin-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(20,20,28,.4);
    display: none;
}
.kx-admin-sidebar-backdrop.is-open { display: block; }

/* Main column */
.kx-admin-main {
    display: flex; flex-direction: column;
    min-width: 0;
}

.kx-admin-topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    min-height: 60px;
}
.kx-admin-topbar-left {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; flex: 1;
}
.kx-admin-topbar-toggle {
    display: none;
    width: 38px; height: 38px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 18px;
}
@media (max-width: 900px) {
    .kx-admin-topbar-toggle { display: inline-flex; }
}
.kx-admin-page-title {
    margin: 0;
    font-weight: 700; font-size: 17px; line-height: 1.2;
    letter-spacing: -.02em; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kx-admin-topbar-right {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

/* Topbar buttons (notifications bell, user menu, theme) */
.kx-admin-icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .12s var(--ease), background .12s var(--ease);
    position: relative;
    font-size: 16px;
}
.kx-admin-icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.kx-admin-icon-btn .badge {
    position: absolute; top: -3px; right: -3px;
    background: #E13862; color: #fff;
    border-radius: 999px;
    padding: 1px 6px; font-size: 10px; font-weight: 700;
    border: 2px solid var(--bg);
}

.kx-admin-user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    cursor: pointer; font-family: inherit;
    transition: background .12s var(--ease);
}
.kx-admin-user-btn:hover { background: var(--surface-2); }
.kx-admin-user-avatar {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 50%;
    font-weight: 700; font-size: 12px;
}
.kx-admin-user-meta { line-height: 1.15; text-align: left; }
.kx-admin-user-meta .name { font-weight: 600; font-size: 13px; }
.kx-admin-user-meta .role { font-size: 11px; color: var(--ink-3); }

/* Dropdowns (Bootstrap-styled in dark mode) */
[data-theme="dark"] .dropdown-menu {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--ink);
}
[data-theme="dark"] .dropdown-item { color: var(--ink); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus {
    background: var(--surface-2); color: var(--ink);
}
[data-theme="dark"] .dropdown-divider { border-color: var(--hairline); }

/* Content area */
.kx-admin-content {
    padding: 28px;
}
@media (max-width: 600px) { .kx-admin-content { padding: 20px; } }

.kx-admin-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 14px;
}
.kx-admin-alert-success { background: #E1F4E5; color: #156B33; border: 1px solid #BFE3C9; }
.kx-admin-alert-error   { background: #FCE5E1; color: #8E2517; border: 1px solid #F0B5AB; }
.kx-admin-alert-info    { background: var(--brand-soft); color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
[data-theme="dark"] .kx-admin-alert-success { background: #142E1D; color: #6BD18B; border-color: #235838; }
[data-theme="dark"] .kx-admin-alert-error   { background: #361915; color: #F08070; border-color: #5A2A23; }
[data-theme="dark"] .kx-admin-alert-info    { color: #B6CCFF; }
.kx-admin-alert .btn-close {
    margin-left: auto;
    background: transparent;
    border: 0; cursor: pointer;
    color: currentColor; opacity: .6; padding: 4px;
    font-size: 14px;
}
.kx-admin-alert .btn-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════
   Admin forms (form section, code textarea, switches, settings rail)
═══════════════════════════════════════════ */
.kx-form-section {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.kx-form-section-title {
    font-weight: 700; font-size: 14px; line-height: 1.3;
    letter-spacing: -.005em; color: var(--ink);
    margin: 0 0 16px;
    display: flex; align-items: center; gap: 8px;
}
.kx-form-section-title i { color: var(--brand); }

/* Section header with icon + title + subtitle (used in admin forms) */
.kx-form-section-head {
    display: flex; align-items: flex-start; gap: 14px;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}
.kx-form-section-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--ic-bg, var(--surface-2)); color: var(--ic-fg, var(--ink-2));
    border-radius: 10px; font-size: 17px;
    flex-shrink: 0;
}
.kx-form-section-head h2 {
    margin: 0 0 2px;
    font-weight: 700; font-size: 15px; line-height: 1.2;
    letter-spacing: -.01em; color: var(--ink);
}
.kx-form-section-head p {
    margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}

.kx-required { color: #C8331C; margin-left: 2px; font-weight: 500; }

/* Input group (input with prefix/suffix or icon) */
.kx-input-group {
    display: flex; align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 10px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    overflow: hidden;
}
.kx-input-group:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-input-group > .kx-input {
    border: 0; outline: 0;
    border-radius: 0;
    background: transparent;
    flex: 1; min-width: 0;
    box-shadow: none !important;
}
.kx-input-group > .prefix,
.kx-input-group > .suffix {
    display: grid; place-items: center;
    padding: 0 12px;
    background: var(--bg-2);
    color: var(--ink-3);
    font: 400 13px/1 var(--font-mono), monospace;
    flex-shrink: 0;
}
.kx-input-group > .prefix { border-right: 1px solid var(--hairline); }
.kx-input-group > .suffix { border-left: 1px solid var(--hairline); }

/* SEO panel (preview + counters) */
.kx-seo-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 14px;
}
.kx-seo-panel-head {
    padding: 14px 20px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; gap: 8px;
}
.kx-seo-panel-head i { color: var(--brand); }
.kx-seo-panel-head .ms-auto { margin-left: auto; }
.kx-seo-panel-body { padding: 20px 22px; }

.kx-seo-preview {
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    margin-bottom: 18px;
}
.kx-seo-preview-url {
    font-size: 12px; color: #1F8F45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 4px;
}
.kx-seo-preview-title {
    font-size: 18px; line-height: 1.3;
    color: #1A56DB;
    margin: 0 0 4px;
    font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-seo-preview-desc {
    font-size: 13px; line-height: 1.5;
    color: var(--ink-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .kx-seo-preview-url { color: #6BD18B; }
[data-theme="dark"] .kx-seo-preview-title { color: #6EA0FF; }

.kx-seo-counter {
    margin-top: 4px;
    font-size: 11px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.kx-seo-counter.is-good { color: #1F8F45; }
.kx-seo-counter.is-warn { color: #C26209; }
[data-theme="dark"] .kx-seo-counter.is-good { color: #6BD18B; }
[data-theme="dark"] .kx-seo-counter.is-warn { color: #E5BD55; }

/* FAQ row editor */
.kx-faq-row {
    padding: 14px 16px;
    background: var(--bg-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    margin-bottom: 10px;
}
.kx-faq-row-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.kx-faq-row-head strong {
    font-weight: 700; font-size: 11px; color: var(--ink-3);
    letter-spacing: .12em; text-transform: uppercase;
}

/* Email template editor - used in /admin/settings?group=emails */
.kx-tpl-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
    border-left: 3px solid var(--ic-fg, var(--brand));
}
.kx-tpl-card.tone-amber  { --ic-fg: #C26209; --ic-bg: #FBF1D2; }
.kx-tpl-card.tone-warning{ --ic-fg: #9C7506; --ic-bg: #FBF1D2; }
.kx-tpl-card.tone-danger { --ic-fg: #C8331C; --ic-bg: #FCE5E1; }
.kx-tpl-card.tone-primary { --ic-fg: var(--brand); --ic-bg: var(--brand-soft); }
[data-theme="dark"] .kx-tpl-card.tone-amber,
[data-theme="dark"] .kx-tpl-card.tone-warning { --ic-fg: #E5BD55; --ic-bg: #2E2510; }
[data-theme="dark"] .kx-tpl-card.tone-danger  { --ic-fg: #F08070; --ic-bg: #361915; }

.kx-tpl-card-head {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
}
.kx-tpl-card-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 10px; font-size: 17px;
    flex-shrink: 0;
}
.kx-tpl-card-head h2 {
    margin: 0 0 2px;
    font-weight: 700; font-size: 15px; line-height: 1.2;
    letter-spacing: -.01em; color: var(--ink);
}
.kx-tpl-card-head p {
    margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}

.kx-tpl-field { margin-bottom: 16px; }
.kx-tpl-field:last-child { margin-bottom: 0; }
.kx-tpl-label {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 600; font-size: 12px; color: var(--ink);
    letter-spacing: -.005em;
}
.kx-tpl-label i { color: var(--ink-3); margin-right: 4px; }
.kx-tpl-counter {
    font-size: 11px; color: var(--ink-3);
    font-weight: 400; font-variant-numeric: tabular-nums;
}

.kx-tpl-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-bottom: 8px;
}
.kx-tpl-tags-hint {
    font-size: 11px; color: var(--ink-3); margin-right: 4px;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}
.kx-tpl-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px;
    background: var(--surface-2); color: var(--ink-2);
    border: 1px solid var(--hairline); border-radius: 5px;
    font: 500 11px/1.4 var(--font-mono), monospace;
    cursor: pointer;
    transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease), transform .12s var(--ease);
    font-family: var(--font-mono), monospace;
}
.kx-tpl-tag i { font-size: 10px; }
.kx-tpl-tag:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.kx-tpl-tag.is-inserted {
    background: var(--brand); color: #fff; border-color: var(--brand);
    transform: scale(.95);
}

.kx-tpl-input {
    width: 100%; padding: 11px 14px;
    background: var(--surface); color: var(--ink);
    font-family: var(--font-body), sans-serif; font-size: 14px;
    border: 1px solid var(--hairline-strong); border-radius: 10px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.kx-tpl-input:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-tpl-textarea {
    width: 100%; padding: 12px 14px;
    background: var(--bg-2); color: var(--ink);
    font-family: var(--font-mono), monospace;
    font-size: 12.5px; line-height: 1.6;
    border: 1px solid var(--hairline-strong); border-radius: 10px;
    resize: vertical;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.kx-tpl-textarea:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-tpl-help {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: 11px; color: var(--ink-3);
}

/* Subscription tool picker - collapsible categories + search + filters
   Used by /admin/subscriptions/{create,edit}. */
.kx-sub-picker { display: flex; flex-direction: column; gap: 0; }
.kx-sub-picker-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.kx-sub-picker-search {
    flex: 1; min-width: 180px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
}
.kx-sub-picker-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kx-sub-picker-search i { color: var(--ink-3); font-size: 13px; }
.kx-sub-picker-search input {
    flex: 1; min-width: 0; height: 36px;
    background: transparent; border: 0; outline: 0;
    color: var(--ink); font-family: var(--font-body), sans-serif; font-size: 13px;
}
.kx-sub-picker-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.kx-sub-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    background: var(--surface); color: var(--ink-2);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    font-family: var(--font-body), sans-serif;
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all .12s var(--ease);
}
.kx-sub-chip:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface-2); }
.kx-sub-chip.is-pro { color: #C26209; border-color: #FBF1D2; background: #FBF1D2; }
.kx-sub-chip.is-pro:hover { color: #fff; background: #C26209; border-color: #C26209; }
[data-theme="dark"] .kx-sub-chip.is-pro { color: #E5BD55; border-color: #2E2510; background: #2E2510; }

.kx-sub-count-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; margin-left: auto;
    background: var(--brand-soft); color: var(--brand);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.kx-sub-count-pill i { font-size: 12px; }
[data-theme="dark"] .kx-sub-count-pill { color: #B6CCFF; }

.kx-sub-cat-list {
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
    max-height: 600px; overflow-y: auto;
}
.kx-sub-cat-list::-webkit-scrollbar { width: 6px; }
.kx-sub-cat-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.kx-sub-cat { border-top: 1px solid var(--hairline); }
.kx-sub-cat:first-child { border-top: 0; }
.kx-sub-cat-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 11px 14px;
    background: var(--bg-2);
    border: 0; cursor: pointer;
    font-family: var(--font-body), sans-serif;
    transition: background .12s var(--ease);
}
.kx-sub-cat-head:hover { background: var(--surface-2); }
.kx-sub-cat-head .title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -.01em;
}
.kx-sub-cat-head .chev {
    color: var(--ink-3); font-size: 12px;
    transition: transform .15s var(--ease);
}
.kx-sub-cat[data-collapsed="true"] .chev { transform: rotate(-90deg); }
.kx-sub-cat-head .meta {
    font-size: 11px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 4px;
}
.kx-sub-cat.has-selection .kx-sub-cat-head .meta {
    color: var(--brand); font-weight: 600;
}
.kx-sub-cat-body { padding: 8px; }
.kx-sub-cat[data-collapsed="true"] .kx-sub-cat-body { display: none; }
.kx-sub-tool-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.kx-sub-tool {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 7px; cursor: pointer;
    transition: background .1s var(--ease);
    color: var(--ink); font-size: 12.5px;
    margin: 0;
}
.kx-sub-tool:hover { background: var(--surface-2); }
.kx-sub-tool input { accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.kx-sub-tool input:checked ~ .kx-sub-tool-tick { display: grid; opacity: 1; }
.kx-sub-tool input:checked ~ .kx-sub-tool-name { color: var(--ink); font-weight: 500; }
.kx-sub-tool .ic {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--ink-3); font-size: 13px;
    flex-shrink: 0;
}
.kx-sub-tool input:checked ~ .ic { color: var(--brand); }
.kx-sub-tool .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-sub-tool .pro {
    background: #FBF1D2; color: #9C7506;
    padding: 1px 6px; border-radius: 4px;
    font-size: 9px; font-weight: 700; letter-spacing: .04em;
    margin-left: 4px;
}
[data-theme="dark"] .kx-sub-tool .pro { background: #2E2510; color: #E5BD55; }
.kx-sub-empty {
    text-align: center; padding: 32px 16px;
    color: var(--ink-3); font-size: 13px;
}
.kx-sub-empty i { font-size: 24px; display: block; margin-bottom: 6px; }

/* Tool picker (used in plans form) */
.kx-tool-picker {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 4px;
}
.kx-tool-picker::-webkit-scrollbar { width: 6px; }
.kx-tool-picker::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.kx-tool-picker-toolbar {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface);
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--hairline);
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.kx-tool-picker-group { margin-bottom: 14px; }
.kx-tool-picker-group-label {
    font-weight: 700; font-size: 10px; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3); margin: 0 0 8px;
}
.kx-tool-picker-row {
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .12s var(--ease);
}
.kx-tool-picker-row:hover { background: var(--surface-2); }
.kx-tool-picker-row label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 13px; color: var(--ink);
    margin: 0;
}
.kx-tool-picker-row input { accent-color: var(--brand); cursor: pointer; }
.kx-tool-picker-row label i { color: var(--ink-3); width: 16px; text-align: center; flex-shrink: 0; }

.kx-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body), sans-serif;
    font-size: 14px; line-height: 1.55;
    border: 1px solid var(--hairline-strong);
    border-radius: 10px;
    resize: vertical;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.kx-textarea:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-textarea-code {
    font-family: var(--font-mono), monospace;
    font-size: 12.5px; line-height: 1.6;
    background: var(--bg-2);
}

/* Toggle switch (replaces Bootstrap form-switch) */
.kx-switch {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
}
.kx-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.kx-switch-track {
    width: 36px; height: 20px;
    background: var(--surface-3);
    border-radius: 999px;
    position: relative;
    transition: background .15s var(--ease);
    flex-shrink: 0;
}
.kx-switch-track::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff; border-radius: 50%;
    transition: transform .18s var(--ease), background .15s var(--ease);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.kx-switch input:checked + .kx-switch-track { background: var(--brand); }
.kx-switch input:checked + .kx-switch-track::after { transform: translateX(16px); }
.kx-switch input:focus-visible + .kx-switch-track {
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-switch-label {
    font-weight: 500; font-size: 14px; color: var(--ink);
}
.kx-switch-label code {
    background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
    font: 400 12px/1 var(--font-mono), monospace; color: var(--ink-2);
}

.kx-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink); cursor: pointer;
}
.kx-checkbox input {
    width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer;
}

/* Settings left-rail nav */
.kx-settings-grid {
    display: grid; grid-template-columns: 240px 1fr; gap: 18px;
}
@media (max-width: 900px) { .kx-settings-grid { grid-template-columns: 1fr; } }
.kx-settings-rail {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 8px;
    height: max-content;
    position: sticky; top: 80px;
}
@media (max-width: 900px) { .kx-settings-rail { position: static; } }
.kx-settings-rail-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500; font-size: 13px;
    transition: color .12s var(--ease), background .12s var(--ease);
}
.kx-settings-rail-link:hover {
    color: var(--ink); background: var(--surface-2);
}
.kx-settings-rail-link.is-active {
    color: var(--brand); background: var(--brand-soft); font-weight: 600;
}
.kx-settings-rail-link i {
    width: 18px; text-align: center; flex-shrink: 0;
    color: var(--ink-3); font-size: 14px;
}
.kx-settings-rail-link.is-active i,
.kx-settings-rail-link:hover i { color: var(--brand); }

/* Color picker swatch (paired with text input) */
.kx-color-pair {
    display: flex; align-items: center; gap: 8px;
}
.kx-color-pair input[type="color"] {
    width: 38px; height: 38px;
    padding: 0; border: 1px solid var(--hairline);
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}
.kx-color-pair .kx-input { max-width: 180px; font-family: var(--font-mono), monospace; }

/* Password input group with toggle */
.kx-pw-group { position: relative; display: flex; align-items: stretch; gap: 6px; }
.kx-pw-group .kx-input { font-family: var(--font-mono), monospace; flex: 1; }

/* Image preview thumb (settings page) */
.kx-img-preview {
    max-height: 80px; max-width: 200px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 4px;
    background: var(--surface-2);
    display: block;
    object-fit: contain;
}

/* Card grid (used by menus index) */
.kx-card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .kx-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .kx-card-grid { grid-template-columns: 1fr; } }
.kx-feature-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 18px;
    display: flex; flex-direction: column; gap: 14px;
}

/* Info banner */
.kx-info-banner {
    display: flex; gap: 10px;
    padding: 14px 18px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    border-radius: 12px;
    font-size: 13px; line-height: 1.55;
    margin-bottom: 14px;
}
.kx-info-banner i { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.kx-info-banner a { color: var(--brand); font-weight: 500; }
[data-theme="dark"] .kx-info-banner { color: #B6CCFF; }
[data-theme="dark"] .kx-info-banner a { color: #B6CCFF; text-decoration: underline; }

/* ═══════════════════════════════════════════
   Admin - shared index page primitives
   (page head, filter bar, table, row actions, pagination)
   Used by tools/categories/pages/plans/users/etc.
═══════════════════════════════════════════ */
.kx-admin-page-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.kx-admin-page-h1 {
    margin: 0 0 4px;
    font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-admin-page-sub {
    margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5;
    max-width: 640px;
}
.kx-admin-page-head-actions {
    display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}

/* Filter bar */
.kx-filter-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.kx-filter-search {
    flex: 1; min-width: 220px; max-width: 400px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    transition: border-color .12s var(--ease);
}
.kx-filter-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kx-filter-search i { color: var(--ink-3); font-size: 14px; }
.kx-filter-search input {
    flex: 1; min-width: 0; height: 38px;
    background: transparent; border: 0; outline: 0;
    color: var(--ink);
    font-family: var(--font-body), sans-serif; font-size: 13px;
}
.kx-filter-search input::placeholder { color: var(--ink-3); }

.kx-filter-bar select,
.kx-filter-bar .kx-filter-select {
    height: 38px;
    padding: 0 32px 0 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 9px;
    color: var(--ink);
    font-family: var(--font-body), sans-serif;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238E8B83'%3E%3Cpath d='M4.5 6l3.5 3.5L11.5 6'/%3E%3Cpath stroke='%238E8B83' stroke-width='1.5' fill='none' d='M4.5 6.5l3.5 3.5L11.5 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.kx-filter-bar select:focus,
.kx-filter-bar .kx-filter-select:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-filter-submit {
    width: 38px; height: 38px;
    background: var(--ink); color: var(--bg);
    border: 0; border-radius: 9px;
    cursor: pointer; font-size: 16px;
    display: grid; place-items: center;
}
.kx-filter-submit:hover { background: var(--brand); color: #fff; }

/* Table */
.kx-admin-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 14px;
}
.kx-admin-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid var(--hairline);
    flex-wrap: wrap;
}
.kx-admin-card-head .meta {
    color: var(--ink-3); font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.kx-admin-card-body { padding: 18px; }
.kx-admin-card-body.is-flush { padding: 0; }

.kx-admin-table-wrap { overflow-x: auto; }
.kx-admin-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; color: var(--ink);
}
.kx-admin-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600; font-size: 11px; line-height: 1;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3);
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}
.kx-admin-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
.kx-admin-table tbody tr:last-child td { border-bottom: 0; }
.kx-admin-table tbody tr:hover { background: var(--surface-2); }
.kx-admin-table .text-end { text-align: right; }
.kx-admin-table input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}
.kx-admin-table .empty {
    text-align: center; padding: 48px 20px;
    color: var(--ink-3); font-size: 14px;
}

.kx-admin-table-tool {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.kx-admin-table-tool-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    border-radius: 8px; font-size: 14px;
    flex-shrink: 0;
}
.kx-admin-table-avatar {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 50%;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.kx-admin-table-tool .email {
    font-size: 11px; color: var(--ink-3); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 320px;
}
.kx-admin-table-tool .name {
    font-weight: 600; font-size: 13px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 320px;
}
.kx-admin-table-tool .slug {
    font: 400 11px/1.2 'JetBrains Mono', monospace;
    color: var(--ink-3); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 320px;
}

/* Row action icon buttons */
.kx-admin-row-actions {
    display: inline-flex; align-items: center; gap: 4px;
}
.kx-admin-row-action {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 7px;
    color: var(--ink-2);
    cursor: pointer; text-decoration: none;
    transition: color .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
    font-size: 13px;
    font-family: inherit;
}
.kx-admin-row-action:hover {
    color: var(--ink); background: var(--surface-2); border-color: var(--hairline-strong);
}
.kx-admin-row-action.is-view:hover    { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.kx-admin-row-action.is-edit:hover    { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.kx-admin-row-action.is-danger:hover  { color: #C8331C; border-color: #C8331C; background: #FCE5E1; }
.kx-admin-row-action.is-warn:hover    { color: #9C7506; border-color: #9C7506; background: #FBF1D2; }
.kx-admin-row-action.is-success:hover { color: #156B33; border-color: #156B33; background: #E1F4E5; }
[data-theme="dark"] .kx-admin-row-action.is-danger:hover  { background: #361915; color: #F08070; border-color: #5A2A23; }
[data-theme="dark"] .kx-admin-row-action.is-warn:hover    { background: #2E2510; color: #E5BD55; border-color: #4D3F1A; }
[data-theme="dark"] .kx-admin-row-action.is-success:hover { background: #142E1D; color: #6BD18B; border-color: #235838; }
.kx-stars { color: #E0A82E; letter-spacing: 1px; font-size: 13px; }

/* Status badges (variants of kx-dash-pill) */
.kx-status {
    display: inline-block;
    padding: 3px 9px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 999px;
    line-height: 1.4;
    border: 1px solid transparent;
}
.kx-status + .kx-status { margin-left: 4px; }
.kx-status-success { background: #E1F4E5; color: #156B33; }
.kx-status-warning { background: #FBF1D2; color: #9C7506; }
.kx-status-info    { background: var(--brand-soft); color: var(--brand); }
.kx-status-muted   { background: var(--surface-2); color: var(--ink-3); }
.kx-status-danger  { background: #FCE5E1; color: #8E2517; }
[data-theme="dark"] .kx-status-success { background: #142E1D; color: #6BD18B; }
[data-theme="dark"] .kx-status-warning { background: #2E2510; color: #E5BD55; }
[data-theme="dark"] .kx-status-info    { color: #B6CCFF; }
[data-theme="dark"] .kx-status-danger  { background: #361915; color: #F08070; }

/* Bulk action selector inline */
.kx-bulk-bar {
    display: flex; align-items: center; gap: 8px;
}
.kx-bulk-bar select {
    height: 32px; padding: 0 28px 0 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    color: var(--ink); font-size: 12px; font-weight: 500;
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238E8B83'%3E%3Cpath stroke='%238E8B83' stroke-width='1.5' fill='none' d='M4.5 6.5l3.5 3.5L11.5 6.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    font-family: var(--font-body), sans-serif;
    min-width: 160px;
}
.kx-bulk-bar button {
    height: 32px; padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    color: var(--ink); font-weight: 500; font-size: 12px;
    cursor: pointer;
    font-family: var(--font-body), sans-serif;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}
.kx-bulk-bar button:hover { background: var(--surface-2); border-color: var(--hairline-strong); }

/* Pagination - Bootstrap pagination override */
.kx-admin-pagination .pagination {
    display: flex; gap: 4px;
    margin: 0; padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.kx-admin-pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    color: var(--ink-2); font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: all .12s var(--ease);
}
.kx-admin-pagination .page-link:hover { color: var(--ink); background: var(--surface-2); border-color: var(--hairline-strong); }
.kx-admin-pagination .page-item.active .page-link {
    background: var(--brand); color: #fff; border-color: var(--brand);
}
.kx-admin-pagination .page-item.disabled .page-link {
    color: var(--ink-3); background: transparent; border-color: var(--hairline); cursor: not-allowed;
    opacity: .6;
}

/* ═══════════════════════════════════════════
   Admin dashboard
═══════════════════════════════════════════ */
.kx-dash-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    padding: 24px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-1);
}
.kx-dash-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 50% 60% at 100% 0%, var(--brand-soft) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 0% 100%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 65%);
    opacity: .9;
}
.kx-dash-hero > * { position: relative; }
.kx-dash-hero-id {
    display: flex; align-items: center; gap: 16px;
    min-width: 0; flex: 1;
}
.kx-dash-hero-avatar {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 14px;
    font-weight: 700; font-size: 22px; letter-spacing: -.02em;
    box-shadow: 0 8px 22px -8px var(--brand);
    flex-shrink: 0;
}
.kx-dash-hero-title {
    margin: 0 0 4px;
    font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-dash-hero-sub {
    margin: 0;
    color: var(--ink-2); font-size: 13px; line-height: 1.5;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kx-dash-hero-sub i { color: var(--ink-3); }
.kx-dash-hero-sub .sep { color: var(--ink-3); opacity: .5; }
.kx-dash-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kx-dash-action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    color: var(--ink); text-decoration: none;
    font-weight: 500; font-size: 13px;
    transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.kx-dash-action:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* KPI grid */
.kx-dash-kpi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) { .kx-dash-kpi-grid { grid-template-columns: 1fr; } }
.kx-dash-kpi {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-1);
}
.kx-dash-kpi::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 100% 0%, var(--ic-bg, var(--surface-2)) 0%, transparent 70%);
    opacity: .5;
}
.kx-dash-kpi > * { position: relative; }
.kx-dash-kpi-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.kx-dash-kpi-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 10px; font-size: 16px;
    flex-shrink: 0;
}
.kx-dash-kpi-eyebrow {
    font-weight: 600; font-size: 11px; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
}
.kx-dash-kpi-value {
    display: block;
    font-weight: 800; font-size: 36px; line-height: 1;
    letter-spacing: -.03em; color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.kx-dash-kpi-label { font-size: 13px; color: var(--ink-2); }
.kx-dash-kpi-sub {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--hairline);
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; color: var(--ink-2);
}
.kx-dash-kpi-sub-item {
    display: flex; align-items: center; gap: 5px;
}
.kx-dash-kpi-sub-item strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Section cards */
.kx-dash-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 14px;
}
.kx-dash-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
}
.kx-dash-card-title {
    margin: 0;
    font-weight: 700; font-size: 14px; line-height: 1.2;
    letter-spacing: -.005em; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.kx-dash-card-title i { color: var(--brand); font-size: 16px; }
.kx-dash-card-title .small { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.kx-dash-card-body { padding: 18px 20px; }
.kx-dash-card-body.is-flush { padding: 0; }

.kx-dash-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 500; font-size: 12px;
    color: var(--brand); text-decoration: none;
    padding: 6px 10px; border-radius: 8px;
    transition: background .12s var(--ease), gap .15s var(--ease);
}
.kx-dash-link:hover { background: var(--brand-soft); gap: 8px; color: var(--brand); }

/* Top list (tools / categories) - ranked progress bar rows */
.kx-dash-top-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kx-dash-top-row {
    display: grid;
    grid-template-columns: 28px 32px 1fr 100px auto;
    align-items: center; gap: 10px;
    padding: 6px 4px;
}
@media (max-width: 700px) {
    .kx-dash-top-row { grid-template-columns: 24px 28px 1fr auto; }
    .kx-dash-top-row .kx-dash-top-bar { display: none; }
}
.kx-dash-top-rank {
    font: 600 12px/1 'JetBrains Mono', monospace;
    color: var(--ink-3); text-align: center;
}
.kx-dash-top-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    border-radius: 9px; font-size: 14px;
}
.kx-dash-top-name {
    font-weight: 500; font-size: 13px; color: var(--ink);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-dash-top-name:hover { color: var(--brand); }
.kx-dash-top-bar {
    height: 6px; background: var(--surface-2);
    border-radius: 999px; overflow: hidden;
}
.kx-dash-top-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
    border-radius: 999px;
}
.kx-dash-top-value {
    font: 600 13px/1 inherit;
    color: var(--ink); font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 50px;
}

/* Recent tools grid */
.kx-dash-recent-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 700px) { .kx-dash-recent-grid { grid-template-columns: 1fr; } }
.kx-dash-recent {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: border-color .12s var(--ease), background .12s var(--ease);
}
.kx-dash-recent:hover { border-color: var(--hairline-strong); background: var(--surface-2); }
.kx-dash-recent-icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    border-radius: 9px; font-size: 15px;
    flex-shrink: 0;
}
.kx-dash-recent-meta { flex: 1; min-width: 0; }
.kx-dash-recent-name {
    display: block;
    font-weight: 600; font-size: 13px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-dash-recent-cat {
    display: block;
    font-size: 11px; color: var(--ink-3);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-dash-recent-cat .dot { opacity: .4; margin: 0 4px; }
.kx-dash-recent-status { display: flex; gap: 4px; flex-shrink: 0; }

.kx-dash-pill {
    display: inline-block;
    padding: 2px 8px; font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border-radius: 999px;
    background: var(--surface-2); color: var(--ink-3);
    border: 1px solid var(--hairline);
}
.kx-dash-pill-amber { background: #FBF1D2; color: #9C7506; border-color: transparent; }
.kx-dash-pill-slate { background: var(--surface-3); color: var(--ink-3); }
.kx-dash-pill-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
[data-theme="dark"] .kx-dash-pill-amber { background: #2E2510; color: #E5BD55; }

/* Activity feed */
.kx-dash-activity { list-style: none; padding: 0; margin: 0; }
.kx-dash-activity-item {
    display: flex; gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--hairline);
}
.kx-dash-activity-item:first-child { border-top: 0; }
.kx-dash-activity-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px; font-size: 14px;
    flex-shrink: 0;
}
.kx-dash-activity-icon[data-tone="blue"]   { background: #E5EFFF; color: #1F5BFF; }
.kx-dash-activity-icon[data-tone="green"]  { background: #E1F4E5; color: #1F8F45; }
.kx-dash-activity-icon[data-tone="purple"] { background: #EFE6FB; color: #6B3FBE; }
.kx-dash-activity-icon[data-tone="amber"]  { background: #FBF1D2; color: #9C7506; }
.kx-dash-activity-icon[data-tone="cyan"]   { background: #DFF1F7; color: #1A7C9E; }
.kx-dash-activity-icon[data-tone="rose"],
.kx-dash-activity-icon[data-tone="red"]    { background: #FCE5E1; color: #C8331C; }
.kx-dash-activity-icon[data-tone="slate"]  { background: var(--surface-2); color: var(--ink-2); }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="blue"]   { background: #16264F; color: #6EA0FF; }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="green"]  { background: #142E1D; color: #6BD18B; }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="purple"] { background: #271946; color: #B193ED; }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="amber"]  { background: #2E2510; color: #E5BD55; }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="cyan"]   { background: #143037; color: #67C0DD; }
[data-theme="dark"] .kx-dash-activity-icon[data-tone="rose"],
[data-theme="dark"] .kx-dash-activity-icon[data-tone="red"]    { background: #361915; color: #F08070; }
.kx-dash-activity-text { margin: 0 0 2px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.kx-dash-activity-meta {
    margin: 0; font-size: 11px; color: var(--ink-3);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.kx-dash-activity-meta .dot { opacity: .5; }

/* Two-column layout helper */
.kx-dash-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 14px;
}
@media (max-width: 1100px) { .kx-dash-grid { grid-template-columns: 1fr; } }

/* ─── Locked / paywall page ───────────────── */
.kx-locked-page {
    min-height: calc(100dvh - 200px);
    padding: 48px 16px;
    display: flex; align-items: center; justify-content: center;
}
.kx-locked-card {
    width: 100%; max-width: 560px;
    padding: 48px 36px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    text-align: center;
    position: relative; overflow: hidden;
}
.kx-locked-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--ic-fg, #C26209) 12%, transparent) 0%, transparent 70%);
}
.kx-locked-card > * { position: relative; }
.kx-locked-icon {
    display: inline-grid; place-items: center;
    width: 72px; height: 72px;
    background: var(--ic-bg, var(--surface-2));
    color: var(--ic-fg, var(--ink-2));
    border-radius: 50%;
    font-size: 28px;
    margin-bottom: 20px;
}
.kx-locked-title {
    margin: 0 0 8px;
    font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.15;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-locked-desc {
    margin: 0 0 24px;
    color: var(--ink-2); font-size: 15px; line-height: 1.6;
    max-width: 440px; margin-left: auto; margin-right: auto;
}
.kx-locked-banner {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px; margin-bottom: 28px;
    background: var(--brand-soft); color: var(--brand-ink);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-radius: 12px;
    font-size: 14px; line-height: 1.45;
    text-align: left;
}
.kx-locked-banner i { font-size: 18px; flex-shrink: 0; }
[data-theme="dark"] .kx-locked-banner { color: #B6CCFF; }
.kx-locked-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.kx-locked-foot {
    margin: 28px 0 0;
    font-size: 13px; color: var(--ink-3); line-height: 1.55;
}

/* ─── Form inputs (shared) ────────────────── */
.kx-form-field { margin-bottom: 16px; }
.kx-label {
    display: block; font-weight: 600; font-size: 13px; line-height: 1.3;
    color: var(--ink); margin-bottom: 6px; letter-spacing: -.005em;
}
.kx-input {
    display: block; width: 100%;
    padding: 11px 14px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body), sans-serif;
    font-size: 14px; line-height: 1.4;
    border: 1px solid var(--hairline-strong);
    border-radius: 10px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.kx-input::placeholder { color: var(--ink-3); }
.kx-input:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-helper-text {
    display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3);
}
.kx-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}
.kx-alert-success {
    background: #E1F4E5; color: #156B33;
    border: 1px solid #BFE3C9;
}
.kx-alert-error {
    background: #FCE5E1; color: #8E2517;
    border: 1px solid #F0B5AB;
}
[data-theme="dark"] .kx-alert-success { background: #142E1D; color: #6BD18B; border-color: #235838; }
[data-theme="dark"] .kx-alert-error   { background: #361915; color: #F08070; border-color: #5A2A23; }

/* ─── Auth pages ──────────────────────────── */
.kx-auth-page {
    min-height: calc(100dvh - 80px);
    padding: 32px 16px 56px;
    display: flex; align-items: center; justify-content: center;
}
.kx-auth-shell {
    width: 100%; max-width: 960px;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
@media (max-width: 800px) {
    .kx-auth-shell { grid-template-columns: 1fr; }
    .kx-auth-aside { display: none; }
}

.kx-auth-aside {
    padding: 36px 32px;
    background: linear-gradient(160deg, var(--brand-soft) 0%, var(--bg-2) 100%);
    border-right: 1px solid var(--hairline);
    display: flex; flex-direction: column; gap: 24px;
    position: relative; overflow: hidden;
}
.kx-auth-aside::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle 320px at 100% 100%, var(--brand-soft) 0%, transparent 70%);
    opacity: .6;
}
.kx-auth-aside > * { position: relative; }
[data-theme="dark"] .kx-auth-aside {
    background: linear-gradient(160deg, #1A2A55 0%, #15140F 100%);
}
.kx-auth-aside-brand {
    display: inline-flex; align-items: center;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 10px;
    align-self: flex-start;
}
.kx-auth-aside-brand img { height: 32px; width: auto; display: block; }
[data-theme="light"] .kx-auth-aside-brand { background: #15140F; }
.kx-auth-aside-title {
    margin: 0;
    font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-auth-aside-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.kx-auth-aside-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.kx-auth-aside-list i {
    color: var(--brand); font-size: 16px;
    margin-top: 2px; flex-shrink: 0;
}
.kx-auth-aside-foot {
    margin: auto 0 0;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
    font-size: 12px; color: var(--ink-3); line-height: 1.55;
    display: flex; align-items: flex-start; gap: 8px;
}
.kx-auth-aside-foot i { color: var(--brand); margin-top: 1px; }

.kx-auth-card { padding: 36px 32px; display: flex; flex-direction: column; }
.kx-auth-card-header { margin-bottom: 24px; }
.kx-auth-card-header h1 {
    margin: 0 0 6px;
    font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-auth-card-header p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; }

.kx-auth-form { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.kx-auth-form .kx-form-field { margin-bottom: 0; width: 100%; }
.kx-auth-form .kx-input,
.kx-auth-form .kx-auth-pw,
.kx-auth-form .kx-auth-pw .kx-input { width: 100%; box-sizing: border-box; }

.kx-auth-label-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.kx-auth-label-row .kx-label { margin-bottom: 0; }
.kx-auth-label-row a {
    font-size: 12px; color: var(--brand); font-weight: 500;
    text-decoration: none;
}
.kx-auth-label-row a:hover { text-decoration: underline; }

.kx-auth-pw { position: relative; }
.kx-auth-pw .kx-input { padding-right: 42px; }
.kx-auth-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--ink-3); font-size: 16px;
    display: grid; place-items: center; border-radius: 6px;
    transition: color .12s var(--ease), background .12s var(--ease);
}
.kx-auth-pw-toggle:hover { color: var(--ink); background: var(--surface-2); }

.kx-auth-checkbox {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-2);
    cursor: pointer;
}
.kx-auth-checkbox input {
    width: 16px; height: 16px; cursor: pointer;
    accent-color: var(--brand);
}

.kx-auth-submit {
    margin-top: 6px;
    width: 100%; padding: 13px 22px;
    background: var(--brand); color: #fff;
    border: 0; border-radius: 10px;
    font-family: var(--font-body), sans-serif;
    font-weight: 600; font-size: 14px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 4px 14px -4px var(--brand);
}
.kx-auth-submit:hover { background: var(--brand-ink); transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--brand); }

.kx-auth-card-foot {
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 13px; color: var(--ink-2); text-align: center;
}
.kx-auth-card-foot a { color: var(--brand); font-weight: 500; text-decoration: none; }
.kx-auth-card-foot a:hover { text-decoration: underline; }

.kx-auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    font-size: 14px; line-height: 1.5;
    margin-bottom: 16px;
}
.kx-auth-alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.kx-auth-alert-error {
    background: #FCE5E1; color: #8E2517; border: 1px solid #F0B5AB;
}
.kx-auth-alert-info {
    background: var(--brand-soft); color: var(--brand-ink); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.kx-auth-alert ul { margin: 4px 0 0; padding-left: 18px; }
[data-theme="dark"] .kx-auth-alert-error { background: #361915; color: #F08070; border-color: #5A2A23; }
[data-theme="dark"] .kx-auth-alert-info  { color: #B6CCFF; }

/* ─── Account page ────────────────────────── */
.kx-acct-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    padding: 28px;
    margin: 32px 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-1);
}
.kx-acct-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 80% at 100% 0%, var(--brand-soft) 0%, transparent 60%);
    opacity: .8;
}
.kx-acct-hero > * { position: relative; }
.kx-acct-hero-id {
    display: flex; align-items: center; gap: 18px;
    min-width: 0; flex: 1;
}
.kx-acct-avatar {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: var(--brand); color: #fff;
    border-radius: 16px;
    font-weight: 700; font-size: 22px; letter-spacing: -.02em;
    box-shadow: 0 8px 22px -8px var(--brand);
    flex-shrink: 0;
}
.kx-acct-name {
    margin: 0 0 4px; font-weight: 700; font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.15; letter-spacing: -.025em; color: var(--ink);
}
.kx-acct-email {
    margin: 0 0 10px; font-size: 14px; color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 6px;
}
.kx-acct-email i { color: var(--ink-3); }
.kx-acct-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.kx-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink-2); font-size: 12px; font-weight: 500;
}
.kx-pill-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.kx-pill-success { background: #E1F4E5; color: #156B33; border-color: transparent; }
.kx-pill-muted { color: var(--ink-3); }
[data-theme="dark"] .kx-pill-success { background: #142E1D; color: #6BD18B; }

/* Stats */
.kx-acct-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 28px;
}
@media (max-width: 760px) { .kx-acct-stats { grid-template-columns: repeat(2, 1fr); } }
.kx-acct-stat {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}
.kx-acct-stat-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--ic-bg, var(--surface-2));
    color: var(--ic-fg, var(--ink-2));
    border-radius: 10px; font-size: 18px;
    flex-shrink: 0;
}
.kx-acct-stat-value {
    font-weight: 700; font-size: 22px; line-height: 1;
    color: var(--ink); font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    margin-bottom: 2px;
}
.kx-acct-stat-label { font-size: 12px; color: var(--ink-3); }

/* Layout */
.kx-acct-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 24px;
}
@media (max-width: 1000px) { .kx-acct-layout { grid-template-columns: 1fr; } }
.kx-acct-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kx-acct-side { display: flex; flex-direction: column; gap: 16px; }

.kx-acct-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.kx-acct-card-feature {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--hairline));
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 80px);
}
.kx-acct-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 22px;
    border-bottom: 1px solid var(--hairline);
}
.kx-acct-card-title {
    margin: 0; font-weight: 700; font-size: 15px; line-height: 1.3;
    letter-spacing: -.01em; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.kx-acct-card-title i { color: var(--brand); }
.kx-acct-card-count {
    background: var(--surface-2); color: var(--ink-2);
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kx-acct-card-body { padding: 22px; }

/* Empty state */
.kx-acct-empty {
    text-align: center; padding: 32px 20px;
    color: var(--ink-2);
}
.kx-acct-empty > i {
    font-size: 28px; color: var(--ink-3); display: block; margin-bottom: 8px;
}
.kx-acct-empty p { margin: 0 0 4px; font-size: 14px; }
.kx-acct-empty p strong { color: var(--ink); font-weight: 600; }
.kx-acct-empty .small { font-size: 13px; color: var(--ink-3); }
.kx-acct-empty .kx-btn { margin-top: 16px; }

/* Subscription block */
.kx-acct-sub { padding: 22px; }
.kx-acct-sub + .kx-acct-sub { border-top: 1px solid var(--hairline); }
.kx-acct-sub-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.kx-acct-sub-name {
    font-weight: 700; font-size: 18px; line-height: 1.2;
    letter-spacing: -.02em; color: var(--ink);
    margin-bottom: 4px;
}
.kx-acct-sub-meta {
    font-size: 13px; color: var(--ink-2);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kx-acct-sub-meta i { color: var(--ink-3); }
.kx-acct-sub-meta .sep { color: var(--ink-3); opacity: .5; }
.kx-acct-sub-ref {
    font-size: 12px; color: var(--ink-3);
    margin-bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
}
.kx-acct-sub-ref code {
    background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
    font-family: var(--font-mono), monospace; font-size: 11px; color: var(--ink-2);
}
.kx-acct-status-active {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: #E1F4E5; color: #156B33;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.kx-acct-status-active::before {
    content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%;
}
[data-theme="dark"] .kx-acct-status-active { background: #142E1D; color: #6BD18B; }

/* Tool chip cluster (under subscription) */
.kx-acct-chip-cluster {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}
.kx-acct-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink); font-size: 12px; font-weight: 500;
    text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.kx-acct-chip:hover { color: var(--brand); border-color: var(--brand); }
.kx-acct-chip i { color: var(--ink-3); }
.kx-acct-chip:hover i { color: var(--brand); }
.kx-acct-chip-more { color: var(--ink-3); cursor: default; }

/* Tool grid (favorites / recently / unlocked) */
.kx-acct-tool-grid {
    padding: 16px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (max-width: 600px) { .kx-acct-tool-grid { grid-template-columns: 1fr; } }
.kx-acct-tool-tile {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: background .12s var(--ease);
}
.kx-acct-tool-tile:hover { background: var(--surface-2); }
.kx-acct-tool-tile .ic {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--ic-bg, var(--surface-2));
    color: var(--ic-fg, var(--ink-2));
    border-radius: 9px; font-size: 15px;
    flex-shrink: 0;
}
.kx-acct-tool-tile .meta { flex: 1; min-width: 0; }
.kx-acct-tool-tile .name {
    display: block; font-weight: 600; font-size: 13px; line-height: 1.25;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-acct-tool-tile .cat {
    display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kx-acct-tool-tile .trail {
    color: var(--ink-3); font-size: 14px;
    transition: color .12s var(--ease), transform .15s var(--ease);
}
.kx-acct-tool-tile:hover .trail { color: var(--brand); transform: translateX(2px); }
.kx-acct-tool-tile.is-fav .trail { color: #E13862; }

/* Past subscription history */
.kx-acct-history { list-style: none; padding: 0; margin: 0; }
.kx-acct-history-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 22px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
}
.kx-acct-history-row:first-child { border-top: 0; }
.kx-acct-history-row strong { color: var(--ink); font-weight: 600; }
.kx-acct-history-dates { color: var(--ink-3); margin-left: 8px; }
.kx-acct-status-past {
    padding: 3px 10px; background: var(--surface-2); color: var(--ink-3);
    border-radius: 999px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}

/* ─── Search page ─────────────────────────── */
.kx-search-header-form {
    margin-top: 20px;
    max-width: 720px;
}
.kx-search-chips {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto;
    padding: 16px 0 4px;
    scrollbar-width: thin;
}
.kx-search-chips::-webkit-scrollbar { height: 6px; }
.kx-search-chips::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.kx-search-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink-2); font-size: 13px; font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.kx-search-chip:hover {
    color: var(--ink); border-color: var(--hairline-strong);
}
.kx-search-chip.is-active {
    background: var(--brand); color: #fff; border-color: var(--brand);
}
.kx-search-chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px; padding: 0 6px;
    background: var(--surface-2); color: var(--ink-3);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kx-search-chip.is-active .kx-search-chip-count {
    background: rgba(255,255,255,.25); color: #fff;
}

.kx-search-empty {
    text-align: center; padding: 56px 24px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    max-width: 640px; margin: 0 auto;
}
.kx-search-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 50%; font-size: 28px;
}
.kx-search-empty h2 {
    margin: 0 0 8px;
    font-weight: 700; font-size: 22px; line-height: 1.25;
    letter-spacing: -.02em; color: var(--ink);
}
.kx-search-empty p {
    margin: 0 auto 22px; max-width: 440px;
    color: var(--ink-2); font-size: 15px; line-height: 1.55;
}
.kx-search-empty-tags {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin-top: 22px;
}
.kx-search-empty-tags-label {
    width: 100%; margin-bottom: 4px;
    font-size: 12px; color: var(--ink-3);
    letter-spacing: .08em; text-transform: uppercase;
}

.kx-search-group {
    margin-bottom: 36px;
}
.kx-search-group:last-child { margin-bottom: 0; }
.kx-search-group-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.kx-search-group-head .title {
    display: flex; align-items: center; gap: 12px;
}
.kx-search-group-head .title h3 {
    margin: 0; font-weight: 700; font-size: 18px; line-height: 1.2;
    letter-spacing: -.02em; color: var(--ink);
}
.kx-search-group-head .title .meta {
    font-size: 12px; color: var(--ink-3);
    margin-top: 2px;
}
.kx-search-group-head .ic-mini {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--ic-bg); color: var(--ic-fg);
    border-radius: 8px; font-size: 14px;
}

/* ─── Tool detail page (v2 redesign) ──────── */
.kx-tool-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Compact header */
.kx-tool-topbar {
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
}
.kx-tool-topbar-inner {
    max-width: 960px; margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.kx-tool-topbar .kx-tool-breadcrumb { margin: 0; }
.kx-tool-topbar-actions {
    display: flex; align-items: center; gap: 6px;
}

/* Big form card with integrated header */
.kx-tool-shell-card {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    position: relative;
}
.kx-tool-shell-card-head {
    position: relative;
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, var(--cover-bg, var(--bg-2)) 0%, var(--surface) 100%);
    overflow: hidden;
}
.kx-tool-shell-card-head::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 100% at 0% 0%, color-mix(in srgb, var(--ic-fg, #1F5BFF) 8%, transparent) 0%, transparent 70%);
}
.kx-tool-shell-card-head > * { position: relative; }
.kx-tool-card-headline {
    display: flex; align-items: flex-start; gap: 16px;
}
.kx-tool-card-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--surface);
    color: var(--ic-fg);
    border: 1px solid var(--hairline);
    border-radius: 14px; font-size: 26px;
    flex-shrink: 0;
    box-shadow: var(--shadow-1);
}
.kx-tool-card-titles { flex: 1; min-width: 0; }
.kx-tool-card-h1 {
    margin: 0 0 6px;
    font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-tool-card-desc {
    margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55;
    max-width: 640px;
}
.kx-tool-card-meta {
    display: flex; align-items: center; gap: 14px; margin-top: 12px;
    flex-wrap: wrap;
    font-size: 12px; color: var(--ink-3);
}
.kx-tool-card-meta .stars { color: #E0A82E; letter-spacing: 1px; font-size: 13px; }
.kx-tool-card-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-tool-card-meta .dot { opacity: .4; }
.kx-tool-card-meta .pill {
    padding: 3px 9px; background: var(--surface-2);
    border: 1px solid var(--hairline); border-radius: 999px;
    font-size: 11px; color: var(--ink-2); font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px;
}

.kx-tool-shell-card-body { padding: 28px 32px; }
@media (max-width: 600px) {
    .kx-tool-shell-card-head { padding: 22px; }
    .kx-tool-shell-card-body { padding: 22px; }
}

.kx-tool-shell-card-result {
    border-top: 1px solid var(--hairline);
    padding: 24px 32px 28px;
    background: var(--surface-2);
}
@media (max-width: 600px) { .kx-tool-shell-card-result { padding: 22px; } }
.kx-tool-shell-card-result-title {
    font-weight: 700; font-size: 13px; line-height: 1;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand); margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.kx-tool-shell-card-result-title::before {
    content: ''; width: 14px; height: 2px; background: var(--brand);
}

.kx-tool-fav-icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    cursor: pointer; color: var(--ink-2);
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
    font-family: inherit;
}
.kx-tool-fav-icon-btn:hover { color: var(--ink); border-color: var(--hairline-strong); }
.kx-tool-fav-icon-btn.is-saved { color: #E13862; border-color: #E13862; background: #FCE5EC; }
.kx-tool-fav-icon-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
[data-theme="dark"] .kx-tool-fav-icon-btn.is-saved { background: #2C1822; color: #FF8AA9; border-color: #4A1F2E; }

/* Tabs */
.kx-tabs {
    margin-top: 48px;
    border-bottom: 1px solid var(--hairline);
    display: flex; gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.kx-tabs::-webkit-scrollbar { display: none; }
.kx-tab {
    background: transparent; border: 0; cursor: pointer;
    padding: 12px 16px;
    font-family: inherit;
    font-weight: 500; font-size: 14px; color: var(--ink-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s var(--ease), border-color .15s var(--ease);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.kx-tab:hover { color: var(--ink-2); }
.kx-tab[aria-selected="true"] {
    color: var(--brand); border-bottom-color: var(--brand);
}
.kx-tab .count {
    padding: 2px 7px; background: var(--surface-2);
    border-radius: 999px; font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kx-tab[aria-selected="true"] .count { background: var(--brand-soft); color: var(--brand); }

.kx-tab-panel { padding: 32px 0; display: none; }
.kx-tab-panel[data-active] { display: block; }

/* Related row (bottom) */
.kx-related-row {
    margin-top: 32px;
    border-top: 1px solid var(--hairline);
    padding-top: 32px;
}

/* ─── Dark-mode patches for legacy result classes injected by tool.js ──
   tool.js renders results as .st-stat-card / .st-result-copyable / .st-copy-bar
   etc., styled in app.css for light mode only. Override in dark mode so the
   result panels don't appear with white backgrounds inside dark surfaces. */
[data-theme="dark"] .st-stat-card {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
}
[data-theme="dark"] .st-stat-value {
    color: var(--ink) !important;
}
[data-theme="dark"] .st-stat-label {
    color: var(--ink-3);
}
[data-theme="dark"] .st-result-copyable {
    background: var(--surface) !important;
    border-color: var(--hairline) !important;
    color: var(--ink);
}
[data-theme="dark"] .st-copy-label {
    color: var(--ink-3);
}
[data-theme="dark"] .st-copy-bar {
    color: var(--ink-2);
}
[data-theme="dark"] .st-copy-btn {
    background: var(--brand-soft) !important;
    color: #B6CCFF !important;
    border-color: color-mix(in srgb, var(--brand) 35%, transparent) !important;
}
[data-theme="dark"] .st-copy-btn:hover {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}
[data-theme="dark"] .st-submit-btn {
    background: var(--brand);
    color: #fff;
}
[data-theme="dark"] .st-submit-btn:hover {
    background: var(--brand-ink);
}
/* Bulk-result table in dark */
[data-theme="dark"] .bulk-summary-item,
[data-theme="dark"] .bulk-result-table,
[data-theme="dark"] .bulk-result-table th,
[data-theme="dark"] .bulk-result-table td {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--hairline) !important;
}
/* Demo / info / error notice strips that tool.js may inject via Bootstrap classes */
[data-theme="dark"] #result-content .alert-info {
    background: var(--brand-soft);
    color: #B6CCFF;
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}
[data-theme="dark"] #result-content .alert-danger {
    background: #361915;
    color: #F08070;
    border-color: #5A2A23;
}
[data-theme="dark"] #result-content .alert-success {
    background: #142E1D;
    color: #6BD18B;
    border-color: #235838;
}

/* ─── Tool detail page (legacy v1 - still used elsewhere) ── */
.kx-tool-header {
    background: var(--bg-2);
    border-bottom: 1px solid var(--hairline);
    padding: 28px 0 32px;
}
.kx-tool-breadcrumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 13px; color: var(--ink-3);
}
.kx-tool-breadcrumb a {
    color: var(--ink-3); text-decoration: none; transition: color .15s var(--ease);
}
.kx-tool-breadcrumb a:hover { color: var(--brand); }
.kx-tool-breadcrumb .sep { color: var(--ink-3); opacity: .5; }
.kx-tool-breadcrumb .current { color: var(--ink-2); font-weight: 500; }

.kx-tool-headline {
    display: flex; align-items: flex-start; gap: 18px;
}
.kx-tool-icon-lg {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--ic-bg, var(--surface-2));
    color: var(--ic-fg, var(--ink-2));
    border-radius: 14px; font-size: 26px;
    flex-shrink: 0;
}
.kx-tool-title-block { flex: 1; min-width: 0; }
.kx-tool-h1 {
    margin: 0 0 6px;
    font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15;
    letter-spacing: -.025em; color: var(--ink);
}
.kx-tool-desc {
    margin: 0 0 12px;
    color: var(--ink-2); font-size: 15px; line-height: 1.55;
    max-width: 720px;
}
.kx-tool-stats {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    color: var(--ink-3); font-size: 13px;
}
.kx-tool-stats .stars { color: #E0A82E; letter-spacing: 1px; }
.kx-tool-stats b { color: var(--ink); font-weight: 600; }
.kx-tool-stat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 12px; color: var(--ink-2); font-weight: 500;
}

.kx-fav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 10px;
    color: var(--ink-2);
    font-weight: 500; font-size: 14px;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
    flex-shrink: 0;
}
.kx-fav-btn:hover { color: var(--ink); border-color: var(--ink); }
.kx-fav-btn.is-saved { color: #E13862; border-color: #E13862; background: #FCE5EC; }
.kx-fav-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
[data-theme="dark"] .kx-fav-btn.is-saved { background: #2C1822; color: #FF8AA9; border-color: #4A1F2E; }

/* ─── Tool layout (form + sidebar) ────────── */
.kx-tool-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    padding: 32px 0;
}
@media (max-width: 1000px) {
    .kx-tool-layout { grid-template-columns: 1fr; }
}

.kx-tool-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.kx-tool-card-body { padding: 28px; }
.kx-result-divider {
    height: 1px; background: var(--hairline);
    margin: 0 28px;
}
.kx-result-title {
    font-weight: 700; font-size: 15px; color: var(--ink);
    letter-spacing: -.01em;
    margin-bottom: 14px;
}
.kx-tool-premium-banner {
    background: var(--brand-soft);
    color: var(--brand-ink);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
[data-theme="dark"] .kx-tool-premium-banner { color: #B6CCFF; }

/* ─── Sidebar cards ───────────────────────── */
.kx-sidebar-stack {
    display: flex; flex-direction: column; gap: 16px;
}
.kx-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.kx-sidebar-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px;
    font-weight: 600; font-size: 13px;
    color: var(--ink); letter-spacing: -.005em;
    border-bottom: 1px solid var(--hairline);
}
.kx-sidebar-header i { color: var(--brand); }
.kx-sidebar-list {
    list-style: none; padding: 8px; margin: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.kx-sidebar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--ink-2); font-size: 14px; line-height: 1.3;
    text-decoration: none;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.kx-sidebar-item:hover { background: var(--surface-2); color: var(--ink); }
.kx-sidebar-item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.kx-sidebar-item i {
    width: 20px; text-align: center; flex-shrink: 0;
    color: var(--ink-3); font-size: 14px;
}
.kx-sidebar-item:hover i { color: var(--ink-2); }
.kx-sidebar-item.is-active i { color: var(--brand); }

/* ─── Prose (about section) ───────────────── */
.kx-prose-section { padding: 32px 0; }
.kx-prose-section h2 {
    font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2;
    letter-spacing: -.025em; margin: 0 0 16px; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.kx-prose-section h2 i { color: var(--brand); font-size: .85em; }
.kx-prose {
    color: var(--ink-2); font-size: 16px; line-height: 1.7;
    max-width: 800px;
}
.kx-prose h2, .kx-prose h3, .kx-prose h4 {
    color: var(--ink); margin: 1.6em 0 .6em;
    font-weight: 700; letter-spacing: -.02em;
}
.kx-prose h2 { font-size: 22px; }
.kx-prose h3 { font-size: 18px; }
.kx-prose h4 { font-size: 16px; }
.kx-prose p, .kx-prose ul, .kx-prose ol { margin: 0 0 1em; }
.kx-prose ul, .kx-prose ol { padding-left: 1.4em; }
.kx-prose li { margin-bottom: .35em; }
.kx-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.kx-prose a:hover { color: var(--brand-ink); }
.kx-prose code {
    background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
    font-family: var(--font-mono), monospace; font-size: .9em;
    color: var(--ink);
}
.kx-prose pre {
    background: var(--surface-2); padding: 16px; border-radius: var(--r);
    font-family: var(--font-mono), monospace; font-size: 13px; line-height: 1.55;
    overflow-x: auto;
    border: 1px solid var(--hairline);
}
.kx-prose blockquote {
    margin: 1em 0; padding: 12px 18px;
    background: var(--surface-2); border-left: 3px solid var(--brand);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--ink); font-style: italic;
}

/* ─── Reviews ─────────────────────────────── */
.kx-rev-section { padding: 48px 0; }
.kx-rev-head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.kx-rev-head h2 {
    margin: 0 0 4px; font-weight: 700; font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.15; letter-spacing: -.025em; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.kx-rev-head h2 i { color: #E0A82E; }
.kx-rev-subtle { color: var(--ink-2); font-size: 14px; margin: 0; }

.kx-rev-summary {
    display: grid; grid-template-columns: auto 1px 1fr; gap: 28px;
    align-items: center;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    margin-bottom: 20px;
}
@media (max-width: 700px) {
    .kx-rev-summary { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
    .kx-rev-summary > .divider { display: none; }
}
.kx-rev-summary .divider { width: 1px; height: 56px; background: var(--hairline); }
.kx-rev-summary-num {
    font-weight: 800; font-size: 48px; line-height: 1;
    color: var(--brand); font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}
.kx-rev-summary-stars {
    color: #E0A82E; font-size: 16px; letter-spacing: 2px;
    margin-top: 6px;
}
.kx-rev-summary-count { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.kx-rev-summary-text { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0; }

.kx-rev-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 700px) { .kx-rev-list { grid-template-columns: 1fr; } }

.kx-rev-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column; gap: 14px;
}
.kx-rev-card-mine { border-color: var(--brand); background: var(--brand-soft); }
.kx-rev-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.kx-rev-author {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.kx-rev-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ic-bg, var(--surface-3));
    color: var(--ic-fg, var(--ink-2));
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.kx-rev-name {
    font-weight: 600; font-size: 14px; color: var(--ink);
    display: flex; align-items: center; gap: 6px;
}
.kx-rev-mine-pill {
    padding: 2px 8px; background: var(--brand); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.kx-rev-time { font-size: 12px; color: var(--ink-3); }
.kx-rev-stars { color: #E0A82E; font-size: 13px; letter-spacing: 1px; }
.kx-rev-body { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }

.kx-rev-empty {
    padding: 40px 20px; text-align: center;
    background: var(--surface);
    border: 1px dashed var(--hairline-strong);
    border-radius: var(--r-lg);
}
.kx-rev-empty-icon { font-size: 32px; color: var(--ink-3); margin-bottom: 8px; }
.kx-rev-empty h3 { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.kx-rev-empty p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* ─── Review form ─────────────────────────── */
.kx-rev-form-wrap {
    margin-top: 24px; padding: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}
.kx-rev-form-title {
    margin: 0 0 6px; font-weight: 700; font-size: 18px;
    color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.kx-rev-form-title i { color: var(--brand); }
.kx-rev-form-help { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; }

.kx-rev-field { margin-bottom: 18px; }
.kx-rev-field-label {
    display: block; font-weight: 600; font-size: 14px; color: var(--ink);
    margin-bottom: 8px; padding: 0;
}
.kx-rev-required { color: #C8331C; }
.kx-rev-optional { color: var(--ink-3); font-weight: 400; }

/* Star input - flexbox row-reverse so :checked + sibling lights all to the left */
.kx-rev-rating-row { display: flex; align-items: center; gap: 12px; }
.kx-rev-stars-input {
    display: inline-flex; flex-direction: row-reverse;
}
.kx-rev-star-input { position: absolute; opacity: 0; pointer-events: none; }
.kx-rev-star-label {
    cursor: pointer; padding: 4px 2px;
    color: var(--ink-3); font-size: 22px;
    transition: color .15s var(--ease), transform .12s var(--ease);
}
.kx-rev-star-label:hover { transform: scale(1.1); }
.kx-rev-star-input:checked ~ .kx-rev-star-label,
.kx-rev-star-label:hover,
.kx-rev-star-label:hover ~ .kx-rev-star-label { color: #E0A82E; }
.kx-rev-rating-hint {
    font-size: 13px; color: var(--ink-2); font-weight: 500;
    min-width: 80px;
}

.kx-rev-textarea {
    width: 100%; min-height: 110px;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body), sans-serif; font-size: 14px; line-height: 1.55;
    border: 1px solid var(--hairline-strong);
    border-radius: 10px; resize: vertical;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.kx-rev-textarea:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.kx-rev-counter {
    display: block; text-align: right; font-size: 12px; color: var(--ink-3);
    margin-top: 6px;
}
.kx-rev-submit {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; font-weight: 600; font-size: 14px;
    background: var(--brand); color: #fff;
    border: 0; border-radius: 10px; cursor: pointer;
    transition: background .15s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
}
.kx-rev-submit:hover { background: var(--brand-ink); transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--brand); }

.kx-rev-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--brand-soft); color: var(--brand);
    text-decoration: none; font-weight: 600; font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
    transition: background .15s var(--ease);
}
.kx-rev-cta:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 20%); color: var(--brand); }

/* ─── Back to top button ─────────────────── */
.kx-back-to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--ink); color: var(--bg);
    border: 0; border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), background .15s var(--ease);
}
.kx-back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.kx-back-to-top:hover { background: var(--brand); color: #fff; }

/* ─── Utility ─────────────────────────────── */
.kx-vh {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
    .kx-hero { padding: 56px 0 40px; }
    .kx-section { padding: 56px 0; }
}

/* ─── All-Tools Directory page ───────────────────────────────── */
.kx-alltools-bar {
    position: sticky; top: 64px; z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 16px 0;
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
[data-theme="dark"] .kx-alltools-bar { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.kx-alltools-controls {
    display: flex; gap: 12px; align-items: center;
}
.kx-alltools-search {
    position: relative; flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center;
}
.kx-alltools-search > .bi-search {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); pointer-events: none; font-size: 15px;
}
.kx-alltools-search input {
    width: 100%; height: 40px;
    padding: 0 40px 0 38px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.kx-alltools-search input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.kx-alltools-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 6px;
    border: none; background: transparent;
    color: var(--ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.kx-alltools-clear:hover { background: var(--bg-2); color: var(--ink); }

.kx-alltools-count {
    font-size: 13px; color: var(--ink-2); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kx-alltools-count > span { font-weight: 600; color: var(--ink); }

/* Jump-to-category dropdown */
.kx-alltools-jump-wrap { position: relative; flex-shrink: 0; }
.kx-alltools-jump-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.kx-alltools-jump-btn:hover { border-color: var(--hairline-strong); background: var(--bg-2); }
.kx-alltools-jump-btn[aria-expanded="true"] { border-color: var(--brand); }
.kx-alltools-jump-caret { font-size: 12px; transition: transform .15s; }
.kx-alltools-jump-btn[aria-expanded="true"] .kx-alltools-jump-caret { transform: rotate(180deg); }

.kx-alltools-jump-panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 520px; max-width: calc(100vw - 32px);
    max-height: min(70vh, 480px);
    overflow-y: auto; overflow-x: hidden;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,.18), 0 4px 8px -2px rgba(0,0,0,.06);
    padding: 6px;
    z-index: 50;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
}
.kx-alltools-jump-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--ink); text-decoration: none;
    font-size: 13px; line-height: 1.2;
    transition: background .12s;
}
.kx-alltools-jump-item:hover { background: var(--bg-2); color: var(--ink); }
.kx-alltools-jump-ic {
    width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.kx-alltools-jump-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-alltools-jump-count {
    font-size: 11px; font-weight: 600; color: var(--ink-2);
    background: var(--bg-2); padding: 2px 7px; border-radius: 999px;
    flex-shrink: 0;
}

.kx-alltools-section { padding: 56px 0; scroll-margin-top: 130px; }
.kx-alltools-cat-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 12px; line-height: 1;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 14px;
}
.kx-alltools-cat-ic {
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.kx-alltools-cat-count {
    font-weight: 500; color: var(--ink-2); font-size: 0.6em;
    letter-spacing: 0;
}
.kx-alltools-match-badge {
    font-size: 0.5em; font-weight: 500; color: var(--brand);
    letter-spacing: 0; text-transform: none;
}

.kx-tool-badge-mini {
    margin-left: 6px; font-size: 9px; padding: 2px 6px;
}

.kx-btn-link {
    background: none; border: none; padding: 0;
    color: var(--brand); cursor: pointer;
    text-decoration: underline; font: inherit;
}
.kx-btn-link:hover { color: var(--brand-strong); }

@media (max-width: 700px) {
    .kx-alltools-bar { top: 56px; padding: 8px 0; }
    .kx-alltools-controls { gap: 8px; }
    .kx-alltools-jump-btn span { display: none; }
    .kx-alltools-jump-btn { padding: 0 10px; }
    .kx-alltools-jump-panel { min-width: 280px; right: -8px; grid-template-columns: 1fr; }
    .kx-alltools-section { padding: 40px 0; scroll-margin-top: 110px; }
}