:root {
    --ink: #2c2440;
    --ink-soft: #4a4160;
    --muted: #645a78;
    --paper: #fff6ec;
    --card: #fffdfb;
    --line: #ffd8b8;
    --teal: #5b6cff;
    --teal-deep: #3d4ad4;
    --gold: #e09b12;
    --header: #5b6cff;
    --lower: #1f7a45;
    --lower-bg: #d9fbe8;
    --moderate: #9a6208;
    --moderate-bg: #fff1c9;
    --high: #c2410c;
    --high-bg: #ffe4d4;
    --severe: #be123c;
    --severe-bg: #ffe0ea;
    --shadow: 0 10px 28px rgba(44, 36, 64, 0.07);
    --serif: Fredoka, "Trebuchet MS", sans-serif;
    --sans: Nunito, "Segoe UI", sans-serif;
    --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(#ffd7a8 1.4px, transparent 1.5px),
        radial-gradient(circle at 0 0, rgba(255, 138, 173, 0.35), transparent 32%),
        radial-gradient(circle at 100% 0, rgba(91, 108, 255, 0.28), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(56, 217, 169, 0.28), transparent 28%),
        radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.45), transparent 26%);
    background-size: 22px 22px, auto, auto, auto, auto;
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--teal-deep); }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; font-weight: 560; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--gold); 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;
}
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: #fff;
    color: var(--ink);
    padding: 0.6rem 0.9rem;
    z-index: 50;
}
.skip-link:focus { top: 0.6rem; }

.wrap { width: min(var(--wrap), calc(100% - 2rem)); margin: 0 auto; }
.narrow { width: min(760px, calc(100% - 2rem)); }
.kicker {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 0.6rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(100deg, #6c63ff 0%, #4dabf7 58%, #3dd6a3 100%);
    color: #fff;
    padding-top: env(safe-area-inset-top);
}
.header-inner {
    position: relative;
    width: min(var(--wrap), calc(100% - 2rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.6rem;
}
.logo { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.logo-mark { width: 2.6rem; height: 2.6rem; color: #fff8e8; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.logo-sub { font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.site-nav { display: flex; align-items: center; gap: 0.3rem; }
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 800;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.22); }
.nav-help { background: #ffe66d; color: #3a2a00 !important; }
.nav-help:hover { background: #ffd43b !important; }
.nav-contact { background: #fff; color: #3b348c !important; }
.nav-contact:hover, .nav-contact[aria-current="page"] { background: #efeaff !important; }
.nav-editor { border: 2px solid rgba(255,255,255,.7); }
.contact-list { padding-left: 1.2rem; }
.contact-list li { margin: 0.45rem 0; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.contact-grid { display: grid; gap: 0.8rem; margin: 0.4rem 0 2rem; }
.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.15rem 1.2rem;
    text-decoration: none;
    color: inherit;
    min-height: 5.2rem;
}
.contact-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    background: #efeaff;
    color: var(--teal-deep);
    margin-bottom: 0.35rem;
}
.contact-card-icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-card strong { font-family: var(--serif); font-size: 1.45rem; }
.contact-card span { color: var(--teal-deep); font-weight: 800; overflow-wrap: anywhere; }
.nav-toggle {
    display: none;
    align-items: center;
    background: #ffe66d;
    color: #3a2a00;
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-weight: 800;
    gap: 0.35rem;
}
.icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    display: block;
}
.icon-nav { width: 1.05rem; height: 1.05rem; opacity: 0.95; }
.icon-nav-toggle { width: 1.2rem; height: 1.2rem; }
.icon-btn { width: 1.1rem; height: 1.1rem; }
.icon-inline {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    margin-right: 0.2rem;
}
.icon-risk { width: 0.95rem; height: 0.95rem; display: inline-block; vertical-align: -0.12em; margin-right: 0.2rem; }
.icon-search {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.15rem;
    height: 1.15rem;
    color: var(--muted);
    pointer-events: none;
}
.icon-tile-arrow { width: 1.15rem; height: 1.15rem; color: var(--muted); margin-left: auto; }
.button .icon, .button-ghost .icon, button .icon { margin-right: 0.35rem; }
.chip .icon { width: 1rem; height: 1rem; }
.risk .icon { width: 0.9rem; height: 0.9rem; }
.guide-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.guide-card-meta .icon { width: 0.95rem; height: 0.95rem; color: var(--teal); }

.flash-wrap { width: min(var(--wrap), calc(100% - 2rem)); margin: 1rem auto 0; }
.flash { margin: 0; padding: 0.8rem 1rem; border-radius: 12px; background: #e7f6f2; color: var(--teal-deep); }
.flash-bad { background: #fdecea; color: #7d2430; }

.home-hero {
    background:
        linear-gradient(115deg, rgba(108, 99, 255, 0.16), rgba(61, 214, 163, 0.12) 55%, rgba(255, 214, 102, 0.18)),
        radial-gradient(circle at 90% 20%, rgba(255, 138, 173, 0.28), transparent 40%);
    border-bottom: 1px solid #f0e2d4;
    padding: 2.4rem 0 1.8rem;
}
.home-hero-inner {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr;
    gap: 1.6rem;
    align-items: center;
}
.brand-mark {
    margin: 0 0 0.55rem;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--teal-deep);
    letter-spacing: -0.02em;
}
.home-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    margin: 0 0 0.85rem;
    letter-spacing: -0.03em;
}
.home-hero-visual {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
}
.hero-shield {
    width: min(11rem, 42vw);
    height: min(11rem, 42vw);
    border-radius: 2rem;
    display: grid;
    place-items: center;
    color: #fff8e8;
    background: linear-gradient(145deg, #6c63ff, #3dd6a3);
    box-shadow: 0 16px 0 rgba(61, 74, 212, 0.18), var(--shadow);
}
.hero-shield svg { width: 58%; height: 58%; }
.hero-visual-note {
    margin: 0;
    font-weight: 800;
    color: var(--ink-soft);
}
.dek { font-size: 1.2rem; color: var(--ink-soft); max-width: 40rem; }
.hero-actions, .cluster { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0; }
.button, button, .button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.75rem 1.15rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.button, button.button {
    background: var(--teal);
    color: white;
    box-shadow: 0 4px 0 #3a46c4;
}
.button:hover, button.button:hover { background: var(--teal-deep); transform: translateY(-1px); }
.button:active, button.button:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a46c4; }
.button-ghost { background: #fff; color: var(--ink); border-color: #ffc48a; box-shadow: 0 4px 0 #ffd7b0; }
button.button-danger { background: var(--severe); color: white; box-shadow: 0 4px 0 #8e1230; }
.tonight, .panel, .guide-card, .article-card, .video-card, .aside-card, .form-card, .login-card, .talk-card, .contact-card,
.start-tile, .category-tile, .extra-tile, .home-help-banner {
    background: var(--card);
    border: 1px solid #f0e2d4;
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.tonight-row { padding: 1.4rem 0 0.2rem; }
.tonight { padding: 1.3rem 1.3rem 1rem; }
.tonight h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.tonight ol { margin: 0; padding-left: 1.2rem; }
.tonight li { margin: 0.55rem 0; }
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 800;
}

.home-start { padding: 1.6rem 0 0.4rem; }
.home-start-title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
}
.start-grid, .category-grid, .extra-grid {
    display: grid;
    gap: 0.75rem;
}
.start-grid { grid-template-columns: repeat(2, 1fr); }
.start-tile, .extra-tile, .home-help-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    text-decoration: none;
    color: inherit;
    min-height: 5.2rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.start-tile:hover, .category-tile:hover, .extra-tile:hover, .home-help-banner:hover {
    transform: translateY(-2px);
    border-color: #e4d0bc;
}
.start-icon, .extra-icon, .home-help-icon, .step-icon, .article-card-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.95rem;
    display: grid;
    place-items: center;
    flex: none;
    background: #efeaff;
    color: var(--teal-deep);
}
.start-icon .icon, .extra-icon .icon, .home-help-icon .icon, .step-icon .icon, .article-card-icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}
.start-copy, .extra-tile > span:nth-child(2), .home-help-banner > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.start-copy strong, .extra-tile strong, .home-help-banner strong {
    font-family: var(--serif);
    font-size: 1.2rem;
}
.start-copy span, .extra-tile span span, .home-help-banner span span {
    color: var(--muted);
    font-size: 0.95rem;
}
.start-lower .start-icon { background: var(--lower-bg); color: var(--lower); }
.start-severe .start-icon { background: var(--severe-bg); color: var(--severe); }
.start-help .start-icon, .home-help-icon { background: #fff3bf; color: #8a6a00; }

.home-categories { padding: 1.5rem 0 0.2rem; }
.category-grid { grid-template-columns: repeat(4, 1fr); }
.category-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    font-weight: 800;
    min-height: 6.2rem;
}
.category-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    display: grid;
    place-items: center;
    background: #efeaff;
    color: var(--teal-deep);
}
.category-icon .icon { width: 1.25rem; height: 1.25rem; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; padding: 1.5rem 0 0.5rem; }
.step { padding: 1rem 1rem 0.9rem; background: #fff; border: 1px solid #f0e2d4; border-radius: 16px; box-shadow: var(--shadow); }
.step:nth-child(1) { border-top: 6px solid #ff8fab; }
.step:nth-child(2) { border-top: 6px solid #ffd43b; }
.step:nth-child(3) { border-top: 6px solid #3dd6a3; }
.step:nth-child(4) { border-top: 6px solid #6c63ff; }
.step-icon { margin-bottom: 0.7rem; }
.step:nth-child(1) .step-icon { background: #ffe0ea; color: #be123c; }
.step:nth-child(2) .step-icon { background: #fff1c9; color: #9a6208; }
.step:nth-child(3) .step-icon { background: #d9fbe8; color: #1f7a45; }
.step:nth-child(4) .step-icon { background: #efeaff; color: #3b348c; }
.step strong { display: block; font-family: var(--serif); font-size: 1.25rem; margin-bottom: 0.3rem; }
.step > span:last-child { color: var(--muted); font-size: 0.95rem; }

.section { padding: 2.2rem 0; }
.section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.section-head h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-head a, .section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    text-decoration: none;
}
.home-extra { padding-top: 0.4rem; }
.extra-grid { grid-template-columns: repeat(2, 1fr); }
.home-bottom { padding: 0 0 2.4rem; }
.home-help-banner { width: 100%; }
.article-card-icon { margin-bottom: 0.7rem; }

.card-grid, .article-grid, .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.guide-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.guide-card:hover { transform: translateY(-3px); border-color: #e4d0bc; }
.guide-card[data-match="0"] { display: none; }
.app-logo {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1.05rem;
    display: grid;
    place-items: center;
    flex: none;
    box-shadow: 0 4px 0 rgba(44, 36, 64, 0.12);
    overflow: hidden;
}
.app-logo img { width: 62%; height: 62%; object-fit: contain; filter: brightness(0) invert(1); }
.app-logo.is-dark img { filter: brightness(0); }
.app-logo-lg { width: 4.6rem; height: 4.6rem; border-radius: 1.35rem; }
.app-logo-xs { width: 1.45rem; height: 1.45rem; border-radius: 0.4rem; box-shadow: none; }
.app-logo-xs img { width: 68%; height: 68%; }
.app-logo-letter { color: #fff; font-family: var(--serif); font-size: 1.3rem; }
.logo-whatsapp { background: #25D366; }
.logo-snapchat { background: #FFFC00; }
.logo-tiktok { background: #111; }
.logo-instagram { background: radial-gradient(circle at 30% 110%, #feda75, #fa7e1e 36%, #d62976 62%, #4f5bd5); }
.logo-discord { background: #5865F2; }
.logo-youtube { background: #FF0033; }
.logo-roblox { background: #E2231A; }
.logo-fortnite { background: #111; }
.logo-minecraft { background: #3B8526; }
.logo-tumblr { background: #001935; }
.logo-tinder { background: #FE3C72; }
.logo-bumble { background: #FFC629; }
.logo-kik { background: #82BC23; }
.logo-bereal { background: #111; }
.logo-grindr { background: #F5C518; }
.logo-hinge { background: #111; }
.logo-omegle { background: #4B7BE5; }
.logo-meetme { background: #7B2CBF; }
.logo-yubo { background: #FFE500; }
.logo-whisper { background: #4A1D6A; }
.logo-liveme { background: #FF2D55; }
.logo-wizz { background: #7C4DFF; }
.logo-monkey { background: #F4A261; }
.logo-holla { background: #FF2E63; }
.logo-chatous { background: #14B8A6; }
.logo-tagged { background: #1D4ED8; }
.logo-seeking { background: #111; }
.logo-sugar { background: #6B3A2A; }
.logo-chatdate { background: #E85D75; }
.logo-vault { background: #4B5563; }
.logo-vr { background: #312e81; }
.logo-badoo { background: #FF6D00; }
.logo-askfm { background: #E31E24; }
.logo-skout { background: #0EA5E9; }
.logo-fallback { background: #7c5cbf; }
.logo-messenger { background: #0084ff; }
.logo-messenger-kids { background: #0099d6; }
.logo-telegram { background: #229ed9; }
.logo-signal { background: #3a76f0; }
.logo-facebook { background: #1877f2; }
.logo-x { background: #111111; }
.logo-reddit { background: #ff4500; }
.logo-threads { background: #262626; }
.logo-pinterest { background: #e60023; }
.logo-likee { background: #ff2d55; }
.logo-ngl { background: #111111; }
.logo-tellonym { background: #e11d74; }
.logo-zepeto { background: #5b4dff; }
.logo-imvu { background: #6d28d9; }
.logo-amino { background: #0f766e; }
.logo-twitch { background: #9146ff; }
.logo-kick { background: #166534; }
.logo-ometv { background: #dc2626; }
.logo-chatroulette { background: #b45309; }
.logo-among-us { background: #c51111; }
.logo-pokemon { background: #1d4ed8; }
.logo-cod { background: #1f2937; }
.logo-pubg { background: #92400e; }
.logo-freefire { background: #ea580c; }
.logo-gta { background: #111111; }
.logo-gorilla { background: #166534; }
.logo-life360 { background: #6d28d9; }
.logo-ytkids { background: #dc2626; }
.logo-okcupid { background: #1d4ed8; }
.logo-pof { background: #c2410c; }
.logo-feeld { background: #111111; }
.logo-onlyfans { background: #0891b2; }
.logo-monument { background: #0f766e; }
.logo-stardew { background: #3f6212; }
.logo-subway { background: #0369a1; }
.logo-crossy { background: #b45309; }
.logo-block { background: #7c3aed; }
.logo-candy { background: #be185d; }
.logo-royal { background: #1d4ed8; }
.logo-garden { background: #15803d; }
.logo-toca { background: #c2410c; }
.logo-tom { background: #a16207; }
.logo-mario { background: #b91c1c; }
.logo-clash { background: #b45309; }
.logo-royale { background: #1e3a8a; }
.logo-brawl { background: #c2410c; }
.logo-stumble { background: #7e22ce; }
.logo-8ball { background: #14532d; }
.logo-coin { background: #a16207; }
.logo-monopoly { background: #9f1239; }
.logo-tcg { background: #1d4ed8; }
.logo-fc { background: #166534; }
.logo-genshin { background: #1e3a8a; }
.logo-pkxd { background: #0369a1; }
.logo-codm { background: #111827; }
.logo-whiteout { background: #1e40af; }
.score-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.section-note { color: var(--ink-soft); margin: 0.35rem 0 0; }
.guide-title-row { display: flex; gap: 1rem; align-items: center; }
.guide-title-row h1 { margin-top: 0; }
.name-cell { display: flex; align-items: center; gap: 0.55rem; }
.guide-card-body, .guide-card-top { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.guide-card-top { flex-direction: row; justify-content: space-between; align-items: start; gap: 0.6rem; }
.guide-card-name { font-family: var(--serif); font-size: 1.25rem; }
.guide-card-summary, .guide-card-meta { color: var(--ink-soft); }
.guide-card-meta { font-size: 0.88rem; }

.risk {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.guide-card .risk {
    max-width: 100%;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    justify-content: flex-end;
}
.risk-lower { background: var(--lower-bg); color: var(--lower); }
.risk-moderate { background: var(--moderate-bg); color: var(--moderate); }
.risk-high { background: var(--high-bg); color: var(--high); }
.risk-severe { background: var(--severe-bg); color: var(--severe); }

.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.ladder div { background: rgba(255,252,247,.7); border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem; }
.ladder strong { display: block; margin-bottom: 0.25rem; }

.dating-panel {
    background: #fff1f4;
    color: var(--ink);
    border: 1px solid #ffd0dc;
    border-radius: 18px;
    padding: 1.4rem;
    box-shadow: var(--shadow);
}
.dating-panel h2, .dating-panel a { color: var(--ink); }
.dating-panel p { color: var(--ink-soft); }
.name-list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.name-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    background: #fff;
    border: 2px solid #ffd0dc;
    border-radius: 999px;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
}
.name-list a:hover { background: #ffe4ec; }

.filter-block { margin: 0.85rem 0 0; }
.filter-block + .filter-block { margin-top: 0.55rem; }
.filter-label {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.35rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}
.chip.is-active { background: #5b6cff; color: white; border-color: #5b6cff; }
.chip-risk-lower { background: var(--lower-bg); border-color: #b7ebcc; color: var(--lower); }
.chip-risk-moderate { background: var(--moderate-bg); border-color: #f0d58a; color: var(--moderate); }
.chip-risk-high { background: var(--high-bg); border-color: #f0b89a; color: var(--high); }
.chip-risk-severe { background: var(--severe-bg); border-color: #f0b0c2; color: var(--severe); }
.chip-risk-lower.is-active { background: var(--lower); border-color: var(--lower); color: #fff; }
.chip-risk-moderate.is-active { background: var(--moderate); border-color: var(--moderate); color: #fff; }
.chip-risk-high.is-active { background: var(--high); border-color: var(--high); color: #fff; }
.chip-risk-severe.is-active { background: var(--severe); border-color: var(--severe); color: #fff; }
.search-row { display: flex; gap: 0.5rem; }
.search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}
.search-field input { padding-left: 2.55rem; }
.search-row input,
.form-card input:not([type="checkbox"]):not([type="radio"]),
.form-card textarea,
.form-card select,
.login-card input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid #e6d8ca;
    border-radius: 12px;
    padding: 0.82rem 0.95rem;
    box-shadow: inset 0 1px 2px rgba(44, 36, 64, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-row input:focus,
.form-card input:not([type="checkbox"]):focus,
.form-card textarea:focus,
.form-card select:focus,
.login-card input:not([type="checkbox"]):focus {
    outline: none;
    border-color: #8b96ff;
    box-shadow: 0 0 0 4px rgba(91, 108, 255, 0.16);
}
.search-row input { flex: 1; }
.empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
}

.crumbs { color: var(--muted); font-size: 0.92rem; }
.crumbs a { color: var(--muted); }
.guide-hero h1, .prose h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 0.6rem; }
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.facts li { background: white; border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.7rem; }
.guide-layout, .split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.prose h2 { font-size: 1.8rem; margin: 2rem 0 0.6rem; }
.prose h3 { font-size: 1.25rem; margin: 1.4rem 0 0.45rem; }
.example-groups { margin-top: 2rem; }
.example-groups .related { margin: 0 0 0.8rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin: 0.35rem 0; }
.aside-card { padding: 1rem 1.1rem; position: sticky; top: 5.4rem; }
.aside-card h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.aside-card + .aside-card, .stack > * + * { margin-top: 0.8rem; }
.help-card { background: #3d4ad4; color: #fff; border: 0; }
.help-card a { color: #ffe66d; }
.video-frame { position: relative; padding-top: 56.25%; background: #101820; border-radius: 16px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-pending { padding: 1.2rem; background: white; border: 1px dashed var(--line); border-radius: 16px; }
.related { display: grid; gap: 0.45rem; }
.related a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800; }
.news-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.news-list li { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 0.85rem 1rem; }
.news-list a { font-weight: 800; }
.news-note { display: block; color: var(--ink-soft); margin-top: 0.25rem; }

.article-card, .video-card { padding: 1.1rem 1.15rem; }
.article-card { text-decoration: none; color: inherit; display: block; }
.article-card h2, .video-card h2 { margin: 0 0 0.4rem; font-size: 1.45rem; }
.meta { color: var(--muted); font-size: 0.9rem; }

.help-list { display: grid; gap: 0.8rem; }
.help-item { padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.help-item h2 { margin: 0 0 0.3rem; font-size: 1.4rem; }
.phone { font-family: var(--serif); font-size: 1.8rem; margin: 0.2rem 0; }

.poster { border-radius: 16px; border: 1px solid var(--line); }

.site-footer { margin-top: 3rem; background: #3b348c; color: #efeaff; padding: 2rem 0 calc(1rem + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1.5rem; }
.footer-name { font-family: var(--serif); color: white; font-size: 1.5rem; margin: 0 0 0.4rem; }
.footer-label { color: #ffe66d; font-weight: 800; margin-bottom: 0.4rem; }
.site-footer a { color: #fff; text-decoration: none; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0.25rem 0; }
.footer-base { border-top: 1px solid rgba(255,255,255,.1); margin-top: 1.4rem; padding-top: 0.8rem; color: #aeb8c8; font-size: 0.92rem; }

.page-intro { padding: 2.2rem 0 0.4rem; }
.page-intro h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); margin: 0 0 0.6rem; }

.form-card, .login-card { padding: 1.5rem 1.4rem 1.35rem; }
.login-card { width: min(440px, calc(100% - 2rem)); margin: 2.4rem auto; }
.form-grid { display: grid; gap: 1rem; }
.form-grid > label { font-size: 0.92rem; font-weight: 800; color: var(--ink-soft); }
label { display: grid; gap: 0.35rem; font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 700; color: var(--ink); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: #5b6cff; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.92rem; }
.errors { background: #fff5f4; color: #7d2430; border: 1px solid #f3c9c6; border-radius: 12px; padding: 0.75rem 0.95rem; }
.errors p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid #f0e2d4; border-radius: 16px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
.talk-list { display: grid; gap: 0.8rem; }
.talk-card { display: block; padding: 1rem 1.1rem; text-decoration: none; color: inherit; }
.talk-card h2 { margin: 0 0 0.25rem; font-size: 1.35rem; }
.talk-card p:last-child { margin-bottom: 0; }
.post {
    background: #fff;
    border: 1px solid #f0e2d4;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin: 0.8rem 0;
    box-shadow: var(--shadow);
}
.post h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.post-meta { color: var(--muted); font-size: 0.92rem; margin: 0 0 0.45rem; }
.post-body { overflow-wrap: anywhere; }
.raw-body { background: #fff8ef; }
.composer { margin: 1.2rem 0; }
.room-invite { padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.badge, .badge-closed {
    display: inline-block;
    margin-left: 0.35rem;
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    vertical-align: 0.12em;
}
.badge-owner { background: #efeaff; color: #3b348c; }
.badge-staff { background: #e7f8f2; color: #0f6e56; }
.badge-closed { background: #ffe0ea; color: #be123c; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.7rem; }
.check.compact { font-size: 0.88rem; font-weight: 700; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.stat strong { display: block; font-family: var(--serif); font-size: 2rem; }
.warn {
    background: #f8efd8;
    border: 1px solid #e4cf9d;
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

@media (max-width: 900px) {
    .home-hero-inner, .start-grid, .category-grid, .extra-grid,
    .guide-layout, .split, .steps, .ladder, .footer-grid, .card-grid, .article-grid, .video-grid, .admin-stats {
        grid-template-columns: 1fr;
    }
    .aside-card { position: static; }
    .logo { min-width: 0; }
    .logo-text { min-width: 0; }
    .logo-name { font-size: 1.02rem; }
    .logo-sub { display: none; }
    .header-inner { gap: 0.55rem; min-height: 4.1rem; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.45rem 0.95rem;
        flex: none;
    }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #4f46e5;
        padding: 0.45rem 0.75rem 0.85rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        max-height: calc(100dvh - 4.1rem - env(safe-area-inset-top));
        overflow: auto;
        box-shadow: 0 18px 32px rgba(44, 36, 64, 0.2);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.55rem 0.95rem;
        font-size: 1.05rem;
    }
    .home-hero { padding: 1.35rem 0 1.1rem; }
    .home-hero-visual { order: -1; }
    .hero-shield { width: 5.8rem; height: 5.8rem; border-radius: 1.35rem; box-shadow: 0 8px 0 rgba(61, 74, 212, 0.16), var(--shadow); }
    .home-hero h1, .page-intro h1, .prose h1, .guide-hero h1 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
    .brand-mark { font-size: 1.2rem; }
    .page-intro { padding-top: 1.3rem; }
    .section { padding: 1.35rem 0; }
    .section-head { align-items: start; flex-direction: column; }
    .dek { font-size: 1.05rem; }
    .button, button, .button-ghost { min-height: 48px; }
    .search-row { flex-direction: column; }
    .chip { min-height: 44px; display: inline-flex; align-items: center; }
    .name-list a { min-height: 44px; }
    .start-tile, .extra-tile, .home-help-banner, .category-tile { min-height: 4.6rem; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .card-grid-scroll {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        padding-bottom: 0.35rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .card-grid-scroll .guide-card {
        flex: 0 0 min(86vw, 320px);
        scroll-snap-align: start;
    }
    .guide-title-row { align-items: flex-start; }
    .app-logo-lg { width: 3.4rem; height: 3.4rem; }
    input, textarea, select { font-size: 16px; }
    .wrap, .header-inner, .flash-wrap, .narrow { width: min(var(--wrap), calc(100% - 1.25rem)); }
    body { overflow-wrap: break-word; }
    .footer-grid { gap: 1.2rem; }
    .site-footer a { display: inline-flex; min-height: 44px; align-items: center; }
}

@media (max-width: 420px) {
    .hero-actions .button, .contact-actions .button, .search-row .button { width: 100%; }
    .steps { gap: 0.65rem; }
    .category-grid { grid-template-columns: 1fr 1fr; }
    .start-copy span { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .guide-card:hover, .start-tile:hover, .category-tile:hover, .extra-tile:hover, .home-help-banner:hover,
    .button:hover, button.button:hover { transform: none; }
}

@media print {
    .site-header, .site-footer, .nav-toggle, .no-print, .hero-actions { display: none !important; }
    body { background: white; }
    .guide-layout { display: block; }
    a { color: black; text-decoration: none; }
}