/* GOMD — Global Ocean & Maritime Data Governance Platform */
/* Design system: institutional ocean-data palette.
   Every text/surface pair below is verified to meet WCAG 2.1 AA (>= 4.5:1 body,
   >= 3:1 large text) in both themes. Do not introduce raw hex colours in markup:
   use the semantic tokens, so a value stays correct when the theme flips. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    color-scheme: light;

    /* Surfaces */
    --bg-darker: #F5F8FA;
    --bg-dark: #ECF1F5;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F7FAFC;
    --surface-subtle: #F2F6F9;
    --sidebar-bg: rgba(255, 255, 255, 0.97);
    --table-head-bg: #EDF2F6;
    --input-bg: #FFFFFF;
    --border-color: #D6DFE7;
    --border-strong: #B9C7D3;

    /* Text. As with the accents, *-base always holds the theme value while the
       unsuffixed token is what markup consumes and a surface may re-scope. */
    --text-primary-base: #16212C;
    --text-secondary-base: #53606E;
    --text-muted-base: #5C6875;

    --text-primary: var(--text-primary-base);
    --text-secondary: var(--text-secondary-base);
    --text-muted: var(--text-muted-base);

    /* Contextual text tokens. These are re-declared on any element that paints
       its own background, so descendants resolve to a readable colour without
       knowing which surface they sit on. */
    --text-on-surface: var(--text-primary);
    --text-on-surface-soft: var(--text-secondary);

    /* Brand + semantic accents (all >= 4.5:1 on --bg-card and --bg-darker) */
    --primary: #0A4E70;
    --primary-rgb: 10, 78, 112;
    --primary-hover: #073C57;
    --primary-glow: rgba(10, 78, 112, 0.18);
    --secondary: #0E6C89;
    --secondary-glow: rgba(14, 108, 137, 0.16);
    --accent: #8A5600;
    --accent-glow: rgba(138, 86, 0, 0.16);
    --success: #16694C;
    --danger: #A62834;

    /* *-base holds the theme's own accent; the unsuffixed token is what markup
       uses and may be re-scoped by a surface. Keeping both lets a forced surface
       restore the theme value without hard-coding it again. */
    --accent-info-base: #0A5670;
    --accent-success-base: #16694C;
    --accent-warning-base: #8A5600;
    --accent-danger-base: #A62834;
    --accent-violet-base: #5B3E9B;

    --accent-info: var(--accent-info-base);
    --accent-success: var(--accent-success-base);
    --accent-warning: var(--accent-warning-base);
    --accent-danger: var(--accent-danger-base);
    --accent-violet: var(--accent-violet-base);

    /* Inverse surface: stays dark in BOTH themes, for deliberate emphasis panels */
    --surface-inverse: #142330;
    --surface-inverse-soft: #1C2F3F;
    --text-on-inverse: #E8EEF4;
    --text-on-inverse-soft: #AFBDCB;

    --action-bg: #0A4E70;
    --action-text: #FFFFFF;
    --text-on-fill: #FFFFFF;
    --text-on-fill-soft: rgba(255, 255, 255, 0.86);
    --map-water: #E8F1F5;
    --nav-hover: rgba(10, 78, 112, 0.07);
    --panel-tint: rgba(10, 78, 112, 0.035);
    --scroll-thumb: rgba(22, 33, 44, 0.26);
    --body-grid: rgba(22, 33, 44, 0.032);
    --body-radial-primary: rgba(10, 78, 112, 0.07);
    --body-radial-secondary: rgba(14, 108, 137, 0.06);
    --border-glow: rgba(10, 78, 112, 0.22);

    --glass: rgba(255, 255, 255, 0.9);
    --glass-blur: blur(14px);
    --ink: #16212C;
    --ink-soft: #24323F;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Restrained elevation: institutional, not neon. */
    --shadow-sm: 0 1px 2px rgba(22, 33, 44, 0.06), 0 1px 3px rgba(22, 33, 44, 0.05);
    --shadow-md: 0 2px 6px rgba(22, 33, 44, 0.07), 0 8px 20px rgba(22, 33, 44, 0.06);
    --shadow-lg: 0 4px 12px rgba(22, 33, 44, 0.09), 0 16px 36px rgba(22, 33, 44, 0.09);
    --shadow-orange: var(--shadow-md);
    --shadow-cyan: var(--shadow-md);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg-darker: #0D141C;
    --bg-dark: #131C26;
    --bg-card: #18232F;
    --bg-card-hover: #212E3C;
    --surface-subtle: #1B2734;
    --sidebar-bg: #101923;
    --table-head-bg: #1B2734;
    --input-bg: #0D141C;
    --border-color: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.2);

    --text-primary-base: #E8EEF4;
    --text-secondary-base: #A6B4C2;
    --text-muted-base: #93A1B0;

    --text-primary: var(--text-primary-base);
    --text-secondary: var(--text-secondary-base);
    --text-muted: var(--text-muted-base);

    --text-on-surface: var(--text-primary);
    --text-on-surface-soft: var(--text-secondary);

    --primary: #55A9CE;
    --primary-rgb: 85, 169, 206;
    --primary-hover: #7CC0DE;
    --primary-glow: rgba(85, 169, 206, 0.24);
    --secondary: #4FBBD8;
    --secondary-glow: rgba(79, 187, 216, 0.2);
    --accent: #DDA850;
    --accent-glow: rgba(221, 168, 80, 0.2);
    --success: #4CBE8E;
    --danger: #EF7C84;

    --accent-info-base: #6FC4E0;
    --accent-success-base: #4CBE8E;
    --accent-warning-base: #DDA850;
    --accent-danger-base: #EF7C84;
    --accent-violet-base: #B4A0EA;

    --accent-info: var(--accent-info-base);
    --accent-success: var(--accent-success-base);
    --accent-warning: var(--accent-warning-base);
    --accent-danger: var(--accent-danger-base);
    --accent-violet: var(--accent-violet-base);

    --surface-inverse: #0A121B;
    --surface-inverse-soft: #16222E;
    --text-on-inverse: #E8EEF4;
    --text-on-inverse-soft: #AFBDCB;

    --action-bg: #55A9CE;
    --action-text: var(--text-on-fill);
    --text-on-fill: #08131B;
    --text-on-fill-soft: rgba(8, 19, 27, 0.82);
    --map-water: #132B3B;
    --nav-hover: rgba(255, 255, 255, 0.06);
    --panel-tint: rgba(255, 255, 255, 0.03);
    --scroll-thumb: rgba(255, 255, 255, 0.16);
    --body-grid: rgba(255, 255, 255, 0.022);
    --body-radial-primary: rgba(85, 169, 206, 0.07);
    --body-radial-secondary: rgba(79, 187, 216, 0.05);
    --border-glow: rgba(85, 169, 206, 0.26);

    --glass: rgba(19, 28, 38, 0.88);
    --ink: #0D141C;
    --ink-soft: #131C26;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-orange: var(--shadow-md);
    --shadow-cyan: var(--shadow-md);
}

/* Any element painted with the inverse surface re-scopes the contextual text
   tokens, so nested markup stays legible regardless of the active theme. */
.surface-inverse,
.surface-dark,
[data-surface="inverse"] {
    background: var(--surface-inverse);
    --text-on-surface: var(--text-on-inverse);
    --text-on-surface-soft: var(--text-on-inverse-soft);
    --text-primary: var(--text-on-inverse);
    --text-secondary: var(--text-on-inverse-soft);
    --text-muted: var(--text-on-inverse-soft);
    --accent-info: #6FC4E0;
    --accent-success: #4CBE8E;
    --accent-warning: #DDA850;
    --accent-danger: #EF7C84;
    --accent-violet: #B4A0EA;
    color: var(--text-on-inverse);
}

/* Light tint panels keep dark text in both themes. */
[data-surface="tint"] {
    --text-on-surface: #16212C;
    --text-on-surface-soft: #53606E;
    --accent-info: #0E6C89;
    --accent-success: #16694C;
    --accent-warning: #8A5600;
    --accent-danger: #A62834;
    --accent-violet: #5B3E9B;
    color: #16212C;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-darker);
    background-image:
        radial-gradient(circle at 15% 15%, var(--body-radial-primary) 0px, transparent 45%),
        radial-gradient(circle at 85% 85%, var(--body-radial-secondary) 0px, transparent 45%),
        linear-gradient(to right, var(--body-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--body-grid) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

::selection {background: var(--primary);
    color:var(--text-on-fill);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

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

/* Themed scrollbars for Databricks Lakehouse shell */
.sidebar, .main-content, .table-container, pre, code {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}
.sidebar::-webkit-scrollbar, .main-content::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 8px;
}
.sidebar::-webkit-scrollbar-thumb:hover, .main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.5);
}

/* Inline icon system */
.gicon {
    flex-shrink: 0;
    vertical-align: -4px;
}
.gicon.on-dark { color: var(--accent-info); }
.gicon.success { color: var(--accent-success); }
.gicon.warning { color: var(--accent-warning); }
.gicon.danger { color: var(--primary); }
.gicon.muted { color: var(--text-muted); }
.icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.icon-wrap.sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.icon-wrap.md { width: 44px; height: 44px; }
.icon-wrap.lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.icon-wrap.on-dark { background: rgba(14, 165, 233, 0.12); color: var(--accent-info); border-color: rgba(14, 165, 233, 0.3); }
.icon-wrap.success { background: rgba(16, 185, 129, 0.12); color: var(--accent-success); border-color: rgba(16, 185, 129, 0.25); }
.icon-wrap.warning { background: rgba(245, 158, 11, 0.12); color: var(--accent-warning); border-color: rgba(245, 158, 11, 0.25); }
.icon-wrap.danger { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); border-color: rgba(var(--primary-rgb), 0.25); }

/* Layout */
.app-container {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

/* Sidebar Navigation (Databricks Dark Shell) */
.sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.logo-container {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.logo-title {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.logo-sub {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-secondary);
    font-weight: 700;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.95rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 9px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.nav-item a:hover {
    color: var(--text-primary);
    background: var(--nav-hover);
    border-color: var(--border-color);
}

.nav-item.active a {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.08));
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.15);
}

.nav-item a .gicon { color: inherit; opacity: 0.85; }
.nav-item.active a .gicon { opacity: 1; color: var(--primary); }

.nav-section-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 1.2rem 0 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.nav-section-title:first-child { margin-top: 0.2rem; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
    flex-shrink: 0;
}

.persona-select-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.65rem;
    margin-top: 0.25rem;
}
.persona-select-box label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lang-switch {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.25rem;
}
.lang-switch button {
    flex: 1;
    padding: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.lang-switch button:hover { border-color: var(--primary); color: #FFF; }
.lang-switch button.active {background: var(--primary);
    color:var(--text-on-fill);
    border-color: var(--primary);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.user-role {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 2.5rem;
}

/* Top Action Header */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.header-title h1 {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.header-title p {
    color: var(--text-secondary);
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Ticker Bar */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ticker-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    border-right: 1px solid rgba(var(--primary-rgb), 0.25);
    padding-right: 1rem;
}

.ticker {
    display: flex;
    white-space: nowrap;
    gap: 3rem;
    animation: marquee 28s linear infinite;
}

.ticker:hover {
    animation-play-state: paused;
}

.ticker-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ticker-item strong {
    color: var(--text-primary);
}

/* Cards & Grid Dashboard (Databricks Lakehouse Aesthetic) */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.2rem;
}

.card {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background 0.3s;
}

.card:hover {transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(var(--primary-rgb), 0.12);
    background: var(--bg-card-hover);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.card:hover::before {background: var(--primary);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.card.warning:hover::before {background: var(--accent);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.card.cyan:hover::before {background: var(--secondary);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.card-header-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.8px;
}

.card-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Sections & Panels */
.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-primary);
}

.content-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.2rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.section-header .section-header-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.section-header h2, .section-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.section-header .section-header-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.surface-dark {background: linear-gradient(135deg, #111827, #1E293B);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.6rem;
    color: #FFFFFF;
    box-shadow: var(--shadow-md);--text-on-surface:var(--text-on-inverse);--text-on-surface-soft:var(--text-on-inverse-soft);--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA;}

.surface-card {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary);
}
.eyebrow.on-dark { color: var(--accent-info); }

/* Badges & Chips */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--accent-danger);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    white-space: nowrap;
}
.badge.on-dark { background: rgba(14, 165, 233, 0.12); color: var(--accent-info); border-color: rgba(14, 165, 233, 0.3); }
.badge.neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border-color: var(--border-color); }
.badge.success { background: rgba(16, 185, 129, 0.12); color: var(--accent-success); border-color: rgba(16, 185, 129, 0.28); }
.badge.warning { background: rgba(245, 158, 11, 0.12); color: var(--accent-warning); border-color: rgba(245, 158, 11, 0.28); }
.badge.danger { background: rgba(239, 68, 68, 0.12); color: var(--accent-danger); border-color: rgba(239, 68, 68, 0.28); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-icon:hover {
    color: #FFF;
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.15);
}

.callout {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
}
.callout .gicon { margin-top: 0.15rem; }
.callout.critical { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.28); }
.callout.critical .gicon { color: var(--primary); }
.callout.warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.28); }
.callout.warning .gicon { color: var(--accent-warning); }
.callout.info { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.25); }
.callout.info .gicon { color: var(--accent-info); }
.callout.success { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.28); }
.callout.success .gicon { color: var(--accent-success); }
.callout-title { font-weight: 800; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 0.15rem; }
.callout-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* Table styling (Databricks Dark Grid) */
.table-container {background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

/* Universal Section Cards & Specialized Module Cards */
.section-card, .mini-card, .calc-card, .pipeline-step, .stat-card, .sub-card, .panel-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
    /* These cards are force-painted with the theme surface, so the contextual
       tokens must be forced back to the theme values too. Without this, a card
       whose own rule still declares a legacy dark background would keep an
       inverse text context and render light-on-light. */
    --text-primary: var(--text-primary-base) !important;
    --text-secondary: var(--text-secondary-base) !important;
    --text-muted: var(--text-muted-base) !important;
    --text-on-surface: var(--text-primary-base) !important;
    --text-on-surface-soft: var(--text-secondary-base) !important;
    --accent-info: var(--accent-info-base) !important;
    --accent-success: var(--accent-success-base) !important;
    --accent-warning: var(--accent-warning-base) !important;
    --accent-danger: var(--accent-danger-base) !important;
    --accent-violet: var(--accent-violet-base) !important;
}

.mini-card strong, .stat-card strong, .calc-card strong {
    color: var(--text-primary) !important;
}

.section-head h2, .section-head h3, .calc-card h3, .mini-card h3 {
    color: var(--text-primary) !important;
}

.section-head p, .calc-card > p, .pipeline-step p {
    color: var(--text-secondary) !important;
}

.source-table th, table.source-table th, .table th, table th {background: var(--table-head-bg) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.source-table td, table.source-table td, .table td, table td {
    /* Contextual, because tables are frequently placed inside inverse panels.
       Resolves to --text-primary on a normal surface. */
    color: var(--text-on-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.source-table tr:hover td, table tr:hover td {
    background: var(--panel-tint) !important;
}

.input-field label, .form-group label {
    color: var(--text-secondary) !important;
}

.input-field input, .input-field select, input[type="text"], input[type="number"], input[type="search"], select, textarea {background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.result-box {
    background: rgba(14, 165, 233, 0.08) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: var(--text-primary) !important;
}

.result-values div {background: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.result-values strong {
    color: var(--text-primary) !important;
}

.guardrail {
    background: rgba(245, 158, 11, 0.08) !important;
    border-left: 4px solid #F59E0B !important;
    color: var(--accent-warning) !important;
}

details.method {background: var(--bg-dark) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

details.method summary {
    color: var(--text-primary) !important;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.9rem 1.15rem;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 0.95rem 1.15rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

/* Status Indicators */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 700;
}

.status-pill.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pill.offline {
    background: rgba(239, 68, 68, 0.12);
    color: var(--primary);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background-color: currentColor;
    border-radius: 50%;
}

.active .pulse-dot {
    animation: pulse 1.6s infinite;
}

/* Leaflet map styling override */
#map {
    height: 560px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Form controls (Databricks Dark Form Inputs) */
.form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.form-control, .form-control-custom, select.form-control-custom, input.form-control-custom, textarea.form-control-custom {
    background: var(--input-bg);
    --text-on-surface: var(--text-primary-base);
    --text-on-surface-soft: var(--text-secondary-base);
    --text-primary: var(--text-primary-base);
    --text-secondary: var(--text-secondary-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

.form-control::placeholder, .form-control-custom::placeholder {
    color: var(--text-muted);
}

.form-control:focus, .form-control-custom:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    background: rgba(15, 23, 42, 0.95);
}

select.form-control option, select.form-control-custom option {background-color:var(--input-bg);
    color: var(--text-primary);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

/* Buttons (Databricks High-Impact CTA Style) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary, .btn-databricks {
    background: var(--primary);
    color: var(--text-on-fill) !important;
    box-shadow: var(--shadow-orange);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover, .btn-databricks:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.45);
    background: var(--primary);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--primary);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {background: var(--primary);
    color:var(--text-on-fill);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.filter-bar {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

/* Animations */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Footer style */
footer {margin-top: auto;--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);
    padding: 2.2rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
    background:var(--surface-inverse);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;--text-on-surface:#E8EEF4;--text-on-surface-soft:#AFBDCB;--text-primary:#E8EEF4;--text-secondary:#AFBDCB;--text-muted:#AFBDCB;--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA}

/* ==========================================================================
   DATABRICKS ENTERPRISE LANDING PAGE STYLES (`landing.php`)
   ========================================================================== */
.landing-body {background:var(--bg-darker);
    color: var(--text-primary);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-nav {
    position: sticky;
    --text-on-surface:var(--text-on-inverse);--text-on-surface-soft:var(--text-on-inverse-soft);--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA;
    top: 0;
    z-index: 1000;
    background: rgba(11, 15, 25, 0.82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.landing-nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: color 0.2s ease;
}

.landing-nav-links a:hover {
    color: #FFFFFF;
}

.landing-hero {
    position: relative;
    padding: 6rem 2rem 5rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
}

.landing-hero h1 {font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1.2px;
    max-width: 950px;color:var(--text-primary);}

.gradient-text-orange {;color:var(--primary);}

.gradient-text-cyan {;color:var(--accent-info);}

.landing-hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 780px;
    line-height: 1.6;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.hero-stats-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
    margin-top: 3rem;
}

.hero-stat-card {
    background: rgba(21, 30, 46, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s ease;
}

.hero-stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-3px);
}

.hero-stat-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.hero-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.3rem;
}

/* Feature & Architecture Grid */
.landing-section {
    padding: 5rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

.section-head-center {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-head-center h2 {
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: -0.6px;
    margin-top: 0.5rem;
    color: #FFFFFF;
}

.section-head-center p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 650px;
    margin: 0.5rem auto 0;
}

.lakehouse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
}

.module-card {background:var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.module-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--primary-rgb), 0.1);
}

.module-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
}

.module-icon-box.cyan {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.25);
    color: var(--accent-info);
}

.module-icon-box.amber {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--accent-warning);
}

.module-icon-box.green {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--accent-success);
}

.module-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
}

.module-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.module-card .module-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.module-card:hover .module-link {
    gap: 0.75rem;
}

/* Terminal / Code Sandbox */
.code-terminal {background:var(--surface-inverse);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);--text-on-surface:#E8EEF4;--text-on-surface-soft:#AFBDCB;--text-primary:#E8EEF4;--text-secondary:#AFBDCB;--text-muted:#AFBDCB;--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA}

.terminal-header {
    background: rgba(255, 255, 255, 0.04);
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.terminal-dot.red { background: #EF4444; }
.terminal-dot.yellow { background: #F59E0B; }
.terminal-dot.green { background: #10B981; }

.terminal-body {
    padding: 1.25rem;
    color: var(--accent-info);
    line-height: 1.6;
    overflow-x: auto;
}

/* ==========================================================================
   RESPONSIVE DESIGN (< 992px & < 575px)
   ========================================================================== */
@media (min-width: 992px) {
    .mobile-top-bar,
    .mobile-horizontal-nav-bar,
    .mobile-sidebar-backdrop {
        display: none !important;
        position: fixed !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-container {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        min-height: 100vh !important;
    }

    .sidebar {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable;
        display: flex !important;
        flex-direction: column !important;
        z-index: 100 !important;
    }

    .main-content {
        flex: 1 1 auto !important;
        width: calc(100% - 280px) !important;
        max-width: calc(100% - 280px) !important;
        padding: 2.5rem !important;
    }
}

@media (max-width: 991px) {
    .app-container {
        flex-direction: column !important;
    }

    .landing-nav-links {
        display: none;
    }

    .landing-hero h1 {
        font-size: 2.4rem;
    }

    .mobile-top-bar {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 999;
        height: 60px;
        background: var(--sidebar-bg);
        color: var(--text-primary);
        padding: 0 1rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-md);
    }

    .mobile-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(11, 15, 25, 0.75) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        z-index: 1000 !important;
    }

    .mobile-sidebar-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-menu-toggle {
        background: var(--nav-hover);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        padding: 0.4rem 0.8rem;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-family: inherit;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        left: -320px !important;
        width: 290px !important;
        height: 100vh !important;
        padding: 1.25rem 1rem !important;
        gap: 1.25rem !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        box-shadow: var(--shadow-lg) !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: var(--sidebar-bg) !important;
    }

    .sidebar.mobile-open {
        left: 0 !important;
    }

    .mobile-sidebar-close-btn {
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        background: var(--nav-hover) !important;
        color: var(--text-primary) !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
    }

    .main-content {
        padding: 1rem !important;
        width: 100% !important;
    }

    #map {
        height: 420px !important;
        width: 100% !important;
        border-radius: 12px;
    }

    .mobile-horizontal-nav-bar {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 0.5rem !important;
        padding: 0.6rem 1rem !important;
        background: var(--sidebar-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        position: sticky !important;
        top: 60px !important;
        z-index: 998 !important;
    }

    .mobile-horizontal-nav-bar::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-nav-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        padding: 0.45rem 0.85rem !important;
        background: var(--nav-hover) !important;
        color: var(--text-secondary) !important;
        border-radius: 20px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border: 1px solid var(--border-color) !important;
        flex: 0 0 auto !important;
    }

    .mobile-nav-pill.active {background: var(--primary) !important;
        color:var(--text-on-fill) !important;
        border-color: var(--primary) !important;
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4) !important;--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

    .content-row, .metrics-grid, .lakehouse-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Leaflet GIS & IMF Maritime Map Dark Overrides
   ========================================================================== */
.imf-custom-marker {
    background: transparent !important;
    border: none !important;
}
.imf-marker-pulse {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.imf-marker-pulse:hover {
    transform: scale(1.3);
    z-index: 1000;
}
.imf-marker-pulse.normal {background: linear-gradient(135deg, #0284C7, #0369A1);
    border: 2.5px solid #38BDF8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.65);--text-on-surface:var(--text-on-inverse);--text-on-surface-soft:var(--text-on-inverse-soft);--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA;}
.imf-marker-pulse.alert {background: linear-gradient(135deg, #DC2626, #991B1B);
    border: 2.5px solid #FCA5A5;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.9);
    animation: imfPulseDanger 1.8s infinite;--text-on-surface:var(--text-on-inverse);--text-on-surface-soft:var(--text-on-inverse-soft);--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA;}
.imf-marker-pulse.high-volume {
    background: linear-gradient(135deg, #059669, #047857);
    border: 2.5px solid #6EE7B7;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
}
@keyframes imfPulseDanger {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75); }
    70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.leaflet-popup-content-wrapper {background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-popup-tip {background: var(--bg-card) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-tooltip {background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.65rem !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.6) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-container {background: var(--bg-card) !important;
    font-family: 'Outfit', sans-serif !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-bar {
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
.leaflet-bar a,
.leaflet-control-zoom a {background: var(--bg-card) !important;
    color: var(--accent-info) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-bar a:hover,
.leaflet-control-zoom a:hover {background: #0284C7 !important;
    color: var(--text-primary) !important;--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}
.leaflet-control-attribution {background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    backdrop-filter: blur(6px) !important;
    border-top-left-radius: 8px !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.6rem !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-control-attribution a {
    color: var(--accent-info) !important;
    text-decoration: none !important;
}
.maritime-map-hud-pill {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

/* ==========================================================================
   LANDING PAGE ENTERPRISE DESIGN SYSTEM & MOBILE RESPONSIVENESS
   ========================================================================== */
.landing-body {background-color:var(--bg-darker);
    color: var(--text-primary);
    overflow-x: hidden;
    width: 100%;
    position: relative;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-nav {
    position: sticky;
    --text-on-surface:var(--text-on-inverse);--text-on-surface-soft:var(--text-on-inverse-soft);--text-primary:var(--text-on-inverse);--text-secondary:var(--text-on-inverse-soft);--text-muted:var(--text-on-inverse-soft);--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA;
    top: 0;
    z-index: 990;
    background: rgba(11, 15, 25, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.85rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.landing-nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.landing-nav-links li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.landing-nav-links li a:hover {
    color: #FFFFFF;
}

.landing-btn-label-mobile {
    display: none;
}

/* Mobile Pill Navigation Bar (< 992px Standard) */
.mobile-landing-pill-nav {
    display: none;
}

@media (max-width: 991px) {
    .landing-nav {
        padding: 0.75rem 1rem;
    }
    .landing-nav-links {
        display: none !important;
    }
    .landing-btn-label-desktop {
        display: none;
    }
    .landing-btn-label-mobile {
        display: inline;
    }
    .mobile-landing-pill-nav {
        display: flex !important;
        position: sticky;
        top: 57px;
        z-index: 980;
        /* This bar stays dark in both themes, so it is an inverse surface and its
           descendants must resolve text against that, not against the page theme.
           Without this the pills inherited the light theme's mid grey and sat at a
           2.56:1 ratio on near black — invisible in daylight on a phone. */
        --text-on-surface: var(--text-on-inverse);
        --text-on-surface-soft: var(--text-on-inverse-soft);
        --text-primary: var(--text-on-inverse);
        --text-secondary: var(--text-on-inverse-soft);
        --text-muted: var(--text-on-inverse-soft);
        background: rgba(13, 19, 34, 0.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(56, 189, 248, 0.22);
        overflow-x: auto;
        white-space: nowrap;
        gap: 0.5rem;
        padding: 0.6rem 0.85rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mobile-landing-pill-nav::-webkit-scrollbar {
        display: none;
    }
    .mobile-nav-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    .mobile-nav-pill:active,
    .mobile-nav-pill:hover {
        background: rgba(var(--primary-rgb), 0.15);
        border-color: var(--primary);
        color: #FFFFFF;
    }
}

/* Hero Section */
.landing-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1.5rem 3.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.landing-hero h1 {
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 1.25rem 0 1rem;
    color: #FFFFFF;
}

.landing-hero p {
    font-size: clamp(0.92rem, 2vw, 1.15rem);
    color: var(--text-secondary);
    max-width: 780px;
    line-height: 1.65;
    margin: 0 auto 2rem;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    width: 100%;
}

.hero-stats-banner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 1100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.hero-stat-card {
    text-align: center;
    padding: 0.5rem;
}

.hero-stat-num {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.hero-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sections */
.landing-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
    position: relative;
    z-index: 1;
}

.section-head-center {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 3rem;
}

.section-head-center .eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.section-head-center h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.section-head-center p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Lakehouse Modules Grid */
.lakehouse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.module-card {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.module-card:hover {border-color: rgba(56, 189, 248, 0.35);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.module-icon-box {
    width: 48px;
    height: 48px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.module-icon-box.amber {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}
.module-icon-box.cyan {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.25);
}
.module-icon-box.green {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.module-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.module-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.module-link {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-info);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.2s ease;
}

.module-link:hover {
    gap: 0.6rem;
    color: var(--accent-info);
}

/* Code Terminal */
.code-terminal {background:var(--surface-inverse);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 14px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);--text-on-surface:#E8EEF4;--text-on-surface-soft:#AFBDCB;--text-primary:#E8EEF4;--text-secondary:#AFBDCB;--text-muted:#AFBDCB;--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA}

.terminal-header {background:var(--surface-inverse);
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);--text-on-surface:#E8EEF4;--text-on-surface-soft:#AFBDCB;--text-primary:#E8EEF4;--text-secondary:#AFBDCB;--text-muted:#AFBDCB;--accent-info:#6FC4E0;--accent-success:#4CBE8E;--accent-warning:#DDA850;--accent-danger:#EF7C84;--accent-violet:#B4A0EA}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.terminal-dot.red { background: #EF4444; }
.terminal-dot.yellow { background: #F59E0B; }
.terminal-dot.green { background: #10B981; }

.terminal-body {
    padding: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Surface Cards (COP31) */
.surface-card {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

/* Contact Box */
.contact-box {background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: var(--shadow-lg);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.form-control-custom {width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    transition: border-color 0.2s ease;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.form-control-custom:focus {
    border-color: var(--primary);
    outline: none;
}

/* Databricks Button */
.btn-databricks {
    background: var(--primary);
    color: var(--text-on-fill) !important;
    font-weight: 800;
    border: none;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-databricks:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(var(--primary-rgb), 0.5);
}

/* Gradients */
.gradient-text-orange {;color:var(--primary);}
.gradient-text-cyan {;color:var(--accent-info);}

/* ==========================================================================
   MOBILE RESPONSIVE BREAKPOINTS FOR LANDING PAGE
   ========================================================================== */
@media (max-width: 991px) {
    .landing-hero {
        padding: 3rem 1rem 2rem;
    }
    .landing-section {
        padding: 3rem 1rem;
    }
    .hero-stats-banner {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }
    .hero-stats-banner .hero-stat-card:nth-child(4),
    .hero-stats-banner .hero-stat-card:nth-child(5) {
        grid-column: span 1;
    }
    .contact-box {
        padding: 1.75rem 1.25rem;
    }
    .contact-box .content-row {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .contact-box h2 {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 767px) {
    .landing-hero {
        padding: 2.25rem 0.85rem 1.75rem;
    }
    .landing-hero h1 {
        font-size: 1.85rem;
        letter-spacing: -0.3px;
        margin: 1rem 0 0.75rem;
    }
    .landing-hero p {
        font-size: 0.88rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        gap: 0.65rem;
        margin-bottom: 2rem;
    }
    .hero-cta-group .btn {
        width: 100% !important;
        padding: 0.85rem 1rem !important;
        font-size: 0.92rem !important;
        justify-content: center;
        text-align: center;
    }
    .hero-stats-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
        padding: 0.85rem 0.65rem;
    }
    .hero-stats-banner .hero-stat-card:nth-child(5) {
        grid-column: span 2;
    }
    .hero-stat-num {
        font-size: 1.45rem;
    }
    .hero-stat-label {
        font-size: 0.68rem;
    }
    .lakehouse-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .module-card {
        padding: 1.25rem 1rem;
    }
    .section-head-center {
        margin-bottom: 2rem;
    }
    .section-head-center h2 {
        font-size: 1.45rem;
    }
    .section-head-center p {
        font-size: 0.85rem;
    }
    .partner-logo-badge {
        padding: 0.85rem 1rem;
        font-size: 0.82rem;
    }
    .terminal-body {
        font-size: 0.72rem;
        padding: 0.85rem;
    }
    .contact-box {
        padding: 1.25rem 1rem;
        border-radius: 14px;
    }
    .contact-box h2 {
        font-size: 1.4rem !important;
    }
    footer {
        padding: 2rem 1rem 1.5rem !important;
    }
    footer > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.75rem !important;
    }
    footer > div:first-child > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }
}

/* ========================================================================== 
   LIGHT-FIRST APPEARANCE SWITCHER & MARITIME CHART SURFACES
   ========================================================================== */
.theme-switcher {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-tint);
}

.theme-switcher-label {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.theme-switcher-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.theme-switcher button {appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-secondary);
    padding: 0.43rem 0.55rem;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.theme-switcher button:hover {
    border-color: var(--secondary);
    color: var(--accent-info);
}

.theme-switcher button.active {border-color: var(--secondary);
    background: var(--secondary);
    color:var(--text-on-fill);
    box-shadow: 0 4px 12px var(--secondary-glow);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

.landing-theme-toggle {
    appearance: none;
    min-width: 54px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    /* Sits on the dark landing nav in both themes. */
    color: var(--text-on-inverse);
    padding: 0.35rem 0.55rem;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.landing-theme-toggle:hover {
    border-color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    color: #FFFFFF;
}

.landing-body {background-color: var(--bg-darker) !important;
    background-image:
        radial-gradient(circle at 12% 12%, var(--body-radial-primary) 0, transparent 34%),
        radial-gradient(circle at 88% 28%, var(--body-radial-secondary) 0, transparent 36%),
        linear-gradient(to right, var(--body-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--body-grid) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px !important;
    color: var(--text-primary) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-body .landing-section-muted {background: var(--bg-dark) !important;
    border-color: var(--border-color) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-body .hero-stats-banner {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-body .hero-stat-card {
    background: var(--panel-tint) !important;
    border: 1px solid var(--border-color) !important;
}

.landing-body .hero-stat-label,
.landing-body .landing-hero p,
.landing-body .section-head-center p {
    color: var(--text-secondary) !important;
}

.landing-body .partner-logo-badge {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-sm);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-body .partner-logo-badge [style*="color: #FFF"],
.landing-body .surface-card h3,
.landing-body .contact-box h2 {
    color: var(--text-primary) !important;
}

.landing-body .partner-logo-badge [style*="color: var(--text-secondary)"],
.landing-body .surface-card p,
.landing-body .contact-box p {
    color: var(--text-secondary) !important;
}

.landing-body .contact-box {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.landing-body .contact-box [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}

html:not([data-theme="dark"]) .landing-hero h1 {;color:var(--accent-info);}

html[data-theme="dark"] .landing-body .hero-stat-card {
    background: rgba(255, 255, 255, 0.025) !important;
}

body,
.sidebar,
.card,
.section-card,
.surface-card,
.module-card,
.table-container {
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.surface-card h4,
.clarksons-chart-grid .surface-card h4 {
    color: var(--text-primary) !important;
}

.maritime-metric-grid > div,
.lseg-history-card,
.lseg-table-card,
.lseg-chart-grid > div {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.maritime-metric-grid strong,
.lseg-history-card h4,
.lseg-table-card h3,
.lseg-chart-grid h4 {
    color: var(--text-primary) !important;
}

.maritime-metric-grid [style*="color: var(--text-secondary)"],
.lseg-history-card [style*="color: var(--text-secondary)"],
.lseg-table-card [style*="color: var(--text-secondary)"],
.lseg-chart-grid [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}

.lseg-table-card > div:last-child {
    border-color: var(--border-color) !important;
}

.clarksons-panel > .section-head {
    border-color: var(--border-color) !important;
}

.imf-panel > .section-head {
    border-color: var(--border-color) !important;
}

.imf-kpi-grid > div,
.imf-panel .imf-surface {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.imf-panel #imf-map-controls {background: var(--bg-dark) !important;
    border-color: var(--border-color) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.imf-panel #imf-maritime-map {background: var(--bg-dark) !important;
    border-color: rgba(0, 108, 151, 0.24) !important;
    box-shadow: var(--shadow-md) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.imf-panel [style*="color: #FFFFFF"],
.imf-panel [style*="color:#FFFFFF"],
.imf-panel [style*="color: #FFF"],
.imf-panel [style*="color:#FFF"],
.imf-panel [style*="color: var(--text-secondary)"],
.imf-panel [style*="color: var(--text-secondary)"] {
    color: var(--text-primary) !important;
}

.imf-panel [style*="color: var(--text-secondary)"],
.imf-panel [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}

.imf-panel .imf-surface h3,
.imf-panel .imf-surface h4,
.imf-panel #imf-map-controls label {
    color: var(--text-primary) !important;
}

.imf-panel .imf-alerts-card > h4 {
    color: var(--accent-danger) !important;
}

.imf-panel .source-table th {background: var(--table-head-bg) !important;
    color: var(--text-secondary) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.imf-panel .source-table td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.inverse-panel,
.inverse-panel h3,
.inverse-panel h4 {
    color: #FFFFFF !important;
}

/* Dashboard light surfaces and intentional inverse accents */
.dashboard-body .dashboard-theme-surface {background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}

.dashboard-body .dashboard-sub-card {
    background: var(--panel-tint) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
    padding: 1rem;
    color: var(--text-primary);
}

.dashboard-body .dashboard-section-title,
.dashboard-body .dashboard-theme-surface h2,
.dashboard-body .dashboard-theme-surface h3,
.dashboard-body .dashboard-theme-surface h4 {
    color: var(--text-primary) !important;
}

.dashboard-body .dashboard-theme-surface p,
.dashboard-body .dashboard-theme-surface [style*="color: var(--text-secondary)"],
.dashboard-body .dashboard-theme-surface [style*="color: var(--text-secondary)"] {
    color: var(--text-secondary) !important;
}

.dashboard-body .surface-dark,
.dashboard-body .surface-dark h1,
.dashboard-body .surface-dark h2,
.dashboard-body .surface-dark h3,
.dashboard-body .surface-dark h4 {
    color: #FFFFFF !important;
}

.dashboard-body .surface-dark p {
    color: var(--text-secondary) !important;
}

.dashboard-body .surface-dark .eyebrow {
    color: var(--accent-info) !important;
}

html:not([data-theme="dark"]) .sidebar .nav-item a span[style*="color: #FFF"],
html:not([data-theme="dark"]) .mobile-top-bar > div[style*="color: #FFF"] {
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .card:hover {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 108, 151, 0.08);
}

@media (max-width: 575px) {
    .lseg-chart-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Accessible shell + map surfaces: no change to plotted series/data colours. */
.nav-item.active a{color:var(--text-on-surface)!important}
.nav-item.active a .gicon{color:var(--primary)}
:is(.btn-primary,.sr-primary,.sm-primary){background:var(--action-bg)!important;border-color:var(--action-bg)!important;color:var(--action-text)!important;--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}
.leaflet-container{background:var(--map-water)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-tooltip{background:var(--bg-card)!important;color:var(--text-on-surface)!important;border-color:var(--border-color)!important;box-shadow:var(--shadow-md)!important}
.leaflet-popup-content{color:var(--text-primary)}
.leaflet-popup-close-button{color:var(--text-secondary)!important}
.leaflet-control-attribution{background:var(--bg-card)!important;color:var(--text-secondary)!important;font-size:10px!important;line-height:1.5;--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.leaflet-control-attribution a{color: var(--accent-info)!important;text-decoration:underline!important}
.leaflet-bar a,.leaflet-control-zoom a{background:var(--bg-card)!important;color:var(--text-on-surface)!important;border-color:var(--border-color)!important}
.leaflet-bar a:hover,.leaflet-control-zoom a:hover{background:var(--action-bg)!important;color:var(--action-text)!important;--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}
.osm-dark-view .godmp-osm-dark{filter:brightness(.72) contrast(1.13) saturate(.7)}
.map-page :is(.map-sub-controls,#maritime-map-hud,.point-reader,.station-mini-card,.catalog-note){background:var(--bg-card)!important;color:var(--text-primary);border-color:var(--border-color)!important;box-shadow:var(--shadow-sm);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.map-page .layer-btn{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-color);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.map-page .layer-btn.active{background:var(--panel-tint);color: var(--accent-info);border-color:var(--secondary)}
.map-page .layer-kind{color:var(--text-secondary);border-color:var(--border-color)}
.map-page :is(select,input){background:var(--input-bg)!important;color:var(--text-on-surface)!important;border-color:var(--border-color)!important;max-width:100%}
.map-page .source-table th{background:var(--table-head-bg);color:var(--text-primary);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
.map-page .source-table td{color:var(--text-primary);border-color:var(--border-color)}
.map-page :is(.science-badge,.source-link,.layer-group-title){color: var(--accent-info)}
.map-zoom{min-width:38px;min-height:38px;font-size:20px!important;font-weight:800;padding:.2rem .6rem!important}
.map-tile-status{font-size:.7rem;line-height:1.6;color:var(--text-secondary);margin:.5rem 0}
.map-tile-status[data-error="true"]{border-left:3px solid var(--accent);padding:.55rem .75rem;background:var(--bg-card);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}
@media(min-width:992px){.map-page #map{height:560px!important;min-height:560px}}
@media(max-width:991px){.map-page #map{height:430px!important;min-height:430px}.map-page .main-content{min-width:0;max-width:100%}.map-page .map-sub-controls>div{max-width:100%}.mobile-horizontal-nav-bar{display:flex;overflow-x:auto;white-space:nowrap;gap:.5rem;padding:.5rem;-webkit-overflow-scrolling:touch}.map-page .layer-grid{min-width:0}.mobile-horizontal-nav-bar .nav-pill.active{color:var(--text-on-surface)!important}}
.theme-switcher button.active{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-text);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}
:root{--violet:#6240A0}html[data-theme="dark"]{--violet:#C4B5FD}
.map-page .year-frame{background:var(--bg-card);color:var(--text-secondary);--text-on-surface:var(--text-primary-base);--text-on-surface-soft:var(--text-secondary-base);--text-primary:var(--text-primary-base);--text-secondary:var(--text-secondary-base);--text-muted:var(--text-muted-base);--accent-info:var(--accent-info-base);--accent-success:var(--accent-success-base);--accent-warning:var(--accent-warning-base);--accent-danger:var(--accent-danger-base);--accent-violet:var(--accent-violet-base);}.map-page .year-frame:hover{color: var(--accent-info)}.map-page .year-frame.active{background:var(--action-bg);color:var(--action-text);border-color:var(--action-bg);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}.mobile-top-bar .mobile-persona-badge{background:var(--panel-tint)!important;color:var(--text-on-surface)!important;border:1px solid var(--border-color)}
.lang-switch button.active{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--text-on-fill);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}.lang-switch button:hover{color:var(--text-primary)}html[data-theme="dark"] .lang-switch button.active{background:var(--primary);border-color:var(--primary);color:var(--text-on-fill);--text-on-surface:var(--text-on-fill);--text-on-surface-soft:var(--text-on-fill-soft);}

/* Form controls always follow the theme: they are input surfaces, never chrome,
   so they reset any inverse context inherited from a dark panel. */
input, select, textarea,
.form-control, .form-control-custom {
    --text-on-surface: var(--text-primary-base);
    --text-on-surface-soft: var(--text-secondary-base);
    --text-primary: var(--text-primary-base);
    --text-secondary: var(--text-secondary-base);
    --text-muted: var(--text-muted-base);
    --accent-info: var(--accent-info-base);
    --accent-success: var(--accent-success-base);
    --accent-warning: var(--accent-warning-base);
    --accent-danger: var(--accent-danger-base);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
    background-color: var(--input-bg);
    color: var(--text-primary-base);
}

/* ==========================================================================
   Brand lockup
   The artwork is deep navy with teal accents on a transparent ground. Measured
   against the dark sidebar its median pixel sits at 1.20:1 — over half the mark
   simply disappears there. So the logo carries its own light plate in both
   themes rather than being recoloured: recolouring a mark with this much fine
   detail (the lighthouse tiers, the dotted meridians) muddies it.
   ========================================================================== */
.logo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F4F8FB;
    border: 1px solid rgba(10, 78, 112, 0.14);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    box-shadow: 0 1px 2px rgba(8, 19, 27, 0.06);
}
.logo-plate-sm {
    padding: 0.3rem;
    border-radius: 10px;
}
.logo-lockup {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
}
.logo-mark {
    display: block;
    height: auto;
}

/* ------------------------------------------------------------- platform tour
   One 24-minute recording of the product, with a chapter list beside it.

   The player is a poster image until someone presses play; the <video> is
   created by platform_tour.php's script on demand. The frame therefore has to
   hold its 16:9 shape from an <img> alone, or the page reflows when the video
   replaces it. Everything here is written against that: one positioned box,
   and three things that take turns filling it. */
.tour-section {
    --tour-ink: #06161f;
}

.tour-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr);
    gap: 1.8rem;
    align-items: start;
    max-width: 1220px;
    margin: 2.4rem auto 0;
}

.tour-main { min-width: 0; }

.tour-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    background: var(--tour-ink);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 54px rgba(6, 22, 31, .22);
}

.tour-poster,
.tour-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: var(--tour-ink);
}

.tour-video { object-fit: contain; z-index: 2; }

/* The play control covers the whole poster: the target is the picture, not a
   50-pixel triangle somewhere inside it. */
.tour-play {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    border: 0;
    cursor: pointer;
    color: #fff;
    font: inherit;
    text-align: left;
    background: linear-gradient(180deg, rgba(4, 20, 31, .18) 0%, rgba(4, 20, 31, .62) 100%);
    transition: background .25s ease;
}

.tour-play:hover,
.tour-play:focus-visible { background: linear-gradient(180deg, rgba(4, 20, 31, .28) 0%, rgba(4, 20, 31, .72) 100%); }

.tour-play-icon {
    flex: none;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    padding-left: 5px;
    background: var(--primary, #0A4E70);
    box-shadow: 0 10px 30px rgba(6, 22, 31, .45);
}

.tour-play-text strong { display: block; font-size: 1.12rem; font-weight: 700; }
.tour-play-text small { display: block; font-size: .84rem; opacity: .85; margin-top: .15rem; }

.tour-frame.is-playing .tour-play,
.tour-frame.is-playing .tour-poster { display: none; }

.tour-note {
    margin: .95rem 0 0;
    font-size: .82rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.tour-note a { color: var(--accent-info); text-decoration: underline; }

/* ---- chapters ---- */
.tour-chapters {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 16px);
    padding: 1.15rem 1.15rem 1.3rem;
    max-height: 560px;
    overflow-y: auto;
    --text-primary: var(--text-primary-base);
    --text-secondary: var(--text-secondary-base);
    --text-muted: var(--text-muted-base);
}

.tour-chapters h3 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--text-primary);
}

.tour-chapters-hint {
    margin: .25rem 0 .9rem;
    font-size: .79rem;
    color: var(--text-muted);
}

.tour-group { border-top: 1px solid var(--border-color); }
.tour-group:first-of-type { border-top: 0; }

.tour-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem .1rem;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-primary);
}

.tour-group summary b {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-subtle);
    border-radius: 999px;
    padding: .1rem .5rem;
}

.tour-list {
    list-style: none;
    margin: 0 0 .55rem;
    padding: 0;
}

.tour-chapter {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: .55rem;
    align-items: baseline;
    padding: .38rem .45rem;
    border-radius: 8px;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.tour-chapter:hover,
.tour-chapter:focus-visible {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

/* The chapter on screen right now. A 63-item list is unusable without it: the
   viewer opens the panel six minutes in and has no idea which row they are on.
   The bar on the left is what carries the meaning; colour alone would not. */
.tour-chapter.is-current {
    background: rgba(var(--primary-rgb), .08);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary, #0A4E70);
}

.tour-chapter.is-current .tour-time { color: var(--primary, #0A4E70); font-weight: 700; }

/* The panel pads its top edge; a sticky head at top:0 would stop below that
   padding and let the scrolling list show through above it. Pull the head up
   into the padding so it covers the panel from its very top edge. */
.tour-chapters-head { position: sticky; top: -1.15rem; z-index: 1; background: var(--bg-card); margin-top: -1.15rem; padding: 1.15rem 0 .35rem; }

.tour-time {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--accent-info);
}

@media (max-width: 991px) {
    .tour-layout { grid-template-columns: 1fr; gap: 1.2rem; }
    .tour-chapters { max-height: 420px; }
}

@media (max-width: 640px) {
    .tour-play { flex-direction: column; gap: .6rem; text-align: center; padding: 1rem; }
    .tour-play-icon { width: 52px; height: 52px; font-size: 1.25rem; }
    .tour-play-text strong { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tour-play, .tour-chapter { transition: none; }
}

/* ------------------------------------------------- hero tour thumbnail
   The first screen does not play anything, but a text link did not read as
   "there is a film here". This is a 640×360 still of the real video — 29 KB,
   against the 118 KB poster the player itself uses — with the length and the
   fact that it is silent stated on the card, so nobody presses play expecting
   a voice. */
.intro-tour-card {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background: #06161f;
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 40px rgba(6, 22, 31, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.intro-tour-card:hover,
.intro-tour-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 52px rgba(6, 22, 31, .28);
}

.intro-tour-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.intro-tour-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 20, 31, .05) 38%, rgba(4, 20, 31, .78) 100%);
}

.intro-tour-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding-left: 4px;
    font-size: 1.25rem;
    color: #fff;
    background: var(--primary, #0A4E70);
    box-shadow: 0 8px 24px rgba(6, 22, 31, .45);
    transition: transform .25s ease;
}

.intro-tour-card:hover .intro-tour-badge { transform: translate(-50%, -60%) scale(1.07); }

.intro-tour-label {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .85rem;
    color: #fff;
}

.intro-tour-label strong { display: block; font-size: 1rem; line-height: 1.3; }
.intro-tour-label small { display: block; font-size: .76rem; opacity: .86; margin-top: .15rem; }

@media (max-width: 991px) {
    .intro-tour-badge { width: 46px; height: 46px; font-size: 1.05rem; }
    .intro-tour-label strong { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-tour-card, .intro-tour-badge { transition: none; }
}

.gomd-map-watermark {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    background: rgba(7, 22, 40, 0.86);
    border: 1px solid rgba(56, 189, 248, 0.42);
    color: #e0f2fe;
    font: 800 10px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.06em;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
.gomd-map-watermark img {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    display: block;
    border-radius: 3px;
}
:is(.leaflet-container, #sstBMap, #lxMap, #sm-map, .sm-map, #map, #wr-map, #imf-maritime-map, .bef-canvas-holder, #labChart .lab-main-scroll, .lab-compare-chart, .lm-plot, .lx-plot, .lx-seasonal-plot, #oe-chart, #ur-chart) {
    position: relative;
}
:is(.leaflet-container, #sstBMap, #lxMap, #sm-map, .sm-map, #map, #wr-map, #imf-maritime-map, .bef-canvas-holder, #labChart .lab-main-scroll, .lab-compare-chart, .lm-plot, .lx-plot, .lx-seasonal-plot, #oe-chart:not(:empty), #ur-chart:not(:empty)):not(:has(.gomd-map-watermark)):not(:has(.gomd-svg-watermark))::after {
    content: 'GOMD';
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 2px 8px 2px 24px;
    border-radius: 6px;
    background: rgba(7, 22, 40, 0.86) url('assets/brand/gomd-icon-64.png') no-repeat 5px center / 15px 15px;
    border: 1px solid rgba(56, 189, 248, 0.42);
    color: #e0f2fe;
    font: 800 10px/18px system-ui, -apple-system, sans-serif;
    letter-spacing: 0.06em;
    opacity: 0.9;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

/* Fallback workspace skip-link & sidebar brand rules (protects pages if institutional.css is not yet loaded) */
.workspace-skip {
    position: fixed;
    left: 16px;
    top: -100px;
    padding: 12px 18px;
    z-index: 20000;
    background: var(--action-bg, #08777d);
    color: var(--action-text, #ffffff);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}
.workspace-skip:focus {
    top: 12px;
}
.workspace-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #f0faf7;
    min-width: 0;
}
.workspace-brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 3px;
}
.workspace-brand strong {
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: 0.045em;
    display: block;
    color: #f0faf7;
}
.workspace-brand small {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: #a3c4c6;
    text-transform: uppercase;
    margin-top: 3px;
}