/*
   Shared documentation theme matching the blue backend section style:
   dark blue page background with lighter dark-blue cards and readable text.
*/
:root {
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
    --bg: #0b1626 !important;
    --panel: #14253a !important;
    --panel-soft: #18314f !important;
    --panel-strong: #101820 !important;
    --white: #ffffff !important;
    --text: #ffffff !important;
    --ink: #ffffff !important;
    --muted: #c7d8ec !important;
    --line: rgba(161, 190, 231, 0.22) !important;
    --accent: #2872fa !important;
    --accent-2: #8db7ff !important;
    --warning: #8db7ff !important;
    --danger: #ff9b9b !important;
    --shadow: 0 18px 48px rgba(2, 8, 18, 0.36) !important;
    --radius: 8px !important;
}

html,
body {
    min-height: 100%;
    font-family: var(--font-sans) !important;
    letter-spacing: 0 !important;
}

body {
    font-family: var(--font-sans) !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(40, 114, 250, 0.22), transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(61, 124, 221, 0.18), transparent 34%),
        linear-gradient(180deg, #0d1b2d 0%, #0b1626 48%, #08111f 100%) !important;
}

button,
input,
textarea,
select,
a,
p,
li,
td,
th,
h1,
h2,
h3,
h4,
strong,
.button,
.btn,
.cta,
.nav {
    font-family: var(--font-sans) !important;
    letter-spacing: 0 !important;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono) !important;
}

a {
    color: #8db7ff;
}

.hero,
.hero-shell,
.panel,
.card,
.section,
.stat,
.mini,
.step-card,
.state-card,
.table,
.table-row,
.endpoint,
.list-card,
.code-card,
.proof-card,
.use-case,
.note,
.warning,
.danger,
.callout,
.settings-card,
.overview-card,
.shot-shell,
.legend-item,
.doc-card,
.footer-panel {
    color: #ffffff !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(40, 114, 250, 0.16), rgba(161, 190, 231, 0.045) 44%),
        #14253a !important;
    box-shadow: 0 18px 48px rgba(2, 8, 18, 0.36) !important;
}

.nav {
    display: grid !important;
    gap: 8px !important;
}

.nav strong {
    margin-bottom: 4px !important;
}

.nav a {
    border: 1px solid rgba(161, 190, 231, 0.20) !important;
    background: rgba(24, 49, 79, 0.72) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.nav a:hover {
    border-color: rgba(141, 183, 255, 0.48) !important;
    background: rgba(40, 114, 250, 0.24) !important;
}

.hero-shell::before,
.hero-shell::after {
    background: rgba(40, 114, 250, 0.18) !important;
}

.card-head,
.list-card-body,
.shot-label {
    color: #ffffff !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
    background: #18314f !important;
}

.list-card-body {
    background: #122238 !important;
}

.eyebrow,
.tag,
.badge,
.method,
.get,
.post,
.status-pill {
    color: #dbeafe !important;
    border-color: rgba(40, 114, 250, 0.34) !important;
    background: rgba(40, 114, 250, 0.22) !important;
}

p,
li,
td,
th,
.lead,
.lede,
.muted,
.link span,
.card p,
.panel p,
.mini p,
.stat span,
.proof-card span,
.feature span,
.use-case span,
.list-card p,
.endpoint p,
.footer-panel span,
.shot-head span,
.shot-label span {
    color: #c7d8ec !important;
}

h1,
h2,
h3,
h4,
strong,
.card-head strong,
.stat strong,
.mini strong,
.feature strong,
.use-case strong,
.product-name {
    color: #ffffff !important;
}

.nav,
.links,
.toc,
.grid-nav {
    color: #ffffff !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
    background: #122238 !important;
    box-shadow: 0 18px 48px rgba(2, 8, 18, 0.28) !important;
}

.nav a,
.button,
.btn,
.cta,
button,
.text-link {
    color: #ffffff !important;
    border-color: rgba(161, 190, 231, 0.28) !important;
    background: #18314f !important;
    text-decoration: none !important;
}

.nav a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.btn-primary,
.cta-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2872fa, #1559ed) !important;
    border-color: #2872fa !important;
}

.nav a:hover,
.button:hover,
.btn:hover,
.cta:hover,
button:hover,
.text-link:hover {
    color: #ffffff !important;
    background: #2872fa !important;
    border-color: #2872fa !important;
}

code,
kbd {
    color: #ffffff !important;
    background: #203f68 !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
}

pre {
    color: #e8eef7 !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
    background: #0b1118 !important;
}

pre code {
    color: inherit !important;
    background: transparent !important;
}

table,
.comparison,
.device-matrix {
    color: #ffffff !important;
    border-color: rgba(161, 190, 231, 0.22) !important;
    background: #122238 !important;
}

th {
    color: #ffffff !important;
    background: #18314f !important;
}

td,
th,
.row {
    border-color: rgba(161, 190, 231, 0.18) !important;
}

.feature-icon,
.feature-icon *,
.shot-badge,
.legend-num {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2872fa, #1559ed) !important;
}

.hero-actions,
.actions,
.feature-actions,
.cta-row {
    color: #ffffff !important;
}

.shot-stage {
    border-color: rgba(161, 190, 231, 0.22) !important;
    background:
        linear-gradient(135deg, rgba(40, 114, 250, 0.18), rgba(161, 190, 231, 0.05)),
        #14253a !important;
}

.shot-grid {
    background-image:
        linear-gradient(rgba(161, 190, 231, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(161, 190, 231, 0.08) 1px, transparent 1px) !important;
}

.doc-shot,
.dashboard-shot,
img[src$=".svg"] {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.led-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.led-dot {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 2px;
    background: #8db7ff;
    box-shadow: 0 0 14px currentColor, inset 0 0 5px rgba(255, 255, 255, 0.58);
}

.led-yellow { color: #ffd84d; background: #ffd84d; }
.led-red { color: #ff4040; background: #ff4040; }
.led-magenta { color: #ff4dff; background: #ff4dff; }
.led-cyan { color: #28d7ff; background: #28d7ff; }
.led-blue { color: #2872fa; background: #2872fa; }
.led-green { color: #35e875; background: #35e875; }
.led-white { color: #ffffff; background: #ffffff; }
.led-off { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.16); }

.led-breathe {
    animation: led-breathe 2s ease-in-out infinite;
}

.led-slow-red {
    animation: led-blink-red-1000 2s steps(1, end) infinite;
}

.led-fast-red {
    animation: led-blink-red-250 .5s steps(1, end) infinite;
}

.led-button-red {
    animation: led-blink-red-500 1s steps(1, end) infinite;
}

.led-green-blink {
    animation: led-blink-green-1000 2s steps(1, end) infinite;
}

.led-fast-magenta {
    animation: led-blink-magenta-100 .2s steps(1, end) infinite;
}

.led-alt-red-green {
    animation: led-alt-red-green 1.08s steps(1, end) infinite;
}

.led-red-blink {
    animation: led-red-blink 2.16s steps(1, end) infinite;
}

.led-download {
    animation: led-download .18s steps(1, end) infinite;
}

.led-fw-update {
    animation: led-fw-update .36s steps(1, end) infinite;
}

.led-transfer-ramp {
    animation: led-transfer-ramp 6s linear infinite;
}

.led-complete {
    animation: led-complete .64s steps(1, end) infinite;
}

.led-sos {
    animation: led-sos 5.52s steps(1, end) infinite;
}

.led-rainbow {
    animation: led-rainbow .6s steps(1, end) infinite;
}

@keyframes led-breathe {
    0%, 100% { opacity: .35; filter: brightness(.72); }
    50% { opacity: 1; filter: brightness(1.35); }
}

@keyframes led-blink-red-1000 {
    0%, 50% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-blink-red-250 {
    0%, 50% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-blink-red-500 {
    0%, 50% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-blink-green-1000 {
    0%, 50% { color: #35e875; background: #35e875; box-shadow: 0 0 14px #35e875, inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-blink-magenta-100 {
    0%, 50% { color: #ff4dff; background: #ff4dff; box-shadow: 0 0 14px #ff4dff, inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-alt-red-green {
    0%, 16.66%, 33.34%, 50%, 66.68%, 83.34% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    16.67%, 33.33%, 50.01%, 66.67%, 83.35%, 100% { color: #35e875; background: #35e875; box-shadow: 0 0 14px #35e875, inset 0 0 5px rgba(255, 255, 255, .58); }
}

@keyframes led-red-blink {
    0%, 8.33%, 16.67%, 25%, 33.33%, 41.67%, 50%, 58.33%, 66.67%, 75%, 83.33%, 91.67% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    8.34%, 16.66%, 25.01%, 33.32%, 41.68%, 49.99%, 58.34%, 66.66%, 75.01%, 83.32%, 91.68%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-download {
    0%, 50% { color: rgb(0, 180, 255); background: rgb(0, 180, 255); box-shadow: 0 0 14px rgb(0, 180, 255), inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: rgb(0, 0, 255); background: rgb(0, 0, 255); box-shadow: 0 0 14px rgb(0, 0, 255), inset 0 0 5px rgba(255, 255, 255, .58); }
}

@keyframes led-fw-update {
    0%, 50% { color: rgb(0, 70, 255); background: rgb(0, 70, 255); box-shadow: 0 0 14px rgb(0, 70, 255), inset 0 0 5px rgba(255, 255, 255, .58); }
    50.01%, 100% { color: rgb(0, 0, 32); background: rgb(0, 0, 32); box-shadow: 0 0 8px rgb(0, 0, 32), inset 0 0 5px rgba(255, 255, 255, .22); }
}

@keyframes led-transfer-ramp {
    0% { color: rgb(0, 32, 255); background: rgb(0, 32, 255); }
    50% { color: rgb(0, 220, 255); background: rgb(0, 220, 255); }
    100% { color: rgb(255, 255, 255); background: rgb(255, 255, 255); }
}

@keyframes led-complete {
    0%, 24.99% { color: #2872fa; background: #2872fa; }
    25%, 49.99% { color: #ffffff; background: #ffffff; }
    50%, 74.99% { color: #28d7ff; background: #28d7ff; }
    75%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-sos {
    0%, 3.26%, 6.52%, 9.78%, 13.04%, 23.91%, 33.70%, 36.96%, 46.74%, 50%, 59.78%, 67.39%, 70.65%, 73.91%, 77.17%, 80.43% { color: #ff4040; background: #ff4040; box-shadow: 0 0 14px #ff4040, inset 0 0 5px rgba(255, 255, 255, .58); }
    3.27%, 6.51%, 9.79%, 13.03%, 16.31%, 23.90%, 33.71%, 36.95%, 46.75%, 49.99%, 59.79%, 67.38%, 70.66%, 73.90%, 77.18%, 80.42%, 83.70%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@keyframes led-rainbow {
    0%, 16.66% { color: #ff4040; background: #ff4040; }
    16.67%, 33.33% { color: #ffd84d; background: #ffd84d; }
    33.34%, 49.99% { color: #35e875; background: #35e875; }
    50%, 66.66% { color: #28d7ff; background: #28d7ff; }
    66.67%, 83.33% { color: #2872fa; background: #2872fa; }
    83.34%, 100% { color: #26384f; background: #26384f; box-shadow: inset 0 0 5px rgba(255, 255, 255, .16); }
}

@media (max-width: 720px) {
    .list-card[style] {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}