/* ==========================================================
   AskNest main stylesheet
   Font: Roboto only. Breakpoints: 1100, 992, 768, 640, 480
   ========================================================== */

:root {
    --navy-950: #040d26;
    --navy-900: #061233;
    --navy-800: #0a1f4d;
    --blue-700: #0f55d6;
    --blue-600: #1a66f2;
    --blue-500: #2f7bff;
    --cyan: #22bfff;
    --ink: #0f1b33;
    --text: #27324b;
    --muted: #6b7a94;
    --line: #e3e9f3;
    --bg: #f5f8fd;
    --card: #ffffff;
    --radius: 14px;
    --font: 'Roboto', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.icon { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 20px; border-radius: 8px; border: 1px solid transparent;
    font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-700); }
.btn-outline { background: #fff; color: var(--blue-600); border-color: var(--blue-600); }
.btn-outline:hover { background: #eef4ff; }
.btn-block { width: 100%; height: 48px; font-size: 15px; }
.btn-pill {
    height: 40px; padding: 0 26px; border-radius: 999px; background: #fff;
    border-color: var(--blue-600); color: var(--blue-600);
}
.btn-pill:hover { background: #eef4ff; }

.icon-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; flex: none;
}
.icon-btn:hover { background: #f1f5fc; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 60; background: #fff;
    border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 66px; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo-mark { display: block; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-size: 24px; font-weight: 700; color: var(--navy-800); letter-spacing: -.2px; }
.logo-text small { font-size: 10px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.logo-light .logo-text strong { color: #fff; }
.logo-light .logo-text small { color: #9db0d4; }

.main-nav { display: flex; align-items: stretch; gap: 30px; margin: 0 0 0 auto; align-self: stretch; }
.main-nav > a {
    display: inline-flex; align-items: center; font-size: 14px; font-weight: 500;
    color: var(--ink); position: relative; padding: 0 2px;
}
.main-nav > a:hover { color: var(--blue-600); }
.main-nav > a.active { color: var(--blue-600); }
.main-nav > a.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--blue-600); border-radius: 3px 3px 0 0;
}
.nav-auth { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-toggle { display: none; }

.search-panel { background: #fff; border-top: 1px solid var(--line); padding: 14px 0; }
.search-panel[hidden] { display: none; }

/* ---------- Search form (shared) ---------- */
.search-form {
    position: relative; display: flex; align-items: stretch; background: #fff;
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 52px;
}
.search-form .search-ico {
    position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center;
    color: #8493ad; pointer-events: none;
}
.search-form input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: 0 14px 0 46px; font-size: 15px; color: var(--ink);
}
.search-form input::placeholder { color: #8d9ab2; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-form button {
    flex: none; width: 58px; border: 0; background: var(--blue-500); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.search-form button:hover { background: var(--blue-600); }
.search-form:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47, 123, 255, .18); }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(900px 420px at 78% 55%, rgba(47, 123, 255, .45), rgba(47, 123, 255, 0) 70%),
        linear-gradient(100deg, var(--navy-950) 0%, var(--navy-900) 38%, #0b2d78 78%, #0e3f9d 100%);
}
.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: 24px; padding-top: 58px; padding-bottom: 54px;
}
.hero h1 {
    font-size: clamp(34px, 5.2vw, 56px); line-height: 1.1; font-weight: 700;
    letter-spacing: -.5px; color: #fff;
}
.hero-accent { color: var(--cyan); }
.hero-sub { margin-top: 18px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .9); max-width: 560px; }
.hero-search { margin-top: 26px; max-width: 610px; border: 0; height: 54px; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.hero-chips span { font-size: 14px; color: rgba(255, 255, 255, .9); margin-right: 2px; }
.hero-chips a {
    padding: 6px 15px; border-radius: 999px; font-size: 13px; color: #fff;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06);
}
.hero-chips a:hover { background: rgba(255, 255, 255, .16); }

.hero-visual { min-width: 0; display: flex; justify-content: center; }
.hero-art { width: 100%; max-width: 560px; height: auto; display: block; }
.hero-art text { font-family: var(--font); }
.ha-note text { fill: #fff; font-size: 17px; font-style: italic; font-weight: 300; }

/* ---------- Page body & sections ---------- */
.page-body { padding-top: 34px; padding-bottom: 56px; }
.section { margin-bottom: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-head h2 { font-size: 22px; font-weight: 700; color: var(--ink); }
.link-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--blue-600); white-space: nowrap; }
.link-more:hover, .link-small:hover { text-decoration: underline; }
.link-small { font-size: 13px; font-weight: 500; color: var(--blue-600); white-space: nowrap; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16, 36, 80, .03); }

/* tones */
.tone-blue    { --tone-bg: #eaf2ff; --tone-fg: #2563eb; }
.tone-pink    { --tone-bg: #ffeef2; --tone-fg: #e11d48; }
.tone-purple  { --tone-bg: #f2ecff; --tone-fg: #7c3aed; }
.tone-amber   { --tone-bg: #fff5df; --tone-fg: #e69100; }
.tone-green   { --tone-bg: #e8f8ef; --tone-fg: #16a34a; }
.tone-orange  { --tone-bg: #fff0e6; --tone-fg: #ea6a12; }
.tone-sky     { --tone-bg: #e8f3ff; --tone-fg: #1d7be6; }
.tone-red     { --tone-bg: #ffeeee; --tone-fg: #e5383b; }
.tone-violet  { --tone-bg: #f0ecff; --tone-fg: #6d4be0; }

/* ---------- Category carousel ---------- */
.cat-carousel { position: relative; --per-view: 8; --gap: 12px; }
.cat-track {
    display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding: 2px; scroll-behavior: smooth;
}
.cat-track::-webkit-scrollbar { display: none; }
.cat-tile {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; text-align: center;
    padding: 18px 8px 16px; border-radius: 12px; background: var(--tone-bg); color: var(--tone-fg);
    border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(15, 27, 51, .04);
    transition: transform .15s;
}
.cat-tile:hover { transform: translateY(-2px); }
.cat-tile strong { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 6px; }
.cat-tile span { font-size: 12px; color: var(--muted); }

.car-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
    background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 6px rgba(16, 36, 80, .12);
}
.car-btn:hover { background: #f1f5fc; }
.car-prev { left: -17px; }
.car-next { right: -17px; }

/* ---------- Stats strip ---------- */
.stats-card {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(280px, 1.35fr);
    align-items: center; gap: 18px 24px; padding: 20px 26px; margin-bottom: 26px;
    background: #f9fbff;
}
.stat { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stat-ico {
    width: 50px; height: 50px; border-radius: 13px; background: var(--tone-bg); color: var(--tone-fg);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.stat strong { display: block; font-size: 25px; line-height: 1.1; font-weight: 700; color: var(--ink); }
.stat span { font-size: 13px; color: var(--muted); }
.stat-cta p { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Main grid ---------- */
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-bottom: 22px; }
.main-grid > * { min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 22px; }

/* tabs */
.tabs { display: flex; gap: 30px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 18px 2px 16px; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--blue-600); border-bottom-color: var(--blue-600); }

/* question rows */
.q-row {
    display: grid; grid-template-columns: 158px minmax(0, 1fr) 168px; gap: 18px;
    padding: 20px 24px; border-bottom: 1px solid var(--line); align-items: start;
}
.q-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.q-stat { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 7px; min-width: 0; }
.q-stat strong { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.q-stat span { font-size: 11px; color: var(--muted); }
.q-stat-answered { background: #e6f7ee; }
.q-stat-answered strong { color: #15803d; }
.q-stat-answered span { color: #3f8a5c; }
.q-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.q-title a:hover { color: var(--blue-600); }
.q-excerpt {
    margin-top: 5px; font-size: 13px; color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag { display: inline-block; padding: 3px 11px; border-radius: 5px; background: #eaf2ff; color: var(--blue-600); font-size: 12px; }
.tag:hover { background: #d9e8ff; }
.q-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-author strong { display: block; font-size: 13px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.q-author div span { display: block; font-size: 11px; color: var(--muted); }
.more-row { display: flex; justify-content: center; padding: 22px 16px 24px; }
.empty-state { padding: 44px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }

/* avatars */
.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; line-height: 1; box-sizing: border-box; padding: 0; overflow: hidden; }

/* widgets */
.widget { padding: 20px 22px 14px; }
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.widget-head h2 { font-size: 18px; font-weight: 700; color: var(--ink); }

.people li { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.people li + li { border-top: 1px solid #f0f3f9; }
.person { flex: 1; min-width: 0; }
.person strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.person span { display: block; font-size: 12px; color: var(--muted); }

.rank {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 12px; font-weight: 500;
    background: #eef2f9; color: #4a5875;
}
.rank-1 { background: #f6b81c; color: #fff; }
.rank-2 { background: #aab4c4; color: #fff; }
.rank-3 { background: #d9822b; color: #fff; }

.chip {
    flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
    border-radius: 6px; font-size: 11.5px; font-weight: 500;
}
.chip-orange { background: #fff1de; color: #d97706; }
.chip-blue { background: #e6efff; color: #1d5fe0; }

/* popular categories */
.pop-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; padding-bottom: 8px; }
.pop-cats a { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-width: 0; }
.pop-cats a:hover strong { color: var(--blue-600); }
.pop-ico {
    flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--tone-bg);
    color: var(--tone-fg); display: flex; align-items: center; justify-content: center;
}
.pop-text { min-width: 0; }
.pop-text strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.pop-text small { display: block; font-size: 12px; color: var(--muted); }

/* badges */
.badge-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.badge-ico { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.badge-gold   { background: #fff4d6; color: #d99a00; }
.badge-orange { background: #fff0dd; color: #ea7a12; }
.badge-red    { background: #ffe9e9; color: #e0393e; }
.badge-blue   { background: #e6efff; color: #1d5fe0; }
.badge-green  { background: #e3f7ea; color: #16a34a; }
.badge-list strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.badge-list small { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b7c3dc; }
.footer-grid {
    display: grid; grid-template-columns: 1.5fr .8fr .9fr .9fr 1.4fr; gap: 34px;
    padding-top: 44px; padding-bottom: 34px;
}
.footer-grid > * { min-width: 0; }
.footer-brand p { margin: 14px 0 16px; font-size: 13px; line-height: 1.6; color: #a9b8d6; max-width: 300px; }
.social { display: flex; gap: 10px; }
.social a {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08);
    color: #fff; display: flex; align-items: center; justify-content: center;
}
.social a:hover { background: var(--blue-600); }
.footer-col h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-col li + li { margin-top: 9px; }
.footer-col a { font-size: 13px; color: #b7c3dc; }
.footer-col a:hover { color: #fff; }
.footer-news p { font-size: 13px; line-height: 1.55; color: #a9b8d6; margin-bottom: 14px; }
.news-form { display: flex; gap: 0; }
.news-form input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; outline: 0;
    border-radius: 6px 0 0 6px; background: #fff; color: var(--ink); font-size: 13px;
}
.news-form .btn { height: 40px; border-radius: 0 6px 6px 0; padding: 0 16px; }
.news-msg { margin-top: 10px; font-size: 12.5px !important; }
.news-success { color: #6ee7a3 !important; }
.news-error { color: #ff9a9a !important; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 16px; padding-bottom: 16px; font-size: 12.5px; flex-wrap: wrap; }
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a:hover { color: #fff; }
.footer-powered a { color: #fff; font-weight: 500; }
.footer-powered a:hover { text-decoration: underline; }

/* ---------- Stub / inner pages ---------- */
.inner-wrap { padding-top: 56px; padding-bottom: 72px; }
.notice-card { max-width: 620px; margin: 0 auto; padding: 44px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.notice-card .stat-ico { width: 60px; height: 60px; }
.notice-card h1 { font-size: 26px; color: var(--ink); }
.notice-card p { color: var(--muted); max-width: 440px; }
.page-title { font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 18px; overflow-wrap: anywhere; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--blue-600); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
    .cat-carousel { --per-view: 6; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 520px; }
    .footer-news { grid-column: auto; }
    .main-grid { grid-template-columns: minmax(0, 1fr) 310px; }
    .q-row { grid-template-columns: 150px minmax(0, 1fr); }
    .q-author { grid-column: 2; }
    .header-inner { gap: 18px; }
    .main-nav { gap: 20px; }
}

@media (max-width: 992px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .nav-toggle { display: inline-flex; }
    .btn-sm-hide { display: none; }
    .header-actions { margin-left: auto; }
    .main-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 20px 18px; border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(16, 36, 80, .1); margin: 0;
    }
    .site-header.nav-open .main-nav { display: flex; }
    .main-nav > a { padding: 14px 2px; border-bottom: 1px solid #f0f3f9; }
    .main-nav > a.active::after { display: none; }
    .nav-auth { display: flex; gap: 10px; padding-top: 16px; }
    .nav-auth .btn { flex: 1; }

    .hero-grid { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 40px; }
    .hero-visual { order: 2; }
    .hero-art { max-width: 460px; }

    .cat-carousel { --per-view: 5; }
    .car-prev { left: -10px; }
    .car-next { right: -10px; }

    .stats-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-cta { grid-column: 1 / -1; }

    .main-grid, .main-grid-lower { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .pop-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .cat-carousel { --per-view: 4; }
    .q-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 18px; }
    .q-stats { order: 1; max-width: 270px; }
    .q-main { order: 2; }
    .q-author { order: 3; grid-column: auto; }
    .tabs { padding: 0 18px; gap: 22px; }
    .pop-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .footer-news { grid-column: 1 / -1; }
    .news-form { max-width: 420px; }
}

@media (max-width: 640px) {
    body { font-size: 14.5px; }
    .container { padding-left: 16px; padding-right: 16px; }
    .logo-text strong { font-size: 21px; }
    .logo-mark { width: 38px; height: 38px; }
    .hero-visual { display: none; }
    .hero-grid { padding-top: 36px; padding-bottom: 34px; }
    .page-body { padding-top: 28px; }
    .hero-sub { font-size: 15.5px; }
    .hero-search { height: 50px; }
    .hero-chips a { padding: 5px 12px; }
    .section-head h2 { font-size: 19px; }
    .cat-carousel { --per-view: 3; }
    .car-btn { display: none; }
    .cat-tile { padding: 14px 6px 12px; }
    .cat-tile strong { font-size: 13px; }
    .stats-card { padding: 16px; gap: 16px 12px; }
    .stat { gap: 10px; }
    .stat-ico { width: 42px; height: 42px; border-radius: 11px; }
    .stat strong { font-size: 21px; }
    .sidebar { grid-template-columns: minmax(0, 1fr); }
    .widget { padding: 18px 16px 10px; }
    .pop-cats { gap: 4px 14px; }
    .footer-grid { padding-top: 36px; padding-bottom: 28px; }
    .footer-bottom-inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
    .footer-bottom nav { justify-content: center; gap: 8px 20px; }
}

@media (max-width: 480px) {
    .cat-carousel { --per-view: 2.4; }
    .logo-text small { display: none; }
    .stat span { font-size: 12px; }
    .pop-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pop-ico { width: 36px; height: 36px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
    .footer-col a { overflow-wrap: anywhere; }
    .news-form { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cat-track { scroll-behavior: auto; }
    .cat-tile { transition: none; }
}

/* ==========================================================
   Phase 2 to 7 components
   ========================================================== */
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.inline-form { display: inline; margin: 0; }

.announce { background: var(--blue-600); color: #fff; text-align: center; font-size: 13.5px; padding: 8px 0; }
.announce a { text-decoration: underline; }

/* alerts */
.alert { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: #e6f7ee; border-color: #bfe6cf; color: #166534; }
.alert-error { background: #ffeeee; border-color: #f5c2c2; color: #a12626; }
.alert-info { background: #eaf2ff; border-color: #c6dbff; color: #1d4ed8; }
main > .container:first-child .alert { margin-top: 18px; }

/* header user area */
.notif-btn { position: relative; }
.notif-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e5383b; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.user-menu { position: relative; }
.user-trigger { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; color: var(--ink); }
.user-trigger:hover { background: #f1f5fc; }
.user-name { font-size: 13.5px; font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px rgba(16, 36, 80, .14); padding: 6px; z-index: 70; }
.user-dropdown[hidden] { display: none; }
.user-dropdown a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); }
.user-dropdown a:hover { background: #eef4ff; color: var(--blue-600); }

/* forms */
.field { margin-bottom: 16px; }
.field label, .field-label { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink); margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=search], .field select, .field textarea,
.report-form input, .report-form select {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd9ea; border-radius: 8px; background: #fff; font-size: 15px; color: var(--ink);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .report-form input:focus, .report-form select:focus { outline: 2px solid var(--blue-500); border-color: var(--blue-500); outline-offset: 0; }
.field input[type=file] { font-size: 14px; max-width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 20px; font-size: 14px; }
.check-row input { margin-top: 4px; flex: none; }
.radio-row { display: flex; gap: 20px; padding-top: 10px; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
.code-input { text-align: center; font-size: 26px !important; letter-spacing: 8px; font-weight: 500; }
.otp-wrap { margin: 6px 0 4px; }
.otp-boxes { display: flex; justify-content: center; gap: 10px; }
.otp-box { width: 52px; height: 52px; flex: 0 0 52px; box-sizing: border-box; padding: 0 !important; text-align: center; font-size: 24px !important; font-weight: 600; border: 2px solid var(--line, #cfd8e6); border-radius: 4px; background: #fff; color: var(--ink, #0a1f4d); caret-color: var(--blue-600); }
.otp-box:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(25, 113, 194, .18); }
.otp-box.filled { border-color: var(--blue-600); }
@media (max-width: 400px) { .otp-boxes { gap: 6px; } .otp-box { width: 42px; height: 42px; flex-basis: 42px; font-size: 20px !important; } }
.link-btn { background: none; border: 0; color: var(--blue-600); cursor: pointer; font-size: 14px; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.resend-form { text-align: center; margin: 14px 0 6px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

.auth-card { max-width: 480px; margin: 0 auto; padding: 32px 30px; }
.auth-card.auth-wide { max-width: 640px; }
.auth-card h1 { font-size: 26px; color: var(--ink); margin-bottom: 6px; }
.auth-card > .muted { margin-bottom: 20px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.auth-alt a { color: var(--blue-600); font-weight: 500; }
.form-card { padding: 26px 28px; margin-bottom: 22px; }
.form-card .btn { margin-top: 4px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.avatar-field { display: flex; align-items: center; gap: 16px; }
/* About, Terms, Privacy, Disclaimer and other pages: centred block, justified text */
.static-page { max-width: 920px; margin-left: auto; margin-right: auto; }
.static-page .rich { max-width: none; }
.static-page .rich p, .static-page .rich li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* rich text output */
.rich { overflow-wrap: anywhere; line-height: 1.7; color: var(--text); font-size: 15.5px; }
.rich p { margin: 0 0 14px; }
.rich h2, .rich h3, .rich h4 { color: var(--ink); margin: 22px 0 10px; line-height: 1.3; }
.rich h2 { font-size: 21px; } .rich h3 { font-size: 18px; } .rich h4 { font-size: 16px; }
.rich ul, .rich ol { margin: 0 0 14px 22px; padding: 0; }
.rich ul { list-style: disc; } .rich ol { list-style: decimal; }
.rich li { margin-bottom: 4px; }
.rich a { color: var(--blue-600); text-decoration: underline; }
.rich img { max-width: 100%; height: auto; border-radius: 8px; }
.rich blockquote { margin: 0 0 14px; padding: 8px 16px; border-left: 4px solid #bcd3fb; background: #f5f9ff; color: #3a4a6b; }
.rich pre, .rich code { background: #f1f5fc; border-radius: 6px; font-family: Consolas, monospace; font-size: 13.5px; }
.rich code { padding: 1px 5px; } .rich pre { padding: 12px 14px; overflow-x: auto; margin: 0 0 14px; }
.rich table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; margin-bottom: 14px; }
.rich td, .rich th { border: 1px solid var(--line); padding: 7px 10px; }
.rich iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }

/* editor */
.wp-editor { border: 1px solid #cfd9ea; border-radius: 8px; background: #fff; margin-bottom: 18px; overflow: hidden; }
.wp-editor-tabs { display: flex; justify-content: flex-end; gap: 2px; padding: 6px 8px 0; background: #f1f5fc; border-bottom: 1px solid #cfd9ea; }
.wp-editor-tabs[hidden] { display: none; }
.wp-tab { border: 1px solid transparent; border-bottom: 0; background: transparent; padding: 7px 16px; border-radius: 6px 6px 0 0; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.wp-tab.active { background: #fff; border-color: #cfd9ea; color: var(--ink); font-weight: 500; margin-bottom: -1px; }
.wp-editor-area { display: block; width: 100%; border: 0; padding: 12px; font-family: Consolas, monospace; font-size: 14px; min-height: 200px; resize: vertical; }
.wp-editor .tox-tinymce { border: 0 !important; border-radius: 0 !important; }

/* question detail */
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.q-layout > * { min-width: 0; }
.q-detail { padding: 26px 28px; margin-bottom: 20px; }
.q-detail .page-title { font-size: 26px; line-height: 1.3; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.q-author-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.vote-btn, .act-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; cursor: pointer; list-style: none; }
.vote-btn:hover, .act-btn:hover { background: #eef4ff; border-color: #c6dbff; }
.vote-btn.voted, .act-btn.on { background: #e6efff; border-color: var(--blue-500); color: var(--blue-600); }
.act-btn::-webkit-details-marker { display: none; }
.share { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.share a, .share button { width: 34px; height: 34px; border-radius: 50%; background: #f1f5fc; border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.share a:hover, .share button:hover { background: var(--blue-600); color: #fff; }
.share button.copied { background: #16a34a; color: #fff; }
.report-box { position: relative; }
.report-box[open] .report-form { display: flex; }
.report-form { display: none; flex-direction: column; gap: 8px; padding: 12px; margin-top: 8px; background: #f7faff; border: 1px solid var(--line); border-radius: 10px; min-width: 260px; max-width: 100%; }
.report-form select, .report-form input { min-height: 38px; font-size: 14px; }
.disclaimer-note { margin-top: 16px; padding: 10px 14px; background: #fff7e6; border: 1px solid #ffe2a8; color: #8a5a00; border-radius: 8px; font-size: 13px; }
.section-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 6px 0 14px; }
.answer { padding: 22px 26px; margin-bottom: 16px; }
.answer-best { border-color: #7fd1a1; box-shadow: 0 0 0 2px #e1f6ea; }
.best-label { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-weight: 500; font-size: 13.5px; margin-bottom: 10px; }
.answer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.answer-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.answer-author small { display: block; color: var(--muted); font-size: 12px; }
.answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.related li { padding: 9px 0; border-bottom: 1px solid #f0f3f9; font-size: 14px; overflow-wrap: anywhere; }
.related li:last-child { border-bottom: 0; }
.related a:hover { color: var(--blue-600); }
.related-rich li { display: block; }
.related-rich span { display: block; margin-top: 3px; }
.ad-slot { margin: 18px 0; text-align: center; overflow: hidden; max-width: 100%; }
.crumbs a:hover { text-decoration: underline; }
.cat-desc { margin: -6px 0 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

/* grids and lists */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 20px; }
.cat-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cat-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cat-card-head strong { display: block; color: var(--ink); font-size: 15px; }
.cat-card-head small { display: block; color: var(--muted); font-size: 12.5px; }
.sub-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sub-list a { font-size: 13px; color: var(--blue-600); }
.sub-list a:hover { text-decoration: underline; }
.mini-search { max-width: 340px; height: 44px; width: 100%; }
.people-wide li { padding: 12px 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 0; flex-wrap: wrap; }
.pager-info { font-size: 13.5px; color: var(--muted); }
.profile-head { display: flex; align-items: center; gap: 22px; padding: 24px 26px; margin-bottom: 18px; flex-wrap: wrap; }
.profile-info { flex: 1; min-width: 200px; }
.profile-info .page-title { margin-bottom: 8px; }
.profile-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.badge-inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; }
.notif-list li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.notif-list li:last-child { border-bottom: 0; }
.notif-list li.unread { background: #f3f8ff; font-weight: 500; }
.notif-list small { color: var(--muted); white-space: nowrap; }
.widget + .widget, .widget + .section-title { margin-top: 18px; }

@media (max-width: 992px) {
    .q-layout { grid-template-columns: minmax(0, 1fr); }
    .two-col { grid-template-columns: minmax(0, 1fr); }
    .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .user-name { display: none; }
    .user-trigger { padding: 3px; }
}
@media (max-width: 640px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .auth-card { padding: 24px 18px; }
    .form-card, .q-detail { padding: 20px 16px; }
    .answer { padding: 18px 16px; }
    .share { margin-left: 0; width: 100%; }
    .profile-head { padding: 18px 16px; }
    .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .q-detail .page-title { font-size: 22px; }
    .notif-list li { flex-direction: column; gap: 4px; padding: 12px 16px; }
    .report-form { min-width: 0; width: 100%; }
}

/* ---------- Install app (PWA) ---------- */
.pwa-bar {
    position: fixed; z-index: 9990; right: 20px; bottom: 20px; width: 390px; max-width: calc(100vw - 24px);
    display: flex; align-items: flex-start; gap: 14px; padding: 16px 40px 16px 16px;
    background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(10, 31, 77, .28);
    opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease;
}
.pwa-bar[hidden] { display: none; }
.pwa-bar.pwa-in { opacity: 1; transform: none; }
.pwa-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.pwa-body { min-width: 0; }
.pwa-body strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pwa-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pwa-body p.pwa-ios { margin-top: 8px; color: var(--text); }
.pwa-body p.pwa-ios svg { vertical-align: -3px; color: var(--blue-600); }
.pwa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pwa-actions .btn { height: 38px; padding: 0 18px; font-size: 13.5px; cursor: pointer; }
.pwa-close {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: none; color: #8d9ab2; font-size: 22px; line-height: 1; cursor: pointer;
}
.pwa-close:hover { background: #f0f3f9; color: var(--ink); }
@media (max-width: 640px) {
    .pwa-bar { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .pwa-bar { transition: none; } }

/* ---------- Reactions ---------- */
.react-bar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.react-bar.busy { opacity: .6; pointer-events: none; }
.react-form { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.react-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
span.react-chip { cursor: default; }
button.react-chip:hover { background: #eef4ff; border-color: #c6dbff; }
.react-chip.on { background: #e6efff; border-color: var(--blue-500); color: var(--blue-600); }
.react-chip .re { font-size: 15px; line-height: 1; }
.react-chip .rn { font-weight: 500; }
.react-pick { position: relative; }
.react-add { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px dashed #c3cfe6; border-radius: 999px; background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
.react-add:hover { background: #eef4ff; color: var(--blue-600); border-color: #c6dbff; }
.react-add::-webkit-details-marker { display: none; }
.react-add .re { font-size: 15px; line-height: 1; }
.react-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: flex; gap: 2px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px rgba(10, 31, 77, .2); }
.react-menu.right { left: auto; right: 0; }
.react-opt { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s; }
.react-opt:hover { transform: scale(1.25); background: #eef4ff; }
.react-opt.on { background: #e6efff; }
.q-react { margin-top: 14px; }
.answer-engage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

/* ---------- Replies (threads) ---------- */
.replies { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.replies-head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.reply { margin-top: 12px; scroll-margin-top: 90px; }
.reply-list > .reply:first-child { margin-top: 0; }
.reply-row { display: flex; align-items: flex-start; gap: 10px; }
.reply-row > .avatar, .reply-row > .avatar-initials, .reply-row > img { flex: none; }
.reply-bubble { flex: 1; min-width: 0; padding: 10px 14px; background: #f5f8fd; border: 1px solid var(--line); border-radius: 12px; }
.reply:target > .reply-row .reply-bubble { border-color: var(--blue-500); box-shadow: 0 0 0 3px #dbe8ff; }
.reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; }
.reply-head small { color: var(--muted); font-size: 12px; }
.reply-tag { padding: 1px 8px; border-radius: 999px; background: #eceff6; color: #4b5a78; font-size: 11px; }
.reply-to { margin-top: 3px; font-size: 12px; color: var(--muted); }
.reply-body { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; text-align: left; }
.reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.reply-link { padding: 0; border: 0; background: none; color: var(--blue-600); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.reply-link:hover { text-decoration: underline; }
.reply-link::-webkit-details-marker { display: none; }
.reply-danger { color: #c0392b; }
.reply-box > summary { list-style: none; cursor: pointer; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box[open], .reply-report[open] { flex-basis: 100%; }
.reply-box.top { margin-top: 14px; }
.reply-form { margin-top: 8px; }
.reply-form textarea { width: 100%; min-height: 78px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; line-height: 1.5; resize: vertical; }
.reply-form textarea:focus { outline: 2px solid var(--blue-500); border-color: var(--blue-500); outline-offset: 0; }
.reply-form-actions { margin-top: 8px; }
.reply-form .tox-tinymce { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.reply-form .tox:not(.tox-tinymce-inline) .tox-editor-header { border-bottom: 1px solid var(--line); box-shadow: none; }
.reply-rich > :first-child { margin-top: 0; }
.reply-rich > :last-child { margin-bottom: 0; }
.reply-rich p { margin: 0 0 8px; }
.reply-rich ul, .reply-rich ol { margin: 4px 0 8px; padding-left: 22px; }
.reply-rich blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.reply-rich a { color: var(--blue-600); text-decoration: underline; }
.reply-children { margin-left: 18px; padding-left: 14px; border-left: 2px solid #e1e8f5; }
.reply-children.flat { margin-left: 0; padding-left: 0; border-left: 0; }
.reply-gone { padding: 8px 12px; font-size: 13px; font-style: italic; color: var(--muted); background: #fafbfd; border: 1px dashed var(--line); border-radius: 10px; }
@media (max-width: 640px) {
    .reply-children { margin-left: 8px; padding-left: 10px; }
    .reply-bubble { padding: 9px 11px; }
    .react-menu { padding: 4px; }
    .react-opt { width: 34px; height: 34px; font-size: 20px; }
}

/* ---------- Question page: centred when there is no sidebar ---------- */
.q-narrow { max-width: 948px; }
.q-layout-single { grid-template-columns: minmax(0, 1fr); }
.q-discuss { padding: 18px 22px; margin-bottom: 16px; }
.q-discuss .replies { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Ask page: not too wide ---------- */
.ask-wrap { max-width: 928px; }

/* ---------- Reply button and replies panel on question lists ---------- */
.q-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.q-foot .tag-list { margin-top: 0; }
.q-reply-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--blue-600); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.q-reply-btn:hover, .q-reply-btn.on { background: #e6efff; border-color: var(--blue-500); }
.q-replies { grid-column: 1 / -1; order: 9; margin-top: 4px; padding: 14px 16px; background: #f8fafd; border: 1px solid var(--line); border-radius: 12px; }
.q-replies[hidden] { display: none; }
.q-replies .replies { margin-top: 0; padding-top: 0; border-top: 0; }
.qr-section + .qr-section { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.qr-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.qr-answer { margin-bottom: 10px; padding: 8px 12px; background: #fff; border-left: 3px solid var(--blue-500); border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.qr-empty, .qr-loading { margin: 0; font-size: 13.5px; color: var(--muted); }
.qr-more { margin-top: 12px; font-size: 13px; }
.qr-more a { color: var(--blue-600); font-weight: 500; }

/* ---------- Badges and Points page: centred, responsive ---------- */
.badges-wrap { max-width: 968px; }
.badges-wrap .page-title { text-align: center; }
.points-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.points-grid li { padding: 18px 12px; text-align: center; background: #f5f8fd; border: 1px solid var(--line); border-radius: 12px; }
.points-grid b { display: block; margin-bottom: 4px; font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--blue-600); }
.points-grid span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.badges-wrap .badge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding: 0; list-style: none; }
.badges-wrap .badge-list li { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.badges-wrap .badge-list > li > div { min-width: 0; }
@media (max-width: 860px) { .points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .badges-wrap .badge-list { grid-template-columns: minmax(0, 1fr); }
    .points-grid { gap: 10px; }
    .points-grid li { padding: 14px 8px; }
    .points-grid b { font-size: 24px; }
}

/* ---------- Contact page: details left, form right ---------- */
.contact-wrap { max-width: 1128px; }
.contact-wrap .page-title { text-align: center; margin-bottom: 6px; }
.contact-intro { max-width: 620px; margin: 0 auto 26px; text-align: center; color: var(--muted); line-height: 1.6; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.contact-info { padding: 30px 28px; border: 0; color: #e8efff; background: linear-gradient(150deg, #0a1f4d 0%, #0f3a8a 100%); }
.contact-info h2 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.contact-info > p { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: #b9c9ee; }
.contact-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; }
.contact-ico { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
.contact-list > li > div { min-width: 0; }
.contact-list small { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: #9fb3dd; }
.contact-list .val { display: block; font-size: 15px; line-height: 1.55; color: #fff; overflow-wrap: anywhere; }
.contact-list .val a { color: #fff; }
.contact-list .val a:hover { text-decoration: underline; }
.contact-form-card { padding: 30px 28px; }
.contact-form-card h2 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.contact-form-card > .muted { margin: 0 0 20px; }
.contact-form-card .btn-primary { min-width: 170px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .contact-info, .contact-form-card { padding: 22px 18px; }
    .contact-form-card .field-row { grid-template-columns: minmax(0, 1fr); }
    .contact-form-card .btn-primary { width: 100%; }
}

/* ---------- How It Works: numbered step cards ---------- */
.page-how-it-works .rich ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
.page-how-it-works .rich ol li { position: relative; counter-increment: step; min-height: 96px; padding: 18px 18px 18px 74px; background: #f5f8fd; border: 1px solid var(--line); border-radius: 14px; line-height: 1.6; text-align: left; hyphens: manual; overflow-wrap: anywhere; }
.page-how-it-works .rich ol li::before { content: counter(step); position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #3b8bff, #0f55d6); color: #fff; font-size: 18px; font-weight: 700; }
.page-how-it-works .rich ol li strong { display: block; margin-bottom: 3px; font-size: 16px; color: var(--ink); }
@media (max-width: 720px) {
    .page-how-it-works .rich ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .page-how-it-works .rich ol li { min-height: 0; padding: 14px 14px 14px 62px; }
    .page-how-it-works .rich ol li::before { left: 14px; top: 14px; width: 36px; height: 36px; font-size: 16px; }
}


/* ==========================================================
   v4: premium mobile hero + narrow, responsive member pages
   ========================================================== */
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 340px; height: 340px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(34, 191, 255, .22), rgba(34, 191, 255, 0) 70%); }
.hero::after { width: 300px; height: 300px; left: -140px; bottom: -160px; background: radial-gradient(circle, rgba(47, 123, 255, .28), rgba(47, 123, 255, 0) 70%); }
.hero-grid { position: relative; z-index: 1; }

/* root cause of the right-side cut: a 1fr grid column can grow wider than the screen */
@media (max-width: 992px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-copy { min-width: 0; }
}

@media (max-width: 640px) {
    .hero { background:
        radial-gradient(420px 300px at 85% 18%, rgba(34, 191, 255, .30), rgba(34, 191, 255, 0) 70%),
        radial-gradient(380px 320px at 0% 100%, rgba(47, 123, 255, .35), rgba(47, 123, 255, 0) 72%),
        linear-gradient(165deg, #040d26 0%, #07194a 55%, #0b2d78 100%); }
    .hero-grid { padding-top: 48px; padding-bottom: 44px; gap: 0; }
    .hero-copy { width: 100%; text-align: center; }
    .hero h1 { font-size: clamp(32px, 12.2vw, 52px); line-height: 1.1; letter-spacing: -1px; font-weight: 700; text-align: center; }
    .hero-accent { background: linear-gradient(90deg, #22bfff 0%, #8be0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .hero-sub { margin: 18px auto 0; max-width: 34ch; font-size: 16px; line-height: 1.6; text-align: center; color: rgba(255, 255, 255, .8); text-wrap: balance; }
    .hero-sub br { display: none; }
    .hero-sub::first-line { color: rgba(255, 255, 255, .92); }

    .hero-search {
        margin-top: 30px; max-width: 100%; width: 100%; height: auto; padding: 6px; gap: 6px; align-items: center;
        border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; overflow: visible;
        background: #fff; box-shadow: 0 18px 36px rgba(2, 10, 36, .45), 0 2px 0 rgba(255, 255, 255, .6) inset;
    }
    .hero-search .search-ico { display: none; }
    .hero-search input { height: 48px; padding: 0 8px 0 14px; font-size: 15px; border-radius: 12px; min-width: 0; text-overflow: ellipsis; }
    .hero-search button { flex: none; width: 48px; height: 48px; border-radius: 13px; background: linear-gradient(135deg, #3b8bff, #0f55d6); box-shadow: 0 6px 14px rgba(15, 85, 214, .4); }
    .hero-search:focus-within { box-shadow: 0 18px 36px rgba(2, 10, 36, .45), 0 0 0 3px rgba(34, 191, 255, .45); }

    .hero-chips { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; margin: 24px 0 0; padding: 0; gap: 10px; }
    .hero-chips span { flex: 0 0 100%; text-align: center; margin: 0 0 2px; font-size: 12.5px; letter-spacing: .3px; color: rgba(255, 255, 255, .62); }
    .hero-chips a { padding: 8px 15px; font-size: 13.5px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; }
    .hero-chips a:active { background: rgba(255, 255, 255, .22); }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 11.8vw; }
    .hero-sub { font-size: 15px; }
    .hero-chips a { padding: 7px 13px; font-size: 13px; }
}

/* narrow centred column for member pages */
.narrow-wrap { max-width: 880px; }
.narrow-wrap .page-title { font-size: 26px; }
.people-wide li { position: relative; padding: 12px 14px; margin: 0 -14px; border-radius: 12px; transition: background .15s; }
.people-wide li:hover, .people-wide li:focus-within { background: #f3f7ff; }
.people-wide li + li { border-top-color: transparent; }
.people-wide .person a { color: inherit; }
.people-wide .person a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.people-wide .person a:hover strong { color: var(--blue-600); }
.people-wide .chip { position: relative; z-index: 1; }
.profile-head { gap: 18px 22px; }
.profile-head .btn { margin-left: auto; }
@media (max-width: 640px) {
    .narrow-wrap { max-width: 100%; }
    .inner-wrap { padding-top: 30px; padding-bottom: 48px; }
    .narrow-wrap .page-title { font-size: 23px; }
    .people-wide li { padding: 11px 10px; margin: 0 -10px; gap: 10px; }
    .profile-head { flex-direction: column; align-items: flex-start; }
    .profile-head .btn { margin-left: 0; }
}

.logo-img { display: block; height: 44px; width: auto; max-width: 200px; object-fit: contain; flex: none; }
@media (max-width: 640px) { .logo-img { height: 38px; max-width: 150px; } }

/* ==========================================================
   Final mobile safety layer: side gutters on every page,
   whatever extra classes a wrapper carries
   ========================================================== */
@media (max-width: 992px) {
    .container { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 640px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .people-wide li { margin-left: 0; margin-right: 0; }
    main > .container .card, main > .container .widget, main > .container .alert { max-width: 100%; }
    pre, code, .rich pre { max-width: 100%; overflow-x: auto; }
    .rich pre { padding: 12px; background: #f3f6fb; border-radius: 8px; font-size: 13px; }
    input, select, textarea { max-width: 100%; }
    .pager { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* mobile-only display font for the hero heading */
@media (max-width: 640px) {
    .hero h1 { font-family: 'Plus Jakarta Sans', 'Roboto', system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 11vw, 48px); line-height: 1.12; letter-spacing: -.6px; }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 10.6vw; }
}

@media (max-width: 640px) {
    .hero h1 .hero-punct { display: none; }
}

/* ==========================================================
   Premium mobile profile + experts pages (phones only)
   ========================================================== */
@media (max-width: 640px) {
    .profile-head {
        position: relative; overflow: hidden; flex-direction: column; align-items: center; justify-content: flex-start;
        text-align: center; gap: 0; padding: 54px 18px 22px; border-radius: 20px;
        box-shadow: 0 10px 28px rgba(16, 36, 80, .08);
    }
    .profile-head::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; pointer-events: none;
        background:
            radial-gradient(160px 100px at 88% 0%, rgba(34, 191, 255, .45), rgba(34, 191, 255, 0) 70%),
            linear-gradient(135deg, #0a1f4d 0%, #0f3a8a 100%);
    }
    .profile-head > .avatar, .profile-head > .avatar-initials {
        position: relative; width: 96px !important; height: 96px !important; font-size: 36px !important;
        border: 4px solid #fff; box-shadow: 0 8px 20px rgba(10, 31, 77, .25); background-clip: padding-box;
    }
    .profile-info { width: 100%; flex: none; min-width: 0; margin-top: 14px; }
    .profile-info .page-title { font-size: 24px; line-height: 1.2; margin-bottom: 10px; overflow-wrap: anywhere; }
    .profile-head .chip-row { justify-content: center; margin-bottom: 12px; }
    .profile-info .muted { font-size: 14px; line-height: 1.6; }
    .profile-info .muted.small { font-size: 12.5px; margin-top: 4px; }
    .profile-head .btn { width: 100%; margin: 18px 0 0; justify-content: center; }

    .profile-stats {
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0;
        background: transparent; border: 0; box-shadow: none;
    }
    .profile-stats .stat { grid-column: span 2; display: block; padding: 14px 6px 12px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 16px rgba(16, 36, 80, .06); }
    .profile-stats .stat:nth-child(-n+2) { grid-column: span 3; }
    .profile-stats .stat strong { font-size: 24px; letter-spacing: -.3px; color: var(--blue-600); }
    .profile-stats .stat span { display: block; margin-top: 3px; font-size: 12px; letter-spacing: .2px; }

    .badge-inline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .badge-inline li { padding: 12px; background: #f6f9ff; border: 1px solid #e3ebf8; border-radius: 14px; }

    .section-title { font-size: 19px; margin-top: 26px; }

    /* experts list */
    .cat-grid .cat-card { padding: 18px; border-radius: 18px; box-shadow: 0 8px 22px rgba(16, 36, 80, .07); }
    .cat-grid .cat-card-head { display: flex; align-items: center; gap: 14px; }
    .cat-grid .cat-card-head .avatar, .cat-grid .cat-card-head .avatar-initials { width: 58px !important; height: 58px !important; font-size: 22px !important; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(10, 31, 77, .18); }
    .cat-grid .cat-card-head strong { display: block; font-size: 17px; line-height: 1.25; }
    .cat-grid .cat-card-head small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
    .cat-grid .cat-card .chip { margin-top: 14px; }
}

/* homepage Top Contributors / Verified Experts: the whole row opens the member profile */
.people:not(.people-wide) li { position: relative; margin: 0 -10px; padding: 9px 10px; border-radius: 12px; transition: background .15s; }
.people:not(.people-wide) li:hover, .people:not(.people-wide) li:focus-within { background: #f3f7ff; }
.people:not(.people-wide) li + li { border-top-color: transparent; }
.person-link { color: inherit; text-decoration: none; }
.person-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.person-link:hover strong { color: var(--blue-600); }
.people:not(.people-wide) .chip { position: relative; z-index: 1; pointer-events: none; }

/* Google sign in button */
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; margin-bottom: 4px;
    background: #fff; color: #1f2937; border: 1px solid #d3dbe8; border-radius: 10px; font-size: 15px; font-weight: 500;
    text-decoration: none; transition: background .15s, box-shadow .15s, border-color .15s;
}
.btn-google:hover { background: #f7f9fd; border-color: #b9c6dd; box-shadow: 0 4px 14px rgba(16, 36, 80, .10); text-decoration: none; }
.btn-google:active { background: #eef3fb; }
.btn-google .g-ico { flex: none; display: block; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* bot trap field: hidden from people */
.hp-wrap{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* verified seal next to names */
.v-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 5px; line-height: 0; flex: none; }
.v-badge svg { display: block; }

/* Ask page: typing language switch */
.typing-bar { margin: 0 0 16px; }
.typing-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.typing-label { font-size: 13px; font-weight: 500; color: var(--muted); margin-right: 2px; }
.typing-switch button { font: inherit; font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--line, #cfd8e6); border-radius: 8px; background: #fff; color: var(--ink, #0a1f4d); cursor: pointer; }
.typing-switch button:hover { border-color: var(--blue-600); }
.typing-switch button.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.typing-switch .typing-help-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-weight: 700; }
.typing-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.typing-help { margin-top: 10px; padding: 12px 14px; background: #f6f9ff; border: 1px solid #e3ebf8; border-radius: 10px; font-size: 13px; line-height: 1.65; }
.typing-help p { margin: 0 0 6px; }
.typing-help ul { margin: 0 0 10px; padding-left: 18px; }
.typing-help code { background: #fff; border: 1px solid #e3ebf8; border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.typing-help[hidden] { display: none; }

/* Ask page: on-screen Bengali / Hindi keyboard */
.typing-kbd-btn.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.typing-kbd-btn[hidden] { display: none; }
.kbd-panel { margin-top: 10px; border: 1px solid #e3ebf8; border-radius: 12px; background: #f6f9ff; overflow: hidden; }
.kbd-panel[hidden] { display: none; }
.kbd-tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid #e3ebf8; }
.kbd-tab { font: inherit; font-size: 13px; padding: 7px 12px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); cursor: pointer; }
.kbd-tab.active { background: #fff; color: var(--blue-600); font-weight: 500; box-shadow: 0 -1px 0 #e3ebf8 inset; }
.kbd-body { max-height: 240px; overflow-y: auto; padding: 10px; -webkit-overflow-scrolling: touch; }
.kbd-group + .kbd-group { margin-top: 10px; }
.kbd-title { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.kbd-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.kbd-key { font-family: 'Noto Sans Bengali', 'Noto Sans Devanagari', 'Nirmala UI', 'Vrinda', 'Mangal', Roboto, sans-serif; font-size: 18px; line-height: 1; min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid var(--line, #cfd8e6); border-radius: 8px; background: #fff; color: var(--ink, #0a1f4d); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.kbd-key:hover { border-color: var(--blue-600); }
.kbd-key:active { background: #e6efff; }
.kbd-foot { display: flex; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid #e3ebf8; }
.kbd-wide { flex: 1; font-family: inherit; font-size: 14px; }
@media (max-width: 480px) { .kbd-key { min-width: 36px; height: 38px; font-size: 17px; } .kbd-body { max-height: 200px; } }

/* ===== name + verified seal always on one line ===== */
.name-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-line strong { display: block; min-width: 0; overflow-wrap: anywhere; }
.name-line .v-badge { display: inline-flex; margin-left: 0; }
.person .person-link { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.person .person-link strong { display: inline; }
.person .person-link .v-badge { display: inline-flex; margin-left: 0; }

/* ===== Verified Experts: four cards per row ===== */
.wide-wrap { max-width: 1320px; }
.expert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-bottom: 24px; }
.expert-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 28px 20px 22px; border-radius: 20px; border: 1px solid rgba(10, 31, 77, .06);
    color: var(--ink); text-decoration: none; background: #fff;
    box-shadow: 0 10px 28px rgba(16, 36, 80, .06); transition: transform .18s, box-shadow .18s;
}
.expert-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 36, 80, .12); }
.expert-card .avatar, .expert-card .avatar-initials { border: 4px solid #fff; box-shadow: 0 6px 16px rgba(10, 31, 77, .16); }
.expert-name { justify-content: center; font-size: 17px; line-height: 1.25; }
.expert-name strong { font-weight: 700; }
.expert-field { font-size: 13.5px; font-weight: 500; color: #44536f; }
.expert-bio { font-size: 12.5px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.expert-chip { margin-top: auto; background: rgba(255, 255, 255, .85); }
.tone-0 { background: linear-gradient(160deg, #eaf3ff, #f7fbff); }
.tone-1 { background: linear-gradient(160deg, #fff3e3, #fffaf3); }
.tone-2 { background: linear-gradient(160deg, #e8f8ee, #f6fdf9); }
.tone-3 { background: linear-gradient(160deg, #f4ecff, #fbf8ff); }
.tone-4 { background: linear-gradient(160deg, #ffecef, #fff8f9); }
.tone-5 { background: linear-gradient(160deg, #e5f8fb, #f5fdfe); }
.tone-6 { background: linear-gradient(160deg, #fff9df, #fffdf3); }
.tone-7 { background: linear-gradient(160deg, #ebeeff, #f8f9ff); }
@media (max-width: 1100px) { .expert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .expert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .expert-card { padding: 22px 14px 18px; } }
@media (max-width: 480px) { .expert-grid { grid-template-columns: 1fr; } }

/* ===== Top Users: podium and ranking list ===== */
.lb-wrap { max-width: 920px; }
.lb-head { text-align: center; margin-bottom: 26px; }
.lb-head .page-title { margin-bottom: 6px; font-size: 30px; }
.lb-sub { margin: 0; color: var(--muted); font-size: 14.5px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; margin-bottom: 26px; }
.pod {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 22px 12px 20px; border-radius: 20px; text-decoration: none; color: var(--ink);
    background: #fff; border: 1px solid #e8eef8; box-shadow: 0 10px 28px rgba(16, 36, 80, .07); transition: transform .18s, box-shadow .18s;
}
.pod:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 36, 80, .13); }
.pod-1 { padding-top: 34px; padding-bottom: 28px; background: linear-gradient(180deg, #fff7dd 0%, #ffffff 70%); border-color: #f4dfa0; box-shadow: 0 16px 38px rgba(217, 158, 20, .18); }
.pod-2 { background: linear-gradient(180deg, #eef2f8 0%, #ffffff 70%); }
.pod-3 { background: linear-gradient(180deg, #fff0e2 0%, #ffffff 70%); border-color: #f6dcc3; }
.pod-ring { position: relative; display: inline-flex; padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #cbd5e4, #f1f4f9); }
.pod-1 .pod-ring { background: linear-gradient(135deg, #f6b81c, #ffe08a); }
.pod-3 .pod-ring { background: linear-gradient(135deg, #d9822b, #f5c79a); }
.pod-ring .avatar, .pod-ring .avatar-initials { border: 3px solid #fff; }
.pod-medal {
    position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff;
    background: #8a97ad; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(10, 31, 77, .2);
}
.pod-1 .pod-medal { background: #f0a500; width: 34px; height: 34px; font-size: 16px; }
.pod-3 .pod-medal { background: #d9822b; }
.pod-name { justify-content: center; margin-top: 8px; font-size: 16px; }
.pod-name strong { font-weight: 700; }
.pod-points { font-size: 12.5px; color: var(--muted); }
.pod-points b { font-size: 18px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.lb-card { background: #fff; border: 1px solid #e8eef8; border-radius: 20px; box-shadow: 0 10px 28px rgba(16, 36, 80, .06); padding: 8px 12px; }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 14px; transition: background .15s; }
.lb-row + .lb-row { border-top: 1px solid #f1f4fa; }
.lb-row:hover, .lb-row:focus-within { background: #f4f8ff; }
.lb-rank { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: #eef2f9; color: #4a5875; }
.lb-row .avatar, .lb-row .avatar-initials { flex: none; box-shadow: 0 3px 10px rgba(10, 31, 77, .12); }
.lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.lb-main .name-line strong { font-size: 15px; font-weight: 500; color: var(--ink); }
.lb-main a { color: inherit; text-decoration: none; }
.lb-main a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.lb-main a:hover strong { color: var(--blue-600); }
.lb-bar { display: block; height: 6px; border-radius: 6px; background: #edf1f8; overflow: hidden; }
.lb-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue-600), var(--cyan)); }
.lb-chip { position: relative; z-index: 1; }
.lb-points { flex: none; min-width: 66px; text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.lb-points b { font-size: 16px; font-weight: 700; color: var(--ink); }
.lb-points small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 640px) {
    .lb-head .page-title { font-size: 25px; }
    .podium { gap: 8px; }
    .pod { padding: 16px 6px 14px; border-radius: 16px; }
    .pod-1 { padding-top: 24px; padding-bottom: 18px; }
    .pod .avatar, .pod .avatar-initials { width: 54px !important; height: 54px !important; font-size: 20px !important; }
    .pod-1 .avatar, .pod-1 .avatar-initials { width: 66px !important; height: 66px !important; font-size: 24px !important; }
    .pod-name { font-size: 13px; }
    .pod-points b { font-size: 15px; }
    .pod-medal { width: 24px; height: 24px; font-size: 12px; }
    .pod-1 .pod-medal { width: 28px; height: 28px; font-size: 13px; }
    .lb-card { padding: 4px 6px; border-radius: 16px; }
    .lb-row { gap: 10px; padding: 11px 6px; }
    .lb-chip { display: none; }
    .lb-points { min-width: 54px; }
}

/* ===== Verified Experts: compact cards, search and numbered pages (built for thousands of experts) ===== */
.experts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.experts-head .page-title { margin: 0; }
.experts-search { display: flex; gap: 8px; flex: 0 1 380px; min-width: 0; }
.experts-search input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.experts-search input:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(26, 102, 242, .14); }
.experts-search .btn { height: 40px; padding: 0 18px; }
.expert-grid { gap: 16px; }
.expert-card { gap: 4px; padding: 18px 12px 16px; border-radius: 16px; box-shadow: 0 6px 18px rgba(16, 36, 80, .06); }
.expert-card .avatar, .expert-card .avatar-initials { border-width: 3px; box-shadow: 0 4px 12px rgba(10, 31, 77, .15); margin-bottom: 4px; }
.expert-name { font-size: 15.5px; }
.expert-field { font-size: 12.5px; line-height: 1.3; color: #51607c; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.num-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 4px; }
.num-pg { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 14px; text-decoration: none; }
.num-pg:hover { border-color: var(--blue-600); color: var(--blue-600); }
.num-pg.on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; font-weight: 500; }
.num-gap { color: var(--muted); padding: 0 2px; }
@media (max-width: 820px) { .expert-grid { gap: 12px; } .expert-card { padding: 16px 10px 14px; } .experts-search { flex-basis: 100%; } }

/* ===== Top Users v2: wider, more premium, better on small screens ===== */
.lb-wrap { max-width: 1120px; }
.lb-head { position: relative; padding: 8px 0 0; margin-bottom: 30px; }
.lb-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; margin-bottom: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--blue-600); background: #e8f0ff; border: 1px solid #d3e2ff; }
.lb-head .page-title { font-size: 36px; letter-spacing: -.01em; margin-bottom: 8px; }
.lb-sub { font-size: 15.5px; }
.lb-stats { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.lb-stats span { padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid #e5ecf7; font-size: 13px; color: var(--muted); box-shadow: 0 3px 10px rgba(16, 36, 80, .05); }
.lb-stats b { color: var(--ink); font-weight: 700; margin-right: 3px; }

.podium { gap: 22px; margin-bottom: 30px; }
.pod { padding: 26px 16px 24px; border-radius: 24px; gap: 8px; }
.pod-1 { padding-top: 42px; padding-bottom: 34px; box-shadow: 0 22px 48px rgba(217, 158, 20, .22); transform: translateY(-8px); }
.pod-1:hover { transform: translateY(-11px); }
.pod::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, #b9c4d6, transparent); }
.pod-1::before { background: linear-gradient(90deg, transparent, #f0a500, transparent); height: 4px; }
.pod-3::before { background: linear-gradient(90deg, transparent, #d9822b, transparent); }
.pod-crown { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 2px 4px rgba(240, 165, 0, .35)); }
.pod-name { font-size: 17.5px; margin-top: 10px; }
.pod-points b { font-size: 22px; }

.lb-card { border-radius: 24px; padding: 10px 16px 12px; box-shadow: 0 14px 38px rgba(16, 36, 80, .08); }
.lb-cols { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; padding: 12px 14px 10px; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8794ab; border-bottom: 1px solid #eef2f9; }
.lb-cols span:last-child { text-align: right; min-width: 66px; }
.lb-row { padding: 14px 14px; gap: 16px; animation: lbIn .35s ease both; }
.lb-row:hover, .lb-row:focus-within { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--blue-600); }
.lb-top .lb-rank { background: linear-gradient(135deg, #e8f0ff, #d6e5ff); color: var(--blue-600); }
.lb-rank { min-width: 34px; height: 34px; border-radius: 10px; font-size: 13.5px; }
.lb-main .name-line strong { font-size: 15.5px; }
.lb-bar { height: 7px; }
.lb-points b { font-size: 17px; }
.lb-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0 8px; font-size: 13.5px; color: var(--muted); }
.lb-more[hidden] { display: none; }
.lb-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #d6e2f7; border-top-color: var(--blue-600); animation: lbSpin .8s linear infinite; }
.lb-more.lb-end .lb-spin { display: none; }
.lb-sentinel { height: 1px; }
@keyframes lbSpin { to { transform: rotate(360deg); } }
@keyframes lbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb-row { animation: none; } .lb-spin { animation-duration: 2s; } .pod, .pod-1 { transition: none; } }

@media (max-width: 900px) {
    .lb-head .page-title { font-size: 30px; }
    .podium { gap: 12px; }
    .pod { padding: 20px 10px 18px; border-radius: 20px; }
    .pod-1 { padding-top: 38px; padding-bottom: 26px; transform: translateY(-4px); }
    .pod-name { font-size: 15px; }
}
@media (max-width: 640px) {
    .lb-head { margin-bottom: 22px; }
    .lb-head .page-title { font-size: 26px; }
    .lb-sub { font-size: 14px; }
    .lb-stats span { padding: 6px 12px; font-size: 12px; }
    .podium { gap: 8px; margin-bottom: 22px; }
    .pod { padding: 16px 6px 14px; border-radius: 16px; gap: 5px; }
    .pod-1 { padding-top: 32px; padding-bottom: 18px; transform: none; }
    .pod-1:hover { transform: translateY(-3px); }
    .pod-crown { width: 26px; height: 20px; top: 8px; }
    .pod-name { font-size: 12.5px; margin-top: 6px; }
    .pod-name .v-badge svg { width: 14px; height: 14px; }
    .pod-points { font-size: 11px; }
    .pod-points b { font-size: 14px; }
    .lb-cols { display: none; }
    .lb-card { border-radius: 18px; padding: 4px 8px; }
    .lb-row { gap: 10px; padding: 12px 8px; }
    .lb-row .avatar, .lb-row .avatar-initials { width: 40px !important; height: 40px !important; font-size: 15px !important; }
    .lb-rank { min-width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
    .lb-main .name-line strong { font-size: 14px; }
    .lb-points { min-width: 52px; }
    .lb-points b { font-size: 15px; }
}
@media (max-width: 360px) { .lb-row .avatar, .lb-row .avatar-initials { display: none; } }

/* ===== Back to top: small floating button on every public page ===== */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    box-shadow: 0 6px 16px rgba(26, 102, 242, .35), 0 0 0 3px rgba(255, 255, 255, .85);
    transition: transform .18s, box-shadow .18s, opacity .2s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    animation: toTopIn .22s ease both;
}
.to-top svg { width: 17px; height: 17px; }
.to-top[hidden] { display: none; }
.to-top:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(26, 102, 242, .45), 0 0 0 3px rgba(255, 255, 255, .9); }
.to-top:active { transform: scale(.94); }
.to-top:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; }
@keyframes toTopIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .to-top { right: 14px; width: 36px; height: 36px; } .to-top svg { width: 16px; height: 16px; } }
@media print { .to-top { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .to-top { animation: none; transition: none; } }

/* ===== Top Users podium: 1st green, 2nd blue, 3rd orange; 5px corners ===== */
.pod, .lb-card, .lb-row, .lb-stats span, .lb-eyebrow { border-radius: 5px; }
.lb-rank { border-radius: 5px; }
.lb-main a::after { border-radius: 5px; }
.lb-bar, .lb-bar i { border-radius: 3px; }

.pod-crown { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.pod-2, .pod-3 { padding-top: 42px; }
@media (max-width: 900px) { .pod-2, .pod-3 { padding-top: 36px; } }
@media (max-width: 640px) { .pod-2, .pod-3 { padding-top: 30px; } .pod-2 .pod-crown, .pod-3 .pod-crown { width: 22px; height: 17px; top: 8px; } }

.pod-1 { background: linear-gradient(180deg, #e3f7ea 0%, #ffffff 74%); border-color: #b7e5c7; box-shadow: 0 20px 44px rgba(21, 163, 74, .22); color: var(--ink); }
.pod-1 .pod-crown { color: #15a34a; }
.pod-1::before { background: linear-gradient(90deg, transparent, #15a34a, transparent); }
.pod-1 .pod-ring { background: linear-gradient(135deg, #15a34a, #6ee7a0); }
.pod-1 .pod-medal { background: #15a34a; }
.pod-1 .pod-points b { color: #0f7a37; }

.pod-2 { background: linear-gradient(180deg, #e6efff 0%, #ffffff 74%); border-color: #c4d8ff; box-shadow: 0 14px 34px rgba(26, 102, 242, .16); }
.pod-2 .pod-crown { color: #1a66f2; }
.pod-2::before { background: linear-gradient(90deg, transparent, #1a66f2, transparent); }
.pod-2 .pod-ring { background: linear-gradient(135deg, #1a66f2, #80b1ff); }
.pod-2 .pod-medal { background: #1a66f2; }
.pod-2 .pod-points b { color: #0f4bc4; }

.pod-3 { background: linear-gradient(180deg, #fff0e0 0%, #ffffff 74%); border-color: #ffd2a6; box-shadow: 0 14px 34px rgba(249, 115, 22, .17); }
.pod-3 .pod-crown { color: #f97316; }
.pod-3::before { background: linear-gradient(90deg, transparent, #f97316, transparent); }
.pod-3 .pod-ring { background: linear-gradient(135deg, #f97316, #fdba74); }
.pod-3 .pod-medal { background: #ea6a0a; }
.pod-3 .pod-points b { color: #c2570c; }
.pod-1::before, .pod-2::before, .pod-3::before { height: 4px; border-radius: 0 0 3px 3px; }

/* ===== Top Users podium v3: three different crowns and 3D blocks ===== */
.podium { perspective: 1300px; }
.pod { transform-style: preserve-3d; transition: transform .28s ease, box-shadow .28s ease; }
.pod::after { content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 45%); }
.pod > * { position: relative; z-index: 1; }
.pod .pod-crown { position: absolute; z-index: 2; top: 8px; left: 50%; transform: translateX(-50%); height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .22)); }
.pod-crown-1 { width: 68px; }
.pod-crown-2 { width: 52px; }
.pod-crown-3 { width: 50px; }
.pod-1 { padding-top: 66px; }
.pod-2, .pod-3 { padding-top: 54px; }

.pod-1 { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 8px 0 #0f8a3f, 0 28px 34px rgba(21, 163, 74, .32); transform: translateY(-14px); }
.pod-2 { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 8px 0 #1650b8, 0 24px 30px rgba(26, 102, 242, .28); transform: rotateY(8deg); }
.pod-3 { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 8px 0 #c25a0a, 0 24px 30px rgba(249, 115, 22, .28); transform: rotateY(-8deg); }
.pod-1:hover { transform: translateY(-20px); }
.pod-2:hover, .pod-3:hover { transform: translateY(-6px) rotateY(0deg); }

.pod-ring { box-shadow: 0 10px 16px rgba(0, 0, 0, .2), inset 0 2px 3px rgba(255, 255, 255, .7); }
.pod-1 .pod-ring { background: radial-gradient(circle at 30% 25%, #b5f7cf, #15a34a 62%, #0b6b30); }
.pod-2 .pod-ring { background: radial-gradient(circle at 30% 25%, #c3dbff, #1a66f2 62%, #0b3f9e); }
.pod-3 .pod-ring { background: radial-gradient(circle at 30% 25%, #ffd9b8, #f97316 62%, #b84a05); }
.pod-medal { box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 7px 10px rgba(0, 0, 0, .25); }
.pod-1 .pod-medal { background: radial-gradient(circle at 30% 28%, #7df0ac, #15a34a 58%, #0b6b30); }
.pod-2 .pod-medal { background: radial-gradient(circle at 30% 28%, #a9ccff, #1a66f2 58%, #0b3f9e); }
.pod-3 .pod-medal { background: radial-gradient(circle at 30% 28%, #ffc794, #f97316 58%, #b84a05); }
.pod-points b { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

@media (max-width: 900px) {
    .podium { perspective: 1000px; }
    .pod-crown-1 { width: 58px; } .pod-crown-2 { width: 44px; } .pod-crown-3 { width: 42px; }
    .pod-1 { padding-top: 56px; transform: translateY(-10px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 6px 0 #0f8a3f, 0 22px 28px rgba(21, 163, 74, .3); }
    .pod-2, .pod-3 { padding-top: 46px; }
    .pod-2 { transform: rotateY(5deg); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 6px 0 #1650b8, 0 18px 24px rgba(26, 102, 242, .26); }
    .pod-3 { transform: rotateY(-5deg); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 6px 0 #c25a0a, 0 18px 24px rgba(249, 115, 22, .26); }
}
@media (max-width: 640px) {
    .podium { perspective: none; margin-bottom: 28px; }
    .pod-crown-1 { width: 46px; } .pod-crown-2 { width: 34px; } .pod-crown-3 { width: 33px; }
    .pod .pod-crown { top: 7px; }
    .pod-1 { padding-top: 46px; transform: translateY(-6px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 4px 0 #0f8a3f, 0 14px 18px rgba(21, 163, 74, .28); }
    .pod-2, .pod-3 { padding-top: 38px; }
    .pod-2 { transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 4px 0 #1650b8, 0 12px 16px rgba(26, 102, 242, .24); }
    .pod-3 { transform: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .95), 0 4px 0 #c25a0a, 0 12px 16px rgba(249, 115, 22, .24); }
    .pod-1:hover { transform: translateY(-9px); }
    .pod-2:hover, .pod-3:hover { transform: translateY(-3px); }
}
@media (max-width: 380px) { .pod-crown-1 { width: 40px; } .pod-crown-2 { width: 30px; } .pod-crown-3 { width: 29px; } .pod-name { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .pod, .pod:hover { transition: none; } }
.pod .pod-crown { overflow: visible; }

/* ==========================================================
   Categories page (premium layout)
   ========================================================== */
.cats-page { max-width: 1080px; }
.cats-hero { text-align: center; padding: 18px 0 8px; }
.cats-eyebrow {
    display: inline-block; padding: 5px 14px; border-radius: 999px; background: #eaf2ff; color: var(--blue-600);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cats-title {
    margin: 14px 0 8px; font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); word-break: normal; overflow-wrap: normal; hyphens: none; white-space: normal;
}
.cats-sub { margin: 0 auto; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cats-search {
    position: relative; display: flex; align-items: stretch; height: 56px; max-width: 560px; margin: 24px auto 0;
    background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(16, 36, 80, .08); transition: border-color .15s, box-shadow .15s;
}
.cats-search:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(47, 123, 255, .16), 0 10px 30px rgba(16, 36, 80, .08); }
.cats-search-ico { position: absolute; left: 18px; top: 0; bottom: 0; display: flex; align-items: center; color: #8493ad; pointer-events: none; }
.cats-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 16px 0 52px;
    font-size: 16px; color: var(--ink);
}
.cats-search input::placeholder { color: #8d9ab2; }
.cats-search input::-webkit-search-cancel-button { display: none; }
.cats-search button {
    flex: none; width: 64px; border: 0; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
    display: flex; align-items: center; justify-content: center; transition: filter .15s;
}
.cats-search button:hover { filter: brightness(1.08); }
.cats-result-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.cats-result-note a { margin-left: 8px; color: var(--blue-600); font-weight: 500; }

.cats-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 24px; }

.cats-card {
    --c-bg: #eaf2ff; --c-fg: #2563eb; --c-bd: #d3e3ff;
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px;
    background: var(--c-bg); border: 1px solid var(--c-bd); border-radius: 5px; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cats-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 36, 80, .12); }
.cats-tone-blue   { --c-bg: #eaf2ff; --c-fg: #2563eb; --c-bd: #d3e3ff; }
.cats-tone-pink   { --c-bg: #ffeef3; --c-fg: #e11d48; --c-bd: #ffd6e0; }
.cats-tone-green  { --c-bg: #e8f8ef; --c-fg: #16a34a; --c-bd: #c9efd9; }
.cats-tone-amber  { --c-bg: #fff6e0; --c-fg: #d98200; --c-bd: #ffe6ae; }
.cats-tone-purple { --c-bg: #f3edff; --c-fg: #7c3aed; --c-bd: #e2d5ff; }
.cats-tone-sky    { --c-bg: #e6f6ff; --c-fg: #0891b2; --c-bd: #c4e9fa; }
.cats-tone-orange { --c-bg: #fff0e6; --c-fg: #ea6a12; --c-bd: #ffdcc4; }
.cats-tone-red    { --c-bg: #ffeded; --c-fg: #dc2626; --c-bd: #ffd3d3; }
.cats-tone-violet { --c-bg: #eeefff; --c-fg: #4f46e5; --c-bd: #d9dbff; }
.cats-tone-teal   { --c-bg: #e5f8f5; --c-fg: #0d9488; --c-bd: #c3ede7; }

.cats-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.cats-ico {
    flex: none; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--c-fg); box-shadow: 0 6px 16px rgba(16, 36, 80, .08);
}
.cats-meta { flex: 1; min-width: 0; }
.cats-meta strong { display: block; font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.cats-meta small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.cats-arrow {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .85); color: var(--c-fg); transition: transform .18s ease;
}
.cats-card:hover .cats-arrow { transform: translateX(3px); }

.cats-subs { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--c-bd); }
.cats-subs a {
    display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9);
    font-size: 12.5px; font-weight: 500; color: var(--c-fg); text-decoration: none; transition: background .15s, color .15s;
}
.cats-subs a:hover { background: var(--c-fg); color: #fff; }

.cats-empty {
    margin: 30px auto; max-width: 440px; padding: 40px 24px; text-align: center; background: #fff;
    border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(16, 36, 80, .06);
}
.cats-empty-ico { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: #eaf2ff; color: var(--blue-600); }
.cats-empty h2 { margin: 16px 0 6px; font-size: 20px; color: var(--ink); }
.cats-empty p { margin: 0 0 18px; color: var(--muted); }

@media (max-width: 992px) {
    .cats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cats-hero { padding-top: 6px; }
    .cats-title { font-size: 30px; }
    .cats-sub { font-size: 14.5px; }
    .cats-search { height: 52px; margin-top: 20px; border-radius: 5px; }
    .cats-list { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
    .cats-card { padding: 16px; border-radius: 5px; }
    .cats-ico { width: 50px; height: 50px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cats-card, .cats-arrow { transition: none; }
    .cats-card:hover { transform: none; }
}

/* ==========================================================
   Single category page header (wraps cleanly on mobile)
   ========================================================== */
.cat-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 20px; padding: 20px;
    background: var(--tone-bg, #eaf2ff); border: 1px solid rgba(16, 36, 80, .07); border-radius: 5px;
}
.cat-hero-ico {
    flex: none; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--tone-fg, #2563eb); box-shadow: 0 6px 16px rgba(16, 36, 80, .08);
}
.cat-hero-text { flex: 1 1 200px; min-width: 0; }
.cat-hero-title {
    margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
    overflow-wrap: break-word; word-break: normal; hyphens: none;
}
.cat-hero-count { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cat-hero-btn { flex: none; }

@media (max-width: 640px) {
    .cat-hero { padding: 16px; gap: 14px; }
    .cat-hero-ico { width: 50px; height: 50px; border-radius: 14px; }
    .cat-hero-text { flex: 1 1 calc(100% - 70px); }
    .cat-hero-title { font-size: 24px; }
    .cat-hero-btn { flex: 1 1 100%; width: 100%; justify-content: center; text-align: center; }
}

/* safety net: titles beside buttons never break in the middle of a word */
.section-head { flex-wrap: wrap; }
.section-head .page-title { overflow-wrap: break-word; word-break: normal; min-width: 0; margin-bottom: 0; }

/* Single category page: narrower, centered column on desktop */
.cat-detail-page { max-width: 920px; margin-left: auto; margin-right: auto; }
@media (max-width: 992px) {
    .cat-detail-page { max-width: 100%; }
}

/* Experts page: card corners 5px */
.expert-card { border-radius: 5px; }

/* ==========================================================
   Brokers and Tools (comparison tables)
   ========================================================== */
.rv-page { max-width: 1240px; }
.rv-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; padding: 20px;
    background: var(--tone-bg, #eaf2ff); border: 1px solid rgba(16, 36, 80, .07); border-radius: 8px;
}
.rv-hero-ico {
    flex: none; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--tone-fg, #2563eb); box-shadow: 0 6px 16px rgba(16, 36, 80, .08);
}
.rv-hero-text { flex: 1 1 220px; min-width: 0; }
.rv-title { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.rv-meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.rv-intro { margin: 0 0 16px; max-width: 900px; }
.rv-note { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; border: 1px solid; overflow-wrap: anywhere; }
.rv-note a { text-decoration: underline; }
.rv-note-info { background: #eef5ff; border-color: #cfe0fb; color: #27406e; }
.rv-note-warn { background: #fff6e5; border-color: #f6d9a0; color: #7a4b00; margin-top: 18px; }

.rv-table-wrap { width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 36, 80, .03); }
.rv-table { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14px; }
.rv-table th {
    text-align: left; padding: 13px 14px; background: #f3f7fd; color: var(--ink); font-weight: 600; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rv-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); overflow-wrap: anywhere; }
.rv-table tbody tr:last-child td { border-bottom: 0; }
.rv-table tbody tr:hover td { background: #fafcff; }
.rv-th-rank, .rv-rank { width: 48px; text-align: center; }
.rv-rankno {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
    background: #eaf2ff; color: var(--blue-600); font-weight: 700; font-size: 13px;
}
.rv-table tbody tr:nth-child(1) .rv-rankno { background: #fff1c7; color: #a56a00; }
.rv-table tbody tr:nth-child(2) .rv-rankno { background: #eceff4; color: #4b5870; }
.rv-table tbody tr:nth-child(3) .rv-rankno { background: #fde6d3; color: #a2500f; }
.rv-name-cell { min-width: 250px; }
.rv-name { display: flex; align-items: flex-start; gap: 12px; }
.rv-logo { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; }
.rv-name .avatar-initials { border-radius: 10px; flex: none; }
.rv-logo-link { flex: none; display: inline-flex; border-radius: 10px; }
.rv-name-link { color: inherit; text-decoration: none; }
.rv-name-link:hover, .rv-name-link:focus-visible { color: var(--blue-600); text-decoration: underline; }
.rv-name-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-name-text strong { color: var(--ink); font-size: 15px; line-height: 1.3; }
.rv-badge { align-self: flex-start; background: #e6f7ee; color: #15803d; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.rv-summary { color: var(--muted); font-size: 13px; line-height: 1.5; }
.rv-rate { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rv-num { color: var(--ink); font-size: 15px; }
.rv-stars { --p: 0%; position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 2px; color: #d6dbe6; }
.rv-stars::before { content: "\2605\2605\2605\2605\2605"; }
.rv-stars::after { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; width: var(--p); overflow: hidden; white-space: nowrap; color: #f5a623; }
.rv-dash { color: #a5b0c4; }
.rv-act { white-space: nowrap; text-align: right; }
.rv-btn { height: 36px; }
[hidden] { display: none !important; }
.rv-more-toggle { margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--blue-600); font: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.rv-more-toggle::before { content: "+ "; font-weight: 700; }
.rv-more-toggle[aria-expanded="true"]::before { content: "\2212  "; }
.rv-table tr.rv-detail-row td { padding: 0 14px 14px; background: #fff; }
.rv-table tbody tr.rv-detail-row:hover td { background: #fff; }
.rv-more-body { margin-top: 0; padding: 12px 14px; background: #f7faff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; }
.rv-more-h { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rv-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; }
.rv-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rv-facts dd { margin: 2px 0 0; color: var(--ink); font-size: 13.5px; }
.rv-pc strong { display: block; font-size: 13px; margin-bottom: 4px; }
.rv-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rv-pc li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.rv-pc li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.rv-pros strong { color: #15803d; } .rv-pros li::before { content: "+"; color: #15803d; }
.rv-cons strong { color: #b42323; } .rv-cons li::before { content: "\2212"; color: #b42323; }
.rv-foot { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.rv-article { margin-top: 22px; padding: 26px 28px; }
.rv-others { margin-top: 26px; }
.rv-others h2 { font-size: 18px; color: var(--ink); margin-bottom: 12px; }

/* hub */
.rv-group { margin-top: 26px; }
.rv-group-title { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--ink); margin-bottom: 14px; }
.rv-group-ico { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-bg, #eaf2ff); color: var(--tone-fg, #2563eb); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rv-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; transition: transform .15s, box-shadow .15s; }
.rv-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 36, 80, .1); }
.rv-card-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-bg, #eaf2ff); color: var(--tone-fg, #2563eb); }
.rv-card strong { font-size: 16.5px; color: var(--ink); line-height: 1.3; }
.rv-card-text { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.rv-card small { color: var(--tone-fg, #2563eb); font-weight: 600; }

/* homepage block */
.rv-home { margin-top: 28px; }

@media (max-width: 860px) {
    .rv-title { font-size: 25px; }
    .rv-article { padding: 20px 18px; }
    /* tables turn into cards on tablets and phones */
    .rv-table-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .rv-table { min-width: 0; display: block; }
    .rv-table thead { display: none; }
    .rv-table tbody { display: grid; gap: 14px; }
    .rv-table tr { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 1px 2px rgba(16, 36, 80, .03); }
    .rv-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); text-align: right; }
    .rv-table td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
    .rv-table tbody tr:hover td { background: transparent; }
    .rv-table td.rv-rank { position: absolute; top: 12px; right: 12px; width: auto; padding: 0; border: 0; display: block; }
    .rv-table td.rv-rank::before { display: none; }
    .rv-table td.rv-name-cell { display: block; text-align: left; padding-top: 0; padding-right: 44px; min-width: 0; }
    .rv-table td.rv-name-cell::before { display: none; }
    .rv-table td.rv-act { display: block; text-align: left; border-bottom: 0; padding-bottom: 0; }
    .rv-table td.rv-act::before { display: none; }
    .rv-table td.rv-act-empty { display: none; }
    .rv-table td.rv-act .rv-btn { width: 100%; height: 42px; }
    .rv-table tr.rv-detail-row { margin-top: -10px; padding: 0 14px 14px; border-top: 0; border-radius: 0 0 12px 12px; }
    .rv-table tr.rv-detail-row td { display: block; padding: 0; border: 0; text-align: left; }
    .rv-table tr.rv-detail-row td::before { display: none; }
    .rv-more-h { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
    .rv-more-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rv-more-h .rv-facts { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .rv-hero { padding: 16px; }
    .rv-grid { grid-template-columns: minmax(0, 1fr); }
    .rv-note { padding: 11px 13px; }
}