:root {
    --scc-ink: #17212b;
    --scc-muted: #65727e;
    --scc-surface: #ffffff;
    --scc-line: #dce4e9;
    --scc-accent: #0f766e;
    --scc-accent-dark: #115e59;
}

body {
    background: #eef3f4;
    color: var(--scc-ink);
}

.scc-shell {
    min-height: 100vh;
}

.scc-brand {
    letter-spacing: .02em;
}

.scc-panel {
    background: var(--scc-surface);
    border: 1px solid var(--scc-line);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(23, 33, 43, .06);
}

.scc-eyebrow {
    color: var(--scc-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.btn-scc {
    background: var(--scc-accent);
    border-color: var(--scc-accent);
    color: #fff;
}

.btn-scc:hover,
.btn-scc:focus {
    background: var(--scc-accent-dark);
    border-color: var(--scc-accent-dark);
    color: #fff;
}

.scc-status-dot {
    background: #198754;
    border-radius: 50%;
    display: inline-block;
    height: .6rem;
    margin-right: .35rem;
    width: .6rem;
}

.scc-card-icon {
    color: var(--scc-accent);
    font-size: 1.35rem;
}

.scc-panel .btn {
    white-space: nowrap;
}