/**
 * Atex Lab — 表示設定モーダル共通スタイル（v1/public トップ・support で共有）
 * テーマ選択: アイコン付き・選択はアイコンとテキスト色で表示（背景は変えない）
 */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.is-open {
    display: flex;
}
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.modal h2 {
    margin: 0 0 16px;
    font-size: 18px;
    color: var(--title);
    text-align: center;
}
.theme-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    max-width: 200px;
}
.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
}
.theme-option:last-child {
    border-bottom: none;
}
.theme-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--link);
    cursor: pointer;
}
.theme-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
.theme-option-icon--system {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 2 A10 10 0 0 0 12 22 L12 12 Z'/%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' d='M12 2 A10 10 0 0 1 12 22'/%3E%3C/svg%3E");
}
.theme-option-icon--light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
.theme-option-icon--dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
.theme-option:hover .theme-option-icon--system,
.theme-option.is-selected .theme-option-icon--system {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230066cc' d='M12 2 A10 10 0 0 0 12 22 L12 12 Z'/%3E%3Cpath fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' d='M12 2 A10 10 0 0 1 12 22'/%3E%3C/svg%3E");
}
.theme-option:hover .theme-option-icon--light,
.theme-option.is-selected .theme-option-icon--light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
.theme-option:hover .theme-option-icon--dark,
.theme-option.is-selected .theme-option-icon--dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
/* ページがダークテーマのときだけアイコンをダーク用に。ラベル data-theme には当てない */
:root[data-theme="dark"] .theme-option-icon--system {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b0b0b0' d='M12 2 A10 10 0 0 0 12 22 L12 12 Z'/%3E%3Cpath fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' d='M12 2 A10 10 0 0 1 12 22'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-option-icon--light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-option-icon--dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-option:hover .theme-option-icon--system,
:root[data-theme="dark"] .theme-option.is-selected .theme-option-icon--system {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236eb3f7' d='M12 2 A10 10 0 0 0 12 22 L12 12 Z'/%3E%3Cpath fill='none' stroke='%236eb3f7' stroke-width='2' stroke-linecap='round' d='M12 2 A10 10 0 0 1 12 22'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-option:hover .theme-option-icon--light,
:root[data-theme="dark"] .theme-option.is-selected .theme-option-icon--light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236eb3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-option:hover .theme-option-icon--dark,
:root[data-theme="dark"] .theme-option.is-selected .theme-option-icon--dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236eb3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}