/* ── Tokens ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg:       #0c0c0f;
    --surface:  #141418;
    --surface2: #1a1a20;
    --border:   #25252e;
    --stripe:   rgba(255, 255, 255, 0.015);
    --text:     #e8e8ec;
    --muted:    #6e6e82;
    --accent:   #c4f04d;
    --accent2:  #4dc4f0;
    --danger:   #f04d6e;
    --radius:   12px;
    --nav-bg:   rgba(12, 12, 15, 0.92);
}

[data-theme="light"] {
    --bg:       #f5f5f7;
    --surface:  #ffffff;
    --surface2: #f0f0f3;
    --border:   #dcdce0;
    --stripe:   rgba(0, 0, 0, 0.02);
    --text:     #1a1a2e;
    --muted:    #6b6b80;
    --accent:   #2d7a3a;
    --accent2:  #1a6fb5;
    --danger:   #d93251;
    --nav-bg:   rgba(245, 245, 247, 0.92);
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
input:focus, textarea:focus, button:focus-visible { outline: none; }

/* ── Layout ─────────────────────────────────────────── */
#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.main {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px 60px;
    flex: 1;
}
.main--wide {
    max-width: 1400px;
}

/* ══════════════════════════════════════════════════════
   ─── NAVIGATION ──────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.nav {
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
}
.nav__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
.nav__diamond { color: var(--accent); font-size: 16px; }
.nav__brand { color: var(--text); }
.nav__links {
    display: flex;
    gap: 2px;
    align-items: center;
}
.nav__link {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav__link:hover {
    color: var(--text);
    background: var(--surface2);
}

/* Dropdown trigger */
.nav__link--trigger {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav__caret {
    opacity: 0.5;
    transition: transform 0.2s;
}
.nav__dropdown {
    position: relative;
}
.nav__dropdown:hover .nav__caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* Mega menu panel */
.nav__mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 200;
}
.nav__dropdown:hover .nav__mega {
    opacity: 1;
    pointer-events: auto;
}
.nav__mega-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    min-width: 300px;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav__mega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}
.nav__mega-item:hover {
    background: var(--surface2);
}
.nav__mega-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.nav__mega-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav__mega-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.nav__mega-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* Language dropdown */
.nav__lang-dropdown {
    position: relative;
}
.nav__lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.nav__lang-btn:hover { color: var(--accent); border-color: var(--accent); }
.nav__lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 4px;
    z-index: 1000;
    flex-direction: column;
}
.nav__lang-dropdown--open .nav__lang-menu { display: flex; }
.nav__lang-option {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text);
    border-radius: 6px;
    transition: background 0.1s;
}
.nav__lang-option:hover { background: var(--hover); }
.nav__lang-option--active { color: var(--accent); font-weight: 600; }

/* Legacy inline lang links (mobile) */
.nav__lang {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: color 0.15s, border-color 0.15s;
}
.nav__lang:hover { color: var(--accent); border-color: var(--accent); }
.nav__lang--active { color: var(--accent); border-color: var(--accent); }

/* Theme toggle */
.nav__theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    transition: border-color 0.15s;
    color: var(--text);
}
.nav__theme-toggle:hover { border-color: var(--accent); }

/* Hamburger */
.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.nav__hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--muted);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav__hamburger--open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav__hamburger--open span:nth-child(2) { opacity: 0; }
.nav__hamburger--open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile menu */
.nav__mobile {
    display: none;
    flex-direction: column;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}
.nav__mobile--open { display: flex; }
/* Mobile accordion groups */
.nav__mobile-group {
    border-bottom: 1px solid var(--border);
}
.nav__mobile-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav__mobile-group-toggle .nav__caret {
    transition: transform 0.2s;
}
.nav__mobile-group--open .nav__mobile-group-toggle .nav__caret {
    transform: rotate(180deg);
}
.nav__mobile-group-items {
    display: none;
    flex-direction: column;
    padding-bottom: 8px;
}
.nav__mobile-group--open .nav__mobile-group-items {
    display: flex;
}
.nav__mobile-link {
    padding: 8px 0 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.15s;
}
.nav__mobile-link:hover { color: var(--text); }
.nav__mobile-link--top {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.nav__mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
}
.nav__mobile-lang {
    display: flex;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════
   ─── HERO ────────────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.hero {
    text-align: center;
    padding: 48px 0 40px;
}
.hero__title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 12px;
}
.hero__subtitle {
    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 32px;
}

/* ── Search ────────────────────────────────────────── */
.hero__search {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}
.hero__search-input {
    width: 100%;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    transition: border-color 0.15s;
}
.hero__search-input:focus { border-color: var(--accent); }
.hero__search-input::placeholder { color: var(--muted); }

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    z-index: 50;
    max-height: 360px;
    overflow-y: auto;
}
.search-results__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    text-align: left;
}
.search-results__item:last-child { border-bottom: none; }
.search-results__item:hover { background: var(--surface2); }
.search-results__icon { font-size: 20px; flex-shrink: 0; }
.search-results__name { font-weight: 600; font-size: 14px; }
.search-results__desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.search-results__empty {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════
   ─── CATEGORIES ──────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.categories { margin-bottom: 40px; }
.categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.category-card {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s;
}
.category-card:hover {
    border-color: var(--accent);
    background: var(--surface2);
}
.category-card__icon { font-size: 28px; flex-shrink: 0; }
.category-card__body { display: flex; flex-direction: column; gap: 4px; }
.category-card__name { font-weight: 600; font-size: 16px; }
.category-card__desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.category-card__count { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   ─── BREADCRUMB ──────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}
.breadcrumb a {
    color: var(--muted);
    transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { color: var(--border); }

/* ── Page Header ───────────────────────────────────── */
.page-header { margin-bottom: 28px; }
.page-header__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.page-header__icon { font-size: 28px; }
.page-header__title-row h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.page-header__desc {
    color: var(--muted);
    font-size: 15px;
    font-weight: 300;
}
.page-header__updated {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.7;
    font-family: 'DM Mono', monospace;
}
.category-backlink {
    margin: 24px 0;
}
.category-backlink__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.category-backlink__link:hover {
    border-color: var(--accent);
    background: var(--card);
}
.category-backlink__icon {
    font-size: 1.3em;
}
.category-backlink__text {
    flex: 1;
    font-size: 14px;
    color: var(--muted);
}
.category-backlink__text strong {
    color: var(--text);
}
.category-backlink__arrow {
    font-size: 18px;
    color: var(--accent);
}
.denmark-notice {
    font-size: 13px;
    color: var(--muted);
    padding: 10px 14px;
    margin: 12px 0 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
   ─── FACTBOX ─────────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.factbox {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}
.factbox__icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.factbox__body {
    color: var(--muted);
}
@media (max-width: 600px) {
    .factbox { padding: 14px 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════
   ─── SECTION LABEL ──────────────────────────────────
   ══════════════════════════════════════════════════════ */
.section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-bottom: 16px;
    padding-left: 4px;
}

.all-calcs { margin-bottom: 32px; }

/* ══════════════════════════════════════════════════════
   ─── TEMPLATE PICKER GRID ───────────────────────────
   ══════════════════════════════════════════════════════ */
.picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.picker__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: inherit;
    color: var(--text);
}
.picker__card:hover {
    border-color: var(--accent);
    background: var(--surface2);
}
.picker__card-icon { font-size: 24px; }
.picker__card-name { font-weight: 600; font-size: 15px; }
.picker__card-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ══════════════════════════════════════════════════════
   ─── CALCULATOR WORKSPACE ────────────────────────────
   ══════════════════════════════════════════════════════ */
.workspace__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* ── Panel ──────────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}
.panel__fields {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.field-group {
    flex: 1 1 140px;
    min-width: 140px;
}
.field-group > label:first-child {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    margin-bottom: 6px;
}
.field-group__wrap { position: relative; }
.field-group input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    transition: border-color 0.15s;
}
.field-group input[type="number"]:focus { border-color: var(--accent); }
.field-group__suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 12px;
    font-family: 'DM Mono', monospace;
    pointer-events: none;
}
/* ── Toggle switch (boolean fields) ─── */
.field-group--boolean {
    flex: 0 1 auto;
    min-width: auto;
}
.field-group--boolean > label:first-child {
    margin-bottom: 0;
}
.toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    height: 42px;
    padding: 0;
    margin: 0;
}
.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle__track {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 26px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 13px;
    transition: background 0.2s, border-color 0.2s;
}
.toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle__track {
    background: var(--accent);
    border-color: var(--accent);
}
.toggle input:checked + .toggle__track .toggle__thumb {
    transform: translateX(22px);
    background: var(--bg);
}
.toggle__label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    line-height: 1;
}
.toggle__on  { display: none; }
.toggle__off { display: inline; color: var(--muted); }
.toggle input:checked ~ .toggle__label .toggle__on  { display: inline; color: var(--accent); }
.toggle input:checked ~ .toggle__label .toggle__off { display: none; }

.panel__action { padding: 0 20px 20px; }
.btn-compute {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.3px;
    transition: opacity 0.15s;
}
.btn-compute:hover { opacity: 0.85; }

/* ── Error ──────────────────────────────────────────── */
.error-box {
    background: rgba(240, 77, 110, 0.1);
    border: 1px solid rgba(240, 77, 110, 0.3);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--danger);
}

/* ── Result panel ───────────────────────────────────── */
.result-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.result-panel__header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.result-panel__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent);
}
.result-panel__badge {
    font-size: 10px;
    font-family: 'DM Mono', monospace;
    color: var(--muted);
    background: var(--surface2);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ── Visualization: Gauge ───────────────────────────── */
.viz-container {
    padding: 24px 20px 8px;
}
.viz-gauge__value {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
.viz-gauge__number {
    font-size: 48px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1;
}
.viz-gauge__label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.viz-gauge__track {
    position: relative;
    height: 12px;
    border-radius: 6px;
    overflow: visible;
    display: flex;
    background: var(--surface2);
}
.viz-gauge__zone {
    position: absolute;
    top: 0;
    height: 100%;
    opacity: 0.85;
}
.viz-gauge__zone:first-child {
    border-radius: 6px 0 0 6px;
}
.viz-gauge__zone:nth-last-of-type(2) {
    border-radius: 0 6px 6px 0;
}
.viz-gauge__needle {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    background: var(--text);
    border-radius: 2px;
    transform: translateX(-2px);
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
    z-index: 2;
    transition: left 0.4s ease;
}
.viz-gauge__labels {
    position: relative;
    height: 24px;
    margin-top: 6px;
}
.viz-gauge__zone-label {
    position: absolute;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Visualization: Donut ───────────────────────────── */
.viz-donut {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.viz-donut__chart {
    flex-shrink: 0;
}
.viz-donut__chart svg {
    display: block;
    transform: rotate(-90deg);
}
.viz-donut__total-val {
    font-family: 'DM Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    fill: var(--text);
    transform: rotate(90deg);
    transform-origin: center;
}
.viz-donut__total-lbl {
    font-size: 10px;
    fill: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(90deg);
    transform-origin: center;
}
.viz-donut__legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}
.viz-donut__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.viz-donut__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.viz-donut__legend-label {
    color: var(--text);
    flex: 1;
}
.viz-donut__legend-val {
    font-family: 'DM Mono', monospace;
    color: var(--text);
    font-weight: 500;
}
.viz-donut__legend-pct {
    font-family: 'DM Mono', monospace;
    color: var(--muted);
    font-size: 12px;
    min-width: 44px;
    text-align: right;
}

/* ── Output: Scalar ─────────────────────────────────── */
.out-scalar {
    padding: 24px 20px;
    font-size: 32px;
    font-family: 'DM Mono', monospace;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: -0.5px;
}

/* ── Output: List ───────────────────────────────────── */
.out-list-item {
    padding: 8px 20px;
    font-family: 'DM Mono', monospace;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
}
.out-list-item:last-child { border-bottom: none; }
.out-list-idx {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    min-width: 24px;
}

/* ── Output: Table ──────────────────────────────────── */
.out-table-wrap { overflow-x: auto; }
.out-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
}
.out-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    border-bottom: 2px solid var(--accent);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.out-table td {
    padding: 8px 16px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.out-table tr:nth-child(even) td { background: var(--stripe); }
.btn-show-more {
    display: block;
    width: 100%;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--accent);
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
}
.btn-show-more:hover { background: var(--surface2); }

/* ── Output: Matrix ─────────────────────────────────── */
.out-matrix { overflow-x: auto; padding: 12px 20px; }
.out-matrix table { border-collapse: collapse; font-family: 'DM Mono', monospace; font-size: 14px; }
.out-matrix td {
    padding: 6px 16px;
    text-align: right;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ── Output: Object ─────────────────────────────────── */
.out-obj-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 20px;
    gap: 20px;
    border-bottom: 1px solid var(--border);
}
.out-obj-row:last-child { border-bottom: none; }
.out-obj-key {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.out-obj-val {
    font-family: 'DM Mono', monospace;
    font-size: 16px;
    color: var(--accent);
    font-weight: 500;
}

/* ── Output: Composite section label ────────────────── */
.out-section-label {
    padding: 12px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent);
    font-family: 'DM Mono', monospace;
}

/* ── Output: Empty ──────────────────────────────────── */
.out-empty {
    padding: 20px;
    color: var(--muted);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════
   ─── STATIC PAGES ────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.static-page {
    padding: 32px 0;
}
.static-page h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}
.static-page__content {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}
.static-page__content p { margin-bottom: 16px; }
.static-page__content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--accent);
}
.static-page__content ul {
    margin: 12px 0 16px 20px;
}
.static-page__content li {
    margin-bottom: 6px;
    line-height: 1.6;
}
.static-page__content strong { color: var(--accent); }

.static-page--centered {
    text-align: center;
    padding: 80px 0;
}
.static-page--centered h1 {
    font-size: 72px;
    color: var(--accent);
    margin-bottom: 8px;
}
.static-page__subtitle {
    font-size: 18px;
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════
   ─── FOOTER ─────────────────────────────────────────
   ══════════════════════════════════════════════════════ */
.footer {
    border-top: 1px solid var(--border);
    padding: 24px 16px;
    margin-top: auto;
}
.footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer__brand {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer__tagline {
    font-weight: 300;
    color: var(--muted);
    font-size: 13px;
}
.footer__links {
    display: flex;
    gap: 16px;
}
.footer__links a {
    font-size: 13px;
    color: var(--muted);
    transition: color 0.15s;
}
.footer__links a:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════
   ─── CALCULATOR GRID LAYOUT ─────────────────────────
   ══════════════════════════════════════════════════════ */
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}
.calc-grid__main {
    min-width: 0;
}
.calc-grid__sidebar {
    min-width: 0;
}
.sidebar-sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Ad slots ──────────────────────────────────────── */
.ad-slot__inner:empty {
    display: none;
}

/* ── Long-form content ─────────────────────────────── */
.calc-content {
    margin: 8px 0 0;
}
.calc-content__body {
    color: var(--text);
    font-size: 15px;
    line-height: 1.75;
}
.calc-content__body h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 32px 0 12px;
    color: var(--text);
}
.calc-content__body h2:first-child {
    margin-top: 0;
}
.calc-content__body h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: var(--accent);
}
.calc-content__body p {
    margin-bottom: 14px;
}
.calc-content__body strong {
    color: var(--accent);
    font-weight: 600;
}
.calc-content__body ul,
.calc-content__body ol {
    margin: 10px 0 14px 20px;
}
.calc-content__body li {
    margin-bottom: 6px;
    line-height: 1.6;
}

/* ── FAQ accordion ────────────────────────────────── */
.faq {
    margin: 24px 0 0;
}
.faq__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 16px;
    color: var(--text);
}
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
}
.faq__item[open] {
    border-color: var(--accent);
}
.faq__question {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    color: var(--text);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
    content: '+';
    font-size: 18px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.faq__item[open] .faq__question::after {
    content: '\2212';
    color: var(--accent);
}
.faq__answer {
    padding: 0 20px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}
.faq__answer p {
    margin: 0;
}

/* ── Sources ──────────────────────────────────────── */
.sources {
    margin: 24px 0 0;
}
.sources__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 12px;
    color: var(--text);
}
.sources__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sources__link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.2s, background 0.2s;
}
.sources__link:hover {
    border-color: var(--accent);
    background: var(--surface2);
}
.sources__url {
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
}

/* ── Related calculators ───────────────────────────── */
.related {
    margin-top: 8px;
}
.related__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.related__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s, background 0.2s;
}
.related__card:hover {
    border-color: var(--accent);
    background: var(--surface2);
}
.related__icon {
    font-size: 22px;
    flex-shrink: 0;
}
.related__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.related__name {
    font-weight: 600;
    font-size: 14px;
}
.related__desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   ─── RESPONSIVE ──────────────────────────────────────
   ══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .calc-grid {
        grid-template-columns: 1fr;
    }
    .calc-grid__sidebar {
        order: 99;
    }
    .sidebar-sticky {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ad-slot--sidebar {
        flex: 1 1 250px;
    }
}

@media (max-width: 640px) {
    .nav__links { display: none; }
    .nav__lang { display: none; }
    .nav__hamburger { display: flex; }
    .nav__mega { display: none; }

    .hero__title { font-size: 28px; }
    .hero__subtitle { font-size: 14px; }

    .categories__grid { grid-template-columns: 1fr; }
    .picker__grid { grid-template-columns: 1fr; }
    .panel__fields { padding: 16px; gap: 12px; }
    .field-group { flex: 1 1 100%; }

    .footer__inner { flex-direction: column; text-align: center; }

    .sidebar-sticky { flex-direction: column; }

    .nav__lang-dropdown { display: none; }
    .nav__mobile-lang { flex-wrap: wrap; }
}

/* ═══ RTL Support (Arabic) ═══ */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .nav__inner { flex-direction: row-reverse; }
[dir="rtl"] .nav__links { flex-direction: row-reverse; }
[dir="rtl"] .nav__actions { flex-direction: row-reverse; }
[dir="rtl"] .breadcrumb { direction: ltr; }
[dir="rtl"] .nav__lang-menu { right: auto; left: 0; }
[dir="rtl"] .field-group__suffix { right: auto; left: 12px; }
[dir="rtl"] .toggle { flex-direction: row-reverse; }
[dir="rtl"] .factbox { border-left: none; border-right: 3px solid var(--accent); }
[dir="rtl"] .sources__url { margin-left: 0; margin-right: 8px; }