/* ============================================================================
   CYBER OBSIDIAN & ELECTRIC LIQUID GLASS DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Ultra-refined Liquid Glass UI: Organic refractive liquid glass distortion,
   optical specular reflections (double-rim inset highlights), continuous squircle
   curvature, and precision physics-based fluid spring curves
   (cubic-bezier(0.175, 0.885, 0.32, 2.2)) with deep cyber obsidian dark tones.
   ========================================================================== */

:root {
    /* ---- Cyber Electric Accent Suite ---- */
    --accent:                 #3b82f6; /* Electric Azure */
    --accent-hover:           #60a5fa;
    --accent-active:          #2563eb;
    --accent-soft:            rgba(59, 130, 246, 0.15);
    --accent-ring:            rgba(59, 130, 246, 0.35);
    --accent-gradient:        linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    --accent-gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(99, 102, 241, 0.18) 50%, rgba(139, 92, 246, 0.18) 100%);
    --accent-glow:            0 0 28px -4px rgba(59, 130, 246, 0.5);
    --accent-glow-strong:     0 0 44px -6px rgba(99, 102, 241, 0.65);

    /* ---- Backward Compatibility & Aliases (Unified Color Palette) ---- */
    --luxury-gold:            var(--accent);
    --luxury-gold-light:      #93c5fd;
    --luxury-gold-dark:       #1d4ed8;
    --luxury-gold-soft:       var(--accent-soft);
    --luxury-gradient:        var(--accent-gradient);
    --luxury-glow:            var(--accent-glow);
    --luxury-glow-strong:     var(--accent-glow-strong);

    /* ---- Cyber Neon Spectrum ---- */
    --cyan:                   #38bdf8; /* Neon Cyan */
    --cyan-soft:              rgba(56, 189, 248, 0.14);
    --cyan-glow:              0 0 24px -4px rgba(56, 189, 248, 0.5);
    --purple:                 #a855f7; /* Electric Purple */
    --purple-soft:            rgba(168, 85, 247, 0.14);
    --purple-glow:            0 0 24px -4px rgba(168, 85, 247, 0.5);
    --indigo:                 #6366f1; /* Vivid Indigo */
    --indigo-soft:            rgba(99, 102, 241, 0.14);
    --success:                #10b981; /* Cyber Emerald */
    --success-soft:           rgba(16, 185, 129, 0.14);
    --success-glow:           0 0 24px -4px rgba(16, 185, 129, 0.5);
    --warning:                #f59e0b; /* Amber */
    --warning-soft:           rgba(245, 158, 11, 0.14);
    --warning-glow:           0 0 24px -4px rgba(245, 158, 11, 0.5);
    --danger:                 #f43f5e; /* Rose / Crimson */
    --danger-soft:            rgba(244, 63, 94, 0.14);
    --danger-glow:            0 0 24px -4px rgba(244, 63, 94, 0.5);

    /* ---- Canvas & Liquid Glass Surfaces (Cyber Obsidian) ---- */
    --bg:                 #080b11;
    --surface-1:          rgba(15, 23, 42, 0.65);
    --surface-2:          rgba(22, 33, 58, 0.72);
    --surface-3:          rgba(30, 41, 69, 0.82);
    --surface-sunk:       rgba(8, 12, 22, 0.8);
    --surface-elevated:   rgba(36, 50, 82, 0.9);

    /* ---- Refractive Fluid Glass Optics (Developer: Abdughafur) ---- */
    --glass-blur:         blur(3px);
    --glass-blur-heavy:   blur(4px);
    --glass-blur-subtle:  blur(2.1px);
    --glass-distortion:   url(#liquid-glass-distortion);

    /* ---- Specular Edge Highlights & Liquid Rims (Transparent Borders) ---- */
    --border:             transparent;
    --border-strong:      transparent;
    --border-subtle:      transparent;
    --border-tertiary:    transparent;
    --border-color:       transparent;
    --border-primary:     transparent;
    --border-secondary:   transparent;
    --border-glow:        rgba(59, 130, 246, 0.55);
    --glass-specular-top: none;
    --glass-specular-bot: none;
    --glass-shine:        none;
    --glass-tint:         rgba(255, 255, 255, 0.03);
    --glass-tint-dark:    rgba(15, 23, 42, 0.45);

    /* ---- Liquid Typography & Legibility ---- */
    --text-primary:       #f8fafc;
    --text-secondary:     #94a3b8;
    --text-tertiary:      #64748b;
    --text-quaternary:    #475569;
    --text-on-accent:     #ffffff;

    /* ---- Continuous Squircle Curvature (Apple Radii) ---- */
    --radius-xs:          6px;
    --radius-sm:          10px;
    --radius-md:          16px;
    --radius-lg:          22px;
    --radius-xl:          28px;
    --radius-2xl:         36px;
    --radius-full:        9999px;

    /* ---- Fluid Glass Depth & Elevation (Abdughafur Liquid Shadows) ---- */
    --shadow-liquid:      0 24px 96px rgba(31, 38, 135, 0.21);
    --shadow-liquid-glass: 0 24px 96px rgba(31, 38, 135, 0.21);
    --shadow-liquid-glass-hover: 0 32px 120px rgba(31, 38, 135, 0.35);
    --shadow-sm:          0 4px 14px rgba(0, 0, 0, 0.25);
    --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg:          0 14px 38px rgba(0, 0, 0, 0.45);
    --shadow-xl:          0 22px 65px rgba(0, 0, 0, 0.55);

    /* ---- Spacing Scale ---- */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

    /* ---- Typography Stacks ---- */
    --font-display:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    --font-mono:          'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* ---- Liquid Fluid Spring & Physics Motion Curves ---- */
    --ease-spring:        cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-liquid:        cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-elastic:       cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-fast:             0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-base:             0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-slow:             0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
    --t-spring:           0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ================= Global & Legacy Aliases ================= */
    --ios-bg-primary:     var(--bg);
    --ios-bg-secondary:   var(--surface-1);
    --ios-bg-tertiary:    var(--surface-2);
    --ios-bg-elevated:    var(--surface-3);
    --ios-fill-primary:   rgba(255, 255, 255, 0.1);
    --ios-fill-secondary: rgba(255, 255, 255, 0.06);
    --ios-fill-tertiary:  rgba(255, 255, 255, 0.03);
    --bg-primary:         var(--surface-1);
    --bg-secondary:       var(--surface-2);

    --ios-blue:           var(--accent);
    --ios-teal:           var(--cyan);
    --ios-indigo:         var(--indigo);
    --ios-purple:         var(--purple);
    --ios-green:          var(--success);
    --ios-orange:         var(--warning);
    --ios-yellow:         #facc15;
    --ios-red:            var(--danger);
    --ios-pink:           #f43f5e;
    --ios-gray:           #94a3b8;
    --ios-gray2:          #64748b;
    --ios-gray3:          #475569;
    --ios-gray4:          #334155;
    --ios-gray5:          rgba(255,255,255,0.12);
    --ios-gray6:          rgba(255,255,255,0.06);

    --primary:            var(--accent);
    --primary-hover:      var(--accent-hover);
    --secondary:          var(--purple);
    --info:               var(--cyan);

    --border-primary:     transparent;
    --border-secondary:   transparent;
    --border-tertiary:    transparent;
    --border-color:       transparent;

    --transition-fast:   var(--t-fast);
    --transition-base:   var(--t-base);
    --transition-slow:   var(--t-slow);
    --transition-spring: var(--t-base);
}

/* ============================================================================
   ABDUGHAFUR LIQUID GLASS DESIGN SYSTEM & REFRACTIVE DISTORTION
   ========================================================================== */


.liquid-glass,
.liquidGlass,
.liquidGlass-wrapper,
[data-liquid-glass],
.card,
.post-card,
.comment-content,
.widget-card,
.admin-card,
.ticket-card,
.podium-card,
.rank-info-bar,
.leaderboard-list-card,
.uc-topbar,
.uc-category-card,
.uc-post-card,
.uc-quick-reply,
.chat-container,
.chat-bubble,
.quick-hub-card,
.tl-widget-card,
.modal-content,
.sb-kpi-card,
.sb-card,
.plan-card,
.blog-card,
.friend-card,
.glow-border,
.spotlight-card,
.landing-glass-card,
.landing-auth-card,
.auth-card,
.auth-fluid-station,
.user-session-station,
.trifecta-card,
.terminal-showcase-box,
.safe-ad-sandbox-box,
.landing-link-card,
.courses-hero,
.course-card,
.stat-card,
.enrolled-course-card,
.shorts-container,
.short-comments-panel,
.vid-card,
.tl-empty,
.lesson-card,
.challenge-card,
.lab-card,
.profile-header,
.profile-stats-bar,
.feed-filter-bar,
.create-post-card,
.forum-card,
.vps-card {
  /* Pinned rather than left to the var() fallback: custom properties inherit,
     so a card nested inside a chrome surface would otherwise pick up that
     surface's much heavier tint. Registering these with @property
     inherits:false is not an option - a non-inherited property does not reach
     ::before / ::after, which is exactly where they are read. */
  --glass-tint-layer: rgba(255, 255, 255, 0.03);
  --glass-tint-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%);
  isolation: isolate;
  position: relative;
  border-radius: var(--radius-xl, 28px);
  box-shadow: 0 24px 96px rgba(31, 38, 135, 0.25) !important;
  transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  color: var(--text-primary, #ffffff);
  box-sizing: border-box;
  /* No will-change here on purpose. It was hinting transform on every card,
     bar and panel on the page at once, which is both a lot of permanently
     promoted layers and a second reason fixed-position descendants get
     contained by their card - will-change: transform makes the element a
     containing block exactly like a real transform does. */
}

/* Layer 1: specular rim. The tint used to live here too, but a z-index:0 pseudo
   paints above in-flow text, and stacking a veil over the content is also what
   made the refraction's edge artifacts read as a bright line against it. The
   fill now rides on ::after with the rest of the glass, matching the chrome,
   control and feature tiers further down. */
.liquid-glass::before,
.liquidGlass::before,
.liquidGlass-wrapper::before,
[data-liquid-glass]::before,
.card::before,
.post-card::before,
.comment-content::before,
.widget-card::before,
.admin-card::before,
.ticket-card::before,
.podium-card::before,
.rank-info-bar::before,
.leaderboard-list-card::before,
.uc-topbar::before,
.uc-category-card::before,
.uc-post-card::before,
.uc-quick-reply::before,
.chat-container::before,
.quick-hub-card::before,
.tl-widget-card::before,
.modal-content::before,
.sb-kpi-card::before,
.sb-card::before,
.plan-card::before,
.blog-card::before,
.friend-card::before,
.glow-border::before,
.spotlight-card::before,
.landing-glass-card::before,
.landing-auth-card::before,
.auth-card::before,
.auth-fluid-station::before,
.user-session-station::before,
.trifecta-card::before,
.terminal-showcase-box::before,
.safe-ad-sandbox-box::before,
.landing-link-card::before,
.courses-hero::before,
.course-card::before,
.stat-card::before,
.enrolled-course-card::before,
.shorts-container::before,
.short-comments-panel::before,
.vid-card::before,
.tl-empty::before,
.lesson-card::before,
.challenge-card::before,
.lab-card::before,
.profile-header::before,
.profile-stats-bar::before,
.feed-filter-bar::before,
.create-post-card::before,
.forum-card::before,
.vps-card::before,
.list-group::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-rim, transparent);
  background: none;
  pointer-events: none;
}

/* Layer 0: Crystal Clear 100% Transparent Refractive Backdrop Blur */
.liquid-glass::after,
.liquidGlass::after,
.liquidGlass-wrapper::after,
[data-liquid-glass]::after,
.card::after,
.post-card::after,
.comment-content::after,
.widget-card::after,
.admin-card::after,
.ticket-card::after,
.podium-card::after,
.rank-info-bar::after,
.leaderboard-list-card::after,
.uc-topbar::after,
.uc-category-card::after,
.uc-post-card::after,
.uc-quick-reply::after,
.chat-container::after,
.quick-hub-card::after,
.tl-widget-card::after,
.modal-content::after,
.sb-kpi-card::after,
.sb-card::after,
.plan-card::after,
.blog-card::after,
.friend-card::after,
.glow-border::after,
.spotlight-card::after,
.landing-glass-card::after,
.landing-auth-card::after,
.auth-card::after,
.auth-fluid-station::after,
.user-session-station::after,
.trifecta-card::after,
.terminal-showcase-box::after,
.safe-ad-sandbox-box::after,
.landing-link-card::after,
.courses-hero::after,
.course-card::after,
.stat-card::after,
.enrolled-course-card::after,
.shorts-container::after,
.short-comments-panel::after,
.vid-card::after,
.tl-empty::after,
.lesson-card::after,
.challenge-card::after,
.lab-card::after,
.profile-header::after,
.profile-stats-bar::after,
.feed-filter-bar::after,
.create-post-card::after,
.forum-card::after,
.vps-card::after,
.list-group::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-tint-layer, rgba(255, 255, 255, 0.03));
  background-image: var(--glass-tint-image, linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

/* Liquid Glass Hover Elevation */
.liquid-glass:hover,
.liquidGlass:hover,
.liquidGlass-wrapper:hover,
[data-liquid-glass]:hover,
.card:hover,
.post-card:hover,
.widget-card:hover,
.admin-card:hover,
.podium-card:hover,
.tl-widget-card:hover,
.quick-hub-card:hover,
.sb-kpi-card:hover,
.sb-card:hover,
.plan-card:hover,
.blog-card:hover,
.friend-card:hover,
.profile-header:hover,
.uc-topbar:hover,
.uc-category-card:hover,
.uc-post-card:hover,
.uc-quick-reply:hover,
.auth-fluid-station:hover,
.user-session-station:hover,
.trifecta-card:hover,
.terminal-showcase-box:hover,
.safe-ad-sandbox-box:hover,
.landing-link-card:hover,
.courses-hero:hover,
.course-card:hover,
.stat-card:hover,
.enrolled-course-card:hover,
.vid-card:hover,
.lesson-card:hover,
.challenge-card:hover,
.lab-card:hover,
.landing-glass-card:hover,
.create-post-card:hover,
.forum-card:hover,
.vps-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 120px rgba(31, 38, 135, 0.35) !important;
}

@media (max-width: 768px) {
  .liquid-glass::after,
  .liquidGlass::after,
  .liquidGlass-wrapper::after,
  [data-liquid-glass]::after,
  .card::after,
  .post-card::after,
  .comment-content::after,
  .widget-card::after,
  .admin-card::after,
  .ticket-card::after,
  .podium-card::after,
  .rank-info-bar::after,
  .leaderboard-list-card::after,
  .uc-topbar::after,
  .uc-category-card::after,
  .uc-post-card::after,
  .uc-quick-reply::after,
  .chat-container::after,
  .quick-hub-card::after,
  .tl-widget-card::after,
  .modal-content::after,
  .sb-kpi-card::after,
  .sb-card::after,
  .plan-card::after,
  .blog-card::after,
  .friend-card::after,
  .glow-border::after,
  .spotlight-card::after,
  .landing-glass-card::after,
  .landing-auth-card::after,
  .auth-card::after,
  .landing-link-card::after,
  .profile-header::after,
  .profile-stats-bar::after,
  .feed-filter-bar::after,
  .create-post-card::after,
  .forum-card::after,
  .vps-card::after,
  .list-group::after {
    backdrop-filter: blur(2.1px);
    -webkit-backdrop-filter: blur(2.1px);
  }
}

/* Dragging state for interactive cards */
.liquid-glass.dragging {
  cursor: grabbing;
  transition: none !important;
  transform: scale(calc(var(--scale-factor, 1) + 0.03)) translateY(-4px) !important;
  z-index: 1000;
  box-shadow: 0 32px 120px rgba(31, 38, 135, 0.4) !important;
}

/* Profile Content & Avatar on Liquid Glass */
.profile-card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
}

.profile-avatar-border {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-avatar-border img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background-color: #1a1a1a;
  pointer-events: none;
}

.profile-info h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 2px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.profile-info p {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 12px 0;
  font-family: var(--font-mono, monospace);
}

.github-stats, .glass-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 90%;
  justify-content: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

.github-btn, .btn-glass {
  background: rgba(36, 41, 47, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 20px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.github-btn:hover, .btn-glass:hover {
  background: rgba(36, 41, 47, 0.85);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(31, 38, 135, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: white;
}

.github-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.zoom-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.zoom-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(31, 38, 135, 0.3);
}

.zoom-btn:active {
  transform: scale(0.95);
}

/* Lucas Romero Dedicated Liquid Glass Component Classes */
.liquidGlass-wrapper {
  position: relative;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  border: 1px solid var(--glass-rim, transparent);
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: none;
  pointer-events: none;
}

.liquidGlass-text {
  z-index: 3;
  position: relative;
  font-size: 1.15rem;
  color: var(--text-primary, #ffffff);
}

/* Liquid Glass Menu & Dock Helper System */
.menu,
.menu > div {
  padding: 0.4rem;
  border-radius: 1.8rem;
}

.menu:hover {
  padding: 0.6rem;
  border-radius: 1.8rem;
}

.menu > div > div {
  font-size: 15px;
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 0.8rem;
  transition: all 0.1s ease-in;
}

.menu > div > div:hover {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
}

.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 2rem;
  padding: 0.6rem;
}

.dock,
.dock > div {
  border-radius: 2rem;
}

.dock:hover {
  padding: 0.8rem;
  border-radius: 2.5rem;
}

.dock:hover > div {
  border-radius: 2.5rem;
}

.dock img {
  width: 75px;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.dock img:hover {
  transform: scale(0.95);
  transform-origin: center center;
}

.button {
  padding: 1.5rem 2.5rem;
  border-radius: 3rem;
}

.button,
.button > div {
  border-radius: 3rem;
}

.button:hover {
  padding: 1.8rem 2.8rem;
}

.button:hover > div {
  border-radius: 4rem;
}

.button svg {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.button:hover svg {
  transform: scale(0.95);
}

/* ==========================================================================
   BASE & AMBIENT LIQUID CANVAS
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: #060911;
}

body {
    font-family: var(--font-sans);
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

/* React Bits Animated Background Canvas Layer */
#reactbits-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
}

body::before,
body::after {
    display: none;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 750;
    color: var(--text-primary);
}
h1 { font-size: 34px; letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: 26px; letter-spacing: -0.03em; font-weight: 750; }
h3 { font-size: 21px; letter-spacing: -0.02em; font-weight: 700; }
h4 { font-size: 18px; font-weight: 650; }
h5 { font-size: 15px; font-weight: 650; }
h6 { font-size: 14px; font-weight: 600; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast), text-shadow var(--t-fast); }
a:hover { color: var(--accent-hover); text-shadow: 0 0 12px rgba(96, 165, 250, 0.4); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection { background: rgba(59, 130, 246, 0.4); color: #ffffff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(8, 11, 17, 0.7); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.45);
    background-clip: content-box;
}

.text-muted { color: var(--text-tertiary); }

/* ==========================================================================
   RICH TEXT
   ========================================================================== */
.html-content { font-size: 15px; line-height: 1.7; word-break: break-word; }
.html-content > * + * { margin-top: 14px; }
.html-content img, .html-content video { max-width: 100%; border-radius: var(--radius-lg); border: 1px solid transparent; display: block; }
.html-content audio { width: 100%; }
.html-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.html-content a:hover { color: var(--accent-hover); }
.html-content code { background: rgba(255, 255, 255, 0.08); padding: 3px 7px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 0.88em; border: 1px solid transparent; }
.html-content pre { background: var(--surface-sunk); border: 1px solid transparent; padding: 18px; border-radius: var(--radius-lg); overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; }
.html-content pre code { background: none; border: none; padding: 0; }
.html-content blockquote { border-left: 3px solid transparent; padding-left: 18px; color: var(--text-secondary); }
.html-content ul, .html-content ol { padding-left: 24px; }
.html-content .mention { color: var(--cyan); font-weight: 600; }
.html-content .hashtag { color: var(--purple); font-weight: 600; }

/* ==========================================================================
   STATUS BAR
   ========================================================================== */
.ios-status-bar { --glass-tint-layer: rgba(8, 12, 20, 0.55); display: none; height: 40px; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 13px; font-weight: 500; position: fixed; top: 0; left: 0; right: 0; z-index: 10000; color: var(--text-secondary); border-bottom: 1px solid transparent; }
.status-right { display: flex; gap: 8px; align-items: center; }

/* ==========================================================================
   LIQUID GLASS NAVIGATION BAR
   ========================================================================== */
.nav-bar {
    --glass-tint-layer: rgba(10, 16, 28, 0.45);
    position: sticky; top: 0; z-index: 900;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.nav-bar::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid transparent;
    transition: background var(--t-base);
}
.nav-bar.scrolled {
    --glass-tint-layer: rgba(6, 10, 20, 0.62);
}
.nav-bar.scrolled { border-bottom-color: transparent; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5); }

.nav-container {
    max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-left  { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.menu-toggle {
    display: none; background: rgba(255, 255, 255, 0.08); border: 1px solid transparent; color: var(--text-secondary);
    font-size: 17px; cursor: pointer; width: 38px; height: 38px; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: all var(--t-fast);
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: scale(1.04); }

.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity var(--t-fast), transform var(--t-fast); }
.nav-brand:hover { opacity: 0.95; transform: scale(1.02); }
.brand-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(168, 85, 247, 0.25) 100%);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    display: grid; place-items: center; font-size: 16px; color: var(--cyan); flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    animation: brandPulse 4s ease-in-out infinite;
    transition: transform var(--t-fast);
}
@keyframes brandPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4); }
    50%      { box-shadow: 0 4px 24px rgba(168, 85, 247, 0.6); }
}
.brand-text { font-family: var(--font-display); font-size: 17px; font-weight: 750; letter-spacing: -0.02em; color: var(--text-primary); white-space: nowrap; }

.nav-links {
    display: flex; align-items: center; gap: 4px;
    flex: 1 1 auto; justify-content: center;
    min-width: 0; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links .service-back-link { display: none; }
.service-host .nav-container { gap: 12px; }
.service-host .nav-links { justify-content: flex-start; }

.nav-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
    border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none;
    font-size: 13.5px; font-weight: 550; white-space: nowrap;
    border: 1px solid transparent; transition: all var(--t-fast);
    position: relative;
}
.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    box-shadow: none;
    transform: translateY(-1.5px);
}
.nav-link.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.4) 0%, rgba(99, 102, 241, 0.25) 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    font-weight: 650;
}
.nav-link i { font-size: 13.5px; }
.nav-link.admin-link { color: var(--warning); }
.nav-link.admin-link:hover { background: var(--warning-soft); border-color: transparent; }

@media (min-width: 769px) and (max-width: 1150px) { .nav-link span { display: none; } .nav-link { padding: 8px 10px; } }
@media (max-width: 900px) { .nav-brand .brand-text { display: none; } }
@media (min-width: 769px) and (max-width: 1220px) {
    .service-host .service-home-btn span { display: none; }
    .service-host .service-home-btn { width: 38px; padding-inline: 0; justify-content: center; }
}

.nav-action-btn {
    position: relative; width: 38px; height: 38px;
    border-radius: var(--radius-full); border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 15px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all var(--t-fast);
}
.nav-action-btn:hover {
    background: rgba(255, 255, 255, 0.18); border-color: transparent;
    color: #ffffff; transform: scale(1.08) translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}
.nav-action-btn.active { color: var(--cyan); background: var(--accent-soft); border-color: transparent; }
.notif-btn .notif-badge {
    position: absolute; top: 0px; right: 0px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    border: 2px solid transparent; box-shadow: 0 2px 8px rgba(244, 63, 94, 0.6);
    animation: notifPulse 2s infinite ease-in-out;
}
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); box-shadow: 0 0 12px rgba(244, 63, 94, 0.8); }
}

.nav-user-dropdown { position: relative; }
.nav-user-btn {
    display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px;
    border-radius: var(--radius-full); border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.08); cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all var(--t-fast);
}
.nav-user-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: transparent; transform: scale(1.03); }
.nav-user-avatar { width: 30px; height: 30px; border-radius: var(--radius-full); object-fit: cover; }

/* Language Selector Pill & Dropdown */
.nav-lang-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-lang-btn {
    height: 38px; padding: 0 11px;
    border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08); color: var(--text-primary);
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all var(--t-fast);
    white-space: nowrap;
}
.nav-lang-btn:hover {
    background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(56, 189, 248, 0.25);
}
.lang-dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 250px !important; max-width: 90vw;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 1200; padding: 8px !important;
    max-height: 400px; overflow-y: auto !important;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.lang-dropdown-menu.active,
.lang-dropdown-menu.show {
    opacity: 1 !important; visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}
.lang-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; border-radius: var(--radius-md);
    text-decoration: none; color: #cbd5e1; font-size: 12.5px;
    transition: all 0.15s ease;
}
.lang-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.lang-menu-item.active {
    background: rgba(56, 189, 248, 0.15); color: #38bdf8;
    font-weight: 700; border: 1px solid rgba(56, 189, 248, 0.25);
}

/* Liquid Dropdown Sheets & Multi-Column Navbar Menu */
.dropdown-menu {
    --glass-tint-layer: rgba(12, 18, 32, 0.72);
    position: absolute; top: calc(100% + 10px); right: 0; width: 440px;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-xl);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 1000; padding: 10px;
    max-height: calc(100vh - 85px);
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dropdown-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dropdown-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: luxuryFadeInScale 0.3s var(--ease-spring); }

.dropdown-header {
    padding: 10px 12px; display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dropdown-avatar { width: 42px; height: 42px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.dropdown-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dropdown-name { font-weight: 700; font-size: 14.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-handle { font-size: 12px; color: var(--text-tertiary); }
.dropdown-points { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; margin-top: 2px; }

.dropdown-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 2px;
}
.dropdown-col {
    display: flex; flex-direction: column; gap: 2px;
}
.dropdown-col-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-tertiary); padding: 5px 8px 3px; opacity: 0.85;
}

.dropdown-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 6px 4px; }

.dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500; transition: all var(--t-fast); cursor: pointer;
    position: relative; overflow: hidden; white-space: nowrap;
}
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1); color: #ffffff; transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dropdown-item:active { transform: translateX(1px) scale(0.98); }
.dropdown-item i { font-size: 13px; width: 18px; text-align: center; color: var(--text-tertiary); transition: color var(--t-fast); flex-shrink: 0; }
.dropdown-item:hover i { color: var(--accent-hover); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger i { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

.dropdown-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px;
}
.dropdown-footer .dropdown-item {
    flex: 1; justify-content: center; padding: 7px 8px; font-size: 12px;
}
.dropdown-footer .dropdown-item:hover { transform: translateY(-1px); }

@media (max-width: 480px) {
    .dropdown-menu {
        width: calc(100vw - 20px);
        max-width: 400px;
        right: -8px;
    }
    .dropdown-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .dropdown-item {
        font-size: 12px;
        padding: 6px 8px;
    }
}

/* Search Overlay */
.search-overlay {
    position: fixed; inset: 0; background: rgba(4, 7, 14, 0.8);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    z-index: 2000; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 14vh; opacity: 0; visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
}
.search-overlay.active { opacity: 1; visibility: visible; }
.search-container { width: 100%; max-width: 640px; padding: 0 24px; }
.search-form {
    --glass-tint-layer: rgba(16, 24, 42, 0.70);
    display: flex; align-items: center; gap: 14px;
    border-radius: var(--radius-xl);
    padding: 16px 20px; border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: luxuryFadeInScale 0.35s var(--ease-spring);
    transition: all var(--t-fast);
}
.search-form i { font-size: 17px; color: var(--accent); flex-shrink: 0; }
.search-input { flex: 1; background: none; border: none; color: var(--text-primary); font-size: 16px; font-family: var(--font-sans); outline: none; min-width: 0; }
.search-input::placeholder { color: var(--text-quaternary); }
.search-close {
    background: rgba(255, 255, 255, 0.08); border: none; color: var(--text-tertiary);
    font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-full);
    box-shadow: none;
    transition: all var(--t-fast); display: flex; align-items: center; justify-content: center;
}
.search-close:hover { background: rgba(255, 255, 255, 0.2); color: #fff; transform: rotate(90deg); }

.mobile-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: var(--glass-blur); z-index: 890; opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); }
.mobile-overlay.active { opacity: 1; visibility: visible; }

/* Mobile Drawer */
.mobile-drawer {
    --glass-tint-layer: rgba(12, 18, 32, 0.74);
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(85vw, 320px); z-index: 1200; display: none; flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 68px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-y: auto; overscroll-behavior: contain;
    border-right: 1px solid transparent;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%); transition: transform var(--t-base);
}
.mobile-drawer.active { transform: translateX(0); }
.mobile-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-drawer .nav-link { padding: 13px 16px; font-size: 15px; border-radius: var(--radius-md); color: #fff !important; }
.mobile-drawer .nav-link span { display: inline; color: #fff !important; }
.mobile-drawer .nav-link i { width: 22px; text-align: center; font-size: 15px; color: var(--accent) !important; }
.mobile-drawer .service-back-link { display: flex; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.mobile-drawer-cta { margin-top: auto; padding-top: 20px; }

@media (max-width: 768px) { .mobile-drawer { display: flex; } }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.main-content { max-width: 1440px; margin: 0 auto; padding: 36px 24px 96px; min-height: calc(100vh - 240px); }

/* ==========================================================================
   LIQUID GLASS CARDS
   ========================================================================== */
.card {
    border-radius: var(--radius-xl, 28px);
    overflow: hidden;
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 120px rgba(31, 38, 135, 0.35) !important;
}
.card:active { transform: translateY(-1px) scale(0.995); }
.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}
.card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 750;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.015em;
}
.card-title i { font-size: 15px; color: var(--accent); }
.card-body { padding: 22px; }
.card-footer {
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
    box-shadow: none;
}

/* ==========================================================================
   LISTS
   ========================================================================== */
.list-group {
    border-radius: var(--radius-xl, 28px);
    overflow: hidden;
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.list-item {
    display: flex; align-items: center; gap: 14px; padding: 15px 20px;
    border-bottom: 1px solid transparent; transition: background var(--t-fast), transform var(--t-fast);
    text-decoration: none; color: inherit; cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(255, 255, 255, 0.06); }
.list-item-icon {
    width: 38px; height: 38px; border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08); border: 1px solid transparent;
    display: grid; place-items: center; color: var(--text-secondary); font-size: 15px; flex-shrink: 0;
    box-shadow: none;
    transition: color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.list-item:hover .list-item-icon { color: var(--accent); transform: scale(1.08); border-color: transparent; }
.list-item-content { flex: 1; min-width: 0; }
.list-item-title { font-weight: 650; font-size: 14.5px; color: var(--text-primary); }
.list-item-subtitle { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.list-item-arrow { color: var(--text-quaternary); font-size: 13px; transition: transform var(--t-fast), color var(--t-fast); }
.list-item:hover .list-item-arrow { transform: translateX(4px); color: var(--accent); }

/* ==========================================================================
   LIQUID GLASS BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all var(--t-fast);
    position: relative;
    overflow: hidden;
}
.btn:active { transform: scale(0.95); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn i { font-size: 13.5px; }

/* Liquid Primary Azure Button */
.btn-primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}
.btn-primary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.5);
    transform: translateY(-2px) scale(1.02);
}

/* Liquid Frosted Glass Secondary Button */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

/* Liquid Outline Button */
.btn-outline {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent-hover);
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15);
}
.btn-outline:hover {
    background: rgba(59, 130, 246, 0.24);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: none;
}

.btn-danger {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), #f43f5e;
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(244, 63, 94, 0.35);
}
.btn-danger:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%), #fb7185;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.6);
}

.btn-success {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), #10b981;
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
.btn-success:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%), #34d399;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.6);
}

.btn-warning {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), #f59e0b;
    color: #1e1302;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}
.btn-warning:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 100%), #fbbf24;
    color: #1e1302;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.6);
}

.btn-purple {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), #a855f7;
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
}
.btn-purple:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.1) 100%), #c084fc;
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.6);
}

.btn-sm { padding: 6px 14px; font-size: 13px; gap: 6px; }
.btn-sm i { font-size: 12px; }
.btn-lg { padding: 13px 26px; font-size: 15.5px; }
.btn-xl { padding: 15px 30px; font-size: 16.5px; width: 100%; }
.btn-icon { width: 38px; height: 38px; padding: 0; }

/* Media-attach trigger */
.media-attach-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: var(--ios-bg-tertiary); color: var(--text-secondary);
    border: 1px solid transparent; cursor: pointer; font-size: 15px; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.media-attach-btn:hover { background: var(--accent-soft); color: var(--accent); transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 16px rgba(59,130,246,0.35); }
.media-attach-btn.vid:hover { background: var(--danger-soft); color: var(--danger); }
.media-attach-btn.file:hover { background: var(--warning-soft); color: var(--warning); }
.media-attach-btn.gif:hover { background: rgba(168, 85, 247, 0.14); color: var(--purple); }

.btn-group {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.btn-group .btn { border-radius: 0; border: none; border-right: 1px solid transparent; box-shadow: none; }
.btn-group .btn:last-child { border-right: none; }

/* ==========================================================================
   LIQUID GLASS FORMS
   ========================================================================== */
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 11px 15px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all var(--t-fast);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.form-input:hover, .form-select:hover, .form-textarea:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.07);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 4px var(--accent-ring), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-quaternary); }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.form-textarea { min-height: 110px; resize: vertical; }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer;
}
.form-select option { background: #0e1526; color: var(--text-primary); }
.form-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }

input[type="file"] { cursor: pointer; }
input[type="file"].form-input { padding: 8px 12px; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px; padding: 8px 16px; border: none; border-radius: var(--radius-full);
    background: var(--accent); color: #fff; font-family: var(--font-sans);
    font-size: 13px; font-weight: 650; cursor: pointer;
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
    transition: all var(--t-fast);
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6); }

/* Liquid Toggle Switch */
.toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-slider {
    width: 44px; height: 26px; background: rgba(255, 255, 255, 0.12);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid transparent; border-radius: var(--radius-full);
    position: relative; transition: all var(--t-fast); flex-shrink: 0;
    box-shadow: none;
}
.toggle-slider::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    background: #ffffff; border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: transform var(--t-fast), background var(--t-fast);
}
.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(18px); }

/* ==========================================================================
   BADGES & STATUS
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    border-radius: var(--radius-full); font-size: 12px; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all var(--t-fast);
}
.badge-primary { background: rgba(59, 130, 246, 0.2); color: var(--cyan); border-color: transparent; }
.badge-success { background: rgba(16, 185, 129, 0.2); color: var(--success); border-color: transparent; }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: var(--warning); border-color: transparent; }
.badge-danger  { background: rgba(244, 63, 94, 0.2);  color: var(--danger);  border-color: transparent; }
.badge-purple  { background: rgba(168, 85, 247, 0.2); color: var(--purple);  border-color: transparent; }
.badge-gray    { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); border-color: transparent; }
.badge-sm { padding: 2px 8px; font-size: 11px; }
.badge-lg { padding: 6px 14px; font-size: 13.5px; }

.user-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 650; background: rgba(255, 255, 255, 0.08); border: 1px solid transparent; color: var(--text-secondary); box-shadow: none; }
.badge-display { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.badge-display i { font-size: 14px; }

.status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; position: relative; }
.status-dot.online, .status-dot.working { background: var(--success); box-shadow: 0 0 10px rgba(16, 185, 129, 0.85); animation: dotPulseGreen 2.2s infinite ease-in-out; }
.status-dot.away { background: var(--warning); box-shadow: 0 0 10px rgba(245, 158, 11, 0.85); }
.status-dot.busy { background: var(--danger); box-shadow: 0 0 10px rgba(244, 63, 94, 0.85); }
.status-dot.offline { background: var(--text-quaternary); }
.status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }

@keyframes dotPulseGreen {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 14px rgba(16, 185, 129, 1); }
}

/* ==========================================================================
   AVATARS
   ========================================================================== */
.avatar { border-radius: var(--radius-full); object-fit: cover; background: var(--surface-2); flex-shrink: 0; display: block; border: 1px solid transparent; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2); transition: transform var(--t-fast); }
.avatar-xs { width: 28px; height: 28px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 92px; height: 92px; }
.avatar-2xl { width: 132px; height: 132px; }
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar { margin-left: -12px; border: 2px solid transparent; transition: transform var(--t-fast); }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar:hover { transform: translateY(-4px) scale(1.12); z-index: 5; }

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */
.grid { display: grid; gap: 24px; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }

/* ==========================================================================
   TABS & PAGINATION
   ========================================================================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.pagination-dots { color: var(--text-quaternary); padding: 0 4px; }

.tabs {
    --glass-tint-layer: rgba(14, 20, 34, 0.50);
    display: flex; gap: 3px; border: 1px solid transparent;
    border-radius: var(--radius-full); padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tab {
    flex: 1; padding: 8px 18px; border-radius: var(--radius-full); border: none; background: transparent;
    color: var(--text-secondary); font-family: var(--font-sans); font-size: 13.5px; font-weight: 550;
    cursor: pointer; transition: all var(--t-fast); text-align: center; text-decoration: none;
    position: relative;
}
.tab:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff; font-weight: 650;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45);
}

/* Admin Tabs */
.admin-tabs-container {
    --glass-tint-layer: rgba(14, 20, 34, 0.50);
    display: flex; gap: 8px; margin-bottom: 24px; overflow-x: auto; padding: 8px;
    border: 1px solid transparent; border-radius: var(--radius-xl);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.admin-tabs-container::-webkit-scrollbar { display: none; }
.admin-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
    border-radius: var(--radius-full); font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: all var(--t-fast); background: rgba(255, 255, 255, 0.05); color: var(--text-secondary);
    border: 1px solid transparent; white-space: nowrap; text-decoration: none;
    box-shadow: none;
}
.admin-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: transparent; transform: translateY(-1px) scale(1.02); box-shadow: none; }
.admin-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #ffffff !important; border-color: transparent !important;
    font-weight: 700; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5) !important;
}
.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; animation: adminFadeIn 0.28s var(--ease-spring); }
@keyframes adminFadeIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Custom File Upload */
.custom-file-upload {
    --glass-tint-layer: rgba(10, 16, 28, 0.42);
    position: relative; border: 2px dashed transparent;
    border-radius: var(--radius-xl); padding: 26px 20px; text-align: center; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all var(--t-fast);
}
.custom-file-upload:hover, .custom-file-upload.dragover { border-color: transparent; background: rgba(59, 130, 246, 0.08); }
.custom-file-upload .upload-icon-circle {
    width: 48px; height: 48px; border-radius: var(--radius-full);
    background: rgba(59, 130, 246, 0.15); border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; color: var(--cyan);
    font-size: 20px; margin-bottom: 12px; transition: transform var(--t-fast);
    animation: uploadFloat 3s ease-in-out infinite;
}
@keyframes uploadFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.custom-file-upload:hover .upload-icon-circle { transform: scale(1.15) translateY(-2px); }
.custom-file-upload .upload-title { font-size: 14px; font-weight: 650; color: var(--text-primary); margin-bottom: 4px; }
.custom-file-upload .upload-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.custom-file-upload .upload-btn-fake {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid transparent;
    border-radius: var(--radius-full); color: var(--text-primary); font-size: 12.5px; font-weight: 600;
    pointer-events: none;
}
.custom-file-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 5; }

/* Admin Metric Cards */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 24px; }
.admin-card {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    border-radius: var(--radius-xl);
    border: 1px solid transparent; padding: 20px 22px; text-align: left;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.admin-card:hover {
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.55), 0 0 30px rgba(59, 130, 246, 0.4);
}
.admin-card-value { font-size: 28px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.02em; font-family: var(--font-display); }
.admin-card-label { font-size: 11.5px; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }

/* Data Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
    padding: 13px 18px; border-bottom: 1px solid transparent; color: var(--text-secondary);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(10, 16, 28, 0.32); text-align: left; white-space: nowrap;
}
.data-table td { padding: 14px 18px; border-bottom: 1px solid transparent; vertical-align: middle; color: var(--text-primary); }
.data-table tr:hover { background: rgba(255, 255, 255, 0.06); }

/* ==========================================================================
   LIQUID SHEET MODALS
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base); box-sizing: border-box;
}
.modal.active { opacity: 1; visibility: visible; }
.modal::before { content: ''; position: absolute; inset: 0; background: rgba(4, 7, 14, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.modal-content {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    position: relative; z-index: 2;
    border-radius: var(--radius-2xl, 24px) !important; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
    border: 1px solid transparent !important;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.7), 0 0 30px -4px rgba(59, 130, 246, 0.2) !important;
    transform: perspective(1200px) rotateX(4deg) scale(0.95) translateY(12px);
    transition: transform 0.35s var(--ease-spring);
}
.modal.active .modal-content { transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0); }
.modal-header {
    --glass-tint-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; position: sticky; top: 0; z-index: 10;
}
.modal-title { font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: -0.015em; font-family: var(--font-display); display: flex; align-items: center; gap: 9px; }
.modal-close {
    width: 34px; height: 34px; border-radius: var(--radius-full);
    border: 1px solid transparent; background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: none;
    transition: all var(--t-fast); flex-shrink: 0;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; transform: rotate(90deg); }
.modal-body { padding: 24px 28px; background: transparent; }
.modal-footer {
    padding: 18px 28px; border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; justify-content: flex-end; gap: 12px; background: rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   FRIENDS SYSTEM (LIQUID GLASS STYLED)
   ========================================================================== */
.friends-container {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
.friends-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.friend-card {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-radius: var(--radius-xl, 20px);
    border: 1px solid transparent !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.friend-card:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: transparent !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 25px rgba(59, 130, 246, 0.3);
}
.friend-card-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.friend-avatar-wrap {
    flex-shrink: 0;
    position: relative;
}
.friend-avatar-wrap .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}
.friend-info {
    flex: 1;
    min-width: 0;
}
.friend-name {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--text-primary, #ffffff);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.friend-name:hover {
    color: var(--accent, #3b82f6);
}
.friend-meta {
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    margin-top: 2px;
}
.friend-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .friend-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .friend-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   ALERTS & TOASTS
   ========================================================================== */
.alert {
    padding: 14px 18px; border-radius: var(--radius-lg); font-size: 14px;
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    border: 1px solid transparent; line-height: 1.5;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    animation: luxuryFadeInScale 0.4s var(--ease-spring);
}
.alert i { font-size: 16px; flex-shrink: 0; }
.alert-success { background: rgba(16, 185, 129, 0.15); border-color: transparent; color: var(--text-primary); }
.alert-success i { color: var(--success); }
.alert-error, .alert-danger { background: rgba(244, 63, 94, 0.15); border-color: transparent; color: var(--text-primary); }
.alert-error i, .alert-danger i { color: var(--danger); }
.alert-warning { background: rgba(245, 158, 11, 0.15); border-color: transparent; color: var(--text-primary); }
.alert-warning i { color: var(--warning); }
.alert-info { background: rgba(59, 130, 246, 0.15); border-color: transparent; color: var(--text-primary); }
.alert-info i { color: var(--accent); }

.toast-container { position: fixed; top: 76px; right: 24px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
    --glass-tint-layer: rgba(16, 22, 38, 0.72);
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    font-size: 14px; color: var(--text-primary);
    min-width: 290px; max-width: 420px; transform: translateX(calc(100% + 30px));
    transition: transform var(--t-slow) var(--ease-spring), opacity var(--t-base); pointer-events: auto;
}
.toast.show { transform: translateX(0); animation: luxuryFadeInScale 0.45s var(--ease-spring); }
.toast i { font-size: 16px; flex-shrink: 0; }
.toast-success { border-left: 4px solid var(--success); } .toast-success i { color: var(--success); }
.toast-error   { border-left: 4px solid var(--danger); }  .toast-error i   { color: var(--danger); }
.toast-warning { border-left: 4px solid var(--warning); } .toast-warning i { color: var(--warning); }
.toast-info    { border-left: 4px solid var(--accent); }  .toast-info i    { color: var(--accent); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-container, .table-responsive {
    /* A scroll wrapper, not a surface: it sits inside the card that already
       provides the glass, so it stays transparent and casts no shadow of its
       own. See NESTED GLASS further down. */
    background: transparent;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl); border: 1px solid transparent;
    max-width: 100%;
    transition: all var(--t-base);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
    text-align: left; padding: 13px 18px; font-size: 12px; font-weight: 700;
    color: var(--text-secondary); background: rgba(10, 16, 28, 0.28);
    border-bottom: 1px solid transparent; white-space: nowrap;
}
tbody td { padding: 14px 18px; border-bottom: 1px solid transparent; color: var(--text-primary); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: rgba(255, 255, 255, 0.06); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    --glass-tint-layer: rgba(8, 12, 22, 0.55);
    border-top: 1px solid transparent;
    margin-top: 64px;
}
.footer-container { max-width: 1440px; margin: 0 auto; padding: 42px 24px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-version { font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono); margin-left: 8px; padding: 3px 9px; background: rgba(255, 255, 255, 0.06); border: 1px solid transparent; border-radius: var(--radius-full); }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.footer-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color var(--t-fast); }
.footer-link:hover { color: var(--text-primary); }
/* The legal row is secondary to the product row above it: same links, quieter. */
.footer-links-legal { gap: 20px; margin-bottom: 24px; }
.footer-links-legal .footer-link { font-size: 13px; color: var(--text-tertiary); font-weight: 450; }
.footer-links-legal .footer-link:hover { color: var(--text-secondary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 24px; border-top: 1px solid transparent; font-size: 13px; color: var(--text-tertiary); }
.footer-status { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   MOBILE TAB BAR
   ========================================================================== */
.mobile-tab-bar {
    --glass-tint-layer: rgba(10, 15, 26, 0.66);
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    border-top: 1px solid transparent; padding-bottom: env(safe-area-inset-bottom);
    justify-content: space-around; align-items: stretch; height: calc(60px + env(safe-area-inset-bottom));
}
.tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; height: 56px; color: var(--text-tertiary); text-decoration: none; font-size: 10.5px; font-weight: 550; transition: color var(--t-fast); }
.tab-item i { font-size: 19px; }
.tab-item.active { color: var(--cyan); }

.chat-fab {
    position: fixed; bottom: 28px; right: 28px; width: 52px; height: 52px;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff; border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.55), 0 0 15px rgba(99, 102, 241, 0.3);
    text-decoration: none; z-index: 100; transition: all var(--t-fast);
    animation: fabFloat 3.5s ease-in-out infinite;
}
.chat-fab:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 14px 36px rgba(59, 130, 246, 0.7), 0 0 25px rgba(56, 189, 248, 0.5); color: #fff; }
@keyframes fabFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ==========================================================================
   POSTS & FEEDS (LIQUID GLASS STYLED)
   ========================================================================== */
.post-card {
    border-radius: var(--radius-xl, 28px);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 120px rgba(31, 38, 135, 0.35) !important;
}
.post-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.post-author-info { flex: 1; min-width: 0; }
.post-author-name { font-weight: 700; font-size: 14.5px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-author-handle { font-size: 13px; color: var(--text-tertiary); }
.post-content { padding: 0 20px 16px; font-size: 15px; line-height: 1.65; word-break: break-word; color: var(--text-primary); }
.post-media { margin: 0 20px 16px; border-radius: var(--radius-lg); overflow: hidden; max-height: 540px; border: 1px solid transparent; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-media audio { width: 100%; }
.post-file-attach { margin: 0 20px 16px; padding: 13px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 12px; font-size: 14px; }
.post-file-attach i { font-size: 19px; color: var(--accent); }
.post-stats { display: flex; align-items: center; gap: 18px; padding: 12px 20px; font-size: 13px; color: var(--text-tertiary); border-top: 1px solid transparent; }
.post-actions { display: flex; align-items: center; padding: 10px 16px; border-top: 1px solid transparent; gap: 6px; }
.post-action-btn {
    display: flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: var(--radius-full); border: none; background: transparent;
    color: var(--text-secondary); font-family: var(--font-sans); font-size: 13.5px; font-weight: 550;
    cursor: pointer; transition: all var(--t-fast);
    position: relative; overflow: hidden;
}
.post-action-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); transform: translateY(-1px); box-shadow: none; }
.post-action-btn.liked { color: var(--danger); }
.post-action-btn.liked:hover { background: var(--danger-soft); }
.post-action-btn.commented:hover { color: var(--accent); background: var(--accent-soft); }

/* ==========================================================================
   COMMENTS (LIQUID GLASS STYLED)
   ========================================================================== */
.comment-section { --glass-tint-layer: rgba(8, 12, 22, 0.50); padding: 20px; border-top: 1px solid transparent; }
.comment-input-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.comment-input-row .avatar { flex-shrink: 0; }
.comment-form { flex: 1; display: flex; gap: 8px; min-width: 0; }
.comment-form input {
    flex: 1; min-width: 0; padding: 10px 16px; background: rgba(14, 20, 34, 0.8);
    border: 1px solid transparent; border-radius: var(--radius-full);
    color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; outline: none;
    box-shadow: none;
    transition: all var(--t-fast);
}
.comment-form input:focus { border-color: transparent; box-shadow: 0 0 0 3px var(--accent-ring); }
.comment-form input::placeholder { color: var(--text-quaternary); }
.comment-item { display: flex; gap: 12px; margin-bottom: 16px; }
.comment-content {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    flex: 1; min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.comment-author { font-weight: 650; font-size: 13.5px; color: var(--text-primary); margin-bottom: 3px; }
.comment-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.comment-text .html-content { font-size: 14px; }
.comment-meta { font-size: 12px; color: var(--text-quaternary); margin-top: 8px; }

/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-header {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    position: relative;
    margin-bottom: 32px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15) !important;
}
.profile-cover { width: 100%; height: 230px; object-fit: cover; display: block; }
.profile-header::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 230px; background: linear-gradient(180deg, rgba(8, 12, 20, 0.1) 0%, rgba(12, 18, 30, 0.98) 100%); pointer-events: none; }
.profile-info-bar { display: flex; align-items: flex-end; gap: 22px; padding: 0 30px; margin-top: -60px; position: relative; z-index: 2; }
.profile-avatar-main { width: 118px; height: 118px; border-radius: var(--radius-full); border: 4px solid transparent !important; background: var(--surface-2); object-fit: cover; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; }
.profile-details { flex: 1; padding-bottom: 12px; min-width: 0; }
.profile-name { font-size: 26px; font-weight: 750; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; letter-spacing: -0.025em; font-family: var(--font-display); }
.profile-handle { font-size: 14px; color: var(--text-tertiary); margin-bottom: 8px; }
.profile-bio { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; max-width: 640px; }
.profile-actions { display: flex; gap: 10px; padding: 20px 30px 0; flex-wrap: wrap; position: relative; z-index: 2; }
.profile-stats-bar { display: flex; gap: 36px; padding: 20px 30px; margin-top: 20px; border-top: 1px solid transparent !important; }
.profile-stat { text-align: left; }
.profile-stat-value { font-size: 20px; font-weight: 750; color: var(--text-primary); font-family: var(--font-display); }
.profile-stat-label { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ==========================================================================
   LEADERBOARD & RANK TABLES (LIQUID GLASS STYLED)
   ========================================================================== */
.leaderboard-podium { display: flex; justify-content: center; align-items: flex-end; gap: 20px; margin-bottom: 40px; padding: 0 16px; }
.podium-card {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    text-align: center; flex: 1; max-width: 220px;
    border: 1px solid transparent;
    border-radius: var(--radius-2xl);
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.podium-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.55), 0 0 30px rgba(59, 130, 246, 0.4);
}
.podium-avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px; }
.podium-avatar-wrap .avatar { width: 80px; height: 80px; border-radius: var(--radius-full); border: 3px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
.podium-rank-badge { position: absolute; bottom: -6px; right: -6px; width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.podium-rank-1 .podium-rank-badge { background: #ffd60a; color: #000; box-shadow: 0 0 14px rgba(255, 214, 10, 0.85); }
.podium-rank-2 .podium-rank-badge { background: #e5e5ea; color: #000; }
.podium-rank-3 .podium-rank-badge { background: #ff9f0a; color: #000; }
.podium-rank-1 .avatar { border-color: transparent; width: 100px; height: 100px; }
.podium-rank-2 .avatar { border-color: transparent; }
.podium-rank-3 .avatar { border-color: transparent; }
.podium-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.podium-points { font-size: 13.5px; color: var(--cyan); font-family: var(--font-mono); margin-top: 3px; font-weight: 650; }

.leaderboard-item {
    display: flex; align-items: center; gap: 18px; padding: 14px 20px;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(6px) scale(1.015);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-rank { width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center; font-weight: 750; font-size: 13.5px; flex-shrink: 0; border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); box-shadow: none; }
.rank-1 { background: rgba(255, 214, 10, 0.2); color: #ffd60a; border-color: transparent; box-shadow: 0 0 10px rgba(255, 214, 10, 0.4); }
.rank-2 { background: rgba(229, 229, 234, 0.2); color: #e5e5ea; border-color: transparent; }
.rank-3 { background: rgba(255, 159, 10, 0.2); color: #ff9f0a; border-color: transparent; }
.rank-other { background: rgba(255, 255, 255, 0.06); color: var(--text-tertiary); }
.leaderboard-user { flex: 1; min-width: 0; }
.leaderboard-name { font-weight: 650; font-size: 14.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-points { font-weight: 700; font-size: 14.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); }

/* ==========================================================================
   GLOBAL CHAT & DMS (LIQUID GLASS STYLED)
   ========================================================================== */
.chat-container {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    display: flex; flex-direction: column; height: calc(100vh - 190px);
    border-radius: var(--radius-xl); border: 1px solid transparent; overflow: hidden;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overscroll-behavior: contain; }
.chat-message { display: flex; gap: 12px; max-width: 82%; animation: bubbleSpringIn 0.35s var(--ease-spring); }
@keyframes bubbleSpringIn {
    0%   { opacity: 0; transform: scale(0.9) translateY(8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.chat-message.own { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble {
    background: rgba(255, 255, 255, 0.09);
    padding: 11px 16px; border-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xs);
    font-size: 14px; line-height: 1.55; word-break: break-word; max-width: 100%;
    border: 1px solid transparent;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.chat-message.own .chat-bubble {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #fff;
    border-bottom-right-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xl);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
}
.chat-message.own .chat-bubble a { color: #dbeafe; }
.chat-bubble .html-content { font-size: 14px; }
.chat-bubble .chat-media { max-width: 270px; margin-top: 8px; }
.chat-bubble .chat-media img, .chat-bubble .chat-media video { max-width: 100%; border-radius: var(--radius-md); display: block; }
.chat-bubble-author { font-size: 12px; font-weight: 650; color: var(--cyan); margin-bottom: 3px; }
.chat-bubble-time { font-size: 11px; color: var(--text-quaternary); margin-top: 5px; text-align: right; }
.chat-message.own .chat-bubble-time { color: rgba(255, 255, 255, 0.75); }
.chat-input-area {
    --glass-tint-layer: rgba(10, 15, 26, 0.60);
    padding: 14px 18px; border-top: 1px solid transparent;
    display: flex; gap: 12px; align-items: flex-end;
}
.chat-input {
    flex: 1; min-width: 0; padding: 11px 16px; background: rgba(16, 24, 40, 0.8);
    border: 1px solid transparent; border-radius: var(--radius-full);
    color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; outline: none; resize: none; max-height: 130px;
    box-shadow: none;
    transition: all var(--t-fast);
}
.chat-input:focus { border-color: transparent; box-shadow: 0 0 0 3px var(--accent-ring); }

/* ==========================================================================
   WIDGETS (LIQUID GLASS STYLED)
   ========================================================================== */
.widget-card {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    border-radius: var(--radius-xl); border: 1px solid transparent; padding: 20px;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.widget-card:hover {
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.55), 0 0 30px rgba(59, 130, 246, 0.4);
}
.widget-title { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.widget-title i { font-size: 13px; color: var(--accent); }
.weather-widget { display: flex; align-items: center; gap: 16px; }
.weather-icon { font-size: 38px; }
.weather-temp { font-size: 30px; font-weight: 750; color: var(--text-primary); letter-spacing: -0.02em; font-family: var(--font-display); }
.weather-desc { font-size: 13px; color: var(--text-secondary); text-transform: capitalize; }
.weather-location { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.clock-widget { text-align: center; padding: 8px 0; }
.clock-time { font-size: 36px; font-weight: 750; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-family: var(--font-display); }
.clock-date { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* ==========================================================================
   TICKETS (LIQUID GLASS STYLED)
   ========================================================================== */
.ticket-card {
    background: transparent; /* liquid glass: refraction handled by ::before/::after layers */
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    padding: 20px; margin-bottom: 16px;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.4), 0 0 20px -2px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.ticket-card:hover {
    border-color: transparent !important;
    border-left-color: transparent;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.55), 0 0 30px rgba(59, 130, 246, 0.4);
}
.ticket-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ticket-id { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); background: rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: var(--radius-full); border: 1px solid transparent; }
.ticket-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.ticket-status.open        { background: rgba(59, 130, 246, 0.15); color: var(--cyan); border-color: transparent; }
.ticket-status.in_progress { background: rgba(245, 158, 11, 0.15); color: var(--warning); border-color: transparent; }
.ticket-status.resolved    { background: rgba(16, 185, 129, 0.15); color: var(--success); border-color: transparent; }
.ticket-status.closed      { background: rgba(255, 255, 255, 0.08); color: var(--text-tertiary); border-color: transparent; }
.ticket-title { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.ticket-meta { font-size: 13px; color: var(--text-tertiary); display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ticket-license-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full); background: rgba(168, 85, 247, 0.15); color: var(--purple); font-size: 12px; font-family: var(--font-mono); border: 1px solid transparent; margin-bottom: 12px; }

/* Announcements */
.announcement-bar {
    --glass-tint-image: linear-gradient(90deg, rgba(59, 130, 246, 0.22) 0%, rgba(168, 85, 247, 0.22) 100%);
    border-bottom: 1px solid transparent; color: var(--text-primary);
    padding: 12px 24px; text-align: center; font-size: 14px; font-weight: 550;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.announcement-bar i { font-size: 15px; color: var(--cyan); }
.announcement-dismiss { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 15px; width: 26px; height: 26px; border-radius: var(--radius-full); display: grid; place-items: center; margin-left: auto; transition: all var(--t-fast); }
.announcement-dismiss:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.hashtag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); font-size: 13px; font-weight: 550; text-decoration: none; transition: all var(--t-fast); border: 1px solid transparent; }
.hashtag-chip:hover { background: rgba(168, 85, 247, 0.2); border-color: transparent; color: #ffffff; transform: translateY(-1px); }
.hashtag-chip .count { font-size: 11px; color: var(--text-quaternary); font-family: var(--font-mono); }

/* Feedback States */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.4s infinite linear; border-radius: var(--radius-md); }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner { width: 22px; height: 22px; border: 2.5px solid transparent; border-top-color: var(--accent); border-radius: var(--radius-full); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 56px 24px; color: var(--text-secondary); }
.empty-state-icon { font-size: 38px; margin-bottom: 16px; color: var(--text-quaternary); }
.empty-state-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; font-family: var(--font-display); }
.empty-state-desc { font-size: 14px; color: var(--text-tertiary); max-width: 440px; margin: 0 auto; line-height: 1.6; }

.divider { height: 1px; background: transparent; margin: 24px 0; border: none; }
.divider-with-text { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--text-quaternary); font-size: 12.5px; }
.divider-with-text::before, .divider-with-text::after { content: ''; flex: 1; height: 1px; background: transparent; }

/* HTML Editor */
.html-toolbar { display: flex; align-items: center; gap: 2px; padding: 8px 10px; background: rgba(20, 29, 48, 0.9); border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; flex-wrap: wrap; }
.html-toolbar button { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 13.5px; transition: all var(--t-fast); }
.html-toolbar button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.html-toolbar .toolbar-sep { width: 1px; height: 18px; background: transparent; margin: 0 6px; }
.html-editor { background: rgba(10, 16, 28, 0.7); border: 1px solid transparent; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 16px 18px; min-height: 130px; color: var(--text-primary); font-family: var(--font-sans); font-size: 14.5px; outline: none; line-height: 1.65; overflow-y: auto; transition: all var(--t-fast); }
.html-editor:focus { border-color: transparent; box-shadow: 0 0 0 3px var(--accent-ring); }
.html-editor:empty::before { content: attr(data-placeholder); color: var(--text-quaternary); }

/* ==========================================================================
   MULTI-IMAGE POST GALLERY & LIGHTBOX
   ========================================================================== */
.post-media-grid { display: grid; gap: 8px; margin: 12px 0 16px; border-radius: var(--radius-lg); overflow: hidden; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 16px rgba(0,0,0,0.3); width: 100%; max-width: 580px; }
.post-media-grid.grid-1 { grid-template-columns: 1fr; max-height: 380px; }
.post-media-grid.grid-1 .media-item { height: 100%; max-height: 380px; display: flex; align-items: center; justify-content: center; background: #080c14; border-radius: 14px; }
.post-media-grid.grid-1 .media-item img, .post-media-grid.grid-1 .media-item video { width: 100%; max-height: 380px; object-fit: cover; display: block; cursor: pointer; border-radius: 14px; transition: transform 0.25s ease; }
.post-media-grid.grid-1 .media-item:hover img { transform: scale(1.02); }
.post-media-grid.grid-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; max-height: 260px; }
.post-media-grid.grid-2 .media-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.post-media-grid.grid-3 { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; max-height: 280px; }
.post-media-grid.grid-3 .media-item:first-child { grid-row: 1 / 3; }
.post-media-grid.grid-3 .media-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.post-media-grid.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; max-height: 300px; }
.post-media-grid.grid-4 .media-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.media-item { position: relative; overflow: hidden; background: #000; width: 100%; height: 100%; min-height: 120px; }
.media-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease-spring); }
.media-item:hover img { transform: scale(1.05); }
.media-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 800; cursor: pointer; }

/* Lightbox Modal */
.post-lightbox-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.94); backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; }
.post-lightbox-modal.active { display: flex !important; animation: luxuryFadeInScale 0.3s var(--ease-spring); }
.post-lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 10px 50px rgba(0,0,0,0.85); }
.post-lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255,255,255,0.12); border: 1px solid transparent; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); }
.post-lightbox-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }
.post-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(255,255,255,0.12); border: 1px solid transparent; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); }
.post-lightbox-nav:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.08); }
.post-lightbox-prev { left: 24px; }
.post-lightbox-next { right: 24px; }
.post-lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 6px 18px; border-radius: var(--radius-full); border: 1px solid transparent; color: #fff; font-size: 13px; font-weight: 700; }

/* Multi-Attach Composer Preview Strip */
.tl-multi-attach-container { display: none; flex-wrap: wrap; gap: 10px; margin-top: 12px; margin-bottom: 12px; }
.tl-attach-card { position: relative; width: 100px; height: 100px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid transparent; background: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.tl-attach-card img, .tl-attach-card video { width: 100%; height: 100%; object-fit: cover; }
.tl-attach-card-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: var(--radius-full); background: rgba(0,0,0,0.8); border: 1px solid transparent; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; }
.tl-attach-card-remove:hover { background: var(--danger); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 26px; } h2 { font-size: 21px; } h3 { font-size: 18px; }

    .nav-container { padding: 0 16px; height: 58px; }
    .nav-right { gap: 4px; }
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .service-host .service-home-btn { display: none; }
    .service-host .nav-right > #searchToggle,
    .service-host .nav-right > .notif-btn,
    .service-host .nav-right > .message-btn { display: none; }
    .service-host .nav-lang-btn { width: 38px; padding-inline: 0; justify-content: center; }
    .service-host .nav-lang-btn > span:nth-child(2),
    .service-host .nav-lang-btn > i { display: none; }
    .service-host .service-signin-btn { width: 38px; padding-inline: 0; justify-content: center; }
    .service-host .service-signin-btn span { display: none; }

    .main-content { padding: 20px 16px 88px; }
    .mobile-tab-bar { display: flex; }
    .chat-fab { bottom: 76px; right: 16px; width: 46px; height: 46px; font-size: 17px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .card-header { padding: 16px 18px; }
    .card-body { padding: 18px; }

    .profile-cover { height: 150px; }
    .profile-header::after { height: 150px; }
    .profile-info-bar { margin-top: -48px; padding: 0 16px; gap: 14px; flex-direction: column; align-items: center; text-align: center; }
    .profile-avatar-main { width: 92px; height: 92px; }
    .profile-name { font-size: 21px; justify-content: center; }
    .profile-actions { justify-content: center; padding: 14px 16px 0; }
    .profile-stats-bar { gap: 24px; padding: 14px 16px; justify-content: center; }

    .footer-container { padding: 30px 16px; }
    .footer-links { gap: 14px; flex-direction: column; align-items: flex-start; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .chat-container { height: calc(100vh - 150px); border-radius: var(--radius-lg); }
    .chat-message { max-width: 90%; }

    /* Sheet-style modals on small screens */
    .modal { padding: 0; align-items: flex-end; }
    .modal-content { max-height: 92vh; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; transform: translateY(100%); max-width: none; }
    .modal.active .modal-content { transform: translateY(0); }

    .toast-container { left: 14px; right: 14px; top: 68px; }
    .toast { max-width: none; min-width: 0; width: 100%; transform: translateY(-120%); }
    .toast.show { transform: translateY(0); }

    .leaderboard-podium { gap: 10px; padding: 0; }
    .podium-avatar-wrap .avatar { width: 64px; height: 64px; }
    .search-container { padding: 0 16px; }

    .form-input, .form-select, .form-textarea, .chat-input, .comment-form input, .search-input { font-size: 16px; }
}

/* ==========================================================================
   HEAVILY ANIMATED KINETIC MOTION SYSTEM
   ========================================================================== */

@keyframes luxuryFadeInScale {
    0%   { opacity: 0; transform: scale(0.92) translateY(12px); filter: blur(6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes luxuryFadeOutScale {
    0%   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: scale(0.92) translateY(-6px); filter: blur(4px); }
}
@keyframes luxuryShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes luxuryPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
    50%      { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}
@keyframes rotateBorderSweep {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes cyberGlowSweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes rippleSpread {
    0%   { transform: scale(0); opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Kinetic Ripple Waves */
.cyber-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 80%);
    pointer-events: none;
    transform: scale(0);
    animation: rippleSpread 0.65s ease-out forwards;
    z-index: 10;
}

/* Kinetic Scroll Reveal Items */
.reveal-item {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Modals, tabs, dropdowns, and drawers are always 100% visible and unconstrained */
.modal .reveal-item,
.modal-content .reveal-item,
.admin-tab-pane .reveal-item,
.tab-pane .reveal-item,
.dropdown-menu .reveal-item,
.modal .card,
.modal-content .card,
.admin-tab-pane .card,
.tab-pane .card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Interactive Quick Hub Items */
.quick-hub-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border-radius: var(--radius-lg); text-decoration: none; color: inherit;
    transition: all var(--t-fast); position: relative; overflow: hidden;
}
.quick-hub-item:hover { transform: translateX(4px) scale(1.02); background: rgba(255, 255, 255, 0.06); box-shadow: 0 6px 20px -6px rgba(59, 130, 246, 0.35); }
.quick-hub-item:active { transform: translateX(2px) scale(0.98); }
.quick-hub-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; transition: transform var(--t-fast); }
.quick-hub-item:hover .quick-hub-icon { transform: scale(1.12) rotate(4deg); }
.quick-hub-info { flex: 1; min-width: 0; }
.quick-hub-title { font-weight: 650; font-size: 14px; color: var(--text-primary); }
.quick-hub-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
.quick-hub-arrow { color: var(--text-quaternary); font-size: 12px; transition: transform var(--t-fast), color var(--t-fast); }
.quick-hub-item:hover .quick-hub-arrow { transform: translateX(3px); color: var(--accent); }

/* Electric Shimmer Text */
.luxury-shimmer-text, .cyber-shimmer-text, .neon-shimmer {
    background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 25%, #c084fc 50%, #60a5fa 75%, #38bdf8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: luxuryShimmer 3.5s linear infinite;
}

/* Attention pulse */
.luxury-pulse, .cyber-pulse { animation: luxuryPulseGlow 2.2s ease-out infinite; }

/*
 * 3D tilt-on-hover with Dynamic Specular Glare.
 */
.tilt-3d, .card, .plan-card, .blog-card, .widget-card, .post-card, .admin-card {
    --tilt-x: 0deg; --tilt-y: 0deg;
    --glare-x: 50%; --glare-y: 50%; --glare-opacity: 0;
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.15s ease-out, box-shadow var(--t-base), border-color var(--t-base);
    will-change: transform;
}
.tilt-3d:hover { box-shadow: var(--accent-glow-strong), var(--shadow-xl); }

@media (max-width: 640px) {
    .tilt-3d, .card, .plan-card, .blog-card, .widget-card, .post-card, .admin-card { transform: none !important; }
}

/* SweetAlert2 popups styled to match the cyber glass system */
.swal2-popup {
    --glass-tint-layer: rgba(16, 24, 42, 0.74);
    border: 1px solid transparent !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xl), var(--accent-glow) !important;
    color: var(--text-primary) !important;
}
.swal2-title { color: var(--text-primary) !important; font-family: var(--font-display) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    background: rgba(10, 16, 28, 0.6) !important; border: 1px solid transparent !important;
    color: var(--text-primary) !important; border-radius: var(--radius-md) !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus { border-color: transparent !important; box-shadow: 0 0 0 4px var(--accent-ring) !important; }
.swal2-confirm { background: var(--accent-gradient) !important; background-size: 200% auto !important; color: #ffffff !important; font-weight: 750 !important; box-shadow: var(--accent-glow) !important; }
.swal2-confirm:hover { background-position: 100% 50% !important; transform: translateY(-1px); }
.swal2-cancel { background: rgba(255, 255, 255, 0.08) !important; }
.swal2-icon.swal2-warning { border-color: var(--warning) !important; color: var(--warning) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success-soft) !important; }
.swal2-icon.swal2-error { border-color: var(--danger) !important; color: var(--danger) !important; }
.swal2-popup.swal2-show { animation: luxuryFadeInScale 0.35s var(--ease-spring) !important; }
.swal2-popup.swal2-hide { animation: luxuryFadeOutScale 0.2s ease-in !important; }

@media print {
    .nav-bar, .mobile-tab-bar, .chat-fab, .site-footer, .toast-container,
    .search-overlay, .ios-status-bar, #ambient-fx-canvas { display: none !important; }
    body { background: #fff; color: #000; }
    .main-content { padding: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .modal-content, .toast, .reveal-item { transform: none !important; opacity: 1 !important; }
}

/* ============================================================================
   LIQUID GLASS SURFACE ENFORCEMENT (must stay last in this file)
   ----------------------------------------------------------------------------
   A glass surface has to be fully transparent for the refraction to be visible:
   the tint + rim come from ::before (z-index 0) and the blurred, SVG-displaced
   backdrop comes from ::after (z-index -1, behind the element's own background).
   Any semi-opaque background or element-level backdrop-filter painted on the
   surface itself covers that ::after layer and flattens the card back into a
   plain dark panel. Page-level <style> blocks load after this file, so the
   reset is marked !important to keep them from re-opacifying the glass.
   ========================================================================== */
.liquid-glass,
.liquidGlass,
.liquidGlass-wrapper,
[data-liquid-glass],
.card,
.post-card,
.comment-content,
.widget-card,
.admin-card,
.ticket-card,
.podium-card,
.rank-info-bar,
.leaderboard-list-card,
.uc-topbar,
.uc-category-card,
.uc-post-card,
.uc-quick-reply,
.chat-container,
.quick-hub-card,
.tl-widget-card,
.modal-content,
.sb-kpi-card,
.sb-card,
.plan-card,
.blog-card,
.friend-card,
.glow-border,
.spotlight-card,
.landing-glass-card,
.landing-auth-card,
.auth-card,
.auth-fluid-station,
.user-session-station,
.trifecta-card,
.terminal-showcase-box,
.safe-ad-sandbox-box,
.landing-link-card,
.courses-hero,
.course-card,
.stat-card,
.enrolled-course-card,
.shorts-container,
.short-comments-panel,
.vid-card,
.tl-empty,
.lesson-card,
.challenge-card,
.lab-card,
.profile-header,
.profile-stats-bar,
.feed-filter-bar,
.create-post-card,
.forum-card,
.vps-card,
.list-group {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================================
   NESTED GLASS - INNER SURFACES
   ----------------------------------------------------------------------------
   A glass surface inside another glass surface blurs an already-blurred
   backdrop and stacks a second tint on top of the first. The result is not more
   glass, it is a dull grey plate sitting in the middle of a clear pane - which
   is what the admin tables looked like, since every .table-container and
   .table-responsive lives inside a .card or .sb-card.

   The wrappers are out of the glass tiers entirely: they are layout, the card
   around them is the pane, and .table-responsive scrolls horizontally so a
   layer pinned to its padding box would slide out from under the table anyway.

   The surfaces below do keep a fill, because they are meant to read as a plate
   on the glass - a header band, an input bar, a highlighted row - but they take
   it without a second blur or a second refraction pass. */
.table-container,
.table-responsive {
  isolation: auto;
}

.comment-section::after,
.chat-input-area::after,
.leaderboard-item::after,
.conv-item::after,
.readme-header::after,
.diff-file-header::after,
.modal-header::after,
.queued-file-row::after,
.short-comments-input::after,
.tutorial-box::after,
.redeem-icon-wrapper::after,
.share-icon-wrap::after {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  -webkit-filter: none;
}

/* ============================================================================
   LIQUID GLASS TIER 2 - CHROME SURFACES
   ----------------------------------------------------------------------------
   The persistent chrome - bars, menus, drawers, footers, toasts - gets the same
   optics as the cards above, with two deliberate differences.

   1. No forced radius or elevation. A full-bleed bar must not round itself.
   2. The tint rides on ::after (under the content) rather than on ::before
      (over it). Painting order inside a stacking context puts a z-index:0
      pseudo above in-flow text, which is harmless for a card's 3% veil but
      would visibly dim a menu behind its own 72% fill. ::before is left to
      draw the specular rim, which does belong on top.

   Chrome tints are heavier than card tints on purpose: a dropdown has arbitrary
   page content behind it and still has to be readable.
   ========================================================================== */
.ios-status-bar,
.nav-bar,
.dropdown-menu,
.search-form,
.mobile-drawer,
.site-footer,
.mobile-tab-bar,
.comment-section,
.chat-input-area,
.tabs,
.admin-tabs-container,
.custom-file-upload,
.toast,
.announcement-bar,
.modal-header,
.swal2-popup,
.leaderboard-item,
.alert {
  isolation: isolate;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Only the surfaces that are statically positioned need a containing block of
   their own. The bars and menus already position themselves - .nav-bar and
   .modal-header are sticky, .ios-status-bar / .mobile-drawer / .mobile-tab-bar
   are fixed, .dropdown-menu is absolute - and blanket-setting relative here
   would quietly unstick every one of them. */
.search-form,
.site-footer,
.comment-section,
.chat-input-area,
.tabs,
.admin-tabs-container,
.custom-file-upload,
.toast,
.announcement-bar,
.swal2-popup,
.leaderboard-item,
.alert {
  position: relative;
}

/* The fill moves to the ::after layer so the refraction is not painted over.
   Kept off .alert and .leaderboard-item on purpose: their fill is state, not
   chrome - .alert-success and friends colour-code the element itself, and the
   leaderboard row lights up on hover. Those keep painting their own. */
.ios-status-bar,
.nav-bar,
.dropdown-menu,
.search-form,
.mobile-drawer,
.site-footer,
.mobile-tab-bar,
.comment-section,
.chat-input-area,
.tabs,
.admin-tabs-container,
.custom-file-upload,
.toast,
.announcement-bar,
.modal-header,
.swal2-popup {
  background: transparent !important;
  background-color: transparent !important;
}

/* Floating surfaces keep a specular rim; edge-to-edge bars stay rimless. */
.dropdown-menu,
.search-form,
.mobile-drawer,
.tabs,
.admin-tabs-container,
.custom-file-upload,
.toast,
.swal2-popup,
.alert {
  --glass-rim: rgba(255, 255, 255, 0.16);
}

/* Layer 1: specular rim only */
.ios-status-bar::before,
.nav-bar::before,
.dropdown-menu::before,
.search-form::before,
.mobile-drawer::before,
.site-footer::before,
.mobile-tab-bar::before,
.comment-section::before,
.chat-input-area::before,
.tabs::before,
.admin-tabs-container::before,
.custom-file-upload::before,
.toast::before,
.announcement-bar::before,
.modal-header::before,
.swal2-popup::before,
.leaderboard-item::before,
.alert::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-rim, transparent);
  background: none;
  pointer-events: none;
}

/* Layer 0: tinted, refractive backdrop */
.ios-status-bar::after,
.nav-bar::after,
.dropdown-menu::after,
.search-form::after,
.mobile-drawer::after,
.site-footer::after,
.mobile-tab-bar::after,
.comment-section::after,
.chat-input-area::after,
.tabs::after,
.admin-tabs-container::after,
.custom-file-upload::after,
.toast::after,
.announcement-bar::after,
.modal-header::after,
.swal2-popup::after,
.leaderboard-item::after,
.alert::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-tint-layer, rgba(255, 255, 255, 0.03));
  background-image: var(--glass-tint-image, linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

/* These two carry state in their fill rather than a fixed chrome tint, so the
   glass layer inherits whatever the element is currently painting - the
   .alert-success / .alert-danger colour coding, and the leaderboard row's
   hover highlight - instead of a constant tint. Without this the opaque
   refraction would sit on top of that fill and swallow it. */
.leaderboard-item::after,
.alert::after {
  background-color: inherit;
  background-image: inherit;
}

/* ============================================================================
   LIQUID GLASS TIER 3 - CONTROLS
   ----------------------------------------------------------------------------
   Buttons, badges, chips and bubbles are too small for the panel filter: an 85px
   displacement across a 34px button reads as noise, not as glass. They use the
   -fine filter (tighter noise field, 16px throw) over a 2px blur.

   Their fill is re-declared on the glass layer with `inherit`, which resolves
   against the originating element - so a control keeps its own colour and, more
   importantly, keeps tracking it through :hover and state classes without any
   of those fills having to be duplicated here.

   Form fields and the toggle knob are deliberately absent: <input>, <select>
   and <textarea> are replaced elements that render no pseudo-elements at all,
   and .toggle-slider::after is already the knob. Those keep a plain blur.
   ========================================================================== */
.github-btn,
.btn-glass,
.zoom-btn,
.menu-toggle,
.nav-link,
.nav-action-btn,
.nav-user-btn,
.search-close,
.media-attach-btn,
.btn-secondary,
.btn-outline,
.badge,
.user-badge,
.badge-display,
.chat-bubble,
.post-lightbox-counter {
  isolation: isolate;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* .post-lightbox-counter is absolutely positioned already; the rest are static
   and need a containing block for their glass layer. */
.github-btn,
.btn-glass,
.zoom-btn,
.menu-toggle,
.nav-link,
.nav-action-btn,
.nav-user-btn,
.search-close,
.media-attach-btn,
.btn-secondary,
.btn-outline,
.badge,
.user-badge,
.badge-display,
.chat-bubble {
  position: relative;
}

.github-btn::after,
.btn-glass::after,
.zoom-btn::after,
.menu-toggle::after,
.nav-action-btn::after,
.nav-user-btn::after,
.search-close::after,
.media-attach-btn::after,
.btn-secondary::after,
.btn-outline::after,
.badge::after,
.user-badge::after,
.badge-display::after,
.chat-bubble::after,
.post-lightbox-counter::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: inherit;
  background-image: inherit;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
  isolation: isolate;
  pointer-events: none;
}

/* Nav links are bare until hovered, so their glass fades in with the hover
   state instead of sitting under every link permanently. */
.nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: inherit;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.nav-link:hover::after {
  opacity: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
}

/* Mobile: same optics, lighter blur - matches the card tier's mobile step. */
@media (max-width: 768px) {
  .ios-status-bar::after,
  .nav-bar::after,
  .dropdown-menu::after,
  .search-form::after,
  .mobile-drawer::after,
  .site-footer::after,
  .mobile-tab-bar::after,
  .comment-section::after,
  .chat-input-area::after,
  .tabs::after,
  .admin-tabs-container::after,
  .custom-file-upload::after,
  .toast::after,
  .announcement-bar::after,
  .modal-header::after,
  .swal2-popup::after,
  .leaderboard-item::after,
  .alert::after {
    backdrop-filter: blur(2.1px);
    -webkit-backdrop-filter: blur(2.1px);
  }
}

/* ============================================================================
   LIQUID GLASS - REDUCED MOTION / LOW POWER FALLBACK
   ----------------------------------------------------------------------------
   Every glass surface runs an offscreen SVG filter pass, and a long feed can
   put a few hundred of them on one page. Readers who ask for reduced motion are
   frequently asking for a cheaper page too, so drop the displacement there and
   keep the plain blur - the surfaces still read as glass, without the
   per-element turbulence.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .liquid-glass::after,
  .liquidGlass::after,
  .liquidGlass-wrapper::after,
  .liquidGlass-effect,
  [data-liquid-glass]::after,
  .card::after,
  .post-card::after,
  .comment-content::after,
  .widget-card::after,
  .admin-card::after,
  .ticket-card::after,
  .podium-card::after,
  .rank-info-bar::after,
  .leaderboard-list-card::after,
  .uc-topbar::after,
  .uc-category-card::after,
  .uc-post-card::after,
  .uc-quick-reply::after,
  .chat-container::after,
  .quick-hub-card::after,
  .tl-widget-card::after,
  .modal-content::after,
  .sb-kpi-card::after,
  .sb-card::after,
  .plan-card::after,
  .blog-card::after,
  .friend-card::after,
  .glow-border::after,
  .spotlight-card::after,
  .landing-glass-card::after,
  .landing-auth-card::after,
  .auth-card::after,
  .landing-link-card::after,
  .profile-header::after,
  .profile-stats-bar::after,
  .feed-filter-bar::after,
  .create-post-card::after,
  .forum-card::after,
  .vps-card::after,
  .list-group::after,
  .ios-status-bar::after,
  .nav-bar::after,
  .dropdown-menu::after,
  .search-form::after,
  .mobile-drawer::after,
  .site-footer::after,
  .mobile-tab-bar::after,
  .comment-section::after,
  .chat-input-area::after,
  .tabs::after,
  .admin-tabs-container::after,
  .custom-file-upload::after,
  .toast::after,
  .announcement-bar::after,
  .modal-header::after,
  .swal2-popup::after,
  .leaderboard-item::after,
  .alert::after,
  .github-btn::after,
  .btn-glass::after,
  .zoom-btn::after,
  .menu-toggle::after,
  .nav-link:hover::after,
  .nav-action-btn::after,
  .nav-user-btn::after,
  .search-close::after,
  .media-attach-btn::after,
  .btn-secondary::after,
  .btn-outline::after,
  .badge::after,
  .user-badge::after,
  .badge-display::after,
  .chat-bubble::after,
  .post-lightbox-counter::after {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* ============================================================================
   LIQUID GLASS - FEATURE SURFACES
   ----------------------------------------------------------------------------
   The feature pages each ship their own <style> block, so their panels never
   matched any selector in the tiers above and stayed flat: Git (repos, README,
   contribution graph), Gallery, Video, Shorts, DMs, Redeem, Drive and the two
   Wallet balance containers. They are wired into the same tier-2 and tier-3
   optics here rather than in each page, so there is still one place where the
   glass is defined. Page <style> blocks load after this file, hence the
   !important on the fill resets.

   Left flat on purpose: .vs-ide-* (the editor chrome in git_repo is a VS Code
   replica - refracting a code surface makes it unreadable), the #0d1117 diff
   and README code blocks, the black video stages in watch/shorts/gallery, the
   contribution graph's 10px squares, the printable wallet receipt, and Drive's
   .queued-files-list - it scrolls its own content, and an absolutely positioned
   glass layer scrolls away with it, leaving the bottom of the box bare.
   ========================================================================== */

.git-hero,
.repo-card,
.repo-header-glass,
.readme-card,
.readme-header,
.diff-file-header,
.action-dropdown-menu,
.dev-profile-sidebar,
.profile-special-readme-card,
.profile-repo-card,
.contribution-grid-card,
.gallery-card,
.vid-card,
.watch-creator,
.watch-desc,
.short-comments-panel,
.short-comments-input,
.messages-sidebar,
.messages-main,
.redeem-card,
.tutorial-box,
.share-glass-card,
.file-item,
.vault-dropzone,
.pkg-card,
.balance-card,
.conv-item,
.watch-affiliate,
.sync-fork-banner,
.queued-file-row,
.redeem-icon-wrapper,
.share-icon-wrap {
  isolation: isolate;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* .action-dropdown-menu is absolute and .short-comments-panel is fixed; the
   rest are static and need a containing block for their glass layer. */
.git-hero,
.repo-card,
.repo-header-glass,
.readme-card,
.readme-header,
.diff-file-header,
.dev-profile-sidebar,
.profile-special-readme-card,
.profile-repo-card,
.contribution-grid-card,
.gallery-card,
.vid-card,
.watch-creator,
.watch-desc,
.short-comments-input,
.messages-sidebar,
.messages-main,
.redeem-card,
.tutorial-box,
.share-glass-card,
.file-item,
.vault-dropzone,
.pkg-card,
.balance-card,
.conv-item,
.watch-affiliate,
.sync-fork-banner,
.queued-file-row,
.redeem-icon-wrapper,
.share-icon-wrap {
  position: relative;
}

/* Fills move to the glass layer so the refraction is not painted over. */
.git-hero,
.repo-card,
.repo-header-glass,
.readme-card,
.readme-header,
.diff-file-header,
.action-dropdown-menu,
.dev-profile-sidebar,
.profile-special-readme-card,
.profile-repo-card,
.contribution-grid-card,
.gallery-card,
.vid-card,
.watch-creator,
.watch-desc,
.short-comments-panel,
.short-comments-input,
.messages-sidebar,
.messages-main,
.redeem-card,
.tutorial-box,
.share-glass-card,
.file-item,
.vault-dropzone,
.pkg-card {
  background: transparent !important;
  background-color: transparent !important;
}

/* .balance-card is deliberately absent: bc-fiat and bc-pts already draw their
   own green / blue border, and a white rim on top reads as a double border. */
.action-dropdown-menu,
.short-comments-panel,
.redeem-card,
.share-glass-card {
  --glass-rim: rgba(255, 255, 255, 0.16);
}

.git-hero { --glass-tint-layer: rgba(14, 20, 34, 0.42); }

.repo-card { --glass-tint-layer: rgba(12, 18, 30, 0.38); }

.repo-header-glass { --glass-tint-layer: rgba(14, 20, 34, 0.42); }

.readme-card { --glass-tint-layer: rgba(12, 18, 30, 0.38); }

.action-dropdown-menu { --glass-tint-layer: rgba(14, 20, 36, 0.72); }

.dev-profile-sidebar { --glass-tint-layer: rgba(14, 20, 34, 0.42); }

.profile-special-readme-card { --glass-tint-layer: rgba(12, 18, 30, 0.38); }

.profile-repo-card { --glass-tint-layer: rgba(12, 18, 30, 0.38); }

.contribution-grid-card { --glass-tint-layer: rgba(18, 24, 38, 0.45); }

.gallery-card { --glass-tint-layer: rgba(15, 23, 42, 0.42); }

.vid-card { --glass-tint-layer: rgba(15, 23, 42, 0.42); }

.watch-creator { --glass-tint-layer: rgba(15, 23, 42, 0.42); }

.watch-desc { --glass-tint-layer: rgba(15, 23, 42, 0.42); }

.short-comments-panel { --glass-tint-layer: rgba(12, 16, 26, 0.80); }

.short-comments-input { --glass-tint-layer: rgba(10, 15, 26, 0.60); }

.messages-sidebar { --glass-tint-layer: rgba(12, 18, 32, 0.45); }

.messages-main { --glass-tint-layer: rgba(12, 18, 32, 0.45); }

.redeem-card { --glass-tint-layer: rgba(20, 22, 30, 0.55); }

.tutorial-box { --glass-tint-layer: rgba(0, 0, 0, 0.18); }

.share-glass-card { --glass-tint-layer: rgba(14, 20, 34, 0.42); }

.file-item { --glass-tint-layer: rgba(14, 20, 34, 0.42); }

.vault-dropzone { --glass-tint-layer: rgba(0, 0, 0, 0.28); }

.pkg-card { --glass-tint-layer: rgba(15, 23, 42, 0.42); }

/* Layer 1: specular rim */
.git-hero::before,
.repo-card::before,
.repo-header-glass::before,
.readme-card::before,
.readme-header::before,
.diff-file-header::before,
.action-dropdown-menu::before,
.dev-profile-sidebar::before,
.profile-special-readme-card::before,
.profile-repo-card::before,
.contribution-grid-card::before,
.gallery-card::before,
.vid-card::before,
.watch-creator::before,
.watch-desc::before,
.short-comments-panel::before,
.short-comments-input::before,
.messages-sidebar::before,
.messages-main::before,
.redeem-card::before,
.tutorial-box::before,
.share-glass-card::before,
.file-item::before,
.vault-dropzone::before,
.pkg-card::before,
.balance-card::before,
.conv-item::before,
.watch-affiliate::before,
.sync-fork-banner::before,
.queued-file-row::before,
.redeem-icon-wrapper::before,
.share-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-rim, transparent);
  background: none;
  pointer-events: none;
}

/* Layer 0: tinted, refractive backdrop */
.git-hero::after,
.repo-card::after,
.repo-header-glass::after,
.readme-card::after,
.readme-header::after,
.diff-file-header::after,
.action-dropdown-menu::after,
.dev-profile-sidebar::after,
.profile-special-readme-card::after,
.profile-repo-card::after,
.contribution-grid-card::after,
.gallery-card::after,
.vid-card::after,
.watch-creator::after,
.watch-desc::after,
.short-comments-panel::after,
.short-comments-input::after,
.messages-sidebar::after,
.messages-main::after,
.redeem-card::after,
.tutorial-box::after,
.share-glass-card::after,
.file-item::after,
.vault-dropzone::after,
.pkg-card::after,
.balance-card::after,
.conv-item::after,
.watch-affiliate::after,
.sync-fork-banner::after,
.queued-file-row::after,
.redeem-icon-wrapper::after,
.share-icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-tint-layer, rgba(255, 255, 255, 0.03));
  background-image: var(--glass-tint-image, linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

/* These carry identity or state in their own fill - the fiat/points accent on
   the wallet cards, a conversation's unread and active states, the affiliate
   and fork banners, the encrypted-file row - so the glass layer inherits
   whatever the element is painting instead of a fixed tint. */
.balance-card::after,
.conv-item::after,
.watch-affiliate::after,
.sync-fork-banner::after,
.queued-file-row::after,
.redeem-icon-wrapper::after,
.share-icon-wrap::after {
  background-color: inherit;
  background-image: inherit;
}

/* Feature controls: fine-scale refraction, own fill carried by inherit. */
.vid-filter-btn,
.vid-duration,
.watch-act,
.watch-ad-skip,
.short-affiliate,
.short-action-btn i,
.enc-pill-opt,
.badge-enc,
.badge-plain,
.repo-badge-public,
.repo-badge-private,
.repo-badge-locked,
.vis-card-opt,
.step-num,
.yt-facade .yt-badge {
  isolation: isolate;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vid-filter-btn,
.watch-act,
.short-affiliate,
.short-action-btn i,
.enc-pill-opt,
.badge-enc,
.badge-plain,
.repo-badge-public,
.repo-badge-private,
.repo-badge-locked,
.vis-card-opt,
.step-num {
  position: relative;
}

.vid-filter-btn::after,
.vid-duration::after,
.watch-act::after,
.watch-ad-skip::after,
.short-affiliate::after,
.short-action-btn i::after,
.enc-pill-opt::after,
.badge-enc::after,
.badge-plain::after,
.repo-badge-public::after,
.repo-badge-private::after,
.repo-badge-locked::after,
.vis-card-opt::after,
.step-num::after,
.yt-facade .yt-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: inherit;
  background-image: inherit;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
  isolation: isolate;
  pointer-events: none;
}

/* Tab pills carry glass at rest and simply gain contrast when chosen - the
   fill they inherit is transparent until .active sets one, so an idle tab is a
   clear pane and the selected one is a tinted pane. */
.git-tab-link,
.repo-nav-tab,
.dev-tab-item,
.year-pill-btn,
.w-tab {
  position: relative;
  isolation: isolate;
}

.git-tab-link::after,
.repo-nav-tab::after,
.dev-tab-item::after,
.year-pill-btn::after,
.w-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: inherit;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
  transition: opacity var(--t-fast);
  pointer-events: none;
}

/* Idle tabs sit a little further back so the chosen one still reads as chosen. */
.git-tab-link::after,
.repo-nav-tab::after,
.dev-tab-item::after,
.year-pill-btn::after,
.w-tab::after {
  opacity: 0.55;
}
.git-tab-link:hover::after,
.repo-nav-tab:hover::after,
.dev-tab-item:hover::after,
.year-pill-btn:hover::after,
.w-tab:hover::after,
.git-tab-link.active::after,
.repo-nav-tab.active::after,
.dev-tab-item.active::after,
.year-pill-btn.active::after,
.w-tab.active::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .git-hero::after,
  .repo-card::after,
  .repo-header-glass::after,
  .readme-card::after,
  .readme-header::after,
  .diff-file-header::after,
  .action-dropdown-menu::after,
  .dev-profile-sidebar::after,
  .profile-special-readme-card::after,
  .profile-repo-card::after,
  .contribution-grid-card::after,
  .gallery-card::after,
  .vid-card::after,
  .watch-creator::after,
  .watch-desc::after,
  .short-comments-panel::after,
  .short-comments-input::after,
  .messages-sidebar::after,
  .messages-main::after,
  .redeem-card::after,
  .tutorial-box::after,
  .share-glass-card::after,
  .file-item::after,
  .vault-dropzone::after,
  .pkg-card::after,
  .balance-card::after,
  .conv-item::after,
  .watch-affiliate::after,
  .sync-fork-banner::after,
  .queued-file-row::after,
  .redeem-icon-wrapper::after,
  .share-icon-wrap::after {
    backdrop-filter: blur(2.1px);
    -webkit-backdrop-filter: blur(2.1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .git-hero::after,
  .repo-card::after,
  .repo-header-glass::after,
  .readme-card::after,
  .readme-header::after,
  .diff-file-header::after,
  .action-dropdown-menu::after,
  .dev-profile-sidebar::after,
  .profile-special-readme-card::after,
  .profile-repo-card::after,
  .contribution-grid-card::after,
  .gallery-card::after,
  .vid-card::after,
  .watch-creator::after,
  .watch-desc::after,
  .short-comments-panel::after,
  .short-comments-input::after,
  .messages-sidebar::after,
  .messages-main::after,
  .redeem-card::after,
  .tutorial-box::after,
  .share-glass-card::after,
  .file-item::after,
  .vault-dropzone::after,
  .pkg-card::after,
  .balance-card::after,
  .conv-item::after,
  .watch-affiliate::after,
  .sync-fork-banner::after,
  .queued-file-row::after,
  .redeem-icon-wrapper::after,
  .share-icon-wrap::after,
  .vid-filter-btn::after,
  .vid-duration::after,
  .watch-act::after,
  .watch-ad-skip::after,
  .short-affiliate::after,
  .short-action-btn i::after,
  .enc-pill-opt::after,
  .badge-enc::after,
  .badge-plain::after,
  .repo-badge-public::after,
  .repo-badge-private::after,
  .repo-badge-locked::after,
  .vis-card-opt::after,
  .step-num::after,
  .yt-facade .yt-badge::after,
  .git-tab-link:hover::after,
  .repo-nav-tab:hover::after,
  .dev-tab-item:hover::after,
  .year-pill-btn:hover::after,
  .w-tab:hover::after,
  .git-tab-link.active::after,
  .repo-nav-tab.active::after,
  .dev-tab-item.active::after,
  .year-pill-btn.active::after,
  .w-tab.active::after {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* ============================================================================
   LIQUID GLASS - GIT: CODE EXPLORER, PANELS AND THE VS IDE
   ----------------------------------------------------------------------------
   The repo pages built most of their surfaces two ways no stylesheet could
   reach: inline style="background:rgba(18,24,38,0.7)" on unclassed divs, and
   the VS Code replica's opaque #1e1e1e / #252526 / #2d2d2d chrome. Those divs
   now carry .git-panel / .git-panel-strong / .git-code-block, and the editor's
   greys were turned translucent in git_repo.php.

   The editor is glassed as ONE pane, on .vs-ide-container: the titlebar, tab
   bar, breadcrumbs, gutter, status bar and commit panel are translucent tints
   layered on that single sheet rather than eighteen separate filter passes.
   The code itself stays legible because a glass layer never touches the text -
   the ::after sits behind the content and refracts only what is behind the
   pane, so the only thing that matters for code is the tint's contrast, and
   .vs-ide-code-area keeps a 50% fill of its own on top of the container tint.

   .vs-ide-editor-container and the <pre> code blocks scroll their own content,
   so they take a translucent fill instead of a glass layer - an absolutely
   positioned layer scrolls away with the content and leaves the far side bare.
   ========================================================================== */
.vs-ide-container,
.git-panel,
.git-panel-strong,
.git-code-block,
.diff-file-card {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vs-ide-container { --glass-tint-layer: rgba(24, 24, 26, 0.50); --glass-rim: rgba(255, 255, 255, 0.10); }
.git-panel        { --glass-tint-layer: rgba(18, 24, 38, 0.45); }
.git-panel-strong { --glass-tint-layer: rgba(18, 24, 38, 0.62); }
.git-code-block   { --glass-tint-layer: rgba(13, 17, 23, 0.55); }
.diff-file-card   { --glass-tint-layer: rgba(13, 17, 23, 0.55); }

.vs-ide-container::before,
.git-panel::before,
.git-panel-strong::before,
.git-code-block::before,
.diff-file-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-rim, transparent);
  background: none;
  pointer-events: none;
}

.vs-ide-container::after,
.git-panel::after,
.git-panel-strong::after,
.git-code-block::after,
.diff-file-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-tint-layer, rgba(255, 255, 255, 0.03));
  background-image: var(--glass-tint-image, linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 50%));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

@media (max-width: 768px) {
  .vs-ide-container::after,
  .git-panel::after,
  .git-panel-strong::after,
  .git-code-block::after,
  .diff-file-card::after {
    backdrop-filter: blur(2.1px);
    -webkit-backdrop-filter: blur(2.1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-ide-container::after,
  .git-panel::after,
  .git-panel-strong::after,
  .git-code-block::after,
  .diff-file-card::after {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* ============================================================================
   BACKGROUND THEME PICKER
   ----------------------------------------------------------------------------
   Bottom-left on purpose: the chat FAB owns the bottom-right corner, and on
   small screens both have to clear the mobile tab bar. The panel is built by
   assets/js/background-themes.js and gets the same glass treatment as the rest
   of the chrome - its own layer pair rather than being folded into the tier-2
   selector lists, since it is one component with one job.
   ========================================================================== */
.bg-theme-picker {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 880;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.bg-theme-toggle {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 20, 34, 0.55);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.bg-theme-toggle:hover,
.bg-theme-picker.open .bg-theme-toggle {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}
.bg-theme-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: inherit;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#liquid-glass-distortion-fine);
  -webkit-filter: url(#liquid-glass-distortion-fine);
  isolation: isolate;
  pointer-events: none;
}

.bg-theme-panel {
  --glass-tint-layer: rgba(12, 18, 32, 0.74);
  --glass-rim: rgba(255, 255, 255, 0.16);
  position: relative;
  isolation: isolate;
  order: -1;
  width: 244px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: bgThemeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bgThemeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bg-theme-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-rim, transparent);
  background: none;
  pointer-events: none;
}
.bg-theme-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass-tint-layer);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#liquid-glass-distortion);
  -webkit-filter: url(#liquid-glass-distortion);
  isolation: isolate;
  pointer-events: none;
}

.bg-theme-panel-title {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 6px 10px 8px;
}

.bg-theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.bg-theme-option:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
.bg-theme-option.active { background: rgba(59, 130, 246, 0.16); color: var(--text-primary); }

.bg-theme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
}

.bg-theme-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bg-theme-label { font-size: 13px; font-weight: 650; }
.bg-theme-hint { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bg-theme-check { font-size: 11px; opacity: 0; color: var(--accent); flex-shrink: 0; }
.bg-theme-option.active .bg-theme-check { opacity: 1; }

@media (max-width: 768px) {
  /* Clear the mobile tab bar, which is fixed to the bottom on these widths. */
  .bg-theme-picker {
    left: 14px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .bg-theme-panel { width: min(244px, calc(100vw - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-theme-panel { animation: none; }
  .bg-theme-toggle::after { filter: none !important; -webkit-filter: none !important; }
  .bg-theme-panel::after { filter: none !important; -webkit-filter: none !important; }
}

/* ============================================================================
   REACTION PICKER
   ----------------------------------------------------------------------------
   Rendered at body level by assets/js/reactions.js and positioned from the
   trigger's rect, because a card's overflow:hidden and its tilt transform both
   clip and contain an absolutely positioned child - which is what made every
   reaction except the default unreachable.
   ========================================================================== */
.hana-react-picker {
  position: fixed;
  z-index: 4000;
  display: flex;
  gap: 2px;
  padding: 7px 9px;
  border-radius: var(--radius-full);
  background: rgba(12, 18, 32, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transform-origin: bottom center;
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: none;
}
.hana-react-picker.is-below { transform-origin: top center; transform: translateY(-8px) scale(0.94); }
.hana-react-picker.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.hana-react-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  /* Each emoji arrives a beat after the one before it, so the row reads as a
     row rather than twelve things appearing at once. */
  opacity: 0;
  transform: translateY(10px) scale(0.4);
  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), background 0.15s ease;
}
.hana-react-picker.is-open .hana-react-option {
  animation: reactionPop 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.28) var(--stagger, 0ms) forwards;
}
@keyframes reactionPop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.4); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hana-react-emoji { font-size: 26px; line-height: 1; transition: transform 0.16s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.hana-react-option:hover { background: rgba(255, 255, 255, 0.08); }
.hana-react-option:hover .hana-react-emoji { transform: scale(1.42) translateY(-3px); }
.hana-react-option:active .hana-react-emoji { transform: scale(1.1); }

.hana-react-name {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--tint, #111);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.hana-react-option:hover .hana-react-name { opacity: 1; transform: translateX(-50%) translateY(0); }
.hana-react-picker.is-below .hana-react-name { bottom: auto; top: calc(100% + 6px); }

/* Burst thrown from the button that was pressed */
.hana-react-burst {
  position: fixed;
  z-index: 4001;
  pointer-events: none;
  width: 0;
  height: 0;
}
.hana-react-burst span {
  position: absolute;
  font-size: 19px;
  animation: reactionBurst 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0ms) forwards;
  opacity: 0;
}
@keyframes reactionBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(var(--rot, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(0.72) rotate(var(--rot, 0deg)); }
}

/* The trigger itself acknowledges the press before the round trip returns */
[data-react-id] { cursor: pointer; transition: transform 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
[data-react-id].is-reacting { animation: reactionPulse 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
@keyframes reactionPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.24); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* Active colours, one per reaction, matched to includes/reactions.php */
[data-react-id].active-like      { color: #0A84FF !important; }
[data-react-id].active-love      { color: #FF453A !important; }
[data-react-id].active-care      { color: #FF9F0A !important; }
[data-react-id].active-laugh     { color: #FFD60A !important; }
[data-react-id].active-wow       { color: #FFD60A !important; }
[data-react-id].active-sad       { color: #5AC8FA !important; }
[data-react-id].active-angry     { color: #FF375F !important; }
[data-react-id].active-fire      { color: #FF6B35 !important; }
[data-react-id].active-clap      { color: #FFCC00 !important; }
[data-react-id].active-party     { color: #BF5AF2 !important; }
[data-react-id].active-mindblown { color: #64D2FF !important; }
[data-react-id].active-hundred   { color: #FF2D55 !important; }
[data-react-id][class*="active-"] { font-weight: 750; }

@media (prefers-reduced-motion: reduce) {
  .hana-react-picker,
  .hana-react-picker.is-open .hana-react-option,
  .hana-react-burst span,
  [data-react-id].is-reacting {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .hana-react-picker.is-open .hana-react-option { opacity: 1; transform: none; }
}


/* ============================================================================
   FLAT MODE  —  html[data-bg-theme="off"]
   ----------------------------------------------------------------------------
   Picking "None" in the background switcher is the escape hatch for weak or
   thermally throttled devices, so it has to turn off more than the animated
   canvas. The two genuinely expensive things on this page are per-frame GPU
   work, not the background alone:

     1. backdrop-filter, which forces the compositor to re-blur whatever is
        behind every card, bar and panel on every paint;
     2. filter: url(#liquid-glass-distortion), an SVG displacement map run over
        each glass surface's backdrop.

   Both are killed here, and the base glass tier is repainted as an opaque
   surface with a real 1px rim - without the blur behind it, a 3%-alpha fill
   would leave cards all but invisible. The result is a flat, fully legible
   theme that composites like an ordinary page.

   Everything is scoped to the root attribute the background manager already
   sets (assets/js/background-themes.js -> data-bg-theme), so no extra class
   plumbing and no second source of truth for the choice.
   ========================================================================== */

:root[data-bg-theme="off"] {
  --flat-surface:       #121826;
  --flat-surface-hi:    #171f30;
  --flat-rim:           rgba(255, 255, 255, 0.09);
  --flat-shadow:        0 2px 10px rgba(0, 0, 0, 0.30);

  --glass-blur:         none;
  --glass-blur-heavy:   none;
  --glass-blur-subtle:  none;
  --glass-distortion:   none;
  --glass-tint-image:   none;

  --shadow-liquid:              var(--flat-shadow);
  --shadow-liquid-glass:        var(--flat-shadow);
  --shadow-liquid-glass-hover:  0 4px 16px rgba(0, 0, 0, 0.38);
}

/* Blur and refraction, everywhere, including the tiers that declare their own
   tint (nav bar, mobile tab bar, pickers, modals, IDE chrome). The pseudo-element
   sweep is what removes the displacement filter - it is only ever applied to
   ::after - and flat mode means flat, so decorative filters go with it. */
:root[data-bg-theme="off"] *,
:root[data-bg-theme="off"] *::before,
:root[data-bg-theme="off"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-bg-theme="off"] *::before,
:root[data-bg-theme="off"] *::after {
  filter: none !important;
  -webkit-filter: none !important;
}

/* Base glass tier: opaque fill, visible rim, ordinary shadow. The custom
   properties are pinned on these elements rather than inherited, so the
   override has to land on the same elements - hence the repeated list, which
   is the convention the glass tiers above already follow. */
:root[data-bg-theme="off"] .liquid-glass,
:root[data-bg-theme="off"] .liquidGlass,
:root[data-bg-theme="off"] .liquidGlass-wrapper,
:root[data-bg-theme="off"] [data-liquid-glass],
:root[data-bg-theme="off"] .card,
:root[data-bg-theme="off"] .post-card,
:root[data-bg-theme="off"] .comment-content,
:root[data-bg-theme="off"] .widget-card,
:root[data-bg-theme="off"] .admin-card,
:root[data-bg-theme="off"] .ticket-card,
:root[data-bg-theme="off"] .podium-card,
:root[data-bg-theme="off"] .rank-info-bar,
:root[data-bg-theme="off"] .leaderboard-list-card,
:root[data-bg-theme="off"] .uc-topbar,
:root[data-bg-theme="off"] .uc-category-card,
:root[data-bg-theme="off"] .uc-post-card,
:root[data-bg-theme="off"] .uc-quick-reply,
:root[data-bg-theme="off"] .chat-container,
:root[data-bg-theme="off"] .chat-bubble,
:root[data-bg-theme="off"] .quick-hub-card,
:root[data-bg-theme="off"] .tl-widget-card,
:root[data-bg-theme="off"] .modal-content,
:root[data-bg-theme="off"] .sb-kpi-card,
:root[data-bg-theme="off"] .sb-card,
:root[data-bg-theme="off"] .plan-card,
:root[data-bg-theme="off"] .blog-card,
:root[data-bg-theme="off"] .friend-card,
:root[data-bg-theme="off"] .glow-border,
:root[data-bg-theme="off"] .spotlight-card,
:root[data-bg-theme="off"] .landing-glass-card,
:root[data-bg-theme="off"] .landing-auth-card,
:root[data-bg-theme="off"] .auth-card,
:root[data-bg-theme="off"] .landing-link-card,
:root[data-bg-theme="off"] .profile-header,
:root[data-bg-theme="off"] .profile-stats-bar,
:root[data-bg-theme="off"] .feed-filter-bar,
:root[data-bg-theme="off"] .create-post-card,
:root[data-bg-theme="off"] .forum-card,
:root[data-bg-theme="off"] .vps-card {
  --glass-tint-layer: var(--flat-surface) !important;
  --glass-tint-image: none !important;
  --glass-rim: var(--flat-rim) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--flat-shadow) !important;
}

/* No lift on hover: the translate promotes a layer per card and buys nothing
   on the hardware this mode exists for. */
:root[data-bg-theme="off"] .liquid-glass:hover,
:root[data-bg-theme="off"] .liquidGlass:hover,
:root[data-bg-theme="off"] .liquidGlass-wrapper:hover,
:root[data-bg-theme="off"] [data-liquid-glass]:hover,
:root[data-bg-theme="off"] .card:hover,
:root[data-bg-theme="off"] .post-card:hover,
:root[data-bg-theme="off"] .comment-content:hover,
:root[data-bg-theme="off"] .widget-card:hover,
:root[data-bg-theme="off"] .admin-card:hover,
:root[data-bg-theme="off"] .ticket-card:hover,
:root[data-bg-theme="off"] .podium-card:hover,
:root[data-bg-theme="off"] .rank-info-bar:hover,
:root[data-bg-theme="off"] .leaderboard-list-card:hover,
:root[data-bg-theme="off"] .uc-topbar:hover,
:root[data-bg-theme="off"] .uc-category-card:hover,
:root[data-bg-theme="off"] .uc-post-card:hover,
:root[data-bg-theme="off"] .uc-quick-reply:hover,
:root[data-bg-theme="off"] .chat-container:hover,
:root[data-bg-theme="off"] .chat-bubble:hover,
:root[data-bg-theme="off"] .quick-hub-card:hover,
:root[data-bg-theme="off"] .tl-widget-card:hover,
:root[data-bg-theme="off"] .modal-content:hover,
:root[data-bg-theme="off"] .sb-kpi-card:hover,
:root[data-bg-theme="off"] .sb-card:hover,
:root[data-bg-theme="off"] .plan-card:hover,
:root[data-bg-theme="off"] .blog-card:hover,
:root[data-bg-theme="off"] .friend-card:hover,
:root[data-bg-theme="off"] .glow-border:hover,
:root[data-bg-theme="off"] .spotlight-card:hover,
:root[data-bg-theme="off"] .landing-glass-card:hover,
:root[data-bg-theme="off"] .landing-auth-card:hover,
:root[data-bg-theme="off"] .auth-card:hover,
:root[data-bg-theme="off"] .landing-link-card:hover,
:root[data-bg-theme="off"] .profile-header:hover,
:root[data-bg-theme="off"] .profile-stats-bar:hover,
:root[data-bg-theme="off"] .feed-filter-bar:hover,
:root[data-bg-theme="off"] .create-post-card:hover,
:root[data-bg-theme="off"] .forum-card:hover,
:root[data-bg-theme="off"] .vps-card:hover {
  transform: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38) !important;
}

/* The animated engines paint into a fixed canvas; with "None" chosen none is
   mounted, so this only guarantees a solid ground under the flat surfaces. */
:root[data-bg-theme="off"] body {
  background: linear-gradient(160deg, #10151f 0%, #070b13 100%) !important;
}


/* ============================================================================
   MOBILE PERFORMANCE ADVISORY
   ----------------------------------------------------------------------------
   A one-time bottom sheet at phone widths, shown by includes/footer.php while an
   animated background is selected. Deliberately opaque and unfiltered: a notice
   about GPU cost should not itself add a blurred, refracted layer, and it has to
   stay legible on the device that is already struggling.
   ========================================================================== */
.perf-advisory {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  gap: 12px;
  padding: 15px 15px 14px;
  border-radius: var(--radius-md);
  background: #131a29;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s var(--ease-spring), transform 0.28s var(--ease-spring);
}
.perf-advisory.show { opacity: 1; transform: translateY(0); }

.perf-advisory-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255, 159, 10, 0.14);
  color: var(--warning);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.perf-advisory-body { min-width: 0; flex: 1; }
.perf-advisory-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.perf-advisory-text {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.perf-advisory-text strong { color: var(--text-primary); font-weight: 650; }
.perf-advisory-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.perf-advisory-actions .btn { font-size: 12.5px; }

.perf-advisory-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border: none; border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.perf-advisory-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.07); }

/* Phone widths only - the advice is about phone GPUs, and the sheet would be
   noise on a desktop that renders the same scene without breaking a sweat. */
@media (max-width: 768px) {
  .perf-advisory:not([hidden]) { display: flex; }
}

/* ==========================================================================
   LANDING SECTION HEADERS (SHARED)
   ========================================================================== */
.landing-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.landing-section-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    letter-spacing: -0.02em;
}
.landing-section-title i {
    color: var(--neon-blue, #38bdf8);
}

/* ==========================================================================
   1. EXPLORE SERVICES SECTION (CURATED GRID LINKS)
   ========================================================================== */
.landing-links-section {
    max-width: 1260px;
    margin: 40px auto;
    position: relative;
    z-index: 10;
}
.landing-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.landing-link-card {
    padding: 22px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.landing-link-card:hover {
    transform: translateY(-5px) !important;
}

.landing-link-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.landing-link-card:hover .landing-link-icon {
    background: rgba(56, 189, 248, 0.28);
    color: #ffffff;
    transform: scale(1.06);
}
.landing-link-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.landing-link-title {
    font-weight: 750;
    font-size: 15px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.landing-link-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 2px 7px;
    border-radius: 9999px;
}
.landing-link-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.45;
    white-space: normal;
}
.landing-link-arrow {
    color: #64748b;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.landing-link-card:hover .landing-link-arrow {
    color: var(--neon-blue);
    transform: translateX(4px);
}

/* ==========================================================================
   2. PRICING & PRODUCTS SECTION
   ========================================================================== */
.landing-pricing-section {
    max-width: 1260px;
    margin: 60px auto 40px;
    position: relative;
    z-index: 10;
}
.pricing-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 5px;
}
.pricing-tab-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
}
.pricing-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}
.pricing-tab-btn.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(99, 102, 241, 0.28) 100%);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}

.pricing-group-pane {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Pricing Plan Cards */
.plan-card {
    padding: 30px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.plan-card:hover {
    transform: translateY(-6px) !important;
}

.plan-badge-popular {
    position: absolute;
    top: 18px;
    right: 20px;
    background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.plan-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 750;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.plan-type-pill i {
    color: var(--neon-blue);
}
.plan-title {
    font-family: var(--font-display, sans-serif);
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
}
.plan-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.plan-currency {
    font-size: 18px;
    font-weight: 700;
    color: #38bdf8;
}
.plan-price {
    font-family: var(--font-display, sans-serif);
    font-size: 34px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.03em;
}
.plan-period {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 600;
    margin-left: 2px;
}

/* Plan Hardware Specs Grid */
.plan-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px;
}
.plan-spec-item {
    font-size: 12px;
    font-weight: 650;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan-spec-item i {
    color: var(--neon-blue);
    font-size: 13px;
    width: 14px;
    text-align: center;
}

/* Plan Features List */
.plan-features-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
    flex: 1;
}
.plan-feature {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}
.plan-feature i {
    color: #10b981;
    font-size: 14px;
    flex-shrink: 0;
}

/* ==========================================================================
   3. LATEST TECHNICAL ARTICLES (BLOG GRID)
   ========================================================================== */
.landing-blogs-section {
    max-width: 1260px;
    margin: 60px auto 40px;
    position: relative;
    z-index: 10;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.blog-card {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.blog-card:hover {
    transform: translateY(-5px) !important;
}
.blog-card-cover {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.blog-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-title {
    font-family: var(--font-display, sans-serif);
    font-size: 16.5px;
    font-weight: 750;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card:hover .blog-card-title {
    color: var(--neon-blue);
}
.blog-card-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.55;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: #64748b;
}
.blog-author-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-weight: 650;
}
.blog-author-mini img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* ==========================================================================
   4. BOTTOM SHOWCASE (LEADERBOARD & DISCORD WIDGET)
   ========================================================================== */
.bottom-showcase {
    max-width: 1260px;
    margin: 60px auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    position: relative;
    z-index: 10;
}
@media (max-width: 900px) {
    .bottom-showcase { grid-template-columns: 1fr; gap: 40px; }
}
.top-user-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 14px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.top-user-item:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateX(3px);
}
.top-user-rank.gold { color: #fbbf24; }
.top-user-rank.silver { color: #e2e8f0; }
.top-user-rank.bronze { color: #f97316; }
.top-user-rank.other { color: #64748b; }

/* Persistent warning and escape hatch for audited administrator impersonation. */
.admin-impersonation-banner {
    position: relative;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 8px max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(251, 191, 36, 0.55);
    background: linear-gradient(90deg, #422006, #713f12, #422006);
    color: #fef3c7;
    font-size: 13px;
    text-align: center;
}
.admin-impersonation-banner form,
.admin-impersonate-form { margin: 0; }
.admin-impersonation-banner strong { color: #fff; }
@media (max-width: 640px) {
    .admin-impersonation-banner { flex-direction: column; gap: 7px; padding-block: 10px; }
}