@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#ffffff; --fg:#1d1d1f; --border:#d2d2d7; --border-light:#e8e8ed;
  --muted:#515154; --muted-light:#6e6e73; --surface:#f5f5f7; --surface-2:#ececef;
  --accent:#5b1fb0; --accent-2:#8842fd; --accent-soft:rgba(91,31,176,.08); --accent-soft-2:rgba(91,31,176,.14);
  --purple:#8842fd; --purple-dark:#5b1fb0; --blue:#0071e3; --lime:#5fae2e; --orange:#c96a1a;
  --magenta:#c23bd6; --mint:#0f8f74; --yellow:#a3820a; --radius:1rem; --radius-sm:0.65rem;
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04);
  --shadow-2:0 4px 10px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.08);
  --font-sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
}

/* ---- Reset site chrome to a light, high-contrast Apple-style theme ---- */
body, .site, #page{ background:var(--bg)!important; color:var(--fg)!important; font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
body, p, li, span, a, div, td, th, button, input, select{ font-family:var(--font-sans); }
h1,h2,h3,h4{ font-family:var(--font-sans); color:var(--fg); letter-spacing:-0.015em; font-weight:700; }
* { box-sizing:border-box; }
a{ transition:color .15s ease; }

#masthead, .site-header, header.site-header, .main-header{
  background:rgba(255,255,255,.82)!important; border-bottom:1px solid var(--border-light); position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
}
.site-header a, #masthead a{ color:var(--fg)!important; font-size:13px; font-weight:500; letter-spacing:-0.005em; }
.wp-block-navigation__responsive-container-content .wp-block-navigation-item a:hover,
.site-header a:hover{ color:var(--accent)!important; }
.site-header .custom-logo, #masthead .custom-logo{ max-height:26px; width:auto; }

/* ---- Real header (theme's own fixed bar) — compact it and stop it burying page titles ---- */
body:not(.admin-bar) .hostinger-ai-menu{ top:0!important; }
.hostinger-ai-menu-wrapper{ padding-top:12px!important; padding-bottom:12px!important; }
.hostinger-ai-site-title{ display:none!important; }
.wp-block-site-logo img, .custom-logo{ max-height:42px!important; width:auto; }
main{ padding-top:96px!important; }
@media (max-width:600px){ main{ padding-top:88px!important; } }

a.auth-cta, .wp-block-button__link{
  background:var(--fg)!important; color:#fff!important; border:none!important;
  font-weight:500; border-radius:980px!important; padding:11px 22px!important; font-size:14px!important;
  transition:background .2s ease, transform .2s ease;
}
a.auth-cta:hover, .wp-block-button__link:hover{ background:var(--accent)!important; }
a.auth-cta:active, .wp-block-button__link:active{ transform:scale(.97); }

footer, .site-footer, #colophon{ background:var(--surface)!important; border-top:1px solid var(--border-light); color:var(--muted)!important; }
footer a, .site-footer a, #colophon a{ color:var(--fg)!important; }

/* ---- Layout helpers ---- */
.auth-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.auth-section{ padding:64px 0; border-bottom:1px solid var(--border-light); }
.auth-section-label{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:28px; }
.auth-section-title{ font-size:28px; font-weight:700; display:flex; align-items:center; gap:11px; margin:0 0 8px; letter-spacing:-0.02em; }
.auth-section-title .auth-swatch{ width:13px; height:13px; flex-shrink:0; border-radius:50%; }
.auth-section-sub{ font-size:14px; color:var(--muted); margin:0 0 28px; line-height:1.5; max-width:64ch; }

/* ---- Hero ---- */
.auth-hero{ padding:64px 0 48px; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.auth-hero h1{ font-size:clamp(2.6rem,5vw,4.6rem); line-height:1.05; margin:0 0 18px; font-weight:700; }
.auth-hero p{ font-size:19px; color:var(--muted); max-width:38ch; margin:0; line-height:1.45; }
.auth-hero-updates a{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; border-bottom:1px solid var(--border-light); padding:16px 4px; text-decoration:none; border-radius:var(--radius-sm); transition:background .2s ease; }
.auth-hero-updates a:hover{ background:var(--surface); }
.auth-hero-updates a:last-child{ border-bottom:none; }
.auth-hero-updates .tag{ text-transform:uppercase; font-size:11px; color:var(--accent); font-weight:700; letter-spacing:.03em; display:block; margin-bottom:5px; }
.auth-hero-updates .title{ font-size:15px; color:var(--fg); font-weight:600; margin:0 0 4px; }
.auth-hero-updates .desc{ font-size:13px; color:var(--muted); line-height:1.45; margin:0; }
.auth-hero-updates .arrow{ width:32px; height:32px; border-radius:50%; background:var(--surface); color:var(--fg); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; transition:background .2s ease, color .2s ease; }
.auth-hero-updates a:hover .arrow{ background:var(--accent); color:#fff; }
@media (max-width:820px){ .auth-hero{ grid-template-columns:1fr; } }

/* ---- Highlight cards (3-col, ranked mini bar-chart) ---- */
.auth-highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .auth-highlights{ grid-template-columns:1fr; } }
.auth-hl-card{ background:var(--surface); border-radius:var(--radius); padding:22px; position:relative; }
.auth-hl-card .auth-badge{ position:absolute; top:18px; right:18px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; }
.auth-hl-card h3{ font-size:18px; font-weight:700; margin:0; }
.auth-hl-card h3 a{ color:var(--fg); text-decoration:none; }
.auth-hl-card h3 a:hover{ color:var(--accent); }
.auth-hl-card .top{ display:flex; align-items:baseline; gap:9px; margin-bottom:12px; }
.auth-hl-card .top .sw{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.auth-hl-card .cap{ font-size:12px; color:var(--muted); margin-bottom:16px; line-height:1.45; }

/* ---- Ranked bar list (used in Highlights + big Intelligence section) ---- */
.auth-rank-list{ display:flex; flex-direction:column; gap:6px; }
.auth-rank-row{ display:grid; grid-template-columns:22px 20px 1fr auto; align-items:center; gap:10px; text-decoration:none; color:var(--fg); padding:5px 6px; border-radius:8px; transition:background .15s ease; }
.auth-rank-row:hover{ background:var(--surface); }
.auth-rank-row .rnum{ font-size:12px; color:var(--muted-light); text-align:right; font-weight:600; }
.auth-rank-row .rlogo{ width:18px; height:18px; border-radius:5px; object-fit:contain; background:var(--surface-2); }
.auth-rank-row .rbarwrap{ position:relative; height:24px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
.auth-rank-row .rbar{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; opacity:.9; }
.auth-rank-row .rlabel{ position:absolute; left:9px; top:0; bottom:0; display:flex; align-items:center; font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; z-index:2; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.auth-rank-row .rval{ font-size:12.5px; font-weight:700; min-width:42px; text-align:right; color:var(--fg); }
.auth-rank-row:hover .rlabel{ text-decoration:underline; }

/* ---- Big leaderboard section ---- */
.auth-leaderboard-wrap{ background:var(--surface); border-radius:var(--radius); padding:28px; }
.auth-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.auth-filter-btn{ border:1px solid var(--border); background:var(--bg); color:var(--fg); font-size:13px; font-weight:500; padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.auth-filter-btn.active, .auth-filter-btn:hover{ background:var(--fg); color:#fff; border-color:var(--fg); }
.auth-input{ background:var(--bg); border:1px solid var(--border); color:var(--fg); padding:11px 16px; border-radius:10px; font-size:14px; }
.auth-input::placeholder{ color:var(--muted-light); }
.auth-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---- Directory table (models / tools) ---- */
.auth-directory{ margin:0; }
.auth-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.auth-lb-table{ width:100%; border-collapse:collapse; font-size:14px; }
.auth-lb-table thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:11px 12px; border-bottom:2px solid var(--border); white-space:nowrap; }
.auth-lb-table tbody td{ padding:14px 12px; border-bottom:1px solid var(--border-light); vertical-align:middle; color:var(--fg); }
.auth-lb-table tbody tr:hover{ background:var(--bg); }
.auth-lb-rank{ color:var(--muted-light); font-size:13px; font-weight:600; width:28px; }
.auth-lb-model{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); font-weight:600; }
.auth-lb-model:hover{ color:var(--accent); }
.auth-lb-model img, .auth-lb-model .fallback{ width:22px; height:22px; border-radius:6px; object-fit:contain; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.auth-lb-dev{ color:var(--muted); font-size:13px; font-weight:500; }
.auth-pill{ display:inline-block; font-size:11px; font-weight:600; padding:2px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.auth-pill-os{ background:#e3f5ee; border-color:#e3f5ee; color:#00694f; }
.auth-empty{ color:var(--muted); text-align:center; padding:48px; font-size:15px; }

/* ---- Cards (tools / models / recommender grid) ---- */
.auth-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.auth-card{ display:block; background:var(--bg); border:1px solid var(--border-light); border-radius:var(--radius); padding:22px; text-decoration:none; color:var(--fg); box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.auth-card:hover{ border-color:var(--border-light); box-shadow:var(--shadow-2); transform:translateY(-2px); color:var(--fg); }
.auth-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.auth-card-logo{ width:38px; height:38px; border-radius:10px; object-fit:contain; background:var(--surface-2); }
.auth-card-logo-fallback{ display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; background:var(--surface-2); color:var(--fg); }
.auth-badge-rating{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--fg); }
.auth-card h3{ margin:0 0 4px; font-size:17px; font-weight:700; }
.auth-card-dev{ color:var(--muted); font-size:12.5px; margin:0 0 8px; font-weight:500; }
.auth-card-excerpt{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 14px; }
.auth-card-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.auth-tag{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.auth-tag-ghost{ background:transparent; color:var(--muted); border:1px solid var(--border); font-weight:500; }

/* ---- Spec sheet (single model/tool) ---- */
.auth-spec-sheet{ background:var(--surface); border-radius:var(--radius); padding:28px; margin-bottom:32px; }
.auth-spec-sheet h2{ margin-top:0; font-size:20px; font-weight:700; }
.auth-spec-table{ width:100%; border-collapse:collapse; }
.auth-spec-table tr{ border-bottom:1px solid var(--border-light); }
.auth-spec-table tr:last-child{ border-bottom:none; }
.auth-spec-table th{ text-align:left; padding:12px 14px 12px 0; color:var(--muted); font-weight:500; width:45%; font-size:13.5px; }
.auth-spec-table td{ padding:12px 0; font-weight:600; font-size:14.5px; color:var(--fg); }

/* ---- Comparator ---- */
.auth-comparator{ margin:0; }
.auth-comp-pickers{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.auth-comp-pickers select{ background:var(--bg); border:1px solid var(--border); color:var(--fg); padding:10px 16px; border-radius:10px; min-width:200px; font-size:14px; }
.auth-comp-table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border-light); }
.auth-comp-table{ width:100%; border-collapse:collapse; background:var(--bg); font-size:14px; }
.auth-comp-table th, .auth-comp-table td{ padding:13px 18px; border-bottom:1px solid var(--border-light); text-align:left; white-space:nowrap; color:var(--fg); }
.auth-comp-table thead th{ background:var(--surface); position:sticky; top:0; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.auth-comp-table th.auth-comp-rowlabel{ color:var(--muted); font-weight:500; position:sticky; left:0; background:var(--bg); font-size:13px; }
.auth-comp-table .auth-comp-model-name{ font-weight:700; font-size:15px; color:var(--fg); }

/* ---- Scatter chart ---- */
.auth-scatter{ position:relative; background:var(--surface); border-radius:var(--radius); padding:16px; }
.auth-scatter svg{ width:100%; height:auto; display:block; }
.auth-scatter-tooltip{ position:absolute; transform:translate(-50%,-120%); background:var(--fg); color:#fff; font-size:12.5px; font-weight:500; padding:9px 13px; border-radius:10px; pointer-events:none; opacity:0; transition:opacity .1s; white-space:nowrap; z-index:5; box-shadow:var(--shadow-2); }

/* ---- Logo strip ---- */
.auth-logo-strip{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; padding:24px 0; }
.auth-logo-strip span{ font-size:14px; color:var(--muted); font-weight:500; }

/* ---- News feed (featured + list, magazine style) ---- */
.auth-news-feed{ display:flex; flex-direction:column; gap:28px; }
.auth-news-featured{ display:grid; grid-template-columns:1fr; gap:16px; background:var(--fg); border-radius:var(--radius); padding:36px; text-decoration:none; color:#fff; position:relative; overflow:hidden; transition:transform .2s ease; }
.auth-news-featured:hover{ transform:translateY(-2px); }
.auth-news-featured::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(136,66,253,.45), transparent 60%); }
.auth-news-featured .auth-news-kicker{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#c9a8ff; }
.auth-news-featured h3{ position:relative; z-index:1; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; line-height:1.15; margin:0; color:#fff; max-width:32ch; }
.auth-news-featured p{ position:relative; z-index:1; font-size:15px; color:rgba(255,255,255,.78); line-height:1.55; margin:0; max-width:60ch; }
.auth-news-featured .auth-news-meta{ position:relative; z-index:1; font-size:12.5px; color:rgba(255,255,255,.6); font-weight:500; }

.auth-news-list{ display:flex; flex-direction:column; }
.auth-news-row{ display:flex; align-items:flex-start; gap:16px; padding:20px 4px; border-bottom:1px solid var(--border-light); text-decoration:none; color:var(--fg); border-radius:var(--radius-sm); transition:background .2s ease; }
.auth-news-row:last-child{ border-bottom:none; }
.auth-news-row:hover{ background:var(--surface); }
.auth-news-row .auth-news-avatar{ width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.auth-news-row .auth-news-body{ flex:1; min-width:0; }
.auth-news-row h3{ font-size:16px; font-weight:600; margin:0 0 6px; line-height:1.4; }
.auth-news-row:hover h3{ color:var(--accent); }
.auth-news-row .auth-news-excerpt{ font-size:13.5px; color:var(--muted); line-height:1.5; margin:0 0 8px; }
.auth-news-row .auth-news-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted-light); font-weight:500; }
.auth-news-row .auth-news-source{ font-weight:700; color:var(--muted); }

@media (max-width:640px){
  .auth-news-featured{ padding:26px; }
  .auth-news-row{ flex-direction:column; }
}