/* ========================================================================

   AI Auto Poster - Base Components

   ------------------------------------------------------------------------

   普遍的なプリミティブ: card / btn / badge / banner / input / label /

   spinner / empty-state / provider icon badges / @keyframes など。

   ======================================================================== */



.aiap-check-row{display:block;margin-bottom:6px}

.aiap-card-title-between{justify-content:space-between}

/* Card */

.aiap-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh)}

.aiap-card-accent{border-left:3px solid var(--blue)}

.aiap-card h2{font-size:14px;font-weight:700;margin:0 0 10px;padding:0 0 9px;border-bottom:1px solid var(--bdr-l);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.aiap-card h2 .ico{flex-shrink:0}

/* Provider icon badges */

.ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;font-weight:800;font-size:9px;flex-shrink:0;line-height:1}

.ico-lg{width:22px;height:22px;font-size:11px;border-radius:5px}

.ico-claude{background:#d97757;color:#fff}

.ico-openai{background:#000;color:#fff}

.ico-gemini{background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853);color:#fff}

.ico-mistral{background:#f97316;color:#fff}

.ico-groq{background:#f55036;color:#fff}

.ico-deepseek{background:#4f6df5;color:#fff}

.ico-openrouter{background:#6366f1;color:#fff}

.ico-dalle{background:#000;color:#10a37f}

.ico-imagen{background:linear-gradient(135deg,#4285f4,#ea4335);color:#fff}

.ico-stability{background:#7c3aed;color:#fff}

.ico-flux{background:#0ea5e9;color:#fff}

.ico-unsplash{background:#111;color:#fff}

.ico-pixabay{background:#2ec66d;color:#fff}

.ico-pexels{background:#05a081;color:#fff}

.ico-openverse{background:#c52b9b;color:#fff}

/* Badge */

.aiap-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600}

.aiap-badge-on{background:var(--green-bg);color:var(--green)}

.aiap-badge-off{background:#f0f0f1;color:var(--txt-l)}

.aiap-badge-free{background:#ede9fe;color:#7c3aed}

.aiap-dot{width:7px;height:7px;border-radius:50%;display:inline-block}

.aiap-dot-green{background:var(--green)}

/* Test result */

.aiap-test-result{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r);font-size:11px;font-weight:600;margin-left:4px}

.aiap-test-result-loading{color:var(--txt-l)}

.aiap-test-result-ok{background:var(--green-bg);color:var(--green)}

.aiap-test-result-error{background:var(--red-bg);color:var(--red);white-space:normal;display:inline-block;max-width:520px;vertical-align:middle}

/* Status dot for active provider */

.aiap-active-dot{color:var(--green);font-weight:bold;margin-left:4px}

/* Task table - status badges */

.aiap-status-on{color:var(--green)}

.aiap-status-off{color:var(--txt-l)}

/* Buttons */

.aiap-btn-test{font-size:12px}

.aiap-btn-delete{color:var(--red);border-color:var(--red)}

.aiap-toggle-row{margin-top:10px}

.aiap-hint-spaced{margin-top:12px}

/* Hint text */

.aiap-hint{color:var(--txt-l);font-size:11px;margin-top:2px}

/* Utility: 状態に応じた表示切替 (PHP/JS から付与/解除して使う、style="display:none" のインライン記述置換) */

.aiap-hidden{display:none}

/* Pro 専用カード自体のヘッダ強調 */

.aiap-card-pro{position:relative}

.aiap-card-pro h2{display:flex;align-items:center;flex-wrap:wrap;gap:0}

/* Form table override for tighter spacing */

.aiap-card .form-table th{padding:12px 10px 12px 0;font-size:13px;width:200px;word-break:normal;overflow-wrap:break-word;max-width:100%;box-sizing:border-box}

.aiap-card .form-table td{padding:8px 0}

.aiap-card .form-table td p.description,

.aiap-card .form-table td .description,

.aiap-card .form-table td label{word-break:normal;overflow-wrap:break-word;max-width:100%;display:block}

.aiap-subtab-current .aiap-dot {

    margin-left: 2px;

}

.aiap-subtab-panel .aiap-card {

    border: none;

    padding: 0;

    margin-bottom: 0;

}

.aiap-subtab-panel .aiap-card-accent {

    border: none;

    border-left: 4px solid #2271b1;

    padding-left: 16px;

}

.aiap-subtab-panel .aiap-scroll-stack .aiap-card{

    border: 1px solid var(--bdr-l);

    border-left: 4px solid var(--blue);

    border-radius: var(--r);

    padding: 16px 18px;

    margin-bottom: 0;

    box-shadow: none;

}

/* ===== 統一ボタンデザイン ===== */

.button.aiap-btn-primary,

.button.aiap-btn-success,

.button.aiap-btn-neutral,

.button.aiap-btn-danger,

.button.aiap-btn-danger-outline {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: 1px solid transparent;

    text-shadow: none;

    box-shadow: none;

    line-height: 1.2;

}

.button.aiap-btn-primary .dashicons,

.button.aiap-btn-success .dashicons,

.button.aiap-btn-neutral .dashicons,

.button.aiap-btn-danger .dashicons,

.button.aiap-btn-danger-outline .dashicons {

    width: 16px;

    height: 16px;

    font-size: 16px;

    line-height: 1;

}

/* primary: 青背景/白文字 */

.button.aiap-btn-primary,

.button.aiap-btn-primary:hover,

.button.aiap-btn-primary:focus {

    background: #2271b1;

    border-color: #2271b1;

    color: #fff;

}

.button.aiap-btn-primary:hover { background: #135e96; border-color: #135e96; }

.button.aiap-btn-primary:disabled,

.button.aiap-btn-primary[disabled] { background: #7eb4d8; border-color: #7eb4d8; color: #fff; opacity: 0.85; }

/* success: 緑背景/白文字 */

.button.aiap-btn-success,

.button.aiap-btn-success:hover,

.button.aiap-btn-success:focus {

    background: #1d8348;

    border-color: #1d8348;

    color: #fff;

}

.button.aiap-btn-success:hover { background: #166534; border-color: #166534; }

/* neutral: グレー背景/白文字 */

.button.aiap-btn-neutral,

.button.aiap-btn-neutral:hover,

.button.aiap-btn-neutral:focus {

    background: #6b7280;

    border-color: #6b7280;

    color: #fff;

}

.button.aiap-btn-neutral:hover { background: #4b5563; border-color: #4b5563; }

/* danger: 赤背景/白文字 */

.button.aiap-btn-danger,

.button.aiap-btn-danger:hover,

.button.aiap-btn-danger:focus {

    background: #b32d2e;

    border-color: #b32d2e;

    color: #fff;

}

.button.aiap-btn-danger:hover { background: #8f1f1f; border-color: #8f1f1f; }

/* danger-outline: 白背景/赤文字 */

.button.aiap-btn-danger-outline,

.button.aiap-btn-danger-outline:hover,

.button.aiap-btn-danger-outline:focus {

    background: #fff;

    border-color: #b32d2e;

    color: #b32d2e;

}

.button.aiap-btn-danger-outline:hover { background: #fef2f2; }

/* テストボタンの状態別カラー */

.button.aiap-btn-test.aiap-btn-test-loading,

.button.aiap-btn-test.aiap-btn-test-loading:hover,

.button.aiap-btn-test.aiap-btn-test-loading:focus {

    background: #6b7280;

    border-color: #6b7280;

    color: #fff;

    opacity: 0.9;

}

.button.aiap-btn-test.aiap-btn-test-ok,

.button.aiap-btn-test.aiap-btn-test-ok:hover,

.button.aiap-btn-test.aiap-btn-test-ok:focus {

    background: #1d8348;

    border-color: #1d8348;

    color: #fff;

}

.button.aiap-btn-test.aiap-btn-test-error,

.button.aiap-btn-test.aiap-btn-test-error:hover,

.button.aiap-btn-test.aiap-btn-test-error:focus {

    background: #b32d2e;

    border-color: #b32d2e;

    color: #fff;

    max-width: 100%;

    white-space: normal;

    text-align: left;

    line-height: 1.3;

}

@keyframes aiap-spin {

    from { transform: rotate(0deg); }

    to   { transform: rotate(360deg); }

}

.aiap-toggle-switch {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    user-select: none;

}

.aiap-toggle-switch input[type="radio"],

.aiap-toggle-switch input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

    pointer-events: none;

}

.aiap-toggle-slider {

    position: relative;

    display: inline-block;

    width: 40px;

    height: 22px;

    background: #c3c4c7;

    border-radius: 22px;

    transition: background 0.2s;

    flex: none;

}

.aiap-toggle-slider::before {

    content: "";

    position: absolute;

    top: 2px;

    left: 2px;

    width: 18px;

    height: 18px;

    background: #fff;

    border-radius: 50%;

    transition: transform 0.2s;

    box-shadow: 0 1px 3px rgba(0,0,0,0.2);

}

.aiap-toggle-switch input:checked + .aiap-toggle-slider {

    background: #1d8348;

}

.aiap-toggle-switch input:checked + .aiap-toggle-slider::before {

    transform: translateX(18px);

}

.aiap-toggle-switch input:focus-visible + .aiap-toggle-slider {

    box-shadow: 0 0 0 2px #2271b1;

}

.aiap-toggle-label {

    font-size: 13px;

    color: #1d2327;

}

.aiap-toggle-status {

    margin-left: 12px;

    font-size: 12px;

    color: #1d8348;

    font-weight: 500;

}

.aiap-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}

.aiap-field:last-child{margin-bottom:0}

.aiap-field > label{font-size:13px;font-weight:600;color:var(--txt)}

.aiap-field-hint{font-size:12px;color:var(--txt-l);line-height:1.5}

.aiap-field-row{display:flex;align-items:center;gap:8px}

.aiap-field-row .aiap-field-unit{font-size:13px;color:var(--txt-m)}

.aiap-field-note{font-size:12px;color:var(--txt-l);background:var(--blue-bg);padding:10px 12px;border-radius:6px;margin-top:14px;line-height:1.5}

@keyframes aiap-slidedown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.aiap-field-label{display:block;font-size:12px;font-weight:600;color:var(--txt);margin-bottom:5px}

.aiap-field-label-hint{color:var(--txt-l);font-weight:400;margin-left:6px;font-size:11px}

.aiap-input-text{

    flex:1;font-family:inherit;font-size:13px;

    padding:8px 11px;border:1px solid var(--bdr);border-radius:6px;

    background:#fff;color:var(--txt);min-width:0;width:100%;box-sizing:border-box;

}

.aiap-input-text:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:transparent}

.aiap-btn{

    font-family:inherit;font-size:12px;font-weight:600;

    padding:8px 12px;border:1px solid var(--bdr);border-radius:6px;

    background:#fff;color:var(--txt);cursor:pointer;transition:all .15s;

    display:inline-flex;align-items:center;gap:5px;flex-shrink:0;

}

.aiap-btn:hover{border-color:var(--txt-l);background:#fafafa}

.aiap-btn .dashicons{font-size:14px;width:14px;height:14px;line-height:1}

.aiap-btn-icon{padding:8px 10px}

.aiap-field-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px;flex-wrap:wrap;gap:8px}

.aiap-field-link{font-size:11px;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:3px}

.aiap-field-link:hover{text-decoration:underline}

/* Pro pill */

.aiap-pro-pill{

    display:inline-block;font-size:9px;font-weight:800;letter-spacing:.08em;

    padding:2px 7px;border-radius:999px;background:#1d8348;color:#fff;

    text-transform:uppercase;vertical-align:middle;

}

.aiap-checkbox-row{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:6px 0}

.aiap-checkbox-row input[type=checkbox]{margin-top:3px;flex-shrink:0}

.aiap-checkbox-row > span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}

.aiap-checkbox-row strong{font-size:13px;font-weight:600;color:var(--txt);line-height:1.4}

.aiap-radio-row{display:flex;gap:8px;align-items:center;cursor:pointer;padding:4px 0}

.aiap-radio-row input[type=radio]{flex-shrink:0}

.aiap-radio-row > span{font-size:13px;color:var(--txt);line-height:1.4}

/* Segment control (sensitivity) */

.aiap-segment{

    display:inline-flex;background:var(--bdr-l);border-radius:8px;padding:3px;gap:0;

    border:1px solid var(--bdr);

}

.aiap-segment-option{

    flex:1;cursor:pointer;text-align:center;padding:6px 12px;border-radius:6px;

    font-size:12px;font-weight:600;color:var(--txt-m);transition:all .15s;

    min-width:60px;

}

.aiap-segment-option:hover{color:var(--txt)}

.aiap-segment-option.is-active{background:#fff;color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.06)}

.aiap-segment-option input{position:absolute;opacity:0;width:0;height:0}

/* ============================================

   Banners (warning/error/info)

   ============================================ */

.aiap-banner{

    display:flex;align-items:center;gap:12px;

    padding:12px 16px;border-radius:10px;margin:0 0 16px;

    border:1px solid var(--bdr);background:var(--card);

    flex-wrap:wrap;

}

.aiap-banner-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}

.aiap-banner-warning .dashicons{color:#92400e;font-size:18px;width:18px;height:18px}

.aiap-banner-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}

.aiap-banner-error .dashicons{color:#991b1b;font-size:18px;width:18px;height:18px}

.aiap-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}

.aiap-banner-text strong{font-size:13px;font-weight:700}

.aiap-banner-cta{

    display:inline-flex;align-items:center;gap:5px;

    padding:6px 12px;background:#1d2327;color:#fff;border-radius:6px;

    font-size:12px;font-weight:600;text-decoration:none;flex-shrink:0;

}

.aiap-banner-cta:hover{background:#000;color:#fff}

.aiap-banner-cta .dashicons{font-size:13px;width:13px;height:13px;color:#fff}

.aiap-image-enable-row .aiap-toggle-switch{margin:0}

.aiap-btn-large{

    padding:11px 22px;font-size:14px;font-weight:700;

    background:var(--txt);color:#fff;border:0;border-radius:8px;cursor:pointer;

    display:inline-flex;align-items:center;gap:6px;transition:background .15s;

}

.aiap-btn-large:hover{background:#000}

.aiap-btn-large:disabled{background:var(--txt-l);cursor:not-allowed}

.aiap-btn-large .dashicons{font-size:15px;width:15px;height:15px}

.aiap-btn-icon-only{

    width:30px;height:30px;padding:0;border:1px solid var(--bdr);background:#fff;

    border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;

    color:var(--txt-m);transition:all .15s;

}

.aiap-btn-icon-only:hover{border-color:var(--txt-l);color:var(--txt);background:#fafafa}

.aiap-btn-icon-only .dashicons{font-size:15px;width:15px;height:15px;line-height:1}

.aiap-btn-danger-icon:hover{border-color:#fecaca;color:#991b1b;background:#fef2f2}

/* ============================================

   Empty state

   ============================================ */

.aiap-empty-state{

    text-align:center;padding:36px 20px;

    color:var(--txt-m);

}

.aiap-empty-state .dashicons{font-size:32px;width:32px;height:32px;color:var(--txt-l);margin-bottom:8px}

.aiap-empty-state p{margin:0;font-size:14px;font-weight:600;color:var(--txt)}

.aiap-empty-state .aiap-empty-state-sub{margin-top:4px;font-size:12px;color:var(--txt-l);font-weight:400}

/* === カード === */

.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 .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-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);

}

/* === スイッチ (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-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-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);

}

/* === バッジ拡張 === */

.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;

}

@keyframes aiap-wizard-fadein{

    from{opacity:0; transform: translateY(4px);}

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

}

/* === スイッチ (toggle) を黒 primary に === */

/* 親セレクタ `.aiap-theme-modern .aiap-toggle-switch input:checked + .aiap-toggle-slider`

   は詳細度 (0,3,2)、対する旧定義 `.aiap-toggle-switch input:checked + .aiap-toggle-slider`

   は (0,2,2) で、詳細度で既に勝つため !important は不要。 */

.aiap-theme-modern .aiap-toggle-switch input:checked + .aiap-toggle-slider{

    background: var(--primary);

}

.aiap-theme-modern .aiap-switch input:checked + .aiap-switch-slider,

.aiap-theme-modern .aiap-switch input:checked ~ .aiap-switch-slider{

    background: var(--primary);

}

/* === 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);

}

