:root {
--font-display: 'Outfit', sans-serif;
--font-body:'Inter', sans-serif;

/* Dark theme (default) */
--bg:#0d0f14;
--bg-2:#141720;
--bg-3:#1c2030;
--border:#252a38;
--border-2:#2e3548;
--text:#e8eaf0;
--text-muted:#8892aa;
--text-subtle: #5a6278;
--accent:#5b6af8;
--accent-2:#7c8dff;
--accent-glow: rgba(91,106,248,0.25);
--green: #22c97e;
--orange:#f59e0b;
--red: #f43f5e;
--cyan:#22d3ee;
--purple:#a78bfa;
--card-bg: #141720;
--card-shadow: 0 4px 24px rgba(0,0,0,0.45);
--radius:12px;
--radius-sm: 8px;
--radius-xs: 5px;
}
[data-theme="light"] {
--bg:#f4f6fb;
--bg-2:#ffffff;
--bg-3:#edf0f7;
--border:#d8dde8;
--border-2:#c5ccd9;
--text:#1a1e2e;
--text-muted:#5a6278;
--text-subtle: #8892aa;
--accent:#4a57e8;
--accent-2:#6270f5;
--accent-glow: rgba(74,87,232,0.15);
--green: #16a15e;
--orange:#d97706;
--red: #e11d48;
--cyan:#0891b2;
--purple:#7c3aed;
--card-bg: #ffffff;
--card-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════
 RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.65;
min-height: 100vh;
overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════
 NAVBAR
═══════════════════════════════════════════════ */
.navbar {
position: sticky; top: 0; z-index: 1000;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
}
.nav-inner {
max-width: 1300px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; height: 62px;
}
.nav-logo {
font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
color: var(--text); white-space: nowrap;
}
.nav-logo span { color: var(--accent); }
.nav-links {
display: flex; align-items: center; gap: 4px; list-style: none;
flex-wrap: nowrap;
}
.nav-links > li { position: relative; }
.nav-links > li > a, .nav-links > li > button {
display: flex; align-items: center; gap: 5px;
padding: 7px 12px; border-radius: var(--radius-xs);
font-size: .85rem; font-weight: 500; color: var(--text-muted);
background: none; border: none; cursor: pointer;
white-space: nowrap; transition: background .15s, color .15s;
}
.nav-links > li > a:hover, .nav-links > li > button:hover {
background: var(--bg-3); color: var(--text); text-decoration: none;
}
.nav-links > li > button svg { transition: transform .2s; }
.nav-links > li.open > button svg { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
position: absolute; top: calc(100% + 6px); left: 0;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--card-shadow);
min-width: 240px; padding: 6px;
display: none; flex-direction: column; gap: 2px;
z-index: 999;
}
.nav-links > li.open .nav-dropdown { display: flex; }
.nav-dropdown a {
padding: 8px 12px; border-radius: var(--radius-xs);
font-size: .83rem; color: var(--text-muted);
display: block; white-space: nowrap;
transition: background .12s, color .12s;
}
.nav-dropdown a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }

.nav-right { display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.theme-btn {
width: 38px; height: 38px; border-radius: 50%;
background: var(--bg-3); border: 1px solid var(--border);
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--text-muted); transition: background .15s, color .15s;
flex-shrink: 0;
}
.theme-btn:hover { background: var(--border); color: var(--text); }

/* Hamburger */
.hamburger {
display: none; flex-direction: column; gap: 5px; cursor: pointer;
background: none; border: none; padding: 6px;
}
.hamburger span {
width: 22px; height: 2px; background: var(--text-muted);
border-radius: 2px; transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
display: none; flex-direction: column;
background: var(--bg-2); border-top: 1px solid var(--border);
padding: 12px 16px 16px; gap: 2px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a, .mobile-nav button {
padding: 9px 12px; border-radius: var(--radius-xs);
font-size: .88rem; color: var(--text-muted); font-weight: 500;
background: none; border: none; cursor: pointer; text-align: left;
display: flex; align-items: center; justify-content: space-between;
width: 100%;
}
.mobile-nav a:hover, .mobile-nav button:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.mobile-section { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.mobile-section-title { font-size: .75rem; color: var(--text-subtle); padding: 4px 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mobile-sub-links { display: none; flex-direction: column; }
.mobile-sub-links.open { display: flex; }
.mobile-sub-links a { padding-left: 24px; font-size: .83rem; }

@media (max-width: 900px) {
.nav-links { display: none; }
.hamburger { display: flex; }
}

/* ═══════════════════════════════════════════════
 BREADCRUMB
═══════════════════════════════════════════════ */
.breadcrumb-wrap {
background: var(--bg-2); border-bottom: 1px solid var(--border);
padding: 9px 0;
}
.breadcrumb {
max-width: 1300px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; gap: 6px;
font-size: .8rem; color: var(--text-subtle);
flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-subtle); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .sep { color: var(--text-subtle); }
.breadcrumb .current { color: var(--text-muted); }

/* ═══════════════════════════════════════════════
 LAYOUT
═══════════════════════════════════════════════ */
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* ═══════════════════════════════════════════════
 COOKIE BANNER
═══════════════════════════════════════════════ */
.cookie-banner {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
background: var(--bg-2); border-top: 1px solid var(--border);
padding: 14px 20px;
display: flex; align-items: center; justify-content: center; gap: 16px;
flex-wrap: wrap; font-size: .84rem; color: var(--text-muted);
}
.cookie-banner.hidden { display: none; }
.cookie-banner a { color: var(--accent); }
.cookie-dismiss {
background: var(--accent); color: #fff;
border: none; border-radius: var(--radius-xs);
padding: 6px 16px; font-size: .82rem; font-weight: 600;
cursor: pointer; white-space: nowrap;
}
.cookie-dismiss:hover { background: var(--accent-2); }

/* ═══════════════════════════════════════════════
 HERO
═══════════════════════════════════════════════ */
.hero {
padding: 72px 0 60px;
background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-glow), transparent 70%);
text-align: center;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 7px;
background: var(--bg-3); border: 1px solid var(--border-2);
border-radius: 100px; padding: 5px 14px;
font-size: .78rem; font-weight: 600; color: var(--accent);
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px;
}
.hero-badge .dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.hero h1 {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.18;
color: var(--text); margin-bottom: 20px;
}
.hero h1 .accent-word { color: var(--accent); }
.hero .hero-sub {
font-size: clamp(.95rem, 2vw, 1.15rem); color: var(--text-muted);
max-width: 600px; margin: 0 auto 40px;
}

/* ═══════════════════════════════════════════════
 TOOL FORM CARD
═══════════════════════════════════════════════ */
.tool-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--card-shadow);
padding: 36px 40px;
max-width: 900px; margin: 0 auto;
}
.tool-card h2 {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
color: var(--text); margin-bottom: 28px;
}

/* Form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
font-size: .82rem; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .05em;
}
.form-group .label-row {
display: flex; align-items: center; gap: 8px;
}
.form-group .badge-label {
font-size: .7rem; padding: 2px 8px; border-radius: 100px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.badge-primary { background: rgba(91,106,248,.18); color: var(--accent); }
.badge-comp{ background: rgba(244,63,94,.15); color: var(--red); }

.form-input {
width: 100%; padding: 11px 14px;
background: var(--bg-3); border: 1.5px solid var(--border);
border-radius: var(--radius-sm); color: var(--text);
font-family: var(--font-body); font-size: .92rem;
transition: border-color .2s, box-shadow .2s;
outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input.error { border-color: var(--red); }
.form-input.valid { border-color: var(--green); }
.field-error { font-size: .78rem; color: var(--red); display: none; }
.field-error.show { display: block; }

.form-options {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-top: 4px;
}
@media (max-width: 640px) { .form-options { grid-template-columns: 1fr; } }

.form-select {
width: 100%; padding: 10px 14px;
background: var(--bg-3); border: 1.5px solid var(--border);
border-radius: var(--radius-sm); color: var(--text);
font-family: var(--font-body); font-size: .9rem;
outline: none; cursor: pointer;
transition: border-color .2s;
}
.form-select:focus { border-color: var(--accent); }

.btn-submit {
margin-top: 24px; width: 100%; padding: 14px;
background: var(--accent); color: #fff;
border: none; border-radius: var(--radius-sm);
font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit:hover:not(:disabled) { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.btn-submit .spinner {
width: 18px; height: 18px;
border: 2.5px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%; animation: spin .7s linear infinite;
display: none;
}
.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-text { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
 RESULTS
═══════════════════════════════════════════════ */
.results-section { padding: 48px 0 64px; }

.results-header {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px; margin-bottom: 32px;
}
.stat-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 18px 20px;
display: flex; flex-direction: column; gap: 4px;
}
.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); font-weight: 600; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--text); }
.stat-card .stat-sub { font-size: .75rem; color: var(--text-muted); }
.stat-card.accent .stat-value { color: var(--accent); }
.stat-card.green.stat-value { color: var(--green); }
.stat-card.orange .stat-value { color: var(--orange); }
.stat-card.purple .stat-value { color: var(--purple); }
.stat-card.red.stat-value { color: var(--red); }

/* ─── New: Match gauge ──────────────────────────────────────────────── */
.match-gauge-wrap {
display: flex; align-items: center; gap: 16px;
padding: 16px 20px;
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 32px;
}
.gauge-bar {
flex: 1; height: 8px; background: var(--bg-3);
border-radius: 4px; overflow: hidden;
}
.gauge-fill {
height: 100%; background: linear-gradient(90deg, var(--red), var(--orange), var(--green));
border-radius: 4px;
transition: width .8s ease;
}
.gauge-label {
font-size: .85rem; font-weight: 600; color: var(--text-muted);
white-space: nowrap;
}
.gauge-label strong { color: var(--text); font-size: 1.1rem; }

/* Meta comparison */
.meta-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-bottom: 32px;
}
@media (max-width: 680px) { .meta-grid { grid-template-columns: 1fr; } }
.meta-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 20px;
}
.meta-card h4 {
font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-subtle); font-weight: 600; margin-bottom: 12px;
}
.meta-card .meta-row { margin-bottom: 10px; }
.meta-card .meta-key { font-size: .75rem; color: var(--text-subtle); margin-bottom: 2px; }
.meta-card .meta-val { font-size: .88rem; color: var(--text); font-weight: 500; word-break: break-word; }
.meta-card .heading-pill {
display: inline-block; background: var(--bg-3); border-radius: 4px;
padding: 2px 8px; font-size: .75rem; color: var(--text-muted); margin: 2px 3px 2px 0;
}

/* ─── New: Comparison summary cards ──────────────────────────────────── */
.compare-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px; margin-bottom: 32px;
}
.summary-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 16px 20px;
display: flex; flex-direction: column; gap: 2px;
}
.summary-card .sc-label { font-size: .72rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.summary-card .sc-value { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text); }
.summary-card .sc-sub { font-size: .78rem; color: var(--text-muted); }

/* Tabs */
.tabs-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tab-nav {
display: flex; border-bottom: 1px solid var(--border);
overflow-x: auto; scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
flex-shrink: 0; padding: 14px 22px;
background: none; border: none; cursor: pointer;
font-family: var(--font-body); font-size: .85rem; font-weight: 600;
color: var(--text-muted); border-bottom: 3px solid transparent;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane { display: none; padding: 24px; }
.tab-pane.active { display: block; }

/* Table */
.kw-table-wrap { overflow-x: auto; }
.kw-table {
width: 100%; border-collapse: collapse; font-size: .88rem;
}
.kw-table th {
text-align: left; padding: 10px 14px;
font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-subtle); background: var(--bg-3);
border-bottom: 1px solid var(--border); white-space: nowrap;
cursor: pointer; user-select: none;
}
.kw-table th:hover { color: var(--text); }
.kw-table th .sort-icon { margin-left: 4px; opacity: .5; }
.kw-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.kw-table tr:last-child td { border-bottom: none; }
.kw-table tr:hover td { background: var(--bg-3); }
.kw-table .kw-text { font-weight: 600; color: var(--text); }
.kw-table .type-pill {
display: inline-block; border-radius: 100px; padding: 2px 9px;
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pill-single{ background: rgba(91,106,248,.15); color: var(--accent); }
.pill-bigram{ background: rgba(34,201,126,.12); color: var(--green); }
.pill-trigram { background: rgba(245,158,11,.12); color: var(--orange); }

.priority-dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 50%; margin-right: 6px;
}
.pri-high { background: var(--red); }
.pri-medium { background: var(--orange); }
.pri-low{ background: var(--text-subtle); }
.pri-high-text { color: var(--red); font-weight: 700; }
.pri-medium-text { color: var(--orange); font-weight: 600; }
.pri-low-text{ color: var(--text-subtle); }

.table-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: .9rem; }

/* Toolbar above table */
.table-toolbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 16px 24px; border-bottom: 1px solid var(--border);
background: var(--bg-3);
}
.table-toolbar input {
flex: 1; min-width: 160px; padding: 8px 12px;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius-xs); color: var(--text); font-size: .88rem; outline: none;
}
.table-toolbar input:focus { border-color: var(--accent); }
.filter-pill {
padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border);
background: var(--bg-2); color: var(--text-muted); font-size: .78rem; font-weight: 600;
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-pill:hover:not(.active) { background: var(--bg-3); border-color: var(--border-2); }
.export-btn {
margin-left: auto; padding: 7px 16px;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: var(--radius-xs); color: var(--text-muted);
font-size: .8rem; font-weight: 600; cursor: pointer;
transition: background .15s, color .15s; white-space: nowrap;
}
.export-btn:hover { background: var(--bg-3); color: var(--text); }

/* ═══════════════════════════════════════════════
 FEATURES SECTION
═══════════════════════════════════════════════ */
.section { padding: 72px 0; }
.section-label {
font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--accent); font-weight: 700; margin-bottom: 12px;
}
.section-title {
font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 14px;
}
.section-sub { font-size: 1rem; color: var(--text-muted); max-width: 540px; }
.section-header { margin-bottom: 48px; }
.text-center { text-align: center; }
.section-header.text-center .section-sub { margin: 0 auto; }

.features-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.feat-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px 26px;
transition: border-color .2s, transform .2s;
}
.feat-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.feat-icon {
width: 46px; height: 46px; border-radius: var(--radius-sm);
background: var(--bg-3); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
font-size: 1.4rem;
}
.feat-card h3 {
font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
color: var(--text); margin-bottom: 8px;
}
.feat-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════
 HOW IT WORKS
═══════════════════════════════════════════════ */
.how-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px; counter-reset: steps;
}
.step-card {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px;
position: relative;
}
.step-num {
font-family: var(--font-display); font-size: 2.8rem; font-weight: 800;
color: var(--border-2); line-height: 1; margin-bottom: 14px;
}
.step-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.step-card p{ font-size: .86rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════
 CONTENT SECTION (SEO paragraph)
═══════════════════════════════════════════════ */
.content-section { padding: 72px 0; background: var(--bg-2); }
.content-inner {
max-width: 900px; margin: 0 auto;
}
.content-inner h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--text); margin-bottom: 20px; }
.content-inner p { font-size: .95rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.8; }
.content-inner p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════
 FAQ
═══════════════════════════════════════════════ */
.faq-section { padding: 72px 0; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--card-bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); overflow: hidden;
}
.faq-q {
width: 100%; padding: 18px 22px; background: none; border: none;
text-align: left; cursor: pointer;
font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--text);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-q svg { flex-shrink: 0; transition: transform .2s; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a {
max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
font-size: .9rem; color: var(--text-muted); line-height: 1.7; padding: 0 22px;
}
.faq-a.open { max-height: 300px; padding: 0 22px 18px; }

/* ═══════════════════════════════════════════════
 CTA
═══════════════════════════════════════════════ */
.cta-section {
padding: 80px 0;
background: radial-gradient(ellipse 60% 70% at 50% 50%, var(--accent-glow), transparent 70%);
text-align: center;
}
.cta-section h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--text); margin-bottom: 14px; }
.cta-section p { font-size: 1rem; color: var(--text-muted); margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
padding: 13px 28px; background: var(--accent); color: #fff;
border-radius: var(--radius-sm); font-weight: 700; font-size: .95rem;
transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-2px); text-decoration: none; color: #fff; }
.btn-outline {
padding: 13px 28px; background: transparent;
border: 1.5px solid var(--border-2); color: var(--text);
border-radius: var(--radius-sm); font-weight: 700; font-size: .95rem;
transition: border-color .2s, background .2s, transform .15s;
}
.btn-outline:hover { border-color: var(--accent); background: var(--accent-glow); transform: translateY(-2px); text-decoration: none; color: var(--text); }

/* ═══════════════════════════════════════════════
 FOOTER
═══════════════════════════════════════════════ */
.footer {
background: var(--bg-2); border-top: 1px solid var(--border);
padding: 56px 0 28px;
}
.footer-grid {
display: grid; grid-template-columns: 2fr repeat(3, 1fr);
gap: 40px; margin-bottom: 48px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.footer-brand h3 span { color: var(--accent); }
.footer-brand p { font-size: .84rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.footer-links-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); font-weight: 700; margin-bottom: 14px; }
.footer-links-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links-col ul li a { font-size: .84rem; color: var(--text-muted); transition: color .15s; }
.footer-links-col ul li a:hover { color: var(--accent); text-decoration: none; }
.footer-bottom {
border-top: 1px solid var(--border); padding-top: 20px;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
font-size: .8rem; color: var(--text-subtle);
}
.footer-bottom a { color: var(--text-subtle); }
.footer-bottom a:hover { color: var(--accent); text-decoration: none; }
.disclaimer {
font-size: .76rem; color: var(--text-subtle); margin-top: 8px; line-height: 1.5;
}

/* ═══════════════════════════════════════════════
 ALERTS
═══════════════════════════════════════════════ */
.alert {
padding: 14px 18px; border-radius: var(--radius-sm);
margin-bottom: 20px; font-size: .88rem; display: flex; align-items: flex-start; gap: 10px;
}
.alert-error { background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.3); color: var(--red); }
.alert-info{ background: rgba(91,106,248,.1); border: 1px solid rgba(91,106,248,.3); color: var(--accent); }
.alert-success { background: rgba(34,201,126,.1); border: 1px solid rgba(34,201,126,.3); color: var(--green); }

/* ═══════════════════════════════════════════════
 UTILITY
═══════════════════════════════════════════════ */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.mt-8{ margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.badge-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 20px; border-radius: 100px;
background: var(--accent); color: #fff;
font-size: .72rem; font-weight: 700; padding: 0 6px; margin-left: 6px;
}
.flex-row { display: flex; align-items: center; }
.gap-8{ gap: 8px; }
.no-results { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.no-results svg { opacity: .3; margin-bottom: 12px; }
.no-results p { font-size: .9rem; }

/* ─── New: Pill for unique badges ────────────────────────────────────── */
.unique-pill {
display: inline-block; border-radius: 100px; padding: 2px 9px;
font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.unique-primary { background: rgba(91,106,248,.15); color: var(--accent); }
.unique-comp{ background: rgba(244,63,94,.15); color: var(--red); }

@media (max-width: 640px) {
.tool-card { padding: 24px 18px; }
.tab-pane{ padding: 16px; }
.table-toolbar { padding: 12px 16px; }
}