:root {
    --team-primary: #252b30;
    --team-secondary: #707a80;
    --team-accent: #2c786f;
    --team-on-primary: #ffffff;
    --team-deep: #1b1f23;
    --theme-soft: #eef0f1;
    --theme-line: #c7cbce;
    --paper: #f4f5f6;
    --panel: #ffffff;
    --panel-subtle: #f8f9fa;
    --ink: #1d2328;
    --muted: #66717a;
    --line: #dde2e5;
    --line-strong: #c8d0d4;
    --focus: #2c786f;
    --book: var(--team-primary);
    --book-deep: var(--team-deep);
    --real: #b33648;
    --real-deep: #7f2331;
    --gold: #b47a20;
    --sky: #39749a;
    --success: #247252;
    --manual-blue: #2f6f9f;
    --manual-blue-deep: #204f73;
    --manual-blue-soft: #edf6fd;
    --manual-blue-line: #b9d6ea;
    --shadow: 0 1px 2px rgba(19, 28, 33, 0.05), 0 8px 24px rgba(19, 28, 33, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

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

.topbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(19, 28, 33, 0.03);
    min-height: 68px;
    gap: 18px;
    padding: 3px 28px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar::before {
    background: linear-gradient(
        90deg,
        var(--team-primary) 0 70%,
        var(--team-secondary) 70% 88%,
        var(--team-accent) 88% 100%
    );
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

body[data-team-theme="neutral"] .topbar::before {
    background: linear-gradient(90deg, var(--team-accent) 0 72px, var(--team-primary) 72px 100%);
}

body[data-team-theme="cin"] .topbar::before {
    background: repeating-linear-gradient(
        112deg,
        var(--team-primary) 0 28px,
        var(--team-secondary) 29px 39px,
        var(--team-primary) 40px 62px
    );
}

.brand,
.nav-links {
    align-items: center;
    display: flex;
    gap: 12px;
}

.nav-links {
    margin-left: auto;
}

.brand {
    font-weight: 800;
}

.brand-copy {
    display: grid;
    line-height: 1.05;
}

.brand-copy small {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 750;
    margin-top: 3px;
}

.brand-mark {
    align-items: center;
    background: var(--team-primary);
    border-radius: 8px;
    color: var(--team-on-primary);
    display: inline-flex;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.14);
    height: 38px;
    justify-content: center;
    width: 38px;
}

body[data-team-theme="neutral"] .brand-mark {
    box-shadow: inset 0 -3px 0 var(--team-accent);
}

.nav-links a {
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 9px 11px;
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.nav-links a:hover {
    border-color: var(--line);
    color: var(--ink);
}

.nav-links a.active {
    background: var(--theme-soft);
    border-color: var(--theme-line);
    box-shadow: inset 0 -2px 0 var(--team-primary);
    color: var(--team-deep);
}

.logout-form {
    margin: 0;
}

.logout-form button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    padding: 9px 10px;
}

.logout-form button:hover {
    border-color: var(--line);
    color: var(--ink);
}

.page {
    padding: 30px 28px 44px;
}

.workspace,
.result-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: 360px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1420px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(19, 28, 33, 0.04);
}

.input-panel,
.screenshot-panel {
    align-self: start;
    padding: 18px;
    position: sticky;
    top: 88px;
}

.board-panel {
    min-width: 0;
    padding: 18px;
}

.panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-heading h1,
.panel-heading h2,
.card-top h2 {
    letter-spacing: 0;
    margin: 0;
}

.panel-heading h1 {
    font-size: 1.75rem;
    line-height: 1.05;
}

.eyebrow,
.card-kicker {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.status-chip {
    background: #eef5fb;
    border: 1px solid #c9dff1;
    border-radius: 999px;
    color: #235d93;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 7px 10px;
}

.status-chip.accent {
    background: #fff7e1;
    border-color: #ead38e;
    color: #7b5b12;
}

.view-switch {
    align-items: center;
    background: #eef1f2;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
}

.view-switch a {
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 850;
    min-width: 70px;
    padding: 8px 10px;
    text-align: center;
}

.view-switch a.active {
    background: white;
    box-shadow: 0 4px 10px rgba(20, 36, 30, 0.08);
    color: var(--ink);
}

.analysis-form {
    display: grid;
    gap: 12px;
}

.field-audience_mode > div {
    background: #eef1f2;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
}

.field-audience_mode label {
    margin: 0;
}

.field-audience_mode > div > div {
    min-width: 0;
}

.field-audience_mode input {
    inline-size: 1px;
    opacity: 0;
    position: absolute;
}

.field-audience_mode input + label,
.field-audience_mode label:has(input) {
    align-items: center;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-size: 0.86rem;
    font-weight: 850;
    justify-content: center;
    min-height: 38px;
    padding: 8px;
    text-align: center;
}

.field-audience_mode label:has(input:checked) {
    background: white;
    box-shadow: 0 4px 10px rgba(20, 36, 30, 0.08);
    color: var(--ink);
}

.field-row {
    display: grid;
    gap: 6px;
}

.field-row label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.control {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    min-height: 42px;
    padding: 10px 11px;
    width: 100%;
}

.control:hover {
    border-color: var(--line-strong);
}

.control:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(44, 120, 111, 0.14);
    outline: 0;
}

textarea.control {
    min-height: 96px;
    resize: vertical;
}

.field-error {
    color: var(--real);
    font-size: 0.82rem;
    font-weight: 700;
}

.screenshot-preview,
.screenshot-frame {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(44, 120, 111, 0.08), rgba(57, 116, 154, 0.07)),
        var(--panel-subtle);
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 180px;
    overflow: hidden;
}

.screenshot-preview img,
.screenshot-frame img {
    display: block;
    height: 100%;
    max-height: 360px;
    object-fit: contain;
    width: 100%;
}

#screenshot-preview-empty,
.screenshot-empty {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 800;
}

.primary-button,
.secondary-button {
    align-items: center;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 850;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    text-align: center;
    transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.primary-button {
    background: var(--team-primary);
    box-shadow: 0 1px 2px rgba(19, 28, 33, 0.16);
    color: var(--team-on-primary);
}

.primary-button:hover {
    background: var(--team-deep);
    color: white;
    transform: translateY(-1px);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.nav-links a:focus-visible,
.profile-select > summary:focus-visible,
.icon-link:focus-visible,
.text-link:focus-visible,
.book-shortcuts a:focus-visible {
    outline: 3px solid var(--theme-line);
    outline-offset: 2px;
}

.analysis-form > .primary-button,
.stacked-form > .primary-button,
.popover-form > .primary-button {
    width: 100%;
}

.secondary-button {
    background: #eef5fb;
    border: 1px solid #c9dff1;
    color: #235d93;
}

.mode-panel {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(230px, 0.75fr) minmax(360px, 1.25fr);
    margin-bottom: 14px;
    padding: 14px;
}

.mode-book {
    border-color: var(--theme-line);
}

.mode-player {
    border-color: rgba(46, 117, 184, 0.26);
}

.mode-copy {
    align-self: center;
}

.mode-title-row {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.mode-title-row h2 {
    font-size: 1.28rem;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0;
}

.mode-copy p:last-child {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.42;
    margin: 8px 0 0;
}

.action-chip {
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 7px 9px;
}

.action-good {
    background: #e7f5ec;
    border: 1px solid #b9dfc6;
    color: #13613b;
}

.action-warning {
    background: #fff7e1;
    border: 1px solid #ead38e;
    color: #7b5b12;
}

.action-danger {
    background: #fdebed;
    border: 1px solid #efb9c0;
    color: #8e1c2b;
}

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

.metric-tile {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-height: 78px;
    padding: 10px;
}

.metric-tile span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 820;
    line-height: 1.15;
}

.metric-tile strong {
    align-self: end;
    font-size: 1.1rem;
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.latest-list {
    border-top: 1px solid var(--line);
    margin-top: 18px;
    padding-top: 16px;
}

.latest-list h2,
.pipeline-card h2 {
    font-size: 1rem;
    margin: 0 0 10px;
}

.latest-list a {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    min-height: 42px;
    padding: 9px 10px;
}

.lineup-shell {
    overflow-x: auto;
    padding-bottom: 4px;
}

.card-lineup {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(250px, 1fr) 118px minmax(250px, 1fr);
    min-width: 740px;
}

.player-card {
    border-radius: 8px;
    color: white;
    overflow: hidden;
    padding: 14px;
}

.book-card {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(145deg, var(--book), var(--book-deep));
    background-size: 100% 34px, auto;
}

.real-card {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.20), transparent 22%),
        linear-gradient(145deg, var(--real), var(--real-deep));
}

.card-top {
    display: flex;
    justify-content: space-between;
    min-height: 130px;
}

.card-top h2 {
    font-size: 1.65rem;
    line-height: 1.02;
    max-width: 170px;
}

.card-top p {
    margin-bottom: 0;
}

.card-kicker,
.card-source {
    color: rgba(255, 255, 255, 0.78);
}

.score-lockup {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.score-lockup span {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 850;
    padding: 6px 8px;
}

.score-lockup strong {
    align-items: center;
    background: white;
    border-radius: 8px;
    color: var(--ink);
    display: inline-flex;
    font-size: 2rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.card-source {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.82rem;
    font-weight: 800;
    margin: 0 0 10px;
    padding-top: 10px;
}

.stat-list,
.delta-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 54px;
    padding: 8px 10px;
}

.stat-row span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.15;
}

.stat-row strong {
    flex: 0 0 auto;
    font-size: 1rem;
}

.delta-lane {
    background: #fbfcfa;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 10px;
}

.delta-top {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 170px;
    text-align: center;
}

.delta-top span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.delta-top strong {
    font-size: 0.95rem;
    line-height: 1.15;
}

.delta-row {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    gap: 2px;
    grid-template-rows: 1fr auto auto;
    justify-items: center;
    min-height: 54px;
    padding: 5px;
    text-align: center;
}

.delta-left {
    background: rgba(20, 122, 76, 0.08);
    border-color: rgba(20, 122, 76, 0.25);
}

.delta-right {
    background: rgba(179, 38, 58, 0.08);
    border-color: rgba(179, 38, 58, 0.25);
}

.delta-even {
    background: rgba(215, 168, 63, 0.11);
}

.delta-value {
    font-size: 0.74rem;
    font-weight: 850;
}

.delta-arrow {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
}

.delta-owner {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.05;
}

.pipeline-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 16px;
    padding: 14px;
}

.pipeline-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.pipeline-card dl div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.pipeline-card dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.pipeline-card dd {
    font-weight: 850;
    margin: 0;
}

.pipeline-card p {
    background: #f8faf6;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 12px 0 0;
    padding: 10px;
}

/* Book operations workspace */
.page-shell {
    margin: 0 auto;
    max-width: 1440px;
}

.login-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 112px);
}

.login-panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(19, 28, 33, 0.05), 0 18px 42px rgba(19, 28, 33, 0.07);
    padding: 22px;
    width: min(410px, 100%);
}

.login-heading {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 13px;
    margin-bottom: 18px;
    padding-bottom: 17px;
}

.login-heading h1 {
    font-size: 1.45rem;
    letter-spacing: 0;
    margin: 0;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-error {
    background: #fdebed;
    border: 1px solid #efb9c0;
    border-radius: 8px;
    color: #8e1c2b;
    font-size: 0.82rem;
    font-weight: 750;
    margin-bottom: 14px;
    padding: 10px;
}

.page-heading,
.section-heading,
.book-heading,
.queue-summary,
.book-card-head,
.list-heading {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.page-heading {
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.page-heading h1,
.section-heading h2,
.book-heading h1,
.form-heading h2 {
    letter-spacing: 0;
    margin: 0;
}

.page-heading h1 {
    font-size: 2rem;
    line-height: 1.08;
}

.page-heading > div > p:last-child,
.book-identity > div > p:last-child,
.form-heading p,
.section-heading p {
    color: var(--muted);
    line-height: 1.4;
    margin: 5px 0 0;
}

.section-heading {
    align-items: flex-end;
    margin-bottom: 14px;
}

.section-heading h2,
.form-heading h2 {
    font-size: 1.08rem;
}

.text-link,
.table-link,
.icon-link {
    color: var(--team-deep);
    font-weight: 800;
}

.text-link:hover,
.table-link:hover,
.icon-link:hover {
    color: var(--book-deep);
    text-decoration: underline;
}

.icon-link {
    align-items: center;
    display: inline-flex;
    font-size: 1.2rem;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    width: 34px;
}

.message-stack {
    display: grid;
    gap: 8px;
    margin: 0 auto 16px;
    max-width: 1440px;
}

.message {
    background: #eef5fb;
    border: 1px solid #c9dff1;
    border-radius: 8px;
    color: #235d93;
    font-size: 0.9rem;
    font-weight: 750;
    padding: 11px 14px;
}

.message-success {
    background: #e9f5ed;
    border-color: #b9ddc5;
    color: #17613e;
}

.message-error {
    background: #fdebed;
    border-color: #efb9c0;
    color: #8e1c2b;
}

.create-popover {
    position: relative;
}

.create-popover > summary {
    list-style: none;
}

.create-popover > summary::-webkit-details-marker {
    display: none;
}

.create-popover[open] > summary {
    background: var(--team-deep);
}

.popover-form {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 11px;
    padding: 16px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(360px, calc(100vw - 28px));
    z-index: 8;
}

.form-heading {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 3px;
    padding-bottom: 11px;
}

.form-heading strong {
    font-size: 1rem;
}

.form-heading span {
    color: var(--muted);
    font-size: 0.78rem;
}

.exec-band,
.queue-section,
.portfolio-table-section,
.connections-list,
.connection-form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.exec-band {
    margin-bottom: 26px;
    padding: 20px;
}

.metric-strip {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 -18px 18px;
    padding: 0 18px 18px;
}

.metric-strip > div {
    border-right: 1px solid var(--line);
    min-width: 0;
    padding: 0 18px;
}

.metric-strip > div:first-child {
    padding-left: 0;
}

.metric-strip > div:last-child {
    border-right: 0;
    padding-right: 0;
}

.metric-strip span,
.book-metrics span,
.queue-summary span {
    color: var(--muted);
    display: block;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.2;
}

.metric-strip strong {
    display: block;
    font-size: 1.4rem;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.metric-positive,
.positive {
    color: #14613d;
}

.metric-negative,
.negative {
    color: var(--real);
}

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

.action-list {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden;
}

.list-heading {
    background: var(--panel-subtle);
    border-bottom: 1px solid var(--line);
    min-height: 43px;
    padding: 9px 12px;
}

.list-heading h3 {
    font-size: 0.88rem;
    margin: 0;
}

.count-badge {
    align-items: center;
    background: #e9edef;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    min-width: 24px;
    padding: 0 7px;
}

.action-row {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px;
    grid-template-columns: 9px minmax(0, 1fr) minmax(82px, auto) minmax(84px, auto);
    min-height: 58px;
    padding: 9px 12px;
    transition: background-color 120ms ease;
}

.action-row:hover {
    background: var(--panel-subtle);
}

.action-row:last-child {
    border-bottom: 0;
}

.source-dot {
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.source-manual {
    background: var(--sky);
}

.source-screenshot {
    background: var(--gold);
}

.source-whatsapp {
    background: #25a463;
}

.source-placed {
    background: var(--real);
}

.action-main,
.action-money {
    min-width: 0;
}

.action-main strong,
.action-main span,
.action-money strong,
.action-money span {
    display: block;
}

.action-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-main span,
.action-main small,
.action-money span,
.action-book {
    color: var(--muted);
    font-size: 0.73rem;
    margin-top: 3px;
}

.action-book {
    margin-top: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-money {
    font-size: 0.82rem;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.action-money strong {
    font-size: 0.9rem;
}

.empty-row,
.empty-state {
    color: var(--muted);
    line-height: 1.5;
    padding: 28px 18px;
    text-align: center;
}

.books-section {
    margin-top: 4px;
}

.book-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.book-card-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 15px;
    min-width: 0;
    padding: 16px;
    box-shadow: 0 1px 1px rgba(19, 28, 33, 0.02);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.book-card-item:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.book-card-head {
    align-items: flex-start;
}

.book-card-head > div {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.book-card-head > div > div {
    min-width: 0;
}

.book-card-head h3 {
    font-size: 1.05rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card-head p {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 4px 0 0;
}

.status-dot {
    background: #a5ada9;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 9px;
    margin-top: 5px;
    width: 9px;
}

.status-dot.online {
    background: var(--success);
    box-shadow: 0 0 0 3px #e4f1eb;
}

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

.book-metrics strong {
    display: block;
    font-size: 1rem;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.exposure-track,
.mini-exposure {
    background: #e6eaec;
    border-radius: 999px;
    height: 5px;
    overflow: hidden;
}

.exposure-track span,
.mini-exposure span {
    background: var(--book);
    display: block;
    height: 100%;
    max-width: 100%;
}

.book-shortcuts {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 -16px -16px;
}

.book-shortcuts a {
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 12px 5px;
    text-align: center;
}

.book-shortcuts a:last-child {
    border-right: 0;
}

.book-shortcuts a:hover {
    background: var(--panel-subtle);
    color: var(--ink);
}

body[data-team-theme="neutral"] .exposure-track span,
body[data-team-theme="neutral"] .mini-exposure span {
    background: var(--team-accent);
}

.portfolio-table-section,
.queue-section,
.connections-list {
    padding: 18px;
}

.portfolio-table-section {
    margin-top: 18px;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
}

.ops-table {
    border-collapse: collapse;
    font-size: 0.84rem;
    min-width: 920px;
    width: 100%;
}

.ops-table th,
.ops-table td {
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
}

.ops-table th {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ops-table tbody tr:last-child td {
    border-bottom: 0;
}

.ops-table tbody tr:hover {
    background: #fafcfb;
}

.ops-table td strong,
.ops-table td small {
    display: block;
}

.ops-table td small {
    color: var(--muted);
    margin-top: 3px;
}

.mini-exposure {
    margin-top: 6px;
    width: 88px;
}

.book-shell {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.book-shell > *,
.queue-section,
.connections-list {
    min-width: 0;
}

.book-heading {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 15px 18px;
}

.book-identity {
    align-items: center;
    display: flex;
    min-width: 0;
}

.book-monogram {
    align-items: center;
    background: var(--ink);
    border-radius: 8px;
    color: white;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    margin-right: 13px;
    width: 48px;
}

.book-heading h1 {
    font-size: 1.3rem;
}

.book-tabs {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.book-tabs a {
    border-bottom: 3px solid transparent;
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 820;
    padding: 11px 14px;
}

.book-tabs a.active {
    border-bottom-color: var(--book);
    color: var(--ink);
}

.queue-summary {
    align-items: flex-end;
}

.queue-summary > div:last-child {
    display: flex;
    gap: 22px;
    text-align: right;
}

.queue-summary strong {
    display: block;
    margin-top: 3px;
}

.bet-title {
    color: var(--ink);
    font-weight: 850;
}

.bet-table td:first-child {
    min-width: 350px;
}

.bet-taxonomy {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 9px 0;
    padding: 6px 0;
}

.bet-taxonomy > div {
    min-width: 0;
    padding: 5px 8px 6px 0;
}

.bet-taxonomy > div:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: 9px;
}

.bet-taxonomy > div:last-child {
    grid-column: 1 / -1;
}

.bet-taxonomy dt {
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bet-taxonomy dd {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.detail-taxonomy {
    background: #f7f9f8;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    margin: 0 -20px 18px;
    padding: 12px 20px;
}

.detail-taxonomy-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.detail-taxonomy-heading span {
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.detail-taxonomy-heading small {
    color: var(--muted);
    font-size: 0.7rem;
}

.detail-taxonomy .bet-taxonomy {
    border-bottom: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 7px 0 0;
    padding-bottom: 0;
}

.detail-taxonomy .bet-taxonomy > div:last-child {
    grid-column: auto;
}

.detail-taxonomy .bet-taxonomy > div {
    border-left: 1px solid var(--line);
    padding-left: 10px;
}

.detail-taxonomy .bet-taxonomy > div:first-child {
    border-left: 0;
    padding-left: 0;
}

.source-label,
.connection-status,
.result-badge {
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 850;
    padding: 5px 7px;
    text-transform: capitalize;
}

.source-label.source-whatsapp {
    background: #e8f7ef;
    border-color: #bfe4cf;
    color: #17613e;
}

.source-label.source-screenshot {
    background: #fff7e1;
    border-color: #ead38e;
    color: #7b5b12;
}

.source-label.source-manual {
    background: #eef5fb;
    border-color: #c9dff1;
    color: #235d93;
}

.source-label.source-placed {
    background: #fdebed;
    border-color: #efb9c0;
    color: #8e1c2b;
}

.row-action-form {
    align-items: end;
    display: grid;
    gap: 7px;
    grid-template-columns: 96px 102px auto;
}

.row-action-form label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.row-action-form label .control {
    display: block;
    margin-top: 4px;
}

.row-action-form .control {
    min-height: 36px;
    padding: 7px 8px;
}

.settle-form {
    grid-template-columns: 120px minmax(130px, 1fr) auto;
    min-width: 385px;
}

.note-field {
    min-width: 0;
}

.compact-button {
    font-size: 0.8rem;
    min-height: 36px;
    padding: 0 12px;
    width: auto;
}

.result-player_won {
    background: #fdebed;
    border-color: #efb9c0;
    color: #8e1c2b;
}

.result-book_won {
    background: #e8f7ef;
    border-color: #bfe4cf;
    color: #17613e;
}

.result-void {
    background: #f1f3f2;
    color: #58635e;
}

.connections-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.7fr);
}

.meta-connections-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 0.9fr);
}

.connection-form-panel {
    padding: 18px;
    position: sticky;
    top: 88px;
}

.meta-setup-panel {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
}

.selected-row {
    background: #f4f8f5;
}

.provider-label {
    background: #f0f3f1;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #55645d;
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 850;
    margin-top: 7px;
    padding: 4px 6px;
}

.provider-meta_cloud {
    background: #eaf2fb;
    border-color: #c6daed;
    color: #235d93;
}

.provider-whatsapp_webjs {
    background: #e7f6ed;
    border-color: #b8dfc7;
    color: #17613e;
}

.test-state {
    font-weight: 750;
}

.test-passed {
    color: #17613e !important;
}

.test-failed {
    color: var(--real) !important;
}

.setup-heading {
    align-items: center;
}

.connection-health {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
    margin: 0 -18px;
    padding: 13px 18px;
}

.health-line {
    align-items: center;
    display: flex;
    font-size: 0.79rem;
    justify-content: space-between;
}

.health-line span {
    color: var(--muted);
    font-weight: 750;
}

.health-line strong {
    font-size: 0.78rem;
}

.health-line .ready {
    color: #17613e;
}

.health-line .not-ready {
    color: #8a5d12;
}

.health-detail {
    background: #f7f9f8;
    border-left: 3px solid #b9c9bf;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 3px 0 0;
    padding: 7px 9px;
}

.webjs-state-ready,
.webjs-state-authenticated {
    color: #17613e;
}

.webjs-state-qr_ready,
.webjs-state-starting {
    color: #8a5d12;
}

.webjs-state-failed,
.webjs-state-disconnected,
.webjs-state-bridge_offline {
    color: #8e1c2b;
}

.webjs-qr-shell {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 12px;
}

.webjs-qr-shell[hidden] {
    display: none;
}

.webjs-qr-shell img {
    aspect-ratio: 1;
    display: block;
    height: auto;
    max-width: 280px;
    width: min(100%, 280px);
}

.webjs-qr-shell strong {
    font-size: 0.76rem;
}

.danger-button {
    background: #fff;
    border: 1px solid #d9a8ae;
    border-radius: 6px;
    color: #8e1c2b;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.danger-button:hover {
    background: #fdebed;
}

.callback-section {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    margin: 0 -18px;
    padding: 13px 18px;
}

.callback-heading {
    align-items: center;
    display: flex;
    font-size: 0.78rem;
    font-weight: 850;
    justify-content: space-between;
}

.callback-section code {
    background: #f4f6f5;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: block;
    font-size: 0.7rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: 8px;
}

.copy-button {
    justify-self: start;
}

.connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 13px;
}

.test-message-form {
    align-items: end;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 -18px;
    padding: 13px 18px 15px;
}

.test-message-form label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.test-message-form .control {
    display: block;
    margin-top: 5px;
    min-height: 36px;
    padding: 7px 8px;
}

.connection-config-form {
    gap: 0;
    margin-top: 0;
}

.config-section {
    display: grid;
    gap: 11px;
    padding: 15px 0;
}

.config-section + .config-section {
    border-top: 1px solid var(--line);
}

.config-section-heading {
    display: grid;
    gap: 3px;
}

.config-section-heading strong {
    font-size: 0.86rem;
}

.config-section-heading span {
    color: var(--muted);
    font-size: 0.72rem;
}

.config-two-up,
.config-three-up {
    display: grid;
    gap: 10px;
}

.config-two-up {
    align-items: end;
    grid-template-columns: 1fr 1.15fr;
}

.config-three-up {
    grid-template-columns: 0.7fr 1fr 1fr;
}

.field-review_enabled {
    padding-bottom: 11px;
}

.meta-config-fields[hidden] {
    display: none;
}

.webjs-config-fields[hidden] {
    display: none;
}

.captured-messages-section {
    border-top: 1px solid var(--line);
    margin-top: 26px;
    padding-top: 22px;
}

.captured-message-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.captured-message {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 14px;
}

.captured-message header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.captured-message header > div:first-child {
    display: grid;
    min-width: 0;
}

.captured-message header strong,
.captured-message header small {
    overflow-wrap: anywhere;
}

.captured-message header small,
.captured-message time {
    color: var(--muted);
    font-size: 0.7rem;
}

.captured-message-meta {
    align-items: end;
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
}

.captured-message-meta .provider-label {
    margin-top: 0;
}

.captured-message p {
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.captured-image-link {
    background: #f2f4f3;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: grid;
    overflow: hidden;
    place-items: center;
}

.captured-image-link img {
    aspect-ratio: 4 / 3;
    display: block;
    max-height: 280px;
    object-fit: contain;
    width: 100%;
}

.captured-file-link {
    justify-self: start;
}

.compact-empty-state {
    grid-column: 1 / -1;
    min-height: 130px;
}

.secret-field {
    position: relative;
}

.secret-field .control {
    padding-right: 66px;
}

.secret-state {
    background: #f4f6f5;
    border: 1px solid var(--line);
    border-radius: 999px;
    bottom: 9px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 850;
    padding: 3px 6px;
    position: absolute;
    right: 8px;
}

.secret-state.is-set {
    background: #e8f7ef;
    border-color: #bfe4cf;
    color: #17613e;
}

.stacked-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.field-help {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.checkbox-row label,
.field-review_enabled label {
    align-items: center;
    display: flex;
    gap: 8px;
}

.checkbox-row .control,
.field-review_enabled .control {
    min-height: auto;
    width: auto;
}

.connection-status.status-connected {
    background: #e8f7ef;
    border-color: #bfe4cf;
    color: #17613e;
}

.connection-status.status-paused {
    background: #fff7e1;
    border-color: #ead38e;
    color: #7b5b12;
}

.connection-status.status-disconnected {
    background: #f1f3f2;
    color: #58635e;
}

.inline-actions {
    align-items: center;
    display: flex;
    gap: 6px;
}

.icon-button {
    align-items: center;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 36px;
    justify-content: center;
    width: 36px;
}

button:disabled,
.primary-button:disabled,
.secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.book-context-bar,
.detail-workflow-bar {
    align-items: center;
    background: var(--theme-soft);
    border: 1px solid var(--theme-line);
    border-radius: 8px;
    color: var(--team-deep);
    display: flex;
    font-size: 0.83rem;
    font-weight: 750;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.book-context-bar a {
    font-weight: 900;
}

.detail-workflow-bar {
    align-items: flex-end;
    background: #f7f9f8;
    border-color: var(--line);
    color: var(--ink);
}

.detail-workflow-bar .row-action-form {
    margin-left: auto;
}

.settled-detail {
    align-items: center;
}

.source-note {
    background: #f7f9f8;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 12px 0 0;
    padding: 10px;
}

@media (max-width: 980px) {
    .workspace,
    .result-layout {
        grid-template-columns: 1fr;
    }

    .input-panel,
    .screenshot-panel {
        position: static;
    }

    .mode-panel {
        grid-template-columns: 1fr;
    }

    .metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 18px;
    }

    .metric-strip > div {
        border-right: 0;
        padding: 0 14px 0 0;
    }

    .connections-layout {
        grid-template-columns: 1fr;
    }

    .connection-form-panel {
        max-height: none;
        position: static;
    }

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

@media (max-width: 620px) {
    .page,
    .topbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .nav-links {
        gap: 4px;
    }

    .captured-message-grid {
        grid-template-columns: 1fr;
    }

    .brand span:last-child {
        display: none;
    }

    .brand-copy {
        display: none;
    }

    .topbar {
        gap: 8px;
        min-height: 58px;
        overflow-x: auto;
    }

    .nav-links {
        flex: 0 0 auto;
    }

    .nav-links a {
        font-size: 0.78rem;
        padding: 8px 7px;
    }

    .panel-heading,
    .mode-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .view-switch {
        width: 100%;
    }

    .view-switch a {
        flex: 1 1 0;
    }

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

    .page-heading,
    .book-heading,
    .queue-summary,
    .section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .section-heading > .status-chip {
        align-self: flex-start;
    }

    .page-heading > .primary-button,
    .page-heading > .secondary-button,
    .book-heading > .primary-button {
        width: 100%;
    }

    .create-popover,
    .create-popover > summary {
        width: 100%;
    }

    .popover-form {
        left: 0;
        right: auto;
    }

    .metric-strip {
        grid-template-columns: 1fr 1fr;
    }

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

    .action-row {
        grid-template-columns: 9px minmax(0, 1fr) auto;
    }

    .action-book {
        grid-column: 2;
        grid-row: 2;
        margin-top: -7px;
        text-align: left;
    }

    .action-money {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

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

    .book-heading {
        align-items: stretch;
    }

    .book-identity {
        align-items: flex-start;
    }

    .queue-summary > div:last-child {
        justify-content: flex-start;
        text-align: left;
    }

    .detail-workflow-bar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .detail-workflow-bar .row-action-form {
        margin-left: 0;
    }

    .detail-taxonomy .bet-taxonomy {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-taxonomy .bet-taxonomy > div:nth-child(3) {
        border-left: 0;
        padding-left: 0;
    }

    .detail-taxonomy .bet-taxonomy > div:last-child {
        border-left: 0;
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .config-two-up,
    .config-three-up,
    .test-message-form {
        grid-template-columns: 1fr;
    }

    .test-message-form .compact-button,
    .connection-actions form,
    .connection-actions .compact-button {
        width: 100%;
    }

    .connection-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 430px) {
    .metric-strip,
    .book-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .book-shortcuts {
        grid-template-columns: 1fr 1fr;
    }

    .book-shortcuts a:nth-child(2) {
        border-right: 0;
    }

    .book-shortcuts a:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}

/* Account themes and football data index */
.secondary-button {
    background: var(--theme-soft);
    border-color: var(--theme-line);
    color: var(--team-deep);
}

.text-link,
.table-link,
.icon-link {
    color: var(--team-deep);
}

.book-context-bar {
    background: var(--theme-soft);
    border-color: var(--theme-line);
    color: var(--team-deep);
}

.profile-select {
    flex: 0 0 auto;
    position: relative;
}

.profile-select > summary {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    list-style: none;
    min-height: 42px;
    padding: 4px 9px 4px 5px;
}

.profile-select > summary::-webkit-details-marker {
    display: none;
}

.profile-select > summary:hover,
.profile-select[open] > summary {
    background: var(--theme-soft);
    border-color: var(--theme-line);
}

.profile-avatar {
    align-items: center;
    background: var(--team-primary);
    border: 2px solid var(--team-secondary);
    border-radius: 50%;
    color: var(--team-on-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.profile-name {
    font-size: 0.82rem;
    font-weight: 850;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-chevron {
    border-bottom: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    height: 7px;
    margin: -3px 1px 0 2px;
    transform: rotate(45deg);
    width: 7px;
}

.profile-select[open] .profile-chevron {
    margin-top: 3px;
    transform: rotate(225deg);
}

.profile-menu {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    min-width: 224px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
}

.profile-menu-account {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 3px;
    padding: 13px 14px;
}

.profile-menu-account strong {
    font-size: 0.9rem;
}

.profile-menu-account span {
    color: var(--muted);
    font-size: 0.72rem;
}

.profile-menu > a,
.profile-menu .logout-form button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    display: block;
    font-size: 0.84rem;
    font-weight: 750;
    min-height: 42px;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}

.profile-menu > a:hover,
.profile-menu .logout-form button:hover {
    background: var(--theme-soft);
    color: var(--team-deep);
}

.profile-menu .logout-form button {
    border-bottom: 0;
    color: var(--real);
}

.profile-shell,
.football-shell {
    max-width: 1320px;
}

.profile-identity {
    align-items: center;
    display: flex;
    gap: 10px;
}

.profile-avatar-large {
    font-size: 1rem;
    height: 46px;
    width: 46px;
}

.profile-identity > span:last-child {
    display: grid;
    gap: 3px;
}

.profile-identity small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.theme-form {
    padding-bottom: 74px;
}

.theme-section-heading {
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.theme-current {
    display: grid;
    gap: 2px;
    text-align: right;
}

.theme-current span,
.theme-current strong {
    display: block;
}

.theme-current span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.theme-current strong {
    color: var(--team-deep);
    font-size: 0.9rem;
}

.theme-neutral-row {
    margin-bottom: 14px;
    max-width: 320px;
}

.conference-switch {
    align-items: center;
    background: var(--theme-soft);
    border: 1px solid var(--theme-line);
    border-radius: 8px;
    display: inline-flex;
    gap: 4px;
    margin: 4px 0 8px;
    padding: 4px;
}

.conference-switch a {
    border-radius: 6px;
    color: var(--team-deep);
    font-size: 0.8rem;
    font-weight: 900;
    min-width: 74px;
    padding: 8px 12px;
    text-align: center;
}

.conference-switch a:hover {
    background: var(--panel);
}

.theme-conference {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 20px;
    scroll-margin-top: 88px;
}

.conference-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.conference-heading h2 {
    font-size: 1.15rem;
    margin: 0;
}

.conference-badge {
    align-items: center;
    background: var(--team-primary);
    border-radius: 6px;
    color: var(--team-on-primary);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 950;
    height: 28px;
    justify-content: center;
    width: 42px;
}

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

.theme-division h3 {
    color: var(--muted);
    font-size: 0.72rem;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.theme-options {
    display: grid;
    gap: 8px;
}

.theme-option {
    cursor: pointer;
    display: block;
    min-width: 0;
}

.theme-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.theme-option-body {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    min-height: 62px;
    padding: 9px;
    transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.theme-option:hover .theme-option-body {
    border-color: var(--swatch-primary, var(--team-primary));
    transform: translateY(-1px);
}

.theme-option:has(input:checked) .theme-option-body {
    background: var(--theme-soft);
    border-color: var(--team-primary);
    box-shadow: inset 3px 0 0 var(--team-primary);
}

.theme-option:has(input:focus-visible) .theme-option-body {
    outline: 3px solid var(--theme-line);
    outline-offset: 2px;
}

.theme-swatch {
    background: linear-gradient(
        135deg,
        var(--swatch-primary) 0 54%,
        var(--swatch-secondary) 54% 82%,
        var(--swatch-accent) 82% 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 7px;
    display: block;
    height: 42px;
    width: 42px;
}

.theme-option:has(input[value="CIN"]) .theme-swatch {
    background: repeating-linear-gradient(
        112deg,
        var(--swatch-primary) 0 11px,
        var(--swatch-secondary) 12px 17px,
        var(--swatch-primary) 18px 28px
    );
}

.theme-option-body > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.theme-option-body strong {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-option-body small {
    color: var(--muted);
    font-size: 0.65rem;
    margin-top: 3px;
}

.theme-check {
    border: 2px solid var(--line);
    border-radius: 50%;
    height: 17px;
    position: relative;
    width: 17px;
}

.theme-option:has(input:checked) .theme-check {
    background: var(--team-primary);
    border-color: var(--team-primary);
}

.theme-option:has(input:checked) .theme-check::after {
    border-bottom: 2px solid var(--team-on-primary);
    border-right: 2px solid var(--team-on-primary);
    content: "";
    height: 7px;
    left: 5px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 3px;
}

.theme-save-bar {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--theme-line);
    border-radius: 8px;
    bottom: 14px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    margin: 24px auto 0;
    max-width: 520px;
    padding: 9px 10px 9px 14px;
    position: sticky;
    z-index: 8;
}

.theme-save-bar > span {
    display: grid;
    gap: 2px;
}

.theme-save-bar strong {
    font-size: 0.84rem;
}

.theme-save-bar small {
    color: var(--muted);
    font-size: 0.68rem;
}

.football-kpis {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.football-kpis > div {
    border-right: 1px solid var(--line);
    min-width: 0;
    padding: 16px 18px;
}

.football-kpis > div:first-child {
    padding-left: 0;
}

.football-kpis > div:last-child {
    border-right: 0;
}

.football-kpis span,
.football-kpis small,
.football-kpis strong {
    display: block;
}

.football-kpis span,
.football-kpis small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.football-kpis strong {
    font-size: 1.55rem;
    margin: 4px 0;
}

.provider-status {
    align-items: center;
    background: #f1f3f2;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 850;
    gap: 7px;
    padding: 8px 11px;
}

.provider-status .status-dot {
    margin-top: 0;
}

.provider-status.configured {
    background: var(--theme-soft);
    border-color: var(--theme-line);
    color: var(--team-deep);
}

.provider-band {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--team-primary);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 14px 16px;
}

.provider-copy,
.sync-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.provider-mark {
    align-items: center;
    background: #101820;
    border-radius: 7px;
    color: white;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 950;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.provider-copy h2 {
    font-size: 1rem;
    margin: 0;
}

.provider-copy p:last-child {
    color: var(--muted);
    font-size: 0.74rem;
    margin: 3px 0 0;
}

.sync-actions form {
    margin: 0;
}

.sync-actions .primary-button,
.sync-actions .secondary-button {
    min-height: 38px;
}

.football-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
}

.football-main,
.football-metrics,
.team-directory {
    min-width: 0;
}

.schedule-list,
.metric-key-list {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.schedule-row {
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 14px;
    grid-template-columns: 72px minmax(0, 1fr) 90px;
    min-height: 86px;
    padding: 11px 13px;
}

.schedule-row:last-child,
.metric-key-list > div:last-child {
    border-bottom: 0;
}

.game-time,
.game-state {
    display: grid;
    gap: 3px;
}

.game-time strong,
.game-state strong {
    font-size: 0.76rem;
}

.game-time span,
.game-state span {
    color: var(--muted);
    font-size: 0.66rem;
}

.game-state {
    justify-items: end;
    text-align: right;
}

.game-matchup {
    display: grid;
    gap: 7px;
}

.game-matchup > div {
    align-items: center;
    display: grid;
    gap: 9px;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
}

.game-matchup strong {
    font-size: 0.79rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-matchup b {
    font-size: 0.85rem;
    text-align: right;
}

.team-mini {
    align-items: center;
    background: var(--mini-color);
    border-radius: 5px;
    color: white;
    display: inline-flex;
    font-size: 0.58rem;
    font-weight: 950;
    height: 26px;
    justify-content: center;
    width: 34px;
}

.metric-key-list > div {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 3px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 11px;
}

.metric-key-list span {
    font-size: 0.76rem;
    font-weight: 800;
}

.metric-key-list code {
    color: var(--team-deep);
    font-size: 0.68rem;
}

.metric-key-list small {
    color: var(--muted);
    font-size: 0.62rem;
    grid-column: 1 / -1;
    text-transform: uppercase;
}

.team-directory {
    border-top: 1px solid var(--line);
    margin-top: 26px;
    padding-top: 20px;
}

.roster-sync-form {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-columns: auto minmax(180px, 260px) auto;
}

.roster-sync-form label {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.roster-sync-form .control,
.roster-sync-form .secondary-button {
    min-height: 38px;
}

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

.football-team-row {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--club-secondary);
    border-radius: 8px;
    display: grid;
    gap: 9px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 9px;
}

.club-code {
    align-items: center;
    background: var(--club-primary);
    border-radius: 6px;
    color: white;
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 950;
    height: 38px;
    justify-content: center;
    width: 42px;
}

.football-team-row > span:nth-child(2),
.roster-count {
    display: grid;
    min-width: 0;
}

.football-team-row > span:nth-child(2) strong {
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.football-team-row small,
.roster-count small {
    color: var(--muted);
    font-size: 0.62rem;
    margin-top: 3px;
}

.roster-count {
    justify-items: end;
}

.roster-count strong {
    font-size: 0.82rem;
}

.compact-empty {
    min-height: 150px;
}

@media (max-width: 1120px) {
    .theme-divisions,
    .football-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .football-layout {
        grid-template-columns: 1fr;
    }

    .metric-key-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-key-list > div:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
}

@media (max-width: 820px) {
    .topbar {
        gap: 8px;
    }

    .nav-links {
        gap: 3px;
    }

    .nav-links a {
        font-size: 0.8rem;
        padding-left: 7px;
        padding-right: 7px;
    }

    .profile-name {
        display: none;
    }

    .provider-band,
    .sync-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sync-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sync-actions .text-link {
        align-self: center;
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .topbar {
        overflow: visible;
    }

    .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .profile-select > summary {
        padding-right: 6px;
    }

    .profile-chevron {
        display: none;
    }

    .profile-heading,
    .theme-section-heading,
    .provider-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .theme-current {
        text-align: left;
    }

    .theme-divisions,
    .football-team-grid,
    .metric-key-list {
        grid-template-columns: 1fr;
    }

    .metric-key-list > div:nth-child(odd) {
        border-right: 0;
    }

    .football-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .football-kpis > div:nth-child(2) {
        border-right: 0;
    }

    .football-kpis > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .football-kpis > div:nth-child(3) {
        padding-left: 0;
    }

    .sync-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .sync-actions form,
    .sync-actions button {
        width: 100%;
    }

    .schedule-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .game-state {
        grid-column: 1 / -1;
        grid-template-columns: auto auto;
        justify-content: space-between;
        justify-items: start;
        text-align: left;
    }

    .roster-sync-form {
        align-items: stretch;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .theme-save-bar {
        bottom: 8px;
    }
}

/* Manual football bet intake */
.manual-bet-entry-row:hover {
    background: transparent !important;
}

.manual-bet-entry-row > td {
    background: #f7fbfe;
    padding: 10px 12px;
}

.manual-bet-entry {
    align-items: center;
    background: var(--manual-blue-soft);
    border: 1px solid var(--manual-blue-line);
    border-radius: 8px;
    color: var(--manual-blue-deep);
    display: grid;
    gap: 11px;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    min-height: 54px;
    padding: 8px 11px;
    transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

.manual-bet-entry:hover {
    background: #e3f1fb;
    border-color: #80b4d8;
    box-shadow: 0 1px 2px rgba(32, 79, 115, 0.08);
}

.manual-bet-entry:focus-visible {
    outline: 3px solid rgba(47, 111, 159, 0.25);
    outline-offset: 2px;
}

.manual-bet-entry-icon {
    align-items: center;
    background: var(--manual-blue);
    border-radius: 7px;
    color: #ffffff;
    display: inline-flex;
    font-size: 1.3rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}

.manual-bet-entry-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.manual-bet-entry-copy strong {
    color: var(--manual-blue-deep);
    font-size: 0.85rem;
}

.manual-bet-entry-copy small {
    color: #567489;
    font-size: 0.68rem;
}

.manual-bet-entry-arrow {
    font-size: 1.15rem;
    font-weight: 900;
    text-align: center;
}

.football-index-map {
    align-items: center;
    border-left: 2px solid var(--manual-blue);
    color: #526b7b;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.64rem;
    gap: 6px;
    margin: 7px 0;
    padding-left: 7px;
}

.football-index-map span + span::before {
    content: "/ ";
}

.football-index-map code {
    color: var(--manual-blue-deep);
    font-size: 0.64rem;
    font-weight: 750;
}

.manual-bet-shell {
    max-width: 1320px;
}

.manual-bet-context {
    margin-top: 14px;
}

.manual-bet-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 286px;
}

.manual-bet-panel,
.manual-index-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.manual-bet-heading,
.manual-index-heading {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 18px 20px;
}

.manual-bet-heading {
    border-bottom: 1px solid var(--line);
}

.manual-bet-heading h2,
.manual-index-heading h2 {
    font-size: 1.08rem;
    margin: 0;
}

.manual-index-chip {
    align-items: center;
    background: var(--manual-blue-soft);
    border: 1px solid var(--manual-blue-line);
    border-radius: 999px;
    color: var(--manual-blue-deep);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 850;
    gap: 7px;
    padding: 7px 9px;
}

.manual-index-chip .status-dot {
    background: var(--manual-blue);
    box-shadow: 0 0 0 3px #dcecf7;
    margin-top: 0;
}

.manual-bet-form {
    display: grid;
}

.form-wide-error {
    background: #fdebed;
    border-bottom: 1px solid #efb9c0;
    padding: 10px 20px;
}

.manual-form-section {
    border-bottom: 1px solid var(--line);
    padding: 18px 20px 20px;
}

.manual-form-section-heading {
    align-items: center;
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
}

.manual-form-section-heading > span {
    align-items: center;
    background: var(--manual-blue);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.67rem;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.manual-form-section-heading h3 {
    font-size: 0.9rem;
    margin: 0;
}

.manual-field-grid {
    display: grid;
    gap: 13px;
}

.directory-field-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.75fr);
}

.taxonomy-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-field,
.market-field {
    grid-column: span 2;
}

.terms-field-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(130px, 0.6fr) minmax(150px, 0.7fr);
}

.manual-field-grid .field-row > small,
.metric-field > small {
    color: var(--muted);
    font-size: 0.67rem;
}

.manual-directory-field {
    min-width: 0;
}

.manual-directory-search {
    position: relative;
}

.manual-directory-results {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: var(--shadow);
    left: 0;
    max-height: 330px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 20;
}

.manual-directory-group + .manual-directory-group {
    border-top: 1px solid var(--line);
}

.manual-directory-group-label {
    background: var(--panel-subtle);
    color: var(--muted);
    display: block;
    font-size: 0.63rem;
    font-weight: 850;
    padding: 7px 10px;
    text-transform: uppercase;
}

.manual-directory-result {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 2px;
    min-height: 48px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.manual-directory-result:hover,
.manual-directory-result:focus-visible {
    background: var(--manual-blue-soft);
    outline: 0;
}

.manual-directory-result strong {
    font-size: 0.78rem;
}

.manual-directory-result small,
.manual-directory-empty {
    color: var(--muted);
    font-size: 0.67rem;
}

.manual-directory-empty {
    display: block;
    padding: 14px 10px;
}

.manual-form-actions {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 14px 20px;
}

.manual-form-actions .secondary-button,
.manual-submit-button {
    min-height: 40px;
}

.manual-form-actions .secondary-button {
    background: #f3f5f6;
    border-color: var(--line-strong);
    color: var(--ink);
}

.manual-submit-button {
    background: var(--manual-blue);
    color: #ffffff;
}

.manual-submit-button:hover {
    background: var(--manual-blue-deep);
    color: #ffffff;
}

.manual-index-panel {
    position: sticky;
    top: 88px;
}

.manual-index-heading {
    border-bottom: 1px solid var(--line);
}

.manual-index-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-index-counts > div {
    border-right: 1px solid var(--line);
    padding: 13px 10px;
    text-align: center;
}

.manual-index-counts > div:last-child {
    border-right: 0;
}

.manual-index-counts span,
.manual-index-counts strong,
.manual-mapping-state span,
.manual-mapping-state strong,
.manual-mapping-state small,
.manual-index-foot span,
.manual-index-foot strong {
    display: block;
}

.manual-index-counts span,
.manual-mapping-label,
.manual-index-foot span {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

.manual-index-counts strong {
    font-size: 1rem;
    margin-top: 3px;
}

.manual-mapping-state {
    border-top: 1px solid var(--line);
    min-height: 118px;
    padding: 14px;
}

.manual-mapping-state strong {
    font-size: 0.85rem;
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.manual-mapping-state small {
    color: var(--muted);
    font-size: 0.7rem;
    margin-top: 3px;
}

.manual-clear-mapping {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    margin-top: 10px;
    padding: 0;
}

.manual-index-panel .table-link,
.manual-clear-mapping {
    color: var(--manual-blue-deep);
}

.manual-index-foot {
    background: var(--panel-subtle);
    border-top: 1px solid var(--line);
    padding: 12px 14px;
}

.manual-index-foot strong {
    font-size: 0.75rem;
    margin-top: 3px;
}

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

    .manual-index-panel {
        order: -1;
        position: static;
    }

    .manual-index-panel {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    }

    .manual-index-heading {
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }

    .manual-index-counts {
        min-width: 260px;
    }

    .manual-mapping-state {
        border-left: 1px solid var(--line);
        border-top: 0;
    }

    .manual-index-foot {
        display: none;
    }
}

@media (max-width: 720px) {
    .manual-index-panel {
        display: block;
    }

    .manual-index-heading {
        border-bottom: 1px solid var(--line);
        border-right: 0;
    }

    .manual-mapping-state {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .directory-field-grid,
    .taxonomy-field-grid,
    .terms-field-grid {
        grid-template-columns: 1fr;
    }

    .metric-field,
    .market-field {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .manual-bet-entry-copy small {
        white-space: normal;
    }

    .manual-bet-heading,
    .manual-index-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .manual-form-actions .secondary-button,
    .manual-submit-button {
        width: 100%;
    }
}