/* ============================================================
   american_garments.css — FlockOS Design System
   Full theme engine + component styles + FlockChat styles.
   Source of truth for all FlockOS and FlockChat styling.
   ============================================================ */

/* ─── STUDIO FONTS — loaded on demand via Adornment.loadStudioFonts() ────── */
/* Core fonts (Noto Sans, Noto Sans Hebrew, Noto Serif) are loaded via <link>
   in the HTML head. Studio/theme fonts below are injected only when needed. */

/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  transition: background 0.35s ease, color 0.25s ease;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }

/* ── Global scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*                            { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ── Keyboard focus ring ──────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
a:hover { color: var(--link-hover); }

/* Prevent iOS auto-zoom on form focus (requires >= 16px);
   max() lets inputs scale up with the font-scale slider while keeping
   the 16px floor iOS needs to prevent auto-zoom.
   The !important on mobile overrides inline font-size styles that would
   otherwise drop below 16px and trigger the iOS zoom. */
input, select, textarea { font-size: max(1rem, 16px); }
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   THEME TOKENS
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Dayspring ─── Warm ivory, soft sky, golden hour ─────────────────────
   The default. Clean, warm, uplifting.                                        */

[data-theme="dayspring"],
:root {
  --bg:            #faf9f6;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f0eeea;
  --bg-hover:      #f5f3ef;

  --ink:           #2c2c2c;
  --ink-muted:     #6b6b6b;
  --ink-faint:     #a0a0a0;
  --ink-inverse:   #faf9f6;

  --accent:        #7eaacc;
  --accent-hover:  #6394ba;
  --accent-soft:   rgba(126,170,204,0.12);

  --mint:          #8cc5a2;
  --mint-soft:     rgba(140,197,162,0.12);

  --peach:         #f0a889;
  --peach-soft:    rgba(240,168,137,0.12);

  --lilac:         #b49bdb;
  --lilac-soft:    rgba(180,155,219,0.12);

  --rose:          #e69aba;
  --rose-soft:     rgba(230,154,186,0.12);

  --gold:          #8B7028;
  --gold-soft:     rgba(139,112,40,0.15);

  --sky:           #8abde0;
  --sky-soft:      rgba(138,189,224,0.12);

  --danger:        #c0392b;
  --danger-soft:   rgba(192,57,43,0.10);
  --success:       #3d8b4f;
  --success-soft:  rgba(61,139,79,0.10);
  --warning:       #946B1C;
  --warning-soft:  rgba(148,107,28,0.12);

  --link:          #5a8fb5;
  --link-hover:    #3d7199;

  --line:          #e4e1dc;
  --line-strong:   #d0ccc5;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.08);

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

  --paper:         #fffef8;
  --paper-line:    #d4c5a9;
  --paper-margin:  #e8a0a0;

  color-scheme: light;
}


/* ── 2. Meadow ─── Sage green, cream, botanical ────────────────────────────
   Inspired by tbc_care.html — earthy, gentle, grounded.                      */

[data-theme="meadow"] {
  --bg:            #f6f7f4;
  --bg-raised:     #ffffff;
  --bg-sunken:     #eef0ea;
  --bg-hover:      #f2f3ef;

  --ink:           #1f2923;
  --ink-muted:     #5b6a60;
  --ink-faint:     #8a9a8e;
  --ink-inverse:   #f6f7f4;

  --accent:        #6ba88a;
  --accent-hover:  #53926f;
  --accent-soft:   rgba(107,168,138,0.12);

  --mint:          #7cc49a;
  --mint-soft:     rgba(124,196,154,0.12);

  --peach:         #d4a07a;
  --peach-soft:    rgba(212,160,122,0.12);

  --lilac:         #9c8dbb;
  --lilac-soft:    rgba(156,141,187,0.12);

  --rose:          #c98aa0;
  --rose-soft:     rgba(201,138,160,0.12);

  --gold:          #836A1E;
  --gold-soft:     rgba(131,106,30,0.15);

  --sky:           #7fb3c4;
  --sky-soft:      rgba(127,179,196,0.12);

  --danger:        #a8321e;
  --danger-soft:   rgba(168,50,30,0.10);
  --success:       #357a4c;
  --success-soft:  rgba(53,122,76,0.10);
  --warning:       #8A6418;
  --warning-soft:  rgba(138,100,24,0.12);

  --link:          #3d8c6a;
  --link-hover:    #2a6e52;

  --line:          #dbe6d6;
  --line-strong:   #c5d1c7;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.07);

  --paper:         #f6faf4;
  --paper-line:    #b8d4b0;
  --paper-margin:  #d4a0a0;

  color-scheme: light;
}


/* ── 3. Lavender ─── Soft violet, dove grey, quiet elegance ─────────────── */

[data-theme="lavender"] {
  --bg:            #f8f6fb;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f0ecf5;
  --bg-hover:      #f4f1f8;

  --ink:           #2e2836;
  --ink-muted:     #6d6378;
  --ink-faint:     #9c92a8;
  --ink-inverse:   #f8f6fb;

  --accent:        #9b7ec8;
  --accent-hover:  #8463b5;
  --accent-soft:   rgba(155,126,200,0.12);

  --mint:          #78b89c;
  --mint-soft:     rgba(120,184,156,0.12);

  --peach:         #d4a088;
  --peach-soft:    rgba(212,160,136,0.12);

  --lilac:         #a88ec8;
  --lilac-soft:    rgba(168,142,200,0.14);

  --rose:          #cf8faa;
  --rose-soft:     rgba(207,143,170,0.12);

  --gold:          #887024;
  --gold-soft:     rgba(136,112,36,0.15);

  --sky:           #82aed0;
  --sky-soft:      rgba(130,174,208,0.12);

  --danger:        #b03636;
  --danger-soft:   rgba(176,54,54,0.10);
  --success:       #3f8858;
  --success-soft:  rgba(63,136,88,0.10);
  --warning:       #906A1E;
  --warning-soft:  rgba(144,106,30,0.12);

  --link:          #7e5eb0;
  --link-hover:    #633d98;

  --line:          #e4dded;
  --line-strong:   #d2c8df;

  --shadow-sm:     0 1px 3px rgba(50,20,80,0.06);
  --shadow-md:     0 4px 12px rgba(50,20,80,0.06);
  --shadow-lg:     0 8px 24px rgba(50,20,80,0.08);

  --paper:         #faf8fc;
  --paper-line:    #d0c0e0;
  --paper-margin:  #d4a0b8;

  color-scheme: light;
}


/* ── 4. Rosewood ─── Blush pink, warm, nurturing ───────────────────────── */

[data-theme="rosewood"] {
  --bg:            #fbf6f7;
  --bg-raised:     #ffffff;
  --bg-sunken:     #f4ecee;
  --bg-hover:      #f8f1f3;

  --ink:           #36292c;
  --ink-muted:     #7a6268;
  --ink-faint:     #a89096;
  --ink-inverse:   #fbf6f7;

  --accent:        #c27d8f;
  --accent-hover:  #ad6578;
  --accent-soft:   rgba(194,125,143,0.12);

  --mint:          #7dba9a;
  --mint-soft:     rgba(125,186,154,0.12);

  --peach:         #e0a88c;
  --peach-soft:    rgba(224,168,140,0.12);

  --lilac:         #a68cc0;
  --lilac-soft:    rgba(166,140,192,0.12);

  --rose:          #d48ea8;
  --rose-soft:     rgba(212,142,168,0.14);

  --gold:          #8A7226;
  --gold-soft:     rgba(138,114,38,0.15);

  --sky:           #82b0cc;
  --sky-soft:      rgba(130,176,204,0.12);

  --danger:        #b23838;
  --danger-soft:   rgba(178,56,56,0.10);
  --success:       #3f8c56;
  --success-soft:  rgba(63,140,86,0.10);
  --warning:       #926C1E;
  --warning-soft:  rgba(146,108,30,0.12);

  --link:          #a8607a;
  --link-hover:    #8e4862;

  --line:          #eddfe2;
  --line-strong:   #ddd0d5;

  --shadow-sm:     0 1px 3px rgba(60,20,30,0.06);
  --shadow-md:     0 4px 12px rgba(60,20,30,0.06);
  --shadow-lg:     0 8px 24px rgba(60,20,30,0.08);

  --paper:         #fdf8f6;
  --paper-line:    #e0c8c0;
  --paper-margin:  #d4a0a0;

  color-scheme: light;
}


/* ── 5. Vesper ─── Deep navy, soft pastels on dark — the dark default ──── */

[data-theme="vesper"] {
  --bg:            #0f1118;
  --bg-raised:     #181b24;
  --bg-sunken:     #0a0c12;
  --bg-hover:      #1e2130;

  --ink:           #e8e6f0;
  --ink-muted:     #9a98ab;
  --ink-faint:     #5e5c6e;
  --ink-inverse:   #0f1118;

  --accent:        #8ab4d6;
  --accent-hover:  #a0c6e4;
  --accent-soft:   rgba(138,180,214,0.14);

  --mint:          #7cc4a0;
  --mint-soft:     rgba(124,196,160,0.12);

  --peach:         #e8a888;
  --peach-soft:    rgba(232,168,136,0.12);

  --lilac:         #b8a0d8;
  --lilac-soft:    rgba(184,160,216,0.12);

  --rose:          #e09ab8;
  --rose-soft:     rgba(224,154,184,0.12);

  --gold:          #d4b870;
  --gold-soft:     rgba(212,184,112,0.12);

  --sky:           #7ec0e0;
  --sky-soft:      rgba(126,192,224,0.12);

  --danger:        #f07070;
  --danger-soft:   rgba(240,112,112,0.12);
  --success:       #60c48a;
  --success-soft:  rgba(96,196,138,0.12);
  --warning:       #e0b048;
  --warning-soft:  rgba(224,176,72,0.12);

  --link:          #8ab4d6;
  --link-hover:    #a8cce8;

  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.14);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.40);

  --paper:         #181b24;
  --paper-line:    rgba(255,255,255,0.06);
  --paper-margin:  rgba(180,80,80,0.30);

  color-scheme: dark;
}


/* ── 6. Evergreen ─── Forest dark, sage pastels ─────────────────────────── */

[data-theme="evergreen"] {
  --bg:            #0e1510;
  --bg-raised:     #151e18;
  --bg-sunken:     #0a0f0b;
  --bg-hover:      #1a261e;

  --ink:           #e0eae2;
  --ink-muted:     #8ea898;
  --ink-faint:     #586e60;
  --ink-inverse:   #0e1510;

  --accent:        #6ec496;
  --accent-hover:  #88d4ac;
  --accent-soft:   rgba(110,196,150,0.14);

  --mint:          #7ad0a4;
  --mint-soft:     rgba(122,208,164,0.12);

  --peach:         #d4a880;
  --peach-soft:    rgba(212,168,128,0.12);

  --lilac:         #a898c4;
  --lilac-soft:    rgba(168,152,196,0.12);

  --rose:          #c88ea0;
  --rose-soft:     rgba(200,142,160,0.12);

  --gold:          #c8b060;
  --gold-soft:     rgba(200,176,96,0.12);

  --sky:           #78b8d0;
  --sky-soft:      rgba(120,184,208,0.12);

  --danger:        #e06856;
  --danger-soft:   rgba(224,104,86,0.12);
  --success:       #58c080;
  --success-soft:  rgba(88,192,128,0.12);
  --warning:       #d0a840;
  --warning-soft:  rgba(208,168,64,0.12);

  --link:          #6ec496;
  --link-hover:    #90d8b0;

  --line:          rgba(255,255,255,0.07);
  --line-strong:   rgba(255,255,255,0.13);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.40);

  --paper:         #141a18;
  --paper-line:    rgba(255,255,255,0.06);
  --paper-margin:  rgba(160,90,80,0.30);

  color-scheme: dark;
}


/* ── 7. Twilight ─── Deep purple, violet pastels ────────────────────────── */

[data-theme="twilight"] {
  --bg:            #12101a;
  --bg-raised:     #1c1828;
  --bg-sunken:     #0c0a14;
  --bg-hover:      #241e34;

  --ink:           #e6e0f0;
  --ink-muted:     #9c94b0;
  --ink-faint:     #605878;
  --ink-inverse:   #12101a;

  --accent:        #a088d0;
  --accent-hover:  #b8a0e4;
  --accent-soft:   rgba(160,136,208,0.14);

  --mint:          #72c4a0;
  --mint-soft:     rgba(114,196,160,0.12);

  --peach:         #e0a490;
  --peach-soft:    rgba(224,164,144,0.12);

  --lilac:         #b898e0;
  --lilac-soft:    rgba(184,152,224,0.14);

  --rose:          #d88eac;
  --rose-soft:     rgba(216,142,172,0.12);

  --gold:          #d0b460;
  --gold-soft:     rgba(208,180,96,0.12);

  --sky:           #80b8d8;
  --sky-soft:      rgba(128,184,216,0.12);

  --danger:        #e86868;
  --danger-soft:   rgba(232,104,104,0.12);
  --success:       #58c488;
  --success-soft:  rgba(88,196,136,0.12);
  --warning:       #d8b040;
  --warning-soft:  rgba(216,176,64,0.12);

  --link:          #a088d0;
  --link-hover:    #bca0e8;

  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.14);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.40);

  --paper:         #18141e;
  --paper-line:    rgba(255,255,255,0.06);
  --paper-margin:  rgba(180,80,120,0.30);

  color-scheme: dark;
}


/* ── 8. Obsidian ─── True black, high-contrast pastels — OLED saver ─────  */

[data-theme="obsidian"] {
  --bg:            #000000;
  --bg-raised:     #111111;
  --bg-sunken:     #000000;
  --bg-hover:      #1a1a1a;

  --ink:           #f0f0f0;
  --ink-muted:     #a0a0a0;
  --ink-faint:     #606060;
  --ink-inverse:   #000000;

  --accent:        #88b8e0;
  --accent-hover:  #a0cce8;
  --accent-soft:   rgba(136,184,224,0.14);

  --mint:          #70c89c;
  --mint-soft:     rgba(112,200,156,0.12);

  --peach:         #f0a888;
  --peach-soft:    rgba(240,168,136,0.12);

  --lilac:         #b8a0e0;
  --lilac-soft:    rgba(184,160,224,0.12);

  --rose:          #e090b0;
  --rose-soft:     rgba(224,144,176,0.12);

  --gold:          #d8bc68;
  --gold-soft:     rgba(216,188,104,0.12);

  --sky:           #80c0e0;
  --sky-soft:      rgba(128,192,224,0.12);

  --danger:        #f07070;
  --danger-soft:   rgba(240,112,112,0.12);
  --success:       #60cc8c;
  --success-soft:  rgba(96,204,140,0.12);
  --warning:       #e0b848;
  --warning-soft:  rgba(224,184,72,0.12);

  --link:          #88b8e0;
  --link-hover:    #a8d0f0;

  --line:          rgba(255,255,255,0.10);
  --line-strong:   rgba(255,255,255,0.16);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.50);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.60);

  --paper:         #0e0e0e;
  --paper-line:    rgba(255,255,255,0.05);
  --paper-margin:  rgba(180,70,70,0.28);

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COUNTRY FLAG THEMES — Patriotic palettes drawn from national colors
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9. America ─── Old Glory Red, White & Blue ─────────────────────────── */

[data-theme="america"] {
  --bg:            #f7f8fb;
  --bg-raised:     #ffffff;
  --bg-sunken:     #edf0f6;
  --bg-hover:      #f0f3f9;

  --ink:           #1b264f;
  --ink-muted:     #4a5578;
  --ink-faint:     #8890a5;
  --ink-inverse:   #f7f8fb;

  --accent:        #3c3b6e;
  --accent-hover:  #2d2c55;
  --accent-soft:   rgba(60,59,110,0.12);

  --mint:          #6ea9d7;
  --mint-soft:     rgba(110,169,215,0.12);

  --peach:         #b22234;
  --peach-soft:    rgba(178,34,52,0.10);

  --lilac:         #8b9cc7;
  --lilac-soft:    rgba(139,156,199,0.12);

  --rose:          #c94254;
  --rose-soft:     rgba(201,66,84,0.10);

  --gold:          #c5a44e;
  --gold-soft:     rgba(197,164,78,0.12);

  --sky:           #5b8fbf;
  --sky-soft:      rgba(91,143,191,0.12);

  --danger:        #b22234;
  --danger-soft:   rgba(178,34,52,0.10);
  --success:       #3d7a4f;
  --success-soft:  rgba(61,122,79,0.10);
  --warning:       #b58d2a;
  --warning-soft:  rgba(181,141,42,0.12);

  --link:          #3c3b6e;
  --link-hover:    #2d2c55;

  --line:          #d4d9e6;
  --line-strong:   #bec5d6;

  --shadow-sm:     0 1px 3px rgba(27,38,79,0.06);
  --shadow-md:     0 4px 12px rgba(27,38,79,0.06);
  --shadow-lg:     0 8px 24px rgba(27,38,79,0.08);

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

  --paper:         #fdfeff;
  --paper-line:    #c8d0e0;
  --paper-margin:  #d8a0a0;

  color-scheme: light;
}


/* ── 10. Guatemala ─── Maya Blue & White — cielo y paz ──────────────────── */

[data-theme="guatemala"] {
  --bg:            #f4f9fc;
  --bg-raised:     #ffffff;
  --bg-sunken:     #e9f2f8;
  --bg-hover:      #eef5fa;

  --ink:           #173048;
  --ink-muted:     #3f5e78;
  --ink-faint:     #7f9aaf;
  --ink-inverse:   #f4f9fc;

  --accent:        #4997d0;
  --accent-hover:  #3580b8;
  --accent-soft:   rgba(73,151,208,0.12);

  --mint:          #65b89a;
  --mint-soft:     rgba(101,184,154,0.12);

  --peach:         #e0946a;
  --peach-soft:    rgba(224,148,106,0.12);

  --lilac:         #8daed0;
  --lilac-soft:    rgba(141,174,208,0.12);

  --rose:          #c78ea0;
  --rose-soft:     rgba(199,142,160,0.12);

  --gold:          #c4a94e;
  --gold-soft:     rgba(196,169,78,0.12);

  --sky:           #4997d0;
  --sky-soft:      rgba(73,151,208,0.12);

  --danger:        #c0392b;
  --danger-soft:   rgba(192,57,43,0.10);
  --success:       #3d8b5f;
  --success-soft:  rgba(61,139,95,0.10);
  --warning:       #a08830;
  --warning-soft:  rgba(160,136,48,0.12);

  --link:          #3580b8;
  --link-hover:    #266a98;

  --line:          #d0dfe8;
  --line-strong:   #b8ccda;

  --shadow-sm:     0 1px 3px rgba(23,48,72,0.06);
  --shadow-md:     0 4px 12px rgba(23,48,72,0.06);
  --shadow-lg:     0 8px 24px rgba(23,48,72,0.08);

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

  --paper:         #fbfdff;
  --paper-line:    #b0c8d8;
  --paper-margin:  #7dbce0;

  color-scheme: light;
}


/* ── 11. Mexico ─── Verde, Blanco y Rojo — eagle & serpent ──────────────── */

[data-theme="mexico"] {
  --bg:            #f5f8f4;
  --bg-raised:     #ffffff;
  --bg-sunken:     #ebf0e8;
  --bg-hover:      #f0f4ee;

  --ink:           #1e2d1a;
  --ink-muted:     #4a5e42;
  --ink-faint:     #88997f;
  --ink-inverse:   #f5f8f4;

  --accent:        #006847;
  --accent-hover:  #005238;
  --accent-soft:   rgba(0,104,71,0.12);

  --mint:          #3a9a6f;
  --mint-soft:     rgba(58,154,111,0.12);

  --peach:         #ce1126;
  --peach-soft:    rgba(206,17,38,0.10);

  --lilac:         #8aab98;
  --lilac-soft:    rgba(138,171,152,0.12);

  --rose:          #d44a5a;
  --rose-soft:     rgba(212,74,90,0.10);

  --gold:          #c8a84e;
  --gold-soft:     rgba(200,168,78,0.12);

  --sky:           #68a8b8;
  --sky-soft:      rgba(104,168,184,0.12);

  --danger:        #ce1126;
  --danger-soft:   rgba(206,17,38,0.10);
  --success:       #006847;
  --success-soft:  rgba(0,104,71,0.10);
  --warning:       #b89030;
  --warning-soft:  rgba(184,144,48,0.12);

  --link:          #006847;
  --link-hover:    #005238;

  --line:          #d0dbc8;
  --line-strong:   #b8c8ae;

  --shadow-sm:     0 1px 3px rgba(30,45,26,0.06);
  --shadow-md:     0 4px 12px rgba(30,45,26,0.06);
  --shadow-lg:     0 8px 24px rgba(30,45,26,0.08);

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

  --paper:         #fcfdf8;
  --paper-line:    #b8c8a8;
  --paper-margin:  #d8a0a0;

  color-scheme: light;
}


/* ── 12. Germany ─── Schwarz, Rot, Gold — Bundesfarben ──────────────────── */

[data-theme="germany"] {
  --bg:            #14120e;
  --bg-raised:     #1e1b16;
  --bg-sunken:     #0c0a08;
  --bg-hover:      #252118;

  --ink:           #f0e8d8;
  --ink-muted:     #b0a890;
  --ink-faint:     #706858;
  --ink-inverse:   #14120e;

  --accent:        #dd0000;
  --accent-hover:  #ff2222;
  --accent-soft:   rgba(221,0,0,0.16);

  --mint:          #80b090;
  --mint-soft:     rgba(128,176,144,0.12);

  --peach:         #e08040;
  --peach-soft:    rgba(224,128,64,0.12);

  --lilac:         #b090b8;
  --lilac-soft:    rgba(176,144,184,0.12);

  --rose:          #e06070;
  --rose-soft:     rgba(224,96,112,0.12);

  --gold:          #ffcc00;
  --gold-soft:     rgba(255,204,0,0.16);

  --sky:           #80b0d0;
  --sky-soft:      rgba(128,176,208,0.12);

  --danger:        #ff4040;
  --danger-soft:   rgba(255,64,64,0.14);
  --success:       #60c080;
  --success-soft:  rgba(96,192,128,0.12);
  --warning:       #ffcc00;
  --warning-soft:  rgba(255,204,0,0.14);

  --link:          #ffcc00;
  --link-hover:    #ffe060;

  --line:          rgba(255,204,0,0.14);
  --line-strong:   rgba(255,204,0,0.22);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.50);

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

  --paper:         #1a1710;
  --paper-line:    rgba(255,204,0,0.08);
  --paper-margin:  rgba(221,0,0,0.22);

  color-scheme: dark;
}


/* ── 13. Afghanistan ─── سه رنگ — Black, Red & Green ────────────────────── */

[data-theme="afghanistan"] {
  --bg:            #0e100c;
  --bg-raised:     #181a14;
  --bg-sunken:     #080a06;
  --bg-hover:      #20231a;

  --ink:           #e4e8dc;
  --ink-muted:     #a0a890;
  --ink-faint:     #606850;
  --ink-inverse:   #0e100c;

  --accent:        #007a3d;
  --accent-hover:  #009a50;
  --accent-soft:   rgba(0,122,61,0.18);

  --mint:          #4db87a;
  --mint-soft:     rgba(77,184,122,0.14);

  --peach:         #d32011;
  --peach-soft:    rgba(211,32,17,0.14);

  --lilac:         #90a8a0;
  --lilac-soft:    rgba(144,168,160,0.12);

  --rose:          #e05050;
  --rose-soft:     rgba(224,80,80,0.14);

  --gold:          #c8b068;
  --gold-soft:     rgba(200,176,104,0.14);

  --sky:           #70a8c0;
  --sky-soft:      rgba(112,168,192,0.12);

  --danger:        #d32011;
  --danger-soft:   rgba(211,32,17,0.14);
  --success:       #007a3d;
  --success-soft:  rgba(0,122,61,0.14);
  --warning:       #d0a830;
  --warning-soft:  rgba(208,168,48,0.14);

  --link:          #4db87a;
  --link-hover:    #6ad09a;

  --line:          rgba(0,122,61,0.16);
  --line-strong:   rgba(0,122,61,0.25);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.44);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.44);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.54);

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

  --paper:         #12140e;
  --paper-line:    rgba(0,122,61,0.10);
  --paper-margin:  rgba(211,32,17,0.22);

  color-scheme: dark;
}


/* ── AUTO THEME ── follows device prefers-color-scheme ──────────────────── */

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:            #faf9f6;
    --bg-raised:     #ffffff;
    --bg-sunken:     #f0eeea;
    --bg-hover:      #f5f3ef;
    --ink:           #2c2c2c;
    --ink-muted:     #6b6b6b;
    --ink-faint:     #a0a0a0;
    --ink-inverse:   #faf9f6;
    --accent:        #7eaacc;
    --accent-hover:  #6394ba;
    --accent-soft:   rgba(126,170,204,0.12);
    --mint:          #8cc5a2;
    --mint-soft:     rgba(140,197,162,0.12);
    --peach:         #f0a889;
    --peach-soft:    rgba(240,168,137,0.12);
    --lilac:         #b49bdb;
    --lilac-soft:    rgba(180,155,219,0.12);
    --rose:          #e69aba;
    --rose-soft:     rgba(230,154,186,0.12);
    --gold:          #8B7028;
    --gold-soft:     rgba(139,112,40,0.15);
    --sky:           #8abde0;
    --sky-soft:      rgba(138,189,224,0.12);
    --danger:        #d4574e;
    --danger-soft:   rgba(212,87,78,0.10);
    --success:       #4a9e6e;
    --success-soft:  rgba(74,158,110,0.10);
    --warning:       #c98b2e;
    --warning-soft:  rgba(201,139,46,0.10);
    --link:          #5a8fb5;
    --link-hover:    #3d7199;
    --line:          #e4e1dc;
    --line-strong:   #d0ccc5;
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:     0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg:     0 8px 24px rgba(0,0,0,0.08);
    --paper:         #fffef8;
    --paper-line:    #d4c5a9;
    --paper-margin:  #e8a0a0;
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:            #0f1118;
    --bg-raised:     #181b24;
    --bg-sunken:     #0a0c12;
    --bg-hover:      #1e2130;
    --ink:           #e8e6f0;
    --ink-muted:     #9a98ab;
    --ink-faint:     #5e5c6e;
    --ink-inverse:   #0f1118;
    --accent:        #8ab4d6;
    --accent-hover:  #a0c6e4;
    --accent-soft:   rgba(138,180,214,0.14);
    --mint:          #7cc4a0;
    --mint-soft:     rgba(124,196,160,0.12);
    --peach:         #e8a888;
    --peach-soft:    rgba(232,168,136,0.12);
    --lilac:         #b8a0d8;
    --lilac-soft:    rgba(184,160,216,0.12);
    --rose:          #e09ab8;
    --rose-soft:     rgba(224,154,184,0.12);
    --gold:          #d4b870;
    --gold-soft:     rgba(212,184,112,0.12);
    --sky:           #7ec0e0;
    --sky-soft:      rgba(126,192,224,0.12);
    --danger:        #f07070;
    --danger-soft:   rgba(240,112,112,0.12);
    --success:       #60c48a;
    --success-soft:  rgba(96,196,138,0.12);
    --warning:       #e0b048;
    --warning-soft:  rgba(224,176,72,0.12);
    --link:          #8ab4d6;
    --link-hover:    #a8cce8;
    --line:          rgba(255,255,255,0.08);
    --line-strong:   rgba(255,255,255,0.14);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:     0 4px 12px rgba(0,0,0,0.30);
    --shadow-lg:     0 8px 24px rgba(0,0,0,0.40);
    --paper:         #181b24;
    --paper-line:    rgba(255,255,255,0.06);
    --paper-margin:  rgba(180,80,80,0.30);
    color-scheme: dark;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.text-muted   { color: var(--ink-muted); }
.text-faint   { color: var(--ink-faint); }
.text-accent  { color: var(--accent); }
.text-mint    { color: var(--mint); }
.text-peach   { color: var(--peach); }
.text-lilac   { color: var(--lilac); }
.text-rose    { color: var(--rose); }
.text-gold    { color: var(--gold); }
.text-sky     { color: var(--sky); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.container-narrow { max-width: 720px; }
.container-wide   { max-width: 1440px; }

.stack    { display: flex; flex-direction: column; }
.stack-xs { gap: 0.25rem; }
.stack-sm { gap: 0.5rem; }
.stack-md { gap: 1rem; }
.stack-lg { gap: 1.5rem; }
.stack-xl { gap: 2rem; }

.row         { display: flex; flex-wrap: wrap; align-items: center; }
.row-between { justify-content: space-between; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.card-flush  { padding: 0; }

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.card-body { padding: 1.25rem; }

.card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.card .card-icon  { font-size: 1.6rem; }
.card .card-title { font-size: 0.92rem; }
.card .card-desc  { font-size: 0.78rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   PILLS & BADGES
   ══════════════════════════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pill-accent  { color: var(--accent);  background: var(--accent-soft);  border-color: var(--accent-soft); }
.pill-mint    { color: var(--mint);    background: var(--mint-soft);    border-color: var(--mint-soft); }
.pill-peach   { color: var(--peach);   background: var(--peach-soft);   border-color: var(--peach-soft); }
.pill-lilac   { color: var(--lilac);   background: var(--lilac-soft);   border-color: var(--lilac-soft); }
.pill-rose    { color: var(--rose);    background: var(--rose-soft);    border-color: var(--rose-soft); }
.pill-gold    { color: var(--gold);    background: var(--gold-soft);    border-color: var(--gold-soft); }
.pill-sky     { color: var(--sky);     background: var(--sky-soft);     border-color: var(--sky-soft); }
.pill-danger  { color: var(--danger);  background: var(--danger-soft);  border-color: var(--danger-soft); }
.pill-success { color: var(--success); background: var(--success-soft); border-color: var(--success-soft); }
.pill-warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-soft); }

.pill-outline               { background: transparent; }
.pill-outline.pill-accent   { border-color: var(--accent); }
.pill-outline.pill-mint     { border-color: var(--mint); }
.pill-outline.pill-peach    { border-color: var(--peach); }
.pill-outline.pill-lilac    { border-color: var(--lilac); }
.pill-outline.pill-rose     { border-color: var(--rose); }
.pill-outline.pill-gold     { border-color: var(--gold); }
.pill-outline.pill-sky      { border-color: var(--sky); }

.pill-lg {
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn    { background: var(--warning-soft); color: var(--warning); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--accent-soft);  color: var(--accent); }

/* ── Health Status Pills ─────────────────────────────────────────────────── */
.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.health-pill .health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-pill-ok {
  color: var(--success);
  background: var(--success-soft);
  border-color: var(--success-soft);
}
.health-pill-ok .health-dot {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: health-pulse 2s ease-in-out infinite;
}
.health-pill-warn {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-soft);
}
.health-pill-warn .health-dot {
  background: var(--warning);
  box-shadow: 0 0 6px var(--warning);
  animation: health-pulse 1.5s ease-in-out infinite;
}
.health-pill-fail {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}
.health-pill-fail .health-dot {
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
}
.health-pill-unknown {
  color: var(--ink-muted);
  background: var(--bg-sunken);
  border-color: var(--line);
}
.health-pill-unknown .health-dot {
  background: var(--ink-faint);
}
@keyframes health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Provisioning URL Fields ─────────────────────────────────────────────── */
.prov-url-field {
  width: 100%;
  font-size: 0.82rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  letter-spacing: -0.01em;
  background: var(--bg, #0f0f23);
  color: var(--ink, #e0e0e0);
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prov-url-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  overflow: visible;
  text-overflow: unset;
}
.prov-url-field::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: var(--ink-inverse);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  color: var(--ink-inverse);
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-sm   { padding: 0.3rem 0.85rem; font-size: 0.75rem; }
.btn-icon { padding: 0.5rem; border-radius: var(--radius-md); }


/* ══════════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════════════════ */

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: max(1rem, 16px);
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-faint);
}

.textarea { resize: vertical; min-height: 100px; }

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}

.field { margin-bottom: 1rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════════════════════════════ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: 0.65rem 1rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td      { background: var(--bg-hover); }


/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.nav-link {
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover,
.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR — Nav Components (layout defined per-page in <style>)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Nav Groups ─────────────────────────────────────────────────────────────── */
.nav-group { margin-bottom: 2px; }
.nav-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 10px 20px 4px;
  user-select: none;
}
.nav-group-items {
  overflow: visible;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--accent); }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent);
  border-left-color: var(--accent); font-weight: 600;
}
.nav-item .icon { font-size: 1rem; width: 20px; text-align: center; }

/* ── Favorites Section ──────────────────────────────────────────────────────── */
.nav-favorites {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.nav-favorites .nav-group-label {
  color: var(--gold);
  cursor: default;
}
.nav-favorites .nav-group-label::after {
  display: none;
}
.nav-favorites .nav-item .icon {
  color: var(--gold);
}
.nav-fav-empty {
  padding: 6px 20px;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════════════
   MODAL / DIALOG
   ══════════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-overlay      { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.modal {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85dvh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.modal-title { font-size: 1.1rem; font-weight: 700; }
.modal-body  { padding: 1.25rem; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line);
}


/* ══════════════════════════════════════════════════════════════════════════════
   TOAST / NOTIFICATION
   ══════════════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  color: var(--ink);
  z-index: 2000;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.show    { transform: translateY(0); opacity: 1; }
.toast-success { border-left: 3px solid var(--success); }
.toast-danger  { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info    { border-left: 3px solid var(--accent); }


/* ══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink-faint);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.empty-state-icon  { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--ink-muted); margin-bottom: 0.35rem; }
.empty-state .icon { font-size: 2.5rem; }
.empty-state h2    { font-size: 1.1rem; }
.empty-state p     { font-size: 0.85rem; }

/* ── Data Table ──────────────────────────────────────────────────────────────── */
.data-table             { font-size: 0.85rem; }
.data-table th          { font-size: 0.74rem; }
.data-table td          { line-height: 1.5; transition: background 0.1s ease; }
.data-table tbody tr:hover td { background: var(--bg-hover); }

/* ── Form control transitions ────────────────────────────────────────────────── */
input, select, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert { font-size: 0.85rem; }

/* ── Page Header & Welcome Hero ──────────────────────────────────────────────── */
.page-header h1         { font-size: 1.4rem; }
.page-header p          { font-size: 0.85rem; }
.welcome-hero h1        { font-size: 2rem; }
.welcome-hero .subtitle { font-size: 1rem; }
.welcome-hero .verse    { font-size: 0.82rem; }


/* ══════════════════════════════════════════════════════════════════════════════
   LOADING / SKELETON
   ══════════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bg-hover) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-line   { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton-circle { border-radius: 50%; }


/* ══════════════════════════════════════════════════════════════════════════════
   AVATAR
   ══════════════════════════════════════════════════════════════════════════════ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: var(--accent);
  flex-shrink: 0;
}

.avatar-sm  { width: 28px; height: 28px; font-size: 0.65rem; }
.avatar-md  { width: 36px; height: 36px; font-size: 0.8rem; }
.avatar-lg  { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl  { width: 64px; height: 64px; font-size: 1.25rem; }

.avatar-mint  { background: var(--mint); }
.avatar-peach { background: var(--peach); }
.avatar-lilac { background: var(--lilac); }
.avatar-rose  { background: var(--rose); }
.avatar-gold  { background: var(--gold); }
.avatar-sky   { background: var(--sky); }


/* ══════════════════════════════════════════════════════════════════════════════
   STATUS DOT
   ══════════════════════════════════════════════════════════════════════════════ */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-online  { background: var(--success); }
.status-dot-offline { background: var(--danger); }
.status-dot-idle    { background: var(--warning); }
.status-dot-pending { background: var(--ink-faint); }


/* ══════════════════════════════════════════════════════════════════════════════
   THEME PICKER COMPONENT
   ══════════════════════════════════════════════════════════════════════════════ */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.theme-swatch {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.65rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
  background: var(--bg-raised);
}

.theme-swatch:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.theme-swatch.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.theme-swatch-preview {
  height: 60px;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}

.theme-swatch-name {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-muted);
}

.theme-swatch-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════════════════════════ */

.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .show-mobile { display: block; }

  .sidebar {
    position: fixed;
    left: -100%;
    z-index: 200;
    transition: left 0.25s ease;
  }
  .sidebar.open { left: 0; }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }

  .prayer-form-row { grid-template-columns: 1fr !important; }

  /* ── Responsive data-table: cards on mobile ──────────────────────────── */
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; }
  .data-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line, #333);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--bg-raised, #1a1a2e);
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: none;
    font-size: 0.84rem;
  }
  .data-table td:empty { display: none; }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent, #22d3ee);
    margin-right: 12px;
    flex-shrink: 0;
  }
  .data-table td:last-child { justify-content: space-between; }
  .data-table tr:hover td { background: transparent; }

  /* ── Card grid adjustments ───────────────────────────────────────────── */
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .card { padding: 14px; }
  .card .card-icon  { font-size: 1.3rem; margin-bottom: 6px; }
  .card .card-title { font-size: 0.84rem; }
  .card .card-desc  { font-size: 0.72rem; }
  .welcome-hero     { padding: 28px 8px 20px; }
  .welcome-hero h1  { font-size: 1.5rem; }

  /* ── Admin topbar adjustments ────────────────────────────────────────── */
  .topbar-user       { gap: 8px; }
  .topbar-user .name { font-size: 0.78rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user .role { display: none; }
  .topbar-user .logout-btn { font-size: 0.72rem; padding: 4px 8px; }
  .notif-bell        { font-size: 1.15rem; padding: 4px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH
   ══════════════════════════════════════════════════════════════════════════════ */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--line, #444);
  border-radius: 24px;
  transition: background 0.25s;
}
.toggle-switch .slider::before {
  content: '';
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: var(--bg-raised);
  border-radius: 50%;
  transition: transform 0.25s;
}
.toggle-switch input:checked + .slider { background: var(--success, #4ade80); }
.toggle-switch input:checked + .slider::before { transform: translateX(18px); }
.toggle-switch input:disabled + .slider { opacity: 0.4; cursor: not-allowed; }

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #333);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink, #e0e0e0);
}
.toggle-row-label .icon { font-size: 1.1rem; opacity: 0.7; }
.toggle-row-label .name { font-weight: 600; }
.toggle-row-scope {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #888);
  margin-right: 12px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BROWSE / TOPIC SEARCH PATTERN
   ══════════════════════════════════════════════════════════════════════════════ */

.browse-search { margin-bottom: 16px; position: relative; }
.browse-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-raised, #1a1a2e);
  color: var(--ink, #e0e0e0);
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
}
.browse-search-input:focus {
  outline: none;
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 0 2px rgba(34,211,238,0.15);
}
.browse-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--ink-muted, #888);
  pointer-events: none;
}

.browse-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--line, #333);
  padding-bottom: 0;
}
.browse-tab {
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted, #888);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.browse-tab:hover { color: var(--ink, #e0e0e0); }
.browse-tab.active {
  color: var(--accent, #22d3ee);
  border-bottom-color: var(--accent, #22d3ee);
}

.browse-grid { display: grid; gap: 8px; }

.browse-item {
  border-radius: 10px;
  overflow: visible;
}
.browse-item[open] > .browse-item-trigger .browse-item-chevron {
  transform: rotate(90deg);
}
.browse-item-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.browse-item-trigger::-webkit-details-marker { display: none; }
.browse-item-trigger::marker { display: none; content: ''; }
.browse-item-trigger:hover { background: var(--bg-sunken, #16161f); }
.browse-item-icon { font-size: 1.3rem; flex-shrink: 0; }
.browse-item-title { font-size: 0.9rem; font-weight: 600; color: var(--ink, #e0e0e0); flex: 1; }
.browse-item-sub { font-size: 0.78rem; color: var(--ink-muted, #888); }
.browse-item-chevron {
  font-size: 0.55rem;
  color: var(--ink-muted, #888);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.browse-item-body {
  padding: 12px 4px 4px;
  display: grid;
  gap: 10px;
}

.browse-detail-card {
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line, #333);
  border-left: 4px solid var(--accent, #22d3ee);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: box-shadow 0.2s;
}
.browse-detail-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.browse-detail-card .browse-detail-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0;
  opacity: 1;
}
.browse-detail-card p,
.browse-detail-card .browse-detail-text {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
  margin: 0;
  padding: 13px 16px 14px;
  color: var(--ink, #e0e0e0);
}
.browse-detail-card p + p {
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.browse-detail-card a { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
/* Structured head/body layout — used by library & encyclopedic cards */
.browse-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
}
.browse-detail-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1; }
.browse-detail-head .browse-detail-label {
  padding: 0;
  border: none;
  background: none;
}
.browse-detail-body { padding: 13px 16px 14px; }
.browse-detail-body p {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
  margin: 0 0 10px;
  color: var(--ink, #e0e0e0);
}
.browse-detail-body p:last-child { margin-bottom: 0; }

/* color variants */
.browse-card-accent  { background: var(--accent-soft, rgba(34,211,238,0.08));  border-left-color: var(--accent, #22d3ee); }
.browse-card-accent  .browse-detail-label { color: var(--accent, #22d3ee); }
.browse-card-gold    { background: var(--gold-soft, rgba(248,213,143,0.08));   border-left-color: var(--gold, #f8d58f); }
.browse-card-gold    .browse-detail-label { color: var(--ink); }
.browse-card-mint    { background: var(--mint-soft, rgba(52,211,153,0.08));    border-left-color: var(--mint, #34d399); }
.browse-card-mint    .browse-detail-label { color: var(--mint, #34d399); }
.browse-card-peach   { background: var(--peach-soft, rgba(240,168,137,0.08));  border-left-color: var(--peach, #f0a889); }
.browse-card-peach   .browse-detail-label { color: var(--peach, #f0a889); }
.browse-card-lilac   { background: var(--lilac-soft, rgba(196,181,253,0.08));  border-left-color: var(--lilac, #c4b5fd); }
.browse-card-lilac   .browse-detail-label { color: var(--lilac, #c4b5fd); }

/* ─── BIBLICAL COUNSELING HUB ───────────────────────────────────────────────── */
.coun-hero {
  background: linear-gradient(135deg, rgba(140,197,162,0.10), rgba(126,170,204,0.08), rgba(180,155,219,0.06));
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.coun-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint, #8cc5a2), var(--gold, #d4b870), var(--lilac, #b49bdb));
}
.coun-hero-inner {
  padding: 30px 24px 24px;
  text-align: center;
}
.coun-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink, #e0e0e0);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.coun-hero-sub {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 0.95rem;
  color: var(--ink-muted, #888);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
  font-style: italic;
}
.coun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.coun-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.2s;
}
.coun-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}
.coun-card-head {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.coun-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.coun-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #e0e0e0);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.coun-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.coun-definition {
  padding: 0 18px 14px;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
  color: var(--ink-muted, #888);
}
.coun-section {
  padding: 0 18px 16px;
}
.coun-section-label {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.coun-verse {
  background: var(--gold-soft, rgba(212,184,112,0.06));
  border-left: 3px solid var(--gold, #d4b870);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.coun-verse-ref {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold, #d4b870);
  margin-bottom: 4px;
}
.coun-verse-ref a { color: inherit; }
.coun-verse-text {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
  color: var(--ink, #e0e0e0);
  opacity: 0.9;
}
.coun-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.coun-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-sunken, rgba(0,0,0,0.15));
}
.coun-step-num {
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.coun-step-text {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
  color: var(--ink, #e0e0e0);
}
.coun-step-text a { color: var(--gold, #d4b870); text-decoration: underline; text-decoration-style: dotted; }
@media (max-width: 700px) {
  .coun-grid { grid-template-columns: 1fr; }
  .coun-hero-title { font-size: 1.3rem; }
}

/* ─── READING PLAN ──────────────────────────────────────────────────────────── */
.rp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rp-date-picker {
  display: flex; align-items: center; gap: 10px;
}
.rp-header-row {
  display: grid;
  grid-template-columns: 72px repeat(4, 1fr);
  gap: 0 40px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 2px solid var(--line-strong, rgba(255,255,255,0.14));
}
.rp-header-col {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-align: center;
}
.rp-header-col:first-child { text-align: left; }
.rp-row {
  display: grid;
  grid-template-columns: 72px repeat(4, 1fr);
  gap: 0 40px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
  transition: background 0.15s;
}
.rp-row:hover { filter: brightness(1.08); }
.rp-row-target {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft, rgba(138,180,214,0.08)) !important;
}
.rp-date {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.rp-date-num {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}
.rp-cell {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink);
}
.rp-cell a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-shadow: 0 0 0.5px currentColor;
}
.rp-cell a:hover {
  color: var(--accent);
  text-shadow: none;
}
.rp-load-more {
  text-align: center;
  padding: 16px 0;
}
.rp-load-more a {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
}
.rp-load-more a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .rp-header-row { display: none; }
  .rp-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rp-cell { text-align: left; }
}

/* ─── LEXICON / WORD STUDY ──────────────────────────────────────────────────── */
.lex-original {
  font-family: 'Noto Sans', 'Noto Sans Hebrew', 'SBL Hebrew', 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold, #f8d58f);
  letter-spacing: 0.02em;
}
.lex-original.lex-greek { direction: ltr; }
.lex-original.lex-hebrew { direction: rtl; unicode-bidi: bidi-override; }
.lex-translit {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-muted, #888);
  margin-top: 2px;
}
.lex-hero-card {
  text-align: center;
  padding: 28px 20px 20px;
  background: linear-gradient(135deg, var(--bg-raised, #1a1a2e), var(--bg-sunken, #16161f));
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.lex-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold, #f8d58f), var(--accent, #22d3ee));
}
.lex-strongs-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 10px;
}
.lex-strongs-pill.lex-nt {
  background: var(--accent-soft, rgba(34,211,238,0.12));
  color: var(--accent, #22d3ee);
  border: 1px solid var(--accent, #22d3ee);
}
.lex-strongs-pill.lex-ot {
  background: var(--gold-soft, rgba(248,213,143,0.12));
  color: var(--gold, #f8d58f);
  border: 1px solid var(--gold, #f8d58f);
}
.lex-details-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.lex-stat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.lex-stat-bar-fill {
  height: 6px;
  border-radius: 3px;
  background: var(--accent, #22d3ee);
  flex: 1;
  max-width: 120px;
  opacity: 0.6;
}
.lex-testament-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.lex-testament-tab {
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line, #333);
  background: var(--bg-raised, #1a1a2e);
  color: var(--ink-muted, #888);
  transition: all 0.2s ease;
}
.lex-testament-tab:hover { color: var(--ink, #e0e0e0); border-color: var(--ink-muted, #888); }
.lex-testament-tab.active {
  background: var(--accent-soft, rgba(34,211,238,0.12));
  color: var(--accent, #22d3ee);
  border-color: var(--accent, #22d3ee);
}
.lex-testament-tab.lex-ot-tab.active {
  background: var(--gold-soft, rgba(248,213,143,0.12));
  color: var(--gold, #f8d58f);
  border-color: var(--gold, #f8d58f);
}
.lex-count-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-sunken, #16161f);
  color: var(--ink-muted, #888);
  margin-left: 6px;
}

/* ─── DEVOTIONAL ENHANCED ──────────────────────────────────────────────────── */
.dev-welcome-banner {
  padding: 28px 20px 22px;
  background: linear-gradient(135deg, var(--accent-soft, rgba(126,170,204,0.15)), var(--gold-soft, rgba(212,184,112,0.1)), var(--lilac-soft, rgba(180,155,219,0.08)));
  border: 1px solid var(--line, #333);
  border-radius: 16px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.dev-welcome-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold, #d4b870), var(--accent, #7eaacc), var(--lilac, #b49bdb));
}
.dev-welcome-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent, #7eaacc);
  margin-bottom: 6px;
  line-height: 1.2;
}
.dev-welcome-verse {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--gold, #d4b870);
  line-height: 1.6;
  max-width: 600px;
  margin: 10px auto 0;
  opacity: 0.9;
}
.dev-quick-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.dev-quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line, #333);
  background: var(--bg-sunken, var(--bg, #1a1a2e));
  color: var(--ink, #e0e0e0);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dev-quick-btn:hover {
  background: var(--accent-soft, rgba(126,170,204,0.12));
  border-color: var(--accent, #7eaacc);
  color: var(--accent, #7eaacc);
}
.dev-section-card {
  padding: 18px 18px;
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.dev-section-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.dev-section-card.dev-scripture::before   { background: var(--gold, #d4b870); }
.dev-section-card.dev-reflection::before  { background: var(--accent, #7eaacc); }
.dev-section-card.dev-question::before    { background: var(--mint, #8cc5a2); }
.dev-section-card.dev-prayer-focus::before { background: var(--lilac, #b49bdb); }
.dev-section-card.dev-reading::before     { background: var(--peach, #f0a889); }
.dev-section-card.dev-journal::before     { background: var(--accent, #7eaacc); }
.dev-section-card.dev-pray::before        { background: var(--lilac, #b49bdb); }
.dev-section-label {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted, #888);
}
.dev-section-label span {
  font-size: 1.1rem;
}
.dev-section-content {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--ink, #e0e0e0);
}
.dev-section-content p { margin: 0; }
.dev-scripture .dev-section-content,
.dev-reflection .dev-section-content,
.dev-question .dev-section-content,
.dev-prayer-focus .dev-section-content {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
}
.dev-journal-entry {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dev-journal-entry:hover { border-color: var(--accent, #7eaacc); }
.dev-prayer-entry {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 10px;
  padding: 14px 16px;
}
.dev-prayer-entry.dev-answered { border-color: var(--success, #4ade80); }

/* ─── DEVOTIONALS HERO ─────────────────────────────────────────── */
.dev-hero {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

/* ─── DEVOTIONALS FEED CARDS ───────────────────────────────────── */
.dev-feed-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-left: 3px solid var(--accent, #7eaacc);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.dev-feed-card:hover {
  box-shadow: 0 2px 14px rgba(0,0,0,0.18);
  border-color: var(--line-hover, #555);
}
.dev-feed-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.dev-feed-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  width: 48px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
}
.dev-feed-day {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}
.dev-feed-month {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.dev-feed-info {
  flex: 1;
  min-width: 0;
}
.dev-feed-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-feed-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.dev-feed-rel {
  font-size: 0.75rem;
  color: var(--ink-muted, #888);
  margin-top: 2px;
}
.dev-feed-chevron {
  font-size: 1rem;
  color: var(--ink-muted, #888);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.dev-feed-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 16px;
}
.dev-feed-body.dev-feed-open {
  max-height: 2000px;
  padding: 0 16px 16px;
}
@media (max-width: 600px) {
  .dev-welcome-title { font-size: 1.4rem; }
  .dev-welcome-verse { font-size: 0.95rem; }
  .dev-feed-header { padding: 12px; gap: 10px; }
  .dev-feed-date { min-width: 42px; width: 42px; height: 46px; }
  .dev-feed-day { font-size: 1.2rem; }
  .lex-original { font-size: 1.6rem; }
  .lex-hero-card { padding: 22px 16px 16px; }
}

/* ─── THE UPPER ROOM ───────────────────────────────────────────────────────── */

/* Gate (signed-out state) */
.ur-gate {
  text-align: center;
  padding: 80px 24px;
  max-width: 520px;
  margin: 0 auto;
}
.ur-gate-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(212,184,112,0.3));
}
.ur-gate-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent, #7eaacc);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.ur-gate-verse {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--gold, #d4b870);
  line-height: 1.7;
  margin: 0 0 6px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.ur-gate-ref {
  font-size: 0.85rem;
  color: var(--ink-muted, #888);
  margin: 0 0 28px;
}
.ur-gate-desc {
  font-size: 0.95rem;
  color: var(--ink, #e0e0e0);
  line-height: 1.7;
  margin: 0 0 28px;
}
.ur-gate-btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #7eaacc), var(--gold, #d4b870));
  color: var(--ink-inverse, #0f1118);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(126,170,204,0.25);
}
.ur-gate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(126,170,204,0.35);
}

/* Container */
.ur-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* Hero */
.ur-hero {
  text-align: center;
  padding: 36px 24px 28px;
  background: linear-gradient(
    160deg,
    var(--accent-soft, rgba(126,170,204,0.12)),
    var(--gold-soft, rgba(212,184,112,0.08)),
    var(--lilac-soft, rgba(180,155,219,0.06))
  );
  border: 1px solid var(--line, #333);
  border-radius: 20px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.ur-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--gold, #d4b870),
    var(--accent, #7eaacc),
    var(--lilac, #b49bdb),
    var(--peach, #f0a889));
}
.ur-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft, rgba(212,184,112,0.08)), transparent 70%);
  pointer-events: none;
}
.ur-hero-candle {
  font-size: 2.6rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(212,184,112,0.35));
}
.ur-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent, #7eaacc);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.ur-hero-greeting {
  font-size: 1.15rem;
  color: var(--ink, #e0e0e0);
  margin: 0 0 2px;
  font-weight: 600;
}
.ur-hero-date {
  font-size: 0.88rem;
  color: var(--ink-muted, #888);
  margin: 0 0 12px;
}
.ur-hero-verse {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  color: var(--gold, #f0d56c);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  text-shadow: 0 0 10px rgba(240,213,108,0.35);
}

/* Section nav tabs */
.ur-nav {
  display: flex;
  gap: 6px;
  padding: 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg, #0f1118);
  margin-bottom: 4px;
}
.ur-nav::-webkit-scrollbar { display: none; }
.ur-nav-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #333);
  background: var(--bg-raised, #1a1a2e);
  color: var(--ink, #e0e0e0);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.ur-nav-tab span { font-size: 1rem; }
.ur-nav-tab:hover {
  background: var(--accent-soft, rgba(126,170,204,0.12));
  border-color: var(--accent, #7eaacc);
  color: var(--accent, #7eaacc);
}

/* Sections */
.ur-section {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ur-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 14px;
  position: relative;
}
.ur-section-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ur-section-header.ur-section-devotional::before { background: var(--gold, #d4b870); }
.ur-section-header.ur-section-reading::before    { background: var(--peach, #f0a889); }
.ur-section-header.ur-section-journal::before    { background: var(--accent, #7eaacc); }
.ur-section-header.ur-section-prayer::before     { background: var(--lilac, #b49bdb); }
.ur-section-header.ur-section-care::before       { background: var(--danger, #f87171); }
.ur-section-header.ur-section-pulse::before      { background: linear-gradient(90deg, var(--gold, #d4b870), var(--accent, #7eaacc), var(--lilac, #b49bdb)); }
.ur-section-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.ur-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #e0e0e0);
  margin: 0;
}
.ur-section-sub {
  font-size: 0.8rem;
  color: var(--ink-muted, #888);
  margin: 2px 0 0;
}
.ur-section-link {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent, #7eaacc);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ur-section-link:hover { text-decoration: underline; }
.ur-section-body {
  padding: 0 22px 20px;
  display: grid;
  gap: 14px;
}

/* Cards (devotional sections, forms) */
.ur-card {
  padding: 16px 18px;
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  margin: 0 22px 14px;
}
.ur-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ur-card.ur-card-scripture::before     { background: var(--gold, #d4b870); }
.ur-card.ur-card-reflection::before    { background: var(--accent, #7eaacc); }
.ur-card.ur-card-question::before      { background: var(--mint, #8cc5a2); }
.ur-card.ur-card-prayer-focus::before  { background: var(--lilac, #b49bdb); }
.ur-card.ur-card-journal-new::before   { background: var(--accent, #7eaacc); }
.ur-card.ur-card-prayer-submit::before { background: var(--lilac, #b49bdb); }
.ur-card.ur-card-scripture     { background: var(--gold-soft, rgba(212,184,112,0.08)); }
.ur-card.ur-card-reflection    { background: var(--accent-soft, rgba(126,170,204,0.08)); }
.ur-card.ur-card-question      { background: var(--mint-soft, rgba(140,197,162,0.08)); }
.ur-card.ur-card-prayer-focus  { background: var(--lilac-soft, rgba(180,155,219,0.08)); }
.ur-card.ur-card-journal-new   { background: var(--accent-soft, rgba(126,170,204,0.08)); }
.ur-card.ur-card-prayer-submit { background: var(--lilac-soft, rgba(180,155,219,0.06)); }
.ur-card-label {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted, #888);
}
.ur-card-label span { font-size: 1.1rem; }
.ur-card-content { font-size: 1rem; line-height: 1.8; color: var(--ink, #e0e0e0); }
.ur-card-content p { margin: 0; }
.ur-scripture-text,
.ur-card-reflection .ur-card-content,
.ur-card-question .ur-card-content,
.ur-card-prayer-focus .ur-card-content,
.ur-card-prayer-submit .ur-form-hint {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.9;
}

/* Reading grid */
.ur-reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 0 22px 20px;
}
.ur-reading-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line, #333);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.ur-reading-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.ur-reading-ref {
  display: flex;
  justify-content: center;
}
.ur-reading-ref .pill {
  font-size: 0.72rem;
  white-space: normal;
  text-align: center;
  word-break: break-word;
  line-height: 1.3;
}

/* Form elements */
.ur-input, .ur-textarea, .ur-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #333);
  background: var(--bg, #0f1118);
  color: var(--ink, #e0e0e0);
  font-size: 0.92rem;
  font-family: inherit;
  margin-bottom: 10px;
}
.ur-textarea {
  resize: vertical;
  line-height: 1.7;
  font-family: 'Noto Serif', Georgia, serif;
}
.ur-select { width: auto; min-width: 140px; }
.ur-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ur-form-hint {
  font-size: 0.88rem;
  color: var(--ink-muted, #888);
  line-height: 1.6;
  margin: 0 0 12px;
}
.ur-check-label {
  font-size: 0.82rem;
  color: var(--ink-muted, #888);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ur-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.18s;
  font-family: inherit;
}
.ur-btn:hover { opacity: 0.85; }
.ur-btn-accent {
  background: var(--accent, #7eaacc);
  color: var(--ink-inverse, #0f1118);
}
.ur-btn-lilac {
  background: var(--lilac, #b49bdb);
  color: var(--ink-inverse, #0f1118);
}

/* Entry card grid */
.ur-entries-grid {
  display: grid;
  gap: 10px;
  padding: 0 22px 18px;
}
.ur-entry-card {
  background: var(--bg-sunken, rgba(0,0,0,0.15));
  border: 1px solid var(--line, #333);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.ur-entry-card:hover { border-color: var(--accent, #7eaacc); }
.ur-prayer-card { cursor: default; }
.ur-answered { border-color: var(--success, #4ade80); }
.ur-resolved { border-color: var(--success, #4ade80); }

/* Prayer card expanded details */
.ur-prayer-notes {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: var(--bg-sunken, #0d0d1a);
  border-left: 3px solid var(--lilac, #b49bdb);
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--ink, #e0e0e0);
  line-height: 1.55;
}
.ur-prayer-notes-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lilac, #b49bdb);
  margin-bottom: 4px;
}
.ur-prayer-notes p { margin: 0; }
.ur-prayer-contacts {
  margin: 8px 0 0;
  border-top: 1px solid var(--line, #333);
  padding-top: 8px;
}
.ur-prayer-contacts-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent, #7eaacc);
  margin-bottom: 6px;
}
.ur-contact-entry {
  padding: 6px 10px;
  margin-bottom: 4px;
  background: var(--bg-sunken, #0d0d1a);
  border-radius: 6px;
  font-size: 0.82rem;
}
.ur-contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ur-contact-type {
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  font-size: 0.8rem;
}
.ur-contact-dir {
  font-weight: 400;
  color: var(--ink-muted, #888);
  font-size: 0.75rem;
}
.ur-contact-subject {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent, #7eaacc);
  margin-top: 2px;
}
.ur-contact-detail {
  font-size: 0.8rem;
  color: var(--ink-muted, #888);
  margin: 2px 0 0;
  line-height: 1.5;
}
.ur-contact-by {
  font-size: 0.72rem;
  color: var(--ink-faint, #666);
  font-style: italic;
}

.ur-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.ur-entry-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent, #7eaacc);
}
.ur-entry-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ur-entry-date {
  font-size: 0.72rem;
  color: var(--ink-muted, #888);
}
.ur-entry-excerpt {
  font-size: 0.85rem;
  color: var(--ink, #e0e0e0);
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ur-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.ur-assigned {
  font-size: 0.78rem;
  color: var(--accent, #7eaacc);
  font-weight: 600;
}
.ur-view-all {
  text-align: center;
  padding: 8px 22px 18px;
}
.ur-view-all a {
  font-size: 0.85rem;
  color: var(--accent, #7eaacc);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.ur-view-all a:hover { text-decoration: underline; }
.ur-subsection-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #7eaacc);
  padding: 4px 22px 8px;
}

/* Spiritual Pulse */
.ur-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 0 22px 18px;
}
.ur-pulse-card {
  text-align: center;
  padding: 18px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  transition: border-color 0.2s;
}
.ur-pulse-card:hover { border-color: var(--accent, #7eaacc); }
.ur-pulse-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent, #7eaacc);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ur-pulse-label {
  font-size: 0.75rem;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Mood tracker */
.ur-mood-section {
  padding: 4px 22px 20px;
}
.ur-mood-bars {
  display: grid;
  gap: 8px;
}
.ur-mood-row {
  display: grid;
  grid-template-columns: 28px 80px 1fr 28px;
  gap: 8px;
  align-items: center;
}
.ur-mood-emoji { font-size: 1rem; text-align: center; }
.ur-mood-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
}
.ur-mood-bar-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.ur-mood-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent, #7eaacc), var(--gold, #d4b870));
  transition: width 0.6s ease-out;
}
.ur-mood-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted, #888);
  text-align: right;
}

/* Footer */
.ur-footer {
  text-align: center;
  padding: 28px 22px;
  border-top: 1px solid var(--line, #333);
  background: linear-gradient(135deg, rgba(126,170,204,0.04), rgba(212,184,112,0.04));
  border-radius: 0 0 18px 18px;
}
.ur-footer-verse {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--gold, #f0d56c);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 6px;
  text-shadow: 0 0 10px rgba(240,213,108,0.35);
}
.ur-footer-ref {
  font-size: 0.78rem;
  color: var(--ink-muted, #888);
  margin-bottom: 16px;
}
.ur-footer-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .ur-hero { padding: 28px 16px 22px; border-radius: 14px; }
  .ur-hero-title { font-size: 1.6rem; }
  .ur-hero-greeting { font-size: 1rem; }
  .ur-hero-verse { font-size: 0.95rem; }
  .ur-section { border-radius: 14px; margin-bottom: 12px; }
  .ur-section-header { padding: 16px 16px 10px; gap: 10px; }
  .ur-section-icon { font-size: 1.3rem; }
  .ur-section-title { font-size: 0.98rem; }
  .ur-card { margin: 0 16px 12px; padding: 14px 14px; }
  .ur-entries-grid { padding: 0 16px 14px; }
  .ur-reading-grid { padding: 0 16px 16px; grid-template-columns: 1fr; }
  .ur-reading-item .pill { white-space: normal; text-align: center; }
  .ur-pulse-grid { padding: 0 16px 14px; grid-template-columns: repeat(3, 1fr); }
  .ur-mood-section { padding: 4px 16px 16px; }
  .ur-mood-row { grid-template-columns: 24px 64px 1fr 24px; }
  .ur-subsection-label { padding: 4px 16px 8px; }
  .ur-view-all { padding: 8px 16px 14px; }
  .ur-footer { padding: 22px 16px; }
  .ur-gate { padding: 50px 16px; }
  .ur-gate-title { font-size: 1.7rem; }
  .ur-nav-tab { padding: 7px 12px; font-size: 0.78rem; }
}

/* Lineage tree */
.lineage-node {
  position: relative;
  padding: 10px 14px 10px 24px;
  margin-left: 16px;
  border-left: 2px solid var(--line, #333);
}
.lineage-node::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 18px;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--line, #333);
}
.lineage-node-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent, #22d3ee);
  cursor: pointer;
}
.lineage-node-name:hover { text-decoration: underline; }
.lineage-node-detail {
  font-size: 0.78rem;
  color: var(--ink-muted, #888);
}
.lineage-root { margin-left: 0; border-left: none; padding-left: 0; }
.lineage-root::before { display: none; }

/* Letter index */
.letter-index {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}
.letter-index-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 6px;
  color: var(--ink, #e0e0e0);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.letter-index-btn:hover { border-color: var(--accent, #22d3ee); color: var(--accent, #22d3ee); }
.letter-index-btn.active { background: var(--accent, #22d3ee); color: var(--ink-inverse); border-color: var(--accent, #22d3ee); }
.letter-index-btn.disabled { opacity: 0.3; pointer-events: none; }
.letter-group-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent, #22d3ee);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--line, #333);
  margin-bottom: 8px;
}


/* ══════════════════════════════════════════════════════════════════════════════
   GENEALOGY — Split-Panel Master/Detail Layout
   ══════════════════════════════════════════════════════════════════════════════ */

.gene-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  height: 72vh;
  min-height: 480px;
  border: 1px solid var(--line, #333);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background: var(--bg, #0f0f23);
}
@media (max-width: 900px) {
  .gene-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
}

/* ── Left: Name list panel ── */
.gene-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line, #333);
  background: var(--bg-raised, #1a1a2e);
  overflow: hidden;
}
@media (max-width: 900px) {
  .gene-list {
    border-right: none;
    border-bottom: 1px solid var(--line, #333);
    max-height: 50vh;
  }
}
.gene-list-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #333);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--bg-sunken, #111);
}
.gene-list-header-title {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink, #e0e0e0);
}
.gene-list-count {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--accent-soft, rgba(34,211,238,0.12));
  color: var(--accent, #22d3ee);
}
.gene-list-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #333);
  flex-shrink: 0;
}
.gene-list-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--bg, #0f0f23);
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  color: var(--ink, #e0e0e0);
  font-size: max(0.85rem, 16px);
  font-family: inherit;
  box-sizing: border-box;
}
.gene-list-search input:focus {
  outline: none;
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(34,211,238,0.15));
}
.gene-list-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gene-list-scroll::-webkit-scrollbar { width: 4px; }
.gene-list-scroll::-webkit-scrollbar-track { background: transparent; }
.gene-list-scroll::-webkit-scrollbar-thumb { background: var(--line, #333); border-radius: 4px; }
.gene-list-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent, #22d3ee); }

/* ── Individual list items ── */
.gene-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-faint, rgba(255,255,255,0.04));
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}
.gene-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.04));
  transform: translateX(4px);
}
.gene-item.active {
  border-left-color: var(--accent, #22d3ee);
  background: var(--accent-soft, rgba(34,211,238,0.08));
}
.gene-item-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink, #e0e0e0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gene-item.active .gene-item-name { color: var(--accent, #22d3ee); }
.gene-item-title {
  font-size: 0.76rem;
  color: var(--ink-muted, #888);
  font-style: italic;
  margin-top: 2px;
}

/* ── Letter headings inside list ── */
.gene-letter-head {
  padding: 6px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent, #22d3ee);
  background: var(--bg-sunken, #111);
  border-bottom: 1px solid var(--line, #333);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Right: Detail panel ── */
.gene-detail {
  overflow-y: auto;
  background: var(--bg, #0f0f23);
  position: relative;
}
.gene-detail::-webkit-scrollbar { width: 4px; }
.gene-detail::-webkit-scrollbar-track { background: transparent; }
.gene-detail::-webkit-scrollbar-thumb { background: var(--line, #333); border-radius: 4px; }
.gene-detail::-webkit-scrollbar-thumb:hover { background: var(--accent, #22d3ee); }

.gene-detail-empty {
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--ink-faint, #555);
}
.gene-detail-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.25;
  color: var(--accent, #22d3ee);
}
.gene-detail-empty-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  margin-bottom: 8px;
}
.gene-detail-empty-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* ── Hero header inside detail ── */
.gene-hero {
  padding: 32px 28px 24px;
  border-bottom: 1px solid var(--line, #333);
}
.gene-hero-name {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--ink, #e0e0e0);
  margin: 0 0 4px;
  line-height: 1.15;
}
.gene-hero-title {
  font-size: 1rem;
  color: var(--accent, #22d3ee);
  font-style: italic;
  margin: 0 0 16px;
}
.gene-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gene-hero-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--line, #333);
  background: var(--bg-raised, #1a1a2e);
  color: var(--ink-muted, #999);
}
.gene-hero-badge-accent {
  background: var(--accent-soft, rgba(34,211,238,0.1));
  border-color: var(--accent, #22d3ee);
  color: var(--accent, #22d3ee);
}
.gene-hero-badge-gold {
  background: var(--gold-soft, rgba(248,213,143,0.1));
  border-color: var(--gold, #f8d58f);
  color: var(--gold, #f8d58f);
}

/* ── Detail body sections ── */
.gene-sections {
  padding: 20px 28px 40px;
  display: grid;
  gap: 16px;
}
.gene-section {
  padding: 16px 18px;
  border-radius: 10px;
  border-left: 4px solid var(--accent, #22d3ee);
  background: var(--accent-soft, rgba(34,211,238,0.05));
}
.gene-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  color: var(--accent, #22d3ee);
  opacity: 0.85;
}
.gene-section p, .gene-section .gene-section-text {
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
  color: var(--ink, #e0e0e0);
}
.gene-section-gold   { border-left-color: var(--gold, #f8d58f); background: var(--gold-soft, rgba(248,213,143,0.05)); }
.gene-section-gold   .gene-section-label { color: var(--gold, #f8d58f); }
.gene-section-mint   { border-left-color: var(--mint, #34d399); background: var(--mint-soft, rgba(52,211,153,0.05)); }
.gene-section-mint   .gene-section-label { color: var(--mint, #34d399); }
.gene-section-peach  { border-left-color: var(--peach, #f0a889); background: var(--peach-soft, rgba(240,168,137,0.05)); }
.gene-section-peach  .gene-section-label { color: var(--peach, #f0a889); }
.gene-section-lilac  { border-left-color: var(--lilac, #c084fc); background: var(--lilac-soft, rgba(192,132,252,0.05)); }
.gene-section-lilac  .gene-section-label { color: var(--lilac, #c084fc); }

/* ── Reference pills (verse pills) ── */
.gene-ref-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.gene-ref-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-sunken, #111);
  border: 1px solid var(--line, #333);
  color: var(--accent, #22d3ee);
  letter-spacing: 0.04em;
  transition: border-color 0.15s;
}
.gene-ref-pill:hover { border-color: var(--accent, #22d3ee); }

/* ── Family links ── */
.gene-family-link {
  color: var(--accent, #22d3ee);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: color 0.15s;
}
.gene-family-link:hover { color: var(--gold, #f8d58f); }

/* ── Stat row (used for overview stats above split) ── */
.gene-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.gene-stat-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: var(--radius, 12px);
  padding: 14px;
  text-align: center;
}
.gene-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink, #e0e0e0);
}
.gene-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #888);
  margin-top: 2px;
}

/* ── Fade-in animation for detail view ── */
@keyframes geneFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gene-fade-in { animation: geneFadeIn 0.35s ease forwards; }


/* ══════════════════════════════════════════════════════════════════════════════
   PHOTO GALLERY
   ══════════════════════════════════════════════════════════════════════════════ */

/* Album grid */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.album-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.album-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.album-cover {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  background: var(--line);
}
.album-cover-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--line) 100%);
  font-size: 2.4rem;
  color: var(--ink-muted);
  opacity: 0.5;
}
.album-info {
  padding: 14px 16px 16px;
}
.album-info h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.album-meta-dot::before { content: '\u00B7'; margin: 0 2px; }

/* Photo grid inside album detail */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.photo-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--line);
  transition: transform 0.15s;
}
.photo-thumb:hover { transform: scale(1.03); }
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-thumb-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.photo-thumb:hover .photo-thumb-overlay { opacity: 1; }

/* Lightbox */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: lbFadeIn 0.2s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.photo-lightbox img {
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
  object-fit: contain;
}
.photo-lightbox-caption {
  margin-top: 12px;
  color: #fff;
  font-size: 0.88rem;
  text-align: center;
  max-width: 80vw;
}
.photo-lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none; border: none;
  color: #fff; font-size: 1.8rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.photo-lightbox-close:hover { opacity: 1; }
.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.photo-lightbox-nav:hover { opacity: 1; background: rgba(255,255,255,0.22); }
.photo-lightbox-nav.lb-prev { left: 16px; }
.photo-lightbox-nav.lb-next { right: 16px; }

/* Upload area */
.photo-upload-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius, 12px);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 18px;
}
.photo-upload-zone:hover,
.photo-upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 59,130,246), 0.06);
}
.photo-upload-zone-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 6px;
}
.photo-upload-progress {
  margin-top: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.photo-upload-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
  width: 0%;
}

/* Album detail header */
.album-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.album-detail-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 160px;
}
.album-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s;
}
.album-back-btn:hover { background: var(--line); }

/* Empty state */
.photo-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-muted);
}
.photo-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.photo-empty p {
  font-size: 0.88rem;
  margin: 0 0 16px;
}

/* Album card open hint */
.album-open-hint {
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.album-card:hover .album-open-hint { opacity: 1; }

/* Photo thumbnail delete button */
.photo-thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.photo-thumb:hover .photo-thumb-del { opacity: 1; }
.photo-thumb-del:hover { background: var(--danger, #e74c3c); }

/* Lightbox actions bar */
.photo-lightbox-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.photo-lightbox-actions button {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.photo-lightbox-actions button:hover {
  background: rgba(255,255,255,0.22);
}

/* Mobile */
@media (max-width: 600px) {
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .album-cover, .album-cover-placeholder { aspect-ratio: 4/3; }
  .album-info { padding: 10px 12px 12px; }
  .album-info h3 { font-size: 0.88rem; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .photo-lightbox-nav { width: 34px; height: 34px; font-size: 1.3rem; }
  .album-open-hint { font-size: 0.7rem; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.settings-section {
  margin-bottom: 20px;
  background: var(--bg-raised, #1a1a2e);
  border-radius: 14px;
  border: 1px solid var(--line, #333);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.settings-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border-bottom: 1px solid var(--line, #333);
}
.settings-section-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb, 59,130,246), 0.1);
  border-radius: 10px;
}
.settings-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #e0e0e0);
  margin: 0 0 3px;
}
.settings-section-desc {
  font-size: 0.82rem;
  color: var(--ink-muted, #888);
  margin: 0;
  line-height: 1.5;
}

.settings-card {
  padding: 18px 22px 20px;
}
.settings-card-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  margin-bottom: 4px;
}
.settings-card-hint {
  font-size: 0.8rem;
  color: var(--ink-muted, #888);
  margin: 0 0 12px;
  line-height: 1.45;
}
.settings-card-hint strong {
  color: var(--ink, #e0e0e0);
}

.settings-input {
  background: var(--bg, #0f0f23);
  color: var(--ink, #e0e0e0);
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-input:focus {
  outline: none;
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(34,211,238,0.15));
}

/* Toggle switch */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--line, #444);
  border-radius: 28px;
  transition: background 0.25s;
}
.settings-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  background: var(--bg-raised, #222);
  border-radius: 50%;
  transition: transform 0.25s;
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--warning, #c98b2e);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(24px);
}

/* Theme swatch grid */
.settings-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.settings-swatch-grid.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.settings-swatch {
  cursor: pointer;
  border: 2px solid var(--line, #333);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  background: var(--bg-raised, #1a1a2e);
}
.settings-swatch:hover {
  border-color: var(--accent, #22d3ee);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.settings-swatch.active {
  border-color: var(--accent, #22d3ee);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(34,211,238,0.2));
}
.settings-swatch-preview {
  height: 40px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.15);
}
.settings-swatch.active .settings-swatch-preview {
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.15), 0 0 0 2px var(--accent, #22d3ee);
}
.settings-swatch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
}
.settings-swatch-mode {
  font-size: 0.67rem;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 4px 0;
  transition: background 0.15s;
}
.toggle-row:hover { background: rgba(255,255,255,0.03); }
.toggle-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink, #e0e0e0);
}
.toggle-row-label .icon {
  font-size: 1.1rem;
  width: 28px;
  text-align: center;
  opacity: 0.7;
}
.toggle-row-label .name { font-weight: 500; }

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute;
  inset: 0;
  background: var(--line, #444);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s;
}
.toggle-switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch input:checked + .slider {
  background: var(--accent, #22d3ee);
}
.toggle-switch input:checked + .slider::before {
  transform: translateX(18px);
}
.toggle-switch input:disabled + .slider {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Accordion */
.settings-accordion {
  border-top: 1px solid var(--line, #333);
}
.settings-accordion[open] > .settings-accordion-trigger .settings-accordion-chevron {
  transform: rotate(90deg);
}
.settings-accordion-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  transition: background 0.15s;
}
.settings-accordion-trigger::-webkit-details-marker { display: none; }
.settings-accordion-trigger::marker { display: none; content: ''; }
.settings-accordion-trigger:hover {
  background: rgba(255,255,255,0.03);
}
.settings-accordion-chevron {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
  color: var(--ink-muted, #888);
  flex-shrink: 0;
}
.settings-accordion-label {
  flex: 1;
}
.settings-accordion-count {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-muted, #888);
  background: var(--bg, #0f0f23);
  padding: 3px 12px;
  border-radius: 20px;
}
.settings-accordion-body {
  padding: 2px 10px 12px;
}

/* Standalone accordion section (e.g. System Settings) */
details.settings-section.settings-accordion {
  padding: 0;
}
details.settings-section.settings-accordion > .settings-accordion-trigger {
  border-top: none;
}

/* Settings stat cards row */
.settings-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.settings-stat-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.settings-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent, #22d3ee);
}
.settings-stat-label {
  font-size: 0.68rem;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* System Config — grouped card layout */
.sys-cfg-group { margin-bottom: 20px; }
.sys-cfg-group:last-child { margin-bottom: 0; }
.sys-cfg-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sys-cfg-group-icon { font-size: 1.15rem; }
.sys-cfg-group-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.sys-cfg-group-count {
  font-size: 0.72rem;
  color: var(--ink-muted);
  background: var(--bg-sunken, rgba(0,0,0,0.15));
  padding: 2px 8px;
  border-radius: 10px;
}
.sys-cfg-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.sys-cfg-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
}
.sys-cfg-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.sys-cfg-card-key {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  font-family: monospace;
}
.sys-cfg-card-val {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
  margin-bottom: 4px;
}
.sys-cfg-card-val.sys-cfg-empty {
  color: var(--ink-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 0.82rem;
}
.sys-cfg-bool {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sys-cfg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sys-cfg-on .sys-cfg-dot { background: var(--success, #4ade80); }
.sys-cfg-off .sys-cfg-dot { background: var(--danger, #f87171); }
.sys-cfg-on { color: var(--success, #4ade80); }
.sys-cfg-off { color: var(--ink-muted); }
.sys-cfg-card-desc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-bottom: 2px;
}
.sys-cfg-card-ts {
  font-size: 0.68rem;
  color: var(--ink-muted);
  opacity: 0.7;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .sys-cfg-group-cards { grid-template-columns: 1fr; }
}

/* ── Interface Studio ───────────────────────────────────────────────────── */
.studio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line, #333);
  flex-wrap: wrap;
}
.studio-row:last-child { border-bottom: none; }
.studio-label-wrap { flex: 1; min-width: 140px; }
.studio-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
}
.studio-hint {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-muted, #888);
  font-family: monospace;
  margin-top: 1px;
}
.studio-control {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.studio-pct {
  width: 62px;
  padding: 4px 6px;
  border: 1px solid var(--line, #333);
  border-radius: 6px;
  background: var(--bg, #0f0f23);
  color: var(--ink, #e0e0e0);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.studio-pct::-webkit-inner-spin-button,
.studio-pct::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.studio-pct:focus { outline: none; border-color: var(--accent, #22d3ee); }
.studio-pct-suffix {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-muted, #888);
}
.studio-select { min-width: 180px; }
.studio-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #22d3ee);
  padding: 10px 0 3px;
  border-bottom: 1px solid var(--line, #333);
}
.studio-font-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid var(--line, #333);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 100px;
  text-align: center;
  background: var(--bg, #0f0f23);
}
.studio-font-card:hover { border-color: var(--ink-muted, #888); background: var(--bg-raised, #1a1a2e); }
.studio-font-card.selected { border-color: var(--accent, #22d3ee); background: var(--bg-raised, #1a1a2e); }
.studio-font-card .font-sample { font-size: 1rem; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.studio-font-card .font-name { font-size: 0.62rem; color: var(--ink-muted, #888); text-transform: uppercase; letter-spacing: 0.04em; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-card {
  position: relative;
  border: 2px solid var(--line, #333);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-card:hover { border-color: var(--ink-muted, #888); }
.theme-card.selected { border-color: var(--accent, #22d3ee); box-shadow: 0 0 0 2px var(--accent, #22d3ee); }
.theme-card .tc-swatch { height: 32px; }
.theme-card .tc-body { padding: 6px 8px; background: var(--bg, #0f0f23); }
.theme-card .tc-name { font-size: 0.74rem; font-weight: 700; color: var(--ink, #e0e0e0); }
.theme-card .tc-mode { font-size: 0.62rem; color: var(--ink-muted, #888); text-transform: uppercase; letter-spacing: 0.03em; }
.theme-card .tc-check { position: absolute; top: 4px; right: 6px; font-size: 0.8rem; }
@media (max-width: 600px) {
  .studio-row { flex-direction: column; align-items: flex-start; }
  .studio-pct { width: 56px; }
  .studio-control { width: 100%; }
  .theme-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONTROL PANEL — OVERVIEW TAB
   ══════════════════════════════════════════════════════════════════════════════ */
/* Health bar */
.cp-health-bar {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.cp-health-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #333);
  transition: background 0.15s;
}
.cp-health-row:last-child { border-bottom: none; }
.cp-health-row:hover { background: rgba(255,255,255,0.02); }
.cp-health-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.cp-health-body { flex: 1; min-width: 0; }
.cp-health-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  margin-bottom: 2px;
}
.cp-health-detail {
  font-size: 0.74rem;
  color: var(--ink-muted, #888);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
/* Snapshot grid */
.cp-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line, #333);
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cp-snapshot-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-raised, #1a1a2e);
  transition: background 0.15s;
}
.cp-snapshot-item:hover { background: var(--bg-sunken, rgba(0,0,0,0.2)); }
.cp-snapshot-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted, #888);
}
.cp-snapshot-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink, #e0e0e0);
  word-break: break-word;
}
/* Quick actions */
.cp-quick-actions {
  margin-bottom: 24px;
}
.cp-quick-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #888);
  margin-bottom: 8px;
}
.cp-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-quick-btn {
  padding: 8px 16px;
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  background: var(--bg-raised, #1a1a2e);
  color: var(--ink, #e0e0e0);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.cp-quick-btn:hover {
  border-color: var(--accent, #22d3ee);
  color: var(--accent, #22d3ee);
}
/* Church Identity card */
.cp-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cp-identity-field { display: flex; flex-direction: column; gap: 5px; }
.cp-identity-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cp-identity-hint {
  font-size: 0.72rem;
  color: var(--ink-faint, #666);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .cp-identity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cp-health-detail { max-width: 160px; }
  .cp-snapshot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   NETWORK ADMIN
   ══════════════════════════════════════════════════════════════════════════════ */
.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.network-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}
.network-card:hover { border-color: var(--accent, #22d3ee); }
.network-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.network-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink, #e0e0e0);
  line-height: 1.3;
}
.network-card-id {
  font-size: 0.72rem;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.network-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.network-pill-checking { background: rgba(255,255,255,0.07); color: var(--ink-muted,#888); }
.network-pill-ok       { background: rgba(34,197,94,0.15);  color: #4ade80; }
.network-pill-down     { background: rgba(239,68,68,0.15);  color: #f87171; }
.network-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.network-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
}
.network-meta-label {
  font-weight: 700;
  color: var(--ink-muted, #888);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 64px;
}
.network-meta-val { color: var(--ink, #e0e0e0); }
.network-meta-muted { color: var(--ink-faint, #666); font-style: italic; }
.network-meta-link {
  color: var(--accent, #22d3ee);
  text-decoration: none;
  font-size: 0.78rem;
}
.network-meta-link:hover { text-decoration: underline; }
.network-card-latency {
  font-size: 0.72rem;
  color: var(--ink-faint, #666);
  min-height: 14px;
}
@media (max-width: 600px) {
  .network-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SETTINGS TAB NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */
.config-tabs-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-sunken, rgba(0,0,0,0.2));
  border-radius: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.config-tabs-bar::-webkit-scrollbar { display: none; }
.config-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--ink-muted, #888);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.config-tab:hover {
  color: var(--ink, #e0e0e0);
  background: rgba(255,255,255,0.04);
}
.config-tab.active {
  background: var(--accent, #22d3ee);
  color: var(--bg, #0f0f23);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.config-tab-icon {
  font-size: 1rem;
}
#settings-content {
  animation: configFadeIn 0.25s ease;
}
@keyframes configFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Enhanced stat cards */
.config-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.config-stat-card {
  background: var(--bg-raised, #1a1a2e);
  border: 1px solid var(--line, #333);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.config-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.config-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.config-stat-card:nth-child(1)::before { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.config-stat-card:nth-child(2)::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.config-stat-card:nth-child(3)::before { background: linear-gradient(90deg, #4ade80, #22c55e); }
.config-stat-card:nth-child(4)::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.config-stat-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.config-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink, #e0e0e0);
  line-height: 1.2;
}
.config-stat-label {
  font-size: 0.72rem;
  color: var(--ink-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .config-tabs-bar {
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
  }
  .config-tab {
    padding: 8px 12px;
    font-size: 0.76rem;
  }
  .config-tab-icon { display: none; }
  .config-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .config-stat-card { padding: 14px; }
  .config-stat-value { font-size: 1.2rem; }
}

/* My Requests cards */
.my-requests-grid {
  display: grid;
  gap: 14px;
}
.my-request-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.15s;
}
.my-request-card:hover { border-color: var(--accent); }
.my-request-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.my-request-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.my-request-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.my-request-body {
  font-size: 0.84rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.my-request-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.my-request-footer .assigned-to {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 600px) {
  .settings-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
  .settings-swatch { padding: 8px; }
  .settings-swatch-preview { height: 32px; }
  .settings-stat-row { grid-template-columns: repeat(2, 1fr); }
  .settings-section-header { padding: 16px 16px 12px; }
  .settings-card { padding: 14px 16px 16px; }
  .settings-accordion-trigger { padding: 12px 16px; }
  .toggle-row { padding: 8px 10px; }
}

/* ── Settings v2: sidebar layout, clean components ────────────── */
.stg-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  min-height: 60vh;
}
.stg-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 8px 0;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  align-self: start;
}
.stg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  transition: all 0.15s;
  text-align: left;
  white-space: nowrap;
}
.stg-nav-item:hover { background: var(--bg-hover, var(--bg-sunken)); color: var(--ink); }
.stg-nav-item.active {
  background: var(--accent);
  color: var(--ink-inverse, #fff);
  font-weight: 700;
}
.stg-nav-icon { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; }
.stg-main {
  padding: 16px 24px 32px;
  min-width: 0;
}
.stg-panel-animate {
  animation: stgFade 0.2s ease;
}
@keyframes stgFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards ── */
.stg-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.stg-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stg-card-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin-left: auto;
}
.stg-card-desc {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── Stats row ── */
.stg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stg-stat {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stg-stat-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stg-stat-lbl {
  font-size: 0.68rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ── Health / KV rows ── */
.stg-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.stg-health-row:last-child { border-bottom: none; }
.stg-health-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.stg-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--line);
}
.stg-kv:last-child { border-bottom: none; }
.stg-kv > span:first-child { color: var(--ink-muted); }
.stg-kv > span:last-child { font-weight: 600; color: var(--ink); }

/* ── Pills ── */
.stg-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.stg-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stg-pill-ok   { background: var(--success-soft, rgba(61,139,79,0.10)); color: var(--success, #3d8b4f); }
.stg-pill-ok::before   { background: var(--success, #3d8b4f); }
.stg-pill-warn { background: var(--warning-soft, rgba(148,107,28,0.12)); color: var(--warning, #946B1C); }
.stg-pill-warn::before { background: var(--warning, #946B1C); }
.stg-pill-err  { background: var(--danger-soft, rgba(192,57,43,0.10)); color: var(--danger, #c0392b); }
.stg-pill-err::before  { background: var(--danger, #c0392b); }
.stg-pill-off  { background: var(--bg-sunken); color: var(--ink-faint, #888); }
.stg-pill-off::before  { background: var(--ink-faint, #888); }
.stg-pill-check { background: var(--bg-sunken); color: var(--ink-muted); }
.stg-pill-check::before { background: var(--ink-muted); animation: stgPulse 1.2s infinite; }
@keyframes stgPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Banners ── */
.stg-banner {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.stg-banner-warn { background: var(--warning-soft, rgba(148,107,28,0.12)); color: var(--warning, #946B1C); border: 1px solid var(--warning, rgba(148,107,28,0.25)); }
.stg-banner-info { background: var(--accent-soft, rgba(60,59,110,0.12)); color: var(--accent); border: 1px solid var(--accent); }

/* ── Forms ── */
.stg-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.stg-form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stg-field { display: flex; flex-direction: column; gap: 4px; }
.stg-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stg-input {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-sunken, var(--bg));
  color: var(--ink);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.stg-input:focus { border-color: var(--accent); outline: none; }
.stg-input-sm { width: 65px; padding: 5px 8px; font-size: 0.82rem; }
.stg-textarea { resize: vertical; font-family: monospace; font-size: 0.82rem; }
.stg-input-row { display: flex; align-items: center; gap: 6px; }
.stg-unit { font-size: 0.78rem; color: var(--ink-muted); }
.stg-form-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.stg-status { font-size: 0.78rem; color: var(--ink-muted); }

/* ── Buttons ── */
.stg-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.stg-btn-primary { background: var(--accent); color: var(--ink-inverse, #fff); }
.stg-btn-primary:hover { filter: brightness(1.1); }
.stg-btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.stg-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.stg-btn-danger { background: var(--danger); color: #fff; }
.stg-btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.stg-link-btn {
  background: none; border: none; color: var(--accent); text-decoration: underline;
  cursor: pointer; font-size: inherit; font-family: inherit; padding: 0;
}

/* ── Toggle switch ── */
.stg-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.stg-switch input { opacity: 0; width: 0; height: 0; }
.stg-switch-track {
  position: absolute; inset: 0;
  background: var(--line-strong, var(--line));
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.stg-switch-track::after {
  content: '';
  position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-raised, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.stg-switch input:checked + .stg-switch-track { background: var(--accent); }
.stg-switch input:checked + .stg-switch-track::after { transform: translateX(16px); }
.stg-switch-label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-muted); }

/* ── Toggles list ── */
.stg-toggle-list { display: flex; flex-direction: column; }
.stg-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink);
}
.stg-toggle-row:last-child { border-bottom: none; }

/* ── Theme grid ── */
.stg-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 8px 0;
}
.stg-theme-card {
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.stg-theme-card:hover { transform: translateY(-2px); border-color: var(--ink-muted); }
.stg-theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.stg-theme-swatch { height: 48px; }
.stg-theme-name {
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  background: var(--bg-raised);
}

/* ── Font chips ── */
.stg-font-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.stg-font-chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.15s;
}
.stg-font-chip:hover { border-color: var(--ink-muted); }
.stg-font-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ── Module categories ── */
.stg-mod-cat {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}
.stg-mod-cat-icon { font-size: 0.9rem; }

/* ── Config key-value rows ── */
.stg-cfg-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 0 6px;
}
.stg-cfg-cat-n { font-weight: 500; opacity: 0.6; }
.stg-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.stg-cfg-row:hover { background: var(--bg-hover, var(--bg-sunken)); }
.stg-cfg-key { font-size: 0.82rem; font-weight: 600; font-family: monospace; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stg-cfg-val { font-size: 0.82rem; color: var(--ink-muted); text-align: right; flex-shrink: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-cfg-on { color: var(--success, #3d8b4f); }
.stg-cfg-off { color: var(--danger, #c0392b); }

/* ── Chunk grid ── */
.stg-chunk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.stg-chunk-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 6px;
  background: var(--bg-sunken);
  font-size: 0.84rem; font-weight: 600; color: var(--ink);
}

/* ── Quick actions ── */
.stg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.stg-action {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.stg-action:hover { border-color: var(--accent); color: var(--accent); }

/* ── Mobile: collapse sidebar to horizontal pills ── */
@media (max-width: 768px) {
  .stg-layout { grid-template-columns: 1fr; }
  .stg-sidebar {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 6px;
    gap: 4px;
    position: static;
  }
  .stg-sidebar::-webkit-scrollbar { display: none; }
  .stg-nav-item { border-radius: 8px; padding: 7px 12px; font-size: 0.76rem; }
  .stg-nav-label { display: none; }
  .stg-nav-icon { font-size: 1.1rem; width: auto; }
  .stg-main { padding: 12px 14px 24px; }
  .stg-form-grid { grid-template-columns: 1fr; }
  .stg-form-grid-3 { grid-template-columns: 1fr 1fr; }
  .stg-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stg-theme-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   FULL-PAGE EDITORS (the_life.js)
   ══════════════════════════════════════════════════════════════════════════════ */
.fp-editor { max-width: 900px; margin: 0 auto; }
.fp-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.fp-back {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.84rem;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.fp-back:hover { border-color: var(--accent); }
.fp-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fp-save-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fp-save-btn {
  background: var(--accent);
  color: var(--ink-inverse);
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.92rem;
  font-family: inherit;
  transition: opacity 0.15s;
}
.fp-save-btn:hover { opacity: 0.9; }
.fp-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fp-save-status { font-size: 0.82rem; color: var(--ink-muted); }
.fp-resolve-btn {
  background: none;
  border: 1px solid var(--success);
  color: var(--success);
  border-radius: 6px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.84rem;
  font-family: inherit;
}
.fp-resolve-btn:hover { background: var(--success); color: #fff; }
.fp-bottom-bar {
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
}
.fp-action-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s;
}
.fp-action-btn:hover { border-color: var(--accent); }
.fp-section { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fp-section > summary {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent);
  user-select: none;
}

/* ── Timeline ── */
.fp-timeline { padding-left: 20px; border-left: 2px solid var(--accent); }
.fp-timeline-item {
  position: relative;
  padding: 0 0 20px 16px;
}
.fp-timeline-dot {
  position: absolute;
  left: -27px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.fp-timeline-content {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.fp-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fp-timeline-type { font-weight: 700; font-size: 0.8rem; color: var(--ink); }
.fp-timeline-date { font-size: 0.72rem; color: var(--ink-muted); }
.fp-timeline-body { font-size: 0.82rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fp-timeline-fu { font-size: 0.72rem; color: var(--warn); font-weight: 600; margin-top: 6px; }

/* ── Prayer request display ── */
.fp-request-card {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.fp-request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.fp-request-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.fp-request-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fp-request-text {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.fp-request-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .fp-editor { padding: 0 4px; }
  .fp-topbar { gap: 8px; }
  .fp-save-bar { flex-direction: column; align-items: stretch; }
  .fp-save-btn { width: 100%; text-align: center; }
  .fp-timeline { padding-left: 14px; }
  .fp-timeline-dot { left: -21px; width: 10px; height: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MY FLOCK HUB — Pastoral command center
   ══════════════════════════════════════════════════════════════════════════════ */
.flock-hub { max-width: 1280px; margin: 0 auto; overflow-x: hidden; }

/* ── Dashboard strip (overview) ── */
.flock-dashboard-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.flock-dash-item { text-align: center; }
.flock-dash-val { font-size: 1.3rem; font-weight: 800; color: var(--accent); display: block; }
.flock-dash-label { font-size: 0.65rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.flock-section-heading {
  font-size: 0.82rem;
  color: var(--accent);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flock-section-ct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg);
}
.flock-see-more {
  text-align: center;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.flock-followup-row {
  background: var(--bg-raised);
  border: 1px solid var(--warn);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink);
}
.flock-followup-date { font-size: 0.72rem; color: var(--warn); font-weight: 600; }

/* ── KPI ribbon ── */
.flock-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.flock-kpi {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.flock-kpi:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.flock-kpi.kpi-alert { border-color: var(--danger); }
.flock-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.flock-kpi-label { font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* ── Tab bar ── */
.flock-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.flock-tab {
  padding: 10px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.flock-tab:hover { color: var(--ink); }
.flock-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.flock-tab .tab-ct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9px;
  margin-left: 6px;
  background: var(--ink-muted);
  color: var(--bg);
}
.flock-tab .tab-ct.ct-danger { background: var(--danger); }
.flock-tab .tab-ct.ct-warn   { background: var(--warn);   }

/* ── Panel containers ── */
.flock-panel { display: none; }
.flock-panel.active { display: block; }

/* ── Card grid / list ── */
.flock-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.flock-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.flock-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.flock-card.priority-high,
.flock-card.priority-critical { border-left: 3px solid var(--danger); }
.flock-card.priority-urgent   { border-left: 3px solid var(--warning); }
.flock-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.flock-card-name { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.flock-card-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.flock-card-body { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.5; }
.flock-card-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.flock-card-foot .assigned { color: var(--accent); font-weight: 600; }

/* ── Quick-action row ── */
.flock-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.flock-actions button {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--ink);
  transition: border-color 0.15s;
}
.flock-actions button:hover { border-color: var(--accent); }
.flock-actions button.primary { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }

/* ── Members list (overview tab) ── */
.flock-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.flock-member-row:hover { background: var(--bg-raised); }
.flock-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}
.flock-member-init {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.flock-member-info { flex: 1; min-width: 0; }
.flock-member-name { font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.flock-member-detail { font-size: 0.73rem; color: var(--ink-muted); }

/* ── Notes thread ── */
.flock-note {
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  margin-bottom: 10px;
  background: var(--bg-raised);
  border-radius: 0 8px 8px 0;
}
.flock-note-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-muted); margin-bottom: 4px; }
.flock-note-body { font-size: 0.82rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ── Empty state within panel ── */
.flock-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-muted);
  font-size: 0.85rem;
}
.flock-empty-icon { font-size: 2rem; opacity: 0.5; margin-bottom: 8px; }

@media (max-width: 600px) {
  .flock-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .flock-kpi { padding: 10px 8px; }
  .flock-kpi-val { font-size: 1.2rem; }
  .flock-card-grid { grid-template-columns: 1fr; }
  .flock-tab { padding: 8px 12px; font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 1rem 0;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABERNACLE ZONES — Spiritual Progression in Navigation
   Outer Court → Courts → Holy Place → Holy of Holies
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Zone accent bars on group labels ──────────── */
.nav-group[data-zone] .nav-group-label {
  position: relative;
  padding-left: 28px;
}
.nav-group[data-zone] .nav-group-label::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 2px;
  transition: background 0.3s;
}

/* Gates — warm gold (entry, welcome) */
.nav-group[data-zone="gates"] .nav-group-label::before {
  background: var(--gold, #d4b870);
}
.nav-group[data-zone="gates"] .nav-group-label {
  color: var(--gold, #d4b870);
}

/* Courts — sage mint (service, community) */
.nav-group[data-zone="courts"] .nav-group-label::before {
  background: var(--mint, #8cc5a2);
}
.nav-group[data-zone="courts"] .nav-group-label {
  color: var(--mint, #8cc5a2);
}

/* Holy Place — soft lilac (growth, formation) */
.nav-group[data-zone="holy-place"] .nav-group-label::before {
  background: var(--lilac, #b49bdb);
}
.nav-group[data-zone="holy-place"] .nav-group-label {
  color: var(--lilac, #b49bdb);
}

/* Holy of Holies — luminous gold gradient (encounter, presence) */
.nav-group[data-zone="holies"] .nav-group-label::before {
  background: linear-gradient(180deg, var(--gold, #d4b870), var(--lilac, #b49bdb));
  width: 5px;
}
.nav-group[data-zone="holies"] .nav-group-label {
  color: var(--gold, #d4b870);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.nav-group[data-zone="holies"] .nav-item {
  font-weight: 600;
  color: var(--gold, #d4b870);
}
.nav-group[data-zone="holies"] .nav-item:hover {
  background: var(--gold-soft, rgba(212,184,112,0.08));
  border-left-color: var(--gold, #d4b870);
}

/* ── Threshold dividers between spiritual zones ──────────── */
.nav-threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px 4px;
  margin: 2px 0;
  user-select: none;
}
.nav-threshold::before,
.nav-threshold::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  opacity: 0.5;
}
.nav-threshold-glyph {
  font-size: 0.6rem;
  color: var(--ink-faint);
  opacity: 0.6;
  letter-spacing: 0.3em;
}

/* ── Admin / personal zones — muted, recessive ──────────── */
.nav-group[data-zone="personal"] .nav-group-label,
.nav-group[data-zone="admin"] .nav-group-label {
  color: var(--ink-faint);
  font-size: 0.65rem;
}
.nav-group[data-zone="personal"] .nav-item,
.nav-group[data-zone="admin"] .nav-item {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* ── Dashboard zone grouping (mirrors sidebar Tabernacle pattern) ── */
.dash-zone-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold, #d4b870);
  padding: 0 0 6px;
  margin-top: 4px;
}
.dash-threshold {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 8px;
  user-select: none;
}
.dash-threshold::before,
.dash-threshold::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  opacity: 0.5;
}
.dash-threshold-glyph {
  font-size: 0.6rem;
  color: var(--ink-faint);
  opacity: 0.6;
  letter-spacing: 0.3em;
}


/* ============================================================
   FlockOS EXTRAS — Classes from the_fold.js, the_life.js, etc.
   ============================================================ */

/* === Classes found in the_fold.js not present in fine_linen.js (for migration) ===
	- fold-tab
	- fold-row
	- spinner
*/

/* === Classes found in the_life.js, the_harvest.js, the_scrolls.js, the_way.js, the_shepherd.js, the_tabernacle.js not present in fine_linen.js (for migration) ===
fp-section
fp-editor
fp-topbar
fp-back
fp-title
fp-save-bar
fp-save-btn
fp-save-status
fp-resolve-btn
fp-field
fp-action-btn
fp-timeline
fp-timeline-item
fp-timeline-dot
fp-timeline-content
fp-timeline-head
fp-timeline-type
fp-timeline-date
fp-timeline-body
fp-timeline-fu
flock-empty
flock-empty-icon
fp-bottom-bar
fp-closure-chk
fp-request-card
fp-request-header
fp-request-name
fp-request-meta
fp-request-text
fp-request-contact
browse-item
tw-player-grid
gene-stat-row
gene-stat-card
gene-stat-num
gene-stat-label
lex-testament-tab
lex-count-badge
lex-nt
lex-ot
browse-search
browse-search-icon
browse-search-input
letter-index
letter-index-btn
gene-fade-in
gene-hero
gene-hero-name
gene-hero-badges
gene-hero-badge
gene-hero-badge-accent
gene-hero-badge-gold
gene-section
gene-section-gold
gene-section-lilac
gene-section-mint
gene-section-peach
gene-section-label
lex-stat-bar
lex-stat-bar-fill
gene-ref-pills
gene-ref-pill
gene-list
gene-list-scroll
gene-letter-head
gene-item
gene-item-name
gene-item-title
gene-detail
gene-detail-empty
coun-hero
coun-hero-inner
coun-hero-title
coun-hero-sub
coun-grid
coun-card
coun-card-head
coun-card-icon
coun-card-title
coun-card-chevron
coun-card-body
coun-definition
coun-section
coun-section-label
coun-verse
coun-verse-ref
coun-verse-text
coun-steps
coun-step
coun-step-num
coun-step-text
rpt-header
rpt-church
rpt-sub
rpt-footer
rpt-noprint
rpt-stats
rpt-stat
rpt-stat-label
rpt-stat-value
pill
gene-family-link
shep-row
shep-grp-chk
shep-perm-chk
pp-section
data-table
spinner
spin
loading
alert
empty-state
icon
badge
badge-info
badge-warn
badge-danger
badge-success
badge-accent
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 7)
hero
subtitle
verse
container
fab-menu
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 6)
-----------------------------------------------------
antialiased
bg-white
border-b
border-stone-200
sticky
top-0
z-50
max-w-6xl
mx-auto
px-4
sm:px-6
lg:px-8
flex
justify-between
h-16
items-center
flex-shrink-0
text-2xl
text-teal-800
mr-2
font-bold
text-xl
tracking-tight
text-stone-800
serif
text-sm
text-teal-700
hover:text-teal-900
font-semibold
bg-stone-900
text-stone-50
py-16
px-4
border-b-4
border-teal-800
max-w-4xl
mb-4
leading-tight
text-xl
md:text-5xl
md:text-2xl
text-stone-300
mb-6
italic
text-base
leading-relaxed
text-stone-400
max-w-3xl
main
max-w-5xl
py-12
space-y-24
mb-8
border-l-4
pl-4
text-3xl
text-stone-900
mb-2
text-stone-600
bg-white
rounded-xl
shadow-sm
border
overflow-hidden
grid
grid-cols-2
text-center
font-bold
text-lg
border-b
cursor-pointer
py-4
bg-teal-50
text-teal-900
border-b-2
transition-colors
border-transparent
hover:bg-stone-100
p-8
min-h-[300px]
fade-in
hidden
mb-4
bg-stone-50
p-4
rounded
border-stone-100
font-bold
mb-2
space-y-1
text-stone-700
space-y-3
text-sm
md:grid-cols-2
gap-6
bg-stone-900
text-stone-100
rounded-2xl
p-8
shadow-lg
border-teal-600
pl-4
text-white
max-w-3xl
grid
md:grid-cols-3
gap-8
flex-col
space-y-3
drift-btn
w-full
text-left
px-6
py-4
rounded-lg
bg-teal-800
text-white
transition-all
shadow-md
bg-stone-800
text-stone-400
hover:bg-stone-700
md:col-span-2
bg-stone-800
rounded-xl
p-6
border-stone-700
relative
overflow-hidden
fade-in
text-2xl
mb-6
space-y-6
tracking-wider
text-stone-400
border-l-2
border-stone-500
pl-4
text-stone-200
text-amber-400
bg-amber-900/30
rounded
border-amber-800/50
text-amber-100
bg-white
p-6
rounded-xl
shadow-sm
border-stone-200
text-center
font-bold
text-stone-700
mb-4
uppercase
tracking-wide
text-sm
chart-container
text-xs
mt-4
italic
space-y-6
bg-teal-50
border-l-4
border-teal-600
text-teal-900
text-lg
mb-2
text-sm
text-stone-700
mb-2
bg-amber-50
border-amber-600
text-amber-900
bg-stone-900
text-white
text-amber-400
serif
leading-relaxed
text-stone-300
mb-24
bg-white
rounded-xl
shadow-lg
border-stone-200
overflow-hidden
bg-stone-100
p-6
border-b
flex
justify-between
items-center
text-stone-800
text-xs
bg-stone-300
text-stone-700
py-1
px-2
rounded
font-bold
tracking-wide
uppercase
p-8
quiz-container
w-full
bg-stone-200
rounded-full
h-2
mb-8
bg-teal-600
transition-all
duration-300
min-h-[200px]
text-xl
mb-6
space-y-3
hidden
text-center
fade-in
inline-block
bg-teal-50
rounded-full
mb-4
text-4xl
max-w-lg
mx-auto
bg-stone-50
border-stone-200
rounded-lg
p-6
text-left
mb-6
max-w-2xl
mx-auto
font-bold
mb-2
border-b
pb-2
list-disc
pl-5
space-y-2
text-sm
text-stone-700
px-6
py-2
border-stone-300
hover:bg-stone-50
transition-colors
text-stone-600
bg-stone-900
text-stone-500
py-8
text-center
text-sm
border-t-4
border-teal-800
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 5)
-----------------------------------------------------
sidebar
topbar
topbar-brand
topbar-toggle
topbar-user
name
role
logout-btn
notif-wrap
role-badge
notif-count
notif-panel
notif-panel-hdr
notif-panel-title
notif-mark-all
notif-panel-body
notif-panel-ftr
notif-empty
notif-item
notif-item-icon
notif-item-body
notif-item-subj
notif-item-text
notif-item-time
notif-item-dismiss
sidebar
nav-group
nav-group-label
nav-item
nav-threshold
nav-threshold-glyph
main
page-header
card-grid
card
card-title
card-desc
card-gold
module-view
active
empty-state
icon
data-table
badge
badge-success
badge-warn
badge-danger
badge-info
alert
alert-info
loading
spin
toggle-switch
slider
toggle-row
toggle-row-label
splash-bg
splash-bar-track
splash-bar-fill
ptr-indicator
retry-btn
fl-btn
fl-btn-lg
fl-card
fl-card-raised
fl-input
fl-filter
fl-lbl
fl-link-sm
flockchat-active
flockchat-frame
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 4)
-----------------------------------------------------
antialiased
bg-white
border-b
border-stone-200
sticky
top-0
z-50
max-w-6xl
mx-auto
px-4
sm:px-6
lg:px-8
flex
justify-between
h-16
items-center
flex-shrink-0
text-2xl
text-teal-800
mr-2
font-bold
text-xl
tracking-tight
text-stone-800
serif
text-sm
text-teal-700
hover:text-teal-900
font-semibold
main
py-8
text-center
mb-12
fade-in
md:text-5xl
text-4xl
mb-4
text-lg
text-stone-600
max-w-3xl
mt-3
italic
text-stone-400
section
bg-white
rounded-2xl
shadow-sm
border
p-6
md:p-8
mb-12
mb-6
text-2xl
font-bold
text-stone-800
mb-2
chart-container
max-w-4xl
mb-8
text-3xl
font-bold
text-stone-800
max-w-2xl
flex-wrap
justify-center
gap-2
md:gap-4
mb-8
content-display
rounded-2xl
shadow-lg
border
overflow-hidden
hidden
transition-all
duration-500
grid
grid-cols-1
lg:grid-cols-2
gap-0
p-6
md:p-8
lg:p-10
border-b
lg:border-b-0
lg:border-r
bg-stone-50
flex
items-center
justify-between
mb-4
text-3xl
font-bold
text-teal-800
serif
inline-block
bg-white
border
border-stone-300
text-stone-600
text-xs
px-3
py-1
rounded-full
uppercase
tracking-wider
font-semibold
text-stone-700
italic
mb-8
border-l-4
border-teal-600
pl-4
space-y-6
text-lg
font-bold
text-stone-900
mb-2
flex
items-center
text-teal-600
mr-2
text-xl
leading-relaxed
shadow-lg
flex-col
justify-center
items-center
text-center
font-semibold
text-stone-500
tracking-widest
text-sm
mb-4
radar-container
max-w-xs
mt-4
py-12
border-2
border-dashed
rounded-xl
block
footer
bg-stone-900
text-stone-400
py-8
text-center
text-sm
mt-2
text-stone-600
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 3)
-----------------------------------------------------
hero
subtitle
verse
container
card-grid
card
card-icon
steps
highlight
tag
surface
muted
accent
gold
bg
border
text
footer
active
border-bottom
max-width
min-width
margin-auto
padding
rounded
shadow
display-grid
display-flex
align-items-center
justify-content-center
gap
font-size
font-style
font-weight
text-align-center
text-align-left
text-align-right
text-decoration-none
text-decoration-underline
list-style-none
list-style-disc
list-style-decimal
overflow-hidden
overflow-auto
overflow-scroll
overflow-x-auto
overflow-y-auto
border-radius
border-solid
border-dashed
border-width
border-color
border-t
border-b
border-l
border-r
border-x
border-y
border-opacity
bg-gradient
bg-white
bg-surface
bg-muted
bg-accent
bg-gold
bg-card
bg-steps
bg-highlight
bg-footer
text-white
text-muted
text-accent
text-gold
text-card
text-steps
text-highlight
text-footer
py-1
py-2
py-3
py-4
py-5
py-6
py-8
py-10
py-12
px-1
px-2
px-3
px-4
px-5
px-6
px-8
px-10
px-12
mx-auto
my-0
my-1
my-2
my-3
my-4
my-5
my-6
my-8
my-10
my-12
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
mt-8
mt-10
mt-12
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
mb-8
mb-10
mb-12
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
ml-6
ml-8
ml-10
ml-12
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
mr-6
mr-8
mr-10
mr-12
rounded-8
rounded-12
rounded-24
rounded-full
border-1
border-2
border-4
border-8
border-solid
border-dashed
border-double
border-none
border-t-1
border-b-1
border-l-1
border-r-1
border-x-1
border-y-1
border-t-2
border-b-2
border-l-2
border-r-2
border-x-2
border-y-2
border-t-4
border-b-4
border-l-4
border-r-4
border-x-4
border-y-4
border-t-8
border-b-8
border-l-8
border-r-8
border-x-8
border-y-8
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 2)
-----------------------------------------------------
min-h-screen
flex
flex-col
selection:bg-indigo-200
selection:text-indigo-900
bg-slate-900
text-white
pt-10
pb-12
px-6
border-b-[6px]
border-indigo-500
relative
overflow-hidden
absolute
top-0
right-0
opacity-10
text-[15rem]
leading-none
pointer-events-none
transform
translate-x-1/4
-translate-y-1/4
max-w-7xl
mx-auto
z-10
inline-block
bg-indigo-500
text-xs
font-bold
px-3
py-1
rounded-full
uppercase
tracking-widest
mb-4
text-4xl
md:text-6xl
font-heading
font-extrabold
tracking-tight
text-indigo-200
text-lg
md:text-xl
max-w-3xl
font-light
leading-relaxed
flex-grow
w-full
py-8
md:py-12
lg:flex-row
gap-8
lg:w-1/4
flex-shrink-0
bg-white
p-5
rounded-2xl
shadow-sm
border
border-slate-200
sticky
top-8
max-h-[85vh]
overflow-y-auto
sidebar-scroll
text-xs
font-extrabold
text-slate-400
px-2
space-y-1
nav-btn
active
bg-slate-50
text-indigo-700
hover:bg-indigo-50
lg:w-3/4
p-6
md:p-10
min-h-[70vh]
content-section
active
mb-8
text-indigo-600
tracking-wider
text-sm
text-slate-800
mt-1
text-slate-600
mt-4
font-serif
text-amber-100
text-amber-800
rounded
text-sm
border-slate-200
flashcard-grid
flip-card
flipped
flip-card-inner
flip-card-front
flip-card-back
text-indigo-700
leading-tight
bg-blue-100
text-blue-800
bg-slate-800
text-white
rounded-xl
border-l-4
border-indigo-500
text-slate-300
font-semibold
bg-amber-50
border-amber-200
text-slate-500
text-slate-700
mt-3
bg-blue-50
border-blue-200
bg-white
p-3
rounded
mt-4
border-blue-100
text-slate-700
font-bold
border-slate-100
border-t
my-4
space-y-6
shadow-sm
md:flex-row
gap-6
items-center
bg-indigo-100
text-indigo-700
w-16
h-16
rounded-full
flex-shrink-0
font-bold
bg-emerald-100
text-emerald-700
bg-rose-100
text-rose-700
border-2
border-red-200
p-5
rounded-xl
text-red-700
text-green-700
border-green-200
md:p-8
border-slate-400
pl-6
py-2
text-amber-400
text-2xl
*/
/*
FlockOS Style Audit: Utility & Custom Classes (Batch 1)
-----------------------------------------------------
antialiased
bg-white
border-b
border-stone-200
sticky
top-0
z-50
max-w-6xl
mx-auto
px-4
sm:px-6
lg:px-8
flex
justify-between
h-16
items-center
flex-shrink-0
text-2xl
text-teal-800
mr-2
font-bold
text-xl
tracking-tight
text-stone-800
serif
text-sm
text-teal-700
hover:text-teal-900
font-semibold
bg-stone-900
text-stone-50
py-16
border-b-4
border-teal-800
max-w-4xl
mb-4
leading-tight
text-xl
md:text-2xl
text-stone-300
mb-6
italic
text-base
leading-relaxed
text-stone-400
max-w-3xl
main
max-w-5xl
py-12
space-y-24
mb-8
border-l-4
pl-4
text-3xl
mb-2
text-stone-600
rounded-xl
shadow-sm
border
overflow-hidden
grid
grid-cols-2
text-center
text-lg
cursor-pointer
py-4
bg-teal-50
text-teal-900
border-b-2
transition-colors
bg-stone-50
text-stone-500
border-transparent
hover:bg-stone-100
p-8
min-h-[300px]
fade-in
mb-6
md:grid-cols-2
gap-6
p-4
rounded
border-stone-100
list-disc
pl-5
space-y-1
text-stone-700
space-y-3
text-sm
hidden
font-bold
text-stone-900
leading-relaxed
md:col-span-2
rounded-xl
p-6
border-stone-700
relative
overflow-hidden
bg-stone-800
text-white
shadow-lg
gap-8
flex-col
drift-btn
w-full
text-left
rounded-lg
shadow-md
hover:bg-stone-700
transition-all
space-y-6
bg-teal-50
border-l-4
border-teal-600
text-teal-900
text-lg
bg-amber-50
border-amber-600
text-amber-900
bg-stone-900
text-amber-400
serif
text-stone-300
bg-white
p-6
rounded-lg
border-l-4
border-amber-600
text-amber-900
text-lg
mb-2
text-stone-700
text-sm
text-center
tracking-wide
uppercase
bg-stone-200
rounded-full
h-2
mb-8
bg-teal-600
transition-all
duration-300
min-h-[200px]
mb-6
space-y-3
inline-block
rounded-full
mb-4
max-w-lg
mx-auto
bg-stone-50
border-stone-200
rounded-lg
pb-2
space-y-2
hover:bg-stone-50
transition-colors
border-t-4
text-stone-500
py-8
text-sm
border-t-4
border-teal-800
*/




FlockChat CSS Themes
/* ═══════════════════════════════════════════════════════════════════════
 *  the_word.css  —  FlockChat Styles (America theme)
 *  "The Word" = messaging that connects the Flock.
 *  Self-contained — all variables, layout & components defined here.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset (FlockChat-scoped) ─────────────────────────────────────────────
   These global element rules used to be unscoped, which broke scrolling and
   overrode themes on FlockOS / ATOG / About pages. They are now confined to
   <body class="flockchat-app">. All FlockChat HTML must include that class. */
body.flockchat-app,
body.flockchat-app *,
body.flockchat-app *::before,
body.flockchat-app *::after { box-sizing: border-box; }
/* Margin/padding reset (matches original FlockChat the_word.css * { margin:0; padding:0 }
   reset). Uses :where() so specificity stays at 0,0,0 and any class-set
   margin/padding (e.g. .auth-logo margin-bottom, .auth-card padding) wins. */
:where(body.flockchat-app *,
       body.flockchat-app *::before,
       body.flockchat-app *::after) { margin: 0; padding: 0; }
body.flockchat-app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
}
body.flockchat-app.auth-open {
  overflow: auto;
  height: auto;
}
/* FlockChat-only tokens + America-theme fallbacks.
   Ensures correct first-paint colors before fine_linen.js applies data-theme.
   Scoped so they don't override theme tokens on FlockOS/ATOG pages. */
body.flockchat-app {
  --bg:            #f7f8fb;
  --bg-raised:     #ffffff;
  --bg-sunken:     #edf0f6;
  --bg-hover:      #f0f3f9;
  --bg-active:     rgba(60,59,110,0.12);
  --ink:           #1b264f;
  --ink-muted:     #4a5578;
  --ink-faint:     #8890a5;
  --accent:        #3c3b6e;
  --accent-soft:   rgba(60,59,110,0.12);
  --gold:          #c5a44e;
  --gold-soft:     rgba(197,164,78,0.12);
  --danger:        #b22234;
  --danger-soft:   rgba(178,34,52,0.10);
  --success:       #3d7a4f;
  --line:          #d4d9e6;
  --line-strong:   #bec5d6;
  --shadow-sm:     0 1px 3px rgba(27,38,79,0.06);
  --shadow-md:     0 4px 12px rgba(27,38,79,0.06);
  --shadow-lg:     0 8px 24px rgba(27,38,79,0.08);
  --sidebar-w:     240px;
  --topbar-h:      52px;
  --online: #2ea043;
  --away:   #d29922;
  --dnd:    #cf222e;
}
body.flockchat-app button { font-family: inherit; cursor: pointer; }
body.flockchat-app input,
body.flockchat-app textarea { font-family: inherit; }
body.flockchat-app a { color: var(--accent); text-decoration: none; }
body.flockchat-app a:hover { text-decoration: underline; }
body.flockchat-app ::-webkit-scrollbar { width: 5px; height: 5px; }
body.flockchat-app ::-webkit-scrollbar-track { background: transparent; }
body.flockchat-app ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* ── Auth Screen ──────────────────────────────────────────────────────── */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 16px max(40px, env(safe-area-inset-bottom));
  background: var(--bg);
  box-sizing: border-box;
}
@media (max-width: 640px) {
  /* Mobile: top-align so the form is reachable when the keyboard
     opens; add generous bottom padding so the password field can
     scroll above the on-screen keyboard. */
  #auth-screen {
    align-items: flex-start;
    padding: 24px 16px max(160px, env(safe-area-inset-bottom) + 120px);
  }
}
.auth-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px 36px;
  width: 380px;
  max-width: 100%;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.auth-logo p {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 4px;
}
.auth-field {
  margin-bottom: 14px;
}
.auth-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  background: var(--bg-sunken);
  border: 1.5px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(27,38,79,0.03);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.auth-field input:focus { border-color: var(--accent); }
.auth-field input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.auth-btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 6px;
  transition: opacity 0.2s;
}
.auth-btn:hover { opacity: 0.88; }
.auth-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.auth-toggle {
  text-align: center;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.auth-toggle a { color: var(--accent); cursor: pointer; }
.auth-suite-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-bottom: 20px;
  text-decoration: none;
  transition: color 0.2s;
}
.auth-suite-link:hover { color: var(--accent); text-decoration: none; }
.auth-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--danger);
  margin-bottom: 14px;
  display: none;
}

/* ── App Shell ────────────────────────────────────────────────────────── */
#app {
  display: none;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
}

/* ── Top Bar ──────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 50;
}
.topbar-brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 0;
}
.topbar-brand .wordmark {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.topbar-brand .build-tag {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 400;
  margin-left: 8px;
}
#btn-sidebar-toggle {
  display: none;
}
.topbar-context {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-channel-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.topbar-channel-name .sigil {
  color: var(--ink-muted);
  margin-right: 2px;
}
.topbar-channel-desc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  border-left: 1px solid var(--line);
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar-icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-muted);
  padding: 6px 10px;
  font-size: 0.88rem;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.topbar-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--ink);
  border-color: var(--line);
}
.topbar-icon-btn.active { color: var(--accent); }
.suite-link {
  color: var(--ink-muted);
  font-size: 0.8rem;
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: all 0.2s;
}
.suite-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.user-pill:hover { border-color: var(--accent); }
.user-pill .avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.user-pill .uname { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.presence-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--online);
  border: 2px solid var(--bg-raised);
  margin-left: -4px;
  margin-bottom: -6px;
  position: relative;
  top: 8px;
  left: -2px;
}

/* ── Body Layout ──────────────────────────────────────────────────────── */
.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-raised);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-search {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line);
}
.sidebar-search input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 0.86rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.sidebar-search input::placeholder { color: var(--ink-faint); }
.sidebar-search input:focus { border-color: var(--accent); }
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 4px;
}
.sidebar-section-header .label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.sidebar-add-btn {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}
.sidebar-add-btn:hover { color: var(--accent); }
.sidebar-item {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  margin: 1px 6px;
  cursor: pointer;
  transition: background 0.12s;
  gap: 6px;
  position: relative;
}
.sidebar-item:hover { background: var(--bg-hover); }
.sidebar-item.active { background: var(--bg-active); }
.sidebar-item .sigil {
  font-size: 0.88rem;
  color: var(--ink-muted);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-item .ch-name {
  font-size: 0.95rem;
  color: var(--ink-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-item.active .ch-name { color: var(--ink); font-weight: 500; }
.sidebar-item .unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  text-align: center;
  line-height: 17px;
  padding: 0 4px;
  display: none;
}
.sidebar-item.has-unread .unread-badge { display: block; }
.sidebar-item.has-unread .ch-name { color: var(--ink); font-weight: 600; }
.dm-presence {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
  border: 2px solid var(--bg-raised);
}
.dm-presence.online  { background: var(--online); }
.dm-presence.away    { background: var(--away); }
.dm-presence.dnd     { background: var(--dnd); }

/* ── Message Thread ────────────────────────────────────────────────────── */
.thread-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 8px;
  scroll-behavior: smooth;
}
.day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  margin: 4px 0;
}
.day-divider .line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.day-divider .label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.msg-row {
  display: flex;
  gap: 10px;
  padding: 3px 20px;
  position: relative;
  border-radius: 4px;
  transition: background 0.1s;
}
.msg-row:hover { background: var(--bg-hover); }
.msg-row:hover .msg-actions { opacity: 1; }
.msg-row.grouped { padding-top: 1px; }
.msg-row.grouped .msg-avatar { visibility: hidden; }
.msg-row.grouped .msg-meta { display: none; }
.msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  user-select: none;
}
.msg-body { flex: 1; min-width: 0; }
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-author {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
}
.msg-time {
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.msg-text {
  font-size: 0.94rem;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
}
.msg-text .mention {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 0 3px;
}
.msg-text .mention.self {
  color: var(--gold);
  background: var(--gold-soft);
}
.msg-edited {
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: 4px;
}
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.reaction-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-active);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.reaction-chip:hover,
.reaction-chip.reacted { border-color: var(--accent); background: var(--accent-soft); }
.reaction-chip .emoji { font-size: 0.9rem; }
.reaction-chip .count { color: var(--ink-muted); font-size: 0.75rem; font-weight: 600; }
.msg-actions {
  position: absolute;
  top: -14px;
  right: 20px;
  display: flex;
  gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.msg-action-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 0.88rem;
  padding: 4px 7px;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}
.msg-action-btn:hover { background: var(--bg-hover); color: var(--ink); }

/* ── Typing Indicator ──────────────────────────────────────────────────── */
.typing-indicator {
  padding: 0 20px 6px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  min-height: 22px;
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.typing-dots span {
  width: 5px; height: 5px;
  background: var(--ink-muted);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer ──────────────────────────────────────────────────────────── */
.composer {
  border-top: 1px solid var(--line);
  padding: 10px 16px 12px;
  background: var(--bg);
}
.composer-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  transition: border-color 0.2s;
}
.composer-inner:focus-within { border-color: var(--accent); }
.composer-toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
}
.composer-tool {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 5px;
  transition: background 0.12s, color 0.12s;
}
.composer-tool:hover { background: var(--bg-hover); color: var(--ink); }
textarea#composer-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 0.88rem;
  resize: none;
  outline: none;
  min-height: 20px;
  max-height: 140px;
  line-height: 1.5;
  padding: 2px 4px;
}
textarea#composer-input::placeholder { color: var(--ink-faint); }
.send-btn {
  background: var(--accent, #3c3b6e);
  color: var(--ink-inverse, #fff);
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.send-btn:hover { opacity: 0.85; }
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Details Pane ──────────────────────────────────────────────────────── */
.details-pane {
  width: var(--details-w);
  background: var(--bg-raised);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s;
}
.details-pane.collapsed { width: 0; border-left: none; }
.details-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.details-close {
  background: none; border: none;
  color: var(--ink-muted); font-size: 1rem;
  padding: 2px 4px; border-radius: 4px;
  transition: color 0.15s;
}
.details-close:hover { color: var(--ink); }
.details-scroll {
  flex: 1; overflow-y: auto; padding: 12px;
}
.details-section {
  margin-bottom: 20px;
}
.details-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.member-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.member-name {
  font-size: 0.83rem;
  color: var(--ink);
}
.member-role {
  font-size: 0.68rem;
  color: var(--ink-muted);
  background: var(--bg-active);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: auto;
  text-transform: capitalize;
}

/* ── Empty State ───────────────────────────────────────────────────────── */
.empty-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-faint);
  padding: 40px;
  text-align: center;
}
.empty-thread .icon { font-size: 3rem; }
.empty-thread h3 { font-size: 1rem; color: var(--ink-muted); }
.empty-thread p { font-size: 0.82rem; }

/* ── No Channel Selected ────────────────────────────────────────────────── */
#no-channel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-faint);
}
#no-channel .icon { font-size: 3.5rem; }
#no-channel h2 { font-size: 1.1rem; color: var(--ink-muted); }
#no-channel p { font-size: 0.83rem; }

/* ── Modals ────────────────────────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(27,38,79,0.35);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 28px 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
}
.modal-card h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
}
.modal-field {
  margin-bottom: 12px;
}
.modal-field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 5px;
}
.modal-field input,
.modal-field textarea,
.modal-field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 0.87rem;
  outline: none;
  transition: border-color 0.2s;
}
.modal-field input:focus,
.modal-field textarea:focus { border-color: var(--accent); }
.modal-field select { cursor: pointer; }
.modal-field select option { background: var(--bg-raised); }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}
.user-mgmt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.user-mgmt-row:last-child { border-bottom: none; }
.user-mgmt-info { flex: 1; min-width: 0; }
.user-mgmt-name { font-weight: 600; font-size: 0.88rem; }
.user-mgmt-email { font-size: 0.78rem; color: var(--ink-muted); }
.user-mgmt-role { font-size: 0.8rem; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.user-mgmt-remove { background: none; border: none; color: var(--danger); font-size: 1rem;
  cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.user-mgmt-remove:hover { background: var(--danger-soft); }
.btn-secondary {
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-muted);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: 7px;
  color: #fff;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }

/* ── Emoji Picker ──────────────────────────────────────────────────────── */
#emoji-picker {
  display: none;
  position: fixed;
  z-index: 300;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow-md);
  width: 260px;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
}
.emoji-btn:hover { background: var(--bg-hover); }

/* ── Toast Notifications ────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.83rem;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  animation: slideInToast 0.25s ease;
  max-width: 300px;
}
.toast.success { border-color: var(--success); color: var(--success); }
.toast.error   { border-color: var(--danger);  color: var(--danger); }
@keyframes slideInToast {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── User Menu ──────────────────────────────────────────────────────────── */
.user-menu-item {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--ink); font-size: 0.84rem;
  text-align: left; padding: 7px 12px;
  border-radius: 6px; cursor: pointer;
  transition: background 0.12s;
}
.user-menu-item:hover { background: var(--bg-hover); }

/* ── Admin User Table ───────────────────────────────────────────────────── */
.admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: none; }
.admin-row .member-avatar { flex-shrink: 0; }
.admin-row .admin-info { flex: 1; min-width: 0; }
.admin-row .admin-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.admin-row .admin-email { font-size: 0.75rem; color: var(--ink-muted); }
.admin-row select {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; color: var(--ink);
  font-size: 0.78rem; padding: 4px 8px; cursor: pointer;
  outline: none;
}
.admin-row select option { background: var(--bg-raised); }
.admin-row .btn-remove {
  background: none; border: 1px solid transparent;
  border-radius: 6px; color: var(--ink-faint);
  font-size: 0.8rem; padding: 4px 8px; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.admin-row .btn-remove:hover { border-color: var(--danger); color: var(--danger); }

/* ── Admin Tabs ─────────────────────────────────────────────────────────── */
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-muted); font-size: 0.85rem; font-weight: 600;
  padding: 6px 14px; cursor: pointer; transition: all 0.15s;
}
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab:hover:not(.active) { color: var(--ink); }

/* ── Unread dot on sidebar ──────────────────────────────────────────────── */
.sidebar-item.has-unread .ch-name { font-weight: 700; color: var(--ink); }

/* ── Join banner (non-member public channels) ───────────────────────────── */
.join-banner {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.join-banner p { flex: 1; font-size: 0.85rem; color: var(--ink-muted); }
.join-btn {
  background: var(--accent); border: none; border-radius: 7px;
  color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 8px 18px; cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.join-btn:hover { opacity: 0.85; }

/* ── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Loading overlay ────────────────────────────────────────────────────── */
#loading-overlay {
  display: flex;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#loading-overlay .wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}
#loading-overlay p { font-size: 0.83rem; color: var(--ink-muted); }

/* Hamburger hidden by default; shown by mobile @media */
#btn-sidebar-toggle { display: none; }

/* ── FlockChat Polish ────────────────────────────────────────────────────
   Goal: a refined, professional chat surface. One quiet bubble style,
   clean typography, restrained color, deliberate use of accent only
   on identity (wordmark, active channel, mentions, focus).
   Inspired by Slack / Linear / Notion — restraint over decoration. */

/* Topbar: clean white-raised surface, single hairline rule, brand
   wordmark in accent (no rainbow gradient). */
body.flockchat-app .topbar {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
body.flockchat-app .topbar-brand .wordmark {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.flockchat-app .topbar-brand .build-tag {
  color: var(--ink-faint);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 8px;
}
body.flockchat-app .topbar-channel-name { color: var(--ink); font-weight: 600; }
body.flockchat-app .topbar-channel-name .sigil { color: var(--ink-faint); }

/* Sidebar: section labels muted but legible; channel sigils muted at
   rest, accent on active. No gradient row backgrounds. */
body.flockchat-app .sidebar-section-header .label {
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  text-transform: uppercase;
}
body.flockchat-app .sidebar-item .sigil { color: var(--ink-faint); }
body.flockchat-app .sidebar-item.active {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
body.flockchat-app .sidebar-item.active .sigil,
body.flockchat-app .sidebar-item.active .ch-name { color: var(--accent); }
body.flockchat-app .sidebar-item.has-unread .ch-name { color: var(--ink); font-weight: 600; }

/* Avatars: solid color from a 6-step palette, white initials.
   Color is assigned via :nth-of-type so distinct speakers in the
   visible thread get distinct identities — no rainbow chaos. */
body.flockchat-app .msg-avatar,
body.flockchat-app .member-avatar,
body.flockchat-app .user-pill .avatar {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  text-shadow: none;
}
body.flockchat-app .msg-row:nth-of-type(6n+1) .msg-avatar { background: var(--accent); }
body.flockchat-app .msg-row:nth-of-type(6n+2) .msg-avatar { background: var(--lilac); }
body.flockchat-app .msg-row:nth-of-type(6n+3) .msg-avatar { background: var(--mint); }
body.flockchat-app .msg-row:nth-of-type(6n+4) .msg-avatar { background: var(--sky); }
body.flockchat-app .msg-row:nth-of-type(6n+5) .msg-avatar { background: var(--gold); }
body.flockchat-app .msg-row:nth-of-type(6n)   .msg-avatar { background: var(--rose, #b07c95); }

/* Message rows: generous breathing room, hover tint only (no pills,
   no per-row colored backgrounds). */
body.flockchat-app .message-list { padding: 20px 0 12px; }
body.flockchat-app .msg-row {
  padding: 6px 24px;
  border-radius: 0;
  transition: background 0.12s;
}
body.flockchat-app .msg-row:hover { background: var(--bg-hover); }
body.flockchat-app .msg-row.grouped { padding-top: 1px; padding-bottom: 1px; }

/* Author + timestamp typography */
body.flockchat-app .msg-author {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
body.flockchat-app .msg-time {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 500;
}
body.flockchat-app .msg-text {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Day divider: thin centered hairline with small label */
body.flockchat-app .day-divider { padding: 14px 24px 10px; }
body.flockchat-app .day-divider .line { background: var(--line); }
body.flockchat-app .day-divider .label {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Mentions: subtle accent chip; self-mention promoted to gold */
body.flockchat-app .msg-text .mention {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}
body.flockchat-app .msg-text .mention.self {
  color: var(--gold);
  background: var(--gold-soft);
}

/* Reaction chips: neutral at rest, accent when reacted */
body.flockchat-app .reaction-chip {
  background: var(--bg-raised);
  border-color: var(--line);
}
body.flockchat-app .reaction-chip:hover { border-color: var(--line-strong); }
body.flockchat-app .reaction-chip.reacted {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
body.flockchat-app .reaction-chip.reacted .count { color: var(--accent); }

/* Composer: cleaner edge, accent focus ring (one strong signal) */
body.flockchat-app .composer { background: var(--bg); }
body.flockchat-app .composer-inner {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.flockchat-app .composer-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Topbar icon buttons: quiet at rest, subtle hover */
body.flockchat-app .topbar-icon-btn {
  color: var(--ink-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
body.flockchat-app .topbar-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

/* Auth card: clean white, single accent rule on top */
body.flockchat-app .auth-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
}

/* Modal cards */
body.flockchat-app .modal-card {
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}

/* Pin strip & join banner */
body.flockchat-app .pin-strip { border-left: 3px solid var(--gold); }
body.flockchat-app .join-banner {
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}

/* Empty state: subtle accent tint */
body.flockchat-app .empty-state-icon { color: var(--accent); opacity: 0.8; }
body.flockchat-app .empty-state-title { color: var(--accent); }

/* Send button: filled accent */
body.flockchat-app .composer-send,
body.flockchat-app #btn-send {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
}
body.flockchat-app .composer-send:not(:disabled):hover,
body.flockchat-app #btn-send:not(:disabled):hover {
  background: var(--accent-hover);
}
body.flockchat-app .composer-send:disabled,
body.flockchat-app #btn-send:disabled {
  background: var(--bg-active);
  color: var(--ink-faint);
}

/* Topbar context never wraps; truncate long channel names */
body.flockchat-app .topbar-context { min-width: 0; flex: 1 1 auto; overflow: hidden; }
body.flockchat-app .topbar-channel-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
body.flockchat-app .topbar-actions { flex-shrink: 0; flex-wrap: nowrap; }
body.flockchat-app .topbar-icon-btn { white-space: nowrap; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet: hide details, narrow sidebar */
@media (max-width: 900px) {
  body.flockchat-app { --details-w: 0px; }
  .details-pane { display: none !important; }
  .topbar-channel-desc { display: none; }
}

/* Mobile: drawer sidebar, bottom nav, full-width thread */
@media (max-width: 640px) {
  body.flockchat-app {
    --sidebar-w:   280px;
    --topbar-h:    52px;
  }

  /* Body fills viewport exactly, no scrolling on app */
  body.flockchat-app:not(.auth-open) {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* ── Topbar ── */
  #btn-sidebar-toggle { display: flex; }
  .topbar-brand .build-tag { display: none; }
  .topbar-brand .wordmark { font-size: 1rem; }
  .topbar { padding: 0 10px; gap: 4px; }
  .topbar-context { padding: 0 6px; min-width: 0; }
  .topbar-channel-desc { display: none; }
  .topbar-actions { gap: 2px; }
  .topbar-icon-btn { padding: 6px 8px; font-size: 0.85rem; }
  #btn-details-toggle { display: none; }

  /* Suite link: arrow only, no text */
  .topbar-icon-btn.suite-link {
    font-size: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
  }
  .topbar-icon-btn.suite-link::before {
    content: "←";
    font-size: 1rem;
    color: var(--ink-muted);
  }

  /* Manage Users: icon only, hide "Users" label */
  #btn-manage-users {
    font-size: 0;
    padding: 6px 8px;
  }
  #btn-manage-users::before {
    content: "👥";
    font-size: 1.05rem;
  }

  /* Search button: keep icon size readable */
  #btn-msg-search { font-size: 1rem; }

  /* ── Sidebar drawer ── */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 150;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
    /* push down below topbar */
    top: var(--topbar-h);
  }
  .sidebar.open { transform: translateX(0); }

  /* Scrim behind open drawer */
  #sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--topbar-h);
    background: rgba(27,38,79,0.35);
    z-index: 140;
  }
  #sidebar-scrim.open { display: block; }

  /* ── Thread pane fills screen ── */
  .app-body { position: relative; }
  .thread-pane { width: 100%; }

  /* ── Bottom nav ── */
  #bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg-raised);
    border-top: 1px solid var(--line);
    z-index: 100;
    align-items: stretch;
  }
  .bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-btn .nav-icon { font-size: 1.7rem; line-height: 1; }
  .bottom-nav-btn.active { color: var(--accent); }
  a.bottom-nav-btn { text-decoration: none; }
  a.bottom-nav-btn:hover { text-decoration: none; color: var(--accent); }

  /* ── Composer ── */
  .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* Extra room so content isn't hidden behind bottom nav */
  .message-list { padding-bottom: 64px; }
  #thread-pane { padding-bottom: 56px; }

  /* ── Modals full-width on mobile ── */
  .modal-card {
    width: calc(100vw - 32px);
    padding: 24px 20px;
  }

  /* ── Hamburger: only show on mobile ── */
  #btn-sidebar-toggle { display: inline-flex !important; font-size: 1.5rem; padding: 4px 14px; }

  /* ── User pill — hide name on very small screens ── */
  .user-pill .uname { display: none; }
  .user-pill #topbar-status-dot { display: none; }
}

/* ── Embedded mode: hide brand bar when loaded inside an iframe ── */
body.embedded .topbar-brand { display: none !important; }

/* ── Markdown Rendering ─────────────────────────────────────────────────── */
.msg-text code {
  background: var(--bg-active);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.85em;
}
.msg-text pre {
  background: var(--bg-active);
  border-radius: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  margin: 4px 0;
  border: 1px solid var(--line);
}
.msg-text pre code { background: none; padding: 0; font-size: 0.88em; }
.msg-text blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 3px 0;
  color: var(--ink-muted);
}
.msg-text del { opacity: 0.55; }
.msg-text a { color: var(--accent); }
.msg-text a:hover { text-decoration: underline; }

/* ── Pin Strip ──────────────────────────────────────────────────────────── */
.pin-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
}
.pin-strip:hover { background: var(--bg-hover); }
.pin-strip .pin-icon { color: var(--gold); flex-shrink: 0; }
.pin-strip .pin-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-strip .pin-count { font-size: 0.7rem; color: var(--ink-faint); flex-shrink: 0; }

/* ── Load More Button ───────────────────────────────────────────────────── */
.load-more-btn {
  display: block;
  margin: 8px auto 4px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink-muted);
  font-size: 0.78rem;
  padding: 4px 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.load-more-btn:hover { border-color: var(--accent); color: var(--accent); }
.load-more-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Message Search Bar ─────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.search-bar input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.85rem;
  color: var(--ink);
  outline: none;
}
.search-bar input:focus { border-color: var(--accent); }
.search-count { font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.search-close-btn {
  background: none; border: none;
  color: var(--ink-muted); font-size: 1rem;
  padding: 2px 5px; border-radius: 4px; cursor: pointer;
}
.search-close-btn:hover { color: var(--ink); }
.msg-row.search-hidden { display: none; }
.msg-text mark {
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Quick Switcher (Ctrl+K) ────────────────────────────────────────────── */
#quick-switcher {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27,38,79,0.45);
  z-index: 400;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
#quick-switcher.open { display: flex; }
.qs-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 480px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.qs-input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.qs-input::placeholder { color: var(--ink-faint); }
.qs-list { max-height: 320px; overflow-y: auto; padding: 6px 0; }
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-muted);
  transition: background 0.1s;
}
.qs-item:hover, .qs-item.qs-selected { background: var(--bg-hover); color: var(--ink); }
.qs-sigil { color: var(--ink-faint); width: 18px; text-align: center; flex-shrink: 0; }
.qs-hint {
  padding: 7px 16px;
  font-size: 0.7rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

/*
===============================================================================
 FlockOS Unified Garments — America Theme (for FlockOS, ATOG, FlockChat)
 This file is the single source of truth for all utility, component, and theme
 styles across all deployments. Only override in deployment-specific files if
 absolutely necessary. America theme is the default for all.
===============================================================================
*/

/* === America Theme Variables (imported or defined here) === */
@import url('./the_garment.css');

/* === Utility Classes (shared across all deployments) === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: var(--radius-md, 12px); }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 20px; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.border { border: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }
.border-l { border-left: 1px solid var(--line); }
.border-r { border-right: 1px solid var(--line); }
.border-t { border-top: 1px solid var(--line); }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-none { border: none; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.08em; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.88rem; }
.text-lg { font-size: 1.13rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.88rem; }
.text-4xl { font-size: 2.25rem; }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--ink-muted); }
.bg-white { background: #fff; }
.bg-accent { background: var(--accent); }
.bg-gold { background: var(--gold); }
.bg-muted { background: var(--bg-sunken); }
.bg-stone-900 { background: #1a1a2e; }
.bg-stone-50 { background: #faf9f6; }
.bg-stone-100 { background: #f0eeea; }
.bg-stone-200 { background: #e4e1dc; }
.bg-stone-300 { background: #d0ccc5; }
.bg-teal-50 { background: #e6f6f6; }
.bg-teal-600 { background: #0f766e; }
.rounded-lg { border-radius: 14px; }
.rounded-2xl { border-radius: 24px; }
.shadow-md { box-shadow: var(--shadow-md); }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* === Component Classes (shared, override only if needed) === */
.alert {
  border-radius: var(--radius-md, 12px);
  padding: 14px 22px;
  margin-bottom: 16px;
  font-size: 1.05rem;
  line-height: 1.7;
  display: none;
}
.alert.show { display: block; }
.alert-info {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  color: var(--accent);
}
.alert-success {
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  color: var(--success);
}
.alert-danger {
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  color: var(--danger);
}
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-info    { background: var(--accent-soft); color: var(--accent); }

/* === Deployment-specific overrides (if needed) === */
/* Add only if a deployment truly needs a unique style. Otherwise, use above. */


/* === Migrated/Unified Component Classes === */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: 7px;
  color: #fff;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-muted);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-sm { font-size: 0.78rem; padding: 6px 12px; }
.btn-action {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 10px);
  padding: 12px 20px;
  font-weight: 700; font-size: 0.95rem;
  text-decoration: none;
  font-family: inherit;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
}
.btn-action:hover { background: var(--accent-soft); transform: translateY(-2px); }
.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 56px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* NOTE: FlockChat-specific selectors (.sidebar-item, .msg-row, .composer,
   .admin-row, .modal-card, .user-mgmt-row, .join-banner, .loading,
   .empty-thread) used to be re-declared here as flat one-liners and were
   stomping the proper FlockChat styles defined earlier in this file
   (~lines 7491+), causing the chat UI to lose visual depth (sidebar
   pills became flush full-width strips, message rows lost padding/
   structure, composer lost its inner card). Removed — the canonical
   FlockChat block above is the source of truth. */
.content-display { background: var(--bg-raised); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.radar-container { max-width: 500px; height: 350px; }
.chart-container { position: relative; width: 100%; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; }
.wall-footer span { color: var(--ink-faint); font-size: 0.66rem; letter-spacing: 0.03em; opacity: 0.45; }
.links a { color: var(--ink-muted); font-size: 0.78rem; text-decoration: none; cursor: pointer; transition: color 0.15s; }
.links a:hover { color: var(--accent); }
.links .sep { color: var(--line-strong); margin: 0 10px; font-size: 0.6rem; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.fab-menu { position: fixed; bottom: 28px; left: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding: 6px 0; font-size: 1.15rem; }
.checklist li::before { content: '☐ '; color: var(--ink-muted); font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
 *  ATOG (A Touch of the Gospel) — Layout, Components & Tokens
 *  Apply class="atog-app" to <body> on all ATOG pages.
 *  All values map onto the unified America theme variables.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.atog-app { overscroll-behavior: none; }
body.atog-app html { overscroll-behavior: none; }

/* ── ATOG-only tokens (mapped to unified theme) ─────────────────────────── */
body.atog-app {
  --sidebar-w:     260px;
  --topbar-h:      60px;

  --surface:       var(--bg-raised);
  --bg-soft:       var(--bg-sunken);

  /* Legacy "neon" aliases — map to America accent/gold/danger so old markup
     written for the dark theme still renders correctly on the light theme. */
  --neon-gold:     var(--gold);
  --neon-teal:     var(--accent);
  --neon-blue:     var(--accent);
  --neon-purple:   var(--lilac);
  --neon-crimson:  var(--danger);

  /* Slate aliases used by older ATOG markup → ink scale */
  --slate-300:     var(--ink);
  --slate-400:     var(--ink-muted);
  --slate-500:     var(--ink-muted);
  --slate-600:     var(--ink-faint);

  --font-serif:    'Merriweather', Georgia, serif;
  --font-sans:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'Cinzel', serif;
  --font-mono:     'Fira Code', monospace;

  --radius-xl:     16px;
  --radius-2xl:    20px;
  --radius-3xl:    24px;
  --radius-full:   9999px;

  --glass-bg:      rgba(255,255,255,0.55);
  --glass-border:  var(--line);

  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
body.atog-app #topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 100;
  display: flex; align-items: center;
  padding: 0 1.25rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
body.atog-app .brand {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em; white-space: nowrap;
}
body.atog-app .brand-sub {
  font-size: 0.65rem; color: var(--ink-muted);
  letter-spacing: 0.15em; text-transform: uppercase;
  display: block; margin-top: -2px;
}

/* ── Hamburger ──────────────────────────────────────────────────────────── */
body.atog-app #hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 8px; margin-right: 12px; z-index: 101;
}
body.atog-app #hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink-muted); border-radius: 2px;
  transition: all 0.3s ease;
}
body.atog-app #hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
body.atog-app #hamburger.open span:nth-child(2) { opacity: 0; }
body.atog-app #hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
body.atog-app #sidebar {
  position: fixed; top: var(--topbar-h); left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  z-index: 90;
  background: var(--bg-raised);
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  padding: 1rem 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}
body.atog-app #sidebar nav { flex: 0 0 auto; }
body.atog-app #sidebar::-webkit-scrollbar { width: 4px; }
body.atog-app #sidebar::-webkit-scrollbar-track { background: transparent; }
body.atog-app #sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

body.atog-app .nav-zone { padding: 0.5rem 1rem; }
body.atog-app .nav-zone-label {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.75rem 0.75rem 0.4rem;
}
body.atog-app .nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: 0.625rem;
  cursor: pointer; transition: all 0.2s ease;
  color: var(--ink-muted); font-size: 0.85rem; font-weight: 500;
  text-decoration: none; position: relative; overflow: hidden;
  border-left: none;
}
body.atog-app .nav-item:hover { background: var(--bg-hover); color: var(--accent); }
body.atog-app .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
body.atog-app .nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--accent);
}
body.atog-app .nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }

/* ── Sidebar Mobile Overlay ─────────────────────────────────────────────── */
body.atog-app #sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 89;
}

/* ── Main Content ───────────────────────────────────────────────────────── */
body.atog-app #main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  padding: 2rem 2.5rem 4rem;
  position: relative; z-index: 1;
  background: var(--bg);
}

/* ── Module Views ───────────────────────────────────────────────────────── */
body.atog-app .module-view { display: none; animation: atogFadeSlideIn 0.4s ease forwards; }
body.atog-app .module-view.active { display: block; }
@keyframes atogFadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Glows ─────────────────────────────────────────────────────────── */
body.atog-app .hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.18; pointer-events: none;
}

/* ── Glass Cards (light-theme adaptation) ───────────────────────────────── */
body.atog-app .glass-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}
body.atog-app .glass-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
body.atog-app .glass-card-static {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
body.atog-app .glass-subtle {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ── Gradient Text ──────────────────────────────────────────────────────── */
body.atog-app .gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; color: transparent;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
body.atog-app #app-footer {
  margin-left: var(--sidebar-w);
  padding: 2rem 2.5rem;
  border-top: 1px solid var(--line);
  text-align: center; color: var(--ink-faint); font-size: 0.8rem;
  position: relative; z-index: 1;
  background: var(--bg);
}

/* ── Buttons (ATOG variants) ────────────────────────────────────────────── */
body.atog-app .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.6rem; border-radius: var(--radius-lg);
  font-weight: 600; font-size: 0.92rem;
  transition: all 0.2s ease; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
body.atog-app .btn:hover { transform: translateY(-1px); }
body.atog-app .btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px var(--accent-soft);
}
body.atog-app .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px var(--accent-soft); }
body.atog-app .btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
body.atog-app .btn-ghost:hover { background: var(--bg-hover); border-color: var(--accent-soft); }

/* ── Pill (ATOG inline-style consumer) ──────────────────────────────────── */
body.atog-app .pill {
  display: inline-block;
  font-size: 0.65rem; padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

/* ── Typography utilities used by ATOG (filling gaps in shared utilities) ── */
body.atog-app .text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
body.atog-app .text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
body.atog-app .text-5xl  { font-size: 3rem;     line-height: 1.15; }
body.atog-app .text-6xl  { font-size: 3.75rem;  line-height: 1.1; }
body.atog-app .text-base { font-size: 1rem;     line-height: 1.5rem; }
body.atog-app .font-display { font-family: var(--font-display); }
body.atog-app .font-serif   { font-family: var(--font-serif); }
body.atog-app .font-mono    { font-family: var(--font-mono); }
body.atog-app .leading-tight   { line-height: 1.25; }
body.atog-app .leading-relaxed { line-height: 1.7; }
body.atog-app .leading-loose   { line-height: 2; }
body.atog-app .tracking-widest { letter-spacing: 0.15em; }

/* Spacing gaps */
body.atog-app .gap-1  { gap: 0.25rem; }
body.atog-app .gap-3  { gap: 0.75rem; }
body.atog-app .gap-5  { gap: 1.25rem; }
body.atog-app .gap-8  { gap: 2rem; }
body.atog-app .gap-10 { gap: 2.5rem; }
body.atog-app .gap-12 { gap: 3rem; }

/* Padding */
body.atog-app .p-5  { padding: 1.25rem; }
body.atog-app .p-10 { padding: 2.5rem; }
body.atog-app .p-12 { padding: 3rem; }

/* Margins */
body.atog-app .mb-1  { margin-bottom: 0.25rem; }
body.atog-app .mb-2  { margin-bottom: 0.5rem; }
body.atog-app .mb-3  { margin-bottom: 0.75rem; }
body.atog-app .mb-5  { margin-bottom: 1.25rem; }
body.atog-app .mb-10 { margin-bottom: 2.5rem; }
body.atog-app .mb-12 { margin-bottom: 3rem; }
body.atog-app .mt-1  { margin-top: 0.25rem; }

/* Layout */
body.atog-app .flex-1       { flex: 1 1 0%; }
body.atog-app .flex-shrink-0{ flex-shrink: 0; }
body.atog-app .grid-cols-1  { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); }
body.atog-app .grid-cols-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.atog-app .grid-cols-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.atog-app .max-w-2xl    { max-width: 42rem; }
body.atog-app .max-w-3xl    { max-width: 48rem; }
body.atog-app .max-w-4xl    { max-width: 56rem; }
body.atog-app .max-w-5xl    { max-width: 64rem; }
body.atog-app .max-w-6xl    { max-width: 72rem; }
body.atog-app .max-w-7xl    { max-width: 80rem; }
body.atog-app .min-h-screen { min-height: 100vh; }
body.atog-app .relative     { position: relative; }
body.atog-app .absolute     { position: absolute; }
body.atog-app .fixed        { position: fixed; }
body.atog-app .inset-0      { inset: 0; }
body.atog-app .z-10         { z-index: 10; }
body.atog-app .z-100        { z-index: 100; }
body.atog-app .overflow-hidden { overflow: hidden; }
body.atog-app .cursor-pointer  { cursor: pointer; }
body.atog-app .pointer-events-none { pointer-events: none; }
body.atog-app .hidden       { display: none; }
body.atog-app .block        { display: block; }
body.atog-app .inline-block { display: inline-block; }
body.atog-app .inline-flex  { display: inline-flex; }
body.atog-app .space-y-4 > * + * { margin-top: 1rem; }
body.atog-app .space-y-6 > * + * { margin-top: 1.5rem; }
body.atog-app .space-y-8 > * + * { margin-top: 2rem; }

/* Color utilities ATOG uses */
body.atog-app .text-muted   { color: var(--ink-muted); }

/* ── Dark-Tailwind class mappings (the_touch.js renders cards with
   text-white / text-slate-* / text-neon-* assuming a dark theme).
   Map them to the light America palette so titles don't disappear
   into white card backgrounds. Scoped to .atog-app so they don't
   leak elsewhere. */
body.atog-app .text-white    { color: var(--ink); }
body.atog-app .text-slate-300{ color: var(--ink); }
body.atog-app .text-slate-400{ color: var(--ink-muted); }
body.atog-app .text-slate-500{ color: var(--ink-muted); }
body.atog-app .text-slate-600{ color: var(--ink-faint); }
body.atog-app .text-slate-700{ color: var(--ink-muted); }
body.atog-app .text-slate-800{ color: var(--ink); }

body.atog-app .text-neon-blue   { color: var(--accent); }
body.atog-app .text-neon-teal   { color: var(--mint); }
body.atog-app .text-neon-purple { color: var(--lilac); }
body.atog-app .text-neon-gold   { color: var(--gold); }
body.atog-app .text-neon-crimson{ color: var(--danger); }

/* Heading sizes used by ATOG cards */
body.atog-app .text-xs  { font-size: 0.75rem;  line-height: 1.2; }
body.atog-app .text-sm  { font-size: 0.875rem; line-height: 1.45; }
body.atog-app .text-2xl { font-size: 1.5rem;   line-height: 1.3; }

/* Rounded */
body.atog-app .rounded-3xl  { border-radius: var(--radius-3xl); }
body.atog-app .rounded-2xl  { border-radius: var(--radius-2xl); }

/* ── Responsive (mobile sidebar collapse) ───────────────────────────────── */
@media (max-width: 1024px) {
  body.atog-app #main      { padding: 1.5rem 1.5rem 4rem; }
  body.atog-app #app-footer{ padding: 1.5rem 1.5rem; }
}
@media (max-width: 768px) {
  body.atog-app #hamburger { display: flex; }
  body.atog-app #sidebar   { transform: translateX(-100%); width: 280px; }
  body.atog-app #sidebar.open { transform: translateX(0); }
  body.atog-app #sidebar.open ~ #sidebar-overlay { display: block; }
  /* Generous bottom padding so the last card scrolls above the
     mobile browser chrome / safe-area inset. */
  body.atog-app #main {
    margin-left: 0;
    padding: 1.25rem 1rem max(6rem, env(safe-area-inset-bottom) + 4rem);
  }
  body.atog-app #app-footer {
    margin-left: 0;
    padding-bottom: max(2rem, env(safe-area-inset-bottom) + 1rem);
  }
}

/* === End Unified Garments === */