/* ========================================================================
   AI Auto Poster - Modern Theme Overlay (Linear / Stripe inspired)
   admin.css の上に読み込み、主要トークンとコンポーネントを上書きする。
   ======================================================================== */

:root.aiap-theme-modern,
.aiap-theme-modern{
    /* === 背景 === */
    --bg:        #fafafa;
    --card:      #ffffff;
    --bg-soft:   #f9fafb;
    --bg-hover:  #f4f4f5;

    /* === テキスト === */
    --txt:       #18181b;   /* zinc-900 */
    --txt-m:     #52525b;   /* zinc-600 */
    --txt-l:     #a1a1aa;   /* zinc-400 */

    /* === ボーダー === */
    --bdr:       #e4e4e7;   /* zinc-200 */
    --bdr-l:     #f4f4f5;   /* zinc-100 */

    /* === Primary (黒系ソリッド) === */
    --primary:   #18181b;
    --primary-h: #27272a;
    --primary-fg:#ffffff;

    /* === セマンティック === */
    --blue:      #2563eb;
    --blue-h:    #1d4ed8;
    --blue-bg:   #eff6ff;
    --green:     #16a34a;
    --green-bg:  #f0fdf4;
    --red:       #dc2626;
    --red-bg:    #fef2f2;
    --orange:    #ea580c;
    --yellow-bg: #fefce8;

    /* === 角丸 === */
    --r:         8px;
    --r-sm:      6px;
    --r-lg:      12px;

    /* === シャドウ (Tailwind 階層) === */
    --sh-xs:     0 1px 2px 0 rgb(0 0 0 / 0.05);
    --sh-sm:     0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
    --sh-md:     0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.08);
    --sh-lg:     0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.08);

    /* === タイポ === */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", sans-serif;
}

/* body のデフォルトを上書き (ページ背景とフォント) */
.aiap-theme-modern body,
body.aiap-theme-modern{
    background: var(--bg);
    font-family: var(--font-sans);
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
}

/* === カード === */
.aiap-theme-modern .aiap-card{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--sh-xs);
    transition: box-shadow 0.15s ease;
}
.aiap-theme-modern .aiap-card:hover{
    box-shadow: var(--sh-sm);
}
.aiap-theme-modern .aiap-card h2{
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--bdr-l);
    color: var(--txt);
    letter-spacing: -0.01em;
}

/* === サブタブ === */
.aiap-theme-modern .aiap-sub-tabs{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    padding: 4px;
    gap: 2px;
    margin-bottom: 16px;
}
.aiap-theme-modern .aiap-sub-tab{
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--txt-m);
    border: none;
    border-radius: var(--r-sm);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-sub-tab:hover{
    background: var(--bg-hover);
    color: var(--txt);
}
.aiap-theme-modern .aiap-sub-tab.active{
    background: var(--primary);
    color: var(--primary-fg);
    box-shadow: var(--sh-xs);
}

/* === ボタン === */
.aiap-theme-modern .button,
.aiap-theme-modern .button-secondary{
    background: var(--card);
    border: 1px solid var(--bdr);
    color: var(--txt);
    height: 32px;
    line-height: 30px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    text-shadow: none;
}
.aiap-theme-modern .button:hover{
    background: var(--bg-hover);
    border-color: var(--txt-l);
    color: var(--txt);
}

.aiap-theme-modern .button-primary,
.aiap-theme-modern .aiap-btn-primary{
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-fg);
    height: 32px;
    padding: 0 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    text-shadow: none;
}
.aiap-theme-modern .button-primary:hover,
.aiap-theme-modern .aiap-btn-primary:hover{
    background: var(--primary-h);
    border-color: var(--primary-h);
    box-shadow: var(--sh-sm);
}

.aiap-theme-modern .aiap-btn-success{
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-btn-danger{
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    box-shadow: var(--sh-xs);
}

/* === 入力 === */
.aiap-theme-modern .aiap-input-text,
.aiap-theme-modern .aiap-select{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    padding: 0 12px;
    height: 36px;
    min-height: 36px;
    line-height: 34px;
    font-size: 13px;
    color: var(--txt);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.aiap-theme-modern .aiap-input-text:hover,
.aiap-theme-modern .aiap-select:hover{
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-input-text:focus,
.aiap-theme-modern .aiap-select:focus{
    outline: 2px solid var(--primary);
    outline-offset: 0;
    border-color: var(--primary);
}
.aiap-theme-modern textarea.aiap-input-text,
.aiap-theme-modern .aiap-editor-textarea{
    height: auto;
    min-height: 80px;
    line-height: 1.6;
    padding: 10px 12px;
}

/* === フィールドラベル === */
.aiap-theme-modern .aiap-field-label{
    font-size: 13px;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 6px;
    display: block;
}
.aiap-theme-modern .aiap-field-hint{
    font-size: 12px;
    color: var(--txt-m);
    margin-top: 4px;
    display: block;
}
.aiap-theme-modern .aiap-required{
    color: var(--red);
    font-weight: 500;
}

/* === ステータスバッジ === */
.aiap-theme-modern .aiap-badge,
.aiap-theme-modern .aiap-status-pill{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--txt-m);
}

/* === ラジオピル (タブ風) === */
.aiap-theme-modern .aiap-radio-pill{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--txt);
    transition: all 0.15s ease;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-radio-pill:hover{
    background: var(--bg-hover);
}
.aiap-theme-modern .aiap-radio-pill.active{
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
}

/* === スイッチ (toggle) === */
.aiap-theme-modern .aiap-switch{
    width: 38px;
    height: 22px;
    background: var(--bdr);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.aiap-theme-modern .aiap-switch::after{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--sh-sm);
    transition: transform 0.2s ease;
}
.aiap-theme-modern .aiap-switch.is-on{
    background: var(--primary);
}
.aiap-theme-modern .aiap-switch.is-on::after{
    transform: translateX(16px);
}

/* === ランダムモードのカード調整 (テーマと整合) === */
.aiap-theme-modern .aiap-allowed-row{
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    background: var(--card);
    box-shadow: var(--sh-xs);
    padding: 8px 12px;
}
.aiap-theme-modern .aiap-random-fields .aiap-input-text,
.aiap-theme-modern .aiap-allowed-actions .button{
    height: 32px;
    min-height: 32px;
    line-height: 30px;
    font-size: 13px;
    border-radius: var(--r-sm);
}

/* ========================================================================
   追加コンポーネント (全画面網羅 phase 2)
   ======================================================================== */

/* === ページヘッダ === */
.aiap-theme-modern .aiap-page-head h1{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--txt);
}

/* === バナー (お知らせ / 警告) === */
.aiap-theme-modern .aiap-banner{
    background: var(--blue-bg);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 14px 18px;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-banner-warning{
    background: #fefce8;
    border-color: #fde68a;
}
.aiap-theme-modern .aiap-banner-error{
    background: var(--red-bg);
    border-color: #fecaca;
}

/* === プランカード === */
.aiap-theme-modern .aiap-plan-card-v2{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: box-shadow 0.15s ease;
}
.aiap-theme-modern .aiap-plan-card-v2:hover{
    box-shadow: var(--sh-md);
}
.aiap-theme-modern .aiap-plan-card-v2-pro{
    background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
    border-color: #18181b;
    color: #fafafa;
}
.aiap-theme-modern .aiap-plan-card-v2-pro .aiap-plan-card-v2-name,
.aiap-theme-modern .aiap-plan-card-v2-pro .aiap-plan-card-v2-stat,
.aiap-theme-modern .aiap-plan-card-v2-pro .aiap-plan-card-v2-label{
    color: #fafafa;
}
.aiap-theme-modern .aiap-plan-card-v2-bar{
    background: var(--bdr-l);
    border-radius: 9999px;
    overflow: hidden;
}
.aiap-theme-modern .aiap-plan-card-v2-bar-fill{
    background: var(--primary);
    border-radius: 9999px;
}

/* === プロバイダパネル === */
.aiap-theme-modern .aiap-provider-panel{
    border: 1px solid var(--bdr);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-provider-panel:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-md);
}

/* === ログ / WPテーブル === */
.aiap-theme-modern table.widefat,
.aiap-theme-modern .aiap-log-table{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.aiap-theme-modern table.widefat thead th,
.aiap-theme-modern table.widefat thead td,
.aiap-theme-modern .aiap-log-table thead th{
    background: var(--bg-soft);
    color: var(--txt-m);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--bdr);
    padding: 10px 14px;
}
.aiap-theme-modern table.widefat tbody th,
.aiap-theme-modern table.widefat td,
.aiap-theme-modern .aiap-log-table td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--bdr-l);
    font-size: 13px;
    color: var(--txt);
}
.aiap-theme-modern table.widefat tbody tr:last-child th,
.aiap-theme-modern table.widefat tbody tr:last-child td,
.aiap-theme-modern .aiap-log-table tbody tr:last-child td{
    border-bottom: 0;
}
.aiap-theme-modern table.widefat tbody tr:hover th,
.aiap-theme-modern table.widefat tbody tr:hover td{
    background: var(--bg-soft);
}

/* === ログアイテム / リスト === */
.aiap-theme-modern .aiap-log-item{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-xs);
    transition: box-shadow 0.15s ease;
    margin-bottom: 6px;
}
.aiap-theme-modern .aiap-log-item:hover{
    box-shadow: var(--sh-sm);
}
.aiap-theme-modern .aiap-log-dot-success{ background: var(--green); }
.aiap-theme-modern .aiap-log-dot-error{   background: var(--red); }
.aiap-theme-modern .aiap-log-dot-warn,
.aiap-theme-modern .aiap-log-dot-warning{ background: var(--orange); }
.aiap-theme-modern .aiap-log-dot-info{    background: var(--blue); }

/* === プログレス === */
.aiap-theme-modern .aiap-progress-step.is-running{ color: var(--blue); }
.aiap-theme-modern .aiap-progress-step.is-done{    color: var(--green); }
.aiap-theme-modern .aiap-progress-step.is-error{   color: var(--red); }

.aiap-theme-modern .aiap-usage-bar,
.aiap-theme-modern .aiap-progress{
    background: var(--bdr-l);
    border-radius: 9999px;
    overflow: hidden;
}

/* === 画像プリセットカード === */
.aiap-theme-modern .aiap-imgset-card,
.aiap-theme-modern .aiap-preset-card{
    border: 1px solid var(--bdr);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-imgset-card:hover,
.aiap-theme-modern .aiap-preset-card:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}
/* アクティブ/選択状態の primary 枠 (Phase 13 DRY: imgset-card/preset-card/wizard-preset/
   wizard-option/provider-card の 5 種で同一スタイルなので集約) */
.aiap-theme-modern .aiap-imgset-card[aria-checked="true"],
.aiap-theme-modern .aiap-imgset-card.is-active,
.aiap-theme-modern .aiap-preset-card.is-active,
.aiap-theme-modern .aiap-wizard-preset.is-selected,
.aiap-theme-modern .aiap-wizard-option:has(input[type="radio"]:checked),
.aiap-theme-modern .aiap-provider-card.is-active,
.aiap-theme-modern .aiap-provider-card[aria-checked="true"]{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), var(--sh-xs);
}

/* === 空状態 === */
.aiap-theme-modern .aiap-empty-state{
    background: var(--bg-soft);
    border: 1px dashed var(--bdr);
    border-radius: var(--r);
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-empty-state-sub{
    color: var(--txt-l);
}

/* === FAQ === */
.aiap-theme-modern .aiap-faq-item{
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--sh-xs);
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease;
}
.aiap-theme-modern .aiap-faq-item:hover{
    box-shadow: var(--sh-sm);
}
.aiap-theme-modern .aiap-faq-item[open]{
    box-shadow: var(--sh-md);
}
.aiap-theme-modern .aiap-faq-item summary{
    padding: 14px 16px;
    font-weight: 500;
    color: var(--txt);
}

/* === バッジ拡張 === */
.aiap-theme-modern .aiap-badge-on{
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid #bbf7d0;
}
.aiap-theme-modern .aiap-badge-off{
    background: var(--bg-hover);
    color: var(--txt-m);
    border: 1px solid var(--bdr);
}
.aiap-theme-modern .aiap-badge-free{
    background: var(--bg-hover);
    color: var(--txt-m);
    border: 1px solid var(--bdr);
}

/* === ボタン亜種 === */
.aiap-theme-modern .aiap-btn-success{
    background: var(--green);
    border: 1px solid var(--green);
    color: #fff;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-btn-success:hover{
    background: #15803d;
    border-color: #15803d;
}
.aiap-theme-modern .aiap-btn-danger{
    background: var(--red);
    border: 1px solid var(--red);
    color: #fff;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-btn-danger:hover{
    background: #b91c1c;
    border-color: #b91c1c;
}
.aiap-theme-modern .aiap-btn-danger-outline{
    background: var(--card);
    border: 1px solid var(--red);
    color: var(--red);
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-btn-danger-outline:hover{
    background: var(--red);
    color: #fff;
}
.aiap-theme-modern .aiap-btn-neutral{
    background: var(--card);
    border: 1px solid var(--bdr);
    color: var(--txt);
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-btn-neutral:hover{
    background: var(--bg-hover);
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-btn-large{
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
}

/* === 全フォーム要素統一 === */
.aiap-theme-modern .aiap-wrap input[type="text"],
.aiap-theme-modern .aiap-wrap input[type="number"],
.aiap-theme-modern .aiap-wrap input[type="email"],
.aiap-theme-modern .aiap-wrap input[type="password"],
.aiap-theme-modern .aiap-wrap input[type="url"],
.aiap-theme-modern .aiap-wrap input[type="search"],
.aiap-theme-modern .aiap-wrap input[type="time"],
.aiap-theme-modern .aiap-wrap textarea,
.aiap-theme-modern .aiap-wrap select{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    color: var(--txt);
}
.aiap-theme-modern .aiap-wrap input:hover:not(:focus),
.aiap-theme-modern .aiap-wrap textarea:hover:not(:focus),
.aiap-theme-modern .aiap-wrap select:hover:not(:focus){
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-wrap input:focus,
.aiap-theme-modern .aiap-wrap textarea:focus,
.aiap-theme-modern .aiap-wrap select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.1);
    outline: none;
}

/* === エディタ === */
.aiap-theme-modern .aiap-editor{
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--sh-xs);
}

/* === WordPress nav-tab === */
.aiap-theme-modern .nav-tab-wrapper,
.aiap-theme-modern h2.nav-tab-wrapper{
    border-bottom: 1px solid var(--bdr);
    padding-bottom: 0;
    margin-bottom: 16px;
    background: transparent;
}
.aiap-theme-modern .nav-tab{
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin: 0 4px 0 0;
    padding: 10px 16px;
    color: var(--txt-m);
    font-size: 13px;
    font-weight: 500;
    border-radius: 0;
    transition: all 0.15s ease;
}
.aiap-theme-modern .nav-tab:hover{
    color: var(--txt);
    background: var(--bg-hover);
}
.aiap-theme-modern .nav-tab-active,
.aiap-theme-modern .nav-tab-active:hover{
    background: transparent;
    border-bottom-color: var(--primary);
    color: var(--txt);
}

/* === ロックされた要素 === */
.aiap-theme-modern .aiap-locked{
    opacity: 0.55;
    background: var(--bg-soft);
}

/* ========================================================================
   サイドバーナビゲーション (タブ → サイドバー化)

   レイアウトの責任範囲:
   - .aiap-wrap は WordPress 管理画面の利用可能幅いっぱいに広げる
     (margin は WP コアの .wrap が制御するためここでは触らない)
   - .aiap-shell は sidebar 220px + main 可変幅で構成
   - 各タブ wrapper は親 .aiap-main の幅をそのまま使う
   ======================================================================== */
.aiap-theme-modern .aiap-wrap{
    width: auto;
    max-width: none;
    box-sizing: border-box;
}
.aiap-theme-modern .aiap-shell{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
}
.aiap-theme-modern .aiap-main{
    min-width: 0;
    width: 100%;
}

/* Phase 10 root fix: 各タブの個別 max-width をすべて外す。
   admin.css L1724 にあった
     `.aiap-settings-form,.aiap-prompts-form,.aiap-quickpost{max-width:780px}`
   や、その他の個別ルールを theme-modern スコープで完全に上書きする。
   各タブの内側 wrapper は親 .aiap-main の幅をそのまま使うので、
   結果として全タブ同じ最大幅 (≒ 1100px) で揃う。 */
.aiap-theme-modern .aiap-settings-form,
.aiap-theme-modern .aiap-prompts-form,
.aiap-theme-modern .aiap-quickpost,
.aiap-theme-modern .aiap-imgset,
.aiap-theme-modern .aiap-provider-form{
    max-width: none;
    margin: 0;
}
.aiap-theme-modern .aiap-sidebar{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 12px 8px;
    box-shadow: var(--sh-xs);
    position: sticky;
    top: 32px;
}
.aiap-theme-modern .aiap-sidebar nav.aiap-tabs{
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0;
    margin: 0;
}
.aiap-theme-modern .aiap-sidebar-section{margin-bottom: 16px}
.aiap-theme-modern .aiap-sidebar-section:last-child{margin-bottom: 0}
.aiap-theme-modern .aiap-sidebar-section-title{
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-l);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px 8px;
}

/* サイドバー内のタブ (.aiap-tab を縦並びアイテムに変換) */
.aiap-theme-modern .aiap-sidebar .aiap-tab{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 0 0 2px;
    color: var(--txt-m);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r-sm);
    text-decoration: none;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: all 0.15s ease;
    line-height: 1.2;
    min-height: 0;
    height: auto;
}
.aiap-theme-modern .aiap-sidebar .aiap-tab:hover,
.aiap-theme-modern .aiap-sidebar .aiap-tab:focus{
    background: var(--bg-hover);
    color: var(--txt);
}
.aiap-theme-modern .aiap-sidebar .aiap-tab.is-active,
.aiap-theme-modern .aiap-sidebar .aiap-tab.is-active:hover{
    background: var(--primary);
    color: var(--primary-fg);
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-sidebar .aiap-tab .dashicons{
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    flex: 0 0 auto;
}
.aiap-theme-modern .aiap-sidebar .aiap-tab.is-active .dashicons,
.aiap-theme-modern .aiap-sidebar .aiap-tab.is-active .aiap-tab-label{
    color: var(--primary-fg);
}

/* メインコンテンツ */
.aiap-theme-modern .aiap-main{
    min-width: 0; /* grid item で overflow しないように */
    /* Phase 10 fix: 幅制限は .aiap-shell の grid-template-columns 側で minmax(0, 1100px) として指定 */
}
.aiap-theme-modern .aiap-main .aiap-tab-panel{
    min-width: 0;
}

/* Phase 10: 画像設定タブが個別に max-width: 780px を持っていたので無効化して全タブで統一 */
.aiap-theme-modern .aiap-imgset{
    max-width: none;
    margin: 0;
}

/* ハンバーガー (モバイル用 toggle ボタン) */
.aiap-theme-modern .aiap-sidebar-toggle{
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    cursor: pointer;
    margin: 0 0 12px;
    box-shadow: var(--sh-xs);
    color: var(--txt);
    font-size: 13px;
    font-weight: 500;
    height: 36px;
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-sidebar-toggle:hover{
    background: var(--bg-hover);
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-sidebar-toggle .dashicons{
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ≤ 768px: 1 カラム + ハンバーガー */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-shell{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-sidebar{
        position: relative;
        top: 0;
        display: none;
        margin-bottom: 12px;
    }
    .aiap-theme-modern .aiap-sidebar.is-open{
        display: block;
    }
    .aiap-theme-modern .aiap-sidebar-toggle{
        display: inline-flex;
    }
    .aiap-theme-modern .aiap-sidebar-toggle[aria-expanded="true"] .dashicons-menu::before{
        content: "\f335"; /* dashicons-no-alt */
    }
}

/* ========================================================================
   Phase 1: Live Dashboard
   ======================================================================== */
.aiap-theme-modern .aiap-dash{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    padding: 18px 20px 20px;
    margin-bottom: 18px;
}
.aiap-theme-modern .aiap-dash-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.aiap-theme-modern .aiap-dash-title{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--txt-l);
    margin: 0;
}
.aiap-theme-modern .aiap-dash-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--bdr);
}
.aiap-theme-modern .aiap-dash-pill::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* 緑バッジ (Phase 13 DRY: dash-pill-on / task-badge-on / quickpost-charcount.is-active の
   3 種で同一スタイルなので集約) */
.aiap-theme-modern .aiap-dash-pill-on,
.aiap-theme-modern .aiap-task-badge-on,
.aiap-theme-modern .aiap-quickpost-charcount.is-active{
    background: var(--green-bg);
    color: var(--green);
    border-color: #bbf7d0;
}
.aiap-theme-modern .aiap-dash-pill-off{
    background: var(--bg-hover);
    color: var(--txt-m);
}

/* === 指標カード (5 列、5 番目は「本日の進捗」) === */
.aiap-theme-modern .aiap-dash-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.aiap-theme-modern .aiap-dash-card{
    background: var(--bg-soft);
    border: 1px solid var(--bdr-l);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}
.aiap-theme-modern .aiap-dash-card-label{
    font-size: 11px;
    font-weight: 500;
    color: var(--txt-m);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.aiap-theme-modern .aiap-dash-card-value{
    font-size: 26px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.aiap-theme-modern .aiap-dash-card-value-muted{
    color: var(--txt-l);
}
.aiap-theme-modern .aiap-dash-card-value-warn{
    color: var(--orange);
}
.aiap-theme-modern .aiap-dash-card-sub{
    font-size: 14px;
    font-weight: 500;
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-dash-card-foot{
    font-size: 12px;
    color: var(--txt-m);
    margin-top: 4px;
}
/* 「本日」カードの 2 行レイアウト (自動 X/Y, 手動 Z) */
.aiap-theme-modern .aiap-dash-card-rows{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aiap-theme-modern .aiap-dash-card-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.aiap-theme-modern .aiap-dash-card-row-label{
    font-size: 12px;
    color: var(--txt-m);
    font-weight: 500;
}
.aiap-theme-modern .aiap-dash-card-row-value{
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.aiap-theme-modern .aiap-dash-bar{
    margin-top: 8px;
    height: 4px;
    background: var(--bdr-l);
    border-radius: 9999px;
    overflow: hidden;
}
.aiap-theme-modern .aiap-dash-bar-fill{
    height: 100%;
    background: var(--primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.aiap-theme-modern .aiap-dash-bar-fill.aiap-usage-fill-warn{ background: var(--orange); }
.aiap-theme-modern .aiap-dash-bar-fill.aiap-usage-fill-full{ background: var(--red); }

/* === 直近 7 日ミニグラフ === */
.aiap-theme-modern .aiap-dash-chart{
    border-top: 1px solid var(--bdr-l);
    padding-top: 16px;
    position: relative;
}
.aiap-theme-modern .aiap-dash-chart-title{
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--txt-m);
    margin-bottom: 12px;
}
.aiap-theme-modern .aiap-dash-chart-bars{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    height: 110px;
    align-items: stretch;
}
.aiap-theme-modern .aiap-dash-chart-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 0;
    position: relative;
}
.aiap-theme-modern .aiap-dash-chart-bar-count{
    height: 16px;
    line-height: 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 2px;
}
.aiap-theme-modern .aiap-dash-chart-bar-track{
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    min-height: 0;
}
.aiap-theme-modern .aiap-dash-chart-bar-fill{
    width: 80%;
    max-width: 28px;
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.aiap-theme-modern .aiap-dash-chart-bar:hover .aiap-dash-chart-bar-fill{
    opacity: 1;
}
.aiap-theme-modern .aiap-dash-chart-bar.is-today .aiap-dash-chart-bar-fill{
    opacity: 1;
    background: var(--primary);
}
.aiap-theme-modern .aiap-dash-chart-bar-label{
    font-size: 11px;
    color: var(--txt-l);
    font-weight: 500;
    margin-top: 4px;
}
.aiap-theme-modern .aiap-dash-chart-bar.is-today .aiap-dash-chart-bar-label{
    color: var(--txt);
    font-weight: 600;
}
.aiap-theme-modern .aiap-dash-chart-empty{
    position: absolute;
    inset: 38px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent, var(--card) 60%);
    color: var(--txt-l);
    font-size: 12px;
}

/* === レスポンシブ === */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .aiap-theme-modern .aiap-dash-card-value{
        font-size: 22px;
    }
}
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   Phase 2: Settings accordion (<details>/<summary>)
   既存の .aiap-section に details セマンティクスを乗せる
   ======================================================================== */
.aiap-theme-modern details.aiap-section{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.aiap-theme-modern details.aiap-section[open]{
    box-shadow: var(--sh-sm);
}

.aiap-theme-modern details.aiap-section > summary.aiap-section-header{
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    transition: background 0.15s ease;
    position: relative;
    padding-right: 44px; /* シェブロン分のスペース */
}
.aiap-theme-modern details.aiap-section > summary.aiap-section-header::-webkit-details-marker{
    display: none;
}
.aiap-theme-modern details.aiap-section > summary.aiap-section-header:hover{
    background: var(--bg-soft);
}

/* シェブロン (▼ 風) を summary の右端に */
.aiap-theme-modern details.aiap-section > summary.aiap-section-header::after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--txt-m);
    border-bottom: 2px solid var(--txt-m);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
}
.aiap-theme-modern details.aiap-section[open] > summary.aiap-section-header::after{
    transform: translateY(-25%) rotate(-135deg);
}

/* タイトル (h3) のスタイル調整 */
.aiap-theme-modern details.aiap-section .aiap-section-title{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
    letter-spacing: -0.01em;
}
.aiap-theme-modern details.aiap-section .aiap-section-sub{
    font-size: 12px;
    color: var(--txt-m);
    margin: 2px 0 0;
    font-weight: 400;
}
.aiap-theme-modern details.aiap-section .aiap-section-title-row{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 中身は border-top で薄く区切る */
.aiap-theme-modern details.aiap-section > .aiap-section-body{
    border-top: 1px solid var(--bdr-l);
    padding: 16px 18px 18px;
}

/* 保存ボタン (フォーム下部) を右寄せでスティッキーっぽく */
.aiap-theme-modern .aiap-settings-form > p.submit{
    padding: 14px 0 0;
    margin: 14px 0 0;
    border-top: 1px solid var(--bdr);
    text-align: right;
}

/* ========================================================================
   Phase 3: Quick Start Wizard
   ======================================================================== */
.aiap-theme-modern .aiap-wizard{
    max-width: 720px;
    margin: 32px auto;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    overflow: hidden;
}

.aiap-theme-modern .aiap-wizard-header{
    padding: 28px 32px 20px;
    text-align: center;
    border-bottom: 1px solid var(--bdr-l);
    background: var(--bg-soft);
}
.aiap-theme-modern .aiap-wizard-eyebrow{
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-l);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.aiap-theme-modern .aiap-wizard-title{
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--txt);
    letter-spacing: -0.02em;
}
.aiap-theme-modern .aiap-wizard-sub{
    color: var(--txt-m);
    font-size: 13px;
    margin: 0 0 18px;
}
.aiap-theme-modern .aiap-wizard-progress{
    height: 4px;
    background: var(--bdr-l);
    border-radius: 9999px;
    overflow: hidden;
    margin: 0 auto 12px;
    max-width: 320px;
}
.aiap-theme-modern .aiap-wizard-progress-fill{
    height: 100%;
    background: var(--primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.aiap-theme-modern .aiap-wizard-stepnums{
    display: flex;
    gap: 8px;
    justify-content: center;
}
.aiap-theme-modern .aiap-wizard-stepnum{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--bdr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-l);
    background: var(--card);
    transition: all 0.2s ease;
}
.aiap-theme-modern .aiap-wizard-stepnum.is-active{
    background: var(--primary);
    color: var(--primary-fg);
    border-color: var(--primary);
}
.aiap-theme-modern .aiap-wizard-stepnum.is-done{
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

/* ステップコンテンツ */
.aiap-theme-modern .aiap-wizard-form{
    padding: 28px 32px;
}
.aiap-theme-modern .aiap-wizard-step{
    display: none;
}
.aiap-theme-modern .aiap-wizard-step.is-active{
    display: block;
    animation: aiap-wizard-fadein 0.25s ease;
}
@keyframes aiap-wizard-fadein{
    from{opacity:0; transform: translateY(4px);}
    to{opacity:1; transform: translateY(0);}
}
.aiap-theme-modern .aiap-wizard-step-title{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--txt);
    letter-spacing: -0.01em;
}
.aiap-theme-modern .aiap-wizard-step-sub{
    color: var(--txt-m);
    font-size: 13px;
    margin: 0 0 18px;
}

/* プリセット (Step 1) */
.aiap-theme-modern .aiap-wizard-presets{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}
.aiap-theme-modern .aiap-wizard-preset{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: var(--card);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-wizard-preset:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-sm);
    transform: translateY(-1px);
}
/* .aiap-wizard-preset.is-selected の active 枠は上方で他コンポーネントと集約済み */
.aiap-theme-modern .aiap-wizard-preset-icon{
    font-size: 22px;
    flex: 0 0 auto;
}
.aiap-theme-modern .aiap-wizard-preset-name{
    font-size: 13px;
    font-weight: 500;
    color: var(--txt);
}

/* オプション (Step 2: 頻度) */
.aiap-theme-modern .aiap-wizard-options{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aiap-theme-modern .aiap-wizard-option{
    display: block;
    cursor: pointer;
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 14px 16px;
    background: var(--card);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-wizard-option:hover{
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-wizard-option input[type="radio"]{
    display: none;
}
.aiap-theme-modern .aiap-wizard-option input[type="radio"]:checked + .aiap-wizard-option-body{
    color: var(--txt);
}
/* .aiap-wizard-option:has(input:checked) の active 枠は上方で他コンポーネントと集約済み */
.aiap-theme-modern .aiap-wizard-option-body{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
}
.aiap-theme-modern .aiap-wizard-option-icon{
    grid-row: 1 / 3;
    align-self: center;
    font-size: 22px;
}
.aiap-theme-modern .aiap-wizard-option-name{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
}
.aiap-theme-modern .aiap-wizard-option-desc{
    font-size: 12px;
    color: var(--txt-m);
}

/* レビュー (Step 4) */
.aiap-theme-modern .aiap-wizard-review{
    list-style: none;
    margin: 0 0 8px;
    padding: 16px 18px;
    background: var(--bg-soft);
    border: 1px solid var(--bdr-l);
    border-radius: var(--r);
}
.aiap-theme-modern .aiap-wizard-review li{
    padding: 6px 0;
    font-size: 13px;
    color: var(--txt);
    line-height: 1.6;
    border-bottom: 1px solid var(--bdr-l);
}
.aiap-theme-modern .aiap-wizard-review li:last-child{
    border-bottom: 0;
}
.aiap-theme-modern .aiap-wizard-review li strong{
    color: var(--txt-m);
    font-weight: 500;
    margin-right: 8px;
    min-width: 80px;
    display: inline-block;
}

/* アクション (戻る/次へ) */
.aiap-theme-modern .aiap-wizard-actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bdr-l);
}

/* スキップリンク */
.aiap-theme-modern .aiap-wizard-skip{
    text-align: center;
    padding: 16px;
    margin: 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--bdr-l);
}
.aiap-theme-modern .aiap-wizard-skip a{
    color: var(--txt-l);
    font-size: 12px;
    text-decoration: none;
}
.aiap-theme-modern .aiap-wizard-skip a:hover{
    color: var(--txt-m);
    text-decoration: underline;
}

/* ≤ 600px: プリセットを 1 列に */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-wizard{
        margin: 12px;
        border-radius: var(--r);
    }
    .aiap-theme-modern .aiap-wizard-header{
        padding: 20px 18px 16px;
    }
    .aiap-theme-modern .aiap-wizard-form{
        padding: 18px 18px;
    }
    .aiap-theme-modern .aiap-wizard-presets{
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   全タブ統一 (Phase 4): provider / image / prompts / quickpost / logs
   既存の hero / panel / form を Linear/Stripe トーンに揃える
   ======================================================================== */

/* === 全ヒーローを コンパクトなページタイトルに === */
.aiap-theme-modern .aiap-provider-hero,
.aiap-theme-modern .aiap-img-hero,
.aiap-theme-modern .aiap-imgset-hero{
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
}
.aiap-theme-modern .aiap-provider-hero-eyebrow,
.aiap-theme-modern .aiap-img-hero-eyebrow,
.aiap-theme-modern .aiap-imgset-eyebrow{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--txt-l);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.aiap-theme-modern .aiap-provider-hero-title,
.aiap-theme-modern .aiap-img-hero-title,
.aiap-theme-modern .aiap-imgset-title{
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    line-height: 1.3;
    border: 0;
    padding: 0;
}
.aiap-theme-modern .aiap-provider-hero-sub,
.aiap-theme-modern .aiap-img-hero-sub,
.aiap-theme-modern .aiap-imgset-lede{
    color: var(--txt-m);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
}

/* === プロバイダカード (選択カード) === */
.aiap-theme-modern .aiap-provider-card{
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-provider-card:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}
/* .aiap-provider-card.is-active 等の active 枠は上方で他コンポーネントと集約済み */

/* === プロバイダパネル (展開時のフォーム) === */
.aiap-theme-modern .aiap-provider-panel{
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--sh-xs);
    margin-top: 12px;
    overflow: hidden;
}
.aiap-theme-modern .aiap-provider-panel-header{
    padding: 14px 18px;
    border-bottom: 1px solid var(--bdr-l);
    background: var(--bg-soft);
    font-weight: 600;
    color: var(--txt);
    font-size: 14px;
}

/* === プロバイダフォーム === */
.aiap-theme-modern .aiap-provider-form{
    max-width: none;
    margin: 0;
}

/* === 画像プリセットカード (Phase 1 で対応済みだが念のため整える) === */
.aiap-theme-modern .aiap-imgset-card,
.aiap-theme-modern .aiap-preset-card{
    border-radius: var(--r);
}

/* === 画像プリセット選択時の枠 === */
/* .aiap-imgset-card[aria-checked="true"] 等の active 枠は上方で他コンポーネントと集約済み */

/* === プロンプト 2 カラムレイアウト === */
.aiap-theme-modern .aiap-prompts-layout{
    gap: 16px;
}
.aiap-theme-modern .aiap-prompts-col{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
}

/* === クイック投稿 === */
.aiap-theme-modern .aiap-quickpost{
    max-width: none;
    margin: 0;
}
.aiap-theme-modern .aiap-quickpost-form{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    padding: 20px 22px;
}

/* === ログテーブル / セクション === */
.aiap-theme-modern .aiap-logs-table-section,
.aiap-theme-modern .aiap-run-logs-section{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    padding: 0;
    overflow: hidden;
}
.aiap-theme-modern .aiap-logs-table-section .aiap-section-header,
.aiap-theme-modern .aiap-run-logs-section .aiap-section-header{
    padding: 14px 18px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--bdr-l);
}
.aiap-theme-modern .aiap-logs-table-section .aiap-section-body,
.aiap-theme-modern .aiap-run-logs-section .aiap-section-body{
    padding: 0;
    overflow-x: hidden; /* 共通ブレークポイント運用: 横スクロールではなく列幅調整で吸収 */
}
.aiap-theme-modern .aiap-logs-table-section table.widefat,
.aiap-theme-modern .aiap-run-logs-section table.widefat{
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

/* モバイル: 上の desktop 向けテーブル表示を解除。
   モバイルでは tr が display:block の縦カードリストになるので固定 min-width は不要。
   .aiap-theme-modern を付けて admin.css 側より specificity を上げて確実に勝たせる。 */
@media screen and (max-width: 782px){
    .aiap-theme-modern .aiap-logs-table-section .aiap-section-body,
    .aiap-theme-modern .aiap-run-logs-section .aiap-section-body{
        overflow-x: hidden;
    }
    .aiap-theme-modern .aiap-logs-table-section table.widefat,
    .aiap-theme-modern .aiap-run-logs-section table.widefat{
        min-width: 0;
        width: 100%;
    }
}

/* === セクション (アコーディオンじゃない素の section も整える) === */
.aiap-theme-modern .aiap-wrap > .aiap-section:not([class*="logs"]):not([class*="run"]),
.aiap-theme-modern .aiap-main .aiap-section:not(details):not([class*="logs"]):not([class*="run"]){
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    margin-bottom: 12px;
}
.aiap-theme-modern .aiap-wrap > .aiap-section:not([class*="logs"]):not([class*="run"]) > .aiap-section-header,
.aiap-theme-modern .aiap-main .aiap-section:not(details):not([class*="logs"]):not([class*="run"]) > .aiap-section-header{
    padding: 14px 18px;
    border-bottom: 1px solid var(--bdr-l);
}
.aiap-theme-modern .aiap-wrap > .aiap-section:not([class*="logs"]):not([class*="run"]) > .aiap-section-body,
.aiap-theme-modern .aiap-main .aiap-section:not(details):not([class*="logs"]):not([class*="run"]) > .aiap-section-body{
    padding: 16px 18px 18px;
}

/* === FAQ アイテム (FAQ タブ用) === */
.aiap-theme-modern .aiap-faq-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === タスク一覧の各タスクカード === */
.aiap-theme-modern .aiap-task-row,
.aiap-theme-modern .aiap-task-card{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-task-row:hover,
.aiap-theme-modern .aiap-task-card:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-sm);
}

/* === エディタ周り === */
.aiap-theme-modern .aiap-editor-textarea,
.aiap-theme-modern .aiap-editor-textarea-mono{
    border-radius: var(--r-sm);
    border: 1px solid var(--bdr);
    background: var(--card);
    box-shadow: var(--sh-xs);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-editor-textarea-mono{
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
}
.aiap-theme-modern .aiap-editor-textarea:focus,
.aiap-theme-modern .aiap-editor-textarea-mono:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.1);
    outline: none;
}

/* === マッピングテーブル (動的言語マップ等) === */
.aiap-theme-modern .aiap-mapping-table{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* === スイッチ (toggle) を黒 primary に === */
.aiap-theme-modern .aiap-toggle-switch input:checked + .aiap-toggle-slider{
    background: var(--primary) !important;
}
.aiap-theme-modern .aiap-switch input:checked + .aiap-switch-slider,
.aiap-theme-modern .aiap-switch input:checked ~ .aiap-switch-slider{
    background: var(--primary) !important;
}

/* === Pro pill / pro badge を黒地に === */
.aiap-theme-modern .aiap-pro-pill,
.aiap-theme-modern .aiap-pro-badge{
    background: var(--primary);
    color: var(--primary-fg);
    border: 1px solid var(--primary);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* === セグメント (radio group) を Linear っぽく === */
.aiap-theme-modern .aiap-segment{
    display: inline-flex;
    background: var(--bg-soft);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    padding: 3px;
    gap: 0;
}
.aiap-theme-modern .aiap-segment-option{
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--txt-m);
    cursor: pointer;
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-segment-option input{
    display: none;
}
.aiap-theme-modern .aiap-segment-option.is-active,
.aiap-theme-modern .aiap-segment-option:has(input:checked){
    background: var(--card);
    color: var(--txt);
    box-shadow: var(--sh-xs);
}

/* === 警告色のチップ === */
.aiap-theme-modern .aiap-pro-cta,
.aiap-theme-modern .aiap-section-cta{
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}
.aiap-theme-modern .aiap-pro-cta:hover,
.aiap-theme-modern .aiap-section-cta:hover{
    text-decoration: underline;
}

/* === SEO セクション === */
.aiap-theme-modern .aiap-seo-detail{
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--bdr-l);
    border-radius: var(--r-sm);
}
.aiap-theme-modern .aiap-seo-group-label{
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-l);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 8px 0 4px;
}
.aiap-theme-modern .aiap-seo-check{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--txt);
}

/* ========================================================================
   Phase 5: Task Management UX 強化 (タスク一覧カード)
   ======================================================================== */
.aiap-theme-modern .aiap-task-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aiap-theme-modern .aiap-task-card{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    overflow: hidden;
}
.aiap-theme-modern .aiap-task-card:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-md);
}
.aiap-theme-modern .aiap-task-card.is-enabled{
    border-left: 3px solid var(--green);
}
.aiap-theme-modern .aiap-task-card.is-disabled{
    border-left: 3px solid var(--bdr);
    background: var(--bg-soft);
    opacity: 0.85;
}

.aiap-theme-modern .aiap-task-card-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
}

.aiap-theme-modern .aiap-task-card-text{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === ヘッド: バッジ + ID === */
.aiap-theme-modern .aiap-task-card-head{
    display: flex;
    align-items: center;
    gap: 8px;
}
.aiap-theme-modern .aiap-task-badge{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}
.aiap-theme-modern .aiap-task-badge::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* .aiap-task-badge-on の緑バッジは上方で他コンポーネントと集約済み */
.aiap-theme-modern .aiap-task-badge-off{
    background: var(--bg-hover);
    color: var(--txt-l);
    border-color: var(--bdr);
}
.aiap-theme-modern .aiap-task-id{
    font-size: 11px;
    color: var(--txt-l);
    font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* === プロンプトテキスト === */
.aiap-theme-modern .aiap-task-card-prompt{
    font-size: 13px;
    color: var(--txt);
    line-height: 1.55;
    font-weight: 500;
    word-break: normal;
    overflow-wrap: break-word;
}

/* === メタ情報 (スケジュール / 実行回数 / 最終投稿) === */
.aiap-theme-modern .aiap-task-card-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-task-meta-item{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-task-meta-item .dashicons{
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--txt-l);
    line-height: 1;
}

/* === アクション === */
.aiap-theme-modern .aiap-task-card-actions{
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.aiap-theme-modern .aiap-task-card-actions .aiap-btn-icon-only{
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--txt-m);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--sh-xs);
    padding: 0;
}
.aiap-theme-modern .aiap-task-card-actions .aiap-btn-icon-only:hover{
    background: var(--bg-hover);
    color: var(--txt);
    border-color: var(--txt-l);
}
.aiap-theme-modern .aiap-task-card-actions .aiap-btn-danger-icon:hover{
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.aiap-theme-modern .aiap-task-card-actions .dashicons{
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* === 編集 details === */
.aiap-theme-modern .aiap-task-edit{
    border-top: 1px solid var(--bdr-l);
    background: var(--bg-soft);
    padding: 16px 18px;
}
.aiap-theme-modern .aiap-task-edit:not([open]){
    border-top: 0;
    padding: 0;
}

/* === 「タスク追加」ボタンを目立たせる === */
.aiap-theme-modern .aiap-add-task-toggle-wrap{
    margin: 0 0 12px;
}
.aiap-theme-modern .aiap-add-task-toggle-wrap .button{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-fg);
    font-weight: 500;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    cursor: pointer;
}
.aiap-theme-modern .aiap-add-task-toggle-wrap .button:hover{
    background: #27272a;
    border-color: #27272a;
    box-shadow: var(--sh-sm);
}

/* === セクションカウント (タスク数バッジ) === */
.aiap-theme-modern .aiap-section-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 9999px;
    background: var(--bg-soft);
    border: 1px solid var(--bdr);
    color: var(--txt-m);
    font-size: 11px;
    font-weight: 600;
}

/* レスポンシブ: モバイルでは meta を縦積み */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-task-card-row{
        flex-direction: column;
    }
    .aiap-theme-modern .aiap-task-card-actions{
        align-self: flex-end;
    }
    .aiap-theme-modern .aiap-task-card-meta{
        gap: 4px 12px;
    }
}

/* ========================================================================
   Phase 6: Quick Post (今すぐ書き込み) UX 強化
   - .aiap-quickpost / .aiap-quickpost-form は L1499 (Phase 10 root fix) で定義済み。
     ここでは Quick Post 内部のサブコンポーネントだけを扱う。
   ======================================================================== */

/* === エディタ部分 (textarea + ヘッダ) === */
.aiap-theme-modern .aiap-quickpost-editor{
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--bdr-l);
    background: var(--card);
}
.aiap-theme-modern .aiap-quickpost-editor-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.aiap-theme-modern .aiap-quickpost-editor .aiap-editor-label{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
    letter-spacing: -0.01em;
}
.aiap-theme-modern .aiap-quickpost-charcount{
    font-size: 11px;
    color: var(--txt-l);
    font-variant-numeric: tabular-nums;
    background: var(--bg-soft);
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid var(--bdr-l);
    transition: all 0.15s ease;
}
/* .aiap-quickpost-charcount.is-active の緑バッジは上方で他コンポーネントと集約済み */

/* === textarea を大きく見やすく === */
.aiap-theme-modern .aiap-quickpost-textarea{
    width: 100%;
    min-height: 130px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--txt);
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
    resize: vertical;
    font-family: inherit;
}
.aiap-theme-modern .aiap-quickpost-textarea::placeholder{
    color: var(--txt-l);
}
.aiap-theme-modern .aiap-quickpost-textarea:focus{
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.aiap-theme-modern .aiap-quickpost-editor .aiap-editor-hint{
    font-size: 12px;
    color: var(--txt-l);
    margin: 8px 0 0;
}

/* === オプション 3 カード横並び === */
.aiap-theme-modern .aiap-quickpost-options-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 18px 24px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--bdr-l);
}
.aiap-theme-modern .aiap-quickpost-option-card{
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--r);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--sh-xs);
    transition: all 0.15s ease;
}
.aiap-theme-modern .aiap-quickpost-option-card:hover{
    border-color: var(--txt-l);
    box-shadow: var(--sh-sm);
}
.aiap-theme-modern .aiap-quickpost-option-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-m);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aiap-theme-modern .aiap-quickpost-option-label .dashicons{
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--txt-l);
}
.aiap-theme-modern .aiap-quickpost-option-card .aiap-select,
.aiap-theme-modern .aiap-quickpost-option-card .aiap-input-text{
    border-radius: var(--r-sm);
    height: 34px;
    font-size: 13px;
}
.aiap-theme-modern .aiap-quickpost-option-card .aiap-field-row{
    display: flex;
    align-items: center;
    gap: 6px;
}
.aiap-theme-modern .aiap-quickpost-option-card .aiap-field-unit{
    font-size: 12px;
    color: var(--txt-m);
}

/* === ピル (Yes/No/Auto) === */
.aiap-theme-modern .aiap-quickpost-pill-group{
    display: flex;
    gap: 0;
    background: var(--bg-soft);
    border: 1px solid var(--bdr);
    border-radius: var(--r-sm);
    padding: 3px;
}
.aiap-theme-modern .aiap-quickpost-pill{
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.aiap-theme-modern .aiap-quickpost-pill input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.aiap-theme-modern .aiap-quickpost-pill span{
    display: block;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--txt-m);
    border-radius: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aiap-theme-modern .aiap-quickpost-pill input:checked + span{
    background: var(--card);
    color: var(--txt);
    box-shadow: var(--sh-xs);
    font-weight: 600;
}

/* === CTA ボタン === */
.aiap-theme-modern .aiap-quickpost-action{
    padding: 18px 24px 22px;
    background: var(--card);
    display: flex;
    justify-content: flex-end;
}
.aiap-theme-modern .aiap-quickpost-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-fg);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
}
.aiap-theme-modern .aiap-quickpost-cta:hover:not(:disabled){
    background: #27272a;
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}
.aiap-theme-modern .aiap-quickpost-cta:active:not(:disabled){
    transform: translateY(0);
    box-shadow: var(--sh-xs);
}
.aiap-theme-modern .aiap-quickpost-cta:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}
.aiap-theme-modern .aiap-quickpost-cta .dashicons{
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* === プログレスエリアの整理 === */
.aiap-theme-modern .aiap-progress{
    border-top: 1px solid var(--bdr-l);
    background: var(--bg-soft);
    padding: 18px 24px;
}
.aiap-theme-modern .aiap-progress-step{
    padding: 8px 0;
    font-size: 13px;
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-progress-step.is-running{
    color: var(--blue);
    font-weight: 500;
}
.aiap-theme-modern .aiap-progress-step.is-done{
    color: var(--green);
}
.aiap-theme-modern .aiap-progress-step.is-error{
    color: var(--red);
}

/* === レスポンシブ === */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-quickpost-options-grid{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-quickpost-editor{
        padding: 18px 16px 14px;
    }
    .aiap-theme-modern .aiap-quickpost-options-grid{
        padding: 16px;
    }
    .aiap-theme-modern .aiap-quickpost-action{
        padding: 16px;
    }
    .aiap-theme-modern .aiap-quickpost-cta{
        width: 100%;
        justify-content: center;
    }
}

/* ========================================================================
   Phase 7: タスク管理タブ 再構成 (ヘッダ CTA + 2カラム改善)
   ======================================================================== */
/* ヘッダ右に「+ タスク追加」CTA を置けるように */
.aiap-theme-modern .aiap-section-header.aiap-section-header-with-action{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
}
.aiap-theme-modern .aiap-section-header-with-action .aiap-section-title-row{
    display: flex;
    align-items: center;
    gap: 10px;
}
.aiap-theme-modern .aiap-section-header-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    height: 34px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-fg);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--sh-xs);
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.aiap-theme-modern .aiap-section-header-cta:hover{
    background: #27272a;
    border-color: #27272a;
    box-shadow: var(--sh-sm);
}
.aiap-theme-modern .aiap-section-header-cta .dashicons{
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* タスク ID ラベル (連番) のスタイル更新 */
.aiap-theme-modern .aiap-task-id{
    font-size: 11px;
    color: var(--txt-l);
    font-weight: 500;
    font-family: inherit; /* 連番はモノスペースじゃなく通常フォント */
    background: var(--bg-soft);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--bdr-l);
}

/* 2 カラムレイアウトを 1 カラムに変更 (右がメインで左が補助) */
.aiap-theme-modern .aiap-prompts-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 992px){
    .aiap-theme-modern .aiap-prompts-layout{
        grid-template-columns: 360px 1fr;
        align-items: start;
    }
    /* システムプロンプト (左) を sticky にして読みやすく */
    .aiap-theme-modern .aiap-prompts-col-system{
        position: sticky;
        top: 24px;
    }
}

/* システムプロンプト textarea の高さを調整 */
.aiap-theme-modern .aiap-prompts-col-system textarea{
    min-height: 240px;
    resize: vertical;
}

/* === タスク名 (Phase 8) === */
.aiap-theme-modern .aiap-task-name{
    font-size: 14px;
    font-weight: 600;
    color: var(--txt);
    margin-right: auto;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aiap-theme-modern .aiap-task-card-head{
    flex-wrap: wrap;
}

/* ========================================================================
   Phase 9: タスクカード 1 行レイアウト
   ======================================================================== */
.aiap-theme-modern .aiap-task-card-row-compact{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
}

/* 左端の状態ドット */
.aiap-theme-modern .aiap-task-status-dot{
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bdr);
}
.aiap-theme-modern .aiap-task-status-dot.is-on{
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* メイン: タスク名 + メタ情報 (2 行構成) */
.aiap-theme-modern .aiap-task-card-main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 1 行目: 名前 + ID */
.aiap-theme-modern .aiap-task-name-line{
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.aiap-theme-modern .aiap-task-name-line .aiap-task-name{
    margin-right: 0;
}
.aiap-theme-modern .aiap-task-id-mini{
    font-size: 11px;
    color: var(--txt-l);
    font-weight: 500;
    flex: 0 0 auto;
}

/* 2 行目: アイコン + テキスト */
.aiap-theme-modern .aiap-task-card-meta-line{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--txt-m);
}
.aiap-theme-modern .aiap-task-card-meta-line .aiap-task-meta-item{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aiap-theme-modern .aiap-task-card-meta-line .aiap-task-meta-item .dashicons{
    width: 13px;
    height: 13px;
    font-size: 13px;
    color: var(--txt-l);
    line-height: 1;
}

/* アクション: 右端揃え (停止/編集/削除/追加) */
.aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-actions{
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* 1 行レイアウト時はカードの左 border は維持、内側の status dot で動作中を示す */
.aiap-theme-modern .aiap-task-card.is-disabled .aiap-task-card-row-compact{
    opacity: 0.7;
}

/* レスポンシブ: 720px 以下では 2 行に折り返す */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-task-card-row-compact{
        flex-wrap: wrap;
    }
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-main{
        flex-basis: calc(100% - 24px);
    }
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-actions{
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--bdr-l);
        margin-top: 4px;
    }
}

/* ========================================================================
   Phase 11: モバイル表示の追加微調整
   ======================================================================== */

/* === タスクカード モバイル === */
@media (max-width: 782px){
    /* 状態ドットは非表示 (左 border が状態を示すので不要) */
    .aiap-theme-modern .aiap-task-status-dot{
        display: none;
    }
    /* main を完全に幅いっぱい使う */
    .aiap-theme-modern .aiap-task-card-row-compact .aiap-task-card-main{
        flex-basis: 100%;
    }
    /* タスク名行を改行可に (ID は別行に) */
    .aiap-theme-modern .aiap-task-name-line{
        flex-wrap: wrap;
    }
}

/* === ダッシュボード メトリクスカード モバイル === */
/* 4 つ横並びは ≤480px で 1 列に */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-dash-grid{
        grid-template-columns: 1fr;
    }
}

/* === セクションヘッダー右の CTA モバイル === */
/* Phase 7 で「+ タスク追加」をヘッダー右に置いたが、モバイルでは見切れることがあるので flex-wrap */
@media (max-width: 782px){
    .aiap-theme-modern .aiap-section-header.aiap-section-header-with-action{
        flex-wrap: wrap;
        gap: 8px;
    }
    .aiap-theme-modern .aiap-section-header-cta{
        flex-shrink: 0;
    }
}


/* Wide layout hotfix: ブラウザ横幅に追従させる */
.aiap-theme-modern .aiap-wrap{
    width: auto !important;
    max-width: none !important;
}
.aiap-theme-modern .aiap-shell,
.aiap-theme-modern .aiap-main,
.aiap-theme-modern .aiap-provider-form,
.aiap-theme-modern .aiap-settings-form,
.aiap-theme-modern .aiap-prompts-form,
.aiap-theme-modern .aiap-quickpost,
.aiap-theme-modern .aiap-imgset{
    width: 100% !important;
    max-width: none !important;
}

/* ========================================================================
   Quick Post progress layout fix
   - Prevent the "すぐに書き込み" status area and right-side video from being clipped.
   - Keep the wide layout fix intact.
   ======================================================================== */
.aiap-theme-modern .aiap-quickpost-form .aiap-progress,
.aiap-theme-modern .aiap-quickpost .aiap-progress{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 22px 24px;
    background: var(--bg-soft);
    border: 0;
    border-top: 1px solid var(--bdr-l);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    overflow: visible;
}

.aiap-theme-modern .aiap-quickpost-form .aiap-progress-main,
.aiap-theme-modern .aiap-quickpost .aiap-progress-main{
    min-width: 0;
    width: 100%;
}

.aiap-theme-modern .aiap-quickpost-form .aiap-progress-media,
.aiap-theme-modern .aiap-quickpost .aiap-progress-media{
    width: 220px;
    max-width: 100%;
    justify-self: end;
    align-self: start;
}

.aiap-theme-modern .aiap-quickpost-form .aiap-progress-video,
.aiap-theme-modern .aiap-quickpost .aiap-progress-video{
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.aiap-theme-modern .aiap-quickpost-form .aiap-progress-result,
.aiap-theme-modern .aiap-quickpost .aiap-progress-result{
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aiap-theme-modern .aiap-quickpost-form .aiap-progress-result .notice,
.aiap-theme-modern .aiap-quickpost .aiap-progress-result .notice{
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 992px){
    .aiap-theme-modern .aiap-quickpost-form .aiap-progress,
    .aiap-theme-modern .aiap-quickpost .aiap-progress{
        grid-template-columns: 1fr;
    }
    .aiap-theme-modern .aiap-quickpost-form .aiap-progress-media,
    .aiap-theme-modern .aiap-quickpost .aiap-progress-media{
        width: min(260px, 100%);
        justify-self: start;
    }
}

/* ========================================================================
   モバイル(<=782px)レイアウトの基盤

   設計方針 (旧「REAL mobile overflow fix」を構造ごと書き直したもの):
   - 旧版は .wrap / .aiap-wrap / .aiap-shell ... に width:100% !important を
     一括で当てる「核兵器ルール」だったが、box-sizing:border-box の下では
     box が親の content 幅をフルに占有し、margin が box の外側に張り出して
     viewport を超え、html{overflow-x:hidden} で切られる事故が起きていた
     (右が切れる現象 / 左の選択カード box-shadow が切れる現象、両方の真因)。
   - 本実装はガター(余白)を margin ではなく padding(border-box の内側)で取る
     ことで、box が viewport を超えない状態を保証する。
   - WP コアの .wrap はモバイルで margin:0 12px 0 2px と非対称のため、
     プラグイン管理画面に限り margin を打ち消し、自前の .aiap-wrap で
     左右対称 14px のガターを作る (カード選択時の box-shadow 0 0 0 3px が
     ガター内に収まるので切られない)。
   ======================================================================== */
@media (max-width: 782px){
  /* グローバル overflow ガード: 想定外の長文 (URL, コード, 翻訳等) で
     横スクロールが発生したときの最終防衛線。本来は overflow させない CSS が
     正解で、これに頼らず作るべきだが、ユーザーコンテンツが入る都合上残す。 */
  html, body{
    overflow-x: hidden !important;
    width: 100%;
  }

  /* WP コアの .wrap (margin:0 12px 0 2px) を一旦リセット。
     ガターは下の .aiap-wrap の padding 側で作る。 */
  .aiap-theme-modern.wp-admin .wrap,
  .aiap-theme-modern .wrap{
    margin: 0;
  }

  /* 左右対称 14px のガター。border-box なので padding 込みでも box は
     viewport を超えない。これがモバイル全画面共通の余白の源泉。 */
  .aiap-theme-modern .aiap-wrap{
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* grid item が flex/grid 親の中で min-width:auto により縮まないバグの
     防衛策。横幅の強制ではなく、収縮可能性の宣言。!important は不要。 */
  .aiap-theme-modern .aiap-shell,
  .aiap-theme-modern .aiap-main{
    min-width: 0;
  }

  /* 長いタスク名等のはみ出し対策 (タスクカード内部のレイアウトに閉じる) */
  .aiap-theme-modern .aiap-task-card{
    overflow: hidden;
  }

  .aiap-theme-modern .aiap-task-card-row-compact{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .aiap-theme-modern .aiap-task-card-main{
    width: 100%;
  }

  .aiap-theme-modern .aiap-task-name{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.45;
  }

  .aiap-theme-modern .aiap-task-card-actions{
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid var(--bdr-l);
    padding-top: 10px;
  }

  .aiap-theme-modern .aiap-section-header.aiap-section-header-with-action{
    flex-direction: column;
    align-items: stretch;
  }

  .aiap-theme-modern .aiap-section-header-cta{
    width: 100%;
    justify-content: center;
  }
}
