/* ==========================================================================
   CopyCharacter Canonical Light Visual Design System
   Professional Technical Reference Utility Theme
   Light Mode Only - WCAG 2.2 AA Conformance
   ========================================================================== */
:root {
    color-scheme: light;

    /* BRAND BLUE PALETTE */
    --color-brand-50:  #EFF6FF;
    --color-brand-100: #DBEAFE;
    --color-brand-200: #BFDBFE;
    --color-brand-300: #93C5FD;
    --color-brand-400: #60A5FA;
    --color-brand-500: #3B82F6;
    --color-brand-600: #2563EB;
    --color-brand-700: #1D4ED8; /* Primary Brand Blue */
    --color-brand-800: #1E40AF; /* Primary Hover */
    --color-brand-900: #1E3A8A; /* Primary Active */

    /* Shorthand brand tokens */
    --brand-50:  #EFF6FF;
    --brand-100: #DBEAFE;
    --brand-600: #2563EB;
    --brand-700: #1D4ED8;
    --brand-800: #1E40AF;
    --brand-900: #1E3A8A;
    --brand: #1D4ED8;
    --brand-hover: #1E40AF;
    --brand-active: #1E3A8A;
    --brand-secondary: #4338CA;
    --brand-soft: #EFF6FF;

    /* SECONDARY INDIGO PALETTE */
    --color-indigo-50:  #EEF2FF;
    --color-indigo-100: #E0E7FF;
    --color-indigo-600: #4F46E5;
    --color-indigo-700: #4338CA; /* Secondary Brand Indigo */
    --color-indigo-800: #3730A3;
    --color-indigo-200: #C7D2FE; /* Round 57 R39: indigo-200 tier — light chip/hover borders */
    --color-sky-400: #38BDF8; /* Round 58 R39a-b: dark-card accent (terminal/feature-card idioms) */
    --color-sky-300: #7DD3FC; /* Round 58 R39a-b: dark-card accent hover */
    /* Round 58 R40: z-index ladder tokenized (semantics named per dominant
       usage). Round 66: legacy emergency tiers consolidated — order-preserving
       re-value onto a uniform 10-spaced scale (old → new: 50→30, 100→40,
       120→50, 999→60, 1000→70, 1001→80, 1010→90, 1100→100, 1200→110,
       1500→120, 1600→130, 9999→140, 10000→150, 10001→160; tiers 0–20 kept
       verbatim). Stacking order proven identical by visual-regression gate
       (20 overlay states, pixel + stacking-sequence diff). Round 67: the dead
       consumer rules of rung 50 were removed (dead-CSS cleanup); the rung is
       retained as a reserved tier, ladder values unchanged. */
    --z-underlay: 0;         /* decorative motif behind hero content */
    --z-content: 1;           /* hero content above underlay */
    --z-tile-action: 2;       /* card-local action (fav toggle in wrap) */
    --z-tile-action-alt: 5;   /* standalone tile action */
    --z-raised: 10;           /* sticky sub-elements (table heads, quick nav) */
    --z-sticky-local: 20;     /* locally sticky (A-Z nav, small toasts) */
    --z-dropdown-local: 30;   /* in-content dropdown (search suggestions) */
    --z-sticky-bar: 40;       /* sticky bars (desktop share bar) */
    --z-header-dropdown: 50;  /* reserved rung — Round 67 removed its only (dead) consumers .nav-dropdown/.lang-dropdown; retained to keep the uniform 10-spaced ladder gapless */
    --z-float-button: 60;     /* floating basket toggle */
    --z-header: 70;           /* site header / fixed containers (+ unicode hub autocomplete ties this tier to stay above fixed header under scroll) */
    --z-toast: 80;            /* copy toast above header */
    --z-autocomplete: 90;     /* search autocomplete dropdown */
    --z-mega-menu: 100;       /* mega menu */
    --z-lang-dropdown: 110;   /* language dropdown */
    --z-drawer-backdrop: 120; /* mobile drawer backdrop */
    --z-drawer: 130;          /* mobile drawer */
    --z-toast-high: 140;      /* legacy high toasts (block/home/languages/unicode cat+hub) */
    --z-toast-max: 150;       /* legacy max toasts (html-entities/script/consent banner) */
    --z-skip-link: 160;       /* skip link — always topmost */
    --z-admin-modal: 140;     /* admin editor modal — shares the 140 band with --z-toast-high (consumers never coexist; legacy literal 2000 sat between drawer 1600 and toasts 9999/10000) */

    /* NEUTRAL SLATE SCALE */
    --color-white:    #FFFFFF;
    --color-slate-25: #FCFDFE;
    --color-slate-50: #F8FAFC; /* Subtle Surface */
    --color-slate-100: #F1F5F9; /* Muted Surface */
    --color-slate-200: #E2E8F0; /* Subtle Border */
    --color-slate-300: #CBD5E1; /* Default Border */
    --color-slate-400: #94A3B8; /* Strong Border */
    --color-slate-500: #64748B; /* Subtle Metadata */
    --color-slate-600: #475569; /* Muted Text */
    --color-slate-700: #334155; /* Secondary Text */
    --color-slate-800: #1E293B; /* High-contrast Body */
    --color-slate-900: #0F172A; /* Primary Text / Headings */

    /* SEMANTIC STATUS COLORS */
    --color-success-50:  #F0FDF4;
    --color-success-700: #15803D;
    --color-warning-50:  #FFFBEB;
    --color-warning-500: #EAB308;
    --color-warning-700: #A16207;
    --color-danger-50:   #FEF2F2;
    --color-danger-500:  #EF4444;
    --color-danger-700:  #B91C1C;
    --color-info-50:     #F0F9FF;
    --color-info-700:    #0369A1;
    /* Round 61 (61-T5): text/foreground placed on var(--accent-color)
       surfaces. Previously hardcoded #fff at 8 inline-style sites in views;
       views now reference this token so the on-accent pairing stays
       single-sourced in the schema. */
    --color-on-accent:   #FFFFFF;

    --success: #15803D;
    --warning: #A16207;
    --danger:  #B91C1C;
    --info:    #0369A1;

    /* SEMANTIC SURFACE ALIASES (STRICT LIGHT MODE) */
    --bg-page: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --bg-muted: #F1F5F9;
    --bg-raised: #FFFFFF;
    --bg-interactive-soft: #EFF6FF;

    --page: #FFFFFF;
    --surface: #FFFFFF;
    --surface-subtle: #F8FAFC;
    --surface-muted: #F1F5F9;

    /* Legacy surface & accent bridges mapped to light system */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --border-color: #E2E8F0;
    --header-bg: rgba(255, 255, 255, 0.98);
    --accent-color: #1D4ED8;
    --accent-rgb: 29, 78, 216; /* RGB of --accent-color #1D4ED8 (Round 57 R39) */
    --accent-hover: #1E40AF;
    --success-color: #15803D;

    /* TEXT ALIASES */
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-subtle: #64748B;
    --text-brand: #1D4ED8;
    /* Round 54 (R39): --muted-color was never defined, so every
       var(--muted-color) resolved to the 2.56:1 slate-400 fallback
       (actionable clear buttons, search icons, shortcut pills). Defined at
       slate-500 (4.76:1 on white) to satisfy WCAG 1.4.11 non-text contrast. */
    --muted-color: #64748B;

    /* LINKS */
    --link: #1D4ED8;
    --link-hover: #1E40AF;
    --link-active: #1E3A8A;

    /* BORDERS */
    --border-default: #CBD5E1;
    --border-subtle: #E2E8F0;
    --border-strong: #94A3B8;
    --border: #CBD5E1;

    /* FOCUS STATE */
    --focus-ring: #2563EB;
    --focus: #2563EB;

    /* BUTTONS */
    --button-primary-bg: #1D4ED8;
    --button-primary-hover: #1E40AF;
    --button-primary-active: #1E3A8A;
    --button-primary-text: #FFFFFF;
    --button-secondary-bg: #FFFFFF;
    --button-secondary-text: #1E293B;
    --button-secondary-border: #CBD5E1;

    /* SELECTION */
    --selection-bg: #DBEAFE;
    --selection-text: #0F172A;

    /* TYPOGRAPHY FAMILIES */
    --font-ui: "Inter Variable", "Inter", "Inter-Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "JetBrains-Fallback", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --font-symbols: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Twemoji Mozilla', 'CC Color Emoji', 'Charis', 'Charis SIL', 'Catrinity', 'Noto Music', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Noto Sans Math', var(--font-sans);
    --font-glyph: "Noto Sans", "Noto Sans Symbols 2", "Noto Sans Math", "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    --font-sans: var(--font-ui);

    /* TYPOGRAPHY SCALE */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.0625rem;  /* 17px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */

    /* FLUID HEADINGS */
    --font-size-h1: clamp(2rem, 1.65rem + 1.5vw, 2.75rem);
    --font-size-h2: clamp(1.625rem, 1.45rem + 0.9vw, 2rem);
    --font-size-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
    --font-size-h4: 1.25rem;
    --font-size-body: 1rem;
    --h1: clamp(2rem, 1.65rem + 1.5vw, 2.75rem);
    --h2: clamp(1.625rem, 1.45rem + 0.9vw, 2rem);
    --h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);

    /* LINE HEIGHT */
    --leading-tight:   1.2;
    --leading-heading: 1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* LETTER SPACING */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;
    --tracking-label:  0.04em;

    /* GLYPH SCALE */
    --glyph-xs: 1.5rem;
    --glyph-sm: 2rem;
    --glyph-md: 2.75rem;
    --glyph-lg: 4rem;
    --glyph-xl: 6rem;

    /* SPACING SCALE (4px Base Rhythm) */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* CONTAINERS & WIDTHS */
    --container-xs:      40rem;     /* 640px */
    --container-sm:      48rem;     /* 768px */
    --container-md:      64rem;     /* 1024px */
    --container-lg:      75rem;     /* 1200px */
    --container-xl:      90rem;     /* 1440px */
    --container-main:    80rem;     /* 1280px */
    --container-reading: 70ch;
    --container-data:    1440px;
    --max-width:         1280px;
    --page-gutter:       clamp(1rem, 0.6rem + 2vw, 2rem);

    /* BORDER RADIUS */
    --radius-sm:   0.375rem; /* 6px */
    --radius-md:   0.5rem;   /* 8px */
    --radius-lg:   0.75rem;  /* 12px */
    --radius-xl:   1rem;     /* 16px */
    --radius-pill: 999px;

    /* SHADOWS (SUBTLE & RESTRAINED) */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* Z-INDEX SCALE — Round 58: this legacy 6-tier scale was designed but
       never adopted (zero var() consumers repo-wide at Round 58 census) and
       its --z-toast: 100 silently overrode the Round 58 ladder's --z-toast:
       1001 (later declaration wins), which would have dropped the copy toast
       below the z-1000 site header. Deleted in favor of the single
       documented Round 58 ladder above (--z-underlay … --z-skip-link). */

    /* MOTION & TRANSITIONS */
    --duration-fast:   120ms;
    --duration-normal: 180ms;
    --duration-slow:   240ms;
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* BREAKPOINTS */
    --bp-xs:  22.5rem; /* 360px */
    --bp-sm:  30rem;   /* 480px */
    --bp-md:  48rem;   /* 768px */
    --bp-lg:  64rem;   /* 1024px */
    --bp-xl:  80rem;   /* 1280px */
    --bp-2xl: 96rem;   /* 1536px */
    /* Round 64 (R46): value-preserving tokenization of the legacy
       Tailwind-palette hex literals in older main.css sections. Every token
       below is the EXACT value previously hardcoded at the replacement
       sites (no visual change; verified by computed-style diff after the
       sweep). Families follow the existing --color-* scale convention. */

    /* EMERALD (success-adjacent greens) */
    --color-emerald-50:  #ECFDF5;
    --color-emerald-300: #A7F3D0;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065F46;

    /* GREEN */
    --color-green-100: #DCFCE7;
    --color-green-200: #BBF7D0;
    --color-green-300: #86EFAC;
    --color-green-600: #16A34A;
    --color-green-800: #166534;

    /* AMBER (warning-adjacent) */
    --color-amber-100: #FEF3C7;
    --color-amber-200: #FDE68A;
    --color-amber-600: #D97706;
    --color-amber-700: #B45309;
    --color-amber-800: #92400E;
    --color-amber-900: #854D0E;
    --color-amber-950: #78350F;

    /* YELLOW */
    --color-yellow-50:  #FEFCE8;
    --color-yellow-200: #FEF08A;
    --color-yellow-600: #CA8A04;

    /* RED (danger-adjacent) */
    --color-red-50:  #FFF5F5;
    --color-red-100: #FEE2E2;
    --color-red-200: #FECACA;
    --color-red-300: #FCA5A5;
    --color-red-600: #DC2626;
    --color-red-800: #991B1B;
    --color-red-900: #7F1D1D;

    /* ORANGE */
    --color-orange-50:  #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-600: #EA580C;
    --color-orange-700: #C2410C;
    --color-orange-800: #9A3412;

    /* VIOLET */
    --color-violet-50:  #F5F3FF;
    --color-violet-100: #EDE9FE;
    --color-violet-200: #DDD6FE;
    --color-violet-600: #7C3AED;
    --color-violet-700: #6D28D9;

    /* PURPLE */
    --color-purple-25:  #FCFAFF;
    --color-purple-50:  #FAF5FF;
    --color-purple-100: #F3E8FF;
    --color-purple-200: #E9D5FF;
    --color-purple-700: #7E22CE;

    /* FUCHSIA */
    --color-fuchsia-50:  #FDF4FF;
    --color-fuchsia-200: #F5D0FE;
    --color-fuchsia-800: #86198F;
    --color-fuchsia-900: #701A75;

    /* SKY (light accents) */
    --color-sky-100: #E0F2FE;
    --color-sky-200: #BAE6FD;
    --color-sky-600: #0284C7;

    /* TEAL */
    --color-teal-700: #0F766E;

    /* NEUTRAL / OS BRAND */
    --color-black: #000000;
    --color-gray-800: #1F2937;
    --color-os-windows: #0078D4; /* Microsoft Windows accent (keyboard-shortcuts OS pages) */
}

/* Metric-compatible Fallback Overrides (CLS Prevention) */
@font-face {
    font-family: "Inter-Fallback";
    src: local("Arial");
    /* Round 61 (61-T6): font-display on every @font-face — the CWV audit
       "Ensure text remains visible during webfont load" flags faces without
       a descriptor. local() sources resolve without a network fetch, so
       swap never flashes here; the descriptor only silences the audit. */
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
}

@font-face {
    font-family: "JetBrains-Fallback";
    src: local("Courier New");
    font-display: swap;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
    size-adjust: 105%;
}

/* Base HTML & Body Settings */
html {
    font-size: 100%;
    color-scheme: light;
    background-color: var(--bg-page);
    color: var(--text-secondary);
    /* Round 62: kills phantom horizontal scrollbars on 240px viewports.
     * After every REAL overflow source was eliminated (320/375/768 = 0px
     * sitewide), Chromium still reported 9-63px of ICB scrollable overflow
     * on a few hubs at 240px — the overflow zone is verifiably blank (pixel
     * scan: no content at the right edge, VLM confirms empty gutter), fed by
     * off-canvas fixed/transformed shell internals. `clip` (not `hidden`)
     * removes the scrollbar without creating a scroll container and without
     * touching sticky/fixed positioning. */
    overflow-x: clip;
}
body {
    background-color: var(--bg-page);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* Light-Only Code Blocks & Technical Syntax */
pre,
.code-block {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    overflow-x: auto;
}
.unicode-category-groups-grid > * {
    min-width: 0;
}
.unicode-category-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.25rem;
}
code {
    font-family: var(--font-mono);
}
/* Round 60: long unbreakable technical tokens (e.g. C:\Windows\System32\
   charmap.exe, 280px) inside info boxes pushed kb-windows 21px wide at
   320px. Wrapping the token keeps the page usable on smallest screens. */
.win-infobox-charmap code,
.win-infobox code {
    overflow-wrap: anywhere;
}
code:not(pre code) {
    background: var(--bg-muted);
    color: var(--color-slate-800);
    border: 1px solid var(--border-subtle);
    padding: 0.125em 0.35em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* Accessibility Focus Indicator */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {*,
*::before,
*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Technical Print Stylesheet */
@media print {.site-header,
.site-footer,
.cc-mega-menu,
.cc-mobile-nav,
.copy-btn {
        display: none !important;
    }
body {
        background: var(--color-white) !important;
        color: var(--color-black) !important;
        font-size: 12pt !important;
    }
}

/* Light Theme Variables Override */

/* System Light Theme (Automatically active if user has no manual override and system prefers light) */

/* Theme Toggle Icon Display */
/* Default icon states (for Dark mode/theme) */

/* Light theme icons (Explicit Class Override) — Round 39's automated unused-rule
   removal left two dangling .light-theme fragments here, fusing with the
   following universal reset into a never-matching .light-theme .light-theme *
   selector and silently killing the sitewide box-sizing/margin/padding reset
   for 12 rounds. The dark-theme system is long removed; fragments deleted. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* Round 58 (P1): the HTML hidden attribute must always win over author
   display rules. Without this guard .cc-lang-dropdown's display:flex kept
   the language menu permanently rendered — the JS toggle only flips the
   hidden attribute, a visual no-op — so a 150x203px menu hung open under
   the header on every page since the shell rework (elementFromPoint-proven;
   click-toggle was a complete no-op). Standard reset practice
   (modern-normalize / Tailwind preflight ship the same guard). */
[hidden] {
    display: none !important;
}
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header styling */
.site-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
}
.search-input-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}
.search-input-wrapper input {
    width: 100%;
    padding: 0.55rem 1rem;
    padding-right: 2.8rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: var(--transition);
}
.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.search-input-wrapper button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-input-wrapper button:hover {
    color: var(--accent-color);
}

/* Round 67 dead-CSS cleanup: removed the legacy header dropdown block —
   .nav-dropdown (+ ::before, a, a:hover), .language-selector, .lang-dropdown
   (+ ::before, a, a:hover/.active) and the .language-selector:hover/
   .show-dropdown open rules. Zero DOM/JS consumers since the global-shell
   rebuild: real header chrome is the cc-* components driven by
   global-shell.js (language menu = #cc-lang-toggle + .cc-lang-dropdown).
   The rules even referenced a nonexistent @keyframes slideDown (only
   slideDownNav exists), so they could never have animated. Removal verified
   by pixel-identity gate (8 header-chrome states, before/after identical).
   Ladder rung --z-header-dropdown: 50 retained as a reserved tier. */

/* Responsive display helpers */
.mobile-only {
    display: none !important;
}
.desktop-only {
    display: inline-flex !important;
}

/* Breadcrumbs */
.breadcrumb-nav {
    padding: 1.5rem 0 0.5rem 0;
}
.breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}
.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}
.breadcrumb-item a:hover {
    color: var(--accent-color);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--border-color);
}
.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Main Container */
main.container {
    flex-grow: 1;
    padding-bottom: 3rem;
}

/* Hero Section */
.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.hero-search-form {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.4rem;
    border-radius: 9999px;
    position: relative;
}
.hero-search-form input {
    /* Round 59 (59-F residual): flex-basis:auto left the input's intrinsic
       size-attribute width (~259px) as the row's minimum — inside the
       flex-centered .error-section the whole chain then measured 384px in a
       375px viewport. Explicit basis 0 lets the input shrink to its container. */
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    padding: 0.6rem 1.2rem;
    font-size: 1.05rem;
}
.hero-search-form button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.hero-search-form button:hover {
    background: var(--accent-hover);
}

/* Section Common */
.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/* Categories Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.5rem;
}
.category-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.8rem;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.15);
}
.card-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.category-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.category-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}
.card-link {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* Features demo */
.feature-desc h2 {
    margin-bottom: 1rem;
}
.feature-desc p {
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
}
.demo-char:hover {
    border-color: var(--accent-color);
    transform: scale(1.05);
}

/* Footer Styling */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 4rem 0 0 0;
    margin-top: auto;
}
/* Error page (404) */
.error-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
    text-align: center;
}
/* Round 59 (59-F): .error-section is a CENTERING FLEX ROW, so .error-container
   is a flex item that auto-sizes to its content — the inline search form's
   intrinsic width (input + 102px button) then exceeded 375px phones by 5px.
   Cap the item so the inner form's flex-basis-0 input can actually shrink. */
.error-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.error-code {
    /* Round 59 (59-F): fixed 8rem "404" is ~384px wide — 5px of page scroll at
       375px. Clamp with the viewport so the numeral scales down on phones. */
    font-size: clamp(5rem, 22vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.error-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.error-msg {
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 2rem auto;
}
.btn-primary {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}
.btn-primary:hover {
    background: var(--accent-hover);
}

/* Responsive adjustment */
@media (max-width: 768px) {.hero-title {
        font-size: 2.2rem;
    }
}

/* ==========================================================================
   Interactive Additions (Toast, Basket, Grids, Guides, Favorites)
   ========================================================================== */

/* Toast Notification */
#copy-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--accent-color);
    color: var(--color-white);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    z-index: var(--z-toast);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
#copy-toast.toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility Focus Indicator */
*:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* Character Grids and Tiles */
.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.char-tile {
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    user-select: none;
    box-sizing: border-box;
}
.char-tile:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1);
}
.tile-char {
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    font-family: 'CC Color Emoji', 'Charis', 'Charis SIL', 'Catrinity', 'Noto Music', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Noto Sans Math', 'Plus Jakarta Sans', 'Noto Sans', 'Gentium Plus', "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Arial Unicode MS", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "SimSun", "SimSun-ExtB", "MingLiU-ExtB", "Segoe UI", -apple-system, sans-serif;
}
.tile-name {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: 500;
}
.copied-flash {
    background: var(--success-color) !important;
    color: var(--color-white) !important;
    border-color: var(--success-color) !important;
}

/* Bulk Copy Drawer */
.bulk-basket-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}
.bulk-basket-row input {
    flex-grow: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-size: 1.2rem;
}
.bulk-basket-row button {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.bulk-basket-row button:hover {
    background: var(--accent-hover);
}
#bulk-clear-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
#bulk-clear-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Favorites and History Widget Layouts */
.widget-section {
    margin-top: 3rem;
}
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-top: 1.2rem;
}
.favorites-grid .empty-msg {
    grid-column: 1 / -1;
}
.fav-item {
    position: relative;
    aspect-ratio: 1;
}

/* Global Favorite Toggle Button Styling */
.fav-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    z-index: var(--z-tile-action-alt);
    padding: 0;
    line-height: 1;
}
.fav-toggle:hover {
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-primary);
}
/* Round 54 (R39): the favorited star must pass WCAG 1.4.11 (3:1). No amber
   shade reaches 3:1 on the former translucent amber chip (≈#fcf2da, 2.86:1
   at amber-600). The favorited state now uses the same dark navy chip as the
   hover state (rgba(15,23,42,0.72) ≈ #525866) with a bright amber-400 star
   (4.25:1) — the classic gold-star-on-dark convention. */
.fav-toggle.is-favorite {
    color: var(--color-warning-700);
    border-color: var(--color-warning-700);
    background: rgba(15, 23, 42, 0.72);
}

/* Static reference layouts */

/* ==========================================================================
   Search Results Page
   ========================================================================== */
.search-results-section {
    padding: 2rem 0;
}
.search-again-container {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
.results-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.search-results-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.search-result-card:hover {
    border-color: var(--accent-color);
    transform: translateX(4px);
}
.result-char {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-shrink: 0;
}
.result-info {
    flex-grow: 1;
    min-width: 0;
}
.result-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.result-type-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-color);
}
.result-codepoint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.result-copy-btn {
    flex-shrink: 0;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.result-copy-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    transform: scale(1.03);
}
.result-copy-btn:active {
    transform: scale(0.97);
}
.copy-sm {
    background: var(--accent-color);
    color: var(--color-white);
    border: none;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.copy-sm:hover {
    background: var(--accent-hover);
}

/* No Results */
.no-results-container {
    text-align: center;
    padding: 4rem 1rem;
}
.no-results-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}
.no-results-container h2 {
    margin-bottom: 0.5rem;
}
.no-results-container p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}
.search-suggestions {
    margin-top: 2rem;
}
.search-suggestions p {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.suggestion-tag {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: var(--transition);
}
.suggestion-tag:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ==========================================================================
   Character Detail Page
   ========================================================================== */
.detail-table td {
    padding: 0.75rem 1rem;
}
.detail-table td:first-child {
    white-space: nowrap;
    width: 170px;
}

/* Char tile wrapper for favorites overlay */
.char-tile-wrapper {
    position: relative;
    aspect-ratio: 1;
}

/* ==========================================================================
   Guide / Article Pages
   ========================================================================== */
.guide-article,
.static-page {
    padding: 2rem 0;
    max-width: 800px;
    margin: 0 auto;
}
.guide-header {
    margin-bottom: 2.5rem;
}
.guide-header h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.guide-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.back-link {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-decoration: none;
    margin-bottom: 1rem;
    transition: var(--transition);
}
.back-link:hover {
    color: var(--accent-hover);
}
.guide-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.guide-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.guide-content p {
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.guide-content ul,
.guide-content ol {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.guide-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.guide-content a {
    color: var(--accent-color);
    text-decoration: none;
}
.guide-content a:hover {
    text-decoration: underline;
}
.guide-content code {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.code-block {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    margin: 1rem 0 1.5rem 0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.88rem;
    line-height: 1.7;
    overflow-x: auto;
    color: var(--text-primary);
}
.code-block code {
    background: none;
    border: none;
    padding: 0;
}

/* Reference Tables */
.table-responsive {
    overflow-x: auto;
    margin: 1rem 0 1.5rem 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}
.reference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.reference-table thead th {
    background: var(--bg-primary);
    padding: 0.85rem 1.2rem;
    text-align: left;
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    color: var(--text-primary);
}
.reference-table tbody td {
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}
.reference-table tbody tr:last-child td {
    border-bottom: none;
}
.reference-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04);
}
.symbol-cell {
    font-size: 1.8rem;
    text-align: center;
    width: 70px;
    font-weight: bold;
    color: var(--text-primary);
}
kbd {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: var(--font-sans);
}

/* Emoji demo row */

/* Guide card icon */

/* ==========================================================================
   Font Generator Page
   ========================================================================== */
.font-style-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: var(--transition);
}
.font-style-card:hover {
    border-color: var(--accent-color);
}
.font-style-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.font-preview {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    font-size: 1.3rem;
    word-break: break-all;
    min-height: 50px;
    margin-bottom: 0.75rem;
}
.font-output-text {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.2rem;
    font-size: 1.4rem;
    min-height: 60px;
    word-break: break-all;
}

/* ==========================================================================
   Text Tools Page
   ========================================================================== */
.tool-workspace {
    margin-top: 2rem;
}
.tool-textarea {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    resize: vertical;
    transition: var(--transition);
}
.tool-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-secondary:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
/* ==========================================================================
   Data Source Cards
   ========================================================================== */
.data-source-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1rem 0;
}
.data-source-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
}
.data-source-card p {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   404 Enhancements
   ========================================================================== */
.error-search-container {
    max-width: 500px;
    margin: 2rem auto;
}
.error-popular {
    margin-top: 2rem;
}
.popular-heading {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
/* ==========================================================================
   Section Subtitles
   ========================================================================== */
.section-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    max-width: 700px;
}
.catalog-section {
    padding: 2rem 0;
}
.empty-msg {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

/* ==========================================================================
   Responsive Adjustments for New Components
   ========================================================================== */
@media (max-width: 768px) {.result-char {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
.result-name {
        font-size: 0.95rem;
    }
.guide-article,
.static-page {
        padding: 1rem 0;
    }
.guide-header h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {.reference-table {
        font-size: 0.8rem;
    }
.reference-table thead th,
.reference-table tbody td {
        padding: 0.4rem 0.5rem;
    }
.symbol-cell {
        font-size: 1.2rem;
        width: 40px;
    }
}

/* ==========================================================================
   Design System & Mobile-First Interactions
   ========================================================================== */

/* Spacing and Scale Utilities */
/* Horizontal Scroll for Symbol lists on Mobile */

/* Swipeable Category Cards styling */
/* Touch-Friendly targets */
.btn-primary, .btn-secondary, .char-tile, @media (max-width: 768px) {.swipe-grid .category-card {
        min-width: 250px;
        scroll-snap-align: start;
    }

    /* Fixed Bottom Action Bar for Workspace pages */
.mobile-bottom-action-bar button {
        flex: 1;
    }
body {
        padding-bottom: 75px; /* prevent overlap with sticky bar */
    }
}

/* Premium Metadata Grid */
/* Variations Card Grid to replace broken aspect-ratio squares */
.variation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.variation-tile:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1);
}
.variation-char {
    font-size: 1.8rem;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.variation-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: 500;
}

/* ==========================================================================
   Premium 2-Column Detail Layout Redesign
   ========================================================================== */
.detail-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 992px) {.detail-layout-grid {
        grid-template-columns: 2.2fr 1fr;
        gap: 3rem;
    }
}
.detail-main-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.detail-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (min-width: 992px) {.detail-sidebar-col {
        position: sticky;
        top: 95px;
    }
}

/* Page Header Typography */
.detail-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.detail-title-char {
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: middle;
    line-height: 1;
    -webkit-text-fill-color: initial; /* Prevent gradient fill from making character rendering weird on some browsers */
}
.detail-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Premium Card Components */
.premium-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
}
.premium-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
}
.premium-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Giant Copy Card */
.giant-copy-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(30, 41, 59, 0.6) 100%);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.giant-copy-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.35);
}
.giant-copy-card .fav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    z-index: var(--z-raised);
}
.giant-copy-card .fav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.giant-copy-card .fav-toggle.is-favorite {
    color: var(--color-warning-700);
    border-color: var(--color-warning-700);
    background: rgba(234, 179, 8, 0.1);
}
.giant-char-wrapper {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    transition: var(--transition);
    display: inline-block;
    filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.1));
}
.giant-copy-card:hover .giant-char-wrapper {
    transform: scale(1.12);
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
}
.giant-copy-btn {
    background: var(--accent-color);
    color: var(--color-white);
    border: none;
    border-radius: 9999px;
    padding: 0.65rem 2rem;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    transition: var(--transition);
}
.giant-copy-card:hover .giant-copy-btn {
    background: var(--accent-hover);
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

/* Quick Specifications List */
.specs-list {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    cursor: pointer;
}
.specs-row:last-child {
    border-bottom: none;
}
.specs-row:hover {
    background: rgba(99, 102, 241, 0.05);
}
.specs-row strong {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.specs-value-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.specs-value-wrapper code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
.specs-row:hover .specs-value-wrapper code {
    border-color: var(--accent-color);
}
.copy-icon-btn {
    color: var(--text-secondary);
    opacity: 0.3;
    transition: var(--transition);
    display: flex;
    align-items: center;
}
.specs-row:hover .copy-icon-btn {
    opacity: 1;
    color: var(--accent-color);
}

/* Tactile Keyboard Keycaps — Round 39's removal left a fused kbd.light-theme kbd
   fragment here which swallowed the .faq-premium-item selector; restored. */
/* FAQ Premium Highlight */
.faq-premium-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
}
.faq-premium-item:first-child {
    padding-top: 0.5rem;
}
.faq-premium-item:last-child {
    border-bottom: none;
    padding-bottom: 0.5rem;
}
.faq-premium-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.4;
}
.faq-premium-item p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.faq-premium-item a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.faq-premium-item a:hover {
    text-decoration: underline;
}

/* Responsive Overrides */
@media (max-width: 991px) {.detail-layout-grid {
        gap: 2rem;
    }
.detail-sidebar-col {
        order: -1; /* Sidebar copy box shows above main details on mobile */
    }
}
/* Back Link Styles */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.25rem;
    transition: var(--transition);
}
.back-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Responsive Header & Navigation Drawer Rules */
@media (max-width: 1023px) {.desktop-only {
        display: none !important;
    }
.mobile-only {
        display: inline-flex !important;
    }
.search-input-wrapper input {
        font-size: 0.95rem;
        padding: 0.65rem 1.2rem;
        padding-right: 3rem;
    }

    /* Slide down Mobile Navigation Menu Drawer */

    /* Hide the desktop dropdown container item on mobile */

    /* Mobile Language Selector List */

    /* Burger Icon Animations — Round 58: removed dead .hamburger-icon rule
       (pre-shell remnant; live markup uses .cc-hamburger-box/.cc-hamburger-line). */
}

/* Slide down animation */
@keyframes slideDownNav {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search Autocomplete Dropdown Styling */
.search-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    max-height: 380px;
    overflow-y: auto;
    z-index: var(--z-autocomplete);
    display: none;
    flex-direction: column;
    padding: 0.4rem;
    gap: 0.2rem;
}
.search-autocomplete-dropdown.active {
    display: flex;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 8px;
    transition: var(--transition);
    cursor: pointer;
    text-align: left;
}
.autocomplete-item:hover,
.autocomplete-item.selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-color);
    outline: none;
}
.autocomplete-char {
    font-size: 1.3rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--text-primary);
}
.autocomplete-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}
.autocomplete-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.autocomplete-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Autocomplete Extended Elements */
.autocomplete-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 0.6rem 0.8rem 0.35rem 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 0.2rem;
}.history-item {
    position: relative;
}
.history-item .autocomplete-char svg {
    opacity: 0.7;
    color: var(--text-secondary);
    transition: var(--transition);
}
.history-item:hover .autocomplete-char svg,
.history-item.selected .autocomplete-char svg {
    opacity: 1;
    color: var(--accent-color);
}
.delete-history-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.delete-history-btn:hover {
    color: var(--color-danger-700);
    background: rgba(239, 68, 68, 0.15);
}
.autocomplete-no-results {
    padding: 1.2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.autocomplete-item strong {
    color: var(--accent-color);
    font-weight: 700;
}
.autocomplete-item:hover strong,
.autocomplete-item.selected strong {
    color: var(--text-primary);
}

/* ==========================================================================
   Floating Multi-Copy Basket Styles
   ========================================================================== */
.floating-basket-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-header);
    max-width: 400px;
    width: calc(100% - 40px);
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    transform: translateY(120%);
}
.floating-basket-container.show {
    opacity: 1;
    transform: translateY(0);
}
.basket-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.basket-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.basket-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}
.basket-count-badge {
    background: var(--color-brand-500);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 12px;
}
.basket-close-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}
.basket-close-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary);
}
.basket-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.basket-display-tray {
    flex-grow: 1;
    min-height: 44px;
    max-height: 90px;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-raised);
    color: var(--color-slate-800);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    overflow-y: auto;
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.basket-display-tray:focus-within,
.basket-display-tray:focus {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
.basket-display-tray .basket-placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    user-select: none;
    pointer-events: none;
}
.basket-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.15s, background-color 0.15s, border-color 0.15s;
    user-select: none;
}
.basket-chip:hover {
    background: var(--color-red-100);
    border-color: var(--color-red-300);
    transform: scale(1.08);
}
.basket-chip-emoji .basket-chip-img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}
.basket-chip-char {
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    font-family: var(--font-symbols);
}
.basket-textarea,
#basket-input,
#bulk-basket-input,
.bulk-basket-row input {
    flex-grow: 1;
    height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-raised);
    color: var(--color-slate-800);
    font-size: 1.1rem;
    resize: none;
    line-height: 1.4;
    font-family: var(--font-symbols) !important;
}
.basket-btn {
    padding: 0.5rem 1rem;
    height: 44px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.basket-btn-primary {
    background: var(--color-brand-500);
    color: var(--color-white);
}
.basket-btn-primary:hover {
    background: var(--color-brand-600);
}
.basket-btn-primary.btn-success {
    background: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
}
.basket-btn-secondary {
    background: var(--border-color);
    color: var(--text-primary);
}
.basket-btn-secondary:hover {
    background: rgba(0,0,0,0.08);
}

/* Floating Toggle Button */
.basket-toggle-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-float-button);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand-500);
    color: var(--color-white);
    border: none;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.2s, background-color 0.2s;
}
.basket-toggle-float:hover {
    background: var(--color-brand-600);
    transform: scale(1.05);
}
.basket-toggle-float:active {
    transform: scale(0.95);
}
.basket-toggle-float.hide {
    display: none;
}

/* ==========================================================================
   Dual-Action Interactive Tile Region Styles
   ========================================================================== */
.tile-char,
.char-tile img {
    cursor: cell;
    transition: transform 0.2s ease;
}
.char-tile:hover .tile-char,
.char-tile:hover img {
    transform: scale(1.1);
}
.tile-name {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.char-tile:hover .tile-name {
    text-decoration: underline;
    color: var(--accent-color);
}

/* ==========================================================================
   UNICODE SCRIPT WORKSTATION STYLES (/unicode/script/{slug}/)
   ========================================================================== */
.script-page-workstation {
    padding: 1.5rem 0 4rem;
    color: var(--text-primary);
}
.script-header {
    margin-bottom: 1.5rem;
}
.script-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.script-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}
.script-meta-shelf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.meta-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}
.badge-code {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.3);
    color: var(--accent-color);
}
.badge-count strong {
    color: var(--text-primary);
}
.badge-regex {
    cursor: pointer;
    background: var(--bg-primary);
    border-color: var(--border-color);
    font-family: monospace;
}
.badge-regex:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.badge-regex .copy-hint {
    font-size: 0.75rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    margin-left: 0.25rem;
}
.badge-ext {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--color-emerald-700);
}
.badge-ext:hover {
    background: rgba(16, 185, 129, 0.16);
}
.script-lead-note {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0;
}

/* --- Sibling Scripts Navigation --- */
.sibling-scripts-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.sibling-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.sibling-scroll-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}
.sibling-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.15s ease;
}
.sibling-chip small {
    color: var(--text-secondary);
    font-size: 0.75rem;
}
.sibling-chip:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--color-white);
}
.sibling-chip:hover small {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Script vs. Block Callout --- */
/* Round 59 (59-N): the earlier duplicate .script-vs-block-callout rule that
   lived here was fully superseded by the definition further down this file
   (same display/align/gap/margins; the later block wins padding, radius and
   line-height). Removed to break the duplicate-selector group; the two
   inner-element rules below are NOT duplicates — the script-page view uses
   .callout-icon/.callout-text while the block-page view uses
   .callout-badge/.callout-body. */
.script-vs-block-callout .callout-icon {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.script-vs-block-callout em {
    color: var(--text-primary);
    font-style: normal;
    font-weight: 600;
}

/* --- Script Toolbar & Interactive Filters --- */
.script-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.75rem;
}
.script-filter-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
}
.search-input-wrapper .search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.filter-input.search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease;
}
.filter-input.search-input:focus {
    border-color: var(--accent-color);
}
.filter-select {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.filter-select:focus {
    border-color: var(--accent-color);
}
.btn-filter-apply {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background: var(--accent-color);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.btn-filter-apply:hover {
    opacity: 0.9;
}
.btn-filter-reset {
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-filter-reset:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}
.btn-toggle-ext {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
    color: var(--color-emerald-700);
    font-size: 0.85rem;
    font-weight: 600;
    /* Round 59 (320px residual): the toggle label is a long translated string
       (~295px); without wrap it overflowed 320px phones. */
    text-align: left;
    white-space: normal;
    min-width: 0;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-toggle-ext:hover {
    background: rgba(16, 185, 129, 0.16);
}

/* --- Character Card Grid --- */
.script-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.85rem;
    margin-bottom: 2.5rem;
}
.char-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0.65rem 0.65rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-align: center;
}
.char-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(2, 132, 199, 0.4);
}
.char-card.card-combining {
    background: rgba(2, 132, 199, 0.02);
}
.card-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.35rem;
}
.card-codepoint {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.fav-star-btn {
    background: transparent;
    border: none;
    color: var(--color-slate-500);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.1rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.fav-star-btn:hover {
    color: var(--color-amber-600);
    transform: scale(1.15);
}
.fav-star-btn.is-favorited {
    color: var(--color-amber-600);
}
.card-glyph-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    text-decoration: none;
    color: var(--text-primary);
    margin: 0.25rem 0;
}
.card-glyph {
    font-size: 2.5rem;
    line-height: 1;
    user-select: none;
}
.script-rtl-grid .card-glyph {
    direction: rtl;
    text-align: center;
}
.card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 0.35rem;
    flex: 1;
}
.card-name-link {
    text-decoration: none;
    color: inherit;
    width: 100%;
}
.card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 500;
    color: var(--text-primary);
    min-height: 1.9rem;
}
.card-cat-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-top: 0.3rem;
}
.card-hover-actions {
    width: 100%;
    margin-top: 0.5rem;
}
.btn-copy-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-copy-card:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--color-white);
}
.btn-copy-card.copy-success {
    background: var(--color-emerald-700);
    border-color: var(--color-emerald-700);
    color: var(--color-white);
}

/* --- Pagination Navigation --- */
.pagination-nav {
    margin: 2rem 0 3.5rem;
    text-align: center;
}
.pagination-container {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-secondary);
    padding: 0.35rem 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.pagination-btn,
.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s ease;
}
.pagination-page {
    min-width: 36px;
    padding: 0.45rem 0.5rem;
}
.pagination-page:hover,
.pagination-btn:hover {
    border-color: var(--border-color);
    background: var(--bg-primary);
}
.pagination-page.pagination-current {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
}
.pagination-btn.pagination-disabled {
    color: var(--text-secondary);
    opacity: 0.4;
    cursor: not-allowed;
}
.pagination-info {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- Script_Extensions Section --- */
.script-extensions-section {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.scx-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 0.85rem;
    margin-top: 1.25rem;
}
.scx-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
}
.scx-card:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.scx-glyph-link {
    text-decoration: none;
    color: var(--text-primary);
}
.scx-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 1.8rem;
    line-height: 1;
}
.scx-meta {
    flex: 1;
    overflow: hidden;
}
.scx-codepoint {
    display: block;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.scx-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scx-primary-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--color-emerald-700);
    font-weight: 500;
}

/* --- Block & Category Distributions --- */
.script-distribution-section,
.script-category-section,
.script-versions-section {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.section-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}
.distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.dist-card {
    display: block;
    padding: 1rem 1.15rem;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.15s ease;
}
.dist-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.dist-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.dist-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.dist-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
.dist-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.dist-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-color);
}
.dist-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.dist-link-text {
    color: var(--accent-color);
    font-weight: 600;
}

/* --- Category Chips Grid --- */
.category-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.cat-chip-card {
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.cat-chip-link,
.cat-chip-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.cat-chip-link:hover {
    background: var(--bg-primary);
    border-color: var(--accent-color);
}
.cat-chip-code {
    font-family: monospace;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(2, 132, 199, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
}
.cat-chip-name {
    flex: 1;
    margin: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    font-weight: 500;
}
.cat-chip-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* --- Version Timeline Grid --- */
.version-timeline-grid {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.ver-timeline-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}
.ver-timeline-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-primary);
}
.ver-badge {
    font-weight: 700;
    color: var(--accent-color);
}
.ver-count {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* --- Provenance Note --- */
.script-provenance-note {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.provenance-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.provenance-inner svg {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.provenance-inner a {
    color: var(--accent-color);
    text-decoration: none;
}
.provenance-inner a:hover {
    text-decoration: underline;
}

/* --- Script Toast Notification --- */
.script-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 0.75rem 1.25rem;
    background: var(--color-slate-900);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: var(--z-toast-max);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.script-toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Empty Card --- */
.empty-results-card {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin: 2rem 0;
}
.empty-results-card .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
.empty-results-card h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.empty-results-card p {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {.script-char-grid {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    }
}

@media (max-width: 768px) {.script-title {
        font-size: 1.75rem;
    }
.script-char-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.6rem;
    }
.card-glyph {
        font-size: 2rem;
    }
.script-toolbar {
        padding: 0.75rem;
    }
.search-input-wrapper {
        min-width: 100%;
    }
.filter-select {
        width: 100%;
    }
}

/* ===== Round 18: replace inline onmouseover/onmouseout handlers =====
   The previous inline handlers were blocked by CSP (script-src without 'unsafe-inline').
   These :hover rules reproduce the exact same visual effect via CSS. */
.copyable-decorator:hover {
    transform: scale(1.02);
}

/* Category pills (no class) on emoji/symbols/unicode index pages.
   Match by structure: .category-pills a or .pill-list a.
   A single :hover rule captures the common pattern. */
.category-pills a:hover {
    background: var(--accent-color) !important;
    color: var(--color-white) !important;
    border-color: var(--accent-color) !important;
}

/* For category pills that are .active, hover should keep the active style. */
.category-pills a.active:hover {
    background: var(--accent-color) !important;
    color: var(--color-white) !important;
    border-color: var(--accent-color) !important;
}

/* ===================================================================
   Round 19 — Unicode rendering architecture: special-char CSS classes
   ===================================================================
   These cover the CharacterClassifier output modes. Previously every
   non-glyph character (whitespace, control, format, variation selector,
   private-use, unassigned, surrogate) rendered as an unexplained tofu
   box or blank card. Now each mode gets a labeled placeholder so the
   user understands what they're looking at — while the copy button
   still copies the exact underlying Unicode value.
   =================================================================== */

/* Control / format / variation-selector / surrogate / invalid / unassigned
   characters — render as a labeled placeholder chip instead of a glyph. */

/* Round 58 (58-A): repaired Round 39 splice damage. The automated
   unused-rule removal glued a dead .glyph-fallback compound into this
   selector list, silently dropping the bare .tile-char entry and losing
   the CLS-prevention sizing for every standalone tile-char (symbol-card
   grids, typing tables, error pages) since Round 39. The glyph-combining /
   glyph-whitespace / glyph-sequence / glyph-fallback classes were never
   applied by the current renderer (zero references in PHP/JS corpora) and
   their dead rules were removed in the same repair. */
.tile-char,
.char-tile .tile-char,
.char-tile-wrapper .tile-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    min-height: 1.5em;
    line-height: 1.2;
}

/* Color emoji should always pick the color emoji font FIRST, not the
   monochrome Noto Sans Symbols fallback. The body --font-sans stack
   historically put Segoe UI Symbol BEFORE Segoe UI Emoji, producing
   monochrome emoji on Windows. Round 19: use unicode-range isolation
   for emoji blocks so color emoji fonts win for U+1F300-U+1FAFF. */
@font-face {
    font-family: 'CC Color Emoji';
    src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Twemoji Mozilla");
    unicode-range: U+1F000-1F0FF, U+1F100-1F1FF, U+1F200-1F2FF, U+1F300-1F3FF, U+1F400-1F4FF, U+1F500-1F5FF, U+1F600-1F6FF, U+1F700-1F7FF, U+1F800-1F8FF, U+1F900-1F9FF, U+1FA00-1FAFF, U+2600-26FF, U+2700-27BF;
    font-display: swap;
}
/* Global @font-face declarations for bundled offline fonts.
   With verified unicode-ranges from font-unicode-ranges.json, browsers ONLY
   download these font files if a character within their range appears on the page. */
@font-face {
    font-family: 'Catrinity';
    src: url('/assets/fonts/Catrinity.otf?v=1.0.9') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00008-00009, U+0000D, U+0001D, U+00020-0007E, U+000A0-00377, U+0037A-0037F, U+00384-0038A, U+0038C, U+0038E-003A1, U+003A3-0052F, U+00531-00556, U+00559-0058A, U+0058D-0058F, U+00591-005C7, U+005D0-005EA, U+005EF-005F4, U+00606-0060F, U+00615, U+00617-0061B, U+0061E-006D5, U+006D8-006FF, U+00750-0077F, U+007C0-007FA, U+007FD-007FF, U+00870-0088F, U+00897, U+008A0-008C8, U+008D5-008D7, U+008F3, U+00E3F, U+00F1A-00F1F, U+00FC0-00FC5, U+00FC7-00FCC, U+00FCE-00FCF, U+00FD5-00FD8, U+010A0-010C5, U+010C7, U+010CD, U+010D0-010FF, U+013A0-013F5, U+013F8-013FD, U+01400-0169C, U+016A0-016F8, U+01700-01715, U+0171F-01736, U+01740-01753, U+01760-0176C, U+0176E-01770, U+01772-01773, U+018B0-018F5, U+01AB0-01ADD, U+01AE0-01AEB, U+01C50-01C8A, U+01C90-01CBA, U+01CBD-01CBF, U+01D00-01F15, U+01F18-01F1D, U+01F20-01F45, U+01F48-01F4D, U+01F50-01F57, U+01F59, U+01F5B, U+01F5D, U+01F5F-01F7D, U+01F80-01FB4, U+01FB6-01FC4, U+01FC6-01FD3, U+01FD6-01FDB, U+01FDD-01FEF, U+01FF2-01FF4, U+01FF6-01FFE, U+02000-0200D, U+02010-02027, U+0202F-0205F, U+02070-02071, U+02074-0208E, U+02090-0209C, U+020A0-020C1, U+020D0-020F0, U+02100-0218B, U+02190-02429, U+02440-0244A, U+02460-0260D, U+02610-02614, U+02616-02617, U+02620-02668, U+02670-02691, U+02695, U+0269B-0269C, U+0269E-026BC, U+026BF-026CB, U+026CE, U+026D4, U+026D6-026D7, U+026DD-026DE, U+026E2-026E7, U+026E9, U+026FE-026FF, U+02708, U+02713-02744, U+02747-02764, U+02768-02B73, U+02B76-02CF3, U+02CF9-02D25, U+02D27, U+02D2D, U+02D30-02D67, U+02D6F-02D70, U+02D7F, U+02DE0-02E5D, U+03000-03002, U+03004, U+03007-03020, U+03030, U+03036, U+0303F, U+03248-0324F, U+03251-0325F, U+032B1-032BF, U+04DC0-04DFF, U+0A4D0-0A62B, U+0A640-0A69F, U+0A700-0A7DC, U+0A7F1-0A7FF, U+0AB30-0AB6B, U+0AB70-0ABBF, U+0E000-0E02E, U+0E031-0E032, U+0E034-0E03D, U+0E040-0E05A, U+0E060-0E06C, U+0E070-0E07D, U+0E080-0E0EB, U+0E404-0E40B, U+0E410-0E41A, U+0E41C-0E41E, U+0E428, U+0E430-0E54C, U+0E551-0E57F, U+0E5C0-0E5DF, U+0E684-0E687, U+0E68D-0E6AB, U+0E6AF-0E6CF, U+0E6F0-0E727, U+0E72C-0E767, U+0E76C-0E77F, U+0EA01-0EAD2, U+0EADA, U+0EADC-0EADE, U+0EAF0-0EAF3, U+0EB40-0EB59, U+0EB5D-0EBAE, U+0EBE0-0EBE7, U+0EE00-0EE58, U+0EE5A-0EE6E, U+0EE70-0EE7F, U+0EE8B-0EE9D, U+0EE9F-0EEBF, U+0EEC2-0EEDB, U+0EEDD-0EEFF, U+0EF11, U+0EF15, U+0EF20-0EF37, U+0EF60-0EF69, U+0EF70-0EF72, U+0EF74-0EF76, U+0EFA0-0EFAE, U+0EFB0-0EFB5, U+0EFB7, U+0EFB9-0EFBB, U+0EFBE-0EFBF, U+0EFDD-0EFDF, U+0F00E-0F00F, U+0F013, U+0F016, U+0F01C, U+0F01F, U+0F02A-0F02B, U+0F02F-0F033, U+0F036, U+0F038, U+0F03A, U+0F03D-0F040, U+0F050-0F0CD, U+0F0CF-0F0E7, U+0F0E9-0F101, U+0F106, U+0F10A, U+0F10E, U+0F110, U+0F11A, U+0F11C-0F11F, U+0F127, U+0F130-0F133, U+0F135-0F136, U+0F13A, U+0F13E-0F13F, U+0F153, U+0F158-0F159, U+0F193-0F196, U+0F198-0F19B, U+0F1A5-0F1A7, U+0F1AC, U+0F1BB-0F1BD, U+0F1C0-0F1C2, U+0F1C7-0F1C8, U+0F1CC-0F1CD, U+0F1DA, U+0F1E2-0F1E6, U+0F1E8, U+0F1EA, U+0F1EC, U+0F1F0-0F1F2, U+0F1F4-0F1F5, U+0F1F7-0F1F9, U+0F1FB-0F1FC, U+0F200-0F209, U+0F20D, U+0F214-0F215, U+0F217-0F226, U+0F228-0F22C, U+0F233, U+0F238-0F23A, U+0F23C-0F23D, U+0F23F, U+0F247-0F248, U+0F258-0F259, U+0F26D, U+0F2E0, U+0F2E2-0F2E4, U+0F2E6, U+0F2F4, U+0F2FE-0F2FF, U+0F312-0F319, U+0F326-0F327, U+0F330-0F332, U+0F335-0F338, U+0F33A-0F341, U+0F343, U+0F345-0F346, U+0F348-0F34D, U+0F350-0F363, U+0F365-0F372, U+0F374-0F377, U+0F37B, U+0F37D, U+0F380-0F388, U+0F38A-0F393, U+0F395-0F39D, U+0F39F-0F3A7, U+0F3A9-0F3FE, U+0F4C0-0F4C9, U+0F4D0-0F4EB, U+0F4F7-0F57F, U+0F590-0F593, U+0F599-0F59D, U+0F5A0-0F5C2, U+0F5C7-0F5D9, U+0F5EF, U+0F5F1-0F5F2, U+0F5F6-0F5FB, U+0F5FF-0F600, U+0F602, U+0F604-0F606, U+0F608-0F612, U+0F618, U+0F620-0F673, U+0F680-0F688, U+0F68D-0F695, U+0F698-0F69A, U+0F6B0-0F6C2, U+0F6E0-0F6E3, U+0F6E5-0F6E8, U+0F6EA-0F6FF, U+0F70F-0F71B, U+0F71D-0F71E, U+0F721-0F725, U+0F727-0F72B, U+0F72D-0F72F, U+0F768-0F76F, U+0F771-0F78E, U+0F790-0F791, U+0F79C-0F79F, U+0F7B0, U+0F7B7, U+0F7BB-0F7BD, U+0F7BF, U+0F7C2, U+0F7C4-0F7C7, U+0F7D0-0F7D7, U+0F7D9, U+0F7DB, U+0F7DD, U+0F7DF, U+0F7E3-0F7E4, U+0F7E8-0F800, U+0F803, U+0F805-0F809, U+0F840-0F841, U+0F84D-0F87F, U+0F886-0F88F, U+0F891-0F895, U+0F898-0F89B, U+0F8D0-0F8E9, U+0F8F0-0F8F9, U+0F8FD-0F8FF, U+0FB00-0FB06, U+0FB13-0FB17, U+0FB1D-0FB36, U+0FB38-0FB3C, U+0FB3E, U+0FB40-0FB41, U+0FB43-0FB44, U+0FB46-0FBC2, U+0FBD3-0FBE9, U+0FBFC-0FBFF, U+0FC5E-0FC63, U+0FCF2-0FCF4, U+0FD3C-0FD3F, U+0FDFC, U+0FE00-0FE0F, U+0FE24-0FE26, U+0FE50, U+0FE52, U+0FE54-0FE5C, U+0FE5F-0FE66, U+0FE68-0FE6B, U+0FE70-0FE74, U+0FE76-0FEFC, U+0FF01-0FF64, U+0FFE0-0FFE6, U+0FFE8-0FFEE, U+0FFFC-0FFFD, U+10140-1018E, U+10190-1019C, U+101A0, U+10280-1029C, U+102A0-102D0, U+10300-10323, U+1032D-1034A, U+10400-1047F, U+104B0-104D3, U+104D8-104FB, U+10500-10527, U+10530-10563, U+1056F, U+10780-10785, U+10787-107B0, U+107B2-107BA, U+108E0-108F2, U+108F4-108F5, U+108FB-1091B, U+1091F-10939, U+1093F-10959, U+10A60-10A9F, U+10C00-10C48, U+10C80-10CB2, U+10CC0-10CF2, U+10CFA-10CFF, U+10E80-10EA9, U+10EAB-10EAD, U+10EB0-10EB1, U+10EC2-10EC7, U+10ED0, U+10EFA-10EFB, U+10FE0-10FF6, U+11AB0-11AF8, U+11FB0, U+16EA0-16EB8, U+16EBB-16ED3, U+1CC00-1CCFC, U+1CD00-1CEB3, U+1CEBA-1CED0, U+1CEE0-1CEF0, U+1D200-1D245, U+1D2C0-1D2D3, U+1D2E0-1D2F3, U+1D300-1D356, U+1D360-1D378, U+1D400-1D454, U+1D456-1D49C, U+1D49E-1D49F, U+1D4A2, U+1D4A5-1D4A6, U+1D4A9-1D4AC, U+1D4AE-1D4B9, U+1D4BB, U+1D4BD-1D4C3, U+1D4C5-1D505, U+1D507-1D50A, U+1D50D-1D514, U+1D516-1D51C, U+1D51E-1D539, U+1D53B-1D53E, U+1D540-1D544, U+1D546, U+1D54A-1D550, U+1D552-1D6A5, U+1D6A8-1D7CB, U+1D7CE-1D7FF, U+1DF00-1DF1E, U+1DF25-1DF2A, U+1E000-1E006, U+1E008-1E018, U+1E01B-1E021, U+1E023-1E024, U+1E026-1E02A, U+1E030-1E06D, U+1E08F, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1, U+1F000-1F02B, U+1F030-1F093, U+1F0A0-1F0AE, U+1F0B1-1F0BF, U+1F0C1-1F0CF, U+1F0D1-1F0F5, U+1F100-1F1AD, U+1F300, U+1F302, U+1F305, U+1F308, U+1F30D-1F32C, U+1F33A, U+1F342, U+1F381, U+1F383-1F385, U+1F396-1F397, U+1F3A6, U+1F3B2, U+1F3B4-1F3B6, U+1F3BC, U+1F3C1, U+1F3C5, U+1F3E7, U+1F3F3-1F3F4, U+1F3FB-1F3FF, U+1F42D, U+1F431, U+1F435, U+1F437, U+1F43D, U+1F44D-1F44E, U+1F466-1F46A, U+1F471-1F472, U+1F474-1F476, U+1F479-1F480, U+1F48B, U+1F48E, U+1F491, U+1F493-1F49F, U+1F4A2-1F4A9, U+1F4AB, U+1F4AF, U+1F4B2-1F4B3, U+1F4EF, U+1F4F5-1F4F6, U+1F500-1F50B, U+1F50D-1F50E, U+1F510-1F513, U+1F515, U+1F518-1F525, U+1F52F, U+1F531-1F549, U+1F54E, U+1F550-1F56C, U+1F56F, U+1F571, U+1F5A4, U+1F5AF-1F5B1, U+1F5B5, U+1F5D5-1F5DB, U+1F5F4-1F5FA, U+1F600-1F644, U+1F648-1F64A, U+1F670-1F67F, U+1F6AB-1F6B3, U+1F6B7-1F6BE, U+1F6C2-1F6C8, U+1F6D0-1F6D1, U+1F6D7, U+1F6DC, U+1F6DE-1F6DF, U+1F6E7, U+1F6EA-1F6EC, U+1F700-1F7D9, U+1F7E0-1F7EB, U+1F7F0, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F90D-1F90E, U+1F910-1F917, U+1F920-1F92F, U+1F936, U+1F947-1F949, U+1F970-1F97A, U+1F9B0-1F9B3, U+1F9CC, U+1F9D0-1F9D4, U+1F9DB, U+1F9E1, U+1F9FF-1FA57, U+1FA60-1FA6D, U+1FA75-1FA79, U+1FAA9-1FAAC, U+1FAAF, U+1FAE0-1FAE5, U+1FAE8-1FAEA, U+1FB00-1FB92, U+1FB94-1FBFA, U+E0061-E007A, U+E007F, U+F0000-F0019, U+F001E-F0043, U+F0070-F0092, U+F0094-F0095, U+F0098-F00AB, U+F00AD-F00B0, U+F00B3-F00B5, U+F00C2-F00C3, U+F00C6, U+F00C8-F00D3, U+F00D7-F00D8, U+F00DB-F00DD, U+F00DF-F00E1, U+F00E4-F00F1, U+F00F4-F00FB, U+F0101-F0102, U+F0105, U+F0109, U+F0111-F011D, U+F0121, U+F0137, U+F013D, U+F0150, U+F0161, U+F0171-F017A, U+F0190-F0191, U+F0195, U+F01A8-F01C4, U+F01CA-F01CF, U+F0200-F020F, U+F0300-F0306, U+F0308-F0352, U+F0359, U+F035B, U+F035E-F0368, U+F0370-F0398, U+F03A8, U+F03AB-F03AC, U+F03B0-F03C7, U+F03D0, U+F03D6-F03DD, U+F03E0-F03FC, U+F0400-F040A, U+F0420-F0438, U+F043D-F0455, U+F0458-F0486, U+F0488-F0498, U+F04A0-F04C8, U+F04D1-F04E6, U+F04E8-F04E9, U+F04FE-F04FF, U+F0600-F0609, U+F0610-F07A1, U+F07DA-F07E6, U+F07FF-F081F, U+F08A0-F08A9, U+F08AF-F08FF, U+F0910, U+F0914-F0945, U+F0957-F0961, U+F096C-F09A9, U+F09DE-F09DF, U+F09EF, U+F09FD-F09FF, U+F0D00-F0DFF, U+F1B00-F1B5A, U+F1B60-F1BBA, U+F1BBD-F1C1A, U+F1C20-F1C2B, U+FA750-FA75F, U+FC100-FC165, U+FC170-FC1AA, U+FC1B0-FC1FA, U+FC1FE-FC2D5, U+FC2E2-FC2E7, U+FC2EA-FC335, U+FC33C-FC33F, U+FC34A-FC351, U+FC376-FC387, U+FC38E-FC38F, U+FC392-FC39E, U+FC3A0-FC3AF, U+FC400-FC49A, U+FC840-FC893, U+FC8A0-FC8F2, U+FC900-FC98D, U+FC98F-FC992, U+FC994-FC9B2, U+FC9B8-FC9FC, U+FCA00-FCA44, U+FCA49-FCA4A, U+FCA50-FCA9E, U+FCAA5-FCAA7, U+FCAC0-FCAC2, U+FCAD2-FCAD6, U+FCAF0-FCAF7, U+FCAFD-FCB6B, U+FCB70-FCB79, U+FD200-FD2BB, U+FD2C0-FD2D5, U+FD2FF, U+FDB00-FDB01, U+FDB03, U+FDB05-FDB07, U+FDB09, U+FDB0B-FDB0F, U+FDB65-FDB7B, U+FDB80-FDBBF, U+FDBC1-FDBCB, U+FDBCE, U+FE360, U+FE363, U+FE366-FE368, U+FE81B, U+FE82C, U+FE82E-FE837, U+FEE20-FEE28, U+FEE2D-FEE31, U+FEE33, U+FF000-FF00F, U+FF013-FF01F, U+FF022-FF02C, U+FF02E-FF02F, U+FF032-FF037, U+FF03F, U+FF041-FF044, U+FF048-FF04A, U+FF056-FF07F, U+FF084-FF08F, U+FF092-FF094, U+FF096, U+FF09D, U+FF0A0, U+FF0A2-FF0A3, U+FF0A8-FF0B0, U+FF0B3, U+FF0C4-FF0C6, U+FF0CA-FF0CB, U+FF0D1, U+FF0D3-FF0EB, U+FF0FE, U+FF101-FF104, U+FF107-FF10D, U+FF150-FF16B, U+FF170-FF17F, U+FF300-FF333, U+FFFA0-FFFA7, U+100001, U+100020-10007F, U+100100-100235, U+10023E-10026F, U+100290-1002CC, U+1002D0-1002F1, U+100300-100334, U+100340-10034D, U+100354-100356, U+10036E-10036F, U+100371-100375, U+100396, U+10039E, U+1003A0, U+1003CE-1003DE, U+1003F0-100455, U+1004DE-1004EE, U+100D00-100DED, U+100DF0-100E39, U+100E3F-100EB2, U+100EB6-100F1A, U+100F20-100F3A, U+100F3D, U+101000-101023, U+101025-101299, U+101300-10130D, U+101315-101332, U+101334-10135F, U+101400-1014C2, U+1014C9-1014D8, U+10F800-10F882, U+10F885, U+10F887-10F9CB, U+10FF10-10FF28, U+10FF30-10FF44, U+10FF54;
}

@font-face {
    font-family: 'Charis';
    src: url('/assets/fonts/Charis-Regular.woff2?v=1.0.9') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00020-0007E, U+000A0-00148, U+0014A-0033F, U+00346-0036F, U+00387, U+00393-00394, U+00398, U+0039E, U+003A0, U+003A8-003A9, U+003B1-003B4, U+003B8, U+003BB-003BC, U+003C0-003C1, U+003C3, U+003C6-003C7, U+003C9, U+003D1, U+003F4, U+00400-0045F, U+00462-00463, U+00472-00475, U+0048A-0052F, U+01AB0-01ABA, U+01ABF-01AC0, U+01AC6-01ACE, U+01C89-01C8A, U+01D00-01DBF, U+01DC2, U+01DC4-01DCD, U+01DDA, U+01DDC, U+01DF5, U+01DFC-01EFF, U+02000-02042, U+02044, U+0204A, U+02053, U+02057, U+02060-02063, U+0206A-02071, U+02074-0208E, U+02090-0209C, U+020A0-020C0, U+020E5, U+020EC-020EF, U+0210C, U+02113, U+02116-02117, U+0211F, U+02122-02123, U+02126, U+0212D, U+02135, U+0214F-0218B, U+02190-0219B, U+021A8, U+021AE, U+021B6-021B7, U+021BA-021BB, U+021D0-021D5, U+02202-02206, U+0220F, U+02211-02213, U+02215, U+02219-0221A, U+0221E, U+02221, U+02225-02228, U+0222B, U+02234-02235, U+0223C, U+02248, U+0225F-02262, U+02264-02265, U+0226E-0226F, U+02282-02287, U+022BB-022BD, U+02308-0230B, U+02318, U+0231C-0231F, U+02329-0232A, U+0239B-023AD, U+023D1-023D6, U+02423, U+024B6, U+024D0, U+025C9-025CC, U+02610-02612, U+02639-0263A, U+02640, U+02642, U+0266D, U+0266F, U+02713, U+02717, U+0274D, U+027C2, U+027E6-027EB, U+02980, U+02AFD, U+02C60-02C7F, U+02C88-02C89, U+02E00-02E0D, U+02E13-02E15, U+02E17, U+02E22-02E25, U+02E28-02E29, U+02E3A-02E3B, U+02E3D-02E3E, U+0A69C-0A69D, U+0A700-0A799, U+0A7A0-0A7BF, U+0A7C4-0A7CD, U+0A7DA-0A7DC, U+0A7F2-0A7F4, U+0A7F7-0A7FF, U+0A92E, U+0AB30, U+0AB53, U+0AB5C, U+0AB5E, U+0AB64-0AB6B, U+0F130-0F135, U+0F170-0F176, U+0F178-0F17B, U+0F180-0F182, U+0F18B, U+0F195-0F1CE, U+0F1D0-0F1EA, U+0F208-0F26E, U+0F320-0F32D, U+0FB00-0FB04, U+0FE00-0FE0F, U+0FE20-0FE23, U+0FEFF, U+0FFF9-0FFFD, U+10780-10785, U+10787-107B0, U+107B2-107BA, U+1D40C, U+1D504-1D505, U+1D50A, U+1D50E-1D510, U+1D513-1D514, U+1D516-1D517, U+1D519, U+1DF00-1DF1E, U+1DF25-1DF2A, U+1E030-1E049, U+1E04B-1E06B, U+1E06D, U+1E08F, U+1F12F, U+1F610;
}

@font-face {
    font-family: 'Charis SIL';
    src: url('/assets/fonts/Charis-Regular.woff2?v=1.0.9') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+00020-0007E, U+000A0-00148, U+0014A-0033F, U+00346-0036F, U+00387, U+00393-00394, U+00398, U+0039E, U+003A0, U+003A8-003A9, U+003B1-003B4, U+003B8, U+003BB-003BC, U+003C0-003C1, U+003C3, U+003C6-003C7, U+003C9, U+003D1, U+003F4, U+00400-0045F, U+00462-00463, U+00472-00475, U+0048A-0052F, U+01AB0-01ABA, U+01ABF-01AC0, U+01AC6-01ACE, U+01C89-01C8A, U+01D00-01DBF, U+01DC2, U+01DC4-01DCD, U+01DDA, U+01DDC, U+01DF5, U+01DFC-01EFF, U+02000-02042, U+02044, U+0204A, U+02053, U+02057, U+02060-02063, U+0206A-02071, U+02074-0208E, U+02090-0209C, U+020A0-020C0, U+020E5, U+020EC-020EF, U+0210C, U+02113, U+02116-02117, U+0211F, U+02122-02123, U+02126, U+0212D, U+02135, U+0214F-0218B, U+02190-0219B, U+021A8, U+021AE, U+021B6-021B7, U+021BA-021BB, U+021D0-021D5, U+02202-02206, U+0220F, U+02211-02213, U+02215, U+02219-0221A, U+0221E, U+02221, U+02225-02228, U+0222B, U+02234-02235, U+0223C, U+02248, U+0225F-02262, U+02264-02265, U+0226E-0226F, U+02282-02287, U+022BB-022BD, U+02308-0230B, U+02318, U+0231C-0231F, U+02329-0232A, U+0239B-023AD, U+023D1-023D6, U+02423, U+024B6, U+024D0, U+025C9-025CC, U+02610-02612, U+02639-0263A, U+02640, U+02642, U+0266D, U+0266F, U+02713, U+02717, U+0274D, U+027C2, U+027E6-027EB, U+02980, U+02AFD, U+02C60-02C7F, U+02C88-02C89, U+02E00-02E0D, U+02E13-02E15, U+02E17, U+02E22-02E25, U+02E28-02E29, U+02E3A-02E3B, U+02E3D-02E3E, U+0A69C-0A69D, U+0A700-0A799, U+0A7A0-0A7BF, U+0A7C4-0A7CD, U+0A7DA-0A7DC, U+0A7F2-0A7F4, U+0A7F7-0A7FF, U+0A92E, U+0AB30, U+0AB53, U+0AB5C, U+0AB5E, U+0AB64-0AB6B, U+0F130-0F135, U+0F170-0F176, U+0F178-0F17B, U+0F180-0F182, U+0F18B, U+0F195-0F1CE, U+0F1D0-0F1EA, U+0F208-0F26E, U+0F320-0F32D, U+0FB00-0FB04, U+0FE00-0FE0F, U+0FE20-0FE23, U+0FEFF, U+0FFF9-0FFFD, U+10780-10785, U+10787-107B0, U+107B2-107BA, U+1D40C, U+1D504-1D505, U+1D50A, U+1D50E-1D510, U+1D513-1D514, U+1D516-1D517, U+1D519, U+1DF00-1DF1E, U+1DF25-1DF2A, U+1E030-1E049, U+1E04B-1E06B, U+1E06D, U+1E08F, U+1F12F, U+1F610;
}

/* Universal Character Font Stack:
   Applies across ALL views, cards, drawers, tools, breadcrumbs, titles, and grids
   to prevent tofu box rendering. */
.tile-char,
.detail-title-char,
.giant-char-wrapper,
.breadcrumb-current,
.breadcrumb-item span,
.font-preview-char,
.variation-char,
.result-char,
.autocomplete-char,
.card-icon,
.symbol-cell,
.preview-text,
.font-output-text,
.fav-item .tile-char,
.char-tile-wrapper .tile-char,
#favorites-grid .tile-char,
#history-grid .tile-char,
#recent-views-grid .tile-char {
    font-family: var(--font-symbols);
}

/* ============================================================
   Round 48: /symbols/ page styles
   Per CopyCharacter Master Specification — FAST COPY UTILITY
   ============================================================ */

/* Hero + Search */
.symbols-hero {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
}
.symbols-h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}
.symbols-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.symbols-search-form {
    display: flex;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}
.symbols-search-input {
    flex: 1;
    /* Round 49: flex items default to min-width:auto (intrinsic content width),
       which lets the input overflow its flex container at 320px viewports. */
    min-width: 0;
    width: 100%;
    height: 54px;
    padding: 0 1rem 0 3rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.symbols-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.symbols-search-btn {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section layout */
.symbols-section {
    margin-top: 2.5rem;
}
.symbols-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}
.symbols-section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
}

/* ==========================================================================
   /symbols/ hub — Round 49 component styles
   (see SYMBOLS_HUB_UI_UX_SPEC.md; replaces the Round 48 symbols block)
   The glyphs are the visual content: no hero imagery, no gradients.
   ========================================================================== */

/* Visually hidden but available to screen readers (search label etc.) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Section rhythm --- */
.symbols-section {
    margin-top: 2.5rem;
}
.symbols-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}
.symbols-section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
}

/* --- SymbolCard (canonical component) --- */
.symbol-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}
.symbol-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 92px;
    padding: 0.6rem 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
    position: relative;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}
.symbol-card:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-color: var(--accent-color);
}
.symbol-card:hover {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}
.symbol-card:active {
    transform: scale(0.96);
}
.symbol-card .tile-char {
    font-size: 1.9rem;
    line-height: 1.15;
    margin-bottom: 0;
    font-family: 'CC Color Emoji', 'Charis', 'Charis SIL', 'Catrinity', 'Noto Music', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Noto Sans Math', 'Plus Jakarta Sans', 'Noto Sans', 'Gentium Plus', "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Arial Unicode MS", sans-serif;
}
.symbol-card .tile-char.emoji-char,
.tile-char.emoji-char {
    font-size: 2.2rem;
    line-height: 1.15;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
}
.symbol-copy-label {
    font-size: 0.66rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.symbol-card.copied-flash {
    border-color: var(--color-success-700);
    background: rgba(16, 185, 129, 0.08);
}
.symbol-card.copied-flash .symbol-copy-label {
    color: var(--color-emerald-700);
}
.symbol-card.copied-flash .symbol-copy-label::after {
    content: ' \2713';
}

/* Detail link: separate keyboard-reachable anchor under the card button */
.symbol-name-link {
    display: block;
    margin-top: 0.3rem;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.15rem;
}
a.symbol-name-link:hover,
a.symbol-name-link:focus-visible {
    color: var(--accent-color);
    text-decoration: underline;
    outline: none;
}
.symbol-name-plain {
    cursor: default;
}

/* Favorite toggle (existing app.js contract) */
.symbol-card-wrap .fav-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: var(--z-tile-action);
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--border-color);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.symbol-card-wrap:hover .fav-toggle,
.symbol-card-wrap .fav-toggle:focus-visible,
.symbol-card-wrap .fav-toggle.is-favorite {
    opacity: 1;
}
.symbol-card-wrap .fav-toggle.is-favorite {
    color: var(--color-warning-700);
}
.symbol-card-wrap .fav-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

/* --- Grids --- */
.symbols-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.6rem 0.55rem;
    margin-top: 0.75rem;
}
.symbols-popular-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.symbols-search-grid {
    margin-top: 1.25rem;
}

/* --- Category quick-navigation chips --- */
.symbols-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    justify-content: center;
}
.symbols-chip {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.symbols-chip:hover,
.symbols-chip:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-secondary);
    outline: none;
}

/* --- SymbolCategoryPreview component --- */
.symbol-category-preview {
    margin-top: 2rem;
}
.symbol-category-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}
.symbol-category-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}
.symbol-category-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.symbol-category-title a:hover,
.symbol-category-title a:focus-visible {
    color: var(--accent-color);
    text-decoration: underline;
    outline: none;
}
.symbol-category-count {
    margin-left: 0.55rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.symbol-category-viewall {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    white-space: nowrap;
}
.symbol-category-viewall:hover,
.symbol-category-viewall:focus-visible {
    text-decoration: underline;
    outline: none;
}
.symbol-category-desc {
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-secondary);
    max-width: 72ch;
}

/* --- Copy help (utility clarification only) --- */
.symbols-info-section {
    max-width: 680px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    background: var(--bg-primary);
}
.symbols-help-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}
.symbols-info-section p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.6rem 0;
}
.symbols-info-section p:last-child {
    margin-bottom: 0;
}

/* --- Next destinations --- */
.symbols-cross-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.cross-link-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}
.cross-link-card:hover,
.cross-link-card:focus-visible {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
    outline: none;
}
.cross-link-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.cross-link-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Search mode / empty state --- */
.symbols-no-results,
.symbols-empty-state {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin-top: 1rem;
}
.symbols-back-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.symbols-back-link:hover {
    text-decoration: underline;
}

/* --- Mobile responsive --- */
@media (max-width: 768px) {.symbols-h1 {
        font-size: 1.75rem;
    }
.symbols-intro {
        font-size: 0.95rem;
    }
.symbols-search-input {
        height: 48px;
        font-size: 0.95rem;
    }
.symbols-section {
        margin-top: 2rem;
    }
.symbols-section-title {
        font-size: 1.25rem;
    }
.symbols-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 0.5rem 0.45rem;
    }
.symbols-popular-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    }
.symbol-card {
        min-height: 84px;
    }
.symbol-card .tile-char {
        font-size: 1.65rem;
    }
    /* Chips scroll horizontally without causing page overflow */
.symbols-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.35rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
.symbols-chip {
        flex: 0 0 auto;
    }
.symbol-category-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
.symbol-category-title {
        font-size: 1.15rem;
    }
.symbols-cross-links {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Round 50: Symbol Category Pages (/symbols/{category}/)
   Specification: SYMBOL_CATEGORY_UI_UX_SPEC.md & SYMBOL_CATEGORY_SEO_SPEC.md
   ========================================================================== */
.category-page-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem 3.5rem;
}

/* --- Category Header --- */
.category-header {
    margin: 1.5rem 0 1.75rem;
}
.category-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.category-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 75ch;
    margin: 0;
}

/* --- Controls Toolbar (Filter + Jump Pills) --- */
.category-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.category-filter-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.category-filter-clear:hover {
    color: var(--text-primary);
}

/* --- Subgroup Jump Pills --- */
.category-jump-pills {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}
.jump-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.jump-pill:hover,
.jump-pill:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-secondary);
    outline: none;
}
.jump-pill.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--color-white);
}

/* --- Shelf & Subgroup Structure --- */
.subgroups-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.category-subgroup {
    scroll-margin-top: 5rem;
}
.subgroup-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    /* Round 61 (61-T9): title + count badge refused to share 160px at 240px
       (badge spilled 2px). Wrap. */
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}
.subgroup-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* --- Multi-Column Symbol Grids --- */
.no-filter-results {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin: 1.5rem 0;
}
.no-filter-results p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* --- Pagination Component --- */
.pagination-nav {
    margin: 3rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.pagination-container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
}
.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    user-select: none;
}
.pagination-link:hover:not(.pagination-disabled):not(.pagination-current),
.pagination-link:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-secondary);
    outline: none;
}
.pagination-current {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--color-white);
    cursor: default;
}
.pagination-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-ellipsis {
    padding: 0 0.25rem;
    color: var(--text-secondary);
}

/* --- Practical Guidance & Compatibility Callout --- */
.category-guidance-section {
    margin: 3rem 0 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.guidance-main-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.guidance-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.guidance-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.guidance-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.guidance-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.guidance-card-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Keyboard Shortcuts & Alt Codes Table --- */
.category-typing-section {
    margin: 2.5rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.typing-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.typing-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    max-width: 75ch;
}
.typing-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.typing-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.92rem;
}
.typing-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.typing-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}
.typing-table tr:last-child td {
    border-bottom: none;
}
.typing-table tr:hover td {
    background: var(--bg-secondary);
}
.typing-glyph {
    font-size: 1.4rem;
    line-height: 1;
}

/* --- Related Categories & Emoji Discovery --- */
.related-discovery-section {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.related-discovery-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.related-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}
.related-category-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.related-category-card:hover,
.related-category-card:focus-visible {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    outline: none;
}
.related-card-preview {
    font-size: 1.75rem;
    line-height: 1;
    min-width: 48px;
    text-align: center;
    letter-spacing: 0.1em;
}
.related-card-content {
    flex: 1;
    min-width: 0;
}
.related-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
}
.related-card-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
}
.related-card-intro {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0.35rem 0 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-card-arrow {
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: transform 0.15s, color 0.15s;
}
.related-category-card:hover .related-card-arrow {
    color: var(--accent-color);
    transform: translateX(3px);
}
.related-card-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--accent-color);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

/* ==========================================================================
   Symbol Category Dynamic Module Architecture (Intent-Driven UI)
   ========================================================================== */

/* Hero Header & Badges */
.category-hero-header {
    margin: 1.5rem 0 2rem;
}
.category-title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.category-main-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}
.category-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.category-intro-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 75ch;
    margin: 0;
}

/* Category Filter Box */
.category-filter-section {
    margin-bottom: 2rem;
}
.category-filter-box {
    max-width: 480px;
    width: 100%;
}
.category-search-input {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 42px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}
.category-search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Popular Symbols Shelf */
.popular-symbols-shelf {
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(30, 41, 59, 0.7) 100%);
}
.popular-shelf-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.popular-shelf-badge {
    font-size: 1.25rem;
}
.popular-shelf-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.popular-symbols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.65rem;
}

/* Subgroup Quick Jump Nav */
.subgroups-quick-nav {
    margin-bottom: 2rem;
    position: sticky;
    top: 60px;
    z-index: var(--z-raised);
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}
.subgroup-pills-scroll {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}
.subgroup-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
    flex-shrink: 0;
}
.subgroup-pill:hover,
.subgroup-pill:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: var(--bg-secondary);
}
.subgroup-pill.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--color-white);
}
.pill-count {
    font-size: 0.75rem;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}
/* Subgroup Sections */
.symbol-subgroup-section {
    scroll-margin-top: 7rem;
    margin-bottom: 2.5rem;
}
.subgroup-section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.subgroup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.subgroup-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.subgroup-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    line-height: 1.5;
}
.subgroup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.65rem 0.55rem;
}

/* Emoji Bridge Component */
.category-emoji-bridge-section {
    margin: 3rem 0 2rem;
}
.emoji-bridge-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    min-width: 0;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(30, 41, 59, 0.6) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}
.emoji-bridge-icon {
    font-size: 2.75rem;
    line-height: 1;
    flex-shrink: 0;
}
.emoji-bridge-info {
    display: flex;
    flex-direction: column;
    /* Round 61: min-width 250px refused to shrink below it and pushed
       category pages 79px wide at 240px viewports. */
    min-width: 0;
    flex: 1 1 12rem;
}
.emoji-bridge-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.emoji-bridge-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.emoji-bridge-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}
.emoji-bridge-action {
    flex-shrink: 0;
}
.emoji-bridge-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition);
}

/* Alt-code badges & Html entity styles in Typing Table */
.alt-code-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.html-entity-code {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--accent-color);
}

/* --- Mobile Responsive Rules --- */
@media (max-width: 768px) {.category-title,
.category-main-title {
        font-size: 1.75rem;
    }
.category-intro,
.category-intro-lead {
        font-size: 0.95rem;
    }
.category-toolbar {
        margin-bottom: 1.5rem;
    }
.subgroups-quick-nav {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
.subgroup-grid,
.popular-symbols-grid {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
        gap: 0.5rem 0.45rem;
    }
.emoji-bridge-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
.emoji-bridge-action {
        width: 100%;
    }
.emoji-bridge-link {
        width: 100%;
        justify-content: center;
    }
.guidance-cards-grid {
        grid-template-columns: 1fr;
    }
.related-cards-grid {
        grid-template-columns: 1fr;
    }
.pagination-link {
        min-width: 36px;
        height: 36px;
        padding: 0 0.5rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Unicode Character Detail Workstation Layout
   Authoritative, standards-driven interface for Unicode code points
   ========================================================================== */
.unicode-char-detail {
    margin: 1rem 0 3rem;
}

/* --- Sequential Navigation (Prev / Next Assigned Codepoints) --- */

.prev-next-nav {
    margin-bottom: 1.5rem;
}
.prev-next-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
}
.nav-arrow-link {
    flex: 1;
    max-width: 48%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: var(--transition);
}
.nav-arrow-link:hover {
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}
.nav-arrow-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.nav-arrow-placeholder {
    flex: 1;
    max-width: 48%;
}
.nav-direction {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.nav-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.nav-glyph {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.nav-code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    align-self: flex-start;
    max-width: 100%;
}
.nav-arrow-link.nav-next .nav-item-content {
    justify-content: flex-end;
}
.nav-arrow-link.nav-next .nav-code {
    align-self: flex-end;
}
.nav-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

@media (max-width: 640px) {
    .prev-next-container {
        flex-direction: column;
    }
    .nav-arrow-link,
    .nav-arrow-placeholder {
        max-width: 100%;
    }
    .nav-arrow-link.nav-next {
        align-items: flex-end;
        text-align: right;
    }
}
.char-footer-nav-wrap {
    margin: 2.5rem 0 1.5rem;
}

/* --- Primary Character Hero Card --- */
.character-hero-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.hero-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: center;
}

/* Hero Preview Tile (Left) */
.hero-preview-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem 1rem 1.25rem;
    min-height: 220px;
    text-align: center;
}
.fav-star-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: var(--transition);
}
.fav-star-btn:hover {
    color: var(--color-amber-600);
    transform: scale(1.15);
}
.fav-star-btn.is-favorite {
    color: var(--color-amber-600);
}
.hero-glyph-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 110px;
    margin-bottom: 1rem;
}
.hero-glyph {
    font-size: 4.5rem;
    line-height: 1;
    color: var(--text-primary);
    font-weight: 500;
    user-select: all;
}
.hero-combining {
    font-size: 4rem;
    color: var(--accent-color);
}
.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge-whitespace { background: rgba(59, 130, 246, 0.15); color: var(--color-brand-700); border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-control { background: rgba(239, 68, 68, 0.15); color: var(--color-danger-700); border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-format { background: rgba(168, 85, 247, 0.15); color: var(--color-violet-600); border: 1px solid rgba(168, 85, 247, 0.3); }
.badge-surrogate { background: rgba(245, 158, 11, 0.15); color: var(--color-amber-800); border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-pua { background: rgba(20, 184, 166, 0.15); color: var(--color-teal-700); border: 1px solid rgba(20, 184, 166, 0.3); }
.badge-noncharacter { background: rgba(239, 68, 68, 0.2); color: var(--color-danger-700); border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-unassigned { background: rgba(148, 163, 184, 0.15); color: var(--color-slate-500); border: 1px solid rgba(148, 163, 184, 0.3); }
.hero-copy-wrap {
    width: 100%;
}
.btn-copy-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--accent-color);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}
.btn-copy-hero:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}
.btn-copy-hero.copied {
    background: var(--success-color);
}
.btn-copy-hero.btn-disabled {
    background: var(--border-color);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* Hero Meta & Taxonomy (Right) */
.hero-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* Taxonomy Chips Row */
.tax-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}
.tax-chip:hover {
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.06);
}
.chip-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* --- 2-Column Workstation Grid --- */
.char-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.75rem;
    align-items: start;
}
/* Round 60: 1fr track adopted the card auto-min (tables 290px + padding)
   and pushed codepoint pages 44px wide at 320px; scrollers inside cards
   must be allowed to shrink to their own overflow-x:auto. */
.char-detail-grid > *,
.char-main-col > *,
.card-technical,
.premium-card,
.distribution-card {
    min-width: 0;
}
.detail-layout-grid > * {
    min-width: 0;
}
.char-main-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.char-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* --- Card Technical Components --- */
.card-technical {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.card-title svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.section-desc {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

/* Technical Tables (Facts, Encodings, Decompositions) */
.technical-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.technical-table th,
.technical-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    text-align: left;
}
.technical-table tr:last-child th,
.technical-table tr:last-child td {
    border-bottom: none;
}
.technical-table .row-label {
    width: 28%;
    font-weight: 600;
    color: var(--text-secondary);
}
.technical-table .sub-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}
.technical-table .row-value {
    width: 58%;
    color: var(--text-primary);
    word-break: break-all;
}
.technical-table .row-action {
    width: 14%;
    text-align: right;
}
.technical-table code {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    background: var(--bg-primary);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--accent-color);
}
.table-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.table-link:hover {
    text-decoration: underline;
}

/* Small Copy Button */
.btn-copy-sm {
    padding: 0.35rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.btn-copy-sm:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.btn-copy-sm.copied {
    background: var(--success-color);
    border-color: var(--success-color);
    color: var(--color-white);
}

/* Surrogate Detail Box */
.surrogate-detail-box {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Developer Programming Codes Grid */
.dev-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dev-lang-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* Normalization & Bidi Grids */

/* Font Specimen Slider & Grid */
.font-preview-header {
    flex-wrap: wrap;
    gap: 1rem;
}
.font-size-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}
.font-slider-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.font-slider-input {
    width: 140px;
    cursor: pointer;
    accent-color: var(--accent-color);
}
.font-specimen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.specimen-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.specimen-meta {
    display: flex;
    flex-direction: column;
}
.specimen-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.specimen-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.specimen-glyph-box {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.5rem;
}
.specimen-char {
    font-size: 40px;
    line-height: 1;
    color: var(--text-primary);
    transition: font-size 0.05s ease-out;
}
.font-stack-sans .specimen-char { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.font-stack-serif .specimen-char { font-family: Georgia, 'Times New Roman', Times, Cambria, serif; }
.font-stack-mono .specimen-char { font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, 'Courier New', monospace; }
.font-stack-system .specimen-char { font-family: var(--font-sans); }
.specimen-context {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.specimen-context-label {
    font-weight: 600;
}
.specimen-context-text {
    font-family: inherit;
    color: var(--text-primary);
}
.specimen-nonprintable-notice {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
}
.specimen-nonprintable-notice .notice-icon {
    font-size: 1.5rem;
}
.specimen-nonprintable-notice p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Sidebar Sections (Aliases, Relationships, Bridges) */
.bridge-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 0.5rem;
}
.bridge-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 12rem;
}

/* --- Authoritative Standards & Source Attribution Note --- */
.character-source-note {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}
.source-note-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color);
}
.source-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.source-text a {
    color: var(--accent-color);
    text-decoration: none;
}
.source-text a:hover {
    text-decoration: underline;
}
.source-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.source-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.source-link:hover {
    text-decoration: underline;
}
.source-sep {
    color: var(--border-color);
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {.char-detail-grid {
        grid-template-columns: 1fr;
    }
.hero-grid {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {.hero-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
.font-specimen-grid {
        grid-template-columns: 1fr;
    }
.technical-table .row-label {
        width: 35%;
    }
.technical-table .row-value {
        width: 65%;
    }
.technical-table .row-action {
        display: none;
    }
}

/* ==========================================================================
   Unicode Block Detail Page Family (/unicode/block/{slug}/)
   ========================================================================== */
.block-page-workstation {
    padding: 1.5rem 0 4rem;
    color: var(--text-primary);
}
.block-header {
    margin-bottom: 1.5rem;
}
.block-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.block-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}
.block-title .title-type-suffix {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 1.4rem;
    margin-left: 0.35rem;
}
.block-meta-shelf {
    flex-wrap: wrap;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.block-meta-shelf .badge-range {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.3);
    color: var(--accent-color);
}
.block-meta-shelf .badge-size {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.block-meta-shelf .badge-count {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--color-emerald-700);
}
.block-meta-shelf .badge-unassigned {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--color-amber-600);
}
.block-meta-shelf .badge-plane {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--color-indigo-700);
}
.block-lead-note {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 960px;
    margin: 0 0 1.25rem;
}

/* Consumer Bridge Callout */
.block-consumer-bridge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.06), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(2, 132, 199, 0.2);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.block-consumer-bridge .bridge-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.block-consumer-bridge .bridge-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.block-consumer-bridge .bridge-content strong {
    color: var(--text-primary);
}
.btn-bridge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.btn-bridge:hover {
    opacity: 0.9;
}

/* Neighbor Navigation Strip */
.block-neighbor-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.neighbor-item {
    flex: 1;
    min-width: 0;
}
.neighbor-item.neighbor-next {
    text-align: right;
}
.neighbor-link {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    gap: 0.15rem;
    transition: color 0.15s ease;
}
.neighbor-link:hover .neighbor-name {
    color: var(--accent-color);
}
.neighbor-dir {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.neighbor-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neighbor-range {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.neighbor-placeholder {
    display: inline-flex;
    flex-direction: column;
    opacity: 0.4;
    gap: 0.15rem;
}
.neighbor-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* Script vs Block Callout */
.script-vs-block-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: 12px;
    background: rgba(2, 132, 199, 0.04);
    border: 1px solid rgba(2, 132, 199, 0.18);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.script-vs-block-callout .callout-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.script-vs-block-callout .script-inline-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Round 59 (59-A): the block-page callout's badge ("Standard Architecture
   Note", 0.8rem uppercase + letter-spacing, ~250px with flex-shrink:0) plus a
   nowrap flex row forced 29–38px of page-level horizontal scroll at 375px on
   block pages. Stack the callout vertically on phones and let the badge text
   wrap to multiple lines (structure identical for the script-page
   .callout-icon variant — an icon simply sits on its own line). */
@media (max-width: 640px) {
    .script-vs-block-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .script-vs-block-callout .callout-badge {
        margin-top: 0;
        flex-wrap: wrap;
        white-space: normal;
    }
    .script-vs-block-callout .callout-icon {
        margin-top: 0;
    }
}

/* Toolbar & Filters */
.block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}
.block-filter-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

/* Official Subgroups in Grid */
.block-subgroups-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.block-subgroup-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.subgroup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Round 61 (61-T9): see the 3700 sibling — badge wrap at tiny widths. */
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}
.subgroup-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0;
}
.subgroup-count-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Character Card Grid */
.block-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.85rem;
    margin-bottom: 2.5rem;
}
.block-subgroup-group .block-char-grid {
    margin-bottom: 0;
}
.card-badges {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.3rem;
}
.card-script-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(2, 132, 199, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}
.char-semantic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.2);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    max-width: 100%;
    word-break: break-all;
    line-height: 1.2;
}

/* Factsheet Table */
.block-properties-section,
.block-distribution-section {
    margin-top: 3rem;
    margin-bottom: 2.5rem;
}
.section-subtitle-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}
.properties-table-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.block-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.block-specs-table th,
.block-specs-table td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.block-specs-table tr:last-child th,
.block-specs-table tr:last-child td {
    border-bottom: none;
}
.block-specs-table th {
    width: 35%;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
.badge-count-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-count-pill.assigned {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-emerald-700);
}
.badge-count-pill.unassigned {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-amber-800);
}
.prop-percent {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-left: 0.35rem;
}
.spec-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Distribution Grids */
.distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.distribution-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.distribution-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.distribution-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.distribution-title-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.95rem;
}
.cat-code-pill {
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(2, 132, 199, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.distribution-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.distribution-bar-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.distribution-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-color);
}
.distribution-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.distribution-explore-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.distribution-explore-link:hover {
    text-decoration: underline;
}

/* Version Timeline Shelf */
.version-timeline-shelf {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.version-timeline-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1.15rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-width: 150px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.version-timeline-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}
.version-tag {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.version-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.version-action {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-top: 0.25rem;
}

/* Source Footnote */
.block-source-footnote {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}
.source-footnote-card {
    padding: 1.25rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.source-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.source-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}
.source-text a {
    color: var(--accent-color);
    text-decoration: underline;
}
.source-more-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
}
.source-more-link:hover {
    text-decoration: underline;
}

/* Special Notices (Surrogates, PUA) */
.block-special-notice {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
}
.block-special-notice .notice-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.block-special-notice h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}
.block-special-notice p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.notice-surrogate {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--color-red-800);
}
.notice-surrogate code {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-red-900);
}
.notice-pua {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--color-amber-800);
}
.notice-pua code {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber-950);
}

/* Toast */
.block-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-slate-900);
    color: var(--color-white);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-toast-high);
}
.block-toast.toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {.block-neighbor-strip {
        flex-direction: column;
        align-items: stretch;
    }
.neighbor-item.neighbor-next {
        text-align: left;
    }
.neighbor-divider {
        display: none;
    }
.block-specs-table th {
        width: 45%;
    }
}

/* ==========================================================================
   UNICODE FANCY TEXT / FONTS HUB STYLES (/fonts/)
   ========================================================================== */
.fonts-hub-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    color: var(--text-primary);
}
.fonts-hub-header {
    text-align: center;
    margin-bottom: 2rem;
}
.fonts-hub-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.fonts-hub-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Primary Workstation Card */
.fonts-workstation-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    padding: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}
.workstation-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.workstation-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.workstation-presets {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.preset-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.2rem;
}
.preset-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.preset-btn:hover {
    background: var(--color-slate-200);
    color: var(--color-brand-600);
    border-color: var(--color-slate-300);
}
.workstation-input-wrap {
    position: relative;
}
.fonts-main-input {
    width: 100%;
    min-height: 110px;
    background: var(--bg-raised);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.fonts-main-input:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.workstation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.workstation-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.workstation-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--color-slate-300);
}
.workstation-counter {
    font-size: 0.825rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Filter & Search Bar */
.fonts-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.fonts-filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fonts-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.fonts-filter-pill:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.fonts-filter-pill.active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}
.fonts-filter-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}
.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.fonts-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}
.fonts-search-box .search-icon {
    position: absolute;
    left: 0.85rem;
    color: var(--text-muted);
    pointer-events: none;
}
.fonts-search-input {
    width: 100%;
    padding: 0.45rem 2rem 0.45rem 2.4rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.fonts-search-input:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.search-clear-btn {
    position: absolute;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

/* Results Grid & Cards */
.fonts-styles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.font-style-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.font-style-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
    border-color: var(--color-slate-300);
}
.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.card-style-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.card-category-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.card-fav-btn {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
    border-radius: 4px;
}
.card-fav-btn:hover {
    color: var(--color-amber-600);
    transform: scale(1.1);
}
.card-fav-btn.active .fav-icon {
    fill: var(--color-amber-600);
    stroke: var(--color-amber-600);
}
.card-preview-container {
    min-height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.preview-text {
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--text-primary);
    font-family: 'Noto Sans Math', 'Noto Sans Symbols', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    user-select: all;
}
.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.85rem;
}
.font-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-brand-600);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.font-copy-btn:hover {
    background: var(--color-brand-700);
}
.font-copy-btn.copied {
    background: var(--color-green-600) !important;
}
.card-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.card-detail-link:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}

/* No Results State */
.fonts-no-results-box {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin: 2rem 0;
    color: var(--text-secondary);
}
.no-results-msg {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1rem 0 1.25rem;
}

/* Supporting Info Grid */
.fonts-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}
.fonts-info-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.info-card-header .info-icon {
    color: var(--color-brand-600);
    flex-shrink: 0;
}
.info-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    /* Round 61 (61-T10): the title sits in a flex .info-card-header beside a
       20px icon. As an auto-sized flex item it refused to shrink below its
       full one-line text width ("Accessibility Considerations" = 149px) and
       spilled 6px past a 240px viewport. min-width:0 + flex shrink + anywhere-
       wrapping lets the header fold to multiple lines instead. Applies to
       both 5990/6166 siblings (identical duplicated rule family). */
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.info-card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Related Styles Section */
.fonts-related-section {
    border-top: 1px solid var(--border-color);
    padding-top: 2.5rem;
    margin-bottom: 2rem;
}
.related-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 1.25rem;
    color: var(--text-primary);
}
.related-styles-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.related-style-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}
.related-style-chip:hover {
    border-color: var(--color-brand-600);
    color: var(--color-brand-600);
    background: rgba(37, 99, 235, 0.04);
}
.related-style-chip .preview-mini {
    font-size: 1rem;
    color: var(--text-muted);
}
.related-hub-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.related-destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.destination-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.2rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.destination-card:hover {
    border-color: var(--color-brand-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.dest-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.35rem;
}
.dest-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {.fonts-hub-title {
        font-size: 1.85rem;
    }
.fonts-hub-subtitle {
        font-size: 1rem;
    }
.fonts-workstation-card {
        padding: 1rem;
    }
.workstation-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
.fonts-main-input {
        font-size: 1.1rem;
        min-height: 90px;
    }
.fonts-controls-row {
        flex-direction: column;
    }
}
.font-copy-btn {
    cursor: pointer;
    transition: all 0.15s ease;
}
.font-copy-btn:hover {
    background: var(--color-brand-700);
}
.font-copy-btn.copied {
    background: var(--color-green-600) !important;
}
.card-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.card-detail-link:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}

/* No Results State */
.fonts-no-results-box {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin: 2rem 0;
    color: var(--text-secondary);
}
.no-results-msg {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1rem 0 1.25rem;
}

/* Supporting Info Grid */
.fonts-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}
.fonts-info-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.info-card-header .info-icon {
    color: var(--color-brand-600);
    flex-shrink: 0;
}
.info-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    /* Round 61 (61-T10): the title sits in a flex .info-card-header beside a
       20px icon. As an auto-sized flex item it refused to shrink below its
       full one-line text width ("Accessibility Considerations" = 149px) and
       spilled 6px past a 240px viewport. min-width:0 + flex shrink + anywhere-
       wrapping lets the header fold to multiple lines instead. Applies to
       both 5990/6166 siblings (identical duplicated rule family). */
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.info-card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Related Styles Section */
.fonts-related-section {
    border-top: 1px solid var(--border-color);
    padding-top: 2.5rem;
    margin-bottom: 2rem;
}
.related-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 1.25rem;
    color: var(--text-primary);
}
.related-styles-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}
.related-style-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}
.related-style-chip:hover {
    border-color: var(--color-brand-600);
    color: var(--color-brand-600);
    background: rgba(37, 99, 235, 0.04);
}
.related-style-chip .preview-mini {
    font-size: 1rem;
    color: var(--text-muted);
}
.related-hub-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.related-destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.destination-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.2rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.destination-card:hover {
    border-color: var(--color-brand-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.dest-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.35rem;
}
.dest-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {.fonts-hub-title {
        font-size: 1.85rem;
    }
.fonts-hub-subtitle {
        font-size: 1rem;
    }
.fonts-workstation-card {
        padding: 1rem;
    }
.workstation-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
.fonts-main-input {
        font-size: 1.1rem;
        min-height: 90px;
    }
.fonts-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
.fonts-search-box {
        min-width: 100%;
    }
.fonts-styles-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Individual Font Style Page & Workstation (/fonts/{style}/)
   Strict First Screen Rule, Dual-Pane Workstation, & Character Map
   ========================================================================== */
.font-style-page {
    padding: 1rem 0 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* 1. Header & Breadcrumbs */
.font-style-header {
    margin-bottom: 1.5rem;
}
.font-style-breadcrumbs ol {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.font-style-breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}
.font-style-breadcrumbs a:hover {
    color: var(--accent-color);
}
.breadcrumb-separator {
    color: var(--border-color);
}
.font-style-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.font-family-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.font-unicode-badge {
    display: inline-block;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.font-style-h1 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.font-style-tagline {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 800px;
    margin: 0;
}

/* 2. Subvariant Selector Tabs */
.font-variant-selector-wrap {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.font-variant-label-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.font-variant-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.font-variant-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.font-variant-tab:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.05);
}
.font-variant-tab.active {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.variant-tab-preview {
    font-family: inherit;
    opacity: 0.85;
    font-size: 0.95rem;
}

/* 3. Primary Workstation (Dual Pane) */
.font-workstation {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.font-workstation-panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.font-pane {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.font-input-pane:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.font-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--border-color);
}
.font-pane-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.font-pane-actions {
    display: flex;
    gap: 0.75rem;
}
.font-action-link {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.font-action-link:hover {
    text-decoration: underline;
}
.font-realtime-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-emerald-700);
    font-weight: 500;
}
.pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--color-success-700);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px var(--color-success-700);
}
.font-textarea-wrap {
    flex: 1;
    display: flex;
    min-height: 180px;
}
.font-style-textarea {
    width: 100%;
    padding: 1.25rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--text-primary);
    resize: none;
    outline: none;
    box-sizing: border-box;
}
.font-output-area {
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
    overflow-y: auto;
}
.font-pane-footer {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.font-counter-badge {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.font-cta-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.btn-font-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-color);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    transition: all 0.2s ease;
}
.btn-font-copy:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.btn-font-copy.btn-copied {
    background: var(--color-emerald-700);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.font-toast {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    background: var(--color-gray-800);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: var(--z-sticky-local);
}
.font-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Typographical Coverage Section */
.font-coverage-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}
.font-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.font-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.font-section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0 0;
}
.coverage-overall-pill {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(99, 102, 241, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
}
.font-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.coverage-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
}
.coverage-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}
.coverage-name {
    font-weight: 600;
    color: var(--text-primary);
}
.coverage-ratio {
    color: var(--text-secondary);
    font-weight: 500;
}
.coverage-bar-track {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.coverage-bar-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.coverage-status-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
}
.coverage-status-tag.complete {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-emerald-700);
}
.coverage-status-tag.partial {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-amber-800);
}
.coverage-status-tag.fallback {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
}
.coverage-transparency-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    line-height: 1.5;
}
.coverage-transparency-note svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--accent-color);
}

/* 5. Complete Unicode Character Map */
.font-charmap-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}
.charmap-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.charmap-count-badge {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
}
.charmap-controls-bar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.charmap-search-wrap {
    position: relative;
    width: 100%;
}
.charmap-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}
.charmap-filter-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.charmap-filter-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.charmap-chips-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.charmap-chip {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.charmap-chip:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}
.charmap-chip.active {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
    font-weight: 600;
}
.charmap-table-responsive {
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.charmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.charmap-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    padding: 0.85rem 1rem;
    text-align: left;
    font-weight: 700;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    z-index: var(--z-raised);
}
.charmap-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.charmap-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04);
}
.base-char-badge {
    display: inline-block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-weight: 600;
    font-family: monospace;
}
.styled-glyph-display {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: bold;
    color: var(--text-primary);
}
.charmap-code-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.charmap-code-link:hover {
    text-decoration: underline;
}
.charmap-code-link code {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.charmap-name-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}
.charmap-name-link:hover {
    color: var(--accent-color);
}
.exception-badge {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber-600);
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.block-badge {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.btn-charmap-copy {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-charmap-copy:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.btn-charmap-copy.copied {
    background: var(--color-emerald-700);
    color: var(--color-white);
    border-color: var(--color-emerald-700);
}

/* 6. Technical, Compatibility, and Accessibility Guides */
.font-guides-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.font-info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
}
.info-card-header {
    margin-bottom: 1rem;
}
.info-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.info-card-lead {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 1.25rem 0;
}
.tech-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}
.tech-spec-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tech-spec-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tech-spec-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tech-block-link {
    color: var(--accent-color);
    text-decoration: none;
}
.tech-block-link:hover {
    text-decoration: underline;
}
.compat-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
}
.compat-platform-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.compat-platform-icon {
    font-size: 1.6rem;
    line-height: 1;
}
.compat-platform-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.compat-platform-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}
.compat-platform-status.status-verified {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-emerald-700);
    text-transform: uppercase;
}
.compat-platform-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.a11y-examples-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.a11y-example-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.a11y-example-badge {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    text-transform: uppercase;
    flex-shrink: 0;
}
.a11y-example-badge.do-badge {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-emerald-700);
}
.a11y-example-badge.dont-badge {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger-700);
}
.a11y-example-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 7. Related Font Styles Section */
.font-related-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.font-hub-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.font-hub-link:hover {
    text-decoration: underline;
}
.font-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.font-related-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
}
.font-related-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15);
}
.related-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.related-style-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.related-card-arrow {
    color: var(--accent-color);
    font-weight: bold;
    transition: transform 0.2s ease;
}
.font-related-card:hover .related-card-arrow {
    transform: translateX(4px);
}
.related-style-sample {
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--accent-color);
    padding: 0.5rem 0;
    word-break: break-all;
}
.related-card-footer {
    display: flex;
    align-items: center;
}
.related-cta-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 8. Source & Citations Section */
.font-source-section {
    margin-top: 1.5rem;
}
.font-source-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.font-source-box svg {
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.font-source-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.2rem;
}
.font-source-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {.font-workstation-panes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {.font-style-h1 {
        font-size: 1.7rem;
    }
.font-style-textarea {
        font-size: 1.15rem;
    }
.font-section-title {
        font-size: 1.15rem;
    }
.charmap-chips-wrap {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
.charmap-chip {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   TOOLS HUB (/tools/) WORKSPACE & UTILITY STYLES
   ========================================================================== */
.tools-hub-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem 1rem;
}

/* Header */
.tools-hub-header {
    margin-bottom: 2rem;
}
.tools-header-content {
    margin-top: 1rem;
}
.tools-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    margin-bottom: 0.75rem;
}
.tools-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-brand-500);
    animation: toolsPulse 2s infinite ease-in-out;
}

@keyframes toolsPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}
.tools-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.tools-subtitle {
    font-size: 1.1rem;
    color: var(--muted-color);
    max-width: 720px;
    margin: 0;
    line-height: 1.5;
}

/* Search Bar */
.tools-search-section {
    margin: 1.5rem 0 1.75rem 0;
}
.tools-search-wrapper {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.tools-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted-color);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tools-search-icon svg {
    width: 18px;
    height: 18px;
}
.tools-search-input {
    width: 100%;
    height: 50px;
    padding: 0 4.5rem 0 2.85rem;
    font-size: 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-raised);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.tools-search-input:focus {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.tools-search-clear {
    position: absolute;
    right: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.35rem;
    cursor: pointer;
    color: var(--muted-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.tools-search-clear:hover {
    color: var(--text-primary);
}
.tools-search-clear svg {
    width: 16px;
    height: 16px;
}
.tools-search-shortcut {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-color);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    pointer-events: none;
}

/* Category Filter Tabs */
.tools-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2.25rem;
}
.tools-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tools-filter-pill:hover {
    border-color: var(--color-brand-300);
    color: var(--color-brand-700);
}
.tools-filter-pill.active {
    background: var(--color-brand-500);
    color: var(--color-white);
    border-color: var(--color-brand-500);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.tools-pill-count {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
}
.tools-filter-pill.active .tools-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

/* Featured Tools Section */
.tools-featured-section {
    margin-bottom: 2.5rem;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.6) 0%, rgba(248, 250, 252, 0) 100%);
    border: 1px solid rgba(191, 219, 254, 0.6);
    border-radius: 16px;
    padding: 1.5rem;
}
.tools-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.tools-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.tools-section-icon {
    color: var(--color-warning-700);
    font-size: 1.1rem;
}
.tools-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.tools-featured-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tools-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.1);
    border-color: var(--color-brand-300);
}
.tools-featured-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.tools-featured-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-brand-50);
    color: var(--color-brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tools-featured-svg {
    width: 20px;
    height: 20px;
}
.tools-featured-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--color-amber-100);
    color: var(--color-amber-700);
}
.tools-featured-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}
.tools-featured-desc {
    font-size: 0.85rem;
    color: var(--muted-color);
    line-height: 1.4;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}
.tools-featured-action {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-500);
    margin-top: auto;
}
.tools-arrow-svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}
.tools-featured-card:hover .tools-arrow-svg {
    transform: translateX(3px);
}

/* Category Sections & Directory */
.tools-category-section {
    margin-bottom: 2.75rem;
}
.tools-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}
.tools-category-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    min-width: 0;
}
.tools-category-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tools-category-svg {
    width: 22px;
    height: 22px;
}
.tools-category-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
}
.tools-category-desc {
    font-size: 0.875rem;
    color: var(--muted-color);
    margin: 0;
}
.tools-category-count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-color);
    background: var(--bg-muted);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* Tool Grid & Cards */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.tool-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--color-brand-500);
}
.tool-card-link {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    height: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}
.tool-card-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-subtle);
    color: var(--color-brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}
.tool-card-svg {
    width: 20px;
    height: 20px;
}
/* Round 53 (R40 triage): defensive size for the ToolHubService::getIconSvg()
 * default class — callers that omit an explicit class previously emitted
 * attribute-less SVGs that blew up to container width (377px observed on
 * /tools/<slug>/ related-tools). Mirrors .tool-card-svg sizing. */
.tool-icon-svg {
    width: 20px;
    height: 20px;
}
.tool-card-cat-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: var(--bg-muted);
    color: var(--muted-color);
}
.tool-card-title {
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}
.tool-card-desc {
    font-size: 0.875rem;
    color: var(--muted-color);
    line-height: 1.45;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}
.tool-card-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-500);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
}
.tool-card-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}
.tool-card:hover .tool-card-arrow {
    transform: translateX(3px);
}

/* Zero State */
.tools-zero-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    margin: 2rem 0;
}
.tools-zero-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem auto;
    color: var(--muted-color);
}
.tools-zero-icon svg {
    width: 48px;
    height: 48px;
}
.tools-zero-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}
.tools-zero-desc {
    font-size: 0.95rem;
    color: var(--muted-color);
    max-width: 440px;
    margin: 0 auto 1.5rem auto;
}
.tools-zero-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    background: var(--color-brand-500);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.tools-zero-btn:hover {
    background: var(--color-brand-600);
}

/* Recently Used */
.tools-recent-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.tools-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Privacy Note */
.tools-privacy-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    margin-top: 3rem;
}
.tools-privacy-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-emerald-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tools-privacy-svg {
    width: 20px;
    height: 20px;
}
.tools-privacy-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}
.tools-privacy-body {
    font-size: 0.85rem;
    color: var(--muted-color);
    line-height: 1.45;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {.tools-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {.tools-title {
        font-size: 1.85rem;
    }
.tools-subtitle {
        font-size: 1rem;
    }
.tools-search-input {
        height: 46px;
        font-size: 0.95rem;
    }
.tools-filter-bar {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
.tools-filter-pill {
        flex-shrink: 0;
    }
.tools-category-header {
        flex-direction: column;
        gap: 0.5rem;
    }
.tools-grid {
        grid-template-columns: 1fr;
    }
.tools-featured-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   INDIVIDUAL TOOL PAGES (/tools/{tool}/) WORKSTATION STYLES
   ========================================================================== */
.tool-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}
.tool-page-header {
    margin-bottom: 1.5rem;
}
.tool-page-breadcrumbs {
    margin-bottom: 0.75rem;
}
.tool-meta-badges {
    display: flex;
    flex-wrap: wrap; /* Round 62: pills stacked instead of overflowing @240px */
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.tool-cat-pill {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand-600);
    background: rgba(37, 99, 235, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}
.tool-privacy-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-emerald-700);
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}
.tool-page-h1 {
    font-size: 2.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}
.tool-page-intro {
    font-size: 1.05rem;
    color: var(--muted-color);
    line-height: 1.5;
    margin: 0;
    max-width: 800px;
}
.tool-workspace {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);
}
.tool-workspace-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.tool-workspace-col--main {
    flex: 1;
}
.tool-workspace-col--side {
    width: 100%;
}
/* Round 62 (user-reported responsive defect): tool detail workspaces overflowed
 * at 240-375px (unicode-inspector 96px @375, unicode-encoder 27px @320) via
 * three compounding roots: (a) grid/flex children with implicit min-width:auto
 * refused to shrink below content; (b) the radio-pill option groups never
 * wrapped; (c) the 5-column inspector table had no scroll wrapper. Fixes follow
 * the established mobile table/tab pattern (overflow-x: auto). */
.tool-workspace-col {
    min-width: 0;
}
.tool-option-group {
    flex-wrap: wrap;
    min-width: 0;
}
.tool-table-output {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tool-table-output .tool-inspect-table {
    min-width: 320px;
}
.tool-workspace-stacked {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.tool-pane {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tool-pane-header {
    display: flex;
    flex-wrap: wrap; /* Round 62: allow meta cluster to stack @240px */
    justify-content: space-between;
    align-items: center;
    min-height: 28px;
}
.tool-pane-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tool-pane-meta {
    display: flex;
    flex-wrap: wrap; /* Round 62: badge + action buttons stack @240px */
    align-items: center;
    gap: 0.5rem;
}
.tool-char-badge {
    font-size: 0.75rem;
    color: var(--muted-color);
    background: var(--bg-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.tool-btn-text {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}
.tool-btn-text:hover {
    color: var(--color-brand-600);
    background: rgba(37, 99, 235, 0.05);
}
.tool-textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-family: var(--font-mono);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-raised);
    resize: vertical;
    min-height: 180px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tool-textarea:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.tool-textarea--output {
    background: var(--bg-subtle);
}
.tool-input-single {
    width: 100%;
    height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 0.85rem;
    font-size: 1rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--bg-raised);
    box-sizing: border-box;
}
.tool-input-single:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.tool-input-single--output {
    background: var(--bg-subtle);
}
.tool-options-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-color);
}
.tool-option-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tool-option-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tool-select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-raised);
    cursor: pointer;
    max-width: 100%; /* Round 62: native select sized to longest option (351px) and blew out 240px viewports */
    min-width: 0;
}
.tool-radio-pills {
    display: inline-flex;
    flex-wrap: wrap; /* Round 62: long ES6/UTF-16 labels stack @240px */
    background: var(--bg-muted);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.tool-radio-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-color);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    user-select: none;
}
.tool-radio-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tool-radio-pill.active {
    background: var(--color-white);
    color: var(--color-brand-600);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.tool-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}
.tool-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tool-action-bar-left,
.tool-action-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.tool-btn--primary {
    background: var(--color-brand-600);
    color: var(--color-white);
}
.tool-btn--primary:hover {
    background: var(--color-brand-700);
}
.tool-btn--secondary {
    background: var(--color-white);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.tool-btn--secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--color-slate-400);
}
.tool-btn--text {
    background: none;
    border-color: transparent;
    color: var(--muted-color);
}
.tool-btn--text:hover {
    color: var(--text-primary);
    background: var(--bg-muted);
}
.tool-copied {
    background: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
    border-color: var(--color-emerald-700) !important;
}

/* Statistics Panel */
.tool-stats-panel {
    padding: 0.5rem 0;
}
.tool-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}
.tool-stat-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tool-stat-card--highlight {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.25);
}
.tool-stat-number {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}
.tool-stat-card--highlight .tool-stat-number {
    color: var(--color-brand-600);
}
.tool-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tool-stat-sublabel {
    font-size: 0.675rem;
    color: var(--muted-color);
}

/* Multi Result Cards */
.tool-multi-grid {
    display: grid;
    /* Round 59 (320px residual): 260px floor overflowed 320px phones by 5px. */
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.tool-multi-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tool-multi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.tool-multi-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-color);
}
.tool-btn-copy-small {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.tool-btn-copy-small:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
}
.tool-multi-card-body {
    font-size: 0.95rem;
    font-family: var(--font-mono);
    line-height: 1.4;
    color: var(--text-primary);
    word-break: break-all;
    min-height: 24px;
}
.tool-multi-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--muted-color);
    font-size: 0.95rem;
}

/* Invisible Character Cards Grid */
.inv-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.inv-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.inv-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}
.inv-code {
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--color-brand-600);
    margin-bottom: 0.6rem;
}
.inv-desc {
    font-size: 0.875rem;
    color: var(--muted-color);
    line-height: 1.45;
    margin-bottom: 1rem;
}

/* Character Map */
.char-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}
.char-map-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.char-map-btn:hover {
    border-color: var(--color-brand-600);
    background: rgba(37, 99, 235, 0.05);
    transform: translateY(-1px);
}
.char-map-glyph {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 2px;
}
.char-map-code {
    font-size: 0.65rem;
    color: var(--muted-color);
    font-family: monospace;
}

/* Supporting Sections */
.tool-section {
    margin-bottom: 2rem;
}
.tool-section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}
.tool-instructions-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.tool-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 0.75rem;
}
.tool-example-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tool-example-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-color);
}
.tool-example-code {
    font-size: 0.875rem;
    font-family: var(--font-mono);
    color: var(--color-brand-600);
    word-break: break-all;
}
.tool-tech-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.tool-tech-note-item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.tool-tech-note-icon {
    color: var(--color-brand-600);
    flex-shrink: 0;
    margin-top: 2px;
}
.tool-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
}
.tool-privacy-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
}
.tool-privacy-icon-wrap {
    color: var(--color-success-700);
    flex-shrink: 0;
}
.tool-privacy-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}
.tool-privacy-text p {
    font-size: 0.85rem;
    color: var(--muted-color);
    line-height: 1.45;
    margin: 0;
}
.tool-inspect-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem;
}
.tool-inspect-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted-color);
}
.tool-inspect-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.inspect-glyph {
    font-size: 1.25rem;
    font-weight: 700;
}
.inspect-hex {
    font-family: monospace;
    color: var(--color-brand-600);
    font-weight: 600;
}

/* Tool Responsive Workstation */
@media (max-width: 900px) {.tool-workspace-split {
        grid-template-columns: 1fr;
    }
.tool-page-h1 {
        font-size: 1.85rem;
    }
}

/* ==========================================================================
   Keyboard Shortcuts Hub (/keyboard-shortcuts/)
   ========================================================================== */
.kb-hub-wrapper {
    width: 100%;
    background: var(--bg-page);
    color: var(--text-primary);
    padding: 1.5rem 1rem 4rem;
}
.kb-hub-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumbs */
.kb-breadcrumbs {
    margin-bottom: 1rem;
}
.kb-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.kb-breadcrumb-item a {
    color: var(--color-brand-600);
    text-decoration: none;
}
.kb-breadcrumb-item a:hover {
    text-decoration: underline;
}
.kb-breadcrumb-separator {
    margin-left: 0.5rem;
    color: var(--border-color);
}
.kb-breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Header */
.kb-hub-header {
    margin-bottom: 2rem;
}
.kb-hub-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.025em;
}
.kb-hub-intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0;
}

/* Platform Cards Grid */
.kb-platform-section {
    margin-bottom: 2.5rem;
}
.kb-platform-grid {
    display: grid;
    /* Round 62: minmax(0,·) — plain 1fr tracks sized to content min-content
     * (199px cards in a 160px container, 38px page overflow @240) */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.kb-platform-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kb-platform-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--color-brand-600);
}
.kb-platform-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}
.kb-platform-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate-100);
    color: var(--color-slate-700);
    flex-shrink: 0;
}
.kb-platform-card--windows .kb-platform-icon-wrap {
    background: var(--color-brand-50);
    color: var(--color-os-windows);
}
.kb-platform-card--mac .kb-platform-icon-wrap {
    background: var(--color-slate-50);
    color: var(--color-slate-800);
}
.kb-platform-card--linux .kb-platform-icon-wrap {
    background: var(--color-yellow-50);
    color: var(--color-yellow-600);
}
.kb-platform-icon-svg {
    width: 24px;
    height: 24px;
}
.kb-platform-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.kb-platform-version-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.125rem;
}
.kb-platform-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    flex-grow: 1;
}
.kb-platform-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}
.kb-method-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}
.kb-platform-footer {
    margin-top: auto;
}
.kb-platform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--color-slate-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-slate-200);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kb-platform-btn:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
}
.kb-btn-arrow {
    transition: transform 0.15s ease;
}
.kb-platform-btn:hover .kb-btn-arrow {
    transform: translateX(3px);
}

/* Search Section */
.kb-search-section {
    margin-bottom: 2.5rem;
}
.kb-search-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.kb-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.kb-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--color-slate-500);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.kb-search-input {
    width: 100%;
    padding: 0.875rem 3.5rem 0.875rem 2.875rem;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.kb-search-input:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.kb-search-clear {
    position: absolute;
    right: 3rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-slate-500);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.kb-search-clear:hover {
    color: var(--color-slate-600);
    background: var(--color-slate-100);
}
.kb-search-shortcut-badge {
    position: absolute;
    right: 1rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    pointer-events: none;
    user-select: none;
}

/* Platform Filter Tabs */
.kb-filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.kb-filter-tab {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    color: var(--color-slate-600);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.45rem 0.875rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.kb-filter-tab:hover {
    background: var(--color-slate-100);
    border-color: var(--color-slate-400);
    color: var(--color-slate-900);
}
.kb-filter-tab.is-active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}
.kb-search-status {
    font-size: 0.875rem;
    color: var(--color-slate-500);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Shortcuts Section */
.kb-shortcuts-section {
    margin-bottom: 3rem;
}
.kb-section-header {
    margin-bottom: 1.25rem;
}
.kb-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem;
}
.kb-section-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

/* Category Filter Chips */
.kb-category-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    scrollbar-width: thin;
}
.kb-cat-btn {
    white-space: nowrap;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-600);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.kb-cat-btn:hover {
    background: var(--color-slate-100);
    color: var(--color-slate-900);
}
.kb-cat-btn.is-active {
    background: var(--color-slate-900);
    border-color: var(--color-slate-900);
    color: var(--color-white);
}

/* Shortcuts Table */
.kb-category-group {
    margin-bottom: 2rem;
}
.kb-category-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-slate-200);
}
.kb-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    background: var(--bg-raised);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.kb-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}
.kb-shortcuts-table th,
.kb-shortcuts-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-slate-100);
    vertical-align: middle;
}
.kb-shortcuts-table thead th {
    background: var(--color-slate-50);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    border-bottom: 2px solid var(--color-slate-200);
}
.kb-char-glyph {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    color: var(--color-slate-900);
}
.kb-entity-name {
    font-weight: 600;
    color: var(--color-slate-900);
    text-decoration: none;
    display: block;
}
.kb-entity-name:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}
.kb-codepoint-badge {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-slate-500);
    background: var(--color-slate-100);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 0.125rem;
}

.kb-keystroke-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.kb-keycaps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.kb-req-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    width: fit-content;
}
.kb-req-win {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
}
.kb-req-mac {
    background: var(--color-slate-50);
    color: var(--color-slate-700);
    border: 1px solid var(--color-slate-300);
}
.kb-req-lin {
    background: var(--color-yellow-50);
    color: var(--color-amber-900);
    border: 1px solid var(--color-yellow-200);
}
.kb-alt-hint {
    font-size: 0.75rem;
    color: var(--color-slate-500);
}

/* Copy Action Button */
.kb-copy-btn {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-300);
    color: var(--color-slate-700);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.kb-copy-btn:hover {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}
.kb-copy-btn.is-copied {
    background: var(--color-emerald-700) !important;
    border-color: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
}

/* Mobile Cards (Hidden by default on desktop) */
.kb-mobile-cards {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}
.kb-mobile-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kb-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-slate-100);
}
.kb-card-char {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-slate-900);
    min-width: 2.25rem;
    text-align: center;
}
.kb-card-title-wrap {
    flex-grow: 1;
}
.kb-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-slate-900);
}
.kb-card-cp {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-slate-500);
}
.kb-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kb-card-os-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}
.kb-card-os-label {
    font-weight: 700;
    min-width: 65px;
    color: var(--color-slate-600);
}
.kb-card-keys {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Input Methods Grid */
.kb-methods-section {
    margin-bottom: 3rem;
}
.kb-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: 1.25rem;
}
.kb-method-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.kb-method-card.is-app-specific {
    border-left: 4px solid var(--color-warning-700);
}
.kb-method-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.kb-method-platform {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.kb-platform-pill--windows {
    background: var(--color-brand-50);
    color: var(--color-os-windows);
}
.kb-platform-pill--mac {
    background: var(--color-slate-50);
    color: var(--color-slate-800);
}
.kb-platform-pill--linux {
    background: var(--color-yellow-50);
    color: var(--color-yellow-600);
}
.kb-method-scope {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.kb-scope-system {
    background: var(--color-success-50);
    color: var(--color-green-800);
}
.kb-scope-warning {
    background: var(--color-warning-50);
    color: var(--color-amber-700);
}
.kb-method-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-slate-900);
}
.kb-method-desc {
    font-size: 0.875rem;
    color: var(--color-slate-600);
    line-height: 1.5;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.kb-method-syntax {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}
.kb-syntax-label {
    font-weight: 600;
    color: var(--color-slate-500);
    margin-right: 0.375rem;
}
.kb-syntax-code {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
}
.kb-method-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}
.kb-req-chip {
    font-size: 0.6875rem;
    font-weight: 500;
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.kb-method-status {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--color-emerald-700);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.kb-status-verified {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Popular Characters Grid */
.kb-popular-section {
    margin-bottom: 3rem;
}
.kb-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 0.75rem;
}
.kb-popular-cell {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.kb-popular-cell:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-600);
}
.kb-popular-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.kb-popular-glyph {
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--color-slate-900);
    font-weight: 700;
}
.kb-popular-action-hint {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand-600);
    margin-top: 0.25rem;
    opacity: 0.9;
}
.kb-popular-meta {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-slate-100);
    width: 100%;
}
.kb-popular-link {
    text-decoration: none;
    display: block;
}
.kb-popular-name {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-slate-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-popular-cp {
    display: block;
    font-size: 0.625rem;
    font-family: var(--font-mono);
    color: var(--color-slate-500);
}

/* Caveats Grid */
.kb-caveats-section {
    margin-bottom: 3rem;
}
.kb-caveats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.kb-caveat-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-left: 4px solid var(--color-brand-600);
    border-radius: 8px;
    padding: 1.25rem;
}
.kb-caveat-card--numpad {
    border-left-color: var(--color-os-windows);
}
.kb-caveat-card--office {
    border-left-color: var(--color-warning-700);
}
.kb-caveat-card--layout {
    border-left-color: var(--color-slate-500);
}
.kb-caveat-card--linux {
    border-left-color: var(--color-yellow-600);
}
.kb-caveat-header {
    margin-bottom: 0.5rem;
}
.kb-caveat-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-slate-500);
    margin-bottom: 0.25rem;
}
.kb-caveat-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0;
}
.kb-caveat-content {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-slate-600);
    margin: 0;
}

/* Related Guides Section */
.kb-guides-section {
    margin-bottom: 1rem;
}
.kb-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
    gap: 1rem;
}
.kb-guide-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.kb-guide-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-600);
}
.kb-guide-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--color-slate-100);
    color: var(--color-brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kb-guide-card-text {
    flex-grow: 1;
}
.kb-guide-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.25rem;
}
.kb-guide-desc {
    font-size: 0.8125rem;
    color: var(--color-slate-500);
    margin: 0;
    line-height: 1.4;
}
.kb-guide-action {
    color: var(--color-slate-500);
    font-size: 1.25rem;
    font-weight: 700;
}
.kb-guide-card:hover .kb-guide-action {
    color: var(--color-brand-600);
}

/* Empty State */
.kb-no-results {
    padding: 3rem 1rem;
    text-align: center;
    background: var(--color-slate-50);
    border: 1px dashed var(--color-slate-300);
    border-radius: 10px;
    margin: 1rem 0;
}
.kb-no-results-msg {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin: 0 0 0.5rem;
}
.kb-no-results-hint {
    font-size: 0.875rem;
    color: var(--color-slate-500);
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {.kb-platform-grid {
        grid-template-columns: minmax(0, 1fr);
    }
.kb-caveats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {.kb-table-wrapper {
        display: none;
    }
.kb-mobile-cards {
        display: flex;
    }
.kb-hub-title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Windows Keyboard Shortcuts & Alt Codes Master Hub (/keyboard-shortcuts/windows/)
   ========================================================================== */
.win-shortcuts-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    color: var(--color-slate-800);
}

/* Header & Hero */
.win-badge-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.win-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-200);
}

/* Metrics Strip */

/* Section Header Shared */
.win-section-header {
    margin-bottom: 1.5rem;
}
.win-section-pretitle {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-brand-600);
    margin-bottom: 0.25rem;
}
.win-section-title {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.win-section-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Method Selector Grid */
.win-method-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.win-method-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-500);
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.12);
}
.win-method-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

/* Search and Filters */
.win-search-wrapper {
    position: relative;
    margin-bottom: 1.25rem;
}
.win-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-slate-500);
    pointer-events: none;
    display: flex;
}
.win-search-input {
    width: 100%;
    height: 48px;
    padding: 0.75rem 2.5rem 0.75rem 2.85rem;
    font-size: 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-raised);
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.win-search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.win-search-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-slate-500);
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.win-search-clear:hover {
    color: var(--color-slate-600);
}
/* Round 62 (user-reported design defect): the quick-search hints row had NO
 * rules at all — .win-search-meta / .win-search-hints / .win-hint-label all
 * rendered with margin 0, so the chips sat flush under the input as one
 * cramped block, and the label ran at full 16px body weight. Established a
 * proper rhythm: chips grouped tightly under the bar, label downsized, and
 * chip affordance made explicit via the accent token family (was: plain
 * white pills that read as disabled tags). Colors derive from
 * --accent-color / --accent-rgb tokens per the Round 61 schema mandate. */
.win-search-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.win-search-hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.win-hint-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.win-results-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
/* Round 53 (R40 triage): quick-search preset chips previously rendered as raw
 * UA-default buttons (gray background, outset border, zero padding). Styled
 * to match the site chip language (.charmap-chip / .jump-chip).
 * Round 62: accent-tinted so they read as actions, not disabled tags. */
.win-search-chip {
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    color: var(--text-primary);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.win-search-chip:hover,
.win-search-chip:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.1);
}
.win-search-chip:active {
    background: rgba(var(--accent-rgb), 0.16);
}
.win-search-chip:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
/* Round 53 (R40 triage): the Windows emoji-panel mockup illustration
 * (emoji-panel-guide.php) previously had NO rules for its 13-class family —
 * the "panel preview" rendered as plain stacked text lines instead of a
 * window-like card (VLM-verified: no border, no dots, no chips, no grid). */
.win-panel-mockup {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
.win-mockup-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.win-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-slate-200);
    flex-shrink: 0;
}
.win-mockup-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-color);
    margin-left: auto;
}
.win-mockup-tabs {
    display: flex;
    /* Round 59 (59-C): tabs carry white-space:nowrap; without wrap the row
       overflows the mockup by 7px at 375px (page-level scroll). Wrapping only
       engages when the row actually overflows — desktop rendering unchanged. */
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.75rem 0 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.win-mockup-tab {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted-color);
    padding: 0.3rem 0.7rem;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.win-mockup-tab.is-active {
    color: var(--color-brand-800);
    border-bottom-color: var(--color-brand-600);
    font-weight: 600;
}
.win-mockup-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 0;
}
.win-pill {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}
.win-pill.is-active {
    background: var(--color-brand-50);
    border-color: var(--color-brand-200);
    color: var(--color-brand-800);
    font-weight: 600;
}
.win-mockup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 0.4rem;
    padding: 0.25rem 0 0.75rem;
}
.win-mock-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    font-size: 1.05rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.win-mockup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.win-mock-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.win-mock-hint {
    font-size: 0.75rem;
    color: var(--muted-color);
}
.win-kbd-xs {
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
    box-shadow: 0 1px 0 var(--color-slate-400);
}
.win-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.win-cat-tab:hover {
    background: var(--color-slate-200);
    color: var(--color-slate-900);
}
.win-cat-tab.active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}

/* Master Alt Code Table */
.win-alt-table-group {
    margin-bottom: 3rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.win-group-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.win-group-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}
.win-table-responsive {
    overflow-x: auto;
}
.win-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    text-align: left;
}
.win-data-table th {
    background: var(--bg-muted);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-slate-600);
    border-bottom: 1px solid var(--border-color);
}
.win-data-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.win-alt-row:hover td {
    background: rgba(37, 99, 235, 0.03);
}

/* Keycap styling */
.win-kbd {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-slate-700);
    background-color: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 5px;
    box-shadow: 0 2px 0 var(--color-slate-400);
    white-space: nowrap;
}
.win-plus {
    color: var(--color-slate-400);
    margin: 0 0.15rem;
    font-weight: 400;
}
.win-char-sample {
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    min-width: 2.25rem;
    text-align: center;
    line-height: 1;
    color: var(--text-primary);
    font-family: 'Segoe UI Symbol', 'Segoe UI', system-ui, sans-serif;
}
.win-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-raised);
    color: var(--color-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}
.win-copy-btn:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
    color: var(--color-brand-700);
}
.win-copy-btn.win-copied {
    background: var(--color-emerald-700) !important;
    border-color: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
}

/* Zero state */
.win-zero-state {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin-bottom: 3rem;
}

/* Guides & Instructional Cards */
.win-guide-section {
    margin-bottom: 3.5rem;
    padding-top: 1rem;
}
.win-guide-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

/* Callout Box */
.win-callout-warning {
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    color: var(--color-amber-800);
}
.win-callout-info {
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    color: var(--color-brand-800);
}
.win-callout-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.win-callout-content strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.win-callout-content p {
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.45;
}

/* Feature Two-Col Grid */

/* Accordions (Troubleshooting & FAQ) */
.win-troubleshooting-section,
.win-faq-section {
    margin-bottom: 3.5rem;
}
.win-trouble-accordion,
.win-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.win-trouble-item,
.win-faq-item {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.win-trouble-item[open],
.win-faq-item[open] {
    border-color: var(--color-brand-300);
}
.win-trouble-summary,
.win-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
    list-style: none;
}
.win-trouble-summary::-webkit-details-marker,
.win-faq-question::-webkit-details-marker {
    display: none;
}
.win-trouble-summary {
    gap: 0.875rem;
}
.win-trouble-icon {
    color: var(--color-amber-600);
    flex-shrink: 0;
    display: flex;
}
.win-trouble-title {
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 700;
}
.win-trouble-chevron,
.win-faq-chevron {
    color: var(--color-slate-400);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    display: flex;
}
details[open] > summary .win-trouble-chevron,
details[open] > summary .win-faq-chevron {
    transform: rotate(180deg);
    color: var(--color-brand-600);
}
.win-trouble-body {
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
}
.win-trouble-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.win-trouble-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.win-label-cause {
    background: var(--color-danger-50);
    color: var(--color-red-800);
}
.win-label-solution {
    background: var(--color-success-50);
    color: var(--color-green-800);
}
.win-trouble-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}
.win-faq-q-text {
    font-size: 1.0625rem;
    font-weight: 700;
    flex-grow: 1;
    padding-right: 1rem;
}
.win-faq-answer {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.win-faq-answer p {
    margin: 0;
}

/* Dark Mode Overrides */

/* Responsive Breakpoints */
@media (max-width: 768px) {.win-guide-card {
        padding: 1.25rem;
    }
.win-data-table th,
.win-data-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8125rem;
    }
.win-char-sample {
        font-size: 1.25rem;
        min-width: 1.75rem;
    }
.win-kbd {
        font-size: 0.75rem;
        padding: 0.15rem 0.35rem;
    }
}

/* ==========================================================================
   macOS Keyboard Shortcuts & Special Characters Hub (/keyboard-shortcuts/mac/)
   ========================================================================== */
.mac-shortcuts-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    color: var(--color-slate-800);
}
.mac-hub-header {
    margin-bottom: 2.5rem;
    padding: 2.5rem 2rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}
.mac-badge-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.mac-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-200);
}
.mac-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--color-success-50);
    color: var(--color-green-600);
    border: 1px solid var(--color-green-200);
}
.mac-hub-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.mac-hub-intro {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 960px;
    margin: 0 0 2rem;
}
.mac-jump-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.mac-jump-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.mac-jump-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mac-jump-link {
    display: inline-flex;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.mac-jump-link:hover {
    color: var(--color-brand-600);
    border-color: var(--color-brand-300);
    background: var(--color-brand-50);
}
.mac-methods-section {
    margin-bottom: 3rem;
}
.mac-section-header {
    margin-bottom: 1.5rem;
}
.mac-section-title {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.mac-section-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.mac-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.mac-method-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mac-method-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-500);
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.12);
}
.mac-method-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}
.mac-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-200);
    flex-shrink: 0;
}
.mac-method-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.mac-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-300);
}
.mac-badge-scope {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border-color: var(--color-brand-200);
}
.mac-badge-layout-dep {
    background: var(--color-warning-50);
    color: var(--color-amber-700);
    border-color: var(--color-amber-200);
}
.mac-badge-fallback {
    background: var(--color-slate-50);
    color: var(--color-slate-500);
    border-color: var(--color-slate-200);
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
}
.mac-badge-option {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border-color: var(--color-brand-300);
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}
.mac-badge-shift {
    background: var(--color-fuchsia-50);
    color: var(--color-fuchsia-800);
    border-color: var(--color-fuchsia-200);
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}
.mac-badge-speed {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
    border-color: var(--color-emerald-300);
}
.mac-badge-visual {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-color: var(--color-sky-200);
}
.mac-badge-system {
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border-color: var(--color-brand-200);
}
.mac-method-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.mac-method-summary {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
    flex-grow: 1;
}
.mac-method-req-box {
    padding: 0.625rem 0.75rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}
.mac-req-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.15rem;
}
.mac-req-value {
    color: var(--text-muted);
}
.mac-method-footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.mac-method-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
    transition: gap 0.2s ease;
}
.mac-method-action-link:hover {
    gap: 0.625rem;
    text-decoration: underline;
}
.mac-filter-section {
    margin-bottom: 2.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mac-search-wrapper {
    margin-bottom: 1.25rem;
}
.mac-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
}
.mac-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.mac-search-input {
    width: 100%;
    padding: 0.875rem 2.75rem 0.875rem 3rem;
    font-size: 1rem;
    font-weight: 500;
    background: var(--bg-subtle);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mac-search-input:focus {
    background: var(--color-white);
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.mac-search-clear {
    position: absolute;
    right: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-slate-500);
    background: var(--color-slate-200);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
}
.mac-search-clear:hover {
    background: var(--color-slate-300);
    color: var(--color-slate-900);
}
.mac-search-hint {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.mac-layout-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.mac-layout-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.mac-layout-pills {
    display: flex;
    flex-wrap: wrap; /* Round 62: layout pills stacked instead of overflowing @240px */
    gap: 0.5rem;
}
.mac-layout-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 9999px;
    color: var(--color-slate-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.mac-layout-pill:hover {
    border-color: var(--color-slate-400);
    color: var(--color-slate-900);
}
.mac-layout-pill.active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.mac-layout-pill-badge {
    font-size: 0.6875rem;
    opacity: 0.85;
}
.mac-layout-info {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.mac-cat-tabs-wrapper {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}
.mac-cat-tabs {
    display: flex;
    gap: 0.5rem;
}
.mac-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.mac-cat-tab:hover {
    color: var(--text-primary);
    background: var(--color-white);
    border-color: var(--color-slate-300);
}
.mac-cat-tab.active {
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border-color: var(--color-brand-300);
}
.mac-tab-count {
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    border-radius: 9999px;
    background: var(--color-slate-200);
    color: var(--color-slate-600);
}
.mac-cat-tab.active .mac-tab-count {
    background: var(--color-brand-100);
    color: var(--color-brand-700);
}
.mac-popular-section,
.mac-directory-section {
    margin-bottom: 3rem;
}
.mac-table-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mac-table-responsive {
    overflow-x: auto;
}
.mac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}
.mac-table thead {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
}
.mac-table th {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.mac-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.mac-row:hover td {
    background: var(--color-slate-50);
}
.td-char {
    width: 60px;
    text-align: center;
}
.mac-glyph-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.mac-glyph {
    font-size: 1.75rem;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
}
.td-name {
    min-width: 160px;
}
.mac-name-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
}
.mac-name-link:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}
.mac-aliases {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.mac-codepoint {
    font-family: monospace;
    font-size: 0.8125rem;
    padding: 0.2rem 0.4rem;
    background: var(--bg-muted);
    border-radius: 4px;
    color: var(--color-slate-600);
}
.td-shortcut {
    min-width: 180px;
}
.mac-keys-display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.mac-keycap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-800);
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-bottom: 2px solid var(--color-slate-400);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}
.mac-key-glyph {
    font-weight: 700;
    color: var(--color-slate-600);
}
.key-sep {
    color: var(--color-slate-400);
    font-weight: 600;
    font-size: 0.8125rem;
}
.key-arrow {
    color: var(--color-brand-600);
    font-weight: 700;
    margin: 0 0.2rem;
}
.td-verbal {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    min-width: 180px;
}
.td-action {
    width: 80px;
    text-align: right;
}
.mac-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mac-copy-btn:hover {
    background: var(--color-brand-100);
    border-color: var(--color-brand-300);
    color: var(--color-brand-700);
}
.mac-copy-btn.copied {
    background: var(--color-success-50);
    border-color: var(--color-green-300);
    color: var(--color-green-600);
}
.mac-cat-group {
    margin-bottom: 2.5rem;
}
.mac-cat-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.mac-cat-group-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.mac-cat-group-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}
.mac-cat-group-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.mac-zero-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    margin-bottom: 2rem;
}
.mac-zero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    margin-bottom: 1rem;
}
.mac-zero-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.mac-zero-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}
.mac-query-highlight {
    font-weight: 700;
    color: var(--text-primary);
}
.mac-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-brand-600);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mac-btn-primary:hover {
    background: var(--color-brand-700);
}
.mac-guide-section {
    margin-bottom: 3rem;
}
.mac-guide-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mac-guide-grid {
    display: grid;
    /* Round 62: minmax(0,·) — plain 1fr tracks blew out to content min-content @240 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
}
.mac-guide-subtitle {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
}
.mac-guide-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}
.mac-shortcut-callout {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.mac-callout-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.mac-callout-badge {
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--color-brand-100);
    color: var(--color-brand-800);
    border-radius: 4px;
}
.mac-callout-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.mac-callout-keys {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.mac-menu-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--color-brand-800);
    margin-top: 1rem;
}
.mac-config-box {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.mac-config-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.mac-config-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mac-config-list li {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.mac-config-list li:last-child {
    border-bottom: none;
}
.mac-config-opt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-brand-600);
}
.mac-config-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.mac-search-feature-box {
    padding: 1rem;
    background: var(--color-fuchsia-50);
    border: 1px solid var(--color-fuchsia-200);
    border-radius: 10px;
}
.mac-feature-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-fuchsia-800);
    margin: 0 0 0.35rem;
}
.mac-feature-desc {
    font-size: 0.8125rem;
    color: var(--color-fuchsia-900);
    margin: 0 0 0.5rem;
}
.mac-feature-bullets {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-fuchsia-900);
}
.mac-kv-layout {
    display: grid;
    /* Round 62: minmax(0,·) — same auto-min blowout fix */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
}
.mac-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mac-step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.mac-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--color-brand-600);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mac-step-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-slate-800);
}
.mac-kv-card {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.mac-kv-card-header {
    margin-bottom: 0.5rem;
}
.mac-kv-card-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}
.mac-kv-dead-key-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-100);
    border-radius: 10px;
}
.mac-alert-icon {
    color: var(--color-orange-600);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.mac-alert-content strong {
    color: var(--color-orange-700);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}
.mac-alert-content p {
    font-size: 0.8125rem;
    color: var(--color-orange-800);
    margin: 0;
    line-height: 1.4;
}
.mac-card-badge-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.mac-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.mac-card-intro {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.mac-dead-keys-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}
.mac-dead-table th {
    font-size: 0.75rem;
}
.mac-accent-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.mac-accent-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
}
.key-sm {
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
}
.mac-example-code {
    font-size: 0.8125rem;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.mac-capital-accent-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--color-brand-800);
}
.mac-mt-4 {
    margin-top: 1.5rem;
}
.mac-pah-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.mac-pah-box {
    padding: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.mac-pah-header {
    margin-bottom: 0.75rem;
}
.mac-pah-key {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.mac-pah-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.mac-pah-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    font-size: 0.8125rem;
}
.mac-pah-num {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-brand-600);
}
.mac-pah-char {
    font-weight: 700;
    color: var(--color-slate-900);
}
.mac-terminal-caveat {
    padding: 0.875rem 1rem;
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--color-amber-800);
}
.mac-input-source-grid,
.mac-uhex-grid {
    display: grid;
    /* Round 62: minmax(0,·) — same auto-min blowout fix */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
}
.mac-is-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mac-is-item {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.mac-is-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.mac-is-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.mac-is-keys {
    display: flex;
    flex-wrap: wrap; /* Round 62: Control+Space keycap sequences overflowed 240px columns */
    align-items: center;
    gap: 0.35rem;
}
.mac-globe-switch-box {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.mac-substeps-list {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}
.mac-substeps-list li {
    margin-bottom: 0.25rem;
}
.mac-globe-tip {
    font-size: 0.8125rem;
    color: var(--color-brand-600);
    margin: 0;
}
.mac-caveats-box {
    padding: 1.25rem;
    background: var(--color-orange-50);
    border: 1px solid var(--color-orange-100);
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.mac-caveats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mac-caveats-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-orange-800);
    line-height: 1.4;
}
.mac-caveats-list li:last-child {
    margin-bottom: 0;
}
.mac-caveat-bullet {
    color: var(--color-orange-600);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.mac-rec-box {
    padding: 1rem;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--color-brand-800);
    line-height: 1.4;
}
.mac-accordion-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mac-accordion-item {
    border-bottom: 1px solid var(--border-color);
}
.mac-accordion-item:last-child {
    border-bottom: none;
}
.mac-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mac-accordion-trigger:hover {
    background: var(--bg-subtle);
    color: var(--color-brand-600);
}
.mac-accordion-icon {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}
.mac-accordion-item.open .mac-accordion-icon {
    transform: rotate(180deg);
    color: var(--color-brand-600);
}
.mac-accordion-body {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.mac-accordion-body p {
    margin: 0;
}

/* Dark Theme Adjustments */

/* Responsive Media Queries */
@media (max-width: 768px) {.mac-hub-header {
        padding: 1.5rem 1.25rem;
    }
.mac-hub-title {
        font-size: 1.75rem;
    }
.mac-guide-grid,
.mac-kv-layout,
.mac-input-source-grid,
.mac-uhex-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
.mac-table th.th-verbal,
.mac-table td.td-verbal {
        display: none;
    }
.mac-table th,
.mac-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8125rem;
    }
.mac-glyph {
        font-size: 1.35rem;
    }
.mac-keycap {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* ==========================================================================
   Linux Keyboard Shortcuts Hub (/keyboard-shortcuts/linux/)
   ========================================================================== */
.linux-shortcuts-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: var(--font-sans);
}
.linux-hub-header {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.8) 0%, rgba(226, 232, 240, 0.5) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
}
.linux-badge-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.linux-system-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-slate-900);
    color: var(--color-slate-50);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.linux-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-emerald-700);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.28rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
}
.linux-hub-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.linux-hub-intro {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 820px;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.linux-jump-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.linux-jump-nav .jump-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.linux-jump-nav .jump-chip {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.linux-jump-nav .jump-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
}

/* Round 53 (R40 triage): the AltGr guide's Dead Keys vs Compose Key
 * comparison table previously had no rules at all — transparent cells, zero
 * padding, no borders (columns visually ran together). Chrome mirrors the
 * .win-data-table look used across the keyboard hubs. */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    text-align: left;
}
/* Round 62: the wrapper existed in markup (layout-altgr-guide.php) with NO
 * rule — overflow stayed visible and the table blew out its column
 * (333px table in a 237px track, 69px page overflow @375). Standard mobile
 * table-scroll pattern applied. */
.comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comparison-table th {
    background: var(--bg-muted);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-slate-600);
    border-bottom: 1px solid var(--border-color);
}
.comparison-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.comparison-table td strong {
    color: var(--text-primary);
}
/* Round 53 (R40 triage): semantic danger text on the HTML-entities escaping
 * guide — the class carried meaning but no color, so the "corrupted
 * parameter" warning rendered in normal body text. */
.text-danger {
    color: var(--color-red-600);
    font-weight: 600;
}

/* Environment Context Selector */
.linux-env-section {
    margin-bottom: 2rem;
}
.linux-env-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.linux-env-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.linux-env-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
.linux-env-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.linux-env-pills {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.linux-env-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.linux-env-pill:hover {
    border-color: var(--color-slate-400);
    background: rgba(241, 245, 249, 0.7);
}
.linux-env-pill.active {
    background: var(--color-slate-900);
    border-color: var(--color-slate-900);
    color: var(--color-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.linux-env-pill-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.08);
}
.linux-env-pill.active .linux-env-pill-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}
.linux-env-info {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
}

/* Method Cards */
.linux-methods-section {
    margin-bottom: 2.5rem;
}
.linux-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.linux-section-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.linux-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.linux-method-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.linux-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: var(--color-slate-300);
}
.linux-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.linux-method-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-brand-600);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.linux-speed-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.linux-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.linux-card-scope {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}
.linux-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.linux-card-req {
    font-size: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}
.linux-card-req .req-label {
    font-weight: 600;
    color: var(--text-primary);
}
.linux-card-footer {
    display: flex;
    justify-content: flex-end;
}
.linux-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
}
.linux-card-link:hover {
    text-decoration: underline;
}

/* Filter Section */
.linux-filter-section {
    margin-bottom: 2rem;
}
.linux-search-box-wrapper {
    margin-bottom: 1.25rem;
}
.linux-search-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.linux-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
}
.linux-search-input {
    width: 100%;
    padding: 0.85rem 2.75rem 0.85rem 3rem;
    font-size: 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.linux-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.linux-search-clear {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}
.linux-search-hint {
    font-size: 0.78125rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}
.linux-cat-tabs-wrapper {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.linux-cat-tabs {
    display: flex;
    gap: 0.5rem;
    min-width: max-content;
}
.linux-cat-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.linux-cat-tab:hover {
    color: var(--text-primary);
    border-color: var(--color-slate-400);
}
.linux-cat-tab.active {
    background: var(--color-slate-900);
    border-color: var(--color-slate-900);
    color: var(--color-white);
}
.linux-cat-tab .cat-count {
    font-size: 0.6875rem;
    background: rgba(0, 0, 0, 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
}
.linux-cat-tab.active .cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* Keycaps & Table */
.linux-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.linux-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
/* Round 62: at ≤480px the auto-layout table (content ≈592px) escaped its
 * overflow-x wrapper into PAGE-level scroll (204px @240, 69px @375 —
 * Chromium counts the scroll container's table content toward the ICB
 * scrollable overflow). Fixed layout + word-break keeps the table inside
 * its column; cells wrap instead of leaking. Same leak verified on the
 * hub, mac, encoding, and developer matrix tables. */
@media (max-width: 480px) {
    .linux-shortcuts-table,
    .comparison-table,
    .kb-shortcuts-table,
    .mac-table,
    .mac-dead-table,
    .encoding-comparison-table,
    .dev-matrix-table {
        table-layout: fixed;
        width: 100%;
    }
    .linux-shortcuts-table th,
    .linux-shortcuts-table td,
    .comparison-table th,
    .comparison-table td,
    .kb-shortcuts-table th,
    .kb-shortcuts-table td,
    .mac-table th,
    .mac-table td,
    .mac-dead-table th,
    .mac-dead-table td,
    .encoding-comparison-table th,
    .encoding-comparison-table td,
    .dev-matrix-table th,
    .dev-matrix-table td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}
.linux-shortcuts-table th {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.linux-shortcuts-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    vertical-align: middle;
}
.linux-shortcuts-table tr:last-child td {
    border-bottom: none;
}
.linux-shortcuts-table tr:hover td {
    background: rgba(248, 250, 252, 0.8);
}
.char-symbol {
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
}
.char-name-link {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}
.char-name-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}
.linux-codepoint {
    font-size: 0.8125rem;
    background: var(--bg-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: var(--font-mono);
}
.linux-badge-method {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-800);
    background: var(--color-slate-200);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.linux-scope-pill {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.linux-keycap-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.linux-keycap {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-bottom: 2px solid var(--color-slate-400);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}
.linux-keycap.sm {
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
}
.linux-key-seq {
    color: var(--color-slate-500);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0 0.15rem;
}
.linux-key-simul {
    color: var(--color-slate-400);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.15rem;
}
.linux-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.linux-copy-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.linux-copy-btn .copied-indicator {
    display: none;
    color: var(--color-emerald-700);
}
.linux-copy-btn.copied {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-emerald-700);
    color: var(--color-emerald-700);
}
.linux-copy-btn.copied .copy-icon {
    display: none;
}
.linux-copy-btn.copied .copied-indicator {
    display: inline-block;
}
.linux-copy-mini-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.3rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.linux-copy-mini-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Guide Sections & Cards */
.linux-guide-section {
    margin-bottom: 2.5rem;
}
.linux-guide-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
}
.linux-guide-grid {
    display: grid;
    /* Round 62: minmax(0,·) — plain 1fr tracks blew out to content min-content
     * (333px track in a 237px container, 69px page overflow @375) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
}
.linux-guide-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.linux-step-card {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.step-num {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--color-slate-900);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.step-body strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.step-body p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.linux-example-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.example-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.example-char {
    font-size: 2rem;
    line-height: 1;
}
.example-title {
    font-weight: 600;
    color: var(--text-primary);
}
.example-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}
.flow-arrow {
    color: var(--color-slate-400);
    font-weight: bold;
}
.preedit-mock {
    font-family: var(--font-mono);
    font-weight: bold;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
}
.result-char {
    font-size: 1.25rem;
    font-weight: bold;
}
.linux-callout-info,
.linux-callout-warning {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.linux-callout-info {
    background: var(--color-info-50);
    border: 1px solid var(--color-sky-200);
    color: var(--color-info-700);
}
.linux-callout-warning {
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    color: var(--color-amber-800);
}
.callout-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
}

/* Compose Grid */
.linux-compose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.linux-compose-setup-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}
.setup-de-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.setup-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.setup-steps-list {
    padding-left: 1.25rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.setup-cli-box code {
    display: block;
    background: var(--color-slate-900);
    color: var(--color-sky-400);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    margin: 0.25rem 0;
}
.cli-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}
.sequential-visual {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 0.75rem;
}
.seq-step,
.seq-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.seq-badge {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.seq-arrow {
    font-size: 1.25rem;
    color: var(--color-slate-400);
    font-weight: bold;
}
.seq-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.seq-char {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--accent-color);
}

/* Compose Table Groups */
.linux-compose-groups {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.linux-compose-group-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}
.linux-group-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.linux-compose-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 0.75rem;
}
.compose-item-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.compose-item-char .item-symbol {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
}
.compose-item-info {
    flex-grow: 1;
    min-width: 0;
}
.item-name {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-keys {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.2rem;
}

/* Troubleshooting */
.linux-trouble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.linux-trouble-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}
.trouble-header {
    margin-bottom: 0.75rem;
}
.trouble-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-red-600);
    background: var(--color-red-100);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.4rem;
}
.trouble-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.trouble-field .field-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
}
.trouble-field .field-label.resolution {
    color: var(--color-emerald-700);
}
.trouble-field .field-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

/* FAQ */
.linux-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.linux-faq-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.linux-faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.faq-toggle-icon {
    font-size: 1.25rem;
    color: var(--text-muted);
}
.linux-faq-answer {
    padding: 0 1.25rem 1rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

/* Dark Theme Overrides */

/* Responsive Media Queries */
@media (max-width: 768px) {.linux-hub-title {
        font-size: 1.75rem;
    }
.linux-guide-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
.linux-shortcuts-table th.th-scope,
.linux-shortcuts-table td.td-scope {
        display: none;
    }
.linux-shortcuts-table th,
.linux-shortcuts-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8125rem;
    }
.char-symbol {
        font-size: 1.35rem;
    }
.linux-keycap {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* ==========================================================================
   Character Encoding Hub Styles (/encoding/)
   ========================================================================== */
.encoding-hub-main {
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem 0 4rem;
}
.encoding-hub-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Header & Switchboard Hero */
.encoding-hub-header {
    margin-bottom: 2.5rem;
}
.encoding-header-content {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-top: 1rem;
}
.encoding-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.encoding-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    max-width: 100%; /* Round 62: long badge labels shrank-wrapped past 240px viewports */
}
.encoding-pill-primary {
    background: var(--color-indigo-100);
    color: var(--color-indigo-800);
    border: 1px solid var(--color-indigo-200);
}
.encoding-pill-accent {
    background: var(--color-emerald-50);
    color: var(--color-emerald-800);
    border: 1px solid var(--color-emerald-300);
}
.encoding-pill-neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}
.encoding-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 1rem;
}
.encoding-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 0 1.75rem;
}

/* Jump Navigation */
.encoding-jump-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.jump-nav-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.jump-nav-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}
.jump-nav-link {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.jump-nav-link:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
}

/* Sections */
.encoding-section {
    margin-bottom: 3.5rem;
}
.encoding-section-header {
    margin-bottom: 1.75rem;
}
.encoding-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.encoding-section-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    max-width: 850px;
}

/* Topic Cards Grid */
.encoding-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1.5rem;
}
.encoding-topic-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.encoding-topic-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-brand-300);
}
.topic-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.topic-type-badge {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border-radius: 4px;
    border: 1px solid var(--color-brand-200);
}
.topic-spec-badge {
    font-size: 0.725rem;
    font-weight: 500;
    color: var(--color-slate-500);
    font-family: var(--font-mono);
}
.topic-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.topic-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.825rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border-color);
}
.topic-card-desc {
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    flex-grow: 1;
}
.topic-card-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.topic-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.topic-card-cta:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
}
.cta-arrow {
    margin-left: 0.5rem;
    transition: transform 0.15s ease;
}
.topic-card-cta:hover .cta-arrow {
    transform: translateX(3px);
}

/* Comparison Table */
.comparison-table-container {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}
.encoding-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}
.encoding-comparison-table th,
.encoding-comparison-table td {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.encoding-comparison-table thead th {
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.encoding-comparison-table tbody tr:last-child td,
.encoding-comparison-table tbody tr:last-child th {
    border-bottom: none;
}
.encoding-comparison-table tbody tr:hover {
    background: var(--bg-subtle);
}
.class-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.775rem;
    font-weight: 500;
    background: var(--color-slate-100);
    color: var(--color-slate-700);
    border: 1px solid var(--color-slate-200);
}
.code-pill {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-slate-900);
}
.byte-count-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-slate-500);
    margin-top: 0.25rem;
}
.table-link {
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
    white-space: nowrap;
}
.table-link:hover {
    text-decoration: underline;
}

/* Mobile Comparison Cards */
.comparison-mobile-cards {
    display: none;
    gap: 1rem;
    flex-direction: column;
}
.comparison-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
}
.comp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.comp-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.comp-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* Round 62: auto-min blowout fix */
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.comp-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.comp-item-label {
    font-weight: 600;
    color: var(--text-muted);
}
.comp-card-footer {
    text-align: right;
}

/* Callout Info Box */
.encoding-callout {
    background: var(--color-info-50);
    border: 1px solid var(--color-sky-200);
    border-left: 4px solid var(--color-info-700);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.callout-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.callout-icon {
    font-size: 1.15rem;
    color: var(--color-info-700);
}
.callout-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-info-700);
    margin: 0;
}
.callout-content p {
    font-size: 0.925rem;
    line-height: 1.6;
    color: var(--color-slate-700);
    margin: 0.5rem 0 0;
}

/* Inspector Component */
.inspector-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.inspector-input-bar {
    margin-bottom: 1.5rem;
}
.inspector-input-label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.input-action-group {
    display: flex;
    gap: 0.75rem;
}
.inspector-input-field {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    font-size: 1.15rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-raised);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inspector-input-field:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.inspector-reset-btn {
    padding: 0 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.inspector-reset-btn:hover {
    background: var(--color-slate-200);
    color: var(--color-slate-900);
}
.input-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0;
}

/* Preset Pills */
.curated-pills-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.pills-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.curated-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.curated-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.curated-pill-btn:hover {
    border-color: var(--color-brand-300);
    background: var(--color-brand-50);
}
.curated-pill-btn.active {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
    font-weight: 600;
}
.pill-char {
    font-size: 1rem;
}

/* Showcase Panel */
.inspector-char-showcase {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.showcase-glyph-box {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.showcase-glyph {
    font-size: 2.75rem;
    line-height: 1;
}
.showcase-details {
    flex-grow: 1;
}
.showcase-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.showcase-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.inspector-tag {
    font-size: 0.775rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}
.tag-codepoint {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
    font-family: var(--font-mono);
}
.tag-decimal {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-300);
    font-family: var(--font-mono);
}
.tag-plane {
    background: var(--color-emerald-50);
    color: var(--color-emerald-800);
    border: 1px solid var(--color-emerald-300);
}
.showcase-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Representation Cards Grid */
.inspector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.rep-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.rep-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.rep-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.rep-badge {
    font-size: 0.725rem;
    font-weight: 600;
    color: var(--color-slate-500);
    background: var(--bg-muted);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--color-slate-200);
}
.rep-card-value {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-slate-900);
    word-break: break-all;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.rep-multi-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-grow: 1;
}
.multi-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}
.multi-row .sub-label {
    font-weight: 600;
    color: var(--color-slate-500);
    min-width: 65px;
}
.multi-row code {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
    flex-grow: 1;
    word-break: break-all;
}
.copy-val-btn {
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-slate-700);
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.copy-val-btn:hover {
    background: var(--color-slate-200);
    color: var(--color-slate-900);
}
.copy-mini-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-700);
    background: var(--color-slate-200);
    border: 1px solid var(--color-slate-300);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.copy-mini-btn:hover {
    background: var(--color-slate-300);
}
.copy-val-btn.copied,
.copy-mini-btn.copied {
    background: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
    border-color: var(--color-emerald-700) !important;
}

/* Concepts Grid */
.concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 1.5rem;
}
.concept-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.concept-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.concept-index {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-slate-400);
    font-family: var(--font-mono);
}
.concept-badge {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    background: var(--color-slate-50);
    color: var(--color-slate-700);
    border: 1px solid var(--color-slate-300);
    border-radius: 4px;
}
.concept-standard {
    font-size: 0.725rem;
    font-weight: 500;
    color: var(--color-slate-500);
    margin-left: auto;
    font-family: var(--font-mono);
}
.concept-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    line-height: 1.35;
}
.concept-summary {
    font-size: 0.925rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    flex-grow: 1;
}
.key-distinction-box {
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    border-left: 3px solid var(--color-warning-700);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-amber-800);
}
.distinction-label {
    display: inline;
    font-weight: 700;
    margin-right: 0.35rem;
}

/* Tools Bridge Grid */
.encoding-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
}
.encoding-tool-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.tool-badge {
    font-size: 0.725rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-200);
    border-radius: 4px;
}
.tool-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.5rem 0;
}
.tool-card-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    flex-grow: 1;
}
.tool-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tool-card-cta:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
}

/* Standards Citations Grid */
.encoding-standards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.standard-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
}
.standard-org-badge {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.35rem;
}
.standard-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.standard-ext-link {
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.standard-ext-link:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}
.ext-icon {
    font-size: 0.85rem;
    color: var(--color-slate-400);
}
.standard-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Dark Theme Overrides */

/* Responsive Media Queries */
@media (max-width: 900px) {.comparison-table-container {
        display: none;
    }
.comparison-mobile-cards {
        display: flex;
    }
.inspector-char-showcase {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 640px) {.encoding-title {
        font-size: 1.75rem;
    }
.encoding-header-content {
        padding: 1.25rem;
    }
.inspector-card {
        padding: 1.25rem;
    }
.input-action-group {
        flex-direction: column;
    }
.inspector-reset-btn {
        padding: 0.6rem;
    }
.encoding-topics-grid,
.concepts-grid,
.encoding-tools-grid,
.encoding-standards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   UTF-8 Character Encoding Page Styles (/encoding/utf8/)
   Strictly standards-aligned, accessible, WCAG 2.1 AA compliant, responsive.
   ========================================================================== */
.utf8-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: inherit;
    color: var(--color-slate-800);
}

/* Header & Badges */
.utf8-header-wrap {
    margin-bottom: 2.5rem;
}
.utf8-hero-header {
    margin: 1.25rem 0 1.75rem;
}
.utf8-hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.utf8-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.utf8-badge-primary {
    background: var(--color-indigo-100);
    color: var(--color-indigo-700);
    border: 1px solid var(--color-indigo-200);
}
.utf8-badge-neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}
.utf8-badge-subtle {
    background: var(--color-slate-50);
    color: var(--color-slate-500);
    border: 1px solid var(--color-slate-200);
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.utf8-main-heading {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.15;
}
.utf8-hero-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--color-slate-600);
    max-width: 960px;
    margin: 0;
}

/* Quick Facts Card */
.utf8-quick-facts-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.utf8-section-subheading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1.25rem;
}
.utf8-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf8-fact-item {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.utf8-fact-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.35rem;
}
.utf8-fact-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf8-fact-hint {
    font-size: 0.75rem;
    color: var(--color-slate-500);
    margin-top: 0.35rem;
}

/* Common Section Layout */
.utf8-section {
    margin-top: 3.5rem;
}
.utf8-section-header {
    margin-bottom: 1.5rem;
}
.utf8-section-heading {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
    /* Round 61 (61-T12): long unbreakable tokens at 1.65rem outran a 118px
       column at 240px (+14px). Emergency mid-word wrap. */
    overflow-wrap: break-word;
    margin: 0 0 0.5rem;
}
.utf8-section-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    max-width: 980px;
    margin: 0;
}

/* Tables */
.utf8-table-container {
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}
/* Round 62: three more table wrappers existed in markup with NO rule
 * (encoding/comparison, encoding/utf8 byte-ranges + invalid-sequences +
 * well-formedness, unicode/versions, developer edge-cases matrix,
 * keyboard-hub common shortcuts) — tables blew out 240px viewports
 * (53px /encoding/, 63px /developers/, 38px /keyboard-shortcuts/).
 * Same controlled horizontal-scroll pattern. */
.table-container,
.dev-table-container,
.kb-shortcuts-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Round 59 (59-B): the worked-example table wrapper had NO rule at all, so its
   717px table pushed 407px of page-level horizontal scroll at 375px. Give it the
   same controlled horizontal-scroll treatment as .utf8-table-container. */
.utf8-octets-table-wrap {
    overflow-x: auto;
    /* Round 60: as a flex/grid child the auto-min forced the wrapper open
       instead of scrolling; min-width:0 restores in-place scrolling. */
    min-width: 0;
}
.utf8-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
}
.utf8-data-table th,
.utf8-data-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-slate-100);
}
.utf8-data-table thead th {
    background: var(--color-slate-50);
    font-weight: 700;
    color: var(--color-slate-700);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-slate-200);
    white-space: nowrap;
}
.utf8-data-table tbody tr:hover {
    background: var(--color-slate-50);
}
.utf8-data-table tbody tr:last-child td {
    border-bottom: none;
}
.utf8-bit-code {
    font-family: var(--font-mono);
    background: var(--color-slate-100);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--color-slate-900);
}
.utf8-code-highlight {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.utf8-empty-cell {
    color: var(--color-slate-400);
}
.utf8-constraint-note {
    font-size: 0.88rem;
    color: var(--color-slate-600);
}

/* Byte Badges */
.utf8-byte-badge {
    min-width: 0;
    overflow-wrap: anywhere;
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.utf8-bytes-1 {
    background: var(--color-green-100);
    color: var(--color-success-700);
    border: 1px solid var(--color-green-200);
}
.utf8-bytes-2 {
    background: var(--color-sky-100);
    color: var(--color-info-700);
    border: 1px solid var(--color-sky-200);
}
.utf8-bytes-3 {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
    border: 1px solid var(--color-purple-200);
}
.utf8-bytes-4 {
    background: var(--color-amber-100);
    color: var(--color-amber-700);
    border: 1px solid var(--color-amber-200);
}

/* Statuses & Callouts */
.utf8-status-pass {
    color: var(--color-green-600);
}
.utf8-badge-pass {
    background: var(--color-green-100);
    color: var(--color-success-700);
    border: 1px solid var(--color-green-200);
}
.utf8-badge-fail,
.utf8-badge-error {
    background: var(--color-red-100);
    color: var(--color-danger-700);
    border: 1px solid var(--color-red-200);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}
.utf8-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    margin-top: 1.5rem;
    min-width: 0;
}
.utf8-callout-info {
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    color: var(--color-brand-900);
}
.utf8-callout-warning {
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    color: var(--color-amber-950);
}
.utf8-callout-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.utf8-callout-content p {
    margin: 0.4rem 0 0;
    line-height: 1.55;
    font-size: 0.95rem;
}
.utf8-callout-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

/* Tool & Inspector Styles */
.utf8-tool-section {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.utf8-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--color-slate-200);
    margin-bottom: 1.75rem;
}
.utf8-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-slate-500);
    cursor: pointer;
    transition: all 0.2s ease;
}
.utf8-tab-btn:hover {
    color: var(--color-slate-800);
}
.utf8-tab-btn.active {
    color: var(--color-brand-600);
    border-bottom-color: var(--color-brand-600);
}
.utf8-tab-panel {
    display: block;
}
.utf8-tab-panel[hidden] {
    display: none !important;
}

/* Inspector Layout */
.utf8-inspector-layout,
.utf8-validator-layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.utf8-input-pane {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf8-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.utf8-input-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-slate-700);
}
.utf8-input-wrapper {
    display: flex;
    gap: 0.5rem;
}
.utf8-text-field {
    flex: 1;
    /* Round 59 (59-B residual): flex items don't shrink below their intrinsic
       min-width — a text input's default ~170px floor kept the input + 44px
       clear button row wider than a 375px phone. */
    min-width: 0;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    font-family: inherit;
    border: 1.5px solid var(--color-slate-300);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-slate-900);
    transition: border-color 0.2s;
}
.utf8-text-field:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.utf8-btn-icon {
    background: var(--color-slate-200);
    border: none;
    border-radius: 8px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-slate-600);
    transition: background 0.2s;
}
.utf8-btn-icon:hover {
    background: var(--color-slate-300);
    color: var(--color-slate-900);
}
.utf8-btn-primary {
    background: var(--color-brand-600);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.utf8-btn-primary:hover {
    background: var(--color-brand-700);
}
.utf8-presets-bar {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.utf8-presets-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-slate-500);
    margin-right: 0.25rem;
}
.utf8-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.utf8-chip-btn {
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: all 0.15s;
}
.utf8-chip-btn:hover {
    border-color: var(--color-brand-600);
    color: var(--color-brand-600);
}
.utf8-chip-btn.active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}
.utf8-chip-danger:hover {
    border-color: var(--color-red-600);
    color: var(--color-red-600);
}

/* Output Pane & Metrics */
.utf8-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.utf8-metric-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.utf8-metric-val {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-slate-900);
    line-height: 1.2;
}
.utf8-metric-lbl {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-top: 0.25rem;
}

/* Results Card & Byte Boxes */
.utf8-results-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.utf8-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}
.utf8-result-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0;
}
.utf8-copy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.utf8-copy-btn {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: all 0.2s;
}
.utf8-copy-btn:hover {
    background: var(--color-slate-200);
    color: var(--color-slate-900);
}
.utf8-copy-btn.copied {
    background: var(--color-green-100);
    border-color: var(--color-green-300);
    color: var(--color-success-700);
}
.utf8-byte-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.utf8-byte-box {
    flex: 1 1 120px;
    min-width: 110px;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}
.utf8-byte-box-head {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.utf8-byte-box-hex {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-brand-600);
    line-height: 1.2;
}
.utf8-byte-box-bin {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-slate-700);
    margin-top: 0.25rem;
}
.utf8-byte-box-dec {
    font-size: 0.72rem;
    color: var(--color-slate-500);
    margin-top: 0.15rem;
}
.utf8-stream-raws {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-slate-200);
}
.utf8-stream-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.utf8-stream-tag {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-slate-500);
    width: 110px;
    flex-shrink: 0;
}
.utf8-stream-code {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-slate-900);
    word-break: break-all;
}

/* Breakdown Details */
.utf8-details-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-700);
    margin: 1.5rem 0 0.75rem;
}
.utf8-unit-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.utf8-unit-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Round 61 (61-T12): unit-char + byte badges refused to share an 84px
       column at 240px — badges squeezed to 18px boxes whose content ran to
       55px. Wrap the row. */
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.utf8-unit-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    background: var(--color-slate-100);
    border-radius: 8px;
    border: 1px solid var(--color-slate-200);
}
.utf8-unit-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.utf8-unit-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
}
.utf8-unit-cp {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf8-unit-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-slate-100);
}
.utf8-bit-mapping {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.88rem;
}
.utf8-mapping-label {
    /* Round 61 (61-T12): #64748b -> exact slate-500 token; fixed 150px
       min-width overran an 84px pane at 240px — shrinkable flex basis now. */
    color: var(--color-slate-500);
    flex: 0 1 150px;
    max-width: 100%;
    min-width: 0;
}
.utf8-bit-str {
    font-family: var(--font-mono);
    background: var(--color-slate-50);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.utf8-bit-str strong {
    color: var(--color-brand-600);
}

/* Validator Status Card */
.utf8-validation-card {
    border-radius: 10px;
    padding: 1.5rem;
    border: 1.5px solid transparent;
}
.utf8-status-card-valid {
    background: var(--color-success-50);
    border-color: var(--color-green-300);
}
.utf8-status-card-danger {
    background: var(--color-danger-50);
    border-color: var(--color-red-300);
}
.utf8-status-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.utf8-status-icon {
    font-size: 2rem;
    line-height: 1;
}
.utf8-status-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: var(--color-slate-900);
}
.utf8-status-badge {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    margin-top: 0.25rem;
}
.utf8-valid-chars-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.utf8-valid-char-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-green-300);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.utf8-pill-glyph {
    font-size: 1.3rem;
    font-weight: 700;
}
.utf8-pill-cp {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-success-700);
}
.utf8-pill-bytes {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-slate-500);
}
.utf8-error-callout {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.95rem;
}
.utf8-error-msg {
    color: var(--color-red-800);
    margin: 0;
}
.utf8-error-exp {
    color: var(--color-slate-600);
    margin: 0;
}
.utf8-error-sec {
    background: var(--color-red-100);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    display: flex;
    gap: 0.5rem;
    color: var(--color-red-900);
}
.utf8-sec-tag {
    font-weight: 700;
    flex-shrink: 0;
}

/* Worked Example Steps */
.utf8-steps-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.utf8-step-card {
    display: flex;
    gap: 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.utf8-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-brand-600);
    color: var(--color-white);
    font-size: 1.15rem;
    font-weight: 800;
    flex-shrink: 0;
}
.utf8-step-content {
    flex: 1;
    /* Round 60: flex item auto-min inherited the octets table's 717px
       min-content, overflowing tablets (820px) by 18px. The wrap below is
       overflow-x:auto, so shrinking is safe (content scrolls in place). */
    min-width: 0;
}
.utf8-step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf8-step-formula {
    background: var(--color-slate-50);
    border-left: 3px solid var(--color-brand-600);
    padding: 0.65rem 1rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}
.utf8-bit-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Round 61 (61-T11): #f8fafc -> exact slate-50 token. */
    background: var(--color-slate-50);
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}
.utf8-bit-line {
    display: flex;
    /* Round 61 (61-T11): the 140px label + code token refused to share the
       ~130px step-content column at 240px. Wrap the pair; label shrinks from
       its 140px preference when needed. */
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: baseline;
    min-width: 0;
}
.utf8-bit-label {
    font-size: 0.82rem;
    font-weight: 600;
    /* Round 61 (61-T11): #64748b -> exact slate-500 token; fixed 140px width
       -> shrinkable flex basis. */
    color: var(--color-slate-500);
    flex: 0 1 140px;
    max-width: 100%;
    min-width: 0;
}
/* Round 61 (61-T11): previously unstyled — the raw-bits/template code
   tokens ("1110xxxx 10xxxxxx 10xxxxxx") had no shrink/wrap guard as flex
   row items. */
.utf8-code-token {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.utf8-chunk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}
.utf8-chunk-card {
    /* Round 61 (61-T7): #f8fafc/#e2e8f0 hardcoded -> exact slate token
       equivalents (zero visual change, single-sourced in the schema). */
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 0.85rem;
    text-align: center;
}
.utf8-chunk-tag {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
    margin-bottom: 0.35rem;
}
.utf8-chunk-val {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-brand-600);
}
.utf8-hex-lead {
    color: var(--color-brand-600);
}
.utf8-hex-cont {
    color: var(--color-purple-700);
}
.utf8-final-banner {
    background: var(--color-emerald-50);
    border: 1.5px solid var(--color-emerald-300);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    color: var(--color-emerald-800);
    margin-top: 1rem;
}
.utf8-verification-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.utf8-verif-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
}
.utf8-verif-icon {
    font-weight: 800;
    color: var(--color-green-600);
}

/* Curated Examples Grid */
.utf8-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.utf8-example-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}
.utf8-example-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
.utf8-example-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}
.utf8-example-glyph {
    font-size: 2.25rem;
    line-height: 1;
    min-height: 2.5rem;
}
.utf8-example-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf8-example-meta {
    background: var(--color-slate-50);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.utf8-meta-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
}
.utf8-meta-lbl {
    color: var(--color-slate-500);
}
.utf8-meta-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
}
.utf8-hex-val {
    color: var(--color-brand-600);
}
.utf8-example-reason {
    font-size: 0.85rem;
    color: var(--color-slate-600);
    line-height: 1.45;
    margin: 0 0 1rem;
}
.utf8-btn-inspect {
    width: 100%;
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-700);
    cursor: pointer;
    transition: background 0.15s;
}
.utf8-btn-inspect:hover {
    background: var(--color-brand-100);
}

/* Invalid Sequences & Subcards */
.utf8-hex-danger {
    color: var(--color-red-600);
    font-weight: 700;
    font-family: var(--font-mono);
}
.utf8-risk-cell {
    color: var(--color-danger-700);
    font-size: 0.85rem;
}
.utf8-btn-test-vector {
    background: var(--color-danger-50);
    border: 1px solid var(--color-red-200);
    color: var(--color-danger-700);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.utf8-btn-test-vector:hover {
    background: var(--color-red-100);
}
.utf8-grid-2col {
    display: grid;
    /* Round 59: 320px floor overflowed 320px phones (40px page scroll). */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.utf8-subcard {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.5rem;
}
.utf8-subcard-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.65rem;
}
.utf8-subcard p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin: 0 0 0.75rem;
}
.utf8-subcard p:last-child {
    margin-bottom: 0;
}

/* BOM Section */
.utf8-bom-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.utf8-bom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Round 61 (61-T8): the "Not Recommended on Web" status badge (104px) +
       BOM hex row refused to share a 160px row at 240px — badge spilled 21px
       past the viewport. Wrap instead. */
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-slate-100);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}
.utf8-bom-octets {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.utf8-bom-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-slate-500);
}
.utf8-bom-code {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-red-600);
    background: var(--color-danger-50);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.utf8-badge-warning {
    background: var(--color-amber-100);
    color: var(--color-amber-800);
    border: 1px solid var(--color-amber-200);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.utf8-bom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}
.utf8-bom-col-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.65rem;
}
.utf8-bom-col p {
    font-size: 0.95rem;
    color: var(--color-slate-600);
    line-height: 1.6;
}
.utf8-feature-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-slate-600);
}
.utf8-feature-list li {
    margin-bottom: 0.4rem;
}

/* Concept Cards Grid */
.utf8-concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
}
.utf8-concept-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.utf8-concept-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    margin-bottom: 0.65rem;
}
.utf8-concept-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf8-concept-summary {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-brand-600);
    margin: 0 0 0.75rem;
}
.utf8-concept-detail p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin: 0 0 0.5rem;
}
.utf8-concept-detail p:last-child {
    margin-bottom: 0;
}

/* Bridges & Links */
.utf8-bridge-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.utf8-bridge-subheading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0;
}
.utf8-bridge-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.utf8-bridge-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
}
.utf8-bridge-card:hover {
    border-color: var(--color-brand-600);
    transform: translateX(3px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.utf8-bridge-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.utf8-bridge-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-slate-800);
}
.utf8-bridge-card:hover .utf8-bridge-title {
    color: var(--color-brand-600);
}
.utf8-bridge-badge {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-slate-100);
    color: var(--color-slate-500);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.utf8-bridge-desc {
    font-size: 0.85rem;
    color: var(--color-slate-500);
    line-height: 1.45;
    margin: 0;
}

/* Standards Grid */
.utf8-standards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.utf8-standard-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf8-standard-org {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.utf8-standard-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.utf8-standard-title a {
    color: var(--color-slate-900);
    text-decoration: none;
}
.utf8-standard-title a:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
}
.utf8-standard-desc {
    font-size: 0.88rem;
    color: var(--color-slate-500);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   Dark Theme Adaptation (

/* Responsive Media Queries */
@media (max-width: 768px) {.utf8-tool-section {
        padding: 1.25rem;
    }
.utf8-tabs {
        flex-direction: column;
        border-bottom: none;
    }
.utf8-tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding: 0.5rem 0.75rem;
    }
.utf8-tab-btn.active {
        border-bottom-color: transparent;
        border-left-color: var(--color-brand-600);
        background: var(--color-slate-100);
        border-radius: 0 6px 6px 0;
    }
.utf8-summary-metrics {
        grid-template-columns: 1fr;
    }
.utf8-step-card {
        flex-direction: column;
        gap: 0.75rem;
    }
.utf8-stream-row {
        flex-direction: column;
        gap: 0.25rem;
    }
.utf8-stream-tag {
        width: auto;
    }
}

/* ==========================================================================
   UTF-16 Character Encoding Detail Page Styles
   Authoritative Reference & Interactive Inspector
   ========================================================================== */
.utf16-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.utf16-header-wrap {
    margin-bottom: 2.5rem;
}
.utf16-hero-header {
    margin: 1.25rem 0 1.75rem;
}
.utf16-hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.utf16-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.utf16-badge-primary {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
}
.utf16-badge-neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}
.utf16-badge-blue {
    background: var(--color-sky-100);
    color: var(--color-info-700);
    border: 1px solid var(--color-sky-200);
}
.utf16-badge-amber {
    background: var(--color-amber-100);
    color: var(--color-amber-700);
    border: 1px solid var(--color-amber-200);
}
.utf16-badge-purple {
    background: var(--color-violet-100);
    color: var(--color-violet-700);
    border: 1px solid var(--color-violet-200);
}
.utf16-badge-red {
    background: var(--color-red-100);
    color: var(--color-danger-700);
    border: 1px solid var(--color-red-200);
}
.utf16-main-heading {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.15;
}
.utf16-hero-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--color-slate-600);
    max-width: 960px;
    margin: 0;
}

/* Quick Facts */
.utf16-quick-facts-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.utf16-section-subheading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1.25rem;
}
.utf16-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf16-fact-item {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
}
.utf16-fact-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.35rem;
}
.utf16-fact-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf16-fact-hint {
    font-size: 0.75rem;
    color: var(--color-slate-500);
    margin-top: 0.35rem;
}
.utf16-status-pass {
    color: var(--color-success-700);
    font-weight: 600;
}
.utf16-status-alert {
    color: var(--color-red-600);
    font-weight: 600;
}
.utf16-status-pair {
    color: var(--color-violet-600);
    font-weight: 600;
}

/* Sections */
.utf16-section {
    margin-bottom: 3rem;
}
.utf16-section-header {
    margin-bottom: 1.5rem;
}
.utf16-section-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-section-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin: 0;
    max-width: 900px;
}

/* Tables */
.utf16-table-responsive {
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.utf16-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.925rem;
}
.utf16-table th,
.utf16-table td {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--color-slate-200);
}
.utf16-table thead th {
    background: var(--color-slate-50);
    color: var(--color-slate-600);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.utf16-table tbody tr:last-child th,
.utf16-table tbody tr:last-child td {
    border-bottom: none;
}
.utf16-table tbody tr:hover {
    background: var(--color-slate-50);
}
.utf16-row-highlight {
    background: var(--color-purple-50);
}
.utf16-row-warning {
    background: var(--color-warning-50);
}
.utf16-row-error {
    background: var(--color-danger-50);
}
.utf16-table-note {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    margin-top: 0.25rem;
    font-weight: 400;
}
.utf16-table-char-glyph {
    font-size: 1.5rem;
    display: inline-block;
    min-width: 2rem;
}
.utf16-mono-strong {
    font-weight: 700;
    color: var(--color-slate-900);
}

/* Cards & Generic Elements */
.utf16-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Surrogate Pair Visual Anatomy */
.utf16-surrogate-visual-card {
    background: linear-gradient(to bottom, var(--color-white), var(--color-slate-50));
}
.utf16-surrogate-diagram {
    margin-bottom: 2rem;
}
.utf16-diagram-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-slate-200);
}
.utf16-diagram-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf16-diagram-tag {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}
.utf16-surrogate-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.utf16-surrogate-box {
    flex: 1;
    min-width: 180px;
    max-width: 240px;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--color-slate-200);
}
.utf16-box-high {
    background: var(--color-warning-50);
    border-color: var(--color-amber-200);
}
.utf16-box-low {
    background: var(--color-violet-50);
    border-color: var(--color-violet-200);
}
.utf16-box-result {
    background: var(--color-brand-50);
    border-color: var(--color-brand-200);
}
.utf16-box-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.5rem;
}
.utf16-box-hex {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--color-slate-900);
}
.utf16-box-char {
    font-size: 2.25rem;
    margin-bottom: 0.25rem;
}
.utf16-box-sub {
    font-size: 0.75rem;
    color: var(--color-slate-600);
    margin-top: 0.25rem;
}
.utf16-box-desc {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-slate-700);
    margin-top: 0.5rem;
}
.utf16-surrogate-plus,
.utf16-surrogate-equals {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-slate-400);
}
.utf16-diagram-footer {
    background: var(--color-slate-50);
    border: 1px dashed var(--color-slate-300);
    border-radius: 8px;
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-slate-700);
    text-align: center;
}
.utf16-diagram-footer p {
    margin: 0;
}

/* Surrogate Math Grid */
.utf16-surrogate-math-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.utf16-math-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1.25rem;
}
.utf16-math-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-math-text {
    font-size: 0.85rem;
    color: var(--color-slate-600);
    margin: 0 0 0.75rem;
}
.utf16-code-formula {
    background: var(--color-slate-900);
    color: var(--color-slate-50);
    padding: 0.85rem 1rem;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.utf16-math-caption {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    margin: 0;
    line-height: 1.4;
}

/* Interactive Inspector */
.utf16-inspector-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.utf16-tool-tabs {
    display: flex;
    background: var(--color-slate-50);
    border-bottom: 1px solid var(--color-slate-200);
}
.utf16-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--color-slate-500);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf16-tab-btn:hover {
    color: var(--color-slate-900);
}
.utf16-tab-btn.active {
    background: var(--color-white);
    color: var(--color-brand-600);
    border-bottom-color: var(--color-brand-600);
}
.utf16-tab-panel {
    padding: 1.5rem;
}
.utf16-tab-panel[hidden] {
    display: none;
}
.utf16-input-row {
    margin-bottom: 1rem;
}
.utf16-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-bottom: 0.5rem;
}
.utf16-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.utf16-text-field {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1.1rem;
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-slate-900);
    outline: none;
    transition: border-color 0.15s ease;
}
.utf16-text-field:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.utf16-mono-input {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.utf16-clear-btn {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-slate-500);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.utf16-clear-btn:hover {
    color: var(--color-slate-600);
}
.utf16-presets-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.utf16-presets-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf16-presets-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.utf16-preset-pill {
    padding: 0.25rem 0.65rem;
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf16-preset-pill:hover {
    background: var(--color-slate-200);
}
.utf16-preset-pill.active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
}
.utf16-pill-danger:hover {
    background: var(--color-red-100);
    border-color: var(--color-red-200);
    color: var(--color-danger-700);
}
.utf16-pill-danger.active {
    background: var(--color-red-600);
    border-color: var(--color-red-600);
    color: var(--color-white);
}

/* View Selector Pills */
.utf16-view-selector-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    flex-wrap: wrap;
}
.utf16-selector-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-slate-600);
}
.utf16-view-pills {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.utf16-view-pill {
    padding: 0.35rem 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf16-view-pill.active {
    background: var(--color-slate-900);
    border-color: var(--color-slate-900);
    color: var(--color-white);
}

/* Metrics Strip */
.utf16-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.utf16-metric-pill {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.utf16-metric-lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf16-metric-pill strong {
    font-size: 1.1rem;
    color: var(--color-slate-900);
}

/* Stream Card */
.utf16-stream-card {
    background: var(--color-slate-900);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-slate-50);
}
.utf16-stream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.utf16-stream-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-400);
}
.utf16-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-slate-800);
    border: 1px solid var(--color-slate-700);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--color-slate-50);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf16-copy-btn:hover {
    background: var(--color-slate-700);
}
.utf16-stream-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    word-break: break-all;
    letter-spacing: 0.05em;
    color: var(--color-sky-400);
}

/* Character Breakdown Cards */
.utf16-chars-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.utf16-char-card {
    display: flex;
    align-items: stretch;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    overflow: hidden;
}
.utf16-char-glyph-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 1rem;
    background: var(--color-slate-100);
    border-right: 1px solid var(--color-slate-200);
}
.utf16-char-glyph {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.utf16-char-cp {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-brand-600);
    text-decoration: none;
}
.utf16-char-cp:hover {
    text-decoration: underline;
}
.utf16-char-details-col {
    flex: 1;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.utf16-char-meta-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.utf16-units-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.utf16-unit-slot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.utf16-slot-lbl {
    color: var(--color-slate-500);
}
.utf16-slot-hex {
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.utf16-slot-bytes {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* Validator Diagnostics */
.utf16-validator-results {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
}
.utf16-val-status-bar {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.utf16-val-pass {
    background: var(--color-emerald-50);
    border-bottom: 1px solid var(--color-emerald-300);
}
.utf16-val-fail {
    background: var(--color-danger-50);
    border-bottom: 1px solid var(--color-red-200);
}
.utf16-val-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
}
.utf16-val-pass .utf16-val-badge {
    background: var(--color-emerald-700);
    color: var(--color-white);
}
.utf16-val-fail .utf16-val-badge {
    background: var(--color-red-600);
    color: var(--color-white);
}
.utf16-val-summary {
    font-size: 0.95rem;
    font-weight: 600;
}
.utf16-val-pass .utf16-val-summary {
    color: var(--color-emerald-800);
}
.utf16-val-fail .utf16-val-summary {
    color: var(--color-red-800);
}
.utf16-val-body {
    padding: 1.25rem;
    background: var(--color-white);
}
.utf16-val-preview-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.utf16-val-preview-lbl {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf16-val-preview-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf16-val-explanation {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-slate-600);
}

/* Worked Steps Card */
.utf16-worked-card {
    background: var(--color-white);
}
.utf16-worked-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.utf16-step-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
}
.utf16-step-num {
    background: var(--color-slate-900);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    white-space: nowrap;
}
.utf16-step-content {
    flex: 1;
}
.utf16-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin-bottom: 0.35rem;
}
.utf16-step-calc {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.35rem;
}
.utf16-step-desc {
    font-size: 0.85rem;
    color: var(--color-slate-600);
    line-height: 1.4;
}
.utf16-reverse-decode-box {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    padding: 1.25rem;
}
.utf16-reverse-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-reverse-formula {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-reverse-caption {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    margin: 0;
}

/* Examples Grid */
.utf16-examples-grid {
    display: grid;
    /* Round 59: 320px column floor overflowed 320px-wide phones (40px page
       scroll). 240px floor keeps two-up on tablets, one-up on small phones. */
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf16-example-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.utf16-card-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.utf16-card-glyph-badge {
    min-width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    display: flex;
    align-items: center;
    justify-content: center;
}
.utf16-card-char {
    font-size: 1.75rem;
}
.utf16-card-info {
    flex: 1;
}
.utf16-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.2rem;
}
.utf16-card-cat {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
}
.utf16-prop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-slate-100);
}
.utf16-prop-lbl {
    color: var(--color-slate-500);
}
.utf16-prop-code {
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf16-prop-sub {
    color: var(--color-slate-600);
}
.utf16-prop-badges {
    display: flex;
    gap: 0.35rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.utf16-card-reason {
    font-size: 0.8rem;
    color: var(--color-slate-600);
    line-height: 1.4;
    margin: 0;
}

/* BOM Section Cards */
.utf16-bom-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.utf16-bom-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
}
.utf16-bom-scheme {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-slate-500);
}
.utf16-bom-bytes {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-brand-600);
    margin: 0.5rem 0;
}
.utf16-bom-desc {
    font-size: 0.85rem;
    color: var(--color-slate-600);
    margin: 0;
}
.utf16-callout-box {
    background: var(--color-slate-50);
    border-left: 4px solid var(--color-brand-600);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin-top: 1.25rem;
}
.utf16-callout-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.35rem;
}
.utf16-callout-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-slate-600);
    margin: 0;
}

/* Conformance Rules Card */
.utf16-rules-card {
    margin-bottom: 1.5rem;
}
.utf16-rules-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.75rem;
}
.utf16-rules-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: var(--color-slate-700);
    line-height: 1.6;
}

/* Concepts Grid */
.utf16-concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf16-concept-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf16-concept-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-concept-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-slate-600);
    margin: 0;
}

/* Links and Tools Bridge */
.utf16-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.utf16-col-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1rem;
}
.utf16-nav-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.utf16-nav-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.utf16-nav-card:hover {
    border-color: var(--color-brand-600);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.utf16-nav-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.25rem;
}
.utf16-nav-card-desc {
    font-size: 0.825rem;
    color: var(--color-slate-500);
    line-height: 1.4;
}

/* Standards Note */
.utf16-standards-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
}
.utf16-standards-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf16-standards-intro {
    font-size: 0.9rem;
    color: var(--color-slate-600);
    margin: 0 0 1rem;
}
.utf16-standards-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-slate-700);
    line-height: 1.6;
}
.utf16-std-link {
    color: var(--color-brand-600);
    text-decoration: none;
}
.utf16-std-link:hover {
    text-decoration: underline;
}

/* Responsive Overrides */
@media (max-width: 768px) {.utf16-surrogate-math-grid,
.utf16-bom-cards-grid,
.utf16-links-grid {
        grid-template-columns: 1fr;
    }
.utf16-surrogate-boxes {
        flex-direction: column;
    }
.utf16-surrogate-box {
        max-width: 100%;
        width: 100%;
    }
.utf16-tool-tabs {
        flex-direction: column;
    }
.utf16-tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding: 0.65rem 1rem;
    }
.utf16-tab-btn.active {
        border-bottom-color: transparent;
        border-left-color: var(--color-brand-600);
    }
}

/* ==========================================================================
   UTF-32 Character Encoding Detail Page Styles
   Authoritative Reference & Interactive Inspector
   ========================================================================== */
.utf32-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.utf32-header-wrap {
    margin-bottom: 2.5rem;
}
.utf32-hero-header {
    margin: 1.25rem 0 1.75rem;
}
.utf32-hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.utf32-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.utf32-badge-primary {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
}
.utf32-badge-neutral {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border: 1px solid var(--color-slate-200);
}
.utf32-badge-blue {
    background: var(--color-sky-100);
    color: var(--color-info-700);
    border: 1px solid var(--color-sky-200);
}
.utf32-badge-amber {
    background: var(--color-amber-100);
    color: var(--color-amber-700);
    border: 1px solid var(--color-amber-200);
}
.utf32-badge-purple {
    background: var(--color-violet-100);
    color: var(--color-violet-700);
    border: 1px solid var(--color-violet-200);
}
.utf32-main-heading {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.15;
}
.utf32-hero-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--color-slate-600);
    max-width: 960px;
    margin: 0;
}

/* Quick Facts */
.utf32-quick-facts-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.utf32-section-subheading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1.25rem;
}
.utf32-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.utf32-fact-item {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.utf32-fact-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}
.utf32-fact-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
    line-height: 1.3;
}
.utf32-fact-hint {
    font-size: 0.775rem;
    color: var(--color-slate-400);
    margin-top: 0.35rem;
}
.utf32-status-alert {
    color: var(--color-amber-700);
    font-weight: 700;
}
.utf32-status-pass {
    color: var(--color-success-700);
    font-weight: 700;
}

/* Common Section Styles */
.utf32-section {
    margin-bottom: 3.5rem;
}
.utf32-section-header {
    margin-bottom: 1.5rem;
}
.utf32-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.utf32-section-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    max-width: 900px;
    margin: 0;
}

/* Tables */
.utf32-table-responsive {
    overflow-x: auto;
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    background: var(--color-white);
}
.utf32-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925rem;
    text-align: left;
}
.utf32-table th,
.utf32-table td {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--color-slate-200);
    vertical-align: middle;
}
.utf32-table thead th {
    background: var(--color-slate-50);
    font-weight: 700;
    color: var(--color-slate-700);
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.utf32-table tbody tr:last-child th,
.utf32-table tbody tr:last-child td {
    border-bottom: none;
}
.utf32-table-note {
    font-size: 0.775rem;
    color: var(--color-slate-500);
    font-weight: normal;
    margin-top: 0.2rem;
}
.utf32-mono-strong {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf32-table-char-glyph {
    font-size: 1.5rem;
    display: inline-block;
    min-width: 2rem;
    text-align: center;
}
.utf32-row-warning {
    background: var(--color-warning-50);
}
.utf32-row-danger {
    background: var(--color-danger-50);
}
.utf32-th-active {
    background: var(--color-brand-50) !important;
    color: var(--color-brand-700) !important;
}
.utf32-td-active {
    background: var(--color-slate-50);
}
.utf32-col-link {
    color: var(--color-brand-600);
    text-decoration: none;
    font-weight: 700;
}
.utf32-col-link:hover {
    text-decoration: underline;
}

/* Visualizer Card */
.utf32-visualizer-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.utf32-vis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.utf32-vis-title {
    font-size: 1.1rem;
    color: var(--color-slate-900);
}
.utf32-vis-box-wrap {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--color-slate-50);
    border: 1px dashed var(--color-slate-300);
    border-radius: 10px;
}
.utf32-vis-unit-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.75rem;
}
.utf32-vis-unit-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-white);
    border: 2px solid var(--color-brand-600);
    border-radius: 8px;
    padding: 0.75rem 2rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.utf32-unit-hex-display {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-brand-700);
    letter-spacing: 0.08em;
}
.utf32-unit-bits-display {
    font-size: 0.75rem;
    color: var(--color-slate-500);
    font-weight: 600;
    margin-top: 0.25rem;
}
.utf32-vis-binary-row {
    margin-top: 1rem;
}
.utf32-binary-text {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-slate-600);
    background: var(--color-slate-200);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    letter-spacing: 0.05em;
}
.utf32-vis-serialization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}
.utf32-endian-vis-card {
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1.25rem;
    background: var(--color-white);
}
.utf32-endian-vis-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.utf32-endian-sub {
    font-size: 0.8rem;
    color: var(--color-slate-500);
}
.utf32-byte-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.utf32-byte-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 6px;
    padding: 0.5rem 0.25rem;
    text-align: center;
}
.utf32-byte-index {
    font-size: 0.65rem;
    color: var(--color-slate-500);
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}
/* Round 59 (59-D): the four nowrap byte-index labels ("B₀ (Bits 31..24)" etc.)
   forced the endian visualization card to 381px inside a ~295px mobile section
   (75px page-level scroll at 375px). At phone widths, wrap the labels and let
   the byte boxes flow 2×2. */
@media (max-width: 480px) {
    .utf32-byte-index {
        white-space: normal;
    }
    .utf32-byte-boxes {
        grid-template-columns: repeat(2, 1fr);
    }
}
.utf32-byte-hex {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf32-byte-stream-summary {
    font-size: 0.85rem;
    color: var(--color-slate-700);
    background: var(--color-slate-100);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

/* Dual-Mode Inspector */
.utf32-inspector-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.utf32-tool-tabs {
    display: flex;
    background: var(--color-slate-50);
    border-bottom: 1px solid var(--color-slate-200);
}
.utf32-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-slate-500);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf32-tab-btn:hover {
    color: var(--color-slate-900);
    background: var(--color-slate-100);
}
.utf32-tab-btn.active {
    color: var(--color-brand-600);
    border-bottom-color: var(--color-brand-600);
    background: var(--color-white);
}
.utf32-tab-panel {
    padding: 1.5rem;
}
.utf32-tab-panel[hidden] {
    display: none;
}
.utf32-input-row {
    margin-bottom: 1rem;
}
.utf32-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate-700);
    margin-bottom: 0.5rem;
}
.utf32-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.utf32-text-field {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1.1rem;
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-slate-900);
    outline: none;
    transition: border-color 0.15s ease;
}
.utf32-text-field:focus {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.utf32-mono-input {
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.utf32-clear-btn {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-slate-500);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.utf32-clear-btn:hover {
    color: var(--color-slate-600);
}
.utf32-presets-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.utf32-presets-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf32-presets-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.utf32-preset-pill {
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf32-preset-pill:hover {
    background: var(--color-slate-200);
    color: var(--color-slate-900);
}
.utf32-preset-pill.active {
    background: var(--color-brand-50);
    border-color: var(--color-brand-200);
    color: var(--color-brand-700);
    font-weight: 600;
}
.utf32-pill-danger {
    background: var(--color-danger-50);
    border-color: var(--color-red-200);
    color: var(--color-danger-700);
}
.utf32-pill-danger:hover {
    background: var(--color-red-100);
}
.utf32-view-selector-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.utf32-selector-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf32-view-pills {
    display: inline-flex;
    background: var(--color-slate-100);
    padding: 0.2rem;
    border-radius: 8px;
    gap: 0.2rem;
}
.utf32-view-pill {
    background: transparent;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-slate-500);
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf32-view-pill:hover {
    color: var(--color-slate-900);
}
.utf32-view-pill.active {
    background: var(--color-white);
    color: var(--color-brand-600);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.utf32-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.utf32-metric-pill {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}
.utf32-metric-lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
    margin-bottom: 0.2rem;
}
.utf32-metric-pill strong {
    font-size: 1.35rem;
    color: var(--color-slate-900);
}
.utf32-stream-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.utf32-stream-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.utf32-stream-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
}
.utf32-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-700);
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.utf32-copy-btn:hover {
    border-color: var(--color-brand-600);
    color: var(--color-brand-600);
}
.utf32-copy-btn.copied {
    background: var(--color-emerald-50);
    border-color: var(--color-success-700);
    color: var(--color-success-700);
}
.utf32-stream-value code {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    letter-spacing: 0.05em;
    word-break: break-all;
}

/* Character Breakdown Cards */
.utf32-chars-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.utf32-char-card {
    display: flex;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.utf32-char-card:hover {
    border-color: var(--color-slate-300);
}
.utf32-char-glyph-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    background: var(--color-slate-50);
    border-right: 1px solid var(--color-slate-200);
    padding: 1rem;
}
.utf32-char-glyph {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.utf32-char-cp {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf32-char-details-col {
    flex: 1;
    padding: 1rem 1.25rem;
}
.utf32-char-meta-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.utf32-units-grid {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.utf32-unit-slot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.utf32-slot-lbl {
    font-size: 0.75rem;
    color: var(--color-slate-500);
    font-weight: 600;
}
.utf32-slot-hex {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
}
.utf32-slot-bytes {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* Validator Diagnostics */
.utf32-validator-results {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-slate-200);
}
.utf32-val-status-bar {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.utf32-val-pass {
    background: var(--color-emerald-50);
    border-bottom: 1px solid var(--color-emerald-300);
}
.utf32-val-fail {
    background: var(--color-danger-50);
    border-bottom: 1px solid var(--color-red-200);
}
.utf32-val-neutral {
    background: var(--color-slate-50);
    border-bottom: 1px solid var(--color-slate-200);
}
.utf32-val-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
}
.utf32-val-pass .utf32-val-badge {
    background: var(--color-emerald-700);
    color: var(--color-white);
}
.utf32-val-fail .utf32-val-badge {
    background: var(--color-red-600);
    color: var(--color-white);
}
.utf32-val-neutral .utf32-val-badge {
    background: var(--color-slate-500);
    color: var(--color-white);
}
.utf32-val-summary {
    font-size: 0.95rem;
    font-weight: 600;
}
.utf32-val-pass .utf32-val-summary {
    color: var(--color-emerald-800);
}
.utf32-val-fail .utf32-val-summary {
    color: var(--color-red-800);
}
.utf32-val-neutral .utf32-val-summary {
    color: var(--color-slate-700);
}
.utf32-val-body {
    padding: 1.25rem;
    background: var(--color-white);
}
.utf32-val-preview-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.utf32-val-preview-lbl {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf32-val-preview-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-slate-900);
}
.utf32-val-explanation {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-slate-600);
}

/* Examples Grid */
.utf32-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf32-example-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: all 0.15s ease;
}
.utf32-example-card:hover {
    border-color: var(--color-slate-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.utf32-card-header-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}
.utf32-card-glyph-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
}
.utf32-card-char {
    font-size: 1.75rem;
    line-height: 1;
}
.utf32-card-info {
    flex: 1;
    min-width: 0;
}
.utf32-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.utf32-card-cat {
    font-size: 0.75rem;
    color: var(--color-slate-500);
}
.utf32-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.utf32-prop-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
}
.utf32-prop-lbl {
    color: var(--color-slate-500);
}
.utf32-prop-cp {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-slate-900);
}
.utf32-prop-code {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-brand-700);
}
.utf32-prop-sub {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-slate-600);
}
.utf32-prop-badges {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}
.utf32-card-notes {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* Formulas & Endianness */
.utf32-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.utf32-formula-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf32-formula-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.25rem;
}
.utf32-formula-desc {
    font-size: 0.825rem;
    color: var(--color-slate-500);
    margin: 0 0 0.75rem;
}
.utf32-formula-code-box {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.825rem;
    color: var(--color-slate-800);
}

/* Callout Box */
.utf32-callout-box {
    background: var(--color-slate-50);
    border-left: 4px solid var(--color-brand-600);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.utf32-callout-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf32-callout-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-slate-600);
    margin: 0;
}
.utf32-callout-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-slate-600);
    line-height: 1.6;
}

/* BOM Section */
.utf32-bom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.utf32-bom-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf32-bom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.utf32-bom-codepoint {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-slate-500);
}
.utf32-bom-bytes-display {
    text-align: center;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.utf32-bom-bytes-display code {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-slate-900);
}
.utf32-bom-notes {
    font-size: 0.825rem;
    color: var(--color-slate-500);
    margin: 0;
    line-height: 1.4;
}

/* Validation Rules Grid */
.utf32-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.utf32-rule-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf32-rule-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.utf32-rule-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0;
}
.utf32-rule-range {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    margin-bottom: 0.5rem;
}
.utf32-rule-desc {
    font-size: 0.85rem;
    color: var(--color-slate-600);
    margin: 0;
    line-height: 1.5;
}
.utf32-subtable-wrap {
    margin-top: 1.5rem;
}

/* Architectural Concept Notes */
.utf32-concepts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.utf32-concept-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 10px;
    padding: 1.25rem;
}
.utf32-concept-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf32-concept-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-slate-600);
    margin: 0;
}

/* Links and Tools */
.utf32-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.utf32-col-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1rem;
}
.utf32-nav-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.utf32-nav-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 8px;
    padding: 1rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.utf32-nav-card:hover {
    border-color: var(--color-brand-600);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.utf32-nav-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.25rem;
}
.utf32-nav-card-desc {
    font-size: 0.825rem;
    color: var(--color-slate-500);
    line-height: 1.4;
}

/* Standards Note */
.utf32-standards-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 12px;
    padding: 1.5rem;
}
.utf32-standards-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.utf32-standards-intro {
    font-size: 0.9rem;
    color: var(--color-slate-600);
    margin: 0 0 1rem;
}
.utf32-standards-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-slate-700);
    line-height: 1.6;
}
.utf32-std-link {
    color: var(--color-brand-600);
    text-decoration: none;
}
.utf32-std-link:hover {
    text-decoration: underline;
}

/* Responsive Overrides */
@media (max-width: 768px) {.utf32-formula-grid,
.utf32-bom-grid,
.utf32-links-grid {
        grid-template-columns: 1fr;
    }
.utf32-vis-serialization-grid {
        grid-template-columns: 1fr;
    }
.utf32-tool-tabs {
        flex-direction: column;
    }
.utf32-tab-btn {
        border-bottom: none;
        border-left: 3px solid transparent;
        padding: 0.65rem 1rem;
    }
.utf32-tab-btn.active {
        border-bottom-color: transparent;
        border-left-color: var(--color-brand-600);
    }
}

/* ==========================================================================
   HTML Entities & Character References Section (/encoding/html-entities/)
   WHATWG HTML Living Standard §13.5 & Unicode 16.0
   ========================================================================== */
.html-entities-page-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Header & Hero */
.html-entities-header-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.html-entities-hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.html-entities-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}
.html-entities-badge-primary {
    background: var(--color-indigo-100);
    color: var(--color-indigo-700);
    border: 1px solid var(--color-indigo-200);
}.html-entities-badge-neutral {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.html-entities-main-heading {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: -0.025em;
}
.html-entities-hero-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 960px;
    margin: 0;
}
.html-entities-hero-lead strong {
    color: var(--text-primary);
}
.html-entities-hero-lead code {
    font-family: var(--font-mono);
    background: var(--color-indigo-50);
    color: var(--color-indigo-600);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}
/* Stats Bar */
.html-entities-stats-bar {
    display: grid;
    /* Round 59 (320px residual): 200px floor + card padding overflowed 320px
       phones by 29px; stat labels wrap at the tighter floor. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.html-entities-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.html-entities-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}
.html-entities-stat-num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.html-entities-stat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Sections Common */
.html-entities-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.html-entities-section-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.html-entities-section-heading {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    margin: 0;
}
.html-entities-section-lead {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 960px;
    margin: 0;
}
.html-entities-section-lead strong {
    color: var(--text-primary);
}
.html-entities-subheading {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
}
.html-entities-sublead {
    font-size: 0.925rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

/* Search Box & Category Filters */
.html-entities-search-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.html-entities-search-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.html-entities-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.html-entities-search-icon {
    position: absolute;
    left: 1.25rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.html-entities-search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 3.25rem;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.html-entities-search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.html-entities-search-input::placeholder {
    color: var(--text-secondary);
    font-size: 0.925rem;
}
.html-entities-search-clear {
    position: absolute;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.html-entities-search-clear:hover {
    color: var(--text-primary);
}
.html-entities-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.html-entities-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.html-entities-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.html-entities-chip {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.html-entities-chip:hover {
    color: var(--text-primary);
    border-color: var(--color-slate-500);
    background: rgba(255, 255, 255, 0.03);
}
.html-entities-chip.active {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.html-entities-search-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-top: 0.25rem;
}
.html-entities-search-status strong {
    color: var(--text-primary);
}

/* Common References Grid */
.html-entities-common-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.html-entities-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.html-entities-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.html-entities-card-top {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.html-entities-card-glyph {
    width: 52px;
    height: 52px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}
.html-entities-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow: hidden;
}
.html-entities-card-desc {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.html-entities-card-cp {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}
.html-entities-card-formats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg-primary);
    padding: 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.html-entities-format-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.html-entities-format-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    width: 44px;
    flex-shrink: 0;
}
.html-entities-copy-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-align: left;
}
.html-entities-copy-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}
.html-entities-copy-btn code {
    font-family: var(--font-mono);
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-indigo-600);
}.html-entities-copy-btn .copy-hint {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.html-entities-copy-btn:hover .copy-hint {
    opacity: 1;
}
.html-entities-copy-btn.copied {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}
.html-entities-copy-btn.copied code {
    color: var(--color-emerald-700);
}
.html-entities-copy-btn.copied .copy-hint {
    opacity: 1;
    color: var(--color-emerald-700);
}

/* Tables & Directory */
.html-entities-table-responsive {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    -webkit-overflow-scrolling: touch;
}
.html-entities-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}
.html-entities-table th {
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.html-entities-table td {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}
.html-entities-table tr:last-child td {
    border-bottom: none;
}
.html-entities-table tr:hover td {
    background: var(--color-slate-100);
}.html-entities-glyph-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1.35rem;
    font-weight: 600;
}
.html-entities-copy-inline {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
}
.html-entities-copy-inline:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}
.html-entities-copy-inline code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-indigo-600);
}.badge-multi-cp {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber-800);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.html-entities-cat-badge {
    font-size: 0.75rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.html-entities-unicode-link {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.html-entities-unicode-link:hover code {
    color: var(--accent-color);
    text-decoration: underline;
}
.html-entities-action-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.html-entities-action-btn:hover {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
}
.html-entities-none-tag {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* Pagination Bar */
.html-entities-pagination-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
}
.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.pagination-info strong {
    color: var(--text-primary);
}
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.pagination-btn,
.pagination-page-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pagination-btn:hover:not(:disabled),
.pagination-page-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-slate-500);
}
.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pagination-page-btn.active {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
    font-weight: 700;
}
.pagination-ellipsis {
    color: var(--text-secondary);
    padding: 0 0.25rem;
}
.pagination-pages-list {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Context Matrix Cards */
.html-entities-context-matrix {
    margin-top: 1rem;
}
.html-entities-context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.html-entities-context-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.context-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.context-card-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.context-badge {
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}
.context-badge-element {
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-indigo-700);
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.context-badge-attr {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-emerald-700);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.context-badge-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-700);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.context-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}
.context-card-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.825rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.context-card-list strong {
    color: var(--text-primary);
}
.context-card-list code {
    font-family: var(--font-mono);
    color: var(--color-indigo-700);
}

/* Comparison Cards */
.html-entities-comparison-cards {
    display: grid;
    /* Round 59 (320px residual): 300px floor overflowed 320px phones. */
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.html-entities-info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.info-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.info-card-icon {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-indigo-700);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.info-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.html-entities-info-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}
.html-entities-info-card ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.html-entities-info-card ul li {
    margin-bottom: 0.5rem;
}
.html-entities-info-card ul li strong {
    color: var(--text-primary);
}

/* Multi-Codepoint Section */
.html-entities-multi-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.multi-box-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.multi-box-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber-800);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.multi-box-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.multi-box-takeaways {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.multi-box-takeaways h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.multi-takeaway-grid {
    display: grid;
    /* Round 59 (320px residual): 280px floor overflowed 320px phones. */
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1.25rem;
}
.multi-takeaway-item strong {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.35rem;
}
.multi-takeaway-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Escaping Guidance Grid */
.html-entities-guidance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.5rem;
}
.guidance-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.guidance-card-header {
    display: flex;
    align-center: center;
    gap: 0.75rem;
}
.guidance-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.guidance-card-recommended .guidance-icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-emerald-700);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.guidance-card-warning .guidance-icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber-700);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.guidance-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.guidance-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.guidance-code-example {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.code-line {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.code-comment {
    color: var(--color-slate-500);
    font-size: 0.75rem;
}
.line-good code {
    color: var(--color-emerald-700);
}
.line-bad code {
    color: var(--color-danger-700);
}
.guidance-benefits,
.guidance-scenarios {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.guidance-benefits li,
.guidance-scenarios li {
    margin-bottom: 0.4rem;
}

/* Legacy Alert */
.html-entities-legacy-alert {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.legacy-alert-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.legacy-alert-icon {
    font-size: 1.5rem;
    color: var(--color-amber-700);
}
.legacy-alert-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.legacy-alert-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.legacy-badge {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber-800);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.legacy-example-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.legacy-example-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.example-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.label-bad { color: var(--color-danger-700); }
.label-parsed { color: var(--color-amber-800); }
.label-good { color: var(--color-emerald-700); }
.legacy-footer-note {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Tool CTA Section */
.html-entities-tool-cta {
    margin: 1rem 0;
}
.tool-cta-card {
    background: linear-gradient(135deg, var(--color-indigo-50) 0%, var(--color-indigo-100) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: center;
}
.tool-cta-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tool-cta-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-indigo-700);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
}
.tool-cta-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.tool-cta-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.tool-cta-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}
.cta-feature-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn-tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-color);
    color: var(--color-white);
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}
.btn-tool-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}
.tool-cta-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-mock-window {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mock-window-header {
    background: rgba(255, 255, 255, 0.04);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}
.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot-red { background: var(--color-danger-700); }
.dot-yellow { background: var(--color-warning-700); }
.dot-green { background: var(--color-success-700); }
.mock-window-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}
.mock-window-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.mock-code-line {
    color: var(--text-primary);
}
.mock-token-tag {
    color: var(--color-indigo-700);
}
.mock-code-arrow {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}
.mock-code-result {
    color: var(--color-emerald-700);
    font-weight: 600;
}

/* Related Links Grid */
.html-entities-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.related-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.related-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
}
.related-card-badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-indigo-700);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.related-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.related-card-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}
.related-card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
}

/* Standards Note & Provenance */
.standards-provenance-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}
.provenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1.25rem;
}
.provenance-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.provenance-item.provenance-hash {
    grid-column: 1 / -1;
}
.provenance-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.provenance-value {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--text-primary);
}
.provenance-value a {
    color: var(--accent-color);
    text-decoration: none;
}
.provenance-value a:hover {
    text-decoration: underline;
}
.provenance-hash-code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-indigo-700);
    word-break: break-all;
    background: var(--bg-primary);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.standards-citations-list {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.standards-subheading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.citations-ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.citations-ul li {
    margin-bottom: 0.5rem;
}
.citations-ul strong {
    color: var(--text-primary);
}
.citations-ul a {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
}
.citations-ul a:hover {
    text-decoration: underline;
}

/* Toast Notifications */
.html-entities-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--color-slate-900);
    color: var(--color-slate-50);
    border: 1px solid var(--color-slate-700);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    z-index: var(--z-toast-max);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.html-entities-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Empty State */
.html-entities-empty-state {
    text-align: center;
    padding: 3rem 1.5rem !important;
}
.empty-state-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.empty-state-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}
.btn-reset-filters {
    margin-top: 0.75rem;
    background: var(--accent-color);
    color: var(--color-white);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-reset-filters:hover {
    background: var(--accent-hover);
}

/* Responsive Overrides */
@media (max-width: 900px) {.tool-cta-card {
        grid-template-columns: 1fr;
    }
.tool-cta-preview {
        display: none;
    }
}

@media (max-width: 640px) {.html-entities-page-container {
        padding: 1rem 0.75rem 3rem;
        gap: 2rem;
    }
.html-entities-search-section {
        padding: 1rem;
    }
.html-entities-stats-bar {
        grid-template-columns: 1fr 1fr;
    }
.html-entities-pagination-bar {
        flex-direction: column;
        align-items: stretch;
    }
.pagination-controls {
        justify-content: space-between;
        /* Round 55: the prev/next + page-number row is wider than a 375px
           viewport; allow it to wrap instead of overflowing ~94px. */
        flex-wrap: wrap;
    }
    .pagination-pages-list {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   URL Encoding & Percent-Encoding Reference Page Styles
   ========================================================================== */
.url-encoding-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}
.url-encoding-header {
    margin-bottom: 2rem;
}
.url-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.url-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    border: 1px solid transparent;
}
.url-badge-primary {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border-color: var(--color-brand-200);
}
.url-badge-secondary {
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    border-color: var(--color-slate-300);
}
.url-badge-accent {
    background: var(--color-fuchsia-50);
    color: var(--color-fuchsia-800);
    border-color: var(--color-fuchsia-200);
}
.url-badge-neutral {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
    border-color: var(--color-emerald-300);
}
.url-page-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.url-page-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 860px;
    margin: 0;
}
.url-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.url-card-header,
.url-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.url-card-title,
.url-inspector-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.url-icon {
    color: var(--color-brand-600);
    flex-shrink: 0;
}
.url-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.url-card-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* Inspector */
.url-inspector-card {
    background: var(--bg-raised);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.url-mode-toggle {
    display: flex;
    background: var(--bg-muted);
    border-radius: 9999px;
    padding: 3px;
    border: 1px solid var(--border-color);
}
.url-mode-btn {
    border: none;
    background: transparent;
    padding: 0.35rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-slate-600);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.url-mode-btn.is-active {
    background: var(--color-brand-600);
    color: var(--color-white);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.url-context-toolbar {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.url-context-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
}
.url-context-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.url-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    color: var(--color-slate-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.url-context-pill:hover {
    border-color: var(--color-slate-400);
    color: var(--color-slate-900);
}
.url-context-pill.is-active {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-white);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.url-pill-badge {
    font-size: 0.6875rem;
    opacity: 0.85;
    padding: 0.1rem 0.35rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.url-context-pill.is-active .url-pill-badge {
    background: rgba(255, 255, 255, 0.2);
}
.url-context-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0.6rem 0 0;
    line-height: 1.4;
}
.url-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.url-pane {
    display: flex;
    flex-direction: column;
}
.url-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.url-pane-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.url-input-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.url-char-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.url-btn-text {
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-slate-500);
    cursor: pointer;
    padding: 0;
}
.url-btn-text:hover {
    color: var(--color-danger-700);
}
.url-textarea-wrap,
.url-output-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.url-textarea {
    width: 100%;
    min-height: 130px;
    padding: 0.875rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9375rem;
    line-height: 1.5;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.url-textarea:focus {
    background: var(--color-white);
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.url-output-display {
    width: 100%;
    min-height: 130px;
    margin: 0;
    padding: 0.875rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9375rem;
    line-height: 1.5;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    flex-grow: 1;
}
.url-pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.url-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-brand-600);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.url-copy-btn:hover {
    background: var(--color-brand-700);
}
.url-copy-btn.is-copied {
    background: var(--color-green-600);
}
.url-byte-metric {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.url-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}
.status-valid {
    background: var(--color-emerald-50);
    color: var(--color-emerald-700);
}
.status-warning {
    background: var(--color-warning-50);
    color: var(--color-amber-700);
}
.url-warning-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--color-amber-800);
}
.url-warning-banner.is-hidden {
    display: none;
}

/* Byte Pipeline */
.url-pipeline-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}
.url-step-box {
    flex: 1;
    min-width: 150px;
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.url-step-box.is-highlight {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
}
.url-step-num {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-slate-500);
    margin-bottom: 0.25rem;
}
.url-step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.url-glyph-preview {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.url-code-val,
.url-result-val {
    font-family: monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.25rem;
}
.url-octet-chips {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.url-octet-chip {
    padding: 0.2rem 0.45rem;
    font-family: monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    background: var(--color-slate-200);
    border-radius: 4px;
    color: var(--color-slate-800);
}
.url-step-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.url-step-arrow {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-slate-400);
}

/* Callouts */
.url-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}
.url-callout-warning {
    background: var(--color-warning-50);
    border: 1px solid var(--color-amber-200);
    color: var(--color-amber-800);
}
.url-callout-info {
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    color: var(--color-brand-800);
}
.url-callout-content p {
    margin: 0.25rem 0 0;
}

/* Comparison Grid */
.url-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.url-comp-card {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-subtle);
}
.url-comp-card.is-accent {
    background: var(--color-purple-25);
    border-color: var(--color-purple-100);
}
.url-comp-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    background: var(--color-slate-200);
    color: var(--color-slate-700);
    margin-bottom: 0.5rem;
}
.url-comp-badge.is-accent {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}
.url-comp-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.url-comp-lead {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.url-comp-example {
    padding: 0.875rem;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
}
.url-example-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.url-example-row:last-child {
    margin-bottom: 0;
}
.url-example-key {
    color: var(--text-muted);
}
.url-highlight {
    font-weight: 700;
    color: var(--color-brand-600);
}
.url-comp-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.url-comp-list li {
    margin-bottom: 0.35rem;
}

/* Reference Table */
.url-reference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}
.url-reference-table thead {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
}
.url-reference-table th {
    padding: 0.75rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.url-reference-table td {
    padding: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.url-table-glyph {
    font-size: 1.25rem;
    font-weight: 700;
    display: inline-block;
    min-width: 28px;
    text-align: center;
}
.url-code-pill {
    padding: 0.2rem 0.45rem;
    font-family: monospace;
    font-size: 0.8125rem;
    border-radius: 4px;
    background: var(--bg-muted);
    color: var(--color-slate-700);
}
.url-code-comp {
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-weight: 600;
}
.url-code-form.is-plus {
    color: var(--color-purple-700);
    background: var(--color-purple-50);
    font-weight: 700;
}
.url-role-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* API Comparison */
.url-api-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.url-api-card {
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}
.url-api-card-header {
    margin-bottom: 0.75rem;
}
.url-api-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-brand-600);
    margin-bottom: 0.15rem;
}
.url-api-platform {
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.url-api-body {
    flex-grow: 1;
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.url-field-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.url-api-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.url-api-snippets {
    margin-top: 1.5rem;
}
.url-snippets-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}

/* Edge cases & Double encode */
.url-edge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
/* Round 60: children carry table-responsive scrollers whose auto-min forced
   267px tracks at 320px; scrollers must be allowed to shrink. */
.url-edge-grid > *,
.url-workspace-grid > *,
.url-comparison-grid > * {
    min-width: 0;
}
.url-edge-subtitle {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.url-edge-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.url-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.url-mini-table th,
.url-mini-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.url-table-muted {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.url-double-encode-flow {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.url-flow-box {
    padding: 0.6rem 0.875rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-300);
    border-radius: 8px;
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.url-flow-box.is-danger {
    background: var(--color-danger-50);
    border-color: var(--color-red-200);
    color: var(--color-red-800);
}
.url-flow-arrow {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-slate-400);
    font-weight: 600;
}

/* Related Links */
.url-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.url-related-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.url-related-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand-600);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.url-related-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.url-related-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.url-related-badge {
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border-radius: 4px;
}
.url-related-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.url-related-arrow {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
}

/* Source Note */
.url-source-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.url-source-item {
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}
.url-source-item:last-child {
    border-bottom: none;
}
.url-source-link {
    color: var(--color-brand-600);
    text-decoration: none;
}
.url-source-link:hover {
    text-decoration: underline;
}
.url-source-hash {
    margin-top: 0.2rem;
    font-size: 0.75rem;
}
.url-source-hash code {
    background: var(--color-slate-100);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    /* Round 59 (59-E): SHA-256 checksums are 40+ unbroken hex chars — without
       a wrap allowance they forced 122px of page-level horizontal scroll at
       375px. Technical data stays intact; only the line wrapping changes. */
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Responsive */
@media (max-width: 900px) {.url-workspace-grid,
.url-comparison-grid,
.url-edge-grid {
        grid-template-columns: 1fr;
    }
.url-pipeline-steps {
        flex-direction: column;
        align-items: stretch;
    }
.url-step-arrow {
        transform: rotate(90deg);
        text-align: center;
        margin: -0.25rem 0;
    }
}

/* ==========================================================================
   DEVELOPERS HUB STYLES (/developers/)
   ========================================================================== */
.developers-hub-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: inherit;
    color: var(--color-slate-800);
}
.dev-hub-header {
    margin-bottom: 2rem;
}
.dev-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.dev-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
    background: var(--bg-raised);
}
.dev-stat-count {
    font-weight: 700;
    font-family: var(--font-mono);
}
.dev-stat-badge-primary {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.05);
    color: var(--color-brand-600);
}
.dev-stat-badge-secondary {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.05);
    color: var(--color-success-700);
}
.dev-stat-badge-accent {
    border-color: rgba(147, 51, 234, 0.25);
    background: rgba(147, 51, 234, 0.05);
    color: var(--color-violet-600);
}
.dev-hub-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.dev-hub-intro {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 850px;
}

/* Developer Search Component */
.dev-search-section {
    margin-bottom: 2.5rem;
}
.dev-search-box-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    background: var(--bg-raised);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dev-search-box-wrapper:focus-within {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.dev-search-icon {
    font-size: 1.125rem;
    margin-right: 0.65rem;
    opacity: 0.6;
    pointer-events: none;
}
.dev-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: inherit;
    font-family: inherit;
}
.dev-search-input::placeholder {
    color: var(--text-muted);
}
.dev-search-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dev-search-clear {
    background: transparent;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.dev-search-clear:hover {
    background: var(--color-slate-100);
    color: var(--color-slate-900);
}
.dev-search-kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-300);
    border-radius: 4px;
    line-height: 1;
}

/* Search Results Panel */
.dev-search-results {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border-color);
}
.dev-search-results-header {
    margin-bottom: 1rem;
}
.dev-search-results-count {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
}
.dev-search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}
.dev-search-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--bg-raised);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}
.dev-search-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}
.dev-search-empty h3 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}
.dev-search-empty p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
}
.dev-search-empty code {
    background: var(--color-slate-100);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--color-brand-600);
}

/* Sections */
.dev-section {
    margin-bottom: 3rem;
}
.dev-section-header {
    margin-bottom: 1.25rem;
}
.dev-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}
.dev-section-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

/* Start by Task Grid */
.dev-task-grid {
    display: grid;
    /* Round 62: minmax(0,·) — plain 1fr tracks blew out to 207px cards in a
     * 160px container (63px page overflow @240) */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.dev-task-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.dev-task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--color-brand-600);
}
.dev-task-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.dev-task-icon {
    font-size: 1.35rem;
}
.dev-task-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--color-slate-100);
    color: var(--text-muted);
}
.dev-task-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.dev-task-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
    flex: 1;
}
.dev-task-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-slate-100);
}
.dev-arrow {
    transition: transform 0.15s ease;
}
.dev-task-card:hover .dev-arrow,
.dev-language-card:hover .dev-arrow,
.dev-guide-card:hover .dev-arrow,
.dev-tool-card:hover .dev-arrow {
    transform: translateX(4px);
}

/* Programming Language Grid */
.dev-language-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.dev-language-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.dev-language-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--color-brand-600);
}
.dev-language-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.dev-language-badge {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--color-slate-900);
    color: var(--color-white);
}
.dev-language-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}
.dev-language-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--text-primary);
}
.dev-language-scope {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
    flex: 1;
}
.dev-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-slate-100);
}

/* Guide Grid (Featured, Concepts, Encodings) */
.dev-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.dev-guide-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* Round 60: fixed 2-col tracks adopted the card auto-min (286px) and pushed
   the hub 6px wide at 320px; single column + shrinkable cards below 640px. */
@media (max-width: 640px) {
    .dev-guide-grid,
    .dev-guide-grid-3 {
        grid-template-columns: 1fr;
    }
    .dev-guide-card {
        min-width: 0;
    }
    .dev-guide-card-header {
        flex-wrap: wrap;
    }
}
.dev-guide-card {
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.dev-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: var(--color-brand-600);
}
.dev-guide-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.dev-guide-type-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--color-slate-100);
    color: var(--color-slate-700);
}
.dev-badge-encoding {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success-700);
}
.dev-badge-tool {
    background: rgba(147, 51, 234, 0.1);
    color: var(--color-violet-600);
}
.dev-badge-guide {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-brand-600);
}
.dev-guide-lang-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: var(--color-slate-900);
    color: var(--color-white);
}
.dev-guide-version-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.dev-guide-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.5rem;
}
.dev-guide-title a {
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.dev-guide-title a:hover {
    color: var(--color-brand-600);
}
.dev-guide-icon {
    flex-shrink: 0;
    font-size: 1.15rem;
}
.dev-guide-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    flex: 1;
}
.dev-guide-footer {
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-slate-100);
}
.dev-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
}
.dev-guide-link:hover {
    text-decoration: underline;
}

/* Developer Tools Grid */
.dev-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.dev-tool-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.dev-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--color-brand-600);
}
.dev-tool-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.dev-tool-icon {
    font-size: 1.35rem;
}
.dev-tool-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(147, 51, 234, 0.1);
    color: var(--color-violet-600);
}
.dev-tool-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.4rem;
    color: var(--text-primary);
}
.dev-tool-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 1rem;
    flex: 1;
}
.dev-tool-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-violet-600);
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-slate-100);
}

/* Provenance Card */
.dev-provenance-card {
    padding: 1.5rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.dev-provenance-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dev-provenance-icon {
    font-size: 1.75rem;
    line-height: 1;
}
.dev-provenance-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--text-primary);
}
.dev-provenance-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.dev-provenance-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-slate-100);
}
.dev-provenance-item {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.dev-provenance-name {
    font-weight: 600;
    color: var(--text-primary);
}
.dev-provenance-link {
    color: var(--color-brand-600);
    text-decoration: none;
    margin-left: 0.25rem;
}
.dev-provenance-link:hover {
    text-decoration: underline;
}

/* Responsive Rules */
@media (max-width: 1024px) {.dev-task-grid,
.dev-language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.dev-guide-grid-3,
.dev-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {.dev-task-grid,
.dev-language-grid,
.dev-guide-grid,
.dev-guide-grid-3,
.dev-tools-grid,
.dev-search-results-grid {
        grid-template-columns: minmax(0, 1fr);
    }
.dev-badge-row {
        gap: 0.35rem;
    }
.dev-search-kbd {
        display: none;
    }
}

/* ==========================================================================
   Individual Developer Guide System Styles
   Standards-backed, intent-aware, responsive developer documentation
   ========================================================================== */
.dev-guide-article {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}
.dev-guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
}

/* show.php ships the TOC <aside class="dev-guide-sidebar"> before
   <main class="dev-guide-main-content">, so grid auto-placement was
   putting the article into the narrow 280px rail and the TOC into the
   wide column. Re-order placement: article in the 1fr column, sticky
   TOC in the 280px right rail. */
.dev-guide-main-content {
    order: -1;
    min-width: 0;
}

.dev-guide-sidebar {
    min-width: 0;
}

/* Header & Meta */
.dev-guide-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.dev-guide-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0.5rem 0 1rem;
    letter-spacing: -0.02em;
}
.dev-guide-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.dev-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 500;
}
.dev-meta-pill-primary {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-200);
}

/* Direct Answer / Solution Box (First Screen UX) */
.dev-direct-answer-card {
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-left: 4px solid var(--color-brand-500);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dev-direct-answer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-brand-100);
    color: var(--color-brand-800);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.dev-direct-answer-summary {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

/* Code Blocks & Copy Snippets */
.dev-code-block-container {
    background: var(--color-slate-900);
    border-radius: 8px;
    margin: 1.25rem 0;
    overflow: hidden;
    border: 1px solid var(--color-slate-800);
}
.dev-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: var(--color-slate-800);
    border-bottom: 1px solid var(--color-slate-700);
}
.dev-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-slate-700);
    color: var(--color-slate-100);
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.dev-copy-btn:hover {
    background: var(--color-slate-600);
}
.dev-copy-btn.copied {
    background: var(--color-emerald-700);
    color: var(--color-white);
}
.dev-code-pre {
    margin: 0;
    padding: 1.25rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-slate-50);
    background: transparent;
}
.dev-code-pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Pattern Comparison (Anti-Pattern vs Recommended) */
.dev-pattern-card {
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}
.dev-pattern-bad {
    background: var(--color-red-50);
    border-color: var(--color-red-200);
}
.dev-pattern-good {
    background: var(--color-success-50);
    border-color: var(--color-green-200);
}
.dev-pattern-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.dev-pattern-bad .dev-pattern-tag {
    background: var(--color-red-100);
    color: var(--color-red-800);
}
.dev-pattern-good .dev-pattern-tag {
    background: var(--color-green-100);
    color: var(--color-green-800);
}
.dev-pattern-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

/* Edge Cases & Matrix Table */
.dev-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}
.dev-matrix-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}
.dev-matrix-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
}
.dev-matrix-table tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

/* Sticky Table of Contents (TOC) */
.dev-toc-aside {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.dev-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dev-toc-item {
    margin-bottom: 0.6rem;
}
.dev-toc-link {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.2rem 0;
    transition: color 0.15s ease, padding-left 0.15s ease;
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
}
.dev-toc-link:hover {
    color: var(--color-brand-600);
    padding-left: 0.75rem;
}
.dev-toc-link.active {
    color: var(--color-brand-600);
    font-weight: 600;
    border-left-color: var(--color-brand-600);
}

/* Section Containers */
.dev-guide-section {
    margin: 3rem 0;
    scroll-margin-top: 5.5rem;
}
.dev-guide-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.dev-guide-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.75rem 0 0.75rem;
}
.dev-guide-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

/* Standards & Provenance Card */
.dev-standards-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2.5rem 0;
}

/* Related Guides Grid */
.dev-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.dev-related-card {
    display: block;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dev-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-brand-500);
}
.dev-related-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.dev-related-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Interactive Sandbox Card */
.dev-sandbox-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.dev-sandbox-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-raised);
    color: var(--text-primary);
}

/* Responsive Rules for Developer Guides */
@media (max-width: 1024px) {.dev-guide-layout {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 1.75rem;
    }
}

@media (max-width: 860px) {.dev-guide-layout {
        grid-template-columns: 1fr;
    }
.dev-toc-aside {
        display: none;
    }
.dev-guide-title {
        font-size: 1.85rem;
    }
}

/* ==================================================
   LANGUAGES HUB DESIGN SYSTEM (/languages/)
   ================================================== */
.languages-hub-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}
.languages-hero-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.5rem;
}
.languages-hero-h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.languages-hero-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 auto 1.5rem;
}
.languages-stats-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.languages-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.825rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.languages-stat-primary strong { color: var(--color-brand-600); }
.languages-stat-secondary strong { color: var(--color-success-700); }
.languages-stat-accent strong { color: var(--color-violet-600); }

/* Search Section */
.languages-search-section {
    margin: 0 auto 3rem;
    max-width: 720px;
}
.languages-search-container {
    position: relative;
}
.languages-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.languages-search-icon {
    position: absolute;
    left: 1.1rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.languages-search-input {
    width: 100%;
    padding: 0.95rem 4.5rem 0.95rem 3rem;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-raised);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.languages-search-input:focus {
    outline: none;
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.languages-search-actions {
    position: absolute;
    right: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.languages-search-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.4rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.languages-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-slate-200);
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-slate-600);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.languages-search-clear:hover {
    background: var(--color-slate-300);
    color: var(--color-slate-900);
}
.languages-no-results {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-top: 1.5rem;
}

/* Sections & Grids */
.languages-section-header {
    margin-bottom: 1.5rem;
}
.languages-section-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.languages-section-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}
.languages-popular-section {
    margin-bottom: 3.5rem;
}
.languages-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1.25rem;
}

/* Individual Language Card */
.language-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.language-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--color-brand-500);
}
.language-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.language-card-title-wrap {
    flex: 1;
}
.language-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.language-card-name a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.language-card-name a:hover {
    color: var(--color-brand-600);
}
.language-card-autonym {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.language-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}
.language-script-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-info-700);
    background: var(--color-sky-100);
    border: 1px solid var(--color-sky-200);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.language-script-badge:hover {
    background: var(--color-info-700);
    color: var(--color-white);
    border-color: var(--color-info-700);
}
.language-multiscript-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-violet-700);
    background: var(--color-violet-100);
    border: 1px solid var(--color-violet-200);
    border-radius: 6px;
}

/* Previews Area */
.language-card-body {
    flex: 1;
    margin-bottom: 1.25rem;
}
.language-char-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.language-char-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
.language-char-chip:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
    border-color: var(--color-brand-600);
    transform: scale(1.1);
}
.language-char-chip.chip-copied {
    background: var(--color-emerald-700);
    color: var(--color-white);
    border-color: var(--color-emerald-700);
}

/* Card Footer */
.language-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.825rem;
}
.language-card-count {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.language-card-link {
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
    transition: color 0.15s ease;
}
.language-card-link:hover {
    color: var(--color-brand-700);
    text-decoration: underline;
}

/* Script Browser */
.languages-script-browser {
    margin-bottom: 3.5rem;
}
.languages-script-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.languages-script-pill-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    background: var(--bg-raised);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.languages-script-pill-group:hover {
    border-color: var(--color-brand-500);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.languages-script-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.languages-script-pill.active {
    background: var(--color-brand-600);
    color: var(--color-white);
}
.languages-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.08);
}
.languages-script-pill.active .languages-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}
.languages-script-hub-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.55rem;
    background: rgba(0, 0, 0, 0.02);
    border-left: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}
.languages-script-hub-link:hover {
    background: var(--color-info-700);
    color: var(--color-white);
}

/* Alphabetical Directory & A-Z Nav */
.languages-directory-section {
    margin-bottom: 4rem;
}
.languages-az-nav {
    position: sticky;
    top: 70px;
    z-index: var(--z-sticky-local);
    background: var(--bg-primary);
    padding: 0.75rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}
.languages-az-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}
.languages-az-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.12s ease;
}
.languages-az-link.active:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
}
.languages-az-link.disabled {
    color: var(--color-slate-300);
    cursor: default;
}
.languages-letter-group {
    margin-bottom: 3rem;
    scroll-margin-top: 130px;
}
.languages-letter-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.languages-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-slate-900);
    color: var(--color-white);
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 8px;
}
.languages-letter-rule {
    flex: 1;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* Clarification Box */
.languages-clarification-section {
    margin-bottom: 3rem;
}
.languages-clarification-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-brand-500);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.languages-clarification-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.languages-clarification-icon {
    font-size: 2rem;
    line-height: 1;
}
.languages-clarification-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.languages-clarification-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}
.languages-clarification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
}
.languages-clarification-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}
.languages-clarification-term {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin: 0 0 0.35rem;
}
.languages-clarification-def {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Provenance Footnote */
.languages-provenance-footer {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}
.languages-provenance-text {
    margin: 0 0 0.25rem;
}
.languages-provenance-subtext {
    margin: 0;
}

/* Copy Toast */
.languages-copy-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: var(--z-toast-high);
    padding: 0.75rem 1.25rem;
    background: var(--color-slate-900);
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: toastFadeIn 0.2s ease;
}

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

/* Mobile Responsiveness */
@media (max-width: 768px) {.languages-hero-h1 {
        font-size: 1.85rem;
    }
.languages-card-grid {
        grid-template-columns: 1fr;
    }
.languages-search-input {
        padding-right: 3rem;
    }
.languages-search-shortcut {
        display: none;
    }
.languages-clarification-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   Language Detail Pages (/languages/{language}/) Design System
   ========================================================================== */
.language-detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* Header */
.language-detail-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.75rem;
}
.language-detail-header-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
.language-detail-h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.language-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.language-autonym-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid rgba(99, 102, 241, 0.25);
}
.language-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid var(--border-color);
}
.language-detail-intro {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 860px;
    margin: 0;
}

/* Script Selector */
.language-script-selector-section {
    margin-bottom: 2.5rem;
}
.language-script-selector-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.language-script-selector-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.language-script-selector-label svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.language-script-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.language-script-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.language-script-tab:hover {
    border-color: var(--accent-color);
    transform: translateY(-1px);
}
.language-script-tab.active {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
}
.language-script-tab.active .script-tab-native {
    color: rgba(255, 255, 255, 0.85);
}
.script-tab-native {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.script-tab-default-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Distinctive Characters Grid */
.language-distinctive-section {
    margin-bottom: 3rem;
}
.section-header-compact {
    margin-bottom: 1.25rem;
}
.language-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    color: var(--text-primary);
}
.section-hint {
    font-size: 0.88rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    min-width: 0;
}
.language-distinctive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.language-distinctive-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.2s ease;
}
.language-distinctive-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.distinctive-glyph-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}
.distinctive-glyph-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 48px;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.distinctive-glyph-btn:hover {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
    transform: scale(1.05);
}
.distinctive-glyph-btn:active {
    transform: scale(0.95);
}
.glyph-main {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.glyph-pair {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}
.distinctive-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.distinctive-unicode-link {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}
.distinctive-unicode-link:hover {
    color: var(--accent-color);
}

/* Character Repertoire Grids */
.language-characters-section {
    margin-bottom: 3.5rem;
}
.section-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.section-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}
.language-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.character-filter-wrap {
    /* Round 61: 240px floor pushed language pages 40px wide at 240px viewports. */
    min-width: 0;
    flex: 1 1 14rem;
}
.character-quick-filter {
    width: 100%;
    padding: 0.5rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
    transition: border-color 0.2s ease;
}
.character-quick-filter:focus {
    outline: none;
    border-color: var(--accent-color);
}
.language-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.65rem;
}
.language-char-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
}
.language-char-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-1px);
}
.char-box-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}
.char-box-glyph-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    min-width: 36px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.char-box-glyph-btn:hover {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
}
.char-box-glyph {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}
.char-box-glyph-upper {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
}
.char-box-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.char-box-code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65px;
}
.char-box-link {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
}
.char-box-link:hover {
    color: var(--accent-color);
}

/* Punctuation Section */
.language-punctuation-section {
    margin-bottom: 3.5rem;
}
.language-punctuation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
}
.punctuation-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.15s ease;
}
.punctuation-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-1px);
}
.punctuation-glyph-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.15s ease;
}
.punctuation-glyph-btn:hover {
    background: var(--accent-color);
    color: var(--color-white);
    border-color: var(--accent-color);
}
.punctuation-info {
    flex-grow: 1;
    min-width: 0;
}
.punct-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}
.punct-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
}
.punct-link {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
}
.punct-link:hover {
    color: var(--accent-color);
}

/* Input Methods Section */
.language-input-methods-section {
    margin-bottom: 3.5rem;
}
.input-methods-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.input-platform-tabs {
    display: flex;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}
.input-platform-tab {
    padding: 0.85rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.input-platform-tab:hover {
    color: var(--text-primary);
}
.input-platform-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background: var(--bg-secondary);
}
.input-platform-panel {
    display: none;
    padding: 1.5rem;
}
.input-platform-panel.active {
    display: block;
}
.platform-notice {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}
.platform-notice svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.shortcuts-table-wrap {
    overflow-x: auto;
}
.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.shortcuts-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
}
.shortcuts-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.shortcuts-table tr:last-child td {
    border-bottom: none;
}
.shortcut-char {
    font-size: 1.2rem;
    font-weight: 700;
}
.shortcut-code code {
    background: var(--bg-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-family: monospace;
    font-size: 0.88rem;
}
.shortcut-type {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Typewriter Pad */
.language-typewriter-section {
    margin-bottom: 3.5rem;
}
.typewriter-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}
.typewriter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.typewriter-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
}
.typewriter-title svg {
    color: var(--accent-color);
}
.typewriter-subtitle {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
}
.typewriter-actions {
    display: flex;
    gap: 0.5rem;
}
.typewriter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.typewriter-btn.primary {
    background: var(--accent-color);
    color: var(--color-white);
    border: 1px solid var(--accent-color);
}
.typewriter-btn.primary:hover {
    background: var(--accent-hover);
}
.typewriter-btn.secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.typewriter-btn.secondary:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.typewriter-textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.typewriter-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}
.typewriter-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Disambiguation Note */
.language-script-disambiguation-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 3rem;
}
.disambiguation-icon svg {
    color: var(--accent-color);
    margin-top: 0.2rem;
}
.disambiguation-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}
.disambiguation-link {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: underline;
}

/* Related References */
.language-related-references {
    margin-bottom: 3.5rem;
}
.related-refs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}
.related-ref-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.ref-card-category {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.ref-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}
.ref-card-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    flex-grow: 1;
    line-height: 1.5;
}
.ref-card-link {
    color: var(--accent-color);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.ref-card-link:hover {
    text-decoration: underline;
}
.related-lang-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.related-lang-pill {
    display: inline-flex;
    padding: 0.35rem 0.85rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.related-lang-pill:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Provenance Note */
.language-detail-provenance {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    margin-top: 2rem;
}
.provenance-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}
.provenance-inner svg {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.provenance-link {
    color: var(--accent-color);
    text-decoration: underline;
}

/* RTL Language Handling */
[data-direction="rtl"] .char-box-glyph,
[data-direction="rtl"] .glyph-main,
[data-direction="rtl"] .punct-glyph {
    direction: rtl;
    unicode-bidi: isolate;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {.language-detail-h1 {
        font-size: 1.75rem;
    }
.language-distinctive-grid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    }
.language-char-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
.character-filter-wrap {
        width: 100%;
    }
.typewriter-header {
        flex-direction: column;
    }
.typewriter-actions {
        width: 100%;
    }
.typewriter-btn {
        flex-grow: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   Trust Center, Legal, Privacy & Compliance Layer Styles
   ========================================================================== */
.trust-page-hero {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
}
.trust-breadcrumbs {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}
.trust-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--text-secondary);
}
.trust-breadcrumb-item a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
}
.trust-breadcrumb-item a:hover {
    text-decoration: underline;
}
.trust-breadcrumb-sep {
    margin: 0 0.2rem;
    opacity: 0.5;
}
.trust-hero-content {
    max-width: 900px;
}
.trust-meta-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.trust-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trust-badge-primary {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent-color);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.trust-badge-version {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.trust-hero-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.trust-hero-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.trust-hero-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.trust-date-sep {
    opacity: 0.5;
}
.trust-changelog-note {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 6px 6px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Two-column layout with sticky TOC */
.trust-layout-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 3.5rem;
}
/* Round 55: grid items default to min-width: auto, so the trust data
   table's min-content (~678px) blew the 1fr track out to 678px even in
   the stacked mobile layout, producing a 327px horizontal scrollbar on
   every trust/legal page below 900px. min-width: 0 lets the table's own
   .trust-table-wrapper (overflow-x: auto) scroll internally instead. */
.trust-layout-grid > .trust-sidebar,
.trust-layout-grid > .trust-article-content {
    min-width: 0;
}

.trust-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.trust-toc {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.trust-toc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.trust-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.trust-toc-link {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: var(--transition);
    line-height: 1.4;
}
.trust-toc-link:hover,
.trust-toc-link:focus-visible {
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.08);
}
.trust-sidebar-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.trust-sidebar-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}
.trust-sidebar-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}
.trust-sidebar-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.trust-sidebar-details strong {
    color: var(--text-primary);
}
.trust-sidebar-details a {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
}
.trust-sidebar-steps {
    padding-left: 1.2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Article & Section Styling */
.trust-article-content {
    max-width: 820px;
    line-height: 1.7;
    color: var(--text-primary);
}
.trust-section {
    margin-bottom: 2.75rem;
    scroll-margin-top: 100px;
}
.trust-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: -0.01em;
}
.trust-section h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.6rem;
}
.trust-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.trust-section p {
    margin: 0 0 1rem;
}
.trust-section ul,
.trust-section ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}
.trust-section li {
    margin-bottom: 0.5rem;
}
.trust-callout-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}
.trust-callout-box p:last-child {
    margin-bottom: 0;
}
.trust-disclosure-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.25rem 0;
}
.trust-partner-link-note {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

/* Feature & Source Cards */
.trust-feature-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.25rem 0;
}
.trust-feature-col {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
}
.trust-feature-col h3 {
    margin-top: 0;
    font-size: 1.05rem;
    color: var(--accent-color);
}
.trust-source-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.trust-source-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.trust-source-authority {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 0.95rem;
}
.trust-source-version {
    font-size: 0.8rem;
    background: var(--bg-muted);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    color: var(--text-secondary);
}
.trust-source-links {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    font-size: 0.85rem;
}

/* Pipeline Steps */
.trust-pipeline-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
.trust-pipeline-step {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
}
.trust-pipeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.trust-pipeline-step h4 {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.trust-pipeline-step p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Hierarchy & Workflow */
.trust-hierarchy-levels,
.trust-workflow-cards {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.25rem 0;
}
.trust-h-level,
.trust-wf-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.35rem;
}
.trust-h-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.trust-wf-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Scope & Safety Matrix */
.trust-scope-grid,
.trust-safety-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.25rem 0;
}
.trust-scope-col,
.trust-safety-col {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.35rem;
}
.trust-scope-in h3,
.trust-safety-col:nth-child(2) h3 {
    color: var(--color-emerald-700);
}
.trust-scope-out h3,
.trust-safety-col:nth-child(1) h3 {
    color: var(--color-danger-700);
}

/* SLA Flow */
.trust-sla-flow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}
.trust-sla-step {
    background: var(--bg-raised);
    border-left: 4px solid var(--accent-color);
    border-radius: 0 8px 8px 0;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    padding: 1rem 1.25rem;
}
.trust-sla-step p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Table Styling */
.trust-table-wrapper {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.trust-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}
.trust-data-table th {
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.trust-data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}
.trust-data-table tr:last-child td {
    border-bottom: none;
}
.trust-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}
.trust-tag-strictly_necessary,
.trust-tag-security,
.trust-tag-required {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success-700);
}
.trust-tag-preferences,
.trust-tag-optional {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-brand-600);
}
.trust-tag-analytics {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber-600);
}
.trust-tag-advertising {
    background: rgba(168, 85, 247, 0.12);
    color: var(--color-violet-600);
}
.trust-text-warning {
    color: var(--color-amber-600);
    font-weight: 600;
}

/* Category Grid on Contact */
.trust-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}
.trust-cat-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    transition: var(--transition);
}
.trust-cat-card-active {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.04);
}
.trust-cat-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--text-primary);
}
.trust-cat-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Contact Form */
.trust-contact-form-wrap {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    margin: 1.25rem 0;
}
.trust-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.trust-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.trust-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.trust-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.trust-required {
    color: var(--color-danger-700);
}
.trust-input,
.trust-select,
.trust-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: var(--transition);
}
.trust-input:focus,
.trust-select:focus,
.trust-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.trust-help-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.trust-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.trust-form-privacy-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0;
}

/* Buttons */
.trust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
}
.trust-btn-primary {
    background: var(--accent-color);
    color: var(--color-white);
}
.trust-btn-primary:hover {
    background: var(--color-brand-600);
    color: var(--color-white);
}
.trust-btn-secondary {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.trust-btn-secondary:hover {
    background: var(--color-slate-200);
}
.trust-btn-outline {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.trust-btn-outline:hover {
    background: rgba(59, 130, 246, 0.08);
}
.trust-btn-danger {
    background: var(--color-danger-700);
    color: var(--color-white);
}
.trust-btn-danger:hover {
    background: var(--color-red-600);
}
.trust-btn-success {
    background: var(--color-emerald-700) !important;
    color: var(--color-white) !important;
}
.trust-btn-block {
    width: 100%;
}
.trust-btn-submit {
    background: var(--accent-color);
    color: var(--color-white);
    padding: 0.75rem 1.75rem;
}

/* Alerts */
.trust-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.trust-alert-success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--color-emerald-800);
}
.trust-alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--color-red-800);
}
.trust-alert-body p {
    margin: 0.25rem 0 0;
}
.trust-error-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

/* Privacy Choices Controls */
.trust-choice-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.35rem;
    margin: 1.25rem 0;
}
.trust-choice-danger {
    border-left: 4px solid var(--color-danger-700);
}
.trust-choice-info {
    max-width: 540px;
}
.trust-choice-info h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}
.trust-choice-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.trust-toggle-panel {
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.trust-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.trust-toggle-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.trust-toggle-info {
    flex: 1;
}
.trust-toggle-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.trust-toggle-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Switch styling */
.trust-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.trust-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.trust-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-slate-300);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
}
.trust-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}
.trust-switch input:checked + .trust-slider {
    background-color: var(--accent-color);
}
.trust-switch input:focus-visible + .trust-slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.trust-switch input:checked + .trust-slider:before {
    transform: translateX(22px);
}
.trust-toggle-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

/* Action Cards */
.trust-action-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.35rem;
    margin: 1.5rem 0;
}
.trust-action-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.trust-action-body {
    flex: 1;
}
.trust-action-title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.trust-action-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Related Links */
.trust-related-section {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.trust-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--text-primary);
}
.trust-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.trust-related-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-raised);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 100px;
}
.trust-related-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}
.trust-related-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.trust-related-card-title {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.trust-related-card-arrow {
    margin-top: 0.75rem;
    align-self: flex-end;
    color: var(--accent-color);
    font-weight: bold;
}

/* Ad Placement Safety Framing */
.ad-safety-container {
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-subtle);
    padding: 0.75rem;
    text-align: center;
}
.ad-disclosure-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.ad-unit-surface {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer 4-Column Updates.
   Round 49: was an inline style="grid-template-columns: repeat(3, 1fr)" on the
   component — inline styles are CSP-hostile (Round 18 policy) and, more
   importantly, a fixed 3-column grid cannot shrink at 320px, causing ~49px of
   horizontal page overflow on EVERY page. Moved to this class with the mobile
   collapse in the trust-page media blocks below. Round 58: removed the dead
   pre-shell .footer-column rule family (superseded by the cc-footer-* shell). */
.footer-links-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Dark Theme Overrides for Trust Center */

/* Mobile Responsiveness for Trust Pages */
@media (max-width: 900px) {.trust-layout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
.trust-sidebar {
        position: static;
    }
.trust-feature-matrix,
.trust-scope-grid,
.trust-safety-matrix,
.trust-form-row {
        grid-template-columns: 1fr;
    }
.trust-pipeline-steps {
        grid-template-columns: 1fr 1fr;
    }
.footer-links-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {.trust-hero-title {
        font-size: 1.75rem;
    }
.trust-pipeline-steps {
        grid-template-columns: 1fr;
    }
.footer-links-grid-4 {
        grid-template-columns: 1fr;
    }
.trust-choice-box {
        flex-direction: column;
        align-items: flex-start;
    }
.trust-choice-action {
        width: 100%;
    }
.trust-choice-action button {
        width: 100%;
    }
}

/* ==========================================================================
   Global Website Shell Styles (CopyCharacter Header, Mega Menu, Footer)
   ========================================================================== */

/* Skip Link */
.cc-skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: var(--z-skip-link);
    background: var(--accent-color);
    color: var(--color-white);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-weight: 600;
}
.cc-skip-link:focus,
.cc-skip-link:focus-visible {
    top: 0;
}

/* Brand Logo */
.cc-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.2rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.cc-brand-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
}
.cc-brand-wordmark {
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* Master Site Header */
.cc-site-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
}
.cc-header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cc-header-brand-wrap {
    flex-shrink: 0;
}

/* Primary Navigation (Desktop) */
.cc-primary-nav {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.cc-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Round 55: 0.35rem -> 0.25rem — density compression so the 9-pillar
       nav fits the 1280px container (row was 1290px vs 1232px content box). */
    gap: 0.25rem;
    align-items: center;
}
.cc-nav-item {
    position: relative;
}
/* Round 59 (59-G): the mega menus center under their trigger
   (left:50% + translateX(-50%)), so the two rightmost menus (Developers,
   Languages) extended past the viewport edge — at 1280px the Languages menu
   clipped its rightmost column by 34px. Right-align the last two items' menus
   with their trigger so the menu always stays inside the viewport. */
@media (min-width: 1280px) {
    .cc-nav-item:nth-last-child(-n+2) .cc-mega-menu {
        left: auto;
        right: 0;
        transform: none;
    }
}
.cc-nav-link-wrapper {
    display: flex;
    align-items: center;
}
.cc-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Round 55: 0.45rem 0.65rem -> 0.4rem 0.5rem — density compression
       (see .cc-nav-list note); 9 items save ~43px of row width. */
    padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.cc-nav-link:hover,
.cc-nav-link.is-active,
.cc-nav-item.is-open .cc-nav-link {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.12);
}
.cc-nav-caret {
    transition: transform 0.2s ease;
}
.cc-nav-item.is-open .cc-nav-caret {
    transform: rotate(180deg);
}

/* Mega Menus */
.cc-mega-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    width: max-content;
    min-width: 520px;
    max-width: min(94vw, 1100px);
    z-index: var(--z-mega-menu);
}
.cc-nav-item.is-open .cc-mega-menu {
    display: block;
    animation: ccMegaFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ccMegaFadeIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.cc-mega-grid {
    display: grid;
    gap: 1.5rem;
}
.cc-mega-cols-1 { grid-template-columns: 1fr; min-width: 280px; }
.cc-mega-cols-2 { grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr)); }
.cc-mega-cols-3 { grid-template-columns: repeat(3, minmax(min(200px, 100%), 1fr)); }
.cc-mega-cols-4 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.cc-mega-column-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.65rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-color);
}
.cc-mega-column-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cc-mega-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.cc-mega-link:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-color);
}
.cc-mega-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.95rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.cc-mega-link-text-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cc-mega-link-label {
    font-weight: 500;
    white-space: nowrap;
}
.cc-mega-link-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.cc-mega-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-color);
    margin-left: auto;
}
.cc-mega-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}
.cc-mega-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
}
.cc-mega-footer-link:hover {
    text-decoration: underline;
}

/* Header Right Actions */
.cc-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}
.cc-search-trigger-wrapper {
    position: relative;
}
.cc-header-search-form {
    display: flex;
    align-items: center;
}
.cc-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
}
.cc-search-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.cc-search-input {
    /* Round 55: 190px -> 175px (focus 270px -> 250px) — header row
       compression; keeps the pill within the 1280px container. */
    width: 175px;
    padding: 0.4rem 2rem 0.4rem 2.2rem;
    font-size: 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    color: var(--text-primary);
    transition: width 0.2s ease, border-color 0.2s ease;
}
.cc-search-input:focus {
    width: 250px;
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.cc-search-kbd-hint {
    position: absolute;
    right: 0.6rem;
    font-size: 0.7rem;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    color: var(--text-secondary);
    pointer-events: none;
}
.cc-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.cc-header-icon-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Language Selector */
.cc-lang-menu-wrapper {
    position: relative;
}
.cc-lang-btn {
    width: auto;
    padding: 0 0.65rem;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.cc-lang-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
    padding: 0.35rem;
    min-width: 150px;
    z-index: var(--z-lang-dropdown);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cc-lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}
.cc-lang-option:hover,
.cc-lang-option.is-selected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-color);
}
.cc-check-icon {
    margin-left: auto;
}

/* Mobile Menu Hamburger Button */
.cc-mobile-menu-btn {
    display: none;
    /* Round 59 (59-I): the bare button hugged its 18x14 hamburger glyph
       (22x18 hit area — below the WCAG 2.5.8 AA 24px minimum). Padding grows
       the hit area to 34x30 without moving any surrounding layout. */
    padding: 8px;
}
.cc-hamburger-box {
    width: 18px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cc-hamburger-line {
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease;
}

/* Mobile Drawer & Backdrop */
.cc-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: var(--z-drawer-backdrop);
}
.cc-mobile-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.cc-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.cc-mobile-drawer.is-open {
    transform: translateX(0);
}
.cc-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.cc-mobile-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cc-mobile-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-mobile-search {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.cc-mobile-search .cc-search-input {
    width: 100%;
}
.cc-mobile-nav-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.cc-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cc-mobile-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 0.4rem;
}
.cc-mobile-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cc-mobile-main-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4rem 0.2rem;
    flex-grow: 1;
}
.cc-mobile-accordion-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.cc-mobile-accordion-toggle.is-expanded .cc-accordion-icon {
    transform: rotate(180deg);
}
.cc-mobile-subpanel {
    padding: 0.4rem 0 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.cc-mobile-subgroup-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: 0.25rem;
}
.cc-mobile-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cc-mobile-sublink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: 6px;
}
.cc-mobile-sublink:hover {
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.08);
}
.cc-sub-icon {
    font-size: 0.9rem;
    width: 20px;
    display: inline-flex;
    justify-content: center;
}
.cc-mobile-locale-section {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.cc-mobile-locale-heading {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 0.65rem;
}
.cc-mobile-locale-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr),
    gap: 0.45rem;
}
.cc-mobile-locale-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.78rem;
}
.cc-mobile-locale-pill.is-active {
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.15);
}
body.cc-drawer-open {
    overflow: hidden !important;
}

/* Master Site Footer */
.cc-site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    padding: 3.5rem 0 0 0;
}
.cc-footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.cc-footer-main-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3.5rem;
    margin-bottom: 3rem;
}
.cc-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cc-footer-tagline {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}
.cc-footer-operator-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.cc-footer-social-links {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.cc-social-link {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}
.cc-social-link:hover {
    color: var(--accent-color);
}
.cc-footer-columns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.cc-footer-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}
.cc-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.cc-footer-link-item {
    line-height: 1.4;
}
.cc-footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cc-footer-link:hover {
    color: var(--accent-color);
}
.cc-footer-cookie-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-sans);
    margin-top: 0.5rem;
}
.cc-footer-cookie-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.cc-footer-bottom-bar {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 0;
    background: var(--bg-primary);
}
.cc-footer-bottom-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.cc-copyright-text {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.cc-standards-note {
    color: var(--text-secondary);
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {.cc-primary-nav.desktop-only,
.desktop-only {
        display: none !important;
    }
.cc-mobile-menu-btn.mobile-only {
        display: inline-flex !important;
    }
.cc-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
.cc-footer-columns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Round 55: desktop nav cutoff raised 1024px -> 1279px (--bp-xl boundary).
   The 9-pillar nav row (brand 174 + nav ~780 + actions ~240 + gaps) cannot
   fit the 1280px container below this width, so viewports 1025-1279px drew
   a 104px horizontal scrollbar on every page. Between 1025px and 1279px the
   hamburger drawer (already fully styled) serves navigation instead. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .cc-primary-nav.desktop-only {
        display: none !important;
    }
    .cc-mobile-menu-btn.mobile-only {
        display: inline-flex !important;
    }
}

/* Round 58: locale-aware desktop nav cutoff (extends the band above).
   Inter — the real UI font since the R42 fix — plus translated nav labels
   make the de/es header rows wider than the EN row Round 55 compressed to
   fit the 1280px container (measured with Inter live: es 65px overflow at
   1280 / 52px at 1366 / 15px at 1440 / 0 at 1536; de 36px at 1280 /
   24px at 1366 / 0 at 1440; the pre-Inter baseline already carried an
   18px es overflow that earlier responsive matrices missed because they
   only probed EN routes). For those locales the desktop nav yields to the
   fully-styled hamburger drawer until the row actually fits.
   en/fr/it verified zero overflow 1280-1536. */
@media (min-width: 1280px) and (max-width: 1535px) {
    html[lang="es"] .cc-primary-nav.desktop-only {
        display: none !important;
    }
    html[lang="es"] .cc-mobile-menu-btn.mobile-only {
        display: inline-flex !important;
    }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    html[lang="de"] .cc-primary-nav.desktop-only {
        display: none !important;
    }
    html[lang="de"] .cc-mobile-menu-btn.mobile-only {
        display: inline-flex !important;
    }
}

/* Round 55: at <=480px the brand logo + search pill + hamburger exceeded
   the viewport (54px overflow at 320px). The mobile drawer already provides
   a full search form, so the redundant header pill is hidden on phones. */
@media (max-width: 480px) {
    .cc-search-trigger-wrapper {
        display: none !important;
    }
}

@media (max-width: 640px) {.cc-footer-columns-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
.cc-footer-bottom-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
.cc-search-input {
        width: 130px;
    }
.cc-search-input:focus {
        width: 180px;
    }
}

/* ==========================================================================
   Definitive CopyCharacter Homepage Styles (Commands.md)
   ========================================================================== */
.definitive-homepage-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    overflow-x: hidden;
}

/* 1. Hero Utility Zone */
.home-hero-section {
    position: relative;
    padding: 4.5rem 1.5rem 3rem;
    text-align: center;
    background: radial-gradient(100% 100% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(56, 189, 248, 0.03) 50%, transparent 100%);
}
.home-hero-brand-motif {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.12;
    z-index: var(--z-underlay);
}
.motif-tile {
    position: absolute;
    font-size: 2.75rem;
    font-family: var(--font-symbols);
    color: var(--color-indigo-600);
    filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.15));
    transition: transform 0.5s ease;
}
.motif-tile-0 { top: 10%; left: 8%; }
.motif-tile-1 { top: 15%; right: 12%; }
.motif-tile-2 { top: 60%; left: 14%; }
.motif-tile-3 { top: 70%; right: 10%; }
.motif-tile-4 { top: 30%; left: 22%; }
.motif-tile-5 { top: 25%; right: 25%; }
.motif-tile-6 { top: 80%; left: 30%; }
.motif-tile-7 { top: 75%; right: 32%; }
.motif-tile-8 { top: 45%; left: 6%; }
.motif-tile-9 { top: 50%; right: 7%; }
.home-hero-content {
    position: relative;
    z-index: var(--z-content);
    max-width: 820px;
    margin: 0 auto;
}
.home-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-slate-900);
    margin: 0 0 1rem;
}
.home-hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-slate-600);
    line-height: 1.6;
    max-width: 660px;
    margin: 0 auto 2.5rem;
}

/* Global Character Search Input */
.home-search-wrapper {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}
.home-search-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border: 2px solid var(--color-slate-200);
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 12px 28px -4px rgba(37, 99, 235, 0.08);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0.35rem 0.35rem 0.35rem 1.25rem;
}
.home-search-input-group:focus-within {
    border-color: var(--color-brand-600);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 14px 34px -4px rgba(37, 99, 235, 0.16);
    background: var(--color-white);
}
.home-search-icon {
    display: flex;
    align-items: center;
    color: var(--color-brand-600);
    flex-shrink: 0;
}
#home-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.85rem 0.85rem;
    font-size: 1.05rem;
    color: var(--color-slate-900);
    background: transparent;
    min-width: 0;
}
#home-search-input::placeholder {
    color: var(--color-slate-400);
}
.home-search-hotkey {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-slate-400);
    background: var(--color-slate-100);
    border: 1px solid var(--color-slate-200);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    line-height: 1;
    margin-right: 0.5rem;
    user-select: none;
}
.home-search-clear-btn {
    background: transparent;
    border: none;
    font-size: 1.35rem;
    color: var(--color-slate-400);
    cursor: pointer;
    padding: 0 0.75rem;
    line-height: 1;
    transition: color 0.15s ease;
}
.home-search-clear-btn:hover {
    color: var(--color-slate-700);
}
.home-search-submit-btn {
    background: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-indigo-600) 100%);
    color: var(--color-white);
    border: none;
    border-radius: 9999px;
    padding: 0.85rem 2rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
    white-space: nowrap;
}
.home-search-submit-btn:hover {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}
.home-search-submit-btn:active {
    transform: scale(0.97);
}

/* Autocomplete Panel */
.home-search-suggestions-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1.25rem;
    box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.14);
    z-index: var(--z-dropdown-local);
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
}
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--color-slate-100);
    cursor: pointer;
    transition: background 0.15s ease;
}
.search-suggestion-item:last-child {
    border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item.is-focused {
    background: var(--color-slate-50);
}
.search-suggestion-item.is-exact-match {
    background: rgba(79, 70, 229, 0.04);
    border-left: 3px solid var(--color-indigo-600);
}
.suggestion-glyph {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate-100);
    border-radius: 0.5rem;
    color: var(--color-slate-900);
    flex-shrink: 0;
}
.suggestion-info {
    flex: 1;
    min-width: 0;
}
.suggestion-name {
    font-weight: 600;
    color: var(--color-slate-900);
    font-size: 0.95rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggestion-meta {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    font-family: var(--font-mono);
}
.suggestion-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.suggestion-copy-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--color-slate-700);
    transition: all 0.15s ease;
}
.suggestion-copy-btn:hover {
    background: var(--color-indigo-50);
    border-color: var(--color-indigo-200);
    color: var(--color-indigo-600);
}
.suggestion-view-link {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-indigo-600);
    background: var(--color-indigo-50);
    border: 1px solid var(--color-indigo-200);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.search-suggestion-fallback {
    padding: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.925rem;
    color: var(--color-slate-600);
}
.suggestion-search-link {
    font-weight: 700;
    color: var(--color-indigo-600);
    text-decoration: none;
}

/* Suggested Query Chips */
.home-search-examples {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.examples-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.examples-chips {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.example-query-chip {
    padding: 0.35rem 0.85rem;
    font-size: 0.925rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 9999px;
    color: var(--color-slate-700);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.18s ease;
}
.example-query-chip:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
    color: var(--color-brand-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

/* Section Shared Headers */
.section-header-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.section-title-compact {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-slate-900);
    margin: 0;
}
.section-badge-hint {
    font-size: 0.8rem;
    color: var(--color-slate-500);
    background: var(--color-slate-100);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
}
.section-header-standard {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}
.section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0 0 0.65rem;
    letter-spacing: -0.025em;
}
.section-subtitle {
    font-size: 1.05rem;
    color: var(--color-slate-600);
    line-height: 1.6;
    margin: 0;
}

/* 2. Quick Copy & Recent Copies */
.quick-copy-section,
.recent-copy-section {
    padding: 2.25rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.clear-recent-btn {
    background: transparent;
    border: none;
    color: var(--color-danger-700);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.quick-copy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 0.75rem;
}
.quick-copy-item-wrapper {
    position: relative;
}
.quick-copy-tile {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 0.75rem;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}
.quick-copy-tile:hover {
    border-color: var(--color-brand-500);
    box-shadow: 0 8px 18px -2px rgba(37, 99, 235, 0.22);
    transform: translateY(-3px) scale(1.02);
    background: var(--color-white);
}
.quick-copy-tile:active {
    transform: scale(0.92);
}
.quick-copy-glyph {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-slate-900);
    font-family: var(--font-symbols);
}
.quick-copy-tooltip {
    display: none;
}
.quick-copy-info-icon {
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--color-slate-400);
    padding: 5px;
    top: -3px;
    right: -3px;
    min-width: 24px;
    min-height: 24px;
    box-sizing: border-box;
}
.quick-copy-item-wrapper:hover .quick-copy-info-icon {
    opacity: 1;
}
.quick-copy-info-icon:hover {
    color: var(--color-brand-600);
}

/* Copy Animation Pulse */
@keyframes copyPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); color: var(--color-success-700); }
    100% { transform: scale(1); }
}
.copy-success-pulse {
    animation: copyPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-color: var(--color-success-700) !important;
    background: var(--color-success-50) !important;
}

/* 3. Explore CopyCharacter Destinations Grid */
.home-destinations-section {
    padding: 3.5rem 0;
}
.explore-destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1.5rem;
}
.destination-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.destination-card:hover {
    border-color: var(--color-brand-500);
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}
.destination-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.destination-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-indigo-50);
    color: var(--color-indigo-600);
    border-radius: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.destination-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 0.5rem;
}
.destination-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0;
}
.destination-count-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: var(--color-slate-100);
    color: var(--color-slate-600);
    white-space: nowrap;
}
.destination-desc {
    font-size: 0.95rem;
    color: var(--color-slate-600);
    line-height: 1.55;
    flex: 1;
    margin: 0 0 1.35rem;
}
.destination-link-indicator {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-brand-600);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.15s ease;
}
.destination-card:hover .destination-link-indicator {
    gap: 0.55rem;
}

/* Pillar Card Color Signatures */
.destination-card[data-pillar="symbols"] .destination-icon { background: rgba(99, 102, 241, 0.1); color: #6366F1; }
.destination-card[data-pillar="emoji"] .destination-icon { background: rgba(245, 158, 11, 0.1); color: #D97706; }
.destination-card[data-pillar="unicode"] .destination-icon { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.destination-card[data-pillar="fonts"] .destination-icon { background: rgba(16, 185, 129, 0.1); color: #059669; }
.destination-card[data-pillar="tools"] .destination-icon { background: rgba(244, 63, 94, 0.1); color: #E11D48; }
.destination-card[data-pillar="shortcuts"] .destination-icon { background: rgba(6, 182, 212, 0.1); color: #0891B2; }
.destination-card[data-pillar="encoding"] .destination-icon { background: rgba(139, 92, 246, 0.1); color: #7C3AED; }
.destination-card[data-pillar="developers"] .destination-icon { background: rgba(5, 150, 105, 0.1); color: #047857; }
.destination-card[data-pillar="languages"] .destination-icon { background: rgba(249, 115, 22, 0.1); color: #EA580C; }

/* 4. Popular Symbol Categories */
.popular-categories-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.popular-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}
.category-preview-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-preview-card:hover {
    border-color: var(--color-brand-400);
    box-shadow: 0 12px 24px -3px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}
.category-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.category-preview-name {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}
.category-title-link {
    color: var(--color-slate-900);
    text-decoration: none;
}
.category-title-link:hover {
    color: var(--color-brand-600);
}
.category-count-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
}
.category-preview-glyphs {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.preview-glyph-btn {
    font-size: 1.35rem;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 0.5rem;
    color: var(--color-slate-800);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    font-family: var(--font-symbols);
}
.preview-glyph-btn:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-400);
    color: var(--color-brand-700);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
}
.category-card-footer {
    margin-top: auto;
}
.category-card-link-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-brand-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.category-card-link-text:hover {
    text-decoration: underline;
}

/* 5. Featured Tools */
.featured-tools-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.featured-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1.5rem;
}
.tool-preview-card {
    display: flex;
    flex-direction: column;
    padding: 1.65rem;
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-preview-card:hover {
    border-color: var(--color-indigo-500);
    box-shadow: 0 14px 28px -4px rgba(79, 70, 229, 0.1);
    transform: translateY(-4px);
}
.tool-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.tool-icon-box {
    font-size: 1.45rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-indigo-50);
    border-radius: 0.625rem;
    color: var(--color-indigo-700);
}
.tool-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-indigo-700);
    background: var(--color-indigo-50);
    border: 1px solid var(--color-indigo-100);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}
.tool-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0 0 0.5rem;
}
.tool-card-desc {
    font-size: 0.925rem;
    color: var(--color-slate-600);
    line-height: 1.55;
    margin: 0 0 0.85rem;
}
.tool-card-preview {
    background: var(--color-slate-900);
    color: var(--color-sky-300);
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.825rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tool-action-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-indigo-600);
    margin-top: auto;
}
.section-bottom-action {
    text-align: center;
    margin-top: 2.5rem;
}
.outline-action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-indigo-600);
    border: 2px solid var(--color-indigo-200);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.outline-action-button:hover {
    background: var(--color-indigo-50);
    border-color: var(--color-indigo-400);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.12);
}

/* 6. Technical Reference Panels */
.technical-references-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.technical-panels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 1.75rem;
}
.technical-panel {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.panel-header {
    margin-bottom: 1.5rem;
}
.panel-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    display: inline-block;
    margin-bottom: 0.65rem;
    letter-spacing: 0.02em;
}
.panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0 0 0.45rem;
}
.panel-desc {
    font-size: 0.925rem;
    color: var(--color-slate-600);
    margin: 0;
    line-height: 1.55;
}
.panel-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.panel-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-100);
    border-radius: 0.625rem;
    text-decoration: none;
    color: var(--color-slate-800);
    font-weight: 600;
    font-size: 0.925rem;
    transition: all 0.18s ease;
}
.panel-nav-link:hover {
    background: var(--color-white);
    border-color: var(--color-brand-300);
    color: var(--color-brand-600);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateX(3px);
}
.link-bullet {
    color: var(--color-brand-600);
    font-size: 1.1rem;
}
.link-meta-pill,
.link-badge-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--color-slate-200);
    color: var(--color-slate-700);
    margin-left: auto;
    margin-right: 0.5rem;
}
.panel-nav-link:hover .link-badge-pill {
    background: var(--color-brand-50);
    color: var(--color-brand-700);
}
.link-arrow {
    color: var(--color-slate-400);
    transition: transform 0.15s ease;
}
.panel-nav-link:hover .link-arrow {
    transform: translateX(3px);
    color: var(--color-brand-600);
}

/* 7. Developer Guides Module (Refined Midnight IDE Theme) */
.home-developer-section {
    margin: 4.5rem 0;
}
.developer-module-card {
    background: radial-gradient(120% 120% at 50% 0%, #111C38 0%, #0B132B 55%, #070D1D 100%);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px -12px rgba(11, 19, 43, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    padding: 2.75rem 3rem;
    position: relative;
    overflow: hidden;
}
.developer-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
    pointer-events: none;
}
.developer-module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.25rem;
    flex-wrap: wrap;
}
.developer-header-content {
    flex: 1;
    min-width: min(320px, 100%);
}
.developer-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.725rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #60A5FA;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.28);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}
.developer-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60A5FA;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
    display: inline-block;
}
.developer-module-title {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--color-white);
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.developer-module-desc {
    font-size: 1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
    max-width: 620px;
}
.developer-header-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.developer-module-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    padding: 0.8rem 1.65rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.925rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.developer-module-cta:hover {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45);
}
.developer-module-cta .cta-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}
.developer-module-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* 2-Column Content Grid: Code Editor (Left) & Guides (Right) */
.developer-module-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: stretch;
}

/* IDE Code Preview Box */
.developer-code-preview {
    background: #080D1A;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.875rem;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.code-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: #0E1626;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.code-preview-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.code-preview-dots {
    display: flex;
    gap: 6px;
}
.code-preview-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.code-preview-dots span:nth-child(1) { background: #EF4444; }
.code-preview-dots span:nth-child(2) { background: #F59E0B; }
.code-preview-dots span:nth-child(3) { background: #10B981; }
.code-preview-file {
    font-family: var(--font-mono);
    font-size: 0.775rem;
    color: #94A3B8;
    font-weight: 500;
}
.code-preview-lang {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: #60A5FA;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
pre.code-preview-body,
.developer-code-preview pre {
    background: #080D1A !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 1.15rem 1.35rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    color: #E2E8F0 !important;
    overflow-x: auto !important;
    flex: 1;
}
.code-preview-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #0A1120;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 0.725rem;
    color: #64748B;
}
.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.status-text code {
    background: rgba(255, 255, 255, 0.08);
    color: #38BDF8;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.725rem;
    border: none;
}
.status-meta {
    color: #475569;
    font-size: 0.7rem;
}

/* Syntax Highlighting Tokens */
.syn-comment { color: #64748B; font-style: italic; }
.syn-keyword { color: #F472B6; font-weight: 600; }
.syn-var { color: #F8FAFC; }
.syn-builtin { color: #38BDF8; font-weight: 600; }
.syn-func { color: #60A5FA; }
.syn-string { color: #34D399; }
.syn-num { color: #FBBF24; }

/* 4 Guides Vertical Stack */
.developer-guides-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: space-between;
}
.guide-item-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-item-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(96, 165, 250, 0.45);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.guide-icon-badge {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 0.5rem;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.guide-code-icon {
    font-family: var(--font-mono);
    color: #60A5FA;
    font-weight: 700;
    font-size: 0.875rem;
}
.guide-item-link:hover .guide-icon-badge {
    background: #2563EB;
    border-color: #3B82F6;
}
.guide-item-link:hover .guide-code-icon {
    color: #FFFFFF;
}
.guide-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}
.guide-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #F1F5F9;
    line-height: 1.4;
    transition: color 0.15s ease;
}
.guide-item-link:hover .guide-title {
    color: #60A5FA;
}
.guide-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.guide-badge-strings {
    background: rgba(168, 85, 247, 0.15);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.guide-badge-storage {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.guide-badge-regex {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.guide-badge-web {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.guide-arrow {
    margin-left: auto;
    color: #64748B;
    font-size: 1.1rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.guide-item-link:hover .guide-arrow {
    transform: translateX(4px);
    color: #60A5FA;
}

/* 8. Languages & Keyboard Module */
.languages-keyboard-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.dual-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 1.75rem;
}
.dual-feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.feature-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}
.feature-icon {
    font-size: 1.45rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-indigo-50);
    border-radius: 0.625rem;
    color: var(--color-indigo-600);
}
.feature-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0;
}
.feature-desc {
    font-size: 0.925rem;
    color: var(--color-slate-600);
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
.language-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    flex: 1;
    margin-bottom: 1.75rem;
}
.language-quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 9999px;
    text-decoration: none;
    color: var(--color-slate-800);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.18s ease;
}
.language-quick-pill:hover {
    background: var(--color-brand-50);
    border-color: var(--color-brand-300);
    color: var(--color-brand-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}
.pill-autonym {
    font-size: 0.8rem;
    color: var(--color-slate-500);
}
.pill-exemplar-preview {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
}
.keyboard-platform-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    margin-bottom: 1.75rem;
}
.platform-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.15rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-100);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: all 0.18s ease;
}
.platform-shortcut-row:hover {
    background: var(--color-white);
    border-color: var(--color-brand-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.platform-shortcut-text {
    flex: 1;
    min-width: 0;
}
.platform-name {
    font-weight: 700;
    color: var(--color-slate-900);
    font-size: 0.95rem;
    display: block;
}
.platform-sub {
    font-size: 0.825rem;
    color: var(--color-slate-500);
    display: block;
}
.platform-keys-preview {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0.85rem;
}
.shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-slate-800);
    background: var(--color-white);
    border: 1px solid var(--color-slate-300);
    border-bottom: 2px solid var(--color-slate-400);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.key-sep {
    font-size: 0.75rem;
    color: var(--color-slate-400);
    font-weight: 700;
}
.platform-arrow {
    color: var(--color-slate-400);
    transition: transform 0.15s ease;
}
.platform-shortcut-row:hover .platform-arrow {
    transform: translateX(3px);
    color: var(--color-brand-600);
}
.feature-card-action {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-indigo-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.feature-card-action:hover {
    text-decoration: underline;
}

/* 9. Why CopyCharacter (Trust & Value Props) */
.home-trust-section {
    padding: 3.5rem 0;
    border-top: 1px solid var(--color-slate-100);
}
.why-copycharacter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.75rem;
}
.trust-benefit-card {
    background: var(--color-white);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}
.trust-benefit-card:hover {
    border-color: var(--color-brand-300);
    box-shadow: 0 10px 24px -2px rgba(0, 0, 0, 0.06);
    transform: translateY(-3px);
}
.benefit-number {
    font-size: 2.25rem;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(135deg, var(--color-brand-400), var(--color-indigo-600));
    -webkit-background-clip: text;
    background-clip: text;
    font-family: var(--font-mono);
    margin-bottom: 0.75rem;
    line-height: 1;
}
.benefit-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-slate-900);
    margin: 0 0 0.65rem;
}
.benefit-description {
    font-size: 0.925rem;
    color: var(--color-slate-600);
    line-height: 1.6;
    margin: 0;
}

/* 10. Standards Provenance Footnote Strip */
.home-source-trust-strip {
    margin: 4rem 0 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--color-slate-50);
    border: 1px solid var(--color-slate-200);
    border-radius: 1rem;
}
.source-trust-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.source-trust-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: min(280px, 100%);
}
.source-icon {
    color: var(--color-success-700);
    flex-shrink: 0;
}
.source-notice {
    font-size: 0.9rem;
    color: var(--color-slate-600);
    margin: 0;
    line-height: 1.6;
}
.source-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-info-700);
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: nowrap;
}
.source-link:hover {
    text-decoration: underline;
}

/* 11. Accessible Copy Feedback Toast */
.home-copy-toast {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(16px);
    color: var(--color-white);
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.925rem;
    font-weight: 700;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35);
    transform: translateY(140px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-toast-high);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-copy-toast.visible {
    transform: translateY(0);
    opacity: 1;
}
.toast-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-success-700);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

/* Responsive Breakpoint Adjustments */
@media (max-width: 900px) {.developer-module-card {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2rem;
    }
}

@media (max-width: 640px) {.home-hero-section {
        padding: 2.5rem 0.5rem 1.75rem;
    }
.home-search-input-group {
        border-radius: 1rem;
    }
.home-search-submit-btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.875rem;
    }
.quick-copy-grid {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
        gap: 0.5rem;
    }
.quick-copy-glyph {
        font-size: 1.35rem;
    }
.explore-destinations-grid,
.featured-tools-grid,
.technical-panels-grid,
.dual-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Round 51 — Restored component styles (current markup generation)
   Ports the design system to classes whose predecessors were removed as
   dead code: Windows/Mac/Linux hub headers + method grids, search result
   card base chrome, character related-tiles grid, breadcrumb list reset,
   SVG icon sizing utilities (w-/h- convention), sr-only focus reveal.
   See audit_reports_round51/ for the full forensic trail.
   ========================================================================== */

/* --- SVG icon sizing utilities (input-method service icon set) --- */
.w-3\.5, .h-3\.5 { width: 0.875rem; height: 0.875rem; }
.w-4, .h-4 { width: 1rem; height: 1rem; }
.w-5, .h-5 { width: 1.25rem; height: 1.25rem; }
.w-6, .h-6 { width: 1.5rem; height: 1.5rem; }
svg.w-3\.5, svg.h-3\.5, svg.w-4, svg.h-4, svg.w-5, svg.h-5, svg.w-6, svg.h-6 { flex-shrink: 0; }

/* --- Accessible reveal for sr-only elements carrying .focusable --- */
.sr-only.focusable:active,
.sr-only.focusable:focus {
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* --- Breadcrumb ordered-list reset (schema.org BreadcrumbList <ol>) --- */
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* --- Windows hub header (current generation) --- */
.win-hub-header {
    margin-bottom: 2rem;
}
.win-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.win-system-badge,
.win-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
}
.win-system-badge {
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-200);
}
.win-verified-badge {
    background: var(--color-success-50);
    color: var(--color-green-600);
    border: 1px solid var(--color-green-200);
}
.win-hub-title {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0;
}
.win-hub-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 70ch;
}
.win-jump-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.win-jump-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
}
.win-jump-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.win-jump-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand-600);
    background: var(--color-brand-50);
    border: 1px solid var(--color-brand-200);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.win-jump-link:hover {
    background: var(--color-brand-100);
    border-color: var(--color-brand-300);
}

/* --- Windows method cards grid (cards themselves pre-exist) --- */
.win-methods-section {
    margin-top: 2.5rem;
}
.win-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.25rem;
}
.win-method-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}
.win-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-brand-600);
    flex-shrink: 0;
}
.win-method-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: 0;
    flex-shrink: 1;
}
.win-badge-system {
    background: var(--color-indigo-50);
    color: var(--color-indigo-600);
    border-color: var(--color-indigo-100);
}
.win-badge-app {
    background: var(--color-slate-50);
    color: var(--color-slate-600);
    border-color: var(--color-slate-200);
}
.win-badge-req-numpad {
    background: var(--color-warning-50);
    color: var(--color-amber-700);
    border-color: var(--color-amber-200);
}
.win-badge-no-numpad {
    background: var(--color-success-50);
    color: var(--color-green-600);
    border-color: var(--color-green-100);
}
.win-method-summary {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 0.75rem;
}
.win-method-steps {
    margin-bottom: 0.75rem;
}
.win-method-steps-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.win-steps-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-slate-800);
    line-height: 1.6;
    display: grid;
    gap: 0.25rem;
}
.win-method-footer {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.win-method-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-600);
    text-decoration: none;
}
.win-method-action-link:hover {
    text-decoration: underline;
}

/* --- Search result card base (only :hover chrome existed before) --- */
.search-result-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

/* --- Character relationships: related-characters tiles grid --- */
.related-chars-wrap {
    margin-top: 1.25rem;
}
.related-subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}
.related-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}
.related-char-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary); /* override UA anchor blue — 'inherit' picked up #0000EE */
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
}
.related-char-tile:hover {
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.06);
    transform: translateY(-2px);
}
.rel-glyph {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.rel-code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-color);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.rel-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Round 51 (cont.) — residual component chrome: variation tiles (base rule
   was missing while :hover survived), windows table link cells, search
   pagination on the public design system (was mis-classed admin-btn).
   ========================================================================== */
.variation-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.9rem 0.75rem;
    /* Round 60: grid/flex item auto-min (label intrinsic ~274px) pushed detail
       pages 27-44px wide at 320px; min-width:0 lets the tile shrink while
       .variation-label clips via its own overflow:hidden+ellipsis. */
    min-width: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary); /* override UA anchor blue (emoji pages mask it via <img>) */
    text-decoration: none;
    transition: var(--transition);
}
.win-char-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
}
.win-char-cell:hover {
    border-color: var(--color-brand-600);
    color: var(--color-brand-600);
}
.win-char-display {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}
.win-name-link {
    color: var(--color-brand-600);
    font-weight: 600;
    text-decoration: none;
}
.win-name-link:hover {
    text-decoration: underline;
}
.win-verbal-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    line-height: 1.4;
}
.win-keycap-group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Round 51 (cont.) — developer-guide pattern-comparison family completion.
   The component markup (views/components/developer_guide/pattern-comparison.php)
   ships .dev-pattern-comparison-section/.dev-pattern-stack/.dev-pattern-grid/
   .dev-pattern-side/.dev-pattern-pre/... while only .dev-pattern-card and
   .dev-pattern-tag ever had rules — the rest of the family rendered unstyled.
   ========================================================================== */
.dev-pattern-comparison-section {
    /* section wrapper; .dev-guide-section provides rhythm */
}
.dev-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.dev-section-lead {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}
.dev-pattern-stack {
    display: grid;
    gap: 1.25rem;
}
.dev-pattern-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.dev-pattern-context {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.dev-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 0.75rem;
}
.dev-pattern-side {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.9rem;
    min-width: 0;
}
.dev-pattern-bad.dev-pattern-side {
    background: var(--color-red-50);
    border-color: var(--color-red-200);
}
.dev-pattern-good.dev-pattern-side {
    background: var(--color-success-50);
    border-color: var(--color-green-200);
}
.dev-side-header {
    margin-bottom: 0.6rem;
}
.dev-pattern-pre {
    background: var(--color-slate-900);
    color: var(--color-slate-200);
    border-radius: 6px;
    border: 1px solid var(--color-slate-800);
    padding: 0.85rem 1rem;
    margin: 0 0 0.6rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.55;
}
.dev-pattern-pre:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}
.dev-pattern-rationale {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.dev-pattern-rationale strong {
    color: var(--text-primary);
}
.dev-pattern-footer {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-color);
}
.dev-source-tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   Round 51 (cont.) — header fit at narrow desktop widths.
   The header row (brand 174 + nav 831 + actions 253 + gaps) needs ~1290px
   against a 1232px content box at 1280px viewport, overflowing ~35px right
   (all three children are flex-shrink: 0 by design for stability). Tighten
   rhythm instead of letting items wrap: below 1360px reduce the header gap
   and nav-link horizontal padding; below 1120px also trim the language
   switcher chrome. Prevents a sitewide horizontal scrollbar.
   ========================================================================== */
@media (max-width: 1360px) {
    .cc-header-container {
        gap: 0.5rem;
    }
    .cc-nav-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}
@media (max-width: 1120px) {
    .cc-header-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cc-lang-current-code {
        display: none;
    }
}

/* Round 60 (follow-up): min(100%, Xpx) inside repeat(auto-fit/auto-fill)
   resolves unreliably in Chromium auto-repeat iteration (produced mixed
   123px/173px tracks that overflowed the container). Canonical pattern
   instead: fixed floors + explicit single-column collapse on phones.
   NOTE: must stay at END of file - equal-specificity base rules defined
   later in the cascade would otherwise override these media rules. */
@media (max-width: 480px) {
    .utf8-bom-grid,
    .tech-spec-grid,
    .languages-clarification-grid,
    .dev-pattern-grid,
    .distribution-grid,
    .html-entities-stats-bar,
    .utf32-examples-grid,
    .unicode-category-groups-grid {
        grid-template-columns: 1fr;
    }
}

/* Round 60 (final residuals): tile/card auto-min keeps forcing tracks open.
   .char-grid tiles carry a nowrap+ellipsis char-name whose intrinsic width
   (~268px) opened 95px tracks by 25px at 320px; .utf32-example-card hosts
   overflow-x:auto table wrappers whose auto-min opened 240px tracks by
   191px. min-width:0 on the grid/flex items lets both shrink — labels
   ellipsize and tables scroll in place, exactly as designed. */
.char-grid > .category-char-card,
.utf32-example-card,
.utf32-table-responsive {
    min-width: 0;
}

/* Round 60 (utf32 residual): the in-memory code-unit visualizer box
   (inline-flex, 2rem side padding, single-token hex display) is 243px
   intrinsically wide and overflowed the 217px workspace column at 320px. */
@media (max-width: 480px) {
    .utf32-vis-unit-box {
        padding: 0.75rem 1rem;
        max-width: 100%;
    }
    .utf32-unit-hex-display {
        overflow-wrap: anywhere;
    }
}

/* Round 60 (component grid governance): views previously carried inline
   grid-template-columns floors (200-280px) that override every stylesheet
   rule and overflow the ~192-240px content columns on 320px phones. The
   floors moved here as classes; phones collapse to a single column. */
.u-grid-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.u-grid-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.u-grid-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.u-grid-220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.u-grid-210 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.u-grid-200 { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
@media (max-width: 480px) {
    .u-grid-280,
    .u-grid-260,
    .u-grid-240,
    .u-grid-220,
    .u-grid-210,
    .u-grid-200 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Round 61 — final 240px viewport hardening.
   Baseline (pre-fix): 60px overflow on /unicode/ (plane tabs are an
   overflow-x:auto strip - correct), 79px /symbols/hearts/, 108px /28px
   /unicode/u-1f600/, 24px /tools/, 80px /encoding/utf8/, 26px
   /unicode/block/arabic/, 80px /keyboard-shortcuts/windows/. The grid-floor
   and flex-wrap fixes earlier in this file removed all of those; the probes
   above left four residuals at 240px only (320px is fully clean), fixed here.
   ========================================================================== */

/* 61-T1: header row at tiny widths. The brand wordmark (1.2rem, nowrap) +
   hamburger button (38px) + 2x1rem container padding computed ~248px against
   a 240px viewport, pushing .cc-header-actions 1px past the edge on EVERY
   page. Real phones bottom out at 320px where the row fits; below 300px
   (feature phones / split-screen slivers) shrink the wordmark and chrome. */
@media (max-width: 300px) {
    .cc-header-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .cc-brand-logo {
        font-size: 0.95rem;
        gap: 0.45rem;
    }
}

/* 61-T2: keyboard hub section titles. The long unbreakable token
   "(Troubleshooting)" at 1.625rem is ~226px of ink inside a 160px column -
   the box wrapped, but the token extended the scrollable overflow area by
   19px at 240px. Emergency mid-word wrap only (never triggers when normal
   word wrapping suffices). */
.win-section-title,
.mac-section-title,
.linux-section-title,
.kb-section-title {
    overflow-wrap: break-word;
}

/* 61-T3: utf8 worked-example chunk grid - 180px fixed floor vs 160px content
   column at 240px. Single-column collapse per the Round 60 canonical
   pattern (fixed floors + explicit phone collapse). */
@media (max-width: 480px) {
    .utf8-chunk-grid {
        grid-template-columns: 1fr;
    }
}

/* 61-T4: fonts hub style cards. The font specimen preview forced a 203px
   intrinsic min-content into a 160px track, spilling 3px past the viewport
   at 240px. Let the card shrink; the specimen is decorative so mid-word
   wrapping is acceptable (it already ellipsizes nowhere else). */
.font-style-card {
    min-width: 0;
}
.card-preview-container {
    min-width: 0;
}
.preview-text {
    overflow-wrap: anywhere;
}

/* 61-T13 (final residuals from the 194-combo matrix): the German-language
   punctuation card names ("Anf\u00fchrungszeichen...") are nowrap+ellipsis
   BY DESIGN, but the card's grid auto-min forced the 180px track open to the
   full 279px name width at 240px. Same Round 60 canonical pattern: cards
   shrink, grid collapses on phones. */
.punctuation-card {
    min-width: 0;
}
@media (max-width: 480px) {
    .language-punctuation-grid {
        grid-template-columns: 1fr;
    }
}

/* 61-T14 (final residual, de/languages/french @240 = 32px): even with the
   480px single-column collapse, the u-grid-* card items' auto minimum
   (nowrap-ish card content, DE labels) kept forcing the 1fr track ~41px open.
   min-width:0 on every u-grid child lets cards shrink and their inner text
   ellipsize/wrap as designed (Round 60 .char-grid precedent). */
.u-grid-280 > *,
.u-grid-260 > *,
.u-grid-240 > *,
.u-grid-220 > *,
.u-grid-210 > *,
.u-grid-200 > * {
    min-width: 0;
}

/* 61-T15 (de/languages/french @240 = 32px, DE-label residuals): the
   typewriter action row (two buttons, German labels ~207px min-content in a
   110px column) had no wrap; the 2.25rem language H1's long German words
   outran the 160px column. */
.typewriter-actions {
    flex-wrap: wrap;
}
.typewriter-btn {
    min-width: 0;
    overflow-wrap: break-word;
}
.language-detail-h1 {
    overflow-wrap: break-word;
}
.typewriter-input-wrap {
    min-width: 0;
}

/* 61-T16 (de/languages/french @240, last 19px): the typewriter title group
   (German compound title ~194px) and the platform tab strip (3 tabs ~350px)
   both outran the 110px column. Title group shrinks + emergency wrap; the
   tab strip becomes a standard horizontally-scrollable tab bar. */
.typewriter-title-group {
    min-width: 0;
}
.typewriter-title {
    min-width: 0;
    overflow-wrap: break-word;
}
.typewriter-subtitle {
    overflow-wrap: break-word;
}
.input-platform-tabs {
    overflow-x: auto;
    min-width: 0;
}


/* ============================================================================
   Round 63 — CSP-safe replacements for inline onmouseover/onmouseout handlers.
   The site CSP (script-src 'self' 'nonce-…') has no 'unsafe-inline' and inline
   event-handler attributes cannot carry the nonce, so every inline on*=
   handler was silently dead in production. These rules restore the hover
   affordances as pure CSS (works with keyboard focus too).
   ========================================================================= */
.ucat-crumb-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.ucat-crumb-link:hover,
.ucat-crumb-link:focus-visible {
    color: var(--accent-color);
}
.ucat-tech-row {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.ucat-tech-row:hover {
    background: rgba(var(--accent-rgb), 0.04);
}
.unicode-ac-item:hover,
.unicode-ac-item:focus-visible {
    background-color: var(--bg-secondary);
}