:root {
    --bg-void: #02060d;
    --bg-deep: #06101d;
    --bg-mid: #0b1828;
    --panel: rgba(8, 20, 36, 0.82);
    --panel-strong: rgba(10, 25, 44, 0.9);
    --panel-soft: rgba(8, 16, 29, 0.72);
    --line: rgba(106, 223, 255, 0.16);
    --line-strong: rgba(106, 223, 255, 0.42);
    --line-hot: rgba(139, 236, 255, 0.75);
    --text: #edf9ff;
    --text-soft: #c6def4;
    --muted: #86a0b9;
    --cyan: #65d7ff;
    --cyan-bright: #9ff2ff;
    --cyan-deep: #0a7ca9;
    --blue: #4c86ff;
    --violet: #8964ff;
    --magenta: #ff4fcb;
    --gold: #f6c76d;
    --green: #6dffc6;
    --pink: #ff76ba;
    --danger: #ff7d96;
    --shadow-panel: 0 28px 80px rgba(0, 0, 0, 0.52);
    --shadow-glow: 0 0 0 1px rgba(101, 215, 255, 0.07), 0 0 40px rgba(64, 192, 255, 0.12);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 13px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--text);
    background:
        radial-gradient(circle at 14% 18%, rgba(101, 215, 255, 0.18), transparent 22%),
        radial-gradient(circle at 85% 14%, rgba(76, 134, 255, 0.16), transparent 20%),
        radial-gradient(circle at 50% 120%, rgba(101, 215, 255, 0.1), transparent 32%),
        linear-gradient(180deg, #040913 0%, #02060d 100%);
    font-family: "Segoe UI Variable", "Bahnschrift", "Segoe UI", sans-serif;
}

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 92%);
    opacity: 0.18;
    animation: grid-drift 24s linear infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(155, 243, 255, 0.055) 48%, transparent 100%);
    background-size: 100% 7px;
    opacity: 0.12;
    animation: scan-pulse 7s linear infinite;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.hidden {
    display: none !important;
}

[hidden] {
    display: none !important;
}

.ambient-grid,
.ambient-orb,
.ambient-vignette {
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

.ambient-grid {
    inset: 0;
    background:
        linear-gradient(120deg, rgba(101, 215, 255, 0.05), transparent 38%),
        linear-gradient(300deg, rgba(76, 134, 255, 0.05), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(137, 100, 255, 0.08), transparent 34%);
}

.ambient-orb {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.24;
    animation: orb-pulse 10s ease-in-out infinite;
}

.orb-one {
    top: -80px;
    right: -120px;
    background: rgba(101, 215, 255, 0.2);
}

.orb-two {
    bottom: -160px;
    left: -90px;
    background: rgba(76, 134, 255, 0.18);
    animation-delay: -4s;
}

.ambient-vignette {
    inset: 0;
    background: radial-gradient(circle, transparent 42%, rgba(0, 0, 0, 0.34) 100%);
}

.app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    min-height: 100vh;
    padding: 18px;
}

.sidebar,
.topbar,
.hero-panel,
.panel,
.stat-card,
.telemetry-item,
.system-node {
    border: 1px solid var(--line);
    box-shadow: var(--shadow-panel), var(--shadow-glow);
}

.sidebar {
    position: sticky;
    top: 18px;
    align-self: start;
    min-height: calc(100vh - 36px);
    padding: 24px 20px 20px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 18% 14%, rgba(101, 215, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(8, 18, 33, 0.95) 0%, rgba(5, 11, 21, 0.94) 100%);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.sidebar-backdrop {
    display: none;
}

.sidebar::before,
.sidebar::after,
.hero-panel::before,
.panel::before,
.stat-card::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.sidebar::before {
    inset: 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(101, 215, 255, 0.08), transparent 28%),
        linear-gradient(145deg, rgba(101, 215, 255, 0.08), transparent 36%),
        linear-gradient(325deg, rgba(76, 134, 255, 0.1), transparent 42%),
        radial-gradient(circle at 80% 86%, rgba(255, 122, 26, 0.035), transparent 18%);
}

.sidebar::after {
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 242, 255, 0.78), rgba(255, 169, 92, 0.62), transparent);
    box-shadow: 0 0 16px rgba(101, 215, 255, 0.34);
}

.brand-block {
    position: relative;
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px solid rgba(255, 122, 26, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 122, 26, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(11, 22, 38, 0.94), rgba(6, 12, 22, 0.96));
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.brand-logo {
    display: block;
    width: min(100%, 210px);
    height: auto;
    filter:
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22))
        drop-shadow(0 0 18px rgba(255, 122, 26, 0.12));
}

.brand-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.brand-mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 26, 0.22);
    background: rgba(13, 27, 45, 0.76);
    color: #ffe0c2;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand-mini-chip-muted {
    border-color: rgba(101, 215, 255, 0.18);
    color: var(--text-soft);
}

.brand-mini-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.brand-copy {
    display: grid;
    gap: 8px;
}

.brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(159, 242, 255, 0.26);
    border-radius: 22px;
    color: #03121e;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    background:
        linear-gradient(135deg, var(--cyan-bright) 0%, var(--cyan) 38%, #2997c8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 0 0 1px rgba(101, 215, 255, 0.15),
        0 0 34px rgba(101, 215, 255, 0.34);
}

.brand-copy h2,
.topbar h1,
.hero-panel h2,
.panel h3,
.placeholder-box h4 {
    margin: 0;
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.brand-copy h2 {
    font-size: 1.22rem;
    color: #fff5ec;
}

.brand-copy p,
.sidebar-footer p,
.sidebar-footer span,
.muted,
.cell-note,
.list-row p,
.telemetry-item p,
.stat-card p,
.readout-card span {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--cyan);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.sidebar-nav {
    display: grid;
    gap: 10px;
}

.sidebar-nav a {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 15px 16px 15px 18px;
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--text-soft);
    background: linear-gradient(180deg, rgba(5, 12, 22, 0.32), rgba(5, 12, 22, 0));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    overflow: hidden;
}

.sidebar-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 122, 26, 0), rgba(255, 146, 72, 0.96), rgba(255, 122, 26, 0));
    opacity: 0;
    transition: opacity 0.18s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    transform: translateX(3px);
    border-color: rgba(255, 122, 26, 0.26);
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.14), rgba(255, 122, 26, 0.07) 20%, transparent 46%),
        linear-gradient(180deg, rgba(10, 24, 43, 0.9), rgba(7, 16, 29, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(101, 215, 255, 0.08),
        0 0 18px rgba(17, 151, 201, 0.14),
        0 0 22px rgba(255, 122, 26, 0.1);
}

.sidebar-nav a:hover::before,
.sidebar-nav a.active::before {
    opacity: 1;
}

.sidebar-nav a::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(101, 215, 255, 0.7), rgba(76, 134, 255, 0.28), rgba(255, 150, 78, 0.54));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sidebar-nav a:hover::after,
.sidebar-nav a.active::after {
    opacity: 0.85;
}

.nav-title {
    color: var(--text);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-meta {
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-readouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.readout-card {
    position: relative;
    padding: 14px 12px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(7, 16, 28, 0.82), rgba(6, 12, 22, 0.94));
    overflow: hidden;
}

.readout-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--cyan-bright);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
}

.readout-card::after {
    content: "";
    position: absolute;
    inset: -40% auto auto -20%;
    width: 120%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    opacity: 0.45;
    animation: sweep-line 6s linear infinite;
}

.readout-live {
    box-shadow: 0 0 24px rgba(101, 215, 255, 0.14);
}

.readout-sync {
    box-shadow: 0 0 24px rgba(109, 255, 198, 0.12);
}

.sidebar-footer {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 19, 34, 0.86), rgba(6, 12, 22, 0.94));
}

.sidebar-footer p {
    margin-bottom: 6px;
    color: var(--text);
}

.main-panel {
    min-width: 0;
    padding: 4px 0 20px;
}

.topbar {
    position: sticky;
    top: 18px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(8, 19, 35, 0.88), rgba(6, 12, 22, 0.9));
    backdrop-filter: blur(18px);
}

.topbar-left,
.topbar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-brand-icon {
    width: 38px;
    height: 38px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 122, 26, 0.22);
    background:
        linear-gradient(180deg, rgba(47, 24, 10, 0.94), rgba(12, 18, 30, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 18px rgba(255, 122, 26, 0.12);
    object-fit: contain;
    flex: 0 0 auto;
}

.topbar-title-copy {
    min-width: 0;
}

.topbar h1 {
    font-size: clamp(1.45rem, 1.9vw, 1.9rem);
    line-height: 1.08;
}

.console-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(101, 215, 255, 0.22);
    border-radius: 999px;
    background: rgba(8, 20, 36, 0.72);
    color: var(--text-soft);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.console-chip.live {
    color: #ffe1c3;
    border-color: rgba(255, 122, 26, 0.26);
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.12);
    animation: chip-pulse 2.8s ease-in-out infinite;
}

.console-chip.armed {
    color: #ffe6ba;
    border-color: rgba(246, 199, 109, 0.28);
    box-shadow: 0 0 14px rgba(246, 199, 109, 0.1);
}

.console-chip.sync {
    color: #d9f4ff;
    border-color: rgba(101, 215, 255, 0.2);
    box-shadow: 0 0 14px rgba(101, 215, 255, 0.09);
}

.content {
    display: grid;
    gap: 20px;
}

.hero-panel,
.panel,
.stat-card,
.telemetry-item,
.system-node {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(101, 215, 255, 0.06), transparent 28%),
        linear-gradient(180deg, var(--panel-strong) 0%, rgba(6, 14, 26, 0.96) 100%);
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: 16px;
    padding: 22px;
}

.hero-panel::before {
    top: 0;
    left: -20%;
    width: 140%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 242, 255, 0.95), transparent);
    box-shadow: 0 0 24px rgba(159, 242, 255, 0.72);
    animation: sweep-line 7s linear infinite;
}

.hero-panel::after,
.panel::after,
.stat-card::after,
.system-node::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(101, 215, 255, 0.65), rgba(137, 100, 255, 0.24), rgba(255, 79, 203, 0.65));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.44;
    pointer-events: none;
}

.hero-copy {
    display: grid;
    gap: 12px;
    align-content: start;
}

.hero-panel h2 {
    max-width: none;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.12;
}

.hero-copy .muted {
    max-width: 620px;
    color: var(--text-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}

.hero-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(13, 33, 56, 0.82), rgba(8, 18, 34, 0.82));
    color: var(--cyan-bright);
    font-size: 0.76rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.muted-pill {
    color: var(--gold);
    border-color: rgba(246, 199, 109, 0.34);
}

.hero-telemetry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.telemetry-item {
    padding: 16px 16px 15px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(10, 25, 44, 0.88), rgba(6, 13, 24, 0.94));
}

.telemetry-item span,
.stat-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.telemetry-item strong,
.stat-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.7rem;
    line-height: 1;
}

.telemetry-item strong {
    color: var(--cyan-bright);
}

.hero-topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.hero-topline-stack {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.hero-clock-panel {
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 250px;
    padding: 14px 16px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(101, 215, 255, 0.12), rgba(137, 100, 255, 0.08) 42%, rgba(255, 79, 203, 0.08) 100%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.92), rgba(4, 9, 17, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 24px rgba(101, 215, 255, 0.14),
        0 0 36px rgba(137, 100, 255, 0.12);
    overflow: hidden;
}

.hero-clock-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(101, 215, 255, 0.72), rgba(137, 100, 255, 0.34), rgba(255, 79, 203, 0.72));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.7;
    pointer-events: none;
}

.hero-clock-panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 160%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.94), transparent);
    box-shadow: 0 0 20px rgba(159, 242, 255, 0.7);
    animation: sweep-line 6s linear infinite;
}

.hero-clock-label,
.hero-clock-meta {
    position: relative;
    z-index: 1;
}

.hero-clock-label {
    color: var(--cyan-bright);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-clock-time,
.hero-clock-date {
    position: relative;
    z-index: 1;
}

.hero-clock-time {
    color: #f7fdff;
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    letter-spacing: 0.14em;
    text-shadow:
        0 0 10px rgba(101, 215, 255, 0.3),
        0 0 18px rgba(137, 100, 255, 0.18);
}

.hero-clock-date {
    color: var(--text-soft);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
}

.hero-clock-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-clock-dot {
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px rgba(109, 255, 198, 0.7);
    animation: chip-pulse 2.2s ease-in-out infinite;
}

.hero-pill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.micro-card {
    position: relative;
    padding: 14px 14px 12px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), rgba(137, 100, 255, 0.05) 34%, transparent 70%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.9), rgba(5, 10, 20, 0.96));
}

.micro-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.micro-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan-bright);
    font-size: 1.4rem;
}

.micro-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.telemetry-live {
    box-shadow: inset 0 0 0 1px rgba(101, 215, 255, 0.08), 0 0 28px rgba(101, 215, 255, 0.12);
}

.telemetry-violet {
    box-shadow: inset 0 0 0 1px rgba(137, 100, 255, 0.08), 0 0 28px rgba(137, 100, 255, 0.14);
}

.telemetry-cyan {
    box-shadow: inset 0 0 0 1px rgba(76, 134, 255, 0.08), 0 0 28px rgba(76, 134, 255, 0.14);
}

.telemetry-gold {
    box-shadow: inset 0 0 0 1px rgba(246, 199, 109, 0.08), 0 0 28px rgba(246, 199, 109, 0.12);
}

.telemetry-green {
    box-shadow: inset 0 0 0 1px rgba(112, 255, 188, 0.1), 0 0 28px rgba(112, 255, 188, 0.12);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.system-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.system-node {
    padding: 18px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(9, 20, 36, 0.88), rgba(5, 10, 20, 0.95));
}

.system-node span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.system-node strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
}

.node-live strong {
    color: var(--green);
}

.node-cyan strong {
    color: var(--cyan-bright);
}

.node-violet strong {
    color: #bcaaff;
}

.node-gold strong {
    color: var(--gold);
}

.stat-card {
    padding: 22px;
    background:
        linear-gradient(130deg, rgba(101, 215, 255, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(11, 26, 46, 0.92), rgba(5, 11, 21, 0.96));
}

.stat-card::before {
    inset: auto -34px -42px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 68%);
    filter: blur(10px);
}

.stat-card::after {
    animation: border-glow 5s linear infinite;
}

.accent-cyan strong {
    color: var(--cyan);
}

.accent-pink strong {
    color: var(--pink);
}

.accent-gold strong {
    color: var(--gold);
}

.accent-green strong {
    color: var(--green);
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.86fr);
    gap: 18px;
    align-items: start;
}

.stack-column {
    display: grid;
    gap: 18px;
}

.panel {
    padding: 22px;
}

.panel::before {
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159, 242, 255, 0.78), transparent);
    opacity: 0.55;
}

.narrow-panel {
    max-width: 980px;
}

.panel-heading,
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-heading h3 {
    font-size: 1.02rem;
}

.panel-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.22);
    background: rgba(7, 16, 29, 0.88);
    color: var(--text-soft);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.live-badge {
    color: var(--cyan-bright);
    box-shadow: 0 0 20px rgba(101, 215, 255, 0.14);
}

.armed-badge {
    color: #ffdca8;
    border-color: rgba(246, 199, 109, 0.28);
    box-shadow: 0 0 20px rgba(246, 199, 109, 0.12);
}

.list-table {
    display: grid;
    gap: 12px;
}

.list-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(8, 18, 32, 0.76), rgba(5, 10, 19, 0.9));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.list-row:hover {
    transform: translateY(-2px);
    border-color: rgba(101, 215, 255, 0.3);
    box-shadow: 0 0 24px rgba(12, 145, 201, 0.12);
}

.list-row strong,
td strong {
    color: var(--text);
}

.row-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background: rgba(7, 16, 29, 0.84);
    color: var(--cyan-bright);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.toolbar {
    flex-wrap: wrap;
}

.search-form {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.button,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.button.primary {
    background:
        linear-gradient(135deg, #ccfbff 0%, #61ddff 28%, #4d7dff 70%, #6d2cff 100%);
    color: #04101a;
    font-weight: 800;
    box-shadow:
        0 12px 24px rgba(9, 138, 186, 0.22),
        0 0 22px rgba(109, 44, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.button.secondary,
.button.ghost {
    border-color: rgba(101, 215, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.9), rgba(5, 10, 19, 0.92));
    color: var(--text);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(13, 150, 204, 0.18), 0 0 34px rgba(137, 100, 255, 0.18);
}

.text-link {
    color: var(--cyan-bright);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
}

.text-link:hover {
    color: #ffffff;
}

.danger-link {
    color: #ff9ab8;
}

.danger-link:hover {
    color: #ffd7e3;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid label {
    display: grid;
    gap: 9px;
    color: var(--muted);
}

.form-grid label span {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.full-width {
    grid-column: 1 / -1;
}

input,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(5, 12, 21, 0.95), rgba(8, 17, 30, 0.86));
    color: var(--text);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #c7d3de;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #edf3f7);
    color: #000000;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

select option {
    background: #ffffff;
    color: #000000;
    font-weight: 800;
}

input::placeholder,
textarea::placeholder {
    color: #6f8ba7;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(101, 215, 255, 0.52);
    box-shadow:
        0 0 0 3px rgba(101, 215, 255, 0.1),
        0 0 26px rgba(10, 142, 196, 0.12);
}

textarea {
    resize: vertical;
}

.file-field input {
    padding: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.panel-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.library-inline-note,
.library-inline-form-shell {
    margin-top: 18px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(9, 18, 31, 0.82), rgba(6, 12, 22, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 28px rgba(0, 0, 0, 0.16);
}

.library-inline-note {
    padding: 16px 18px;
}

.library-inline-note p {
    margin: 0;
}

.library-inline-form-shell {
    padding: 18px;
}

.library-inline-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.library-inline-form-head h4 {
    margin: 4px 0 0;
    font-size: 1rem;
}

.library-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.workflow-column {
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 22px;
}

.workflow-column-head,
.workflow-subhead,
.library-focus-head,
.library-entity-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.workflow-column-head h3,
.workflow-subhead h4,
.library-focus-head h4,
.library-entity-head h4 {
    margin: 0;
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.workflow-column-head .muted {
    max-width: 32ch;
}

.library-card-list,
.library-subsection {
    display: grid;
    gap: 14px;
}

.library-card-list-compact {
    gap: 12px;
}

.library-focus-card,
.library-entity-card,
.workflow-placeholder {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(101, 215, 255, 0.06), transparent 30%),
        linear-gradient(180deg, rgba(9, 18, 32, 0.82), rgba(5, 11, 20, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 18px 32px rgba(0, 0, 0, 0.18);
}

.library-focus-card {
    border-color: rgba(255, 122, 26, 0.22);
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.12), rgba(255, 122, 26, 0.08) 34%, transparent 72%),
        linear-gradient(180deg, rgba(9, 18, 32, 0.86), rgba(5, 11, 20, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 36px rgba(0, 0, 0, 0.2),
        0 0 24px rgba(255, 122, 26, 0.08);
}

.library-focus-card-compact {
    padding: 16px;
}

.library-entity-card.is-selected {
    border-color: rgba(255, 122, 26, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 36px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(101, 215, 255, 0.1);
}

.library-count-row,
.library-card-actions,
.library-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.library-meta-grid span,
.library-meta-stack span,
.library-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(8, 16, 29, 0.88), rgba(5, 10, 19, 0.92));
    color: var(--text-soft);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.library-meta-grid strong {
    margin-right: 6px;
    color: var(--text);
}

.library-meta-stack {
    display: grid;
    gap: 10px;
}

.library-state-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background: rgba(7, 16, 29, 0.86);
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.library-state-pill.is-selected {
    border-color: rgba(255, 122, 26, 0.24);
    background:
        linear-gradient(180deg, rgba(57, 31, 13, 0.94), rgba(23, 18, 18, 0.94));
    color: #ffe1c6;
}

.library-state-pill.is-primary {
    border-color: rgba(101, 215, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(10, 35, 51, 0.94), rgba(5, 19, 29, 0.94));
    color: var(--cyan-bright);
}

.workflow-placeholder {
    min-height: 260px;
    place-content: center;
}

.workflow-placeholder-inline {
    min-height: 0;
    padding: 16px 18px;
}

.workflow-placeholder h3 {
    margin: 0;
}

.workflow-column .empty-state {
    margin: 0;
}

.customer-library-header,
.customer-tile,
.customer-form-panel,
.customer-overview-card,
.customer-extra-contacts-card,
.site-list-card,
.site-detail-card,
.site-contact-card,
.customer-empty-panel {
    padding: 22px;
}

.customer-library-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.customer-library-header--landing {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 14px 18px;
    align-items: center;
}

.customer-library-header__main,
.customer-tile__head,
.customer-overview-card__head,
.site-detail-card__head,
.drill-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.customer-library-header__main,
.customer-tile__head,
.customer-overview-card__head,
.site-detail-card__head {
    flex-wrap: wrap;
}

.customer-library-header__main {
    display: grid;
    gap: 5px;
    align-content: start;
}

.customer-library-header__main h2,
.customer-tile h3,
.site-card h4,
.compact-contact-card strong,
.site-contact-card h3,
.site-detail-card h3,
.customer-overview-card h3 {
    margin: 0;
}

.customer-library-header__tools {
    display: grid;
    justify-items: end;
    gap: 12px;
}

.customer-library-header--landing .customer-library-header__tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 12px;
}

.customer-library-header--landing .customer-library-header__main .eyebrow {
    margin-bottom: 0;
}

.customer-library-header--landing .customer-library-header__main .muted {
    max-width: 52ch;
}

.customer-library-header--landing .hero-status,
.customer-library-header--landing .toolbar-actions {
    justify-content: flex-end;
}

.customer-library-header--landing .status-pill {
    min-height: 34px;
    padding: 0 12px;
}

.library-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-breadcrumbs a {
    color: var(--cyan-bright);
}

.customer-tile-grid,
.site-card-list,
.compact-contact-list,
.customer-drill-shell,
.site-detail-shell {
    display: grid;
    gap: 18px;
}

.customer-tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.customer-tile-grid--landing {
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    justify-content: start;
    align-items: start;
}

.customer-tile {
    display: grid;
    gap: 16px;
}

.customer-tile--landing {
    gap: 14px;
    align-content: start;
}

.customer-tile__identity {
    display: grid;
    gap: 4px;
}

.customer-tile__subline {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-soft);
}

.customer-tile__meta,
.customer-tile__actions,
.site-card__actions,
.customer-overview-card__actions,
.site-detail-card__actions,
.site-contact-form__actions,
.compact-contact-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.customer-tile__meta span,
.compact-contact-card__meta span,
.site-contact-row__actions .action-link,
.site-card__head .panel-badge {
    font-size: 0.8rem;
}

.customer-tile--landing .panel-badge {
    align-self: start;
}

.customer-tile__meta span,
.compact-contact-card__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(8, 16, 29, 0.88), rgba(5, 10, 19, 0.92));
    color: var(--text-soft);
}

.customer-tile__meta strong {
    margin-right: 6px;
    color: var(--text);
}

.customer-tile--landing .customer-tile__actions {
    margin-top: 2px;
}

.customer-tile--landing .button.primary {
    min-width: 148px;
}

.customer-empty-panel {
    display: grid;
    gap: 10px;
    text-align: center;
    place-items: center;
}

.site-card-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.site-card,
.compact-contact-card,
.site-contact-row {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(101, 215, 255, 0.06), transparent 30%),
        linear-gradient(180deg, rgba(9, 18, 32, 0.82), rgba(5, 11, 20, 0.94));
}

.site-card__head,
.compact-contact-card {
    align-items: start;
}

.compact-contact-card {
    grid-template-columns: minmax(0, 1fr) auto;
}

.site-contact-card__note {
    margin-top: -4px;
}

.site-contact-form,
.site-contact-row-list {
    display: grid;
    gap: 14px;
}

.site-contact-row__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.site-contact-row__fields label {
    display: grid;
    gap: 8px;
}

.site-contact-row__fields label span {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-contact-row__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.data-table {
    overflow-x: auto;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.76), rgba(4, 9, 17, 0.92));
}

table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

th,
td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(101, 215, 255, 0.08);
    text-align: left;
    vertical-align: top;
}

thead th {
    color: var(--cyan-bright);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 40%),
        rgba(6, 14, 24, 0.96);
}

tbody tr {
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

tbody tr:hover {
    background: rgba(12, 24, 43, 0.82);
    box-shadow: inset 4px 0 0 rgba(101, 215, 255, 0.4);
}

.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.inline-form {
    margin: 0;
    display: inline-flex;
}

.inline-form button {
    border: 0;
}

.action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.92), rgba(5, 10, 19, 0.96));
    color: var(--text-soft);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.action-link:hover {
    transform: translateY(-1px);
    border-color: rgba(101, 215, 255, 0.34);
    box-shadow: 0 0 22px rgba(101, 215, 255, 0.16);
    color: #ffffff;
}

.action-primary {
    color: var(--cyan-bright);
}

.action-danger {
    color: #ffbfd0;
    border-color: rgba(255, 125, 150, 0.24);
    background:
        linear-gradient(180deg, rgba(42, 14, 24, 0.88), rgba(24, 9, 15, 0.96));
}

.action-danger:hover {
    border-color: rgba(255, 125, 150, 0.34);
    box-shadow: 0 0 22px rgba(255, 125, 150, 0.14);
}

.table-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.2);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.chip-safe {
    color: #c9f9ff;
    background: rgba(8, 27, 40, 0.88);
}

.chip-alert {
    color: #ffdca8;
    border-color: rgba(246, 199, 109, 0.3);
    background: rgba(37, 24, 8, 0.88);
}

.rams-type-pill {
    white-space: nowrap;
}

.rams-type-pill-site {
    color: #ffd4af;
    border-color: rgba(255, 122, 26, 0.24);
    background:
        linear-gradient(180deg, rgba(43, 20, 10, 0.9), rgba(23, 11, 9, 0.96));
}

.rams-type-pill-workshop {
    color: var(--cyan-bright);
    border-color: rgba(101, 215, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(10, 26, 42, 0.9), rgba(6, 14, 25, 0.96));
}

.cell-note {
    margin-top: 6px;
    max-width: 340px;
}

.empty-state {
    padding: 18px;
    border: 1px dashed rgba(101, 215, 255, 0.26);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(8, 18, 32, 0.72), rgba(5, 11, 20, 0.88));
    color: var(--text-soft);
}

.hazard-library-filters {
    margin-bottom: 0;
}

.hazard-cell-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hazard-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.92), rgba(5, 10, 19, 0.96));
    color: var(--text-soft);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hazard-source-badge-fabora {
    color: #ffd4af;
    border-color: rgba(255, 122, 26, 0.24);
    background:
        linear-gradient(180deg, rgba(43, 20, 10, 0.9), rgba(23, 11, 9, 0.96));
}

.hazard-source-badge-company {
    color: var(--cyan-bright);
    border-color: rgba(101, 215, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(10, 26, 42, 0.9), rgba(6, 14, 25, 0.96));
}

.hazard-source-badge-copy {
    color: #ffe2b8;
    border-color: rgba(246, 199, 109, 0.3);
    background:
        linear-gradient(180deg, rgba(41, 28, 11, 0.9), rgba(22, 15, 8, 0.96));
}

.hazard-filter-empty {
    margin-top: 14px;
}

.hazard-library-hero {
    grid-template-columns: minmax(0, 0.98fr) minmax(420px, 1.02fr);
    gap: 12px;
    padding: 18px;
}

.hazard-library-hero__copy {
    gap: 10px;
}

.hazard-library-hero__status {
    gap: 8px;
}

.hazard-status-pill {
    position: relative;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.71rem;
}

.hazard-status-pill--master,
.panel-badge-fabora,
.action-copy {
    color: #ffd6b2;
    border-color: rgba(255, 122, 26, 0.28);
    background:
        linear-gradient(180deg, rgba(49, 22, 10, 0.92), rgba(24, 11, 8, 0.97));
    box-shadow:
        inset 0 0 0 1px rgba(255, 160, 94, 0.06),
        0 0 20px rgba(255, 122, 26, 0.12);
}

.hazard-status-pill--company,
.hazard-status-pill--active,
.panel-badge-company,
.action-edit-company,
.action-toggle-company.is-active,
.hazard-source-badge-company,
.hazard-status-badge--active {
    color: #95ffd1;
    border-color: rgba(112, 255, 188, 0.24);
    background:
        linear-gradient(180deg, rgba(8, 34, 26, 0.92), rgba(6, 18, 16, 0.97));
    box-shadow:
        inset 0 0 0 1px rgba(112, 255, 188, 0.06),
        0 0 20px rgba(112, 255, 188, 0.1);
}

.hazard-status-pill--inactive,
.hazard-status-badge--inactive {
    color: #d7e4ef;
    border-color: rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(10, 21, 35, 0.92), rgba(6, 13, 24, 0.97));
}

.hazard-library-hero__telemetry {
    gap: 10px;
}

.hazard-telemetry {
    min-height: 118px;
    padding: 13px 14px 12px;
    background:
        radial-gradient(circle at 14% 18%, rgba(101, 215, 255, 0.05), transparent 24%),
        linear-gradient(180deg, rgba(10, 25, 44, 0.9), rgba(6, 13, 24, 0.96));
}

.hazard-telemetry span {
    margin-bottom: 8px;
}

.hazard-telemetry strong {
    margin-bottom: 8px;
    font-size: 1.32rem;
}

.hazard-telemetry p {
    font-size: 0.78rem;
    line-height: 1.42;
}

.hazard-telemetry--master strong,
.hazard-telemetry--snapshot strong {
    color: #ffc892;
}

.hazard-telemetry--company strong {
    color: #95ffd1;
}

.hazard-telemetry--builder strong {
    color: #a6c4ff;
}

.hazard-library-toolbar {
    align-items: end;
    gap: 12px;
    margin-bottom: 12px;
}

.hazard-library-toolbar .eyebrow {
    margin-bottom: 5px;
}

.hazard-library-toolbar .section-title {
    font-size: 1.22rem;
    line-height: 1.08;
}

.hazard-selected-banner {
    gap: 8px;
}

.hazard-status-pill--focus {
    color: #cfe9ff;
    border-color: rgba(96, 146, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(12, 25, 46, 0.92), rgba(8, 15, 29, 0.97));
    box-shadow:
        inset 0 0 0 1px rgba(96, 146, 255, 0.06),
        0 0 20px rgba(96, 146, 255, 0.1);
}

.hazard-library-panel--categories,
.hazard-library-panel--category-detail,
.hazard-library-panel--category-empty {
    border-color: rgba(101, 215, 255, 0.14);
    background:
        radial-gradient(circle at 14% 16%, rgba(255, 122, 26, 0.035), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(112, 255, 188, 0.04), transparent 22%),
        linear-gradient(180deg, rgba(10, 20, 33, 0.9), rgba(6, 12, 22, 0.96));
}

.hazard-library-panel--reveal {
    border-color: rgba(112, 255, 188, 0.16);
    box-shadow:
        var(--shadow-panel),
        0 0 28px rgba(112, 255, 188, 0.05);
}

.hazard-library-panel--categories .panel-heading,
.hazard-library-panel--category-detail .panel-heading,
.hazard-library-panel--focused-filters .panel-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(101, 215, 255, 0.1);
}

.hazard-library-grid--focused {
    min-width: 860px;
}

.hazard-library-panel--filters {
    background:
        radial-gradient(circle at 14% 16%, rgba(255, 122, 26, 0.04), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(112, 255, 188, 0.045), transparent 22%),
        linear-gradient(180deg, rgba(10, 20, 33, 0.9), rgba(6, 12, 22, 0.96));
}

.hazard-library-panel--master {
    border-color: rgba(255, 122, 26, 0.16);
    box-shadow:
        var(--shadow-panel),
        0 0 28px rgba(255, 122, 26, 0.06);
}

.hazard-library-panel--company,
.hazard-library-panel--editor {
    border-color: rgba(112, 255, 188, 0.16);
    box-shadow:
        var(--shadow-panel),
        0 0 28px rgba(112, 255, 188, 0.05);
}

.hazard-library-panel--master .panel-heading,
.hazard-library-panel--company .panel-heading,
.hazard-library-panel--editor .panel-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(101, 215, 255, 0.1);
}

.hazard-library-panel--master .panel-heading {
    border-bottom-color: rgba(255, 122, 26, 0.12);
}

.hazard-library-panel--company .panel-heading,
.hazard-library-panel--editor .panel-heading {
    border-bottom-color: rgba(112, 255, 188, 0.12);
}

.hazard-library-table {
    border-radius: 22px;
}

.hazard-library-table--master {
    border-color: rgba(255, 122, 26, 0.16);
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 122, 26, 0.045), transparent 24%),
        linear-gradient(180deg, rgba(9, 18, 31, 0.84), rgba(5, 10, 19, 0.95));
}

.hazard-library-table--company {
    border-color: rgba(112, 255, 188, 0.15);
    background:
        radial-gradient(circle at 14% 16%, rgba(112, 255, 188, 0.045), transparent 24%),
        linear-gradient(180deg, rgba(9, 18, 31, 0.84), rgba(5, 10, 19, 0.95));
}

.hazard-library-grid {
    min-width: 980px;
}

.hazard-library-grid thead th {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 0.7rem;
}

.hazard-library-grid--master thead th {
    color: #ffc892;
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.12), transparent 42%),
        rgba(8, 16, 28, 0.97);
}

.hazard-library-grid--company thead th {
    color: #95ffd1;
    background:
        linear-gradient(90deg, rgba(112, 255, 188, 0.11), transparent 42%),
        rgba(8, 16, 28, 0.97);
}

.hazard-library-grid tbody td {
    border-bottom-color: rgba(101, 215, 255, 0.08);
}

.hazard-row td:first-child {
    min-width: 250px;
}

.hazard-row--master.is-copied {
    background: linear-gradient(90deg, rgba(255, 122, 26, 0.045), transparent 42%);
}

.hazard-row--company.hazard-row--custom {
    background: linear-gradient(90deg, rgba(112, 255, 188, 0.04), transparent 42%);
}

.hazard-row--company.is-inactive {
    opacity: 0.88;
}

.hazard-library-grid--master tbody tr:hover {
    background: rgba(28, 18, 12, 0.72);
    box-shadow:
        inset 4px 0 0 rgba(255, 122, 26, 0.46),
        inset 0 0 0 1px rgba(255, 122, 26, 0.06);
}

.hazard-library-grid--company tbody tr:hover {
    background: rgba(10, 31, 22, 0.68);
    box-shadow:
        inset 4px 0 0 rgba(112, 255, 188, 0.48),
        inset 0 0 0 1px rgba(112, 255, 188, 0.06);
}

.hazard-title {
    display: block;
    color: #eef7ff;
    font-size: 0.96rem;
    line-height: 1.35;
}

.hazard-category-chip,
.hazard-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.92), rgba(5, 10, 19, 0.96));
    color: var(--text-soft);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hazard-category-chip {
    color: #dbe8f3;
    border-color: rgba(101, 215, 255, 0.14);
}

.hazard-category-chip--physical {
    color: #cbe6ff;
    border-color: rgba(96, 146, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(12, 24, 46, 0.94), rgba(8, 15, 28, 0.98));
    box-shadow: 0 0 14px rgba(96, 146, 255, 0.08);
}

.hazard-category-chip--machinery {
    color: #bff5ff;
    border-color: rgba(101, 215, 255, 0.26);
    background:
        linear-gradient(180deg, rgba(9, 28, 39, 0.94), rgba(6, 16, 23, 0.98));
    box-shadow: 0 0 14px rgba(101, 215, 255, 0.08);
}

.hazard-category-chip--fire,
.hazard-category-chip--fire-chemical {
    color: #ffd0bf;
    border-color: rgba(255, 122, 26, 0.28);
    background:
        linear-gradient(180deg, rgba(43, 17, 10, 0.94), rgba(24, 10, 8, 0.98));
    box-shadow: 0 0 14px rgba(255, 122, 26, 0.09);
}

.hazard-category-chip--chemical {
    color: #ffdcb0;
    border-color: rgba(246, 199, 109, 0.28);
    background:
        linear-gradient(180deg, rgba(44, 30, 10, 0.94), rgba(23, 16, 8, 0.98));
    box-shadow: 0 0 14px rgba(246, 199, 109, 0.08);
}

.hazard-category-chip--environment {
    color: #b8f5ea;
    border-color: rgba(81, 214, 193, 0.26);
    background:
        linear-gradient(180deg, rgba(8, 33, 31, 0.94), rgba(6, 17, 16, 0.98));
    box-shadow: 0 0 14px rgba(81, 214, 193, 0.08);
}

.hazard-category-chip--health {
    color: #c7ffd9;
    border-color: rgba(112, 255, 188, 0.26);
    background:
        linear-gradient(180deg, rgba(10, 34, 24, 0.94), rgba(6, 18, 14, 0.98));
    box-shadow: 0 0 14px rgba(112, 255, 188, 0.08);
}

.hazard-category-chip--access {
    color: #ddd0ff;
    border-color: rgba(137, 100, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(26, 17, 46, 0.94), rgba(14, 10, 24, 0.98));
    box-shadow: 0 0 14px rgba(137, 100, 255, 0.08);
}

.hazard-category-chip--electrical {
    color: #ffe8aa;
    border-color: rgba(255, 205, 88, 0.3);
    background:
        linear-gradient(180deg, rgba(45, 34, 10, 0.94), rgba(24, 18, 8, 0.98));
    box-shadow: 0 0 14px rgba(255, 205, 88, 0.08);
}

.hazard-category-tile .hazard-category-chip {
    min-height: 28px;
    padding: 0 10px;
    box-shadow: none;
}

.button.secondary.hazard-category-open-link {
    min-height: 34px;
    padding: 0 14px;
    color: #eef7ff;
    border-color: var(--coshh-category-tile-accent-border);
    background:
        radial-gradient(circle at top right, var(--coshh-category-tile-glow), transparent 58%),
        linear-gradient(140deg, var(--coshh-category-tile-wash-strong), rgba(16, 27, 40, 0.36) 76%),
        linear-gradient(180deg, rgba(13, 27, 43, 0.94), rgba(8, 16, 28, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 20px rgba(3, 9, 18, 0.18),
        0 0 0 1px var(--coshh-category-tile-glow);
}

.button.secondary.hazard-category-open-link:hover,
.button.secondary.hazard-category-open-link:focus-visible {
    border-color: var(--coshh-category-tile-accent-border);
    background:
        radial-gradient(circle at top right, var(--coshh-category-tile-glow), transparent 56%),
        linear-gradient(140deg, var(--coshh-category-tile-wash-strong), rgba(18, 31, 47, 0.42) 74%),
        linear-gradient(180deg, rgba(15, 31, 49, 0.96), rgba(9, 18, 31, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 24px rgba(3, 9, 18, 0.2),
        0 0 0 1px var(--coshh-category-tile-glow);
}

.hazard-category-tile--selected .button.secondary.hazard-category-open-link {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 24px rgba(3, 9, 18, 0.2),
        0 0 0 1px var(--coshh-category-tile-glow);
}

.hazard-category-tile--physical {
    --coshh-category-tile-border: rgba(96, 146, 255, 0.18);
    --coshh-category-tile-accent-border: rgba(96, 146, 255, 0.3);
    --coshh-category-tile-wash-strong: rgba(22, 46, 79, 0.28);
    --coshh-category-tile-wash-soft: rgba(12, 20, 32, 0.08);
    --coshh-category-tile-glow: rgba(96, 146, 255, 0.1);
}

.hazard-category-tile--machinery {
    --coshh-category-tile-border: rgba(101, 215, 255, 0.18);
    --coshh-category-tile-accent-border: rgba(101, 215, 255, 0.3);
    --coshh-category-tile-wash-strong: rgba(14, 60, 77, 0.28);
    --coshh-category-tile-wash-soft: rgba(9, 24, 31, 0.08);
    --coshh-category-tile-glow: rgba(101, 215, 255, 0.1);
}

.hazard-category-tile--fire,
.hazard-category-tile--fire-chemical {
    --coshh-category-tile-border: rgba(255, 122, 26, 0.2);
    --coshh-category-tile-accent-border: rgba(255, 122, 26, 0.3);
    --coshh-category-tile-wash-strong: rgba(100, 38, 15, 0.28);
    --coshh-category-tile-wash-soft: rgba(32, 16, 11, 0.08);
    --coshh-category-tile-glow: rgba(255, 122, 26, 0.1);
}

.hazard-category-tile--chemical {
    --coshh-category-tile-border: rgba(246, 199, 109, 0.2);
    --coshh-category-tile-accent-border: rgba(246, 199, 109, 0.3);
    --coshh-category-tile-wash-strong: rgba(92, 66, 17, 0.28);
    --coshh-category-tile-wash-soft: rgba(31, 23, 10, 0.08);
    --coshh-category-tile-glow: rgba(246, 199, 109, 0.1);
}

.hazard-category-tile--environment {
    --coshh-category-tile-border: rgba(81, 214, 193, 0.2);
    --coshh-category-tile-accent-border: rgba(81, 214, 193, 0.3);
    --coshh-category-tile-wash-strong: rgba(16, 75, 72, 0.28);
    --coshh-category-tile-wash-soft: rgba(10, 28, 27, 0.08);
    --coshh-category-tile-glow: rgba(81, 214, 193, 0.1);
}

.hazard-category-tile--health {
    --coshh-category-tile-border: rgba(112, 255, 188, 0.18);
    --coshh-category-tile-accent-border: rgba(112, 255, 188, 0.3);
    --coshh-category-tile-wash-strong: rgba(17, 75, 47, 0.28);
    --coshh-category-tile-wash-soft: rgba(10, 28, 21, 0.08);
    --coshh-category-tile-glow: rgba(112, 255, 188, 0.1);
}

.hazard-category-tile--access {
    --coshh-category-tile-border: rgba(137, 100, 255, 0.18);
    --coshh-category-tile-accent-border: rgba(137, 100, 255, 0.3);
    --coshh-category-tile-wash-strong: rgba(48, 28, 89, 0.28);
    --coshh-category-tile-wash-soft: rgba(18, 13, 31, 0.08);
    --coshh-category-tile-glow: rgba(137, 100, 255, 0.1);
}

.hazard-category-tile--electrical {
    --coshh-category-tile-border: rgba(255, 205, 88, 0.2);
    --coshh-category-tile-accent-border: rgba(255, 205, 88, 0.32);
    --coshh-category-tile-wash-strong: rgba(96, 73, 18, 0.28);
    --coshh-category-tile-wash-soft: rgba(31, 24, 10, 0.08);
    --coshh-category-tile-glow: rgba(255, 205, 88, 0.1);
}

.hazard-category-tile--default {
    --coshh-category-tile-border: rgba(101, 215, 255, 0.14);
    --coshh-category-tile-accent-border: rgba(101, 215, 255, 0.24);
    --coshh-category-tile-wash-strong: rgba(50, 107, 132, 0.14);
    --coshh-category-tile-wash-soft: rgba(13, 29, 43, 0.08);
    --coshh-category-tile-glow: rgba(101, 215, 255, 0.08);
}

.hazard-status-badge--available,
.hazard-status-badge--copied,
.hazard-source-badge-copy {
    color: #ffd8b0;
    border-color: rgba(255, 166, 79, 0.26);
    background:
        linear-gradient(180deg, rgba(46, 28, 11, 0.92), rgba(21, 14, 8, 0.97));
}

.hazard-source-badge-fabora {
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.08);
}

.hazard-source-badge-company {
    box-shadow: 0 0 18px rgba(112, 255, 188, 0.08);
}

.hazard-status-badge--active {
    box-shadow: 0 0 18px rgba(112, 255, 188, 0.08);
}

.hazard-control-text {
    max-width: 420px;
    margin-top: 8px;
    color: var(--text-soft);
    line-height: 1.62;
    white-space: pre-line;
}

.hazard-key-note {
    color: var(--muted);
}

.hazard-actions {
    gap: 8px;
    align-items: flex-start;
}

.action-copy:hover {
    border-color: rgba(255, 152, 67, 0.36);
    box-shadow: 0 0 24px rgba(255, 122, 26, 0.16);
    color: #fff4ea;
}

.action-edit-company:hover,
.action-toggle-company:hover {
    border-color: rgba(112, 255, 188, 0.34);
    box-shadow: 0 0 22px rgba(112, 255, 188, 0.14);
    color: #f2fff8;
}

.hazard-editor-note {
    border-style: solid;
    border-color: rgba(112, 255, 188, 0.18);
    background:
        radial-gradient(circle at 12% 16%, rgba(112, 255, 188, 0.06), transparent 26%),
        linear-gradient(180deg, rgba(9, 25, 22, 0.84), rgba(5, 11, 18, 0.92));
}

.signal-stack {
    display: grid;
    gap: 12px;
}

.signal-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.signal-row span {
    color: var(--text-soft);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.signal-row strong {
    color: var(--text);
    font-size: 0.84rem;
    letter-spacing: 0.12em;
}

.signal-meter {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(6, 14, 25, 0.92);
    border: 1px solid rgba(101, 215, 255, 0.14);
    overflow: hidden;
}

.signal-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-size: 200% 100%;
    animation: signal-flow 3s linear infinite;
}

.signal-fill-cyan {
    background-image: linear-gradient(90deg, rgba(101, 215, 255, 0.24), rgba(159, 242, 255, 0.96), rgba(101, 215, 255, 0.24));
}

.signal-fill-violet {
    background-image: linear-gradient(90deg, rgba(137, 100, 255, 0.24), rgba(201, 183, 255, 0.96), rgba(137, 100, 255, 0.24));
}

.signal-fill-gold {
    background-image: linear-gradient(90deg, rgba(246, 199, 109, 0.24), rgba(255, 226, 164, 0.96), rgba(246, 199, 109, 0.24));
}

.signal-fill-green {
    background-image: linear-gradient(90deg, rgba(109, 255, 198, 0.24), rgba(185, 255, 228, 0.96), rgba(109, 255, 198, 0.24));
}

.ops-summary-grid {
    display: grid;
    gap: 12px;
}

.ops-summary-item {
    padding: 14px 14px 12px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(8, 18, 32, 0.78), rgba(5, 10, 20, 0.94));
}

.ops-summary-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ops-summary-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan-bright);
    font-size: 1.2rem;
    letter-spacing: 0.08em;
}

.ops-summary-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.flash-stack {
    display: grid;
    gap: 10px;
}

.flash {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.flash-success {
    background: rgba(11, 46, 39, 0.74);
    border-color: rgba(109, 255, 198, 0.28);
}

.flash-error {
    background: rgba(56, 16, 29, 0.76);
    border-color: rgba(255, 125, 150, 0.3);
}

.placeholder-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px dashed rgba(246, 199, 109, 0.28);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(246, 199, 109, 0.08), transparent 42%),
        rgba(25, 17, 7, 0.3);
}

.sidebar-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 1px solid rgba(101, 215, 255, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(8, 18, 32, 0.9), rgba(5, 10, 19, 0.92));
}

.sidebar-toggle span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
}

body.sidebar-open {
    overflow: hidden;
}

code {
    font-family: "Cascadia Code", "Consolas", monospace;
    color: var(--cyan-bright);
}

@keyframes grid-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 46px, 0);
    }
}

@keyframes orb-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.22;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.3;
    }
}

@keyframes sweep-line {
    0% {
        transform: translateX(-18%);
        opacity: 0;
    }
    12% {
        opacity: 0.82;
    }
    38% {
        opacity: 0;
    }
    100% {
        transform: translateX(18%);
        opacity: 0;
    }
}

@keyframes chip-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(101, 215, 255, 0);
    }
    50% {
        box-shadow: 0 0 22px rgba(101, 215, 255, 0.18);
    }
}

@keyframes scan-pulse {
    0%,
    100% {
        opacity: 0.08;
    }
    50% {
        opacity: 0.16;
    }
}

@keyframes border-glow {
    0%,
    100% {
        opacity: 0.32;
        filter: brightness(1);
    }
    50% {
        opacity: 0.58;
        filter: brightness(1.12);
    }
}

@keyframes signal-flow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0 0;
    }
}

@media (max-width: 1320px) {
    .hero-panel {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .panel-grid,
    .system-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-pill-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stack-column {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    html,
    body {
        overflow-x: hidden;
    }

    .app-shell {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
        border: none;
        background: rgba(3, 8, 16, 0.58);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .sidebar {
        position: fixed;
        left: 12px;
        top: 12px;
        bottom: 12px;
        width: min(320px, calc(100vw - 40px));
        min-height: auto;
        max-height: calc(100dvh - 24px);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 30;
        transform: translateX(calc(-100% - 20px));
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .main-panel {
        padding-top: 0;
    }

    .topbar {
        top: 12px;
    }

    .topbar,
    .topbar-left,
    .topbar-meta,
    .toolbar,
    .search-form,
    .panel-heading,
    .form-actions,
    .library-inline-form-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .hero-telemetry,
    .hero-pill-grid,
    .stats-grid,
    .system-strip,
    .panel-grid,
    .dashboard-grid,
    .form-grid,
    .sidebar-readouts {
        grid-template-columns: 1fr;
    }

    .stack-column {
        grid-template-columns: 1fr;
    }

    .hero-topline {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-topline-stack {
        justify-items: stretch;
    }

    .hero-clock-panel {
        min-width: 0;
    }

    .signal-row {
        grid-template-columns: 1fr;
    }

    .rams-list-page .rams-list-hero {
        grid-template-columns: 1fr;
    }

    .rams-list-page .rams-list-hero-metrics {
        grid-template-columns: 1fr;
    }

    .rams-list-page .rams-list-hero-actions {
        justify-content: flex-start;
    }

    .hazard-library-hero {
        padding: 16px;
    }
}

@media (max-width: 700px) {
    .app-shell {
        padding: 8px;
    }

    .sidebar {
        left: 8px;
        top: 8px;
        bottom: 8px;
        width: min(296px, calc(100vw - 28px));
        max-height: calc(100dvh - 16px);
        border-radius: 22px;
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    }

    .brand-block {
        padding: 14px;
        border-radius: 20px;
    }

    .brand-logo {
        width: min(100%, 170px);
    }

    .topbar {
        top: 8px;
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 18px;
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .topbar-left {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .topbar-brand-lockup {
        flex: 1 1 auto;
        gap: 10px;
    }

    .topbar-brand-icon {
        width: 32px;
        height: 32px;
        padding: 5px;
        border-radius: 10px;
    }

    .topbar-meta {
        display: none;
    }

    .topbar h1 {
        font-size: clamp(1.18rem, 4.8vw, 1.45rem);
        line-height: 1.1;
    }

    .eyebrow {
        margin-bottom: 4px;
        font-size: 0.64rem;
        letter-spacing: 0.18em;
    }

    .sidebar-toggle {
        width: 42px;
        height: 42px;
        padding: 9px;
        border-radius: 12px;
    }

    .content {
        gap: 14px;
    }

    .content .rams-list-page {
        gap: 12px;
    }

    .rams-list-page .rams-list-hero {
        padding: 14px;
        gap: 12px;
    }

    .rams-list-page .rams-list-hero-brand {
        align-items: flex-start;
        gap: 12px;
    }

    .rams-list-page .rams-list-hero-brand-icon {
        width: 48px;
        height: 48px;
        padding: 8px;
        border-radius: 14px;
    }

    .rams-list-page .rams-list-hero-actions .button {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

.toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rams-list-page {
    display: grid;
    gap: 16px;
}

.rams-list-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.85fr);
    gap: 14px;
    padding: 18px;
}

.rams-list-hero-copy {
    gap: 10px;
}

.rams-list-hero-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rams-list-hero-brand-icon {
    width: 58px;
    height: 58px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 122, 26, 0.24);
    background:
        linear-gradient(180deg, rgba(56, 26, 8, 0.94), rgba(11, 18, 31, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 18px rgba(255, 122, 26, 0.1);
    object-fit: contain;
}

.rams-list-hero-side {
    display: grid;
    gap: 10px;
    align-content: start;
}

.rams-list-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rams-list-hero-card {
    padding: 14px 15px;
    border: 1px solid rgba(255, 122, 26, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 122, 26, 0.05), transparent 24%),
        linear-gradient(180deg, rgba(12, 21, 34, 0.94), rgba(6, 11, 21, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.rams-list-hero-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rams-list-hero-card strong {
    display: block;
    margin-bottom: 8px;
    color: #fff2e6;
    font-size: 1.45rem;
    line-height: 1;
}

.rams-list-hero-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.rams-list-hero-card-soft {
    border-color: rgba(101, 215, 255, 0.14);
}

.rams-list-hero-card-soft strong {
    color: var(--cyan-bright);
}

.rams-list-hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.rams-list-hero-actions .button {
    min-width: 150px;
}

.rams-list-panel-heading {
    align-items: flex-end;
}

.rams-list-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(160px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.rams-list-filter-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.rams-list-filter-field span {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.operative-form select,
.rams-list-filter-field select,
.rams-list-filter-field input {
    width: 100%;
    min-height: 46px;
    padding: 13px 14px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(5, 12, 21, 0.95), rgba(8, 17, 30, 0.86));
    color: var(--text);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.operative-form select,
.rams-list-filter-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    color-scheme: dark;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 171, 97, 0.9) 50%),
        linear-gradient(135deg, rgba(255, 171, 97, 0.9) 50%, transparent 50%),
        linear-gradient(180deg, rgba(5, 12, 21, 0.95), rgba(8, 17, 30, 0.86));
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px),
        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

.operative-form select option,
.rams-list-filter-field select option {
    background: #081221;
    color: var(--text);
    font-weight: 700;
}

.operative-form select:focus,
.rams-list-filter-field select:focus,
.rams-list-filter-field input:focus {
    border-color: rgba(101, 215, 255, 0.52);
    box-shadow:
        0 0 0 3px rgba(101, 215, 255, 0.1),
        0 0 26px rgba(10, 142, 196, 0.12);
}

.rams-list-filter-field input::placeholder {
    color: #6f8ba7;
}

.rams-list-filter-actions {
    display: flex;
    align-items: end;
}

.rams-list-filter-actions .button {
    min-width: 154px;
}

.rams-list-filter-summary {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.6;
}

.rams-list-page .hero-panel,
.rams-list-page .panel {
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 122, 26, 0.08), transparent 20%),
        radial-gradient(circle at 86% 18%, rgba(101, 215, 255, 0.11), transparent 24%),
        linear-gradient(180deg, rgba(14, 22, 34, 0.96), rgba(5, 10, 19, 0.98));
}

.rams-list-page .hero-panel::before {
    background: linear-gradient(90deg, transparent, rgba(101, 215, 255, 0.82), rgba(255, 177, 104, 0.68), transparent);
    box-shadow: 0 0 22px rgba(101, 215, 255, 0.2);
}

.rams-list-page .hero-panel::after,
.rams-list-page .panel::after {
    background: linear-gradient(125deg, rgba(101, 215, 255, 0.54), rgba(255, 163, 96, 0.22), rgba(76, 134, 255, 0.34));
    opacity: 0.42;
}

.rams-list-page .eyebrow {
    color: #ffab61;
}

.rams-list-page .section-title,
.rams-list-page .panel-heading h3 {
    color: #fff6ee;
}

.rams-list-page .status-pill {
    border-color: rgba(101, 215, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(10, 25, 44, 0.88), rgba(7, 16, 30, 0.92));
    color: #ffd3af;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 18px rgba(101, 215, 255, 0.08);
}

.rams-list-page .telemetry-item {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 122, 26, 0.045), transparent 24%),
        radial-gradient(circle at 82% 14%, rgba(101, 215, 255, 0.06), transparent 24%),
        linear-gradient(180deg, rgba(11, 21, 34, 0.92), rgba(6, 12, 22, 0.96));
}

.rams-list-page .telemetry-item strong {
    color: #e8f3ff;
}

.rams-list-page .telemetry-live {
    box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.12), 0 0 24px rgba(255, 122, 26, 0.1);
}

.rams-list-page .telemetry-live strong,
.rams-list-page .telemetry-gold strong {
    color: #ffc489;
}

.rams-list-page .telemetry-gold {
    box-shadow: inset 0 0 0 1px rgba(255, 166, 79, 0.12), 0 0 22px rgba(255, 152, 67, 0.1);
}

.rams-list-page .telemetry-cyan {
    box-shadow: inset 0 0 0 1px rgba(101, 215, 255, 0.16), 0 0 26px rgba(101, 215, 255, 0.12);
}

.rams-list-page .telemetry-cyan strong {
    color: var(--cyan-bright);
}

.rams-list-page .telemetry-violet {
    box-shadow: inset 0 0 0 1px rgba(96, 146, 255, 0.12), 0 0 22px rgba(96, 146, 255, 0.1);
}

.rams-list-page .button.primary {
    background:
        linear-gradient(135deg, #fff0db 0%, #ffbc74 22%, #ff8e34 56%, #ff6a00 100%);
    color: #1a0d05;
    box-shadow:
        0 12px 24px rgba(255, 122, 26, 0.2),
        0 0 18px rgba(101, 215, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.rams-list-page .button.secondary {
    border-color: rgba(101, 215, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 22, 34, 0.92), rgba(6, 11, 21, 0.96));
    color: #d7ebff;
}

.rams-list-page .button:hover,
.rams-list-page .button:focus-visible {
    box-shadow: 0 0 22px rgba(255, 122, 26, 0.16), 0 0 30px rgba(101, 215, 255, 0.1);
}

.rams-list-page .data-table {
    border-color: rgba(101, 215, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(10, 18, 30, 0.8), rgba(4, 9, 17, 0.94));
}

.rams-list-page thead th {
    color: #ffbf8f;
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.1), rgba(101, 215, 255, 0.04) 44%, transparent 72%),
        rgba(6, 14, 24, 0.96);
}

.rams-list-page tbody tr:hover {
    background: rgba(14, 24, 38, 0.88);
    box-shadow: inset 4px 0 0 rgba(255, 122, 26, 0.42);
}

.rams-list-page .action-link {
    border-color: rgba(101, 215, 255, 0.16);
}

.rams-list-page .action-link:hover {
    border-color: rgba(101, 215, 255, 0.28);
    box-shadow: 0 0 18px rgba(101, 215, 255, 0.14);
}

.rams-list-page .action-primary {
    color: #ffd2ab;
    border-color: rgba(255, 122, 26, 0.26);
    background:
        linear-gradient(180deg, rgba(44, 18, 7, 0.88), rgba(23, 10, 8, 0.96));
}

.rams-list-page .action-primary:hover {
    border-color: rgba(255, 122, 26, 0.42);
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.16);
}

.rams-list-page .saved-rams-actions {
    gap: 8px;
    align-items: stretch;
    min-width: 0;
    width: min(308px, 100%);
    max-width: 308px;
}

.rams-list-page .saved-rams-actions .action-link {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.rams-list-page button.action-link {
    font: inherit;
    cursor: pointer;
}

.rams-list-page .action-pdf {
    color: #deebff;
    border-color: rgba(96, 146, 255, 0.24);
    background:
        linear-gradient(180deg, rgba(19, 29, 53, 0.9), rgba(10, 15, 29, 0.96));
}

.rams-list-page .action-pdf:hover {
    border-color: rgba(96, 146, 255, 0.4);
    box-shadow: 0 0 18px rgba(96, 146, 255, 0.16);
}

.rams-list-page .action-share {
    color: #dfffe8;
    border-color: rgba(74, 190, 127, 0.24);
    background:
        linear-gradient(180deg, rgba(16, 41, 29, 0.9), rgba(8, 19, 14, 0.96));
}

.rams-list-page .action-share:hover {
    border-color: rgba(74, 190, 127, 0.4);
    box-shadow: 0 0 18px rgba(74, 190, 127, 0.16);
}

.rams-list-page .action-link[disabled] {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.rams-record-cards {
    display: none;
}

.rams-record-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 14% 16%, rgba(255, 122, 26, 0.06), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(101, 215, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(11, 20, 33, 0.96), rgba(5, 10, 19, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 30px rgba(0, 0, 0, 0.18);
}

.rams-record-cards[hidden],
.rams-record-card[hidden] {
    display: none !important;
}

.rams-record-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rams-record-chip-stack {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.rams-record-card__eyebrow,
.rams-record-label {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.rams-record-card__identity h4 {
    margin: 4px 0 0;
    color: #fff6ee;
    font-size: 1.05rem;
}

.rams-record-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
}

.rams-record-item {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.rams-record-item--full {
    grid-column: 1 / -1;
}

.rams-record-value {
    color: #e8f3ff;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rams-record-actions {
    display: grid;
    gap: 10px;
}

.rams-record-action-main {
    width: 100%;
    min-height: 42px;
}

.rams-record-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rams-record-actions-secondary .action-link {
    flex: 1 1 calc(50% - 4px);
    min-height: 38px;
    min-width: 0;
    justify-content: center;
}

.customer-link {
    color: var(--text);
    text-decoration: none;
}

.customer-link:hover strong {
    color: var(--cyan-bright);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 20px;
}

.info-stack {
    display: grid;
    gap: 18px;
}

.detail-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.detail-card,
.contact-card {
    padding: 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 42%),
        linear-gradient(180deg, rgba(8, 18, 32, 0.84), rgba(5, 10, 19, 0.92));
}

.detail-card span,
.contact-card dt {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.detail-card strong {
    display: block;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
}

.compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.contact-card-head h4 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1rem;
}

.contact-card-head p {
    margin: 0;
    color: var(--muted);
}

.contact-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.contact-meta dd {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.5;
}

@media (max-width: 960px) {
    .detail-grid,
    .contact-grid,
    .detail-card-grid,
    .compact-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .rams-list-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rams-list-filter-field--search,
    .rams-list-filter-actions {
        grid-column: 1 / -1;
    }

    .rams-list-page .data-table {
        display: none;
    }

    .rams-record-cards {
        display: grid;
        gap: 14px;
    }
}

@media (max-width: 520px) {
    .rams-list-filters {
        grid-template-columns: 1fr;
    }

    .rams-list-filter-actions .button {
        width: 100%;
    }

    .rams-record-card {
        padding: 16px;
    }

    .rams-record-chip-stack {
        justify-items: start;
    }

    .rams-record-meta {
        grid-template-columns: 1fr;
    }

    .rams-record-actions-secondary .action-link {
        flex: 1 1 100%;
    }
}

.topbar-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.topbar-help-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(10, 24, 42, 0.92), rgba(6, 14, 26, 0.95));
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 12px 22px rgba(0, 0, 0, 0.14);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-help-button:hover,
.topbar-help-button:focus-visible {
    transform: translateY(-1px);
    outline: none;
    border-color: rgba(255, 166, 92, 0.34);
    color: #fff3e6;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.18),
        0 0 22px rgba(255, 122, 26, 0.12);
}

.topbar-help-button-primary {
    border-color: rgba(114, 255, 173, 0.34);
    background:
        linear-gradient(135deg, rgba(101, 255, 170, 0.2), rgba(40, 120, 76, 0.12)),
        linear-gradient(180deg, rgba(16, 28, 22, 0.97), rgba(7, 15, 11, 0.99));
    color: #eafff1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 22px rgba(0, 0, 0, 0.16),
        0 0 20px rgba(88, 255, 156, 0.14);
}

.topbar-help-button-secondary {
    border-color: rgba(185, 121, 255, 0.32);
    background:
        linear-gradient(135deg, rgba(184, 105, 255, 0.22), rgba(77, 48, 138, 0.14)),
        linear-gradient(180deg, rgba(22, 20, 38, 0.97), rgba(10, 9, 21, 0.99));
    color: #f4e9ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 22px rgba(0, 0, 0, 0.16),
        0 0 20px rgba(175, 98, 255, 0.14);
}

.topbar-help-button-primary:hover,
.topbar-help-button-primary:focus-visible {
    border-color: rgba(135, 255, 188, 0.52);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 16px 28px rgba(0, 0, 0, 0.2),
        0 0 26px rgba(88, 255, 156, 0.2);
}

.topbar-help-button-secondary:hover,
.topbar-help-button-secondary:focus-visible {
    border-color: rgba(203, 149, 255, 0.52);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 16px 28px rgba(0, 0, 0, 0.2),
        0 0 26px rgba(175, 98, 255, 0.22);
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 20, 36, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
}

.theme-switch-label {
    padding: 0 8px 0 10px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.theme-option {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.theme-option:hover,
.theme-option:focus-visible {
    border-color: rgba(101, 215, 255, 0.22);
    color: var(--text);
    outline: none;
}

.theme-option.is-active {
    background:
        linear-gradient(135deg, rgba(255, 122, 26, 0.24), rgba(101, 215, 255, 0.16));
    border-color: rgba(255, 122, 26, 0.26);
    color: #fff5eb;
    box-shadow: 0 10px 22px rgba(5, 10, 18, 0.18);
}

@media (max-width: 980px) {
    .topbar-tools {
        width: 100%;
        justify-content: flex-end;
    }

    .topbar-help-actions {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .topbar-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

    .topbar-help-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .topbar-help-button {
        flex: 1 1 160px;
        min-width: 0;
        min-height: 48px;
        padding: 10px 12px;
        font-size: 0.62rem;
        line-height: 1.2;
        letter-spacing: 0.09em;
        text-align: center;
        white-space: normal;
    }

    .theme-switch {
        width: 100%;
        gap: 4px;
        padding: 4px;
    }

    .theme-switch-label {
        display: none;
    }

    .theme-option {
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 0 12px;
        font-size: 0.68rem;
    }
}

@media (max-width: 520px) {
    .theme-option {
        padding: 0 10px;
        letter-spacing: 0.08em;
    }
}

body.builder-help-open {
    overflow: hidden;
}

.builder-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.builder-help-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(5, 6, 7, 0.72);
    cursor: pointer;
}

.builder-help-drawer {
    position: relative;
    width: min(100%, 620px);
    height: 100%;
    margin-left: auto;
    padding: 20px 20px 22px;
    border-left: 1px solid rgba(255, 150, 68, 0.22);
    background:
        linear-gradient(180deg, rgba(24, 26, 34, 0.99), rgba(9, 13, 21, 0.995)),
        radial-gradient(circle at top right, rgba(255, 122, 26, 0.12), transparent 42%),
        radial-gradient(circle at bottom left, rgba(53, 215, 255, 0.08), transparent 38%);
    box-shadow: -24px 0 40px rgba(0, 0, 0, 0.36);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
}

.builder-help-overlay[data-help-view="field"] .builder-help-drawer {
    width: min(100%, 430px);
    grid-template-rows: auto auto minmax(0, 1fr);
}

.builder-help-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.builder-help-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffb06c;
    margin-bottom: 4px;
}

.builder-help-title {
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff4e8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.builder-help-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 166, 92, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: #ffd9b9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.builder-help-close:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 166, 92, 0.46);
    background: rgba(255, 122, 26, 0.08);
    color: #fff1e2;
}

.builder-help-close:focus-visible {
    outline: none;
    border-color: rgba(255, 166, 92, 0.56);
    box-shadow: 0 0 0 1px rgba(255, 166, 92, 0.18), 0 0 0 4px rgba(255, 122, 26, 0.1);
}

.builder-help-intro {
    padding: 13px 14px;
    border: 1px solid rgba(53, 215, 255, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(10, 19, 31, 0.92), rgba(8, 12, 18, 0.96));
    color: #d8e3f1;
    font-size: 13px;
    line-height: 1.6;
}

.builder-help-topic-list {
    display: grid;
    gap: 12px;
    max-height: 224px;
    overflow: auto;
    padding-right: 4px;
}

.builder-help-topic-list[hidden] {
    display: none !important;
}

.builder-help-topic-group {
    display: grid;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(7, 13, 21, 0.42);
}

.builder-help-topic-group-title,
.builder-help-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffbe86;
}

.builder-help-topic-group-chips,
.builder-help-related {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.builder-help-topic-btn,
.builder-help-related-btn,
.builder-help-centre-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(53, 215, 255, 0.18);
    border-radius: 999px;
    background: rgba(8, 18, 29, 0.74);
    color: #dff9ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.builder-help-topic-btn:hover,
.builder-help-related-btn:hover,
.builder-help-centre-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 166, 92, 0.34);
    background: rgba(44, 25, 12, 0.92);
    color: #ffe2c4;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.builder-help-topic-btn:focus-visible,
.builder-help-related-btn:focus-visible,
.builder-help-centre-link:focus-visible {
    outline: none;
    border-color: rgba(255, 166, 92, 0.56);
    box-shadow: 0 0 0 1px rgba(255, 166, 92, 0.16), 0 0 0 4px rgba(255, 122, 26, 0.08);
}

.builder-help-topic-btn.is-active {
    border-color: rgba(255, 122, 26, 0.42);
    background: linear-gradient(180deg, rgba(83, 39, 13, 0.98), rgba(27, 14, 9, 0.99));
    color: #fff1e2;
    box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.14), 0 12px 20px rgba(0, 0, 0, 0.18);
}

.builder-help-content {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 12px;
    padding-right: 4px;
}

.builder-help-card {
    display: grid;
    gap: 12px;
    padding: 16px 16px 18px;
    border: 1px solid rgba(255, 150, 68, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(14, 21, 32, 0.96), rgba(8, 13, 21, 0.99)),
        radial-gradient(circle at top right, rgba(255, 122, 26, 0.08), transparent 36%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 32px rgba(0, 0, 0, 0.18);
}

.builder-help-card.is-field-help {
    gap: 10px;
    padding: 14px 14px 16px;
    border-color: rgba(53, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(10, 18, 29, 0.95), rgba(7, 12, 19, 0.98)),
        radial-gradient(circle at top right, rgba(53, 215, 255, 0.08), transparent 40%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 26px rgba(0, 0, 0, 0.16);
}

.builder-help-card-head {
    display: grid;
    gap: 6px;
}

.builder-help-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    max-width: max-content;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.22);
    background: rgba(9, 24, 38, 0.82);
    color: #9fefff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.builder-help-card-title {
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff4e8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.builder-help-card-copy {
    font-size: 14px;
    line-height: 1.7;
    color: #edf4ff;
}

.builder-help-section {
    display: grid;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    background: rgba(7, 13, 21, 0.46);
}

.builder-help-section-copy {
    font-size: 13px;
    line-height: 1.65;
    color: #d4ddeb;
}

.builder-help-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: #edf4ff;
}

.builder-help-list li {
    font-size: 13px;
    line-height: 1.6;
}

.builder-help-compact-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 2px;
}

.builder-help-empty {
    padding: 15px 16px;
    border: 1px dashed rgba(53, 215, 255, 0.18);
    border-radius: 14px;
    background: rgba(10, 17, 27, 0.58);
    color: #d4ddeb;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .builder-help-overlay {
        align-items: flex-end;
    }

    .builder-help-drawer {
        width: 100%;
        height: min(92vh, 100%);
        max-height: 100%;
        padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
        border-left: none;
        border-top: 1px solid rgba(255, 150, 68, 0.22);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.28);
    }

    .builder-help-overlay[data-help-view="field"] .builder-help-drawer {
        width: 100%;
        height: auto;
        max-height: 72vh;
    }

    .builder-help-title {
        font-size: 21px;
    }

    .builder-help-close {
        min-height: 42px;
        padding: 0 14px;
        font-size: 11px;
    }

    .builder-help-topic-list {
        max-height: 188px;
    }

    .builder-help-topic-btn,
    .builder-help-related-btn,
    .builder-help-centre-link {
        min-height: 34px;
        padding: 0 11px;
        font-size: 10px;
    }

    .builder-help-card {
        padding: 14px 13px 16px;
    }

    .builder-help-card-title {
        font-size: 19px;
    }
}

html[data-theme="light"] .topbar-help-button {
    border-color: rgba(82, 101, 123, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(242, 247, 251, 0.994));
    color: #244158;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 22px rgba(61, 82, 107, 0.08);
}

html[data-theme="light"] .topbar-help-button-primary {
    border-color: rgba(44, 166, 93, 0.3);
    background:
        linear-gradient(135deg, rgba(231, 255, 241, 0.998), rgba(214, 250, 230, 0.994)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 251, 0.994));
    color: #0c5f31;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 12px 22px rgba(61, 82, 107, 0.1),
        0 0 18px rgba(70, 201, 120, 0.12);
}

html[data-theme="light"] .topbar-help-button:hover,
html[data-theme="light"] .topbar-help-button:focus-visible {
    border-color: rgba(217, 95, 0, 0.3);
    color: #8f3d00;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 14px 24px rgba(61, 82, 107, 0.1),
        0 0 18px rgba(217, 95, 0, 0.08);
}

html[data-theme="light"] .topbar-help-button-secondary {
    border-color: rgba(136, 86, 217, 0.28);
    background:
        linear-gradient(135deg, rgba(247, 238, 255, 0.998), rgba(234, 225, 255, 0.994)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 251, 0.994));
    color: #6438a3;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 12px 22px rgba(61, 82, 107, 0.1),
        0 0 18px rgba(152, 94, 238, 0.12);
}

html[data-theme="light"] .topbar-help-button-primary:hover,
html[data-theme="light"] .topbar-help-button-primary:focus-visible {
    border-color: rgba(44, 166, 93, 0.42);
    color: #084925;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.99),
        0 14px 24px rgba(61, 82, 107, 0.12),
        0 0 22px rgba(70, 201, 120, 0.16);
}

html[data-theme="light"] .topbar-help-button-secondary:hover,
html[data-theme="light"] .topbar-help-button-secondary:focus-visible {
    border-color: rgba(136, 86, 217, 0.4);
    color: #4f2687;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.99),
        0 14px 24px rgba(61, 82, 107, 0.12),
        0 0 22px rgba(152, 94, 238, 0.16);
}

html[data-theme="light"] .builder-help-backdrop {
    background: rgba(28, 41, 56, 0.22);
}

html[data-theme="light"] .builder-help-drawer {
    border-left-color: rgba(184, 199, 211, 0.92);
    background:
        linear-gradient(180deg, rgba(253, 255, 255, 0.998), rgba(240, 245, 249, 0.995)),
        radial-gradient(circle at top right, rgba(255, 122, 26, 0.08), transparent 42%),
        radial-gradient(circle at bottom left, rgba(53, 215, 255, 0.05), transparent 38%);
    box-shadow: -20px 0 34px rgba(15, 23, 32, 0.14);
}

html[data-theme="light"] .builder-help-title,
html[data-theme="light"] .builder-help-card-title {
    color: #143246;
}

html[data-theme="light"] .builder-help-eyebrow,
html[data-theme="light"] .builder-help-section-title,
html[data-theme="light"] .builder-help-topic-group-title {
    color: #c45400;
}

html[data-theme="light"] .builder-help-intro,
html[data-theme="light"] .builder-help-topic-group,
html[data-theme="light"] .builder-help-section {
    border-color: rgba(184, 199, 211, 0.88);
    background: rgba(246, 249, 252, 0.92);
    color: #355165;
}

html[data-theme="light"] .builder-help-close,
html[data-theme="light"] .builder-help-topic-btn,
html[data-theme="light"] .builder-help-related-btn,
html[data-theme="light"] .builder-help-centre-link {
    border-color: rgba(184, 199, 211, 0.88);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 251, 0.994));
    color: #214157;
}

html[data-theme="light"] .builder-help-close:hover,
html[data-theme="light"] .builder-help-topic-btn:hover,
html[data-theme="light"] .builder-help-related-btn:hover,
html[data-theme="light"] .builder-help-centre-link:hover {
    border-color: rgba(217, 95, 0, 0.28);
    background: linear-gradient(180deg, rgba(255, 247, 236, 0.998), rgba(255, 236, 214, 0.994));
    color: #924000;
}

html[data-theme="light"] .builder-help-topic-btn.is-active {
    border-color: rgba(217, 95, 0, 0.38);
    background: linear-gradient(180deg, rgba(255, 240, 221, 0.998), rgba(255, 224, 185, 0.994));
    color: #8f3d00;
    box-shadow: 0 12px 20px rgba(227, 95, 0, 0.08);
}

html[data-theme="light"] .builder-help-card {
    border-color: rgba(184, 199, 211, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 249, 252, 0.995)),
        radial-gradient(circle at top right, rgba(255, 122, 26, 0.06), transparent 36%);
    box-shadow: 0 18px 30px rgba(15, 23, 32, 0.07);
}

html[data-theme="light"] .builder-help-card.is-field-help {
    border-color: rgba(184, 199, 211, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(246, 249, 252, 0.995)),
        radial-gradient(circle at top right, rgba(53, 215, 255, 0.04), transparent 42%);
    box-shadow: 0 14px 26px rgba(15, 23, 32, 0.06);
}

html[data-theme="light"] .builder-help-card-tag {
    border-color: rgba(93, 173, 219, 0.28);
    background: rgba(230, 246, 255, 0.88);
    color: #1f6582;
}

html[data-theme="light"] .builder-help-card-copy,
html[data-theme="light"] .builder-help-list,
html[data-theme="light"] .builder-help-list li,
html[data-theme="light"] .builder-help-section-copy,
html[data-theme="light"] .builder-help-empty {
    color: #2f4d62;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-void: #eef3f8;
    --bg-deep: #fbfdff;
    --bg-mid: #dfe8f2;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-strong: rgba(252, 253, 255, 0.96);
    --panel-soft: rgba(245, 248, 252, 0.88);
    --line: rgba(57, 84, 116, 0.14);
    --line-strong: rgba(57, 84, 116, 0.24);
    --line-hot: rgba(224, 106, 22, 0.34);
    --text: #182433;
    --text-soft: #35506c;
    --muted: #627992;
    --cyan: #0e88be;
    --cyan-bright: #0d6b94;
    --cyan-deep: #0a6a8e;
    --blue: #3f73d3;
    --violet: #6d5fd8;
    --magenta: #d45eb3;
    --gold: #c88a1e;
    --green: #1f9f67;
    --pink: #d85f96;
    --danger: #c94a66;
    --shadow-panel: 0 18px 48px rgba(54, 79, 115, 0.12);
    --shadow-glow: 0 0 0 1px rgba(118, 147, 183, 0.06), 0 12px 24px rgba(94, 123, 164, 0.06);
    --theme-shell-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.96));
    --theme-shell-surface-soft: linear-gradient(180deg, rgba(250, 252, 254, 0.98), rgba(238, 243, 249, 0.96));
    --theme-shell-surface-tint: linear-gradient(180deg, rgba(255, 248, 240, 0.96), rgba(246, 249, 252, 0.96));
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% 16%, rgba(101, 215, 255, 0.12), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(255, 173, 92, 0.14), transparent 20%),
        radial-gradient(circle at 50% 120%, rgba(76, 134, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
}

html[data-theme="light"] body::before {
    background:
        linear-gradient(rgba(26, 57, 92, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 57, 92, 0.038) 1px, transparent 1px);
    mask-image: linear-gradient(180deg, rgba(15, 36, 60, 0.22), transparent 92%);
    opacity: 0.32;
}

html[data-theme="light"] body::after {
    background: linear-gradient(180deg, transparent 0%, rgba(30, 92, 136, 0.035) 48%, transparent 100%);
    opacity: 0.08;
}

html[data-theme="light"] .ambient-grid {
    background:
        linear-gradient(120deg, rgba(101, 215, 255, 0.05), transparent 38%),
        linear-gradient(300deg, rgba(76, 134, 255, 0.05), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(255, 173, 92, 0.08), transparent 34%);
}

html[data-theme="light"] .orb-one {
    background: rgba(101, 215, 255, 0.14);
}

html[data-theme="light"] .orb-two {
    background: rgba(255, 166, 92, 0.12);
}

html[data-theme="light"] .ambient-vignette {
    background: radial-gradient(circle, transparent 52%, rgba(255, 255, 255, 0.08) 100%);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .telemetry-item,
html[data-theme="light"] .system-node,
html[data-theme="light"] .data-table,
html[data-theme="light"] .rams-record-card,
html[data-theme="light"] .placeholder-box,
html[data-theme="light"] .readout-card,
html[data-theme="light"] .sidebar-footer {
    background: var(--theme-shell-surface);
    box-shadow: var(--shadow-panel), var(--shadow-glow);
}

html[data-theme="light"] .sidebar {
    background:
        radial-gradient(circle at 16% 16%, rgba(101, 215, 255, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 252, 0.96));
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 18%, rgba(101, 215, 255, 0.1), transparent 28%),
        linear-gradient(145deg, rgba(101, 215, 255, 0.08), transparent 36%),
        linear-gradient(325deg, rgba(255, 166, 92, 0.08), transparent 42%),
        radial-gradient(circle at 80% 86%, rgba(255, 122, 26, 0.04), transparent 18%);
}

html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .hero-panel::before,
html[data-theme="light"] .panel::before {
    background: linear-gradient(90deg, transparent, rgba(13, 107, 148, 0.24), rgba(224, 106, 22, 0.22), transparent);
    box-shadow: 0 0 14px rgba(13, 107, 148, 0.08);
}

html[data-theme="light"] .brand-block,
html[data-theme="light"] .topbar {
    background: var(--theme-shell-surface-tint);
}

html[data-theme="light"] .brand-block {
    border-color: rgba(224, 106, 22, 0.16);
}

html[data-theme="light"] .brand-logo {
    filter:
        drop-shadow(0 10px 16px rgba(76, 104, 139, 0.1))
        drop-shadow(0 0 12px rgba(255, 122, 26, 0.08));
}

html[data-theme="light"] .topbar {
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96));
}

html[data-theme="light"] .topbar-brand-icon,
html[data-theme="light"] .sidebar-toggle {
    border-color: rgba(224, 106, 22, 0.18);
    background: linear-gradient(180deg, rgba(255, 249, 242, 0.98), rgba(237, 243, 249, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 20px rgba(61, 83, 118, 0.08);
}

html[data-theme="light"] .console-chip,
html[data-theme="light"] .brand-mini-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .table-chip,
html[data-theme="light"] .action-link,
html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 245, 250, 0.96));
    color: var(--text-soft);
}

html[data-theme="light"] .console-chip,
html[data-theme="light"] .brand-mini-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .table-chip,
html[data-theme="light"] .action-link,
html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost,
html[data-theme="light"] .theme-switch {
    border-color: rgba(57, 84, 116, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .console-chip.live,
html[data-theme="light"] .brand-mini-chip {
    color: #8b4a13;
    border-color: rgba(224, 106, 22, 0.2);
    box-shadow: 0 0 14px rgba(224, 106, 22, 0.08);
}

html[data-theme="light"] .console-chip.armed,
html[data-theme="light"] .status-pill {
    color: #7b5a17;
    border-color: rgba(200, 138, 30, 0.22);
    box-shadow: 0 0 12px rgba(200, 138, 30, 0.06);
}

html[data-theme="light"] .console-chip.sync,
html[data-theme="light"] .brand-mini-chip-muted,
html[data-theme="light"] .action-primary,
html[data-theme="light"] .table-chip.rams-type-pill-workshop {
    color: var(--cyan-deep);
    border-color: rgba(13, 107, 148, 0.18);
    box-shadow: 0 0 12px rgba(13, 107, 148, 0.06);
}

html[data-theme="light"] .theme-switch {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 251, 0.96));
}

html[data-theme="light"] .theme-option.is-active {
    color: #16324a;
    background: linear-gradient(135deg, rgba(255, 224, 190, 0.96), rgba(212, 238, 247, 0.96));
    border-color: rgba(224, 106, 22, 0.18);
    box-shadow: 0 10px 20px rgba(61, 83, 118, 0.08);
}

html[data-theme="light"] .theme-option:hover,
html[data-theme="light"] .theme-option:focus-visible {
    border-color: rgba(13, 107, 148, 0.18);
}

html[data-theme="light"] .sidebar-nav a {
    background: rgba(255, 255, 255, 0.44);
    color: var(--text-soft);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    border-color: rgba(224, 106, 22, 0.18);
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.1), rgba(255, 122, 26, 0.06) 20%, transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 14px 24px rgba(61, 83, 118, 0.08);
}

html[data-theme="light"] .sidebar-nav a::before {
    background: linear-gradient(180deg, rgba(255, 122, 26, 0), rgba(224, 106, 22, 0.84), rgba(13, 107, 148, 0));
}

html[data-theme="light"] .sidebar-nav a::after {
    background: linear-gradient(120deg, rgba(13, 107, 148, 0.36), rgba(76, 134, 255, 0.16), rgba(224, 106, 22, 0.34));
}

html[data-theme="light"] .button.primary,
html[data-theme="light"] .rams-list-page .button.primary {
    background: linear-gradient(135deg, #fff3e1 0%, #ffcb8d 24%, #ff9751 58%, #f06a21 100%);
    color: #261106;
    box-shadow:
        0 12px 24px rgba(224, 106, 22, 0.18),
        0 0 20px rgba(255, 203, 141, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .operative-form select,
html[data-theme="light"] .rams-list-filter-field select,
html[data-theme="light"] .rams-list-filter-field input {
    border-color: rgba(57, 84, 116, 0.16);
    background: linear-gradient(180deg, #ffffff, #f4f8fb);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .rams-list-filter-field input::placeholder {
    color: #7a8ea6;
}

html[data-theme="light"] .operative-form select,
html[data-theme="light"] .rams-list-filter-field select {
    color-scheme: light;
}

html[data-theme="light"] select option,
html[data-theme="light"] .operative-form select option,
html[data-theme="light"] .rams-list-filter-field select option {
    background: #ffffff;
    color: #182433;
}

html[data-theme="light"] thead th {
    color: #4d6780;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), transparent 40%),
        rgba(241, 246, 251, 0.98);
}

html[data-theme="light"] th,
html[data-theme="light"] td {
    border-bottom-color: rgba(57, 84, 116, 0.08);
}

html[data-theme="light"] tbody tr:hover {
    background: rgba(233, 242, 248, 0.82);
    box-shadow: inset 4px 0 0 rgba(224, 106, 22, 0.3);
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .flash {
    background: var(--theme-shell-surface-soft);
    color: var(--text-soft);
}

html[data-theme="light"] .empty-state {
    border-color: rgba(13, 107, 148, 0.18);
}

html[data-theme="light"] .flash-success {
    background: linear-gradient(180deg, rgba(232, 249, 239, 0.98), rgba(220, 243, 230, 0.98));
    border-color: rgba(31, 159, 103, 0.2);
}

html[data-theme="light"] .flash-error,
html[data-theme="light"] .action-danger {
    background: linear-gradient(180deg, rgba(255, 240, 244, 0.98), rgba(250, 225, 232, 0.98));
    border-color: rgba(201, 74, 102, 0.2);
    color: #8d3147;
}

html[data-theme="light"] .chip-safe {
    color: #0c668e;
    background: rgba(220, 242, 250, 0.94);
}

html[data-theme="light"] .chip-alert,
html[data-theme="light"] .rams-type-pill-site {
    color: #8b4a13;
    border-color: rgba(224, 106, 22, 0.2);
    background: linear-gradient(180deg, rgba(255, 242, 227, 0.98), rgba(253, 233, 212, 0.98));
}

html[data-theme="light"] .sidebar-backdrop {
    background: rgba(26, 48, 74, 0.18);
}

html[data-theme="light"] .panel-heading h3,
html[data-theme="light"] .hero-panel h2,
html[data-theme="light"] .placeholder-box h4,
html[data-theme="light"] .rams-record-card__identity h4 {
    color: var(--text);
}

html[data-theme="light"] {
    --bg-void: #dbe4ec;
    --bg-deep: #f4f7fa;
    --bg-mid: #c4d1dd;
    --panel: rgba(255, 255, 255, 0.95);
    --panel-strong: rgba(255, 255, 255, 0.992);
    --panel-soft: rgba(246, 250, 253, 0.96);
    --line: rgba(63, 85, 111, 0.16);
    --line-strong: rgba(63, 85, 111, 0.28);
    --line-hot: rgba(224, 106, 22, 0.42);
    --text: #13202d;
    --text-soft: #31485f;
    --muted: #5f748a;
    --cyan: #0f7fa8;
    --cyan-bright: #0b6587;
    --cyan-deep: #084d67;
    --blue: #3769c9;
    --gold: #b67a13;
    --green: #0f9860;
    --pink: #ca5c8e;
    --danger: #c8405a;
    --shadow-panel: 0 22px 48px rgba(39, 57, 82, 0.11);
    --shadow-glow: 0 0 0 1px rgba(110, 136, 169, 0.05), 0 12px 24px rgba(82, 105, 138, 0.06);
    --theme-shell-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 251, 253, 0.985));
    --theme-shell-surface-soft: linear-gradient(180deg, rgba(248, 251, 253, 0.98), rgba(240, 245, 249, 0.975));
    --theme-shell-surface-tint: linear-gradient(180deg, rgba(251, 253, 254, 0.995), rgba(243, 247, 250, 0.985));
    --theme-shell-border: rgba(69, 91, 117, 0.16);
    --theme-shell-border-strong: rgba(51, 71, 97, 0.24);
    --theme-shell-divider: rgba(20, 41, 66, 0.08);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% 16%, rgba(101, 215, 255, 0.14), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(255, 155, 70, 0.14), transparent 18%),
        radial-gradient(circle at 48% 118%, rgba(76, 134, 255, 0.07), transparent 28%),
        linear-gradient(180deg, #f3f6f9 0%, #e6edf3 100%);
}

html[data-theme="light"] body::before {
    background:
        linear-gradient(rgba(22, 45, 71, 0.042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 45, 71, 0.042) 1px, transparent 1px);
    mask-image: linear-gradient(180deg, rgba(16, 33, 54, 0.22), transparent 92%);
    opacity: 0.28;
}

html[data-theme="light"] .ambient-grid {
    background:
        linear-gradient(120deg, rgba(101, 215, 255, 0.07), transparent 36%),
        linear-gradient(300deg, rgba(76, 134, 255, 0.05), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 163, 88, 0.08), transparent 32%);
}

html[data-theme="light"] .ambient-vignette {
    background: radial-gradient(circle, transparent 54%, rgba(226, 234, 242, 0.12) 100%);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .telemetry-item,
html[data-theme="light"] .system-node,
html[data-theme="light"] .data-table,
html[data-theme="light"] .rams-record-card,
html[data-theme="light"] .placeholder-box,
html[data-theme="light"] .readout-card,
html[data-theme="light"] .sidebar-footer {
    border-color: var(--theme-shell-border);
}

html[data-theme="light"] .sidebar {
    background:
        radial-gradient(circle at 15% 16%, rgba(101, 215, 255, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(245, 248, 251, 0.985), rgba(237, 243, 248, 0.98));
    box-shadow:
        0 24px 48px rgba(37, 55, 81, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 18%, rgba(101, 215, 255, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(101, 215, 255, 0.08), transparent 36%),
        linear-gradient(325deg, rgba(255, 163, 88, 0.08), transparent 42%),
        radial-gradient(circle at 80% 86%, rgba(255, 122, 26, 0.045), transparent 18%);
}

html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .hero-panel::before,
html[data-theme="light"] .panel::before {
    background: linear-gradient(90deg, transparent, rgba(11, 101, 135, 0.32), rgba(224, 106, 22, 0.28), transparent);
    box-shadow: 0 0 18px rgba(11, 101, 135, 0.1);
}

html[data-theme="light"] .brand-block {
    border-color: rgba(255, 150, 78, 0.22);
    background:
        radial-gradient(circle at 14% 16%, rgba(255, 163, 88, 0.2), transparent 26%),
        radial-gradient(circle at 84% 16%, rgba(101, 215, 255, 0.14), transparent 24%),
        linear-gradient(165deg, #253546 0%, #18222e 100%);
    box-shadow:
        0 18px 30px rgba(17, 31, 48, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .brand-logo {
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.24))
        drop-shadow(0 0 12px rgba(255, 122, 26, 0.12));
}

html[data-theme="light"] .brand-block .brand-mini-chip {
    background: rgba(9, 19, 31, 0.34);
    border-color: rgba(255, 150, 78, 0.28);
    color: #fff0de;
}

html[data-theme="light"] .brand-block .brand-mini-chip-muted {
    border-color: rgba(101, 215, 255, 0.24);
    color: #d9eefb;
}

html[data-theme="light"] .brand-block .brand-copy h2 {
    color: #fff6ed;
}

html[data-theme="light"] .brand-block .brand-copy p {
    color: #d4dfe9;
}

html[data-theme="light"] .brand-block .eyebrow {
    color: #ffb56d;
}

html[data-theme="light"] .sidebar-nav a {
    border-color: rgba(86, 109, 135, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 247, 251, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    border-color: rgba(224, 106, 22, 0.22);
    background:
        linear-gradient(90deg, rgba(11, 101, 135, 0.12), rgba(224, 106, 22, 0.08) 24%, rgba(255, 255, 255, 0.98) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 248, 251, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 26px rgba(40, 58, 84, 0.1);
}

html[data-theme="light"] .nav-title {
    color: #172635;
}

html[data-theme="light"] .nav-meta {
    color: #62768b;
}

html[data-theme="light"] .readout-card,
html[data-theme="light"] .sidebar-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(242, 247, 251, 0.975));
    box-shadow:
        0 14px 24px rgba(44, 63, 92, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .readout-card strong {
    color: #0b6587;
}

html[data-theme="light"] .topbar {
    border-color: var(--theme-shell-border);
    background:
        linear-gradient(90deg, rgba(224, 106, 22, 0.08), rgba(11, 101, 135, 0.04) 34%, transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(244, 248, 251, 0.98));
    box-shadow:
        0 18px 34px rgba(39, 57, 82, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .topbar-brand-icon,
html[data-theme="light"] .sidebar-toggle {
    border-color: rgba(224, 106, 22, 0.22);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 188, 124, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 242, 247, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 20px rgba(61, 83, 118, 0.08);
}

html[data-theme="light"] .console-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .table-chip,
html[data-theme="light"] .action-link,
html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost,
html[data-theme="light"] .theme-switch {
    border-color: rgba(69, 91, 117, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 16px rgba(58, 79, 108, 0.05);
}

html[data-theme="light"] .console-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .table-chip,
html[data-theme="light"] .action-link,
html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(239, 244, 249, 0.975));
    color: #30485f;
}

html[data-theme="light"] .console-chip.live,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .chip-alert,
html[data-theme="light"] .rams-type-pill-site {
    background: linear-gradient(180deg, rgba(255, 244, 230, 0.995), rgba(252, 231, 207, 0.985));
    color: #8b4a13;
    border-color: rgba(224, 106, 22, 0.22);
}

html[data-theme="light"] .console-chip.armed {
    background: linear-gradient(180deg, rgba(255, 247, 220, 0.995), rgba(250, 237, 189, 0.985));
    color: #7a5909;
    border-color: rgba(183, 122, 19, 0.22);
}

html[data-theme="light"] .console-chip.sync,
html[data-theme="light"] .table-chip.rams-type-pill-workshop,
html[data-theme="light"] .action-primary,
html[data-theme="light"] .chip-safe {
    background: linear-gradient(180deg, rgba(238, 248, 255, 0.995), rgba(224, 240, 249, 0.985));
    color: #0a6486;
    border-color: rgba(11, 101, 135, 0.2);
}

html[data-theme="light"] .theme-switch {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 246, 250, 0.985));
}

html[data-theme="light"] .theme-option {
    color: #486075;
}

html[data-theme="light"] .theme-option.is-active {
    color: #13202d;
    background: linear-gradient(135deg, rgba(255, 215, 173, 0.98), rgba(206, 231, 241, 0.98));
    border-color: rgba(224, 106, 22, 0.2);
    box-shadow:
        0 10px 20px rgba(61, 83, 118, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] .button.primary,
html[data-theme="light"] .rams-list-page .button.primary {
    border-color: rgba(207, 92, 19, 0.22);
    background: linear-gradient(135deg, #fff0dc 0%, #ffbf73 22%, #ff8a31 56%, #dd5b12 100%);
    color: #261005;
    box-shadow:
        0 14px 26px rgba(207, 92, 19, 0.22),
        0 0 18px rgba(255, 191, 115, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html[data-theme="light"] .button:hover,
html[data-theme="light"] .button:focus-visible,
html[data-theme="light"] .action-link:hover {
    box-shadow:
        0 14px 24px rgba(40, 58, 84, 0.09),
        0 0 20px rgba(224, 106, 22, 0.08);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .operative-form select,
html[data-theme="light"] .rams-list-filter-field select,
html[data-theme="light"] .rams-list-filter-field input {
    border-color: rgba(68, 91, 117, 0.18);
    background: linear-gradient(180deg, #ffffff, #f7fafc);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 1px 2px rgba(21, 38, 57, 0.03);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .operative-form select:focus,
html[data-theme="light"] .rams-list-filter-field select:focus,
html[data-theme="light"] .rams-list-filter-field input:focus {
    border-color: rgba(11, 101, 135, 0.34);
    box-shadow:
        0 0 0 3px rgba(11, 101, 135, 0.1),
        0 0 24px rgba(11, 101, 135, 0.08);
}

html[data-theme="light"] .data-table,
html[data-theme="light"] .rams-list-page .data-table,
html[data-theme="light"] .rams-record-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(247, 250, 252, 0.985));
    box-shadow:
        0 18px 32px rgba(40, 58, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] thead th,
html[data-theme="light"] .rams-list-page thead th {
    color: #445a70;
    background:
        linear-gradient(180deg, rgba(238, 243, 247, 0.99), rgba(229, 236, 242, 0.985));
}

html[data-theme="light"] th,
html[data-theme="light"] td {
    border-bottom-color: rgba(68, 91, 117, 0.09);
}

html[data-theme="light"] tbody tr:nth-child(even) {
    background: rgba(243, 247, 250, 0.78);
}

html[data-theme="light"] tbody tr:hover {
    background: rgba(232, 240, 246, 0.9);
    box-shadow: inset 4px 0 0 rgba(224, 106, 22, 0.38);
}

html[data-theme="light"] .panel-heading h3,
html[data-theme="light"] .hero-panel h2,
html[data-theme="light"] .placeholder-box h4,
html[data-theme="light"] .rams-record-card__identity h4 {
    color: #13202d;
}

html[data-theme="light"] .rams-record-value,
html[data-theme="light"] .hero-copy .muted,
html[data-theme="light"] .muted {
    color: #435c73;
}

html[data-theme="light"] .rams-record-card__eyebrow,
html[data-theme="light"] .rams-record-label,
html[data-theme="light"] .panel-badge,
html[data-theme="light"] .eyebrow {
    color: #0f7fa8;
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .flash {
    border-color: rgba(69, 91, 117, 0.16);
    background: linear-gradient(180deg, rgba(250, 252, 254, 0.995), rgba(242, 247, 251, 0.985));
}

html[data-theme="light"] .library-inline-note,
html[data-theme="light"] .library-inline-form-shell {
    border-color: rgba(69, 91, 117, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.996), rgba(244, 248, 251, 0.986));
    box-shadow:
        0 18px 30px rgba(40, 58, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .flash-success {
    background: linear-gradient(180deg, rgba(234, 248, 241, 0.995), rgba(223, 243, 231, 0.985));
    border-color: rgba(15, 152, 96, 0.2);
}

html[data-theme="light"] .flash-error,
html[data-theme="light"] .action-danger {
    background: linear-gradient(180deg, rgba(255, 241, 244, 0.995), rgba(251, 227, 233, 0.985));
    border-color: rgba(200, 64, 90, 0.22);
    color: #8c3147;
}

html[data-theme="light"] {
    --bg-void: #d7e0e8;
    --bg-deep: #f1f5f9;
    --bg-mid: #bccad7;
    --cyan: #1394cb;
    --cyan-bright: #0f73a3;
    --cyan-deep: #085a7c;
    --blue: #2f68d3;
    --gold: #c07a0e;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% 16%, rgba(101, 215, 255, 0.13), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(255, 145, 56, 0.13), transparent 18%),
        linear-gradient(180deg, #d7e0e8 0%, #dde6ee 14%, #e9eff4 34%, #f1f5f9 100%);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    border-color: rgba(239, 108, 16, 0.28);
    background:
        linear-gradient(92deg, rgba(15, 115, 163, 0.14), rgba(239, 108, 16, 0.12) 24%, rgba(255, 255, 255, 0.99) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(241, 246, 250, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 14px 24px rgba(41, 61, 85, 0.08),
        0 0 18px rgba(239, 108, 16, 0.07);
}

html[data-theme="light"] .console-chip.live,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .chip-alert,
html[data-theme="light"] .rams-type-pill-site {
    background: linear-gradient(180deg, rgba(255, 241, 221, 0.998), rgba(255, 225, 188, 0.988));
    color: #844009;
    border-color: rgba(230, 102, 12, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        0 10px 18px rgba(230, 102, 12, 0.08);
}

html[data-theme="light"] .console-chip.sync,
html[data-theme="light"] .table-chip.rams-type-pill-workshop,
html[data-theme="light"] .action-primary,
html[data-theme="light"] .chip-safe {
    background: linear-gradient(180deg, rgba(232, 247, 255, 0.998), rgba(213, 238, 249, 0.988));
    color: #095f84;
    border-color: rgba(15, 115, 163, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 10px 18px rgba(15, 115, 163, 0.08);
}

html[data-theme="light"] .theme-option.is-active {
    color: #122130;
    background: linear-gradient(135deg, rgba(255, 207, 154, 0.99), rgba(195, 229, 243, 0.99));
    border-color: rgba(230, 102, 12, 0.24);
    box-shadow:
        0 12px 22px rgba(61, 83, 118, 0.12),
        0 0 14px rgba(230, 102, 12, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] .button.primary,
html[data-theme="light"] .rams-list-page .button.primary {
    border-color: rgba(196, 76, 7, 0.28);
    background: linear-gradient(135deg, #ffe8c7 0%, #ffb55f 20%, #f57e18 54%, #cb4600 100%);
    color: #1f0b02;
    box-shadow:
        0 16px 28px rgba(203, 70, 0, 0.22),
        0 0 18px rgba(245, 126, 24, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="light"] .button.primary:hover,
html[data-theme="light"] .button.primary:focus-visible,
html[data-theme="light"] .rams-list-page .button.primary:hover,
html[data-theme="light"] .rams-list-page .button.primary:focus-visible {
    border-color: rgba(171, 55, 0, 0.34);
    background: linear-gradient(135deg, #ffedcf 0%, #ffbe6e 18%, #fb8620 52%, #bb3f00 100%);
    box-shadow:
        0 18px 30px rgba(187, 63, 0, 0.24),
        0 0 22px rgba(251, 134, 32, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

html[data-theme="light"] .button.primary:active,
html[data-theme="light"] .rams-list-page .button.primary:active {
    background: linear-gradient(135deg, #ffdca8 0%, #ffa946 22%, #ef7414 56%, #a83700 100%);
    box-shadow:
        0 10px 18px rgba(168, 55, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .sidebar {
    border-color: rgba(53, 73, 98, 0.2);
    background:
        radial-gradient(circle at 14% 16%, rgba(92, 214, 255, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(242, 247, 251, 0.992), rgba(229, 237, 244, 0.986));
    box-shadow:
        0 28px 52px rgba(34, 51, 77, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset -1px 0 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 12% 16%, rgba(92, 214, 255, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(92, 214, 255, 0.08), transparent 34%),
        linear-gradient(325deg, rgba(255, 152, 66, 0.09), transparent 42%),
        radial-gradient(circle at 82% 86%, rgba(255, 122, 26, 0.06), transparent 18%);
}

html[data-theme="light"] .sidebar-footer {
    border-color: rgba(57, 78, 103, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.992), rgba(238, 244, 249, 0.982));
    box-shadow:
        0 16px 26px rgba(44, 63, 92, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .brand-block {
    border-color: rgba(255, 146, 62, 0.26);
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 169, 92, 0.24), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(92, 214, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #2b3c4d 0%, #1e2b38 56%, #16202a 100%);
    box-shadow:
        0 22px 36px rgba(15, 26, 40, 0.22),
        0 0 0 1px rgba(255, 155, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -18px 24px rgba(7, 14, 21, 0.12);
}

html[data-theme="light"] .brand-logo {
    filter:
        drop-shadow(0 14px 18px rgba(0, 0, 0, 0.26))
        drop-shadow(0 0 14px rgba(255, 136, 42, 0.14));
}

html[data-theme="light"] .brand-block .brand-mini-chip {
    background: rgba(8, 18, 30, 0.38);
    border-color: rgba(255, 161, 86, 0.32);
    color: #fff3e5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .brand-block .brand-mini-chip-muted {
    border-color: rgba(92, 214, 255, 0.28);
    color: #ddf3ff;
}

html[data-theme="light"] .brand-block .brand-copy p {
    color: #dbe5ee;
}

html[data-theme="light"] .sidebar-nav a {
    border-color: rgba(77, 100, 126, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 245, 250, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 14px rgba(41, 61, 85, 0.04);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    border-color: rgba(239, 108, 16, 0.3);
    background:
        linear-gradient(92deg, rgba(15, 115, 163, 0.16), rgba(239, 108, 16, 0.14) 24%, rgba(255, 255, 255, 0.99) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(239, 245, 250, 0.988));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 16px 26px rgba(41, 61, 85, 0.1),
        0 0 18px rgba(239, 108, 16, 0.08);
}

html[data-theme="light"] .sidebar {
    border-color: rgba(48, 68, 92, 0.22);
    background:
        linear-gradient(180deg, rgba(234, 241, 247, 0.992), rgba(224, 233, 241, 0.986));
    box-shadow:
        0 30px 56px rgba(32, 48, 72, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset -1px 0 0 rgba(255, 255, 255, 0.38),
        inset 0 0 0 1px rgba(17, 33, 52, 0.035);
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 15%, rgba(92, 214, 255, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(92, 214, 255, 0.08), transparent 34%),
        linear-gradient(325deg, rgba(255, 152, 66, 0.1), transparent 42%),
        radial-gradient(circle at 82% 86%, rgba(255, 122, 26, 0.06), transparent 18%);
}

html[data-theme="light"] .sidebar::after {
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, rgba(92, 214, 255, 0), rgba(92, 214, 255, 0.42), rgba(255, 136, 42, 0.34), rgba(92, 214, 255, 0));
    box-shadow: 0 0 18px rgba(92, 214, 255, 0.12);
}

html[data-theme="light"] .brand-block {
    border-color: rgba(255, 151, 76, 0.28);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 171, 96, 0.26), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(92, 214, 255, 0.2), transparent 24%),
        linear-gradient(180deg, #304354 0%, #233240 54%, #18222c 100%);
    box-shadow:
        0 24px 38px rgba(12, 22, 34, 0.24),
        0 0 0 1px rgba(255, 154, 80, 0.1),
        0 0 22px rgba(92, 214, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -20px 26px rgba(5, 11, 17, 0.16);
}

html[data-theme="light"] .brand-logo {
    filter:
        drop-shadow(0 16px 20px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 16px rgba(255, 136, 42, 0.16));
}

html[data-theme="light"] .sidebar-nav {
    gap: 12px;
}

html[data-theme="light"] .sidebar-nav a {
    border-color: rgba(72, 95, 121, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(235, 242, 248, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 16px rgba(41, 61, 85, 0.05),
        0 0 0 1px rgba(17, 33, 52, 0.025);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    border-color: rgba(239, 108, 16, 0.32);
    background:
        linear-gradient(92deg, rgba(15, 115, 163, 0.18), rgba(239, 108, 16, 0.16) 24%, rgba(255, 255, 255, 0.99) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(235, 242, 248, 0.988));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 18px 28px rgba(41, 61, 85, 0.11),
        0 0 18px rgba(239, 108, 16, 0.09),
        0 0 0 1px rgba(15, 115, 163, 0.04);
}

html[data-theme="light"] .sidebar {
    background:
        radial-gradient(circle at 14% 14%, rgba(92, 214, 255, 0.15), transparent 24%),
        linear-gradient(180deg, rgba(224, 234, 242, 0.994), rgba(212, 223, 233, 0.99));
    box-shadow:
        0 32px 60px rgba(29, 45, 67, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset -1px 0 0 rgba(255, 255, 255, 0.42),
        inset 0 0 0 1px rgba(17, 33, 52, 0.045),
        0 0 22px rgba(92, 214, 255, 0.04);
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 14%, rgba(92, 214, 255, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%),
        linear-gradient(145deg, rgba(92, 214, 255, 0.08), transparent 34%),
        linear-gradient(325deg, rgba(255, 152, 66, 0.11), transparent 42%),
        radial-gradient(circle at 82% 86%, rgba(255, 122, 26, 0.06), transparent 18%);
}

html[data-theme="light"] .sidebar::after {
    background: linear-gradient(90deg, rgba(92, 214, 255, 0), rgba(92, 214, 255, 0.48), rgba(255, 136, 42, 0.38), rgba(92, 214, 255, 0));
    box-shadow: 0 0 22px rgba(92, 214, 255, 0.14);
}

html[data-theme="light"] .brand-block {
    border-color: rgba(255, 153, 79, 0.3);
    background:
        radial-gradient(circle at 18% 15%, rgba(255, 171, 96, 0.28), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(92, 214, 255, 0.22), transparent 24%),
        linear-gradient(180deg, #324556 0%, #243342 54%, #18222c 100%);
    box-shadow:
        0 26px 40px rgba(10, 20, 32, 0.26),
        0 0 0 1px rgba(255, 156, 82, 0.11),
        0 0 24px rgba(92, 214, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -22px 28px rgba(5, 11, 17, 0.18);
}

html[data-theme="light"] .brand-logo {
    filter:
        drop-shadow(0 18px 22px rgba(0, 0, 0, 0.3))
        drop-shadow(0 0 18px rgba(255, 136, 42, 0.18));
}

html[data-theme="light"] .sidebar-nav a {
    border-color: rgba(70, 94, 120, 0.16);
    background:
        linear-gradient(180deg, rgba(248, 251, 254, 0.96), rgba(228, 236, 243, 0.93));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 12px 18px rgba(41, 61, 85, 0.06),
        0 0 0 1px rgba(17, 33, 52, 0.03);
}

html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a.active {
    background:
        linear-gradient(92deg, rgba(15, 115, 163, 0.2), rgba(239, 108, 16, 0.18) 24%, rgba(255, 255, 255, 0.99) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(229, 237, 244, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.97),
        0 20px 30px rgba(41, 61, 85, 0.12),
        0 0 20px rgba(239, 108, 16, 0.1),
        0 0 0 1px rgba(15, 115, 163, 0.05);
}

html[data-theme="light"] .library-focus-card,
html[data-theme="light"] .library-entity-card,
html[data-theme="light"] .workflow-placeholder {
    border-color: rgba(67, 90, 116, 0.16);
    background:
        linear-gradient(145deg, rgba(15, 115, 163, 0.08), rgba(239, 108, 16, 0.04) 42%, transparent 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.996), rgba(242, 247, 251, 0.986));
    box-shadow:
        0 18px 30px rgba(40, 58, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .library-focus-card {
    border-color: rgba(224, 106, 22, 0.22);
    box-shadow:
        0 20px 34px rgba(40, 58, 84, 0.1),
        0 0 18px rgba(224, 106, 22, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .library-entity-card.is-selected {
    border-color: rgba(224, 106, 22, 0.24);
    box-shadow:
        0 18px 32px rgba(40, 58, 84, 0.1),
        0 0 16px rgba(15, 115, 163, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .library-meta-grid strong,
html[data-theme="light"] .workflow-column-head h3,
html[data-theme="light"] .workflow-subhead h4,
html[data-theme="light"] .library-focus-head h4,
html[data-theme="light"] .library-entity-head h4,
html[data-theme="light"] .workflow-placeholder h3 {
    color: #142231;
}

html[data-theme="light"] .library-meta-grid span,
html[data-theme="light"] .library-meta-stack span,
html[data-theme="light"] .library-count-pill,
html[data-theme="light"] .library-state-pill {
    border-color: rgba(69, 91, 117, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(239, 244, 249, 0.984));
    color: #445a70;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 8px 16px rgba(58, 79, 108, 0.05);
}

html[data-theme="light"] .library-state-pill.is-selected {
    border-color: rgba(224, 106, 22, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 242, 226, 0.998), rgba(255, 227, 196, 0.988));
    color: #8a4912;
}

html[data-theme="light"] .library-state-pill.is-primary {
    border-color: rgba(15, 115, 163, 0.22);
    background:
        linear-gradient(180deg, rgba(233, 247, 255, 0.998), rgba(215, 238, 249, 0.988));
    color: #0a6486;
}

@media (max-width: 1180px) {
    .library-workflow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .workflow-column {
        padding: 18px;
    }

    .workflow-column-head,
    .workflow-subhead,
    .library-focus-head,
    .library-entity-head,
    .library-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .library-meta-grid {
        gap: 8px;
    }

    .library-meta-grid span,
    .library-meta-stack span,
    .library-count-pill,
    .library-state-pill {
        width: fit-content;
        max-width: 100%;
    }
}

html[data-theme="light"] .customer-tile,
html[data-theme="light"] .customer-form-panel,
html[data-theme="light"] .customer-overview-card,
html[data-theme="light"] .customer-extra-contacts-card,
html[data-theme="light"] .site-list-card,
html[data-theme="light"] .site-detail-card,
html[data-theme="light"] .site-contact-card,
html[data-theme="light"] .customer-empty-panel,
html[data-theme="light"] .site-card,
html[data-theme="light"] .compact-contact-card,
html[data-theme="light"] .site-contact-row,
html[data-theme="light"] .customer-library-header {
    border-color: rgba(67, 90, 116, 0.16);
    background:
        linear-gradient(145deg, rgba(15, 115, 163, 0.08), rgba(239, 108, 16, 0.04) 42%, transparent 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.996), rgba(242, 247, 251, 0.986));
    box-shadow:
        0 18px 30px rgba(40, 58, 84, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .customer-library-header__main h2,
html[data-theme="light"] .customer-tile h3,
html[data-theme="light"] .site-card h4,
html[data-theme="light"] .site-detail-card h3,
html[data-theme="light"] .site-contact-card h3,
html[data-theme="light"] .customer-overview-card h3,
html[data-theme="light"] .customer-empty-panel h3,
html[data-theme="light"] .compact-contact-card strong {
    color: #142231;
}

html[data-theme="light"] .library-breadcrumbs {
    color: #62768b;
}

html[data-theme="light"] .library-breadcrumbs a {
    color: #0a6486;
}

html[data-theme="light"] .customer-tile__meta span,
html[data-theme="light"] .compact-contact-card__meta span {
    border-color: rgba(69, 91, 117, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(239, 244, 249, 0.984));
    color: #445a70;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 8px 16px rgba(58, 79, 108, 0.05);
}

html[data-theme="light"] .customer-tile__meta strong {
    color: #142231;
}

html[data-theme="light"] .customer-library-header,
html[data-theme="light"] .customer-form-panel,
html[data-theme="light"] .customer-overview-card,
html[data-theme="light"] .customer-extra-contacts-card,
html[data-theme="light"] .site-list-card,
html[data-theme="light"] .site-detail-card,
html[data-theme="light"] .site-contact-card,
html[data-theme="light"] .customer-empty-panel {
    border-color: rgba(58, 81, 108, 0.22);
    background:
        linear-gradient(155deg, rgba(15, 115, 163, 0.095), rgba(239, 108, 16, 0.042) 34%, transparent 76%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(238, 244, 249, 0.992));
    box-shadow:
        0 24px 42px rgba(35, 52, 74, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .customer-tile,
html[data-theme="light"] .site-card,
html[data-theme="light"] .compact-contact-card,
html[data-theme="light"] .site-contact-row {
    border-color: rgba(60, 84, 110, 0.26);
    background:
        linear-gradient(150deg, rgba(15, 115, 163, 0.078), rgba(239, 108, 16, 0.038) 32%, transparent 74%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.999), rgba(248, 251, 253, 0.996));
    box-shadow:
        0 18px 30px rgba(37, 55, 77, 0.11),
        0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .customer-library-header__main,
html[data-theme="light"] .customer-overview-card__head,
html[data-theme="light"] .site-detail-card__head,
html[data-theme="light"] .drill-section-head,
html[data-theme="light"] .site-card__head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(74, 96, 122, 0.14);
}

html[data-theme="light"] .customer-library-header__main h2,
html[data-theme="light"] .customer-tile h3,
html[data-theme="light"] .site-card h4,
html[data-theme="light"] .site-detail-card h3,
html[data-theme="light"] .site-contact-card h3,
html[data-theme="light"] .customer-overview-card h3,
html[data-theme="light"] .customer-empty-panel h3,
html[data-theme="light"] .compact-contact-card strong {
    color: #0f1f2e;
}

html[data-theme="light"] .customer-library-header .muted,
html[data-theme="light"] .customer-drill-shell .muted,
html[data-theme="light"] .site-detail-shell .muted,
html[data-theme="light"] .site-contact-card__note,
html[data-theme="light"] .empty-state {
    color: #465d73;
}

html[data-theme="light"] .customer-tile__subline {
    color: #566d82;
}

html[data-theme="light"] .customer-library-header .eyebrow,
html[data-theme="light"] .customer-drill-shell .eyebrow,
html[data-theme="light"] .site-detail-shell .eyebrow,
html[data-theme="light"] .customer-library-header .panel-badge,
html[data-theme="light"] .customer-drill-shell .panel-badge,
html[data-theme="light"] .site-detail-shell .panel-badge {
    color: #0b739d;
}

html[data-theme="light"] .customer-library-header .status-pill,
html[data-theme="light"] .customer-drill-shell .panel-badge,
html[data-theme="light"] .site-detail-shell .panel-badge,
html[data-theme="light"] .customer-tile__meta span,
html[data-theme="light"] .compact-contact-card__meta span {
    border-color: rgba(66, 91, 118, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.999), rgba(235, 242, 247, 0.992));
    color: #385066;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.97),
        0 12px 20px rgba(45, 65, 89, 0.07);
}

html[data-theme="light"] .customer-library-header .toolbar-actions .button.secondary,
html[data-theme="light"] .customer-form-panel .button.secondary,
html[data-theme="light"] .customer-overview-card .button.secondary,
html[data-theme="light"] .site-list-card .button.secondary,
html[data-theme="light"] .site-detail-card .button.secondary,
html[data-theme="light"] .site-contact-card .button.secondary {
    border-color: rgba(66, 91, 118, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.999), rgba(236, 243, 248, 0.992));
    color: #163146;
    box-shadow:
        0 12px 20px rgba(42, 61, 86, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .customer-library-header .toolbar-actions .button.secondary:hover,
html[data-theme="light"] .customer-form-panel .button.secondary:hover,
html[data-theme="light"] .customer-overview-card .button.secondary:hover,
html[data-theme="light"] .site-list-card .button.secondary:hover,
html[data-theme="light"] .site-detail-card .button.secondary:hover,
html[data-theme="light"] .site-contact-card .button.secondary:hover {
    border-color: rgba(11, 115, 157, 0.28);
    color: #112f43;
}

html[data-theme="light"] .customer-library-header .button.primary,
html[data-theme="light"] .customer-tile .button.primary,
html[data-theme="light"] .customer-form-panel .button.primary,
html[data-theme="light"] .customer-overview-card .button.primary,
html[data-theme="light"] .site-list-card .button.primary,
html[data-theme="light"] .site-detail-card .button.primary,
html[data-theme="light"] .site-contact-card .button.primary {
    box-shadow:
        0 18px 28px rgba(207, 92, 19, 0.24),
        0 0 22px rgba(255, 191, 115, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html[data-theme="light"] .customer-tile .action-link,
html[data-theme="light"] .customer-overview-card .action-link,
html[data-theme="light"] .site-list-card .action-link,
html[data-theme="light"] .site-detail-card .action-link,
html[data-theme="light"] .site-contact-card .action-link {
    border-color: rgba(67, 92, 118, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.999), rgba(237, 243, 248, 0.992));
    color: #184a63;
}

html[data-theme="light"] .customer-overview-card .action-danger,
html[data-theme="light"] .site-list-card .action-danger,
html[data-theme="light"] .site-detail-card .action-danger,
html[data-theme="light"] .site-contact-card .action-danger {
    border-color: rgba(191, 57, 86, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 245, 247, 0.999), rgba(252, 228, 233, 0.99));
    color: #922840;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 10px 18px rgba(180, 54, 82, 0.08);
}

html[data-theme="light"] .customer-overview-card .action-danger:hover,
html[data-theme="light"] .site-list-card .action-danger:hover,
html[data-theme="light"] .site-detail-card .action-danger:hover,
html[data-theme="light"] .site-contact-card .action-danger:hover {
    border-color: rgba(191, 57, 86, 0.38);
    color: #7f1d34;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 14px 24px rgba(180, 54, 82, 0.12);
}

html[data-theme="light"] .customer-library-header input,
html[data-theme="light"] .customer-library-header textarea,
html[data-theme="light"] .customer-library-header select,
html[data-theme="light"] .customer-form-panel input,
html[data-theme="light"] .customer-form-panel textarea,
html[data-theme="light"] .customer-form-panel select,
html[data-theme="light"] .customer-overview-card input,
html[data-theme="light"] .customer-overview-card textarea,
html[data-theme="light"] .customer-overview-card select,
html[data-theme="light"] .site-list-card input,
html[data-theme="light"] .site-list-card textarea,
html[data-theme="light"] .site-list-card select,
html[data-theme="light"] .site-detail-card input,
html[data-theme="light"] .site-detail-card textarea,
html[data-theme="light"] .site-detail-card select,
html[data-theme="light"] .site-contact-card input,
html[data-theme="light"] .site-contact-card textarea,
html[data-theme="light"] .site-contact-card select {
    border-color: rgba(67, 91, 117, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.999), rgba(247, 250, 252, 0.992));
    color: #153042;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 2px 4px rgba(30, 47, 68, 0.04);
}

html[data-theme="light"] .customer-form-panel input:focus,
html[data-theme="light"] .customer-form-panel textarea:focus,
html[data-theme="light"] .customer-form-panel select:focus,
html[data-theme="light"] .customer-overview-card input:focus,
html[data-theme="light"] .customer-overview-card textarea:focus,
html[data-theme="light"] .customer-overview-card select:focus,
html[data-theme="light"] .site-list-card input:focus,
html[data-theme="light"] .site-list-card textarea:focus,
html[data-theme="light"] .site-list-card select:focus,
html[data-theme="light"] .site-detail-card input:focus,
html[data-theme="light"] .site-detail-card textarea:focus,
html[data-theme="light"] .site-detail-card select:focus,
html[data-theme="light"] .site-contact-card input:focus,
html[data-theme="light"] .site-contact-card textarea:focus,
html[data-theme="light"] .site-contact-card select:focus {
    border-color: rgba(11, 115, 157, 0.38);
    box-shadow:
        0 0 0 3px rgba(11, 115, 157, 0.1),
        0 10px 24px rgba(11, 115, 157, 0.1);
}

html[data-theme="light"] .customer-form-panel .form-grid label span,
html[data-theme="light"] .customer-overview-card .form-grid label span,
html[data-theme="light"] .site-list-card .form-grid label span,
html[data-theme="light"] .site-detail-card .form-grid label span,
html[data-theme="light"] .site-contact-row__fields label span {
    color: #3b5369;
}

html[data-theme="light"] .customer-tile:hover,
html[data-theme="light"] .site-card:hover,
html[data-theme="light"] .compact-contact-card:hover {
    border-color: rgba(15, 115, 163, 0.2);
    box-shadow:
        0 22px 34px rgba(36, 53, 76, 0.12),
        0 0 0 1px rgba(15, 115, 163, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .hazard-library-panel--filters {
    background:
        radial-gradient(circle at 14% 16%, rgba(88, 123, 164, 0.04), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(55, 84, 118, 0.03), transparent 22%),
        linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(228, 235, 242, 0.994));
    border-color: rgba(86, 104, 124, 0.24);
    box-shadow:
        0 20px 34px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .hazard-library-panel--categories,
html[data-theme="light"] .hazard-library-panel--category-detail,
html[data-theme="light"] .hazard-library-panel--category-empty {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        radial-gradient(circle at 14% 16%, rgba(196, 112, 40, 0.05), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(48, 126, 92, 0.04), transparent 22%),
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .hazard-library-panel--reveal {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .hazard-library-panel--master {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(233, 239, 245, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .hazard-library-panel--company,
html[data-theme="light"] .hazard-library-panel--editor {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .hazard-library-panel--master .panel-heading {
    border-bottom-color: rgba(180, 88, 21, 0.18);
}

html[data-theme="light"] .hazard-library-panel--company .panel-heading,
html[data-theme="light"] .hazard-library-panel--editor .panel-heading {
    border-bottom-color: rgba(24, 112, 84, 0.18);
}

html[data-theme="light"] .hazard-library-panel--categories .panel-heading,
html[data-theme="light"] .hazard-library-panel--category-detail .panel-heading,
html[data-theme="light"] .hazard-library-panel--focused-filters .panel-heading {
    border-bottom-color: rgba(86, 104, 124, 0.16);
}

html[data-theme="light"] .hazard-library-table--master {
    border-color: rgba(93, 111, 132, 0.24);
    background:
        linear-gradient(180deg, rgba(245, 249, 252, 0.998), rgba(229, 236, 242, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 16px 28px rgba(30, 46, 67, 0.08);
}

html[data-theme="light"] .hazard-library-table--company {
    border-color: rgba(93, 111, 132, 0.24);
    background:
        linear-gradient(180deg, rgba(245, 249, 252, 0.998), rgba(229, 236, 242, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 16px 28px rgba(30, 46, 67, 0.08);
}

html[data-theme="light"] .hazard-library-grid--master thead th {
    color: #6b7f95;
    background:
        linear-gradient(180deg, rgba(228, 235, 242, 0.99), rgba(216, 225, 234, 0.99));
}

html[data-theme="light"] .hazard-library-grid--company thead th {
    color: #6b7f95;
    background:
        linear-gradient(180deg, rgba(228, 235, 242, 0.99), rgba(216, 225, 234, 0.99));
}

html[data-theme="light"] .hazard-library-grid tbody td {
    border-bottom-color: rgba(86, 104, 124, 0.18);
}

html[data-theme="light"] .hazard-library-grid--master tbody tr:hover {
    background: rgba(235, 241, 246, 0.94);
    box-shadow:
        inset 4px 0 0 rgba(187, 90, 20, 0.42),
        inset 0 0 0 1px rgba(86, 104, 124, 0.08);
}

html[data-theme="light"] .hazard-library-grid--company tbody tr:hover {
    background: rgba(234, 241, 238, 0.95);
    box-shadow:
        inset 4px 0 0 rgba(22, 116, 84, 0.38),
        inset 0 0 0 1px rgba(86, 104, 124, 0.08);
}

html[data-theme="light"] .hazard-title {
    color: #1a2938;
}

html[data-theme="light"] .hazard-control-text {
    color: #445667;
}

html[data-theme="light"] .hazard-key-note {
    color: #5a6d80;
}

html[data-theme="light"] .hazard-library-panel .muted,
html[data-theme="light"] .hazard-library-panel .cell-note,
html[data-theme="light"] .hazard-library-panel .panel-heading p {
    color: #536677;
}

html[data-theme="light"] .hazard-category-chip {
    color: #223547;
    border-color: rgba(82, 101, 123, 0.3);
    background:
        linear-gradient(135deg, rgba(245, 248, 251, 0.998), rgba(221, 229, 236, 0.996) 52%, rgba(196, 207, 218, 0.994));
    box-shadow:
        0 8px 14px rgba(36, 53, 76, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="light"] .hazard-category-chip--physical {
    color: #0b2740;
    border-color: rgba(51, 95, 152, 0.38);
    background:
        linear-gradient(135deg, rgba(239, 246, 252, 0.998), rgba(191, 213, 233, 0.996) 28%, rgba(123, 160, 201, 0.994) 68%, rgba(86, 117, 155, 0.995));
    box-shadow:
        0 8px 14px rgba(58, 98, 145, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

html[data-theme="light"] .hazard-category-chip--machinery {
    color: #08232c;
    border-color: rgba(33, 104, 121, 0.38);
    background:
        linear-gradient(135deg, rgba(236, 248, 250, 0.998), rgba(184, 217, 223, 0.996) 28%, rgba(101, 160, 172, 0.994) 68%, rgba(62, 108, 122, 0.995));
    box-shadow:
        0 8px 14px rgba(34, 103, 118, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

html[data-theme="light"] .hazard-category-chip--fire,
html[data-theme="light"] .hazard-category-chip--fire-chemical {
    color: #2f1105;
    border-color: rgba(179, 75, 10, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 239, 217, 0.998), rgba(255, 196, 125, 0.996) 24%, rgba(230, 126, 35, 0.994) 62%, rgba(171, 72, 9, 0.995));
    box-shadow:
        0 8px 14px rgba(171, 72, 9, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-category-chip--chemical {
    color: #2e2306;
    border-color: rgba(142, 112, 35, 0.36);
    background:
        linear-gradient(135deg, rgba(248, 241, 220, 0.998), rgba(227, 199, 122, 0.996) 28%, rgba(190, 145, 49, 0.994) 66%, rgba(123, 91, 20, 0.995));
    box-shadow:
        0 8px 14px rgba(123, 91, 20, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-category-chip--environment {
    color: #082428;
    border-color: rgba(28, 102, 108, 0.36);
    background:
        linear-gradient(135deg, rgba(235, 247, 247, 0.998), rgba(182, 216, 214, 0.996) 28%, rgba(95, 157, 156, 0.994) 66%, rgba(53, 105, 108, 0.995));
    box-shadow:
        0 8px 14px rgba(30, 95, 102, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-category-chip--health {
    color: #071f16;
    border-color: rgba(18, 96, 67, 0.36);
    background:
        linear-gradient(135deg, rgba(236, 247, 240, 0.998), rgba(180, 211, 190, 0.996) 28%, rgba(90, 147, 116, 0.994) 66%, rgba(48, 95, 74, 0.995));
    box-shadow:
        0 8px 14px rgba(18, 90, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-category-chip--access {
    color: #1c1232;
    border-color: rgba(91, 74, 152, 0.36);
    background:
        linear-gradient(135deg, rgba(241, 238, 249, 0.998), rgba(198, 186, 228, 0.996) 28%, rgba(128, 107, 182, 0.994) 66%, rgba(83, 63, 130, 0.995));
    box-shadow:
        0 8px 14px rgba(80, 68, 132, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-category-chip--electrical {
    color: #302406;
    border-color: rgba(141, 114, 40, 0.36);
    background:
        linear-gradient(135deg, rgba(247, 241, 220, 0.998), rgba(226, 200, 123, 0.996) 28%, rgba(187, 147, 52, 0.994) 66%, rgba(121, 92, 24, 0.995));
    box-shadow:
        0 8px 14px rgba(122, 103, 48, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-status-pill--focus {
    color: #10263f;
    border-color: rgba(61, 98, 148, 0.34);
    background:
        linear-gradient(135deg, rgba(234, 241, 248, 0.998), rgba(188, 205, 227, 0.996) 28%, rgba(122, 151, 190, 0.994) 66%, rgba(80, 109, 145, 0.995));
    box-shadow:
        0 10px 18px rgba(61, 98, 148, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .button.secondary.hazard-category-open-link {
    color: #163041;
    border-color: var(--coshh-category-tile-accent-border);
    background:
        radial-gradient(circle at top right, var(--coshh-category-tile-glow), transparent 58%),
        linear-gradient(140deg, var(--coshh-category-tile-wash-strong), rgba(246, 249, 252, 0.94) 78%),
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(241, 246, 249, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 12px 20px rgba(30, 46, 67, 0.08),
        0 0 0 1px var(--coshh-category-tile-glow);
}

html[data-theme="light"] .button.secondary.hazard-category-open-link:hover,
html[data-theme="light"] .button.secondary.hazard-category-open-link:focus-visible,
html[data-theme="light"] .hazard-category-tile--selected .button.secondary.hazard-category-open-link {
    border-color: var(--coshh-category-tile-accent-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 14px 22px rgba(30, 46, 67, 0.1),
        0 0 0 1px var(--coshh-category-tile-glow);
}

html[data-theme="light"] .hazard-category-tile--physical {
    --coshh-category-tile-border: rgba(78, 110, 149, 0.24);
    --coshh-category-tile-accent-border: rgba(78, 110, 149, 0.36);
    --coshh-category-tile-wash-strong: rgba(217, 226, 237, 0.92);
    --coshh-category-tile-wash-soft: rgba(243, 246, 250, 0.97);
    --coshh-category-tile-glow: rgba(78, 110, 149, 0.09);
}

html[data-theme="light"] .hazard-category-tile--machinery {
    --coshh-category-tile-border: rgba(43, 117, 159, 0.24);
    --coshh-category-tile-accent-border: rgba(43, 117, 159, 0.36);
    --coshh-category-tile-wash-strong: rgba(209, 228, 239, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 247, 250, 0.97);
    --coshh-category-tile-glow: rgba(43, 117, 159, 0.09);
}

html[data-theme="light"] .hazard-category-tile--fire,
html[data-theme="light"] .hazard-category-tile--fire-chemical {
    --coshh-category-tile-border: rgba(173, 94, 30, 0.24);
    --coshh-category-tile-accent-border: rgba(173, 94, 30, 0.36);
    --coshh-category-tile-wash-strong: rgba(240, 221, 198, 0.92);
    --coshh-category-tile-wash-soft: rgba(249, 243, 236, 0.97);
    --coshh-category-tile-glow: rgba(173, 94, 30, 0.09);
}

html[data-theme="light"] .hazard-category-tile--chemical {
    --coshh-category-tile-border: rgba(147, 111, 29, 0.24);
    --coshh-category-tile-accent-border: rgba(147, 111, 29, 0.36);
    --coshh-category-tile-wash-strong: rgba(236, 227, 199, 0.92);
    --coshh-category-tile-wash-soft: rgba(248, 245, 235, 0.97);
    --coshh-category-tile-glow: rgba(147, 111, 29, 0.09);
}

html[data-theme="light"] .hazard-category-tile--environment {
    --coshh-category-tile-border: rgba(28, 102, 108, 0.24);
    --coshh-category-tile-accent-border: rgba(28, 102, 108, 0.36);
    --coshh-category-tile-wash-strong: rgba(208, 232, 231, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 248, 247, 0.97);
    --coshh-category-tile-glow: rgba(28, 102, 108, 0.09);
}

html[data-theme="light"] .hazard-category-tile--health {
    --coshh-category-tile-border: rgba(22, 125, 77, 0.24);
    --coshh-category-tile-accent-border: rgba(22, 125, 77, 0.36);
    --coshh-category-tile-wash-strong: rgba(208, 234, 217, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 248, 243, 0.97);
    --coshh-category-tile-glow: rgba(22, 125, 77, 0.09);
}

html[data-theme="light"] .hazard-category-tile--access {
    --coshh-category-tile-border: rgba(91, 74, 152, 0.24);
    --coshh-category-tile-accent-border: rgba(91, 74, 152, 0.36);
    --coshh-category-tile-wash-strong: rgba(227, 220, 241, 0.92);
    --coshh-category-tile-wash-soft: rgba(247, 244, 251, 0.97);
    --coshh-category-tile-glow: rgba(91, 74, 152, 0.09);
}

html[data-theme="light"] .hazard-category-tile--electrical {
    --coshh-category-tile-border: rgba(141, 114, 40, 0.24);
    --coshh-category-tile-accent-border: rgba(141, 114, 40, 0.36);
    --coshh-category-tile-wash-strong: rgba(240, 232, 203, 0.92);
    --coshh-category-tile-wash-soft: rgba(249, 246, 237, 0.97);
    --coshh-category-tile-glow: rgba(141, 114, 40, 0.09);
}

html[data-theme="light"] .hazard-category-tile--default {
    --coshh-category-tile-border: rgba(92, 112, 133, 0.22);
    --coshh-category-tile-accent-border: rgba(92, 112, 133, 0.3);
    --coshh-category-tile-wash-strong: rgba(217, 225, 232, 0.9);
    --coshh-category-tile-wash-soft: rgba(244, 247, 249, 0.97);
    --coshh-category-tile-glow: rgba(92, 112, 133, 0.08);
}

html[data-theme="light"] .hazard-source-badge-fabora,
html[data-theme="light"] .hazard-source-badge-copy,
html[data-theme="light"] .hazard-status-pill--master,
html[data-theme="light"] .panel-badge-fabora,
html[data-theme="light"] .hazard-status-badge--available,
html[data-theme="light"] .hazard-status-badge--copied,
html[data-theme="light"] .action-copy {
    color: #261005;
    border-color: rgba(182, 78, 13, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 231, 196, 0.998), rgba(255, 188, 107, 0.996) 22%, rgba(232, 121, 34, 0.994) 60%, rgba(190, 79, 13, 0.995));
    box-shadow:
        0 10px 18px rgba(190, 79, 13, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-source-badge-company,
html[data-theme="light"] .hazard-status-pill--company,
html[data-theme="light"] .hazard-status-pill--active,
html[data-theme="light"] .panel-badge-company,
html[data-theme="light"] .hazard-status-badge--active,
html[data-theme="light"] .action-edit-company,
html[data-theme="light"] .action-toggle-company.is-active {
    color: #061b14;
    border-color: rgba(18, 92, 68, 0.38);
    background:
        linear-gradient(135deg, rgba(235, 246, 240, 0.998), rgba(176, 210, 188, 0.996) 24%, rgba(84, 143, 113, 0.994) 60%, rgba(45, 94, 73, 0.995));
    box-shadow:
        0 10px 18px rgba(18, 92, 68, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-status-pill--inactive,
html[data-theme="light"] .hazard-status-badge--inactive,
html[data-theme="light"] .action-toggle-company.is-inactive {
    color: #465a6e;
    border-color: rgba(86, 104, 124, 0.24);
    background:
        linear-gradient(180deg, rgba(242, 246, 250, 0.998), rgba(228, 234, 240, 0.995));
}

html[data-theme="light"] .action-copy:hover,
html[data-theme="light"] .action-copy:focus-visible {
    color: #1f0b02;
    border-color: rgba(166, 60, 6, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 236, 204, 0.998), rgba(255, 198, 115, 0.996) 20%, rgba(244, 128, 31, 0.994) 58%, rgba(176, 63, 7, 0.995));
    box-shadow:
        0 12px 20px rgba(176, 63, 7, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

html[data-theme="light"] .action-edit-company:hover,
html[data-theme="light"] .action-edit-company:focus-visible,
html[data-theme="light"] .action-toggle-company.is-active:hover,
html[data-theme="light"] .action-toggle-company.is-active:focus-visible {
    color: #04130d;
    border-color: rgba(14, 74, 54, 0.42);
    background:
        linear-gradient(135deg, rgba(239, 248, 242, 0.998), rgba(187, 220, 197, 0.996) 22%, rgba(92, 150, 120, 0.994) 58%, rgba(35, 80, 60, 0.995));
    box-shadow:
        0 12px 20px rgba(14, 74, 54, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .hazard-editor-note {
    border-color: rgba(86, 104, 124, 0.22);
    background:
        linear-gradient(180deg, rgba(244, 248, 251, 0.998), rgba(229, 236, 241, 0.995));
    color: #4a6073;
}

html[data-theme="light"] {
    --bg-void: #d4dee7;
    --bg-deep: #f3f7fa;
    --bg-mid: #bbc8d4;
    --panel: rgba(248, 251, 253, 0.97);
    --panel-strong: rgba(250, 252, 254, 0.996);
    --panel-soft: rgba(242, 247, 250, 0.975);
    --line: rgba(82, 101, 123, 0.18);
    --line-strong: rgba(82, 101, 123, 0.3);
    --line-hot: rgba(190, 79, 13, 0.34);
    --text: #1a2938;
    --text-soft: #42586c;
    --muted: #607487;
    --cyan: #2f7a99;
    --cyan-bright: #226885;
    --cyan-deep: #174c62;
    --blue: #355f88;
    --gold: #b27318;
    --green: #23624a;
    --danger: #b94b61;
    --shadow-panel: 0 20px 36px rgba(30, 46, 67, 0.1);
    --shadow-glow: 0 0 0 1px rgba(82, 101, 123, 0.06), 0 10px 18px rgba(58, 79, 108, 0.05);
    --theme-shell-surface: linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    --theme-shell-surface-soft: linear-gradient(180deg, rgba(245, 249, 252, 0.998), rgba(228, 236, 242, 0.994));
    --theme-shell-surface-tint: linear-gradient(180deg, rgba(246, 250, 253, 0.998), rgba(231, 238, 244, 0.994));
    --theme-shell-border: rgba(86, 104, 124, 0.22);
    --theme-shell-border-strong: rgba(86, 104, 124, 0.32);
    --theme-shell-divider: rgba(24, 40, 58, 0.09);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 14% 16%, rgba(84, 120, 160, 0.08), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(190, 79, 13, 0.055), transparent 16%),
        linear-gradient(180deg, #d4dee7 0%, #e0e8ef 18%, #ebf1f5 42%, #f3f7fa 100%);
}

html[data-theme="light"] .ambient-grid {
    background:
        linear-gradient(120deg, rgba(78, 120, 163, 0.055), transparent 36%),
        linear-gradient(300deg, rgba(57, 89, 121, 0.045), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(190, 79, 13, 0.05), transparent 28%);
}

html[data-theme="light"] .orb-one {
    background: rgba(84, 120, 160, 0.12);
}

html[data-theme="light"] .orb-two {
    background: rgba(190, 79, 13, 0.08);
}

html[data-theme="light"] .ambient-vignette {
    background: radial-gradient(circle, transparent 54%, rgba(223, 231, 239, 0.12) 100%);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .telemetry-item,
html[data-theme="light"] .system-node,
html[data-theme="light"] .data-table,
html[data-theme="light"] .rams-record-card,
html[data-theme="light"] .placeholder-box,
html[data-theme="light"] .readout-card,
html[data-theme="light"] .sidebar-footer,
html[data-theme="light"] .customer-library-header,
html[data-theme="light"] .customer-tile,
html[data-theme="light"] .customer-form-panel,
html[data-theme="light"] .customer-overview-card,
html[data-theme="light"] .customer-extra-contacts-card,
html[data-theme="light"] .site-list-card,
html[data-theme="light"] .site-card,
html[data-theme="light"] .site-detail-card,
html[data-theme="light"] .site-contact-card,
html[data-theme="light"] .compact-contact-card {
    background: var(--theme-shell-surface);
    border-color: var(--theme-shell-border);
    box-shadow:
        0 20px 34px rgba(30, 46, 67, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .sidebar {
    background:
        radial-gradient(circle at 15% 16%, rgba(84, 120, 160, 0.09), transparent 24%),
        linear-gradient(180deg, rgba(245, 249, 252, 0.988), rgba(235, 241, 246, 0.982));
}

html[data-theme="light"] .sidebar::before {
    background:
        radial-gradient(circle at 14% 18%, rgba(84, 120, 160, 0.09), transparent 28%),
        linear-gradient(145deg, rgba(84, 120, 160, 0.06), transparent 36%),
        radial-gradient(circle at 80% 86%, rgba(190, 79, 13, 0.04), transparent 18%);
}

html[data-theme="light"] .sidebar::after,
html[data-theme="light"] .hero-panel::before,
html[data-theme="light"] .panel::before {
    background: linear-gradient(90deg, transparent, rgba(34, 103, 118, 0.18), rgba(190, 79, 13, 0.15), transparent);
    box-shadow: none;
}

html[data-theme="light"] .topbar {
    border-color: var(--theme-shell-border);
    background:
        linear-gradient(180deg, rgba(247, 250, 253, 0.996), rgba(235, 242, 247, 0.986));
    box-shadow:
        0 16px 30px rgba(30, 46, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .topbar-brand-icon,
html[data-theme="light"] .sidebar-toggle {
    border-color: rgba(168, 92, 29, 0.24);
    background:
        linear-gradient(180deg, rgba(247, 250, 252, 0.996), rgba(230, 237, 243, 0.992));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 8px 16px rgba(36, 53, 76, 0.06);
}

html[data-theme="light"] .console-chip,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .table-chip,
html[data-theme="light"] .action-link,
html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost,
html[data-theme="light"] .theme-switch,
html[data-theme="light"] .panel-badge {
    border-color: rgba(82, 101, 123, 0.24);
    background:
        linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(229, 236, 242, 0.995));
    color: #30475b;
    box-shadow:
        0 8px 14px rgba(36, 53, 76, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .console-chip.live,
html[data-theme="light"] .status-pill,
html[data-theme="light"] .chip-alert,
html[data-theme="light"] .rams-type-pill-site {
    color: #261005;
    border-color: rgba(182, 78, 13, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 233, 201, 0.998), rgba(245, 196, 133, 0.996) 24%, rgba(224, 127, 46, 0.994) 62%, rgba(184, 77, 12, 0.995));
    box-shadow:
        0 10px 18px rgba(184, 77, 12, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .console-chip.sync,
html[data-theme="light"] .table-chip.rams-type-pill-workshop,
html[data-theme="light"] .action-primary,
html[data-theme="light"] .brand-mini-chip-muted {
    color: #061b25;
    border-color: rgba(36, 103, 118, 0.3);
    background:
        linear-gradient(135deg, rgba(236, 245, 249, 0.998), rgba(191, 213, 223, 0.996) 24%, rgba(109, 155, 176, 0.994) 60%, rgba(55, 91, 111, 0.995));
    box-shadow:
        0 10px 18px rgba(34, 103, 118, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] .chip-safe {
    color: #071c14;
    border-color: rgba(18, 96, 67, 0.3);
    background:
        linear-gradient(135deg, rgba(235, 246, 240, 0.998), rgba(188, 216, 200, 0.996) 24%, rgba(97, 147, 121, 0.994) 60%, rgba(49, 91, 74, 0.995));
    box-shadow:
        0 10px 18px rgba(18, 90, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] .theme-switch {
    background:
        linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(231, 238, 244, 0.995));
}

html[data-theme="light"] .theme-option.is-active {
    color: #162534;
    border-color: rgba(190, 79, 13, 0.24);
    background:
        linear-gradient(135deg, rgba(246, 235, 219, 0.996), rgba(222, 232, 238, 0.996));
    box-shadow:
        0 10px 18px rgba(36, 53, 76, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

html[data-theme="light"] .button.primary,
html[data-theme="light"] .rams-list-page .button.primary {
    border-color: rgba(191, 74, 10, 0.32);
    background:
        linear-gradient(135deg, #ffe7c5 0%, #ffb15b 18%, #f27917 56%, #c84800 100%);
    color: #1f0b02;
    box-shadow:
        0 16px 28px rgba(184, 74, 10, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

html[data-theme="light"] .button:hover,
html[data-theme="light"] .button:focus-visible,
html[data-theme="light"] .action-link:hover {
    box-shadow:
        0 14px 22px rgba(36, 53, 76, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .operative-form select,
html[data-theme="light"] .rams-list-filter-field select,
html[data-theme="light"] .rams-list-filter-field input {
    border-color: rgba(82, 101, 123, 0.24);
    background:
        linear-gradient(180deg, rgba(249, 251, 252, 0.998), rgba(235, 241, 246, 0.995));
    color: #1a2938;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 1px 2px rgba(21, 38, 57, 0.03);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .rams-list-filter-field input::placeholder {
    color: #6c8093;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .operative-form select:focus,
html[data-theme="light"] .rams-list-filter-field select:focus,
html[data-theme="light"] .rams-list-filter-field input:focus {
    border-color: rgba(36, 103, 118, 0.36);
    box-shadow:
        0 0 0 3px rgba(36, 103, 118, 0.08),
        0 12px 20px rgba(30, 46, 67, 0.08);
}

html[data-theme="light"] .data-table,
html[data-theme="light"] .rams-list-page .data-table,
html[data-theme="light"] .rams-record-card {
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    border-color: rgba(86, 104, 124, 0.22);
    box-shadow:
        0 18px 30px rgba(30, 46, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] thead th,
html[data-theme="light"] .rams-list-page thead th {
    color: #566b80;
    background:
        linear-gradient(180deg, rgba(229, 236, 242, 0.99), rgba(216, 225, 234, 0.99));
}

html[data-theme="light"] th,
html[data-theme="light"] td {
    border-bottom-color: rgba(86, 104, 124, 0.16);
}

html[data-theme="light"] tbody tr:nth-child(even) {
    background: rgba(242, 246, 249, 0.76);
}

html[data-theme="light"] tbody tr:hover {
    background: rgba(232, 239, 244, 0.94);
    box-shadow:
        inset 4px 0 0 rgba(190, 79, 13, 0.34),
        inset 0 0 0 1px rgba(86, 104, 124, 0.06);
}

html[data-theme="light"] .panel-heading,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .drill-section-head,
html[data-theme="light"] .rams-list-panel-heading {
    border-bottom-color: rgba(86, 104, 124, 0.14);
}

html[data-theme="light"] .panel-heading h3,
html[data-theme="light"] .hero-panel h2,
html[data-theme="light"] .placeholder-box h4,
html[data-theme="light"] .rams-record-card__identity h4,
html[data-theme="light"] .customer-library-header__main h2,
html[data-theme="light"] .customer-tile h3,
html[data-theme="light"] .site-card h4 {
    color: #1a2938;
}

html[data-theme="light"] .rams-record-value,
html[data-theme="light"] .hero-copy .muted,
html[data-theme="light"] .muted,
html[data-theme="light"] .customer-tile__meta,
html[data-theme="light"] .site-card__meta,
html[data-theme="light"] .compact-contact-card__meta {
    color: #4b6073;
}

html[data-theme="light"] .rams-record-card__eyebrow,
html[data-theme="light"] .rams-record-label,
html[data-theme="light"] .eyebrow {
    color: #5f7387;
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .flash,
html[data-theme="light"] .library-inline-note,
html[data-theme="light"] .library-inline-form-shell {
    border-color: rgba(86, 104, 124, 0.18);
    background:
        linear-gradient(180deg, rgba(246, 250, 252, 0.998), rgba(231, 238, 244, 0.994));
    color: #42586c;
    box-shadow:
        0 14px 24px rgba(30, 46, 67, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .flash-success {
    background:
        linear-gradient(180deg, rgba(237, 244, 240, 0.998), rgba(223, 233, 227, 0.994));
    border-color: rgba(22, 112, 82, 0.22);
}

html[data-theme="light"] .flash-error,
html[data-theme="light"] .action-danger {
    background:
        linear-gradient(180deg, rgba(247, 237, 240, 0.998), rgba(238, 223, 228, 0.994));
    border-color: rgba(185, 75, 97, 0.24);
    color: #7d3142;
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card {
    border-color: rgba(90, 111, 132, 0.28);
    background:
        radial-gradient(circle at 16% 14%, rgba(157, 182, 205, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(86, 104, 124, 0.96), rgba(52, 66, 83, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 18px 28px rgba(35, 49, 67, 0.16);
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card span {
    color: rgba(225, 233, 240, 0.78);
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card strong {
    color: #f5f8fb;
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card p {
    color: rgba(233, 239, 245, 0.84);
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card-soft {
    border-color: rgba(104, 131, 154, 0.3);
    background:
        radial-gradient(circle at 82% 18%, rgba(169, 194, 214, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(95, 115, 136, 0.95), rgba(58, 74, 93, 0.98));
}

html[data-theme="light"] .rams-list-page .rams-list-hero-card-soft strong {
    color: #e3f0f8;
}

.coshh-library-hero {
    grid-template-columns: minmax(0, 0.98fr) minmax(360px, 1.02fr);
    gap: 14px;
}

.coshh-library-hero__copy,
.coshh-library-hero__status {
    gap: 10px;
}

.coshh-library-hero__telemetry {
    gap: 12px;
}

.coshh-library-toolbar,
.coshh-library-panel--filters .panel-heading,
.coshh-library-panel--list .panel-heading,
.coshh-library-panel--editor .panel-heading {
    border-bottom-color: rgba(101, 215, 255, 0.12);
}

.coshh-library-panel--filters {
    background:
        radial-gradient(circle at 14% 16%, rgba(101, 215, 255, 0.06), transparent 24%),
        radial-gradient(circle at 84% 20%, rgba(255, 146, 72, 0.05), transparent 20%),
        linear-gradient(180deg, rgba(10, 20, 33, 0.92), rgba(6, 12, 22, 0.97));
}

.coshh-library-panel--list,
.coshh-library-panel--editor,
.coshh-library-panel--reveal {
    border-color: rgba(101, 215, 255, 0.18);
    scroll-margin-top: 96px;
    box-shadow:
        var(--shadow-panel),
        0 0 28px rgba(101, 215, 255, 0.05);
}

.coshh-summary-pill {
    position: relative;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.coshh-summary-pill--saved {
    color: #ffd8b7;
    border-color: rgba(255, 146, 72, 0.28);
    background:
        linear-gradient(180deg, rgba(46, 26, 13, 0.92), rgba(20, 12, 8, 0.97));
}

.coshh-summary-pill--active {
    color: #bff0d2;
    border-color: rgba(75, 172, 127, 0.28);
    background:
        linear-gradient(180deg, rgba(11, 36, 26, 0.92), rgba(7, 18, 15, 0.97));
}

.coshh-summary-pill--inactive {
    color: #d6e5f0;
    border-color: rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(11, 24, 40, 0.92), rgba(6, 13, 24, 0.97));
}

.coshh-summary-pill--categories {
    color: #cde8ff;
    border-color: rgba(84, 145, 226, 0.26);
    background:
        linear-gradient(180deg, rgba(11, 27, 46, 0.92), rgba(7, 15, 28, 0.97));
}

.coshh-summary-pill--hint {
    color: #f7ddb6;
    border-color: rgba(246, 199, 109, 0.28);
}

.coshh-telemetry {
    min-height: 118px;
    padding: 14px 16px;
}

.coshh-telemetry span {
    color: #95afc7;
}

.coshh-telemetry strong {
    margin-bottom: 8px;
}

.coshh-telemetry p,
.coshh-library-page .panel-heading .muted,
.coshh-library-page .muted,
.coshh-library-page .cell-note {
    color: #a8bfd3;
}

.coshh-telemetry--company strong,
.coshh-library-page .action-primary {
    color: #ffd9b7;
}

.coshh-telemetry--builder strong {
    color: #ffd4a0;
}

.coshh-library-table {
    border-color: rgba(101, 215, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(9, 17, 29, 0.82), rgba(5, 10, 18, 0.94));
}

.coshh-library-page .coshh-library-table thead th {
    color: #9fb3c6;
    background:
        linear-gradient(180deg, rgba(15, 28, 44, 0.98), rgba(10, 20, 32, 0.98));
}

.coshh-library-row td {
    vertical-align: top;
}

.coshh-library-row--inactive {
    background: rgba(9, 18, 29, 0.42);
}

.coshh-library-page .coshh-library-row--inactive .coshh-product-name {
    color: #d3dde7;
}

.coshh-product-name {
    display: block;
    color: #f2f8fc;
}

.coshh-product-cell .coshh-inline-note {
    display: grid;
    gap: 4px;
    max-width: 280px;
}

.coshh-note-stack {
    display: grid;
    gap: 8px;
    min-width: 280px;
}

.coshh-note {
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid rgba(101, 215, 255, 0.12);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(14, 27, 43, 0.72), rgba(8, 16, 28, 0.84));
}

.coshh-note-label {
    color: #d6e3ee;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.coshh-note-body {
    color: #b4c8d9;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-line;
}

.coshh-category-chip,
.coshh-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.coshh-category-chip {
    color: #d7e6f2;
    background:
        linear-gradient(180deg, rgba(12, 24, 39, 0.92), rgba(7, 14, 24, 0.98));
}

.coshh-category-chip--adhesive {
    color: #baf3db;
    border-color: rgba(72, 184, 147, 0.28);
    background:
        linear-gradient(180deg, rgba(10, 38, 31, 0.94), rgba(7, 18, 16, 0.98));
}

.coshh-category-chip--aerosol,
.coshh-category-chip--fuel {
    color: #ffd7ae;
    border-color: rgba(255, 149, 74, 0.28);
    background:
        linear-gradient(180deg, rgba(44, 24, 11, 0.94), rgba(22, 12, 8, 0.98));
}

.coshh-category-chip--cleaner,
.coshh-category-chip--gas,
.coshh-category-chip--dust {
    color: #ccefff;
    border-color: rgba(78, 154, 194, 0.28);
    background:
        linear-gradient(180deg, rgba(11, 30, 42, 0.94), rgba(7, 16, 25, 0.98));
}

.coshh-category-chip--coating {
    color: #ffe0a8;
    border-color: rgba(212, 160, 57, 0.28);
    background:
        linear-gradient(180deg, rgba(45, 33, 10, 0.94), rgba(23, 17, 8, 0.98));
}

.coshh-category-chip--corrosive {
    color: #ffc7c2;
    border-color: rgba(210, 92, 88, 0.32);
    background:
        linear-gradient(180deg, rgba(49, 16, 16, 0.95), rgba(25, 10, 11, 0.98));
}

.coshh-category-chip--neutral {
    color: #d9e4ee;
    border-color: rgba(101, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(14, 24, 37, 0.92), rgba(8, 15, 24, 0.98));
}

.coshh-status-badge {
    position: relative;
    gap: 8px;
}

.coshh-status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.coshh-status-badge--active,
.coshh-action-toggle--active {
    color: #bff0d2;
    border-color: rgba(75, 172, 127, 0.28);
    background:
        linear-gradient(180deg, rgba(12, 37, 26, 0.92), rgba(7, 18, 15, 0.97));
}

.coshh-status-badge--inactive,
.coshh-action-toggle--inactive {
    color: #d9e3ec;
    border-color: rgba(101, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(12, 24, 40, 0.92), rgba(7, 14, 25, 0.97));
}

.coshh-form-reveal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.coshh-form-reveal__copy {
    display: grid;
    gap: 8px;
}

.coshh-form-reveal__copy p {
    max-width: 700px;
}

.coshh-form-reveal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.coshh-actions-cell {
    gap: 10px;
}

.coshh-empty-state__copy {
    margin: 10px 0 0;
}

.coshh-example-pills {
    margin-top: 12px;
}

html[data-theme="light"] .coshh-library-panel--filters,
html[data-theme="light"] .coshh-library-panel--list,
html[data-theme="light"] .coshh-library-panel--editor,
html[data-theme="light"] .coshh-library-panel--reveal {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .coshh-library-panel--filters {
    background:
        radial-gradient(circle at 14% 16%, rgba(88, 123, 164, 0.04), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(193, 110, 37, 0.035), transparent 22%),
        linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(228, 235, 242, 0.994));
}

html[data-theme="light"] .coshh-library-toolbar,
html[data-theme="light"] .coshh-library-panel .panel-heading {
    border-bottom-color: rgba(86, 104, 124, 0.16);
}

html[data-theme="light"] .coshh-library-page .muted,
html[data-theme="light"] .coshh-library-page .cell-note,
html[data-theme="light"] .coshh-library-page .panel-heading .muted,
html[data-theme="light"] .coshh-telemetry span,
html[data-theme="light"] .coshh-telemetry p {
    color: #536779;
}

html[data-theme="light"] .coshh-summary-pill--saved {
    color: #311204;
    border-color: rgba(177, 90, 23, 0.34);
    background:
        linear-gradient(135deg, rgba(255, 235, 207, 0.998), rgba(247, 193, 123, 0.996) 26%, rgba(223, 124, 44, 0.994) 64%, rgba(172, 77, 17, 0.995));
    box-shadow:
        0 10px 18px rgba(172, 77, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .coshh-summary-pill--active {
    color: #061d14;
    border-color: rgba(24, 111, 81, 0.34);
    background:
        linear-gradient(135deg, rgba(236, 247, 241, 0.998), rgba(182, 215, 195, 0.996) 26%, rgba(92, 150, 120, 0.994) 64%, rgba(45, 94, 73, 0.995));
    box-shadow:
        0 10px 18px rgba(18, 90, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] .coshh-summary-pill--inactive,
html[data-theme="light"] .coshh-summary-pill--hint {
    color: #495d70;
    border-color: rgba(86, 104, 124, 0.24);
    background:
        linear-gradient(180deg, rgba(242, 246, 250, 0.998), rgba(228, 234, 240, 0.995));
}

html[data-theme="light"] .coshh-summary-pill--categories {
    color: #0d2a40;
    border-color: rgba(49, 97, 148, 0.34);
    background:
        linear-gradient(135deg, rgba(237, 245, 252, 0.998), rgba(192, 213, 232, 0.996) 26%, rgba(121, 160, 201, 0.994) 64%, rgba(81, 114, 151, 0.995));
    box-shadow:
        0 10px 18px rgba(58, 98, 145, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] .coshh-telemetry {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(249, 252, 254, 0.998), rgba(234, 240, 245, 0.994));
    box-shadow:
        0 16px 28px rgba(30, 46, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .coshh-telemetry--company strong {
    color: #184a63;
}

html[data-theme="light"] .coshh-telemetry--builder strong {
    color: #8b4c09;
}

html[data-theme="light"] .coshh-library-table {
    border-color: rgba(92, 112, 133, 0.24);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(241, 246, 249, 0.994));
}

html[data-theme="light"] .coshh-library-page .coshh-library-table thead th {
    color: #506476;
    background:
        linear-gradient(180deg, rgba(228, 236, 242, 0.99), rgba(215, 224, 233, 0.99));
}

html[data-theme="light"] .coshh-library-row--inactive {
    background: rgba(241, 245, 248, 0.58);
}

html[data-theme="light"] .coshh-product-name {
    color: #1c2d3e;
}

html[data-theme="light"] .coshh-note {
    border-color: rgba(86, 104, 124, 0.18);
    background:
        linear-gradient(180deg, rgba(249, 252, 253, 0.998), rgba(236, 242, 246, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .coshh-note-label {
    color: #455a6e;
}

html[data-theme="light"] .coshh-note-body {
    color: #33485a;
}

html[data-theme="light"] .coshh-category-chip,
html[data-theme="light"] .coshh-status-badge {
    box-shadow:
        0 8px 14px rgba(36, 53, 76, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html[data-theme="light"] .coshh-category-chip--adhesive {
    color: #082a22;
    border-color: rgba(22, 111, 95, 0.36);
    background:
        linear-gradient(135deg, rgba(234, 248, 244, 0.998), rgba(180, 221, 211, 0.996) 28%, rgba(92, 162, 144, 0.994) 68%, rgba(44, 104, 92, 0.995));
}

html[data-theme="light"] .coshh-category-chip--aerosol {
    color: #341406;
    border-color: rgba(184, 92, 20, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 237, 214, 0.998), rgba(248, 196, 128, 0.996) 28%, rgba(229, 132, 46, 0.994) 68%, rgba(172, 78, 18, 0.995));
}

html[data-theme="light"] .coshh-category-chip--cleaner,
html[data-theme="light"] .coshh-category-chip--gas,
html[data-theme="light"] .coshh-category-chip--dust {
    color: #0c2e3e;
    border-color: rgba(35, 108, 136, 0.36);
    background:
        linear-gradient(135deg, rgba(235, 247, 252, 0.998), rgba(183, 219, 232, 0.996) 28%, rgba(104, 170, 194, 0.994) 68%, rgba(57, 113, 134, 0.995));
}

html[data-theme="light"] .coshh-category-chip--coating,
html[data-theme="light"] .coshh-category-chip--fuel {
    color: #342706;
    border-color: rgba(153, 119, 31, 0.36);
    background:
        linear-gradient(135deg, rgba(249, 243, 222, 0.998), rgba(230, 205, 128, 0.996) 28%, rgba(192, 149, 57, 0.994) 68%, rgba(126, 94, 21, 0.995));
}

html[data-theme="light"] .coshh-category-chip--corrosive {
    color: #3a0b0a;
    border-color: rgba(167, 54, 49, 0.38);
    background:
        linear-gradient(135deg, rgba(252, 235, 233, 0.998), rgba(238, 184, 177, 0.996) 28%, rgba(214, 96, 87, 0.994) 68%, rgba(155, 45, 40, 0.995));
}

html[data-theme="light"] .coshh-category-chip--neutral {
    color: #314657;
    border-color: rgba(92, 112, 133, 0.28);
    background:
        linear-gradient(135deg, rgba(244, 248, 251, 0.998), rgba(222, 230, 237, 0.996) 52%, rgba(196, 207, 218, 0.994));
}

html[data-theme="light"] .coshh-status-badge--active,
html[data-theme="light"] .coshh-action-toggle--active {
    color: #061d14;
    border-color: rgba(24, 111, 81, 0.34);
    background:
        linear-gradient(135deg, rgba(236, 247, 241, 0.998), rgba(182, 215, 195, 0.996) 26%, rgba(92, 150, 120, 0.994) 64%, rgba(45, 94, 73, 0.995));
}

html[data-theme="light"] .coshh-status-badge--inactive,
html[data-theme="light"] .coshh-action-toggle--inactive {
    color: #495d70;
    border-color: rgba(86, 104, 124, 0.24);
    background:
        linear-gradient(180deg, rgba(242, 246, 250, 0.998), rgba(228, 234, 240, 0.995));
}

html[data-theme="light"] .coshh-library-page .action-primary {
    color: #174a62;
}

.coshh-library-panel--categories,
.coshh-library-panel--category-detail,
.coshh-library-panel--category-empty {
    border-color: rgba(101, 215, 255, 0.18);
    box-shadow:
        var(--shadow-panel),
        0 0 28px rgba(101, 215, 255, 0.05);
}

.coshh-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.coshh-category-tile {
    --coshh-category-tile-border: rgba(101, 215, 255, 0.14);
    --coshh-category-tile-accent-border: rgba(101, 215, 255, 0.24);
    --coshh-category-tile-wash-strong: rgba(50, 107, 132, 0.14);
    --coshh-category-tile-wash-soft: rgba(13, 29, 43, 0.08);
    --coshh-category-tile-glow: rgba(101, 215, 255, 0.08);
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--coshh-category-tile-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, var(--coshh-category-tile-glow), transparent 56%),
        linear-gradient(140deg, var(--coshh-category-tile-wash-strong), var(--coshh-category-tile-wash-soft) 72%),
        linear-gradient(180deg, rgba(11, 24, 39, 0.9), rgba(7, 14, 24, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 28px rgba(3, 9, 18, 0.16);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.coshh-category-tile:hover,
.coshh-category-tile:focus-within {
    border-color: var(--coshh-category-tile-accent-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 34px rgba(3, 9, 18, 0.22),
        0 0 0 1px var(--coshh-category-tile-glow);
}

.coshh-category-tile--selected {
    border-color: var(--coshh-category-tile-accent-border);
    box-shadow:
        inset 0 0 0 1px var(--coshh-category-tile-glow),
        0 20px 36px rgba(3, 9, 18, 0.24),
        0 0 0 1px var(--coshh-category-tile-glow);
}

.coshh-category-tile .coshh-category-chip {
    min-height: 28px;
    padding: 0 10px;
    box-shadow: none;
}

.coshh-category-tile--adhesive {
    --coshh-category-tile-border: rgba(72, 184, 147, 0.18);
    --coshh-category-tile-accent-border: rgba(72, 184, 147, 0.3);
    --coshh-category-tile-wash-strong: rgba(22, 84, 70, 0.3);
    --coshh-category-tile-wash-soft: rgba(11, 30, 26, 0.08);
    --coshh-category-tile-glow: rgba(72, 184, 147, 0.1);
}

.coshh-category-tile--aerosol,
.coshh-category-tile--fuel {
    --coshh-category-tile-border: rgba(255, 149, 74, 0.2);
    --coshh-category-tile-accent-border: rgba(255, 149, 74, 0.3);
    --coshh-category-tile-wash-strong: rgba(109, 51, 17, 0.28);
    --coshh-category-tile-wash-soft: rgba(32, 18, 11, 0.08);
    --coshh-category-tile-glow: rgba(255, 149, 74, 0.1);
}

.coshh-category-tile--cleaner,
.coshh-category-tile--gas,
.coshh-category-tile--dust {
    --coshh-category-tile-border: rgba(78, 154, 194, 0.2);
    --coshh-category-tile-accent-border: rgba(78, 154, 194, 0.3);
    --coshh-category-tile-wash-strong: rgba(24, 63, 82, 0.28);
    --coshh-category-tile-wash-soft: rgba(12, 27, 36, 0.08);
    --coshh-category-tile-glow: rgba(78, 154, 194, 0.1);
}

.coshh-category-tile--coating {
    --coshh-category-tile-border: rgba(212, 160, 57, 0.2);
    --coshh-category-tile-accent-border: rgba(212, 160, 57, 0.3);
    --coshh-category-tile-wash-strong: rgba(102, 74, 18, 0.28);
    --coshh-category-tile-wash-soft: rgba(35, 26, 12, 0.08);
    --coshh-category-tile-glow: rgba(212, 160, 57, 0.1);
}

.coshh-category-tile--corrosive {
    --coshh-category-tile-border: rgba(210, 92, 88, 0.22);
    --coshh-category-tile-accent-border: rgba(210, 92, 88, 0.32);
    --coshh-category-tile-wash-strong: rgba(110, 31, 30, 0.3);
    --coshh-category-tile-wash-soft: rgba(34, 15, 18, 0.08);
    --coshh-category-tile-glow: rgba(210, 92, 88, 0.11);
}

.coshh-category-tile--neutral {
    --coshh-category-tile-border: rgba(101, 215, 255, 0.14);
    --coshh-category-tile-accent-border: rgba(101, 215, 255, 0.24);
    --coshh-category-tile-wash-strong: rgba(46, 79, 98, 0.16);
    --coshh-category-tile-wash-soft: rgba(13, 29, 43, 0.08);
    --coshh-category-tile-glow: rgba(101, 215, 255, 0.08);
}

.coshh-category-tile[data-coshh-category="Cleaner / Degreaser"] {
    --coshh-category-tile-border: rgba(79, 176, 203, 0.2);
    --coshh-category-tile-accent-border: rgba(79, 176, 203, 0.32);
    --coshh-category-tile-wash-strong: rgba(20, 73, 91, 0.3);
    --coshh-category-tile-wash-soft: rgba(11, 31, 39, 0.08);
    --coshh-category-tile-glow: rgba(79, 176, 203, 0.1);
}

.coshh-category-tile[data-coshh-category="Cleaner / Degreaser"] .coshh-category-chip {
    color: #d0f3fb;
    border-color: rgba(79, 176, 203, 0.3);
    background:
        linear-gradient(180deg, rgba(9, 39, 50, 0.94), rgba(6, 20, 27, 0.98));
}

.coshh-category-tile[data-coshh-category="Dust / Fume"] {
    --coshh-category-tile-border: rgba(102, 141, 177, 0.2);
    --coshh-category-tile-accent-border: rgba(102, 141, 177, 0.3);
    --coshh-category-tile-wash-strong: rgba(29, 54, 79, 0.28);
    --coshh-category-tile-wash-soft: rgba(14, 25, 37, 0.08);
    --coshh-category-tile-glow: rgba(102, 141, 177, 0.1);
}

.coshh-category-tile[data-coshh-category="Dust / Fume"] .coshh-category-chip {
    color: #d9e7f7;
    border-color: rgba(102, 141, 177, 0.28);
    background:
        linear-gradient(180deg, rgba(14, 31, 47, 0.94), rgba(8, 18, 29, 0.98));
}

.coshh-category-tile[data-coshh-category="Gas Cylinder / Bottle"] {
    --coshh-category-tile-border: rgba(66, 166, 148, 0.2);
    --coshh-category-tile-accent-border: rgba(66, 166, 148, 0.3);
    --coshh-category-tile-wash-strong: rgba(18, 74, 67, 0.29);
    --coshh-category-tile-wash-soft: rgba(10, 29, 27, 0.08);
    --coshh-category-tile-glow: rgba(66, 166, 148, 0.1);
}

.coshh-category-tile[data-coshh-category="Gas Cylinder / Bottle"] .coshh-category-chip {
    color: #c9f3ea;
    border-color: rgba(66, 166, 148, 0.3);
    background:
        linear-gradient(180deg, rgba(8, 38, 34, 0.94), rgba(6, 18, 17, 0.98));
}

.coshh-category-tile[data-coshh-category="Fuel / Oil / Lubricant"] {
    --coshh-category-tile-border: rgba(171, 112, 58, 0.2);
    --coshh-category-tile-accent-border: rgba(171, 112, 58, 0.32);
    --coshh-category-tile-wash-strong: rgba(95, 53, 21, 0.3);
    --coshh-category-tile-wash-soft: rgba(31, 19, 12, 0.08);
    --coshh-category-tile-glow: rgba(171, 112, 58, 0.1);
}

.coshh-category-tile[data-coshh-category="Fuel / Oil / Lubricant"] .coshh-category-chip {
    color: #f4dcc1;
    border-color: rgba(171, 112, 58, 0.3);
    background:
        linear-gradient(180deg, rgba(43, 24, 11, 0.94), rgba(21, 13, 8, 0.98));
}

.coshh-category-tile[data-coshh-category="Resin / Compound"] {
    --coshh-category-tile-border: rgba(46, 170, 116, 0.2);
    --coshh-category-tile-accent-border: rgba(46, 170, 116, 0.32);
    --coshh-category-tile-wash-strong: rgba(14, 79, 54, 0.31);
    --coshh-category-tile-wash-soft: rgba(9, 30, 22, 0.08);
    --coshh-category-tile-glow: rgba(46, 170, 116, 0.1);
}

.coshh-category-tile[data-coshh-category="Resin / Compound"] .coshh-category-chip {
    color: #c9f3db;
    border-color: rgba(46, 170, 116, 0.3);
    background:
        linear-gradient(180deg, rgba(8, 39, 25, 0.94), rgba(6, 19, 14, 0.98));
}

.coshh-category-tile[data-coshh-category="Solvent / Thinner"] {
    --coshh-category-tile-border: rgba(109, 126, 210, 0.2);
    --coshh-category-tile-accent-border: rgba(109, 126, 210, 0.32);
    --coshh-category-tile-wash-strong: rgba(35, 44, 94, 0.29);
    --coshh-category-tile-wash-soft: rgba(15, 21, 40, 0.08);
    --coshh-category-tile-glow: rgba(109, 126, 210, 0.1);
}

.coshh-category-tile[data-coshh-category="Solvent / Thinner"] .coshh-category-chip {
    color: #dce2ff;
    border-color: rgba(109, 126, 210, 0.3);
    background:
        linear-gradient(180deg, rgba(16, 24, 53, 0.94), rgba(9, 13, 29, 0.98));
}

.coshh-category-tile[data-coshh-category="Welding Consumable"] {
    --coshh-category-tile-border: rgba(174, 142, 63, 0.2);
    --coshh-category-tile-accent-border: rgba(174, 142, 63, 0.32);
    --coshh-category-tile-wash-strong: rgba(97, 77, 24, 0.28);
    --coshh-category-tile-wash-soft: rgba(33, 27, 13, 0.08);
    --coshh-category-tile-glow: rgba(174, 142, 63, 0.1);
}

.coshh-category-tile[data-coshh-category="Welding Consumable"] .coshh-category-chip {
    color: #f1e1b3;
    border-color: rgba(174, 142, 63, 0.28);
    background:
        linear-gradient(180deg, rgba(45, 37, 13, 0.94), rgba(22, 18, 9, 0.98));
}

.coshh-category-tile[data-coshh-category="Other"] {
    --coshh-category-tile-border: rgba(118, 130, 147, 0.18);
    --coshh-category-tile-accent-border: rgba(118, 130, 147, 0.28);
    --coshh-category-tile-wash-strong: rgba(44, 53, 68, 0.22);
    --coshh-category-tile-wash-soft: rgba(16, 23, 33, 0.08);
    --coshh-category-tile-glow: rgba(118, 130, 147, 0.08);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Cleaner / Degreaser"] {
    --coshh-category-tile-border: rgba(48, 129, 152, 0.24);
    --coshh-category-tile-accent-border: rgba(48, 129, 152, 0.36);
    --coshh-category-tile-wash-strong: rgba(206, 233, 239, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 248, 249, 0.97);
    --coshh-category-tile-glow: rgba(48, 129, 152, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Cleaner / Degreaser"] .coshh-category-chip {
    color: #103743;
    border-color: rgba(48, 129, 152, 0.34);
    background:
        linear-gradient(135deg, rgba(226, 244, 247, 0.998), rgba(170, 214, 224, 0.996) 46%, rgba(104, 172, 189, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Dust / Fume"] {
    --coshh-category-tile-border: rgba(84, 116, 157, 0.24);
    --coshh-category-tile-accent-border: rgba(84, 116, 157, 0.36);
    --coshh-category-tile-wash-strong: rgba(216, 226, 238, 0.92);
    --coshh-category-tile-wash-soft: rgba(243, 246, 250, 0.97);
    --coshh-category-tile-glow: rgba(84, 116, 157, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Dust / Fume"] .coshh-category-chip {
    color: #1a3046;
    border-color: rgba(84, 116, 157, 0.32);
    background:
        linear-gradient(135deg, rgba(232, 239, 247, 0.998), rgba(186, 201, 222, 0.996) 46%, rgba(122, 149, 181, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Gas Cylinder / Bottle"] {
    --coshh-category-tile-border: rgba(36, 131, 117, 0.24);
    --coshh-category-tile-accent-border: rgba(36, 131, 117, 0.36);
    --coshh-category-tile-wash-strong: rgba(208, 234, 228, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 248, 245, 0.97);
    --coshh-category-tile-glow: rgba(36, 131, 117, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Gas Cylinder / Bottle"] .coshh-category-chip {
    color: #0f362f;
    border-color: rgba(36, 131, 117, 0.34);
    background:
        linear-gradient(135deg, rgba(228, 245, 241, 0.998), rgba(173, 217, 206, 0.996) 46%, rgba(94, 168, 152, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Fuel / Oil / Lubricant"] {
    --coshh-category-tile-border: rgba(145, 93, 43, 0.24);
    --coshh-category-tile-accent-border: rgba(145, 93, 43, 0.36);
    --coshh-category-tile-wash-strong: rgba(237, 223, 208, 0.92);
    --coshh-category-tile-wash-soft: rgba(248, 243, 239, 0.97);
    --coshh-category-tile-glow: rgba(145, 93, 43, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Fuel / Oil / Lubricant"] .coshh-category-chip {
    color: #3a1f10;
    border-color: rgba(145, 93, 43, 0.34);
    background:
        linear-gradient(135deg, rgba(246, 236, 227, 0.998), rgba(221, 187, 157, 0.996) 46%, rgba(166, 112, 70, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Resin / Compound"] {
    --coshh-category-tile-border: rgba(23, 133, 83, 0.24);
    --coshh-category-tile-accent-border: rgba(23, 133, 83, 0.36);
    --coshh-category-tile-wash-strong: rgba(206, 235, 219, 0.92);
    --coshh-category-tile-wash-soft: rgba(240, 248, 243, 0.97);
    --coshh-category-tile-glow: rgba(23, 133, 83, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Resin / Compound"] .coshh-category-chip {
    color: #0d3524;
    border-color: rgba(23, 133, 83, 0.34);
    background:
        linear-gradient(135deg, rgba(227, 245, 234, 0.998), rgba(168, 220, 191, 0.996) 46%, rgba(90, 170, 119, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Solvent / Thinner"] {
    --coshh-category-tile-border: rgba(87, 104, 183, 0.24);
    --coshh-category-tile-accent-border: rgba(87, 104, 183, 0.36);
    --coshh-category-tile-wash-strong: rgba(220, 224, 242, 0.92);
    --coshh-category-tile-wash-soft: rgba(244, 245, 250, 0.97);
    --coshh-category-tile-glow: rgba(87, 104, 183, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Solvent / Thinner"] .coshh-category-chip {
    color: #1d2850;
    border-color: rgba(87, 104, 183, 0.32);
    background:
        linear-gradient(135deg, rgba(232, 236, 250, 0.998), rgba(189, 197, 232, 0.996) 46%, rgba(122, 135, 197, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Welding Consumable"] {
    --coshh-category-tile-border: rgba(146, 119, 42, 0.24);
    --coshh-category-tile-accent-border: rgba(146, 119, 42, 0.36);
    --coshh-category-tile-wash-strong: rgba(238, 230, 206, 0.92);
    --coshh-category-tile-wash-soft: rgba(248, 245, 237, 0.97);
    --coshh-category-tile-glow: rgba(146, 119, 42, 0.09);
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Welding Consumable"] .coshh-category-chip {
    color: #3b2f10;
    border-color: rgba(146, 119, 42, 0.32);
    background:
        linear-gradient(135deg, rgba(246, 242, 228, 0.998), rgba(221, 206, 163, 0.996) 46%, rgba(173, 145, 72, 0.994));
}

html[data-theme="light"] .coshh-category-tile[data-coshh-category="Other"] {
    --coshh-category-tile-border: rgba(106, 118, 134, 0.22);
    --coshh-category-tile-accent-border: rgba(106, 118, 134, 0.32);
    --coshh-category-tile-wash-strong: rgba(224, 229, 235, 0.9);
    --coshh-category-tile-wash-soft: rgba(245, 247, 249, 0.97);
    --coshh-category-tile-glow: rgba(106, 118, 134, 0.08);
}

.coshh-category-tile__head,
.coshh-item-card__head,
.coshh-item-card__title-row,
.coshh-category-detail__actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.coshh-category-tile__total,
.coshh-category-tile__metric span,
.coshh-item-card__meta .panel-badge {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.coshh-category-tile__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.coshh-category-tile__metric {
    display: grid;
    gap: 4px;
    padding: 11px 10px;
    border: 1px solid rgba(101, 215, 255, 0.1);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(14, 27, 43, 0.6), rgba(8, 16, 28, 0.78));
}

.coshh-category-tile__metric strong {
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
}

.coshh-category-tile__actions {
    display: flex;
    justify-content: flex-start;
}

.coshh-category-detail__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.coshh-category-detail__actions {
    margin-bottom: 16px;
}

.coshh-item-list {
    display: grid;
    gap: 14px;
}

.coshh-item-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(11, 24, 39, 0.88), rgba(7, 14, 24, 0.94));
}

.coshh-item-card--inactive {
    border-color: rgba(101, 215, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(10, 20, 33, 0.74), rgba(6, 12, 22, 0.88));
}

.coshh-item-card__identity,
.coshh-item-card__meta {
    display: grid;
    gap: 8px;
}

.coshh-item-card__identity {
    min-width: 0;
}

.coshh-item-card__title-row h4 {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.coshh-item-card__identity .muted {
    max-width: 860px;
    line-height: 1.55;
}

.coshh-item-card__meta {
    justify-items: end;
}

.coshh-item-card__notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.coshh-item-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.coshh-item-card__actions .action-link {
    min-height: 32px;
}

.coshh-category-empty-state {
    padding: 24px;
}

html[data-theme="light"] .coshh-library-panel--categories,
html[data-theme="light"] .coshh-library-panel--category-detail,
html[data-theme="light"] .coshh-library-panel--category-empty {
    border-color: rgba(87, 107, 129, 0.24);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(232, 239, 244, 0.994));
    box-shadow:
        0 22px 36px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .coshh-category-tile {
    --coshh-category-tile-border: rgba(92, 112, 133, 0.22);
    --coshh-category-tile-accent-border: rgba(92, 112, 133, 0.3);
    --coshh-category-tile-wash-strong: rgba(206, 218, 228, 0.55);
    --coshh-category-tile-wash-soft: rgba(242, 247, 250, 0.9);
    --coshh-category-tile-glow: rgba(92, 112, 133, 0.08);
    border-color: var(--coshh-category-tile-border);
    background:
        radial-gradient(circle at top right, var(--coshh-category-tile-glow), transparent 58%),
        linear-gradient(140deg, var(--coshh-category-tile-wash-strong), var(--coshh-category-tile-wash-soft) 72%),
        linear-gradient(180deg, rgba(251, 253, 254, 0.998), rgba(238, 244, 248, 0.994));
    box-shadow:
        0 16px 28px rgba(30, 46, 67, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .coshh-category-tile--selected {
    border-color: var(--coshh-category-tile-accent-border);
    box-shadow:
        0 18px 30px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 1px var(--coshh-category-tile-glow);
}

html[data-theme="light"] .coshh-category-tile:hover,
html[data-theme="light"] .coshh-category-tile:focus-within {
    border-color: var(--coshh-category-tile-accent-border);
    box-shadow:
        0 18px 30px rgba(30, 46, 67, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 1px var(--coshh-category-tile-glow);
}

html[data-theme="light"] .coshh-category-tile--adhesive {
    --coshh-category-tile-border: rgba(44, 120, 102, 0.22);
    --coshh-category-tile-accent-border: rgba(44, 120, 102, 0.34);
    --coshh-category-tile-wash-strong: rgba(208, 231, 224, 0.9);
    --coshh-category-tile-wash-soft: rgba(241, 247, 245, 0.96);
    --coshh-category-tile-glow: rgba(44, 120, 102, 0.09);
}

html[data-theme="light"] .coshh-category-tile--aerosol,
html[data-theme="light"] .coshh-category-tile--fuel {
    --coshh-category-tile-border: rgba(173, 94, 30, 0.24);
    --coshh-category-tile-accent-border: rgba(173, 94, 30, 0.36);
    --coshh-category-tile-wash-strong: rgba(240, 221, 198, 0.92);
    --coshh-category-tile-wash-soft: rgba(249, 243, 236, 0.97);
    --coshh-category-tile-glow: rgba(173, 94, 30, 0.09);
}

html[data-theme="light"] .coshh-category-tile--cleaner,
html[data-theme="light"] .coshh-category-tile--gas,
html[data-theme="light"] .coshh-category-tile--dust {
    --coshh-category-tile-border: rgba(54, 117, 143, 0.24);
    --coshh-category-tile-accent-border: rgba(54, 117, 143, 0.36);
    --coshh-category-tile-wash-strong: rgba(209, 228, 236, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 247, 250, 0.97);
    --coshh-category-tile-glow: rgba(54, 117, 143, 0.09);
}

html[data-theme="light"] .coshh-category-tile--coating {
    --coshh-category-tile-border: rgba(147, 111, 29, 0.24);
    --coshh-category-tile-accent-border: rgba(147, 111, 29, 0.36);
    --coshh-category-tile-wash-strong: rgba(236, 227, 199, 0.92);
    --coshh-category-tile-wash-soft: rgba(248, 245, 235, 0.97);
    --coshh-category-tile-glow: rgba(147, 111, 29, 0.09);
}

html[data-theme="light"] .coshh-category-tile--corrosive {
    --coshh-category-tile-border: rgba(160, 61, 56, 0.24);
    --coshh-category-tile-accent-border: rgba(160, 61, 56, 0.36);
    --coshh-category-tile-wash-strong: rgba(241, 216, 213, 0.92);
    --coshh-category-tile-wash-soft: rgba(250, 243, 242, 0.97);
    --coshh-category-tile-glow: rgba(160, 61, 56, 0.09);
}

html[data-theme="light"] .coshh-category-tile--neutral {
    --coshh-category-tile-border: rgba(92, 112, 133, 0.22);
    --coshh-category-tile-accent-border: rgba(92, 112, 133, 0.3);
    --coshh-category-tile-wash-strong: rgba(217, 225, 232, 0.9);
    --coshh-category-tile-wash-soft: rgba(244, 247, 249, 0.97);
    --coshh-category-tile-glow: rgba(92, 112, 133, 0.08);
}

html[data-theme="light"] .coshh-category-tile__total,
html[data-theme="light"] .coshh-category-tile__metric span,
html[data-theme="light"] .coshh-item-card__meta .panel-badge {
    color: #5c7184;
}

html[data-theme="light"] .coshh-category-tile__metric {
    border-color: rgba(92, 112, 133, 0.16);
    background:
        linear-gradient(180deg, rgba(248, 251, 253, 0.998), rgba(236, 242, 246, 0.994));
}

html[data-theme="light"] .coshh-category-tile__metric strong {
    color: #1c2d3e;
}

html[data-theme="light"] .coshh-item-card {
    border-color: rgba(92, 112, 133, 0.22);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(239, 245, 249, 0.994));
    box-shadow:
        0 18px 30px rgba(30, 46, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .coshh-item-card--inactive {
    background:
        linear-gradient(180deg, rgba(245, 249, 251, 0.998), rgba(234, 240, 244, 0.994));
}

html[data-theme="light"] .coshh-item-card__title-row h4 {
    color: #1c2d3e;
}

.equipment-library-page {
    display: grid;
    gap: 14px;
}

.equipment-library-panel--editor,
.equipment-library-panel--reveal {
    scroll-margin-top: 96px;
}

.equipment-library-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 14px;
    padding: 18px 18px 16px;
}

.equipment-library-hero__copy {
    display: grid;
    gap: 10px;
}

.equipment-library-hero__copy .muted {
    max-width: 760px;
}

.equipment-library-hero__status,
.equipment-selected-banner {
    gap: 8px;
}

.equipment-library-hero__telemetry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.equipment-telemetry {
    padding: 13px 14px 12px;
}

.equipment-telemetry strong {
    margin-bottom: 6px;
    font-size: 1.42rem;
}

.equipment-telemetry p {
    line-height: 1.5;
}

.equipment-library-toolbar {
    margin: 10px 0 12px;
}

.equipment-item-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.equipment-item-card__flag {
    min-height: 30px;
    padding: 0 11px;
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d8e6f3;
    border-color: rgba(101, 215, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(11, 24, 39, 0.92), rgba(7, 14, 24, 0.97));
}

.equipment-item-card .coshh-item-card__identity .muted {
    max-width: none;
}

.equipment-category-tile--machines {
    --coshh-category-tile-border: rgba(97, 129, 165, 0.2);
    --coshh-category-tile-accent-border: rgba(97, 129, 165, 0.32);
    --coshh-category-tile-wash-strong: rgba(28, 54, 80, 0.28);
    --coshh-category-tile-wash-soft: rgba(13, 24, 36, 0.08);
    --coshh-category-tile-glow: rgba(97, 129, 165, 0.1);
}

.equipment-category-chip--machines {
    color: #dce8f7;
    border-color: rgba(97, 129, 165, 0.28);
    background:
        linear-gradient(180deg, rgba(13, 30, 46, 0.94), rgba(8, 18, 29, 0.98));
}

.equipment-category-tile--welding {
    --coshh-category-tile-border: rgba(212, 145, 49, 0.2);
    --coshh-category-tile-accent-border: rgba(212, 145, 49, 0.32);
    --coshh-category-tile-wash-strong: rgba(100, 67, 17, 0.28);
    --coshh-category-tile-wash-soft: rgba(34, 24, 11, 0.08);
    --coshh-category-tile-glow: rgba(212, 145, 49, 0.1);
}

.equipment-category-chip--welding {
    color: #f4ddb1;
    border-color: rgba(212, 145, 49, 0.28);
    background:
        linear-gradient(180deg, rgba(43, 31, 10, 0.94), rgba(21, 16, 9, 0.98));
}

.equipment-category-tile--lifting {
    --coshh-category-tile-border: rgba(58, 161, 145, 0.2);
    --coshh-category-tile-accent-border: rgba(58, 161, 145, 0.32);
    --coshh-category-tile-wash-strong: rgba(17, 72, 66, 0.28);
    --coshh-category-tile-wash-soft: rgba(10, 28, 27, 0.08);
    --coshh-category-tile-glow: rgba(58, 161, 145, 0.1);
}

.equipment-category-chip--lifting {
    color: #ccf2e9;
    border-color: rgba(58, 161, 145, 0.28);
    background:
        linear-gradient(180deg, rgba(9, 37, 34, 0.94), rgba(6, 18, 17, 0.98));
}

.equipment-category-tile--tools {
    --coshh-category-tile-border: rgba(67, 156, 201, 0.2);
    --coshh-category-tile-accent-border: rgba(67, 156, 201, 0.32);
    --coshh-category-tile-wash-strong: rgba(20, 67, 90, 0.29);
    --coshh-category-tile-wash-soft: rgba(11, 28, 38, 0.08);
    --coshh-category-tile-glow: rgba(67, 156, 201, 0.1);
}

.equipment-category-chip--tools {
    color: #d4effa;
    border-color: rgba(67, 156, 201, 0.28);
    background:
        linear-gradient(180deg, rgba(9, 37, 50, 0.94), rgba(6, 18, 27, 0.98));
}

.equipment-category-tile--finishing {
    --coshh-category-tile-border: rgba(54, 165, 107, 0.2);
    --coshh-category-tile-accent-border: rgba(54, 165, 107, 0.32);
    --coshh-category-tile-wash-strong: rgba(15, 76, 47, 0.28);
    --coshh-category-tile-wash-soft: rgba(9, 28, 22, 0.08);
    --coshh-category-tile-glow: rgba(54, 165, 107, 0.1);
}

.equipment-category-chip--finishing {
    color: #cff2dc;
    border-color: rgba(54, 165, 107, 0.28);
    background:
        linear-gradient(180deg, rgba(9, 38, 24, 0.94), rgba(6, 18, 14, 0.98));
}

html[data-theme="light"] .equipment-item-card__flag {
    color: #455a6d;
    border-color: rgba(86, 104, 124, 0.22);
    background:
        linear-gradient(180deg, rgba(243, 247, 250, 0.998), rgba(229, 235, 240, 0.994));
    box-shadow: none;
}

html[data-theme="light"] .equipment-category-tile--machines {
    --coshh-category-tile-border: rgba(78, 110, 149, 0.24);
    --coshh-category-tile-accent-border: rgba(78, 110, 149, 0.36);
    --coshh-category-tile-wash-strong: rgba(217, 226, 237, 0.92);
    --coshh-category-tile-wash-soft: rgba(243, 246, 250, 0.97);
    --coshh-category-tile-glow: rgba(78, 110, 149, 0.09);
}

html[data-theme="light"] .equipment-category-chip--machines {
    color: #1a3045;
    border-color: rgba(78, 110, 149, 0.32);
    background:
        linear-gradient(135deg, rgba(232, 239, 247, 0.998), rgba(187, 201, 222, 0.996) 42%, rgba(122, 146, 180, 0.994));
}

html[data-theme="light"] .equipment-category-tile--welding {
    --coshh-category-tile-border: rgba(154, 111, 30, 0.24);
    --coshh-category-tile-accent-border: rgba(154, 111, 30, 0.36);
    --coshh-category-tile-wash-strong: rgba(238, 228, 204, 0.92);
    --coshh-category-tile-wash-soft: rgba(248, 245, 236, 0.97);
    --coshh-category-tile-glow: rgba(154, 111, 30, 0.09);
}

html[data-theme="light"] .equipment-category-chip--welding {
    color: #362608;
    border-color: rgba(154, 111, 30, 0.32);
    background:
        linear-gradient(135deg, rgba(246, 240, 223, 0.998), rgba(223, 202, 152, 0.996) 42%, rgba(177, 139, 62, 0.994));
}

html[data-theme="light"] .equipment-category-tile--lifting {
    --coshh-category-tile-border: rgba(33, 124, 110, 0.24);
    --coshh-category-tile-accent-border: rgba(33, 124, 110, 0.36);
    --coshh-category-tile-wash-strong: rgba(208, 232, 227, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 247, 245, 0.97);
    --coshh-category-tile-glow: rgba(33, 124, 110, 0.09);
}

html[data-theme="light"] .equipment-category-chip--lifting {
    color: #11352f;
    border-color: rgba(33, 124, 110, 0.32);
    background:
        linear-gradient(135deg, rgba(227, 244, 240, 0.998), rgba(174, 216, 205, 0.996) 42%, rgba(97, 167, 151, 0.994));
}

html[data-theme="light"] .equipment-category-tile--tools {
    --coshh-category-tile-border: rgba(43, 117, 159, 0.24);
    --coshh-category-tile-accent-border: rgba(43, 117, 159, 0.36);
    --coshh-category-tile-wash-strong: rgba(209, 228, 239, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 247, 250, 0.97);
    --coshh-category-tile-glow: rgba(43, 117, 159, 0.09);
}

html[data-theme="light"] .equipment-category-chip--tools {
    color: #103243;
    border-color: rgba(43, 117, 159, 0.32);
    background:
        linear-gradient(135deg, rgba(227, 243, 248, 0.998), rgba(172, 210, 225, 0.996) 42%, rgba(98, 165, 190, 0.994));
}

html[data-theme="light"] .equipment-category-tile--finishing {
    --coshh-category-tile-border: rgba(22, 125, 77, 0.24);
    --coshh-category-tile-accent-border: rgba(22, 125, 77, 0.36);
    --coshh-category-tile-wash-strong: rgba(208, 234, 217, 0.92);
    --coshh-category-tile-wash-soft: rgba(241, 248, 243, 0.97);
    --coshh-category-tile-glow: rgba(22, 125, 77, 0.09);
}

html[data-theme="light"] .equipment-category-chip--finishing {
    color: #0f3424;
    border-color: rgba(22, 125, 77, 0.32);
    background:
        linear-gradient(135deg, rgba(228, 244, 234, 0.998), rgba(171, 218, 191, 0.996) 42%, rgba(92, 171, 119, 0.994));
}

.operatives-library-page {
    display: grid;
    gap: 14px;
}

.operatives-library-panel--detail,
.operatives-library-panel--reveal {
    scroll-margin-top: 96px;
}

.operatives-library-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 14px;
    padding: 18px 18px 16px;
}

.operatives-library-hero__copy {
    display: grid;
    gap: 10px;
}

.operatives-library-hero__copy .muted {
    max-width: 760px;
}

.operatives-library-hero__status {
    gap: 8px;
}

.operatives-library-hero__telemetry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.operatives-telemetry {
    padding: 13px 14px 12px;
}

.operatives-telemetry strong {
    margin-bottom: 6px;
    font-size: 1.42rem;
}

.operatives-telemetry p {
    line-height: 1.5;
}

.operatives-library-toolbar {
    margin: 10px 0 12px;
}

.operative-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(236px, 268px));
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
}

.operative-tile {
    --operative-accent: rgba(122, 131, 143, 0.82);
    --operative-accent-strong: rgba(122, 131, 143, 0.42);
    --operative-accent-glow: rgba(122, 131, 143, 0.16);
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 13px 13px 12px 15px;
    overflow: hidden;
    border: 1px solid rgba(124, 140, 156, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(11, 18, 29, 0.97), rgba(7, 12, 20, 0.985));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 28px rgba(3, 8, 16, 0.2);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.operative-tile::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent 0%, var(--operative-accent) 18%, var(--operative-accent) 82%, transparent 100%);
    box-shadow: 0 0 20px var(--operative-accent-glow);
}

.operative-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top left, var(--operative-accent-glow), transparent 50%);
    opacity: 0.9;
}

.operative-tile:hover,
.operative-tile:focus-within,
.operative-tile--selected {
    transform: translateY(-2px);
    border-color: var(--operative-accent-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 32px rgba(3, 8, 16, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 0 1px var(--operative-accent-glow);
}

.operative-tile--inactive {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 10px 22px rgba(3, 8, 16, 0.14);
    opacity: 0.9;
}

.operative-tile--tone-fabricator {
    --operative-accent: rgba(95, 134, 168, 0.86);
    --operative-accent-strong: rgba(95, 134, 168, 0.46);
    --operative-accent-glow: rgba(95, 134, 168, 0.16);
}

.operative-tile--tone-welder {
    --operative-accent: rgba(212, 154, 69, 0.86);
    --operative-accent-strong: rgba(212, 154, 69, 0.44);
    --operative-accent-glow: rgba(212, 154, 69, 0.16);
}

.operative-tile--tone-site-welder {
    --operative-accent: rgba(194, 109, 61, 0.86);
    --operative-accent-strong: rgba(194, 109, 61, 0.44);
    --operative-accent-glow: rgba(194, 109, 61, 0.16);
}

.operative-tile--tone-erector {
    --operative-accent: rgba(63, 157, 147, 0.86);
    --operative-accent-strong: rgba(63, 157, 147, 0.44);
    --operative-accent-glow: rgba(63, 157, 147, 0.16);
}

.operative-tile--tone-engineer {
    --operative-accent: rgba(77, 149, 182, 0.86);
    --operative-accent-strong: rgba(77, 149, 182, 0.44);
    --operative-accent-glow: rgba(77, 149, 182, 0.16);
}

.operative-tile--tone-lead {
    --operative-accent: rgba(110, 117, 171, 0.84);
    --operative-accent-strong: rgba(110, 117, 171, 0.44);
    --operative-accent-glow: rgba(110, 117, 171, 0.16);
}

.operative-tile--tone-operative {
    --operative-accent: rgba(122, 131, 143, 0.82);
    --operative-accent-strong: rgba(122, 131, 143, 0.38);
    --operative-accent-glow: rgba(122, 131, 143, 0.13);
}

.operative-tile__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.operative-tile__name-block {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.operative-tile__name-block h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.18;
}

.operative-tile__role {
    display: flex;
    align-items: center;
}

.operative-tile__role-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid var(--operative-accent-strong);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(15, 22, 34, 0.92), rgba(9, 14, 22, 0.98));
    color: var(--text-soft);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 999px var(--operative-accent-glow);
}

.operative-role-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.operative-role-chip,
.operative-role-option {
    --operative-role-accent: rgba(122, 131, 143, 0.82);
    --operative-role-accent-strong: rgba(122, 131, 143, 0.24);
    --operative-role-accent-glow: rgba(122, 131, 143, 0.08);
}

.operative-role-chip--tone-fabricator,
.operative-role-option--tone-fabricator {
    --operative-role-accent: rgba(95, 134, 168, 0.86);
    --operative-role-accent-strong: rgba(95, 134, 168, 0.32);
    --operative-role-accent-glow: rgba(95, 134, 168, 0.12);
}

.operative-role-chip--tone-welder,
.operative-role-option--tone-welder {
    --operative-role-accent: rgba(212, 154, 69, 0.86);
    --operative-role-accent-strong: rgba(212, 154, 69, 0.3);
    --operative-role-accent-glow: rgba(212, 154, 69, 0.12);
}

.operative-role-chip--tone-site-welder,
.operative-role-option--tone-site-welder {
    --operative-role-accent: rgba(194, 109, 61, 0.86);
    --operative-role-accent-strong: rgba(194, 109, 61, 0.3);
    --operative-role-accent-glow: rgba(194, 109, 61, 0.12);
}

.operative-role-chip--tone-erector,
.operative-role-option--tone-erector {
    --operative-role-accent: rgba(63, 157, 147, 0.86);
    --operative-role-accent-strong: rgba(63, 157, 147, 0.3);
    --operative-role-accent-glow: rgba(63, 157, 147, 0.12);
}

.operative-role-chip--tone-engineer,
.operative-role-option--tone-engineer {
    --operative-role-accent: rgba(77, 149, 182, 0.86);
    --operative-role-accent-strong: rgba(77, 149, 182, 0.3);
    --operative-role-accent-glow: rgba(77, 149, 182, 0.12);
}

.operative-role-chip--tone-lead,
.operative-role-option--tone-lead {
    --operative-role-accent: rgba(110, 117, 171, 0.84);
    --operative-role-accent-strong: rgba(110, 117, 171, 0.3);
    --operative-role-accent-glow: rgba(110, 117, 171, 0.12);
}

.operative-role-chip--tone-operative,
.operative-role-option--tone-operative {
    --operative-role-accent: rgba(122, 131, 143, 0.82);
    --operative-role-accent-strong: rgba(122, 131, 143, 0.24);
    --operative-role-accent-glow: rgba(122, 131, 143, 0.08);
}

.operative-role-chip--tone-neutral,
.operative-role-option--tone-neutral {
    --operative-role-accent: rgba(136, 144, 154, 0.82);
    --operative-role-accent-strong: rgba(136, 144, 154, 0.24);
    --operative-role-accent-glow: rgba(136, 144, 154, 0.08);
}

.operative-role-chip {
    color: #d8e3ed;
    border-color: var(--operative-role-accent-strong);
    background:
        linear-gradient(180deg, rgba(13, 22, 33, 0.94), rgba(8, 14, 22, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 0 0 999px var(--operative-role-accent-glow);
}

.operative-role-chip,
.operative-tile__meta .panel-badge {
    min-height: 24px;
    padding: 0 9px;
    font-size: 0.61rem;
    letter-spacing: 0.08em;
}

.operative-tile__roles {
    min-height: 24px;
}

.operative-role-chip--muted {
    color: var(--muted);
    border-color: rgba(121, 138, 155, 0.12);
    background:
        linear-gradient(180deg, rgba(11, 19, 29, 0.8), rgba(7, 12, 20, 0.9));
    box-shadow: none;
}

.operative-tile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 24px;
}

.operative-tile__meta-flag {
    color: var(--text);
    border-color: var(--operative-accent-strong);
    background:
        linear-gradient(180deg, rgba(20, 31, 47, 0.96), rgba(11, 18, 29, 0.99));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.operative-tile__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
}

.operative-tile__actions .button {
    width: 100%;
    justify-content: center;
}

.operatives-library-empty-state {
    padding: 24px;
}

.operative-detail-panel__heading {
    align-items: flex-start;
}

.operative-detail-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.operative-detail-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(101, 215, 255, 0.12);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(11, 24, 39, 0.84), rgba(7, 14, 24, 0.92));
}

.operative-detail-summary__identity,
.operative-detail-summary__roles {
    display: grid;
    gap: 8px;
}

.operative-detail-summary__label {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.operative-detail-summary__identity strong {
    color: var(--text);
    font-size: 1.16rem;
    line-height: 1.1;
}

.operative-form__secondary {
    display: grid;
    gap: 10px;
}

.operative-role-picker-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 10px;
}

.operative-role-picker-fieldset legend {
    padding: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.field-hint {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.company-settings-page {
    display: grid;
    gap: 22px;
    --company-settings-fabora-orange: #ff7a1a;
    --company-settings-fabora-border-soft: rgba(255, 122, 26, 0.16);
    --company-settings-fabora-border: rgba(255, 122, 26, 0.24);
    --company-settings-fabora-border-strong: rgba(255, 122, 26, 0.38);
    --company-settings-fabora-wash: rgba(255, 122, 26, 0.06);
    --company-settings-fabora-glow: rgba(255, 122, 26, 0.1);
    --company-settings-fabora-text-dark: #ffd9b7;
}

.company-settings-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(360px, 0.94fr);
    gap: 22px;
    align-items: start;
}

.company-settings-shell .narrow-panel {
    width: 100%;
    max-width: none;
}

.company-settings-main-panel,
.company-settings-utility-column {
    min-width: 0;
}

.company-settings-utility-column {
    display: grid;
    gap: 22px;
    align-content: start;
}

.company-settings-logo-preview {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.company-settings-logo-preview img {
    display: block;
    max-width: 220px;
    max-height: 72px;
    object-fit: contain;
}

.company-settings-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.company-settings-side-panel .panel-heading {
    align-items: flex-start;
}

.company-settings-preset-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.company-settings-side-panel .company-settings-preset-layout {
    grid-template-columns: 1fr;
}

.company-settings-preset-list {
    display: grid;
    gap: 12px;
}

.company-settings-preset-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    background: linear-gradient(180deg, rgba(12, 26, 43, 0.82), rgba(6, 17, 29, 0.9));
}

.company-settings-preset-item.is-selected {
    border-color: rgba(101, 215, 255, 0.34);
    box-shadow: 0 0 0 1px rgba(101, 215, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.18);
}

.company-settings-preset-copy h4,
.company-settings-preset-editor__head h4 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.company-settings-preset-copy p,
.company-settings-preset-editor__head p {
    margin: 0;
}

.company-settings-preset-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.company-settings-preset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.company-settings-preset-editor {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    background: rgba(7, 19, 33, 0.72);
}

.company-settings-preset-editor__head {
    margin-bottom: 14px;
}

.company-settings-workshop-layout,
.company-settings-workshop-editors,
.company-settings-workshop-list {
    display: grid;
    gap: 14px;
}

.company-settings-workshop-list {
    gap: 16px;
}

.company-settings-workshop-reveal-card {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(9, 21, 36, 0.86), rgba(6, 14, 25, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 28px rgba(0, 0, 0, 0.14);
}

.company-settings-workshop-reveal-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.company-settings-workshop-reveal-head h4 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.company-settings-location-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(101, 215, 255, 0.15);
    background:
        linear-gradient(180deg, rgba(9, 22, 38, 0.92), rgba(5, 13, 24, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 32px rgba(0, 0, 0, 0.18);
}

.company-settings-location-card.is-selected {
    border-color: rgba(101, 215, 255, 0.34);
    box-shadow:
        0 0 0 1px rgba(101, 215, 255, 0.08),
        0 20px 38px rgba(0, 0, 0, 0.2);
}

.company-settings-location-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: start;
}

.company-settings-location-card__identity {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.company-settings-location-card__identity h4 {
    margin: 0;
    font-size: 1.05rem;
}

.company-settings-location-card__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.company-settings-location-card__toolbar,
.company-settings-location-card__areas-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: start;
}

.company-settings-location-card__toolbar {
    padding-top: 12px;
    border-top: 1px solid rgba(101, 215, 255, 0.1);
}

.company-settings-location-card__meta {
    margin-top: 0;
    align-items: center;
}

.company-settings-location-card__actions {
    justify-content: flex-start;
}

.company-settings-location-card__areas-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.company-settings-location-card__areas {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--company-settings-fabora-border-soft);
    background:
        radial-gradient(circle at 12% 10%, var(--company-settings-fabora-wash), transparent 28%),
        linear-gradient(180deg, rgba(11, 18, 28, 0.92), rgba(7, 11, 18, 0.97));
    box-shadow:
        inset 0 0 0 1px rgba(255, 122, 26, 0.03);
}

.company-settings-area-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.company-settings-area-tile {
    display: grid;
    gap: 14px;
    min-height: 100%;
    padding: 14px 14px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 122, 26, 0.22);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 122, 26, 0.07), transparent 36%),
        linear-gradient(180deg, rgba(13, 19, 30, 0.96), rgba(8, 12, 18, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 24px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 122, 26, 0.04),
        0 0 20px rgba(255, 122, 26, 0.05);
}

.company-settings-area-tile.is-selected {
    border-color: var(--company-settings-fabora-border-strong);
    box-shadow:
        0 0 0 1px rgba(255, 122, 26, 0.12),
        0 18px 32px rgba(0, 0, 0, 0.2),
        0 0 24px rgba(255, 122, 26, 0.09);
}

.company-settings-area-tile__head {
    display: grid;
    gap: 12px;
}

.company-settings-area-tile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.company-settings-area-tile__actions {
    justify-content: flex-start;
}

.company-settings-area-tile h5 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.company-settings-subeditor {
    background:
        linear-gradient(180deg, rgba(11, 17, 27, 0.92), rgba(8, 14, 23, 0.96));
    border-color: var(--company-settings-fabora-border-soft);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 1px rgba(255, 122, 26, 0.04);
}

.company-settings-area-empty {
    margin-top: 0;
}

.company-settings-page .button.primary {
    border-color: var(--company-settings-fabora-border);
    background:
        linear-gradient(135deg, #fff1e3 0%, #ffc883 20%, #ff973f 58%, var(--company-settings-fabora-orange) 100%);
    color: #210d03;
    box-shadow:
        0 16px 28px rgba(255, 122, 26, 0.18),
        0 0 20px rgba(255, 122, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.company-settings-page .button.primary:hover,
.company-settings-page .button.primary:focus-visible {
    border-color: var(--company-settings-fabora-border-strong);
    box-shadow:
        0 18px 30px rgba(255, 122, 26, 0.2),
        0 0 18px rgba(255, 122, 26, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.company-settings-page .company-settings-preset-actions > .status-pill,
.company-settings-page .company-settings-location-card__status > .status-pill,
.company-settings-page .company-settings-area-tile__meta > .status-pill,
.company-settings-page .company-settings-location-card__meta > .panel-badge {
    color: var(--company-settings-fabora-text-dark);
    border-color: var(--company-settings-fabora-border);
    background:
        linear-gradient(180deg, rgba(46, 21, 10, 0.94), rgba(22, 11, 8, 0.97));
    box-shadow:
        inset 0 0 0 1px rgba(255, 164, 92, 0.06),
        0 0 18px rgba(255, 122, 26, 0.08);
}

html[data-theme="light"] .company-settings-page {
    --company-settings-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 248, 252, 0.994));
    --company-settings-surface-alt:
        linear-gradient(180deg, rgba(252, 253, 255, 0.998), rgba(237, 244, 249, 0.994));
    --company-settings-border: rgba(88, 108, 130, 0.18);
    --company-settings-border-strong: rgba(80, 103, 126, 0.24);
    --company-settings-shadow:
        0 16px 28px rgba(31, 48, 71, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
    --company-settings-heading: #193044;
    --company-settings-muted: #5a6f83;
    --company-settings-muted-strong: #4f657a;
    --company-settings-neutral-chip-text: #30475b;
    --company-settings-neutral-chip-border: rgba(82, 101, 123, 0.22);
    --company-settings-neutral-chip-bg:
        linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(230, 237, 243, 0.995));
    --company-settings-neutral-chip-shadow:
        0 8px 14px rgba(36, 53, 76, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --company-settings-accent-text: #6b2f0c;
    --company-settings-accent-border: rgba(255, 122, 26, 0.24);
    --company-settings-accent-border-strong: rgba(255, 122, 26, 0.36);
}

html[data-theme="light"] .company-settings-logo-preview,
html[data-theme="light"] .company-settings-preset-item,
html[data-theme="light"] .company-settings-preset-editor,
html[data-theme="light"] .company-settings-workshop-reveal-card,
html[data-theme="light"] .company-settings-location-card {
    border-color: var(--company-settings-border);
    background: var(--company-settings-surface);
    box-shadow: var(--company-settings-shadow);
}

html[data-theme="light"] .company-settings-subeditor {
    border-color: var(--company-settings-border);
    background: var(--company-settings-surface-alt);
    box-shadow:
        0 16px 28px rgba(31, 48, 71, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 0 0 1px rgba(77, 102, 128, 0.04);
}

html[data-theme="light"] .company-settings-preset-item.is-selected,
html[data-theme="light"] .company-settings-location-card.is-selected {
    border-color: var(--company-settings-border-strong);
    box-shadow:
        0 0 0 1px rgba(20, 111, 151, 0.08),
        0 18px 30px rgba(31, 48, 71, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .company-settings-page .company-settings-preset-copy h4,
html[data-theme="light"] .company-settings-page .company-settings-preset-editor__head h4,
html[data-theme="light"] .company-settings-page .company-settings-workshop-reveal-head h4,
html[data-theme="light"] .company-settings-page .company-settings-location-card__identity h4,
html[data-theme="light"] .company-settings-page .company-settings-location-card__areas-head h4,
html[data-theme="light"] .company-settings-page .company-settings-area-tile h5,
html[data-theme="light"] .company-settings-page .empty-state strong {
    color: var(--company-settings-heading);
}

html[data-theme="light"] .company-settings-page .muted,
html[data-theme="light"] .company-settings-page small.muted,
html[data-theme="light"] .company-settings-page .field-hint {
    color: var(--company-settings-muted);
}

html[data-theme="light"] .company-settings-page .panel-heading .muted,
html[data-theme="light"] .company-settings-page .company-settings-preset-copy .muted,
html[data-theme="light"] .company-settings-page .company-settings-preset-editor__head .muted,
html[data-theme="light"] .company-settings-page .company-settings-workshop-reveal-head .muted,
html[data-theme="light"] .company-settings-page .company-settings-location-card__identity .muted,
html[data-theme="light"] .company-settings-page .company-settings-location-card__areas-head .muted,
html[data-theme="light"] .company-settings-page .empty-state .muted {
    color: var(--company-settings-muted-strong);
}

html[data-theme="light"] .company-settings-location-card__toolbar {
    border-top-color: rgba(82, 103, 125, 0.16);
}

html[data-theme="light"] .company-settings-location-card__areas {
    border-color: var(--company-settings-border);
    background:
        radial-gradient(circle at 12% 10%, rgba(92, 125, 156, 0.06), transparent 30%),
        linear-gradient(180deg, rgba(254, 254, 255, 0.998), rgba(243, 248, 252, 0.995));
    box-shadow:
        0 12px 22px rgba(31, 48, 71, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 0 0 1px rgba(92, 125, 156, 0.03);
}

html[data-theme="light"] .company-settings-area-tile {
    border-color: var(--company-settings-border);
    background:
        radial-gradient(circle at 100% 0, rgba(92, 125, 156, 0.07), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 249, 252, 0.994));
    box-shadow:
        0 12px 22px rgba(31, 48, 71, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 0 0 1px rgba(92, 125, 156, 0.04);
}

html[data-theme="light"] .company-settings-area-tile.is-selected {
    border-color: var(--company-settings-accent-border-strong);
    box-shadow:
        0 0 0 1px rgba(255, 122, 26, 0.08),
        0 16px 28px rgba(31, 48, 71, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .company-settings-page .status-pill,
html[data-theme="light"] .company-settings-page .panel-badge {
    color: var(--company-settings-neutral-chip-text);
    border-color: var(--company-settings-neutral-chip-border);
    background: var(--company-settings-neutral-chip-bg);
    box-shadow: var(--company-settings-neutral-chip-shadow);
}

html[data-theme="light"] .company-settings-page .company-settings-preset-actions > .status-pill,
html[data-theme="light"] .company-settings-page .company-settings-location-card__status > .status-pill,
html[data-theme="light"] .company-settings-page .company-settings-area-tile__meta > .status-pill,
html[data-theme="light"] .company-settings-page .company-settings-location-card__meta > .panel-badge {
    color: var(--company-settings-accent-text);
    border-color: var(--company-settings-accent-border);
    background:
        linear-gradient(135deg, rgba(255, 248, 239, 0.998), rgba(255, 232, 207, 0.996) 44%, rgba(255, 214, 176, 0.994));
    box-shadow:
        0 10px 18px rgba(255, 122, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

html[data-theme="light"] .company-settings-page .button.primary {
    border-color: var(--company-settings-accent-border);
    background:
        linear-gradient(135deg, #fff3e7 0%, #ffc986 20%, #ff9a43 58%, var(--company-settings-fabora-orange) 100%);
    color: #2d1104;
    box-shadow:
        0 16px 28px rgba(255, 122, 26, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

html[data-theme="light"] .company-settings-page .button.primary:hover,
html[data-theme="light"] .company-settings-page .button.primary:focus-visible {
    border-color: var(--company-settings-accent-border-strong);
    box-shadow:
        0 18px 30px rgba(255, 122, 26, 0.2),
        0 0 18px rgba(255, 122, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

@media (max-width: 1180px) {
    .company-settings-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .company-settings-shell,
    .company-settings-preset-layout {
        grid-template-columns: 1fr;
    }

    .company-settings-preset-item,
    .company-settings-workshop-reveal-head {
        flex-direction: column;
    }

    .company-settings-location-card__header,
    .company-settings-location-card__toolbar {
        grid-template-columns: 1fr;
    }

    .company-settings-preset-actions,
    .company-settings-pill-row,
    .company-settings-location-card__status,
    .company-settings-location-card__actions,
    .company-settings-location-card__areas-head,
    .company-settings-area-tile__meta {
        justify-content: flex-start;
    }

    .company-settings-area-tile-grid {
        grid-template-columns: 1fr;
    }
}

.operative-role-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.operative-role-option {
    position: relative;
    min-width: 0;
}

.operative-role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.operative-role-option span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(121, 138, 155, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(12, 21, 33, 0.92), rgba(8, 14, 22, 0.98));
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, background 140ms ease;
}

.operative-role-option span small {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.operative-role-option:hover span {
    transform: translateY(-1px);
    border-color: rgba(121, 138, 155, 0.28);
}

.operative-role-option--custom span {
    justify-content: space-between;
}

.operative-role-option input:checked + span {
    border-color: var(--operative-role-accent-strong);
    background:
        linear-gradient(180deg, rgba(14, 26, 39, 0.94), rgba(8, 14, 22, 0.99));
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 0 999px var(--operative-role-accent-glow),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 10px 18px rgba(3, 8, 16, 0.16);
}

.operative-role-option input:checked + span::after {
    content: "Remove";
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: auto;
    padding: 0 8px;
    border: 1px solid rgba(222, 233, 243, 0.1);
    border-radius: 999px;
    background: rgba(4, 10, 17, 0.3);
    color: rgba(224, 234, 243, 0.82);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.operative-role-option input:checked + span small {
    color: rgba(219, 231, 241, 0.78);
}

.operative-role-option input:disabled + span,
.operative-role-option--locked span {
    border-style: dashed;
    border-color: rgba(121, 138, 155, 0.14);
    background:
        linear-gradient(180deg, rgba(11, 18, 28, 0.78), rgba(7, 12, 20, 0.88));
    color: var(--muted);
    box-shadow: none;
}

.operative-role-option input:disabled + span::after {
    content: "Main Role";
    margin-left: auto;
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.operative-role-picker__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}

.operative-role-chip--dismissible {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.operative-role-chip--dismissible:hover,
.operative-role-chip--dismissible:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 999px var(--operative-role-accent-glow),
        0 10px 18px rgba(3, 8, 16, 0.12);
}

.operative-role-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(223, 233, 242, 0.14);
    border-radius: 999px;
    background: rgba(6, 12, 19, 0.28);
    color: rgba(223, 233, 242, 0.86);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.operative-role-picker__custom-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
}

.operative-role-picker__custom-entry input {
    width: 100%;
    min-width: 0;
}

.operative-role-picker__custom-entry .button {
    min-width: 112px;
    white-space: nowrap;
}

.operative-custom-role-field.is-hidden {
    display: none;
}

.operative-detail-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(101, 215, 255, 0.12);
}

html[data-theme="light"] .operative-tile {
    border-color: rgba(106, 121, 138, 0.16);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(242, 246, 249, 0.994));
    box-shadow:
        0 14px 24px rgba(30, 46, 67, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .operative-tile--tone-fabricator {
    --operative-accent: rgba(95, 134, 168, 0.82);
    --operative-accent-strong: rgba(95, 134, 168, 0.4);
    --operative-accent-glow: rgba(95, 134, 168, 0.12);
}

html[data-theme="light"] .operative-tile--tone-welder {
    --operative-accent: rgba(186, 135, 47, 0.82);
    --operative-accent-strong: rgba(186, 135, 47, 0.38);
    --operative-accent-glow: rgba(186, 135, 47, 0.12);
}

html[data-theme="light"] .operative-tile--tone-site-welder {
    --operative-accent: rgba(178, 95, 55, 0.82);
    --operative-accent-strong: rgba(178, 95, 55, 0.38);
    --operative-accent-glow: rgba(178, 95, 55, 0.12);
}

html[data-theme="light"] .operative-tile--tone-erector {
    --operative-accent: rgba(46, 131, 120, 0.82);
    --operative-accent-strong: rgba(46, 131, 120, 0.38);
    --operative-accent-glow: rgba(46, 131, 120, 0.12);
}

html[data-theme="light"] .operative-tile--tone-engineer {
    --operative-accent: rgba(58, 128, 166, 0.82);
    --operative-accent-strong: rgba(58, 128, 166, 0.38);
    --operative-accent-glow: rgba(58, 128, 166, 0.12);
}

html[data-theme="light"] .operative-tile--tone-lead {
    --operative-accent: rgba(102, 110, 172, 0.8);
    --operative-accent-strong: rgba(102, 110, 172, 0.38);
    --operative-accent-glow: rgba(102, 110, 172, 0.12);
}

html[data-theme="light"] .operative-tile--tone-operative {
    --operative-accent: rgba(115, 123, 132, 0.78);
    --operative-accent-strong: rgba(115, 123, 132, 0.34);
    --operative-accent-glow: rgba(115, 123, 132, 0.1);
}

html[data-theme="light"] .operative-tile:hover,
html[data-theme="light"] .operative-tile:focus-within,
html[data-theme="light"] .operative-tile--selected {
    border-color: var(--operative-accent-strong);
    box-shadow:
        0 18px 30px rgba(30, 46, 67, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 1px var(--operative-accent-glow);
}

html[data-theme="light"] .operative-tile--inactive {
    box-shadow:
        0 10px 18px rgba(30, 46, 67, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] .operative-tile__name-block h4 {
    color: #1c2d3e;
}

html[data-theme="light"] .operative-tile__role-badge {
    background:
        linear-gradient(180deg, rgba(247, 250, 252, 0.998), rgba(234, 240, 244, 0.994));
    color: #24384a;
}

html[data-theme="light"] .operative-tile__meta-flag {
    color: #1c2d3e;
    background:
        linear-gradient(180deg, rgba(241, 247, 251, 0.998), rgba(228, 237, 243, 0.994));
}

html[data-theme="light"] .operative-role-chip {
    color: #183141;
    background:
        linear-gradient(180deg, rgba(244, 248, 250, 0.998), rgba(233, 239, 243, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 0 0 999px var(--operative-role-accent-glow);
}

html[data-theme="light"] .operative-role-chip--muted {
    color: #5c7184;
    border-color: rgba(92, 112, 133, 0.16);
    background:
        linear-gradient(180deg, rgba(244, 248, 250, 0.998), rgba(234, 240, 244, 0.994));
}

html[data-theme="light"] .operative-detail-summary {
    border-color: rgba(92, 112, 133, 0.22);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(239, 245, 249, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .operative-detail-summary__label,
html[data-theme="light"] .field-hint {
    color: #5c7184;
}

html[data-theme="light"] .operative-detail-summary__identity strong {
    color: #1c2d3e;
}

html[data-theme="light"] .operative-role-chip,
html[data-theme="light"] .operative-role-option {
    --operative-role-accent: rgba(115, 123, 132, 0.78);
    --operative-role-accent-strong: rgba(115, 123, 132, 0.2);
    --operative-role-accent-glow: rgba(115, 123, 132, 0.05);
}

html[data-theme="light"] .operative-role-chip--tone-fabricator,
html[data-theme="light"] .operative-role-option--tone-fabricator {
    --operative-role-accent: rgba(95, 134, 168, 0.82);
    --operative-role-accent-strong: rgba(95, 134, 168, 0.24);
    --operative-role-accent-glow: rgba(95, 134, 168, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-welder,
html[data-theme="light"] .operative-role-option--tone-welder {
    --operative-role-accent: rgba(186, 135, 47, 0.82);
    --operative-role-accent-strong: rgba(186, 135, 47, 0.24);
    --operative-role-accent-glow: rgba(186, 135, 47, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-site-welder,
html[data-theme="light"] .operative-role-option--tone-site-welder {
    --operative-role-accent: rgba(178, 95, 55, 0.82);
    --operative-role-accent-strong: rgba(178, 95, 55, 0.24);
    --operative-role-accent-glow: rgba(178, 95, 55, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-erector,
html[data-theme="light"] .operative-role-option--tone-erector {
    --operative-role-accent: rgba(46, 131, 120, 0.82);
    --operative-role-accent-strong: rgba(46, 131, 120, 0.24);
    --operative-role-accent-glow: rgba(46, 131, 120, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-engineer,
html[data-theme="light"] .operative-role-option--tone-engineer {
    --operative-role-accent: rgba(58, 128, 166, 0.82);
    --operative-role-accent-strong: rgba(58, 128, 166, 0.24);
    --operative-role-accent-glow: rgba(58, 128, 166, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-lead,
html[data-theme="light"] .operative-role-option--tone-lead {
    --operative-role-accent: rgba(102, 110, 172, 0.8);
    --operative-role-accent-strong: rgba(102, 110, 172, 0.24);
    --operative-role-accent-glow: rgba(102, 110, 172, 0.08);
}

html[data-theme="light"] .operative-role-chip--tone-operative,
html[data-theme="light"] .operative-role-option--tone-operative {
    --operative-role-accent: rgba(115, 123, 132, 0.78);
    --operative-role-accent-strong: rgba(115, 123, 132, 0.2);
    --operative-role-accent-glow: rgba(115, 123, 132, 0.05);
}

html[data-theme="light"] .operative-role-chip--tone-neutral,
html[data-theme="light"] .operative-role-option--tone-neutral {
    --operative-role-accent: rgba(126, 134, 144, 0.78);
    --operative-role-accent-strong: rgba(126, 134, 144, 0.2);
    --operative-role-accent-glow: rgba(126, 134, 144, 0.05);
}

html[data-theme="light"] .operative-role-option span {
    border-color: rgba(92, 112, 133, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(241, 246, 249, 0.994));
    color: #1c2d3e;
}

html[data-theme="light"] .operative-role-option input:checked + span {
    border-color: var(--operative-role-accent-strong);
    background:
        linear-gradient(180deg, rgba(239, 246, 250, 0.998), rgba(226, 238, 244, 0.994));
    color: #183141;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 0 0 999px var(--operative-role-accent-glow),
        0 0 0 1px rgba(67, 118, 145, 0.04),
        0 8px 16px rgba(67, 118, 145, 0.06);
}

html[data-theme="light"] .operative-role-option input:checked + span::after {
    border-color: rgba(28, 45, 62, 0.08);
    background: rgba(255, 255, 255, 0.64);
    color: rgba(28, 45, 62, 0.72);
}

html[data-theme="light"] .operative-role-option input:checked + span small {
    color: rgba(28, 45, 62, 0.66);
}

html[data-theme="light"] .operative-role-chip--dismissible:hover,
html[data-theme="light"] .operative-role-chip--dismissible:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 0 0 999px var(--operative-role-accent-glow),
        0 8px 16px rgba(30, 46, 67, 0.08);
}

html[data-theme="light"] .operative-role-chip__remove {
    border-color: rgba(28, 45, 62, 0.1);
    background: rgba(255, 255, 255, 0.72);
    color: rgba(28, 45, 62, 0.76);
}

html[data-theme="light"] .operative-role-option input:disabled + span,
html[data-theme="light"] .operative-role-option--locked span {
    border-color: rgba(92, 112, 133, 0.14);
    background:
        linear-gradient(180deg, rgba(246, 249, 251, 0.998), rgba(237, 242, 246, 0.994));
    color: #6a7e91;
}

html[data-theme="light"] .operative-detail-panel__footer {
    border-top-color: rgba(92, 112, 133, 0.18);
}

@media (max-width: 980px) {
    .operatives-library-hero {
        grid-template-columns: 1fr;
    }

    .operative-detail-summary,
    .operative-detail-panel__heading {
        grid-template-columns: 1fr;
    }

    .operative-detail-panel__meta {
        justify-content: flex-start;
    }

    .operatives-library-hero__telemetry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .operative-tile-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .operative-role-picker {
        grid-template-columns: 1fr;
    }

    .operative-detail-panel__heading,
    .operative-detail-panel__footer,
    .operative-tile__head {
        flex-direction: column;
        align-items: stretch;
    }

    .operative-role-picker__custom-entry {
        grid-template-columns: 1fr;
    }

    .operative-role-picker__custom-entry .button {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .coshh-library-hero {
        grid-template-columns: 1fr;
    }

    .equipment-library-hero {
        grid-template-columns: 1fr;
    }

    .coshh-form-reveal {
        flex-direction: column;
        align-items: stretch;
    }

    .coshh-form-reveal__actions {
        justify-content: flex-start;
    }

    .coshh-item-card__head,
    .coshh-item-card__title-row,
    .coshh-category-detail__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .coshh-item-card__meta,
    .coshh-category-detail__summary {
        justify-items: start;
        justify-content: flex-start;
    }

    .equipment-item-card__badges {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .coshh-category-grid,
    .coshh-item-card__notes {
        grid-template-columns: 1fr;
    }

    .coshh-category-tile__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-library-hero__telemetry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .customer-library-header {
        grid-template-columns: 1fr;
    }

    .customer-library-header__tools {
        justify-items: stretch;
    }
}

@media (max-width: 700px) {
    .customer-tile-grid,
    .site-card-list,
    .site-contact-row__fields {
        grid-template-columns: 1fr;
    }

    .customer-library-header__main,
    .customer-library-header__tools,
    .customer-tile__head,
    .customer-tile__actions,
    .customer-overview-card__head,
    .customer-overview-card__actions,
    .site-detail-card__head,
    .site-detail-card__actions,
    .drill-section-head,
    .site-card__actions,
    .site-contact-form__actions,
    .compact-contact-card {
        flex-direction: column;
        align-items: stretch;
    }

    .compact-contact-card {
        grid-template-columns: 1fr;
    }

    .site-contact-row__actions {
        justify-content: flex-start;
    }
}

/* Saved RAMS Polish */
.rams-list-page .table-chip.rams-type-pill {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.13em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rams-list-page .table-chip.rams-type-pill-workshop {
    color: #e8fbff;
    border-color: rgba(101, 215, 255, 0.28);
    background:
        linear-gradient(135deg, rgba(13, 36, 55, 0.98), rgba(9, 23, 38, 0.99) 54%, rgba(5, 15, 27, 0.995));
    box-shadow:
        0 8px 16px rgba(8, 29, 38, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rams-list-page .rams-type-pill-site {
    color: #210d03;
    border-color: rgba(255, 183, 123, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 235, 204, 0.995), rgba(255, 189, 102, 0.994) 24%, rgba(255, 144, 39, 0.994) 60%, rgba(221, 91, 8, 0.996));
    box-shadow:
        0 8px 16px rgba(39, 20, 7, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.rams-list-page .saved-rams-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    align-content: start;
    min-width: 0;
    width: min(320px, 100%);
    max-width: 320px;
}

.rams-list-page .saved-rams-actions .action-link,
.rams-list-page .rams-record-actions .action-link {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    justify-content: center;
    line-height: 1;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rams-list-page .saved-rams-actions .action-link {
    width: 100%;
}

.rams-list-page .saved-rams-actions .action-link:not(.action-primary),
.rams-list-page .rams-record-actions-secondary .action-link {
    border-color: rgba(121, 137, 159, 0.22);
    background:
        linear-gradient(180deg, rgba(16, 24, 35, 0.95), rgba(8, 12, 19, 0.98));
    color: #dce7f3;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 16px rgba(0, 0, 0, 0.14);
}

.rams-list-page .saved-rams-actions .action-link:not(.action-primary):hover,
.rams-list-page .rams-record-actions-secondary .action-link:hover {
    border-color: rgba(101, 215, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 20px rgba(0, 0, 0, 0.16),
        0 0 14px rgba(53, 215, 255, 0.08);
}

.rams-list-page .saved-rams-actions .action-link[href*="/duplicate"],
.rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"] {
    color: #e6f1f8;
    border-color: rgba(139, 180, 205, 0.5);
    background:
        linear-gradient(180deg, rgba(70, 110, 134, 0.96), rgba(33, 54, 69, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 18px rgba(7, 14, 21, 0.16),
        0 0 0 1px rgba(122, 157, 181, 0.08);
}

.rams-list-page .saved-rams-actions .action-link[href*="/duplicate"]:hover,
.rams-list-page .saved-rams-actions .action-link[href*="/duplicate"]:focus-visible,
.rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"]:hover,
.rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"]:focus-visible {
    border-color: rgba(161, 201, 224, 0.58);
    background:
        linear-gradient(180deg, rgba(59, 92, 114, 0.98), rgba(28, 44, 57, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(7, 13, 20, 0.18),
        0 0 14px rgba(122, 157, 181, 0.16);
}

.rams-list-page .saved-rams-actions .action-link[href*="print=1"],
.rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"] {
    color: #e1e9ef;
    border-color: rgba(139, 154, 170, 0.48);
    background:
        linear-gradient(180deg, rgba(78, 92, 106, 0.96), rgba(35, 45, 54, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 18px rgba(8, 12, 18, 0.16),
        0 0 0 1px rgba(118, 133, 149, 0.08);
}

.rams-list-page .saved-rams-actions .action-link[href*="print=1"]:hover,
.rams-list-page .saved-rams-actions .action-link[href*="print=1"]:focus-visible,
.rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"]:hover,
.rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"]:focus-visible {
    border-color: rgba(156, 174, 191, 0.54);
    background:
        linear-gradient(180deg, rgba(65, 78, 91, 0.98), rgba(30, 38, 46, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(8, 12, 18, 0.18),
        0 0 14px rgba(118, 133, 149, 0.14);
}

.rams-list-page .action-primary {
    color: #210d03;
    border-color: rgba(255, 190, 131, 0.46);
    background:
        linear-gradient(180deg, rgba(255, 224, 176, 0.998), rgba(255, 177, 92, 0.994) 20%, rgba(255, 139, 34, 0.994) 56%, rgba(224, 92, 10, 0.996));
    box-shadow:
        0 12px 20px rgba(223, 93, 10, 0.16),
        0 0 16px rgba(255, 132, 38, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.rams-list-page .action-primary:hover {
    border-color: rgba(255, 214, 170, 0.58);
    box-shadow:
        0 14px 22px rgba(223, 93, 10, 0.18),
        0 0 18px rgba(255, 132, 38, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.rams-list-page button.action-link {
    appearance: none;
    -webkit-appearance: none;
}

.rams-list-page .saved-rams-actions .action-link.action-pdf,
.rams-list-page .rams-record-actions-secondary .action-link.action-pdf {
    color: #eef9ff;
    border-color: rgba(101, 191, 255, 0.54);
    background:
        linear-gradient(180deg, rgba(39, 125, 182, 0.96), rgba(15, 55, 87, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 18px rgba(5, 18, 31, 0.16),
        0 0 0 1px rgba(75, 171, 255, 0.1);
}

.rams-list-page .saved-rams-actions .action-link.action-pdf:hover,
.rams-list-page .saved-rams-actions .action-link.action-pdf:focus-visible,
.rams-list-page .rams-record-actions-secondary .action-link.action-pdf:hover,
.rams-list-page .rams-record-actions-secondary .action-link.action-pdf:focus-visible {
    border-color: rgba(137, 212, 255, 0.58);
    background:
        linear-gradient(180deg, rgba(33, 107, 159, 0.98), rgba(12, 45, 72, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 12px 20px rgba(5, 18, 31, 0.18),
        0 0 16px rgba(75, 171, 255, 0.18);
}

.rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready),
.rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready) {
    color: #e7f4eb;
    border-color: rgba(121, 184, 143, 0.48);
    background:
        linear-gradient(180deg, rgba(48, 107, 76, 0.96), rgba(18, 44, 29, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 18px rgba(6, 20, 15, 0.16),
        0 0 0 1px rgba(106, 194, 142, 0.08);
}

.rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready):hover,
.rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready):focus-visible,
.rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready):hover,
.rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready):focus-visible {
    border-color: rgba(140, 201, 160, 0.54);
    background:
        linear-gradient(180deg, rgba(40, 95, 66, 0.98), rgba(16, 38, 24, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(6, 20, 15, 0.18),
        0 0 14px rgba(106, 194, 142, 0.16);
}

.rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready,
.rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready {
    color: #e7f4eb;
    border-color: rgba(121, 184, 143, 0.48);
    background:
        linear-gradient(180deg, rgba(48, 107, 76, 0.96), rgba(18, 44, 29, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 18px rgba(6, 20, 15, 0.16),
        0 0 0 1px rgba(106, 194, 142, 0.08);
}

.rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready:hover,
.rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready:focus-visible,
.rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready:hover,
.rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready:focus-visible {
    border-color: rgba(140, 201, 160, 0.54);
    background:
        linear-gradient(180deg, rgba(40, 95, 66, 0.98), rgba(16, 38, 24, 0.995));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 12px 20px rgba(6, 20, 15, 0.18),
        0 0 14px rgba(106, 194, 142, 0.16);
}

.rams-record-actions {
    gap: 12px;
}

.rams-record-actions-secondary {
    gap: 8px;
    align-items: stretch;
}

.rams-record-actions-secondary .action-link {
    min-height: 36px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.rams-list-filter-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.rams-list-filter-field select::-ms-expand {
    display: none;
}

html[data-theme="light"] .rams-list-page .table-chip.rams-type-pill-workshop {
    color: #0b425a;
    border-color: rgba(36, 103, 118, 0.28);
    background:
        linear-gradient(135deg, rgba(244, 249, 252, 0.998), rgba(212, 231, 239, 0.996) 60%, rgba(168, 197, 210, 0.995));
    box-shadow:
        0 8px 16px rgba(36, 103, 118, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .rams-list-page .rams-type-pill-site {
    color: #261005;
    border-color: rgba(206, 92, 12, 0.24);
    background:
        linear-gradient(135deg, rgba(255, 244, 223, 0.998), rgba(255, 211, 147, 0.996) 24%, rgba(255, 159, 58, 0.994) 62%, rgba(229, 99, 13, 0.995));
    box-shadow:
        0 8px 16px rgba(230, 97, 11, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link:not(.action-primary),
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link {
    border-color: rgba(92, 112, 133, 0.18);
    background:
        linear-gradient(180deg, rgba(252, 253, 254, 0.998), rgba(241, 246, 249, 0.994));
    color: #1f364a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 18px rgba(30, 46, 67, 0.06);
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link:not(.action-primary):hover,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link:hover {
    border-color: rgba(36, 103, 118, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 12px 20px rgba(30, 46, 67, 0.08),
        0 0 14px rgba(13, 132, 187, 0.08);
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="/duplicate"],
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"] {
    color: #25485f;
    border-color: rgba(95, 122, 144, 0.36);
    background:
        linear-gradient(180deg, rgba(220, 236, 245, 0.998), rgba(197, 217, 229, 0.994));
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="/duplicate"]:hover,
html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="/duplicate"]:focus-visible,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"]:hover,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="/duplicate"]:focus-visible {
    border-color: rgba(95, 122, 144, 0.4);
    background:
        linear-gradient(180deg, rgba(223, 237, 245, 0.998), rgba(205, 222, 232, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 20px rgba(30, 46, 67, 0.08),
        0 0 14px rgba(95, 122, 144, 0.1);
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="print=1"],
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"] {
    color: #304252;
    border-color: rgba(109, 126, 145, 0.34);
    background:
        linear-gradient(180deg, rgba(229, 235, 240, 0.998), rgba(211, 220, 228, 0.994));
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="print=1"]:hover,
html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link[href*="print=1"]:focus-visible,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"]:hover,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link[href*="print=1"]:focus-visible {
    border-color: rgba(109, 126, 145, 0.38);
    background:
        linear-gradient(180deg, rgba(231, 237, 242, 0.998), rgba(217, 224, 230, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 12px 20px rgba(30, 46, 67, 0.08),
        0 0 14px rgba(109, 126, 145, 0.1);
}

html[data-theme="light"] .rams-list-page .action-primary {
    color: #261005;
    border-color: rgba(206, 92, 12, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 239, 211, 0.998), rgba(255, 197, 126, 0.996) 20%, rgba(255, 147, 43, 0.994) 56%, rgba(228, 96, 11, 0.995));
    box-shadow:
        0 12px 20px rgba(230, 97, 11, 0.12),
        0 0 14px rgba(242, 121, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

html[data-theme="light"] .rams-list-page .action-primary:hover {
    border-color: rgba(198, 84, 8, 0.38);
    box-shadow:
        0 14px 22px rgba(230, 97, 11, 0.14),
        0 0 18px rgba(242, 121, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-pdf,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-pdf {
    color: #0a5f8b;
    border-color: rgba(26, 128, 199, 0.4);
    background:
        linear-gradient(180deg, rgba(212, 239, 255, 0.998), rgba(188, 223, 243, 0.994));
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready),
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready) {
    color: #1f5e42;
    border-color: rgba(88, 151, 113, 0.36);
    background:
        linear-gradient(180deg, rgba(225, 243, 231, 0.998), rgba(202, 229, 212, 0.994));
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready {
    color: #1f5e42;
    border-color: rgba(88, 151, 113, 0.36);
    background:
        linear-gradient(180deg, rgba(225, 243, 231, 0.998), rgba(202, 229, 212, 0.994));
}

html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready):hover,
html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share:not(.is-share-ready):focus-visible,
html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready:hover,
html[data-theme="light"] .rams-list-page .saved-rams-actions .action-link.action-share.is-share-ready:focus-visible,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready):hover,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share:not(.is-share-ready):focus-visible,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready:hover,
html[data-theme="light"] .rams-list-page .rams-record-actions-secondary .action-link.action-share.is-share-ready:focus-visible {
    border-color: rgba(98, 160, 122, 0.42);
    background:
        linear-gradient(180deg, rgba(218, 239, 225, 0.998), rgba(194, 224, 205, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 12px 20px rgba(30, 46, 67, 0.08),
        0 0 14px rgba(88, 151, 113, 0.1);
}

@media (max-width: 700px) {
    .library-page--focused {
        gap: 12px;
    }

    .library-page--focused .hazard-library-hero,
    .library-page--focused .coshh-library-hero,
    .library-page--focused .equipment-library-hero {
        padding: 14px;
        gap: 10px;
    }

    .library-page--focused .hero-telemetry,
    .library-page--focused .hazard-library-hero__copy > .muted,
    .library-page--focused .coshh-library-hero__copy > .muted,
    .library-page--focused .equipment-library-hero__copy > .muted,
    .library-page--focused .hazard-library-hero__status,
    .library-page--focused .coshh-library-hero__status,
    .library-page--focused .equipment-library-hero__status,
    .library-page--focused .hazard-library-toolbar,
    .library-page--focused .coshh-library-toolbar,
    .library-page--focused .equipment-library-toolbar,
    .library-page--focused .coshh-library-panel--reveal,
    .library-page--focused .equipment-library-panel--reveal,
    .library-page--focused .hazard-library-panel--categories .coshh-category-tile:not(.coshh-category-tile--selected),
    .library-page--focused .coshh-library-panel--categories .coshh-category-tile:not(.coshh-category-tile--selected),
    .library-page--focused .equipment-library-panel--categories .coshh-category-tile:not(.coshh-category-tile--selected),
    .library-page--focused .hazard-library-panel--categories .panel-heading .muted,
    .library-page--focused .coshh-library-panel--categories .panel-heading .muted,
    .library-page--focused .equipment-library-panel--categories .panel-heading .muted,
    .library-page--focused .hazard-library-panel--focused-filters .panel-heading .muted,
    .library-page--focused .hazard-library-panel--category-detail .panel-heading .muted,
    .library-page--focused .coshh-library-panel--category-detail .panel-heading .muted,
    .library-page--focused .equipment-library-panel--category-detail .panel-heading .muted,
    .library-page--focused .hazard-library-panel--categories .panel-badge,
    .library-page--focused .coshh-library-panel--categories .panel-badge,
    .library-page--focused .equipment-library-panel--categories .panel-badge,
    .library-page--focused .hazard-library-panel--focused-filters .panel-badge {
        display: none;
    }

    .library-page--focused .hero-copy,
    .library-page--focused .hazard-selected-banner,
    .library-page--focused .coshh-selected-banner,
    .library-page--focused .equipment-selected-banner {
        gap: 6px;
    }

    .library-page--focused .hazard-selected-banner .status-pill,
    .library-page--focused .coshh-selected-banner .status-pill,
    .library-page--focused .equipment-selected-banner .status-pill {
        min-height: 34px;
        padding: 0 10px;
    }

    .library-page--focused .hazard-library-panel--categories,
    .library-page--focused .coshh-library-panel--categories,
    .library-page--focused .equipment-library-panel--categories,
    .library-page--focused .hazard-library-panel--focused-filters,
    .library-page--focused .hazard-library-panel--category-detail,
    .library-page--focused .coshh-library-panel--category-detail,
    .library-page--focused .equipment-library-panel--category-detail {
        padding: 14px;
    }

    .library-page--focused .hazard-library-panel--categories .panel-heading,
    .library-page--focused .coshh-library-panel--categories .panel-heading,
    .library-page--focused .equipment-library-panel--categories .panel-heading,
    .library-page--focused .hazard-library-panel--focused-filters .panel-heading,
    .library-page--focused .hazard-library-panel--category-detail .panel-heading,
    .library-page--focused .coshh-library-panel--category-detail .panel-heading,
    .library-page--focused .equipment-library-panel--category-detail .panel-heading {
        padding-bottom: 10px;
        gap: 8px;
    }

    .library-page--focused .hazard-library-panel--categories .hazard-category-grid,
    .library-page--focused .coshh-library-panel--categories .coshh-category-grid,
    .library-page--focused .equipment-library-panel--categories .coshh-category-grid {
        gap: 10px;
    }

    .library-page--focused .hazard-library-panel--categories .coshh-category-tile__metrics,
    .library-page--focused .coshh-library-panel--categories .coshh-category-tile__metrics,
    .library-page--focused .equipment-library-panel--categories .coshh-category-tile__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .library-page--focused .hazard-library-panel--categories .coshh-category-tile__metric,
    .library-page--focused .coshh-library-panel--categories .coshh-category-tile__metric,
    .library-page--focused .equipment-library-panel--categories .coshh-category-tile__metric {
        padding: 9px 8px;
    }

    .library-page--focused .coshh-category-detail__summary {
        gap: 8px;
    }

    .library-page--focused .coshh-category-detail__actions {
        margin-bottom: 12px;
        gap: 8px;
    }
}

/* Onboarding Wizard */
.onboarding-page {
    display: grid;
    gap: 18px;
    --onboarding-accent: #ff7a1a;
    --onboarding-accent-strong: #ffb470;
    --onboarding-border: rgba(101, 215, 255, 0.16);
    --onboarding-border-strong: rgba(101, 215, 255, 0.3);
    --onboarding-surface:
        radial-gradient(circle at 14% 14%, rgba(255, 122, 26, 0.1), transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(101, 215, 255, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(14, 22, 34, 0.97), rgba(5, 10, 19, 0.985));
    --onboarding-hero-surface:
        radial-gradient(circle at 12% 18%, rgba(101, 215, 255, 0.16), transparent 26%),
        radial-gradient(circle at 82% 14%, rgba(255, 122, 26, 0.17), transparent 30%),
        linear-gradient(110deg, rgba(101, 215, 255, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(15, 24, 39, 0.985), rgba(6, 11, 20, 0.992));
    --onboarding-rail-surface:
        radial-gradient(circle at 16% 10%, rgba(101, 215, 255, 0.13), transparent 24%),
        linear-gradient(180deg, rgba(13, 23, 38, 0.965), rgba(7, 13, 24, 0.985));
    --onboarding-step-surface:
        radial-gradient(circle at 88% 12%, rgba(255, 122, 26, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(14, 24, 40, 0.965), rgba(7, 13, 24, 0.985));
    --onboarding-card:
        linear-gradient(180deg, rgba(15, 26, 43, 0.94), rgba(7, 14, 25, 0.98));
    --onboarding-card-soft:
        linear-gradient(180deg, rgba(11, 20, 34, 0.92), rgba(6, 12, 22, 0.98));
    --onboarding-card-elevated:
        linear-gradient(135deg, rgba(101, 215, 255, 0.1), rgba(255, 122, 26, 0.08) 42%, rgba(8, 17, 30, 0.92) 100%),
        linear-gradient(180deg, rgba(14, 24, 40, 0.94), rgba(7, 13, 24, 0.98));
    --onboarding-section-surface:
        linear-gradient(145deg, rgba(101, 215, 255, 0.08), rgba(255, 122, 26, 0.05) 38%, transparent 72%),
        linear-gradient(180deg, rgba(10, 18, 31, 0.94), rgba(6, 11, 20, 0.98));
    --onboarding-copy-surface:
        linear-gradient(135deg, rgba(255, 122, 26, 0.14), rgba(101, 215, 255, 0.08) 48%, rgba(8, 16, 29, 0.92) 100%),
        linear-gradient(180deg, rgba(13, 22, 38, 0.94), rgba(6, 11, 21, 0.98));
    --onboarding-text-soft: #dbefff;
    --onboarding-muted: #a8bfd4;
}

.onboarding-page .hero-panel,
.onboarding-page .panel {
    backdrop-filter: blur(18px);
    background: var(--onboarding-surface);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(101, 215, 255, 0.06),
        0 0 30px rgba(101, 215, 255, 0.11);
}

.onboarding-page .hero-panel::after,
.onboarding-page .panel::after {
    background: linear-gradient(125deg, rgba(101, 215, 255, 0.74), rgba(255, 163, 96, 0.38), rgba(76, 134, 255, 0.44));
    opacity: 0.62;
}

.onboarding-page .panel::before {
    inset: 0;
    background:
        linear-gradient(135deg, rgba(101, 215, 255, 0.08), transparent 36%),
        radial-gradient(circle at 100% 0, rgba(255, 122, 26, 0.09), transparent 24%);
    opacity: 0.9;
}

.onboarding-page .eyebrow {
    color: var(--onboarding-accent-strong);
    text-shadow: 0 0 18px rgba(255, 122, 26, 0.14);
}

.onboarding-page .status-pill,
.onboarding-page .panel-badge {
    border-color: var(--onboarding-border-strong);
    background:
        linear-gradient(180deg, rgba(18, 29, 45, 0.92), rgba(9, 16, 28, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 18px rgba(101, 215, 255, 0.08);
}

.onboarding-page .muted {
    color: var(--onboarding-muted);
}

.onboarding-hero {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 18px;
    padding: 22px;
    align-items: stretch;
    background: var(--onboarding-hero-surface);
    box-shadow:
        0 28px 62px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(101, 215, 255, 0.13),
        0 0 28px rgba(255, 122, 26, 0.12);
}

.onboarding-hero__copy {
    position: relative;
    gap: 14px;
    padding: 24px;
    border: 1px solid rgba(101, 215, 255, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(8, 18, 31, 0.42), rgba(7, 13, 24, 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 36px rgba(0, 0, 0, 0.16);
}

.onboarding-hero__copy > div:first-child {
    display: grid;
    gap: 12px;
}

.onboarding-hero__copy h2 {
    font-size: clamp(1.9rem, 2.8vw, 2.85rem);
    line-height: 1.03;
    letter-spacing: 0.07em;
    text-shadow:
        0 0 22px rgba(101, 215, 255, 0.1),
        0 0 18px rgba(255, 122, 26, 0.12);
}

.onboarding-hero__copy h2::after {
    content: "";
    display: block;
    width: min(260px, 46%);
    height: 3px;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 122, 26, 0.94), rgba(101, 215, 255, 0.72), transparent);
    box-shadow: 0 0 16px rgba(255, 122, 26, 0.24);
}

.onboarding-hero__copy .muted {
    font-size: 0.96rem;
}

.onboarding-hero__telemetry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.onboarding-hero-card {
    min-height: 100%;
    padding: 18px 18px 16px;
    border: 1px solid rgba(101, 215, 255, 0.2);
    border-radius: 22px;
    background: var(--onboarding-card-elevated);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 34px rgba(0, 0, 0, 0.18);
}

.onboarding-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.12), transparent 16%),
        linear-gradient(140deg, rgba(101, 215, 255, 0.12), transparent 40%),
        radial-gradient(circle at 14% 0, rgba(255, 122, 26, 0.14), transparent 30%);
    opacity: 0.9;
    pointer-events: none;
}

.onboarding-hero-card strong,
.onboarding-hero-card span,
.onboarding-hero-card p {
    position: relative;
    z-index: 1;
}

.onboarding-hero-card strong {
    font-size: clamp(1.75rem, 2.2vw, 2.15rem);
    letter-spacing: 0.04em;
}

.onboarding-hero-card.telemetry-live {
    border-color: rgba(255, 122, 26, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 122, 26, 0.1),
        0 0 30px rgba(255, 122, 26, 0.16),
        0 16px 34px rgba(0, 0, 0, 0.22);
}

.onboarding-hero-card.telemetry-live strong {
    color: #fff0dd;
}

.onboarding-hero-card.telemetry-cyan {
    border-color: rgba(101, 215, 255, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(101, 215, 255, 0.1),
        0 0 30px rgba(101, 215, 255, 0.14),
        0 16px 34px rgba(0, 0, 0, 0.22);
}

.onboarding-hero-card.telemetry-cyan strong {
    color: #e5fbff;
}

.onboarding-hero .hero-status {
    gap: 12px;
}

.onboarding-hero .status-pill {
    min-height: 40px;
}

.onboarding-hero .status-pill:last-child {
    border-color: rgba(255, 122, 26, 0.28);
    color: #ffd6ad;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 18px rgba(255, 122, 26, 0.1);
}

.onboarding-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.onboarding-progress-panel,
.onboarding-step-panel {
    padding: 22px;
}

.onboarding-progress-panel {
    background: var(--onboarding-rail-surface);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(101, 215, 255, 0.12);
}

.onboarding-step-panel {
    background: var(--onboarding-step-surface);
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(255, 122, 26, 0.1);
}

.onboarding-progress-panel__heading,
.onboarding-step-panel__heading {
    position: relative;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(101, 215, 255, 0.16);
}

.onboarding-progress-panel__heading::after,
.onboarding-step-panel__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 180px;
    max-width: 62%;
    height: 1px;
    background: linear-gradient(90deg, rgba(101, 215, 255, 0.82), rgba(255, 122, 26, 0.7), transparent);
    box-shadow: 0 0 14px rgba(101, 215, 255, 0.16);
}

.onboarding-progress-list,
.onboarding-snapshot,
.onboarding-form,
.onboarding-step-shell {
    display: grid;
    gap: 16px;
}

.onboarding-progress-item {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px 16px;
    border: 1px solid var(--onboarding-border);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(101, 215, 255, 0.07), rgba(255, 122, 26, 0.04) 38%, transparent 72%),
        var(--onboarding-card-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.onboarding-progress-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(101, 215, 255, 0), rgba(101, 215, 255, 0.72), rgba(255, 122, 26, 0.96), rgba(255, 122, 26, 0));
    opacity: 0.24;
    transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.onboarding-progress-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(101, 215, 255, 0.1), rgba(255, 122, 26, 0.08) 32%, transparent 70%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.onboarding-progress-item:hover {
    border-color: var(--onboarding-border-strong);
    transform: translateX(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 16px 30px rgba(0, 0, 0, 0.2),
        0 0 22px rgba(101, 215, 255, 0.1);
}

.onboarding-progress-item:hover::after {
    opacity: 1;
}

.onboarding-progress-item.is-current {
    border-color: rgba(255, 122, 26, 0.46);
    transform: translateX(8px);
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.18), rgba(101, 215, 255, 0.08) 38%, transparent 80%),
        var(--onboarding-card-elevated);
    box-shadow:
        inset 0 0 0 1px rgba(255, 122, 26, 0.14),
        0 22px 40px rgba(0, 0, 0, 0.24),
        0 0 30px rgba(255, 122, 26, 0.16);
}

.onboarding-progress-item.is-current::before {
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.28);
}

.onboarding-progress-item.is-current::after {
    opacity: 0.82;
}

.onboarding-progress-item.is-complete {
    border-color: rgba(109, 255, 198, 0.28);
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.12), rgba(109, 255, 198, 0.08) 36%, transparent 75%),
        var(--onboarding-card-soft);
    box-shadow:
        inset 0 0 0 1px rgba(109, 255, 198, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(101, 215, 255, 0.08);
}

.onboarding-progress-item.is-complete::before {
    opacity: 0.72;
    background: linear-gradient(180deg, rgba(101, 215, 255, 0), rgba(101, 215, 255, 0.56), rgba(109, 255, 198, 0.92), rgba(109, 255, 198, 0));
}

.onboarding-progress-item.is-current.is-complete {
    border-color: rgba(255, 122, 26, 0.46);
    background:
        linear-gradient(90deg, rgba(255, 122, 26, 0.18), rgba(101, 215, 255, 0.08) 38%, transparent 80%),
        var(--onboarding-card-elevated);
    box-shadow:
        inset 0 0 0 1px rgba(255, 122, 26, 0.14),
        0 22px 40px rgba(0, 0, 0, 0.24),
        0 0 30px rgba(255, 122, 26, 0.16);
}

.onboarding-progress-item.is-current.is-complete::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(101, 215, 255, 0), rgba(101, 215, 255, 0.72), rgba(255, 122, 26, 0.96), rgba(255, 122, 26, 0));
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.28);
}

.onboarding-progress-item.is-locked {
    opacity: 0.54;
    cursor: default;
    background: linear-gradient(180deg, rgba(9, 16, 28, 0.82), rgba(6, 11, 20, 0.94));
}

.onboarding-progress-item.is-locked:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    border-color: var(--onboarding-border);
}

.onboarding-progress-item__index {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 241, 227, 0.12), rgba(101, 215, 255, 0.14) 44%, rgba(255, 122, 26, 0.2) 100%);
    color: #fff1e0;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 16px rgba(101, 215, 255, 0.08);
}

.onboarding-progress-item.is-current .onboarding-progress-item__index {
    border-color: rgba(255, 122, 26, 0.44);
    background: linear-gradient(135deg, rgba(255, 234, 210, 0.34), rgba(255, 122, 26, 0.78) 46%, rgba(101, 215, 255, 0.28) 100%);
    color: #fff9f2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 20px rgba(255, 122, 26, 0.22);
}

.onboarding-progress-item.is-complete .onboarding-progress-item__index {
    border-color: rgba(109, 255, 198, 0.34);
    background: linear-gradient(135deg, rgba(109, 255, 198, 0.28), rgba(101, 215, 255, 0.26));
    color: #effff7;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 18px rgba(109, 255, 198, 0.14);
}

.onboarding-progress-item.is-current.is-complete .onboarding-progress-item__index {
    border-color: rgba(255, 122, 26, 0.44);
    background: linear-gradient(135deg, rgba(255, 234, 210, 0.34), rgba(255, 122, 26, 0.78) 46%, rgba(101, 215, 255, 0.28) 100%);
    color: #fff9f2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 20px rgba(255, 122, 26, 0.22);
}

.onboarding-progress-item__copy {
    display: grid;
    gap: 4px;
}

.onboarding-progress-item__copy strong {
    color: #fff5ec;
    font-size: 0.94rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.onboarding-progress-item__copy span {
    color: var(--onboarding-muted);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.onboarding-progress-item.is-current .onboarding-progress-item__copy strong {
    color: #ffffff;
}

.onboarding-progress-item.is-current .onboarding-progress-item__copy span {
    color: #ffd8b5;
}

.onboarding-progress-item.is-complete .onboarding-progress-item__copy span {
    color: #b8f9e8;
}

.onboarding-progress-item.is-current.is-complete .onboarding-progress-item__copy span {
    color: #ffd8b5;
}

.onboarding-snapshot {
    gap: 12px;
}

.onboarding-snapshot__section {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 215, 255, 0.12);
    border-radius: 20px;
    background: var(--onboarding-section-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 30px rgba(0, 0, 0, 0.16);
}

.onboarding-snapshot__section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, rgba(101, 215, 255, 0.08), transparent 32%),
        radial-gradient(circle at 86% 0, rgba(255, 122, 26, 0.08), transparent 24%);
    opacity: 0.9;
    pointer-events: none;
}

.onboarding-snapshot__section:first-child {
    padding: 16px;
    border-top: 1px solid rgba(101, 215, 255, 0.12);
}

.onboarding-snapshot__head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.onboarding-snapshot__head h4,
.onboarding-copy-block h4 {
    margin: 0;
    color: #fff5eb;
    font-family: "Bahnschrift", "Segoe UI Variable", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onboarding-metric-grid,
.onboarding-feature-grid,
.onboarding-finish-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.onboarding-metric-card,
.onboarding-feature-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 16px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 20px;
    background: var(--onboarding-card-elevated);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.onboarding-metric-card::before,
.onboarding-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg, rgba(101, 215, 255, 0.12), transparent 34%),
        radial-gradient(circle at 100% 0, rgba(255, 122, 26, 0.12), transparent 28%);
    opacity: 0.92;
    pointer-events: none;
}

.onboarding-metric-card > *,
.onboarding-feature-card > * {
    position: relative;
    z-index: 1;
}

.onboarding-metric-card:hover,
.onboarding-feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--onboarding-border-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 36px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(101, 215, 255, 0.09);
}

.onboarding-step-shell--welcome .onboarding-feature-card:nth-child(1),
.onboarding-step-shell--finish .onboarding-feature-card:first-child {
    border-color: rgba(255, 122, 26, 0.3);
    background:
        linear-gradient(135deg, rgba(255, 122, 26, 0.16), rgba(101, 215, 255, 0.06) 46%, rgba(8, 17, 30, 0.9) 100%),
        linear-gradient(180deg, rgba(14, 24, 40, 0.94), rgba(7, 13, 24, 0.98));
}

.onboarding-step-shell--welcome .onboarding-feature-card:nth-child(2),
.onboarding-step-shell--finish .onboarding-feature-card:nth-child(2) {
    border-color: rgba(101, 215, 255, 0.28);
}

.onboarding-step-shell--welcome .onboarding-feature-card:nth-child(3),
.onboarding-step-shell--finish .onboarding-feature-card:nth-child(3) {
    border-color: rgba(109, 255, 198, 0.24);
}

.onboarding-step-shell--finish .onboarding-feature-card:nth-child(4) {
    border-color: rgba(255, 122, 26, 0.24);
}

.onboarding-metric-card span,
.onboarding-feature-card span {
    display: block;
    margin-bottom: 10px;
    color: #9cc8df;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.onboarding-metric-card strong,
.onboarding-feature-card strong {
    display: block;
    margin-bottom: 10px;
    color: #fff7f0;
    font-size: clamp(1.35rem, 1.8vw, 1.72rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.onboarding-metric-card:nth-child(odd) strong {
    color: #ffe8cf;
    text-shadow: 0 0 20px rgba(255, 122, 26, 0.14);
}

.onboarding-metric-card:nth-child(even) strong {
    color: #e5fbff;
    text-shadow: 0 0 20px rgba(101, 215, 255, 0.14);
}

.onboarding-feature-card p,
.onboarding-metric-card p,
.onboarding-copy-block p {
    margin: 0;
    color: var(--onboarding-text-soft);
    line-height: 1.6;
}

.onboarding-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.onboarding-pill-row .status-pill {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.68rem;
}

.onboarding-preview-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: var(--onboarding-text-soft);
}

.onboarding-preview-list li::marker {
    color: var(--onboarding-accent-strong);
}

.onboarding-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.onboarding-row-grid--single {
    grid-template-columns: 1fr;
}

.onboarding-row-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 22px;
    background: var(--onboarding-card-elevated);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 18px 30px rgba(0, 0, 0, 0.18);
}

.onboarding-row-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(101, 215, 255, 0.12);
}

.onboarding-progress-panel .panel-badge,
.onboarding-row-card__head .panel-badge,
.onboarding-snapshot__head .panel-badge {
    color: #ffe2c5;
    border-color: rgba(255, 122, 26, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 18px rgba(255, 122, 26, 0.1);
}

.onboarding-form > label,
.onboarding-form .form-grid > label,
.onboarding-row-card label {
    position: relative;
    display: grid;
    gap: 9px;
    padding: 12px 13px 13px;
    border: 1px solid rgba(101, 215, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 17, 30, 0.42), rgba(5, 10, 19, 0.16));
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.onboarding-form > label:focus-within,
.onboarding-form .form-grid > label:focus-within,
.onboarding-row-card label:focus-within {
    border-color: rgba(101, 215, 255, 0.28);
    background: linear-gradient(180deg, rgba(11, 22, 38, 0.58), rgba(5, 10, 19, 0.2));
    box-shadow:
        0 0 0 1px rgba(101, 215, 255, 0.12),
        0 0 24px rgba(101, 215, 255, 0.08);
}

.onboarding-form label span,
.onboarding-row-card label span {
    color: #a9c5db;
}

.onboarding-field.is-missing {
    border-color: rgba(255, 125, 150, 0.32);
    box-shadow:
        0 0 0 1px rgba(255, 125, 150, 0.1),
        0 0 20px rgba(255, 125, 150, 0.08);
}

.onboarding-form input,
.onboarding-form textarea,
.onboarding-row-card input {
    background: linear-gradient(180deg, rgba(4, 10, 18, 0.96), rgba(9, 18, 32, 0.88));
    border-color: rgba(101, 215, 255, 0.18);
}

.onboarding-form input:focus,
.onboarding-form textarea:focus,
.onboarding-row-card input:focus {
    border-color: rgba(101, 215, 255, 0.52);
    box-shadow:
        0 0 0 3px rgba(101, 215, 255, 0.12),
        0 0 24px rgba(10, 142, 196, 0.14);
}

.onboarding-field.is-missing input,
.onboarding-field.is-missing textarea {
    border-color: rgba(255, 125, 150, 0.42);
    box-shadow:
        0 0 0 1px rgba(255, 125, 150, 0.18),
        0 0 16px rgba(255, 125, 150, 0.1);
}

.onboarding-step-note {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed rgba(101, 215, 255, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(101, 215, 255, 0.08), rgba(255, 122, 26, 0.05) 40%, transparent 100%),
        linear-gradient(180deg, rgba(8, 17, 30, 0.7), rgba(6, 11, 20, 0.88));
}

.onboarding-step-panel__skip {
    margin-left: auto;
}

.onboarding-step-panel__skip .action-link {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border-color: rgba(255, 122, 26, 0.2);
    background:
        linear-gradient(180deg, rgba(40, 19, 9, 0.78), rgba(8, 16, 29, 0.92));
    box-shadow: 0 0 18px rgba(255, 122, 26, 0.08);
}

.onboarding-step-panel__skip .action-link:hover {
    border-color: rgba(255, 122, 26, 0.34);
    box-shadow: 0 0 20px rgba(255, 122, 26, 0.14);
}

.onboarding-copy-block {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 20px 22px;
    border: 1px solid rgba(101, 215, 255, 0.18);
    border-radius: 24px;
    background: var(--onboarding-copy-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 20px 36px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.onboarding-copy-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.12), transparent 18%),
        linear-gradient(145deg, rgba(101, 215, 255, 0.08), transparent 36%);
    opacity: 0.8;
    pointer-events: none;
}

.onboarding-copy-block > * {
    position: relative;
    z-index: 1;
}

.onboarding-copy-block .muted {
    max-width: 780px;
}

.onboarding-form .form-grid {
    gap: 12px;
}

.onboarding-step-shell--welcome,
.onboarding-step-shell--finish {
    gap: 18px;
}

.onboarding-step-shell--finish .onboarding-copy-block {
    padding: 22px 24px;
    border-color: rgba(255, 122, 26, 0.26);
    background:
        linear-gradient(135deg, rgba(255, 122, 26, 0.2), rgba(101, 215, 255, 0.08) 48%, rgba(8, 16, 29, 0.9) 100%),
        linear-gradient(180deg, rgba(14, 24, 40, 0.96), rgba(6, 11, 20, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 34px rgba(255, 122, 26, 0.14),
        0 22px 40px rgba(0, 0, 0, 0.22);
}

.onboarding-step-shell--finish .onboarding-copy-block h4 {
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    line-height: 1.08;
    text-shadow: 0 0 18px rgba(255, 122, 26, 0.12);
}

.onboarding-step-shell--finish .onboarding-copy-block h4::after {
    content: "";
    display: block;
    width: min(220px, 48%);
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 122, 26, 0.94), rgba(101, 215, 255, 0.76), transparent);
    box-shadow: 0 0 16px rgba(255, 122, 26, 0.22);
}

.onboarding-step-shell--finish .form-actions {
    margin-top: 4px;
}

.rams-setup-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: start;
    padding: 18px;
    border-color: rgba(255, 122, 26, 0.2);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 122, 26, 0.08), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(101, 215, 255, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(15, 25, 39, 0.96), rgba(7, 12, 22, 0.98));
}

.rams-setup-banner__copy {
    display: grid;
    gap: 12px;
}

.rams-setup-banner__copy h3 {
    margin: 0;
    color: #fff5ec;
}

.rams-setup-banner__missing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rams-setup-banner__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

html[data-theme="light"] .onboarding-page {
    --onboarding-border: rgba(71, 93, 116, 0.18);
    --onboarding-border-strong: rgba(14, 118, 158, 0.28);
    --onboarding-surface:
        linear-gradient(180deg, rgba(251, 253, 255, 0.998), rgba(236, 243, 249, 0.994));
    --onboarding-hero-surface:
        radial-gradient(circle at 12% 18%, rgba(255, 122, 26, 0.1), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(101, 215, 255, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(248, 251, 255, 0.998), rgba(235, 243, 249, 0.994));
    --onboarding-rail-surface:
        linear-gradient(180deg, rgba(247, 250, 253, 0.998), rgba(234, 241, 247, 0.994));
    --onboarding-step-surface:
        linear-gradient(180deg, rgba(252, 253, 255, 0.998), rgba(237, 244, 249, 0.994));
    --onboarding-card:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 248, 252, 0.994));
    --onboarding-card-soft:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(246, 249, 252, 0.994));
    --onboarding-card-elevated:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(242, 247, 251, 0.994));
    --onboarding-section-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 252, 0.994));
    --onboarding-copy-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 248, 252, 0.994));
    --onboarding-text-soft: #41596f;
    --onboarding-muted: #5d7388;
}

html[data-theme="light"] .onboarding-page .hero-panel,
html[data-theme="light"] .onboarding-page .panel {
    backdrop-filter: none;
    box-shadow:
        0 24px 48px rgba(61, 82, 107, 0.12),
        0 0 0 1px rgba(86, 104, 124, 0.05);
}

html[data-theme="light"] .onboarding-page .hero-panel::after,
html[data-theme="light"] .onboarding-page .panel::after {
    background: linear-gradient(90deg, rgba(14, 118, 158, 0.22), rgba(244, 122, 26, 0.24), transparent);
    opacity: 0.28;
}

html[data-theme="light"] .onboarding-page .panel::before {
    background:
        radial-gradient(circle at 100% 0, rgba(101, 215, 255, 0.08), transparent 22%),
        linear-gradient(145deg, rgba(14, 118, 158, 0.06), transparent 34%);
    opacity: 0.52;
}

html[data-theme="light"] .onboarding-page .eyebrow {
    color: #c96419;
    text-shadow: none;
}

html[data-theme="light"] .onboarding-page .muted {
    color: var(--onboarding-muted);
}

html[data-theme="light"] .onboarding-page .onboarding-hero {
    box-shadow:
        0 28px 56px rgba(61, 82, 107, 0.14),
        0 0 0 1px rgba(86, 104, 124, 0.05);
}

html[data-theme="light"] .onboarding-page .onboarding-hero__copy {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 252, 0.86));
    border-color: rgba(71, 93, 116, 0.14);
    box-shadow:
        0 18px 34px rgba(61, 82, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-hero__copy h2 {
    color: #15283c;
    text-shadow: none;
}

html[data-theme="light"] .onboarding-page .onboarding-hero__copy h2::after,
html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-copy-block h4::after {
    background: linear-gradient(90deg, rgba(244, 122, 26, 0.9), rgba(14, 118, 158, 0.62), transparent);
    box-shadow: none;
}

html[data-theme="light"] .onboarding-page .status-pill,
html[data-theme="light"] .onboarding-page .panel-badge {
    color: #30475d;
    border-color: rgba(71, 93, 116, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(242, 246, 250, 0.994));
    box-shadow: 0 8px 20px rgba(61, 82, 107, 0.08);
}

html[data-theme="light"] .onboarding-page .onboarding-hero .status-pill:last-child {
    color: #8b4712;
    border-color: rgba(216, 104, 24, 0.24);
    background: linear-gradient(180deg, rgba(255, 248, 241, 0.998), rgba(255, 235, 212, 0.99));
    box-shadow: 0 10px 22px rgba(216, 104, 24, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(71, 93, 116, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 248, 252, 0.994));
    box-shadow:
        0 18px 34px rgba(61, 82, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card::before,
html[data-theme="light"] .onboarding-page .onboarding-snapshot__section::before,
html[data-theme="light"] .onboarding-page .onboarding-copy-block::before,
html[data-theme="light"] .onboarding-page .onboarding-metric-card::before,
html[data-theme="light"] .onboarding-page .onboarding-feature-card::before {
    background:
        linear-gradient(160deg, rgba(14, 118, 158, 0.05), transparent 42%),
        radial-gradient(circle at 100% 0, rgba(244, 122, 26, 0.08), transparent 26%);
    opacity: 0.76;
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card span,
html[data-theme="light"] .onboarding-page .onboarding-feature-card span,
html[data-theme="light"] .onboarding-page .onboarding-metric-card span,
html[data-theme="light"] .onboarding-page .onboarding-form label span,
html[data-theme="light"] .onboarding-page .onboarding-row-card label span {
    color: #587085;
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card strong {
    color: #153049;
    text-shadow: none;
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card p {
    color: #445d73;
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card.telemetry-live {
    border-color: rgba(216, 104, 24, 0.24);
    background: linear-gradient(180deg, rgba(255, 250, 245, 0.998), rgba(255, 241, 226, 0.992));
    box-shadow:
        0 18px 34px rgba(216, 104, 24, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card.telemetry-live strong {
    color: #8b4510;
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card.telemetry-cyan {
    border-color: rgba(14, 118, 158, 0.22);
    background: linear-gradient(180deg, rgba(247, 252, 255, 0.998), rgba(235, 245, 251, 0.994));
    box-shadow:
        0 18px 34px rgba(14, 118, 158, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-hero-card.telemetry-cyan strong {
    color: #0f6b8c;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item__index {
    color: #334b60;
    border-color: rgba(71, 93, 116, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(237, 243, 248, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 8px 18px rgba(61, 82, 107, 0.08);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-panel,
html[data-theme="light"] .onboarding-page .onboarding-step-panel {
    box-shadow:
        0 24px 46px rgba(61, 82, 107, 0.12),
        0 0 0 1px rgba(86, 104, 124, 0.05);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-panel__heading,
html[data-theme="light"] .onboarding-page .onboarding-step-panel__heading,
html[data-theme="light"] .onboarding-page .onboarding-row-card__head {
    border-bottom-color: rgba(71, 93, 116, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-panel__heading::after,
html[data-theme="light"] .onboarding-page .onboarding-step-panel__heading::after {
    background: linear-gradient(90deg, rgba(244, 122, 26, 0.82), rgba(14, 118, 158, 0.52), transparent);
    box-shadow: none;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 252, 0.994));
    border-color: rgba(71, 93, 116, 0.13);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 24px rgba(61, 82, 107, 0.07);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item::before {
    background: linear-gradient(180deg, rgba(14, 118, 158, 0), rgba(14, 118, 158, 0.42), rgba(244, 122, 26, 0.72), rgba(244, 122, 26, 0));
    opacity: 0.42;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item::after {
    background: linear-gradient(90deg, rgba(14, 118, 158, 0.07), rgba(244, 122, 26, 0.06) 42%, transparent 78%);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item:hover {
    border-color: rgba(14, 118, 158, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 16px 28px rgba(61, 82, 107, 0.1);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current {
    border-color: rgba(216, 104, 24, 0.32);
    background:
        linear-gradient(90deg, rgba(255, 245, 234, 0.96), rgba(255, 255, 255, 0.98) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 252, 0.994));
    box-shadow:
        inset 0 0 0 1px rgba(216, 104, 24, 0.1),
        0 18px 30px rgba(216, 104, 24, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current::before,
html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current.is-complete::before {
    opacity: 1;
    box-shadow: none;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current::after {
    opacity: 1;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-complete {
    border-color: rgba(14, 118, 158, 0.24);
    background:
        linear-gradient(90deg, rgba(236, 248, 252, 0.92), rgba(255, 255, 255, 0.98) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 252, 0.994));
    box-shadow:
        inset 0 0 0 1px rgba(14, 118, 158, 0.08),
        0 14px 24px rgba(14, 118, 158, 0.08);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-complete::before {
    opacity: 0.8;
    background: linear-gradient(180deg, rgba(14, 118, 158, 0), rgba(14, 118, 158, 0.5), rgba(97, 191, 172, 0.78), rgba(97, 191, 172, 0));
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current.is-complete {
    border-color: rgba(216, 104, 24, 0.32);
    background:
        linear-gradient(90deg, rgba(255, 245, 234, 0.96), rgba(255, 255, 255, 0.98) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(244, 248, 252, 0.994));
    box-shadow:
        inset 0 0 0 1px rgba(216, 104, 24, 0.1),
        0 18px 30px rgba(216, 104, 24, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-locked {
    opacity: 1;
    background: linear-gradient(180deg, rgba(246, 249, 252, 0.998), rgba(238, 243, 247, 0.994));
    border-color: rgba(103, 120, 138, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-locked::before {
    background: linear-gradient(180deg, rgba(103, 120, 138, 0), rgba(103, 120, 138, 0.24), rgba(103, 120, 138, 0));
    opacity: 0.3;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-locked:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 24px rgba(61, 82, 107, 0.07);
    border-color: rgba(103, 120, 138, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current .onboarding-progress-item__index,
html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current.is-complete .onboarding-progress-item__index {
    color: #6e350b;
    border-color: rgba(216, 104, 24, 0.26);
    background: linear-gradient(180deg, rgba(255, 240, 221, 0.998), rgba(255, 207, 151, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 18px rgba(216, 104, 24, 0.14);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-complete .onboarding-progress-item__index {
    color: #0f6b8c;
    border-color: rgba(14, 118, 158, 0.22);
    background: linear-gradient(180deg, rgba(237, 250, 255, 0.998), rgba(211, 240, 249, 0.994));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 10px 18px rgba(14, 118, 158, 0.12);
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item__copy strong,
html[data-theme="light"] .onboarding-page .onboarding-snapshot__head h4,
html[data-theme="light"] .onboarding-page .onboarding-copy-block h4,
html[data-theme="light"] .onboarding-page .onboarding-feature-card strong,
html[data-theme="light"] .onboarding-page .onboarding-metric-card strong,
html[data-theme="light"] .onboarding-page .rams-setup-banner__copy h3 {
    color: #193146;
    text-shadow: none;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item__copy span {
    color: #5d7388;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current .onboarding-progress-item__copy span,
html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-current.is-complete .onboarding-progress-item__copy span {
    color: #a25213;
}

html[data-theme="light"] .onboarding-page .onboarding-progress-item.is-complete .onboarding-progress-item__copy span {
    color: #16748f;
}

html[data-theme="light"] .onboarding-page .onboarding-snapshot__section,
html[data-theme="light"] .onboarding-page .onboarding-row-card,
html[data-theme="light"] .onboarding-page .onboarding-feature-card,
html[data-theme="light"] .onboarding-page .onboarding-metric-card,
html[data-theme="light"] .onboarding-page .onboarding-copy-block,
html[data-theme="light"] .onboarding-page .rams-setup-banner {
    border-color: rgba(71, 93, 116, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 248, 252, 0.994));
    box-shadow:
        0 18px 34px rgba(61, 82, 107, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-step-shell--welcome .onboarding-feature-card:nth-child(1),
html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-feature-card:first-child,
html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-copy-block {
    border-color: rgba(216, 104, 24, 0.22);
    background: linear-gradient(180deg, rgba(255, 250, 245, 0.998), rgba(255, 242, 229, 0.992));
}

html[data-theme="light"] .onboarding-page .onboarding-step-shell--welcome .onboarding-feature-card:nth-child(2),
html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-feature-card:nth-child(2) {
    border-color: rgba(14, 118, 158, 0.22);
    background: linear-gradient(180deg, rgba(247, 252, 255, 0.998), rgba(236, 245, 251, 0.994));
}

html[data-theme="light"] .onboarding-page .onboarding-step-shell--welcome .onboarding-feature-card:nth-child(3),
html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-feature-card:nth-child(3) {
    border-color: rgba(89, 171, 154, 0.24);
    background: linear-gradient(180deg, rgba(247, 252, 251, 0.998), rgba(236, 248, 245, 0.994));
}

html[data-theme="light"] .onboarding-page .onboarding-step-shell--finish .onboarding-feature-card:nth-child(4) {
    border-color: rgba(216, 104, 24, 0.18);
}

html[data-theme="light"] .onboarding-page .onboarding-metric-card:nth-child(odd) strong {
    color: #9c4b12;
}

html[data-theme="light"] .onboarding-page .onboarding-metric-card:nth-child(even) strong {
    color: #0f6f93;
}

html[data-theme="light"] .onboarding-page .onboarding-form > label,
html[data-theme="light"] .onboarding-page .onboarding-form .form-grid > label,
html[data-theme="light"] .onboarding-page .onboarding-row-card label {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(245, 249, 252, 0.994));
    border-color: rgba(71, 93, 116, 0.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .onboarding-page .onboarding-form > label:focus-within,
html[data-theme="light"] .onboarding-page .onboarding-form .form-grid > label:focus-within,
html[data-theme="light"] .onboarding-page .onboarding-row-card label:focus-within {
    border-color: rgba(14, 118, 158, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(240, 247, 251, 0.994));
    box-shadow:
        0 0 0 1px rgba(14, 118, 158, 0.06),
        0 10px 24px rgba(14, 118, 158, 0.08);
}

html[data-theme="light"] .onboarding-page .onboarding-form input,
html[data-theme="light"] .onboarding-page .onboarding-form textarea,
html[data-theme="light"] .onboarding-page .onboarding-row-card input {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(242, 247, 251, 0.994));
    color: #1f3244;
    border-color: rgba(71, 93, 116, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .onboarding-page .onboarding-form input:focus,
html[data-theme="light"] .onboarding-page .onboarding-form textarea:focus,
html[data-theme="light"] .onboarding-page .onboarding-row-card input:focus {
    border-color: rgba(14, 118, 158, 0.38);
    box-shadow:
        0 0 0 3px rgba(14, 118, 158, 0.1),
        0 10px 22px rgba(14, 118, 158, 0.1);
}

html[data-theme="light"] .onboarding-page .onboarding-step-note {
    background: linear-gradient(180deg, rgba(250, 252, 254, 0.998), rgba(239, 246, 251, 0.994));
    border-color: rgba(14, 118, 158, 0.14);
}

html[data-theme="light"] .onboarding-page .onboarding-step-panel__skip .action-link {
    color: #30475d;
    border-color: rgba(216, 104, 24, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 247, 251, 0.994));
}

html[data-theme="light"] .onboarding-page .onboarding-step-panel__skip .action-link:hover {
    border-color: rgba(216, 104, 24, 0.26);
    box-shadow: 0 10px 20px rgba(216, 104, 24, 0.1);
}

html[data-theme="light"] .onboarding-page .rams-setup-banner {
    border-color: rgba(216, 104, 24, 0.18);
}

@media (max-width: 1100px) {
    .onboarding-layout {
        grid-template-columns: 1fr;
    }

    .onboarding-progress-panel {
        order: 2;
    }

    .onboarding-step-panel {
        order: 1;
    }
}

@media (max-width: 900px) {
    .onboarding-hero,
    .rams-setup-banner {
        grid-template-columns: 1fr;
    }

    .onboarding-hero__telemetry {
        grid-template-columns: 1fr;
    }

    .onboarding-hero__copy {
        padding: 20px;
    }
}

@media (max-width: 700px) {
    .onboarding-hero,
    .onboarding-progress-panel,
    .onboarding-step-panel,
    .rams-setup-banner {
        padding: 14px;
    }

    .onboarding-hero__copy,
    .onboarding-copy-block,
    .onboarding-row-card,
    .onboarding-snapshot__section {
        padding: 16px;
    }

    .onboarding-feature-grid,
    .onboarding-finish-grid,
    .onboarding-metric-grid,
    .onboarding-row-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-step-panel__heading,
    .rams-setup-banner__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .onboarding-progress-item:hover,
    .onboarding-progress-item.is-current {
        transform: none;
    }

    .onboarding-step-panel__skip {
        margin-left: 0;
    }

    .rams-setup-banner__actions .button {
        width: 100%;
        min-width: 0;
    }
}

.auth-page {
    min-height: 100vh;
    margin: 0;
}

.auth-layout {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 42px) 24px;
}

.auth-login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    display: grid;
    gap: clamp(12px, 3vw, 20px);
    justify-items: center;
}

.auth-hero {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    padding-top: 0;
}

.auth-hero::before,
.auth-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.auth-hero::before {
    top: 6px;
    left: 12%;
    right: 12%;
    height: clamp(188px, 38vw, 258px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(159, 242, 255, 0.18), transparent 36%),
        radial-gradient(circle at 52% 68%, rgba(255, 140, 71, 0.12), transparent 44%),
        radial-gradient(circle at 50% 48%, rgba(7, 16, 27, 0.68), rgba(7, 16, 27, 0) 74%);
    filter: blur(30px);
    opacity: 0.94;
}

.auth-hero::after {
    left: 24%;
    right: 24%;
    bottom: -6px;
    height: 16px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(3, 10, 19, 0.56) 0%, rgba(3, 10, 19, 0) 72%);
    filter: blur(14px);
    opacity: 0.64;
}

.auth-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 448px;
    display: grid;
    gap: 16px;
    padding: clamp(22px, 4vw, 26px);
    border-radius: 26px;
    border: 1px solid rgba(255, 153, 84, 0.18);
    background:
        linear-gradient(180deg, rgba(13, 25, 41, 0.97), rgba(7, 16, 28, 0.94)),
        rgba(8, 15, 24, 0.94);
    box-shadow:
        0 34px 68px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 153, 84, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
}

.auth-card::before,
.auth-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.auth-card::before {
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 202, 159, 0.92), rgba(101, 215, 255, 0.38), transparent);
    opacity: 0.84;
}

.auth-card::after {
    inset: auto -12% 54% auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 122, 26, 0.12) 0%, rgba(255, 122, 26, 0) 68%);
    filter: blur(10px);
    opacity: 0.7;
}

.auth-brand {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
}

.auth-brand h1 {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(1.9rem, 3.9vw, 2.28rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.auth-brand p {
    margin: 0;
    max-width: 34ch;
    color: rgba(209, 226, 239, 0.76);
    line-height: 1.58;
}

.auth-brand .eyebrow {
    margin: 0;
    color: #ffd0ab;
    letter-spacing: 0.2em;
}

.auth-brand-mark {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: clamp(232px, 42vw, 314px);
    aspect-ratio: 525 / 470;
    margin: 0 auto;
    animation: auth-brand-float 9.2s cubic-bezier(0.42, 0.08, 0.58, 0.96) infinite;
    will-change: transform;
}

.auth-brand-mark::before {
    content: "";
    position: absolute;
    inset: 14% 12% 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(6, 13, 23, 0.76), rgba(6, 13, 23, 0.12) 60%, rgba(6, 13, 23, 0) 78%);
    filter: blur(18px);
    opacity: 0.84;
    z-index: -1;
}

.auth-brand-mark::after {
    content: "";
    position: absolute;
    inset: 18% 16% 18%;
    background: linear-gradient(112deg, transparent 26%, rgba(101, 215, 255, 0.08) 45%, rgba(255, 153, 84, 0.08) 56%, transparent 76%);
    filter: blur(20px);
    opacity: 0.5;
    z-index: 0;
}

.auth-brand-mark__halo,
.auth-brand-mark__panel,
.auth-brand-mark__sheen {
    position: absolute;
    pointer-events: none;
}

.auth-brand-mark__halo {
    inset: -6% -10% -4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(159, 242, 255, 0.2), transparent 38%),
        radial-gradient(circle at 50% 70%, rgba(255, 140, 71, 0.12), transparent 44%);
    filter: blur(24px);
    opacity: 0.84;
    z-index: -2;
    animation: auth-brand-glow 8.6s ease-in-out infinite;
}

.auth-brand-mark__panel {
    inset: 18% 14% 20%;
    border-radius: 50%;
    background:
        linear-gradient(108deg, transparent 18%, rgba(255, 255, 255, 0.05) 38%, rgba(101, 215, 255, 0.12) 49%, rgba(255, 160, 101, 0.1) 56%, transparent 74%),
        radial-gradient(circle at 50% 50%, rgba(15, 30, 48, 0.3), rgba(15, 30, 48, 0) 74%);
    filter: blur(12px);
    opacity: 0.6;
    z-index: -1;
}

.auth-brand-mark__sheen {
    inset: 2% 0 6%;
    overflow: hidden;
    z-index: 3;
    opacity: 0.42;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #fff 44%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 50%, #fff 44%, transparent 74%);
}

.auth-brand-mark__sheen::before {
    content: "";
    position: absolute;
    inset: -18%;
    background: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.02) 43%, rgba(185, 236, 255, 0.32) 49%, rgba(255, 176, 118, 0.18) 51%, rgba(255, 255, 255, 0.06) 57%, transparent 69%);
    transform: translate3d(-140%, 0, 0) skewX(-18deg);
    animation: auth-brand-sheen 10.4s linear infinite;
    will-change: transform, opacity;
}

.auth-brand-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: auto;
    filter:
        drop-shadow(0 16px 28px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 20px rgba(101, 215, 255, 0.12))
        drop-shadow(0 0 12px rgba(255, 153, 84, 0.1));
    animation: auth-brand-tilt 10.4s ease-in-out infinite;
    will-change: transform;
}

.auth-form {
    display: grid;
    gap: 13px;
}

.auth-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.auth-link-row--between {
    justify-content: space-between;
}

.auth-link-row--end {
    justify-content: flex-end;
}

.auth-field {
    display: grid;
    gap: 7px;
}

.auth-field span {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(219, 230, 241, 0.74);
}

.auth-field input {
    width: 100%;
    padding: 14px 15px;
    border-color: rgba(126, 154, 179, 0.28);
    background:
        linear-gradient(180deg, rgba(7, 17, 30, 0.98), rgba(10, 22, 37, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.015);
}

.auth-field input:hover {
    border-color: rgba(255, 153, 84, 0.22);
}

.auth-field input:focus {
    border-color: rgba(255, 153, 84, 0.56);
    box-shadow:
        0 0 0 4px rgba(255, 122, 26, 0.14),
        0 14px 28px rgba(255, 122, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.auth-submit {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    margin-top: 2px;
    border-color: rgba(255, 156, 82, 0.48);
    background: linear-gradient(180deg, #ff9b44 0%, #f47a20 56%, #d45a0d 100%);
    color: #241004;
    font-weight: 800;
    letter-spacing: 0.14em;
    box-shadow:
        0 16px 28px rgba(255, 122, 26, 0.24),
        inset 0 1px 0 rgba(255, 234, 215, 0.12);
}

.auth-submit:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 171, 110, 0.6);
    background: linear-gradient(180deg, #ffaa57 0%, #f98024 54%, #da5f10 100%);
    box-shadow:
        0 18px 30px rgba(255, 122, 26, 0.28),
        inset 0 1px 0 rgba(255, 240, 226, 0.14);
}

.auth-submit:active {
    transform: translateY(0);
    border-color: rgba(228, 120, 45, 0.62);
    background: linear-gradient(180deg, #f08a31 0%, #df6816 100%);
    box-shadow:
        0 10px 18px rgba(255, 122, 26, 0.22),
        inset 0 1px 0 rgba(255, 231, 209, 0.08);
}

.auth-submit:focus-visible {
    outline: none;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 4px rgba(255, 153, 84, 0.22),
        0 16px 28px rgba(255, 122, 26, 0.24),
        inset 0 1px 0 rgba(255, 236, 220, 0.14);
}

.auth-link-row .text-link {
    color: #ffd0ab;
}

.auth-link-row .text-link:hover {
    color: #ffffff;
}

.auth-note {
    display: grid;
    gap: 6px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(255, 153, 84, 0.14);
    background:
        linear-gradient(180deg, rgba(13, 27, 44, 0.8), rgba(10, 22, 36, 0.72));
}

.auth-note strong,
.auth-note p {
    margin: 0;
}

.auth-note strong {
    color: #fff2e6;
    letter-spacing: 0.04em;
}

.auth-note p {
    color: rgba(209, 226, 239, 0.8);
    line-height: 1.48;
}

.auth-note code {
    color: #ffd0ab;
}

.auth-card .flash {
    border-color: rgba(255, 153, 84, 0.16);
    background: linear-gradient(180deg, rgba(14, 28, 45, 0.84), rgba(9, 18, 31, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.sidebar-session {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(119, 181, 208, 0.16);
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.9), rgba(9, 18, 31, 0.82));
}

.sidebar-session-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(209, 226, 239, 0.6);
}

.sidebar-session-user {
    display: block;
    margin-top: 4px;
    color: #f6fbff;
}

.sidebar-session-actions {
    margin-top: 12px;
}

.sidebar-session-link {
    width: 100%;
}

.account-security-page {
    display: grid;
    gap: 22px;
    max-width: 980px;
}

.account-security-panel {
    width: 100%;
}

.account-security-note {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(101, 215, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(9, 18, 31, 0.82), rgba(6, 12, 22, 0.92));
}

.account-security-note strong,
.account-security-note p {
    margin: 0;
}

.account-security-note strong {
    color: #f6fbff;
    letter-spacing: 0.04em;
}

.account-security-note p {
    color: var(--text-soft);
    line-height: 1.5;
}

.sidebar-logout-form {
    margin-top: 12px;
}

.sidebar-logout-button {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(119, 181, 208, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 43, 67, 0.96), rgba(11, 24, 39, 0.94));
    color: #f6fbff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.sidebar-logout-button:hover {
    transform: translateY(-1px);
    border-color: rgba(119, 181, 208, 0.3);
    box-shadow: 0 14px 24px rgba(2, 12, 23, 0.24);
}

.sidebar-logout-button:focus-visible {
    outline: 2px solid rgba(119, 181, 208, 0.38);
    outline-offset: 2px;
}

html[data-theme="light"] .auth-card {
    border-color: rgba(217, 104, 24, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.994), rgba(242, 247, 251, 0.982)),
        rgba(255, 255, 255, 0.98);
    box-shadow:
        0 30px 56px rgba(49, 78, 104, 0.14),
        0 0 0 1px rgba(217, 104, 24, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .auth-card::before {
    background: linear-gradient(90deg, transparent, rgba(229, 145, 82, 0.86), rgba(98, 178, 205, 0.34), transparent);
}

html[data-theme="light"] .auth-card::after {
    background: radial-gradient(circle, rgba(230, 144, 86, 0.12) 0%, rgba(230, 144, 86, 0) 70%);
}

html[data-theme="light"] .auth-field span,
html[data-theme="light"] .auth-note p,
html[data-theme="light"] .sidebar-session-label {
    color: rgba(48, 71, 93, 0.78);
}

html[data-theme="light"] .auth-brand p {
    color: #536779;
}

html[data-theme="light"] .auth-brand .eyebrow,
html[data-theme="light"] .auth-note code {
    color: #a85a1d;
}

html[data-theme="light"] .auth-link-row .text-link {
    color: #a85a1d;
}

html[data-theme="light"] .account-security-note {
    border-color: rgba(184, 199, 211, 0.88);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.996), rgba(244, 248, 251, 0.992));
}

html[data-theme="light"] .account-security-note strong {
    color: #21354a;
}

html[data-theme="light"] .account-security-note p {
    color: #536779;
}

html[data-theme="light"] .auth-field input {
    border-color: rgba(100, 120, 142, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.998), rgba(243, 247, 250, 0.99));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 1px 0 rgba(74, 98, 123, 0.04);
}

html[data-theme="light"] .auth-field input:hover {
    border-color: rgba(217, 104, 24, 0.26);
}

html[data-theme="light"] .auth-field input:focus {
    border-color: rgba(217, 104, 24, 0.42);
    box-shadow:
        0 0 0 4px rgba(217, 104, 24, 0.12),
        0 14px 26px rgba(217, 104, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .auth-note,
html[data-theme="light"] .sidebar-session {
    border-color: rgba(217, 104, 24, 0.14);
    background: linear-gradient(180deg, rgba(255, 253, 250, 0.994), rgba(244, 247, 250, 0.986));
}

html[data-theme="light"] .sidebar-session-user,
html[data-theme="light"] .auth-brand h1 {
    color: #1f3244;
}

html[data-theme="light"] .auth-note strong {
    color: #21354a;
}

html[data-theme="light"] .auth-card .flash {
    border-color: rgba(217, 104, 24, 0.14);
    background: linear-gradient(180deg, rgba(252, 249, 245, 0.996), rgba(244, 247, 250, 0.992));
    box-shadow:
        0 12px 22px rgba(61, 82, 107, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

html[data-theme="light"] .auth-hero::before {
    background:
        radial-gradient(circle at 50% 30%, rgba(120, 211, 235, 0.18), transparent 36%),
        radial-gradient(circle at 52% 68%, rgba(231, 155, 97, 0.12), transparent 44%),
        radial-gradient(circle at 50% 48%, rgba(18, 28, 40, 0.8), rgba(18, 28, 40, 0) 74%);
    opacity: 0.8;
}

html[data-theme="light"] .auth-hero::after {
    background: radial-gradient(circle, rgba(79, 110, 139, 0.18) 0%, rgba(79, 110, 139, 0) 72%);
    opacity: 0.52;
}

html[data-theme="light"] .auth-brand-mark {
    background: none;
}

html[data-theme="light"] .auth-brand-mark::before {
    background: radial-gradient(circle at 50% 50%, rgba(18, 29, 41, 0.78), rgba(18, 29, 41, 0.12) 60%, rgba(18, 29, 41, 0) 78%);
    opacity: 0.72;
}

html[data-theme="light"] .auth-brand-mark__halo {
    background:
        radial-gradient(circle at 50% 38%, rgba(106, 204, 230, 0.22), transparent 40%),
        radial-gradient(circle at 50% 68%, rgba(230, 152, 95, 0.12), transparent 44%);
    opacity: 0.76;
}

html[data-theme="light"] .auth-brand-mark__panel {
    background:
        linear-gradient(108deg, transparent 18%, rgba(255, 255, 255, 0.08) 38%, rgba(126, 215, 237, 0.16) 49%, rgba(235, 167, 108, 0.12) 56%, transparent 74%),
        radial-gradient(circle at 50% 50%, rgba(25, 38, 57, 0.28), rgba(25, 38, 57, 0) 74%);
    opacity: 0.62;
}

html[data-theme="light"] .auth-brand-mark__sheen::before {
    background: linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, 0.08) 43%, rgba(133, 214, 234, 0.34) 49%, rgba(237, 174, 118, 0.2) 51%, rgba(255, 255, 255, 0.14) 57%, transparent 69%);
}

html[data-theme="light"] .auth-brand-logo {
    filter:
        drop-shadow(0 16px 28px rgba(61, 82, 107, 0.16))
        drop-shadow(0 0 16px rgba(120, 211, 235, 0.14));
}

html[data-theme="light"] .auth-submit {
    border-color: rgba(191, 74, 10, 0.36);
    background: linear-gradient(180deg, #ffab59 0%, #f67f21 56%, #d85c10 100%);
    color: #241004;
    box-shadow:
        0 16px 28px rgba(217, 104, 24, 0.18),
        inset 0 1px 0 rgba(255, 246, 238, 0.18);
}

html[data-theme="light"] .auth-submit:hover {
    border-color: rgba(191, 74, 10, 0.42);
    background: linear-gradient(180deg, #ffb56a 0%, #f98629 54%, #dd6213 100%);
    box-shadow:
        0 18px 30px rgba(217, 104, 24, 0.2),
        inset 0 1px 0 rgba(255, 250, 244, 0.22);
}

html[data-theme="light"] .auth-submit:active {
    border-color: rgba(191, 74, 10, 0.46);
    background: linear-gradient(180deg, #f4943e 0%, #e36d1b 100%);
}

html[data-theme="light"] .auth-submit:focus-visible {
    box-shadow:
        0 0 0 4px rgba(217, 104, 24, 0.16),
        0 16px 28px rgba(217, 104, 24, 0.18),
        inset 0 1px 0 rgba(255, 248, 241, 0.2);
}

html[data-theme="light"] .sidebar-logout-button {
    border-color: rgba(14, 118, 158, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(236, 243, 248, 0.97));
    color: #1f3244;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 20px 18px 18px;
    }

    .auth-brand {
        gap: 8px;
    }

    .auth-login-shell {
        gap: 14px;
    }

    .auth-brand h1 {
        max-width: 11ch;
        font-size: clamp(1.75rem, 8vw, 2.02rem);
    }

    .auth-hero::before {
        left: 8%;
        right: 8%;
        height: 170px;
    }

    .auth-brand-mark {
        width: clamp(194px, 60vw, 236px);
    }

    .auth-brand-logo {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-brand-mark,
    .auth-brand-mark__halo,
    .auth-brand-logo,
    .auth-brand-mark__sheen::before {
        animation: none !important;
        transform: none !important;
    }

    .auth-brand-mark__sheen {
        opacity: 0.22;
    }

    .auth-submit:hover,
    .auth-submit:active,
    .auth-submit:focus-visible,
    .auth-field input:focus {
        transform: none;
    }
}

@keyframes auth-brand-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -7px, 0);
    }
}

@keyframes auth-brand-tilt {
    0%,
    100% {
        transform: rotate(-1.7deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotate(0.65deg) translate3d(0, 2px, 0);
    }
}

@keyframes auth-brand-glow {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.03);
    }
}

@keyframes auth-brand-sheen {
    0% {
        transform: translate3d(-140%, 0, 0) skewX(-18deg);
        opacity: 0;
    }

    14% {
        opacity: 0.28;
    }

    30% {
        opacity: 0.06;
    }

    100% {
        transform: translate3d(140%, 0, 0) skewX(-18deg);
        opacity: 0;
    }
}