/**
 * Layout shell — sidebar, header, content
 * Preserves .side-bar, .side-bar-collapse, .small-view-button, sidebar-collapse
 */

body:not(.lockscreen).ds-app-shell {
    background-color: var(--background) !important;
    color: var(--text-primary);
}

body:not(.lockscreen).ds-app-shell > .thetop {
    display: flex;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--background);
}

/* Main column fills remaining width — neutralize AdminLTE sidebar margins */
body:not(.lockscreen) .thetop > main,
body.sidebar-mini:not(.lockscreen) .thetop > main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    width: auto !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

body.sidebar-mini:not(.lockscreen) .content-wrapper,
body.sidebar-mini:not(.lockscreen) .main-footer,
body.sidebar-mini.sidebar-collapse:not(.lockscreen) .content-wrapper,
body.sidebar-mini.sidebar-collapse:not(.lockscreen) .main-footer {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

/* Sidebar — glass surface owned by liquid-glass-sidebar.css */
body:not(.lockscreen) aside.side-bar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    align-self: stretch;
    height: auto;
    max-height: 100%;
    border-inline-end: 1px solid var(--sidebar-glass-border, var(--border));
    transition: width var(--nav-transition, var(--transition)), max-width var(--nav-transition, var(--transition)), flex-basis var(--nav-transition, var(--transition));
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar {
    flex: 0 0 var(--sidebar-collapsed-width);
    width: var(--sidebar-collapsed-width);
    max-width: var(--sidebar-collapsed-width);
    position: relative;
    z-index: 1045;
}

body:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover {
    border-radius: 12px;
    margin-inline: 0.15rem;
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active svg,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active i {
    color: var(--primary) !important;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--header-height);
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-active));
    color: var(--text-on-primary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand .side-bar-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-on-primary);
    line-height: 1.3;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search-wrap {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search input::placeholder {
    color: var(--text-muted);
}

/* Quick shortcuts */
body:not(.lockscreen) aside.side-bar .ds-sidebar-quick {
    padding: 0.55rem 0.75rem 0.65rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.45rem;
    line-height: 1.2;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.55rem 0.35rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    text-decoration: none !important;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn i {
    font-size: 0.95rem;
    color: var(--primary);
    line-height: 1;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:hover,
body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:focus {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    color: var(--primary);
    outline: none;
}

/* Recent pages live in the header dropdown now */

body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-quick {
    /* Visibility animated in liquid-glass-sidebar.css */
}

/* Dock-like sidebar icon interactions (logo area excluded) — softened; glass file owns polish */
body:not(.lockscreen) aside.side-bar:not(.ds-sidebar--glass) #side-bar .ds-nav-link {
    transform-origin: left center;
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-secondary));
    color: var(--primary);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease,
        background var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link:hover,
body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link:focus-visible {
    transform: translateX(3px) scale(1.02);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
    outline: none;
}

body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link:hover .ds-nav-icon,
body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link:focus-visible .ds-nav-icon {
    transform: scale(1.28) translateY(-2px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28);
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link:hover + .ds-nav-group .ds-nav-link .ds-nav-icon,
body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-group:hover > .ds-nav-link .ds-nav-icon {
    transform: scale(1.1);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn {
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn i {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:hover,
body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:focus-visible {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.2);
    outline: none;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:hover i,
body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:focus-visible i {
    transform: scale(1.15);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand,
body:not(.lockscreen) aside.side-bar .ds-sidebar-brand:hover,
body:not(.lockscreen) aside.side-bar .ds-sidebar-brand:focus {
    transform: none !important;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand__icon {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-link,
    body:not(.lockscreen) aside.side-bar #side-bar .ds-nav-icon,
    body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn,
    body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn i {
        transition: none !important;
        transform: none !important;
    }
}

/* Collapsed sidebar (desktop) — width set on aside above; icon rail polish */
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-search-wrap,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #sidebar-no-results,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .side-bar-heading {
    /* Animated hide handled by liquid-glass-sidebar.css */
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-brand {
    padding: 0.75rem 0.5rem;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover {
    margin-inline: 0 !important;
    justify-content: center;
    padding-inline: 0.5rem !important;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link:hover,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link:focus-visible,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover:hover,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover:focus-visible {
    transform: none !important;
    box-shadow: none !important;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link:hover .ds-nav-icon,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link:focus-visible .ds-nav-icon {
    transform: none !important;
    box-shadow: none !important;
}

/* Header */
.ds-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    min-height: var(--header-height);
}

.ds-header .theme-header-bg {
    background-image: none !important;
    background-color: var(--surface) !important;
}

.ds-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem clamp(0.75rem, 1.5vw, 1.5rem);
}

.ds-header-page-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

html[data-theme="light"] [data-ds-theme-icon="sun"],
html:not([data-theme="dark"]) [data-ds-theme-icon="sun"] {
    display: none;
}

html[data-theme="dark"] [data-ds-theme-icon="moon"] {
    display: none;
}

html[data-theme="dark"] [data-ds-theme-icon="sun"] {
    display: inline-block;
}

.ds-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.ds-header-btn:hover,
.ds-header-btn:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    color: var(--primary);
    text-decoration: none;
    outline: none;
    box-shadow: var(--focus-ring);
}

.ds-header-btn.ds-header-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

.ds-header-btn.ds-header-btn-primary:hover,
.ds-header-btn.ds-header-btn-primary:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary);
}

/* Recent pages — header dropdown (moved out of sidebar) */
.ds-header-recent > summary {
    list-style: none;
}

.ds-header-recent > summary::-webkit-details-marker {
    display: none;
}

.ds-header-recent__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.ds-header-recent__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(300px, calc(100vw - 24px));
    max-height: min(420px, 70vh);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.ds-header-recent:not([open]) .ds-header-recent__menu {
    display: none;
}

.ds-header-recent__head {
    padding: 6px 10px 8px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ds-header-recent__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-header-recent__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.ds-header-recent__item i {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.ds-header-recent__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-header-recent__item:hover,
.ds-header-recent__item:focus-visible {
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

.ds-header-recent__empty {
    margin: 0;
    padding: 14px 10px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

[data-theme="dark"] .ds-header-recent__menu {
    background: var(--surface-elevated, #1e293b);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

/* Soften legacy theme-btn-bg inside new header */
.ds-header .theme-btn-bg {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
}

.ds-header .theme-btn-bg:hover,
.ds-header .theme-btn-bg:focus {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
    color: var(--primary) !important;
}

.ds-header a.theme-btn-bg {
    color: var(--text-on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.ds-header a.theme-btn-bg:hover {
    background-color: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;
}

/* Content area — must be a flex child with min-height:0 so overflow-y scrolls
   instead of growing with dashboard modules (sidebar has its own scrollport). */
body:not(.lockscreen) #scrollable-container {
    background-color: var(--background);
    background-image:
        radial-gradient(circle at 8% 4%, rgba(124, 58, 237, 0.06) 0, transparent 28rem),
        radial-gradient(circle at 96% 72%, rgba(139, 92, 246, 0.05) 0, transparent 26rem);
    background-position: left top, right bottom;
    background-repeat: no-repeat;
    background-size: 42rem 42rem, 38rem 38rem;
    background-attachment: scroll;
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    /* Keep auto — CSS smooth + wheel (or JS scrollTop) feels laggy */
    scroll-behavior: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

body:not(.lockscreen) #scrollable-container > :not(.ds-system-bg) {
    position: relative;
    z-index: 1;
}

/* Keep dialogs above the dimmed backdrop when markup lives in content. */
body:not(.lockscreen) #scrollable-container .modal {
    z-index: 1050;
}

/* Registration-style animated vector layer, shared by all authenticated forms. */
body:not(.lockscreen) .ds-system-bg {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-block-end: 0;
    inset-inline-start: var(--sidebar-width);
    inset-inline-end: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

body.sidebar-collapse:not(.lockscreen) .ds-system-bg {
    inset-inline-start: var(--sidebar-collapsed-width);
}

.ds-system-bg__svg,
.ds-system-bg__orb {
    position: absolute;
    inset: 0;
}

.ds-system-bg__svg {
    width: 100%;
    height: 100%;
    opacity: 0.68;
}

.ds-system-bg__stop--edge {
    stop-color: #a78bfa;
    stop-opacity: 0;
}

.ds-system-bg__stop--center {
    stop-color: #7c3aed;
    stop-opacity: 0.24;
}

.ds-system-bg__draw {
    stroke-dasharray: 12 18;
    animation: ds-system-line-flow 18s linear infinite;
}

.ds-system-bg__draw--1 { animation-duration: 16s; opacity: 0.9; }
.ds-system-bg__draw--2 { animation-duration: 22s; animation-delay: -4s; opacity: 0.72; }
.ds-system-bg__draw--3 { animation-duration: 19s; animation-delay: -8s; opacity: 0.76; }
.ds-system-bg__draw--4 { animation-duration: 24s; animation-delay: -2s; opacity: 0.58; }
.ds-system-bg__draw--5 { animation-duration: 20s; animation-delay: -6s; opacity: 0.62; }
.ds-system-bg__draw--6 { animation-duration: 26s; animation-delay: -10s; opacity: 0.58; }
.ds-system-bg__draw--7 { animation-duration: 17s; animation-delay: -3s; opacity: 0.82; }
.ds-system-bg__draw--8 { animation-duration: 21s; animation-delay: -7s; opacity: 0.68; }

.ds-system-bg__nodes {
    fill: rgba(124, 58, 237, 0.34);
}

.ds-system-bg__nodes circle {
    animation: ds-system-node-pulse 3.2s ease-in-out infinite;
}

.ds-system-bg__nodes circle:nth-child(3n + 2) { animation-delay: -0.8s; }
.ds-system-bg__nodes circle:nth-child(3n) { animation-delay: -1.6s; }

.ds-system-bg__orb {
    border-radius: 50%;
    opacity: 0.14;
    transform-origin: center;
    transform: translate3d(0, 0, 0) scale(1);
    animation: ds-system-orb-drift 18s ease-in-out infinite;
    will-change: transform;
}

.ds-system-bg__orb--a {
    width: min(46vw, 620px);
    height: min(46vw, 620px);
    inset: -18% auto auto -14%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.55), transparent 68%);
}

.ds-system-bg__orb--b {
    width: min(40vw, 540px);
    height: min(40vw, 540px);
    inset: auto -10% -18% auto;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 68%);
    animation-direction: reverse;
    animation-duration: 21s;
}

.ds-system-bg__beam {
    position: absolute;
    inset-inline-start: -20%;
    width: 140%;
    height: 1px;
    opacity: 0.16;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.28), transparent);
    animation: ds-system-beam-sweep 12s ease-in-out infinite;
}

.ds-system-bg__beam--1 { top: 22%; --ds-beam-rotation: -16deg; }
.ds-system-bg__beam--2 { top: 52%; --ds-beam-rotation: 11deg; animation-delay: -4s; animation-direction: reverse; }
.ds-system-bg__beam--3 { top: 78%; --ds-beam-rotation: -8deg; animation-delay: -7s; }

.ds-system-bg__earth-grid,
.ds-system-bg__earth-orbit {
    fill: none;
    stroke: rgba(124, 58, 237, 0.2);
    stroke-width: 1.2;
}

.ds-system-bg__earth-grid {
    transform-box: fill-box;
    transform-origin: center;
    animation: ds-system-earth-spin 34s linear infinite;
    will-change: transform;
}

.ds-system-bg__earth-orbit {
    stroke-dasharray: 10 13;
    animation: ds-system-earth-orbit 14s linear infinite;
}

.ds-system-bg__earth-satellite {
    fill: rgba(124, 58, 237, 0.38);
    animation: ds-system-node-pulse 3.2s ease-in-out infinite;
}

.ds-system-bg__earth-label {
    fill: rgba(91, 33, 182, 0.24);
    font-family: "Segoe UI", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.ds-system-bg__earth--2 {
    opacity: 0.72;
}

.ds-system-bg__earth--2 .ds-system-bg__earth-grid,
.ds-system-bg__earth--2 .ds-system-bg__earth-orbit {
    animation-direction: reverse;
}

.ds-system-bg__earth--3 {
    opacity: 0.58;
}

.ds-system-bg__earth--4 {
    opacity: 0.52;
}

html[data-theme="dark"] .ds-system-bg__stop--center {
    stop-color: #93c5fd;
    stop-opacity: 0.22;
}

html[data-theme="dark"] .ds-system-bg__nodes {
    fill: rgba(165, 180, 252, 0.28);
}

html[data-theme="dark"] .ds-system-bg__orb {
    opacity: 0.1;
}

html[data-theme="dark"] .ds-system-bg__beam {
    background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.24), transparent);
}

html[data-theme="dark"] .ds-system-bg__earth-grid,
html[data-theme="dark"] .ds-system-bg__earth-orbit {
    stroke: rgba(147, 197, 253, 0.17);
}

html[data-theme="dark"] .ds-system-bg__earth-satellite {
    fill: rgba(165, 180, 252, 0.3);
}

html[data-theme="dark"] .ds-system-bg__earth-label {
    fill: rgba(199, 210, 254, 0.2);
}

@keyframes ds-system-line-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -240; }
}

@keyframes ds-system-node-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.9; }
}

@keyframes ds-system-orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(5%, -4%, 0) scale(1.08); }
}

@keyframes ds-system-beam-sweep {
    0%, 100% { opacity: 0.08; transform: translate3d(-7%, 0, 0) rotate(var(--ds-beam-rotation)); }
    50% { opacity: 0.28; transform: translate3d(7%, 0, 0) rotate(var(--ds-beam-rotation)); }
}

@keyframes ds-system-earth-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ds-system-earth-orbit {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -230; }
}

body:not(.lockscreen) section.content {
    padding-top: 0.75rem;
    padding-inline: 0;
}

body:not(.lockscreen) .content-header,
body:not(.lockscreen) section.content-header {
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    padding-inline: 0;
}

[data-theme="dark"] body:not(.lockscreen) .content-header .tw-text-black,
[data-theme="dark"] body:not(.lockscreen) .content-header h1.tw-text-black {
    color: var(--text-primary) !important;
}

body:not(.lockscreen) .content-header h1,
body:not(.lockscreen) section.content-header h1 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

body:not(.lockscreen) .content-header small,
body:not(.lockscreen) section.content-header small {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Mobile drawer overlay already exists; ensure z-index */
body:not(.lockscreen) .overlay {
    background: rgba(15, 23, 42, 0.55);
}

@media (max-width: 991px) {
    body:not(.lockscreen) .ds-system-bg,
    body.sidebar-collapse:not(.lockscreen) .ds-system-bg {
        inset-inline-start: 0;
    }

    body:not(.lockscreen) aside.side-bar.small-view-side-active {
        width: min(var(--sidebar-width), 85vw);
        max-width: min(var(--sidebar-width), 85vw);
        box-shadow: var(--shadow-md);
    }
}

@media print {
    .ds-system-bg {
        display: none !important;
    }

    body:not(.lockscreen) #scrollable-container {
        background: #fff !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-system-bg__draw,
    .ds-system-bg__nodes circle,
    .ds-system-bg__orb,
    .ds-system-bg__beam,
    .ds-system-bg__earth-grid,
    .ds-system-bg__earth-orbit,
    .ds-system-bg__earth-satellite {
        animation: none !important;
    }
}