*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg-dark:#0a0a1a; --space-card:#12122a; --primary:#6366f1; --primary-dark:#4f46e5; --primary-light:#818cf8; --accent:#f59e0b; --text:#e2e8f0; --text-muted:#94a3b8; --border:rgba(99,102,241,0.2); }
html { scroll-behavior: smooth; }
body { background-color:var(--bg-dark); color:var(--text); font-family:'Inter',sans-serif; line-height:1.7; overflow-x:hidden; min-height:100vh; }
body::before { content:''; position:fixed; inset:0; background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,0.4) 0%,transparent 100%),radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,0.3) 0%,transparent 100%),radial-gradient(1px 1px at 50% 70%,rgba(255,255,255,0.3) 0%,transparent 100%); pointer-events:none; z-index:0; }
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,26,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:'Orbitron',sans-serif; font-weight:900; font-size:1.2rem; color:var(--primary-light); text-decoration:none; letter-spacing:0.1em; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { display:block; color:var(--text-muted); text-decoration:none; font-size:0.9rem; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-cta { background:var(--primary); color:#fff; padding:0.5rem 1.2rem; border-radius:6px; text-decoration:none; font-size:0.875rem; font-weight:600; }
.nav-cta:hover { background:var(--primary-dark); }
.nav-item-dropdown{position:relative;list-style:none;}.nav-item-dropdown>details>summary{color:var(--text-muted);font-size:0.9rem;cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px;transition:color 0.2s;user-select:none;}.nav-item-dropdown>details>summary::-webkit-details-marker{display:none;}.nav-item-dropdown>details>summary::after{content:'▾';font-size:0.7rem;opacity:0.6;transition:transform 0.2s;}.nav-item-dropdown>details[open]>summary{color:var(--text);}.nav-item-dropdown>details[open]>summary::after{transform:rotate(180deg);}.nav-submenu{display:none;position:absolute;top:calc(100% + 10px);left:0;background:var(--space-card);border:1px solid var(--border);border-radius:10px;padding:8px;min-width:190px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.4);}.nav-item-dropdown>details[open] .nav-submenu{display:block;}.nav-submenu a{display:block;padding:8px 14px;color:var(--text-muted);font-size:0.875rem;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background 0.15s,color 0.15s;}.nav-submenu a:hover{background:rgba(99,102,241,0.12);color:var(--text);text-decoration:none;}[dir="rtl"] .nav-submenu{left:auto;right:0;}
@media(max-width:768px){.nav-links{display:none;}}
main { position:relative; z-index:1; max-width:780px; margin:0 auto; padding:7rem 2rem 4rem; }
.breadcrumb { font-size:0.8rem; color:var(--text-muted); margin-bottom:2rem; }
.breadcrumb a { color:var(--primary-light); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.page-tag { display:inline-block; background:rgba(99,102,241,0.15); border:1px solid var(--border); color:var(--primary-light); font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.8rem; border-radius:4px; margin-bottom:1rem; }
h1 { font-family:'Orbitron',sans-serif; font-size:clamp(1.6rem,4vw,2.3rem); font-weight:900; line-height:1.2; margin-bottom:1.2rem; background:linear-gradient(135deg,#fff 0%,var(--primary-light) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-intro { font-size:1.05rem; color:var(--text-muted); line-height:1.8; border-left:3px solid var(--primary); padding-left:1.2rem; margin-bottom:3rem; }
h2 { font-family:'Orbitron',sans-serif; font-size:1.2rem; font-weight:700; color:#fff; margin:2.5rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border); }
h3 { font-size:1rem; font-weight:600; color:var(--primary-light); margin:1.8rem 0 0.7rem; }
p { color:var(--text-muted); margin-bottom:1.2rem; line-height:1.8; }
a { color:var(--primary-light); text-decoration:none; }
a:hover { text-decoration:underline; }
ul,ol { color:var(--text-muted); padding-left:1.5rem; margin-bottom:1.5rem; line-height:1.8; }
li { margin-bottom:0.4rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; margin:2rem 0; }
.stat-box { background:var(--space-card); border:1px solid var(--border); border-radius:10px; padding:1.2rem; text-align:center; }
.stat-val { font-family:'Orbitron',sans-serif; font-size:1.4rem; font-weight:900; color:var(--primary-light); display:block; }
.stat-lbl { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; margin-top:0.3rem; display:block; }
.info-card { background:var(--space-card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin:1.5rem 0; }
.info-card h3 { margin-top:0; }
.faq-item { border:1px solid var(--border); border-radius:8px; margin-bottom:0.8rem; overflow:hidden; }
.faq-question { background:var(--space-card); padding:1rem 1.5rem; font-weight:600; color:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none; font-size:0.93rem; }
.faq-question::-webkit-details-marker { display:none; }
details[open] .faq-question { border-bottom:1px solid var(--border); color:var(--primary-light); }
.faq-answer { padding:1rem 1.5rem; color:var(--text-muted); line-height:1.7; font-size:0.9rem; }
.nav-mechanic { background:var(--space-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem 1.5rem; margin:3rem 0; display:flex; gap:1.5rem; flex-wrap:wrap; }
.nav-mechanic a { font-size:0.88rem; color:var(--primary-light); }
.nav-mechanic-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.4rem; display:block; }
footer { position:relative; z-index:1; border-top:1px solid var(--border); padding:2rem; text-align:center; color:var(--text-muted); font-size:0.875rem; margin-top:4rem; }
footer a { color:var(--primary-light); text-decoration:none; }
footer a:hover { text-decoration:underline; }
[dir="rtl"] .nav-links { flex-direction:row-reverse; }
.lang-switcher{position:relative;display:inline-block;}.lang-current{background:transparent;border:1px solid rgba(99,102,241,0.4);color:var(--text-muted,#94a3b8);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;gap:6px;list-style:none;}.lang-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#12122a;border:1px solid rgba(99,102,241,0.3);border-radius:12px;padding:8px;min-width:200px;max-height:320px;overflow-y:auto;z-index:1000;column-count:2;column-gap:4px;}.lang-switcher[open] .lang-dropdown{display:block;}.lang-dropdown a{display:block;padding:6px 10px;color:#94a3b8;text-decoration:none;font-size:0.82rem;border-radius:6px;white-space:nowrap;break-inside:avoid;}.lang-dropdown a:hover,.lang-dropdown a[aria-current]{background:rgba(99,102,241,0.15);color:#fff;}.lang-group{font-size:0.7rem;color:rgba(255,255,255,0.3);padding:4px 10px 2px;text-transform:uppercase;letter-spacing:0.1em;break-inside:avoid;column-span:all;margin-top:4px;}


/* ─── Common root-page utilities ────────────────────────────────────────── */
.article-content a {
            color: var(--primary-light);
            text-decoration: underline;
        }
.article-content a:hover { color: var(--text); }
.article-content h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            margin: 2.5rem 0 1rem;
            letter-spacing: 0.03em;
        }
.article-content li { margin-bottom: 0.4rem; }
.article-content p {
            color: var(--text-muted);
            margin-bottom: 1.2rem;
            font-size: 1rem;
        }
.article-content strong { color: var(--text); }
.article-content ul, .article-content ol {
            color: var(--text-muted);
            margin: 0 0 1.2rem 1.5rem;
        }
.article-cta {
            background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(245,158,11,0.1));
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            margin-top: 3rem;
        }
.article-cta h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            color: var(--text);
            margin-bottom: 0.75rem;
        }
.article-cta p {
            color: var(--text-muted);
            margin-bottom: 1.25rem;
            font-size: 0.95rem;
        }
.article-header { margin-bottom: 2.5rem; }
.article-label {
            display: inline-block;
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid var(--border);
            color: var(--primary-light);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            margin-bottom: 1.5rem;
        }
.article-meta {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }
.article-tag {
            display: inline-block;
            background: rgba(99,102,241,0.15);
            border: 1px solid var(--border);
            color: var(--primary-light);
            padding: 0.3rem 0.85rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }
.article-wrapper {
            position: relative;
            z-index: 1;
            max-width: 760px;
            margin: 0 auto;
            padding: 3rem 1.5rem 4rem;
        }
.btn-nav-cta {
            display: inline-block;
            background: var(--primary);
            color: #fff;
            padding: 0.5rem 1.25rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: background 0.2s, transform 0.15s;
            white-space: nowrap;
        }
.btn-nav-cta:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }
.btn-primary {
            display: inline-block;
            background: var(--primary);
            color: #fff;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: background 0.2s, transform 0.2s;
        }
.btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }
.btn-secondary { display:inline-block; background:transparent; color:var(--primary-light); padding:0.75rem 2rem; border-radius:8px; font-weight:600; font-size:0.95rem; text-decoration:none; border:1px solid rgba(99,102,241,0.4); }
.btn-secondary:hover { background:rgba(99,102,241,0.1); text-decoration:none; }
.callout { background:rgba(99,102,241,0.07); border:1px solid rgba(99,102,241,0.25); border-radius:10px; padding:1.5rem; margin:2rem 0; }
.callout p { margin-bottom:0; font-size:0.93rem; }
.callout-title { font-family:'Orbitron',sans-serif; font-size:0.78rem; font-weight:700; color:var(--primary-light); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.75rem; }
.callout.accent { background:rgba(245,158,11,0.07); border-color:rgba(245,158,11,0.3); }
.callout.accent .callout-title { color:var(--accent); }
.callout.warning { background:rgba(245,158,11,0.07); border-color:rgba(245,158,11,0.3); }
.callout.warning .callout-title { color:var(--accent); }
.cta-section {
            background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(245,158,11,0.05) 100%);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            margin-top: 3rem;
        }
.cta-section h2 {
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 0.75rem;
        }
.cta-section p {
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }
.highlight-box {
            background: var(--space-card);
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            padding: 1.2rem 1.5rem;
            margin: 2rem 0;
        }
.highlight-box strong { color: var(--primary-light); }
.lang-current:hover { border-color: rgba(99,102,241,0.8); color: #fff; }
.lang-dropdown a:hover{background:rgba(99,102,241,0.15);color:#fff;}
.lang-dropdown a:hover, .lang-dropdown a[aria-current] { background: rgba(99,102,241,0.15); color: #fff; }
.stat-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }
.stat-number {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            font-weight: 900;
            color: var(--accent);
            display: block;
        }
/* Language switcher */
.lang-switcher { position: relative; display: inline-block; }
/* RTL support */
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
:lang(ja) p, :lang(zh-CN) p, :lang(zh-TW) p, :lang(ko) p {
    overflow-wrap: break-word; line-break: strict;
}
:lang(th) p { word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 600px) {
            .connect-grid { grid-template-columns: 1fr; }
            .stat-row { grid-template-columns: repeat(3, 1fr); }
        }
@media (max-width: 768px) {
            .nav-links { display: none; }
        }
[dir="rtl"] .back-link { flex-direction: row-reverse; }
[dir="rtl"] .back-link svg, [dir="rtl"] .nav-cta-arrow { transform: scaleX(-1); }
[dir="rtl"] .faq-question { flex-direction: row-reverse; }
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .nav-content { flex-direction: row-reverse; }
[dir="rtl"] body { text-align: right; }
ul {
            color: var(--text);
            margin-bottom: 1.4rem;
            padding-left: 1.5rem;
            font-size: 1.05rem;
        }
ul li { margin-bottom: 0.5rem; }

/* ─── Rich footer grid ───────────────────────────────────────────────────── */
footer { padding: 3rem 2rem 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto 30px; text-align: left; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; } }
.footer-group-title { font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-light); margin-bottom: 12px; opacity: 0.7; }
.footer-group a { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; padding: 4px 0; transition: color 0.2s; }
.footer-group a:hover { color: var(--primary-light); text-decoration: none; }
.footer-lang-flag { display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; opacity: 0.8; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(99,102,241,0.08); }
.footer-bottom p { color: var(--text-muted); font-size: 0.8rem; opacity: 0.6; }