/**
 * TitanRadar shell — dark / light theme + sidebar layout
 * Dark palette: cool navy/charcoal (TitanScan-like), muted green accent only.
 */

:root,
html[data-theme="dark"] {
    --tr-bg: #0c0e16;
    --tr-bg-elevated: #12151f;
    --tr-sidebar: #0a0c14;
    --tr-sidebar-border: rgba(255, 255, 255, 0.06);
    --tr-surface: rgba(22, 25, 38, 0.94);
    --tr-surface-2: rgba(28, 32, 48, 0.96);
    --tr-surface-hover: rgba(34, 38, 56, 0.98);
    --tr-border: rgba(255, 255, 255, 0.08);
    --tr-border-strong: rgba(255, 255, 255, 0.14);
    --tr-text: #eef0f6;
    --tr-text-secondary: #b4bac8;
    --tr-muted: #8b93a7;
    --tr-accent: #2a9b6c;
    --tr-accent-soft: rgba(42, 155, 108, 0.12);
    --tr-accent-glow: rgba(42, 155, 108, 0.18);
    --tr-neon: #3cb87a;
    --tr-green: #3cb87a;
    --tr-green-soft: rgba(60, 184, 122, 0.12);
    --tr-red: #e85a6e;
    --tr-red-soft: rgba(232, 90, 110, 0.14);
    --tr-orange: #e8943a;
    --tr-orange-soft: rgba(232, 148, 58, 0.14);
    --tr-yellow: #d4b71a;
    --tr-yellow-soft: rgba(212, 183, 26, 0.12);
    --tr-critical: #e0455c;
    --tr-high: #e8943a;
    --tr-medium: #d4b71a;
    --tr-low: #3cb87a;
    --tr-map-bg: #0c0e16;
    --tr-input-bg: rgba(14, 16, 26, 0.95);
    --tr-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.45);
    --tr-sidebar-width: 232px;
    --tr-radius: 12px;
    --tr-radius-sm: 8px;
    color-scheme: dark;
}

html[data-theme="light"] {
    --tr-bg: #f3f4f7;
    --tr-bg-elevated: #ffffff;
    --tr-sidebar: #ffffff;
    --tr-sidebar-border: #dde1ea;
    --tr-surface: #ffffff;
    --tr-surface-2: #f7f8fb;
    --tr-surface-hover: #eef0f5;
    --tr-border: #dde1ea;
    --tr-border-strong: #c5cad6;
    --tr-text: #12151f;
    --tr-text-secondary: #3a4154;
    --tr-muted: #6b7388;
    --tr-accent: #228a5e;
    --tr-accent-soft: rgba(34, 138, 94, 0.1);
    --tr-accent-glow: rgba(34, 138, 94, 0.14);
    --tr-neon: #2a9b6c;
    --tr-green: #228a5e;
    --tr-green-soft: rgba(34, 138, 94, 0.1);
    --tr-red: #dc2626;
    --tr-red-soft: rgba(220, 38, 38, 0.1);
    --tr-orange: #ea580c;
    --tr-orange-soft: rgba(234, 88, 12, 0.1);
    --tr-yellow: #ca8a04;
    --tr-yellow-soft: rgba(202, 138, 4, 0.1);
    --tr-critical: #b91c1c;
    --tr-high: #ea580c;
    --tr-medium: #ca8a04;
    --tr-low: #228a5e;
    --tr-map-bg: #eef0f5;
    --tr-input-bg: #f7f8fb;
    --tr-shadow: 0 6px 18px rgba(18, 21, 31, 0.06);
    color-scheme: light;
}

html[data-theme="light"] body.tr-app {
    background:
        radial-gradient(ellipse 70% 40% at 10% -5%, rgba(60, 90, 160, 0.04), transparent 50%),
        radial-gradient(ellipse 50% 35% at 95% 5%, rgba(42, 155, 108, 0.03), transparent 45%),
        var(--tr-bg) !important;
}

html[data-theme="light"] body.tr-app .tr-main {
    background: transparent;
}

/* Light sidebar — cool light surfaces, not dark/green */
html[data-theme="light"] .tr-sidebar {
    background:
        linear-gradient(180deg, rgba(60, 90, 160, 0.04) 0%, transparent 28%),
        var(--tr-sidebar);
    border-right: 1px solid var(--tr-sidebar-border);
    box-shadow: 2px 0 16px rgba(18, 21, 31, 0.06);
}
html[data-theme="light"] .tr-sidebar__brand { color: var(--tr-text); }
html[data-theme="light"] .tr-sidebar__logo {
    background: rgba(60, 90, 160, 0.08);
}
html[data-theme="light"] .tr-sidebar__name { color: var(--tr-text); }
html[data-theme="light"] .tr-sidebar__tag { color: var(--tr-muted); }
html[data-theme="light"] .tr-nav-link {
    color: var(--tr-text-secondary);
}
html[data-theme="light"] .tr-nav-link:hover {
    background: rgba(60, 90, 160, 0.06);
    color: var(--tr-text);
}
html[data-theme="light"] .tr-nav-link.active {
    background: rgba(60, 90, 160, 0.1);
    border-color: rgba(60, 90, 160, 0.16);
    color: var(--tr-text);
    box-shadow: none;
}
html[data-theme="light"] .tr-nav-sub a {
    color: var(--tr-muted);
}
html[data-theme="light"] .tr-nav-sub a:hover {
    background: rgba(60, 90, 160, 0.05);
    color: var(--tr-text);
}
html[data-theme="light"] .tr-nav-sub a.active {
    color: var(--tr-accent);
    background: var(--tr-accent-soft);
}
html[data-theme="light"] .tr-sidebar__insight {
    border: 1px solid var(--tr-border);
    box-shadow: 0 4px 14px rgba(18, 21, 31, 0.06);
    background:
        radial-gradient(circle at 28% 42%, rgba(60, 90, 160, 0.1), transparent 42%),
        linear-gradient(165deg, #eef0f5 0%, #e4e7ef 55%, #dde1ea 100%);
}
html[data-theme="light"] .tr-sidebar__insight::before {
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 72% 28%, rgba(60, 90, 160, 0.35) 0 1.2px, transparent 1.6px),
        radial-gradient(circle at 88% 48%, rgba(60, 90, 160, 0.28) 0 1px, transparent 1.4px),
        radial-gradient(circle at 62% 62%, rgba(60, 90, 160, 0.3) 0 1px, transparent 1.4px),
        radial-gradient(circle at 80% 78%, rgba(60, 90, 160, 0.22) 0 1px, transparent 1.4px),
        radial-gradient(circle at 50% 22%, rgba(60, 90, 160, 0.2) 0 1px, transparent 1.4px),
        linear-gradient(125deg, transparent 48%, rgba(60, 90, 160, 0.12) 49%, transparent 51%),
        linear-gradient(55deg, transparent 58%, rgba(60, 90, 160, 0.1) 59.5%, transparent 61%);
}
html[data-theme="light"] .tr-sidebar__insight::after {
    border-color: rgba(18, 21, 31, 0.08);
}
html[data-theme="light"] .tr-sidebar__globe {
    filter: drop-shadow(0 2px 6px rgba(18, 21, 31, 0.12));
}
html[data-theme="light"] .tr-sidebar__insight-bar p {
    color: var(--tr-text);
    text-shadow: none;
}
html[data-theme="light"] .tr-sidebar__insight-btn {
    border-color: var(--tr-border);
    background: rgba(255, 255, 255, 0.85);
    color: var(--tr-text-secondary);
}
html[data-theme="light"] .tr-sidebar__insight-btn:hover {
    color: var(--tr-text);
    border-color: var(--tr-border-strong);
}
html[data-theme="light"] .tr-sidebar__product {
    color: var(--tr-muted);
}

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

html { height: 100%; }

body.tr-app {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tr-text);
    background:
        radial-gradient(ellipse 70% 40% at 12% -8%, rgba(60, 90, 160, 0.08), transparent 55%),
        radial-gradient(ellipse 50% 35% at 92% 8%, rgba(42, 155, 108, 0.04), transparent 50%),
        var(--tr-bg) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
}

body.tr-app::before { display: none !important; }

html[data-theme="dark"] body.tr-app .tr-main {
    background:
        radial-gradient(ellipse 60% 35% at 50% 0%, rgba(60, 90, 160, 0.04), transparent 60%),
        var(--tr-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    color: var(--tr-text);
}

/* ── App shell ─────────────────────────────────────────── */
.tr-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.tr-sidebar {
    width: var(--tr-sidebar-width);
    flex-shrink: 0;
    background:
        linear-gradient(180deg, rgba(60, 90, 160, 0.06) 0%, transparent 28%),
        var(--tr-sidebar);
    border-right: 1px solid var(--tr-sidebar-border);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    padding: 0.9rem 0.7rem 0.85rem;
}

.tr-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0.45rem 0.95rem;
    text-decoration: none;
    color: #fff;
}
.tr-sidebar__logo {
    width: 32px; height: 32px; border-radius: 8px;
    object-fit: contain;
    background: rgba(42, 155, 108, 0.12);
    padding: 3px;
    box-shadow: none;
    filter: none;
}
.tr-sidebar__name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800; font-size: 0.98rem; line-height: 1.1; margin: 0; color: #fff;
    text-shadow: none;
}
.tr-sidebar__tag {
    margin: 0.15rem 0 0; font-size: 0.62rem; color: rgba(255,255,255,0.55);
    font-weight: 500; line-height: 1.25; max-width: 150px;
}

.tr-sidebar__nav {
    list-style: none; margin: 0; padding: 0;
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.tr-nav-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.48rem 0.7rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.8rem; font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tr-nav-link i { width: 1.05rem; text-align: center; opacity: 0.85; font-size: 0.85rem; }

/* Keep Font Awesome glyphs from being overridden by theme fonts */
.fa, .fas, .far, .fal, .fat, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
}
.fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; font-family: "Font Awesome 6 Free" !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
.tr-nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: none;
}
.tr-nav-link.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.055));
    border-color: rgba(255, 255, 255, 0.106);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.066), 0 0 12px rgba(255, 255, 255, 0.099);
    animation: none;
}
@keyframes tr-neon-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 0 12px rgba(255, 255, 255, 0.099); }
    50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.123), 0 0 18px rgba(255, 255, 255, 0.108); }
}
@keyframes tr-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.106); opacity: 1; }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05); opacity: 0.85; }
}
@keyframes tr-float-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.106)); transform: translateY(0) scale(1); }
    50% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.14)); transform: translateY(-2px) scale(1.02); }
}
@keyframes tr-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes tr-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes tr-orbit-rev {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
@keyframes tr-scan {
    0% { transform: translateY(-100%); opacity: 0; }
    20% { opacity: 0.45; }
    80% { opacity: 0.45; }
    100% { transform: translateY(220%); opacity: 0; }
}
@keyframes tr-border-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 0 12px rgba(255, 255, 255, 0.066); }
    50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.123), 0 0 18px rgba(255, 255, 255, 0.11); }
}
.tr-nav-group > summary.tr-nav-link {
    list-style: none; cursor: pointer;
}
.tr-nav-group > summary.tr-nav-link::-webkit-details-marker { display: none; }
.tr-nav-group > summary.tr-nav-link::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.65rem;
    opacity: 0.55;
}
.tr-nav-group[open] > summary.tr-nav-link::after { transform: rotate(180deg); }
.tr-nav-sub {
    list-style: none; margin: 0.15rem 0 0.35rem; padding: 0 0 0 0.55rem;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.tr-nav-sub a {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.7rem 0.45rem 1.55rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.78rem; font-weight: 600;
}
.tr-nav-sub a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tr-nav-sub a.active {
    color: #6bc99a;
    background: rgba(255, 255, 255, 0.066);
}

.tr-sidebar__foot {
    margin-top: auto;
    padding-top: 0.75rem;
}
.tr-sidebar__insight {
    position: relative;
    overflow: hidden;
    height: 124px;
    margin-bottom: 0.6rem;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 4px 16px rgba(0, 0, 0, 0.35);
    background:
        radial-gradient(circle at 28% 42%, rgba(60, 90, 160, 0.12), transparent 42%),
        linear-gradient(165deg, #12151f 0%, #0c0e16 55%, #0a0c14 100%);
    color: #fff;
}
/* network / constellation pattern */
.tr-sidebar__insight::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.121) 0 1.2px, transparent 1.6px),
        radial-gradient(circle at 88% 48%, rgba(255, 255, 255, 0.108) 0 1px, transparent 1.4px),
        radial-gradient(circle at 62% 62%, rgba(255, 255, 255, 0.116) 0 1px, transparent 1.4px),
        radial-gradient(circle at 80% 78%, rgba(255, 255, 255, 0.096) 0 1px, transparent 1.4px),
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.085) 0 1px, transparent 1.4px),
        linear-gradient(125deg, transparent 48%, rgba(255, 255, 255, 0.066) 49%, transparent 51%),
        linear-gradient(55deg, transparent 58%, rgba(255, 255, 255, 0.055) 59.5%, transparent 61%),
        linear-gradient(20deg, transparent 40%, rgba(255, 255, 255, 0.05) 41%, transparent 43%);
}
/* soft inset frame */
.tr-sidebar__insight::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.066);
    pointer-events: none;
    z-index: 3;
}
.tr-sidebar__globe {
    position: absolute;
    left: -6px;
    top: 50%;
    width: 100px;
    height: 100px;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.116));
    animation: tr-insight-globe 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tr-insight-globe {
    0%, 100% {
        transform: translateY(-54%) scale(1);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.108));
    }
    50% {
        transform: translateY(calc(-54% - 2px)) scale(1.02);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.121));
    }
}
.tr-sidebar__insight-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}
.tr-sidebar__insight-bar p {
    margin: 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.5);
    max-width: 9.5rem;
}
.tr-sidebar__insight-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(14, 16, 26, 0.78);
    color: #eef0f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.7rem;
    backdrop-filter: blur(6px);
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.tr-sidebar__insight-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: none;
}
.tr-sidebar__globe-wrap,
.tr-sidebar__orbit,
.tr-sidebar__insight-row,
.tr-sidebar__insight-ico { display: none; }
.tr-sidebar__product {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem; font-weight: 600;
}
.tr-sidebar__product img { width: 18px; height: 18px; opacity: 0.85; }

.tr-main {
    flex: 1;
    margin-left: var(--tr-sidebar-width);
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--tr-bg);
}

.tr-topbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.15rem;
    border-bottom: 1px solid var(--tr-border);
    background: var(--tr-bg-elevated);
    position: sticky;
    top: 0;
    z-index: 30;
}
.tr-topbar__search {
    flex: 1;
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--tr-input-bg);
    border: 1px solid var(--tr-border);
    border-radius: 10px;
    padding: 0.45rem 0.75rem;
    max-width: 440px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
html[data-theme="dark"] .tr-topbar__search:focus-within {
    border-color: rgba(42, 155, 108, 0.4);
    box-shadow: 0 0 0 1px rgba(42, 155, 108, 0.12);
}
.tr-topbar__search i { color: var(--tr-muted); }
.tr-topbar__search input {
    border: 0; outline: 0; background: transparent; width: 100%;
    color: var(--tr-text); font-size: 0.82rem;
}
.tr-topbar__search input::placeholder { color: var(--tr-muted); }
.tr-topbar__filters { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.tr-topbar__select {
    background: var(--tr-input-bg);
    border: 1px solid var(--tr-border);
    color: var(--tr-text-secondary);
    border-radius: 8px;
    padding: 0.38rem 1.7rem 0.38rem 0.65rem;
    font-size: 0.72rem; font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238b93a7' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 8px 5px;
    max-width: 160px;
}
.tr-topbar__select:hover { border-color: var(--tr-border-strong); color: var(--tr-text); }
.tr-topbar__select:focus {
    outline: none;
    border-color: rgba(42, 155, 108, 0.45);
    box-shadow: 0 0 0 2px rgba(42, 155, 108, 0.12);
}
.tr-topbar__right {
    margin-left: auto;
    display: flex; align-items: center; gap: 0.45rem;
}
.tr-icon-btn {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--tr-border);
    background: var(--tr-input-bg);
    color: var(--tr-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
}
.tr-icon-btn:hover { color: var(--tr-text); border-color: var(--tr-border-strong); }

.tr-user-menu { position: relative; }
.tr-userchip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.15rem 0.4rem 0.15rem 0.15rem;
    border-radius: 999px;
    border: 1px solid var(--tr-border);
    background: var(--tr-input-bg);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.tr-userchip:hover { border-color: var(--tr-border-strong); }
.tr-userchip__avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #3a4a6b, #2a9b6c);
    color: #eef0f6; font-size: 0.62rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: none; flex-shrink: 0;
}
.tr-userchip__avatar--sm { width: 28px; height: 28px; font-size: 0.62rem; }
.tr-userchip__meta { line-height: 1.1; min-width: 0; }
.tr-userchip__name {
    display: block; margin: 0;
    font-size: 0.72rem; font-weight: 700; color: var(--tr-text);
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-userchip__caret {
    font-size: 0.55rem; color: var(--tr-muted); margin-right: 0.15rem;
}
.tr-user-menu__panel {
    min-width: 200px;
    padding: 0.35rem;
    margin-top: 0.4rem !important;
    border: 1px solid var(--tr-border) !important;
    border-radius: 10px !important;
    background: var(--tr-surface) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
    z-index: 1080;
}
.tr-user-menu__head {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.45rem 0.5rem 0.55rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--tr-border);
}
.tr-user-menu__head strong {
    display: block; font-size: 0.78rem; font-weight: 750; color: var(--tr-text);
}
.tr-user-menu__head small {
    display: block; font-size: 0.62rem; color: var(--tr-muted); font-weight: 500;
}
.tr-user-menu__panel .dropdown-item {
    display: flex; align-items: center; gap: 0.5rem;
    border-radius: 7px;
    padding: 0.45rem 0.55rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--tr-text-secondary);
}
.tr-user-menu__panel .dropdown-item i {
    width: 0.9rem; text-align: center; opacity: 0.8; font-size: 0.72rem;
}
.tr-user-menu__panel .dropdown-item:hover,
.tr-user-menu__panel .dropdown-item:focus {
    background: rgba(60, 90, 160, 0.1);
    color: var(--tr-text);
}
.tr-user-menu__logout { color: #e85a6e !important; }
.tr-user-menu__logout:hover { background: rgba(232, 90, 110, 0.1) !important; }

html[data-theme="light"] .tr-user-menu__panel {
    box-shadow: 0 10px 28px rgba(18, 21, 31, 0.12) !important;
}

.tr-content {
    flex: 1;
    padding: 0.95rem 1.1rem 1.6rem;
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
}

.tr-mobile-toggle {
    display: none;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--tr-border);
    background: var(--tr-input-bg); color: var(--tr-text);
}

@media (max-width: 991px) {
    .tr-sidebar {
        transform: translateX(-105%);
        transition: transform 0.22s ease;
    }
    .tr-shell.sidebar-open .tr-sidebar { transform: translateX(0); }
    .tr-main { margin-left: 0; }
    .tr-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .tr-topbar__filters { display: none; }
    .tr-userchip__meta { display: none; }
}

/* Guest / share: no sidebar */
body.api-guest-view .tr-sidebar,
body.api-guest-view .tr-topbar { display: none; }
body.api-guest-view .tr-main { margin-left: 0; }
body.api-guest-view .tr-content { padding-top: 1rem; }

/* Legacy glass overrides when shell is active */
body.tr-app .main-container,
body.tr-app .tr-content .card,
body.tr-app .tr-content .registry-card {
    background: var(--tr-surface) !important;
    border-color: var(--tr-border) !important;
    color: var(--tr-text);
    box-shadow: none;
    backdrop-filter: none;
}