.portal-body .op-button,
.portal-body .apple-button,
.portal-body .light-button,
.portal-body .event-button,
.portal-body .outline-button,
.portal-body .dark-button {
    display: inline-flex;
    min-height: var(--op-button-height-md);
    padding: var(--op-button-pad-md);
    align-items: center;
    justify-content: center;
    gap: var(--op-space-2);
    border: 1px solid transparent;
    border-radius: var(--op-radius-2);
    background: var(--op-color-action);
    color: var(--op-color-on-action) !important;
    font-size: var(--op-button-font-md);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    transition:
        background-color var(--op-motion-fast) var(--op-ease-standard),
        border-color var(--op-motion-fast) var(--op-ease-standard),
        color var(--op-motion-fast) var(--op-ease-standard);
}

.portal-body .op-button svg,
.portal-body .apple-button svg,
.portal-body .light-button svg,
.portal-body .event-button svg,
.portal-body .op-button .op-button__icon {
    flex: none;
    width: var(--op-icon-sm);
    height: var(--op-icon-sm);
}

.portal-body .op-button--sm {
    min-height: var(--op-button-height-sm);
    padding: var(--op-button-pad-sm);
    font-size: var(--op-button-font-sm);
}

.portal-body .op-button--md {
    min-height: var(--op-button-height-md);
    padding: var(--op-button-pad-md);
    font-size: var(--op-button-font-md);
}

.portal-body .op-button--lg {
    min-height: var(--op-button-height-lg);
    padding: var(--op-button-pad-lg);
    font-size: var(--op-button-font-lg);
}

.portal-body .op-button:hover,
.portal-body .apple-button:hover,
.portal-body .light-button:hover,
.portal-body .event-button:hover {
    background: var(--op-color-action-hover);
    transform: none;
}

.portal-body .op-button:active,
.portal-body .apple-button:active,
.portal-body .light-button:active,
.portal-body .event-button:active {
    background: var(--op-color-action-pressed);
}

.portal-body .op-button.op-button--secondary,
.portal-body .op-button.op-button--outline,
.portal-body .outline-button,
.portal-body .dark-button {
    border-color: var(--op-color-action);
    background: var(--op-color-surface);
    color: var(--op-color-action) !important;
}

.portal-body .op-button.op-button--secondary:hover,
.portal-body .op-button.op-button--outline:hover,
.portal-body .outline-button:hover,
.portal-body .dark-button:hover {
    border-color: var(--op-color-action);
    background: var(--op-color-surface-subtle);
}

.portal-body .op-button.op-button--secondary:active,
.portal-body .op-button.op-button--outline:active,
.portal-body .outline-button:active,
.portal-body .dark-button:active {
    border-color: var(--op-color-action-pressed);
    background: var(--op-color-disabled-fill);
}

.portal-body .op-button.op-button--text {
    min-height: var(--op-button-height-md);
    padding-inline: var(--op-space-2);
    border-color: transparent;
    background: transparent;
    color: var(--op-color-action) !important;
}

.portal-body .op-button.op-button--text.op-button--sm {
    min-height: var(--op-button-height-sm);
    font-size: var(--op-button-font-sm);
}

.portal-body .op-button.op-button--text.op-button--lg {
    min-height: var(--op-button-height-lg);
    font-size: var(--op-button-font-lg);
}

.portal-body .op-button.op-button--text:hover {
    background: var(--op-color-surface-subtle);
}

.portal-body .op-button.op-button--text:active {
    background: var(--op-color-disabled-fill);
}

.portal-body .op-button.op-button--icon,
.portal-body .op-icon-button {
    width: var(--op-button-height-md);
    min-width: var(--op-button-height-md);
    padding: var(--op-space-2);
}

.portal-body .op-button.op-button--icon.op-button--sm,
.portal-body .op-icon-button.op-button--sm {
    width: var(--op-button-height-sm);
    min-width: var(--op-button-height-sm);
}

.portal-body .op-button.op-button--icon.op-button--lg,
.portal-body .op-icon-button.op-button--lg {
    width: var(--op-button-height-lg);
    min-width: var(--op-button-height-lg);
}

.portal-body .op-button.op-button--danger {
    background: transparent;
    color: var(--op-color-danger) !important;
}

.portal-body .op-button.op-button--danger:hover {
    background: var(--op-color-danger-subtle);
}

.portal-body .op-button.op-button--danger:active {
    background: color-mix(in srgb, var(--op-color-danger) 16%, #fff);
}

.portal-body .op-button:disabled,
.portal-body .op-button[aria-disabled="true"],
.portal-body .apple-button:disabled,
.portal-body .apple-button[aria-disabled="true"],
.portal-body .light-button:disabled,
.portal-body .event-button:disabled,
.portal-body .outline-button:disabled,
.portal-body .dark-button:disabled {
    border-color: transparent;
    background: var(--op-color-button-disabled-bg);
    color: var(--op-color-button-disabled-text) !important;
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}

.portal-body .op-button.op-button--secondary:disabled,
.portal-body .op-button.op-button--outline:disabled,
.portal-body .op-button.op-button--secondary[aria-disabled="true"],
.portal-body .op-button.op-button--outline[aria-disabled="true"] {
    border-color: var(--op-color-border);
    background: var(--op-color-disabled-fill);
    color: var(--op-color-button-disabled-text) !important;
}

.portal-body .op-button.op-button--text:disabled,
.portal-body .op-button.op-button--text[aria-disabled="true"],
.portal-body .op-button.op-button--danger:disabled,
.portal-body .op-button.op-button--danger[aria-disabled="true"] {
    border-color: transparent;
    background: transparent;
    color: var(--op-color-button-disabled-text) !important;
}

.portal-body .op-button.op-button--loading {
    position: relative;
    pointer-events: none;
}

.portal-body .op-button.op-button--loading > * {
    visibility: hidden;
}

.op-card {
    overflow: hidden;
    border: 1px solid var(--op-color-border);
    border-radius: var(--op-radius-3);
    background: var(--op-color-surface);
}

.op-card--raised {
    box-shadow: var(--op-shadow-raised);
}

.op-card__media {
    overflow: hidden;
    background: var(--op-color-surface-subtle);
}

.op-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.op-card__header,
.op-card__body,
.op-card__footer {
    padding: var(--op-space-3);
}

.op-card__header + .op-card__body,
.op-card__body + .op-card__footer {
    padding-top: 0;
}

.op-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-3);
}

/* 058 · VIS B-2.3 反馈共享包：toast / notice / notice--action / dialog */

.op-toast,
.op-notice,
.op-alert,
.portal-body .flash,
.portal-body .survey-flash,
.portal-body .rec-flash,
.portal-body .mc-err {
    display: flex;
    margin: 0 0 var(--op-space-3);
    padding: var(--op-space-3);
    align-items: center;
    gap: var(--op-space-2);
    border: 1px solid transparent;
    border-radius: var(--op-radius-2);
    background: var(--op-color-surface-subtle);
    color: var(--op-color-text);
    font-size: 14px;
    line-height: 1.4;
}

.op-toast::before,
.op-notice::before,
.op-alert::before,
.portal-body .flash::before,
.portal-body .survey-flash::before,
.portal-body .rec-flash::before,
.portal-body .mc-err::before {
    content: "";
    flex: none;
    width: var(--op-icon-sm);
    height: var(--op-icon-sm);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='1.4'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='8' r='1.4'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.op-toast {
    margin: 0;
    padding: var(--op-space-2) var(--op-space-3);
    /* 悬浮层必须不透底，避免滚动时透出下层文字 */
    background: var(--op-color-surface);
    box-shadow: var(--op-shadow-raised);
    pointer-events: auto;
}

.op-toast-host,
.op-message-host {
    position: fixed;
    z-index: var(--op-z-toast, 1400);
    top: calc(var(--op-nav-height) + var(--op-space-3));
    left: 50%;
    display: flex;
    width: max-content;
    min-width: min(320px, calc(100% - var(--op-space-5)));
    max-width: min(420px, calc(100% - var(--op-space-5)));
    flex-direction: column;
    gap: var(--op-space-2);
    transform: translateX(-50%);
    pointer-events: none;
}

.op-toast-host .op-toast,
.op-message-host .op-toast,
.op-message-host .op-alert {
    animation: op-toast-in var(--op-motion-fast) var(--op-ease-standard);
}

@keyframes op-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .op-toast-host .op-toast,
    .op-message-host .op-toast,
    .op-message-host .op-alert {
        animation: none;
    }
}

.op-cart-fly-dot {
    position: fixed;
    z-index: 1300;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--op-color-action);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--op-color-action) 28%, transparent);
    pointer-events: none;
}

.op-notice-host {
    display: flex;
    margin: 0 0 var(--op-space-3);
    flex-direction: column;
    gap: var(--op-space-2);
}

.op-notice--action {
    flex-wrap: wrap;
}

.op-dialog-host {
    position: fixed;
    inset: 0;
    z-index: var(--op-z-dialog);
    display: flex;
    padding: var(--op-space-4);
    align-items: center;
    justify-content: center;
}

.op-dialog-host[hidden] {
    display: none;
}

.op-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: var(--op-color-overlay);
}

.op-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: var(--op-space-5);
    border: 1px solid var(--op-color-border);
    border-radius: var(--op-radius-4);
    background: var(--op-color-surface);
    box-shadow: var(--op-shadow-overlay);
}

.op-dialog__title {
    margin: 0 0 var(--op-space-2);
    color: var(--op-color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.op-dialog__body {
    margin: 0 0 var(--op-space-5);
    color: var(--op-color-text);
    font-size: 14px;
    line-height: 1.5;
}

.op-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--op-space-3);
}

/* Dialog 按钮不依赖 .portal-body，跨 User / Manage / Creator / Franchise */
.op-dialog__actions .op-button {
    display: inline-flex;
    min-width: 88px;
    min-height: var(--op-button-height-md);
    padding: var(--op-button-pad-md);
    align-items: center;
    justify-content: center;
    gap: var(--op-space-2);
    border: 1px solid transparent;
    border-radius: var(--op-radius-2);
    background: var(--op-color-action);
    color: var(--op-color-on-action) !important;
    font-size: var(--op-button-font-md);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
    transition:
        background-color var(--op-motion-fast) var(--op-ease-standard),
        border-color var(--op-motion-fast) var(--op-ease-standard),
        color var(--op-motion-fast) var(--op-ease-standard);
}

.op-dialog__actions .op-button:hover {
    background: var(--op-color-action-hover);
}

.op-dialog__actions .op-button:active {
    background: var(--op-color-action-pressed);
}

.op-dialog__actions .op-button:focus-visible {
    outline: 2px solid var(--op-color-focus);
    outline-offset: 2px;
}

.op-dialog__actions .op-button--outline {
    border-color: var(--op-color-action);
    background: var(--op-color-surface);
    color: var(--op-color-action) !important;
}

.op-dialog__actions .op-button--outline:hover {
    border-color: var(--op-color-action);
    background: var(--op-color-surface-subtle);
}

.op-dialog__actions .op-button--outline:active {
    border-color: var(--op-color-action-pressed);
    background: var(--op-color-disabled-fill);
}

.op-dialog__actions .op-button--danger {
    border-color: transparent;
    background: var(--op-color-danger);
    color: var(--op-color-on-action) !important;
}

.op-dialog__actions .op-button--danger:hover {
    background: color-mix(in srgb, var(--op-color-danger) 85%, #000);
}

.op-dialog__actions .op-button--danger:active {
    background: color-mix(in srgb, var(--op-color-danger) 70%, #000);
}

.op-dialog__actions .op-button[hidden] {
    display: none;
}

/*
 * 页内弹窗经 feedback.js 挂到 body，脱离 .member-content / :root 业务别名作用域。
 * Creator 等业务 CSS 若仍用 --card / --border / --accent 等，在此补齐；User 作品预览补 --portal-*。
 */
.modal-mask,
.preview-mask,
.work-preview-mask {
    --border: var(--op-color-border);
    --card: var(--op-color-surface);
    --muted: var(--op-color-text-muted);
    --text: var(--op-color-text);
    --paper: var(--op-color-canvas);
    --accent: var(--op-color-action);
    --accent-hover: var(--op-color-action-hover);
    --ok: var(--op-color-success);
    --danger: var(--op-color-danger);
    --radius: var(--op-radius-3);
    --portal-muted: var(--op-color-text-muted);
    --portal-border: var(--op-color-border);
    --portal-primary: var(--op-color-action);
    color: var(--op-color-text);
    font-family: inherit;
}

body > .modal-mask,
body > .preview-mask,
body > .work-preview-mask {
    z-index: var(--op-z-dialog);
    pointer-events: auto;
}

/* 全屏遮罩拦截点击，不锁 body 滚动（避免滚动条消失导致布局抖动） */
.modal-mask,
.preview-mask,
.work-preview-mask,
.op-dialog-host:not([hidden]) {
    pointer-events: auto;
}

.op-dialog-host:not([hidden]) .op-dialog__backdrop {
    pointer-events: auto;
    cursor: default;
}

/* Manage / Creator / Franchise 旧闪讯 class，映射到 notice 语义色 */
.flash-msg {
    display: flex;
    margin: 0 0 var(--op-space-3);
    padding: var(--op-space-3);
    align-items: center;
    gap: var(--op-space-2);
    border: 1px solid transparent;
    border-radius: var(--op-radius-2);
    font-size: 14px;
    line-height: 1.4;
}

.flash-msg-ok {
    border-color: var(--op-color-success-subtle);
    background: var(--op-color-success-subtle);
    color: var(--op-color-success);
}

.flash-msg-err {
    border-color: var(--op-color-danger-subtle);
    background: var(--op-color-danger-subtle);
    color: var(--op-color-danger);
}

.manage-shell .op-toast-host,
.creator-shell .op-toast-host,
.franchise-shell .op-toast-host {
    top: calc(56px + var(--op-space-3));
}

.op-notice--success,
.op-alert--success,
.portal-body .flash-ok,
.portal-body .survey-flash-ok,
.portal-body .rec-flash-ok {
    border-color: var(--op-color-success-subtle);
    background: var(--op-color-success-subtle);
    color: var(--op-color-success);
}

.op-toast--success {
    border-color: color-mix(in srgb, var(--op-color-success) 28%, var(--op-color-border));
    background: color-mix(in srgb, var(--op-color-success) 12%, var(--op-color-surface));
    color: var(--op-color-success);
}

.op-toast--success::before,
.op-notice--success::before,
.op-alert--success::before,
.portal-body .flash-ok::before,
.portal-body .survey-flash-ok::before,
.portal-body .rec-flash-ok::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 12.2 10.8 15 16 9.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 12.2 10.8 15 16 9.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.op-notice--danger,
.op-alert--danger,
.portal-body .flash-err,
.portal-body .survey-flash-err,
.portal-body .rec-flash-err,
.portal-body .mc-err {
    border-color: var(--op-color-danger-subtle);
    background: var(--op-color-danger-subtle);
    color: var(--op-color-danger);
}

.op-toast--danger {
    border-color: color-mix(in srgb, var(--op-color-danger) 28%, var(--op-color-border));
    background: color-mix(in srgb, var(--op-color-danger) 12%, var(--op-color-surface));
    color: var(--op-color-danger);
}

.op-toast--danger::before,
.op-notice--danger::before,
.op-alert--danger::before,
.portal-body .flash-err::before,
.portal-body .survey-flash-err::before,
.portal-body .rec-flash-err::before,
.portal-body .mc-err::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.op-notice--warning,
.op-alert--warning {
    border-color: var(--op-color-warning-subtle);
    background: var(--op-color-warning-subtle);
    color: var(--op-color-warning);
}

.op-toast--warning {
    border-color: color-mix(in srgb, var(--op-color-warning) 28%, var(--op-color-border));
    background: color-mix(in srgb, var(--op-color-warning) 12%, var(--op-color-surface));
    color: var(--op-color-warning);
}

.op-toast--warning::before,
.op-notice--warning::before,
.op-alert--warning::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 3.5 19h17L12 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 10v5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 3.5 19h17L12 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 10v5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1'/%3E%3C/svg%3E");
}

.op-notice--info,
.op-alert--info,
.portal-body .flash-info {
    border-color: var(--op-color-info-subtle);
    background: var(--op-color-info-subtle);
    color: var(--op-color-info);
}

.op-toast--info {
    border-color: color-mix(in srgb, var(--op-color-info) 28%, var(--op-color-border));
    background: color-mix(in srgb, var(--op-color-info) 12%, var(--op-color-surface));
    color: var(--op-color-info);
}

.op-toast__body,
.op-notice__body,
.op-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.op-notice__action,
.op-notice--action .op-button,
.op-notice--action .op-button--text,
.op-alert__action,
.op-alert--action .op-button,
.op-alert--action .op-button--text {
    flex: none;
    min-height: var(--op-control-min-height);
    padding: var(--op-space-2);
    border: 0;
    border-radius: var(--op-radius-2);
    background: transparent;
    color: inherit !important;
    font-weight: 600;
}

.op-toast__close,
.op-notice__close,
.op-alert__close {
    display: inline-flex;
    flex: none;
    width: var(--op-control-min-height);
    min-width: var(--op-control-min-height);
    height: var(--op-control-min-height);
    margin: calc(var(--op-space-2) * -1) calc(var(--op-space-2) * -1) calc(var(--op-space-2) * -1) 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--op-radius-2);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.op-toast__close::before,
.op-notice__close::before,
.op-alert__close::before {
    content: "";
    width: var(--op-icon-sm);
    height: var(--op-icon-sm);
    background: currentColor;
    opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.op-field {
    display: grid;
    gap: var(--op-space-2);
}

.op-field__label {
    color: var(--op-color-text);
    font-size: 14px;
    font-weight: 600;
}

.op-input,
.portal-body .form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.portal-body .form-grid select,
.portal-body .form-grid textarea,
.portal-body .filters input,
.portal-body .qty-input,
.portal-body .profile-field input[type="text"],
.portal-body .profile-field input[type="file"],
.portal-body .profile-field textarea,
.portal-body .profile-field select,
.portal-body .survey-textarea,
.portal-body .session-pick,
.portal-body .portal-filter-input {
    width: 100%;
    min-height: var(--op-control-min-height);
    padding: var(--op-space-2) var(--op-space-3);
    border: 1px solid var(--op-color-border);
    border-radius: var(--op-radius-2);
    background: var(--op-color-surface);
    color: var(--op-color-text);
    box-shadow: none;
}

.op-input--search,
.portal-body input[type="search"].op-input,
.portal-body .portal-filter-input {
    padding-left: calc(var(--op-icon-sm) + var(--op-space-3) + var(--op-space-2));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%236e6e73' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 4 4' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--op-space-3) center;
    background-size: var(--op-icon-sm) var(--op-icon-sm);
}

.portal-body .course-search-control .op-input,
.portal-body .course-search-control .portal-filter-input,
.portal-body .course-search-control input[type="search"] {
    padding-left: var(--op-space-2);
    background-image: none;
}

.op-input-wrap {
    position: relative;
}

.op-input-wrap .op-input {
    padding-left: calc(var(--op-icon-sm) + var(--op-space-3) + var(--op-space-2));
}

.op-input-wrap__icon {
    position: absolute;
    top: 50%;
    left: var(--op-space-3);
    width: var(--op-icon-sm);
    height: var(--op-icon-sm);
    transform: translateY(-50%);
    pointer-events: none;
}

.op-input-wrap--suffix .op-input {
    padding-right: var(--op-control-min-height);
}

.op-input-wrap__action {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--op-control-min-height);
    height: var(--op-control-min-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--op-color-text-muted);
}

.op-input:hover,
.portal-body .form-grid input:not([type="checkbox"]):not([type="radio"]):hover,
.portal-body .form-grid select:hover,
.portal-body .form-grid textarea:hover,
.portal-body .profile-field input[type="text"]:hover,
.portal-body .profile-field input[type="file"]:hover,
.portal-body .survey-textarea:hover,
.portal-body .session-pick:hover,
.portal-body .portal-filter-input:hover {
    border-color: var(--op-color-text-muted);
}

.op-input:focus,
.op-input:focus-visible,
.portal-body .form-grid input:focus,
.portal-body .form-grid input:focus-visible,
.portal-body .form-grid select:focus,
.portal-body .form-grid select:focus-visible,
.portal-body .form-grid textarea:focus,
.portal-body .form-grid textarea:focus-visible,
.portal-body .filters input:focus,
.portal-body .filters input:focus-visible,
.portal-body .qty-input:focus,
.portal-body .qty-input:focus-visible,
.portal-body .profile-field input[type="text"]:focus,
.portal-body .profile-field input[type="text"]:focus-visible,
.portal-body .profile-field textarea:focus,
.portal-body .profile-field textarea:focus-visible,
.portal-body .profile-field select:focus,
.portal-body .profile-field select:focus-visible,
.portal-body .survey-textarea:focus,
.portal-body .survey-textarea:focus-visible,
.portal-body .session-pick:focus,
.portal-body .session-pick:focus-visible,
.portal-body .portal-filter-input:focus,
.portal-body .portal-filter-input:focus-visible,
.portal-body .profile-field input[type="file"]:focus,
.portal-body .profile-field input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--op-color-focus);
    box-shadow: none;
}

.op-input.is-error,
.op-input[aria-invalid="true"],
.op-field.is-error .op-input,
.portal-body .form-grid input[aria-invalid="true"],
.portal-body .form-grid textarea[aria-invalid="true"],
.portal-body .form-grid select[aria-invalid="true"] {
    padding-right: calc(var(--op-icon-sm) + var(--op-space-3) + var(--op-space-2));
    border-color: var(--op-color-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23c23b2e' stroke-width='2'/%3E%3Cpath d='M12 8v5' stroke='%23c23b2e' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.2' r='1.1' fill='%23c23b2e'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--op-space-3) center;
    background-size: var(--op-icon-sm) var(--op-icon-sm);
}

.op-input:disabled,
.op-input[aria-disabled="true"],
.portal-body .form-grid input:disabled,
.portal-body .form-grid select:disabled,
.portal-body .form-grid textarea:disabled,
.portal-body .filters input:disabled,
.portal-body .qty-input:disabled,
.portal-body .profile-field input:disabled,
.portal-body .survey-textarea:disabled,
.portal-body .session-pick:disabled,
.portal-body .portal-filter-input:disabled {
    border-color: var(--op-color-border);
    background-color: var(--op-color-disabled-fill);
    color: var(--op-color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

.op-input[readonly] {
    background-color: var(--op-color-surface-subtle);
    color: var(--op-color-text);
    cursor: default;
}

.op-field__hint,
.op-field__error,
.portal-body .muted,
.portal-body .empty {
    color: var(--op-color-text-muted);
    font-size: 14px;
}

.op-field__error {
    color: var(--op-color-danger);
}

.op-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--op-color-border);
    border-radius: var(--op-radius-2);
    background: var(--op-color-surface);
}

.portal-body .data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--op-color-surface);
}

.portal-body .data-table th,
.portal-body .data-table td {
    padding: var(--op-space-3);
    border-bottom: 1px solid var(--op-color-border);
    text-align: left;
}

.portal-body .page-head {
    display: flex;
    margin: var(--op-space-7) 0 var(--op-space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-3);
}

.portal-body .portal-actions,
.portal-body .ops,
.portal-body .inline-form,
.portal-body .pager {
    display: flex;
    align-items: center;
    gap: var(--op-space-2);
    flex-wrap: wrap;
}

.portal-body .form-grid {
    display: grid;
    max-width: 480px;
    margin-top: var(--op-space-2);
    gap: var(--op-space-3);
}

.portal-body .form-grid label {
    display: grid;
    gap: var(--op-space-1);
}

.op-icon {
    display: inline-block;
    width: var(--op-icon-sm);
    height: var(--op-icon-sm);
    flex: 0 0 var(--op-icon-sm);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.op-icon--cart {
    -webkit-mask-image: url("/images/Icon/cart_svg.svg");
    mask-image: url("/images/Icon/cart_svg.svg");
}

.op-icon--cart-plus {
    -webkit-mask-image: url("/images/Icon/cart-plus.svg");
    mask-image: url("/images/Icon/cart-plus.svg");
}

.op-icon--trash {
    -webkit-mask-image: url("/images/Icon/trash.svg");
    mask-image: url("/images/Icon/trash.svg");
}

.op-icon--external {
    -webkit-mask-image: url("/images/Icon/external.svg");
    mask-image: url("/images/Icon/external.svg");
}

.op-icon--course {
    -webkit-mask-image: url("/images/Icon/course.svg");
    mask-image: url("/images/Icon/course.svg");
}

.op-icon--device {
    -webkit-mask-image: url("/images/Icon/devices.svg");
    mask-image: url("/images/Icon/devices.svg");
}

.op-icon--address {
    -webkit-mask-image: url("/images/Icon/address.svg");
    mask-image: url("/images/Icon/address.svg");
}

.op-icon--order {
    -webkit-mask-image: url("/images/Icon/order.svg");
    mask-image: url("/images/Icon/order.svg");
}

.op-icon--recommend {
    -webkit-mask-image: url("/images/Icon/recommend.svg");
    mask-image: url("/images/Icon/recommend.svg");
}

.op-icon--survey {
    -webkit-mask-image: url("/images/Icon/survey.svg");
    mask-image: url("/images/Icon/survey.svg");
}

.op-icon--profile {
    -webkit-mask-image: url("/images/Icon/profile.svg");
    mask-image: url("/images/Icon/profile.svg");
}

.op-icon--invite {
    -webkit-mask-image: url("/images/Icon/invite.svg");
    mask-image: url("/images/Icon/invite.svg");
}

.op-icon--points {
    -webkit-mask-image: url("/images/Icon/points.svg");
    mask-image: url("/images/Icon/points.svg");
}

.op-icon--redeem {
    -webkit-mask-image: url("/images/Icon/redeem.svg");
    mask-image: url("/images/Icon/redeem.svg");
}

.op-icon--bag {
    -webkit-mask-image: url("/images/Icon/bag.svg");
    mask-image: url("/images/Icon/bag.svg");
}

.op-icon--wheel {
    -webkit-mask-image: url("/images/Icon/wheel.svg");
    mask-image: url("/images/Icon/wheel.svg");
}

.op-icon--assistant {
    -webkit-mask-image: url("/images/Icon/assistant.svg");
    mask-image: url("/images/Icon/assistant.svg");
}

.portal-body .order-meta {
    padding: var(--op-space-3);
    border: 1px solid var(--op-color-border);
    border-radius: var(--op-radius-2);
    background: var(--op-color-surface);
}