/* ============================================================
   CodeKaFunda — style.css
   Light default theme, dark toggle, fully responsive
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg-primary:    #f0f4f8;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-code:       #1e1e2e;
  --border:        #e2e8f0;
  --border-light:  #cbd5e1;

  --text-primary:  #0f172a;
  --text-secondary:#475569;
  --text-muted:    #94a3b8;
  --text-code:     #cdd9e5;

  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-glow:   rgba(37,99,235,.12);

  --green:  #16a34a;
  --orange: #d97706;
  --purple: #7c3aed;
  --red:    #dc2626;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --font-body: 'Space Grotesk', sans-serif;
  --font-code: 'Fira Code', monospace;
  --font-ui:   'Nunito', sans-serif;

  --header-h:      64px;
  --sidebar-w:     272px;
  --container-max: 1280px;
  --transition:    .2s ease;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary:    #080d18;
  --bg-secondary:  #0e1525;
  --bg-card:       #111c2e;
  --bg-card-hover: #162340;
  --border:        #1e2d45;
  --border-light:  #263552;

  --text-primary:  #e8edf4;
  --text-secondary:#8fa3bf;
  --text-muted:    #546b8a;

  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-glow:   rgba(59,130,246,.15);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.55);
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); line-height:1.7; min-height:100vh; transition:background .3s,color .3s; }
a { color:var(--accent); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--accent-hover); }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
button { font-family:var(--font-body); }

/* ── Skip Link ─────────────────────────────────────────────── */
.skip-link { position:absolute; top:-100px; left:16px; z-index:9999; background:var(--accent); color:#fff; padding:8px 16px; border-radius:var(--radius-sm); font-weight:700; transition:top .2s; }
.skip-link:focus { top:8px; }

/* ── Container ─────────────────────────────────────────────── */
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 20px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600; cursor:pointer; border:none; transition:all var(--transition); text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); color:#fff; }
.btn-outline { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; }
.btn-lg { padding:13px 32px; font-size:1rem; border-radius:var(--radius-md); }

/* ── HEADER ────────────────────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--header-h); background:rgba(255,255,255,.96); border-bottom:1px solid var(--border); transition:background .3s,box-shadow .3s; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
[data-theme="dark"] .site-header { background:rgba(8,13,24,.96); }
.nav-container { max-width:var(--container-max); margin:0 auto; padding:0 20px; height:100%; display:flex; align-items:center; gap:24px; }

.logo { display:flex; align-items:center; gap:8px; font-size:1.25rem; font-weight:700; color:var(--text-primary); flex-shrink:0; }
.logo-icon { font-family:var(--font-code); font-size:1.3rem; background:linear-gradient(135deg,var(--accent),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo strong { color:var(--accent); }

.nav-links { display:flex; align-items:center; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-link { padding:6px 12px; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; transition:all var(--transition); border:1px solid transparent; }
.nav-link:hover,.nav-link.active { color:var(--lang-color,var(--accent)); background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.06); }
[data-theme="dark"] .nav-link:hover,[data-theme="dark"] .nav-link.active { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }

.nav-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.lang-switcher { display:flex; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.lang-btn { padding:5px 11px; font-size:.75rem; font-weight:700; background:transparent; color:var(--text-muted); border:none; cursor:pointer; transition:all var(--transition); }
.lang-btn.active { background:var(--accent); color:#fff; }
.lang-btn:not(.active):hover { background:var(--bg-card-hover); color:var(--text-primary); }

.theme-toggle,.search-btn { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); font-size:.95rem; }
.theme-toggle:hover,.search-btn:hover { background:var(--bg-card-hover); color:var(--text-primary); }

.hamburger { display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:transparent; border:none; cursor:pointer; padding:7px; }
.hamburger span { display:block; height:2px; background:var(--text-secondary); border-radius:2px; transition:all var(--transition); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu { display:none; position:fixed; top:var(--header-h); left:0; right:0; background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:12px 16px; z-index:999; max-height:calc(100vh - var(--header-h)); overflow-y:auto; }
.mobile-menu.open { display:block; }
.mobile-menu ul { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mobile-menu a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text-primary); font-weight:600; font-size:.84rem; transition:background var(--transition); }
.mobile-menu a:hover,.mobile-menu a.active { background:var(--bg-card-hover); }
.mobile-lang-badge { font-family:var(--font-code); font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid; background:transparent; flex-shrink:0; }

/* ── SEARCH OVERLAY ────────────────────────────────────────── */
.search-overlay { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); padding:72px 16px 16px; }
.search-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
.search-box { width:100%; max-width:640px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; }
.search-icon-inside { position:absolute; left:18px; top:18px; color:var(--text-muted); }
.search-box input { width:100%; padding:16px 50px; background:transparent; border:none; outline:none; color:var(--text-primary); font-size:1rem; font-family:var(--font-body); }
.search-close { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; padding:6px; }
.search-results { border-top:1px solid var(--border); }
.search-result-item { display:flex; align-items:center; gap:12px; padding:11px 18px; cursor:pointer; transition:background var(--transition); text-decoration:none; color:var(--text-primary); }
.search-result-item:hover { background:var(--bg-card-hover); }
.search-result-badge { font-family:var(--font-code); font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--bg-primary); flex-shrink:0; }
.search-result-title { font-size:.88rem; font-weight:500; }
.search-result-section { font-size:.73rem; color:var(--text-muted); margin-top:1px; }
.search-hint { padding:8px 18px; font-size:.72rem; color:var(--text-muted); border-top:1px solid var(--border); }
.search-hint kbd { background:var(--bg-primary); border:1px solid var(--border); border-radius:3px; padding:1px 5px; font-size:.7rem; font-family:var(--font-code); }

/* ── MAIN ──────────────────────────────────────────────────── */
#main-content { padding-top:var(--header-h); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero { padding:72px 0 56px; background:radial-gradient(ellipse at 50% 0%,rgba(37,99,235,.07) 0%,transparent 60%),var(--bg-primary); text-align:center; position:relative; overflow:hidden; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.2); color:var(--accent); font-size:.8rem; font-weight:600; padding:5px 14px; border-radius:100px; margin-bottom:20px; }
.hero h1 { font-size:clamp(1.9rem,5vw,3.2rem); font-weight:700; line-height:1.2; margin-bottom:14px; }
.hero h1 span { color:var(--accent); }
.hero p { font-size:clamp(.95rem,2vw,1.15rem); color:var(--text-secondary); max-width:580px; margin:0 auto 28px; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-num { display:block; font-size:1.7rem; font-weight:700; }
.stat-label { font-size:.78rem; color:var(--text-muted); }

/* ── SECTION HELPERS ────────────────────────────────────────── */
.section-tag { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:10px; }
.section-subtitle { text-align:center; color:var(--text-secondary); margin-bottom:36px; font-size:.93rem; }
section h2 { font-size:clamp(1.35rem,3vw,1.85rem); margin-bottom:6px; }

/* ── LANG CARDS GRID ────────────────────────────────────────── */
.lang-section { padding:56px 0; }
.lang-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.lang-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; transition:all .28s; position:relative; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; }
.lang-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-color,var(--accent)); }
.lang-card::after { content:''; position:absolute; top:-50px; right:-50px; width:120px; height:120px; border-radius:50%; background:var(--card-color,var(--accent)); opacity:.04; transition:opacity .3s; }
.lang-card:hover { border-color:var(--card-color,var(--accent)); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.lang-card:hover::after { opacity:.08; }
.lang-card-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.lang-icon-badge { width:52px; height:52px; border-radius:var(--radius-md); background:var(--bg-primary); border:2px solid var(--card-color,var(--accent)); display:flex; align-items:center; justify-content:center; font-family:var(--font-code); font-size:.75rem; font-weight:700; color:var(--card-color,var(--accent)); flex-shrink:0; }
.lang-card-title { font-size:1.15rem; font-weight:700; }
.lang-card-tagline { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
.lang-card-desc { font-size:.86rem; color:var(--text-secondary); margin-bottom:18px; line-height:1.65; flex:1; }
.lang-card-meta { display:flex; gap:14px; margin-bottom:16px; }
.meta-chip { display:flex; align-items:center; gap:4px; font-size:.73rem; color:var(--text-muted); }
.meta-chip span { font-weight:600; color:var(--text-secondary); }
.lang-card-topics { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:18px; }
.topic-chip { font-size:.7rem; padding:3px 9px; background:var(--bg-primary); border:1px solid var(--border); border-radius:100px; color:var(--text-muted); }
.lang-card-footer { display:flex; align-items:center; justify-content:space-between; }
.lang-card-cta { display:inline-flex; align-items:center; gap:5px; font-size:.83rem; font-weight:600; color:var(--card-color,var(--accent)); padding:7px 14px; border-radius:var(--radius-sm); border:1px solid var(--card-color,var(--accent)); transition:all var(--transition); }
.lang-card-cta:hover { background:var(--card-color,var(--accent)); color:#fff; }
.free-badge { font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:100px; background:rgba(22,163,74,.1); color:var(--green); border:1px solid rgba(22,163,74,.2); }

/* ── WHY SECTION ─────────────────────────────────────────────── */
.why-section { padding:56px 0; background:var(--bg-secondary); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; margin-top:36px; }
.feature-card { text-align:center; padding:26px 18px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); transition:all var(--transition); }
.feature-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.feature-icon { font-size:1.8rem; margin-bottom:10px; display:block; }
.feature-card h3 { font-size:.95rem; margin-bottom:6px; }
.feature-card p { font-size:.82rem; color:var(--text-secondary); }

/* ── LANG HERO (index page per language) ────────────────────── */
.lang-hero { padding:52px 0 36px; background:radial-gradient(ellipse at 40% 0%,rgba(var(--hero-r),var(--hero-g),var(--hero-b),.1) 0%,transparent 60%),var(--bg-primary); }
.lang-hero-inner { display:flex; gap:32px; align-items:center; }
.lang-hero-icon { width:88px; height:88px; border-radius:var(--radius-lg); background:var(--bg-card); border:2px solid var(--hero-color,var(--accent)); display:flex; align-items:center; justify-content:center; font-family:var(--font-code); font-size:1.1rem; font-weight:700; color:var(--hero-color,var(--accent)); flex-shrink:0; box-shadow:0 0 32px rgba(var(--hero-r),var(--hero-g),var(--hero-b),.18); }
.lang-hero-content h1 { font-size:clamp(1.7rem,4vw,2.5rem); font-weight:700; margin-bottom:8px; }
.lang-hero-content h1 span { color:var(--hero-color,var(--accent)); }
.lang-hero-content .tagline { font-size:.95rem; color:var(--text-secondary); margin-bottom:14px; }
.lang-hero-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.hero-chip { font-size:.73rem; font-weight:600; padding:4px 12px; border-radius:100px; border:1px solid var(--hero-color,var(--accent)); color:var(--hero-color,var(--accent)); background:rgba(var(--hero-r),var(--hero-g),var(--hero-b),.06); }
.lang-hero-btns { display:flex; gap:10px; flex-wrap:wrap; }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb { padding:10px 0; font-size:.78rem; border-bottom:1px solid var(--border); margin-bottom:28px; }
.breadcrumb ol { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.breadcrumb li { display:flex; align-items:center; gap:6px; }
.breadcrumb li:not(:last-child)::after { content:'›'; color:var(--text-muted); }
.breadcrumb a { color:var(--text-secondary); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb li:last-child span { color:var(--text-muted); }

/* ── TOC LAYOUT ──────────────────────────────────────────────── */
.toc-layout { display:grid; grid-template-columns:1fr var(--sidebar-w); gap:28px; padding:28px 0 56px; }
.toc-section { margin-bottom:28px; }
.toc-section-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--border); }
.toc-section-num { width:30px; height:30px; border-radius:50%; background:var(--hero-color,var(--accent)); color:#fff; font-size:.76rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toc-section-title { font-size:1.05rem; font-weight:700; }
.toc-section-count { margin-left:auto; font-size:.72rem; color:var(--text-muted); background:var(--bg-primary); padding:2px 9px; border-radius:100px; }
.toc-items { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.toc-item { display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:.83rem; transition:all var(--transition); }
.toc-item:hover { background:var(--bg-card-hover); border-color:var(--hero-color,var(--accent)); color:var(--hero-color,var(--accent)); transform:translateX(3px); }
.toc-item-num { font-family:var(--font-code); font-size:.68rem; color:var(--text-muted); flex-shrink:0; min-width:22px; }
.toc-item-text { flex:1; line-height:1.4; }
.toc-item-arrow { opacity:0; transition:opacity var(--transition); flex-shrink:0; font-size:.85rem; }
.toc-item:hover .toc-item-arrow { opacity:1; }

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.toc-aside { display:flex; flex-direction:column; gap:20px; }
.sidebar-widget { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; }
.sidebar-widget.sticky-top { position:sticky; top:calc(var(--header-h) + 16px); }
.widget-title { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:13px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.quick-jump { display:flex; flex-direction:column; gap:2px; }
.quick-jump a { padding:7px 10px; border-radius:var(--radius-sm); font-size:.8rem; color:var(--text-secondary); display:flex; align-items:center; gap:7px; transition:all var(--transition); }
.quick-jump a:hover,.quick-jump a.is-active { background:var(--bg-card-hover); color:var(--hero-color,var(--accent)); }
.dot { width:5px; height:5px; border-radius:50%; background:var(--hero-color,var(--accent)); flex-shrink:0; opacity:.5; }
.quick-jump a:hover .dot,.quick-jump a.is-active .dot { opacity:1; }
.other-langs a { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--border); font-size:.81rem; color:var(--text-secondary); transition:color var(--transition); }
.other-langs a:last-child { border-bottom:none; }
.other-langs a:hover { color:var(--text-primary); }
.other-lang-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── TUTORIAL ARTICLE ────────────────────────────────────────── */
.tutorial-body h2 { font-size:1.3rem; margin:32px 0 12px; color:var(--text-primary); padding-bottom:8px; border-bottom:2px solid var(--border); }
.tutorial-body h3 { font-size:1.05rem; margin:22px 0 10px; color:var(--text-primary); }
.tutorial-body h4 { font-size:.95rem; margin:18px 0 8px; color:var(--text-primary); }
.tutorial-body p { color:var(--text-secondary); line-height:1.85; margin-bottom:16px; font-size:.94rem; }
.tutorial-body ul,.tutorial-body ol { padding-left:22px; margin-bottom:16px; }
.tutorial-body li { color:var(--text-secondary); margin-bottom:7px; line-height:1.75; font-size:.92rem; }
.tutorial-body ul li { list-style:disc; }
.tutorial-body ol li { list-style:decimal; }
.tutorial-body strong { color:var(--text-primary); }
.tutorial-body table { width:100%; margin:16px 0; }
code:not([class*="language"]) { font-family:var(--font-code); font-size:.84em; background:var(--bg-card); border:1px solid var(--border); padding:2px 6px; border-radius:4px; color:var(--accent); }

/* ── CODE BLOCK ──────────────────────────────────────────────── */
.code-block-wrapper { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); margin:18px 0; }
.code-block-header { background:#1a1a2e; padding:9px 16px; display:flex; align-items:center; justify-content:space-between; }
.code-block-lang { font-family:var(--font-code); font-size:.72rem; color:#8fa3bf; }
.copy-btn { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#8fa3bf; padding:3px 11px; border-radius:4px; font-size:.72rem; cursor:pointer; transition:all var(--transition); font-family:var(--font-body); }
.copy-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.copy-btn.copied { background:var(--green); color:#fff; border-color:var(--green); }
pre[class*="language-"] { margin:0!important; border-radius:0!important; font-size:.87rem!important; }

/* ── INFO BOXES ──────────────────────────────────────────────── */
.info-box { padding:14px 18px; border-radius:var(--radius-sm); margin:18px 0; border-left:4px solid; font-size:.88rem; line-height:1.7; }
.info-box.note   { background:rgba(37,99,235,.06);  border-color:var(--accent); }
.info-box.tip    { background:rgba(22,163,74,.06);  border-color:var(--green); }
.info-box.warn   { background:rgba(217,119,6,.06);  border-color:var(--orange); }
.info-box.danger { background:rgba(220,38,38,.06);  border-color:var(--red); }
.info-box strong { display:block; margin-bottom:5px; font-size:.9rem; }

/* ── TABLE ────────────────────────────────────────────────────── */
.table-responsive { overflow-x:auto; margin:18px 0; border-radius:var(--radius-md); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th { background:var(--bg-card); padding:11px 14px; text-align:left; font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap; }
td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg-card-hover); }

/* ── AD SLOTS ────────────────────────────────────────────────── */
.ad-slot { width:100%; min-height:90px; display:block; background:var(--bg-card); border:1px dashed var(--border); border-radius:var(--radius-sm); margin:20px 0; overflow:hidden; }
.ad-slot-label { text-align:center; padding:4px; font-size:.62rem; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; }

/* ── OUTPUT BOX ──────────────────────────────────────────────── */
.output-box { background:#0d1117; border:1px solid #30363d; border-radius:var(--radius-sm); padding:12px 16px; font-family:var(--font-code); font-size:.86rem; color:#00e676; margin:8px 0 18px; white-space:pre-wrap; }
.output-label { font-size:.72rem; color:var(--text-muted); font-weight:700; margin-bottom:4px; }

/* ── COMING SOON ─────────────────────────────────────────────── */
.coming-soon-box { text-align:center; padding:52px 28px; background:var(--bg-card); border:2px dashed var(--border); border-radius:var(--radius-lg); margin:28px 0; }
.coming-soon-box h2 { font-size:1.3rem; margin:12px 0 10px; }
.coming-soon-box p { color:var(--text-secondary); max-width:440px; margin:0 auto 20px; font-size:.9rem; }

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.newsletter-section { background:var(--bg-secondary); border-top:1px solid var(--border); padding:44px 0; }
.newsletter-card { display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg,rgba(37,99,235,.05),rgba(124,58,237,.05)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; max-width:800px; margin:0 auto; }
.newsletter-content h3 { font-size:1.15rem; margin-bottom:5px; }
.newsletter-content p { font-size:.86rem; color:var(--text-secondary); }
.newsletter-form { display:flex; gap:8px; flex:1; min-width:260px; }
.newsletter-form input { flex:1; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.88rem; outline:none; transition:border-color var(--transition); }
.newsletter-form input:focus { border-color:var(--accent); }
.newsletter-form input::placeholder { color:var(--text-muted); }

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer { background:var(--bg-secondary); border-top:1px solid var(--border); padding:52px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
.footer-logo { display:flex; align-items:center; gap:8px; font-size:1.15rem; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
.footer-about p { font-size:.83rem; color:var(--text-secondary); margin-bottom:14px; line-height:1.65; }
.social-links { display:flex; gap:10px; }
.social-links a { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; transition:all var(--transition); }
.social-links a:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.footer-col h4 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:14px; }
.footer-col ul li { margin-bottom:9px; }
.footer-col ul a { font-size:.83rem; color:var(--text-secondary); transition:color var(--transition); }
.footer-col ul a:hover { color:var(--text-primary); }
.footer-bottom { border-top:1px solid var(--border); padding:18px 0; text-align:center; }
.footer-bottom p { font-size:.78rem; color:var(--text-muted); }
.footer-bottom p+p { margin-top:5px; }

/* ── BACK TO TOP ──────────────────────────────────────────────── */
.back-to-top { position:fixed; bottom:22px; right:22px; z-index:100; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:1rem; cursor:pointer; box-shadow:var(--shadow-md); transition:all var(--transition); opacity:0; pointer-events:none; transform:translateY(10px); }
.back-to-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-2px); background:var(--accent-hover); }

/* ── SIDEBAR TOC ──────────────────────────────────────────────── */
.sidebar-toc { max-height:480px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.sidebar-toc::-webkit-scrollbar { width:4px; }
.sidebar-toc::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.sidebar-toc-section-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); padding:10px 0 3px; border-top:1px solid var(--border); margin-top:4px; }

/* ── FORM STYLES ──────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.form-input,.form-textarea,.form-select { width:100%; padding:10px 14px; background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color var(--transition); }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--accent); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--text-muted); }
.form-textarea { resize:vertical; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1024px) {
  .toc-layout { grid-template-columns:1fr; }
  .toc-aside .sidebar-widget.sticky-top { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:22px; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .lang-grid { grid-template-columns:1fr; }
  .toc-items { grid-template-columns:1fr; }
  .lang-hero-inner { flex-direction:column; text-align:center; }
  .lang-hero-chips,.lang-hero-btns { justify-content:center; }
  .newsletter-card { flex-direction:column; }
  .newsletter-form { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; }
  .hero-stats { gap:18px; }
  :root { --header-h:58px; }
}
@media(max-width:480px) {
  .toc-items { grid-template-columns:1fr; }
  .hero-cta { flex-direction:column; align-items:center; }
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation:fadeInUp .45s ease forwards; }
.anim-d1 { animation-delay:.1s; opacity:0; }
.anim-d2 { animation-delay:.2s; opacity:0; }
.anim-d3 { animation-delay:.3s; opacity:0; }
.anim-d4 { animation-delay:.4s; opacity:0; }

/* ── HIGHLIGHT BOX ────────────────────────────────────────────── */
.highlight-box { background:rgba(var(--hero-r,37),var(--hero-g,99),var(--hero-b,235),.06); border:1px solid rgba(var(--hero-r,37),var(--hero-g,99),var(--hero-b,235),.18); border-radius:10px; padding:18px 22px; margin:16px 0; }

/* ── ABOUT / STATIC PAGE ─────────────────────────────────────── */
.static-page { max-width:780px; margin:0 auto; padding:40px 0 80px; }
.static-page h1 { font-size:2rem; margin-bottom:10px; }
.static-page h2 { font-size:1.1rem; margin:28px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.static-page p,.static-page li { color:var(--text-secondary); font-size:.9rem; line-height:1.8; }
.static-page ul { padding-left:20px; margin-bottom:12px; }
.static-page ul li { list-style:disc; margin-bottom:6px; }
.static-section-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:20px; }