/* ═══════════════════════════════════════════════════════════════
   WANDALIX — Design Tokens v1.1
   Dark Slavic Mystical RPG Social Portal
   Phase 1: token foundation — layout & component rules unchanged.
   ═══════════════════════════════════════════════════════════════ */
:root {

    /* ── BACKGROUNDS ──────────────────────────────────────────── */
    --bg-void:          #0A0A0F;   /* deepest obsidian — page root      */
    --bg-base:          #0F0F1A;   /* main content area                  */
    --bg-surface:       #14141F;   /* card surface                       */
    --bg-elevated:      #1A1A2E;   /* modals, dropdowns, raised panels   */
    --bg-interactive:   #1F1F35;   /* hover / focus backgrounds          */
    --bg-overlay:       rgba(10,10,15,0.85);

    /* ── GOLD (Wisdom · Rank · Sacred) ───────────────────────── */
    --gold-900:         #3D2A00;
    --gold-700:         #7A5200;
    --gold-500:         #B8860B;
    --gold-400:         #D4A017;   /* primary gold — headings, XP        */
    --gold-300:         #E8C547;   /* bright gold — highlights, icons    */
    --gold-200:         #F5E09A;   /* pale gold — subtle labels          */
    --gold-glow:        rgba(212,160,23,0.15);
    --gold-glow-strong: rgba(212,160,23,0.30);

    /* ── FOREST GREEN (Nature · Vitality · Growth) ────────────── */
    --forest-900:       #0B1A0F;
    --forest-700:       #1A3A22;
    --forest-500:       #2D6A3F;
    --forest-400:       #3D8A52;
    --forest-300:       #5BAF70;
    --forest-200:       #A8D8B4;

    /* ── AMBER / EMBER (Energy · Quests · Action) ────────────── */
    --ember-500:        #C2410C;
    --ember-400:        #EA580C;
    --ember-300:        #FB923C;
    --ember-200:        #FED7AA;

    /* ── MOONLIGHT (Akasha · Mystical · Wgląd) ──────────────── */
    --moon-500:         #4B5EAA;
    --moon-400:         #6B7FCA;
    --moon-300:         #A0B0E8;
    --moon-200:         #D0D8F5;
    --moon-glow:        rgba(107,127,202,0.12);

    /* ── RESONANCE ───────────────────────────────────────────── */
    --resonance-500:    #6B21A8;
    --resonance-400:    #9B59B6;
    --resonance-300:    #C084FC;
    --resonance-glow:   rgba(155,89,182,0.15);

    /* ── PIĘĆ ŻYWIOŁÓW — Five Elements ──────────────────────── */
    --el-duch:          #9B59B6;   /* Duch       — Spirit / violet-purple */
    --el-duch-glow:     rgba(155,89,182,0.15);
    --el-powietrze:     #A0B0E8;   /* Powietrze  — Air / pale moonlight   */
    --el-powietrze-glow:rgba(160,176,232,0.15);
    --el-woda:          #0891B2;   /* Woda       — Water / deep teal      */
    --el-woda-glow:     rgba(8,145,178,0.15);
    --el-ziemia:        #3D8A52;   /* Ziemia     — Earth / deep forest    */
    --el-ziemia-glow:   rgba(61,138,82,0.15);
    --el-ogien:         #EA580C;   /* Ogień      — Fire / amber ember     */
    --el-ogien-glow:    rgba(234,88,12,0.15);

    /* ── TEXT ────────────────────────────────────────────────── */
    --text-primary:     #F0EAD6;   /* warm parchment white               */
    --text-secondary:   #B8A98C;   /* aged parchment                     */
    --text-muted:       #948569;   /* faded ink — raised from #6B5E4A (~3.1:1)
                                       to clear ~5.5:1; used app-wide for
                                       metadata (Global CSS Master Pass)  */
    --text-accent:      #E8C547;   /* gold text — headings, XP values    */
    --text-inverse:     #0A0A0F;   /* for text on gold/light backgrounds */
    --text-link:        #A0B0E8;   /* moonlight blue for links           */
    --text-link-hover:  #D0D8F5;

    /* ── BORDERS ─────────────────────────────────────────────── */
    --border-subtle:    rgba(240,234,214,0.06);
    --border-rune:      rgba(212,160,23,0.18);   /* gold-traced card border  */
    --border-active:    rgba(212,160,23,0.45);   /* focused / selected state */
    --border-moon:      rgba(107,127,202,0.20);
    --border-forest:    rgba(45,106,63,0.30);

    /* ── SEMANTIC ────────────────────────────────────────────── */
    --color-success:    #3D8A52;
    --color-warning:    #D4A017;
    --color-danger:     #C2410C;
    --color-info:       #6B7FCA;

    /* ── TYPOGRAPHY ──────────────────────────────────────────── */
    /* Stage 2: the role tokens now resolve to the reference's three
       families. Every rule below keeps reading --font-body / --font-label
       exactly as before, so the character changes without any selector
       being touched.
         display → Cinzel             headings, branding, buttons
         heading → Cormorant Garamond section titles
         body    → Cormorant Garamond running text, post content
         label   → JetBrains Mono     metadata, counters, micro-labels    */
    --font-display:     'Cinzel', 'Times New Roman', serif;
    --font-display-dec: 'Cinzel', 'Times New Roman', serif;
    --font-heading:     'Cormorant Garamond', 'Georgia', serif;
    --font-body:        'Cormorant Garamond', 'Georgia', serif;
    --font-label:       'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.8125rem;   /* 13px */
    --text-base: 1rem;        /* 16px */
    --text-md:   1.125rem;    /* 18px */
    --text-lg:   1.25rem;     /* 20px */
    --text-xl:   1.5rem;      /* 24px */
    --text-2xl:  1.875rem;    /* 30px */
    --text-3xl:  2.375rem;    /* 38px */

    /* ── SPACING (4pt rhythm) ────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* ── RADIUS ──────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── ELEVATION / SHADOWS ─────────────────────────────────── */
    --shadow-card:
        0 1px 2px rgba(0,0,0,0.4),
        0 4px 16px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(240,234,214,0.04);
    --shadow-card-gold:
        0 1px 2px rgba(0,0,0,0.5),
        0 4px 24px rgba(0,0,0,0.35),
        0 0 0 1px rgba(212,160,23,0.18),
        inset 0 1px 0 rgba(212,160,23,0.06);
    --shadow-modal:
        0 8px 48px rgba(0,0,0,0.7),
        0 0 0 1px rgba(212,160,23,0.14);
    --shadow-glow-gold:  0 0 20px rgba(212,160,23,0.25), 0 0 60px rgba(212,160,23,0.08);
    --shadow-glow-moon:  0 0 20px rgba(107,127,202,0.20), 0 0 60px rgba(107,127,202,0.06);
    --shadow-glow-ember: 0 0 20px rgba(234,88,12,0.25),  0 0 60px rgba(234,88,12,0.08);

    /* ── Z-INDEX ─────────────────────────────────────────────── */
    --z-base:     0;
    --z-raised:   10;
    --z-sticky:   20;
    --z-overlay:  40;
    --z-modal:    100;
    --z-toast:    200;
    --z-tooltip:  300;

    /* ── ANIMATION ───────────────────────────────────────────── */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-inout:    cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* ── GLASS ───────────────────────────────────────────────── */
    --glass-bg:          rgba(20,20,31,0.72);
    --glass-blur:        blur(16px);
    --glass-border:      1px solid rgba(240,234,214,0.08);
    --glass-border-gold: 1px solid rgba(212,160,23,0.20);

    /* ── BACKWARD-COMPATIBLE ALIASES ─────────────────────────── */
    /* All existing classes that use var(--bg), var(--panel),     */
    /* var(--text), var(--muted), var(--accent) continue to work  */
    /* without any change to the rules below this block.          */
    --bg:     var(--bg-base);
    --panel:  var(--bg-surface);
    --text:   var(--text-primary);
    --muted:  var(--text-secondary);
    --accent: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   WANDALIX — REFERENCE TOKEN LAYER  (--wdx-*)   ·   Migration Stage 1
   ═══════════════════════════════════════════════════════════════
   Values transcribed from REFERENCE_WANDALIX_V1 (index.php <style>
   and profil.php <style>). This block is PURELY ADDITIVE: nothing
   above it is redefined, and no existing rule reads a --wdx-* name
   yet, so adding it repaints nothing. Later stages migrate
   components onto these tokens one at a time.

   Naming mirrors the reference so the mapping stays auditable:
     --wdx-bg0..bg5   surface ramp        (ref --bg0..--bg5)
     --wdx-t1..t4     text ramp           (ref --t1..--t4)
     --wdx-sp-*       Fibonacci spacing   (ref --sp-*)
     --wdx-fd/fb/fm   display/body/mono   (ref --fd/--fb/--fm)
   ═══════════════════════════════════════════════════════════════ */
:root {

    /* ── Type families ───────────────────────────────────────── */
    --wdx-fd: 'Cinzel', 'Times New Roman', serif;              /* display  */
    --wdx-fb: 'Cormorant Garamond', Georgia, serif;            /* body     */
    --wdx-fm: 'JetBrains Mono', ui-monospace, monospace;       /* meta     */

    /* ── Layout (Fibonacci) ──────────────────────────────────── */
    --wdx-sw: 233px;   /* sidebar width      */
    --wdx-th:  55px;   /* topbar height      */
    --wdx-rw: 280px;   /* right panel width  */

    /* ── Spacing (Fibonacci) ─────────────────────────────────── */
    --wdx-sp-xs:   8px;
    --wdx-sp-sm:  13px;
    --wdx-sp-md:  21px;
    --wdx-sp-lg:  34px;
    --wdx-sp-xl:  55px;
    --wdx-sp-2xl: 89px;

    /* ── Radius ──────────────────────────────────────────────── */
    /* The reference is a sharp-edged design: these exist for the
       few places that legitimately round (bars, pills), never for
       cards, buttons, inputs or panels. */
    --wdx-r-hair: 1px;   /* thin progress bars   */
    --wdx-r-bar:  2px;   /* standard progress bar */
    --wdx-r-full: 50%;   /* avatars, status dots  */

    /* ── Motion ──────────────────────────────────────────────── */
    --wdx-ease-out:    cubic-bezier(.16, 1, .3, 1);
    --wdx-ease-in-out: cubic-bezier(.45, 0, .55, 1);
    --wdx-t-fast: 160ms;
    --wdx-t-base: 260ms;
    --wdx-t-slow: 440ms;

    /* ── Gold ────────────────────────────────────────────────── */
    --wdx-gold:    #C9A84C;
    --wdx-gold-hi: #E8C46A;
    --wdx-gold-lo: #9A7A2E;

    /* ── Surfaces (dark — the only theme in this migration) ──── */
    --wdx-bg0: #09090B;   /* page root      */
    --wdx-bg1: #0F1012;   /* panels, cards  */
    --wdx-bg2: #141518;   /* nested cards   */
    --wdx-bg3: #1A1C20;   /* hover surface  */
    --wdx-bg4: #21242A;   /* tooltips       */
    --wdx-bg5: #292D35;   /* highest raise  */

    /* ── Text ramp ───────────────────────────────────────────────────────────
       t3 drives metadata read across the whole app (timestamps, counters,
       placeholders, section labels) — Global CSS Master Pass 2026-08-23
       raised it from rgba(152,140,116,.50) [~1.7:1 on card surfaces, well
       below WCAG] to a value that clears ~4:1 while staying visibly the
       dimmest readable tier, one step below t2. t4 (locked/disabled nav
       items) stays dim on purpose — it signals "not active" — but was
       bumped enough to still be legible rather than nearly invisible. ── */
    --wdx-t1: rgba(232, 222, 200, .95);
    --wdx-t2: rgba(195, 183, 158, .72);
    --wdx-t3: rgba(184, 174, 150, .68);
    --wdx-t4: rgba(158, 148, 124, .60);

    /* ── Gold accents & lines ────────────────────────────────── */
    --wdx-gold-sat:     #C9A84C;
    --wdx-gold-dim:     rgba(201, 168, 76, .45);
    --wdx-gold-glow:    rgba(201, 168, 76, .12);
    --wdx-gold-glow-hi: rgba(201, 168, 76, .22);
    --wdx-gold-line:    rgba(201, 168, 76, .16);

    --wdx-border:    rgba(201, 168, 76, .14);
    --wdx-border-h:  rgba(201, 168, 76, .36);
    --wdx-border-hh: rgba(201, 168, 76, .60);

    /* ── Elevation ───────────────────────────────────────────── */
    --wdx-shadow-sm:   0 2px  8px rgba(0, 0, 0, .40);
    --wdx-shadow-md:   0 4px 20px rgba(0, 0, 0, .50), 0 1px 4px rgba(0, 0, 0, .25);
    --wdx-shadow-lg:   0 8px 40px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .30);
    --wdx-shadow-glow: 0 0 28px rgba(201, 168, 76, .14);

    /* ── Chrome ──────────────────────────────────────────────── */
    --wdx-topbar-bg:  rgba(9, 9, 11, .96);
    --wdx-overlay-bg: rgba(0, 0, 0, .80);

    /* ── Pięć Żywiołów — colours per decision O1 (reference wins).
           Element MECHANICS stay with CURRENT_APP (node/src/rpg). ── */
    --wdx-el-ogien:     #E05252;
    --wdx-el-woda:      #4A9EDD;
    --wdx-el-ziemia:    #5AAA6E;
    --wdx-el-powietrze: #A0C4D8;
    --wdx-el-duch:      #9B6FCC;

    --wdx-el-ogien-glow:     rgba(224,  82,  82, .35);
    --wdx-el-woda-glow:      rgba( 74, 158, 221, .35);
    --wdx-el-ziemia-glow:    rgba( 90, 170, 110, .35);
    --wdx-el-powietrze-glow: rgba(160, 196, 216, .35);
    --wdx-el-duch-glow:      rgba(155, 111, 204, .35);

    /* ── Post aura levels 1–5 (consumed in Stage 5) ──────────── */
    --wdx-aura-1-border: rgba(224,  82,  82, .32);
    --wdx-aura-1-glow:   rgba(224,  82,  82, .20);
    --wdx-aura-2-border: rgba( 74, 158, 221, .35);
    --wdx-aura-2-glow:   rgba( 74, 158, 221, .20);
    --wdx-aura-3-border: rgba( 90, 170, 110, .38);
    --wdx-aura-3-glow:   rgba( 90, 170, 110, .20);
    --wdx-aura-4-border: rgba(155, 111, 204, .50);
    --wdx-aura-4-glow:   rgba(155, 111, 204, .28);
    --wdx-aura-5-border: rgba(201, 168, 76, .65);
    --wdx-aura-5-glow:   rgba(201, 168, 76, .35);

    /* ── System / state colours ──────────────────────────────── */
    --wdx-boost:   #C08BFF;   /* boost · iskra · buffs  */
    --wdx-online:  #52C060;   /* presence dot           */
    --wdx-danger:  #E06666;   /* logout, destructive    */
    --wdx-flame:   rgba(201, 168, 76, .80);   /* Przekaz Światła */

    /* ── Profile page — forest obsidian ramp (Stage 7) ───────── */
    --wdx-prof-bg0: #060906;
    --wdx-prof-bg1: #0A0E08;
    --wdx-prof-bg2: #0F1409;
    --wdx-prof-bg3: #141A0C;
    --wdx-prof-bg4: #1A2110;
    --wdx-prof-bg5: #1E2714;
    --wdx-prof-energy: #4ECB80;   /* Tree of Life green */
    --wdx-prof-akasza: #9B6FCC;

    /* ── Tree of Life wood palette (Stage 7) ─────────────────── */
    --wdx-tree-trunk:        #3A2818;
    --wdx-tree-trunk-stroke: #5E3B1F;
    --wdx-tree-branch:       #52361B;

    /* ── Sacred grid — the ground the whole portal sits on ───── */
    --wdx-sacred-line: rgba(201, 168, 76, .032);
    --wdx-sacred-size: 34px 34px;   /* Fibonacci */
    --wdx-sacred-grid:
        linear-gradient(var(--wdx-sacred-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--wdx-sacred-line) 1px, transparent 1px);

    /* ── Film grain ──────────────────────────────────────────── */
    --wdx-grain-opacity: .50;

    /* ── Z-index — mapped onto the EXISTING --z-* scale, not the
           reference's ad-hoc 9999/11000/19999. The grain sits above
           --z-tooltip (300) so it veils the whole portal exactly as
           the reference does, and is always pointer-events:none. ── */
    --wdx-z-grain: 320;
}

/* ── Phase 3A: global base + topbar ──────────────────────────────────────── */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    /* Stage 2: reference body metrics — 15px on a 1.65 leading. Set here
       rather than on --text-base, which other rules use as a scale step. */
    font-size: 15px;
    line-height: 1.65;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ── Sacred grid (Stage 1) ────────────────────────────────────────────
       Two hairline gradients on a 34px Fibonacci pitch. Declared after the
       `background` shorthand above, which would otherwise reset it to none.
       `fixed` keeps the lattice still while the feed scrolls over it — the
       portal reads as standing on ground rather than sliding on paper. */
    background-image:      var(--wdx-sacred-grid);
    background-size:       var(--wdx-sacred-size);
    background-attachment: fixed;
}

/* ── Film grain (Stage 1) ────────────────────────────────────────────────
   A fractal-noise SVG as a data URI — no network request, no asset file.
   The rect inside the SVG already carries opacity .028; the .5 on the layer
   halves it again, so the effective veil is ~1.4%: enough to kill the flat
   digital sheen of large dark surfaces, not enough to read as texture.

   pointer-events:none is load-bearing — the layer spans the whole viewport
   and would otherwise swallow every click in the application. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--wdx-z-grain);
    pointer-events: none;
    opacity: var(--wdx-grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

/* ── Scrollbars (Stage 1) ────────────────────────────────────────────────
   A 3px gold hairline, matching the reference. Scrolling stays on the wheel,
   trackpad and keyboard; the bar is an indicator, not a drag handle. */
::-webkit-scrollbar        { width: 3px; height: 3px; }
::-webkit-scrollbar-track  { background: var(--wdx-bg1); }
::-webkit-scrollbar-thumb  { background: var(--wdx-gold-dim); border-radius: var(--wdx-r-bar); }
::-webkit-scrollbar-thumb:hover { background: var(--wdx-gold); }

/* Firefox equivalent. Gated behind @supports because Chromium implements
   BOTH properties and lets the standard `scrollbar-width` win, which would
   silently widen the bar back to ~10px and discard the 3px rule above.
   The query is true only in engines without the WebKit pseudo — i.e. Gecko. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--wdx-gold-dim) var(--wdx-bg1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   KEYFRAMES — reference motion vocabulary (Stage 1)
   ═══════════════════════════════════════════════════════════════════════
   Only frames with a confirmed consumer in Stages 2–8 are defined here;
   the reference's unused animations (spin, waveAnim, symbolFloat,
   cardReveal, glowPulse, giftGlow, …) are deliberately left behind.
   All are `wdx-` prefixed so they cannot collide with the existing
   `fadeInOut` and `rp-ring-spin`.
   ═══════════════════════════════════════════════════════════════════════ */

/* Entrances — post cards, feed column, panels (Stage 5) */
@keyframes wdx-fadeUp { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wdx-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Presence dots, notification badge (Stages 4 & 6) */
@keyframes wdx-blink {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%      { opacity: .4; transform: scale(.75); }
}

/* Gold sweep across logo, publish button, XP fill (Stages 4–6) */
@keyframes wdx-goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Rotating rune ring, avatar orbit ring (Stages 4 & 6) */
@keyframes wdx-ringRot { to { transform: rotate(360deg); } }

/* Breathing border on the mini-profile avatar (Stage 6) */
@keyframes wdx-borderGlow {
    0%, 100% { box-shadow: var(--wdx-shadow-sm); }
    50%      { box-shadow: var(--wdx-shadow-sm), var(--wdx-shadow-glow); }
}

/* Reaction press feedback (Stage 5) */
@keyframes wdx-reactPop {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.3); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1);   }
}

/* Post aura levels 4 and 5 — Przebudzony / Legenda (Stage 5) */
@keyframes wdx-auraPulse4 {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(192,139,255,.35), inset 0 0 0 1px rgba(192,139,255,.25); }
    50%      { box-shadow: 0 0 22px 6px rgba(192,139,255,.55), inset 0 0 0 1px rgba(192,139,255,.45); }
}
@keyframes wdx-auraPulse5 {
    0%, 100% { box-shadow: 0 0 18px  4px rgba(201,168,76,.45), inset 0 0 0 1px rgba(201,168,76,.35); }
    50%      { box-shadow: 0 0 32px 10px rgba(201,168,76,.65), inset 0 0 0 1px rgba(201,168,76,.55); }
}

/* XP bar fill on first paint (Stage 6) */
@keyframes wdx-xpAnim { from { width: 0; opacity: 0; } to { opacity: 1; } }

/* Skeleton placeholders while Wataha loads (Stage 6) */
@keyframes wdx-skeletonPulse { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }

/* Przekaz Światła — active boost marker (Stage 5) */
@keyframes wdx-flamePulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* Central glow on the login gateway (Stage 8) */
@keyframes wdx-breathe {
    from { transform: translate(-50%, -50%) scale(1);    opacity: .6; }
    to   { transform: translate(-50%, -50%) scale(1.15); opacity: 1;  }
}

/* Tree of Life — roots drawing in, fruit appearing, dominant fruit breathing (Stage 7) */
@keyframes wdx-rootGrow   { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }
@keyframes wdx-fruitIn    { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes wdx-auraBreath { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

/* ── Reduced motion ──────────────────────────────────────────────────────
   Covers the frames above and the two that predate this migration
   (fadeInOut, rp-ring-spin). Anything that only moves for atmosphere
   stops; nothing here conveys state on its own, so nothing is lost. */
@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;
    }
}

/* Global heading hierarchy */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    margin-top: 0;
}
h4, h5, h6 {
    font-family: var(--font-label);
    font-weight: 600;
    color: var(--text);
    margin-top: 0;
}

a { color: var(--accent); text-decoration: none; }

/* Stage 2: form controls do not inherit type by default — unstyled buttons,
   inputs and textareas were falling back to Arial and monospace, which read
   as a different design system sitting inside this one. The reference does
   the same reset. Specificity 0,0,1: every existing class rule still wins. */
button, input, select, textarea { font-family: inherit; }

/* ── Phase 3C: Topbar premium upgrade ────────────────────────────────────── */

/* Topbar container */
.topbar {
    display: grid;
    /* brand | nav | search | actions | auth */
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    height: var(--wdx-th);   /* Stage 3: 55px, the reference topbar height */
    background: rgba(10,10,15,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-rune);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

/* Brand block */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    user-select: none;
    flex-shrink: 0;
}
.topbar-brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-400);
    filter: drop-shadow(0 0 6px rgba(212,160,23,0.35));
    transition: filter var(--duration-base) var(--ease-out);
}
.topbar-brand:hover .topbar-brand__mark {
    filter: drop-shadow(0 0 10px rgba(212,160,23,0.55));
}
.topbar-brand__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}
.topbar-brand__name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-300);
    letter-spacing: 0.1em;
    line-height: 1;
}
.topbar-brand__sub {
    font-family: var(--font-label);
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--gold-700);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

/* Nav link group */
.topbar nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.topbar-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0;
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.topbar-nav__link:hover {
    color: var(--text-primary);
    background: var(--bg-interactive);
}
.topbar-nav__link svg {
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.topbar-nav__link:hover svg { opacity: 1; }

/* Auth area */
.topbar-auth {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* User chip — logged-in state */
.topbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px 4px 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-rune);
    border-radius: 0;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    cursor: default;
}
.topbar-user-chip:hover {
    border-color: var(--border-active);
    background: var(--bg-interactive);
}

/* Avatar circle with initial */
.topbar-user-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold-900);
    border: 1px solid var(--border-rune);
    color: var(--gold-300);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

/* Login name */
.topbar-user-chip__name {
    font-family: var(--font-label);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gold-200);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout icon button inside chip */
.topbar-user-chip__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 2px;
    border-radius: 0;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.topbar-user-chip__logout:hover { color: var(--color-danger); }

/* Login link — guest state */
.topbar-login {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gold-400);
    padding: 6px 16px;
    border-radius: 0;
    border: 1px solid var(--border-rune);
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.topbar-login:hover {
    color: var(--gold-300);
    border-color: var(--border-active);
    background: var(--gold-glow);
}

/* ── Topbar search field — Phase topbar-update ────────────────── */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 320px;
    width: 100%;
    justify-self: center;   /* centre in the grid column */
}
.topbar-search__icon {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    color: var(--text-muted, #6B5E4A);
    pointer-events: none;
}
.topbar-search__input {
    width: 100%;
    height: 34px;
    padding: 0 32px 0 34px;   /* room for icon left, kbd right */
    background: rgba(26,26,46,0.70);
    border: 1px solid var(--border-rune);
    border-radius: 0;
    color: var(--text-primary, #F0EAD6);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    outline: none;
    cursor: default;          /* disabled — visual only */
    /* disabled state styling without relying solely on :disabled */
    opacity: 0.55;
    transition: border-color 0.15s, opacity 0.15s;
}
.topbar-search__input::placeholder {
    color: var(--text-muted, #6B5E4A);
    font-style: italic;
}
/* When search becomes active in future, re-enable: */
.topbar-search__input:not(:disabled):focus {
    border-color: var(--border-active);
    opacity: 1;
    background: rgba(26,26,46,0.90);
}
.topbar-search__kbd {
    position: absolute;
    right: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(212,160,23,0.15);
    border-radius: 0;
    font-family: var(--font-label);
    font-size: 0.60rem;
    color: var(--text-muted, #6B5E4A);
    pointer-events: none;
    opacity: 0.60;
}

/* ── Topbar future action icon buttons ───────────────────────── */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.topbar-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    border: 1px solid transparent;
    color: var(--text-muted, #6B5E4A);
    opacity: 0.50;
    cursor: default;          /* visual only — no action yet */
}

/* ── Topbar responsive: collapse search + actions on small screens ───────
   Stage 3 raised this from 900px. The topbar used to span the whole
   viewport; now it starts where the sidebar ends, so it has 233px less to
   work with than the viewport width suggests. Its full content measures
   ~788px, which means it only fits from a ~1021px viewport upward — between
   901px and 1020px the auth chip was pushed past the right edge and the
   whole document scrolled sideways.

   1040px gives that threshold a little headroom. The band this newly
   affects (901-1040px) loses the top nav, search and action icons, but the
   sidebar is on screen at those widths and carries the same destinations,
   so nothing becomes unreachable — this is exactly the compact treatment
   the rule was written for. */
@media (max-width: 1040px) {
    .topbar {
        grid-template-columns: auto 1fr auto;
    }
    .topbar nav,
    .topbar-search,
    .topbar-actions {
        display: none;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   SHELL — reference three-column geometry (Stage 3)
   ═══════════════════════════════════════════════════════════════════════
       side | top
       side | feed | right

   The sidebar owns the full height of the viewport and the topbar starts
   where the sidebar ends, instead of running across the whole window. The
   columns sit flush (gap 0) and are separated by hairlines, the way the
   reference builds the frame.

   The document remains the scroller — the feed is still the page, not a
   nested scroll region — so there is exactly one page-level scrollbar.
   ═══════════════════════════════════════════════════════════════════════ */
.app-shell {
    display: grid;
    grid-template-columns: var(--wdx-sw) minmax(0, 1fr) var(--wdx-rw);
    grid-template-rows: var(--wdx-th) 1fr;
    grid-template-areas:
        "side top  top"
        "side feed right";
    gap: 0;
    padding: 0;
    min-height: 100vh;
}

.app-shell > .sidebar     { grid-area: side; }
.app-shell > .content     { grid-area: feed; }
.app-shell > .right-panel { grid-area: right; }

/* Profile Master Merge: the /profil route drops the right-panel column so
   the RPG dashboard hero has real width to work with. right-panel.phtml is
   simply not require()'d on this route (see layout.phtml) — this only
   reshapes the grid the remaining two columns sit in. Sidebar and topbar
   are untouched, and every other route keeps the normal three columns. */
.app-shell--wide-profile {
    grid-template-columns: var(--wdx-sw) minmax(0, 1fr);
    grid-template-areas:
        "side top"
        "side feed";
}
/* Phase B note: a `.app-shell--wide-profile > .content { max-width: 1440px }`
   used to sit here and never applied. It is (0,2,0) — exactly the specificity
   of `.app-shell > .content` fifty lines below, which caps the column at
   1200px — and on a specificity tie the later rule wins. So /profil silently
   kept the normal feed cap the whole time. The declaration now lives after
   that rule, in PROFILE CANVAS below, where it can actually take effect. */

/* Topbar: placed by the "top" area for its columns, but deliberately
   spanning BOTH rows.

   A sticky element can only travel inside its containing block, and for a
   grid item that block is its grid area. Pinned to row 1 alone the area is
   exactly 55px — the element's own height — so it has nowhere to move and
   sticky silently does nothing; the bar scrolls away. Spanning both rows
   gives it the full column height to travel through, and align-self:start
   keeps it 55px tall sitting at the top of that span. Row 1 stays reserved
   at 55px, so the feed still begins below it rather than underneath it. */
.app-shell > .topbar {
    grid-area: top;
    grid-row: 1 / -1;
    align-self: start;
    height: var(--wdx-th);
}

/* The feed column carries the padding the shell used to provide, and caps
   its measure so lines stay readable on very wide displays. */
.app-shell > .content {
    padding: 24px 22px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ── PROFILE CANVAS (Phase B) ────────────────────────────────────────────
   /profil is not a feed column — it is an RPG character dashboard, and it
   already gave up the right panel to get room. This lifts its cap so the
   cockpit can use the width the shell hands it instead of leaving ~340px
   of the canvas empty either side.

   Deliberately placed AFTER `.app-shell > .content` above: both selectors
   are (0,2,0), so source order is the only thing that decides, and the
   earlier attempt at this rule lost that race silently.

   1480 = the profile canvas cap (1440, set on .wp in profile.css) plus the
   20px of padding either side, so the column is never wider than the page
   inside it can use. Change one and change the other.

   Only the cap and the side padding move. Every other route keeps 1200px,
   and /profil/edit — a plain form, matched separately in layout.phtml —
   is untouched. */
.app-shell--wide-profile > .content {
    max-width: 1480px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Sidebar spans both rows, so it is tall enough for sticky to have travel
   room and stays put while the feed scrolls past it. */
.app-shell > .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--wdx-border);
}

/* Right panel starts below the topbar and holds that position. */
.app-shell > .right-panel {
    position: sticky;
    top: var(--wdx-th);
    height: calc(100vh - var(--wdx-th));
    overflow-y: auto;
    padding: 22px 18px;
    border-left: 1px solid var(--wdx-border);
}
.sidebar, .post-card {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 16px;
}
/* right-panel base kept for layout; visual override by .rp below */
.right-panel { background: transparent; border: none; padding: 0; }
/* .sb overrides the generic .sidebar shell — see Phase 3B block below */
.sidebar { min-height: 240px; }
.sidebar.sb { background: none; border: none; padding: 0; min-height: 0; }
.content { min-width: 0; }
/* .pc overrides the generic .post-card shell — see Phase 4A block below */
.post-card { margin-bottom: 16px; }
.post-card.pc { background: none; border: none; padding: 0; }
.reactions { display: flex; gap: 8px; margin-top: 12px; }
.reactions button {
    border: 0;
    border-radius: 0;
    padding: 8px 12px;
    background: rgba(255,255,255,.08);
    color: var(--text);
    cursor: pointer;
}
/* ── Shell below 900px (Stage 3) ─────────────────────────────────────────
   One column: topbar, then feed. The sidebar and right panel are hidden and
   the mobile bottom navigation is the only navigation, as decided in O2 —
   there is no second off-canvas system.

   The previous rule here read `.sidebar, .right-panel { display: none; }`
   at specificity (0,1,0). Two later single-class rules — `.rp{display:flex}`
   and `.sb{display:flex}` — matched at the same specificity and, being
   further down the file, won. The panels therefore never hid: at 375px the
   sidebar occupied the first 749px of the document and the right panel
   landed below the feed, so the first thing a phone user met was a
   full-screen menu they had to scroll past.

   The fix is structural, not brute force: addressing the panels as direct
   children of the shell raises specificity to (0,2,0), which beats a bare
   class regardless of source order. No !important is needed, and the .sb /
   .rp rules stay exactly as they are for the desktop layout. */
@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--wdx-th) 1fr;
        grid-template-areas:
            "top"
            "feed";
    }

    .app-shell > .sidebar,
    .app-shell > .right-panel { display: none; }

    .app-shell > .content { padding: 12px 10px; }
}

/* Error pages */
.error-page {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 40px 24px;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
}
.error-page h1 { color: var(--accent); margin-bottom: 12px; }
.error-page p  { color: var(--muted); margin-bottom: 24px; }

/* Category badge on post cards */
.post-kat {
    font-size: .78em;
    color: var(--accent);
    opacity: .85;
}

/* Post images */
.post-img-wrap {
    margin: 12px 0;
    border-radius: 0;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}
.post-img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 0;
}

/* Link preview cards */
.link-preview {
    display: flex;
    flex-direction: column;
    margin: 12px 0;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.03);
    transition: border-color .2s;
}
.link-preview:hover { border-color: var(--accent); }
.lp-img-wrap { width: 100%; max-height: 200px; overflow: hidden; }
.lp-img      { display: block; width: 100%; height: 200px; object-fit: cover; }
.lp-body     { padding: 10px 14px 12px; }
.lp-title    { font-size: .9em; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.lp-desc     { font-size: .8em; color: var(--muted); margin-bottom: 6px;
               display: -webkit-box; -webkit-line-clamp: 2;
               -webkit-box-orient: vertical; overflow: hidden; }
.lp-domain   { font-size: .75em; color: var(--accent); opacity: .8; }

/* Reaction buttons with counts */
.react-btn {
    font-family: var(--font-label);   /* Stage 2: counters are metadata */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 0;
    padding: 6px 10px;
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: .85em;
    cursor: default;
}
.react-btn:disabled { opacity: .75; }
.react-emoji { font-size: 1em; }
.react-count {
    font-family: var(--font-label); font-size: .85em; color: var(--muted); min-width: 1ch; }

/* ── Custom reaction icons (SVG-based) ─────────────────────────────────── */
/* Shared icon shell — same visual footprint as .react-emoji */
.react-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.react-icon__svg {
    width:  1.1em;
    height: 0.8em;       /* eye is wider than tall */
    color: var(--muted);
    transition: color .15s ease, filter .15s ease;
}

/* Eye / Wgląd ── normal state */
.react-icon--eye .react-icon__svg {
    color: var(--muted);
    filter: none;
}

/* Hover state — icon inherits the button hover via parent selector */
.react-btn:hover .react-icon--eye .react-icon__svg {
    color: var(--text);
}

/* Active / selected state */
.react-btn--active .react-icon--eye .react-icon__svg {
    color: var(--accent);
    /* Mystical glow: soft amber halo matching the accent colour */
    filter: drop-shadow(0 0 4px rgba(209,154,69,.55))
            drop-shadow(0 0 8px rgba(209,154,69,.22));
}

/* Pupil highlight pulses on active */
.react-btn--active .react-icon--eye .react-icon__highlight {
    opacity: 1;
}

/* Comment count bar */
.post-comments-bar {
    margin-top: 10px;
    font-size: .82em;
    color: var(--muted);
}

/* Topbar auth area */
.topbar-auth { display: flex; align-items: center; gap: 12px; font-size: .9em; }
.topbar-user  { color: var(--accent); font-weight: 500; }
.topbar-logout, .topbar-login { color: var(--muted); }
.topbar-logout:hover, .topbar-login:hover { color: var(--accent); }

/* Login page */
.login-wrap {
    max-width: 360px;
    margin: 60px auto;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 40px 36px;
}
.login-title    { font-size: 1.6em; font-weight: 600; color: var(--accent); margin: 0 0 4px; text-align: center; }
.login-subtitle { font-size: .85em; color: var(--muted); margin: 0 0 28px; text-align: center; }
.login-error {
    background: rgba(200,60,40,.15);
    border: 1px solid rgba(200,60,40,.3);
    border-radius: 0;
    color: #e07060;
    font-size: .85em;
    padding: 10px 14px;
    margin-bottom: 20px;
}
.login-label {
    display: block;
    font-size: .78em;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.login-input {
    font-family: var(--font-body);
    display: block;
    width: 100%;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    color: var(--text);
    padding: 10px 14px;
    font-size: 1em;
    margin-bottom: 18px;
    outline: none;
    transition: border-color .2s;
}
.login-input:focus { border-color: var(--accent); }
.login-btn {
    font-family: var(--font-display);
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #120f0b;
    font-weight: 600;
    font-size: .95em;
    border: none;
    border-radius: 0;
    cursor: pointer;
    margin-top: 4px;
    transition: opacity .2s;
}
.login-btn:hover { opacity: .88; }

/* Reaction button interactive states */
.react-btn--active {
    background: rgba(209,154,69,.22);
    border: 1px solid rgba(209,154,69,.45);
    color: var(--accent);
}
.react-btn--active .react-count { color: var(--accent); }
.react-btn--loading { opacity: .5; cursor: wait; }
.react-guest-hint {
    font-size: .75em;
    color: var(--muted);
    align-self: center;
    margin-left: 6px;
    animation: fadeInOut 2.5s ease forwards;
}
@keyframes fadeInOut {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Comment bar (clickable toggle) */
.post-comments-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: .82em;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.post-comments-bar:hover .comments-bar-label { color: var(--accent); }

/* Comment form */
.comment-form-wrap { margin-top: 8px; }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-textarea {
    font-family: var(--font-body);   /* Stage 2: text entry reads as body copy */
    width: 100%;
    min-height: 64px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    color: var(--text);
    padding: 10px 12px;
    font-size: 15px;
    resize: vertical;
    outline: none;
    transition: border-color .2s;
}
.comment-textarea:focus { border-color: var(--accent); }
.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.comment-char-hint {
    font-size: .75em;
    color: var(--muted);
    flex: 1;
}
.comment-char-hint--over { color: #e07060; }
.comment-submit-btn {
    padding: 6px 18px;
    background: var(--accent);
    color: #120f0b;
    font-weight: 600;
    font-size: .85em;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity .2s;
}
.comment-submit-btn:hover   { opacity: .88; }
.comment-submit-btn:disabled { opacity: .5; cursor: wait; }
.comment-form-error {
    font-size: .82em;
    color: #e07060;
    margin: 0;
}

/* Newly submitted comment previews */
.comment-new-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comment-new-item {
    background: rgba(255,255,255,.04);
    border-radius: 0;
    padding: 8px 12px;
}
.comment-new-author {
    font-size: .82em;
    color: var(--accent);
    font-weight: 500;
    margin-right: 6px;
}
.comment-new-time {
    font-size: .75em;
    color: var(--muted);
}
.comment-new-body {
    font-size: .88em;
    color: var(--text);
    margin: 4px 0 0;
    word-break: break-word;
}

/* Post composer — premium ritual card */
.post-composer {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-rune);
    border-radius: 0;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-card-gold);
}

/* Corner rune marks — top-left and top-right */
.post-composer::before,
.post-composer::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--gold-500);
    border-style: solid;
    opacity: 0.45;
    pointer-events: none;
}
.post-composer::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 0;
}
.post-composer::after {
    top: -1px; right: -1px;
    border-width: 2px 2px 0 0;
    border-radius: 0;
}

/* Composer error state — unchanged logic, token colours */
.composer-error {
    background: rgba(194,65,12,0.10);
    border: 1px solid rgba(194,65,12,0.28);
    border-radius: 0;
    color: #e07060;
    font-size: var(--text-sm);
    padding: 10px 14px;
    margin-bottom: var(--space-4);
}

/* Ritual layout — avatar left, form right */
.composer-ritual {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Avatar circle with login initial */
.composer-ritual__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gold-900);
    border: 1px solid var(--border-rune);
    color: var(--gold-300);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    user-select: none;
}

/* Form body — fills remaining width */
.composer-ritual__body { flex: 1; min-width: 0; }

.composer-form { display: flex; flex-direction: column; gap: var(--space-3); }

/* Textarea — atmospheric placeholder via Cormorant italic */
.composer-textarea {
    width: 100%;
    min-height: 88px;
    background: var(--bg-interactive);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    padding: 12px 16px;
    resize: vertical;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.composer-textarea::placeholder {
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
}
.composer-textarea:focus {
    border-color: var(--border-rune);
    box-shadow: 0 0 0 3px var(--gold-glow);
}

.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.composer-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* Submit button — premium gold ritual action */
.composer-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
    color: var(--bg-void);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}
.composer-submit:hover {
    box-shadow: var(--shadow-glow-gold);
    transform: translateY(-1px);
}
.composer-submit:active {
    transform: translateY(0);
    opacity: 0.88;
}
.composer-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Category picker in post composer */
.kat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Hide the actual radio input visually while keeping it accessible */
.kat-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.kat-label {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: var(--muted);
    font-size: .8em;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s, background .15s;
}
.kat-label:hover { border-color: rgba(209,154,69,.4); color: var(--text); }
/* Highlighted state — driven purely by :checked, no JS */
.kat-radio:checked + .kat-label {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(209,154,69,.12);
}
/* Keyboard focus ring on the hidden radio passed through to the label */
.kat-radio:focus-visible + .kat-label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Composer image upload controls */
.composer-attach { display: flex; align-items: center; gap: 8px; }
.composer-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--muted);
    font-size: .82em;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    user-select: none;
}
.composer-img-btn:hover { border-color: var(--accent); color: var(--accent); }
/* The actual file input is visually hidden inside the label */
.composer-file-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Upload status area */
.composer-upload-status { margin-top: 10px; }
.composer-upload-preview-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
    border-radius: 0;
    overflow: hidden;
}
.composer-upload-preview {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: 0;
    object-fit: contain;
}
.composer-upload-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.composer-upload-remove:hover { background: rgba(200,60,40,.8); }
.composer-upload-msg { font-size: .8em; color: var(--muted); margin: 0; }
.composer-upload-msg--error { color: #e07060; }

/* Profile page */
.profile-wrap { display: flex; justify-content: center; padding: 12px 0; }
.profile-card {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 36px 32px 28px;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* Initial-letter avatar */
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(209,154,69,.2);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-size: 2em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

/* Name row */
.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-name { font-size: 1.4em; font-weight: 600; margin: 0; }
.profile-online-badge { color: #4caf82; font-size: .8em; }

/* Rank */
.profile-ranga {
    font-size: .8em;
    color: var(--accent);
    opacity: .8;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Bio */
.profile-bio { font-size: .9em; color: var(--text); line-height: 1.6; max-width: 360px; }
.profile-bio--empty { color: var(--muted); font-style: italic; }

/* Meta */
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.profile-meta-item { font-size: .82em; color: var(--muted); }

/* Stats */
.profile-stats {
    display: flex;
    gap: 28px;
    margin-top: 4px;
}
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profile-stat-val { font-size: 1.2em; font-weight: 600; color: var(--text); }
.profile-stat-lbl { font-size: .74em; color: var(--muted); }

/* Edit placeholder button */
.profile-edit-btn {
    margin-top: 8px;
    padding: 7px 20px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: var(--muted);
    font-size: .82em;
    cursor: not-allowed;
    opacity: .6;
}

/* Profile follow button */
.profile-follow-btn {
    margin-top: 8px;
    padding: 8px 28px;
    border-radius: 0;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    font-size: .9em;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}
.profile-follow-btn:hover { background: var(--accent); color: #120f0b; }
.profile-follow-btn--following {
    border-color: rgba(255,255,255,.2);
    color: var(--muted);
}
.profile-follow-btn--following:hover { border-color: #e07060; color: #e07060; background: transparent; }
.profile-follow-btn:disabled { opacity: .5; cursor: wait; }

/* Feed tab bar — Nasz Przekaz / Odkryj Eter */
/* ── Feed tab bar — Phase 5B ──────────────────────────────────── */
.feed-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;                              /* tabs sit flush, divider via border */
    margin-bottom: 20px;
    background: rgba(10,10,15,0.60);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-rune);
    border-radius: 0;
    padding: 4px;
}
.feed-filter-btn {
    flex: 1;                             /* tabs share equal width */
    padding: 9px 20px;
    border-radius: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, #6B5E4A);
    font-family: var(--font-display);
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition:
        color        0.18s ease,
        background   0.18s ease,
        border-color 0.18s ease;
}
/* Inactive hover */
.feed-filter-btn:not(.feed-filter-btn--active):hover {
    color: var(--text-secondary, #B8A98C);
    background: rgba(212,160,23,0.05);
    border-color: rgba(212,160,23,0.10);
}
/* Active tab */
.feed-filter-btn--active {
    background: linear-gradient(135deg,
        rgba(212,160,23,0.16) 0%,
        rgba(212,160,23,0.08) 100%);
    border-color: rgba(212,160,23,0.30);
    color: var(--gold-300, #E8C547);
    box-shadow:
        0 1px 0 rgba(212,160,23,0.08) inset,
        0 0 12px rgba(212,160,23,0.08);
}
/* Gold underline glow on active tab */
.feed-filter-btn--active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--gold-400, #D4A017) 50%,
        transparent);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(212,160,23,0.55);
}
/* Focus ring */
.feed-filter-btn:focus-visible {
    outline: 2px solid var(--gold-400, #D4A017);
    outline-offset: 2px;
}

/* Feed empty-state messages */
.feed-empty {
    color: var(--muted);
    font-size: .88em;
    text-align: center;
    padding: 32px 0;
}

/* Load More button */
.feed-load-more {
    font-family: var(--font-display);
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 20px auto;
    padding: 11px 24px;
    border-radius: 0;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: .88em;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, opacity .15s;
}
.feed-load-more:hover {
    background: rgba(209,154,69,.1);
    box-shadow: 0 0 0 3px rgba(209,154,69,.18);
}
.feed-load-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.feed-load-more:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}
@media (max-width: 480px) {
    .feed-load-more { max-width: 100%; }
}

/* Echo / repost UI */
.post-echo-banner {
    font-size: .75em;
    color: var(--accent);
    opacity: .7;
    margin-bottom: 10px;
    letter-spacing: .04em;
}
.post-echo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.echo-count {
    font-family: var(--font-label);
    font-size: .82em;
    color: var(--muted);
    min-width: 1ch;
}
.echo-btn {
    padding: 4px 12px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.1);
    background: transparent;
    color: var(--muted);
    font-size: .8em;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s;
}
.echo-btn:hover { border-color: rgba(209,154,69,.4); color: var(--accent); }
.echo-btn:disabled { opacity: .45; cursor: not-allowed; }
.echo-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.echo-label {
    font-size: .8em;
    color: var(--muted);
    opacity: .7;
}

/* Original post preview inside Echo/repost cards */
.original-preview {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: rgba(0,0,0,.2);
}
.original-preview--missing {
    font-size: .8em;
    color: var(--muted);
    font-style: italic;
    opacity: .7;
}
.original-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    margin-bottom: 6px;
}
.original-preview-author {
    font-size: .85em;
    font-weight: 600;
    color: var(--text);
}
.original-preview-time {
    font-size: .75em;
    color: var(--muted);
}
.original-preview-category {
    font-size: .72em;
    color: var(--accent);
    opacity: .8;
}
.original-preview-text {
    font-size: .88em;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 8px;
}
.original-preview-image img {
    max-width: 100%;
    border-radius: 0;
    margin-top: 8px;
    display: block;
}
.original-preview .link-preview {
    margin-top: 8px;
    font-size: .88em;
}

/* Hashtag links in post text */
.hashtag-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.hashtag-link:hover { text-decoration: underline; }
.hashtag-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tag feed page */
.tag-feed-heading {
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   RIGHT PANEL — Phase 5A
   Premium RPG panel: TWÓJ KRĄG / AKTYWNA AURA / ŻYWIOŁY /
                      DRZEWO ŻYCIA / WATAHA ONLINE
   All .rp-* classes are scoped to this panel only.
═══════════════════════════════════════════════════════════════════ */

/* ── Scroll container ─────────────────────────────────────────── */
.rp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* sticky handled by .app-shell layout */
}

/* ── Shared card shell ────────────────────────────────────────── */
.rp-card {
    background:
        linear-gradient(135deg, rgba(26,26,46,0.95) 0%, rgba(15,15,26,0.98) 100%);
    border: 1px solid var(--border-rune);           /* gold rune line */
    border-radius: 0;
    padding: 16px 16px 14px;
    position: relative;
    /* top-left corner gold accent */
    box-shadow:
        inset 0 1px 0 rgba(212,160,23,0.07),
        0 2px 12px rgba(0,0,0,0.45);
}
.rp-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 18px; height: 18px;
    border-top: 2px solid var(--gold-400, #D4A017);
    border-left: 2px solid var(--gold-400, #D4A017);
    border-radius: 0;
    opacity: 0.6;
    pointer-events: none;
}
.rp-card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 18px; height: 18px;
    border-bottom: 2px solid var(--gold-400, #D4A017);
    border-right: 2px solid var(--gold-400, #D4A017);
    border-radius: 0;
    opacity: 0.35;
    pointer-events: none;
}

/* Aura card tint */
.rp-card--aura {
    background:
        linear-gradient(135deg,
            rgba(90,35,10,0.35) 0%,
            rgba(15,15,26,0.98) 60%);
    border-color: rgba(234,88,12,0.28);
}
.rp-card--aura::before { border-color: var(--ember-400, #EA580C); opacity: 0.5; }

/* Tree card tint */
.rp-card--tree {
    background:
        linear-gradient(160deg,
            rgba(15,30,18,0.60) 0%,
            rgba(10,15,26,0.98) 65%);
    border-color: rgba(61,138,82,0.30);
}
.rp-card--tree::before { border-color: var(--el-ziemia, #3D8A52); opacity: 0.55; }

/* Wataha card */
.rp-card--wataha {
    border-color: rgba(107,127,202,0.22);
}

/* ── Section title ────────────────────────────────────────────── */
.rp-section-title {
    font-family: var(--font-display);
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--gold-400, #D4A017);
    opacity: 0.65;
    margin: 0 0 12px;
}

/* ═══════════════════════════════════════════════════════════════
   1. TWÓJ KRĄG
═══════════════════════════════════════════════════════════════ */
.rp-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

/* Avatar circle */
.rp-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
}
.rp-avatar__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%,
            rgba(61,138,82,0.35) 0%,
            rgba(27,58,34,0.55) 60%,
            rgba(10,20,12,0.80) 100%);
    border: 2px solid rgba(61,138,82,0.50);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-300, #E8C547);
    box-shadow:
        0 0 20px rgba(61,138,82,0.22),
        0 0 6px  rgba(61,138,82,0.10),
        inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
/* Dashed rune ring */
.rp-avatar__ring {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    color: rgba(61,138,82,0.28);
    animation: rp-ring-spin 28s linear infinite;
    pointer-events: none;
}
@keyframes rp-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rp-profile__name {
    font-family: var(--font-display);
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-primary, #F0EAD6);
    margin: 0;
}
.rp-profile__rank {
    font-family: var(--font-label);
    font-size: 0.65rem;
    color: var(--text-muted, #6B5E4A);
    letter-spacing: 0.08em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rp-profile__rank-label { color: var(--gold-400, #D4A017); opacity: 0.75; }
.rp-profile__rank-sep   { opacity: 0.35; }
.rp-profile__rank-level { color: var(--text-muted, #6B5E4A); }

.rp-profile__element {
    font-family: var(--font-label);
    font-size: 0.62rem;
    color: var(--text-muted, #6B5E4A);
    margin: 2px 0 0;
    letter-spacing: 0.05em;
}
.rp-element-tag {
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 20px;
}
.rp-element-tag--ziemia {
    background: rgba(61,138,82,0.15);
    border: 1px solid rgba(61,138,82,0.35);
    color: var(--el-ziemia, #3D8A52);
}

/* ═══════════════════════════════════════════════════════════════
   2. AKTYWNA AURA
═══════════════════════════════════════════════════════════════ */
.rp-aura {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.rp-aura__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: rgba(234,88,12,0.15);
    border: 1px solid rgba(234,88,12,0.30);
    color: var(--ember-400, #EA580C);
}
.rp-aura__body { flex: 1; min-width: 0; }
.rp-aura__name {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-primary, #F0EAD6);
    margin: 0 0 3px;
}
.rp-aura__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}
.rp-aura__bonus {
    font-family: var(--font-label);
    font-size: 0.58rem;
    color: var(--gold-300, #E8C547);
    letter-spacing: 0.06em;
}
.rp-aura__timer {
    font-family: var(--font-label);
    font-size: 0.58rem;
    color: var(--text-muted, #6B5E4A);
}

/* ═══════════════════════════════════════════════════════════════
   3. ŻYWIOŁY
═══════════════════════════════════════════════════════════════ */
.rp-elements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rp-el {
    display: grid;
    grid-template-columns: 18px 58px 1fr 22px;
    align-items: center;
    gap: 6px;
}
.rp-el__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-el__icon--ogien     { color: var(--el-ogien,     #EA580C); }
.rp-el__icon--woda      { color: var(--el-woda,      #0891B2); }
.rp-el__icon--ziemia    { color: var(--el-ziemia,    #3D8A52); }
.rp-el__icon--powietrze { color: var(--el-powietrze, #A0B0E8); }
.rp-el__icon--duch      { color: var(--el-duch,      #9B59B6); }

.rp-el__name {
    font-family: var(--font-label);
    font-size: 0.60rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-secondary, #B8A98C);
}
.rp-el__bar-wrap {
    height: 5px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--wdx-r-bar);
    overflow: hidden;
}
.rp-el__bar {
    display: block;
    height: 100%;
    border-radius: var(--wdx-r-bar);
    transition: width 0.6s ease;
}
.rp-el__bar--ogien     { background: linear-gradient(90deg, #c2410c, #EA580C); }
.rp-el__bar--woda      { background: linear-gradient(90deg, #0e7490, #0891B2); }
.rp-el__bar--ziemia    { background: linear-gradient(90deg, #166534, #3D8A52); }
.rp-el__bar--powietrze { background: linear-gradient(90deg, #6b7fca, #A0B0E8); }
.rp-el__bar--duch      { background: linear-gradient(90deg, #7e22ce, #9B59B6); }

.rp-el__val {
    font-family: var(--font-display);
    font-size: 0.58rem;
    color: var(--gold-400, #D4A017);
    text-align: right;
    opacity: 0.80;
}

/* ═══════════════════════════════════════════════════════════════
   4. DRZEWO ŻYCIA
═══════════════════════════════════════════════════════════════ */
.rp-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.rp-tree__svg {
    width: 80px;
    height: 80px;
    color: var(--el-ziemia, #3D8A52);
    opacity: 0.70;
    filter: drop-shadow(0 0 10px rgba(61,138,82,0.30));
}
.rp-tree__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.rp-tree__label {
    font-family: var(--font-label);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-400, #D4A017);
    opacity: 0.65;
}
.rp-tree__value {
    font-family: var(--font-display);
    font-size: 1.50rem;
    font-weight: 700;
    color: var(--el-ziemia, #3D8A52);
    line-height: 1;
    text-shadow: 0 0 16px rgba(61,138,82,0.45);
}

/* ═══════════════════════════════════════════════════════════════
   5. WATAHA ONLINE — placeholder
═══════════════════════════════════════════════════════════════ */
.rp-wataha-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    text-align: center;
}
.rp-wataha-placeholder__icon {
    color: var(--moon-400, #6B7FCA);
    opacity: 0.30;
}
.rp-wataha-placeholder__text {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--text-secondary, #B8A98C);
    margin: 0;
    opacity: 0.60;
}
.rp-wataha-placeholder__sub {
    font-family: var(--font-body);
    font-size: 0.60rem;
    color: var(--text-muted, #6B5E4A);
    margin: 0;
    line-height: 1.5;
}

/* ── Footer ornament ──────────────────────────────────────────── */
.rp-footer-ornament {
    display: flex;
    justify-content: center;
    padding: 2px 0 4px;
}
.rp-footer-ornament__svg {
    width: 100%;
    max-width: 140px;
    height: 20px;
    color: var(--gold-400, #D4A017);
}

/* Responsive: .right-panel hidden at ≤900px via the shared media rule above */

/* ═══════════════════════════════════════════════════════════════════
   POST CARD — Phase 4A visual upgrade
   All .pc-* and .pc__* classes are scoped to feed post cards.
   Legacy classes (.post-comments-bar, .echo-btn, .post-iskra, etc.)
   are kept unchanged so JS continues to work without modification.
═══════════════════════════════════════════════════════════════════ */

/* ── Outer card shell ─────────────────────────────────────────── */
.pc {
    position: relative;
    margin-bottom: 14px;
    border-radius: 0;
    background:
        linear-gradient(135deg,
            rgba(26,26,46,0.96) 0%,
            rgba(12,12,22,0.99) 100%);
    border: 1px solid var(--border-rune);        /* gold rune line */
    box-shadow:
        var(--shadow-card-gold),
        0 8px 32px rgba(0,0,0,0.45);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.pc:hover {
    border-color: var(--border-active);          /* brighter gold on hover */
    box-shadow:
        var(--shadow-glow-gold),
        0 12px 40px rgba(0,0,0,0.55);
}

/* ── Top-left gold corner accent ─────────────────────────────── */
.pc::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 22px; height: 22px;
    border-top:  2px solid var(--gold-400, #D4A017);
    border-left: 2px solid var(--gold-400, #D4A017);
    border-radius: 0;
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}
/* ── Bottom-right gold corner accent ────────────────────────── */
.pc::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 22px; height: 22px;
    border-bottom: 2px solid var(--gold-400, #D4A017);
    border-right:  2px solid var(--gold-400, #D4A017);
    border-radius: 0;
    opacity: 0.28;
    pointer-events: none;
    z-index: 1;
}

/* ── Category colour bar (1px top edge) ──────────────────────── */
.pc-cat-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--border-rune);   /* default gold */
    pointer-events: none;
    z-index: 2;
}
/* Per-category tints */
.pc--cat-duchowosc  .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--el-duch,      #9B59B6) 50%, transparent); }
.pc--cat-natura     .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--el-ziemia,    #3D8A52) 50%, transparent); }
.pc--cat-survival   .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--el-ogien,     #EA580C) 50%, transparent); }
.pc--cat-sztuka     .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--gold-400,     #D4A017) 50%, transparent); }
.pc--cat-horoskop   .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--moon-400,     #6B7FCA) 50%, transparent); }
.pc--cat-codziennosc .pc-cat-bar { background: linear-gradient(90deg, transparent, var(--el-woda,     #0891B2) 50%, transparent); }
.pc--cat-luzne      .pc-cat-bar { background: linear-gradient(90deg, transparent, rgba(212,160,23,0.30) 50%, transparent); }

/* ── Card padding wrapper (applied to inner sections) ────────── */
.pc-echo-banner,
.pc__header,
.pc__body,
.pc__footer,
.pc__iskra,
.post-edit-form,
.comment-form-wrap {
    padding-left: 20px;
    padding-right: 20px;
}

/* ── Echo banner ─────────────────────────────────────────────── */
.pc-echo-banner {
    padding-top: 12px;
    padding-bottom: 4px;
    font-family: var(--font-label);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--gold-400, #D4A017);
    opacity: 0.65;
}

/* ── Header: avatar + meta + owner controls ──────────────────── */
.pc__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 10px;
}

/* Avatar circle */
.pc__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%,
            rgba(61,138,82,0.30) 0%,
            rgba(27,58,34,0.50) 60%,
            rgba(10,20,12,0.75) 100%);
    border: 1.5px solid rgba(61,138,82,0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold-300, #E8C547);
    box-shadow:
        0 0 10px rgba(61,138,82,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Meta column */
.pc__meta      { flex: 1; min-width: 0; }
.pc__meta-top  {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 3px;
}

/* Author link */
.pc__author {
    font-family: var(--font-display);
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--text-primary, #F0EAD6);
    text-decoration: none;
}
.pc__author:hover { color: var(--gold-300, #E8C547); }

/* Repost type label */
.pc__type-label {
    font-family: var(--font-label);
    font-size: 0.58rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--gold-400, #D4A017);
    opacity: 0.55;
    padding: 1px 6px;
    border: 1px solid rgba(212,160,23,0.22);
    border-radius: 0;
}

/* Timestamp */
.pc__time {
    font-family: var(--font-label);   /* Stage 2: timestamps are metadata */
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted, #6B5E4A);
}

/* Category badge pill */
.pc-cat-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-label);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    padding: 2px 8px;
    border-radius: 0;
    background: rgba(212,160,23,0.10);
    border: 1px solid rgba(212,160,23,0.22);
    color: var(--gold-400, #D4A017);
    white-space: nowrap;
}
/* Per-category badge colours */
.pc-cat-badge--duchowosc  { background: rgba(155,89,182,0.12); border-color: rgba(155,89,182,0.30); color: var(--el-duch,      #9B59B6); }
.pc-cat-badge--natura     { background: rgba(61,138,82,0.12);  border-color: rgba(61,138,82,0.28);  color: var(--el-ziemia,    #3D8A52); }
.pc-cat-badge--survival   { background: rgba(234,88,12,0.12);  border-color: rgba(234,88,12,0.28);  color: var(--el-ogien,     #EA580C); }
.pc-cat-badge--sztuka     { background: rgba(212,160,23,0.10); border-color: rgba(212,160,23,0.25); color: var(--gold-400,     #D4A017); }
.pc-cat-badge--horoskop   { background: rgba(107,127,202,0.12);border-color: rgba(107,127,202,0.28);color: var(--moon-400,     #6B7FCA); }
.pc-cat-badge--codziennosc{ background: rgba(8,145,178,0.10);  border-color: rgba(8,145,178,0.25);  color: var(--el-woda,      #0891B2); }

/* Owner control buttons (edit / delete) */
.pc__owner-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.pc__ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: var(--text-muted, #6B5E4A);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pc__ctrl-btn:hover {
    background: rgba(212,160,23,0.10);
    border-color: rgba(212,160,23,0.25);
    color: var(--gold-300, #E8C547);
}
.pc__ctrl-btn--danger:hover {
    background: rgba(200,50,50,0.12);
    border-color: rgba(200,50,50,0.30);
    color: #e07060;
}

/* ── Body: text + image + link preview ───────────────────────── */
.pc__body {
    padding-top: 2px;
    padding-bottom: 12px;
}
.pc__text {
    font-family: var(--font-body);
    /* Stage 2: reference post-body metrics — 15px on a 1.78 leading, set
       in italic. The slant is what makes the feed read as a collection of
       przekazy rather than status updates; it is one declaration to undo
       if it proves too heavy for long posts. */
    font-size: 0.94rem;          /* 15.04px */
    line-height: 1.78;
    font-style: italic;
    color: var(--text-secondary, #B8A98C);
    word-break: break-word;
}
/* Emphasis inverts inside italic body copy — upright and brighter,
   exactly as the reference does with .post-text em. */
.pc__text em,
.pc__text i {
    font-style: normal;
    color: var(--text-primary, #F0EAD6);
}
.pc__img-wrap {
    margin-top: 12px;
}

/* ── Footer: reactions / divider / comments / echo ───────────── */
.pc__footer {
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pc__footer-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(212,160,23,0.12) 50%,
        transparent);
    margin: 6px 0;
}

/* Comments bar — add inline SVG icon support */
.pc__comments-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.comments-bar-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted, #6B5E4A);
}

/* Echo bar */
.pc__echo-bar {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Iskra section ───────────────────────────────────────────── */
.pc__iskra {
    padding-top: 8px;
    padding-bottom: 14px;
}

/* ── Edit form spacing ───────────────────────────────────────── */
.post-edit-form { padding-top: 8px; padding-bottom: 8px; }
.comment-form-wrap { padding-top: 4px; padding-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR — Phase 3B rebuild
   All .sb-* classes are scoped to the left navigation panel.
   The legacy .sidebar class is kept on <aside> for layout grid.
   .sidebar.sb resets all visual properties so .sb-* styles win.
═══════════════════════════════════════════════════════════════════ */

/* ── Outer container ──────────────────────────────────────────── */
.sb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* sticky top is handled by .app-shell / topbar height in layout */
    padding-top: 8px;
    color: var(--gold-400, #D4A017);   /* SVG rune dividers inherit this */
}

/* ── Section block ────────────────────────────────────────────── */
.sb-section {
    margin-bottom: 2px;
}

/* Section title */
.sb-section__title {
    font-family: var(--font-display);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-400, #D4A017);
    opacity: 0.50;
    padding: 6px 10px 4px;
    margin: 0;
}

/* ── Nav list ─────────────────────────────────────────────────── */
.sb-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── Nav link — shared base (applies to both <a> and <span>) ─── */
.sb-nav__link {
    font-family: var(--font-display);   /* Stage 2: navigation is display type */
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary, #B8A98C);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    border: 1px solid transparent;
}

/* Hover state — clickable links only */
a.sb-nav__link:hover {
    background: rgba(212,160,23,0.08);
    color: var(--text-primary, #F0EAD6);
    border-color: rgba(212,160,23,0.12);
}

/* ── Active state ─────────────────────────────────────────────── */
.sb-nav__link--active {
    background: linear-gradient(90deg,
        rgba(212,160,23,0.14) 0%,
        rgba(212,160,23,0.06) 100%);
    color: var(--gold-300, #E8C547);
    border-color: rgba(212,160,23,0.25);
    font-weight: 500;
}
.sb-nav__link--active .sb-nav__icon {
    color: var(--gold-300, #E8C547);
}
/* Bright left edge bar on active item */
.sb-nav__link--active::before {
    content: '';
    position: absolute;
    left: -1px; top: 20%; bottom: 20%;
    width: 2px;
    background: var(--gold-400, #D4A017);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(212,160,23,0.55);
}

/* Active pip (small right-side dot, rendered from PHP) */
.sb-nav__active-pip {
    margin-left: auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold-400, #D4A017);
    box-shadow: 0 0 6px rgba(212,160,23,0.60);
    flex-shrink: 0;
}

/* ── Locked / future items ────────────────────────────────────── */
.sb-nav__link--locked {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

/* Lock icon */
.sb-nav__lock {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--text-muted, #6B5E4A);
    flex-shrink: 0;
}

/* ── Icon ─────────────────────────────────────────────────────── */
.sb-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    color: var(--text-muted, #6B5E4A);
    transition: color 0.15s;
}
a.sb-nav__link:hover .sb-nav__icon {
    color: var(--gold-400, #D4A017);
}

/* ── Rune divider ─────────────────────────────────────────────── */
.sb-rune-divider {
    padding: 4px 6px;
}
.sb-rune-divider__svg {
    display: block;
    width: 100%;
    height: 12px;
    /* inherits color: var(--gold-400) from .sb */
}

/* ── Footer ornament ──────────────────────────────────────────── */
.sb-footer-ornament {
    margin-top: auto;
    padding: 12px 6px 6px;
    display: flex;
    justify-content: center;
}
.sb-footer-ornament__svg {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 20px;
}

/* ── Responsive: sidebar hidden ≤900px (shared rule at line ~419) */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION — .mbn
   Visible only at ≤ 900px. Hidden on desktop via display:none default.
   Safe-area inset: env(safe-area-inset-bottom) for iOS notch devices.
═══════════════════════════════════════════════════════════════════ */

/* Hidden on desktop — shown only inside the mobile media query */
.mbn { display: none; }

@media (max-width: 900px) {

    /* Push page content up so it is not obscured by the nav bar */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    .mbn {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        align-items: stretch;

        /* Dark glass shell */
        background: rgba(8,8,14,0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border-rune);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.55);

        z-index: calc(var(--z-sticky, 100) + 10);
    }

    /* ── Each nav item ─────────────────────────────────────────── */
    .mbn__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* Minimum 44 × 44 px touch target */
        min-height: 44px;
        padding: 6px 4px 0;

        text-decoration: none;
        color: var(--text-muted, #6B5E4A);
        font-family: var(--font-label);
        /* Stage 2: raised from 0.58rem (9.3px). This is primary navigation,
           not a decorative micro-label — the reference's 7-9px scale is for
           ornament only and must not apply to how people move around. */
        font-size: 0.6875rem;   /* 11px */
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;

        border-top: 2px solid transparent;
        transition:
            color        0.15s ease,
            border-color 0.15s ease;

        /* Prevent tap highlight flash on iOS */
        -webkit-tap-highlight-color: transparent;
    }

    .mbn__item:hover {
        color: var(--text-secondary, #B8A98C);
    }

    /* ── Active item ───────────────────────────────────────────── */
    .mbn__item--active {
        color: var(--gold-300, #E8C547);
        border-top-color: var(--gold-400, #D4A017);
    }
    /* Gold glow on top edge of active item */
    .mbn__item--active .mbn__icon {
        filter: drop-shadow(0 0 6px rgba(212,160,23,0.50));
    }
    .mbn__item--active .mbn__label {
        color: var(--gold-300, #E8C547);
    }

    /* ── Icon wrapper ──────────────────────────────────────────── */
    .mbn__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        transition: filter 0.15s ease;
    }

    /* ── Label ─────────────────────────────────────────────────── */
    .mbn__label {
        line-height: 1;
        transition: color 0.15s ease;
    }

} /* end @media (max-width: 900px) */

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 4A — REFERENCE CHROME: SIDEBAR · TOPBAR · COMPOSER
   ═══════════════════════════════════════════════════════════════════════════
   Every value below is transcribed from REFERENCE_WANDALIX_V1 (the <style>
   block in index.php), and the reference selector is named beside each rule
   so the mapping stays checkable.

   Placed at the end of the file so it wins on source order without unpicking
   the earlier Phase 3B/3C/4C rules, which stay as the fallback layer. Nothing
   here touches layout structure: the Stage 3 grid, the panel-hiding rules and
   the mobile breakpoints are left alone.

   One deliberate deviation from the reference, applied consistently:
   interactive text (nav items, tabs, buttons) is set at 10px rather than the
   prototype's 8.5-9px, per decision O14 — micro type is for ornament, not for
   how people move around. Purely decorative labels keep the reference size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   SIDEBAR  (reference .sidebar)
   ─────────────────────────────────────────────────────────────────────────── */
.app-shell > .sidebar.sb {
    background: var(--wdx-bg1);
    box-shadow: inset -1px 0 0 var(--wdx-border), 1px 0 20px rgba(0, 0, 0, .4);
    padding-top: 0;
    gap: 0;
    scrollbar-width: none;
}
.app-shell > .sidebar.sb::-webkit-scrollbar { display: none; }

/* ── Logo block (reference .s-logo) ──────────────────────────────────────── */
.sb-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 18px 18px;
    border-bottom: 1px solid var(--wdx-border);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
/* A single gold sweep across the block on first paint, then it rests. */
.sb-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(201, 168, 76, .06) 50%, transparent 60%);
    background-size: 200% auto;
    animation: wdx-goldShimmer 3s ease-in-out 1s 1 both;
    pointer-events: none;
    z-index: 0;
}
.sb-logo > * { position: relative; z-index: 1; }

.sb-logo__img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    opacity: .95;
    filter:
        brightness(1.25)
        contrast(1.15)
        drop-shadow(0 0 8px rgba(201, 168, 76, .55))
        drop-shadow(0 0 20px rgba(201, 168, 76, .22));
}
.sb-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
/* Gold gradient clipped to the letterforms, drifting slowly. */
.sb-logo__name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    background: linear-gradient(90deg, var(--wdx-gold-lo), var(--wdx-gold-hi), var(--wdx-gold-lo));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wdx-goldShimmer 4s ease-in-out 1.5s infinite;
}
.sb-logo__dot {
    font-family: var(--font-label);
    font-size: 7.5px;
    letter-spacing: .22em;
    color: var(--wdx-t3);
    margin-top: 4px;
}

/* ── Section headings (reference .s-group-label) ─────────────────────────── */
.sb-section { margin: 0; }
.sb-section__title {
    font-family: var(--font-label);
    font-size: 7px;
    font-weight: 400;
    letter-spacing: .4em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    padding: 14px 20px 5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sb-section__title::before {
    content: '';
    display: block;
    width: 12px;
    height: 1px;
    background: var(--wdx-border);
    flex-shrink: 0;
}

/* ── Nav items (reference .s-item) ───────────────────────────────────────── */
.sb-nav { margin: 0; padding: 0; gap: 0; }

.sb-nav__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 20px;
    border: none;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 10px;              /* reference 9px — raised per O14 */
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wdx-t2);
    background: none;
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition:
        color          var(--wdx-t-base) var(--wdx-ease-out),
        letter-spacing var(--wdx-t-slow) var(--wdx-ease-out);
}

/* Gold bar on the leading edge, wiping open from the centre. */
.sb-nav__link::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--wdx-gold), transparent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--wdx-t-base) var(--wdx-ease-out);
    border-radius: 0;
}
/* Warm wash bleeding in from the same edge. */
.sb-nav__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(201, 168, 76, .08) 0%, transparent 80%);
    opacity: 0;
    transition: opacity var(--wdx-t-base) var(--wdx-ease-out);
}

a.sb-nav__link:hover,
.sb-nav__link--active {
    color: var(--wdx-gold);
    letter-spacing: .28em;
    background: none;
}
a.sb-nav__link:hover::before,
.sb-nav__link--active::before { transform: scaleY(1); }
a.sb-nav__link:hover::after,
.sb-nav__link--active::after  { opacity: 1; }

a.sb-nav__link:focus-visible {
    outline: 1px solid var(--wdx-border-h);
    outline-offset: -1px;
}

/* ── Typographic glyph icons (reference .s-icon) ─────────────────────────── */
.sb-nav__icon {
    font-family: var(--font-label);
    font-size: 13px;
    line-height: 1;
    width: 17px;
    text-align: center;
    flex-shrink: 0;
    opacity: .7;
    transition:
        opacity   var(--wdx-t-base),
        transform var(--wdx-t-base) var(--wdx-ease-out);
}
a.sb-nav__link:hover .sb-nav__icon,
.sb-nav__link--active .sb-nav__icon { opacity: 1; transform: scale(1.15); }

/* Locked items stay legible but clearly inert. */
.sb-nav__link--locked { color: var(--wdx-t4); cursor: default; }
.sb-nav__link--locked .sb-nav__icon { opacity: .4; }
.sb-nav__lock { margin-left: auto; opacity: .35; flex-shrink: 0; display: flex; }

/* Active pip on the trailing edge. */
.sb-nav__active-pip {
    margin-left: auto;
    width: 4px; height: 4px;
    background: var(--wdx-gold);
    box-shadow: 0 0 6px var(--wdx-gold-dim);
    flex-shrink: 0;
}

/* ── Section separators (reference hairline language) ────────────────────── */
.sb-rune-divider { color: var(--wdx-gold-dim); opacity: .5; padding: 8px 20px 0; }

/* ── Footer rune (reference .s-rune) ─────────────────────────────────────── */
.sb-footer-ornament {
    margin-top: auto;
    padding: 14px 16px 18px;
    border-top: 1px solid var(--wdx-border);
    display: flex;
    justify-content: center;
}
.sb-rune {
    display: block;
    width: 44px;
    height: 44px;
    color: var(--wdx-gold);
    opacity: .1;
    animation: wdx-ringRot 60s linear infinite;
    transition: opacity var(--wdx-t-slow);
}
.sb-footer-ornament:hover .sb-rune { opacity: .2; }

/* ───────────────────────────────────────────────────────────────────────────
   TOPBAR  (reference .topbar)
   ─────────────────────────────────────────────────────────────────────────── */
.app-shell > .topbar {
    display: flex;
    align-items: center;
    background: var(--wdx-topbar-bg);
    border-bottom: 1px solid var(--wdx-border);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: var(--wdx-shadow-sm);
    padding: 0 26px;
    gap: 14px;
}

.app-shell > .topbar > .topbar-search  { flex: 1 1 auto; min-width: 0; }
.app-shell > .topbar > .topbar-actions { margin-left: auto; }

/* The sidebar carries the brand above 900px, so the topbar's own brand block
   stands down there and returns below it, where no sidebar is rendered. */
.topbar-brand { display: none; }

/* Nav links adopt the sidebar's item language (reference .s-item). */
.topbar-nav__link {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wdx-t2);
    padding: 8px 12px;
    border-radius: 0;
    transition:
        color          var(--wdx-t-base) var(--wdx-ease-out),
        letter-spacing var(--wdx-t-slow) var(--wdx-ease-out);
}
.topbar-nav__link:hover {
    color: var(--wdx-gold);
    background: none;
    letter-spacing: .28em;
}
.topbar-nav__link svg { display: none; }   /* reference nav is text only */

/* ── Search (reference .search) ──────────────────────────────────────────── */
/* The pre-4A search was built as a relative box with an absolutely positioned
   icon and kbd hint, and an input carrying its own 34px height and inset
   padding to clear them. The reference builds it as a plain flex row, so those
   three overrides put the parts back in normal flow — otherwise the wrapper
   padding stacked on top of the input height and the field grew to 54px. */
.topbar-search__icon { position: static; left: auto; }
.topbar-search__kbd  { position: static; right: auto; flex-shrink: 0; }
.topbar-search__input { height: auto; padding: 0; opacity: 1; cursor: default; }

.topbar-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    padding: 9px 16px;
    max-width: 360px;
    position: relative;
    overflow: visible;
    transition:
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        background   var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow   var(--wdx-t-base) var(--wdx-ease-out);
}
/* Gold underline drawing itself across the field on focus. */
.topbar-search::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 1px; width: 0;
    background: linear-gradient(90deg, transparent, var(--wdx-gold-dim), transparent);
    transition: width var(--wdx-t-slow) var(--wdx-ease-out);
}
.topbar-search:focus-within {
    border-color: var(--wdx-gold-dim);
    background: rgba(201, 168, 76, .04);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, .06);
}
.topbar-search:focus-within::after { width: 100%; }

.topbar-search__icon { color: var(--wdx-t3); flex-shrink: 0; transition: color var(--wdx-t-base); }
.topbar-search:focus-within .topbar-search__icon { color: var(--wdx-gold-dim); }

.topbar-search__input {
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
    color: var(--wdx-t1);
    font-family: var(--font-body);
    font-size: 14px;
    width: 100%;
}
.topbar-search__input::placeholder { color: var(--wdx-t3); font-style: italic; }

.topbar-search__kbd {
    font-family: var(--font-label);
    font-size: 9px;
    color: var(--wdx-t3);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: none;
    padding: 2px 6px;
}

/* ── Action icons (reference .tb-ico) ────────────────────────────────────── */
.topbar-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 0;
    border: 1px solid transparent;
    color: var(--wdx-t2);
    opacity: .75;
    transition:
        color        var(--wdx-t-base) var(--wdx-ease-out),
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        background   var(--wdx-t-base) var(--wdx-ease-out),
        transform    var(--wdx-t-fast) var(--wdx-ease-out);
}
.topbar-action-btn:hover {
    color: var(--wdx-gold);
    border-color: rgba(201, 168, 76, .22);
    background: rgba(201, 168, 76, .07);
    transform: translateY(-1px);
    opacity: 1;
}

/* ── User chip (reference .tb-ico-profile + .btn-logout) ─────────────────── */
.topbar-user-chip {
    border-radius: 0;
    background: none;
    border: 1px solid var(--wdx-border);
    padding: 4px 10px 4px 4px;
    gap: 8px;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base);
}
.topbar-user-chip:hover {
    border-color: var(--wdx-border-h);
    background: rgba(201, 168, 76, .05);
}
.topbar-user-chip__avatar {
    background: rgba(201, 168, 76, .12);
    border: 1px solid rgba(201, 168, 76, .28);
    color: var(--wdx-gold);
    font-family: var(--font-display);
}
.topbar-user-chip__name {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--wdx-t2);
    text-transform: uppercase;
}
.topbar-user-chip__logout {
    border-radius: 0;
    border: 1px solid rgba(180, 50, 50, .35);
    background: rgba(180, 50, 50, .12);
    color: #E06666;
    padding: 4px 6px;
    transition: background var(--wdx-t-base), border-color var(--wdx-t-base), color var(--wdx-t-base);
}
.topbar-user-chip__logout:hover {
    background: rgba(180, 50, 50, .22);
    border-color: rgba(200, 60, 60, .55);
    color: #F08080;
}

/* ── Guest login button (reference .btn-add) ─────────────────────────────── */
.topbar-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border: 1px solid var(--wdx-gold-dim);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(201, 168, 76, .10) 0%, rgba(201, 168, 76, .05) 100%);
    color: var(--wdx-gold);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition:
        background   var(--wdx-t-base) var(--wdx-ease-out),
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow   var(--wdx-t-base) var(--wdx-ease-out),
        transform    var(--wdx-t-fast) var(--wdx-ease-out);
}
.topbar-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(201, 168, 76, .18) 50%, transparent 70%);
    background-size: 200% auto;
    opacity: 0;
    transition: opacity var(--wdx-t-fast);
}
.topbar-login:hover {
    background: rgba(201, 168, 76, .18);
    border-color: var(--wdx-gold);
    box-shadow: 0 0 24px rgba(201, 168, 76, .18);
    transform: translateY(-1px);
}
.topbar-login:hover::before { opacity: 1; animation: wdx-goldShimmer .8s ease-out; }

/* ───────────────────────────────────────────────────────────────────────────
   COMPOSER  (reference .post-form)
   ─────────────────────────────────────────────────────────────────────────── */
.post-composer {
    background: var(--wdx-bg1);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition:
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow   var(--wdx-t-base) var(--wdx-ease-out);
}
/* Gold hairline inset from both ends along the top edge. */
.post-composer::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wdx-gold-dim), transparent);
    border: none;
    width: auto;
    opacity: 1;
    border-radius: 0;
}
.post-composer::after { content: none; }
.post-composer:focus-within {
    border-color: var(--wdx-border-h);
    box-shadow: 0 0 24px rgba(201, 168, 76, .06);
}

/* ── Head row: avatar + label (reference .post-form-head) ────────────────── */
.composer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}
.composer-ritual__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(201, 168, 76, .14);
    border: 1px solid rgba(201, 168, 76, .3);
    color: var(--wdx-gold);
    font-family: var(--font-display);
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.composer-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: .28em;
    color: var(--wdx-t2);
    text-transform: uppercase;
    margin: 0;
}

/* ── Textarea (reference .post-textarea) ─────────────────────────────────── */
.composer-textarea {
    width: 100%;
    min-height: 88px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    color: var(--wdx-t1);
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    resize: vertical;
    outline: none;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base), box-shadow var(--wdx-t-base);
}
.composer-textarea::placeholder { color: var(--wdx-t3); font-style: italic; }
.composer-textarea:focus {
    border-color: var(--wdx-gold-dim);
    background: rgba(201, 168, 76, .03);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, .06);
}

/* ── Category picker (reference .kat-btn) ────────────────────────────────── */
.kat-picker { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.kat-label {
    padding: 5px 11px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .16em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .18s, color .18s, background .18s;
}
.kat-label:hover { border-color: var(--wdx-border-h); color: var(--wdx-t2); }
.kat-radio:checked + .kat-label {
    border-color: var(--wdx-gold-dim);
    background: rgba(201, 168, 76, .09);
    color: var(--wdx-gold);
}

/* ── Footer: attach + publish (reference .post-form-footer) ──────────────── */
.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    gap: 12px;
}
.composer-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: none;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .18em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--wdx-t-base), color var(--wdx-t-base), background var(--wdx-t-base);
}
.composer-img-btn:hover {
    border-color: var(--wdx-border-h);
    color: var(--wdx-gold-dim);
    background: var(--wdx-gold-glow);
}

/* Publish button — the reference's one loud control (.btn-publish). */
.composer-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border: 1px solid var(--wdx-gold-dim);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(201, 168, 76, .14) 0%, rgba(201, 168, 76, .07) 100%);
    color: var(--wdx-gold);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        background     var(--wdx-t-base) var(--wdx-ease-out),
        border-color   var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow     var(--wdx-t-base) var(--wdx-ease-out),
        letter-spacing var(--wdx-t-slow) var(--wdx-ease-out),
        transform      var(--wdx-t-fast) var(--wdx-ease-out);
}
.composer-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(201, 168, 76, .2) 50%, transparent 70%);
    background-size: 200% auto;
    opacity: 0;
    transition: opacity var(--wdx-t-fast);
}
.composer-submit:hover {
    background: rgba(201, 168, 76, .22);
    border-color: var(--wdx-gold);
    box-shadow: 0 0 22px rgba(201, 168, 76, .2);
    letter-spacing: .36em;
    transform: translateY(-1px);
}
.composer-submit:hover::before { opacity: 1; animation: wdx-goldShimmer .8s ease-out; }
.composer-submit:active { transform: translateY(0); }
.composer-submit svg { opacity: .8; }

/* ── Upload preview (reference #upload-preview) ──────────────────────────── */
.composer-upload-preview-wrap { border-radius: 0; margin: 8px 0 4px; }
.composer-upload-preview {
    border: 1px solid var(--wdx-border-h);
    border-radius: 0;
    max-height: 180px;
    object-fit: cover;
    width: 100%;
    display: block;
}
.composer-upload-remove {
    background: rgba(0, 0, 0, .7);
    border: 1px solid var(--wdx-border-h);
    color: var(--wdx-t2);
    transition: background .15s, color .15s;
}
.composer-upload-remove:hover { background: #C0392B; color: #fff; }
.composer-upload-msg {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--wdx-t3);
}
.composer-error {
    border-radius: 0;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
}

/* ───────────────────────────────────────────────────────────────────────────
   FEED HEAD  (reference .feed-filter-bar)
   ─────────────────────────────────────────────────────────────────────────── */
.feed-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 4px;
    background: none;
    border: none;
    border-radius: 0;
    margin: 16px 0 0;
}
.feed-filter-btn {
    font-family: var(--font-display);
    font-size: 10px;              /* reference 8.5px — raised per O14 */
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--wdx-t3);
    padding: 7px 18px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: transparent;
    transition: color var(--wdx-t-base), border-color var(--wdx-t-base), background var(--wdx-t-base);
}
.feed-filter-btn:hover:not(.feed-filter-btn--active) {
    color: var(--wdx-t2);
    border-color: var(--wdx-border-h);
}
.feed-filter-btn--active {
    color: var(--wdx-gold);
    border-color: var(--wdx-gold-dim);
    background: rgba(201, 168, 76, .08);
}
.feed-filter-btn--active::after { content: none; }   /* reference marks state with the border */

.feed-empty {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--wdx-t3);
}

/* ───────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Stage 3 behaviour preserved, brand handed back to the topbar
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* No sidebar below this width, so the topbar carries the brand again. */
    .topbar-brand { display: flex; }
    .topbar-brand__name {
        font-family: var(--font-display);
        letter-spacing: .18em;
        color: var(--wdx-gold);
    }
    .topbar-brand__sub {
        font-family: var(--font-label);
        letter-spacing: .22em;
        color: var(--wdx-t3);
    }
    .app-shell > .topbar { padding: 0 14px; }
    .post-composer { padding: 12px 14px; }
    .composer-footer { flex-wrap: wrap; }
    .composer-submit { width: 100%; justify-content: center; }
    .feed-filter-btn { flex: 1; justify-content: center; padding: 9px 14px; min-height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE 4B1 — REFERENCE FEED CARDS AND INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════
   Transcribed from REFERENCE_WANDALIX_V1 (index.php <style>). The reference
   selector is named beside each block.

   Appended last so it wins on source order over the Phase 4A card rules,
   which stay in place as the fallback layer. Presentation only: no JS hook,
   no data attribute and no PHP condition is touched anywhere in this block.

   Interactive text stays at 10px rather than the prototype's 8.5-9px, per
   decision O14; decorative badges keep the reference size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   CARD SHELL  (reference .post)
   ─────────────────────────────────────────────────────────────────────────── */
.post-card.pc {
    background: var(--wdx-bg1);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    margin-bottom: 18px;
    transition:
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow   var(--wdx-t-base) var(--wdx-ease-out),
        transform    var(--wdx-t-base) var(--wdx-ease-out);
    animation: wdx-fadeUp var(--wdx-t-slow) var(--wdx-ease-out) both;
}
.post-card.pc:hover {
    border-color: var(--wdx-border-h);
    box-shadow: 0 6px 28px rgba(0, 0, 0, .35), 0 0 0 1px rgba(201, 168, 76, .05);
    transform: translateY(-1px);
}

/* The Phase 4A corner brackets give way to the reference's single gold bar
   running down the leading edge, which fades in on hover. */
.post-card.pc::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, var(--wdx-gold-dim), transparent);
    border: none;
    border-radius: 0;
    opacity: 0;
    transition: opacity var(--wdx-t-base);
    z-index: 1;
}
.post-card.pc:hover::before { opacity: 1; }
.post-card.pc::after { content: none; }

/* Entrance stagger — reference .post:nth-child(1..4) */
.post-card.pc:nth-child(1) { animation-delay: .05s; }
.post-card.pc:nth-child(2) { animation-delay: .12s; }
.post-card.pc:nth-child(3) { animation-delay: .19s; }
.post-card.pc:nth-child(4) { animation-delay: .26s; }

/* Category accent kept from CURRENT_APP — the prototype has no equivalent, so
   it is dialled down to a hairline rather than removed. */
.pc-cat-bar { height: 1px; opacity: .5; }

/* ── Post aura levels 1-5 (reference .post.aura-N) ───────────────────────────
   Driven by posty.aura_level. Levels 4 and 5 breathe; 1-3 only tint the frame.
   The reference also shows an "✨ Przebudzony / ✦ Legenda" badge, but that is
   gated on posty.czy_przebudzony, which PostRepository does not select — the
   badge is therefore not implemented here. See the Stage 4B1 report. */
.post-card.pc.aura-1 { border-color: var(--wdx-aura-1-border); }
.post-card.pc.aura-2 { border-color: var(--wdx-aura-2-border); }
.post-card.pc.aura-3 { border-color: var(--wdx-aura-3-border); }
.post-card.pc.aura-1::before { opacity: .8; background: linear-gradient(180deg, transparent, var(--wdx-aura-1-glow), transparent); }
.post-card.pc.aura-2::before { opacity: .8; background: linear-gradient(180deg, transparent, var(--wdx-aura-2-glow), transparent); }
.post-card.pc.aura-3::before { opacity: .8; background: linear-gradient(180deg, transparent, var(--wdx-aura-3-glow), transparent); }

.post-card.pc.aura-4 {
    border-color: var(--wdx-aura-4-border);
    animation: wdx-fadeUp var(--wdx-t-slow) var(--wdx-ease-out) both,
               wdx-auraPulse4 2.8s ease-in-out infinite;
}
.post-card.pc.aura-4::before { opacity: 1; background: linear-gradient(180deg, transparent, var(--wdx-aura-4-glow), transparent); }
.post-card.pc.aura-4 .pc__avatar { border-color: var(--wdx-aura-4-border); box-shadow: 0 0 12px var(--wdx-aura-4-glow); }

.post-card.pc.aura-5 {
    border-color: var(--wdx-aura-5-border);
    animation: wdx-fadeUp var(--wdx-t-slow) var(--wdx-ease-out) both,
               wdx-auraPulse5 2.4s ease-in-out infinite;
}
.post-card.pc.aura-5::before { opacity: 1; background: linear-gradient(180deg, transparent, var(--wdx-aura-5-glow), transparent); }
.post-card.pc.aura-5 .pc__avatar { border-color: var(--wdx-aura-5-border); box-shadow: 0 0 16px var(--wdx-aura-5-glow); }

/* ───────────────────────────────────────────────────────────────────────────
   HEADER  (reference .post-head)
   ─────────────────────────────────────────────────────────────────────────── */
.pc__header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 20px 0;
    margin-bottom: 13px;
    background: none;
    border: none;
}

.pc__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(201, 168, 76, .12);
    border: 1px solid rgba(201, 168, 76, .28);
    color: var(--wdx-gold);
    font-family: var(--font-display);
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--wdx-t-base), border-color var(--wdx-t-base), box-shadow var(--wdx-t-base);
}
.post-card.pc:hover .pc__avatar {
    background: rgba(201, 168, 76, .2);
    border-color: rgba(201, 168, 76, .5);
    box-shadow: 0 0 14px rgba(201, 168, 76, .16);
}

.pc__meta { flex: 1; min-width: 0; }
.pc__meta-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }

.pc__author {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--wdx-t1);
    text-decoration: none;
    transition: color var(--wdx-t-base);
}
.pc__author:hover { color: var(--wdx-gold); }

.pc__time {
    font-family: var(--font-label);
    font-size: 8.5px;
    letter-spacing: .04em;
    color: var(--wdx-t3);
    display: block;
    margin-top: 2px;
}

/* Category badge — reference .post-kat-badge */
.pc-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: rgba(201, 168, 76, .04);
    font-family: var(--font-label);
    font-size: 7.5px;
    letter-spacing: .18em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    vertical-align: middle;
}

/* Repost marker — reference .post-rank sits in the same slot */
.pc__type-label {
    font-family: var(--font-label);
    font-size: 7.5px;
    letter-spacing: .22em;
    color: var(--wdx-gold-dim);
    text-transform: uppercase;
    border-radius: 0;
    background: none;
    padding: 0;
}

/* Owner controls — reference .post-more */
.pc__owner-controls { display: flex; gap: 4px; flex-shrink: 0; }
.pc__ctrl-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--wdx-t3);
    cursor: pointer;
    transition: color var(--wdx-t-base), border-color var(--wdx-t-base), background var(--wdx-t-base);
}
.pc__ctrl-btn:hover {
    color: var(--wdx-gold-dim);
    border-color: var(--wdx-border);
    background: var(--wdx-gold-glow);
}
.pc__ctrl-btn--danger:hover { color: #E06666; border-color: rgba(180, 50, 50, .35); background: rgba(180, 50, 50, .10); }

/* Echo banner — reference has no repost, so it borrows the micro-label voice */
.pc-echo-banner {
    font-family: var(--font-label);
    font-size: 8px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--wdx-t3);
    background: rgba(255, 255, 255, .015);
    border-bottom: 1px solid var(--wdx-border);
    border-radius: 0;
    padding: 7px 20px;
}

/* ───────────────────────────────────────────────────────────────────────────
   BODY  (reference .post-body / .post-text / .post-img / .link-preview)
   ─────────────────────────────────────────────────────────────────────────── */
.pc__body { padding: 0 20px; }

.pc__text {
    margin-bottom: 14px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Hashtags — CURRENT_APP only; kept, dressed in the reference's gold accent. */
.hashtag-link {
    color: var(--wdx-gold-dim);
    font-style: normal;
    text-decoration: none;
    transition: color var(--wdx-t-base);
    overflow-wrap: anywhere;
}
.hashtag-link:hover { color: var(--wdx-gold); }

/* Image — reference .post-img-wrap / .post-img.
   The prototype insets the image inside the body padding and frames it on all
   four sides; it does not bleed to the card edge. */
.post-img-wrap.pc__img-wrap { padding: 0 0 14px; margin: 0; }
.post-img-wrap.pc__img-wrap .post-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    display: block;
    transition: opacity .2s;
}
.post-img-wrap.pc__img-wrap .post-img:hover { opacity: .92; }

/* Link preview — reference .link-preview */
.link-preview {
    display: flex;
    margin: 0 0 14px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: var(--wdx-bg2);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .22s, background .22s;
}
.link-preview:hover { border-color: var(--wdx-border-h); background: var(--wdx-bg3); }
.lp-img-wrap { width: 120px; flex-shrink: 0; }
.lp-img { width: 120px; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.lp-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.lp-title {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--wdx-t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--wdx-t2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.5;
}
.lp-domain {
    font-family: var(--font-label);
    font-size: 8.5px;
    color: var(--wdx-t3);
    letter-spacing: .12em;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ───────────────────────────────────────────────────────────────────────────
   REACTIONS  (reference .post-reactions / .react-btn / .react-sep)
   ─────────────────────────────────────────────────────────────────────────── */
.pc__footer { display: block; padding: 0; background: none; border: none; }
.pc__footer-divider { display: none; }   /* the reference separates with border-top instead */

.reactions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--wdx-border);
    flex-wrap: wrap;
}

.reactions .react-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--wdx-t3);
    cursor: pointer;
    position: relative;
    transition:
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        background   var(--wdx-t-base) var(--wdx-ease-out),
        color        var(--wdx-t-base) var(--wdx-ease-out),
        box-shadow   var(--wdx-t-base) var(--wdx-ease-out),
        transform    var(--wdx-t-fast) var(--wdx-ease-out);
}
.reactions .react-btn .react-emoji,
.reactions .react-btn .react-icon { font-size: 13px; line-height: 1; transition: transform var(--wdx-t-base) var(--wdx-ease-out); }
.reactions .react-btn .react-count { font-family: var(--font-label); font-size: 10px; color: var(--wdx-t3); transition: color var(--wdx-t-base); }

.reactions .react-btn:hover {
    border-color: var(--wdx-border-h);
    background: var(--wdx-gold-glow);
    color: var(--wdx-gold-dim);
    box-shadow: 0 0 10px rgba(201, 168, 76, .08);
}
.reactions .react-btn:hover .react-emoji,
.reactions .react-btn:hover .react-icon { transform: scale(1.2) translateY(-1px); }
.reactions .react-btn:hover .react-count { color: var(--wdx-gold-dim); }
.reactions .react-btn:active { transform: scale(.96); }

.reactions .react-btn--active {
    border: 1px solid rgba(201, 168, 76, .35);
    background: rgba(201, 168, 76, .1);
    color: var(--wdx-gold);
    animation: wdx-reactPop .4s var(--wdx-ease-out);
}
.reactions .react-btn--active .react-count { color: var(--wdx-gold); }

.react-sep {
    width: 1px;
    height: 18px;
    background: var(--wdx-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Tooltip — reference .reaction-tooltip */
.reaction-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 90px;
    max-width: 180px;
    background: var(--wdx-bg4);
    border: 1px solid var(--wdx-border-h);
    padding: 6px 10px;
    pointer-events: none;
    z-index: var(--z-tooltip, 300);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55), 0 0 12px rgba(201, 168, 76, .08);
    text-align: center;
}
.reaction-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--wdx-border-h);
}
.reaction-tooltip-title {
    display: block;
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: .16em;
    color: var(--wdx-gold);
    white-space: nowrap;
}
.has-reaction-tooltip:hover .reaction-tooltip,
.has-reaction-tooltip:focus-visible .reaction-tooltip { display: block; }

/* ───────────────────────────────────────────────────────────────────────────
   POWER ROW: REZONANS · WZMOCNIENIA · ISKRA
   (reference .post-power-row / .post-power-badge / .boost-btn / .post-flame-badge)
   ─────────────────────────────────────────────────────────────────────────── */
.post-iskra.pc__iskra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px 7px;
    border-top: 1px solid var(--wdx-border);
    font-family: var(--font-label);
    font-size: 8px;
    letter-spacing: .1em;
    flex-wrap: wrap;
    background: none;
}

.post-power-badge,
.iskra-moc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-label);
    font-size: 8px;
    letter-spacing: .1em;
    color: var(--wdx-t3);
}
.post-power-badge strong {
    font-family: var(--font-display);
    font-size: 9px;
    color: var(--wdx-gold);
    font-weight: 400;
}

/* Iskra — reference .boost-btn, in the prototype's boost violet */
.iskra-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid rgba(192, 139, 255, .22);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .08em;
    color: rgba(192, 139, 255, .55);
    cursor: pointer;
    margin-left: auto;
    transition:
        border-color var(--wdx-t-base) var(--wdx-ease-out),
        background   var(--wdx-t-base) var(--wdx-ease-out),
        color        var(--wdx-t-base) var(--wdx-ease-out),
        transform    var(--wdx-t-fast) var(--wdx-ease-out);
}
.iskra-btn:hover {
    border-color: rgba(192, 139, 255, .55);
    background: rgba(192, 139, 255, .08);
    color: var(--wdx-boost);
    transform: translateY(-1px);
}
.iskra-btn:active { transform: scale(.95); }
.iskra-btn:disabled { opacity: .4; cursor: default; transform: none; }

/* Active boost countdown — reference .post-flame-badge.post-flame-active */
.iskra-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-label);
    font-size: 7.5px;
    letter-spacing: .08em;
    color: var(--wdx-flame);
    animation: wdx-flamePulse 2.4s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────────────────────
   COMMENTS BAR AND ECHO  (reference .post-comments-bar / .btn-comments-toggle)
   ─────────────────────────────────────────────────────────────────────────── */
.post-comments-bar.pc__comments-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-top: 1px solid var(--wdx-border);
    border-radius: 0;
    background: none;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s;
}
.post-comments-bar.pc__comments-bar:hover { color: var(--wdx-gold-dim); background: none; }
.post-comments-bar.pc__comments-bar:focus-visible { outline: 1px solid var(--wdx-border-h); outline-offset: -1px; }
.comments-bar-icon { display: inline-flex; opacity: .8; }
.comments-bar-label { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; }

/* Echo — no counterpart in the prototype, so it takes the comment bar's voice
   with the boost violet reserved for the active state. */
.post-echo-bar.pc__echo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-top: 1px solid var(--wdx-border);
    background: none;
    border-radius: 0;
}
.echo-count {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: .12em;
    color: var(--wdx-t3);
    min-width: 18px;
}
.echo-btn,
.echo-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--wdx-t3);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base), color var(--wdx-t-base), transform var(--wdx-t-fast);
}
.echo-btn:hover {
    border-color: var(--wdx-border-h);
    background: var(--wdx-gold-glow);
    color: var(--wdx-gold-dim);
    transform: translateY(-1px);
}
.echo-btn:active { transform: scale(.96); }
.echo-btn[data-echoed="1"] {
    border-color: rgba(192, 139, 255, .45);
    background: rgba(192, 139, 255, .1);
    color: var(--wdx-boost);
}
.echo-label { cursor: default; opacity: .6; }

/* ── Comment form (reference .cmt-form / .cmt-input / .cmt-send) ─────────── */
.comment-form-wrap {
    border-top: 1px solid var(--wdx-border);
    background: rgba(0, 0, 0, .18);
    padding: 14px 20px 10px;
    border-radius: 0;
}
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-textarea {
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    color: var(--wdx-t1);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    outline: none;
    resize: none;
    transition: border-color .2s, box-shadow .2s;
}
.comment-textarea::placeholder { color: var(--wdx-t3); font-style: italic; }
.comment-textarea:focus { border-color: var(--wdx-gold-dim); box-shadow: 0 0 0 2px rgba(201, 168, 76, .06); }

.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-char-hint { font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; color: var(--wdx-t3); }
.comment-submit-btn {
    padding: 8px 18px;
    background: rgba(201, 168, 76, .12);
    border: 1px solid rgba(201, 168, 76, .35);
    border-radius: 0;
    color: var(--wdx-gold);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .16s, box-shadow .16s, transform .1s;
}
.comment-submit-btn:hover { background: rgba(201, 168, 76, .24); box-shadow: 0 0 12px rgba(201, 168, 76, .2); }
.comment-submit-btn:active { transform: scale(.97); }

/* Freshly posted comments — reference .cmt-item */
.comment-new-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comment-new-item {
    border-radius: 0;
    border: none;
    border-left: 2px solid var(--wdx-border);
    background: none;
    padding: 2px 0 2px 10px;
    animation: wdx-fadeUp .2s var(--wdx-ease-out) both;
}
.comment-new-author { font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; color: var(--wdx-t1); }
.comment-new-time   { font-family: var(--font-label); font-size: 7.5px; color: var(--wdx-t3); }
.comment-new-body   { font-family: var(--font-body); font-size: 13.5px; color: var(--wdx-t2); line-height: 1.6; word-break: break-word; }

/* ── Original-post preview inside an Echo card ───────────────────────────── */
.original-preview {
    border: 1px solid var(--wdx-border);
    border-radius: 0;
    background: var(--wdx-bg2);
    margin: 0 20px 14px;
}
.original-preview-author { font-family: var(--font-display); font-size: 10px; letter-spacing: .1em; color: var(--wdx-t1); }
.original-preview-time   { font-family: var(--font-label); font-size: 7.5px; color: var(--wdx-t3); }
.original-preview-text   { font-family: var(--font-body); font-size: 13.5px; color: var(--wdx-t2); font-style: italic; }

/* ───────────────────────────────────────────────────────────────────────────
   MOBILE  (reference @640px block)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pc__header  { padding: 12px 14px 0; gap: 9px; margin-bottom: 10px; }
    .pc__body    { padding: 0 14px; }
    .pc__avatar  { width: 36px; height: 36px; font-size: 13px; }

    .post-img-wrap.pc__img-wrap .post-img { max-height: 260px; }

    /* Reactions wrap instead of pushing the document sideways, and every
       target clears the 40px the reference sets for touch. */
    .reactions   { padding: 8px 14px; gap: 4px; }
    .reactions .react-btn { padding: 7px 8px; min-height: 40px; font-size: 9px; flex-shrink: 0; }
    .react-sep   { display: none; }
    .reaction-tooltip { display: none !important; }   /* no hover on touch */

    .post-iskra.pc__iskra { padding: 4px 14px 6px; gap: 6px; }
    .iskra-btn   { padding: 7px 10px; min-height: 40px; margin-left: 0; }

    .post-comments-bar.pc__comments-bar { padding: 8px 14px; min-height: 40px; }
    .post-echo-bar.pc__echo-bar { padding: 8px 14px; flex-wrap: wrap; }
    .echo-btn, .echo-label { min-height: 40px; }

    .comment-form-wrap { padding: 12px 14px 10px; }

    .link-preview { flex-direction: column; min-width: 0; }
    .lp-img-wrap  { width: 100%; height: 120px; }
    .lp-img       { width: 100%; height: 120px; object-fit: cover; }

    .original-preview { margin: 0 14px 12px; }
}

@media (max-width: 420px) {
    .pc__header  { padding: 10px 12px 0; }
    .pc__body    { padding: 0 12px; }
    .pc__avatar  { width: 32px; height: 32px; font-size: 12px; }
    .pc__author  { font-size: 10px; }
    .pc__time    { font-size: 8px; }
    .reactions .react-btn { padding: 6px 7px; font-size: 8.5px; min-height: 38px; }
    .post-img-wrap.pc__img-wrap .post-img { max-height: 200px; }
    .lp-img-wrap { display: none; }
}