/* MADO portal foundation */
:root {
    --mado-font-family-base: var(--ai-chat-font-family, "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif);
    --mado-portal-font-family: var(--mado-font-family-base);
    --mado-portal-page-background: #ffffff;
    --mado-portal-shell-background: #ffffff;
    --mado-portal-surface: #ffffff;
    --mado-portal-surface-muted: #f8fbff;
    --mado-portal-border-color: #dbe5ef;
    --mado-portal-border-strong: #b8c8da;
    --mado-portal-text: #0f172a;
    --mado-portal-text-muted: #64748b;
    --mado-portal-text-soft: #475569;
    --mado-portal-link: #2271b1;
    --mado-portal-link-hover: #0f5d99;
    /*
     * Shared MADO management accent SSOT / 管理画面の共通色正本（2026-07-26）.
     * Page CSS must reference these variables instead of owning duplicate color values.
     */
    --mado-brand-accent: #06bfb5;
    --mado-brand-accent-hover: #05a9a1;
    --mado-brand-accent-text: #129f9e;
    --mado-brand-accent-soft: #e6fbf9;
    --mado-brand-accent-border: #b9eeea;
    --mado-brand-accent-ring: rgba(6, 191, 181, 0.20);
    /*
     * SHARED COMFORTABLE EDITOR CONTROL TOKENS / ゆったり入力部品の共通寸法（2026-08-27）
     * - チャット設定のcompact controlを約20%高くする際の寸法正本。
     * - POPの旧専用color controlも移行完了までは同じtokenを参照し、数値を複製しない。
     * - POPがmado-ui共通controlへ移行したら、POP側の互換selectorだけを削除する。
     */
    --mado-ui-comfortable-control-height: 38.4px;
    --mado-ui-comfortable-color-picker-width: 42px;
    --mado-ui-comfortable-color-picker-height: 38.4px;
    --mado-ui-comfortable-color-picker-padding: 4px;
    --mado-ui-range-accent: #2dd4bf;
    --mado-selection-accent: #f47a14;
    --mado-selection-accent-soft: #fce7d9;
    --mado-portal-primary: #0f172a;
    --mado-portal-primary-hover: #1e293b;
    --mado-portal-radius-sm: 8px;
    --mado-portal-radius-md: 12px;
    --mado-portal-radius-lg: 16px;
    --mado-portal-shell-gap-x: clamp(16px, 2vw, 24px);
    --mado-portal-shell-gap-y: 10px;
    --mado-portal-shell-sidebar-column: var(--mado-portal-shell-sidebar-column-size, minmax(208px, clamp(220px, 23vw, 284px)));
    --mado-portal-standard-max-width: 1120px;
    --mado-portal-wide-max-width: 1240px;
    --mado-portal-editor-canvas-max-width: 1840px;
    --mado-portal-editor-settings-max-width: 920px;
    --mado-portal-editor-preview-min-width: 420px;
    --mado-portal-editor-wide-gap: 24px;
    /*
     * SHARED EDITOR TOP BASELINE SSOT / 主要Editor上端の正本（2026-08-17）
     * - チャット設定・問い合わせフォーム設定・バナー作成/POPは、同じshell rowと同じpage-root上余白を使う。
     * - 上余白はshell/content/frameへ分散させず、各Editor本体のrootへこの1値だけを適用する。
     * - 各page CSSへ通常時のtop padding / grid-row補正を戻さない。
     * - 問い合わせの新規作成モードだけは専用toolbar回避のため64pxを同じroot上で上書きする。
     */
    --mado-portal-editor-top-gap: 30px;
    --mado-portal-field-height: 40px;
    --mado-portal-field-border: #cbd5e1;
    --mado-portal-field-focus: var(--mado-brand-accent-ring);
    --mado-portal-shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.06);
    --mado-action-primary-bg: var(--mado-brand-accent);
    --mado-action-primary-bg-hover: var(--mado-brand-accent-hover);
    --mado-action-primary-border: var(--mado-brand-accent);
    --mado-action-primary-border-hover: var(--mado-brand-accent-hover);
    --mado-action-primary-text: #ffffff;
    --mado-action-dark-bg: #0f172a;
    --mado-action-dark-bg-hover: #172238;
    --mado-action-dark-border: #0f172a;
    --mado-action-dark-border-hover: #172238;
    --mado-action-dark-text: #ffffff;
}

body.mado-portal-account-page,
body.mado-managed-auth-start-page,
body.page-portal-login,
body.page-portal-register,
body.page-free-start,
body.page-mado-portal-entry {
    font-family: var(--mado-portal-font-family);
    background: var(--mado-portal-page-background);
    color: var(--mado-portal-text);
    letter-spacing: 0;
}

body.mado-portal-account-page .mado-portal-shell,
body.mado-portal-account-page .mado-portal-shell input,
body.mado-portal-account-page .mado-portal-shell select,
body.mado-portal-account-page .mado-portal-shell textarea,
body.mado-portal-account-page .mado-portal-shell button,
body.mado-portal-account-page .mado-portal-container,
body.mado-portal-account-page .mado-portal-container input,
body.mado-portal-account-page .mado-portal-container select,
body.mado-portal-account-page .mado-portal-container textarea,
body.mado-portal-account-page .mado-portal-container button,
body.mado-portal-account-page .mado-portal-hub,
body.mado-portal-account-page .mado-portal-hub input,
body.mado-portal-account-page .mado-portal-hub select,
body.mado-portal-account-page .mado-portal-hub textarea,
body.mado-portal-account-page .mado-portal-hub button,
body.mado-managed-auth-start-page input,
body.mado-managed-auth-start-page select,
body.mado-managed-auth-start-page textarea,
body.mado-managed-auth-start-page button,
body.page-portal-login input,
body.page-portal-login select,
body.page-portal-login textarea,
body.page-portal-login button,
body.page-portal-register input,
body.page-portal-register select,
body.page-portal-register textarea,
body.page-portal-register button,
body.page-free-start input,
body.page-free-start select,
body.page-free-start textarea,
body.page-free-start button,
body.page-mado-portal-entry input,
body.page-mado-portal-entry select,
body.page-mado-portal-entry textarea,
body.page-mado-portal-entry button {
    font-family: inherit;
    letter-spacing: inherit;
}

.mado-portal-shell,
.mado-portal-container,
.mado-portal-hub {
    box-sizing: border-box;
}

.mado-portal-shell *,
.mado-portal-shell *::before,
.mado-portal-shell *::after,
.mado-portal-container *,
.mado-portal-container *::before,
.mado-portal-container *::after,
.mado-portal-hub *,
.mado-portal-hub *::before,
.mado-portal-hub *::after {
    box-sizing: border-box;
}

body.mado-portal-account-page .woocommerce-MyAccount-navigation,
body.mado-portal-account-page .woocommerce-account .woocommerce-MyAccount-navigation,
body.mado-portal-account-page .entry-title,
body.mado-portal-account-page .woocommerce-account .entry-title,
body.mado-portal-account-page .page-header,
body.mado-portal-account-page .entry-header,
body.mado-portal-account-page .woocommerce-account .page-header,
body.mado-portal-account-page .woocommerce-account .entry-header,
body.mado-portal-account-page #left-sidebar,
body.mado-portal-account-page #right-sidebar,
body.mado-portal-account-page .left-sidebar,
body.mado-portal-account-page .right-sidebar,
body.mado-portal-account-page .is-left-sidebar,
body.mado-portal-account-page .is-right-sidebar,
body.mado-portal-account-page aside#secondary,
body.mado-portal-account-page .widget-area {
    display: none;
}

body.mado-portal-account-page .page-header,
body.mado-portal-account-page .entry-header,
body.mado-portal-account-page .woocommerce-account .page-header,
body.mado-portal-account-page .woocommerce-account .entry-header {
    margin: 0;
    padding: 0;
}

body.mado-portal-account-page .woocommerce,
body.mado-portal-account-page .woocommerce-account .woocommerce,
body.mado-portal-account-page .woocommerce-MyAccount-content,
body.mado-portal-account-page .woocommerce-account .woocommerce-MyAccount-content,
body.mado-portal-account-page .site-content,
body.mado-portal-account-page #content,
body.mado-portal-account-page #primary,
body.mado-portal-account-page #main,
body.mado-portal-account-page .content-area,
body.mado-portal-account-page .inside-article,
body.mado-portal-account-page .inside-content,
body.mado-portal-account-page .separate-containers .inside-article,
body.mado-portal-account-page .one-container .site-content {
    box-sizing: border-box;
    float: none;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    background: var(--mado-portal-page-background);
}

body.mado-portal-account-page .woocommerce-MyAccount-content,
body.mado-portal-account-page .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 100%;
    margin: 0;
}

body.mado-portal-account-page .woocommerce::after,
body.mado-portal-account-page .woocommerce-account .woocommerce::after {
    content: "";
    display: block;
    clear: both;
}

body.mado-portal-account-page .site-content,
body.mado-portal-account-page .site-main,
body.mado-portal-account-page #content,
body.mado-portal-account-page #primary,
body.mado-portal-account-page #main,
body.mado-portal-account-page .content-area,
body.mado-portal-account-page .site-main .grid-container,
body.mado-portal-account-page .site-content .grid-container,
body.mado-portal-account-page article.post,
body.mado-portal-account-page article.page,
body.mado-portal-account-page .site-main > article:first-child,
body.mado-portal-account-page .content-area > article:first-child,
body.mado-portal-account-page .inside-article,
body.mado-portal-account-page .entry-content,
body.mado-portal-account-page .woocommerce-MyAccount-content,
body.mado-portal-account-page .woocommerce-account .woocommerce-MyAccount-content,
body.mado-portal-account-page .entry-content > .woocommerce,
body.mado-portal-account-page .entry-content > .woocommerce > .woocommerce-MyAccount-content,
body.mado-portal-account-page .entry-content > .woocommerce > .woocommerce-notices-wrapper {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--mado-portal-page-background);
}

body.mado-portal-account-page .woocommerce-notices-wrapper {
    min-height: 0;
    margin: 0;
    padding: 0;
}

body.mado-portal-account-page .inside-article > .entry-header:empty {
    display: none;
}

body.mado-portal-account-page .inside-article > .entry-content,
body.mado-portal-account-page .inside-article > .entry-content[itemprop="text"] {
    margin-top: 0;
    margin-bottom: 0;
}

body.mado-portal-account-page .page-title,
body.mado-portal-account-page .woocommerce-account .page-title {
    display: none;
    margin: 0;
    padding: 0;
}

body.mado-portal-account-page #page:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site.grid-container:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page #content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page #primary:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page #main:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site-main:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site-content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .content-area:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site-main .grid-container:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .site-content .grid-container:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .inside-article:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .entry-content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .woocommerce:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .woocommerce-MyAccount-content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .woocommerce-account .entry-content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .woocommerce-account .woocommerce:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page .woocommerce-account .woocommerce-MyAccount-content:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page article.page:has(:is(.mado-portal-shell, .mado-portal-hub)),
body.mado-portal-account-page article.post:has(:is(.mado-portal-shell, .mado-portal-hub)) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    background: #f2f2f2 !important;
}

body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #page,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site.grid-container,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-content,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #content,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #primary,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #main,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-main,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .content-area,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-main .grid-container,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-content .grid-container,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .inside-article,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .entry-content,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .col-full,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .ast-container,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .woocommerce,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .woocommerce-MyAccount-content,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) article.page,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) article.post {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

body.mado-hide-duplicate-header-nav .site-header .mado-duplicate-header-menu-wrap,
body.mado-hide-duplicate-header-nav .site-header .mado-duplicate-header-menu,
body.mado-hide-duplicate-header-nav #masthead .mado-duplicate-header-menu-wrap,
body.mado-hide-duplicate-header-nav #masthead .mado-duplicate-header-menu,
body.mado-hide-duplicate-header-nav .site-header .main-navigation,
body.mado-hide-duplicate-header-nav .site-header .secondary-navigation,
body.mado-hide-duplicate-header-nav .site-header .primary-navigation,
body.mado-hide-duplicate-header-nav .site-header .site-navigation,
body.mado-hide-duplicate-header-nav .site-header #site-navigation,
body.mado-hide-duplicate-header-nav .site-header .header-navigation,
body.mado-hide-duplicate-header-nav .site-header .ast-header-navigation,
body.mado-hide-duplicate-header-nav .site-header .ast-builder-menu,
body.mado-hide-duplicate-header-nav .site-header .main-header-menu,
body.mado-hide-duplicate-header-nav .site-header .ast-mobile-menu-buttons,
body.mado-hide-duplicate-header-nav .site-header .menu-toggle {
    display: none;
}

body.mado-portal-account-page .site-footer,
body.mado-portal-account-page #colophon,
body.mado-portal-account-page .site-info,
body.mado-portal-account-page .inside-site-info,
body.mado-portal-account-page .footer-bar,
body.mado-portal-account-page .footer-widgets,
body.mado-portal-account-page .copyright-bar,
body.mado-portal-standalone .site-footer,
body.mado-portal-standalone #colophon,
body.mado-portal-standalone .site-info,
body.mado-portal-standalone .inside-site-info,
body.mado-portal-standalone .footer-bar,
body.mado-portal-standalone .footer-widgets,
body.mado-portal-standalone .copyright-bar,
body.page-portal-login .site-footer,
body.page-portal-login #colophon,
body.page-portal-login .site-info,
body.page-portal-login .inside-site-info,
body.page-portal-login .footer-bar,
body.page-portal-login .footer-widgets,
body.page-portal-login .copyright-bar,
body.page-portal-register .site-footer,
body.page-portal-register #colophon,
body.page-portal-register .site-info,
body.page-portal-register .inside-site-info,
body.page-portal-register .footer-bar,
body.page-portal-register .footer-widgets,
body.page-portal-register .copyright-bar,
body.page-free-start .site-footer,
body.page-free-start #colophon,
body.page-free-start .site-info,
body.page-free-start .inside-site-info,
body.page-free-start .footer-bar,
body.page-free-start .footer-widgets,
body.page-free-start .copyright-bar,
body.page-mado-portal-entry .site-footer,
body.page-mado-portal-entry #colophon,
body.page-mado-portal-entry .site-info,
body.page-mado-portal-entry .inside-site-info,
body.page-mado-portal-entry .footer-bar,
body.page-mado-portal-entry .footer-widgets,
body.page-mado-portal-entry .copyright-bar {
    display: none;
}


/* MADO portal theme chrome suppression */
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #masthead,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-header,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) header.site-header,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .main-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .secondary-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .primary-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) #site-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .header-navigation,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .inside-header,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-branding,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-logo,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .site-title,
body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) .menu-toggle {
    display: none;
}

body.mado-portal-account-page:not(.mado-official-support-widget-enabled):has(:is(.mado-portal-shell, .mado-portal-hub)) #ai-chat-widget-container:not(#ai-chat-widget-container-preview),
body.mado-portal-account-page:not(.mado-official-support-widget-enabled):has(:is(.mado-portal-shell, .mado-portal-hub)) #ai-chat-toggle,
body.mado-portal-account-page:not(.mado-official-support-widget-enabled):has(:is(.mado-portal-shell, .mado-portal-hub)) .ai-chat-widget-container:not(#ai-chat-widget-container-preview) {
    display: none;
}

body.mado-portal-account-page:has(:is(.mado-portal-shell, .mado-portal-hub)) {
    overflow-x: hidden;
}

/* MADO portal shell frame */
.mado-portal-shell {
    display: grid;
    grid-template-columns: var(--mado-portal-shell-sidebar-column) minmax(0, 1fr);
    column-gap: var(--mado-portal-shell-gap-x);
    row-gap: var(--mado-portal-shell-gap-y);
    align-items: start;
    justify-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
    background: #f2f2f2;
}

.mado-portal-shell__content {
    min-width: 0;
    overflow-x: auto;
    justify-self: stretch;
    text-align: left;
    font-family: var(--mado-portal-font-family);
    background: #f2f2f2;
}

.mado-portal-shell__content-frame {
    width: 100%;
    min-width: 0;
    max-width: none;
    background: #f2f2f2;
}

.mado-portal-shell__content-frame.is-standard {
    width: min(100%, var(--mado-portal-standard-max-width));
    max-width: var(--mado-portal-standard-max-width);
}

.mado-portal-shell__content-frame.is-wide,
.mado-portal-shell__content-frame.is-with-preview {
    width: 100%;
    max-width: none;
}

/* Continuous editor canvas for wide configuration screens */
body.mado-portal-account-page .mado-portal-shell--action-chat-design,
body.mado-portal-account-page .mado-portal-shell--action-pop-campaign,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design {
    align-items: stretch;
    min-height: 100vh;
    background: #ffffff;
}

/*
 * SHARED EDITOR VERTICAL ENTRY / 3画面の縦位置はここだけを入口にする（2026-08-17）
 * - portal-site-sidebar-v2の既定row差を3画面で同じrowへ正規化する。
 * - shell/content/frameには上余白を持たせず、実際のEditor rootへだけ共通gapを置く。
 * - これにより非表示toolbarの有無やshell背景色がタイトル位置へ影響しない。
 */
body.mado-portal-account-page .mado-portal-shell--action-chat-design > .mado-portal-shell__content,
body.mado-portal-account-page .mado-portal-shell--action-pop-campaign > .mado-portal-shell__content,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design > .mado-portal-shell__content {
    grid-row: 1 / -1;
    min-height: 100vh;
    padding-block-start: 0;
    background: #ffffff;
}

/* CHAT DESIGN SHELL GUTTER / 左ナビとの視覚的な間隔はshell側で1か所だけ持つ。 */
body.mado-portal-account-page .mado-portal-shell--action-chat-design > .mado-portal-shell__content {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
}

body.mado-portal-account-page .mado-portal-shell--action-chat-design > .mado-portal-shell__content > .mado-portal-shell__content-frame,
body.mado-portal-account-page .mado-portal-shell--action-pop-campaign > .mado-portal-shell__content > .mado-portal-shell__content-frame,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design > .mado-portal-shell__content > .mado-portal-shell__content-frame {
    min-height: 100vh;
    margin-left: 0;
    margin-right: auto;
    padding-top: 0;
    background: #ffffff;
}

body.mado-portal-account-page .mado-portal-shell--action-chat-design #mado-chat-design-settings,
body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design #mado-inquiry-page-design {
    padding-top: var(--mado-portal-editor-top-gap);
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign .mado-portal-container:has(#mado-pop-campaign-page),
body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page {
    width: 100%;
    max-width: calc(var(--mado-portal-editor-canvas-max-width) + 32px);
    min-height: calc(100vh - 16px);
    margin-left: 0;
    margin-right: auto;
    background: #ffffff;
}

body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page .mado-pop-campaign-page__surface {
    min-height: calc(100vh - 16px);
    background: #ffffff;
}

/*
 * POP EDITOR COLUMN BALANCE / POP編集画面の左右幅（2026-08-01）:
 * - POPは右側プレビューで直接ドラッグするため、広い画面でも左設定カラムを920pxまで拡張しない。
 * - 左カラムは最大560px、画面幅に応じて400pxまで縮み、残りを単一の右プレビューDOMへ渡す。
 * - チャット・問い合わせ等の共通幅変数は変更せず、POP専用selectorだけで調整する。
 * - 削除条件: POP側CSSへポータル外枠を含むレイアウト正本を正式移管した場合、この規則と同時に整理する。
 */
@media (min-width: 1181px) {
    body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page .mado-pop-campaign-editor__layout {
        grid-template-columns:
            minmax(400px, min(44%, 560px))
            minmax(var(--mado-portal-editor-preview-min-width), 1fr);
        gap: clamp(16px, 1vw, 20px);
        justify-content: start;
        width: min(100%, var(--mado-portal-editor-canvas-max-width));
        max-width: var(--mado-portal-editor-canvas-max-width);
        margin-left: 0;
        margin-right: auto;
    }

    body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page .mado-pop-campaign-editor__main {
        width: 100%;
        max-width: 560px;
        min-width: 0;
    }

    body.mado-portal-account-page .mado-portal-shell--action-pop-campaign #mado-pop-campaign-page .mado-pop-campaign-editor__preview {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

.mado-portal-shell__content .mado-portal-container,
body.mado-portal-account-page .mado-portal-container {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mado-portal-shell__content .mado-portal-container {
    margin: 0;
}

body.mado-portal-account-page .mado-portal-shell,
body.mado-portal-account-page .mado-portal-hub {
    position: relative;
    margin-top: 0;
}

body.mado-portal-account-page .mado-portal-shell__content-frame > .mado-portal-breadcrumb:first-child,
body.mado-portal-account-page .mado-portal-hub__content-frame > .mado-portal-breadcrumb:first-child,
body.mado-portal-account-page .mado-portal-shell__content-frame > .mado-portal-frame-toolbar:first-child,
body.mado-portal-account-page .mado-portal-hub__content-frame > .mado-portal-frame-toolbar:first-child {
    margin-top: 0;
}

/* Keep the same top baseline on all three editors at narrow widths too. */
@media (max-width: 720px) {
    :root {
        --mado-portal-editor-top-gap: 20px;
    }
}

@media (max-width: 1180px) {
    .mado-portal-shell {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .mado-portal-shell {
        row-gap: 12px;
    }
}

/* MADO portal toolbar */
.mado-portal-frame-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    grid-column: 1 / -1;
}

body.mado-portal-account-page .mado-portal-shell > .mado-portal-frame-toolbar,
body.mado-portal-account-page .mado-portal-hub > .mado-portal-frame-toolbar {
    position: relative;
    align-self: start;
    z-index: 10050;
    pointer-events: auto;
}

.mado-portal-global-utility {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.mado-portal-global-utility__cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    font-family: var(--mado-portal-font-family);
}

.mado-portal-global-utility__item {
    position: relative;
}

.mado-portal-global-utility__button,
.mado-portal-global-utility__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #334155;
    text-decoration: none;
    box-shadow: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mado-portal-global-utility__button:hover,
.mado-portal-global-utility__button:focus-visible,
.mado-portal-global-utility__link:hover,
.mado-portal-global-utility__link:focus-visible {
    background: #f8fafc;
    color: var(--mado-portal-text);
    outline: none;
}

.mado-portal-global-utility__button--menu {
    min-width: 42px;
    padding: 0;
}

.mado-portal-global-utility__link.is-logout {
    color: #9a3412;
}

.mado-portal-global-utility__link.is-logout:hover,
.mado-portal-global-utility__link.is-logout:focus-visible {
    background: #fff7ed;
    color: #7c2d12;
}

.mado-portal-global-utility__icon {
    position: relative;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    color: currentColor;
}

.mado-portal-global-utility__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.mado-portal-global-utility__button-label,
.mado-portal-global-utility__link-label,
.mado-portal-global-utility__menu-label {
    display: inline-flex;
    align-items: center;
}

.mado-portal-global-utility__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: currentColor;
    font-size: 0;
    line-height: 0;
    transform: translateY(1px);
}

.mado-portal-global-utility__chevron::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20640%20640%27%3E%3Cpath%20d%3D%27M297.4%20470.6C309.9%20483.1%20330.2%20483.1%20342.7%20470.6L534.7%20278.6C547.2%20266.1%20547.2%20245.8%20534.7%20233.3C522.2%20220.8%20501.9%20220.8%20489.4%20233.3L320%20402.7L150.6%20233.4C138.1%20220.9%20117.8%20220.9%20105.3%20233.4C92.8%20245.9%2092.8%20266.2%20105.3%20278.7L297.3%20470.7z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20640%20640%27%3E%3Cpath%20d%3D%27M297.4%20470.6C309.9%20483.1%20330.2%20483.1%20342.7%20470.6L534.7%20278.6C547.2%20266.1%20547.2%20245.8%20534.7%20233.3C522.2%20220.8%20501.9%20220.8%20489.4%20233.3L320%20402.7L150.6%20233.4C138.1%20220.9%20117.8%20220.9%20105.3%20233.4C92.8%20245.9%2092.8%20266.2%20105.3%20278.7L297.3%20470.7z%27/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mado-portal-global-utility__badge {
    position: absolute;
    top: 1px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    transform: translate(28%, -2%);
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.2);
}

.mado-portal-global-utility__badge[hidden],
.mado-portal-global-utility__popover[hidden] {
    display: none;
}

.mado-portal-global-utility__popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 8px;
    width: min(280px, calc(100vw - 48px));
    padding: 12px;
    border: 0;
    border-radius: var(--mado-portal-radius-lg);
    background: var(--mado-portal-surface);
    box-shadow: var(--mado-portal-shadow-soft);
}

.mado-portal-global-utility__popover-head {
    display: grid;
    gap: 4px;
}

.mado-portal-global-utility__popover-title {
    color: var(--mado-portal-text);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
}

.mado-portal-global-utility__popover-status,
.mado-portal-global-utility__popover-note {
    color: var(--mado-portal-text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.mado-portal-global-utility__popover-body {
    margin: 0;
    color: var(--mado-portal-text-soft);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 600;
}

.mado-portal-global-utility__popover-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--mado-portal-radius-md);
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

.mado-portal-global-utility__popover-link:hover,
.mado-portal-global-utility__popover-link:focus-visible {
    background: #dbeafe;
    color: #1e3a8a;
    outline: none;
}

.mado-portal-global-utility__menu-panel {
    width: min(240px, calc(100vw - 48px));
    padding: 10px;
}

.mado-portal-global-utility__menu-list {
    display: grid;
    gap: 4px;
}

.mado-portal-global-utility__menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--mado-portal-radius-md);
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

.mado-portal-global-utility__menu-link:hover,
.mado-portal-global-utility__menu-link:focus-visible {
    background: #f8fafc;
    color: var(--mado-portal-text);
    outline: none;
}

.mado-portal-global-utility__menu-link.is-logout {
    color: #9a3412;
}

.mado-portal-global-utility__menu-link.is-logout:hover,
.mado-portal-global-utility__menu-link.is-logout:focus-visible {
    background: #fff7ed;
    color: #7c2d12;
}

@media (max-width: 640px) {
    .mado-portal-frame-toolbar {
        margin-bottom: 12px;
    }

    .mado-portal-global-utility__cluster {
        gap: 6px;
    }

    .mado-portal-global-utility__button,
    .mado-portal-global-utility__link {
        min-height: 40px;
        padding: 0 12px;
    }

    .mado-portal-global-utility__button-label,
    .mado-portal-global-utility__link-label {
        font-size: 13px;
    }

    .mado-portal-global-utility__popover {
        width: min(320px, calc(100vw - 36px));
    }

    .mado-portal-global-utility__menu-panel {
        width: min(240px, calc(100vw - 36px));
    }
}

/* MADO portal shared UI */
.mado-portal-icon-slot,
.mado-portal-shell__back-link-icon,
.mado-dashboard__eyebrow-icon,
.mado-dashboard__stat-icon,
.mado-dashboard__section-icon,
.mado-portal-setting-summary__icon,
.mado-portal-inline-heading__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.mado-dashboard__eyebrow-icon {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
}

.mado-portal-icon-slot svg,
.mado-portal-shell__back-link-icon svg,
.mado-dashboard__eyebrow-icon svg,
.mado-dashboard__stat-icon svg,
.mado-dashboard__section-icon svg,
.mado-portal-setting-summary__icon svg,
.mado-portal-inline-heading__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.mado-portal-shell__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mado-portal-link);
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}

.mado-portal-shell__back-link:hover,
.mado-portal-shell__back-link:focus-visible {
    color: var(--mado-portal-link-hover);
    outline: none;
}

.mado-portal-shell__back-link-icon {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.mado-portal-shell__back-link-label {
    display: inline-flex;
    align-items: center;
}

.mado-portal-shell__page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mado-portal-border-color);
    border-radius: var(--mado-portal-radius-lg);
    background: var(--mado-portal-surface);
}

.mado-portal-shell__page-icon {
    color: #334155;
}

.mado-portal-shell__page-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mado-portal-shell__page-eyebrow {
    color: var(--mado-portal-text-muted);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 400;
}

.mado-portal-shell__page-title {
    color: var(--mado-portal-text);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.mado-portal-page-heading {
    margin: 0;
    color: var(--mado-portal-text);
    font-family: var(--mado-portal-font-family);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
}

/* Shared portal heading scale.
 * This stays in the existing mado-base.css and uses page-root selectors so
 * page-specific styles cannot return the headings to different sizes/weights.
 */
body .mado-portal-container {
    --mado-portal-main-heading-size: 19px;
    --mado-portal-section-heading-size: 18px;
    --mado-portal-section-heading-compact-size: 16px;
    --mado-portal-subsection-heading-size: 16px;
    --mado-portal-main-heading-weight: 700;
    --mado-portal-heading-weight: 800;
    --mado-portal-heading-line-height: 1.5;

    /*
     * EDITOR CATEGORY BUTTON SCALE / 編集画面カテゴリーボタン共通寸法（2026-08-01）:
     * - POP・チャット・問い合わせフォームの上部カテゴリは同じ見た目と寸法を使う。
     * - 文字サイズは維持し、ウェイトを800から750へ落とす。
     * - 3段分の縦面積をおよそ2.5段相当へ圧縮するため、高さと段間だけを縮める。
     */
    --mado-editor-category-button-min-height: 36px;
    --mado-editor-category-button-padding: 5px 9px;
    --mado-editor-category-button-radius: 12px;
    --mado-editor-category-button-font-size: 13px;
    --mado-editor-category-button-font-weight: 750;
    --mado-editor-category-menu-gap: 7px;
}

/* Main page titles. */
body .mado-portal-main-heading,
body .mado-portal-shell--action-display-rules h2.mado-display-rules-heading,
body #mado-crawl h2.mado-crawl-usage-title,
body .mado-ai-visual-assets-fallback-head h1,
body #mado-ai-usage-page-title,
body #mado-authenticated-pages .mado-authenticated-pages__hero h1,
body .mado-operation-settings h2.mado-operation-settings__heading {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--mado-portal-text, #0f172a);
    font-family: var(--mado-portal-font-family);
    font-size: var(--mado-portal-main-heading-size);
    font-weight: var(--mado-portal-main-heading-weight, 700);
    line-height: var(--mado-portal-heading-line-height);
    letter-spacing: 0;
}

/* Major section headings. */
body .mado-portal-section-heading,
body .mado-portal-shell--action-display-rules .mado-display-rules-group__title,
body #mado-crawl .mado-crawl-usage-section-title,
body #mado-crawl .mado-ai-management-section__head h3,
body .mado-ai-visual-assets-panel__head h2,
body #mado-ai-usage-progress-title,
body #mado-ai-usage-breakdown-title,
body #mado-ai-usage-models-title,
body #mado-ai-usage-settings-title,
body #mado-ai-usage-admin-title,
body #mado-authenticated-pages .mado-authenticated-pages__panel-head h2,
body #mado-authenticated-pages .mado-authenticated-pages__section-head h2,
body .mado-operation-settings .mado-operation-mode-selector__title,
body .mado-operation-settings .mado-operation-mode-panel__title,
body .mado-operation-settings .mado-operation-settings-section__title {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--mado-portal-text, #0f172a);
    font-family: var(--mado-portal-font-family);
    font-size: var(--mado-portal-section-heading-size);
    font-weight: var(--mado-portal-heading-weight);
    line-height: var(--mado-portal-heading-line-height);
    letter-spacing: 0;
}

/* Compact H2 for narrow or supporting panels. Keeps H2 semantics. */
body .mado-portal-section-heading--compact {
    font-size: var(--mado-portal-section-heading-compact-size);
}


/* Subsection headings inside a major H2 section. */
body .mado-portal-subsection-heading {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--mado-portal-text, #0f172a);
    font-family: var(--mado-portal-font-family);
    font-size: var(--mado-portal-subsection-heading-size);
    font-weight: var(--mado-portal-heading-weight);
    line-height: var(--mado-portal-heading-line-height);
    letter-spacing: 0;
}

/* AI usage page: keep its information hierarchy without oversized text. */
body .mado-ai-usage-page .mado-ai-usage-page__summary-card > strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

body .mado-ai-usage-page .mado-ai-usage-page__progress-head > strong {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

body .mado-ai-usage-page .mado-ai-usage-page__breakdown-row > div > strong,
body .mado-ai-usage-page .mado-ai-usage-page__breakdown-numbers > strong,
body .mado-ai-usage-page .mado-ai-usage-page__model-grid article > strong,
body .mado-ai-usage-page .mado-ai-usage-page__empty > strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-portal-card-heading {
    margin: 0;
    color: var(--mado-portal-text);
    font-family: var(--mado-portal-font-family);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
}

.mado-portal-setting-summary,
.mado-portal-inline-heading {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
}

.mado-portal-setting-summary {
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
}

.mado-portal-setting-summary__icon,
.mado-portal-inline-heading__icon {
    width: 22px;
    height: 22px;
    color: var(--mado-portal-text-soft);
}

.mado-portal-button,
.mado-portal-container .button.mado-portal-button,
.mado-portal-container button.mado-portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.mado-portal-button:hover,
.mado-portal-button:focus-visible,
.mado-portal-container .button.mado-portal-button:hover,
.mado-portal-container .button.mado-portal-button:focus-visible,
.mado-portal-container button.mado-portal-button:hover,
.mado-portal-container button.mado-portal-button:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.mado-portal-button--primary {
    border-color: var(--mado-portal-primary);
    background: var(--mado-portal-primary);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.mado-portal-button--primary:hover,
.mado-portal-button--primary:focus-visible {
    border-color: var(--mado-portal-primary-hover);
    background: var(--mado-portal-primary-hover);
    color: #ffffff;
}

.mado-portal-button--secondary,
.mado-portal-button--ghost {
    border-color: #d5dfeb;
    background: #ffffff;
    color: #334155;
}

.mado-portal-button--secondary:hover,
.mado-portal-button--secondary:focus-visible,
.mado-portal-button--ghost:hover,
.mado-portal-button--ghost:focus-visible {
    border-color: var(--mado-portal-border-strong);
    color: var(--mado-portal-text);
}

.mado-portal-button.is-disabled,
.mado-portal-button:disabled,
.mado-portal-container .button.mado-portal-button:disabled,
.mado-portal-container button.mado-portal-button:disabled {
    pointer-events: none;
    opacity: 0.56;
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: var(--mado-portal-text-muted);
    box-shadow: none;
    transform: none;
}

.mado-portal-card {
    border: 1px solid var(--mado-portal-border-color);
    border-radius: var(--mado-portal-radius-lg);
    background: var(--mado-portal-surface);
    box-shadow: var(--mado-portal-shadow-soft);
}

.mado-portal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

body.mado-portal-account-page .mado-portal-container input[type="text"],
body.mado-portal-account-page .mado-portal-container input[type="email"],
body.mado-portal-account-page .mado-portal-container input[type="url"],
body.mado-portal-account-page .mado-portal-container input[type="search"],
body.mado-portal-account-page .mado-portal-container input[type="number"],
body.mado-portal-account-page .mado-portal-container input[type="password"],
body.mado-portal-account-page .mado-portal-container input[type="tel"],
body.mado-portal-account-page .mado-portal-container input[type="date"],
body.mado-portal-account-page .mado-portal-container input[type="time"],
body.mado-portal-account-page .mado-portal-container input[type="datetime-local"],
body.mado-portal-account-page .mado-portal-container input[type="month"],
body.mado-portal-account-page .mado-portal-container input[type="week"],
body.mado-portal-account-page .mado-portal-container select,
body.mado-portal-account-page .mado-portal-container textarea {
    width: 100%;
    min-height: var(--mado-portal-field-height);
    border: 1px solid var(--mado-portal-field-border);
    border-radius: var(--mado-portal-radius-md);
    background: #ffffff;
    color: var(--mado-portal-text);
    font: inherit;
    line-height: 1.5;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container input[type="text"],
body.mado-portal-account-page .mado-portal-container input[type="email"],
body.mado-portal-account-page .mado-portal-container input[type="url"],
body.mado-portal-account-page .mado-portal-container input[type="search"],
body.mado-portal-account-page .mado-portal-container input[type="number"],
body.mado-portal-account-page .mado-portal-container input[type="password"],
body.mado-portal-account-page .mado-portal-container input[type="tel"],
body.mado-portal-account-page .mado-portal-container input[type="date"],
body.mado-portal-account-page .mado-portal-container input[type="time"],
body.mado-portal-account-page .mado-portal-container input[type="datetime-local"],
body.mado-portal-account-page .mado-portal-container input[type="month"],
body.mado-portal-account-page .mado-portal-container input[type="week"],
body.mado-portal-account-page .mado-portal-container select {
    padding: 7px 11px;
}

body.mado-portal-account-page .mado-portal-container textarea {
    min-height: 96px;
    padding: 10px 11px;
    resize: vertical;
}

body.mado-portal-account-page .mado-portal-container input:focus,
body.mado-portal-account-page .mado-portal-container select:focus,
body.mado-portal-account-page .mado-portal-container textarea:focus {
    border-color: var(--mado-portal-link);
    outline: none;
    box-shadow: 0 0 0 3px var(--mado-portal-field-focus);
}

body.mado-portal-account-page .mado-portal-container label,
body.mado-portal-account-page .mado-portal-container .description {
    color: var(--mado-portal-text-soft);
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0;
}

/* Shared ticket list foundations for MADO portal inbox pages */

.mado-portal-container .mado-inbox-ticket-grid {
    display: grid;
    gap: 12px;
}

.mado-portal-container .mado-inbox-ticket-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-left: 10px solid transparent;
    border-radius: 8px;
    padding: 16px;
}

.mado-portal-container .mado-inbox-ticket-card__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mado-portal-container .mado-inbox-ticket-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.mado-portal-container .mado-inbox-ticket-card__meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.mado-portal-container .mado-inbox-ticket-preview {
    color: #374151;
    font-size: 14px;
    margin-bottom: 4px;
}

.mado-portal-container .mado-inbox-ticket-card--interactive {
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.mado-portal-container .mado-inbox-ticket-card--interactive:hover {
    border-color: #c8d6e5;
    box-shadow: 0 10px 24px rgba(15, 36, 64, 0.08);
}

.mado-portal-container .mado-inbox-ticket-card.is-expanded {
    border-color: #9bb8d6;
    box-shadow: 0 14px 28px rgba(15, 36, 64, 0.12);
}

.mado-portal-container .mado-inbox-ticket-card__main {
    cursor: pointer;
}

.mado-portal-container .mado-inbox-ticket-card__main[role="button"] {
    outline: none;
}

.mado-portal-container .mado-inbox-ticket-card__main[role="button"]:focus-visible {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.22);
}

.mado-portal-container .mado-inbox-ticket-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.mado-portal-container .mado-inbox-ticket-panel {
    display: block;
    margin-top: 12px;
}

.mado-portal-container .mado-inbox-ticket-panel[hidden] {
    display: none;
}

.mado-portal-container .mado-inbox-ticket-panel__state-host[hidden] {
    display: none;
}

.mado-portal-container .mado-inbox-ticket-panel__inner {
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #fefefe 100%);
    padding: 12px 16px 16px;
}

.mado-portal-container .mado-inbox-detail-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #c8d3e1;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mado-portal-container .mado-inbox-detail-chip:hover,
.mado-portal-container .mado-inbox-detail-chip:focus {
    background: #f8fbff;
    border-color: #9bb8d6;
    color: #16283a;
    outline: none;
}

.mado-portal-container .mado-inbox-empty-state {
    padding: 40px;
    text-align: center;
}

.mado-portal-container .mado-inbox-empty-state__text {
    margin: 0;
    font-size: 16px;
    color: #6b7280;
}

.mado-portal-container .mado-ticket-elapsed {
    display: none;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.mado-portal-container .mado-ticket-elapsed.is-visible {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mado-portal-container .mado-ticket-elapsed--week {
    color: #1e3a8a;
    font-weight: 600;
}

.mado-portal-container .mado-ticket-elapsed--day {
    color: #7c3aed;
    font-weight: 500;
}

.mado-portal-container .mado-ticket-elapsed--muted {
    color: #6b7280;
    font-weight: 500;
}

.mado-portal-container .mado-elapsed-minutes {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.mado-portal-container .mado-inbox-is-hidden {
    display: none;
}

.mado-portal-container .mado-inbox-pagination .button,
.mado-portal-container .mado-inquiry-pagination .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: none;
}

.mado-portal-container .mado-inbox-pagination .button.is-disabled,
.mado-portal-container .mado-inquiry-pagination .button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 782px) {
    .mado-portal-container .mado-inbox-ticket-card__row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mado-portal-container .mado-inbox-detail-chip {
        align-self: flex-start;
    }
}

/* MADO shared preview pencil button */
.mado-design-preview-edit-button {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    box-shadow: none;
    opacity: 0.72;
    cursor: pointer;
    transform: none;
    transition: opacity 140ms ease, color 140ms ease;
}

.mado-design-preview-edit-button:hover,
.mado-design-preview-edit-button:focus,
.mado-design-preview-edit-button:active {
    border: 0;
    background: transparent;
    color: #475569;
    box-shadow: none;
    opacity: 1;
    transform: none;
}

.mado-design-preview-edit-button:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.70);
    outline-offset: 1px;
}

.mado-design-preview-edit-button svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: currentColor;
    pointer-events: none;
}

/* MADO shared instant tooltip for preview edit buttons */
.mado-design-preview-tooltip {
    position: fixed;
    z-index: 1000002;
    max-width: min(300px, calc(100vw - 16px));
    padding: 4px 7px;
    border-radius: 7px;
    background: #0f172a;
    color: #ffffff;
    font-family: var(--mado-portal-font-family, "Noto Sans JP", system-ui, sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.mado-design-preview-tooltip[hidden] {
    display: none;
}

.mado-design-preview-tooltip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: #0f172a;
    transform: translateX(-50%) rotate(45deg);
}

.mado-design-preview-tooltip[data-placement="bottom"]::before {
    top: -4px;
    bottom: auto;
}

/* MADO shared icon actions */
.mado-portal-container .mado-ui-icon-button.button,
.mado-portal-container button.mado-ui-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    background-image: none;
    color: #ce2c24;
    box-shadow: none;
    text-shadow: none;
    line-height: 1;
    cursor: pointer;
}

.mado-portal-container .mado-ui-icon-button__icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mado-portal-container .mado-ui-icon-button--danger,
.mado-portal-container .mado-ui-icon-button--delete {
    color: #ce2c24;
}

.mado-portal-container .mado-ui-icon-button:hover,
.mado-portal-container .mado-ui-icon-button:focus-visible {
    background: #fff1f1;
    color: #ce2c24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 44, 36, 0.12);
}

.mado-portal-container .mado-ui-icon-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]::after {
    content: attr(data-mado-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    min-width: max-content;
    padding: 4px 7px;
    border-radius: 7px;
    background: #0f172a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    white-space: nowrap;
}

.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]::before {
    content: "";
    position: absolute;
    right: 8px;
    bottom: calc(100% + 2px);
    z-index: 30;
    border: 4px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]:hover::after,
.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]:focus-visible::after,
.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]:hover::before,
.mado-portal-container .mado-ui-icon-button[data-mado-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.mado-portal-container .mado-ui-stack {
    display: grid;
    gap: 14px;
}

.mado-portal-container .mado-ui-grid {
    display: grid;
    gap: 14px;
}

.mado-portal-container .mado-ui-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-portal-container .mado-ui-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
}

.mado-portal-container .mado-ui-card[hidden],
.mado-portal-container .mado-ui-mode-panel[hidden] {
    display: none;
}

.mado-portal-container .mado-ui-card__title {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 900;
}

.mado-portal-container .mado-ui-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.mado-portal-container .mado-ui-field__label {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}

.mado-portal-container .mado-ui-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #c9d8e8;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    line-height: 1.4;
    box-shadow: none;
}

.mado-portal-container .mado-ui-input:focus {
    border-color: var(--mado-brand-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--mado-brand-accent-ring);
}

.mado-portal-container .mado-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #eef2f7;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

.mado-portal-container .mado-ui-button:hover,
.mado-portal-container .mado-ui-button:focus-visible {
    background: #e2e8f0;
    color: #0f172a;
    outline: none;
}

.mado-portal-container .mado-ui-button--primary {
    background: var(--mado-action-primary-bg);
    color: var(--mado-action-primary-text);
}

.mado-portal-container .mado-ui-button--primary:hover,
.mado-portal-container .mado-ui-button--primary:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    color: var(--mado-action-primary-text);
}

.mado-portal-container .mado-ui-button--neutral {
    background: #334155;
    color: #ffffff;
}

.mado-portal-container .mado-ui-button--neutral:hover,
.mado-portal-container .mado-ui-button--neutral:focus-visible {
    background: #475569;
    color: #ffffff;
}

.mado-portal-container .mado-ui-button--ghost {
    border-color: #cbd8e6;
    background: #ffffff;
    color: #334155;
}

.mado-portal-container .mado-ui-button--ghost:hover,
.mado-portal-container .mado-ui-button--ghost:focus-visible {
    border-color: #94a3b8;
    background: #f8fafc;
}

.mado-portal-container .mado-ui-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Shared MADO switch SSOT.
 * Portal screens use .mado-portal-container. Chat Settings is rendered outside
 * that shell, so its notification panel is the single explicit second root.
 * Do not duplicate this switch implementation in page-specific CSS.
 */
.mado-portal-container .mado-ui-switch-visual,
#mado-chat-design-settings .mado-ui-switch-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e5e7eb;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mado-portal-container .mado-ui-switch-visual__thumb,
#mado-chat-design-settings .mado-ui-switch-visual__thumb {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
    transform: translateX(0);
    transition: transform 0.18s ease;
}


.mado-portal-container .mado-ui-switch-visual.is-on,
#mado-chat-design-settings .mado-ui-switch-visual.is-on,
.mado-portal-container .mado-ui-switch-visual[aria-checked="true"],
#mado-chat-design-settings .mado-ui-switch-visual[aria-checked="true"],
.mado-portal-container .mado-ui-switch-input:checked + .mado-ui-switch-visual,
#mado-chat-design-settings .mado-ui-switch-input:checked + .mado-ui-switch-visual {
    border-color: var(--mado-brand-accent);
    background: var(--mado-brand-accent);
    box-shadow: inset 0 1px 2px rgba(6, 191, 181, 0.16), 0 0 0 3px rgba(6, 191, 181, 0.12);
}

.mado-portal-container .mado-ui-switch-visual.is-on .mado-ui-switch-visual__thumb,
#mado-chat-design-settings .mado-ui-switch-visual.is-on .mado-ui-switch-visual__thumb,
.mado-portal-container .mado-ui-switch-visual[aria-checked="true"] .mado-ui-switch-visual__thumb,
#mado-chat-design-settings .mado-ui-switch-visual[aria-checked="true"] .mado-ui-switch-visual__thumb,
.mado-portal-container .mado-ui-switch-input:checked + .mado-ui-switch-visual .mado-ui-switch-visual__thumb,
#mado-chat-design-settings .mado-ui-switch-input:checked + .mado-ui-switch-visual .mado-ui-switch-visual__thumb {
    transform: translateX(20px);
}

.mado-portal-container .mado-ui-switch-visual:focus-visible,
#mado-chat-design-settings .mado-ui-switch-visual:focus-visible,
.mado-portal-container .mado-ui-switch-input:focus-visible + .mado-ui-switch-visual,
#mado-chat-design-settings .mado-ui-switch-input:focus-visible + .mado-ui-switch-visual {
    outline: 3px solid rgba(29, 191, 160, 0.28);
    outline-offset: 2px;
}

.mado-portal-container .mado-ui-switch-visual[aria-disabled="true"],
#mado-chat-design-settings .mado-ui-switch-visual[aria-disabled="true"],
.mado-portal-container .mado-ui-switch-input:disabled + .mado-ui-switch-visual,
#mado-chat-design-settings .mado-ui-switch-input:disabled + .mado-ui-switch-visual {
    opacity: 0.62;
    cursor: not-allowed;
}

.mado-portal-container .mado-ui-switch,
#mado-chat-design-settings .mado-notification-settings .mado-ui-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    color: #0f172a;
    cursor: pointer;
}

.mado-portal-container .mado-ui-switch-input,
#mado-chat-design-settings .mado-notification-settings .mado-ui-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.mado-portal-container .mado-ui-switch__text {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-portal-container .mado-ui-switch__label {
    min-width: 0;
}

.mado-portal-container .mado-ui-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mado-portal-container .mado-ui-status-chip--active {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.mado-portal-container .mado-ui-switch-input:not(:checked) ~ .mado-ui-switch__text .mado-ui-status-chip--active {
    display: none;
}

.mado-portal-container .mado-ui-select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    color: #0f172a;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.mado-portal-container .mado-ui-select:focus,
.mado-portal-container .mado-ui-select:focus-visible {
    border-color: var(--mado-brand-accent);
    outline: 3px solid var(--mado-brand-accent-ring);
    outline-offset: 0;
}

.mado-portal-container .mado-ui-select--compact {
    max-width: 240px;
}

.mado-portal-container .mado-ui-select--short {
    width: 96px;
    max-width: 100%;
    min-height: 36px;
    padding: 6px 30px 6px 11px;
    border-radius: 12px;
    background-position: right 10px center;
    background-size: 10px 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

/*
 * MADO SHARED HELP CHIP / 共通ヘルプチップ（2026-08-18更新）
 * - 色・真円寸法・hover/open状態はこのmado-ui-help-chipを正本とする。
 * - 各画面CSSは配置だけを調整し、同じ緑色の「？」を複製定義しない。
 * - 単純な説明チップは native <details class="mado-ui-help-details"> を正規経路とし、開閉JSを増やさない。
 * - 2026-08-18: 説明パネルはPOP設定のヘルプ表示に合わせ、チップ右端基準で左へ展開する浮遊popoverに統一。
 *   本文は従来13pxから14pxへ1px拡大し、文字色も濃くして画面を押し下げない。
 * - mado-help-chip-popover は既存JS連携画面の互換用として維持し、新規の単純説明チップでは使わない。
 */
.mado-portal-container .mado-ui-help-chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid #a7f3d0;
    border-radius: 50%;
    background: #ecfdf5;
    background-image: none;
    color: #047857;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    line-height: 1;
    list-style: none;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mado-portal-container .mado-ui-help-chip::-webkit-details-marker {
    display: none;
}

.mado-portal-container .mado-ui-help-chip:hover,
.mado-portal-container .mado-ui-help-chip:focus-visible,
.mado-portal-container .mado-ui-help-chip.is-open,
.mado-portal-container .mado-ui-help-details[open] > .mado-ui-help-chip {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
}

.mado-portal-container .mado-ui-help-chip:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.mado-portal-container .mado-ui-help-chip__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}


.mado-portal-container .mado-ui-help-details {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    z-index: 30;
}

.mado-portal-container .mado-ui-help-details__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    z-index: 2147483200;
    width: min(340px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 13px 14px;
    border: 1px solid #78ddd9;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    font-family: var(--mado-portal-font-family, var(--mado-font-family-base, system-ui, sans-serif));
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;
}

.mado-portal-container .mado-ui-help-details__panel::before {
    display: none;
}

.mado-portal-container .mado-ui-help-details__panel p {
    margin: 0;
    color: inherit;
    font: inherit;
}

.mado-portal-container .mado-ui-help-details__panel p + p {
    margin-top: 7px;
}

.mado-portal-container .mado-ui-help-details__title {
    display: block;
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .mado-portal-container .mado-ui-help-details__panel {
        width: min(340px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}

.mado-portal-container .mado-ui-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.mado-portal-container .mado-ui-mode-grid--small {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.mado-portal-container .mado-ui-mode-card {
    appearance: none;
    display: grid;
    gap: 8px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.mado-portal-container .mado-ui-mode-card:hover,
.mado-portal-container .mado-ui-mode-card:focus-visible {
    border-color: var(--mado-brand-accent);
    outline: none;
}

.mado-portal-container .mado-ui-mode-card.is-active,
.mado-portal-container .mado-ui-mode-card.is-selected {
    border-color: var(--mado-brand-accent);
    background: var(--mado-brand-accent-soft);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.12);
}

.mado-portal-container .mado-ui-mode-card.is-inactive {
    box-shadow: none;
}

.mado-portal-container .mado-ui-mode-card__title {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 900;
}

.mado-portal-container .mado-ui-mode-card__description {
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
}

.mado-portal-container .mado-ui-range-control {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(74px, 96px) auto;
    gap: 10px;
    align-items: center;
}

.mado-portal-container .mado-ui-range-control__slider {
    width: 100%;
    accent-color: #b55ac8;
}

.mado-portal-container .mado-ui-range-control__number {
    min-width: 0;
    text-align: center;
}

.mado-portal-container .mado-ui-range-control__unit {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.mado-portal-container .mado-ui-angle-control {
    --mado-ui-angle-control-value: var(--mado-ui-angle, var(--mado-chat-design-v2-angle, calc(var(--radial-angle, 135) * 1deg)));
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.mado-portal-container .mado-ui-angle-control__dial {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    aspect-ratio: 1;
    border: 2px solid #cdebf4;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    cursor: grab;
    touch-action: none;
}

.mado-portal-container .mado-ui-angle-control__dial::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: 7px;
    border: 2px solid #2dd4bf;
    border-radius: 999px;
}

.mado-portal-container .mado-ui-angle-control__dial.is-dragging {
    cursor: grabbing;
}

.mado-portal-container .mado-ui-angle-control__needle {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 2px;
    height: 22px;
    border-radius: 999px;
    background: #0f172a;
    transform: translateX(-50%) rotate(var(--mado-ui-angle-control-value));
    transform-origin: 50% 18px;
}

.mado-portal-container .mado-ui-angle-control__needle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mado-brand-accent);
    transform: translateX(-50%);
}

.mado-portal-container .mado-ui-angle-control__number {
    width: 74px;
    min-width: 0;
    text-align: center;
}

.mado-portal-container .mado-ui-unit-control__unit,
.mado-portal-container .mado-ui-angle-control__unit {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.mado-portal-container .mado-ui-media-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #f8fafc;
}

.mado-portal-container .mado-ui-media-current__image {
    width: 58px;
    height: 58px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
    object-fit: contain;
}

.mado-portal-container .mado-ui-media-current__meta {
    display: grid;
    gap: 2px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.mado-portal-container .mado-ui-media-current__meta strong {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.mado-portal-container .mado-ui-attachment-control {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mado-portal-container .mado-ui-attachment-control__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.mado-portal-container .mado-ui-attachment-control__name {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.mado-portal-container .mado-ui-catalog-modal[hidden] {
    display: none;
}

.mado-portal-container .mado-ui-catalog-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.mado-portal-container .mado-ui-catalog-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.mado-portal-container .mado-ui-catalog-modal__dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(860px, calc(100vw - 28px));
    max-height: min(760px, calc(100vh - 28px));
    margin: 14px auto;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}

.mado-portal-container .mado-ui-catalog-modal__header,
.mado-portal-container .mado-ui-catalog-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.mado-portal-container .mado-ui-catalog-modal__header h4 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 900;
}

.mado-portal-container .mado-ui-catalog-modal__close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: #374151;
    color: #ffffff;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.mado-portal-container .mado-ui-catalog-modal__close:hover,
.mado-portal-container .mado-ui-catalog-modal__close:focus-visible {
    background: #4b5563;
    color: #ffffff;
    outline: none;
}

.mado-portal-container .mado-ui-catalog-modal__body {
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
}

.mado-portal-container .mado-ui-catalog-modal__pagination,
.mado-portal-container .mado-ui-catalog-modal__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mado-portal-container .mado-ui-catalog-modal__pagination strong {
    min-width: 140px;
    text-align: center;
}

.mado-portal-container .mado-ui-catalog-modal__tab.is-active {
    background: var(--mado-action-primary-bg);
    color: var(--mado-action-primary-text);
}

.mado-portal-container .mado-ui-catalog-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
}

.mado-portal-container .mado-ui-catalog-modal__option {
    appearance: none;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 112px;
    padding: 10px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    font: inherit;
}

.mado-portal-container .mado-ui-catalog-modal__option[hidden] {
    display: none;
}

.mado-portal-container .mado-ui-catalog-modal__option:hover,
.mado-portal-container .mado-ui-catalog-modal__option:focus-visible {
    border-color: var(--mado-brand-accent);
    outline: none;
}

.mado-portal-container .mado-ui-catalog-modal__option.is-selected {
    border-color: var(--mado-brand-accent);
    background: var(--mado-brand-accent-soft);
}

.mado-portal-container .mado-ui-catalog-modal__option-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 68px;
}

.mado-portal-container .mado-ui-catalog-modal__option-image {
    display: block;
    max-width: 74px;
    max-height: 68px;
    object-fit: contain;
}

.mado-portal-container .mado-ui-catalog-modal__option-label {
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
}

.mado-portal-container .mado-ui-catalog-modal__empty {
    margin: 16px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.mado-portal-container .mado-ui-catalog-modal__actions {
    justify-content: flex-end;
    border-top: 1px solid #e2e8f0;
    border-bottom: 0;
}

@media (max-width: 720px) {
    .mado-portal-container .mado-ui-grid--two,
    .mado-portal-container .mado-ui-range-control {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-portal-container .mado-ui-catalog-modal__dialog {
        max-height: calc(100vh - 20px);
        margin: 10px auto;
    }
}

/* MADO shared design editor controls */
.mado-design-editor {
    --mado-design-editor-text: #0f172a;
    --mado-design-editor-muted: #64748b;
    --mado-design-editor-line: #d9e2ec;
    --mado-design-editor-line-strong: #94a3b8;
    --mado-design-editor-surface: #ffffff;
    --mado-design-editor-soft: #f8fafc;
    --mado-design-editor-open: var(--mado-brand-accent-soft);
    --mado-design-editor-accent: var(--mado-brand-accent);
    --mado-design-editor-cyan: var(--mado-brand-accent);
    --mado-ui-button-height: 38px;
    --mado-ui-button-radius: 8px;
    --mado-ui-button-font-size: 13px;
    --mado-ui-button-neutral-bg: #0f172a;
    --mado-ui-button-neutral-bg-hover: #1e293b;
    --mado-ui-button-neutral-text: #ffffff;
    /*
     * SHARED EDITOR COMPACT CONTROL SSOT / 編集画面入力部品の寸法正本（2026-08-26）
     * - チャット設定・問い合わせフォーム・POP等の .mado-design-editor は、この寸法を共通利用する。
     * - ページCSSへ数値入力・カラーコード・単位・スイッチの別幅/別高さを再追加しない。
     * - ページ固有CSSはカラム配置などレイアウトだけを担当し、入力部品そのものの寸法はここを正本とする。
     * - 旧42px高/76px数値/116pxカラーコードのページ別上書きは、各画面をこの正本へ移行した時点で削除する。
     */
    --mado-ui-control-height: 32px;
    --mado-ui-control-radius: 8px;
    --mado-ui-control-padding-y: 4px;
    --mado-ui-control-padding-x: 9px;
    --mado-ui-control-gap: 7px;
    --mado-ui-field-gap: 5px;
    --mado-ui-grid-row-gap: 12px;
    --mado-ui-grid-column-gap: 24px;
    --mado-ui-number-width: 78px;
    --mado-ui-color-hex-width: 78px;
    --mado-ui-color-picker-width: 32px;
    --mado-ui-color-picker-height: 28px;
    --mado-ui-color-picker-padding: 0px;
    --mado-ui-color-picker-radius: 0px;
    --mado-ui-color-picker-bg: transparent;
    --mado-ui-color-picker-swatch-radius: 0px;
    --mado-ui-range-number-width: 78px;
    --mado-ui-angle-number-width: 78px;
    --mado-ui-select-max-width: 190px;
    --mado-ui-form-cell-width: 220px;
    --mado-ui-form-grid-row-gap: 14px;
    --mado-ui-form-grid-column-gap: 32px;
    --mado-ui-inline-control-gap: 10px;
    --mado-ui-form-aligned-left-label-width: 56px;
    --mado-ui-form-aligned-right-label-width: 84px;
    --mado-ui-control-border: #cbd5e1;
    --mado-ui-control-border-focus: var(--mado-brand-accent);
    --mado-ui-control-bg: #ffffff;
    --mado-ui-control-text: #0f172a;
    --mado-ui-control-muted: #64748b;
    --mado-ui-surface-soft: #f8fafc;
    --mado-ui-surface-active: var(--mado-brand-accent-soft);
    --mado-ui-accent: var(--mado-brand-accent);
    --mado-ui-switch-accent: var(--mado-brand-accent);
    --mado-ui-switch-focus-ring: var(--mado-brand-accent-ring);
    --mado-ui-switch-shadow: inset 0 1px 2px rgba(6, 191, 181, 0.16), 0 0 0 3px rgba(6, 191, 181, 0.12);
    --mado-ui-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --mado-ui-select-arrow-offset: 24px;
    --mado-ui-select-padding-right: 44px;
}

/*
 * COMFORTABLE CONTROLS / ゆったり入力部品（2026-08-27）
 * - 通常のmado-design-editor寸法は維持し、明示的に付けた画面だけ約20%高くする。
 * - 現在のcallerはチャットデザイン設定root 1件。新しい画面へ無条件追加しない。
 */
.mado-design-editor.mado-design-editor--comfortable-controls {
    --mado-ui-control-height: var(--mado-ui-comfortable-control-height);
    --mado-ui-color-picker-width: var(--mado-ui-comfortable-color-picker-width);
    --mado-ui-color-picker-height: var(--mado-ui-comfortable-color-picker-height);
    --mado-ui-color-picker-padding: var(--mado-ui-comfortable-color-picker-padding);
    --mado-ui-color-picker-radius: var(--mado-portal-radius-sm);
    --mado-ui-color-picker-bg: #ffffff;
    --mado-ui-color-picker-swatch-radius: 4px;
}

.mado-design-editor,
.mado-design-editor * {
    box-sizing: border-box;
}

.mado-design-editor[hidden],
.mado-design-editor [hidden] {
    display: none;
}

.mado-design-editor .mado-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--mado-ui-button-height);
    padding: 8px 14px;
    border: 0;
    border-radius: var(--mado-ui-button-radius);
    background: transparent;
    color: var(--mado-design-editor-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--mado-ui-button-font-size);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none;
}

.mado-design-editor .mado-ui-button:hover,
.mado-design-editor .mado-ui-button:focus,
.mado-design-editor .mado-ui-button:active {
    color: var(--mado-design-editor-text);
    text-decoration: none;
}

.mado-design-editor .mado-ui-button:focus {
    outline: none;
}

.mado-design-editor .mado-ui-button:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.45);
    outline-offset: 2px;
}

.mado-design-editor .mado-ui-button--primary {
    min-height: 42px;
    min-width: 214px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--mado-action-primary-bg);
    color: var(--mado-action-primary-text);
    box-shadow: 0 16px 28px rgba(6, 191, 181, 0.24);
    font-size: 14px;
    font-weight: 800;
}

.mado-design-editor .mado-ui-button--primary:hover,
.mado-design-editor .mado-ui-button--primary:focus,
.mado-design-editor .mado-ui-button--primary:active {
    color: #ffffff;
}

.mado-design-editor .mado-ui-button--primary:disabled,
.mado-design-editor .mado-ui-button--ghost:disabled,
.mado-design-editor .mado-ui-button--secondary:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.mado-design-editor .mado-ui-button--secondary {
    min-height: 42px;
    min-width: 0;
    padding: 10px 18px;
    border: 1px solid #e2e8f0;
    border-radius: var(--mado-ui-button-radius);
    background: #f1f5f9;
    color: #334155;
    box-shadow: none;
}

.mado-design-editor .mado-ui-button--secondary:hover,
.mado-design-editor .mado-ui-button--secondary:focus,
.mado-design-editor .mado-ui-button--secondary:active {
    background: #e2e8f0;
    color: #0f172a;
}

.mado-design-editor .mado-ui-button--ghost {
    background: transparent;
    color: #1d4ed8;
}

.mado-design-editor .mado-ui-button--ghost:hover {
    background: rgba(15, 23, 42, 0.04);
}

.mado-design-editor .mado-ui-button--neutral {
    min-height: 40px;
    padding: 9px 24px;
    border-radius: 999px;
    background: var(--mado-ui-button-neutral-bg);
    color: var(--mado-ui-button-neutral-text);
}

.mado-design-editor .mado-ui-button--neutral:hover,
.mado-design-editor .mado-ui-button--neutral:focus,
.mado-design-editor .mado-ui-button--neutral:active {
    background: var(--mado-ui-button-neutral-bg-hover);
    color: var(--mado-ui-button-neutral-text);
    text-decoration: none;
}

.mado-design-editor .mado-ui-button--compact {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12px;
}

.mado-design-editor .mado-ui-button--with-icon {
    gap: 9px;
}

.mado-design-editor .mado-ui-button--with-icon .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

.mado-design-editor .mado-ui-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--mado-design-editor-line);
    border-radius: 10px;
    background: var(--mado-design-editor-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mado-design-editor .mado-ui-card--wide {
    grid-column: 1 / -1;
}

.mado-design-editor .mado-ui-card--inline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mado-design-editor .mado-ui-card--notice {
    background: #f5fbff;
    border-color: #cdeee9;
}

/*
 * SHARED SETTINGS GROUP SSOT / 枠線上タイトル付き設定グループ正本（2026-08-26）
 * - chat-design / inquiry / POP等で、同じ「枠＋上辺タイトル」を再利用するためのopt-in primitive。
 * - native fieldset/legendやページ専用の擬似legend CSSを増やさず、この2classへ集約する。
 * - ページ固有CSSはgroup間隔だけを持ち、border/padding/title位置を複製しない。
 */
.mado-design-editor .mado-ui-settings-group {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 22px 18px 18px;
    border: 1px solid #bfdbcf;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
}

.mado-design-editor .mado-ui-settings-group__title {
    position: absolute;
    top: 0;
    left: 16px;
    transform: translateY(-50%);
    z-index: 1;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 0 8px;
    background: #ffffff;
    color: var(--mado-design-editor-text, #0f172a);
    font-size: 14px;
    font-weight: var(--mado-portal-heading-weight, 600);
    line-height: 1.2;
    white-space: normal;
}

.mado-design-editor .mado-ui-card--subtle {
    padding: 16px;
    border-color: #dbe5ef;
    background: #ffffff;
    box-shadow: none;
}

.mado-design-editor .mado-ui-card__title {
    display: block;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 800;
    color: var(--mado-design-editor-text);
}

.mado-design-editor .mado-ui-stack {
    display: grid;
    gap: 16px;
}

.mado-design-editor .mado-ui-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mado-ui-grid-row-gap) var(--mado-ui-grid-column-gap);
}

.mado-design-editor .mado-ui-grid--two,
.mado-design-editor .mado-ui-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-design-editor .mado-ui-grid--compact {
    gap: 14px;
}


/*
 * SHARED EDITOR FORM GRID SSOT / 編集項目2カラム配置の共通正本（2026-08-26）
 * - chat-design / inquiry / POP 等は、移行した画面だけ mado-ui-form-grid を付けて利用する。
 * - 各カラムの中で項目本体を中央へ置き、ラベルと入力はその項目内で左揃えにする。
 * - ページCSSへ justify-self / 固定left margin / 同じ2カラム寸法を複製しない。
 * - 既存画面へ無条件適用せず、markupをこのprimitiveへ移行した画面だけが対象。
 */
.mado-design-editor .mado-ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mado-ui-form-grid-row-gap) var(--mado-ui-form-grid-column-gap);
    align-items: start;
    justify-items: center;
    min-width: 0;
}

.mado-design-editor .mado-ui-form-grid > .mado-ui-field,
.mado-design-editor .mado-ui-form-grid > .mado-ui-form-cell {
    width: min(100%, var(--mado-ui-form-cell-width));
    min-width: 0;
    justify-self: center;
}

.mado-design-editor .mado-ui-form-grid > .mado-ui-form-cell > .mado-ui-field {
    width: 100%;
    min-width: 0;
}

.mado-design-editor .mado-ui-form-grid > .mado-ui-card {
    width: min(100%, var(--mado-ui-form-cell-width));
    justify-self: center;
}

.mado-design-editor .mado-ui-grid--controls {
    align-items: end;
    margin-top: 14px;
}

.mado-design-editor .mado-ui-field {
    display: grid;
    gap: var(--mado-ui-field-gap);
    min-width: 0;
}

/*
 * SHARED INLINE FIELD SSOT / ラベル＋入力部品の1行表示正本（2026-08-26）
 * - chat-design / inquiry / POPなど、移行済み画面だけmodifierを付けて利用する。
 * - ラベルとcontrolを同じ行へ置き、color / number+unit / select / text / border / shadowで共通利用する。
 * - ページCSSへ項目別margin/translate/第二gridを複製しない。
 */
.mado-design-editor .mado-ui-field--inline-control {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: var(--mado-ui-inline-control-gap);
    row-gap: 0;
    min-width: 0;
}

.mado-design-editor .mado-ui-field--inline-control > .mado-ui-field__label,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-field__label-row {
    min-width: 0;
    margin: 0;
}

.mado-design-editor .mado-ui-field--inline-control > .mado-ui-input,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-select,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-color-control,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-unit-control,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-angle-control,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-range-control,
.mado-design-editor .mado-ui-field--inline-control > .mado-ui-optional-color-control {
    min-width: 0;
    margin: 0;
    justify-self: start;
}

/*
 * SHARED ALIGNED TWO-COLUMN CONTROLS / 2カラム内control開始位置の共有正本（2026-08-26）
 * - 各大カラム自体は mado-ui-form-grid の等幅2カラムと中央配置を維持する。
 * - opt-inしたgridだけ、左列/右列ごとにラベル列幅を共有し、ラベル先頭とcontrol開始位置の両方を縦に揃える。
 * - 保存name/id、control寸法、ページ固有marginは変更しない。個別translate/marginで位置を合わせない。
 * - 720px以下の1カラム時は通常のinline-controlへ戻し、奇数/偶数列の幅を持ち込まない。
 */
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field:nth-child(odd),
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell:nth-child(odd) > .mado-ui-field {
    grid-template-columns: var(--mado-ui-form-aligned-left-label-width) minmax(0, 1fr);
}

.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field:nth-child(even),
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell:nth-child(even) > .mado-ui-field {
    grid-template-columns: var(--mado-ui-form-aligned-right-label-width) minmax(0, 1fr);
}

.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field > .mado-ui-field__label,
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field > .mado-ui-field__label-row,
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell > .mado-ui-field > .mado-ui-field__label,
.mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell > .mado-ui-field > .mado-ui-field__label-row {
    justify-self: start;
    text-align: left;
    white-space: nowrap;
}

.mado-design-editor .mado-ui-optional-color-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--mado-ui-control-gap);
    min-width: 0;
}

.mado-design-editor .mado-ui-optional-color-control .mado-ui-checkbox--compact {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.mado-design-editor .mado-ui-field__label {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 800;
    color: #334155;
}

.mado-design-editor .mado-ui-field__note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    color: #64748b;
}

.mado-design-editor .mado-ui-input,
.mado-design-editor .mado-ui-select,
.mado-design-editor .mado-ui-textarea {
    width: 100%;
    min-height: var(--mado-ui-control-height);
    padding: var(--mado-ui-control-padding-y) var(--mado-ui-control-padding-x);
    border: 1px solid var(--mado-ui-control-border);
    border-radius: var(--mado-ui-control-radius);
    background: var(--mado-ui-control-bg);
    color: var(--mado-ui-control-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}

.mado-design-editor .mado-ui-input:focus,
.mado-design-editor .mado-ui-select:focus,
.mado-design-editor .mado-ui-textarea:focus {
    border-color: var(--mado-ui-control-border-focus);
    outline: 2px solid rgba(56, 189, 248, 0.18);
    outline-offset: 0;
}

.mado-design-editor .mado-ui-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: var(--mado-ui-select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--mado-ui-select-arrow-offset) center;
    background-size: 10px 6px;
    padding-right: var(--mado-ui-select-padding-right);
    max-width: min(100%, var(--mado-ui-select-max-width));
}

.mado-design-editor .mado-ui-input--number {
    width: var(--mado-ui-number-width);
    max-width: var(--mado-ui-number-width);
    flex: 0 0 var(--mado-ui-number-width);
    text-align: center;
}

.mado-design-editor .mado-ui-textarea {
    min-height: 118px;
    resize: vertical;
}

.mado-design-editor .mado-ui-fieldset {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: var(--mado-ui-surface-soft);
}

.mado-design-editor .mado-ui-fieldset > .mado-ui-field__label,
.mado-design-editor .mado-ui-fieldset > legend.mado-ui-field__label {
    padding: 0 4px;
}

.mado-design-editor .mado-ui-color-control,
.mado-design-editor .mado-ui-unit-control,
.mado-design-editor .mado-ui-angle-control,
.mado-design-editor .mado-ui-range-control {
    display: flex;
    align-items: center;
    gap: var(--mado-ui-control-gap);
    min-width: 0;
}

.mado-design-editor .mado-ui-color-control {
    flex-wrap: wrap;
}

/*
 * SHARED COLOR PICKER SURFACE / 共通カラーピッカー表示（2026-08-27）
 * - native color inputの黒い既定枠は使わず、MADO側の薄い境界線を正本にする。
 * - 通常editorは従来の色面表示を維持し、comfortable-controlsだけ白い余白を少量持たせる。
 * - ページ側へ同じswatch補正を複製しない。POP旧専用controlだけは移行完了まで共有tokenへ追従する。
 */
.mado-design-editor .mado-ui-color-control__picker {
    width: var(--mado-ui-color-picker-width);
    height: var(--mado-ui-color-picker-height);
    padding: var(--mado-ui-color-picker-padding);
    border: 1px solid var(--mado-ui-control-border);
    border-radius: var(--mado-ui-color-picker-radius);
    background: var(--mado-ui-color-picker-bg);
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    cursor: pointer;
}

.mado-design-editor .mado-ui-color-control__picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.mado-design-editor .mado-ui-color-control__picker::-webkit-color-swatch {
    border: 0;
    border-radius: var(--mado-ui-color-picker-swatch-radius);
}

.mado-design-editor .mado-ui-color-control__picker::-moz-color-swatch {
    border: 0;
    border-radius: var(--mado-ui-color-picker-swatch-radius);
}

.mado-design-editor .mado-ui-color-control__hex {
    width: var(--mado-ui-color-hex-width);
    max-width: var(--mado-ui-color-hex-width);
    min-width: 0;
    flex: 0 0 var(--mado-ui-color-hex-width);
}

.mado-design-editor .mado-ui-unit-control__unit,
.mado-design-editor .mado-ui-range-control__unit {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.mado-design-editor .mado-ui-range-control {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) var(--mado-ui-range-number-width) auto;
    gap: 8px;
    align-items: center;
}

.mado-design-editor .mado-ui-range-control__slider {
    width: 100%;
    accent-color: var(--mado-ui-range-accent);
}

.mado-design-editor .mado-ui-range-control__number {
    width: var(--mado-ui-range-number-width);
    max-width: var(--mado-ui-range-number-width);
    text-align: center;
}

.mado-design-editor .mado-ui-angle-control__dial {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border: 2px solid #cdebf4;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    cursor: grab;
    touch-action: none;
}

.mado-design-editor .mado-ui-angle-control__dial::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px solid #2dd4bf;
    border-radius: 999px;
}

.mado-design-editor .mado-ui-angle-control__dial.is-dragging {
    cursor: grabbing;
}

.mado-design-editor .mado-ui-angle-control__needle {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 2px;
    height: 22px;
    border-radius: 999px;
    background: #0f172a;
    transform: translateX(-50%) rotate(var(--mado-ui-angle-control-value, 135deg));
    transform-origin: 50% 18px;
}

.mado-design-editor .mado-ui-angle-control__needle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mado-brand-accent);
    transform: translateX(-50%);
}

.mado-design-editor .mado-ui-angle-control__number {
    width: var(--mado-ui-angle-number-width);
    max-width: var(--mado-ui-angle-number-width);
}

.mado-design-editor .mado-ui-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: var(--mado-design-editor-text);
    cursor: pointer;
}

.mado-design-editor .mado-ui-checkbox__input {
    flex: 0 0 auto;
    margin-top: 3px;
    accent-color: var(--mado-brand-accent);
}

.mado-design-editor .mado-ui-checkbox__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mado-design-editor .mado-ui-checkbox__label {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
}

.mado-design-editor .mado-ui-checkbox__caption {
    font-size: 13px;
    line-height: 1.65;
    color: #334155;
}

.mado-design-editor .mado-ui-checkbox--compact {
    align-items: center;
    min-height: 28px;
    gap: 7px;
}

.mado-design-editor .mado-ui-checkbox--compact .mado-ui-checkbox__input {
    margin-top: 0;
}

.mado-design-editor .mado-ui-checkbox--compact .mado-ui-checkbox__label {
    font-size: 13px;
    line-height: 1.45;
}

.mado-design-editor .mado-ui-checkbox--compact .mado-ui-checkbox__body {
    display: flex;
    align-items: center;
    min-height: 18px;
}

.mado-design-editor .mado-ui-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0 14px 8px 0;
    color: var(--mado-design-editor-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
}

.mado-design-editor .mado-ui-choice input[type="radio"],
.mado-design-editor .mado-ui-choice input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mado-ui-accent);
}

.mado-design-editor .mado-ui-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.mado-design-editor .mado-ui-mode-grid--small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-design-editor .mado-ui-mode-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 74px;
    padding: 12px 16px;
    border: 1px solid var(--mado-design-editor-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--mado-design-editor-text);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.mado-design-editor .mado-ui-mode-card:hover,
.mado-design-editor .mado-ui-mode-card:focus-visible {
    border-color: #7dd3fc;
    background: #f8fdff;
    outline: none;
}

.mado-design-editor .mado-ui-mode-card.is-active,
.mado-design-editor .mado-ui-mode-card.is-selected {
    border-color: var(--mado-brand-accent);
    background: var(--mado-brand-accent-soft);
    box-shadow: inset 0 0 0 1px var(--mado-brand-accent);
}

.mado-design-editor .mado-ui-mode-card.is-inactive {
    background: #ffffff;
    box-shadow: none;
}

.mado-design-editor .mado-ui-mode-card__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mado-design-editor .mado-ui-mode-card__title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
}

.mado-design-editor .mado-ui-mode-card__description {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

.mado-design-editor .mado-ui-mode-panels,
.mado-design-editor .mado-ui-mode-panel {
    display: grid;
    gap: 14px;
}

.mado-design-editor .mado-ui-mode-panel > .mado-ui-card__title {
    margin-bottom: 0;
}

.mado-design-editor .mado-ui-mode-panel[hidden] {
    display: none;
}

.mado-design-editor .mado-design-editor-mode-panel-shell {
    display: grid;
    gap: 16px;
    margin-top: 0;
    padding: 20px 16px 18px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: #f4fbfe;
    box-shadow: none;
}

.mado-design-editor .mado-design-editor-mode-panel-shell .mado-ui-mode-panel {
    gap: 16px;
}

.mado-design-editor .mado-ui-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.mado-design-editor .mado-ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mado-design-editor .mado-ui-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mado-design-editor .mado-ui-switch__track {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    flex-basis: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e5e7eb;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mado-design-editor .mado-ui-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
    transition: transform 0.18s ease;
}

.mado-design-editor .mado-ui-switch__input:checked + .mado-ui-switch__track {
    border-color: var(--mado-ui-switch-accent);
    background: var(--mado-ui-switch-accent);
    box-shadow: var(--mado-ui-switch-shadow);
}

.mado-design-editor .mado-ui-switch__input:checked + .mado-ui-switch__track::after {
    transform: translateX(18px);
}

.mado-design-editor .mado-ui-switch__input:focus-visible + .mado-ui-switch__track {
    outline: 3px solid var(--mado-ui-switch-focus-ring);
    outline-offset: 2px;
}

.mado-design-editor .mado-ui-switch__input:disabled + .mado-ui-switch__track {
    cursor: not-allowed;
    opacity: 0.62;
}

.mado-design-editor .mado-ui-switch__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mado-design-editor .mado-ui-switch__state {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.mado-design-editor .mado-ui-switch__state.is-on {
    color: var(--mado-ui-accent);
}

.mado-design-editor .mado-ui-switch__state.is-off {
    color: #64748b;
}

.mado-design-editor .mado-ui-edit-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
    padding: 5px 10px 5px 12px;
    border: 1px solid var(--mado-ui-switch-accent);
    border-radius: 999px;
    background: #ecfdf8;
    color: #04735f;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mado-design-editor .mado-ui-edit-switch:hover,
.mado-design-editor .mado-ui-edit-switch:focus-visible {
    border-color: var(--mado-ui-switch-accent);
    background: #dffbf3;
    color: #035f50;
    box-shadow: 0 0 0 3px rgba(29, 191, 160, 0.16);
}

.mado-design-editor .mado-ui-edit-switch:not(.is-active) {
    border-color: #cbd5e1;
    background: #eef2f7;
    color: #64748b;
}

.mado-design-editor .mado-ui-edit-switch:not(.is-active):hover,
.mado-design-editor .mado-ui-edit-switch:not(.is-active):focus-visible {
    border-color: #b8c4d2;
    background: #e8eef5;
    color: #526171;
}

.mado-design-editor .mado-ui-edit-switch__text {
    min-width: 0;
}

.mado-design-editor .mado-design-accordion-bottom-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 18px;
    height: 18px;
    padding: 0;
    margin: 14px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.mado-design-editor .mado-design-accordion-bottom-close:hover,
.mado-design-editor .mado-design-accordion-bottom-close:focus,
.mado-design-editor .mado-design-accordion-bottom-close:focus-visible {
    border: 0;
    background: transparent;
    color: transparent;
    box-shadow: none;
    outline: none;
    transform: none;
}

.mado-design-editor .mado-design-accordion-bottom-close__text,
.mado-design-editor .mado-design-accordion-bottom-close__icon {
    display: none;
}

.mado-design-editor .mado-design-save-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 999px;
    flex: 0 0 16px;
    animation: mado-design-save-spin 0.7s linear infinite;
}

.mado-design-editor [data-mado-design-save-button].is-saving .mado-design-save-spinner {
    display: inline-block;
}

@keyframes mado-design-save-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 720px) {
    .mado-design-editor .mado-ui-grid,
    .mado-design-editor .mado-ui-grid--two,
    .mado-design-editor .mado-ui-grid--compact,
    .mado-design-editor .mado-ui-grid--controls,
    .mado-design-editor .mado-ui-mode-grid,
    .mado-design-editor .mado-ui-mode-grid--small,
    .mado-design-editor .mado-ui-range-control {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-design-editor .mado-ui-card--wide,
    .mado-design-editor .mado-ui-card--inline {
        grid-column: auto;
    }

    .mado-design-editor .mado-ui-card--inline,
    .mado-design-editor .mado-ui-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mado-design-editor .mado-ui-form-actions .mado-ui-button {
        width: 100%;
    }

    .mado-design-editor .mado-ui-color-control__hex,
    .mado-design-editor .mado-ui-input {
        max-width: 100%;
    }
}

/* MADO portal page frame */
:root {
    --mado-portal-page-gutter-x: clamp(18px, 2.4vw, 32px);
    --mado-portal-page-gutter-x-mobile: 16px;
    --mado-portal-page-standard-max-width: 1120px;
    --mado-portal-page-wide-max-width: 1240px;
    --mado-portal-page-panel-max-width: 1140px;
    --mado-portal-page-narrow-max-width: 960px;
    --mado-portal-panel-padding: 30px;
    --mado-portal-panel-padding-mobile: 20px;
    --mado-portal-panel-radius: 22px;
    --mado-portal-panel-border-color: #d7e3ee;
    --mado-portal-panel-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

body.mado-portal-account-page .mado-portal-shell--action-site-qa .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-template-library .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-chat-design .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mado-portal-page-wide-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mado-portal-page-gutter-x);
    padding-right: var(--mado-portal-page-gutter-x);
}

body.mado-portal-account-page .mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-display-rules .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mado-portal-page-standard-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mado-portal-page-gutter-x);
    padding-right: var(--mado-portal-page-gutter-x);
}

/* Settings-style page width: 1140px visible content inside the shared gutters. */
body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-support-staff .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-chat-log .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-authenticated-pages .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(
        var(--mado-portal-page-panel-max-width)
        + var(--mado-portal-page-gutter-x)
        + var(--mado-portal-page-gutter-x)
    );
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mado-portal-page-gutter-x);
    padding-right: var(--mado-portal-page-gutter-x);
}

body.mado-portal-account-page .mado-portal-shell--action-site-qa .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-template-library .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-support-inbox-settings .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-support-staff .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-chat-log .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-authenticated-pages .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-display-rules .mado-portal-container,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-portal-container {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-support-staff .mado-support-staff-page,
body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-chat-log .mado-chat-log-page,
body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-authenticated-pages #mado-authenticated-pages {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--mado-portal-page-panel-max-width);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-authenticated-pages #mado-authenticated-pages {
    padding: var(--mado-portal-panel-padding);
    border: 1px solid var(--mado-portal-panel-border-color);
    border-radius: var(--mado-portal-panel-radius);
    background: #ffffff;
    box-shadow: var(--mado-portal-panel-shadow);
    overflow: hidden;
}

@media (max-width: 782px) {
    body.mado-portal-account-page .mado-portal-shell--action-site-qa .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-template-library .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-inquiry-page-design .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-chat-design .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-support-staff .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-chat-log .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-authenticated-pages .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-display-rules .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-portal-shell__content-frame.is-standard {
        padding-left: var(--mado-portal-page-gutter-x-mobile);
        padding-right: var(--mado-portal-page-gutter-x-mobile);
    }

    body.mado-portal-account-page .mado-portal-shell.mado-portal-shell--action-authenticated-pages #mado-authenticated-pages {
        padding: var(--mado-portal-panel-padding-mobile);
        border-radius: 18px;
    }
}

/* MADO shared accordion frame */
:root {
    --mado-ui-accordion-card-gap: 10px;
    --mado-ui-accordion-row-min-height: 50px;
    --mado-ui-accordion-row-padding-block: 10px;
    --mado-ui-accordion-row-padding-inline-start: 14px;
    --mado-ui-accordion-row-padding-inline-end: 14px;
    --mado-ui-accordion-row-column-gap: 12px;
    --mado-ui-accordion-border-width: 1px;
    --mado-ui-accordion-border-color: #d7e3ee;
    --mado-ui-accordion-open-border-color: #9fb4ca;
    --mado-ui-accordion-body-border-color: #e8eef5;
    --mado-ui-accordion-radius: 12px;
    --mado-ui-accordion-background: #ffffff;
    --mado-ui-accordion-row-background: #ffffff;
    --mado-ui-accordion-row-color: #0f172a;
    --mado-ui-accordion-row-border-color: var(--mado-ui-accordion-border-color);
    --mado-ui-accordion-row-hover-background: #f8fafc;
    --mado-ui-accordion-row-hover-color: var(--mado-ui-accordion-row-color);
    --mado-ui-accordion-row-open-background: #ffffff;
    --mado-ui-accordion-row-open-color: var(--mado-ui-accordion-row-color);
    --mado-ui-accordion-title-font-size: 16px;
    --mado-ui-accordion-title-line-height: 1.45;
    --mado-ui-accordion-title-font-weight: 800;
    --mado-ui-accordion-icon-slot-size: 18px;
    --mado-ui-accordion-icon-size: 12px;
    --mado-ui-accordion-icon-color: currentColor;
    --mado-ui-accordion-body-padding: 18px 20px 20px;
    --mado-ui-accordion-body-background: #f8fbff;
    --mado-ui-accordion-box-shadow: none;
    --mado-ui-accordion-focus-ring: var(--mado-brand-accent-ring);
    --mado-ui-accordion-plus-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060.09%2060.09'%3E%3Crect%20fill='black'%20x='23.24'%20width='13.62'%20height='60.09'/%3E%3Crect%20fill='black'%20x='0'%20y='23.24'%20width='60.09'%20height='13.62'/%3E%3C/svg%3E");
    --mado-ui-accordion-minus-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060.09%2060.09'%3E%3Crect%20fill='black'%20x='0'%20y='23.24'%20width='60.09'%20height='13.62'/%3E%3C/svg%3E");
}

.mado-design-editor.mado-chat-design .mado-design-editor-accordion,
#mado-inquiry-page-design .mado-ui-accordion-group {
    display: grid;
    gap: var(--mado-ui-accordion-card-gap);
}

.mado-ui-accordion-card,
.mado-design-editor.mado-chat-design .mado-design-editor-section,
#mado-inquiry-page-design .mado-ui-accordion {
    border: var(--mado-ui-accordion-border-width) solid var(--mado-ui-accordion-border-color);
    border-radius: var(--mado-ui-accordion-radius);
    background: var(--mado-ui-accordion-background);
    box-shadow: var(--mado-ui-accordion-box-shadow);
    overflow: hidden;
}

.mado-ui-accordion-card.is-open,
.mado-ui-accordion-card[open],
.mado-design-editor.mado-chat-design .mado-design-editor-section.is-open,
#mado-inquiry-page-design .mado-ui-accordion.is-open {
    border-color: var(--mado-ui-accordion-open-border-color);
}

.mado-ui-accordion-row,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button,
#mado-inquiry-page-design .mado-ui-accordion__trigger {
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mado-ui-accordion-row-column-gap);
    width: 100%;
    min-height: var(--mado-ui-accordion-row-min-height);
    padding: var(--mado-ui-accordion-row-padding-block) var(--mado-ui-accordion-row-padding-inline-end) var(--mado-ui-accordion-row-padding-block) var(--mado-ui-accordion-row-padding-inline-start);
    box-sizing: border-box;
    border: 0;
    border-bottom: var(--mado-ui-accordion-border-width) solid transparent;
    background: var(--mado-ui-accordion-row-background);
    color: var(--mado-ui-accordion-row-color);
    cursor: pointer;
    text-align: left;
    font: inherit;
    box-shadow: none;
    text-decoration: none;
}

.mado-ui-accordion-row::-webkit-details-marker {
    display: none;
}

.mado-design-editor.mado-chat-design .mado-design-editor-section.is-closed .mado-design-editor-section__button,
#mado-inquiry-page-design .mado-ui-accordion.is-closed > .mado-ui-accordion__header > .mado-ui-accordion__trigger {
    border-bottom-color: transparent;
}

.mado-ui-accordion-card.is-open > .mado-ui-accordion__header > .mado-ui-accordion-row,
.mado-ui-accordion-card.is-open > .mado-ui-accordion-row,
.mado-ui-accordion-card[open] > .mado-ui-accordion-row,
.mado-design-editor.mado-chat-design .mado-design-editor-section.is-open .mado-design-editor-section__button,
#mado-inquiry-page-design .mado-ui-accordion.is-open > .mado-ui-accordion__header > .mado-ui-accordion__trigger,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"],
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"] {
    border-bottom-color: var(--mado-ui-accordion-body-border-color);
}

.mado-ui-accordion-row[aria-expanded="true"],
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"],
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"] {
    background: var(--mado-ui-accordion-row-open-background);
    color: var(--mado-ui-accordion-row-open-color);
}

.mado-ui-accordion-row:hover,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button:hover,
#mado-inquiry-page-design .mado-ui-accordion__trigger:hover {
    background: var(--mado-ui-accordion-row-hover-background);
    color: var(--mado-ui-accordion-row-hover-color);
}

.mado-ui-accordion-row[aria-expanded="true"]:hover,
.mado-ui-accordion-row[aria-expanded="true"]:focus,
.mado-ui-accordion-row[aria-expanded="true"]:active,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"]:hover,
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"]:hover,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"]:focus,
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"]:focus,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"]:active,
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"]:active {
    background: var(--mado-ui-accordion-row-open-background);
    color: var(--mado-ui-accordion-row-open-color);
}

.mado-ui-accordion-row:focus,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button:focus,
#mado-inquiry-page-design .mado-ui-accordion__trigger:focus {
    outline: none;
}

.mado-ui-accordion-row:focus-visible,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button:focus-visible,
#mado-inquiry-page-design .mado-ui-accordion__trigger:focus-visible {
    outline: 3px solid var(--mado-ui-accordion-focus-ring);
    outline-offset: -3px;
}

.mado-ui-accordion-title,
.mado-design-editor.mado-chat-design .mado-design-editor-section__title,
#mado-inquiry-page-design .mado-ui-accordion__title {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: var(--mado-ui-accordion-title-font-size);
    line-height: var(--mado-ui-accordion-title-line-height);
    font-weight: var(--mado-ui-accordion-title-font-weight);
    letter-spacing: 0;
}

.mado-ui-accordion-meta {
    order: 2;
    min-width: 0;
}

.mado-ui-accordion-actions {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
}

.mado-ui-accordion-icon,
.mado-design-editor.mado-chat-design .mado-design-editor-section__icon,
#mado-inquiry-page-design .mado-ui-accordion__icon {
    order: 4;
    position: relative;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mado-ui-accordion-icon-slot-size);
    height: var(--mado-ui-accordion-icon-slot-size);
    margin: 0 0 0 auto;
    flex: 0 0 var(--mado-ui-accordion-icon-slot-size);
    color: var(--mado-ui-accordion-icon-color);
    font-size: 0;
    line-height: 0;
    transform: none;
}

.mado-ui-accordion-icon::before,
.mado-design-editor.mado-chat-design .mado-design-editor-section__icon::before,
#mado-inquiry-page-design .mado-ui-accordion__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    width: var(--mado-ui-accordion-icon-size);
    height: var(--mado-ui-accordion-icon-size);
    margin: auto;
    background: currentColor;
    -webkit-mask-image: var(--mado-ui-accordion-plus-icon);
    mask-image: var(--mado-ui-accordion-plus-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mado-ui-accordion-icon::after,
.mado-design-editor.mado-chat-design .mado-design-editor-section__icon::after,
#mado-inquiry-page-design .mado-ui-accordion__icon::after {
    content: none;
    display: none;
}

.mado-ui-accordion-row[aria-expanded="true"] .mado-ui-accordion-icon::before,
.mado-design-editor.mado-chat-design .mado-design-editor-section__button[aria-expanded="true"] .mado-design-editor-section__icon::before,
#mado-inquiry-page-design .mado-ui-accordion__trigger[aria-expanded="true"] .mado-ui-accordion__icon::before {
    -webkit-mask-image: var(--mado-ui-accordion-minus-icon);
    mask-image: var(--mado-ui-accordion-minus-icon);
}

.mado-ui-accordion-body,
.mado-design-editor.mado-chat-design .mado-design-editor-section__body,
#mado-inquiry-page-design .mado-ui-accordion__body {
    padding: var(--mado-ui-accordion-body-padding);
    background: var(--mado-ui-accordion-body-background);
}

/* MADO shared modal primitive
 * Portal-wide modal layout and form controls live here. Feature CSS must not
 * duplicate the fixed overlay, centering, dialog, field, or action styles.
 * Existing confirm-modal selectors remain as a compatibility specialization.
 * Canonical path: public/css/mado-base.css
 * Updated: 2026-07-22
 */
.mado-portal-container .mado-ui-modal[hidden],
.mado-portal-container .mado-ui-confirm-modal[hidden] {
    display: none;
}

.mado-portal-container .mado-ui-modal,
.mado-portal-container .mado-ui-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
}

.mado-portal-container .mado-ui-modal__backdrop,
.mado-portal-container .mado-ui-confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
}

.mado-portal-container .mado-ui-modal__dialog,
.mado-portal-container .mado-ui-confirm-modal__dialog {
    position: relative;
    z-index: 1;
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.mado-portal-container .mado-ui-modal__dialog {
    width: min(520px, 100%);
}

.mado-portal-container .mado-ui-confirm-modal__dialog {
    width: min(420px, 100%);
}

.mado-portal-container .mado-ui-modal__dialog:focus,
.mado-portal-container .mado-ui-confirm-modal__dialog:focus {
    outline: none;
}

.mado-portal-container .mado-ui-modal__title,
.mado-portal-container .mado-ui-confirm-modal__title {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.mado-portal-container .mado-ui-modal__body {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.mado-portal-container .mado-ui-modal__field {
    display: grid;
    gap: 7px;
}

.mado-portal-container .mado-ui-modal__label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-portal-container .mado-ui-modal__input,
.mado-portal-container .mado-ui-modal__textarea,
.mado-portal-container .mado-ui-modal__select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--mado-portal-field-border, #cbd5e1);
    border-radius: 10px;
    background: #ffffff;
    color: var(--mado-portal-text, #0f172a);
    font: inherit;
    line-height: 1.5;
    box-shadow: none;
}

.mado-portal-container .mado-ui-modal__textarea {
    min-height: 104px;
    resize: vertical;
}

.mado-portal-container .mado-ui-modal__input:focus,
.mado-portal-container .mado-ui-modal__textarea:focus,
.mado-portal-container .mado-ui-modal__select:focus {
    border-color: var(--mado-portal-link, #2271b1);
    outline: 3px solid var(--mado-portal-field-focus, rgba(34, 113, 177, 0.18));
    outline-offset: 0;
}

.mado-portal-container .mado-ui-modal__status {
    min-height: 1.5em;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-portal-container .mado-ui-modal__status:empty {
    display: none;
}

.mado-portal-container .mado-ui-modal__actions,
.mado-portal-container .mado-ui-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}


.mado-portal-container .mado-ui-modal__button,
.mado-portal-container .mado-ui-confirm-modal__button {
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
}

/*
 * PUBLIC EDITOR AUTH BENEFITS / 未ログイン保存時のメリット表示（2026-08-31）
 * - overlay / dialog / actions は上の共通confirm modal primitiveを正本とする。
 * - POPの第二モーダルは作らず、mado-public-editor-auth.js が同じdialog内へ3カードだけ追加する。
 * - 他の公開Editorではこのmodifier classが付かないため、従来幅・従来表示を維持する。
 */
.mado-portal-container .mado-public-editor-auth-modal--with-benefits .mado-ui-confirm-modal__dialog {
    width: min(820px, 100%);
}

.mado-portal-container .mado-public-editor-auth-modal__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.mado-portal-container .mado-public-editor-auth-modal__benefit {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 14px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
}

.mado-portal-container .mado-public-editor-auth-modal__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--mado-brand-accent, #06bfb5);
}

.mado-portal-container .mado-public-editor-auth-modal__benefit-icon svg {
    width: 23px;
    height: 23px;
}

.mado-portal-container .mado-public-editor-auth-modal__benefit-title {
    margin: 0 0 4px;
    color: var(--mado-portal-text, #0f172a);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-portal-container .mado-public-editor-auth-modal__benefit-copy {
    margin: 0;
    color: var(--mado-portal-text-soft, #475569);
    font-size: 13px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    .mado-portal-container .mado-public-editor-auth-modal__benefits {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mado-portal-container .mado-ui-modal__button--primary {
    border-color: var(--mado-action-dark-border, #0f172a);
    background: var(--mado-action-dark-bg, #0f172a);
    color: var(--mado-action-dark-text, #ffffff);
}

.mado-portal-container .mado-ui-modal__button--primary:hover,
.mado-portal-container .mado-ui-modal__button--primary:focus-visible {
    border-color: var(--mado-action-dark-border-hover, #172238);
    background: var(--mado-action-dark-bg-hover, #172238);
    color: var(--mado-action-dark-text, #ffffff);
}

@media (max-width: 782px) {
    .mado-portal-container .mado-ui-modal,
    .mado-portal-container .mado-ui-confirm-modal {
        padding: 16px;
    }
}

/* MADO shared confirm modal specialization */
.mado-portal-container .mado-ui-confirm-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    color: #ce2c24;
    background: #fff1f1;
    border-radius: 50%;
}

.mado-portal-container .mado-ui-confirm-modal__icon-svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mado-portal-container .mado-ui-confirm-modal__message {
    margin: 8px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

.mado-portal-container .mado-ui-confirm-modal__button--confirm {
    border-color: #ce2c24;
    background: #ce2c24;
    color: #ffffff;
}

/* MADO shared action controls */
.mado-portal-container .mado-ui-button--blue {
    background: #0088b2;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 136, 178, 0.18);
}

.mado-portal-container .mado-ui-button--blue:hover,
.mado-portal-container .mado-ui-button--blue:focus-visible {
    background: #006f92;
    color: #ffffff;
}

.mado-portal-container .mado-ui-button--danger-soft {
    border-color: rgba(206, 44, 36, 0.22);
    background: #ffffff;
    color: #ce2c24;
}

.mado-portal-container .mado-ui-button--danger-soft:hover,
.mado-portal-container .mado-ui-button--danger-soft:focus-visible {
    border-color: rgba(206, 44, 36, 0.4);
    background: #fff1f1;
    color: #b42318;
}

.mado-portal-container .mado-ui-button--with-icon,
.mado-portal-container .mado-ui-button:has(svg) {
    gap: 9px;
}

.mado-portal-container .mado-ui-button svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

.mado-portal-container .mado-ui-button--wide {
    min-width: 160px;
}

.mado-portal-container .mado-ui-button--compact {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 12px;
}

.mado-portal-container .mado-ui-icon-button svg,
.mado-portal-container .mado-ui-icon-button__icon {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* MADO shared portal accordions */
.mado-portal-container .mado-chat-operation-accordion,
.mado-portal-container .mado-design-accordion {
    border: 1px solid var(--mado-portal-border-color, #dbe5ef);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}

.mado-portal-container .mado-chat-operation-accordion > summary,
.mado-portal-container .mado-design-accordion-header,
.mado-portal-container .mado-scenario-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 14px 18px;
    color: var(--mado-portal-text, #0f172a);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.mado-portal-container .mado-chat-operation-accordion > summary::-webkit-details-marker,
.mado-portal-container .mado-design-accordion-header::-webkit-details-marker,
.mado-portal-container .mado-scenario-accordion-header::-webkit-details-marker {
    display: none;
}

.mado-portal-container .mado-chat-operation-accordion > summary::marker,
.mado-portal-container .mado-design-accordion-header::marker,
.mado-portal-container .mado-scenario-accordion-header::marker {
    content: "";
}

.mado-portal-container .mado-chat-operation-accordion[open] > summary,
.mado-portal-container details[open] > .mado-design-accordion-header,
.mado-portal-container details[open] > .mado-scenario-accordion-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--mado-portal-border-color, #dbe5ef);
}

.mado-portal-container .mado-chat-operation-accordion-body,
.mado-portal-container .mado-design-accordion-body,
.mado-portal-container .mado-scenario-accordion-body {
    padding: 18px;
}

.mado-portal-container .mado-chat-operation-accordion-icon,
.mado-portal-container .mado-design-accordion-chevron,
.mado-portal-container .mado-scenario-accordion-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #0f172a;
}

.mado-portal-container .mado-chat-operation-accordion-icon::before,
.mado-portal-container .mado-design-accordion-chevron::before,
.mado-portal-container .mado-scenario-accordion-chevron::before {
    content: "+";
    display: block;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

.mado-portal-container .mado-chat-operation-accordion[open] .mado-chat-operation-accordion-icon::before,
.mado-portal-container details[open] .mado-design-accordion-chevron::before,
.mado-portal-container details[open] .mado-scenario-accordion-chevron::before {
    content: "∁E;
}

/* MADO shared action buttons */
.mado-portal-container .mado-scenario-button,
.mado-portal-container .mado-save-button-green,
.mado-portal-container .mado-scenario-download-btn,
.mado-portal-container .mado-scenario-upload-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #eef2f7;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mado-portal-container .mado-scenario-button:hover,
.mado-portal-container .mado-scenario-button:focus-visible,
.mado-portal-container .mado-save-button-green:hover,
.mado-portal-container .mado-save-button-green:focus-visible,
.mado-portal-container .mado-scenario-download-btn:hover,
.mado-portal-container .mado-scenario-download-btn:focus-visible,
.mado-portal-container .mado-scenario-upload-trigger:hover,
.mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    background: #e2e8f0;
    color: #0f172a;
    outline: none;
    transform: translateY(-1px);
}

.mado-portal-container .mado-scenario-button--green,
.mado-portal-container .mado-save-button-green,
.mado-portal-container .mado-scenario-download-btn.mado-scenario-button--green,
.mado-portal-container .mado-scenario-upload-trigger {
    background: var(--mado-action-primary-bg);
    border-color: var(--mado-action-primary-border);
    color: var(--mado-action-primary-text);
    box-shadow: 0 14px 28px rgba(6, 191, 181, 0.18);
}

.mado-portal-container .mado-scenario-button--green:hover,
.mado-portal-container .mado-scenario-button--green:focus-visible,
.mado-portal-container .mado-save-button-green:hover,
.mado-portal-container .mado-save-button-green:focus-visible,
.mado-portal-container .mado-scenario-download-btn.mado-scenario-button--green:hover,
.mado-portal-container .mado-scenario-download-btn.mado-scenario-button--green:focus-visible,
.mado-portal-container .mado-scenario-upload-trigger:hover,
.mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    border-color: var(--mado-action-primary-border-hover);
    color: var(--mado-action-primary-text);
    box-shadow: 0 16px 30px rgba(6, 191, 181, 0.24);
}

.mado-portal-container .mado-scenario-button--blue {
    background: #0088b2;
    border-color: #0088b2;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 136, 178, 0.18);
}

.mado-portal-container .mado-scenario-button--blue:hover,
.mado-portal-container .mado-scenario-button--blue:focus-visible {
    background: #006f92;
    border-color: #006f92;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(0, 136, 178, 0.24);
}

.mado-portal-container .mado-scenario-button--cyan {
    background: #0fcac4;
    border-color: #0fcac4;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 202, 196, 0.18);
}

.mado-portal-container .mado-scenario-button--cyan:hover,
.mado-portal-container .mado-scenario-button--cyan:focus-visible {
    background: #0aa9a4;
    border-color: #0aa9a4;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(15, 202, 196, 0.24);
}

.mado-portal-container .mado-scenario-button--danger {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.24);
    color: #ce2c24;
}

.mado-portal-container .mado-scenario-button--danger:hover,
.mado-portal-container .mado-scenario-button--danger:focus-visible {
    background: #fff1f1;
    border-color: rgba(220, 38, 38, 0.42);
    color: #ce2c24;
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.12);
}

.mado-portal-container .mado-scenario-button--compact {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 12px;
}

.mado-portal-container .mado-scenario-download-btn svg,
.mado-portal-container .mado-template-action-icon,
.mado-portal-container .mado-template-action-icon svg,
.mado-portal-container .mado-site-qa-create-btn__icon,
.mado-portal-container .mado-site-qa-create-btn__icon svg,
.mado-portal-container .mado-site-qa-download-csv-btn svg,
.mado-portal-container .mado-site-qa-button-icon,
.mado-portal-container .mado-site-qa-button-icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: currentColor;
}

/* MADO shared portal buttons and accordions */
.mado-portal-container .button.mado-scenario-button,
.mado-portal-container button.mado-scenario-button,
.mado-portal-container a.button.mado-scenario-button,
.mado-portal-container .button.mado-save-button-green,
.mado-portal-container button.mado-save-button-green,
.mado-portal-container .button.mado-scenario-download-btn,
.mado-portal-container button.mado-scenario-download-btn,
.mado-portal-container a.button.mado-scenario-download-btn,
.mado-portal-container .mado-scenario-upload-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e9e6ed;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mado-portal-container .button.mado-scenario-button:hover,
.mado-portal-container button.mado-scenario-button:hover,
.mado-portal-container a.button.mado-scenario-button:hover,
.mado-portal-container .button.mado-scenario-button:focus-visible,
.mado-portal-container button.mado-scenario-button:focus-visible,
.mado-portal-container a.button.mado-scenario-button:focus-visible,
.mado-portal-container .button.mado-save-button-green:hover,
.mado-portal-container button.mado-save-button-green:hover,
.mado-portal-container .button.mado-save-button-green:focus-visible,
.mado-portal-container button.mado-save-button-green:focus-visible,
.mado-portal-container .button.mado-scenario-download-btn:hover,
.mado-portal-container button.mado-scenario-download-btn:hover,
.mado-portal-container a.button.mado-scenario-download-btn:hover,
.mado-portal-container .button.mado-scenario-download-btn:focus-visible,
.mado-portal-container button.mado-scenario-download-btn:focus-visible,
.mado-portal-container a.button.mado-scenario-download-btn:focus-visible,
.mado-portal-container .mado-scenario-upload-trigger:hover,
.mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

.mado-portal-container .button.mado-scenario-button--green,
.mado-portal-container button.mado-scenario-button--green,
.mado-portal-container a.button.mado-scenario-button--green,
.mado-portal-container .button.mado-save-button-green,
.mado-portal-container button.mado-save-button-green,
.mado-portal-container .mado-scenario-upload-trigger {
    background: var(--mado-action-primary-bg);
    border-color: var(--mado-action-primary-border);
    color: var(--mado-action-primary-text);
    box-shadow: 0 14px 28px rgba(6, 191, 181, 0.18);
}

.mado-portal-container .button.mado-scenario-button--green:hover,
.mado-portal-container button.mado-scenario-button--green:hover,
.mado-portal-container a.button.mado-scenario-button--green:hover,
.mado-portal-container .button.mado-scenario-button--green:focus-visible,
.mado-portal-container button.mado-scenario-button--green:focus-visible,
.mado-portal-container a.button.mado-scenario-button--green:focus-visible,
.mado-portal-container .button.mado-save-button-green:hover,
.mado-portal-container button.mado-save-button-green:hover,
.mado-portal-container .button.mado-save-button-green:focus-visible,
.mado-portal-container button.mado-save-button-green:focus-visible,
.mado-portal-container .mado-scenario-upload-trigger:hover,
.mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    border-color: var(--mado-action-primary-border-hover);
    color: var(--mado-action-primary-text);
    box-shadow: 0 16px 30px rgba(6, 191, 181, 0.24);
}

.mado-portal-container .button.mado-scenario-button--blue,
.mado-portal-container button.mado-scenario-button--blue,
.mado-portal-container a.button.mado-scenario-button--blue {
    background: #0088b2;
    border-color: #0088b2;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 136, 178, 0.18);
}

.mado-portal-container .button.mado-scenario-button--blue:hover,
.mado-portal-container button.mado-scenario-button--blue:hover,
.mado-portal-container a.button.mado-scenario-button--blue:hover,
.mado-portal-container .button.mado-scenario-button--blue:focus-visible,
.mado-portal-container button.mado-scenario-button--blue:focus-visible,
.mado-portal-container a.button.mado-scenario-button--blue:focus-visible {
    background: #006f92;
    border-color: #006f92;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(0, 136, 178, 0.24);
}

.mado-portal-container .button.mado-scenario-button--cyan,
.mado-portal-container button.mado-scenario-button--cyan,
.mado-portal-container a.button.mado-scenario-button--cyan {
    background: #0fcac4;
    border-color: #0fcac4;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 202, 196, 0.18);
}

.mado-portal-container .button.mado-scenario-button--cyan:hover,
.mado-portal-container button.mado-scenario-button--cyan:hover,
.mado-portal-container a.button.mado-scenario-button--cyan:hover,
.mado-portal-container .button.mado-scenario-button--cyan:focus-visible,
.mado-portal-container button.mado-scenario-button--cyan:focus-visible,
.mado-portal-container a.button.mado-scenario-button--cyan:focus-visible {
    background: #0aa9a4;
    border-color: #0aa9a4;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(15, 202, 196, 0.24);
}

.mado-portal-container .button.mado-scenario-button--danger,
.mado-portal-container button.mado-scenario-button--danger,
.mado-portal-container a.button.mado-scenario-button--danger {
    background: #ffffff;
    border-color: rgba(220, 38, 38, 0.26);
    color: #ce2c24;
}

.mado-portal-container .button.mado-scenario-button--danger:hover,
.mado-portal-container button.mado-scenario-button--danger:hover,
.mado-portal-container a.button.mado-scenario-button--danger:hover,
.mado-portal-container .button.mado-scenario-button--danger:focus-visible,
.mado-portal-container button.mado-scenario-button--danger:focus-visible,
.mado-portal-container a.button.mado-scenario-button--danger:focus-visible {
    background: #fff1f1;
    border-color: rgba(220, 38, 38, 0.42);
    color: #ce2c24;
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.12);
}

.mado-portal-container .button.mado-scenario-button--compact,
.mado-portal-container button.mado-scenario-button--compact,
.mado-portal-container a.button.mado-scenario-button--compact {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 12px;
}

.mado-portal-container .button.mado-scenario-download-btn svg,
.mado-portal-container button.mado-scenario-download-btn svg,
.mado-portal-container a.button.mado-scenario-download-btn svg,
.mado-portal-container .mado-template-action-icon,
.mado-portal-container .mado-template-action-icon svg,
.mado-portal-container .mado-site-qa-create-btn__icon,
.mado-portal-container .mado-site-qa-create-btn__icon svg,
.mado-portal-container .mado-site-qa-download-csv-btn svg,
.mado-portal-container .mado-site-qa-button-icon,
.mado-portal-container .mado-site-qa-button-icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
}

/* MADO portal shared button variants */
body.mado-portal-account-page .mado-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #eef2f7;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family, "Noto Sans JP", "Noto Sans", sans-serif);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

body.mado-portal-account-page .mado-ui-button:hover,
body.mado-portal-account-page .mado-ui-button:focus-visible {
    background: #e2e8f0;
    background-image: none;
    color: #0f172a;
    outline: none;
}

body.mado-portal-account-page .mado-ui-button--primary {
    background: var(--mado-action-primary-bg);
    border-color: var(--mado-action-primary-border);
    color: var(--mado-action-primary-text);
    box-shadow: 0 14px 28px rgba(6, 191, 181, 0.18);
}

body.mado-portal-account-page .mado-ui-button--primary:hover,
body.mado-portal-account-page .mado-ui-button--primary:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    border-color: var(--mado-action-primary-border-hover);
    color: var(--mado-action-primary-text);
    box-shadow: 0 16px 30px rgba(6, 191, 181, 0.24);
}

body.mado-portal-account-page .mado-ui-button--blue {
    background: #0088b2;
    border-color: #0088b2;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 136, 178, 0.18);
}

body.mado-portal-account-page .mado-ui-button--blue:hover,
body.mado-portal-account-page .mado-ui-button--blue:focus-visible {
    background: #006f92;
    border-color: #006f92;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(0, 136, 178, 0.24);
}

body.mado-portal-account-page .mado-ui-button--ghost {
    border-color: #d7e3ee;
    background: #ffffff;
    color: #334155;
    box-shadow: none;
}

body.mado-portal-account-page .mado-ui-button--ghost:hover,
body.mado-portal-account-page .mado-ui-button--ghost:focus-visible {
    border-color: #b8c9db;
    background: #f8fafc;
    color: #0f172a;
}

body.mado-portal-account-page .mado-ui-button--danger-soft {
    border-color: rgba(206, 44, 36, 0.22);
    background: #ffffff;
    color: #ce2c24;
    box-shadow: none;
}

body.mado-portal-account-page .mado-ui-button--danger-soft:hover,
body.mado-portal-account-page .mado-ui-button--danger-soft:focus-visible {
    border-color: rgba(206, 44, 36, 0.4);
    background: #fff1f1;
    color: #b42318;
}

body.mado-portal-account-page .mado-ui-button svg,
body.mado-portal-account-page .mado-ui-button .mado-site-qa-button-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}



/* MADO shared action button alignment */
body.mado-portal-account-page .mado-portal-container .mado-ui-button,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-download-btn,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-download-btn,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-download-btn,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
    box-shadow: none;
    transform: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button:hover,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button:hover,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button:focus-visible,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green:hover,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-download-btn:hover,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-download-btn:hover,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-download-btn:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-download-btn:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-download-btn:focus-visible,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-download-btn:focus-visible,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger:hover,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    box-shadow: none;
    transform: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--green,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--green,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--green,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-download-btn.mado-scenario-button--green,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-download-btn.mado-scenario-button--green,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-download-btn.mado-scenario-button--green {
    background: var(--mado-action-primary-bg);
    border-color: var(--mado-action-primary-border);
    color: var(--mado-action-primary-text);
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--green:hover,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--green:hover,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--green:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--green:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--green:focus-visible,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--green:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green:hover,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-save-button-green:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-save-button-green:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    border-color: var(--mado-action-primary-border-hover);
    color: var(--mado-action-primary-text);
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--blue,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--blue,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--blue,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--blue {
    background: #0088b2;
    border-color: #0088b2;
    color: #ffffff;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--blue:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--blue:focus-visible,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--blue:hover,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--blue:hover,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--blue:hover,
body.mado-portal-account-page .mado-portal-container .button.mado-scenario-button--blue:focus-visible,
body.mado-portal-account-page .mado-portal-container button.mado-scenario-button--blue:focus-visible,
body.mado-portal-account-page .mado-portal-container a.button.mado-scenario-button--blue:focus-visible {
    background: #006f92;
    border-color: #006f92;
    color: #ffffff;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--ghost,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--outline,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger {
    border-color: #0088b2;
    background: #ffffff;
    color: #00759a;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button--ghost:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--ghost:focus-visible,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--outline:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--outline:focus-visible,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger:hover,
body.mado-portal-account-page .mado-portal-container .mado-scenario-upload-trigger:focus-visible {
    border-color: #006f92;
    background: #f4fbfd;
    color: #006f92;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-container .mado-ui-button svg,
body.mado-portal-account-page .mado-portal-container .mado-ui-button .mado-site-qa-button-icon,
body.mado-portal-account-page .mado-portal-container .mado-ui-button .mado-site-qa-button-icon svg,
body.mado-portal-account-page .mado-portal-container .mado-scenario-button svg,
body.mado-portal-account-page .mado-portal-container .mado-scenario-download-btn svg,
body.mado-portal-account-page .mado-portal-container .mado-site-qa-create-btn__icon,
body.mado-portal-account-page .mado-portal-container .mado-site-qa-create-btn__icon svg,
body.mado-portal-account-page .mado-portal-container .mado-site-qa-download-csv-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}


/* ===== MADO operation shared select/help fixes 20260613 ===== */
body.mado-portal-account-page .mado-portal-container select.mado-ui-select--short {
    width: 96px;
    max-width: 96px;
    min-width: 0;
    min-height: 36px;
    padding: 6px 30px 6px 11px;
    border-radius: 12px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

body.mado-portal-account-page .mado-portal-container select.mado-ui-select--short:focus,
body.mado-portal-account-page .mado-portal-container select.mado-ui-select--short:focus-visible {
    border-color: var(--mado-brand-accent);
    outline: 3px solid var(--mado-brand-accent-ring);
    outline-offset: 0;
}

/*
 * HELP POPOVER VISUAL BALANCE / 共通説明POPの視認性（2026-08-18）
 * - 本文は通常の説明文と同じ濃度・太さに寄せ、POPだけが過度に主張しないようにする。
 * - 14pxは維持し、読みやすさは色と行間で確保する。ページ別CSSへ同じ外観を複製しない。
 */
body .mado-help-chip-popover {
    position: fixed;
    z-index: 2147483200;
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    border: 1px solid #c7e4ec;
    border-radius: 14px;
    background: #ffffff;
    color: #475569;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    font-family: var(--mado-portal-font-family, var(--mado-font-family-base, system-ui, sans-serif));
    font-size: 14px;
    font-weight: 400;
    line-height: 1.72;
    text-align: left;
}

body .mado-help-chip-popover__title {
    margin: 0 0 6px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

body .mado-help-chip-popover__line {
    margin: 0;
    color: #475569;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.72;
}

body .mado-help-chip-popover__line + .mado-help-chip-popover__line {
    margin-top: 4px;
}

body .mado-help-chip-popover__arrow {
    position: fixed;
    z-index: 2147483199;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #c7e4ec;
    transform: rotate(45deg);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.06);
}

body .mado-help-chip-popover__arrow.is-below {
    border-right: 0;
    border-bottom: 0;
}

body .mado-help-chip-popover__arrow.is-above {
    border-left: 0;
    border-top: 0;
}

@media (max-width: 640px) {
    body .mado-help-chip-popover {
        width: min(300px, calc(100vw - 24px));
    }
}
/* ===== /MADO operation shared select/help fixes 20260613 ===== */

/* MADO shared primary / dark action colors */
body.mado-portal-account-page .mado-ui-button--primary,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary {
    background: var(--mado-action-primary-bg);
    border-color: var(--mado-action-primary-border);
    color: var(--mado-action-primary-text);
}

body.mado-portal-account-page .mado-ui-button--primary:hover,
body.mado-portal-account-page .mado-ui-button--primary:focus-visible,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--primary:focus-visible {
    background: var(--mado-action-primary-bg-hover);
    border-color: var(--mado-action-primary-border-hover);
    color: var(--mado-action-primary-text);
}

body.mado-portal-account-page .mado-ui-button--dark,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--dark {
    background: var(--mado-action-dark-bg);
    border-color: var(--mado-action-dark-border);
    color: var(--mado-action-dark-text);
    box-shadow: none;
}

body.mado-portal-account-page .mado-ui-button--dark:hover,
body.mado-portal-account-page .mado-ui-button--dark:focus-visible,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--dark:hover,
body.mado-portal-account-page .mado-portal-container .mado-ui-button--dark:focus-visible {
    background: var(--mado-action-dark-bg-hover);
    border-color: var(--mado-action-dark-border-hover);
    color: var(--mado-action-dark-text);
    box-shadow: none;
}

/* MADO AI SURFACE VISUAL SSOT / AI面表示の共通視覚（2026-07-23）
 * - 大きなAI機能パネル用。白地に近い8〜10%のAI色と16%の枠線だけを共有する。
 * - ページCSSは寸法・配置・結果カードだけを担当し、グラデーションを複製しない。
 * - 動きは共通keyframesを10秒で使用し、prefers-reduced-motionでは停止する。
 */
body .mado-portal-container .mado-ai-surface {
    --mado-ai-surface-gradient: linear-gradient(
        135deg,
        rgba(88, 215, 231, 0.08) 0%,
        rgba(95, 187, 232, 0.07) 34%,
        rgba(122, 101, 200, 0.10) 68%,
        rgba(94, 216, 210, 0.07) 100%
    );
    border-color: rgba(105, 132, 201, 0.16);
    background-color: #ffffff;
    background-image: var(--mado-ai-surface-gradient);
    background-repeat: no-repeat;
    background-size: 260% 260%;
    background-position: 0% 20%;
    animation: mado-ai-action-gradient-flow 10s ease-in-out infinite;
}

/* MADO AI ACTION VISUAL SSOT / AI操作の共通視覚（2026-07-23）
 * - .mado-ai-action is the portal-wide visual marker for an action performed by AI.
 * - Page CSS owns only size/layout; do not copy this gradient or keyframes into feature CSS.
 * - New AI actions may opt in by adding .mado-ai-action to the existing button/link.
 * - The three-color gradient moves slowly so compact "AI" chips and full-width labels
 *   remain recognizable as the same action family.
 * - Remove this block only after every caller has migrated to a replacement shared primitive.
 */
body .mado-portal-container .mado-ai-action {
    --mado-ai-action-gradient: linear-gradient(
        135deg,
        #58d7e7 0%,
        #5fbbe8 28%,
        #7a65c8 58%,
        #5ed8d2 82%,
        #58d7e7 100%
    );
    border-color: transparent;
    background-color: #5fbbe8;
    background-image: var(--mado-ai-action-gradient);
    background-repeat: no-repeat;
    background-size: 260% 260%;
    background-position: 0% 20%;
    color: #ffffff;
    animation: mado-ai-action-gradient-flow 10s ease-in-out infinite;
}

body .mado-portal-container .mado-ai-action:hover:not(:disabled),
body .mado-portal-container .mado-ai-action:focus-visible:not(:disabled) {
    border-color: transparent;
    background-color: #5fbbe8;
    background-image: var(--mado-ai-action-gradient);
    color: #ffffff;
    animation-duration: 10s;
}

body .mado-portal-container .mado-ai-action:focus-visible {
    outline: 2px solid rgba(89, 195, 232, 0.42);
    outline-offset: 2px;
}

body .mado-portal-container .mado-ai-action:disabled,
body .mado-portal-container .mado-ai-action[aria-disabled="true"] {
    animation: none;
    border-color: #cbd5e1;
    background-color: #e2e8f0;
    background-image: none;
    color: #64748b;
    cursor: not-allowed;
}

@keyframes mado-ai-action-gradient-flow {
    0%,
    100% {
        background-position: 0% 20%;
    }

    50% {
        background-position: 100% 80%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mado-portal-container .mado-ai-surface,
    body .mado-portal-container .mado-ai-action {
        animation: none;
        background-position: 50% 50%;
    }
}


/* MADO CHAT NOTIFICATION SETTINGS SSOT (2026-07-29)
 * - This block belongs only to the Chat Settings renderer.
 * - Inquiry-form Web Push and its scope selectors were removed.
 * - The switch reuses the existing .mado-ui-switch family above.
 * - Do not copy these rules into page-specific CSS.
 * - The runtime is public/js/support-web-push.js.
 */
body #mado-chat-design-settings #mado-chat-design-section-panel-notification .mado-chat-design-section-panel__description {
    font-size: 14px;
    line-height: 1.7;
}

body #mado-chat-design-settings .mado-notification-settings {
    display: grid;
    gap: 16px;
    width: 100%;
    color: var(--mado-portal-text, #0f172a);
    font-size: 14px;
    line-height: 1.7;
}

body #mado-chat-design-settings .mado-notification-settings__intro,
body #mado-chat-design-settings .mado-notification-settings__help,
body #mado-chat-design-settings .mado-notification-settings__status {
    margin: 0;
}

body #mado-chat-design-settings .mado-notification-settings__intro {
    padding: 10px 12px;
    border-left: 3px solid var(--mado-brand-accent, #06bfb5);
    border-radius: 0 9px 9px 0;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

body #mado-chat-design-settings .mado-notification-settings__items {
    display: grid;
    gap: 12px;
}

body #mado-chat-design-settings .mado-notification-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-width: 0;
    min-height: 82px;
    padding: 15px 16px;
    border: 1px solid var(--mado-portal-border, #dbe3ee);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
}

body #mado-chat-design-settings .mado-notification-setting-row:hover {
    border-color: #b9c9d9;
    background: #fbfdff;
}

body #mado-chat-design-settings .mado-notification-setting-row:focus-within {
    border-color: var(--mado-brand-accent, #06bfb5);
    box-shadow: 0 0 0 3px var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.16));
}

body #mado-chat-design-settings .mado-notification-setting-row__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body #mado-chat-design-settings .mado-notification-setting-row__copy strong {
    color: var(--mado-portal-text, #0f172a);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

body #mado-chat-design-settings .mado-notification-setting-row__copy > span {
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

body #mado-chat-design-settings .mado-notification-setting-row .mado-ui-switch {
    flex: 0 0 auto;
    align-self: center;
}

body #mado-chat-design-settings .mado-notification-settings.is-disabled .mado-notification-setting-row {
    opacity: 0.55;
    cursor: not-allowed;
}

body #mado-chat-design-settings .mado-notification-settings__status {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

body #mado-chat-design-settings .mado-notification-settings__status::before {
    content: "⚙️";
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}

body #mado-chat-design-settings .mado-notification-settings__status.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

body #mado-chat-design-settings .mado-notification-settings__help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    line-height: 1.75;
}


/*
 * Shared editor category buttons / 編集画面カテゴリーボタン共通正本（2026-08-01）
 * - POP・チャット設定・問い合わせフォームの上部カテゴリーボタンは、この定義だけを使用する。
 * - POPの白背景＋細い枠＋ターコイズ選択色を共通デザインとして採用する。
 * - ニューモーフィズム、ページ別shadow、ページ別active色を各ページCSSへ複製しない。
 * - 各ページCSSは列数・レスポンシブだけを担当する。
 */
body #mado-pop-campaign-page .mado-pop-section-menu__tab,
body #mado-chat-design-settings .mado-chat-design-section-menu__button,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: var(--mado-editor-category-button-min-height, 36px);
    padding: var(--mado-editor-category-button-padding, 5px 9px);
    overflow: visible;
    border: 1px solid #d8e4ef;
    border-radius: var(--mado-editor-category-button-radius, 12px);
    background: #ffffff;
    color: #0f172a;
    box-shadow: none;
    cursor: pointer;
    font-size: var(--mado-editor-category-button-font-size, 13px);
    font-weight: var(--mado-editor-category-button-font-weight, 750);
    line-height: 1.3;
    text-align: center;
    transform: none;
    transition: border-color 150ms ease, background-color 150ms ease,
        color 150ms ease;
}

body #mado-pop-campaign-page .mado-pop-section-menu__tab::before,
body #mado-pop-campaign-page .mado-pop-section-menu__tab::after,
body #mado-chat-design-settings .mado-chat-design-section-menu__button::before,
body #mado-chat-design-settings .mado-chat-design-section-menu__button::after,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button::before,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button::after {
    content: none;
    display: none;
}

body #mado-pop-campaign-page .mado-pop-section-menu__tab:hover,
body #mado-pop-campaign-page .mado-pop-section-menu__tab:focus-visible,
body #mado-chat-design-settings .mado-chat-design-section-menu__button:hover,
body #mado-chat-design-settings .mado-chat-design-section-menu__button:focus-visible,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button:hover,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button:focus-visible {
    border-color: #b8c7d7;
    background: #f8fafc;
    color: #0f172a;
    outline: 0;
    box-shadow: none;
    transform: none;
}

body #mado-pop-campaign-page .mado-pop-section-menu__tab.is-active,
body #mado-pop-campaign-page .mado-pop-section-menu__tab[aria-pressed="true"],
body #mado-pop-campaign-page .mado-pop-section-menu__tab.is-active:hover,
body #mado-pop-campaign-page .mado-pop-section-menu__tab.is-active:focus-visible,
body #mado-chat-design-settings .mado-chat-design-section-menu__button.is-active,
body #mado-chat-design-settings .mado-chat-design-section-menu__button[aria-pressed="true"],
body #mado-chat-design-settings .mado-chat-design-section-menu__button.is-active:hover,
body #mado-chat-design-settings .mado-chat-design-section-menu__button.is-active:focus-visible,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button.is-active,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button[aria-pressed="true"],
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button.is-active:hover,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button.is-active:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: var(--mado-brand-accent-text, #129f9e);
    box-shadow: none;
    transform: none;
}

body #mado-pop-campaign-page .mado-pop-section-menu__tab.is-active:focus-visible,
body #mado-pop-campaign-page .mado-pop-section-menu__tab[aria-pressed="true"]:focus-visible,
body #mado-chat-design-settings .mado-chat-design-section-menu__button.is-active:focus-visible,
body #mado-chat-design-settings .mado-chat-design-section-menu__button[aria-pressed="true"]:focus-visible,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button.is-active:focus-visible,
body #mado-inquiry-page-design .mado-inquiry-design-section-menu__button[aria-pressed="true"]:focus-visible {
    outline: 2px solid var(--mado-brand-accent-text, #129f9e);
    outline-offset: 2px;
}

body .mado-notification-toast-region {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2147483000;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

body .mado-notification-toast {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 15px 17px;
    border: 1px solid rgba(15, 202, 196, 0.34);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    font: inherit;
    text-align: left;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: auto;
}

button.mado-notification-toast {
    cursor: pointer;
}

body .mado-notification-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body .mado-notification-toast__title {
    font-size: 14px;
    line-height: 1.5;
}

body .mado-notification-toast__body {
    color: #475569;
    font-size: 13px;
    line-height: 1.65;
}

@media (max-width: 680px) {
    body #mado-chat-design-settings .mado-notification-setting-row {
        gap: 12px;
        min-height: 0;
        padding: 14px;
    }

    body .mado-notification-toast-region {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    body .mado-notification-toast {
        padding: 14px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mado-notification-toast {
        transition: none;
    }
}

/* MADO SHARED EDITOR FOOTER ACTIONS / 設定画面下部操作の共通正本（2026-07-31）
 * - チャット画面を見本とし、左から「保存」「プレビュー」の順で統一する。
 * - 保存はMADO緑、プレビューは白背景＋グレー枠＋目アイコンとする。
 * - 高さ・角丸・文字サイズ・余白はこの定義を正本とし、ページCSSへ同じ値を複製しない。
 * - POPの公開操作だけは同じ行の右端へ離す。保存・プレビューの動作やREST経路は変更しない。
 * - 新しい設定画面はこの共通classを使い、ページ固有のfooter button寸法を追加しない。
 * - 2026-07-31: 基礎ruleの透明borderより状態別borderが確実に勝つよう、状態selectorにもactions＋actionを含める。
 * - 削除時は対象画面のmado-editor-footer-* classと、このコメントを同じ作業で削除する。
 */
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    padding: 0;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--save {
    border-color: var(--mado-action-primary-border);
    background: var(--mado-action-primary-bg);
    color: var(--mado-action-primary-text);
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--save:hover,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--save:focus-visible {
    border-color: var(--mado-action-primary-border-hover);
    background: var(--mado-action-primary-bg-hover);
    color: var(--mado-action-primary-text);
    outline: 0;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--preview,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--auxiliary {
    border-color: #94a3b8;
    background: #ffffff;
    color: #0f172a;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--preview:hover,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--preview:focus-visible,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--auxiliary:hover,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-actions .mado-editor-footer-action.mado-editor-footer-action--auxiliary:focus-visible {
    border-color: var(--mado-brand-accent);
    background: #f3fffd;
    color: #0f766e;
    outline: 0;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--save {
    order: 10;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--preview {
    order: 20;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--auxiliary {
    order: 30;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle] {
    order: 40;
    margin-left: auto;
    border-color: #5b5e68;
    background: #5b5e68;
    color: #ffffff;
    box-shadow: none;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle]:hover,
body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle]:focus-visible {
    border-color: #4b5563;
    background: #4b5563;
    color: #ffffff;
    outline: 0;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle].is-published,
body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle][aria-pressed="true"] {
    border-color: var(--mado-selection-accent);
    background: var(--mado-selection-accent);
    color: #ffffff;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-action :is(.dashicons, .mado-inquiry-design-action-icon, .mado-pop-campaign-button__icon) {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    font-size: 18px;
    line-height: 18px;
}

body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-action:disabled,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-action.is-disabled,
body.mado-portal-account-page :is(
    #mado-chat-design-settings,
    #mado-inquiry-page-design,
    #mado-pop-campaign-page
) .mado-editor-footer-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-pop-campaign-editor__save-status {
    order: 50;
    flex: 1 0 100%;
    min-width: 0;
}

body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-pop-campaign-editor__save-status:empty {
    display: none;
}

@media (max-width: 720px) {
    body.mado-portal-account-page :is(
        #mado-chat-design-settings,
        #mado-inquiry-page-design,
        #mado-pop-campaign-page
    ) .mado-editor-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.mado-portal-account-page :is(
        #mado-chat-design-settings,
        #mado-inquiry-page-design,
        #mado-pop-campaign-page
    ) .mado-editor-footer-actions .mado-editor-footer-action {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-editor-footer-action--publish[data-mado-pop-publication-toggle] {
        margin-top: 8px;
        margin-left: 0;
    }

    body.mado-portal-account-page #mado-pop-campaign-page .mado-editor-footer-actions .mado-pop-campaign-editor__save-status {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .mado-design-editor .mado-ui-settings-group {
        padding-inline: 14px;
    }

    .mado-design-editor .mado-ui-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-design-editor .mado-ui-form-grid > .mado-ui-field,
    .mado-design-editor .mado-ui-form-grid > .mado-ui-form-cell,
    .mado-design-editor .mado-ui-form-grid > .mado-ui-card {
        width: min(100%, var(--mado-ui-form-cell-width));
    }

    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field,
    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell > .mado-ui-field {
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field > .mado-ui-field__label,
    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-field > .mado-ui-field__label-row,
    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell > .mado-ui-field > .mado-ui-field__label,
    .mado-design-editor .mado-ui-form-grid--aligned-controls > .mado-ui-form-cell > .mado-ui-field > .mado-ui-field__label-row {
        justify-self: start;
        text-align: left;
        white-space: normal;
    }
}