/**
 * DropX Prime System — Light Theme Final Harmony
 * V12.0
 *
 * Final light-theme pass for header, real header dropdowns, footer and WebStudio.
 * Kept separate so the light theme remains independently maintainable.
 */

/* ========================================================================
   1. HEADER — warm stone, stronger hierarchy, visible typography depth
   ======================================================================== */
body.light-mode .sticky-header-wrapper {
    background: linear-gradient(180deg, rgba(205,184,157,.98), rgba(177,151,119,.98));
    border-bottom: 1px solid rgba(78,56,37,.24);
    box-shadow: 0 16px 38px rgba(55,39,25,.24), 0 2px 8px rgba(55,39,25,.10);
}

body.light-mode .desktop-header {
    background: linear-gradient(180deg, #e2d2bd 0%, #cfb99d 100%);
    border-bottom: 1px solid rgba(126,87,35,.34);
    box-shadow:
        inset 0 1px 0 rgba(255,245,225,.70),
        inset 0 -1px 0 rgba(77,55,36,.12),
        0 8px 22px rgba(55,39,25,.15);
}

body.light-mode .logo-wrapper-link,
body.light-mode .logo-text-block,
body.light-mode .logo-main,
body.light-mode .logo-glitch {
    text-shadow:
        0 1px 0 rgba(255,247,230,.82),
        0 2px 3px rgba(58,41,26,.34),
        0 0 10px rgba(142,95,24,.10);
}

body.light-mode .logo-img {
    filter:
        drop-shadow(0 2px 2px rgba(55,39,25,.34))
        drop-shadow(0 0 8px rgba(142,95,24,.22));
}

body.light-mode .logo-main {
    color: #2d2118;
}

body.light-mode .logo-main span,
body.light-mode .logo-glitch {
    color: #865815;
    text-shadow:
        0 1px 0 rgba(255,247,230,.80),
        0 2px 3px rgba(58,41,26,.25),
        0 0 9px rgba(142,95,24,.18);
}

body.light-mode .desktop-nav a,
body.light-mode .desktop-nav a span,
body.light-mode .landing-submenu a,
body.light-mode .header-right-zone,
body.light-mode .header-right-zone button {
    color: #554638;
    text-shadow:
        0 1px 0 rgba(255,247,230,.82),
        0 2px 4px rgba(58,41,26,.25);
}

body.light-mode .desktop-nav a i,
body.light-mode .desktop-nav a svg,
body.light-mode .landing-submenu svg,
body.light-mode .header-right-zone svg {
    color: #5d4b3a;
    filter: drop-shadow(0 1px 1px rgba(58,41,26,.24));
}

body.light-mode .desktop-nav a:hover,
body.light-mode .desktop-nav a.active,
body.light-mode .landing-submenu a:hover,
body.light-mode .landing-submenu a.active {
    color: #2f241b;
    text-shadow:
        0 1px 0 rgba(255,248,232,.92),
        0 2px 5px rgba(58,41,26,.30);
}

body.light-mode .desktop-nav a.active span,
body.light-mode .desktop-nav a:hover span,
body.light-mode .desktop-nav a.active i,
body.light-mode .desktop-nav a:hover i,
body.light-mode .desktop-nav a.active svg,
body.light-mode .desktop-nav a:hover svg {
    color: #8b5d18;
    text-shadow:
        0 1px 0 rgba(255,247,230,.85),
        0 2px 5px rgba(72,49,24,.24);
}

body.light-mode .landing-submenu {
    background: linear-gradient(180deg, #c9b296 0%, #b69a7b 100%);
    border-bottom-color: rgba(77,55,36,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,246,226,.46),
        0 12px 28px rgba(55,39,25,.22);
}

/* ========================================================================
   2. REAL HEADER DROPDOWNS — actual selector used by userbar.css
   ======================================================================== */
body.light-mode .header-dropdown-menu {
    background: linear-gradient(160deg, #3f3023 0%, #2e241b 48%, #241c16 100%);
    color: #eadbc6;
    border: 1px solid rgba(177,128,50,.58);
    border-radius: 8px;
    box-shadow:
        0 26px 60px rgba(45,31,19,.42),
        0 0 0 1px rgba(255,239,208,.06),
        inset 0 1px 0 rgba(255,241,214,.08);
}

/* Notification/profile menus: keep them light-theme compatible, not black.
   A deeper espresso is intentionally used here as the *shadow layer* of the
   beige theme, not as a separate dark-theme component. */
body.light-mode .header-dropdown-menu {
    background: linear-gradient(160deg, #d2bfa4 0%, #bba184 54%, #a98c6d 100%);
    color: #35271d;
    border-color: rgba(113,77,31,.42);
    box-shadow:
        0 26px 60px rgba(52,37,24,.34),
        0 0 0 1px rgba(255,245,222,.22),
        inset 0 1px 0 rgba(255,247,228,.48);
}

body.light-mode .dropdown-header {
    background: linear-gradient(180deg, rgba(239,224,201,.62), rgba(191,161,125,.30));
    border-bottom-color: rgba(113,77,31,.24);
}

body.light-mode .dropdown-header h3 {
    color: #674615;
    text-shadow:
        0 1px 0 rgba(255,246,226,.72),
        0 2px 4px rgba(63,43,24,.24);
}

body.light-mode .text-btn {
    color: #754e12;
    border-color: rgba(126,87,35,.38);
    background: rgba(245,231,207,.34);
    text-shadow: 0 1px 0 rgba(255,247,229,.68);
}

body.light-mode .text-btn:hover {
    background: #9a691b;
    color: #fff5df;
}

body.light-mode .dropdown-item {
    color: #554232;
    border-bottom-color: rgba(83,59,38,.12);
    text-shadow:
        0 1px 0 rgba(255,246,226,.65),
        0 1px 3px rgba(63,43,24,.15);
}

body.light-mode .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(150,103,28,.18), rgba(150,103,28,.06));
    color: #302319;
}

body.light-mode .dropdown-item-title {
    color: #7a5011;
    text-shadow: 0 1px 0 rgba(255,247,229,.72), 0 2px 4px rgba(63,43,24,.18);
}

body.light-mode .dropdown-item-text {
    color: #554232;
}

body.light-mode .dropdown-item-time {
    color: #705f4d;
    text-shadow: 0 1px 0 rgba(255,247,229,.58);
}

body.light-mode .dropdown-item-avatar,
body.light-mode .dropdown-item-favicon {
    background: #d7c3a5;
    border-color: rgba(126,87,35,.38);
    box-shadow: 0 3px 9px rgba(63,43,24,.16);
}

body.light-mode .dropdown-footer {
    background: linear-gradient(180deg, rgba(174,142,103,.20), rgba(128,94,57,.18));
    border-top-color: rgba(83,59,38,.16);
    color: #754e12;
    text-shadow: 0 1px 0 rgba(255,247,229,.70), 0 2px 4px rgba(63,43,24,.16);
}

body.light-mode .dropdown-footer:hover {
    background: rgba(150,103,28,.16);
}

body.light-mode .profile-dropdown-user-header {
    background: linear-gradient(135deg, rgba(239,224,201,.52), rgba(168,133,91,.20));
    border-bottom-color: rgba(83,59,38,.16);
}

body.light-mode .profile-dropdown-user-header .username {
    color: #302319;
    text-shadow:
        0 1px 0 rgba(255,247,229,.82),
        0 2px 4px rgba(63,43,24,.24);
}

body.light-mode .profile-dropdown-user-header .view-profile,
body.light-mode .dropdown-section-title {
    color: #765019;
    text-shadow: 0 1px 0 rgba(255,247,229,.68), 0 1px 3px rgba(63,43,24,.14);
}

body.light-mode .logout-item:hover {
    background: rgba(160,64,45,.12);
}

/* Native select popup — Chrome/Edge respect these option colors. */
body.light-mode select option,
body.light-mode select optgroup {
    background: #dfccb0;
    color: #33271e;
}

/* ========================================================================
   3. WEBSTUDIO — no charcoal cards inside the beige theme
   ======================================================================== */
body.light-mode .webstudio-section {
    color: #3b2d22;
}

body.light-mode .webstudio-header h2 {
    color: #2f241b;
    text-shadow:
        0 1px 0 rgba(255,247,230,.84),
        0 3px 7px rgba(59,41,25,.22);
}

body.light-mode .section-intro {
    color: #665444;
    text-shadow: 0 1px 0 rgba(255,247,230,.60), 0 1px 3px rgba(59,41,25,.10);
}

body.light-mode .design-card {
    background: linear-gradient(145deg, #ddccb3 0%, #c7ad8d 100%);
    border-color: rgba(75,54,35,.30);
    box-shadow:
        0 14px 30px rgba(56,40,25,.24),
        inset 0 1px 0 rgba(255,246,226,.48);
    backdrop-filter: blur(10px);
}

body.light-mode .design-card:hover {
    border-color: rgba(142,95,24,.48);
    box-shadow:
        0 20px 42px rgba(56,40,25,.28),
        0 0 0 1px rgba(142,95,24,.12),
        inset 0 1px 0 rgba(255,246,226,.55);
}

body.light-mode .design-card.selected {
    background: linear-gradient(145deg, #e5d3b8 0%, #c9ae8c 100%);
    border-color: #a87512;
    box-shadow: 0 0 24px rgba(168,117,18,.16), 0 16px 34px rgba(56,40,25,.24);
}

body.light-mode .card-image-wrapper {
    background: #8f7354;
    border-bottom: 1px solid rgba(75,54,35,.22);
}

body.light-mode .card-image-wrapper img {
    opacity: .90;
}

body.light-mode .card-content {
    background: linear-gradient(180deg, rgba(92,68,46,.10), rgba(69,48,31,.18));
    border-top: 1px solid rgba(255,246,226,.18);
}

body.light-mode .card-title {
    color: #3a2b20;
    text-shadow:
        0 1px 0 rgba(255,246,226,.70),
        0 2px 4px rgba(58,41,26,.20);
}

body.light-mode .view-design-btn {
    background: rgba(239,224,202,.36);
    border-color: rgba(75,54,35,.24);
    color: #604d3a;
    text-shadow: 0 1px 0 rgba(255,246,226,.66);
}

body.light-mode .view-design-btn:hover {
    background: rgba(239,224,202,.60);
    color: #4a3522;
    border-color: rgba(142,95,24,.40);
}

body.light-mode .select-design-btn {
    background: rgba(239,224,202,.10);
    border-color: rgba(142,95,24,.58);
    color: #795015;
    text-shadow: 0 1px 0 rgba(255,246,226,.70);
}

body.light-mode .select-design-btn:hover,
body.light-mode .design-card.selected .select-design-btn {
    background: #a87512;
    color: #fff4dd;
    text-shadow: 0 1px 2px rgba(53,35,16,.30);
    box-shadow: 0 7px 16px rgba(109,73,17,.20);
}

/* ========================================================================
   4. FOOTER — restrained, separated, no giant unrelated white slab
   ======================================================================== */
body.light-mode .site-footer,
body.light-mode footer {
    background:
        linear-gradient(180deg, rgba(170,143,111,.28) 0%, rgba(115,87,60,.34) 100%);
    color: #5c4937;
    border-top: 1px solid rgba(74,53,35,.26);
    box-shadow:
        0 -14px 34px rgba(55,39,25,.18),
        inset 0 1px 0 rgba(255,246,226,.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.light-mode .footer-legal {
    margin-bottom: 16px;
}

body.light-mode .footer-legal,
body.light-mode .footer-grid {
    text-shadow:
        0 1px 0 rgba(255,247,229,.68),
        0 1px 3px rgba(63,43,24,.14);
}

body.light-mode .footer-legal .legal-link {
    color: #614d3a;
}

body.light-mode .footer-legal .legal-link:hover {
    color: #825714;
    background: rgba(150,103,28,.08);
}

body.light-mode .footer-grid {
    background: linear-gradient(180deg, rgba(224,205,178,.22), rgba(153,121,86,.12));
    border-top: 1px solid rgba(77,55,36,.24);
    border-bottom: 1px solid rgba(77,55,36,.20);
    padding-top: 12px;
    padding-bottom: 12px;
}

body.light-mode .footer-badge,
body.light-mode .designer-badge {
    background: rgba(229,211,182,.30);
    border: 1px solid rgba(101,73,43,.25);
    color: #5d4936;
    box-shadow:
        0 4px 12px rgba(55,39,25,.10),
        inset 0 1px 0 rgba(255,246,226,.46);
    text-shadow: 0 1px 0 rgba(255,247,229,.68), 0 1px 3px rgba(63,43,24,.12);
}

body.light-mode .service-tag,
body.light-mode .designer-name {
    color: #825714;
    text-shadow:
        0 1px 0 rgba(255,247,229,.76),
        0 2px 4px rgba(63,43,24,.16);
}

body.light-mode .service-dot {
    background: #806b55;
    box-shadow: none;
}

/* ========================================================================
   5. REMOVE COLD LIGHT SLABS FROM COMMON FOOTER-ADJACENT CONTAINERS
   ======================================================================== */
body.light-mode .footer-grid::before,
body.light-mode .footer-grid::after {
    background: transparent;
}

/* ========================================================================
   6. LIGHT THEME FORM CONTROLS — prevent black native-looking controls
   ======================================================================== */
body.light-mode .post-publisher-card select,
body.light-mode .post-publisher-card input,
body.light-mode .post-publisher-card textarea {
    color-scheme: light;
}


/* ========================================================================
   V12 — LIGHT HARMONY FINISH / MICRO-POLISH
   ======================================================================== */

/* 7. NAV HOVER — border must never change the element's measured size.
   The transparent border is reserved in the resting state, so hover cannot
   cause the header/submenu to "jump" or reflow. */
body.light-mode .desktop-nav a,
body.light-mode .landing-submenu a {
    box-sizing: border-box;
    border: 1px solid transparent ;
}

body.light-mode .desktop-nav a:hover,
body.light-mode .desktop-nav a.active,
body.light-mode .landing-submenu a:hover,
body.light-mode .landing-submenu a.active {
    border-width: 1px ;
}

/* Keep the glow inside the reserved box rather than growing it outward. */
body.light-mode .landing-submenu a:hover,
body.light-mode .landing-submenu a.active {
    box-shadow:
        inset 0 0 0 1px rgba(149,102,28,.18),
        inset 0 1px 0 rgba(255,247,229,.45),
        0 5px 14px rgba(65,45,27,.10);
}

body.light-mode .desktop-nav a:hover,
body.light-mode .desktop-nav a.active {
    box-shadow:
        inset 0 0 0 1px rgba(149,102,28,.16),
        inset 0 1px 0 rgba(255,247,229,.55),
        0 5px 16px rgba(65,45,27,.10);
}

/* 8. HEADER — intentionally deeper, warmer and more premium. */
body.light-mode .desktop-header,
body.light-mode .sticky-header-wrapper {
    background: linear-gradient(180deg, #d7c3a6 0%, #c0a687 54%, #b19676 100%) ;
    border-color: rgba(73,53,35,.30) ;
    box-shadow:
        inset 0 1px 0 rgba(255,247,228,.72),
        inset 0 -1px 0 rgba(68,48,31,.18),
        0 12px 30px rgba(48,33,20,.24) ;
}

body.light-mode .landing-submenu {
    background: linear-gradient(180deg, #bda486 0%, #a88d70 100%) ;
    border-bottom-color: rgba(69,49,31,.28) ;
    box-shadow:
        inset 0 1px 0 rgba(255,247,228,.35),
        0 10px 24px rgba(52,36,23,.22) ;
}

body.light-mode .logo-main,
body.light-mode .logo-main span,
body.light-mode .logo-glitch,
body.light-mode .desktop-nav a,
body.light-mode .desktop-nav a span,
body.light-mode .landing-submenu a,
body.light-mode .header-right-zone,
body.light-mode .header-right-zone button {
    text-shadow:
        0 1px 0 rgba(255,248,232,.78),
        0 2px 4px rgba(48,34,21,.30),
        0 0 9px rgba(130,87,25,.08) ;
}

body.light-mode .logo-main span,
body.light-mode .logo-glitch,
body.light-mode .desktop-nav a.active span,
body.light-mode .desktop-nav a:hover span,
body.light-mode .desktop-nav a.active i,
body.light-mode .desktop-nav a:hover i,
body.light-mode .desktop-nav a.active svg,
body.light-mode .desktop-nav a:hover svg {
    color: #7b5012 ;
    text-shadow:
        0 1px 0 rgba(255,247,229,.84),
        0 2px 5px rgba(57,38,18,.34),
        0 0 8px rgba(149,102,28,.12) ;
}

/* 9. HEADER DROPDOWNS — all light, including the actual userbar menu. */
body.light-mode .header-dropdown-menu,
body.light-mode .profile-dropdown,
body.light-mode .notifications-dropdown,
body.light-mode .dropdown-menu,
body.light-mode .user-dropdown {
    background: linear-gradient(155deg, #d9c4a6 0%, #c3a989 58%, #ae916f 100%) ;
    color: #33261d ;
    border: 1px solid rgba(86,61,38,.36) ;
    box-shadow:
        0 26px 58px rgba(48,33,20,.34),
        0 8px 20px rgba(48,33,20,.14),
        inset 0 1px 0 rgba(255,247,229,.55) ;
}

body.light-mode .header-dropdown-menu .dropdown-item,
body.light-mode .header-dropdown-menu a,
body.light-mode .profile-dropdown a,
body.light-mode .notifications-dropdown a,
body.light-mode .dropdown-menu a,
body.light-mode .user-dropdown a {
    color: #463527 ;
    text-shadow:
        0 1px 0 rgba(255,247,229,.62),
        0 1px 3px rgba(58,40,24,.14) ;
}

body.light-mode .header-dropdown-menu .dropdown-item:hover,
body.light-mode .header-dropdown-menu a:hover,
body.light-mode .profile-dropdown a:hover,
body.light-mode .notifications-dropdown a:hover,
body.light-mode .dropdown-menu a:hover,
body.light-mode .user-dropdown a:hover {
    background: linear-gradient(90deg, rgba(149,102,28,.17), rgba(149,102,28,.05)) ;
    color: #2d2118 ;
}

body.light-mode .dropdown-header,
body.light-mode .profile-dropdown-user-header {
    background: linear-gradient(180deg, rgba(239,224,201,.48), rgba(177,145,104,.18)) ;
    border-bottom-color: rgba(86,61,38,.20) ;
}

/* 10. FEED / GROUP POSTER SELECTS — remove the last charcoal controls. */
body.light-mode .publisher-tools-row select.select-compact,
body.light-mode .publisher-tools-row select.select-compact-wide,
body.light-mode .post-publisher-card select,
body.light-mode .feed-sidebar-left select,
body.light-mode .feed-sidebar-right select,
body.light-mode .groups-main-content select,
body.light-mode .groups-sidebar select {
    appearance: auto;
    -webkit-appearance: menulist;
    background: linear-gradient(180deg, #d9c6a9 0%, #c4aa89 100%) ;
    color: #35281f ;
    border: 1px solid rgba(82,59,38,.34) ;
    box-shadow:
        inset 0 1px 4px rgba(55,39,25,.08),
        0 2px 7px rgba(55,39,25,.08) ;
    color-scheme: light;
}

body.light-mode select option,
body.light-mode select optgroup {
    background: #d8c4a5 ;
    color: #35281f ;
}

/* 11. FEED DEPTH — darken the overly pale information cards without making
   the page heavy. */
body.light-mode .official-blog-sidebar-box,
body.light-mode .home-sidebar-groups-box {
    background: linear-gradient(145deg, #d2b997 0%, #bea07d 100%) ;
    box-shadow:
        0 18px 38px rgba(55,39,25,.20),
        inset 0 1px 0 rgba(255,247,229,.42) ;
}

body.light-mode .blog-news-top-card,
body.light-mode .groups-sidebar-item {
    background: linear-gradient(145deg, #cdb28e 0%, #b99a75 100%) ;
    border-color: rgba(76,54,34,.28) ;
    box-shadow:
        0 7px 16px rgba(55,39,25,.13),
        inset 0 1px 0 rgba(255,246,225,.30) ;
}

body.light-mode .blog-news-top-cover,
body.light-mode .groups-sidebar-item-avatar {
    background: #b39772 ;
}

body.light-mode .blog-news-top-title,
body.light-mode .groups-sidebar-item-name,
body.light-mode .official-blog-title,
body.light-mode .groups-widget-title {
    color: #35271d ;
    text-shadow: 0 1px 0 rgba(255,247,229,.65), 0 2px 4px rgba(58,40,24,.18) ;
}

/* 12. POSTS — remove the almost-white body and give media/comment areas one
   coherent warm surface. */
body.light-mode .post-card,
body.light-mode .group-post-card {
    background: linear-gradient(145deg, #d7c2a4 0%, #c4a987 100%) ;
    border-color: rgba(78,55,35,.28) ;
    box-shadow:
        0 18px 40px rgba(55,39,25,.18),
        inset 0 1px 0 rgba(255,247,229,.42) ;
}

body.light-mode .post-card .post-content,
body.light-mode .post-card .post-body,
body.light-mode .group-post-card .post-content,
body.light-mode .group-post-card .post-body {
    background: transparent ;
}

body.light-mode .post-card .post-gallery,
body.light-mode .post-card .post-media,
body.light-mode .post-card .media-grid,
body.light-mode .group-post-card .post-gallery,
body.light-mode .group-post-card .post-media {
    background: linear-gradient(145deg, #b99b77, #a98a68) ;
    border-color: rgba(75,53,34,.26) ;
}

body.light-mode .post-comments-section,
body.light-mode .post-actions-footer,
body.light-mode .post-reactions-bar {
    background: linear-gradient(180deg, #cdb493 0%, #b99a75 100%) ;
    border-color: rgba(78,55,35,.24) ;
    color: #3b2d22 ;
    box-shadow: inset 0 1px 0 rgba(255,246,225,.30), 0 5px 14px rgba(55,39,25,.08) ;
}

/* 13. PROFILE HEADER STATS — make the relationship counters readable. */
body.light-mode .profile-header-stats-row {
    color: #5b4938 ;
    text-shadow: 0 1px 0 rgba(255,247,229,.72), 0 1px 3px rgba(58,40,24,.14) ;
}

body.light-mode .profile-stat-item {
    color: #4a382a ;
    white-space: nowrap;
}

body.light-mode .profile-stat-item i,
body.light-mode .profile-stat-item svg {
    color: #805516 ;
    filter: drop-shadow(0 1px 1px rgba(58,40,24,.18));
}

body.light-mode .profile-stat-divider {
    color: rgba(79,58,39,.42) ;
}

/* Relationship tab / contact surfaces inherit the same readable palette. */
body.light-mode .profile-tabs-nav,
body.light-mode .profile-tab-content,
body.light-mode .profile-interaction-card,
body.light-mode .profile-sidebar-display {
    background: linear-gradient(145deg, #d5c0a2 0%, #c0a17e 100%) ;
    border-color: rgba(77,55,36,.26) ;
    color: #3c2d22 ;
    box-shadow: 0 16px 34px rgba(55,39,25,.16), inset 0 1px 0 rgba(255,247,229,.38) ;
}

/* 14. FOOTER — no pale slab; just a restrained warm boundary. */
body.light-mode .site-footer,
body.light-mode footer {
    background: linear-gradient(180deg, #bda486 0%, #aa8e70 52%, #987d62 100%) ;
    color: #49372a ;
    border-top: 1px solid rgba(68,48,31,.34) ;
    box-shadow:
        0 -16px 36px rgba(48,33,20,.24),
        inset 0 1px 0 rgba(255,247,229,.36) ;
}

body.light-mode .footer-legal,
body.light-mode .footer-grid {
    background: transparent ;
}

body.light-mode .footer-grid {
    border-top: 1px solid rgba(73,53,35,.24) ;
    border-bottom: 1px solid rgba(73,53,35,.18) ;
}

body.light-mode .footer-badge,
body.light-mode .designer-badge {
    background: rgba(236,218,190,.20) ;
    border-color: rgba(74,53,34,.28) ;
    color: #4b382a ;
    box-shadow:
        0 4px 12px rgba(50,35,22,.13),
        inset 0 1px 0 rgba(255,247,229,.40) ;
}

body.light-mode .service-tag,
body.light-mode .designer-name,
body.light-mode .footer-legal .legal-link {
    color: #6e4810 ;
    text-shadow:
        0 1px 0 rgba(255,247,229,.66),
        0 2px 4px rgba(57,38,18,.22) ;
}

body.light-mode .footer-separator {
    background: #76552f ;
    box-shadow: 0 0 5px rgba(118,85,47,.22) ;
}

/* 15. CSS-ONLY CONTENT TRANSITION.
   This works with the existing .content-section active-state system and does
   not animate the header/footer. It is intentionally scoped to Light Mode. */
body.light-mode .content-section.active {
    animation: dxLightContentEnter .42s cubic-bezier(.22,.72,.25,1) both;
}

@keyframes dxLightContentEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Center loading indicator during content-section activation. */
body.light-mode .content-section.active::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    border: 2px solid rgba(92,66,38,.18);
    border-top-color: #8b5d18;
    box-shadow: 0 4px 14px rgba(55,39,25,.14);
    pointer-events: none;
    z-index: 99990;
    opacity: 0;
    animation: dxLightSpinner .82s ease-out both;
}

@keyframes dxLightSpinner {
    0%   { opacity: 0; transform: scale(.72) rotate(0deg); }
    12%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1) rotate(360deg); }
}

/* Future/router hook: if the existing navigation layer adds this class, the
   same visual transition can be used without touching header/footer. */
body.light-mode.page-transition-active .page-content,
body.light-mode.page-transition-active .main-content,
body.light-mode.page-transition-active .content-area {
    animation: dxLightContentEnter .42s cubic-bezier(.22,.72,.25,1) both;
}

@media (prefers-reduced-motion: reduce) {
    body.light-mode .content-section.active,
    body.light-mode .content-section.active::after,
    body.light-mode.page-transition-active .page-content,
    body.light-mode.page-transition-active .main-content,
    body.light-mode.page-transition-active .content-area {
        animation: none ;
        filter: none ;
        transform: none ;
    }
}

/* Mobile/tablet: same center indicator, slightly smaller and softer. */
@media (max-width: 1024px) {
    body.light-mode .content-section.active::after {
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
    }
}

/* ========================================================================
   V13 — FINAL POLISH: SHELL BOUNDARIES / HEADER / FOOTER / RELATIONSHIPS
   ======================================================================== */

/* 16. SHELL GEOMETRY — nothing inside the app may visually exceed its shell. */
body.light-mode .app-container,
body:not(.light-mode) .app-container {
    box-sizing: border-box;
    overflow-x: clip;
}

.app-container > .content-section,
.app-container > main,
.app-container > .page-wrapper,
.app-container > .page-content,
.app-container > .main-content,
.app-container > .content-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.content-section {
    max-width: 100%;
    box-sizing: border-box;
}

/* If footer is a sibling of the shell, align it to exactly the same shell.
   If it is inside the shell, keep it full-width inside that shell. */
body > .site-footer,
body > footer {
    width: min(95%, 1550px);
    max-width: 1550px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.app-container > .site-footer,
.app-container > footer {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* 17. HEADER — one step lighter than V12, while keeping the deep beige depth. */
body.light-mode .desktop-header,
body.light-mode .sticky-header-wrapper {
    background: linear-gradient(180deg, #dfceb5 0%, #cbb18f 56%, #b99c79 100%) ;
    border-color: rgba(73,53,35,.27) ;
    box-shadow:
        inset 0 1px 0 rgba(255,248,232,.78),
        inset 0 -1px 0 rgba(68,48,31,.16),
        0 12px 30px rgba(48,33,20,.20) ;
}

body.light-mode .landing-submenu {
    background: linear-gradient(180deg, #c6aa88 0%, #b59673 100%) ;
    box-shadow:
        inset 0 1px 0 rgba(255,247,228,.38),
        0 10px 24px rgba(52,36,23,.18) ;
}

/* 18. PROFILE RELATIONSHIP COUNTERS — real icon + number + label spacing. */
body.light-mode .profile-header-stats-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #4b392b ;
}

body.light-mode .profile-stat-item {
    display: inline-flex ;
    align-items: center ;
    gap: 5px ;
    color: #4b392b ;
    line-height: 1.35;
}

body.light-mode .profile-stat-item i,
body.light-mode .profile-stat-item svg {
    display: inline-block ;
    width: 14px ;
    height: 14px ;
    flex: 0 0 14px;
    color: #805516 ;
    stroke: currentColor;
    filter: drop-shadow(0 1px 1px rgba(58,40,24,.18));
}

body.light-mode .profile-stat-divider {
    color: rgba(79,58,39,.38) ;
    margin: 0 1px;
}

/* 19. LIGHT-THEME USER PREVIEW CARD — cover the common popup/card hooks.
   If a project-specific selector exists, it can inherit these same tokens. */
body.light-mode .user-hover-card,
body.light-mode .user-preview-card,
body.light-mode .profile-hover-card,
body.light-mode .user-hover-popup,
body.light-mode .profile-hover-popup,
body.light-mode #user-hover-card,
body.light-mode #profile-hover-card,
body.light-mode [data-user-card],
body.light-mode [data-profile-card] {
    background: linear-gradient(155deg, #d9c4a6 0%, #c4aa88 58%, #ae916f 100%) ;
    color: #35271d ;
    border-color: rgba(86,61,38,.40) ;
    box-shadow:
        0 24px 50px rgba(48,33,20,.30),
        inset 0 1px 0 rgba(255,247,229,.52) ;
    text-shadow: 0 1px 0 rgba(255,247,229,.62), 0 1px 3px rgba(58,40,24,.12);
}

body.light-mode .user-hover-card a,
body.light-mode .user-preview-card a,
body.light-mode .profile-hover-card a,
body.light-mode .user-hover-popup a,
body.light-mode .profile-hover-popup a,
body.light-mode [data-user-card] a,
body.light-mode [data-profile-card] a {
    color: #654513 ;
}

/* 20. NO COLD/GRAY SURFACES IN LIGHT MODE — common legacy utility surfaces. */
body.light-mode .user-hover-card .card,
body.light-mode .user-preview-card .card,
body.light-mode .profile-hover-card .card,
body.light-mode .user-hover-popup .card,
body.light-mode .profile-hover-popup .card {
    background: transparent ;
    border-color: rgba(86,61,38,.18) ;
    box-shadow: none ;
}

/* 21. QUICK INFORMATION CARD — explicit light-theme surface.
   The base quick card is intentionally dark for the dark theme, but the
   light theme must not inherit that surface. */
body.light-mode .quick-card-popover-box {
    background: linear-gradient(155deg, #f6efe5 0%, #e5d2b8 100%) ;
    color: #3d3025 ;
    border-color: rgba(121,91,55,.34) ;
    box-shadow: 0 22px 48px rgba(53,38,24,.24), inset 0 1px 0 rgba(255,248,235,.72) ;
    text-shadow: none ;
}

body.light-mode .quick-card-popover-box .quick-card-cover-wrapper {
    background: #d7c2a5 ;
    border-bottom-color: rgba(121,91,55,.24) ;
}

body.light-mode .quick-card-popover-box .quick-card-cover-overlay {
    background: linear-gradient(180deg, rgba(42,31,22,.04) 0%, rgba(42,31,22,.42) 100%) ;
}

body.light-mode .quick-card-popover-box .quick-card-avatar-img {
    background: #eee3d2 ;
    box-shadow: 0 4px 16px rgba(53,38,24,.24) ;
}

body.light-mode .quick-card-popover-box .quick-card-top-profile {
    color: #4b392b ;
    border-bottom-color: rgba(121,91,55,.16) ;
}

body.light-mode .quick-card-popover-box .quick-card-username {
    color: #2f241c ;
    text-shadow: 0 1px 0 rgba(255,248,235,.72) ;
}

body.light-mode .quick-card-popover-box .quick-card-role-badge {
    color: #805516 ;
    background: rgba(149,102,28,.10) ;
    border-color: rgba(149,102,28,.28) ;
}

body.light-mode .quick-card-popover-box .quick-card-detail-item {
    color: #4b392b ;
}

body.light-mode .quick-card-popover-box .detail-label {
    color: #796958 ;
}

body.light-mode .quick-card-popover-box .detail-value {
    color: #35271d ;
}

body.light-mode .quick-card-popover-box .detail-link {
    color: #8a5b12 ;
}

body.light-mode .quick-card-popover-box .quick-card-close-btn {
    background: rgba(255,248,235,.72) ;
    border-color: rgba(121,91,55,.28) ;
    color: #5f4a37 ;
}

body.light-mode .quick-card-popover-box .quick-card-close-btn:hover {
    background: rgba(149,102,28,.16) ;
    color: #8a5b12 ;
}

body.light-mode .quick-card-popover-box .quick-card-cover-counters .counter-badge {
    color: #fffaf2 ;
    background: rgba(48,35,24,.66) ;
    border-color: rgba(229,158,0,.48) ;
}


/* ========================================================================
   V14 — NAV MICRO-FIX
   Border is reserved in the resting state, so hover cannot reflow the row.
   Shadows sit directly behind the control; no white/inset highlight is used.
   ======================================================================== */
body.light-mode .desktop-nav a,
body.light-mode .landing-submenu a {
    box-sizing: border-box ;
    border: 1px solid transparent ;
}

body.light-mode .desktop-nav a:hover,
body.light-mode .desktop-nav a.active,
body.light-mode .landing-submenu a:hover,
body.light-mode .landing-submenu a.active {
    border-color: rgba(149,102,28,.30) ;
    box-shadow: 0 5px 12px rgba(55,39,25,.16) ;
}

body.light-mode .desktop-nav a:hover::before,
body.light-mode .desktop-nav a:hover::after,
body.light-mode .landing-submenu a:hover::before,
body.light-mode .landing-submenu a:hover::after,
body.light-mode .desktop-nav a.active::before,
body.light-mode .desktop-nav a.active::after,
body.light-mode .landing-submenu a.active::before,
body.light-mode .landing-submenu a.active::after {
    box-shadow: none;
}

body.light-mode .desktop-nav a,
body.light-mode .landing-submenu a {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}