/**
 * MADO RESPONSIBILITY INDEX / 正本・責任境界
 *
 * STATUS / 状態:
 * - 現役候補のProvider AI管理共通CSS。実画面で読込を確認済み。
 *
 * ROLE / 役割:
 * - AI学習データを中心に、AIの答え方・画像/PDF/図面・AI利用量の共通panel、nav、form、metric、responsive表示を担当する。
 *
 * NON-ROLE / 非担当:
 * - 公開Widget、POP編集、Q&A管理、保存・REST・DB処理は担当しない。
 *
 * SSOT / 正本:
 * - AI管理画面群の共通layout/styleはこのCSS。enqueueは ai-management-common.php 等から行う。
 *
 * CONNECTIONS / 接続:
 * - mado-portal-shell--action-crawl / ai-answer-settings と各 #mado-* section markup。
 *
 * CHANGE RULE / 変更ルール:
 * - 画面ごとの同一selector複製、末尾override、public/widget.cssへの混在を避ける。共通UI変更はこのファイルで行う。
 *
 * COMPATIBILITY / 互換:
 * - 複数AI管理画面を同じCSSで支えるため、selector scopeを画面root配下に限定する。
 *
 * DELETION CONDITION / 削除条件:
 * - 全AI管理画面を別CSS正本へ移行し、enqueueとmarkup selectorを同時に更新した場合のみ。
 *
 * AUDIT / 確認記録:
 * - 判断日: 2026-08-06
 * - コメント追加前SHA-256: e794131ee6f20e20f4e2e2954e196df5c91c836d3733d5ad6d4421599939e29d
 * - コメント追加前サイズ: 66853 bytes
 * - 実装本体は変更せず、責任境界コメントだけを追加する。
 * - UTF-8、原則BOMなし。下に既存の詳細契約がある場合は、その契約も維持する。
 */
/* MADO AI learning data page */

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-portal-shell__content-frame.is-standard,
body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(
        1140px
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
    );
    margin: 0 auto;
    padding-left: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
    padding-right: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
}

.mado-portal-shell--action-crawl .mado-portal-container,
.mado-portal-shell--action-crawl #mado-crawl,
.mado-portal-shell--action-crawl #mado-crawl * {
    box-sizing: border-box;
}

.mado-portal-shell--action-crawl .mado-portal-container,
.mado-portal-shell--action-crawl #mado-crawl {
    width: 100%;
    min-width: 0;
}


.mado-portal-shell--action-crawl #mado-crawl .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mado-portal-shell--action-crawl #mado-crawl button:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl a:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl input:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl textarea:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl select:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl summary:focus-visible,
.mado-portal-shell--action-crawl #mado-crawl [tabindex="0"]:focus-visible {
    outline: 3px solid rgba(21, 169, 186, 0.34);
    outline-offset: 2px;
}

.mado-crawl-usage-alert {
    max-width: 760px;
    padding: 16px 18px;
    border: 1px solid #d8e4ef;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.7;
}

.mado-crawl-usage-alert--warning {
    border-color: #f1c36d;
    background: #fffaf0;
}

.mado-crawl-usage-alert--error {
    border-color: #f0a3a3;
    background: #fff4f4;
    color: #8f1d1d;
}

.mado-crawl-usage-alert-actions {
    margin-top: 12px;
}

.mado-crawl-usage-panel {
    --mado-crawl-text: #10202f;
    --mado-crawl-muted: #64748b;
    --mado-crawl-soft: #f6f9fc;
    --mado-crawl-border: #d9e4ef;
    --mado-crawl-border-strong: #b9cadb;
    --mado-crawl-accent: #15a9ba;
    --mado-crawl-accent-dark: #0b6870;
    --mado-crawl-accent-soft: #e9f9fb;
    --mado-crawl-success: #0f8a68;
    --mado-crawl-warning: #b56a00;
    --mado-crawl-danger: #b42318;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(20px, 2.5vw, 32px);
    border: 1px solid var(--mado-crawl-border);
    border-radius: 22px;
    background: #ffffff;
    color: var(--mado-crawl-text);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.mado-crawl-usage-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 22px;
}

.mado-crawl-usage-hero--single {
    grid-template-columns: minmax(0, 1fr);
}

.mado-crawl-usage-hero__copy,
.mado-crawl-usage-scope-note {
    min-width: 0;
}

.mado-crawl-usage-eyebrow {
    margin-bottom: 8px;
    color: var(--mado-crawl-accent-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mado-crawl-usage-title {
    margin: 0;
    color: #0f172a;
    line-height: 1.5;
}

.mado-crawl-usage-intro {
    max-width: 780px;
    margin: 12px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
}

/* AI学習データ: H1下の説明を見出し側へ寄せる。 */
.mado-portal-shell--action-crawl .mado-crawl-usage-intro {
    margin-top: 6px;
}

/* AIの答え方: H1下の説明をタイトル側へ少し寄せる。 */
#mado-crawl.mado-crawl-view-answer .mado-crawl-usage-intro {
    margin-top: 2px;
}

.mado-crawl-usage-scope-note {
    display: grid;
    gap: 7px;
    align-content: center;
    padding: 18px;
    border: 1px solid #cce8ed;
    border-radius: 16px;
    background: linear-gradient(145deg, #effcff 0%, #ffffff 78%);
}

.mado-crawl-usage-scope-note strong {
    color: #0b6870;
    font-size: 13px;
}

.mado-crawl-usage-scope-note span {
    color: #475569;
    font-size: 12px;
    line-height: 1.7;
}

.mado-crawl-usage-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.mado-crawl-usage-metric {
    display: grid;
    gap: 5px;
    align-content: start;
    min-width: 0;
    min-height: 132px;
    padding: 16px;
    border: 1px solid var(--mado-crawl-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.mado-crawl-usage-metric.is-warning {
    border-color: #f1c36d;
    background: #fffaf0;
}

.mado-crawl-usage-metric.is-processing {
    border-color: #8ad8e1;
    background: #f0fcfd;
}

.mado-crawl-usage-metric__label {
    color: var(--mado-crawl-muted);
    font-size: 12px;
    font-weight: 700;
}

.mado-crawl-usage-metric__value {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.2;
}

.mado-crawl-usage-metric__value small {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 700;
}

.mado-crawl-usage-metric__note {
    color: var(--mado-crawl-muted);
    font-size: 11px;
    line-height: 1.55;
}


.mado-crawl-usage-result:empty {
    display: none;
}

.mado-crawl-usage-result {
    margin-bottom: 16px;
}

.mado-crawl-usage-result__message {
    padding: 13px 15px;
    border: 1px solid var(--mado-crawl-border);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
}

.mado-crawl-usage-result__message.is-success {
    border-color: #8fd6bf;
    background: #effcf7;
    color: #0b6b50;
}

.mado-crawl-usage-result__message.is-error {
    border-color: #efaaaa;
    background: #fff4f4;
    color: #982020;
}

.mado-crawl-usage-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}


.mado-crawl-usage-section {
    min-width: 0;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--mado-crawl-border);
    border-radius: 18px;
    background: var(--mado-crawl-soft);
}

.mado-crawl-usage-section--pages,
.mado-crawl-usage-section--manual {
    min-height: 100%;
}

.mado-crawl-usage-section--diff {
    margin-top: 16px;
    background: #ffffff;
}

.mado-crawl-usage-section__head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
}

.mado-crawl-usage-section__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #8ad8e1;
    border-radius: 11px;
    background: #e9f9fb;
    color: var(--mado-crawl-accent-dark);
    font-size: 14px;
    font-weight: 900;
}

.mado-crawl-usage-section-title {
    min-width: 0;
    margin: 0;
    color: #0f172a;
    line-height: 1.45;
}

/* AI学習データ: 見出し横のヘルプチップ。シナリオ画面と同じ丸型表示にする。 */
.mado-crawl-usage-section-title-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.mado-crawl-usage-section-title-row .mado-crawl-usage-section-title {
    flex: 0 1 auto;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 0 0 0 2px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0f7a5a;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    pointer-events: auto;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip::before,
body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip::after {
    content: none;
    box-shadow: none;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip .mado-site-qa__help-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid #72c79c;
    border-radius: 999px;
    background: #e8fbf1;
    color: #15803d;
    box-shadow: 0 6px 14px rgba(21, 128, 61, 0.12);
    font-family: var(--mado-portal-font-family, "Noto Sans JP", "Noto Sans", sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    pointer-events: 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;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip:hover .mado-site-qa__help-chip-mark,
body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip:focus-visible .mado-site-qa__help-chip-mark,
body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip.is-open .mado-site-qa__help-chip-mark {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip:focus-visible {
    outline: none;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip:focus-visible .mado-site-qa__help-chip-mark {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.mado-crawl-usage-section-description {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.mado-crawl-usage-section-note {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.mado-crawl-usage-section-note--spaced {
    margin-top: 0;
    margin-bottom: 10px;
}

/* AI学習データ: 指定された補足文だけをさらに1px拡大する。 */
#mado-crawl-automation-help,
#mado-crawl-diff-tools .mado-crawl-usage-section-note--spaced {
    font-size: 14px;
}

.mado-crawl-usage-section--media .mado-crawl-usage-section-description {
    font-size: 14px;
}

.mado-crawl-usage-section__status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}

.mado-crawl-usage-section__status-label {
    color: #64748b;
    font-size: 12px;
}

.mado-crawl-usage-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #c9d8e5;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    line-height: 1.3;
}

.mado-crawl-usage-field-label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.mado-crawl-usage-textarea {
    display: block;
    width: 100%;
    min-height: 146px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid #c9d8e5;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.65;
}

.mado-crawl-usage-textarea:focus {
    border-color: var(--mado-crawl-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(21, 169, 186, 0.14);
}

.mado-crawl-usage-actions {
    margin-top: 12px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #182333;
    border-radius: 11px;
    background: #ffffff;
    background-image: none;
    color: #182333;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    text-shadow: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button:hover {
    border-color: #0f172a;
    background: #f8fafc;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.09);
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button:active,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button:active,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12);
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button:focus-visible,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button:focus-visible,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button:focus-visible {
    outline: 3px solid rgba(21, 169, 186, 0.18);
    outline-offset: 2px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button--primary.button,
body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl-history-load.button {
    border-color: #2eb2c1;
    background: #e7f8fa;
    color: #0b6870;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button--primary.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl-history-load.button:hover {
    border-color: #2197a5;
    background: #dff4f7;
    color: #075861;
}

/*
 * AI ANSWER SAVE BUTTON / AIの答え方「設定を保存」（2026-08-06）
 * - The visual contract is the AI learning-data primary button above.
 * - Scope is limited to the one save area on the AI-answer page.
 * - Do not use this selector for unrelated billing links or AI-usage controls.
 */
body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-ai-answer-settings__save-scope .mado-crawl-usage-button.button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #2eb2c1;
    border-radius: 11px;
    background: #e7f8fa;
    background-image: none;
    color: #0b6870;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-ai-answer-settings__save-scope .mado-crawl-usage-button.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-ai-answer-settings__save-scope .mado-crawl-usage-button.button:focus-visible {
    border-color: #2197a5;
    background: #dff4f7;
    color: #075861;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.09);
}

body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-ai-answer-settings__save-scope .mado-crawl-usage-button.button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12);
}

body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-ai-answer-settings__save-scope .mado-crawl-usage-button.button:focus-visible {
    outline: 3px solid rgba(21, 169, 186, 0.18);
    outline-offset: 2px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button:disabled,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button:disabled,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button:disabled {
    border-color: #d6dee7;
    background: #eef2f6;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.mado-crawl-usage-candidates {
    min-width: 0;
    margin-top: 14px;
}

.mado-crawl-usage-candidates:empty {
    display: none;
}

.mado-candidate-empty,
.mado-candidate-notice {
    border: 1px solid #cbdbe7;
    border-radius: 12px;
    background: #f8fbfd;
    color: #334155;
}

.mado-candidate-empty {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
}

.mado-candidate-empty.is-loading {
    border-color: #a9dce1;
    background: #effbfc;
    color: #0b6870;
}

.mado-candidate-empty.is-error,
.mado-candidate-notice.is-error {
    border-color: #f4b8b8;
    background: #fff5f5;
    color: #9f1d1d;
}

.mado-candidate-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d9e4ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.mado-candidate-notice {
    margin: 14px 14px 0;
    padding: 12px 14px;
}

.mado-candidate-notice.is-success {
    border-color: #9fd9bf;
    background: #f0fbf6;
    color: #17613e;
}

.mado-candidate-notice.is-warning {
    border-color: #f0cc7b;
    background: #fff9e8;
    color: #7c4a03;
}

.mado-candidate-notice__title {
    display: block;
    font-size: 13px;
    line-height: 1.5;
}

.mado-candidate-notice__message {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.65;
}

.mado-candidate-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #e5edf4;
    background: #fbfdff;
}

.mado-candidate-panel__head-copy {
    min-width: 0;
}

.mado-candidate-panel__title {
    margin: 0;
    color: #1e293b;
    font-size: 17px;
    line-height: 1.45;
}

.mado-candidate-panel__description {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.mado-candidate-panel__selection {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.mado-candidate-panel__selection strong {
    color: #0b6870;
    font-size: 14px;
}

.mado-candidate-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px 0;
}

.mado-candidate-summary__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #d8e2eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    line-height: 1.4;
}

.mado-candidate-summary__item.is-new {
    border-color: #a7d9c8;
    background: #effaf6;
    color: #17613e;
}

.mado-candidate-summary__item.is-updated {
    border-color: #f0c98f;
    background: #fff8ed;
    color: #8a4b08;
}

.mado-candidate-summary__item.is-processing {
    border-color: #b8d2f3;
    background: #f1f7fe;
    color: #245da5;
}

.mado-candidate-summary__item.is-failed {
    border-color: #efb6b6;
    background: #fff4f4;
    color: #a12828;
}

.mado-candidate-summary__value {
    font-size: 12px;
}

.mado-candidate-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-toolbar__button.button {
    min-height: 34px;
    padding: 6px 12px;
    border-color: #cbd8e3;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-toolbar__button.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-toolbar__button.button:focus-visible {
    border-color: #8fcbd1;
    background: #f1fbfc;
    color: #0b6870;
}

.mado-candidate-toolbar__upload {
    position: relative;
    cursor: pointer;
}

.mado-candidate-toolbar__upload input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mado-candidate-table-wrap {
    max-height: 520px;
    margin: 0 16px;
    overflow: auto;
    border: 1px solid #d9e4ef;
    border-radius: 12px;
    background: #ffffff;
}

.mado-candidate-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 12px;
}

.mado-candidate-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f5f9;
}

.mado-candidate-table th,
.mado-candidate-table td {
    padding: 10px;
    border-bottom: 1px solid #e7eef5;
    text-align: left;
    vertical-align: top;
}

.mado-candidate-table th {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.mado-candidate-table th.is-check,
.mado-candidate-cell.is-check {
    width: 54px;
    text-align: center;
}

.mado-candidate-table th.is-date,
.mado-candidate-cell.is-date {
    width: 132px;
    text-align: center;
}

.mado-candidate-table th.is-recommended,
.mado-candidate-cell.is-recommended {
    width: 64px;
    text-align: center;
}

.mado-candidate-table th.is-reason,
.mado-candidate-cell.is-reason {
    width: 120px;
}

.mado-candidate-cell.is-date,
.mado-candidate-cell.is-reason {
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}

.mado-candidate-cell.is-recommended {
    color: #7a4b00;
    font-size: 18px;
    line-height: 1.2;
}

.mado-candidate-row {
    background: #ffffff;
    transition: background-color 0.16s ease, opacity 0.16s ease;
}

.mado-candidate-row:hover {
    background: #f8fcfd;
}

.mado-candidate-row.is-muted {
    background: #f8fafc;
    opacity: 0.64;
}

.mado-candidate-row.is-muted:hover {
    opacity: 0.82;
}

.mado-candidate-row.is-selected {
    background: #eef9fb;
    opacity: 1;
}

.mado-candidate-row.is-processing {
    background: #f3f8fe;
}

.mado-candidate-row.is-failed {
    background: #fff9f9;
}

.mado-candidate-title {
    margin-bottom: 4px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mado-candidate-url {
    display: block;
    color: #287c92;
    font-size: 11px;
    line-height: 1.55;
    text-decoration: none;
    word-break: break-all;
}

.mado-candidate-url:hover,
.mado-candidate-url:focus-visible {
    color: #075861;
    text-decoration: underline;
}

.mado-candidate-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7px;
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}

.mado-candidate-status__badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid #d4dee8;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    line-height: 1.35;
}

.mado-candidate-status__badge.is-new {
    border-color: #a7d9c8;
    background: #effaf6;
    color: #17613e;
}

.mado-candidate-status__badge.is-updated {
    border-color: #efc48a;
    background: #fff7eb;
    color: #8a4b08;
}

.mado-candidate-status__badge.is-processing {
    border-color: #b7d0ef;
    background: #eff6ff;
    color: #245da5;
}

.mado-candidate-status__badge.is-failed {
    border-color: #efb6b6;
    background: #fff3f3;
    color: #a12828;
}

.mado-candidate-status__badge.is-duplicate {
    border-color: #d4c2ef;
    background: #f8f4fd;
    color: #68409a;
}

.mado-candidate-status__badge.is-excluded {
    border-color: #d4dae1;
    background: #f3f5f7;
    color: #66717f;
}

.mado-candidate-status__details,
.mado-candidate-status__duplicate {
    overflow-wrap: anywhere;
}

.mado-candidate-status__duplicate {
    flex-basis: 100%;
    color: #7c6a98;
}

.mado-candidate-excluded {
    margin: 12px 16px 0;
    border-top: 1px solid #e4ebf2;
    padding-top: 10px;
}

.mado-candidate-excluded__summary {
    color: #98630b;
    font-size: 12px;
    cursor: pointer;
}

.mado-candidate-excluded__list {
    max-height: 200px;
    margin: 8px 0 0;
    padding: 10px 10px 10px 28px;
    overflow: auto;
    border: 1px solid #f0d59d;
    border-radius: 10px;
    background: #fffaf0;
    color: #79560f;
    font-size: 11px;
    line-height: 1.65;
}

.mado-candidate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions .button {
    min-height: 42px;
    padding: 9px 22px;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions__start.button {
    border-color: #3e7f86;
    background: #4f8d94;
    color: #ffffff;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions__start.button:hover,
body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions__start.button:focus-visible {
    border-color: #2f6f76;
    background: #3e7f86;
    color: #ffffff;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions .button:disabled {
    border-color: #d5dee7;
    background: #edf1f5;
    color: #98a4b2;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 720px) {
    .mado-candidate-panel__head {
        display: grid;
        gap: 8px;
    }

    .mado-candidate-panel__selection {
        white-space: normal;
    }

    .mado-candidate-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-toolbar__button.button {
        width: 100%;
    }

    .mado-candidate-table-wrap {
        margin-inline: 10px;
    }

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

    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-candidate-actions .button {
        width: 100%;
    }
}

.mado-crawl-usage-diff-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.mado-crawl-usage-diff-meta__item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce6ef;
    border-radius: 12px;
    background: #f8fbfd;
}

.mado-crawl-usage-diff-meta__item span {
    color: #64748b;
    font-size: 12px;
}

.mado-crawl-usage-diff-meta__item strong {
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 14px;
}

.mado-crawl-usage-notice-slot:empty {
    display: none;
}

.mado-crawl-usage-notice-slot,
.mado-crawl-usage-details,
.mado-crawl-usage-detail-body {
    margin-top: 12px;
}

.mado-crawl-usage-details {
    border-top: 1px solid #e3ebf2;
    padding-top: 12px;
}

.mado-crawl-usage-summary-toggle {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.mado-crawl-usage-detail-body {
    padding: 14px;
    border: 1px solid #dce6ef;
    border-radius: 14px;
    background: #f8fbfd;
}

.mado-crawl-usage-history {
    margin-top: 16px;
    border: 1px solid var(--mado-crawl-border);
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.mado-crawl-usage-history-head {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mado-crawl-border);
    background: #f8fbfd;
    color: #0f172a;
}

.mado-crawl-usage-history-head__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mado-crawl-usage-history-head__copy h3 {
    margin: 0;
    font-size: 16px;
}

.mado-crawl-usage-history-head__copy small {
    display: block;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.mado-crawl-usage-history-body {
    padding: 18px 20px 20px;
}

.mado-crawl-usage-history-load-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 18px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #bfe3e8;
    border-radius: 14px;
    background: #f0fbfc;
}

.mado-crawl-usage-history-load-panel p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.65;
}

.mado-crawl-usage-history-data[hidden] {
    display: none;
}

.mado-crawl-usage-history-help {
    margin-bottom: 12px;
    border: 1px solid #f1d49a;
    border-radius: 12px;
    background: #fffaf0;
}

.mado-crawl-usage-history-help > summary {
    padding: 11px 13px;
    color: #7a4b00;
    font-size: 12px;
    font-weight: 800;
}

.mado-crawl-usage-history-notice {
    padding: 0 13px 12px;
    color: #7a4b00;
    font-size: 12px;
    line-height: 1.65;
}

.mado-crawl-usage-history-note-list {
    margin: 0;
    padding-left: 20px;
}

.mado-crawl-usage-history-note-list li + li {
    margin-top: 5px;
}

.mado-crawl-usage-history-meta {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3f7fa;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.mado-crawl-usage-history-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    align-items: center;
    margin-bottom: 12px;
}

.mado-crawl-usage-history-filter-label {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 36px;
    color: #334155;
    font-size: 12px;
    cursor: pointer;
}

.mado-crawl-usage-filter-checkbox,
.mado-history-check {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mado-crawl-accent);
}

.mado-crawl-usage-history-toolbar,
.mado-crawl-usage-history-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-delete-button.button {
    border-color: #d59a95;
    background: #fffafa;
    color: #9d2b23;
}

body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-delete-button.button:hover {
    border-color: #c97069;
    background: #fff1f0;
    color: #8a1f18;
}

.mado-crawl-usage-history-selected-count,
.mado-crawl-usage-polling-status {
    color: #64748b;
    font-size: 11px;
}

.mado-crawl-usage-history-list {
    max-height: 440px;
    overflow: auto;
    border: 1px solid #dce6ef;
    border-radius: 14px;
    background: #ffffff;
}

.mado-crawl-usage-history-empty {
    padding: 18px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.mado-crawl-history-row {
    padding: 12px;
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
}

.mado-crawl-history-row:last-child {
    border-bottom: 0;
}

.mado-crawl-history-row.is-not-counted {
    background: #fffaf0;
}

.mado-crawl-history-row.is-missing {
    background: #f5f7fa;
    opacity: 0.68;
}

.mado-crawl-history-row.is-protected {
    background: #fffdf7;
}

.mado-crawl-history-row__layout {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.mado-crawl-history-row__content {
    min-width: 0;
}

.mado-crawl-history-row__title {
    margin-bottom: 4px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-crawl-history-row__title a {
    color: #0b6870;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.mado-crawl-history-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.mado-crawl-history-row__url {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mado-crawl-history-row__meta-item.is-error {
    color: #b42318;
    font-weight: 700;
}

.mado-crawl-history-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    vertical-align: middle;
}

.mado-crawl-history-badge.is-not-counted,
.mado-crawl-history-badge.is-protected {
    background: #fff2d8;
    color: #9a5b00;
}

.mado-crawl-usage-history-footer {
    margin-top: 12px;
}

.mado-crawl-usage-history-link {
    appearance: none;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #0b7180;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mado-crawl-usage-footnote {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
}


.mado-crawl-usage-metric.is-credit {
    border-color: #a9d9d0;
    background: #f1fbf8;
}

.mado-crawl-usage-metric__value--text {
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.35;
}

.mado-ai-draft-notice,
.mado-ai-credit-explanation {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #f0cf8d;
    border-radius: 14px;
    background: #fffaf0;
    color: #744900;
    font-size: 12px;
    line-height: 1.7;
}

.mado-ai-credit-explanation {
    border-color: #b9dfe5;
    background: #f2fbfd;
    color: #315965;
}

.mado-ai-management-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px;
    border: 1px solid var(--mado-crawl-border);
    border-radius: 14px;
    background: #f8fbfd;
}

.mado-ai-management-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid #cddbe7;
    border-radius: 999px;
    background: #ffffff;
    color: #173244;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.mado-ai-management-nav a:hover,
.mado-ai-management-nav a:focus-visible {
    border-color: #58bac5;
    background: #ecfafb;
    color: #075f68;
    outline: 0;
}

.mado-ai-management-section {
    scroll-margin-top: 24px;
    margin-top: 22px;
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--mado-crawl-border);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
}

.mado-ai-management-section:first-of-type {
    margin-top: 0;
}

.mado-ai-management-section__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.mado-ai-management-section__head h2,
.mado-ai-management-section__head h3 {
    margin: 4px 0 0;
    color: #0f172a;
}

.mado-ai-management-section__head p {
    max-width: 820px;
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.75;
}

/* AIの答え方: 指定された説明文を1px拡大する。 */
#mado-ai-answer-description {
    font-size: 14px;
}

/* AI学習データ: 節番号を外し、タイトルと状態チップを同じ行に置く。 */
.mado-ai-management-section__head--learning {
    display: block;
}

.mado-ai-management-section__head--learning .mado-ai-management-section__head-copy {
    min-width: 0;
}

.mado-ai-management-section__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.mado-ai-management-section__head--learning .mado-ai-management-section__title-row h2 {
    min-width: 0;
    margin: 0;
}

.mado-ai-management-section__head--learning .mado-ai-status-chip {
    flex: 0 0 auto;
}

.mado-ai-management-section__eyebrow {
    color: #0b7180;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.mado-ai-status-chip,
.mado-ai-privacy-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #9dd7c7;
    border-radius: 999px;
    background: #effcf7;
    color: #0d7657;
    font-size: 11px;
    font-weight: 800;
}

.mado-ai-status-chip.is-draft,
.mado-ai-privacy-chip {
    border-color: #efcf94;
    background: #fff9eb;
    color: #8a5700;
}

.mado-ai-learning-policy-grid,
.mado-ai-usage-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.mado-ai-policy-card,
.mado-ai-usage-summary > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #dce7ef;
    border-radius: 14px;
    background: #f8fbfd;
}

/* AI学習データ: 4枚の方針カード内で見出し・太字・説明文の開始位置を揃える。 */
.mado-ai-policy-card {
    grid-template-rows: max-content max-content max-content;
    align-content: start;
}

.mado-ai-policy-card__title {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-ai-usage-summary span {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-ai-policy-card strong {
    color: #173244;
    font-size: 15px;
    line-height: 1.5;
}

.mado-ai-usage-summary strong {
    color: #173244;
    font-size: 13px;
    line-height: 1.5;
}

.mado-ai-policy-card p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

/*
 * SITE PROFILE SUMMARY UI / AIが理解したこのサイト（2026-08-06）
 * - Markup is owned by includes/portal/crawl-usage-page.php.
 * - Save/generate behavior is owned by public/js/crawl-site-profile.js and 005.
 * - Keep this within the AI learning page; do not copy it into public Widget CSS.
 */
.mado-crawl-site-profile {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
    padding: clamp(18px, 2.2vw, 24px);
    border: 1px solid #b8dce4;
    border-radius: 18px;
    background: linear-gradient(145deg, #f2fcfe 0%, #ffffff 82%);
}

.mado-crawl-site-profile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mado-crawl-site-profile__head > div {
    min-width: 0;
}

.mado-crawl-site-profile__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #0b7180;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.mado-crawl-site-profile__head h3 {
    margin: 0;
    color: #10202f;
    font-size: 18px;
    line-height: 1.5;
}

.mado-crawl-site-profile__description,
.mado-crawl-site-profile__status,
.mado-crawl-site-profile__notice {
    margin: 0;
    color: #526578;
    font-size: 13px;
    line-height: 1.75;
}

.mado-crawl-site-profile__field {
    display: grid;
    gap: 8px;
    color: #243b4d;
    font-size: 13px;
    font-weight: 800;
}

.mado-crawl-site-profile__field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    padding: 14px 15px;
    border: 1px solid #b9cadb;
    border-radius: 13px;
    background: #ffffff;
    color: #10202f;
    font: inherit;
    font-weight: 400;
    line-height: 1.75;
    resize: vertical;
}

.mado-crawl-site-profile__field textarea:disabled {
    background: #f3f6f8;
    color: #718096;
}

.mado-crawl-site-profile__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mado-crawl-site-profile__actions .button {
    min-height: 44px;
    margin: 0;
}

.mado-crawl-site-profile__status[data-state="error"] {
    color: #a23a28;
    font-weight: 700;
}

.mado-crawl-site-profile__status[data-state="dirty"],
.mado-crawl-site-profile__status[data-state="review"],
.mado-crawl-site-profile__status[data-state="update"] {
    color: #8a5700;
    font-weight: 700;
}

.mado-crawl-site-profile__notice {
    padding: 10px 12px;
    border: 1px solid #efcf94;
    border-radius: 10px;
    background: #fff9eb;
    color: #7a4c00;
}

.mado-crawl-site-profile .mado-ai-status-chip.is-ready {
    border-color: #9dd7c7;
    background: #effcf7;
    color: #0d7657;
}

.mado-crawl-site-profile .mado-ai-status-chip.is-saving {
    border-color: #acd9e3;
    background: #eefbfe;
    color: #0b7180;
}

.mado-crawl-site-profile .mado-ai-status-chip.is-update {
    border-color: #efcf94;
    background: #fff9eb;
    color: #8a5700;
}

.mado-crawl-site-profile .mado-ai-status-chip.is-error {
    border-color: #f0a3a3;
    background: #fff4f4;
    color: #9b2c2c;
}

.mado-ai-base-prompt-note {
    display: grid;
    gap: 5px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border: 1px solid #b9dfe5;
    border-radius: 14px;
    background: #f2fbfd;
    color: #315965;
}

.mado-ai-base-prompt-note .mado-ai-note-title {
    color: #0b6870;
}

.mado-ai-base-prompt-note p,
.mado-ai-budget-settings p {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
}


#mado-ai-answer-section .mado-ai-base-prompt-note p {
    font-size: 14px;
}

.mado-ai-settings-grid,
.mado-ai-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mado-ai-setting-card {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid #dce7ef;
    border-radius: 15px;
    background: #fbfdff;
}

.mado-ai-setting-card--wide {
    grid-column: 1 / -1;
}

#mado-ai-answer-section .mado-ai-setting-card__title {
    margin: 0 0 8px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#mado-ai-answer-section .mado-ai-note-title {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.mado-ai-setting-card legend,
.mado-ai-setting-label,
.mado-ai-screenshot-grid label > span,
.mado-ai-upload-field > span {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 900;
}

.mado-ai-setting-help {
    margin: 0 0 12px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.65;
}

/* AIの答え方: 指定説明文の文字サイズ調整。 */
#mado-ai-answer-section #mado-ai-detail-help,
#mado-ai-answer-section #mado-ai-audience-help {
    font-size: 12px;
}

/* AIの答え方: 話し方の導入文だけ1px拡大する。 */
#mado-ai-answer-section #mado-ai-tone-help {
    font-size: 13px;
}

#mado-ai-answer-section #mado-ai-length-help,
#mado-ai-answer-section #mado-ai-custom-request-help {
    font-size: 13px;
}

/* AI学習データ: 自動クロール設定をPCでは2カラム、狭い画面では1カラムにする。 */
#mado-crawl-automation-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 36px);
    row-gap: 14px;
    align-items: start;
}

#mado-crawl-automation-form .mado-crawl-automation-group {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    justify-self: stretch;
    text-align: left;
}

#mado-crawl-automation-form > .mado-crawl-usage-actions,
#mado-crawl-automation-form > #mado-crawl-automation-help {
    grid-column: 1 / -1;
}

/* AI学習データ: 自動確認設定の保存ボタンを右端へそろえる。 */
#mado-crawl-automation-form > .mado-crawl-usage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 12px;
}

#mado-crawl-automation-status {
    order: 1;
    margin-right: auto;
}

#mado-crawl-automation-save.button {
    order: 2;
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
}

/* AI学習データ: 自動クロール設定内の見出しと選択肢を読みやすくする。 */
#mado-crawl-automation-form fieldset legend {
    font-size: 14px;
}

#mado-crawl-automation-form .mado-crawl-automation-mode-legend {
    font-size: 15px;
}

#mado-crawl-automation-form .mado-ai-radio-list label {
    font-size: 14px;
}

.mado-ai-choice-grid {
    display: grid;
    gap: 10px;
}

.mado-ai-choice-grid--length {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mado-ai-choice-card {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-width: 0;
    padding: 12px;
    border: 1px solid #cfdce7;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.mado-ai-choice-card:has(input:checked) {
    border-color: #49b6c3;
    background: #eefbfd;
    box-shadow: 0 0 0 2px rgba(73, 182, 195, 0.1);
}

.mado-ai-choice-card input,
.mado-ai-radio-list input,
.mado-ai-check-list input,
.mado-ai-inline-check input,
.mado-ai-privacy-checklist input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: #18a5b5;
}

.mado-ai-choice-card span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mado-ai-choice-card strong {
    color: #172a3a;
    font-size: 12px;
}

.mado-ai-choice-card small {
    color: #64748b;
    font-size: 10px;
    line-height: 1.45;
}


#mado-ai-answer-section .mado-ai-choice-card small {
    font-size: 12px;
}

/* AIの答え方: 「回答の長さ」の選択名と文字数目安だけを1px拡大する。 */
#mado-ai-answer-section .mado-ai-choice-grid--length .mado-ai-choice-card strong,
#mado-ai-answer-section .mado-ai-choice-grid--length .mado-ai-choice-card small {
    font-size: 13px;
}

.mado-ai-range-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e4edf4;
    color: #475569;
    font-size: 12px;
}

.mado-ai-range-row label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

#mado-ai-answer-section .mado-ai-range-row input {
    width: 92px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid #cbd8e4;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.mado-ai-radio-list,
.mado-ai-check-list {
    display: grid;
    gap: 9px;
}

.mado-ai-radio-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-ai-radio-list label,
.mado-ai-check-list label,
.mado-ai-inline-check,
.mado-ai-privacy-checklist label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
}

#mado-ai-answer-section .mado-ai-setting-input,
#mado-ai-answer-section .mado-ai-setting-select,
#mado-ai-answer-section .mado-ai-setting-textarea,
#mado-ai-visual-section .mado-ai-screenshot-grid input,
#mado-ai-visual-section .mado-ai-screenshot-grid textarea,
#mado-ai-usage-section .mado-ai-budget-controls select,
#mado-ai-usage-section .mado-ai-budget-controls input {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #cbd8e4;
    border-radius: 10px;
    background: #ffffff;
    color: #172a3a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.mado-ai-setting-textarea,
.mado-ai-screenshot-grid textarea {
    resize: vertical;
    min-height: 96px;
}

.mado-ai-subfield-label {
    display: block;
    margin: 12px 0 6px;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}


#mado-ai-answer-section .mado-ai-subfield-label {
    font-size: 12px;
}

.mado-ai-draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e4edf4;
    color: #64748b;
    font-size: 11px;
    line-height: 1.6;
}


#mado-ai-answer-section .mado-ai-draft-actions {
    justify-content: flex-end;
    font-size: 13px;
}

#mado-ai-answer-section [data-mado-ai-answer-save-status] {
    order: 1;
    margin-right: auto;
}

#mado-ai-answer-section [data-mado-ai-answer-save] {
    order: 2;
}

body.mado-portal-account-page #mado-ai-answer-section [data-mado-ai-answer-save].button {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
}

body.mado-portal-account-page #mado-ai-answer-section .mado-ai-draft-button.button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #2eb2c1;
    border-radius: 11px;
    background: #e7f8fa;
    background-image: none;
    color: #0b6870;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    text-shadow: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

body.mado-portal-account-page #mado-ai-answer-section .mado-ai-draft-button.button:hover,
body.mado-portal-account-page #mado-ai-answer-section .mado-ai-draft-button.button:focus-visible {
    border-color: #2197a5;
    background: #dff4f7;
    color: #075861;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.09);
}

body.mado-portal-account-page #mado-ai-answer-section .mado-ai-draft-button.button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12);
}

body.mado-portal-account-page #mado-ai-answer-section .mado-ai-draft-button.button:disabled {
    border-color: #2eb2c1;
    background: #e7f8fa;
    color: #0b6870;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}


body.mado-portal-account-page .mado-portal-shell--action-ai-visual-assets #mado-ai-visual-section .mado-ai-draft-button.button {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #4b5563;
    border-radius: 10px;
    background: #4b5563;
    color: #ffffff;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

body.mado-portal-account-page .mado-portal-shell--action-ai-visual-assets #mado-ai-visual-section .mado-ai-draft-button.button:disabled {
    border-color: #4b5563;
    background: #4b5563;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;
}

.mado-ai-screenshot-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #dce7ef;
    border-radius: 16px;
    background: #fbfdff;
}

.mado-ai-screenshot-card__head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.mado-ai-screenshot-card__head h4 {
    margin: 0;
    color: #172a3a;
    font-size: 17px;
}

.mado-ai-screenshot-card__head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
}

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

.mado-ai-screenshot-grid label {
    min-width: 0;
}

.mado-ai-screenshot-grid__wide {
    grid-column: 1 / -1;
}

.mado-ai-upload-field {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 14px;
    border: 1px dashed #9db7c9;
    border-radius: 12px;
    background: #ffffff;
}

.mado-ai-upload-field small {
    color: #64748b;
    font-size: 10px;
    line-height: 1.55;
}

.mado-ai-privacy-checklist {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #f0cf8d;
    border-radius: 12px;
    background: #fffaf0;
}

.mado-ai-privacy-checklist strong {
    color: #7a4b00;
    font-size: 12px;
}

.mado-ai-usage-breakdown {
    display: grid;
    gap: 8px;
}

.mado-ai-usage-breakdown > div {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(90px, 0.15fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #dce7ef;
    border-radius: 12px;
    background: #fbfdff;
}

.mado-ai-usage-breakdown span {
    color: #263b4c;
    font-size: 12px;
    font-weight: 800;
}

.mado-ai-usage-breakdown strong {
    color: #0b7180;
    font-size: 12px;
}

.mado-ai-usage-breakdown small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
}

.mado-ai-budget-settings {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #b9dfe5;
    border-radius: 14px;
    background: #f2fbfd;
    color: #315965;
}

.mado-ai-budget-settings strong {
    display: block;
    margin-bottom: 5px;
    color: #0b6870;
    font-size: 13px;
}

.mado-ai-budget-controls {
    display: grid;
    gap: 8px;
}

.mado-ai-budget-controls label {
    display: grid;
    grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    color: #315965;
    font-size: 11px;
}

@media (max-width: 1080px) {
    .mado-crawl-usage-metrics,
    .mado-ai-learning-policy-grid,
    .mado-ai-usage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mado-ai-choice-grid--length {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mado-crawl-usage-diff-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    #mado-crawl-automation-form {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
    }

    #mado-crawl-automation-form .mado-crawl-automation-group--frequency {
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid #e1eaf1;
    }

    #mado-crawl-automation-form > .mado-crawl-usage-actions,
    #mado-crawl-automation-form > #mado-crawl-automation-help {
        grid-column: auto;
    }

    .mado-crawl-usage-hero,
    .mado-crawl-usage-workspace,
    .mado-ai-settings-grid,
    .mado-ai-visual-grid,
    .mado-ai-screenshot-grid,
    .mado-ai-budget-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-ai-setting-card--wide,
    .mado-ai-screenshot-grid__wide {
        grid-column: auto;
    }

    .mado-crawl-usage-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-account-page .mado-portal-shell--action-ai-answer-settings .mado-portal-shell__content-frame.is-standard {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mado-crawl-usage-panel {
        padding: 16px;
        border-radius: 18px;
    }

    .mado-crawl-usage-metrics,
    .mado-crawl-usage-diff-meta,
    .mado-ai-learning-policy-grid,
    .mado-ai-usage-summary,
    .mado-ai-choice-grid--length,
    .mado-ai-radio-list--two {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-ai-management-section__head,
    .mado-ai-screenshot-card__head {
        display: grid;
    }

    .mado-ai-status-chip,
    .mado-ai-privacy-chip {
        justify-self: start;
    }

    .mado-crawl-site-profile__head {
        display: grid;
        gap: 10px;
    }

    .mado-crawl-site-profile__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mado-crawl-site-profile__actions .button {
        width: 100%;
    }

    .mado-ai-management-section__title-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mado-ai-usage-breakdown > div,
    .mado-ai-budget-controls label {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-crawl-usage-metric {
        min-height: 0;
    }


    .mado-crawl-usage-section,
    .mado-crawl-usage-history-body {
        padding: 15px;
    }

    .mado-crawl-usage-section__head {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
    }

    .mado-crawl-usage-section__step {
        width: 30px;
        height: 30px;
    }

    .mado-crawl-usage-history-head {
        padding: 15px;
    }

    .mado-crawl-usage-history-head__copy small {
        display: none;
    }

    .mado-crawl-usage-history-load-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .mado-crawl-usage-history-load-panel .mado-crawl-usage-history-load-button {
        width: 100%;
    }

    .mado-crawl-usage-history-controls {
        align-items: flex-start;
    }

    .mado-crawl-usage-history-toolbar {
        width: 100%;
    }

    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button,
    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button {
        flex: 1 1 auto;
    }
}

/* MADO AI inline advisor draft */

#mado-ai-answer-section .mado-ai-check-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#mado-ai-answer-section .mado-ai-setting-card,
#mado-ai-answer-section .mado-ai-setting-card p,
#mado-ai-answer-section .mado-ai-setting-card label,
#mado-ai-answer-section .mado-ai-base-prompt-note {
    overflow-wrap: anywhere;
}

#mado-ai-answer-section .mado-ai-inline-advisor {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #e2eaf1;
}

#mado-ai-answer-section .mado-ai-inline-advisor--textarea {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

#mado-ai-answer-section .mado-ai-inline-advisor__label {
    color: #334155;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.5;
}

#mado-ai-answer-section .mado-ai-inline-advisor > .mado-ai-setting-input {
    width: 100%;
}


#mado-ai-answer-section .mado-ai-setting-input::placeholder,
#mado-ai-answer-section .mado-ai-setting-textarea::placeholder,
#mado-ai-answer-section .mado-ai-range-row input::placeholder {
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    opacity: 1;
}

#mado-ai-answer-section .mado-ai-setting-select option {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
}

@media (max-width: 860px) {
    #mado-ai-answer-section .mado-ai-check-list--two {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    #mado-ai-answer-section .mado-ai-range-row {
        align-items: flex-start;
    }

    #mado-ai-answer-section .mado-ai-range-row label {
        flex: 1 1 150px;
    }

    #mado-ai-answer-section .mado-ai-range-row input {
        width: 100%;
    }
}


/* AIの答え方: キャラクターが明確に分かれる話し方選択 */
#mado-ai-answer-section .mado-ai-setting-card--tone {
    overflow: visible;
}

/* AIの答え方: 話し方見出しは1px拡大する。 */
#mado-ai-answer-section .mado-ai-setting-card--tone > .mado-ai-setting-card__title {
    font-size: 17px;
}

#mado-ai-answer-section .mado-ai-tone-comparison {
    margin: 12px 0 16px;
}

#mado-ai-answer-section .mado-ai-tone-comparison__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 34px;
    padding: 5px 11px 5px 7px;
    border: 1px solid #72c79c;
    border-radius: 999px;
    background: #e8fbf1;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

#mado-ai-answer-section .mado-ai-tone-comparison__chip::-webkit-details-marker {
    display: none;
}

#mado-ai-answer-section .mado-ai-tone-comparison__chip:hover,
#mado-ai-answer-section .mado-ai-tone-comparison__chip:focus-visible,
#mado-ai-answer-section .mado-ai-tone-comparison[open] .mado-ai-tone-comparison__chip {
    border-color: #16a34a;
    background: #dcfce7;
    color: #14532d;
    outline: 0;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(21, 128, 61, 0.12);
}

#mado-ai-answer-section .mado-ai-tone-comparison__chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #72c79c;
    border-radius: 999px;
    background: #ffffff;
    color: #15803d;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

#mado-ai-answer-section .mado-ai-tone-comparison__panel {
    display: grid;
    gap: 13px;
    margin-top: 10px;
    padding: 15px;
    border: 1px solid #cfe3d9;
    border-radius: 14px;
    background: #fbfffd;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

#mado-ai-answer-section .mado-ai-tone-comparison__question {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid #deebe4;
}

#mado-ai-answer-section .mado-ai-tone-comparison__question strong {
    color: #166534;
    font-size: 13px;
}

#mado-ai-answer-section .mado-ai-tone-comparison__question span {
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

#mado-ai-answer-section .mado-ai-tone-comparison__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#mado-ai-answer-section .mado-ai-tone-example {
    min-width: 0;
    padding: 13px;
    border: 1px solid #dce6ee;
    border-radius: 12px;
    background: #ffffff;
}

#mado-ai-answer-section .mado-ai-tone-example h4 {
    margin: 0 0 8px;
    color: #172a3a;
    font-size: 14px;
    line-height: 1.5;
}

#mado-ai-answer-section .mado-ai-tone-example h4 span {
    color: #0f6872;
}

#mado-ai-answer-section .mado-ai-tone-example p,
#mado-ai-answer-section .mado-ai-tone-example li {
    color: #334155;
    font-size: 13px;
    line-height: 1.75;
}

#mado-ai-answer-section .mado-ai-tone-example p {
    margin: 0;
}

#mado-ai-answer-section .mado-ai-tone-example ol,
#mado-ai-answer-section .mado-ai-tone-example ul {
    margin: 6px 0;
    padding-left: 20px;
}

#mado-ai-answer-section .mado-ai-tone-example small {
    display: block;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #e7edf2;
    color: #5b6b7d;
    font-size: 13px;
    line-height: 1.65;
}

#mado-ai-answer-section .mado-ai-persona-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#mado-ai-answer-section .mado-ai-persona-card {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #d9e4ef;
    border-radius: 14px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

#mado-ai-answer-section .mado-ai-persona-card:hover {
    border-color: #9fcbd1;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

#mado-ai-answer-section .mado-ai-persona-card:has(input:checked) {
    border-color: #2eb2c1;
    background: #eefbfc;
    box-shadow: 0 0 0 3px rgba(46, 178, 193, 0.12);
}

#mado-ai-answer-section .mado-ai-persona-card input {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
    accent-color: #1596a6;
}

#mado-ai-answer-section .mado-ai-persona-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 22px;
    line-height: 1;
}

#mado-ai-answer-section .mado-ai-persona-card__copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

#mado-ai-answer-section .mado-ai-persona-card__copy strong {
    color: #172a3a;
    font-size: 14px;
    line-height: 1.5;
}

#mado-ai-answer-section .mado-ai-persona-card__copy small {
    color: #5f7082;
    font-size: 13px;
    line-height: 1.65;
}

@media (max-width: 860px) {
    #mado-ai-answer-section .mado-ai-tone-comparison__grid,
    #mado-ai-answer-section .mado-ai-persona-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    #mado-ai-answer-section .mado-ai-persona-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #mado-ai-answer-section .mado-ai-persona-card input {
        grid-row: 1 / span 2;
    }

    #mado-ai-answer-section .mado-ai-persona-card__icon {
        display: none;
    }
}

/* MADO AI usage guide */

#mado-ai-usage-section .mado-ai-usage-guide {
    margin: 16px 0;
    border: 1px solid #b9dfe5;
    border-radius: 14px;
    background: #f6fcfd;
    overflow: hidden;
}

#mado-ai-usage-section .mado-ai-usage-guide > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 13px 15px;
    color: #123f47;
    cursor: pointer;
    list-style: none;
}

#mado-ai-usage-section .mado-ai-usage-guide > summary::-webkit-details-marker {
    display: none;
}

#mado-ai-usage-section .mado-ai-usage-guide > summary::after {
    content: "＋";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #95cbd3;
    border-radius: 999px;
    background: #ffffff;
    color: #0f7180;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

#mado-ai-usage-section .mado-ai-usage-guide[open] > summary::after {
    content: "－";
}

#mado-ai-usage-section .mado-ai-usage-guide > summary:hover,
#mado-ai-usage-section .mado-ai-usage-guide > summary:focus-visible {
    background: #edf9fb;
    outline: 0;
}

#mado-ai-usage-section .mado-ai-usage-guide > summary span {
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

#mado-ai-usage-section .mado-ai-usage-guide > summary small {
    margin-left: auto;
    color: #57747a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

#mado-ai-usage-section .mado-ai-usage-guide__body {
    display: grid;
    gap: 14px;
    padding: 15px;
    border-top: 1px solid #d7ebee;
    background: #ffffff;
}

#mado-ai-usage-section .mado-ai-usage-guide__highlight {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid #bae3d5;
    border-radius: 12px;
    background: #f2fcf8;
}

#mado-ai-usage-section .mado-ai-usage-guide__highlight strong,
#mado-ai-usage-section .mado-ai-usage-guide__shared strong,
#mado-ai-usage-section .mado-ai-usage-guide__grid strong {
    color: #14323a;
    font-size: 12px;
    line-height: 1.5;
}

#mado-ai-usage-section .mado-ai-usage-guide__highlight span {
    color: #0b6b50;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

#mado-ai-usage-section .mado-ai-usage-guide__highlight small {
    color: #55716a;
    font-size: 10px;
    line-height: 1.6;
}

#mado-ai-usage-section .mado-ai-usage-guide__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#mado-ai-usage-section .mado-ai-usage-guide__grid section {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce7ed;
    border-radius: 11px;
    background: #f9fbfc;
}

#mado-ai-usage-section .mado-ai-usage-guide__grid p,
#mado-ai-usage-section .mado-ai-usage-guide__shared p {
    margin: 5px 0 0;
    color: #526170;
    font-size: 11px;
    line-height: 1.7;
}

#mado-ai-usage-section .mado-ai-usage-guide__shared {
    padding: 12px 13px;
    border-left: 3px solid #18a4b4;
    background: #f5fafb;
}

@media (max-width: 720px) {
    #mado-ai-usage-section .mado-ai-usage-guide > summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #mado-ai-usage-section .mado-ai-usage-guide > summary small {
        order: 3;
        width: 100%;
        margin-left: 0;
        white-space: normal;
    }

    #mado-ai-usage-section .mado-ai-usage-guide__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


#mado-ai-visual-section .mado-ai-screenshot-grid label > .mado-ai-setting-help {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}

/* Platform auto detection and manual override (2026-06-30) */
.mado-crawl-usage-platform-card {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #c9d8e5;
    border-radius: 14px;
    background: #f8fbfd;
}

.mado-crawl-usage-platform-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mado-crawl-usage-platform-summary__copy {
    min-width: 0;
}

.mado-crawl-usage-platform-kicker {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mado-crawl-usage-platform-status {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

.mado-crawl-usage-platform-summary #mado-crawl-platform-detail {
    margin: 5px 0 0;
}

.mado-crawl-usage-platform-change {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}

.mado-crawl-usage-platform-manual {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #d8e4ec;
}

.mado-crawl-usage-platform-manual__head {
    margin-bottom: 12px;
}

.mado-crawl-usage-platform-manual__head strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
}

.mado-crawl-usage-platform-manual__head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
}

.mado-crawl-usage-platform-manual .mado-crawl-usage-field-label {
    margin-bottom: 7px;
}

.mado-crawl-usage-select {
    display: block;
    width: min(100%, 520px);
    min-height: 44px;
    padding: 9px 38px 9px 12px;
    border: 1px solid #b8cad8;
    border-radius: 10px;
    background-color: #ffffff;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

.mado-crawl-usage-select:focus {
    border-color: var(--mado-crawl-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(21, 169, 186, 0.14);
}

.mado-crawl-usage-platform-subfield {
    margin-top: 12px;
}

.mado-crawl-usage-platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 640px) {
    .mado-crawl-usage-platform-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .mado-crawl-usage-platform-change {
        width: 100%;
    }

    .mado-crawl-usage-platform-actions .button {
        width: 100%;
        justify-content: center;
    }
}


.mado-candidate-table-wrap[tabindex="0"] {
    border-radius: 12px;
}

.mado-candidate-table-wrap[tabindex="0"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(21, 169, 186, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    body.mado-portal-account-page .mado-portal-shell--action-crawl #mado-crawl .mado-crawl-usage-section-help-chip .mado-site-qa__help-chip-mark {
        transition: none;
    }

    .mado-portal-shell--action-crawl #mado-crawl *,
    .mado-portal-shell--action-crawl #mado-crawl *::before,
    .mado-portal-shell--action-crawl #mado-crawl *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }

    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-button.button:hover,
    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-button.button:hover,
    body.mado-portal-account-page .mado-portal-shell--action-crawl .mado-crawl-usage-history-load-button.button:hover {
        transform: none;
    }
}