:root,
body.theme-dark {
    --app-bg: #161616;
    --app-surface: #202020;
    --app-surface-2: #282828;
    --app-surface-3: #303030;
    --app-border: #3b3b3b;
    --app-text: #f3f3f3;
    --app-muted: #9d9d9d;
    --app-accent: #49b6e8;
    --app-accent-soft: rgba(73, 182, 232, .14);
    --app-on-accent: #ffffff;
    --app-success: #4ac978;
    --app-warning: #efc94d;
    --app-danger: #ef6e7f;
    --app-radius-sm: 7px;
    --app-radius-md: 10px;
    --app-radius-lg: 14px;

    /*  FIELD GEOMETRY, NAMED SO IT CAN BE SHARED RATHER THAN COPIED.

        These were literals inside `.app-input, .app-select, .app-textarea`, which was fine
        while that rule was the only place a field was shaped. It is not: Account states the
        same geometry twice more in its own stylesheet, so the product carried three
        definitions of one control and they had drifted to 42/40px, 10/9px and 10/8px.

        A surface that needs its own PALETTE - Account does, and keeps it - should not have to
        restate the SHAPE to get it. */
    --app-field-min-height: 42px;
    --app-field-padding-y: 10px;
    --app-field-padding-x: 11px;

    /*  The focus ring's spread. Its colour belongs to whichever surface is drawing it. */
    --app-field-focus-ring: 3px;
    --app-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

body.theme-light {
    --app-bg: #ebebeb;
    --app-surface: #ffffff;
    --app-surface-2: #f4f4f4;
    --app-surface-3: #e7e7e7;
    --app-border: #d1d1d1;
    --app-text: #202020;
    --app-muted: #626262;
    --app-accent: #1677a5;
    --app-accent-soft: rgba(22, 119, 165, .10);
    --app-on-accent: #ffffff;
    --app-success: #237d43;
    --app-warning: #9a6700;
    --app-danger: #b52343;
    --app-shadow: 0 18px 42px rgba(0, 0, 0, .12);
}

.app-page-shell {
    background: var(--app-bg);
    color: var(--app-text);
    min-height: 100vh;
}

.app-page-shell *,
.app-page-shell *::before,
.app-page-shell *::after {
    box-sizing: border-box;
}

.app-page-width {
    margin-inline: auto;
    max-width: 1180px;
    width: 100%;
}

.app-page-header {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.app-back-link {
    align-items: center;
    color: var(--app-muted);
    display: inline-flex;
    gap: 5px;
    text-decoration: none;
}

.app-back-link:hover,
.app-back-link:focus-visible {
    color: var(--app-text);
}

.app-eyebrow {
    color: var(--app-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

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

.app-field-label {
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
}

.app-input,
.app-select,
.app-textarea {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    color: var(--app-text);
    font: inherit;
    min-height: var(--app-field-min-height);
    padding: var(--app-field-padding-y) var(--app-field-padding-x);
    width: 100%;
}

.app-textarea {
    line-height: 1.45;
    resize: vertical;
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 var(--app-field-focus-ring) var(--app-accent-soft);
    outline: none;
}

/* Disabled inputs read as unavailable rather than merely empty, the same way buttons do. */
.app-input:disabled,
.app-select:disabled,
.app-textarea:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.app-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--app-radius-md);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .75rem;
    font-weight: 750;

    /* An icon beside a label is the common case and the primitive has to hold it,
       or every caller adds a gap of its own and they stop matching. */
    gap: 7px;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    text-decoration: none;
}

.app-button-primary {
    background: var(--app-accent);
    color: var(--app-on-accent, #ffffff);
}

.app-button-secondary {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* A DISABLED BUTTON DOES NOT LIGHT UP. The hover was unguarded, so a control that cannot be
   pressed still brightened under the pointer and contradicted the one thing its dimming says. */
.app-button:not(:disabled):hover {
    filter: brightness(1.05);
}

.app-button:focus-visible {
    outline: var(--cx-focus-width, 2px) solid var(--app-accent);
    outline-offset: var(--cx-focus-offset, 2px);
}

.app-button:disabled {
    cursor: wait;
    opacity: .65;
}

/* THE BADGE, AND THE FOUR THINGS IT CAN MEAN.

   The base is the accent/info badge and stays exactly as it was, so every existing caller is
   untouched. What was missing is everything else: administration grew nine separate pill
   implementations - a mail health pill, a beta application status, an AI state chip, five
   case chips - because the only shared badge could say one thing, and each surface that
   needed "good" or "failing" wrote its own. Three of them reached for literal hex and
   therefore said it in one theme's colours on both.

   The variants are semantic rather than decorative: they name whether a thing is WORKING,
   which is what --cx-status-* exists for, and they are defined per theme there. A caller
   writes `app-badge app-badge-success`, not a colour. */
.app-badge {
    background: var(--app-accent-soft);
    border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-border));
    border-radius: var(--cx-radius-pill, 999px);
    color: var(--app-accent);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 750;
    padding: 6px 9px;
}

.app-badge-neutral {
    background: color-mix(in srgb, var(--cx-status-unknown) 16%, transparent);
    border-color: color-mix(in srgb, var(--cx-status-unknown) 38%, var(--app-border));
    color: var(--app-muted);
}

.app-badge-success {
    background: color-mix(in srgb, var(--cx-status-ok) 16%, transparent);
    border-color: color-mix(in srgb, var(--cx-status-ok) 38%, var(--app-border));
    color: var(--cx-status-ok);
}

.app-badge-warning {
    background: color-mix(in srgb, var(--cx-status-degraded) 16%, transparent);
    border-color: color-mix(in srgb, var(--cx-status-degraded) 38%, var(--app-border));
    color: var(--cx-status-degraded);
}

.app-badge-danger {
    background: color-mix(in srgb, var(--cx-status-offline) 16%, transparent);
    border-color: color-mix(in srgb, var(--cx-status-offline) 38%, var(--app-border));
    color: var(--cx-status-offline);
}


/* A TWO-OR-THREE-WAY CHOICE THAT IS NOT A ROW OF BUTTONS.

   /admin/integrations had Enabled and Disabled as two `app-button`s inside `admin-form-actions`
   - a grid written for "one fixed-width action beside a wide field", which is why the halves
   came out 190px and 323px. A segmented control is a single control with equal parts, so the
   parts are flex tracks of the same basis and the container carries the border.

   `aria-pressed` is what says which one is on, to the stylesheet and to a screen reader alike;
   the buttons stay buttons, so keyboard behaviour is the platform's own. */
.app-segmented {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--cx-radius-md);
    display: inline-flex;
    gap: var(--cx-space-1);
    padding: var(--cx-space-1);
}

.app-segment {
    background: transparent;
    border: 0;
    border-radius: calc(var(--cx-radius-md) - 3px);
    color: var(--app-muted);
    cursor: pointer;

    /* Equal parts, whatever the words are: a flex basis of zero means the labels cannot
       negotiate for width and "Disabled" cannot be wider than "Enabled". */
    flex: 1 1 0;
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    justify-content: center;
    min-height: var(--cx-control-height-sm);
    min-width: 0;
    padding-inline: var(--cx-space-4);
    text-align: center;
    transition: background var(--cx-transition), color var(--cx-transition);
}

.app-segment[aria-pressed="true"] {
    background: var(--app-accent);
    color: var(--app-on-accent, #ffffff);
}

.app-segment:not([aria-pressed="true"]):not(:disabled):hover {
    background: var(--app-surface-3);
    color: var(--app-text);
}

.app-segment:focus-visible {
    outline: var(--cx-focus-width) solid var(--app-accent);
    outline-offset: var(--cx-focus-offset);
}

.app-segment:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.app-message {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    padding: 10px 11px;
}

.app-message-error {
    background: color-mix(in srgb, var(--app-danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--app-danger) 38%, var(--app-border));
    color: var(--app-danger);
}

.app-message-success {
    background: color-mix(in srgb, var(--app-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border));
    color: var(--app-success);
}

.app-empty-state {
    align-items: center;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-md);
    color: var(--app-muted);
    display: flex;
    justify-content: center;
    text-align: center;
}