/* =============================================================
   CCMS Theme: Skeuomorphism (skeu_theme.css)
   Consolidated CSS from all 14 example_*.md source files.
   Generated: 2026-03-01
   Sources: example_admin_card, _calendars, _card, _chat,
            _contact_form, _dashboard, _graphs, _header, _login,
            _model, _register, _tables, _tabs_pagination,
            _toast_notifications
   Neumorphism Light excluded per spec.
   ============================================================= */
/*  Source: example_admin_card.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

body, html {
  height: 100%;
  margin: 0;
  background: #0a0805;
}

/* =====================================================
   PUBLIC PAGE VARIABLES — Skeuomorphism scope
===================================================== */
html:has(body.skeu-scope) {
  height: 100%;
  background: #0e0906;
}
body.skeu-scope {
  margin: 0;
  padding: 0;
  border-radius: 0;
  min-height: 100%;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  background-size: auto, auto, 100% 100%;
  --bg-page:               #0a0805;
  --bg-section:            #1c1008;
  --bg-container:          transparent;
  --card-bg:               #1c1008;
  --card-border:           #3a2a14;
  --card-header-bg:        #2a1e0e;
  --card-header-text:      #c8922a;
  --card-body-bg:          #1c1008;
  --card-text:             #b8a898;
  --card-service-bg:       #2a1e0e;
  --card-service-accent:   #c8922a;
  --card-event-bg:         #2a1e0e;
  --text-primary:          #e8e0d0;
  --text-secondary:        #b8a898;
  --text-muted:            #7a6a5a;
  --text-link:             #c8922a;
  --text-link-hover:       #e0a830;
  --text-inverse:          #0a0805;
  --button-primary-bg:     #7b00ff;
  --button-secondary-bg:   #2e2e2e;
  --button-accent-bg:      #c8922a;
  --button-submit-bg:      #4a9a4a;
  --button-cancel-bg:      #4a4a4a;
  --button-danger-bg:      #9a2a2a;
  --button-login-bg:       #7b00ff;
  --button-cta-bg:         #c8922a;
  --button-tab-bg:         #2a1e0e;
  --header-bg:             linear-gradient(135deg, #2a1e0e, #1c1008);
  --header-text:           #e8e0d0;
  --header-logo-text:      #c8922a;
  --nav-bg:                #1c1008;
  --nav-link-color:        #b8a898;
  --nav-link-hover:        #c8922a;
  --nav-active-bg:         rgba(200,146,42,0.2);
  --nav-border:            #3a2a14;
  --footer-bg:             #0a0805;
  --footer-text:           #b8a898;
  --footer-link:           #c8922a;
  --footer-link-hover:     #e0a830;
  --footer-border:         #2a1e0e;
  --form-input-bg:         #2a1e0e;
  --form-input-border:     #3a2a14;
  --form-input-focus-border: #c8922a;
  --form-input-text:       #e8e0d0;
  --form-label-text:       #e8e0d0;
  --form-select-bg:        #2a1e0e;
  --form-checkbox-bg:      #2a1e0e;
  --bg-modal:              #2a1e0e;
  --bg-overlay:            rgba(0,0,0,0.8);
  --bg-sidebar:            #1c1008;
}

/* =====================================================
   DESIGN TOKENS — Skeuomorphism Dark Leather / Metal
===================================================== */
.skeu-scope {
  /* --- Base Material --- */
  --skeu-bg:              #1a1a1a;
  --skeu-leather:         #1c1008;
  --skeu-leather-mid:     #2a1e0e;
  --skeu-leather-light:   #3a2a14;
  --skeu-metal:           #2e2e2e;
  --skeu-metal-light:     #4a4a4a;
  --skeu-metal-shine:     #6a6a6a;
  --skeu-metal-dark:      #111111;
  --skeu-stitch:          #5a3a1a;

  /* --- Accent --- */
  --skeu-accent:          #bb86fc;
  --skeu-accent-dark:     #7b00ff;
  --skeu-accent-glow:     rgba(187, 134, 252, 0.3);
  --skeu-gold:            #c8922a;
  --skeu-gold-light:      #7a4be8;

  /* --- Text --- */
  --text-primary:         #e8e0d0;
  --text-secondary:       #b8a898;
  --text-muted:           #7a6a5a;
  --text-accent:          var(--skeu-gold-light);

  /* --- Status --- */
  --success:              #4a9a4a;
  --warning:              #c8922a;
  --danger:               #9a2a2a;

  /* --- Spacing --- */
  --space-3:              1rem;
  --space-4:              1.5rem;

  /* --- Sizing --- */
  --card-width:           320px;
  --scroll-max-height:    160px;
  --scrollbar-width:      8px;
  --badge-offset:         -22px;
  --stat-font-size:       2.2rem;

  /* --- Radius --- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;

  font-family: Tinos, serif;

  /* Leather texture via CSS gradients */
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.15) 2px,
      rgba(0,0,0,0.15) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.08) 2px,
      rgba(0,0,0,0.08) 4px
    ),
    linear-gradient(160deg, var(--skeu-leather-mid) 0%, var(--skeu-leather) 60%, #0e0906 100%);

  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 3px solid var(--skeu-metal-dark);
  box-shadow:
    0 0 0 1px var(--skeu-metal-shine),
    0 8px 32px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* =====================================================
   GRID
===================================================== */
.skeu-scope .admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  justify-items: start;
}

/* =====================================================
   CARD — brushed metal plate
===================================================== */
.skeu-scope .admin-card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 22px;          /* room for the badge that overflows via top: -22px */
  border-radius: var(--radius-md);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary);

  /* Brushed metal surface */
  background:
    repeating-linear-gradient(
      92deg,
      transparent,
      transparent 1px,
      rgba(255,255,255,0.015) 1px,
      rgba(255,255,255,0.015) 2px
    ),
    linear-gradient(180deg,
      var(--skeu-metal-light) 0%,
      var(--skeu-metal) 40%,
      #222222 100%
    );

  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    1px 0 0 rgba(255,255,255,0.06) inset,
    -1px 0 0 rgba(0,0,0,0.3) inset,
    0 6px 20px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.5);
}

/* =====================================================
   HEADER + BADGE — riveted metal tag
===================================================== */
.skeu-scope .admin-card-header {
  position: relative;
}

.skeu-scope .admin-card-title {
  position: absolute;
  top: var(--badge-offset);
  left: 20px;
  padding: 7px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  letter-spacing: 0.5px;
  z-index: 10;
  color: var(--skeu-gold-light);

  /* Engraved metal tag */
  background: linear-gradient(180deg,
    #3a3a3a 0%,
    #252525 50%,
    #1a1a1a 100%
  );
  border: 1px solid var(--skeu-metal-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.6) inset,
    0 3px 8px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.4);

  /* Rivet dots */
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* =====================================================
   CONTENT
===================================================== */
.skeu-scope .admin-card-content {
  flex: 1;
  padding: 2rem 1.5rem 1.5rem;
  color: var(--text-secondary);
}

/* =====================================================
   SCROLLABLE — inset trough
===================================================== */
.skeu-scope .scroll-area {
  max-height: var(--scroll-max-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.06);
}

.skeu-scope .scroll-area p {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.35rem;
  cursor: default;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: all 0.2s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);

  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(0,0,0,0.2) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

.skeu-scope .scroll-area p:hover {
  background: linear-gradient(180deg,
    rgba(187,134,252,0.15) 0%,
    rgba(187,134,252,0.05) 100%
  );
  border-color: rgba(187,134,252,0.3);
  color: var(--skeu-gold-light);
  transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.skeu-scope .scroll-area::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.skeu-scope .scroll-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--skeu-metal-light), var(--skeu-metal-dark));
  border-radius: 2px;
  border: 1px solid var(--skeu-metal-dark);
}

.skeu-scope .scroll-area::-webkit-scrollbar-track {
  background: #0e0e0e;
  border-radius: 2px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}

/* =====================================================
   BUTTON — raised metal key
===================================================== */
.skeu-scope .admin-btn {
  position: relative;
  padding: 0.5em 1.4em;
  font-family: Tinos, serif;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);

  background: linear-gradient(180deg,
    #4a4a4a 0%,
    #2e2e2e 45%,
    #1e1e1e 55%,
    #3a3a3a 100%
  );
  border: 1px solid var(--skeu-metal-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 4px 8px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.4);

  transition: all 0.15s ease;
}

.skeu-scope .admin-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.1) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.skeu-scope .admin-btn:hover {
  background: linear-gradient(180deg,
    #555555 0%,
    #363636 45%,
    #262626 55%,
    #444444 100%
  );
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 6px 12px rgba(0,0,0,0.7),
    0 0 10px var(--skeu-accent-glow);
}

.skeu-scope .admin-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.4);
}

.skeu-scope .admin-btn--danger {
  color: #ff9a9a;
  background: linear-gradient(180deg,
    #5a2a2a 0%,
    #3a1a1a 45%,
    #2a1010 55%,
    #4a2020 100%
  );
  border-color: #3a0000;
}

.skeu-scope .admin-btn--danger:hover {
  background: linear-gradient(180deg,
    #6a3030 0%,
    #4a2020 45%,
    #3a1818 55%,
    #5a2828 100%
  );
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 6px 12px rgba(0,0,0,0.7),
    0 0 10px rgba(180,50,50,0.4);
}

/* ----- Icon-only action buttons (🔓 🔍) ----- */
.skeu-scope .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg,
    #4a4a4a 0%,
    #2e2e2e 45%,
    #1e1e1e 55%,
    #3a3a3a 100%
  );
  border: 1px solid var(--skeu-metal-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 3px 6px rgba(0,0,0,0.6);
  transition: all 0.15s ease;
  vertical-align: middle;
}
.skeu-scope .btn-icon:hover {
  background: linear-gradient(180deg,
    #555555 0%,
    #363636 45%,
    #262626 55%,
    #444444 100%
  );
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 5px 10px rgba(0,0,0,0.7),
    0 0 8px var(--skeu-accent-glow);
}
.skeu-scope .btn-icon:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.4);
}

/* =====================================================
   ALL MEMBERS PAGE — .am-* components
===================================================== */

/* Table */
.skeu-scope .am-table th,
.skeu-scope .am-table td      { border-bottom:1px solid rgba(200,146,42,0.18); }
.skeu-scope .am-table thead th{ color:var(--text-primary); }
.skeu-scope .am-table td      { color:var(--text-secondary); }
.skeu-scope .am-table tbody tr:hover { background:rgba(200,146,42,0.07); }

/* Badges */
.skeu-scope .badge-member   { background:rgba(122,75,232,0.2);  color:#a37ff5; border:1px solid rgba(122,75,232,0.35); }
.skeu-scope .badge-associate{ background:rgba(74,222,128,0.15); color:#4ade80; border:1px solid rgba(74,222,128,0.3); }
.skeu-scope .badge-visitor  { background:rgba(96,165,250,0.15); color:#93c5fd; border:1px solid rgba(96,165,250,0.3); }
.skeu-scope .badge-inactive { background:rgba(156,163,175,0.1); color:#9ca3af; border:1px solid rgba(156,163,175,0.2); }
.skeu-scope .badge-admin    { background:rgba(200,146,42,0.2);  color:#d4a027; border:1px solid rgba(200,146,42,0.4); }
.skeu-scope .badge-pastor   { background:rgba(52,211,153,0.15); color:#34d399; border:1px solid rgba(52,211,153,0.3); }
.skeu-scope .badge-leader   { background:rgba(249,115,22,0.15); color:#f97316; border:1px solid rgba(249,115,22,0.3); }
.skeu-scope .badge-active   { background:rgba(74,222,128,0.15); color:#4ade80; border:1px solid rgba(74,222,128,0.3); }
.skeu-scope .badge-pending  { background:rgba(200,146,42,0.18); color:#d4a027; border:1px solid rgba(200,146,42,0.35); }
.skeu-scope .badge-linked   { background:rgba(74,222,128,0.12); color:#4ade80; border:1px solid rgba(74,222,128,0.25); }
.skeu-scope .badge-unlinked { background:rgba(156,163,175,0.08); color:#9ca3af; border:1px solid rgba(156,163,175,0.18); }

/* Tabs */
.skeu-scope .am-tabs      { border-bottom:2px solid rgba(200,146,42,0.3); }
.skeu-scope .am-tab       { color:var(--text-secondary); border-bottom:2px solid transparent; font-family:Tinos,serif; }
.skeu-scope .am-tab.active{ border-bottom-color:var(--skeu-gold); color:var(--text-primary); font-weight:700; }

/* Auto-suggest */
.skeu-scope .am-suggest-row      { border-bottom:1px solid rgba(200,146,42,0.14); }
.skeu-scope .am-suggest-row:hover{ background:rgba(200,146,42,0.06); }
.skeu-scope .am-suggest-name     { color:var(--text-primary); }
.skeu-scope .am-match-badge      { background:rgba(52,211,153,0.14); color:#34d399; border:1px solid rgba(52,211,153,0.28); }

/* Manual link */
.skeu-scope .am-manual-results          { border:1px solid rgba(200,146,42,0.25); box-shadow:inset 0 2px 5px rgba(0,0,0,0.5); }
.skeu-scope .am-manual-results p        { border-bottom:1px solid rgba(200,146,42,0.12); color:var(--text-secondary); }
.skeu-scope .am-manual-results p:hover,
.skeu-scope .am-manual-results p.selected{ background:rgba(200,146,42,0.1); color:var(--text-primary); }
.skeu-scope .am-selected-box            {
  background: linear-gradient(180deg,rgba(58,42,20,0.8),rgba(28,16,8,0.9));
  border:1px solid rgba(200,146,42,0.3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
  color:var(--text-secondary);
}

/* Status msgs */
.skeu-scope .am-msg-ok  { background:rgba(74,222,128,0.12); color:#4ade80; border:1px solid rgba(74,222,128,0.28); }
.skeu-scope .am-msg-err { background:rgba(154,42,42,0.2);   color:#ff9a9a; border:1px solid rgba(154,42,42,0.4); }

/* Modals */
.skeu-scope .am-modal {
  background: linear-gradient(160deg, #2a1e0e 0%, #1c1008 100%);
  border:1px solid var(--skeu-metal-dark);
  box-shadow:
    0 0 0 1px var(--skeu-metal-shine),
    0 20px 60px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.skeu-scope .am-modal-title { color:var(--text-primary); font-family:Tinos,serif; }
.skeu-scope .am-modal-body  { color:var(--text-secondary); }
.skeu-scope .am-modal-warn  { color:#ff9a9a; }
.skeu-scope .am-edit-label  { color:var(--text-secondary); }
/* Filter-bar & edit-modal custom dropdowns */
.skeu-scope .am-filter-bar .leg-m-sel-btn,
.skeu-scope .am-edit-grid  .leg-m-sel-btn { background:linear-gradient(180deg,#2e2e2e 0%,#1c1c1c 100%); border:1px solid var(--skeu-metal-dark); color:var(--text-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 2px 6px rgba(0,0,0,0.6); }
.skeu-scope .am-filter-bar .leg-m-sel-btn:hover,
.skeu-scope .am-edit-grid  .leg-m-sel-btn:hover { background:linear-gradient(180deg,#363636 0%,#222 100%); }
.skeu-scope .am-filter-bar .leg-m-select.open .leg-m-sel-btn,
.skeu-scope .am-edit-grid  .leg-m-select.open .leg-m-sel-btn { border-color:var(--skeu-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 0 8px rgba(200,146,42,0.35); }
.skeu-scope .am-filter-bar .leg-m-sel-icon,
.skeu-scope .am-edit-grid  .leg-m-sel-icon { color:var(--skeu-gold); }
.skeu-scope .am-filter-bar .leg-m-sel-list,
.skeu-scope .am-edit-grid  .leg-m-sel-list { background:#141414; border:1px solid var(--skeu-metal-dark); box-shadow:0 10px 30px rgba(0,0,0,0.88),inset 0 1px 0 rgba(255,255,255,0.05); }
.skeu-scope .am-filter-bar .leg-m-sel-opt,
.skeu-scope .am-edit-grid  .leg-m-sel-opt { color:var(--text-primary); border-bottom:1px solid rgba(255,255,255,0.05); }
.skeu-scope .am-filter-bar .leg-m-sel-opt:hover,
.skeu-scope .am-edit-grid  .leg-m-sel-opt:hover { background:rgba(200,146,42,0.18); color:var(--skeu-gold-light); }
.skeu-scope .am-filter-bar .leg-m-sel-opt.leg-m-sel-opt-active,
.skeu-scope .am-edit-grid  .leg-m-sel-opt.leg-m-sel-opt-active { background:rgba(200,146,42,0.22); color:var(--skeu-gold); font-weight:600; }
.skeu-scope .btn-icon--danger:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 0 10px rgba(154,42,42,0.6) !important;
}


/* =====================================================
   INPUT — recessed metal slot
===================================================== */
.skeu-scope .admin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: Tinos, serif;
  outline: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);

  background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
  border: 1px solid #0a0a0a;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.9),
    inset 0 1px 3px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.08);

  transition: box-shadow 0.2s, border-color 0.2s;
}

.skeu-scope .admin-input::placeholder {
  color: var(--text-muted);
}

.skeu-scope .admin-input:focus {
  border-color: rgba(187,134,252,0.4);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.9),
    inset 0 1px 3px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.08),
    0 0 8px var(--skeu-accent-glow);
}

/* =====================================================
   HELPERS
===================================================== */
.skeu-scope .text-primary  { color: var(--text-primary); }
.skeu-scope .text-muted    { color: var(--text-muted); }
.skeu-scope .text-success  { color: var(--success); }

.skeu-scope .admin-divider {
  border: none;
  height: 1px;
  margin: var(--space-3) 0;
  background: linear-gradient(90deg,
    transparent,
    var(--skeu-metal-shine),
    transparent
  );
  opacity: 0.3;
}

.skeu-scope .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.skeu-scope .stat-number {
  font-size: var(--stat-font-size);
  font-weight: bold;
  color: var(--skeu-gold-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  margin: 0;
}

/*  Source: example_calendars.md  */
.cal-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem;
  border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
}

.cal-skeu .calendar {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 6px 20px rgba(0,0,0,0.7);
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222 100%);
  max-width: 860px;
}

.cal-skeu .cal-header {
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  border-bottom: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-skeu .cal-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--skeu-gold-light);
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.cal-skeu .cal-nav { display: flex; gap: 0.5rem; }

.cal-skeu .cal-nav-btn {
  background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--skeu-gold-light);
  border-radius: 3px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 6px rgba(0,0,0,0.5);
  transition: all 0.15s;
}

.cal-skeu .cal-nav-btn:hover { background: linear-gradient(180deg, #555, #333); }

.cal-skeu .cal-legend { display: flex; gap: 1rem; align-items: center; }
.cal-skeu .legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-muted); text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.cal-skeu .legend-dot { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.6); }

.cal-skeu .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal-skeu .cal-dow {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  padding: 0.6rem 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  border-bottom: 1px solid var(--skeu-metal-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.cal-skeu .cal-dow:first-child,
.cal-skeu .cal-dow:last-child { color: var(--skeu-gold-light); }

.cal-skeu .cal-day {
  min-height: 90px;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  transition: background 0.15s;
}

.cal-skeu .cal-day:hover { background: rgba(255,255,255,0.04); }
.cal-skeu .cal-day.empty { background: rgba(0,0,0,0.25); opacity: 0.5; }
.cal-skeu .cal-day.today {
  background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}
.cal-skeu .cal-day.today .day-num { color: var(--skeu-gold-light); font-weight: bold; }

.cal-skeu .day-num {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  display: block;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.cal-skeu .cal-event {
  display: block;
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  transition: opacity 0.15s;
}

.cal-skeu .cal-event:hover { opacity: 0.85; }
.cal-skeu .ev-worship  { background: linear-gradient(180deg, #1f3f1f, #142814); color: #6abf6a; }
.cal-skeu .ev-study    { background: linear-gradient(180deg, #0f2f3f, #091e28); color: #6aaabf; }
.cal-skeu .ev-youth    { background: linear-gradient(180deg, #3f2f0f, #281e06); color: #d4a843; }
.cal-skeu .ev-outreach { background: linear-gradient(180deg, #2a1f3f, #1a1228); color: #9a70c8; }
.cal-skeu .ev-finance  { background: linear-gradient(180deg, #3f1f1f, #281212); color: #bf6060; }

/*  Source: example_card.md  */
.gc-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  padding: 2rem;
}
.gc-skeu .section-title { font-size: 1.4rem; font-weight: bold; color: var(--skeu-gold-light); margin-bottom: 0.3rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.gc-skeu .section-sub   { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .card-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 2.5rem; }

.gc-skeu .card {
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 40%, #1e1e1e 100%);
  border: 1px solid var(--skeu-metal-dark); border-radius: 4px; padding: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.7);
  transition: box-shadow 0.2s; position: relative; overflow: hidden;
}
.gc-skeu .card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 24px rgba(0,0,0,0.8); }
.gc-skeu .card-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }

.gc-skeu .card-icon   { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.gc-skeu .card-title  { font-size: 1rem; font-weight: bold; color: var(--skeu-gold-light); margin-bottom: 0.5rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.gc-skeu .card-body   { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.gc-skeu .card-link   { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--skeu-gold); text-decoration: none; margin-top: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.gc-skeu .card-welcome {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(135deg, #2a1e0e 0%, #1c1008 100%);
  border: 1px solid var(--skeu-gold);
  border-radius: 4px; padding: 2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 24px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 0.75rem; position: relative; overflow: hidden; grid-column: span 3;
}
.gc-skeu .card-welcome::before { content: '✚'; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 8rem; color: rgba(200,146,42,0.06); line-height: 1; }
.gc-skeu .welcome-tag   { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--skeu-gold); font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .welcome-title { font-size: 1.6rem; font-weight: bold; color: var(--skeu-gold-light); text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.gc-skeu .welcome-body  { font-size: 0.92rem; color: var(--text-secondary); max-width: 520px; line-height: 1.7; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.gc-skeu .welcome-btns  { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.gc-skeu .btn-primary {
  padding: 0.55rem 1.4rem; border-radius: 3px; font-size: 0.88rem; text-decoration: none;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light); border: 1px solid var(--skeu-metal-dark);
  font-family: Tinos,serif; cursor: pointer; transition: all 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.6);
}
.gc-skeu .btn-primary:hover { background: linear-gradient(180deg,#555,#363636 45%,#262626 55%,#444 100%); }
.gc-skeu .btn-outline {
  padding: 0.55rem 1.4rem; border-radius: 3px; font-size: 0.88rem; text-decoration: none;
  background: linear-gradient(180deg, #3a3a3a, #252525);
  color: var(--text-secondary); border: 1px solid var(--skeu-metal-dark);
  font-family: Tinos,serif; cursor: pointer; transition: all 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5);
}
.gc-skeu .btn-outline:hover { color: var(--skeu-gold-light); }

.gc-skeu .service-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .service-row:last-child { border-bottom: none; }
.gc-skeu .service-name { font-size: 0.88rem; font-weight: bold; color: var(--text-primary); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .service-time { font-size: 0.82rem; color: var(--skeu-gold-light); font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .service-loc  { font-size: 0.75rem; color: var(--text-muted); text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

.gc-skeu .event-item  { display: flex; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .event-item:last-child { border-bottom: none; }
.gc-skeu .event-date  { min-width: 44px; height: 44px; background: linear-gradient(180deg,#0e0e0e,#1a1a1a); border: 1px solid var(--skeu-metal-dark); border-radius: 3px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.gc-skeu .event-day   { font-size: 1rem; font-weight: bold; color: var(--skeu-gold-light); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.gc-skeu .event-month { font-size: 0.6rem; text-transform: uppercase; color: var(--text-muted); }
.gc-skeu .event-title { font-size: 0.88rem; font-weight: bold; color: var(--text-primary); margin-bottom: 0.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .event-meta  { font-size: 0.78rem; color: var(--text-muted); text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

.gc-skeu .ministry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.gc-skeu .ministry-item { background: linear-gradient(180deg,#2a2a2a,#1a1a1a); border: 1px solid var(--skeu-metal-dark); border-radius: 3px; padding: 0.75rem; display: flex; align-items: center; gap: 0.6rem; transition: all 0.15s; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.gc-skeu .ministry-item:hover { background: linear-gradient(180deg,#333,#222); border-color: var(--skeu-gold); }
.gc-skeu .ministry-icon { font-size: 1.4rem; }
.gc-skeu .ministry-name { font-size: 0.82rem; font-weight: bold; color: var(--skeu-gold-light); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .ministry-sub  { font-size: 0.72rem; color: var(--text-muted); text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

.gc-skeu .news-item { display: flex; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .news-item:last-child { border-bottom: none; }
.gc-skeu .news-cat   { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--skeu-gold); font-weight: bold; margin-bottom: 0.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .news-title { font-size: 0.88rem; font-weight: bold; color: var(--text-primary); margin-bottom: 0.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .news-date  { font-size: 0.75rem; color: var(--text-muted); }

.gc-skeu .contact-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .contact-row:last-child { border-bottom: none; }
.gc-skeu .contact-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.gc-skeu .contact-label { font-size: 0.75rem; color: var(--text-muted); }
.gc-skeu .contact-value { font-size: 0.88rem; color: var(--text-primary); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .contact-value a { color: var(--skeu-gold); text-decoration: none; }

.gc-skeu .badge { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 2px; font-weight: bold; margin-left: 0.4rem; border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.gc-skeu .badge-new { background: linear-gradient(180deg,#1a3a1a,#0e200e); color: #6abf6a; }
.gc-skeu .badge-hot { background: linear-gradient(180deg,#3a2a0a,#20180a); color: #d4a843; }

/*  Source: example_chat.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chat-demo-wrapper {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}
.chat-demo-inner {
  max-width: 720px;
  width: 100%;
}

/* Shared chat layout */
.chat-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.chat-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}
.chat-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.chat-main {
  display: flex;
  flex-direction: column;
  height: 320px;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.chat-header-title {
  font-size: 1rem;
  font-weight: 600;
}
.chat-header-meta {
  font-size: 0.8rem;
  opacity: 0.7;
}
.chat-messages {
  flex: 1;
  border-radius: 10px;
  padding: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.chat-input-row input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  border: none;
  outline: none;
  font-size: 0.85rem;
}
.chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
}

.chat-search {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-search-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.chat-search-input {
  width: 35%;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: none;
  outline: none;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.chat-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  --bubble-self:      #3d2d16;
  --bubble-other:     #26201a;
  --noti-bg:          #3a301f;
  font-family: Tinos, serif;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
}
.chat-skeu .chat-shell {
  padding: 1.7rem 1.6rem 1.5rem;
}
.chat-skeu .chat-card {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  padding: 1.25rem 1.2rem 1.15rem;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1e1e1e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.8);
}
.chat-skeu .chat-title-block {
  margin-bottom: 1rem;
}
.chat-skeu .chat-icon {
  font-size: 1.4rem;
  color: var(--skeu-gold-light);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.chat-skeu .chat-title {
  color: var(--skeu-gold-light);
  font-size: 1.15rem;
  font-weight: bold;
  margin: 0.2rem 0 0.1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.chat-skeu .chat-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.chat-skeu .chat-sidebar {
  background: linear-gradient(180deg, #252525 0%, #181818 100%);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.7);
}
.chat-skeu .chat-section-title {
  color: var(--text-muted);
}
.chat-skeu .chat-sidebar-list span {
  color: var(--text-secondary);
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.chat-skeu .chat-sidebar-list span strong {
  color: var(--skeu-gold);
}
.chat-skeu .chat-main {
  color: var(--text-primary);
}
.chat-skeu .chat-header-title {
  color: var(--text-primary);
}
.chat-skeu .chat-header-meta {
  color: var(--text-muted);
}
.chat-skeu .chat-pill {
  background: var(--noti-bg);
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.chat-skeu .chat-messages {
  background: radial-gradient(circle at top, #342818 0%, #1c1510 55%, #100b08 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.7),
    inset 0 2px 6px rgba(0,0,0,0.8);
}
.chat-skeu .msg-row {
  display: flex;
  gap: 0.4rem;
}
.chat-skeu .msg-row.self {
  justify-content: flex-end;
}
.chat-skeu .msg-bubble {
  max-width: 70%;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  font-size: 0.82rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.9);
}
.chat-skeu .msg-self {
  background: linear-gradient(180deg, #4a3516 0%, #3a2a14 60%, #281c0e 100%);
  color: var(--text-primary);
  border-bottom-right-radius: 3px;
}
.chat-skeu .msg-other {
  background: linear-gradient(180deg, #26201a 0%, #1b1510 100%);
  color: var(--text-secondary);
  border-bottom-left-radius: 3px;
}
.chat-skeu .chat-input-row input {
  background: linear-gradient(180deg, #151515, #222);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.8);
}
.chat-skeu .chat-input-row input::placeholder {
  color: var(--text-muted);
}
.chat-skeu .chat-send-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light);
  font-size: 0.8rem;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.9),
    0 3px 8px rgba(0,0,0,0.7);
}

.chat-skeu .chat-search-label {
  color: var(--text-muted);
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.chat-skeu .chat-search-input {
  background: linear-gradient(180deg, #151515, #222);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.8);
}
.chat-skeu .chat-search-input::placeholder {
  color: var(--text-muted);
}
.chat-skeu .chat-search-input:focus {
  border-color: var(--skeu-gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.8),
    0 0 6px rgba(200,146,42,0.4);
}

/*  Source: example_contact_form.md  */
/* SKEUOMORPHISM STYLE */
.style-skeuo {
  --metal: #2e2e2e;
  --metal-light: #4a4a4a;
  --metal-dark: #111111;
  --gold: #c8922a;
  --gold-light: #e8b84b;
  --text-primary: #e8e0d0;
  --text-secondary: #b8a898;
  --text-muted: #7a6a5a;
}

.style-skeuo .contact-page {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  color: var(--text-secondary);
}

.style-skeuo .contact-card {
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 40%, #1e1e1e 100%);
  border-radius: 10px;
  border: 1px solid var(--metal-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 6px 20px rgba(0,0,0,0.8);
  color: var(--text-primary);
}

.style-skeuo .contact-card h2,
.style-skeuo .contact-title {
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.style-skeuo .input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: Tinos, serif;
  outline: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  background: linear-gradient(180deg, #0a0a0a 0%, #151515 100%);
  border: 1px solid #0a0a0a;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.9),
    inset 0 1px 3px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.08);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.style-skeuo .input::placeholder {
  color: var(--text-muted);
}

.style-skeuo .input:focus {
  border-color: rgba(187,134,252,0.4);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.9),
    0 0 10px rgba(187,134,252,0.4);
}

.style-skeuo .input--textarea {
  min-height: 140px;
  resize: vertical;
}

.style-skeuo .btn-primary {
  position: relative;
  padding: 0.5em 1.4em;
  margin:1.75rem 0.5rem 0.5rem 0;
  font-family: Tinos, serif;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  color: var(--gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg,
    #4a4a4a 0%,
    #2e2e2e 45%,
    #1e1e1e 55%,
    #3a3a3a 100%
  );
  border: 1px solid var(--metal-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 4px 8px rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.4);
}

.style-skeuo .btn-primary:hover {
  background: linear-gradient(180deg, #555555 0%, #363636 45%, #262626 55%, #444444 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.7) inset,
    0 6px 12px rgba(0,0,0,0.7),
    0 0 10px rgba(187,134,252,0.3);
  transform: translateY(-1px);
}

/*  Source: example_dashboard.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

.nav-skeu {
  --skeu-bg:           #1a1a1a;
  --skeu-metal:        #2e2e2e;
  --skeu-metal-light:  #4a4a4a;
  --skeu-metal-dark:   #111111;
  --skeu-gold:         #c8922a;
  --skeu-gold-light:   #e8b84b;
  --text-primary:      #e8e0d0;
  --text-secondary:    #b8a898;
  --text-muted:        #7a6a5a;
  --sidebar-width:     260px;
  --sidebar-collapsed-width: 64px;
  --nav-radius:        4px;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ---- ADMIN HEADER (merged from hdr-skeu) ---- */
.nav-skeu .admin-header {
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px rgba(0,0,0,0.7);
  margin-bottom: 1.5rem;
}

.nav-skeu .admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--skeu-gold-light);
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nav-skeu .admin-brand-icon {
  font-size: 1.5rem;
  color: var(--skeu-gold-light);
}

.nav-skeu .admin-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-skeu .welcome-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nav-skeu .btn-sm {
  padding: 0.4rem 1rem;
  border-radius: var(--nav-radius);
  font-size: 0.85rem;
  text-decoration: none;
  font-family: Tinos, serif;
  cursor: pointer;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 6px rgba(0,0,0,0.5);
  transition: all 0.15s;
}

.nav-skeu .btn-sm:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}

.nav-skeu .btn-sm:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

/* ---- LAYOUT ---- */
.nav-skeu .preview-layout {
  display: flex;
  gap: 1.5rem;
  min-height: 600px;
}

.nav-skeu .preview-content {
  flex: 1;
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  padding: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: block;
  overflow-y: auto;
  background: linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- SIDEBAR ---- */
.nav-skeu .sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222222 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 6px 20px rgba(0,0,0,0.7);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-skeu .sidebar-logo {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--skeu-metal-dark);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  justify-content: space-between;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 4px rgba(0,0,0,0.5);
}

.nav-skeu .sidebar-logo-icon { font-size: 1.5rem; flex-shrink: 0; }

.nav-skeu .sidebar-logo-info {
  flex: 1;
  overflow: hidden;
  transition: opacity 0.2s, width 0.35s;
  white-space: nowrap;
}
.nav-skeu .sidebar.collapsed .sidebar-logo-info { opacity: 0; width: 0; overflow: hidden; }

.nav-skeu .sidebar-logo-text {
  font-size: 1rem;
  font-weight: bold;
  color: var(--skeu-gold-light);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nav-skeu .sidebar-logo-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav-skeu .nav-menu {
  padding: 0.75rem 0;
  flex: 1;
  overflow-y: auto;
}

.nav-skeu .nav-section-label {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  padding: 0.75rem 1.5rem 0.25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nav-skeu .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.nav-skeu .nav-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.1) 100%);
  color: var(--skeu-gold-light);
  border-left-color: var(--skeu-gold);
}

.nav-skeu .nav-link.active {
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
  color: var(--skeu-gold-light);
  border-left-color: var(--skeu-gold-light);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.04);
}

.nav-skeu .nav-icon { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.nav-skeu .nav-text { flex: 1; overflow: hidden; transition: opacity 0.15s, max-width 0.35s; max-width: 200px; }

.nav-skeu .dropdown-arrow {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s, opacity 0.2s, max-width 0.2s;
  overflow: hidden;
}

.nav-skeu .nav-item.open .dropdown-arrow { transform: rotate(180deg); }

.nav-skeu .dropdown-menu {
  background: linear-gradient(180deg, #0e0e0e 0%, #181818 100%);
  border-left: 3px solid var(--skeu-gold);
  margin-left: 1.5rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}

.nav-skeu .nav-item.open .dropdown-menu { max-height: 300px; }

.nav-skeu .dropdown-item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.15s;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.nav-skeu .dropdown-item:hover {
  color: var(--skeu-gold-light);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.1) 100%);
  padding-left: 1.25rem;
}

.nav-skeu .dropdown-item.active { color: var(--skeu-gold-light); }

.nav-skeu .sidebar-search {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.nav-skeu .search-input-group {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06);
  background: #0a0a0a;
}

.nav-skeu .search-input {
  flex: 1;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: Tinos, serif;
}

.nav-skeu .search-input::placeholder { color: var(--text-muted); }

.nav-skeu .nav-admin .nav-link {
  background: linear-gradient(180deg, #3a2a14 0%, #1c1008 100%);
  color: var(--skeu-gold-light);
  margin: 0 0.75rem;
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-gold);
  border-left: 1px solid var(--skeu-gold);
  width: calc(100% - 1.5rem);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 6px rgba(0,0,0,0.5);
}

.nav-skeu .nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--skeu-metal-light), transparent);
  margin: 0.5rem 1rem;
  opacity: 0.4;
}

/*  Source: example_dashboard.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

.adm-skeu {
  --skeu-metal:        #2e2e2e;
  --skeu-metal-light:  #4a4a4a;
  --skeu-metal-dark:   #111111;
  --skeu-gold:         #c8922a;
  --skeu-gold-light:   #e8b84b;
  --text-primary:      #e8e0d0;
  --text-secondary:    #b8a898;
  --text-muted:        #7a6a5a;
  --sidebar-width:     240px;
  --nav-radius:        4px;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem;
  border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
}

/* === YOUR EXISTING SIDEBAR STYLES (UNCHANGED) === */
.adm-skeu .preview-layout {
  margin-top: 1rem;
  display: flex;
  gap: 1.5rem;
  min-height: 640px;
}

.adm-skeu .preview-content {
  flex: 1;
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0e0e0e 0%, #1a1a1a 100%);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05);
}

.adm-skeu .sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222222 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 6px 20px rgba(0,0,0,0.7);
}

.adm-skeu .sidebar-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 4px rgba(0,0,0,0.5);
}

.adm-skeu .sidebar-header-title {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold-light);
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .sidebar-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.adm-skeu .sidebar-section { padding: 0.75rem 0; }

.adm-skeu .sidebar-title {
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  padding: 0.5rem 1.5rem 0.25rem;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .sidebar-menu { display: flex; flex-direction: column; }

.adm-skeu .sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .sidebar-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.1) 100%);
  color: var(--skeu-gold-light);
  border-left-color: var(--skeu-gold);
}

.adm-skeu .sidebar-link.active {
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
  color: var(--skeu-gold-light);
  border-left-color: var(--skeu-gold-light);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.adm-skeu .sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--skeu-metal-dark);
  padding: 0.75rem 0;
  background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.adm-skeu .btn-back {
  display: block;
  margin: 0.5rem 0.75rem;
  padding: 0.5rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #1e1e1e 100%);
  color: var(--skeu-gold-light);
  border: 1px solid var(--skeu-metal-dark);
  border-radius: var(--nav-radius);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.15s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 6px rgba(0,0,0,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .btn-back:hover {
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 8px rgba(0,0,0,0.6);
}

/* === MISSING ADMIN HEADER STYLES - NOW ADDED === */
.adm-skeu .section-label {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .admin-header {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px rgba(0,0,0,0.7);
}

.adm-skeu .admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--skeu-gold-light);
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .admin-brand-icon {
  font-size: 1.5rem;
  color: var(--skeu-gold-light);
}

.adm-skeu .admin-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.adm-skeu .welcome-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.adm-skeu .btn-sm {
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  font-family: Tinos, serif;
  cursor: pointer;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 6px rgba(0,0,0,0.5);
  transition: all 0.15s;
}

.adm-skeu .btn-sm:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}

/*  Source: example_graphs.md  */
.charts-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem; border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 2rem;
}
.charts-skeu .chart-card {
  border-radius: 4px; border: 1px solid var(--skeu-metal-dark);
  padding: 1.25rem 1.5rem;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 40%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.7);
}
.charts-skeu .chart-title { font-size: 0.95rem; font-weight: bold; color: var(--skeu-gold-light); margin-bottom: 0.25rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.charts-skeu .chart-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.charts-skeu .legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.85rem; }
.charts-skeu .legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.charts-skeu .legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.4); }

/*  Source: example_header.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

.hdr-skeu {
  --skeu-metal:        #2e2e2e;
  --skeu-metal-light:  #4a4a4a;
  --skeu-metal-dark:   #111111;
  --skeu-gold:         #c8922a;
  --skeu-gold-light:   #e8b84b;
  --text-primary:      #e8e0d0;
  --text-secondary:    #b8a898;
  --text-muted:        #7a6a5a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem;
  border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hdr-skeu .main-header {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px rgba(0,0,0,0.7);
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222222 100%);
}

.hdr-skeu .header-top {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.hdr-skeu .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.hdr-skeu .logo-icon { font-size: 2rem; color: var(--skeu-gold-light); text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.hdr-skeu .logo-text {
  color: var(--skeu-gold-light);
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.hdr-skeu .church-tagline {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
  padding-left: 2.75rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hdr-skeu .header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hdr-skeu .btn {
  padding: 0.45rem 1.1rem;
  border-radius: 4px;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  font-family: Tinos, serif;
  font-weight: bold;
  transition: all 0.15s;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.7) inset, 0 4px 8px rgba(0,0,0,0.6);
}

.hdr-skeu .btn:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}

.hdr-skeu .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }

.hdr-skeu .contact-bar {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border-top: 1px solid var(--skeu-metal-dark);
  padding: 0.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.85rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04);
}

.hdr-skeu .contact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hdr-skeu .contact-item a { color: var(--skeu-gold); text-decoration: none; }

.hdr-skeu .admin-header {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px rgba(0,0,0,0.7);
}

.hdr-skeu .admin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--skeu-gold-light);
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hdr-skeu .admin-brand-icon { font-size: 1.5rem; color: var(--skeu-gold-light); }

.hdr-skeu .admin-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hdr-skeu .welcome-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hdr-skeu .btn-sm {
  padding: 0.4rem 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  font-family: Tinos, serif;
  cursor: pointer;
  color: var(--skeu-gold-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 3px 6px rgba(0,0,0,0.5);
  transition: all 0.15s;
}

.hdr-skeu .btn-sm:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}

.hdr-skeu .section-label {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/*  Source: example_login.md  */
.login-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  display: block;
  width: 100%;
  background: transparent;
}

.login-skeu .main-header {
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222 100%);
  border-bottom: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 8px rgba(0,0,0,0.6);
}
.login-skeu .header-top {
  padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.login-skeu .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.login-skeu .logo-icon { font-size: 2rem; color: var(--skeu-gold-light); text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.login-skeu .logo-text { color: var(--skeu-gold-light); font-size: 1.4rem; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.login-skeu .church-tagline { color: var(--text-muted); font-size: 0.85rem; font-style: italic; margin: 0; padding-left: 2.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.login-skeu .header-actions { display: flex; gap: 0.75rem; align-items: center; }
.login-skeu .btn-login-link, .login-skeu .btn-join {
  padding: 0.45rem 1.1rem; border-radius: 4px; font-size: 0.88rem; text-decoration: none;
  font-family: Tinos, serif; font-weight: bold; cursor: pointer; transition: all 0.15s;
  color: var(--skeu-gold-light); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.7) inset, 0 4px 8px rgba(0,0,0,0.6);
}
.login-skeu .btn-login-link:hover, .login-skeu .btn-join:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%); color: #fff;
}
.login-skeu .contact-bar {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border-top: 1px solid var(--skeu-metal-dark);
  padding: 0.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}
.login-skeu .contact-item { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.login-skeu .contact-item a { color: var(--skeu-gold); text-decoration: none; }

.login-skeu .login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem;
}
.login-skeu .login-card {
  border-radius: 4px; border: 1px solid var(--skeu-metal-dark);
  padding: 2.5rem; width: 100%; max-width: 420px;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1e1e1e 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.5) inset, 0 8px 32px rgba(0,0,0,0.8);
}
.login-skeu .login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-skeu .login-logo-icon { font-size: 3rem; color: var(--skeu-gold-light); display: block; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.login-skeu .login-title { color: var(--skeu-gold-light); font-size: 1.5rem; font-weight: bold; margin: 0.5rem 0 0.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.login-skeu .login-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.login-skeu .form-group { margin-bottom: 1.25rem; }
.login-skeu .form-label { display: block; color: var(--skeu-gold); font-size: 0.85rem; margin-bottom: 0.4rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.login-skeu .form-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 3px;
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary); font-size: 0.9rem; font-family: Tinos, serif;
  box-sizing: border-box; outline: none; transition: all 0.2s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 2px rgba(0,0,0,0.5);
}
.login-skeu .form-input:focus { border-color: var(--skeu-gold); box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 6px rgba(200,146,42,0.3); }
.login-skeu .form-input::placeholder { color: var(--text-muted); }

.login-skeu .form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.login-skeu .checkbox-label { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.login-skeu .checkbox-label input { accent-color: var(--skeu-gold); width: 15px; height: 15px; }
.login-skeu .forgot-link { color: var(--skeu-gold); font-size: 0.85rem; text-decoration: none; }
.login-skeu .forgot-link:hover { color: var(--skeu-gold-light); }

.login-skeu .btn-submit {
  width: 100%; padding: 0.8rem; border-radius: 4px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light); font-size: 1rem; font-family: Tinos, serif;
  font-weight: bold; cursor: pointer; transition: all 0.15s;
  border: 1px solid var(--skeu-metal-dark); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.7) inset, 0 4px 12px rgba(0,0,0,0.6);
}
.login-skeu .btn-submit:hover { background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%); color: #fff; }
.login-skeu .btn-submit:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0,0,0,0.7); }

.login-skeu .divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-muted); font-size: 0.8rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.login-skeu .divider::before, .login-skeu .divider::after { content: ''; flex: 1; height: 1px; background: var(--skeu-metal-dark); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }

.login-skeu .social-btns { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.login-skeu .btn-social {
  flex: 1; padding: 0.65rem; border-radius: 4px;
  background: linear-gradient(180deg, #3a3a3a, #252525);
  color: var(--skeu-gold-light); font-size: 0.85rem; font-family: Tinos, serif;
  cursor: pointer; transition: all 0.15s; border: 1px solid var(--skeu-metal-dark);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 6px rgba(0,0,0,0.5);
}
.login-skeu .btn-social:hover { background: linear-gradient(180deg, #4a4a4a, #333); color: #fff; }

.login-skeu .login-footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.login-skeu .login-footer a { color: var(--skeu-gold); text-decoration: none; }
.login-skeu .login-footer a:hover { color: var(--skeu-gold-light); }
/* Alert messages on login page */
.login-skeu .login-alert { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.25rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--skeu-metal-dark); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.login-skeu .login-alert-success { background: linear-gradient(180deg, #1a2e1a, #0e1a0e); color: #7dbb7d; }
.login-skeu .login-alert-error   { background: linear-gradient(180deg, #2e1a1a, #1a0e0e); color: #e08080; }
.login-skeu .login-alert-warning  { background: linear-gradient(180deg, #2e2a1a, #1a180e); color: #e0c080; }

/* Login page only: remove the border/radius/shadow boxing the header, keep gray gradient background */
body.skeu-scope:has(.login-skeu) .hdr-skeu .main-header {
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body.skeu-scope:has(.login-skeu) .hdr-skeu .header-top {
  box-shadow: none;
}
body.skeu-scope:has(.login-skeu) .hdr-skeu .contact-bar {
  border-top: 1px solid rgba(200,146,42,0.25);
  box-shadow: none;
}

/*  Source: example_model.md  */
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&family=Poppins:wght@300;400;500;700&display=swap');

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shared container so it looks like an overlay card */
.model-demo-wrapper {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}
.model-demo-inner {
  max-width: 540px;
  width: 100%;
}

/* Base form/input helpers so all styles behave */
.reg-orig input,
.reg-orig textarea,
.reg-glass input,
.reg-glass textarea,
.reg-neu-light input,
.reg-neu-light textarea,
.reg-neu-dark input,
.reg-neu-dark textarea,
.reg-skeu input,
.reg-skeu textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: Tinos, serif;
}

.reg-orig input,
.reg-glass input,
.reg-neu-light input,
.reg-neu-dark input,
.reg-skeu input {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 6px;
  border: none;
  outline: none;
}

.reg-orig textarea,
.reg-glass textarea,
.reg-neu-light textarea,
.reg-neu-dark textarea,
.reg-skeu textarea {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 6px;
  border: none;
  outline: none;
  min-height: 70px;
  resize: vertical;
}

.reg-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
}
.reg-skeu .reg-body {
  padding: 1.8rem 1.7rem 1.5rem;
}
.reg-skeu .reg-card {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  padding: 1.5rem 1.4rem 1.3rem;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
              inset 0 -1px 0 rgba(0,0,0,0.5),
              0 8px 32px rgba(0,0,0,0.8);
}
.reg-skeu .reg-logo { text-align: center; margin-bottom: 1rem; }
.reg-skeu .reg-logo-icon { font-size: 2rem; color: var(--skeu-gold-light); display: block; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.reg-skeu .reg-title { color: var(--skeu-gold-light); font-size: 1.3rem; font-weight: bold; margin: 0.4rem 0 0.2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.reg-skeu .reg-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.reg-skeu .form-group { margin-bottom: 0.9rem; }
.reg-skeu .form-label { display: block; color: var(--skeu-gold); font-size: 0.8rem; margin-bottom: 0.25rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.reg-skeu .form-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

.reg-skeu input,
.reg-skeu textarea {
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a);
  border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 2px rgba(0,0,0,0.5);
}
.reg-skeu input:focus,
.reg-skeu textarea:focus {
  border-color: var(--skeu-gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 6px rgba(200,146,42,0.3);
}

.reg-skeu .btn-submit {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.7rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light);
  font-size: 0.95rem;
  font-family: Tinos, serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid var(--skeu-metal-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.7),
              0 4px 12px rgba(0,0,0,0.6);
  transition: all 0.15s;
}
.reg-skeu .btn-submit:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}

/*  Source: example_register.md  */
.reg-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
}

.reg-skeu .main-header {
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222 100%);
  border-bottom: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 3px 8px rgba(0,0,0,0.6);
}
.reg-skeu .header-top {
  padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.reg-skeu .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.reg-skeu .logo-icon { font-size: 2rem; color: var(--skeu-gold-light); text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.reg-skeu .logo-text { color: var(--skeu-gold-light); font-size: 1.4rem; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.reg-skeu .church-tagline { color: var(--text-muted); font-size: 0.85rem; font-style: italic; margin: 0; padding-left: 2.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.reg-skeu .header-actions { display: flex; gap: 0.75rem; align-items: center; }
.reg-skeu .btn-hdr {
  padding: 0.45rem 1.1rem; border-radius: 4px; font-size: 0.88rem; text-decoration: none;
  font-family: Tinos, serif; font-weight: bold; cursor: pointer; transition: all 0.15s;
  color: var(--skeu-gold-light); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.7), 0 4px 8px rgba(0,0,0,0.6);
}
.reg-skeu .btn-hdr:hover { background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%); color: #fff; }
.reg-skeu .contact-bar {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border-top: 1px solid var(--skeu-metal-dark); padding: 0.5rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem; box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}
.reg-skeu .contact-item { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.reg-skeu .contact-item a { color: var(--skeu-gold); text-decoration: none; }

.reg-skeu .reg-body { min-height: 600px; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.reg-skeu .reg-card {
  border-radius: 4px; border: 1px solid var(--skeu-metal-dark); padding: 2.5rem;
  width: 100%; max-width: 520px;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.8);
}
.reg-skeu .reg-logo { text-align: center; margin-bottom: 1.75rem; }
.reg-skeu .reg-logo-icon { font-size: 3rem; color: var(--skeu-gold-light); display: block; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.reg-skeu .reg-title { color: var(--skeu-gold-light); font-size: 1.5rem; font-weight: bold; margin: 0.5rem 0 0.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.reg-skeu .reg-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

.reg-skeu .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.reg-skeu .form-group { margin-bottom: 1.25rem; }
.reg-skeu .form-label { display: block; color: var(--skeu-gold); font-size: 0.85rem; margin-bottom: 0.4rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.reg-skeu .form-input {
  width: 100%; padding: 0.7rem 1rem; border-radius: 3px;
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a);
  border: 1px solid var(--skeu-metal-dark); color: var(--text-primary);
  font-size: 0.9rem; font-family: Tinos, serif; box-sizing: border-box;
  outline: none; transition: all 0.2s;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 2px rgba(0,0,0,0.5);
}
.reg-skeu .form-input:focus { border-color: var(--skeu-gold); box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 6px rgba(200,146,42,0.3); }
.reg-skeu .form-input::placeholder { color: var(--text-muted); }
.reg-skeu select.form-input { appearance: none; cursor: pointer; }
.reg-skeu .form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

.reg-skeu .checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.25rem; }
.reg-skeu .checkbox-row input { accent-color: var(--skeu-gold); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.reg-skeu .checkbox-row label { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.reg-skeu .checkbox-row a { color: var(--skeu-gold); text-decoration: none; }

.reg-skeu .btn-submit {
  width: 100%; padding: 0.8rem; border-radius: 4px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light); font-size: 1rem; font-family: Tinos, serif; font-weight: bold;
  cursor: pointer; transition: all 0.15s; border: 1px solid var(--skeu-metal-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.6);
}
.reg-skeu .btn-submit:hover { background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%); color: #fff; }
.reg-skeu .btn-submit:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0,0,0,0.7); }

.reg-skeu .divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-muted); font-size: 0.8rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.reg-skeu .divider::before, .reg-skeu .divider::after { content: ''; flex: 1; height: 1px; background: var(--skeu-metal-dark); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }

.reg-skeu .social-btns { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.reg-skeu .btn-social {
  flex: 1; padding: 0.65rem; border-radius: 4px;
  background: linear-gradient(180deg, #3a3a3a, #252525); color: var(--skeu-gold-light);
  font-size: 0.85rem; font-family: Tinos, serif; cursor: pointer; transition: all 0.15s;
  border: 1px solid var(--skeu-metal-dark); display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.5);
}
.reg-skeu .btn-social:hover { background: linear-gradient(180deg, #4a4a4a, #333); color: #fff; }

.reg-skeu .reg-footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.reg-skeu .reg-footer a { color: var(--skeu-gold); text-decoration: none; }
.reg-skeu .reg-footer a:hover { color: var(--skeu-gold-light); }
/* Alert messages on register page */
.reg-skeu .reg-alert { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.25rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--skeu-metal-dark); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.reg-skeu .reg-alert-success { background: linear-gradient(180deg, #1a2e1a, #0e1a0e); color: #7dbb7d; }
.reg-skeu .reg-alert-error   { background: linear-gradient(180deg, #2e1a1a, #1a0e0e); color: #e08080; }
/* Register page — full-page container overrides */
body.skeu-scope:has(.reg-skeu) .reg-skeu {
  border-radius: 0;
  overflow: visible;
  border: none;
  box-shadow: none;
  background: transparent;
  display: block;
  width: 100%;
}
body.skeu-scope:has(.reg-skeu) .reg-skeu .reg-body {
  min-height: 100vh;
}

/*  Source: example_tables.md  */
/* ===================== SKEUOMORPHISM ===================== */
.tbl-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  --success:          #4a9a4a;
  --warning:          #c8922a;
  --danger:           #9a3a3a;
  --info:             #3a7a9a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem;
  border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tbl-skeu .table-wrapper {
  border-radius: 4px;
  border: 1px solid var(--skeu-metal-dark);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 6px 20px rgba(0,0,0,0.7);
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, var(--skeu-metal-light) 0%, var(--skeu-metal) 40%, #222 100%);
}


.tbl-skeu .table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 260px;
}
.tbl-skeu .table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tbl-skeu .table-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 40%, #252525 60%, #4a4a4a 100%); border-radius: 2px; border: 1px solid #111; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.6) inset; }
.tbl-skeu .table-scroll::-webkit-scrollbar-track { background: linear-gradient(180deg, #0a0a0a, #141414); border-radius: 2px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), inset 0 0 2px rgba(0,0,0,0.6); border: 1px solid #0a0a0a; }
.tbl-skeu .table-scroll::-webkit-scrollbar-corner { background: #0a0a0a; }
.tbl-skeu thead th { position: sticky; top: 0; z-index: 2; background: #1e1e1e; }

.tbl-skeu .table-title {
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--skeu-gold-light);
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  border-bottom: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
}

.tbl-skeu table {
  width: 100%;
  border-collapse: collapse;
}

.tbl-skeu thead tr {
  background: linear-gradient(180deg, #2e2e2e 0%, #1e1e1e 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) inset;
}

.tbl-skeu th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--skeu-gold);
  border-bottom: 1px solid var(--skeu-metal-dark);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.tbl-skeu td {
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(17,17,17,0.6);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

.tbl-skeu tr:last-child td { border-bottom: none; }

.tbl-skeu tbody tr:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.1) 100%);
  color: var(--skeu-gold-light);
}

.tbl-skeu tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.2);
}

.tbl-skeu .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}

.tbl-skeu .badge-success { background: linear-gradient(180deg, #2a4a2a, #1a3a1a); color: #6abf6a; }
.tbl-skeu .badge-warning { background: linear-gradient(180deg, #4a3a1a, #3a2a0a); color: var(--skeu-gold-light); }
.tbl-skeu .badge-danger  { background: linear-gradient(180deg, #4a2a2a, #3a1a1a); color: #bf6a6a; }
.tbl-skeu .badge-info    { background: linear-gradient(180deg, #1a3a4a, #0a2a3a); color: #6aaabf; }
.tbl-skeu .badge-accent  { background: linear-gradient(180deg, #3a2a4a, #2a1a3a); color: #b06abf; }

.tbl-skeu .amount-pos { color: #6abf6a; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.tbl-skeu .amount-neg { color: #bf6a6a; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.tbl-skeu .text-name  { color: var(--skeu-gold-light); font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }

/*  Source: example_tabs_pagination.md  */
.tp-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem; border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 2.5rem;
}

.tp-skeu .section-label {
  font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--skeu-gold); margin-bottom: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Underline tabs */
.tp-skeu .tabs-underline {
  border-bottom: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
  display: flex; gap: 0;
}
.tp-skeu .tabs-underline .tab {
  padding: 0.6rem 1.25rem; font-size: 0.9rem; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 0.2s; user-select: none; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.tp-skeu .tabs-underline .tab:hover { color: var(--text-secondary); }
.tp-skeu .tabs-underline .tab.active { color: var(--skeu-gold-light); border-bottom-color: var(--skeu-gold); font-weight: bold; }

/* Pill tabs */
.tp-skeu .tabs-pill {
  display: flex; gap: 0.3rem; padding: 0.35rem; border-radius: 4px; width: fit-content;
  background: linear-gradient(180deg, #0a0a0a, #141414);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}
.tp-skeu .tabs-pill .tab {
  padding: 0.5rem 1.1rem; font-size: 0.88rem; color: var(--text-muted);
  cursor: pointer; border-radius: 3px; transition: all 0.15s; user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.tp-skeu .tabs-pill .tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
.tp-skeu .tabs-pill .tab.active {
  background: linear-gradient(180deg, #3a3a3a, #252525); color: var(--skeu-gold-light);
  font-weight: bold; border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);
}

/* Button tabs */
.tp-skeu .tabs-btn { display: flex; gap: 0.5rem; }
.tp-skeu .tabs-btn .tab {
  padding: 0.5rem 1.1rem; font-size: 0.88rem; color: var(--text-muted);
  cursor: pointer; border-radius: 3px; transition: all 0.15s; user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  background: linear-gradient(180deg, #3a3a3a, #252525);
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.5);
}
.tp-skeu .tabs-btn .tab:hover { color: var(--skeu-gold-light); background: linear-gradient(180deg, #444, #2e2e2e); }
.tp-skeu .tabs-btn .tab.active {
  color: var(--skeu-gold-light); font-weight: bold;
  background: linear-gradient(180deg, #1a1a1a, #0e0e0e);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
  border-color: var(--skeu-gold);
}

/* Tab panel */
.tp-skeu .tab-panel {
  border-radius: 3px; border: 1px solid var(--skeu-metal-dark);
  padding: 1.25rem 1.5rem; margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.9rem;
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8); text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}

/* Pagination numbered */
.tp-skeu .pagination { display: flex; align-items: center; gap: 0.4rem; }
.tp-skeu .page-btn {
  min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; border: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(180deg, #3a3a3a, #252525);
  color: var(--text-secondary); font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);
  padding: 0 0.5rem;
}
.tp-skeu .page-btn:hover { color: var(--skeu-gold-light); background: linear-gradient(180deg, #444, #2e2e2e); }
.tp-skeu .page-btn.active {
  color: var(--skeu-gold-light); font-weight: bold;
  background: linear-gradient(180deg, #1a1a1a, #0e0e0e);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8); border-color: var(--skeu-gold);
}
.tp-skeu .page-btn.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.tp-skeu .page-ellipsis { color: var(--text-muted); padding: 0 0.25rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

/* Pagination minimal */
.tp-skeu .pagination-minimal { display: flex; align-items: center; gap: 1rem; }
.tp-skeu .page-info { color: var(--text-muted); font-size: 0.88rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.tp-skeu .page-info span { color: var(--skeu-gold-light); font-weight: bold; }

/* Pagination rounded */
.tp-skeu .pagination-rounded { display: flex; align-items: center; gap: 0.4rem; }
.tp-skeu .page-btn-round {
  min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(135deg, #3a3a3a, #252525);
  color: var(--text-secondary); font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);
}
.tp-skeu .page-btn-round:hover { color: var(--skeu-gold-light); }
.tp-skeu .page-btn-round.active {
  color: var(--skeu-gold-light); font-weight: bold;
  background: linear-gradient(135deg, #1a1a1a, #0e0e0e);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8); border-color: var(--skeu-gold);
}
.tp-skeu .page-btn-round.disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/*  Source: example_toast_notifications.md  */
.toast-skeu {
  --skeu-metal:       #2e2e2e;
  --skeu-metal-light: #4a4a4a;
  --skeu-metal-dark:  #111111;
  --skeu-gold:        #c8922a;
  --skeu-gold-light:  #e8b84b;
  --text-primary:     #e8e0d0;
  --text-secondary:   #b8a898;
  --text-muted:       #7a6a5a;
  font-family: Tinos, serif;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
  padding: 2rem; border-radius: 8px;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 2rem;
}

.toast-skeu .section-label {
  font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--skeu-gold); margin-bottom: 0.75rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.toast-skeu .toast-stack { display: flex; flex-direction: column; gap: 0.75rem; }

.toast-skeu .toast {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 60%, #1e1e1e 100%);
  border: 1px solid var(--skeu-metal-dark);
  border-radius: 4px; padding: 0.85rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.7);
  position: relative; max-width: 380px;
}
.toast-skeu .toast-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.toast-skeu .toast-body { flex: 1; min-width: 0; }
.toast-skeu .toast-title { font-size: 0.9rem; font-weight: bold; color: var(--skeu-gold-light); margin-bottom: 0.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.toast-skeu .toast-msg   { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.toast-skeu .toast-time  { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.toast-skeu .toast-close { font-size: 1rem; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }

.toast-skeu .toast.toast-success { border-left: 4px solid #4a9a4a; }
.toast-skeu .toast.toast-danger  { border-left: 4px solid #9a3a3a; }
.toast-skeu .toast.toast-warning { border-left: 4px solid var(--skeu-gold); }
.toast-skeu .toast.toast-info    { border-left: 4px solid #3a7a9a; }
.toast-skeu .toast.toast-accent  { border-left: 4px solid #7a4a9a; }

.toast-skeu .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 60%; }
.toast-skeu .toast-success .toast-progress { background: linear-gradient(90deg, #2a5a2a, #4a9a4a); }
.toast-skeu .toast-danger  .toast-progress { background: linear-gradient(90deg, #5a1a1a, #9a3a3a); }
.toast-skeu .toast-warning .toast-progress { background: linear-gradient(90deg, var(--skeu-gold), var(--skeu-gold-light)); }
.toast-skeu .toast-info    .toast-progress { background: linear-gradient(90deg, #1a4a5a, #3a7a9a); }
.toast-skeu .toast-accent  .toast-progress { background: linear-gradient(90deg, #3a1a5a, #7a4a9a); }

.toast-skeu .toast-filled {
  display: flex; align-items: flex-start; gap: 0.85rem;
  border: 1px solid var(--skeu-metal-dark); border-radius: 4px; padding: 0.85rem 1rem;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
  position: relative; max-width: 380px;
}
.toast-skeu .toast-filled.toast-success { background: linear-gradient(180deg, #1a2f1a, #0e1e0e); border-color: #2a4a2a; }
.toast-skeu .toast-filled.toast-danger  { background: linear-gradient(180deg, #2f1a1a, #1e0e0e); border-color: #4a2a2a; }
.toast-skeu .toast-filled.toast-warning { background: linear-gradient(180deg, #2f240a, #1e180a); border-color: #4a3a1a; }
.toast-skeu .toast-filled.toast-info    { background: linear-gradient(180deg, #0e1e2f, #0a121e); border-color: #1a3a4a; }
.toast-skeu .toast-filled .toast-title  { font-size: 0.9rem; font-weight: bold; color: var(--skeu-gold-light); margin-bottom: 0.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.toast-skeu .toast-filled .toast-msg    { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.toast-skeu .toast-filled .toast-close  { font-size: 1rem; color: var(--text-muted); cursor: pointer; }

.toast-skeu .toast-snack {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, #3a3a3a, #252525);
  border: 1px solid var(--skeu-metal-dark);
  border-radius: 100px; padding: 0.6rem 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 10px rgba(0,0,0,0.7);
  max-width: 380px;
}
.toast-skeu .toast-snack .toast-msg { font-size: 0.88rem; color: var(--text-secondary); flex: 1; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.toast-skeu .toast-snack .snack-action { font-size: 0.82rem; color: var(--skeu-gold-light); cursor: pointer; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }


/* ============================================================
   ADMIN PAGE LAYOUT  .admin-page-layout / .page-header / .page-grid
   ============================================================ */
.admin-page-layout {
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-family: Tinos, serif;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 0.4rem 0;
}

.page-header p {
  margin: 0;
  font-size: 0.95rem;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.page-grid--wide  { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.page-grid--full  { grid-template-columns: 1fr; }
.page-grid--2col  { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .page-grid--2col { grid-template-columns: 1fr; }
  .page-grid--wide { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .page-grid { grid-template-columns: 1fr; }
  .admin-page-layout { padding: 1rem; }
  .page-header h1    { font-size: 1.3rem; }
}
/* ============================================================
   THEME PICKER  (Skeuomorphism)
   ============================================================ */
.theme-picker-wrapper { position: relative; display: inline-block; }
.theme-picker-btn     { font-size: 1.1rem; cursor: pointer; background: none; border: none; padding: 0.25rem 0.5rem; color: #e8b84b; }
.theme-picker-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  border: 1px solid #111111; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 20px rgba(0,0,0,0.8);
  z-index: 9999; overflow: hidden;
}
.theme-picker-item { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.875rem; color: #e8e0d0; transition: background 0.15s; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.theme-picker-item:hover,
.theme-picker-item.active { color: #e8b84b; padding-left: 1.5rem; background: rgba(255,255,255,0.05); }
.page-header h1 { color: #e8b84b; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.page-header p  { color: #7a6a5a; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }

/* ============================================================
   SIDEBAR COLLAPSE  .nav-skeu
   ============================================================ */
.nav-skeu .sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}
.nav-skeu .sidebar.collapsed .sidebar-logo    { justify-content: center; flex-direction: column; gap: 0.5rem; padding: 1rem 0; }
.nav-skeu .sidebar.collapsed .nav-text        { opacity: 0; max-width: 0; overflow: hidden; transition: opacity 0.2s, max-width 0.35s; white-space: nowrap; }
.nav-skeu .sidebar.collapsed .nav-section-label { opacity: 0; height: 0; padding: 0; overflow: hidden; margin: 0; }
.nav-skeu .sidebar.collapsed .dropdown-arrow  { opacity: 0; max-width: 0; overflow: hidden; }
.nav-skeu .sidebar.collapsed .dropdown-menu   { max-height: 0 !important; }
.nav-skeu .sidebar.collapsed .sidebar-search  { padding: 0.75rem 0; display: flex; justify-content: center; }
.nav-skeu .sidebar.collapsed .search-input-group { width: 44px; }
.nav-skeu .sidebar.collapsed .search-input   { width: 0; padding: 0; }
.nav-skeu .sidebar.collapsed .collapse-btn   { transform: rotate(180deg); }
.nav-skeu .collapse-btn {
  width: 26px; height: 26px;
  border-radius: var(--nav-radius);
  border: 1px solid var(--skeu-metal-dark);
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--skeu-gold-light);
  font-size: 0.65rem;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  transition: box-shadow 0.15s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-skeu .collapse-btn:hover  { background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%); }
.nav-skeu .collapse-btn:active { transform: translateY(0) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }


/*  Legend Edit Modal  Skeuomorphism  */
.leg-modal-wrap.reg-skeu {
  --skeu-metal-dark: #111111; --skeu-gold: #c8922a; --skeu-gold-light: #e8b84b;
  --text-primary: #e8e0d0; --text-secondary: #b8a898; --text-muted: #7a6a5a;
  border-radius: 8px; overflow: hidden;
  border: 3px solid var(--skeu-metal-dark);
  box-shadow: 0 0 0 1px #4a4a4a, 0 8px 32px rgba(0,0,0,0.8);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px),
    linear-gradient(160deg, #2a1e0e 0%, #1c1008 60%, #0e0906 100%);
}
.leg-modal-wrap.reg-skeu .reg-body { padding: 1.4rem 1.6rem 1.3rem; }
.leg-modal-wrap.reg-skeu .reg-card {
  border-radius: 4px; border: 1px solid var(--skeu-metal-dark); padding: 1.25rem;
  background:
    repeating-linear-gradient(92deg, transparent, transparent 1px, rgba(255,255,255,0.012) 1px, rgba(255,255,255,0.012) 2px),
    linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 30%, #1e1e1e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.5), 0 8px 32px rgba(0,0,0,0.8);
}
.leg-modal-wrap.reg-skeu input[type=text],
.leg-modal-wrap.reg-skeu select,
.leg-modal-wrap.reg-skeu input[type=time],
.leg-modal-wrap.reg-skeu textarea {
  background: linear-gradient(180deg, #0e0e0e, #1a1a1a); border: 1px solid var(--skeu-metal-dark);
  color: var(--text-primary);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 2px rgba(0,0,0,0.5);
}
.leg-modal-wrap.reg-skeu select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.2rem;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8921a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0e0e0e, #1a1a1a);
  background-repeat: no-repeat, repeat;
  background-position: right 0.65rem center, 0 0;
  background-size: 0.75rem, auto;
}
.leg-modal-wrap.reg-skeu input[type=text]:focus,
.leg-modal-wrap.reg-skeu select:focus,
.leg-modal-wrap.reg-skeu input[type=time]:focus,
.leg-modal-wrap.reg-skeu textarea:focus {
  border-color: var(--skeu-gold);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 0 6px rgba(200,146,42,0.3);
}
.leg-modal-wrap.reg-skeu .leg-m-title  { color: var(--skeu-gold-light); margin: 0 0 1rem; font-size: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.leg-modal-wrap.reg-skeu .leg-m-label  { display: block; color: var(--skeu-gold); font-size: 0.8rem; margin-bottom: 0.25rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.leg-modal-wrap.reg-skeu .leg-m-hint   { font-size: 0.75rem; color: var(--text-muted); }
.leg-modal-wrap.reg-skeu .leg-m-close  { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; }
.leg-modal-wrap.reg-skeu .leg-m-save {
  padding: 0.55rem 1.1rem; border-radius: 4px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 45%, #1e1e1e 55%, #3a3a3a 100%);
  color: var(--skeu-gold-light); font-weight: bold; cursor: pointer;
  border: 1px solid var(--skeu-metal-dark); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.6);
}
.leg-modal-wrap.reg-skeu .leg-m-save:hover {
  background: linear-gradient(180deg, #555 0%, #363636 45%, #262626 55%, #444 100%);
  color: #fff;
}
.leg-modal-wrap.reg-skeu .leg-m-cancel {
  padding: 0.55rem 1.1rem; border-radius: 4px;
  background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
  color: var(--text-secondary); cursor: pointer;
  border: 1px solid var(--skeu-metal-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
/* custom select */
.leg-modal-wrap.reg-skeu .leg-m-sel-btn {
  background: linear-gradient(180deg, #2e2e2e 0%, #1c1c1c 100%);
  border: 1px solid var(--skeu-metal-dark); color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 6px rgba(0,0,0,0.6);
}
.leg-modal-wrap.reg-skeu .leg-m-sel-btn:hover { background: linear-gradient(180deg, #363636 0%, #222 100%); }
.leg-modal-wrap.reg-skeu .leg-m-select.open .leg-m-sel-btn {
  border-color: var(--skeu-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 8px rgba(200,146,42,0.35);
}
.leg-modal-wrap.reg-skeu .leg-m-sel-icon { color: var(--skeu-gold); }
.leg-modal-wrap.reg-skeu .leg-m-sel-list {
  background: #141414; border: 1px solid var(--skeu-metal-dark);
  box-shadow: 0 10px 30px rgba(0,0,0,0.88), inset 0 1px 0 rgba(255,255,255,0.05);
}
.leg-modal-wrap.reg-skeu .leg-m-sel-opt { color: var(--text-primary); border-bottom: 1px solid rgba(255,255,255,0.05); }
.leg-modal-wrap.reg-skeu .leg-m-sel-opt:hover { background: rgba(200,146,42,0.18); color: var(--skeu-gold-light); }
.leg-modal-wrap.reg-skeu .leg-m-sel-opt.leg-m-sel-opt-active {
  background: rgba(200,146,42,0.22); color: var(--skeu-gold); font-weight: 600;
}


/* ============================================================
   INDEX PAGE  STYLES  (gc-skeu)
   ============================================================ */
/* ============================================================
   5. SKEUOMORPHISM
   ============================================================ */
.gc-skeu {
  font-family: Tinos, serif;
  padding: 2rem;
}
.gc-skeu .section-title { font-size: 1.4rem; font-weight: bold; color: #e8b84b; margin-bottom: 0.3rem; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.gc-skeu .section-sub   { font-size: 0.85rem; color: #7a6a5a; margin-bottom: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .card-grid     { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
.gc-skeu .card {
  background: repeating-linear-gradient(92deg,transparent,transparent 1px,rgba(255,255,255,0.012) 1px,rgba(255,255,255,0.012) 2px), linear-gradient(180deg,#3a3a3a 0%,#2a2a2a 40%,#1e1e1e 100%);
  border: 1px solid #111111; border-radius: 4px; padding: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.7);
  transition: box-shadow 0.2s; position: relative; overflow: hidden;
}
.gc-skeu .card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 24px rgba(0,0,0,0.8); }
.gc-skeu .card-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#c8922a,#e8b84b); }
.gc-skeu .card-icon  { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.gc-skeu .card-title { font-size: 1rem; font-weight: bold; color: #e8b84b; margin-bottom: 0.5rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.gc-skeu .card-body  { font-size: 0.88rem; color: #b8a898; line-height: 1.6; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.gc-skeu .card-link  { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: #c8922a; text-decoration: none; margin-top: 1rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); cursor: pointer; }
.gc-skeu .card-welcome {
  background: repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px), linear-gradient(135deg,#2a1e0e 0%,#1c1008 100%);
  border: 1px solid #c8922a; border-radius: 4px; padding: 2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 24px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 0.75rem; position: relative; overflow: hidden; grid-column: span 3;
}
.gc-skeu .card-welcome::before { content: '\271A'; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 8rem; color: rgba(200,146,42,0.06); line-height: 1; }
.gc-skeu .welcome-tag   { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #c8922a; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .welcome-title { font-size: 1.6rem; font-weight: bold; color: #e8b84b; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.gc-skeu .welcome-body  { font-size: 0.92rem; color: #b8a898; max-width: 520px; line-height: 1.7; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.gc-skeu .welcome-btns  { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.gc-skeu .btn-primary { padding: 0.55rem 1.4rem; border-radius: 3px; font-size: 0.88rem; background: linear-gradient(180deg,#4a4a4a 0%,#2e2e2e 45%,#1e1e1e 55%,#3a3a3a 100%); color: #e8b84b; border: 1px solid #111111; text-decoration: none; cursor: pointer; transition: all 0.15s; text-shadow: 0 1px 2px rgba(0,0,0,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.6); }
.gc-skeu .btn-primary:hover { background: linear-gradient(180deg,#555 0%,#363636 45%,#262626 55%,#444 100%); }
.gc-skeu .btn-outline  { padding: 0.55rem 1.4rem; border-radius: 3px; font-size: 0.88rem; background: linear-gradient(180deg,#3a3a3a,#252525); color: #b8a898; border: 1px solid #111111; text-decoration: none; cursor: pointer; transition: all 0.15s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.5); }
.gc-skeu .btn-outline:hover { color: #e8b84b; }
.gc-skeu .service-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .service-row:last-child { border-bottom: none; }
.gc-skeu .service-name { font-size: 0.88rem; font-weight: bold; color: #e8e0d0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .service-time { font-size: 0.82rem; color: #e8b84b; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .service-loc  { font-size: 0.75rem; color: #7a6a5a; text-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.gc-skeu .event-item  { display: flex; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .event-item:last-child { border-bottom: none; }
.gc-skeu .event-date  { min-width: 44px; height: 44px; background: linear-gradient(180deg,#0e0e0e,#1a1a1a); border: 1px solid #111111; border-radius: 3px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.gc-skeu .event-day   { font-size: 1rem; font-weight: bold; color: #e8b84b; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.gc-skeu .event-month { font-size: 0.6rem; text-transform: uppercase; color: #7a6a5a; }
.gc-skeu .event-info  { flex: 1; }
.gc-skeu .event-title { font-size: 0.88rem; font-weight: bold; color: #e8e0d0; margin-bottom: 0.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .event-meta  { font-size: 0.78rem; color: #7a6a5a; }
.gc-skeu .ministry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.gc-skeu .ministry-item { background: linear-gradient(180deg,#2a2a2a,#1a1a1a); border: 1px solid #111111; border-radius: 3px; padding: 0.75rem; display: flex; align-items: center; gap: 0.6rem; transition: all 0.15s; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.gc-skeu .ministry-item:hover { background: linear-gradient(180deg,#333,#222); border-color: #c8922a; }
.gc-skeu .ministry-icon { font-size: 1.4rem; }
.gc-skeu .ministry-name { font-size: 0.82rem; font-weight: bold; color: #e8b84b; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .ministry-sub  { font-size: 0.72rem; color: #7a6a5a; }
.gc-skeu .news-item { display: flex; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .news-item:last-child { border-bottom: none; }
.gc-skeu .news-cat   { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: #c8922a; font-weight: bold; margin-bottom: 0.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .news-title { font-size: 0.88rem; font-weight: bold; color: #e8e0d0; margin-bottom: 0.15rem; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .news-date  { font-size: 0.75rem; color: #7a6a5a; }
.gc-skeu .contact-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.4); }
.gc-skeu .contact-row:last-child { border-bottom: none; }
.gc-skeu .contact-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.gc-skeu .contact-label { font-size: 0.75rem; color: #7a6a5a; }
.gc-skeu .contact-value { font-size: 0.88rem; color: #e8e0d0; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.gc-skeu .contact-value a { color: #c8922a; text-decoration: none; }
.gc-skeu .badge { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 2px; font-weight: bold; margin-left: 0.4rem; border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.gc-skeu .badge-new { background: linear-gradient(180deg,#1a3a1a,#0e200e); color: #6abf6a; }
.gc-skeu .badge-hot { background: linear-gradient(180deg,#3a2a0a,#20180a); color: #d4a843; }

/* ============================================================
   RESPONSIVE (index page)
   ============================================================ */
@media (max-width: 900px) {
    .gc-skeu .card-grid   { grid-template-columns: 1fr 1fr; }
    .gc-skeu .card-welcome { grid-column: span 2; }
}
@media (max-width: 600px) {
    .gc-skeu .card-grid    { grid-template-columns: 1fr; }
    .gc-skeu .card-welcome { grid-column: span 1; }
    .gc-skeu .welcome-btns { flex-direction: column; }
    .gc-skeu               { padding: 1rem; }
}

/*  Backup & Restore (admin_backup_restore.php)  */
.skeu-scope .bk-progress-wrap {
  width: 100%;
  height: 8px;
  background: var(--admin-input-bg, rgba(255,255,255,0.08));
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.skeu-scope .bk-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--admin-purple, #bb86fc);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.skeu-scope .bk-status {
  font-size: 0.82rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.6rem;
  display: none;
}
.skeu-scope .bk-status.ok      { background: rgba(52,201,124,0.12); color: #34c97c; border: 1px solid rgba(52,201,124,0.3); }
.skeu-scope .bk-status.err     { background: rgba(255,92,92,0.12);  color: #ff5c5c; border: 1px solid rgba(255,92,92,0.3); }
.skeu-scope .bk-status.pending { background: rgba(255,255,255,0.05); color: #aaa;   border: 1px solid rgba(255,255,255,0.1); }
.skeu-scope .bk-hist-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: var(--admin-input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--admin-input-border, rgba(255,255,255,0.08));
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
}
.skeu-scope .bk-hist-row:last-child { margin-bottom: 0; }
.skeu-scope .bk-hist-meta    { flex: 1; min-width: 0; }
.skeu-scope .bk-hist-name    { font-weight: 600; font-size: 0.8rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skeu-scope .bk-hist-info    { color: var(--text-muted); font-size: 0.76rem; margin-top: 2px; }
.skeu-scope .bk-hist-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.skeu-scope .bk-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--admin-input-border, rgba(255,255,255,0.1)); margin-bottom: 0.9rem; }
.skeu-scope .bk-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 0.4rem 1rem;
  cursor: pointer;
  font-size: 0.83rem;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.skeu-scope .bk-tab-btn.active { color: var(--admin-purple, #bb86fc); border-bottom-color: var(--admin-purple, #bb86fc); }
.skeu-scope .bk-tab-btn:hover  { color: var(--text-primary); }
.skeu-scope .bk-tab-panel        { display: none; }
.skeu-scope .bk-tab-panel.active { display: block; }