/* ============================================
   THEME — LOFI JAPANESE (Campus)
   Mint + Purple, adapted from go-2.
   Loaded AFTER styles.css.
   ============================================ */



@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@200;300;400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg: #1a1a2e !important;
    --bg-deep: #101024;
    --text: #edf5f0 !important;
    --text-soft: #b0c4b8;
    --text-muted: #6b8078 !important;
    --muted: #9aa8b8 !important;
    --mint: #5de0b8;
    --mint-soft: rgba(93, 224, 184, 0.15);
    --mint-glow: rgba(93, 224, 184, 0.28);
    --accent: #7c3aed;
    --accent-hover: #8b5cf6;
    --accent-deep: #6d28d9;
    --accent-glow: rgba(124, 58, 237, 0.35);
    --line: rgba(93, 224, 184, 0.14) !important;
    --panel: rgba(255, 255, 255, 0.045) !important;
    --brand: #8b5cf6 !important;
    --ok: #5de0b8 !important;
    --radius: 18px;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;
    --font-mono: 'Space Mono', monospace;
}

html {
    background: #1a1a2e !important;
    scrollbar-width: thin;
    scrollbar-color: #7c3aed #1a1a2e;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #7c3aed; border-radius: 3px; }
::selection { background: #7c3aed; color: #fff; }

body {
    font-family: var(--font-sans) !important;
    background: transparent !important;
    color: var(--text) !important;
    line-height: 1.7;
    letter-spacing: 0.02em;
}

/* --- Override existing .bg gradient --- */
.bg {
    background: transparent !important;
}

/* --- Video Background --- */
.bg-video {
    position: fixed;
    top: -2%;
    left: -2%;
    width: 104vw;
    height: 104vh;
    object-fit: cover;
    z-index: -3;
    filter: brightness(0.58) saturate(0.8) contrast(1.08) blur(6px);
    pointer-events: none;
}

.bg-dark {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(93, 224, 184, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at center, rgba(26, 26, 46, 0.35) 0%, rgba(10, 10, 25, 0.82) 100%);
}

.grain {
    display: none !important;
}

/* Scanlines removed — main site has a clean lofi look without CRT texture */
.bg-scanlines {
    display: none !important;
}

/* --- Decorative kanji --- */
.deco-kanji {
    position: fixed;
    font-family: var(--font-serif);
    color: rgba(93, 224, 184, 0.16);
    font-size: 16rem;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    animation: kanjiFloat 8s ease-in-out infinite;
}

.deco-kanji.top-right   { top: -2rem; right: -3rem; }
.deco-kanji.bottom-left {
    bottom: -3rem; left: -2rem;
    animation-delay: -4s;
}

@keyframes kanjiFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(20px); }
}

/* --- Vertical JP text --- */
.vertical-text {
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}

/* --- Hero --- */
.hero {
    text-align: center;
    padding: 3rem 1.5rem 8rem;
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    box-sizing: border-box;
}

/* --- Scroll hint — prominent, locked to the hero --- */
.heroScrollHint {
    position: absolute;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--mint);
    text-shadow: 0 0 14px var(--mint-glow);
    opacity: 1;
    text-decoration: none !important;
    user-select: none;
    animation: heroScrollBob 2.4s ease-in-out infinite;
    transition: color 0.3s, transform 0.3s;
}
.heroScrollHint:hover {
    color: #7ee8c9;
}
.heroScrollHint .heroScrollLine {
    width: 2px;
    height: 3.25rem;
    background: linear-gradient(180deg, rgba(93, 224, 184, 0.85), rgba(93, 224, 184, 0.15));
    border-radius: 2px;
    box-shadow: 0 0 10px var(--mint-glow);
    position: relative;
    overflow: hidden;
}
.heroScrollHint .heroScrollLine::after {
    content: '';
    position: absolute;
    top: -70%;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, transparent, #fff);
    animation: heroScrollTrail 1.6s ease-in-out infinite;
}
@keyframes heroScrollTrail {
    0%   { transform: translateY(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(260%); opacity: 0; }
}
@keyframes heroScrollBob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* Brand logo (torii + site name), calqué sur go/ */
.hero .brand-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    text-decoration: none;
}
.hero .brand-torii {
    width: 64px;
    height: 64px;
    display: block;
    filter: drop-shadow(0 0 16px rgba(93, 224, 184, 0.55)) brightness(1.2);
    animation: toriiBreath 4s ease-in-out infinite 1s;
    transform-origin: center bottom;
    transition: filter 0.4s;
}
.hero .brand-logo:hover .brand-torii {
    filter: drop-shadow(0 0 22px rgba(93, 224, 184, 0.75)) brightness(1.35);
}
@keyframes toriiBreath {
    0%, 100% { filter: drop-shadow(0 0 16px rgba(93, 224, 184, 0.55)) brightness(1.2); }
    50%      { filter: drop-shadow(0 0 22px rgba(93, 224, 184, 0.75)) brightness(1.35); }
}
.hero .brand-name {
    font-family: var(--font-serif) !important;
    font-weight: 300 !important;
    font-size: clamp(2.2rem, 5.2vw, 3.4rem) !important;
    letter-spacing: 0.02em;
    color: var(--text) !important;
    margin: 0 !important;
    line-height: 1.15;
    padding: 0 !important;
    display: inline-block;
}
.hero .brand-name::after,
.hero h1::after {
    content: none !important;
}

.hero h1 {
    font-family: var(--font-serif) !important;
    font-weight: 300 !important;
    font-size: clamp(2.2rem, 5.2vw, 3.4rem) !important;
    letter-spacing: 0.02em;
    color: var(--text) !important;
    margin: 0 auto 1.25rem !important;
    line-height: 1.15;
    position: relative;
    padding-bottom: 1rem;
    display: inline-block;
}

.hero h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--mint), var(--accent-hover));
    box-shadow: 0 0 12px var(--mint-glow);
    border-radius: 2px;
}

.hero > p,
.hero .hero-sub {
    font-family: var(--font-mono) !important;
    font-weight: 400;
    color: var(--mint) !important;
    max-width: 620px;
    margin: 0 auto !important;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
    line-height: 1.7;
    opacity: 0.78;
}

@keyframes fadeRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Container --- */
.container {
    position: relative;
    z-index: 3;
    padding: 0 1.5rem !important;
}

/* Hero panel — stack lang switcher, CTAs and stats vertically, centred */
.hero .heroPanel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 0;
}
.hero .heroPanel .lang-switcher,
.hero .heroPanel .langSwitcher {
    margin: 0 !important;
    justify-content: center;
}
.hero .heroPanel .homeHeroActions {
    margin: 0 !important;
    gap: 0.75rem !important;
    justify-content: center;
    flex-wrap: wrap;
}
.hero .heroPanel .homeStats {
    margin: 0 !important;
    gap: 0.5rem !important;
    justify-content: center;
    flex-wrap: wrap;
}

/* Breathing room between sections in the home container */
.container {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
}
.container > section.card,
.container > #articles-list {
    margin-bottom: 1.5rem !important;
}
.container .guidesListGrid {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    gap: 1rem !important;
}

/* Section kicker — mono label above each block */
.sectionKicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.75;
    margin-bottom: 0.75rem;
}

/* --- Cards (glass morphism) --- */
.card,
section.card {
    background-color: rgba(20, 18, 40, 0.42) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.seeAlsoCard {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mint), var(--accent-hover), transparent);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.card:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
}
.card:hover::before {
    opacity: 1;
}

/* --- Buttons --- */
.btn {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    transition: all 0.3s;
    box-shadow: none !important;
}
.btn:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
    background: rgba(93, 224, 184, 0.05) !important;
}
.btn.small { padding: 7px 14px !important; font-size: 12px !important; }

.btn.ok {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border: 1px solid rgba(196, 181, 253, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
}
.btn.ok:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55) !important;
    color: #fff !important;
}

.btnGuideFlash {
    background: linear-gradient(135deg, #5de0b8, #3fb88f) !important;
    border: 1px solid rgba(93, 224, 184, 0.6) !important;
    color: #0b1020 !important;
    box-shadow: 0 4px 16px rgba(93, 224, 184, 0.35) !important;
    font-weight: 700 !important;
}
.btnGuideFlash:hover {
    background: linear-gradient(135deg, #7ee8c9, #5de0b8) !important;
    box-shadow: 0 6px 22px rgba(93, 224, 184, 0.55) !important;
    color: #0b1020 !important;
}

.btn.danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}

/* --- Chips --- */
.chip {
    background: rgba(124, 58, 237, 0.12) !important;
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
    color: #d8c8ff !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    transition: all 0.3s;
}
a.chip {
    text-decoration: none;
}
.chip:hover {
    background: rgba(124, 58, 237, 0.22) !important;
    border-color: rgba(196, 181, 253, 0.6) !important;
    color: #fff !important;
}
.chipActive,
a.chip.chipActive,
.chip.chipActive {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border-color: rgba(196, 181, 253, 0.7) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
}

/* --- Inputs --- */
.input, .textarea, input[type="text"], input[type="search"], input[type="email"], select, textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    font-family: var(--font-sans) !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.input::placeholder, .textarea::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--text-muted) !important;
}
.input:focus, .textarea:focus,
input:focus, select:focus, textarea:focus {
    border-color: #c4b5fd !important;
    box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.18), 0 0 20px rgba(196, 181, 253, 0.15) !important;
    outline: none;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* --- Links --- */
a {
    color: var(--text);
    transition: color 0.3s;
}
a:hover {
    color: var(--mint);
}

/* Inline prose links — mint */
.cardBody p a,
.cardBody li a,
article p a,
article li a,
main p a,
main li a {
    color: var(--mint) !important;
    text-decoration: none;
    border-bottom: 1px dotted rgba(93, 224, 184, 0.4);
    transition: all 0.3s;
}
.cardBody p a:hover,
.cardBody li a:hover,
article p a:hover,
article li a:hover,
main p a:hover,
main li a:hover {
    color: #7ee8c9 !important;
    border-bottom-color: #7ee8c9;
    text-shadow: 0 0 8px rgba(93, 224, 184, 0.4);
}

/* --- See also grid --- */
.seeAlsoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.seeAlsoCard {
    padding: 16px !important;
    display: block;
    text-decoration: none !important;
    transition: all 0.3s;
}
.seeAlsoCard:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 224, 184, 0.45) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
}
.seeAlsoCard strong {
    color: var(--text) !important;
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    display: block;
    margin-bottom: 6px;
}
.seeAlsoCta {
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- Muted text --- */
.muted {
    color: var(--text-muted) !important;
}

/* --- Article prose --- */
h1, h2, h3, h4 {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    letter-spacing: 0.02em;
}

h2 { font-weight: 300 !important; }
h3 { font-weight: 400 !important; }

/* --- Code / pre --- */
code, pre {
    background: rgba(124, 58, 237, 0.12) !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
    border-radius: 6px !important;
    font-family: var(--font-mono) !important;
    color: #c4b5fd !important;
}
pre { padding: 16px !important; overflow-x: auto; }

/* --- Homepage stats chips --- */
.homeStats .chip {
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #c4b5fd !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --- Lang switcher (if used via chips) --- */
.langSwitcher, .lang-switcher {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    width: fit-content;
    justify-self: start;
    max-width: 100%;
}
.langSwitcher a, .langSwitcher button,
.lang-switcher a, .lang-switcher button {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-soft);
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    transition: all 0.3s;
}
.langSwitcher a:hover, .langSwitcher button:hover,
.lang-switcher a:hover, .lang-switcher button:hover {
    color: var(--mint);
    text-shadow: 0 0 8px var(--mint-glow);
}
.langSwitcher .is-active, .langSwitcher a.active, .langSwitcher button.is-active, .langSwitcher .isCurrent,
.lang-switcher .is-active, .lang-switcher a.active, .lang-switcher button.is-active {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-hover)) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

/* --- Footer / admin topbar keep minimal --- */
.frontAdminBar {
    background: rgba(10, 10, 25, 0.85) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: blur(12px);
}

/* --- Neutralize leftover blue backgrounds --- */
.langSwitchItem,
.pageLink,
.articleTitleBadge,
.articleCategoryBadge,
.tocList a,
.publicFooter a,
.demoNativeThumb,
.guideToc a,
.guideResourceThumb,
.adminTopNavLink,
.adminMiniItem,
.adminChart,
select.input option {
    background-color: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--line) !important;
    color: var(--text-soft) !important;
}

.langSwitchItem:hover,
.pageLink:hover,
.publicFooter a:hover,
.demoNativeControls .btn:hover,
.adminTopNavLink:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
}

.simpleHtmlEditorToolbar,
.stepEditor,
.categoryTreeItem,
.demoNativeBubble,
.demoNativeControls .btn,
.aiBtn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

.aiBtn:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    background: rgba(93, 224, 184, 0.05) !important;
    color: var(--mint) !important;
}

.demoNative:-webkit-full-screen,
.demoNative.is-pseudo-fullscreen {
    background: #1a1a2e !important;
}

.adminChartBar {
    background: linear-gradient(180deg, #a78bfa, #6d28d9) !important;
}

/* === Front admin bar — full lofi reskin (was a heavy blue gradient) === */
.adminFrontBar {
    border-bottom: 1px solid var(--line) !important;
    background:
        radial-gradient(380px 110px at 14% -60%, rgba(124, 58, 237, 0.18), transparent 70%),
        rgba(10, 10, 25, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32) !important;
}
.adminFrontBarBadge {
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
    background: rgba(124, 58, 237, 0.18) !important;
    color: #c4b5fd !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.18em !important;
}
.adminFrontBarHint {
    color: var(--text-soft) !important;
    font-family: var(--font-sans) !important;
}
.adminFrontBarPath {
    border: 1px solid var(--line) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
}
.adminFrontBarLink {
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
    background: rgba(124, 58, 237, 0.1) !important;
    color: #d8c8ff !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border-radius: 999px !important;
}
.adminFrontBarLink:hover {
    border-color: rgba(196, 181, 253, 0.6) !important;
    background: rgba(124, 58, 237, 0.22) !important;
    color: #fff !important;
}
.adminFrontBarLink.isPrimary {
    border-color: rgba(196, 181, 253, 0.5) !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
}
.adminFrontBarLink.isPrimary:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
}
.adminFrontBarLink.isQuick {
    border-color: rgba(93, 224, 184, 0.4) !important;
    background: rgba(93, 224, 184, 0.08) !important;
    color: var(--mint) !important;
}
.adminFrontBarLink.isQuick:hover {
    border-color: var(--mint) !important;
    background: rgba(93, 224, 184, 0.18) !important;
    color: #7ee8c9 !important;
}
.adminFrontBarLink.isDanger {
    border-color: rgba(239, 68, 68, 0.5) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #fca5a5 !important;
}
.adminFrontBarLink.isDanger:hover {
    border-color: rgba(252, 165, 165, 0.7) !important;
    background: rgba(239, 68, 68, 0.22) !important;
}

/* Blue brand color leftover (#7aa0ff, #4566b8 gradients) */
[style*="#7aa0ff"], [style*="#4566b8"] { filter: hue-rotate(240deg); }

/* Blue-ish texts (muted blues) */
.muted, .hero p, span.muted {
    color: var(--text-muted) !important;
}

/* === Article page polish — kill leftover green/blue, align with lofi palette === */

/* Back link in article header (was forest-green pill) → violet underlined link
   with animated left-arrow, matching home/contact/page back buttons. */
.articleHomeLink {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #a78bfa !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #a78bfa !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    padding: 0.3rem 0 0.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.articleHomeLink::before {
    content: "←";
    font-family: var(--font-mono);
    font-weight: 700;
    transition: transform 0.3s ease;
}
.articleHomeLink:hover {
    gap: 1rem;
    color: #ddd6fe !important;
    border-bottom-color: #ddd6fe !important;
}
.articleHomeLink:hover::before {
    transform: translateX(-4px);
}

/* Steps badge in article top meta (was blue) → mint chip matching list cards */
.articleStepsBadge {
    background: transparent !important;
    border: 1px solid rgba(93, 224, 184, 0.55) !important;
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    box-shadow: none !important;
}

/* Title badge — flatter, lofi look */
.articleTitleBadge {
    background: rgba(20, 18, 40, 0.78) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.articleTitleBadge h1 {
    font-family: var(--font-serif) !important;
    font-weight: 300 !important;
    color: var(--text) !important;
}

/* Category badge — purple tint, matching card chips */
.articleCategoryBadge {
    background: rgba(124, 58, 237, 0.12) !important;
    border: 1px solid rgba(124, 58, 237, 0.4) !important;
    color: #c4b5fd !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    box-shadow: none !important;
}

/* Source-info block on the contact page (shows the article/guide the
   user is reaching out about). Default theme rule made `.muted` very dim. */
.contactSourceInfo {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
}
.contactSourceInfo strong {
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
}
.cardBody .contactSourceInfo .muted,
.container .contactSourceInfo .muted {
    color: var(--text-soft) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 6px;
    line-height: 1.4;
}
.cardBody .contactSourceInfo .muted a,
.container .contactSourceInfo .muted a {
    color: #c4b5fd !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cardBody .contactSourceInfo .muted a:hover,
.container .contactSourceInfo .muted a:hover {
    color: #ddd6fe !important;
}

/* Form / filter labels — kept the mono uppercase kicker style but use the
   soft mint-grey for legibility (contact form: Nom/Email/Sujet/Message,
   home filters: Recherche/Tri/Catégories/Sous-catégories). */
.contactPageCard .adminEditorForm .muted,
.homeFilterForm .muted,
#filtres-articles .muted {
    color: var(--text-soft) !important;
}

/* Home search input — placeholder matches the sort-dropdown selected value
   (same color, font, size as Choices.js shows for the active option).
   The placeholder fades out when the input is focused so it doesn't
   compete with what the user is typing. */
.homeFilterForm input[type="search"]::placeholder,
.homeFilterForm input[name="q"]::placeholder {
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.homeFilterForm input[type="search"]:focus::placeholder,
.homeFilterForm input[name="q"]:focus::placeholder {
    opacity: 0 !important;
}

/* Lead form blocks (intro / post-steps) — were blue/amber gradient.
   Reskin to match the lofi violet glass with mint kicker. */
.leadFormBlock {
    background: rgba(20, 18, 40, 0.42) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
}
.leadFormBlock--post-steps {
    background: rgba(20, 18, 40, 0.42) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
}
.leadFormBlock .leadFormKicker {
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
}
.leadFormBlock--post-steps .leadFormKicker {
    color: #c4b5fd !important;
}
.leadFormBlock .leadFormTitle {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--text) !important;
}
.leadFormBlock .leadFormDesc {
    color: var(--text-soft) !important;
}
.leadFormLabel {
    color: var(--text-soft) !important;
}
.leadFormLabel input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
}
.leadFormLabel input:focus {
    outline: none !important;
    border-color: rgba(93, 224, 184, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(93, 224, 184, 0.12) !important;
}
.leadFormConsent {
    color: var(--text-soft) !important;
    font-size: 0.82rem !important;
}
.leadFormConsent a {
    color: #c4b5fd !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.leadFormConsent a:hover {
    color: #ddd6fe !important;
}
.leadFormConsent input[type="checkbox"] {
    accent-color: #8b5cf6;
}
.leadFormStatus {
    color: var(--text-soft) !important;
}
.leadFormSuccess {
    background: rgba(93, 224, 184, 0.12) !important;
    border: 1px solid rgba(93, 224, 184, 0.4) !important;
    color: #d4f5e8 !important;
}
.leadFormBlock .leadFormRow {
    gap: 22px !important;
    max-width: 620px;
}

/* Guide section covers (inside a complete guide) — soften the underlying
   image with a blur and darken the overlay so the title stays legible
   on top of busy covers (Namecheap N logo etc.). */
.guideSectionMedia img {
    filter: blur(4px);
    transform: scale(1.04);
}
.guideSectionMedia::after {
    background: linear-gradient(180deg, rgba(8, 12, 28, 0.72), rgba(14, 12, 28, 0.92)) !important;
}
/* Let the section content span the full card width — was capped at 74ch */
.guideSectionContent {
    max-width: none !important;
    padding: 20px !important;
}

/* Article / guide hero cover — image blurred behind the title, with a
   darkening overlay tuned per cover brightness so dark covers don't get
   crushed and light covers stay readable. */
.articleHeadMedia img {
    filter: blur(2px);
    transform: scale(1.02);
}
.articleHeadMedia::after {
    background: linear-gradient(180deg, rgba(8, 12, 28, 0.55), rgba(14, 12, 28, 0.85)) !important;
}
/* Dark cover → keep the cover more visible (lighter overlay) */
.articleHead.coverDark .articleHeadMedia::after {
    background: linear-gradient(180deg, rgba(8, 12, 28, 0.25), rgba(8, 12, 28, 0.55)) !important;
}
/* Light cover → slightly heavier overlay for legibility */
.articleHead.coverLight .articleHeadMedia::after {
    background: linear-gradient(180deg, rgba(8, 12, 28, 0.55), rgba(14, 12, 28, 0.88)) !important;
}

/* Article body sections (intro, ToC, conclusion) — were white-tint or
   blue-tint glass. Match the homepage `.card` translucent violet panel. */
.articleIntro,
.articleConclusion,
.articleToc {
    background-color: rgba(20, 18, 40, 0.42) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Step blocks — were blue gradient. Match the panel look. */
.step {
    background: rgba(20, 18, 40, 0.42) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.step h3 {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--text) !important;
}
.stepNum {
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
    font-weight: 700 !important;
}

/* TOC items — flatten the dark-blue solid bg to a soft purple-tint pill */
.tocList a {
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.25) !important;
    color: var(--text) !important;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.tocList a:hover {
    background: rgba(124, 58, 237, 0.18) !important;
    border-color: rgba(196, 181, 253, 0.5) !important;
}
.tocNum {
    color: #a78bfa !important;
    font-family: var(--font-mono) !important;
}

/* "Une question?" CTA bar at the end of articles / guides — same violet
   glass as the homepage cards. Selectors are stacked so they out-specify
   `.container .muted` etc. that wins by source-order in guides-complets. */
.contactCtaBar,
.guidesShell .contactCtaBar,
.container .contactCtaBar {
    border: 1px solid var(--line) !important;
    background: rgba(20, 18, 40, 0.42) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
.contactCtaBar .contactCtaBody strong,
.container .contactCtaBar .contactCtaBody strong {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: clamp(20px, 2.2vw, 28px) !important;
}
.contactCtaBar .contactCtaBody .muted,
.container .contactCtaBar .contactCtaBody .muted {
    color: var(--text-soft) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.contactCtaBar .btn.ok {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border: 1px solid rgba(196, 181, 253, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
    animation: contactPulseLofi 2.4s ease-in-out infinite !important;
}
.contactCtaBar .btn.ok:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55) !important;
    color: #fff !important;
    border-color: rgba(196, 181, 253, 0.7) !important;
}
/* Replace the legacy green pulse with a violet one */
@keyframes contactPulseLofi {
    0%, 100% { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35), 0 0 0 0 rgba(124, 58, 237, 0); }
    50%      { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35), 0 0 0 8px rgba(124, 58, 237, 0.18); }
}

/* Compact page hero (contact / privacy / static pages) — no full-viewport,
   just a centered brand block above the content card. */
.compactPageShell {
    padding-top: 24px;
    padding-bottom: 12px;
}
.compactPageHero {
    text-align: center;
    margin: 1.5rem auto 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 720px;
}
.compactPageHero .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}
.compactPageHero .brand-torii {
    width: 38px;
    height: 38px;
}
.compactPageHero .brand-name {
    font-family: var(--font-serif) !important;
    font-weight: 300 !important;
    color: var(--text) !important;
    font-size: clamp(28px, 3.2vw, 38px);
    margin: 0;
    letter-spacing: 0.02em;
}
.compactPageHero .hero-sub,
.publicPageCard .notFoundDesc {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mint) !important;
    margin: 0;
    text-shadow: 0 0 14px var(--mint-glow);
    max-width: 540px;
}
.publicPageCard .notFoundDesc {
    margin-top: 8px;
    max-width: none;
}
.compactPageActions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.compactPageActions .btn.ok.btnGuideFlash {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.3rem 0 0.45rem !important;
    gap: 0.6rem;
    border: none !important;
    border-bottom: 1px solid #a78bfa !important;
    color: #a78bfa !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease !important;
}
.compactPageActions .btn.ok.btnGuideFlash.btnGuideBack::after {
    content: none !important;
}
.compactPageActions .btn.ok.btnGuideFlash.btnGuideBack::before {
    content: "←";
    font-family: var(--font-mono);
    font-weight: 700;
    margin-right: 0.6rem;
    transition: transform 0.3s ease;
}
.compactPageActions .btn.ok.btnGuideFlash:hover {
    gap: 1rem;
    color: #ddd6fe !important;
    border-bottom-color: #ddd6fe !important;
}
.compactPageActions .btn.ok.btnGuideFlash.btnGuideBack:hover::before {
    transform: translateX(-4px);
}

/* Guides-complets list page: restore the standard centered full-viewport hero
   (styles.css `.guidesShell .hero` flattens it for the legacy layout). */
.guidesShell .hero {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 3rem 1.5rem 8rem !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2.5rem;
}
.guidesShell .hero h1,
.guidesShell .hero p {
    max-width: none !important;
}
.guidesShell .homeHeroActions,
.guidesShell .homeStats {
    justify-content: center !important;
}

/* The filter section has overflow:hidden via .card → would clip Choices.js
   dropdown. Allow overflow on this specific section so the dropdown can
   extend below. Inner border-radius/gradient still render correctly. */
#filtres-articles {
    overflow: visible !important;
}
.homeFilterForm label,
.homeFilterForm .choices {
    overflow: visible !important;
}

/* === Choices.js — match lofi theme === */
.choicesSort.choices {
    margin-bottom: 0;
    position: relative;
}
.choicesSort.is-open {
    z-index: 50;
}
.choicesSort .choices__inner {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
    min-height: 40px;
    padding: 8px 38px 8px 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.choicesSort.is-focused .choices__inner,
.choicesSort.is-open .choices__inner {
    border-color: rgba(93, 224, 184, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(93, 224, 184, 0.12) !important;
}
.choicesSort .choices__list--single {
    padding: 0;
}
.choicesSort .choices__list--single .choices__item {
    color: var(--text) !important;
    font-family: var(--font-sans) !important;
}
.choicesSort::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 8px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235de0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") no-repeat center / contain;
    border: 0 !important;
    pointer-events: none;
    transition: transform 0.25s ease;
}
.choicesSort.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}
.choicesSort .choices__list--dropdown,
.choicesSort .choices__list[aria-expanded] {
    background: #14142a !important;
    border: 1px solid rgba(93, 224, 184, 0.4) !important;
    border-radius: 12px !important;
    margin-top: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.choicesSort .choices__list--dropdown .choices__item,
.choicesSort .choices__list[aria-expanded] .choices__item {
    background: transparent !important;
    color: var(--text-soft) !important;
    font-family: var(--font-sans) !important;
    padding: 10px 14px !important;
    transition: background 0.15s, color 0.15s;
}
.choicesSort .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choicesSort .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
}
.choicesSort .choices__list--dropdown .choices__item--selectable[data-select-text]::after {
    display: none !important;
}

/* Custom-styled <select> — appearance:none + inline SVG chevron */
select.input,
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235de0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    padding-right: 38px !important;
    cursor: pointer;
}
select.input:hover,
select:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
}
select.input:focus,
select:focus {
    border-color: rgba(93, 224, 184, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(93, 224, 184, 0.12) !important;
    outline: none !important;
}
select.input option {
    background-color: #14142a !important;
    color: var(--text) !important;
    padding: 8px 12px;
}
select.input option:checked,
select.input option:hover {
    background-color: #6d28d9 !important;
    color: #fff !important;
}

/* --- Demo actions block (article steps) --- */
.demoActionsBlock {
    border: 1px solid rgba(124, 58, 237, 0.28) !important;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), rgba(26, 26, 46, 0.55)) !important;
}
.demoActionsHead,
.demoActionsHeadTitle { color: var(--text) !important; }
.demoActionsHeadKicker {
    border: 1px solid rgba(93, 224, 184, 0.35) !important;
    background: rgba(93, 224, 184, 0.1) !important;
    color: var(--mint) !important;
}
.demoActionsHeadCount {
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
    background: rgba(124, 58, 237, 0.14) !important;
    color: #c4b5fd !important;
}
.demoActionItem {
    border: 1px solid rgba(124, 58, 237, 0.2) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--text-soft) !important;
}
.demoActionNum {
    border: 1px solid rgba(196, 181, 253, 0.35) !important;
    background: rgba(124, 58, 237, 0.22) !important;
    color: #c4b5fd !important;
}

/* --- "LIEN RECOMMANDÉ" external link module --- */
.stepExternalModule {
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(26, 26, 46, 0.6)) !important;
}
.stepExternalKicker {
    color: #c4b5fd !important;
    letter-spacing: 0.18em;
    font-family: var(--font-mono) !important;
}
.stepExternalTitle {
    color: var(--text) !important;
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
}
.stepExternalLink {
    border: 1px solid rgba(196, 181, 253, 0.6) !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
}
.stepExternalLink:hover {
    border-color: #c4b5fd !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55) !important;
}

/* --- Demo player controls --- */
.demoFramePager {
    border: 1px solid rgba(124, 58, 237, 0.38) !important;
    background: rgba(26, 26, 46, 0.7) !important;
    color: #c4b5fd !important;
}
.demoFramePager:hover {
    border-color: rgba(196, 181, 253, 0.8) !important;
}

.demoNativeBubble {
    background: rgba(26, 26, 46, 0.88) !important;
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
}

.demoNativeControls .btn {
    border: 1px solid var(--line) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
}
.demoNativeControls .btn:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
    background: rgba(93, 224, 184, 0.05) !important;
}
.demoNativeControls .btn.ok {
    border: 1px solid rgba(196, 181, 253, 0.5) !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
}

.demoNativeThumb.active {
    border-color: rgba(196, 181, 253, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3) !important;
}
.demoNativeThumbs::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.45) !important;
}

.demoNativeThumbNav {
    border: 1px solid rgba(196, 181, 253, 0.55) !important;
    background: rgba(26, 26, 46, 0.85) !important;
    color: #c4b5fd !important;
}
.demoNativeThumbNav:hover {
    border-color: #c4b5fd !important;
    background: rgba(124, 58, 237, 0.22) !important;
}

.demoNativeLoader {
    background: rgba(26, 26, 46, 0.6) !important;
}

/* --- Misc blue text --- */
.seeAlsoCta { color: var(--mint) !important; }
.guideSectionContent .stepText { color: var(--text) !important; }

/* Initial hidden state for GSAP reveal targets. `.is-animating` is added
   to <html> synchronously in <head> before paint, then removed in JS
   once GSAP has taken control of the inline styles. */
.is-animating .hero .brand-torii,
.is-animating .hero .brand-name,
.is-animating .hero .hero-sub,
.is-animating .hero .heroPanel > *,
.is-animating .heroScrollHint {
    opacity: 0;
}

/* Give anchor targets some breathing room when scrolled-into-view */
#articles-list,
#filtres-articles {
    scroll-margin-top: 2rem;
}

html {
    scroll-behavior: smooth;
}

/* --- Mobile tweaks --- */
@media (max-width: 640px) {
    .hero {
        padding: 1.5rem 1rem 4.5rem;
    }
    .hero .brand-torii {
        width: 52px;
        height: 52px;
    }
    .deco-kanji { font-size: 9rem; }
    .vertical-text { display: none; }
    .heroScrollHint {
        bottom: 1.25rem;
    }
    .heroScrollHint .heroScrollLine {
        height: 2rem;
    }
}

/* ============================================
   Lofi alignment — override residual blue/green
   styles left over from the original theme.
   ============================================ */

/* Article / guide list cards — glass morphism.
   Use background-color so inline `background-image` overlays (cover images) still render. */
.guidesListCard {
    background-color: #1a1a30 !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s !important;
}
.articleListCard.hasBg,
.homeGuideCard.hasBg {
    background-image: none !important;
    position: relative;
    isolation: isolate;
}
.articleListCard.hasBg::before,
.homeGuideCard.hasBg::before {
    content: '';
    position: absolute;
    inset: -10px;
    background-image: var(--cover);
    background-size: cover;
    background-position: center;
    filter: blur(4px);
    z-index: -2;
    pointer-events: none;
}
.articleListCard.hasBg::after,
.homeGuideCard.hasBg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(220, 240, 232, var(--overlay-opacity, 0.7));
    z-index: -1;
    pointer-events: none;
}
/* Enable the hover transition only once cover-brightness.js has finished
   adjusting the overlay AND let the browser commit the new value (the
   `coverTagged` class is added on the next animation frame). Otherwise
   the JS-driven adjustment animates and creates a perceived flash. */
.articleListCard.coverTagged.hasBg::after,
.homeGuideCard.coverTagged.hasBg::after {
    transition: background-color 0.4s ease;
}
.articleListCard,
.homeGuideCard {
    background-color: rgba(220, 240, 232, 1) !important;
    border: 1px solid rgba(93, 224, 184, 0.55) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(93, 224, 184, 0.12) !important;
    transition: background-color 0.4s, background-image 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s !important;
}
/* Cards WITH a cover image — fallback bg matches the eventual overlay
   color so there's no perceived flash between paint and image-load.
   Brightness is computed server-side (lib/cover_brightness.php) and the
   `coverLight` / `coverDark` class is applied directly on the <a>. */
.articleListCard.hasBg,
.homeGuideCard.hasBg {
    background-color: #14142a !important;
}
.articleListCard.coverLight.hasBg,
.homeGuideCard.coverLight.hasBg {
    background-color: rgba(220, 240, 232, 1) !important;
}
.articleListCard.coverDark.hasBg,
.homeGuideCard.coverDark.hasBg {
    background-color: #14142a !important;
}
.guidesListCard:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
}
.articleListCard:hover,
.homeGuideCard:hover {
    background-color: rgba(232, 224, 248, 1) !important;
    border-color: rgba(124, 58, 237, 0.85) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.3) !important;
}
.articleListCard.hasBg:hover::after,
.homeGuideCard.hasBg:hover::after {
    background-color: rgba(232, 224, 248, var(--overlay-opacity, 0.7));
}

/* === Dark-cover variant (auto-applied via JS based on cover luminance) === */
.articleListCard.coverDark,
.homeGuideCard.coverDark {
    background-color: #14182a !important;
    border-color: rgba(93, 224, 184, 0.35) !important;
}
.articleListCard.coverDark:hover,
.homeGuideCard.coverDark:hover {
    background-color: #1a1438 !important;
    border-color: rgba(124, 58, 237, 0.6) !important;
}
.articleListCard.coverDark.hasBg::after,
.homeGuideCard.coverDark.hasBg::after {
    background-color: rgba(8, 12, 28, var(--overlay-opacity, 0.65)) !important;
}
.articleListCard.coverDark.hasBg:hover::after,
.homeGuideCard.coverDark.hasBg:hover::after {
    background-color: rgba(60, 30, 100, var(--overlay-opacity, 0.6)) !important;
}
.articleListCard.coverDark .guidesListContent strong,
.homeGuideCard.coverDark .seeAlsoBody strong {
    color: #ecf5f0 !important;
}
.articleListCard.coverDark .muted,
.homeGuideCard.coverDark .muted {
    color: rgba(236, 245, 240, 0.65) !important;
}
.articleListCard.coverDark .guidesListMeta .chip,
.homeGuideCard.coverDark .seeAlsoCta {
    color: #ecf5f0 !important;
    border-color: rgba(236, 245, 240, 0.55) !important;
}
.guidesListCard.hasBg,
.articleListCard.hasBg {
    background-size: cover !important;
    background-position: center !important;
}
.guidesListContent strong {
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: var(--text) !important;
    letter-spacing: 0.01em;
}
.articleListCard .muted,
.homeGuideCard .muted {
    color: rgba(40, 40, 60, 0.7) !important;
}
.articleListCard .guidesListContent strong,
.homeGuideCard .seeAlsoBody strong {
    color: #1a1a30 !important;
}
.homeGuideCard .seeAlsoCta {
    background: transparent !important;
    border: 1px solid rgba(10, 10, 20, 0.55) !important;
    color: #0a0a14 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 4px 10px !important;
    text-transform: uppercase;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
    transition: color 0.4s, border-color 0.4s !important;
}
/* Article cards: hide redundant CTA pill, emphasize steps badge */
.articleListCard .guidesListCta,
.articleListCard .guidesListCtaGreen {
    display: none !important;
}
.articleListCard .guidesListMeta .chip {
    background: transparent !important;
    border: 1px solid rgba(10, 10, 20, 0.55) !important;
    color: #0a0a14 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 4px 10px !important;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: color 0.4s, border-color 0.4s !important;
}

/* CTA pill — replace forest-green gradient with mint→purple */
.guidesListCtaGreen,
.guideSectionCta {
    border: 1px solid rgba(196, 181, 253, 0.5) !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.guidesListCard:hover .guidesListCtaGreen,
.guideSectionCta:hover {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.55) !important;
    color: #fff !important;
    border-color: rgba(196, 181, 253, 0.7) !important;
}
.guideSectionCta {
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.guideSectionCta:hover {
    transform: translateY(-1px);
}
.guidesListCta {
    color: var(--mint) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Public footer — match main site (mono, uppercase, letter-spaced) */
.publicFooter {
    border-top: 0 !important;
    background-image: linear-gradient(90deg, transparent 0%, rgba(93, 224, 184, 0.18) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 60% 1px;
    background-position: top center;
    padding-top: 2rem !important;
    margin-top: 3rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.publicFooter a {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--line) !important;
    color: var(--text-soft) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem !important;
    transition: border-color 0.3s, color 0.3s;
}
.publicFooter a:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
}

/* Pagination — glass + mint hover */
.pageLink {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--line) !important;
    color: var(--text-soft) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    transition: all 0.3s;
}
.pageLink:hover:not(.isDisabled):not(.isCurrent) {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
    background: rgba(93, 224, 184, 0.05) !important;
}
.pageLink.isCurrent {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border-color: rgba(196, 181, 253, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
}
.pageLink.isDisabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pageEllipsis {
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
}

/* Language switcher items (non-chip flavour used on home) */
.langSwitchItem {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--line) !important;
    color: var(--text-soft) !important;
    font-family: var(--font-mono) !important;
    font-weight: 500 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.3s;
}
.langSwitchItem:hover {
    border-color: rgba(93, 224, 184, 0.4) !important;
    color: var(--mint) !important;
}
.langSwitchItem.is-active,
.langSwitchItem.isActive,
.langSwitchItem.isCurrent,
.langSwitcher a.isCurrent,
.langSwitcher .isCurrent {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border-color: rgba(196, 181, 253, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35) !important;
}

/* Filter form labels — muted + mono kicker */
.homeFilterForm .muted,
.container .muted {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

/* Hero CTA buttons — ghost style, no background fill */
.homeHeroActions .btn {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* Hero CTAs — one boxed, one plain link with arrow */
.hero .homeHeroActions {
    gap: 1rem !important;
    flex-direction: column !important;
    align-items: center;
}
.hero .homeHeroActions .btn.ok,
.hero .homeHeroActions .btn.ok.btnGuideFlash {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, gap 0.3s ease !important;
}

/* Primary — square outlined box */
.hero .homeHeroActions .btn.ok {
    padding: 0.85rem 1.6rem !important;
    border: 1px solid rgba(93, 224, 184, 0.7) !important;
    color: var(--mint) !important;
}
.hero .homeHeroActions .btn.ok:hover {
    background: rgba(93, 224, 184, 0.08) !important;
    border-color: var(--mint) !important;
    color: #7ee8c9 !important;
}

/* Secondary — purple link, underline + arrow */
.hero .homeHeroActions .btn.ok.btnGuideFlash {
    padding: 0.3rem 0 0.45rem !important;
    gap: 0.6rem;
    border: none !important;
    border-bottom: 1px solid #a78bfa !important;
    color: #a78bfa !important;
}
.hero .homeHeroActions .btn.ok.btnGuideFlash::after {
    content: "→";
    font-family: var(--font-mono);
    font-weight: 700;
    transition: transform 0.3s ease;
}
/* Back-link variant: arrow flips to the left and lives BEFORE the text */
.hero .homeHeroActions .btn.ok.btnGuideFlash.btnGuideBack::after {
    content: none;
}
.hero .homeHeroActions .btn.ok.btnGuideFlash.btnGuideBack::before {
    content: "←";
    font-family: var(--font-mono);
    font-weight: 700;
    margin-right: 0.6rem;
    transition: transform 0.3s ease;
}
.hero .homeHeroActions .btn.ok.btnGuideFlash.btnGuideBack:hover::before {
    transform: translateX(-4px);
}
.hero .homeHeroActions .btn.ok.btnGuideFlash:hover {
    gap: 1rem;
    color: #ddd6fe !important;
    border-bottom-color: #ddd6fe !important;
}
.hero .homeHeroActions .btn.ok.btnGuideFlash:hover::after {
    transform: translateX(4px);
}