:root, [data-theme="cyber_bee"] {
    /* Paper / Beeswax (Warm Hive Neutrals) */
    --color-paper-50: #fbf8f1;
    --color-paper-50-rgb: 251, 248, 241;
    --color-paper-100: #f5efe1;
    --color-paper-100-rgb: 245, 239, 225;
    --color-paper-200: #e8dec8;
    --color-paper-200-rgb: 232, 222, 200;
    --color-paper-300: #d5c6aa;
    --color-paper-300-rgb: 213, 198, 170;
    --color-paper-400: #b8a585;
    --color-paper-400-rgb: 184, 165, 133;
    --color-paper-500: #796648;
    --color-paper-500-rgb: 121, 102, 72;
    --color-paper-600: #6b5840;
    --color-paper-600-rgb: 107, 88, 64;
    --color-paper-700: #574730;
    --color-paper-700-rgb: 87, 71, 48;
    --color-paper-800: #3b2e1e;
    --color-paper-800-rgb: 59, 46, 30;
    --color-paper-900: #271e13;
    --color-paper-900-rgb: 39, 30, 19;
    --color-paper-950: #18120b;
    --color-paper-950-rgb: 24, 18, 11;
    
    /* Honey / Nectar (Pure Amber & Liquid Gold) */
    --color-accent-50: #fffdf5;
    --color-accent-50-rgb: 255, 253, 245;
    --color-accent-100: #fef9e7;
    --color-accent-100-rgb: 254, 249, 231;
    --color-accent-200: #fdf0c5;
    --color-accent-200-rgb: 253, 240, 197;
    --color-accent-300: #fce295;
    --color-accent-300-rgb: 252, 226, 149;
    --color-accent-400: #f9ca52;
    --color-accent-400-rgb: 249, 202, 82;
    --color-accent-500: #f59e0b;
    --color-accent-500-rgb: 245, 158, 11;
    --color-accent-600: #d97706;
    --color-accent-600-rgb: 217, 119, 6;
    --color-accent-700: #b45309;
    --color-accent-700-rgb: 180, 83, 9;
    --color-accent-800: #92400e;
    --color-accent-800-rgb: 146, 64, 14;
    --color-accent-900: #78350f;
    --color-accent-900-rgb: 120, 53, 15;
    --color-accent-950: #451a03;
    --color-accent-950-rgb: 69, 26, 3;

    /* Binary Matrix (Digital Honey Telemetry) */
    --color-binary-50: #fefce8;
    --color-binary-50-rgb: 254, 252, 232;
    --color-binary-100: #fef9c3;
    --color-binary-100-rgb: 254, 249, 195;
    --color-binary-200: #fef08a;
    --color-binary-200-rgb: 254, 240, 138;
    --color-binary-300: #fde047;
    --color-binary-300-rgb: 253, 224, 71;
    --color-binary-400: #facc15;
    --color-binary-400-rgb: 250, 204, 21;
    --color-binary-500: #eab308;
    --color-binary-500-rgb: 234, 179, 8;
    --color-binary-600: #ca8a04;
    --color-binary-600-rgb: 202, 138, 4;
    --color-binary-700: #a16207;
    --color-binary-700-rgb: 161, 98, 7;
    --color-binary-800: #854d0e;
    --color-binary-800-rgb: 133, 77, 14;
    --color-binary-900: #713f12;
    --color-binary-900-rgb: 113, 63, 18;
    --color-binary-950: #1a1208;
    --color-binary-950-rgb: 26, 18, 8;

    /* Success (Olive Honeycomb) */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-300: #86efac;
    --color-success-400: #4ade80;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-800: #166534;
    --color-success-900: #14532d;

    /* Danger (Sting Red) */
    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-200: #fecdd3;
    --color-danger-300: #fda4af;
    --color-danger-400: #fb7185;
    --color-danger-500: #f43f5e;
    --color-danger-600: #e11d48;
    --color-danger-600-rgb: 225, 29, 72;
    --color-danger-700: #be123c;
    --color-danger-700-rgb: 190, 18, 60;
    --color-danger-800: #9f1239;
    --color-danger-900: #881337;

    /* Warning (Pure Nectar Flame) */
    --color-warning-50: var(--color-accent-50);
    --color-warning-100: var(--color-accent-100);
    --color-warning-200: var(--color-accent-200);
    --color-warning-300: var(--color-accent-300);
    --color-warning-400: var(--color-accent-400);
    --color-warning-500: var(--color-accent-500);
    --color-warning-600: var(--color-accent-600);
    --color-warning-700: var(--color-accent-700);
    --color-warning-800: var(--color-accent-800);
    --color-warning-900: var(--color-accent-900);

    /* Info (Cyber Hex Blue) */
    --color-info-50: #f0f9ff;
    --color-info-100: #e0f2fe;
    --color-info-200: #bae6fd;
    --color-info-300: #7dd3fc;
    --color-info-400: #38bdf8;
    --color-info-500: #0ea5e9;
    --color-info-600: #0284c7;
    --color-info-600-rgb: 2, 132, 199;
    --color-info-700: #0369a1;
    --color-info-800: #075985;
    --color-info-900: #0c4a6e;
}

/* Digital Cat Theme (القط الرقمي - Electric Cyber Azure, Neon Cyan, Midnight Navy) */
[data-theme="cyber_cat"] {
    /* Paper / Arctic Ice & Midnight Navy (Digital Cat Neutrals) */
    --color-paper-50: #f4f8fc;
    --color-paper-50-rgb: 244, 248, 252;
    --color-paper-100: #e7f1fb;
    --color-paper-100-rgb: 231, 241, 251;
    --color-paper-200: #d1e3f7;
    --color-paper-200-rgb: 209, 227, 247;
    --color-paper-300: #b0cff0;
    --color-paper-300-rgb: 176, 207, 240;
    --color-paper-400: #79aae0;
    --color-paper-400-rgb: 121, 170, 224;
    --color-paper-500: #356aa8;
    --color-paper-500-rgb: 53, 106, 168;
    --color-paper-600: #24518a;
    --color-paper-600-rgb: 36, 81, 138;
    --color-paper-700: #1f4577;
    --color-paper-700-rgb: 31, 69, 119;
    --color-paper-800: #132d51;
    --color-paper-800-rgb: 19, 45, 81;
    --color-paper-900: #0c1c34;
    --color-paper-900-rgb: 12, 28, 52;
    --color-paper-950: #070e1c;
    --color-paper-950-rgb: 7, 14, 28;

    /* Digital Cat Accent (Electric Azure & Neon Cyber Blue) */
    --color-accent-50: #f0f9ff;
    --color-accent-50-rgb: 240, 249, 255;
    --color-accent-100: #e0f2fe;
    --color-accent-100-rgb: 224, 242, 254;
    --color-accent-200: #bae6fd;
    --color-accent-200-rgb: 186, 230, 253;
    --color-accent-300: #7dd3fc;
    --color-accent-300-rgb: 125, 211, 252;
    --color-accent-400: #38bdf8;
    --color-accent-400-rgb: 56, 189, 248;
    --color-accent-500: #0284c7;
    --color-accent-500-rgb: 2, 132, 199;
    --color-accent-600: #0369a1;
    --color-accent-600-rgb: 3, 105, 161;
    --color-accent-700: #075985;
    --color-accent-700-rgb: 7, 89, 133;
    --color-accent-800: #0c4a6e;
    --color-accent-800-rgb: 12, 74, 110;
    --color-accent-900: #082f49;
    --color-accent-900-rgb: 8, 47, 73;
    --color-accent-950: #041b2c;
    --color-accent-950-rgb: 4, 27, 44;

    /* Digital Cat Binary (Neon Cyan / Hologram Telemetry) */
    --color-binary-50: #ecfeff;
    --color-binary-50-rgb: 236, 254, 255;
    --color-binary-100: #cffafe;
    --color-binary-100-rgb: 207, 250, 254;
    --color-binary-200: #a5f3fc;
    --color-binary-200-rgb: 165, 243, 252;
    --color-binary-300: #67e8f9;
    --color-binary-300-rgb: 103, 232, 249;
    --color-binary-400: #22d3ee;
    --color-binary-400-rgb: 34, 211, 238;
    --color-binary-500: #06b6d4;
    --color-binary-500-rgb: 6, 182, 212;
    --color-binary-600: #0891b2;
    --color-binary-600-rgb: 8, 145, 178;
    --color-binary-700: #0e7490;
    --color-binary-700-rgb: 14, 116, 144;
    --color-binary-800: #155e75;
    --color-binary-800-rgb: 21, 94, 117;
    --color-binary-900: #164e63;
    --color-binary-900-rgb: 22, 78, 99;
    --color-binary-950: #083344;
    --color-binary-950-rgb: 8, 51, 68;
}

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Structural tokens
   Shape and elevation are identical in both themes, so they are declared once
   on :root and never restated per theme. Reference these instead of writing a
   new shadow or radius value into a rule. */
:root {
    /* The hairline a card draws against the page ground. It takes its colour
       from accent-600, which each theme redefines, so it follows the theme
       without needing a rule of its own. */
    --card-edge: rgba(var(--color-accent-600-rgb), 0.32);

    /* Corner radius scale. --radius-btn is derived rather than a second number
       so a button can never drift from the input sitting beside it in the same
       form, which is what the old 4px/6px split did. */
    --radius-chip:  0.25rem;   /* 4px  — badges, inline code, toast icon and close */
    --radius-field: 0.375rem;  /* 6px  — inputs, selects, textareas */
    --radius-btn:   var(--radius-field);
    --radius-card:  0.5rem;    /* 8px  — cards, toasts, skeletons */
    --radius-panel: 0.75rem;   /* 12px — blockquotes, code cards, large panels */
    --radius-pill:  9999px;

    /* Typography. Three stacks, one authority: tailwind.config.js points its
       fontFamily entries at these variables, so the generated utilities and
       preflight cannot drift from what is declared here. Plex Sans Arabic draws
       the Arabic glyphs and its own Latin; the Latin-first Plex Sans sits behind
       it so extended-Latin runs get a face designed for them. The display stack
       inverts that: Plex Sans leads so Latin headings get the Latin face, and
       Arabic glyphs fall through per-glyph to Noto Kufi — both are variable, so a
       400 request draws 400 on both halves of the line instead of up-matching. */
    --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
    --font-display: "IBM Plex Sans", "Noto Kufi Arabic", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Arabic leading floor. The measured body leadings were 1.43 and 1.5 while
       the design system's own leading-arabic-body token says 1.7 and is used
       nowhere; Arabic stacks marks and descenders into the line above.
       :root (0,1,0) outranks preflight's html { line-height: 1.5 } (0,0,1), so
       everything that only inherits now opens to 1.7; text carrying its own
       text-* utility is still pinned (they bundle a line-height) and is
       handled by the paragraph rule under "Markdown Styles". */
    line-height: 1.7;

    /* Neutral ramp tinted with the theme's own ink, so elevation never reads
       as a coloured glow over the paper surfaces. */
    --shadow-1: 0 1px 2px rgba(var(--color-paper-950-rgb), 0.05);
    --shadow-2: 0 4px 12px -2px rgba(var(--color-paper-950-rgb), 0.08);
    --shadow-3: 0 12px 32px -6px rgba(var(--color-paper-950-rgb), 0.14);

    /* Code surface. A terminal card keeps its own dark palette on purpose —
       syntax themes do not follow the page theme — but the palette belongs here
       rather than repeated as literals down through the rules. */
    --code-bg: #282a36;
    --code-bg-chrome: #1e1f29;
    --code-fg: #f8f8f2;
    --code-line: rgba(255, 255, 255, 0.12);
    --code-line-chrome: rgba(255, 255, 255, 0.08);
    --code-thumb: #44475a;
    --code-thumb-hover: #6272a4;
    --code-dot-red: #ff5555;
    --code-dot-yellow: #f1fa8c;
    --code-dot-green: #50fa7b;
    --code-lang: #f59e0b;
    --code-lang-rgb: 245, 158, 11;
    --code-btn-fg: #e2e8f0;
    --code-btn-line: rgba(255, 255, 255, 0.15);
    --code-copied: #34d399;
    --code-canvas: #ffffff;
}

/* Sub-pixel rules raised to a real hairline
   Templates ask for 0.5px borders and dividers in ~840 places. A fractional
   border cannot land on a whole device pixel, so it paints as an uneven,
   half-density grey line that reads as smudged rather than as structure.
   These mirror the generated Tailwind names exactly; app.css loads after
   tailwind.css, so at equal specificity these declarations win and the whole
   site is corrected without touching a single template. */
.border-\[0\.5px\] { border-width: 1px; }
.border-t-\[0\.5px\] { border-top-width: 1px; }
.border-b-\[0\.5px\] { border-bottom-width: 1px; }
.border-y-\[0\.5px\] { border-top-width: 1px; border-bottom-width: 1px; }
.border-e-\[0\.5px\] { border-inline-end-width: 1px; }
.border-r-\[0\.5px\] { border-right-width: 1px; }
.divide-y-\[0\.5px\] > :not([hidden]) ~ :not([hidden]) {
    border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.file\:border-\[0\.5px\]::file-selector-button { border-width: 1px; }

/* Grayscale smoothing off.
   base.tpl, account.tpl and the two auth pages still carry Tailwind's
   `antialiased`; public.tpl already dropped it. At a fractional device pixel
   ratio subpixel antialiasing is unavailable, so -webkit-font-smoothing:
   antialiased falls back to grayscale and thins 400-weight Arabic strokes by
   about a device pixel — Arabic's hairline joins and terminal strokes are
   exactly what disappears. Mirroring the generated selector corrects all four
   bodies and any future layout without touching a template. */
.antialiased {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* accent-600 is 3.0:1 on paper-50, which clears the bar for an icon but not for
   text, and 40 templates reach for it as a link hover. Redefining the two
   generated selectors keeps every call site honest without editing them; the
   non-hover utility is left alone because the icon sites are correct. */
.hover\:text-accent-600:hover,
.group:hover .group-hover\:text-accent-600 {
    color: var(--color-accent-700);
}

/* Page ground. A dot grid behind every page competed with the cards sitting on
   it, so the ground is flat and the cards carry the texture. */
.honeycomb-pattern {
    background-color: var(--color-paper-50);
}

/* Anchor targets must clear the sticky header (4rem) and the sticky section
   bar (~3rem) that sits below it, or a jump hides the heading it named. */
.product-group[id],
.product-content section[id] { scroll-margin-block-start: 8rem; }

/* Site-first navigation shell */
summary.list-none::-webkit-details-marker { display: none; }
summary.list-none { list-style: none; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Keyboard focus. Before this the only visible indicator in the site was the
   header's, so every other control relied on the UA default. */
:focus-visible {
    outline: 2px solid var(--color-accent-600);
    outline-offset: 2px;
}
header [data-nav-brand="true"]:focus-visible,
header a:focus-visible,
header button:focus-visible,
header summary:focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
}

/* HTMX loading states */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-indicator-skeleton { display: none; }
.htmx-request .htmx-indicator-skeleton { display: block; }
.htmx-request.htmx-swap-content > .htmx-content-area { display: none; }

/* Skeleton loaders */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.skeleton-pulse { animation: skeleton-pulse 1.5s ease-in-out infinite; }
.skeleton-bar { background-color: var(--color-paper-200); border-radius: var(--radius-card); }
.skeleton-block { background-color: var(--color-paper-200); border-radius: var(--radius-panel); }

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion. A blanket guard rather than a list: the site declares
   `transition: all` in ~100 places, so naming the keyframe rules left 44
   measured elements still animating on the product page alone. !important so
   markup utilities and Alpine's inline x-transition styles lose as well, and
   0.01ms rather than 0s because transitionend still has to fire or a leaving
   toast and gallery slide never get removed. */
@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;
    }
    .fade-in, .skeleton-pulse { animation: none; }
}

/* LTR fields for English/numeric input */
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"] {
    direction: ltr;
    text-align: left;
}

/* Form field base styling */
.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-paper-800);
    margin-bottom: 0.375rem;
}
.field-input {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-paper-500);
    border-radius: var(--radius-field);
    font-size: 0.875rem;
    color: var(--color-paper-950);
    background-color: var(--color-paper-50);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input::placeholder { color: var(--color-paper-400); }
.field-input:focus {
    outline: none;
    border-color: var(--color-accent-500);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-500-rgb), 0.2);
}
.field-error {
    display: block;
    font-size: 0.75rem;
    color: var(--color-danger-600);
    margin-top: 0.375rem;
}

/* Standard corner radius.
   These four names are the site's shape vocabulary: 814 class attributes across
   105 templates carry one, and 484 of them carry no other component class, so
   emptying the rules to no-ops would leave those elements square. The names stay
   and the geometry becomes a plain rounded rectangle — which is also what lets
   the global :focus-visible outline and every markup `ring-*` utility reach them
   again, since the chamfer crop swallowed both.
   Position matters: these sit before .card, .card-hive, .btn, .badge and
   .toast__*, so at equal specificity the component rule still wins on an element
   carrying both. The [dir="rtl"] .clip-corner mirrors are gone because
   border-radius is direction-agnostic. */
.clip-hex       { border-radius: var(--radius-card); }
.clip-hex-sm    { border-radius: var(--radius-field); }
.clip-corner    { border-radius: var(--radius-card); }
.clip-corner-sm { border-radius: var(--radius-field); }

/* Slider arrows. Tailwind 3 ships no rtl: variant, and a hard-coded rotate-180
   leaves the previous chevron pointing the wrong way in Arabic. Both states are
   stated so neither direction is an invisible default, and `rotate` is used
   because it is an independent property that never clobbers a transform. */
.chevron-prev {
    rotate: 180deg;
}
.chevron-next {
    rotate: 0deg;
}
[dir="rtl"] .chevron-prev {
    rotate: 0deg;
}
[dir="rtl"] .chevron-next {
    rotate: 180deg;
}

/* Hover reveals the keyboard cannot reach.
   ~500 call sites pair a card or tile with an action strip that is hidden until
   the group is hovered, and only 4 of them state a focus state, so Tab users
   never see the control they are on. Tailwind ships no focus-within counterpart
   to group-hover, so the generated name is mirrored here and every call site is
   covered at once. */
.group:focus-within .group-hover\:opacity-100 { opacity: 1; }

/* Touch has no hover to leave. A tap otherwise parks the card in its lifted,
   deep-shadow state until something else is tapped. */
@media (hover: none) {
    .card-interactive:hover { transform: none; }
}

.rule-heading {
    border-inline-start: 3px solid var(--color-accent-500);
    padding-inline-start: 0.75rem;
    /* One device per heading. These h2s also arrive with the template's own
       bottom rule and its padding, and a bar plus a full-width line on the
       same heading is two competing markers. The bar is the marker, so the
       horizontal rule is switched off here rather than at 22 call sites. */
    border-bottom-width: 0;
    padding-bottom: 0;
}

/* Card styles */
/* The paint below is wrapped in :where() on purpose. app.css loads after
   tailwind.css, so at equal specificity these declarations would beat every
   background, border and shadow utility on the same element and silently
   flatten all the tinted and dark cards to paper-50. :where() has zero
   specificity, so the markup's own utilities win and these stay defaults. */
:where(.card) {
    background-color: var(--color-paper-50);
    border: 1px solid var(--color-paper-300);
}
.card {
    border-radius: var(--radius-card);
    overflow: hidden;
}
:where(.card-hive) {
    background-color: var(--color-paper-50);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    /* Zero specificity on purpose: app.css loads after tailwind.css, so a plain
       .card-hive rule here would beat the .sticky/.absolute utilities that some
       cards need (the product purchase card sticks beside the details). */
    position: relative;
}
.card-interactive {
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card-interactive:hover {
    border-color: var(--color-accent-500);
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    border-radius: var(--radius-btn);
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.btn-primary {
    background-color: var(--color-paper-950);
    color: var(--color-paper-50);
    border: 1px solid var(--color-paper-950);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--color-paper-800);
    box-shadow: var(--shadow-2);
    border-color: var(--color-accent-500);
}
.btn-honey {
    background-color: var(--color-accent-500);
    color: var(--color-paper-950);
    border: 1px solid var(--color-accent-600);
    font-weight: 700;
    box-shadow: var(--shadow-1);
}
.btn-honey:hover:not(:disabled) {
    background-color: var(--color-accent-400);
    box-shadow: var(--shadow-2);
}
.btn-secondary {
    background-color: var(--color-paper-100);
    color: var(--color-paper-950);
    border: 1px solid var(--color-paper-300);
}
.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-paper-200);
    border-color: var(--color-accent-500);
}
.btn-ghost {
    background-color: transparent;
    color: var(--color-paper-700);
    border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-paper-100);
    color: var(--color-paper-950);
}
.btn-destructive {
    background-color: var(--color-danger-600);
    color: var(--color-paper-50);
    border: 1px solid var(--color-danger-600);
}
.btn-destructive:hover:not(:disabled) {
    background-color: var(--color-danger-700);
}

/* Badges & Binary Telemetry */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--radius-chip);
}
.badge-binary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent-900);
    background-color: rgba(var(--color-accent-500-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-600-rgb), 0.4);
    border-radius: var(--radius-chip);
    letter-spacing: 0.05em;
    direction: ltr;
}
[data-theme="cyber_cat"] .badge-binary {
    color: var(--color-accent-700);
    background-color: rgba(var(--color-accent-500-rgb), 0.12);
    border-color: rgba(var(--color-accent-500-rgb), 0.45);
}
.badge-success { background-color: var(--color-success-100); color: var(--color-success-800); border: 1px solid var(--color-success-300); }
.badge-danger { background-color: var(--color-danger-100); color: var(--color-danger-800); border: 1px solid var(--color-danger-300); }
.badge-warning { background-color: var(--color-warning-100); color: var(--color-warning-800); border: 1px solid var(--color-warning-300); }
.badge-info { background-color: var(--color-info-100); color: var(--color-info-800); border: 1px solid var(--color-info-300); }
.badge-neutral { background-color: var(--color-paper-100); color: var(--color-paper-800); border: 1px solid var(--color-paper-300); }

/* Data Table & List Row */
.data-table {
    width: 100%;
    text-align: start;
    border-collapse: collapse;
    /* The root leading floor is for reading; a table row is a unit of scanning
       and 1.7 would spend ~3px of height on every row in the workspace. */
    line-height: 1.5;
}
.data-table th {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-paper-600);
    border-bottom: 1px solid var(--color-paper-200);
    background-color: var(--color-paper-50);
}
.data-table td {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--color-paper-900);
    border-bottom: 1px solid var(--color-paper-100);
}
.list-row {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--color-paper-100);
}
.list-row:last-child {
    border-bottom: none;
}

/* Chat bubble text overflow fix */
#chat-messages { overflow-wrap: break-word; word-wrap: break-word; }
#chat-messages p { word-break: break-word; overflow-wrap: anywhere; hyphens: auto; }
#chat-messages .min-w-0 { overflow: hidden; }

/* Custom Scrollbar - Firefox */
.scrollbar-visible { scrollbar-width: thin; scrollbar-color: var(--color-paper-500) var(--color-paper-200); }
/* Custom Scrollbar - Chrome, Safari, Edge */
.scrollbar-visible::-webkit-scrollbar { -webkit-appearance: none; width: 12px; height: 12px; display: block !important; }
.scrollbar-visible::-webkit-scrollbar-track { background: var(--color-paper-200); border-radius: 6px; }
.scrollbar-visible::-webkit-scrollbar-thumb { background: var(--color-paper-500); border-radius: 6px; border: 3px solid var(--color-paper-200); min-height: 40px; }
.scrollbar-visible::-webkit-scrollbar-thumb:hover { background: var(--color-paper-600); }
.scrollbar-visible::-webkit-scrollbar-corner { background: var(--color-paper-200); }

/* Body copy whose leading is pinned by its size utility.
   The hero subtitle and card descriptions are 14–16px Arabic at 1.43–1.5:
   text-sm and text-base carry a line-height, so the root floor never reaches
   them. p + :not() (0,1,1) outranks a lone .text-sm (0,1,0), and an element
   that states its own leading-* is left exactly as its author set it. */
p:not([class*="leading-"]),
li:not([class*="leading-"]) { line-height: 1.7; }
/* Dense surfaces keep the compact ramp. Equal specificity with the rule above,
   so it has to come after it: a table cell is scanned, not read. */
.data-table p,
.data-table li { line-height: inherit; }

/* Markdown Styles */
.markdown-body { font-size: 0.875rem; line-height: 1.6; }
/* Stays after the paragraph rule above: prose keeps its own 1.6 ramp. */
.markdown-body p { margin-bottom: 0.5em; line-height: inherit; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body a { color: var(--color-accent-700); text-decoration: underline; }
.markdown-body ul { list-style-type: disc; padding-inline-start: 1.5em; padding-inline-end: 0; margin-bottom: 0.5em; }
.markdown-body ol { list-style-type: decimal; padding-inline-start: 1.5em; padding-inline-end: 0; margin-bottom: 0.5em; }
.markdown-body code { background-color: rgba(var(--color-paper-950-rgb), 0.06); padding: 0.2em 0.4em; border-radius: var(--radius-chip); font-family: var(--font-mono); direction: ltr; display: inline-block; }
.markdown-body pre { background-color: var(--color-paper-100); padding: 0.8em; border-radius: var(--radius-card); overflow-x: auto; margin-bottom: 0.5em; direction: ltr; text-align: left; }
/* Enhanced Blockquote Styles */
.markdown-body blockquote {
    position: relative;
    margin: 1.75rem 0;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(var(--color-accent-500-rgb), 0.08) 0%, rgba(var(--color-accent-100-rgb), 0.5) 60%, rgba(var(--color-paper-50-rgb), 0.9) 100%);
    border: 1px solid rgba(var(--color-accent-500-rgb), 0.25);
    border-inline-start: 4px solid var(--color-accent-500);
    border-radius: var(--radius-panel);
    color: var(--color-accent-950);
    font-size: 1.025rem;
    line-height: 1.8;
    font-style: normal;
    box-shadow: 0 2px 8px -2px rgba(var(--color-accent-500-rgb), 0.08), var(--shadow-1);
}

.markdown-body blockquote::before {
    content: "\201C";
    position: absolute;
    top: -0.25rem;
    inset-inline-start: 1rem;
    font-size: 3rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(var(--color-accent-500-rgb), 0.25);
    pointer-events: none;
    user-select: none;
}

[dir="rtl"] .markdown-body blockquote::before {
    content: "\201D";
}

.markdown-body blockquote p {
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
    color: var(--color-accent-950);
    font-weight: 500;
    line-height: 1.8;
}

.markdown-body blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-body blockquote em,
.markdown-body blockquote i {
    font-style: normal;
    color: var(--color-accent-900);
    font-weight: 500;
}

.markdown-body blockquote strong,
.markdown-body blockquote b {
    color: var(--color-paper-950);
    font-weight: 700;
}

/* Long-form reading scale.
   .markdown-body alone is the dense 14px/1.6 ramp shared by chat bubbles,
   comments and product panels. Article prose is read, not scanned, so it takes
   the 18px floor and a wider lead — Arabic stacks marks and descenders into the
   line above. Plex Sans Arabic advances 0.384em per glyph, so the 624px card
   column held 116 glyphs (~21 words) per line at 14px and reads 90 (~16) at 18px.
   It also restores the heading hierarchy: preflight resets every h1-h6 to
   "font-size: inherit; font-weight: inherit; margin: 0", and nothing here or in
   Tailwind re-states them, so section titles rendered as 14px/400 text flush
   against the paragraph above them.
   Shares specificity with the .markdown-body rules above (0,1,1 for the
   descendant ones), so it has to stay after them. */
.markdown-reading { font-size: 1.125rem; line-height: 1.85; }
.markdown-reading :is(h1, h2) {
    margin: 2.1em 0 0.75em;
    font-family: var(--font-display);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}
.markdown-reading :is(h1, h2):first-child,
.markdown-reading h3:first-child,
.markdown-reading h4:first-child { margin-top: 0; }
.markdown-reading h3 {
    margin: 1.7em 0 0.6em;
    font-family: var(--font-display);
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.4;
}
.markdown-reading h4 {
    margin: 1.4em 0 0.5em;
    font-size: 1.08em;
    font-weight: 600;
}
.markdown-reading p { margin-bottom: 1.15em; line-height: inherit; }
.markdown-reading :is(ul, ol) { margin-bottom: 1.3em; padding-inline-start: 1.8em; }
.markdown-reading li { line-height: inherit; }
.markdown-reading li + li { margin-top: 0.4em; }
.markdown-reading a { text-underline-offset: 0.2em; }
/* Pinned rather than left to preflight's `bolder`, which resolves relative to
   the parent weight and so drifts as the article ramp changes. */
.markdown-reading :is(strong, b) { font-weight: 700; }
/* Arabic has no slanted cut; an oblique here is a synthesised shear and reads
   as broken. Same substitution the blockquote already makes. */
.markdown-reading :is(em, i) { font-style: normal; font-weight: 500; }
.markdown-reading code { font-size: 0.82em; }
.markdown-reading pre { margin-bottom: 1.6em; font-size: 0.82em; line-height: 1.7; }
.markdown-reading blockquote { margin: 1.9em 0; font-size: 1.06em; line-height: 1.75; }
.markdown-reading blockquote p { font-weight: 500; line-height: inherit; }
.markdown-reading hr {
    height: 1px;
    margin: 2.4em auto;
    border: 0;
    background-color: rgba(var(--color-accent-500-rgb), 0.3);
}

/* D2 Diagram & Code Block Styles */
.d2-diagram-card {
    margin: 2rem 0;
    box-shadow: var(--shadow-2);
}
.d2-svg-viewport {
    background: var(--code-canvas) !important;
    overflow-x: auto;
    padding: 1.5rem;
}
.d2-svg-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}
.d2-svg-inner svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
/* Modern Terminal Code Block Card */
.code-block-wrapper {
    position: relative;
    margin: 2rem 0;
    border-radius: var(--radius-panel) !important;
    background-color: var(--code-bg) !important;
    border: 1px solid var(--code-line) !important;
    box-shadow: 0 10px 30px -5px rgba(var(--color-paper-950-rgb), 0.35), 0 4px 10px -2px rgba(var(--color-paper-950-rgb), 0.2);
    overflow: hidden;
    direction: ltr !important;
    text-align: left !important;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background-color: var(--code-bg-chrome) !important;
    border-bottom: 1px solid var(--code-line-chrome);
    user-select: none;
}

.code-header-dots {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.code-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: var(--radius-pill);
    display: inline-block;
}
.code-dot-red { background-color: var(--code-dot-red) !important; }
.code-dot-yellow { background-color: var(--code-dot-yellow) !important; }
.code-dot-green { background-color: var(--code-dot-green) !important; }

.code-lang-badge {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--code-lang) !important;
    background-color: rgba(var(--code-lang-rgb), 0.12) !important;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-chip);
    border: 1px solid rgba(var(--code-lang-rgb), 0.25) !important;
}

.copy-code-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-btn);
    font-size: 0.725rem;
    font-weight: 500;
    color: var(--code-btn-fg) !important;
    background-color: var(--code-line-chrome) !important;
    border: 1px solid var(--code-btn-line) !important;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-1);
}

.copy-code-btn:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--code-canvas) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.copy-code-btn.copied {
    color: var(--code-copied) !important;
    background-color: rgba(52, 211, 153, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.5) !important;
}

.code-content-viewport {
    padding: 1.25rem !important;
    overflow-x: auto;
    background-color: var(--code-bg) !important;
    color: var(--code-fg) !important;
}

.code-content-viewport pre {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    tab-size: 4;
}

.code-content-viewport code {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    direction: ltr !important;
}

.code-content-viewport::-webkit-scrollbar {
    height: 6px;
}
.code-content-viewport::-webkit-scrollbar-track {
    background: var(--code-bg-chrome);
    border-radius: 3px;
}
.code-content-viewport::-webkit-scrollbar-thumb {
    background: var(--code-thumb);
    border-radius: 3px;
}
.code-content-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--code-thumb-hover);
}

/* Emoji Picker Styles */
emoji-picker {
    width: 100%;
    max-width: 350px;
    height: 300px;
    --border-radius: var(--radius-panel);
    --background: var(--color-paper-50);
}

/* Toast notifications — fixed overlay, no layout shift */
.toast-host {
    position: fixed;
    top: max(1.25rem, env(safe-area-inset-top));
    inset-inline: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding-inline: 1rem;
    pointer-events: none;
}
.toast-host--hub {
    top: calc(64px + 0.75rem);
}
.toast {
    width: min(100%, 26rem);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--radius-card);
    background: rgba(var(--color-paper-50-rgb), 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-edge);
    box-shadow: var(--shadow-3);
    pointer-events: auto;
}
.toast--success {
    border-color: rgba(var(--color-accent-500-rgb), 0.5);
}
.toast--error {
    border-color: rgba(var(--color-danger-600-rgb), 0.45);
}
.toast--warning {
    border-color: rgba(var(--color-accent-600-rgb), 0.45);
}
.toast--info {
    border-color: rgba(var(--color-info-600-rgb), 0.45);
}

.toast__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}
.toast--success .toast__icon {
    background: rgba(var(--color-accent-500-rgb), 0.2);
    color: var(--color-accent-800);
    border-color: rgba(var(--color-accent-500-rgb), 0.45);
}
.toast--error .toast__icon {
    background: rgba(var(--color-danger-600-rgb), 0.15);
    color: var(--color-danger-700);
    border-color: rgba(var(--color-danger-600-rgb), 0.35);
}
.toast--warning .toast__icon {
    background: rgba(var(--color-accent-600-rgb), 0.2);
    color: var(--color-accent-800);
    border-color: rgba(var(--color-accent-600-rgb), 0.4);
}
.toast--info .toast__icon {
    background: rgba(var(--color-info-600-rgb), 0.15);
    color: var(--color-info-700);
    border-color: rgba(var(--color-info-600-rgb), 0.35);
}

.toast__message {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-paper-950);
}

.toast__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-chip);
    color: var(--color-paper-500);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.toast__close:hover {
    color: var(--color-paper-950);
    background-color: rgba(var(--color-accent-500-rgb), 0.15);
}

.toast-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background-color: rgba(var(--color-paper-950-rgb), 0.06);
}
.toast-progress-bar {
    height: 100%;
    transition: width 0.1s linear;
}
.toast--success .toast__progress-fill { background-color: var(--color-accent-500); }
.toast--error .toast__progress-fill   { background-color: var(--color-danger-600); }
.toast--warning .toast__progress-fill { background-color: var(--color-accent-600); }
.toast--info .toast__progress-fill    { background-color: var(--color-info-600); }

@media (prefers-reduced-motion: reduce) {
    .toast-host[x-transition] { transition: none !important; }
}

/* Elevation ramp for markup. Templates ask for a step by name rather than
   writing a shadow literal, so the ramp stays in one place.
   These must stay last: they are single-class selectors like the component
   rules below them, and any component that sets its own box-shadow (.card-hive,
   .card-interactive:hover, .btn-honey) wins if it comes after. */
.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-3); }