/* A COR DO PAINEL SAI DE UM NUMERO SO.
 *
 * Tudo que e "da marca" aqui dentro - fundo, gradiente, acento, anel de foco,
 * ate o tom do texto - e derivado de --brand-hue. Trocar essa matiz repinta o
 * painel inteiro, nos dois temas, sem tocar em mais nada.
 *
 * Existe porque os paineis dos projetos sao identicos entre si, e painel
 * parecido e convite pra postar promocao de um nicho no grupo do outro. A cor e
 * o que da pra reconhecer de relance, antes de ler o titulo.
 *
 * O valor de cada projeto vem do theme-project.css, escrito pelo clone. Este
 * 215 (azul) e so o padrao de quem abrir sem aquele arquivo.
 *
 * --brand-sat e a INTENSIDADE, e vale so pras areas grandes (fundo, superficie,
 * campo). Existe porque matiz nao e percebida com a mesma forca: rosa a 100%
 * pesa muito mais na tela que azul a 100%, mesmo sendo o mesmo numero. Acento,
 * titulo e anel de foco ficam de fora e mantem a cor cheia - baixar tudo junto
 * desbotaria o painel inteiro em vez de so acalmar o fundo.
 *
 * As saturacoes e luminosidades abaixo sao as do azul original, medidas uma a
 * uma - por isso os numeros quebrados. So a matiz virou variavel; o resto do
 * equilibrio do tema ficou intacto. --ok, --warn e --error NAO entram nisso, de
 * proposito: verde de sucesso e vermelho de erro nao podem mudar de cor junto
 * com a marca, senao param de significar o que significam.
 */
:root {
    --brand-hue: 215;
    --brand-sat: 1;

    --bg: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 96%);
    --bg-deep: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 92%);
    --bg-gradient-top-left: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 73% / 0.34);
    --bg-gradient-top-right: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 86% / 0.45);
    --bg-gradient-bottom: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 72% / 0.18);
    --bg-ink: hsl(var(--brand-hue) 59% 7.6%);
    --surface: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 98.4% / 0.84);
    --surface-strong: hsl(var(--brand-hue) calc(40% * var(--brand-sat)) 99.4%);
    --surface-alt: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 96.1% / 0.92);
    --ink: hsl(var(--brand-hue) 44% 13.9%);
    --muted: hsl(var(--brand-hue) 20.5% 46.9%);
    --line: hsl(var(--brand-hue) 44% 13.9% / 0.1);
    --accent: hsl(var(--brand-hue) 100% 54.3%);
    --accent-deep: hsl(var(--brand-hue) 86% 42.2%);
    --accent-soft: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 92.9%);
    --ok: #11895a;
    --warn: #c07a15;
    --error: #cc425e;
    --shadow: 0 12px 30px hsl(var(--brand-hue) 64.7% 33.3% / 0.08);
    --radius-xl: 14px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --grid-line: rgba(255, 255, 255, 0.25);
    --modal-backdrop: hsl(var(--brand-hue) 59% 7.6% / 0.45);
    --terminal-bg-top: #e4e7eb;
    --terminal-bg-bottom: #d7dbe0;
    --terminal-text: #232733;
    --field-bg: rgba(255, 255, 255, 0.88);
    --field-bg-focus: rgba(255, 255, 255, 0.96);
    --field-text: hsl(var(--brand-hue) 44% 13.9%);
    --field-placeholder: hsl(var(--brand-hue) 20.5% 46.9% / 0.9);
    --focus-ring: hsl(var(--brand-hue) 100% 54.3% / 0.24);
    --focus-outline: hsl(var(--brand-hue) 100% 54.3% / 0.6);
    --loading-overlay: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 95.3% / 0.66);
    --loading-surface: rgba(255, 255, 255, 0.94);
    --loading-border: hsl(var(--brand-hue) 44% 13.9% / 0.08);
}

body[data-theme="dark"] {
    --bg: hsl(var(--brand-hue) calc(60% * var(--brand-sat)) 8.8%);
    --bg-deep: hsl(var(--brand-hue) calc(57.7% * var(--brand-sat)) 13.9%);
    --bg-gradient-top-left: hsl(var(--brand-hue) calc(65.8% * var(--brand-sat)) 43.5% / 0.28);
    --bg-gradient-top-right: hsl(var(--brand-hue) calc(58.3% * var(--brand-sat)) 32% / 0.34);
    --bg-gradient-bottom: hsl(var(--brand-hue) calc(77.8% * var(--brand-sat)) 21.2% / 0.24);
    --surface: hsl(var(--brand-hue) calc(52% * var(--brand-sat)) 9.8% / 0.86);
    --surface-strong: hsl(var(--brand-hue) calc(51.4% * var(--brand-sat)) 14.5%);
    --surface-alt: hsl(var(--brand-hue) calc(51.4% * var(--brand-sat)) 14.5% / 0.94);
    --ink: hsl(var(--brand-hue) 100% 96.7%);
    --muted: hsl(var(--brand-hue) 36.1% 71.2%);
    --line: hsl(var(--brand-hue) 100% 88% / 0.12);
    --accent: hsl(var(--brand-hue) 100% 67.5%);
    --accent-deep: hsl(var(--brand-hue) 100% 80.4%);
    --accent-soft: hsl(var(--brand-hue) calc(100% * var(--brand-sat)) 67.5% / 0.14);
    --ok: #5dd39e;
    --warn: #f2b45e;
    --error: #ff7d93;
    --shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
    --grid-line: rgba(255, 255, 255, 0.04);
    --modal-backdrop: hsl(var(--brand-hue) 68.4% 3.7% / 0.62);
    --terminal-bg-top: #3a3d42;
    --terminal-bg-bottom: #2c2f33;
    --terminal-text: #e6e8eb;
    --field-bg: hsl(var(--brand-hue) calc(49.3% * var(--brand-sat)) 13.9% / 0.98);
    --field-bg-focus: hsl(var(--brand-hue) calc(47% * var(--brand-sat)) 16.3%);
    --field-text: hsl(var(--brand-hue) 100% 96.7%);
    --field-placeholder: hsl(var(--brand-hue) 36.1% 71.2% / 0.88);
    --focus-ring: hsl(var(--brand-hue) 100% 67.5% / 0.24);
    --focus-outline: hsl(var(--brand-hue) 100% 80.4% / 0.72);
    --loading-overlay: hsl(var(--brand-hue) calc(68.4% * var(--brand-sat)) 3.7% / 0.68);
    --loading-surface: hsl(var(--brand-hue) calc(52% * var(--brand-sat)) 9.8% / 0.94);
    --loading-border: hsl(var(--brand-hue) 100% 88% / 0.12);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--ink);
    background: linear-gradient(
        180deg,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 72%, var(--bg-deep)) 55%,
        var(--bg-deep) 100%
    );
    min-height: 100vh;
    overflow-x: hidden;
    color-scheme: light;
    font-variant-numeric: tabular-nums;
}

body.modal-open {
    overflow: hidden;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 80;
    transform: translateY(-140%);
    background: var(--surface-strong);
    color: var(--accent-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.skip-link:focus {
    transform: translateY(0);
}

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, hsl(var(--brand-hue) 100% 54.3% / 0.18), transparent 38%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

.login-card {
    width: min(460px, 100%);
    padding: 32px 28px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

body[data-theme="dark"] .login-card {
    background: hsl(var(--brand-hue) 52% 9.8% / 0.96);
}

.login-eyebrow {
    margin: 0 0 10px;
    font-family: 'Archivo Expanded', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    color: var(--accent-deep);
}

.login-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    max-width: none;
    margin-bottom: 10px;
}

.login-copy {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: 1.6;
}

.login-form {
    gap: 14px;
}

.panel-loading {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--loading-overlay);
    backdrop-filter: blur(10px);
}

.panel-loading.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

.panel-loading-card {
    min-width: min(420px, 100%);
    max-width: 460px;
    padding: 28px 24px;
    border-radius: var(--radius-xl);
    background: var(--loading-surface);
    border: 1px solid var(--loading-border);
    box-shadow: var(--shadow);
    text-align: center;
}

.panel-loading-card strong {
    display: block;
    font-family: 'Archivo Expanded', sans-serif;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--ink);
}

.panel-loading-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.loading-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 999px;
    border: 4px solid hsl(var(--brand-hue) 100% 54.3% / 0.16);
    border-top-color: var(--accent);
    animation: panel-spin 0.8s linear infinite;
}

@keyframes panel-spin {
    to {
        transform: rotate(360deg);
    }
}

.background {
    display: none;
}

.app-shell {
    position: relative;
    padding: 40px 28px 60px;
    max-width: 1680px;
    margin: 0 auto;
    overflow-x: clip;
}

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

.app-main:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 8px;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 15;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    box-shadow: 0 12px 32px rgba(30, 73, 140, 0.08);
    backdrop-filter: blur(16px);
}

.hero-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.eyebrow {
    margin: 0 0 7px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-deep);
    font-weight: 700;
    font-size: 1.38rem;
}

.operation-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.operation-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.operation-chip.running,
.operation-chip.ready {
    background: rgba(17, 137, 90, 0.12);
    border-color: rgba(17, 137, 90, 0.24);
    color: var(--ok);
}

.operation-chip.stopped,
.operation-chip.error,
.operation-chip.auth_failure,
.operation-chip.disconnected {
    background: rgba(204, 66, 94, 0.12);
    border-color: rgba(204, 66, 94, 0.24);
    color: var(--error);
}

.operation-chip.starting,
.operation-chip.stopping,
.operation-chip.warning,
.operation-chip.unsaved {
    background: rgba(192, 122, 21, 0.12);
    border-color: rgba(192, 122, 21, 0.26);
    color: var(--warn);
}

.theme-toggle {
    padding: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.theme-toggle.icon-only {
    border-radius: 999px;
}

h1,
h2 {
    font-family: 'Archivo Expanded', sans-serif;
    margin: 0;
}

h1 {
    font-size: clamp(2.1rem, 3vw, 3.35rem);
    max-width: 12ch;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

h2 {
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.hero > div:first-child {
    max-width: 760px;
}

.hero-copy {
    max-width: 58ch;
    color: var(--muted);
    margin-top: 0;
    font-size: 1.02rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: center;
}

.board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    min-width: 0;
}

.board-single {
    grid-template-columns: minmax(0, 1fr);
}

.board-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tab-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
}

.tab-button {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 10px 18px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-button:hover {
    color: var(--ink);
}

.tab-button.is-active {
    color: var(--accent-deep);
    border-bottom-color: var(--accent);
}

.tab-panel.hidden {
    display: none;
}

.card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--line) 70%, white 10%);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    width: 100%;
    align-self: start;
    min-width: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.card.is-collapsed {
    padding-bottom: 20px;
}

.card.is-collapsed > :not(.card-header) {
    display: none !important;
}

.draggable-card {
    user-select: text;
}

.card.highlight {
    background:
        linear-gradient(160deg, rgba(253, 254, 255, 0.96), rgba(231, 242, 255, 0.92)),
        linear-gradient(135deg, hsl(var(--brand-hue) 100% 54.3% / 0.08), transparent 55%);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    padding-right: 50px;
    min-width: 0;
}

.header-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.card-header > h2,
.card-header > .header-inline {
    min-width: 0;
    max-width: 100%;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
}

.header-primary-action {
    order: -1;
}

.header-actions > .button {
    align-self: center;
}

.collapse-toggle {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid transparent;
    box-shadow: none;
    background: transparent;
    color: var(--muted);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.collapse-toggle:hover {
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
    color: var(--accent-deep);
    transform: none;
}

.button {
    appearance: none;
    border: 0;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, opacity 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(1px) scale(0.98);
}

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.button:focus-visible,
.modal-option:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--focus-ring);
}

.button.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.button.is-success {
    box-shadow: 0 0 0 4px rgba(17, 137, 90, 0.15);
}

.button.is-error {
    box-shadow: 0 0 0 4px rgba(204, 66, 94, 0.16);
}

.button-primary {
    background: linear-gradient(135deg, var(--accent), #4f9cff);
    color: #f7fbff;
    box-shadow: 0 10px 24px hsl(var(--brand-hue) 100% 54.3% / 0.24);
}

.button-secondary {
    background: linear-gradient(135deg, #10233f, #19345b);
    color: #eff6ff;
    box-shadow: 0 10px 22px rgba(16, 35, 63, 0.22);
}

.button-warning {
    background: rgba(192, 122, 21, 0.14);
    color: var(--warn);
    box-shadow: none;
}

.button-danger {
    background: rgba(204, 66, 94, 0.13);
    color: var(--error);
    box-shadow: none;
}

.button-ghost {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.button.state-running {
    background: rgba(17, 137, 90, 0.12);
    color: var(--ok);
    box-shadow: none;
}

.button.state-stopped {
    background: rgba(204, 66, 94, 0.12);
    color: var(--error);
    box-shadow: none;
}

.button.state-busy {
    background: rgba(192, 122, 21, 0.12);
    color: var(--warn);
    box-shadow: none;
}

.status-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

.card.has-unsaved-changes {
    border-color: rgba(192, 122, 21, 0.34);
    box-shadow: inset 0 0 0 1px rgba(192, 122, 21, 0.2), var(--shadow);
}

.card.has-unsaved-changes .card-header h2::after,
.card.has-unsaved-changes .header-inline h2::after {
    content: "PENDENTE";
    display: inline-flex;
    margin-left: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(192, 122, 21, 0.12);
    color: var(--warn);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0;
    vertical-align: middle;
}

.strategy-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}

.strategy-section {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 82%, white 8%), transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}

.strategy-title {
    color: var(--muted);
    font-size: 0.74rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

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

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

.strategy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.strategy-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.strategy-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.strategy-empty {
    padding: 4px 0 0;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

.platform-card {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.platform-card.inline {
    min-height: 68px;
}

.platform-name {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-button {
    width: auto !important;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 8px;
    background: transparent;
    box-shadow: none;
    font-size: 0.95rem;
}

.platform-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
}

.platform-indicator.success {
    background: rgba(17, 137, 90, 0.12);
    color: var(--ok);
}

.platform-indicator.stopped {
    background: rgba(204, 66, 94, 0.12);
    color: var(--error);
}

.metric {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-width: 0;
}

.metric-wide {
    grid-column: span 1;
}

.metric .label {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.metric .value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric .value.small-date {
    font-size: 0.98rem;
    line-height: 1.2;
    white-space: nowrap;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pill.running,
.pill.ready,
.pill.success {
    background: rgba(17, 137, 90, 0.12);
    color: var(--ok);
}

.pill.starting,
.pill.waiting_qr,
.pill.warning {
    background: rgba(192, 122, 21, 0.12);
    color: var(--warn);
}

.pill.operation-role {
    background: rgba(192, 122, 21, 0.16);
    color: var(--warn);
    box-shadow: inset 0 0 0 1px rgba(192, 122, 21, 0.2);
}

.pill.sentinel,
.pill.standby_cold,
.pill.standby-cold {
    background: rgba(37, 99, 235, 0.16);
    color: hsl(var(--brand-hue) 76% 48%);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
}

.pill.paused_outside_schedule,
.pill.sentinel_resting {
    background: rgba(37, 99, 235, 0.12);
    color: hsl(var(--brand-hue) 76% 48%);
}

.pill.error,
.pill.auth_failure,
.pill.disconnected,
.pill.stopped {
    background: rgba(204, 66, 94, 0.12);
    color: var(--error);
}

.client-list,
.event-list {
    display: grid;
    gap: 12px;
}

.scroll-panel {
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
    min-width: 0;
}

.modal-card > * {
    min-width: 0;
}

.modal-card > .muted,
.modal-card > .visually-hidden {
    margin: 0;
}

.modal-card > .form,
.modal-card > .scroll-panel,
#integrationModalBody {
    min-height: 0;
}

.modal-card > .form,
.modal-card > .scroll-panel,
#integrationModalBody {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 4px;
}

.client-item,
.event-item {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

.client-item strong,
.event-item strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.35;
}

.muted {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Os tres formatos aceitos pela lista de Promocoes em Massa. Formato colado
   errado e o erro mais provavel dessa tela, entao a explicacao fica na propria
   tela, sem recolher - e um <code> monoespacado pra "Nome | link | de | por"
   nao ser lido como texto corrido. */
.bulk-modes {
    margin: 0 0 4px;
    padding-left: 18px;
}

.bulk-modes li + li {
    margin-top: 6px;
}

.bulk-modes code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--surface-2, rgba(127, 127, 127, 0.14));
}

.form {
    display: grid;
    gap: 16px;
}

.form label {
    display: grid;
    gap: 9px;
}

.form span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}

.field-block {
    display: grid;
    gap: 10px;
}

/* display:block (nao grid) de proposito - esse bloco fica dentro de um
   grid (.form) que por sua vez fica dentro de um flex item com overflow:auto
   (.modal-card > .form) - um grid aninhado nesse contexto calcula a altura
   das linhas implicitas contra min-content em vez do conteudo de verdade,
   colapsando pra quase 0px (achado ao vivo: campos sumiam, so a label de
   1 linha aparecia). Bloco normal nao tem esse problema. */
.promotion-auto-fill {
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    border: 1px solid var(--line);
}

.promotion-auto-fill > * + * {
    margin-top: 10px;
}

/* Alternador entre "a partir de um link" e "clonar promo" - os dois escrevem
   no mesmo formulario, entao precisam parecer dois modos da mesma coisa, nao
   duas acoes independentes. */
.promotion-fill-modes {
    display: flex;
    gap: 8px;
}

.promotion-fill-modes .button {
    flex: 1;
}

.promotion-fill-modes .button.is-active {
    border-color: var(--accent);
    color: var(--accent);
}

.integration-intro {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    background-clip: padding-box;
    overflow: hidden;
}

.integration-intro strong {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
}

.integration-checklist {
    display: grid;
    gap: 12px;
}

.integration-step {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    background-clip: padding-box;
    overflow: hidden;
}

.integration-step strong {
    font-size: 0.84rem;
    letter-spacing: 0.06em;
}

.integration-status-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    background-clip: padding-box;
    overflow: hidden;
}

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

.integration-grid label {
    min-width: 0;
}

.integration-grid .field-span-2 {
    grid-column: span 2;
}

.field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.toggle-line {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* .toggle-line's !important sempre ganhava de ".hidden" nos elementos que
   sao os dois ao mesmo tempo (ordem de declaracao no arquivo, nao
   especificidade) - esconder um toggle-line via JS (classList.add('hidden'))
   nunca funcionava de verdade, ficava sempre visivel (achado ao vivo). Regra
   com as duas classes juntas tem especificidade maior, ganha de qualquer jeito. */
.toggle-line.hidden {
    display: none !important;
}

.manual-intervention-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--error);
    color: #fff;
    font-weight: 600;
}

.manual-intervention-banner.hidden {
    display: none;
}

.manual-intervention-banner .button {
    flex: 0 0 auto;
}

.toggle-line input {
    width: 18px;
    height: 18px;
}

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

.time-grid label {
    min-width: 0;
}

.rotation-current {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface-strong);
}

.rotation-current-label {
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.rotation-current-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.rotation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 12px;
    align-items: end;
    min-width: 0;
}

.image-upload-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.image-upload-row input[type="url"] {
    flex: 1 1 auto;
    min-width: 0;
}

.image-upload-row .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.image-preview-wrap {
    margin-top: 10px;
}

.image-preview-wrap.hidden {
    display: none;
}

.image-preview {
    display: block;
    max-width: 180px;
    max-height: 180px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    object-fit: cover;
}

/* Miniatura inline (do lado da URL, nao embaixo) no envio manual - aqui a
   imagem so serve pra conferir se anexou o arquivo certo, o espaco importa
   mais pra lista de grupos logo abaixo (achado ao vivo: preview embaixo do
   campo deixava a lista de grupos praticamente escondida sem rolar). */
.image-preview-wrap-inline {
    margin-top: 0;
    flex: 0 0 auto;
}

#broadcastImagePreview {
    max-width: 40px;
    max-height: 40px;
}

#broadcastGroupsList {
    min-height: 220px;
}

.rotation-action {
    display: grid;
    gap: 10px;
    align-self: stretch;
    align-content: end;
}

.rotation-action .button {
    justify-self: flex-start;
}

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

.list-filter {
    display: block;
    margin: 0 0 12px;
}

.list-filter input[type="search"] {
    min-height: 42px;
    padding: 10px 13px;
    border-radius: var(--radius-md);
}

.programmed-messages-panel {
    max-height: 560px;
    padding-right: 6px;
}

.stack-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    padding: 14px;
    border-radius: 8px;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    min-width: 0;
}

#couponCalcResultsList {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
}

.group-options-panel .stack-item {
    background: linear-gradient(180deg, rgba(232, 241, 255, 0.94), rgba(225, 236, 252, 0.9));
}

.monitored-product-suggestions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 8px;
}

.suggestion-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}

.suggestion-thumb {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.number-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.number-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.stack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.remove-chip {
    min-width: 40px;
    padding: 8px 10px;
    font-size: 1rem;
    line-height: 1;
}

.number-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-small {
    padding: 8px 12px;
    font-size: 0.8rem;
}

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

.chip-row.hidden {
    display: none;
}

.chip-button {
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chip-button:hover {
    background: var(--surface-strong);
    border-color: var(--accent, var(--line));
}

.chip-item {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    overflow: hidden;
}

.chip-item .chip-button {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 6px 4px 6px 14px;
}

.chip-item .chip-button:hover {
    background: var(--surface-strong);
}

.chip-item .chip-remove-btn {
    margin-right: 6px;
}

.chip-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.chip-remove-btn:hover {
    background: rgba(204, 66, 94, 0.13);
    color: var(--error);
}

.stack-item.group-item {
    grid-template-columns: 1fr;
    align-items: center;
    padding: 16px 18px;
}

.stack-item.group-item.monitor {
    background: rgba(255, 242, 201, 0.92);
    border-color: rgba(197, 155, 39, 0.18);
}

.stack-item.group-item.destination {
    background: rgba(225, 248, 229, 0.96);
    border-color: rgba(52, 156, 86, 0.18);
}

.monitor-failover-summary {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: rgba(255, 248, 224, 0.9);
    border: 1px solid rgba(197, 155, 39, 0.18);
}

.monitor-failover-summary strong {
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.failover-slot {
    gap: 12px;
    user-select: none;
}

.failover-slot.is-filled {
    cursor: grab;
}

.failover-slot.dragging {
    opacity: 0.82;
    transform: none;
    box-shadow: 0 0 0 2px hsl(var(--brand-hue) 100% 54.3% / 0.18);
}

.failover-slot.drag-over {
    border-color: hsl(var(--brand-hue) 100% 54.3% / 0.4);
    box-shadow: 0 0 0 4px hsl(var(--brand-hue) 100% 54.3% / 0.12);
}

.failover-slot.is-active {
    border-color: rgba(17, 137, 90, 0.42);
    background:
        linear-gradient(180deg, rgba(238, 252, 245, 0.96), rgba(226, 247, 236, 0.92)),
        var(--surface-strong);
    box-shadow:
        0 16px 30px rgba(17, 137, 90, 0.12),
        inset 0 0 0 1px rgba(17, 137, 90, 0.08);
}

.failover-slot.is-active .group-name {
    color: #0f5f40;
}

.failover-slot-header,
.failover-slot-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.failover-slot-body {
    align-items: flex-start;
}

.failover-slot-badges,
.failover-slot-actions-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.failover-slot-actions {
    display: flex;
    justify-content: flex-start;
}

.slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.slot-badge.primary {
    background: rgba(17, 137, 90, 0.14);
    color: var(--ok);
}

.slot-badge.backup {
    background: hsl(var(--brand-hue) 100% 54.3% / 0.12);
    color: var(--accent-deep);
}

.slot-badge.success {
    background: rgba(17, 137, 90, 0.14);
    color: var(--ok);
}

.failover-slot.is-empty {
    background: rgba(255, 248, 224, 0.58);
    border-style: dashed;
}

body[data-theme="dark"] .stack-item.group-item.monitor {
    background: rgba(107, 84, 28, 0.38);
    border-color: rgba(255, 208, 84, 0.18);
}

body[data-theme="dark"] .stack-item.group-item.destination {
    background: rgba(23, 87, 47, 0.4);
    border-color: rgba(93, 211, 158, 0.2);
}

body[data-theme="dark"] .monitor-failover-summary {
    background: rgba(107, 84, 28, 0.26);
    border-color: rgba(255, 208, 84, 0.16);
}

body[data-theme="dark"] .failover-slot.is-empty {
    background: rgba(107, 84, 28, 0.2);
}

body[data-theme="dark"] .failover-slot.is-active {
    border-color: rgba(93, 211, 158, 0.34);
    background: linear-gradient(180deg, rgba(22, 79, 51, 0.55), rgba(17, 62, 41, 0.5));
    box-shadow:
        0 18px 32px rgba(8, 22, 16, 0.32),
        inset 0 0 0 1px rgba(93, 211, 158, 0.12);
}

body[data-theme="dark"] .failover-slot.is-active .group-name {
    color: #c8f1dc;
}

body[data-theme="dark"] .group-options-panel .stack-item {
    background: linear-gradient(180deg, rgba(25, 44, 69, 0.96), rgba(19, 36, 56, 0.92));
}

.group-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}

.group-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.promotion-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-strong);
    border: 1px solid var(--line);
}

.promotion-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--muted);
}

.promotion-info {
    flex: 1 1 auto;
    min-width: 0;
}

.stack-item .button {
    padding: 10px 14px;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(8px);
}

.modal-card {
    position: relative;
    width: min(700px, calc(100vw - 120px));
    max-height: calc(100vh - 120px);
    background: var(--surface-strong);
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    min-width: 0;
}

.modal-card:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

.modal-card-groups {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: min(820px, calc(100vh - 64px));
}

.modal-card-prompt {
    width: min(900px, calc(100vw - 80px));
    max-height: min(860px, calc(100vh - 64px));
}

.modal-success {
    color: var(--ok);
    font-weight: 700;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.modal-header-groups {
    padding: 22px 24px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08));
}

body[data-theme="dark"] .modal-header-groups {
    background: linear-gradient(180deg, hsl(var(--brand-hue) 47% 14.1% / 0.76), hsl(var(--brand-hue) 52% 9.8% / 0.18));
}

.group-modal-body {
    flex: 1;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 18px;
    padding: 20px 24px 24px;
    min-height: 0;
    overflow: hidden;
}

.group-modal-text {
    margin: 0;
}

.group-source-card,
.group-list-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-clip: padding-box;
    overflow: hidden;
    padding: 16px;
}

body[data-theme="dark"] .group-source-card,
body[data-theme="dark"] .group-list-card {
    background: rgba(17, 30, 48, 0.76);
}

.group-list-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px;
}

.group-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: end;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.group-list-header strong {
    font-family: 'Archivo Expanded', sans-serif;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
}

.group-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.group-search-field span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.group-search-field input {
    width: 100%;
}

.group-options-panel {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding-right: 8px;
}

.qr-box {
    min-height: 280px;
    border-radius: var(--radius-lg);
    border: 1px dashed hsl(var(--brand-hue) 100% 54.3% / 0.28);
    background: linear-gradient(180deg, #f8fbff, #edf5ff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background-clip: padding-box;
    overflow: hidden;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
    padding: 4px 2px 2px;
    flex-wrap: wrap;
}

.qr-box canvas,
.qr-box img {
    display: block;
    max-width: 100%;
}

input,
textarea,
select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid rgba(20, 32, 51, 0.12);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    font: inherit;
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--field-text);
    background: var(--field-bg);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input[type="time"] {
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: hsl(var(--brand-hue) 100% 54.3% / 0.45);
    box-shadow: 0 0 0 4px hsl(var(--brand-hue) 100% 54.3% / 0.1);
    background: var(--field-bg-focus);
}

textarea {
    resize: vertical;
    min-height: 128px;
}

.prompt-editor-textarea {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    min-height: 420px;
    flex: 1 1 auto;
}

.promotions-footer-link {
    margin-top: 12px;
    align-self: flex-start;
}

input::placeholder,
textarea::placeholder {
    color: var(--field-placeholder);
}

select option {
    color: #142033;
    background: #f5f9ff;
}

body[data-theme="dark"] select option {
    color: #eef5ff;
    background: #13263d;
}

.inline-message {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.94rem;
}

/* #saveMessage especificamente flutua por cima de tudo (inclusive modais,
   z-index:20) - antes ficava parado no fim da pagina, coberto pelo overlay
   do modal sempre que uma janela (Nova Promocao, etc.) estava aberta. Erro
   de verdade acontecia mas ficava invisivel, parecia que "nao tinha
   feito nada" ao clicar num botao dentro de um modal (achado ao vivo). */
#saveMessage {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    max-width: min(600px, calc(100vw - 40px));
    margin-top: 0;
    padding: 12px 44px 12px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-message-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
}

.inline-message-close:hover {
    opacity: 1;
}

.inline-message.success {
    color: var(--ok);
}

.inline-message.error {
    color: var(--error);
}

.inline-message.warning {
    color: var(--warn);
}

.terminal {
    margin: 0;
    background: linear-gradient(180deg, var(--terminal-bg-top), var(--terminal-bg-bottom));
    color: var(--terminal-text);
    padding: 18px;
    border-radius: var(--radius-lg);
    overflow-y: auto;
    overflow-x: hidden;
    overflow: auto;
    height: 520px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
    font-size: 0.84rem;
    border: 1px solid rgba(121, 163, 227, 0.16);
    background-clip: padding-box;
    clip-path: inset(0 round var(--radius-lg));
}

.promotion-preview {
    height: auto;
    max-height: 220px;
    margin-top: 8px;
}

.terminal.small {
    height: auto;
}

.cache-summary {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.modal-option {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.modal-option:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.scroll-panel::-webkit-scrollbar,
.terminal::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scroll-panel::-webkit-scrollbar-thumb,
.terminal::-webkit-scrollbar-thumb {
    background: hsl(var(--brand-hue) 100% 54.3% / 0.24);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.scroll-panel::-webkit-scrollbar-track,
.terminal::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.app-footer {
    margin-top: 26px;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

@media (max-width: 1180px) {
    .hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

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

    .hero-title-row {
        align-items: flex-start;
    }

    .platform-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    .app-shell {
        padding: 18px 14px 34px;
    }

    h1 {
        font-size: 2rem;
        max-width: 12ch;
    }

    .status-summary {
        grid-template-columns: 1fr;
    }

    .strategy-grid {
        grid-template-columns: 1fr;
    }

    .strategy-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .strategy-pills {
        justify-content: flex-start;
    }

    .card {
        padding: 18px;
    }

    .hero {
        gap: 14px;
        margin-bottom: 16px;
        padding: 12px;
    }

    .hero-title-row {
        gap: 10px;
        align-items: center;
    }

    .eyebrow {
        font-size: 1.06rem;
        letter-spacing: 0.05em;
        margin: 0;
    }

    .operation-strip {
        width: 100%;
        gap: 6px;
    }

    .operation-chip {
        font-size: 0.66rem;
        min-height: 24px;
        padding: 5px 7px;
    }

    .hero-actions {
        width: 100%;
        gap: 10px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .button {
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        font-size: 0.88rem;
    }

    .hero-actions .hero-action-primary {
        min-height: 46px;
    }

    .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 16px;
        padding-right: 44px;
    }

    .header-inline {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        gap: 8px;
        padding-right: 0;
    }

    .header-inline h2 {
        font-size: 1rem;
        line-height: 1.15;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .header-actions {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding-right: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .header-actions .button,
    .card-header > .button,
    .save-config-button {
        width: auto;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 10px 14px;
        font-size: 0.78rem;
        flex: 0 0 auto;
    }

    .header-actions .header-primary-action {
        min-width: max-content;
    }

    .collapse-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        font-size: 0.82rem;
        top: 0;
        right: 0;
    }

    .status-summary,
    .platform-grid,
    .strategy-grid,
    .integration-grid,
    .rotation-grid,
    .time-grid {
        grid-template-columns: 1fr;
    }

    .integration-grid .field-span-2 {
        grid-column: span 1;
    }

    .metric .value.small-date {
        white-space: normal;
    }

    .platform-card {
        grid-template-columns: minmax(0, 1fr) auto auto;
        padding: 12px 14px;
    }

    .platform-name {
        font-size: 0.92rem;
    }

    .rotation-action .button {
        width: 100%;
        justify-self: stretch;
    }

    .platform-indicator {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .icon-button {
        min-width: 30px;
        min-height: 30px;
        padding: 4px 6px;
        font-size: 0.88rem;
    }

    .stack-header,
    .group-row,
    .number-card-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .group-row {
        gap: 10px;
    }

    .group-row .button,
    .stack-item.group-item .button {
        width: 100%;
    }

    .failover-slot-header,
    .failover-slot-body {
        flex-direction: column;
        align-items: stretch;
    }

    .slot-badge {
        width: fit-content;
    }

    .number-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0;
    }

    .number-actions .button,
    .stack-item .button {
        width: auto;
    }

    .remove-chip {
        align-self: flex-start;
    }

    .modal-card {
        width: min(100%, calc(100vw - 28px));
        max-height: calc(100vh - 28px);
        padding: 18px;
        max-width: calc(100vw - 28px);
    }

    .modal-card-groups {
        max-height: calc(100vh - 28px);
        padding: 0;
    }

    .modal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .modal-header .button {
        width: auto;
    }

    .modal-header-groups {
        padding: 18px 18px 14px;
    }

    .group-modal-body {
        padding: 16px 18px 18px;
        gap: 14px;
    }

    .group-source-card,
    .group-list-card {
        padding: 14px;
    }

    .group-list-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .group-options-panel {
        max-height: 42vh;
    }

    .terminal {
        height: min(300px, 45vh);
        font-size: 0.78rem;
    }

    .qr-box {
        min-height: 220px;
        padding: 14px;
    }

    .modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .modal-actions .button {
        width: 100%;
    }

    .app-shell,
    .board,
    .board-column,
    .card,
    .form,
    .rotation-grid,
    .time-grid,
    .stack-list,
    .stack-item,
    .group-row,
    .number-actions {
        min-width: 0;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Campos de preco da promocao (Preco Normal/Promocional/Cupom/Site proprio)
   - remove a setinha de aumentar/diminuir centavos, que o operador nunca usa
   e so atrapalha ao digitar. Campo continua type="number" (teclado numerico
   no celular, validacao), so a setinha visual some. */
#promotionOriginalPriceInput,
#promotionSalePriceInput,
#promotionCouponPriceInput,
#promotionSecondaryPriceInput {
    -moz-appearance: textfield;
}

#promotionOriginalPriceInput::-webkit-outer-spin-button,
#promotionOriginalPriceInput::-webkit-inner-spin-button,
#promotionSalePriceInput::-webkit-outer-spin-button,
#promotionSalePriceInput::-webkit-inner-spin-button,
#promotionCouponPriceInput::-webkit-outer-spin-button,
#promotionCouponPriceInput::-webkit-inner-spin-button,
#promotionSecondaryPriceInput::-webkit-outer-spin-button,
#promotionSecondaryPriceInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}