body.surface-mobile,
body.shell-variant-mobile {
    --ombox-surface-content-max: 760px;
}

body.surface-mobile .ombox-page-content,
body.shell-variant-mobile .ombox-page-content {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
}

body.surface-mobile .ombox-dynamic-content,
body.shell-variant-mobile .ombox-dynamic-content {
    max-width: var(--ombox-surface-content-max);
    margin-inline: auto;
}

body.surface-desktop .navbar-center-logo,
body.surface-mobile .navbar-center-logo,
body.surface-tablet .navbar-center-logo,
body.surface-tv .navbar-center-logo,
body.surface-vehicle .navbar-center-logo,
body.shell-variant-desktop .navbar-center-logo,
body.shell-variant-mobile .navbar-center-logo,
body.shell-variant-tablet .navbar-center-logo,
body.shell-variant-tv .navbar-center-logo,
body.shell-variant-vehicle .navbar-center-logo {
    gap: 8px;
    min-width: 0;
    color: var(--text-primary, #1f2937);
    font-weight: 700;
    line-height: 1;
}

body.surface-desktop .navbar-center-logo img,
body.surface-mobile .navbar-center-logo img,
body.surface-tablet .navbar-center-logo img,
body.surface-tv .navbar-center-logo img,
body.surface-vehicle .navbar-center-logo img,
body.shell-variant-desktop .navbar-center-logo img,
body.shell-variant-mobile .navbar-center-logo img,
body.shell-variant-tablet .navbar-center-logo img,
body.shell-variant-tv .navbar-center-logo img,
body.shell-variant-vehicle .navbar-center-logo img {
    height: 28px;
    max-width: min(96px, 34vw);
    object-fit: contain;
}

body.surface-desktop .navbar-center-brand-name,
body.surface-mobile .navbar-center-brand-name,
body.surface-tablet .navbar-center-brand-name,
body.surface-tv .navbar-center-brand-name,
body.surface-vehicle .navbar-center-brand-name,
body.shell-variant-desktop .navbar-center-brand-name,
body.shell-variant-mobile .navbar-center-brand-name,
body.shell-variant-tablet .navbar-center-brand-name,
body.shell-variant-tv .navbar-center-brand-name,
body.shell-variant-vehicle .navbar-center-brand-name {
    display: block;
    max-width: min(148px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    letter-spacing: 0;
}

body.eye-protection.surface-desktop .navbar-center-logo,
body.eye-protection.surface-mobile .navbar-center-logo,
body.eye-protection.surface-tablet .navbar-center-logo,
body.eye-protection.surface-tv .navbar-center-logo,
body.eye-protection.surface-vehicle .navbar-center-logo,
body.eye-protection.shell-variant-desktop .navbar-center-logo,
body.eye-protection.shell-variant-mobile .navbar-center-logo,
body.eye-protection.shell-variant-tablet .navbar-center-logo,
body.eye-protection.shell-variant-tv .navbar-center-logo,
body.eye-protection.shell-variant-vehicle .navbar-center-logo {
    color: var(--text-primary, #3f3426);
}

body.surface-tablet,
body.shell-variant-tablet {
    --ombox-surface-content-max: 1080px;
}

body.surface-tablet .ombox-dynamic-content,
body.shell-variant-tablet .ombox-dynamic-content {
    max-width: var(--ombox-surface-content-max);
    margin-inline: auto;
}

body.surface-tv,
body.shell-variant-tv {
    --ombox-surface-content-max: 1440px;
    --widget-control-min-height: 46px;
    /* 同上：不跟着覆盖会让 TV shell 的输入框留在 38px，与 46px 的按钮对不齐。 */
    --form-control-height: 46px;
}

body.surface-tv .ombox-dynamic-content,
body.shell-variant-tv .ombox-dynamic-content {
    max-width: var(--ombox-surface-content-max);
    margin-inline: auto;
}

body.surface-tv .ombox-page-content,
body.shell-variant-tv .ombox-page-content {
    font-size: 18px;
}

body.surface-vehicle,
body.shell-variant-vehicle {
    --ombox-surface-content-max: 1100px;
    --widget-control-min-height: 52px;
    --form-control-height: 52px;
}

body.surface-vehicle .ombox-dynamic-content,
body.shell-variant-vehicle .ombox-dynamic-content {
    max-width: var(--ombox-surface-content-max);
    margin-inline: auto;
}

body.surface-vehicle .ombox-page-content,
body.shell-variant-vehicle .ombox-page-content {
    font-size: 18px;
}

body.input-remote :where(a, button, input, select, textarea, [tabindex]):focus-visible,
body.input-rotary :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 4px solid var(--primary-color, #0087f7);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--color-surface, #fff);
}

body.eye-protection.input-remote :where(a, button, input, select, textarea, [tabindex]):focus-visible,
body.eye-protection.input-rotary :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: #8b7355;
    box-shadow: 0 0 0 3px #f5f1e8;
}

body.page-pattern-workbench.input-remote :where(.btn, a, button, [role="button"], input, select, textarea),
body.page-pattern-workbench.input-rotary :where(.btn, a, button, [role="button"], input, select, textarea) {
    min-height: var(--widget-control-min-height, 46px);
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-workbench :where(.ombox-table-wrap, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-workbench :where(.card, .list-group-item) {
    border-radius: 10px;
}

body.input-remote :where(.ombox-dynamic-content .btn, .navbar .btn, .dropdown-item),
body.input-rotary :where(.ombox-dynamic-content .btn, .navbar .btn, .dropdown-item) {
    min-height: var(--widget-control-min-height, 46px);
}

body:is(.surface-tv, .shell-variant-tv, .surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-label {
    font-size: 16px;
}

body:is(.surface-tv, .shell-variant-tv, .surface-vehicle, .shell-variant-vehicle).page-pattern-form :where(.form-control, .form-select, textarea) {
    min-height: var(--widget-control-min-height, 46px);
    font-size: 18px;
}

body:is(.surface-tv, .shell-variant-tv, .surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-inline-choice {
    min-height: var(--widget-control-min-height, 46px);
    font-size: 16px;
}

body:is(.surface-tv, .shell-variant-tv, .surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-inline-choice input {
    width: 22px;
    height: 22px;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-main {
    width: min(100%, 900px);
    margin-inline: auto;
    padding: 18px;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-column--attachments {
    min-height: 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border, #dee2e6);
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-grid {
    gap: 20px;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form textarea.form-control {
    min-height: 120px;
}

body:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    flex-wrap: wrap;
    margin: 18px -18px -18px;
    padding: 14px 18px;
    background: var(--color-bg, #fff);
}

body.eye-protection:is(.surface-vehicle, .shell-variant-vehicle).page-pattern-form .ombox-dynamic-form-actions {
    background: var(--bg-card, #fbfefb);
    border-color: var(--border-color, #cfe3d2);
}