/* ============================================================
   Smart Text Comparison Tool – styles.css
   Phase 4: CSS変数による完全テーマ化 + ダークモード対応
   ============================================================ */

/* ============================
   CSS カスタムプロパティ（ライトモード）
   ============================ */
#stc-comparison-tool {
    --stc-bg:            #ffffff;
    --stc-bg-sub:        #f8f9fa;
    --stc-bg-input:      #ffffff;
    --stc-bg-raised:     #f3f4f6;
    --stc-border:        #e5e7eb;
    --stc-border-mid:    #d1d5db;
    --stc-text:          #111827;
    --stc-text-sub:      #374151;
    --stc-text-muted:    #6b7280;
    --stc-text-disabled: #9ca3af;
    --stc-primary:       #2563eb;
    --stc-primary-dark:  #1d4ed8;
    --stc-primary-light: #eff6ff;
    --stc-primary-ring:  rgba(37,99,235,.15);
    --stc-primary-border:#bfdbfe;
    --stc-removed-bg:    #fee2e2;
    --stc-removed-text:  #7f1d1d;
    --stc-removed-line:  #dc2626;
    --stc-removed-badge: #dc2626;
    --stc-added-bg:      #dcfce7;
    --stc-added-text:    #14532d;
    --stc-added-badge:   #16a34a;
    --stc-badge-blue-bg: #dbeafe; --stc-badge-blue-fg: #1e40af;
    --stc-badge-red-bg:  #fee2e2; --stc-badge-red-fg:  #991b1b;
    --stc-badge-green-bg:#dcfce7; --stc-badge-green-fg:#166534;
    --stc-badge-gray-bg: #f3f4f6; --stc-badge-gray-fg: #374151;
    --stc-sample-bg:     #fffbeb;
    --stc-sample-border: #fde68a;
    --stc-sample-label:  #92400e;
    --stc-sample-hover:  #fef3c7;
    --stc-sample-hborder:#f59e0b;
    --stc-nav-bg:        #eff6ff;
    --stc-nav-border:    #bfdbfe;
    --stc-nav-text:      #1e40af;
    --stc-shadow:        0 2px 16px rgba(0,0,0,.07);
}

/* ============================
   ダークモード – システム設定追従
   ============================ */
@media (prefers-color-scheme: dark) {
    #stc-comparison-tool:not(.stc-force-light) {
        --stc-bg:            #1f2937;
        --stc-bg-sub:        #111827;
        --stc-bg-input:      #1f2937;
        --stc-bg-raised:     #374151;
        --stc-border:        #374151;
        --stc-border-mid:    #4b5563;
        --stc-text:          #f9fafb;
        --stc-text-sub:      #e5e7eb;
        --stc-text-muted:    #9ca3af;
        --stc-text-disabled: #6b7280;
        --stc-primary:       #3b82f6;
        --stc-primary-dark:  #2563eb;
        --stc-primary-light: #1e3a5f;
        --stc-primary-ring:  rgba(59,130,246,.2);
        --stc-primary-border:#1e40af;
        --stc-removed-bg:    #4c1414;
        --stc-removed-text:  #fca5a5;
        --stc-removed-line:  #f87171;
        --stc-removed-badge: #ef4444;
        --stc-added-bg:      #14402a;
        --stc-added-text:    #86efac;
        --stc-added-badge:   #22c55e;
        --stc-badge-blue-bg: #1e3a5f; --stc-badge-blue-fg: #93c5fd;
        --stc-badge-red-bg:  #4c1414; --stc-badge-red-fg:  #fca5a5;
        --stc-badge-green-bg:#14402a; --stc-badge-green-fg:#86efac;
        --stc-badge-gray-bg: #374151; --stc-badge-gray-fg: #d1d5db;
        --stc-sample-bg:     #292524;
        --stc-sample-border: #78350f;
        --stc-sample-label:  #fcd34d;
        --stc-sample-hover:  #451a03;
        --stc-sample-hborder:#d97706;
        --stc-nav-bg:        #1e3a5f;
        --stc-nav-border:    #1e40af;
        --stc-nav-text:      #93c5fd;
        --stc-shadow:        0 2px 16px rgba(0,0,0,.4);
    }
}

/* ============================
   ダークモード – 手動トグル .stc-dark
   ============================ */
#stc-comparison-tool.stc-dark {
    --stc-bg:            #1f2937;
    --stc-bg-sub:        #111827;
    --stc-bg-input:      #1f2937;
    --stc-bg-raised:     #374151;
    --stc-border:        #374151;
    --stc-border-mid:    #4b5563;
    --stc-text:          #f9fafb;
    --stc-text-sub:      #e5e7eb;
    --stc-text-muted:    #9ca3af;
    --stc-text-disabled: #6b7280;
    --stc-primary:       #3b82f6;
    --stc-primary-dark:  #2563eb;
    --stc-primary-light: #1e3a5f;
    --stc-primary-ring:  rgba(59,130,246,.2);
    --stc-primary-border:#1e40af;
    --stc-removed-bg:    #4c1414;
    --stc-removed-text:  #fca5a5;
    --stc-removed-line:  #f87171;
    --stc-removed-badge: #ef4444;
    --stc-added-bg:      #14402a;
    --stc-added-text:    #86efac;
    --stc-added-badge:   #22c55e;
    --stc-badge-blue-bg: #1e3a5f; --stc-badge-blue-fg: #93c5fd;
    --stc-badge-red-bg:  #4c1414; --stc-badge-red-fg:  #fca5a5;
    --stc-badge-green-bg:#14402a; --stc-badge-green-fg:#86efac;
    --stc-badge-gray-bg: #374151; --stc-badge-gray-fg: #d1d5db;
    --stc-sample-bg:     #292524;
    --stc-sample-border: #78350f;
    --stc-sample-label:  #fcd34d;
    --stc-sample-hover:  #451a03;
    --stc-sample-hborder:#d97706;
    --stc-nav-bg:        #1e3a5f;
    --stc-nav-border:    #1e40af;
    --stc-nav-text:      #93c5fd;
    --stc-shadow:        0 2px 16px rgba(0,0,0,.4);
}

/* ============================================================
   ツール全体コンテナ
   ============================================================ */
#stc-comparison-tool {
    background-color: var(--stc-bg);
    color:            var(--stc-text);
    padding: 24px;
    border-radius: 12px;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: var(--stc-shadow);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
                 "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

/* ============================================================
   ツールバー（ダークモードトグル + プライバシーバッジ）
   ============================================================ */
.stc-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stc-privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--stc-added-text);
    background: var(--stc-added-bg);
    border: 1px solid var(--stc-added-badge);
    border-radius: 20px;
    padding: 3px 10px;
    letter-spacing: 0.03em;
}

#stc-darkmode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--stc-bg-sub);
    color: var(--stc-text-sub);
    border: 1px solid var(--stc-border-mid);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    user-select: none;
}

#stc-darkmode-toggle:hover {
    background: var(--stc-bg-raised);
    border-color: var(--stc-text-muted);
}

/* ============================================================
   テキスト入力エリア ラベル
   ============================================================ */
.text-inputs-labels {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.text-input-label {
    width: 47%;
    min-width: 280px;
    max-width: 600px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stc-text-muted);
    padding-left: 2px;
}

/* ============================================================
   テキスト入力欄
   ============================================================ */
#stc-comparison-tool .text-inputs {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#stc-comparison-tool .text-inputs textarea {
    width: 47%;
    max-width: 600px;
    min-width: 280px;
    height: 200px;
    padding: 12px;
    background: var(--stc-bg-input);
    color: var(--stc-text);
    border: 1.5px solid var(--stc-border-mid);
    border-radius: 8px;
    font-size: 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s, color 0.25s;
    line-height: 1.6;
}

#stc-comparison-tool .text-inputs textarea:focus {
    outline: none;
    border-color: var(--stc-primary);
    box-shadow: 0 0 0 3px var(--stc-primary-ring);
}

#stc-comparison-tool .text-inputs textarea::placeholder {
    color: var(--stc-text-disabled);
}

/* ============================================================
   サンプルテキスト行
   ============================================================ */
.sample-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--stc-sample-bg);
    border: 1px solid var(--stc-sample-border);
    border-radius: 8px;
    transition: background-color 0.25s, border-color 0.25s;
}

.sample-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--stc-sample-label);
    white-space: nowrap;
}

.sample-btn {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    background: var(--stc-bg);
    color: var(--stc-text-sub);
    border: 1px solid var(--stc-border-mid);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
}

.sample-btn:hover {
    background: var(--stc-sample-hover);
    border-color: var(--stc-sample-hborder);
    color: var(--stc-sample-label);
}

.sample-btn.sample-active {
    background: var(--stc-added-bg);
    border-color: var(--stc-added-badge);
    color: var(--stc-added-text);
    transform: scale(0.97);
}

/* ============================================================
   オプションバー
   ============================================================ */
.options-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    background: var(--stc-bg-sub);
    border: 1px solid var(--stc-border);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 16px;
    transition: background-color 0.25s, border-color 0.25s;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--stc-text-muted);
}

/* モードタブ */
.mode-tabs {
    display: flex;
    border: 1px solid var(--stc-border-mid);
    border-radius: 8px;
    overflow: hidden;
}

.mode-tab {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: var(--stc-bg);
    color: var(--stc-text-sub);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    border-right: 1px solid var(--stc-border-mid);
}

.mode-tab:last-child { border-right: none; }

.mode-tab:hover {
    background: var(--stc-primary-light);
    color: var(--stc-primary);
}

.mode-tab.active {
    background: var(--stc-primary);
    color: #ffffff;
    font-weight: 700;
}

/* 無視オプション */
.ignore-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ignore-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--stc-text-sub);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s;
}

.ignore-label:hover {
    background: var(--stc-bg-raised);
}

.ignore-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--stc-primary);
    cursor: pointer;
}

/* カラーオプション */
.color-options {
    display: flex;
    gap: 12px;
}

.color-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--stc-text-sub);
    font-weight: 500;
}

.color-label input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--stc-border-mid);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    background: var(--stc-bg);
}

/* ============================================================
   ボタン行
   ============================================================ */
.button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

#stc-comparison-tool #compare-button {
    background-color: var(--stc-primary);
    color: #ffffff;
    padding: 12px 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}

#stc-comparison-tool #compare-button:hover {
    background-color: var(--stc-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

#stc-comparison-tool #compare-button:active {
    transform: translateY(0);
    box-shadow: none;
}

#stc-comparison-tool #clear-button {
    background-color: var(--stc-bg);
    color: var(--stc-text-muted);
    padding: 11px 22px;
    border: 1.5px solid var(--stc-border-mid);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#stc-comparison-tool #clear-button:hover {
    background-color: var(--stc-bg-raised);
    border-color: var(--stc-text-muted);
    color: var(--stc-text-sub);
}

/* ============================================================
   結果サマリー（バッジ）
   ============================================================ */
.results-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
    gap: 8px;
}

.highlight-summary {
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    transition: background-color 0.25s, color 0.25s;
}

.badge-blue  { color: var(--stc-badge-blue-fg);  background-color: var(--stc-badge-blue-bg); }
.badge-red   { color: var(--stc-badge-red-fg);   background-color: var(--stc-badge-red-bg); }
.badge-green { color: var(--stc-badge-green-fg); background-color: var(--stc-badge-green-bg); }
.badge-gray  { color: var(--stc-badge-gray-fg);  background-color: var(--stc-badge-gray-bg); }

/* ============================================================
   詳細統計
   ============================================================ */
.detail-stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: var(--stc-bg-sub);
    border: 1px solid var(--stc-border);
    border-radius: 10px;
    padding: 12px 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 4px;
    transition: background-color 0.25s, border-color 0.25s;
}

.detail-stats-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 28px;
    min-width: 100px;
}

.detail-stats-divider {
    width: 1px;
    background: var(--stc-border);
    align-self: stretch;
    margin: 4px 0;
}

.detail-stats-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stc-text-muted);
    margin-bottom: 2px;
}

.detail-stats-col span:not(.detail-stats-title):not(.stat-diff) {
    font-size: 14px;
    color: var(--stc-text-sub);
    font-weight: 500;
}

.stat-diff {
    font-size: 14px;
    font-weight: 700;
    transition: color 0.2s;
}

/* ============================================================
   差分ナビゲーションバー
   ============================================================ */
.diff-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 9px 18px;
    background: var(--stc-nav-bg);
    border: 1px solid var(--stc-nav-border);
    border-radius: 10px;
    transition: background-color 0.25s, border-color 0.25s;
}

.diff-nav-btn {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    background: var(--stc-bg);
    color: var(--stc-primary);
    border: 1px solid var(--stc-primary-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.diff-nav-btn:hover:not(:disabled) {
    background: var(--stc-primary);
    color: #ffffff;
}

.diff-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.diff-nav-index {
    font-size: 14px;
    font-weight: 700;
    color: var(--stc-nav-text);
    min-width: 64px;
    text-align: center;
}

/* ============================================================
   出力欄
   ============================================================ */
#stc-comparison-tool .output-texts {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

#stc-comparison-tool .output-block {
    width: 47%;
    max-width: 600px;
    min-width: 280px;
    border: 1.5px solid var(--stc-border);
    border-radius: 10px;
    background-color: var(--stc-bg);
    overflow: hidden;
    transition: border-color 0.25s, background-color 0.25s;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    background-color: var(--stc-bg-sub);
    border-bottom: 1px solid var(--stc-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--stc-text-sub);
    transition: background-color 0.25s, border-color 0.25s;
}

/* コピーボタン */
.copy-btn {
    background-color: transparent;
    color: var(--stc-primary);
    border: 1px solid var(--stc-primary-border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.copy-btn:hover {
    background-color: var(--stc-primary-light);
}

.copy-btn.copied {
    background-color: var(--stc-added-bg);
    color: var(--stc-added-text);
    border-color: var(--stc-added-badge);
}

/* 行ベース出力（行番号をコンテンツと同一 div に配置） */
.output-content-wrap {
    overflow: hidden;
}

/* 1行分のコンテナ：番号 + 本文を横並び */
.line-row {
    display: flex;
    align-items: flex-start;
}

/* 行番号：折り返しが起きても常に左上に固定 */
.line-num {
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    padding: 1px 8px 0 0;
    text-align: right;
    font-size: 12px;
    line-height: 1.8;
    color: var(--stc-text-disabled);
    font-family: "SFMono-Regular", Consolas, monospace;
    background: var(--stc-bg-sub);
    border-right: 1px solid var(--stc-border);
    user-select: none;
    transition: background-color 0.25s, border-color 0.25s;
}

/* 行本文：長くなれば折り返し。行番号はズレない */
.line-content {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.8;
}

/* 出力コンテンツ本体（スクロールコンテナ） */
#stc-comparison-tool #output1,
#stc-comparison-tool #output2,
#stc-comparison-tool .output-content {
    min-width: 0;
    padding: 4px 0;
    font-size: 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    min-height: 150px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.8;
    background: var(--stc-bg);
    color: var(--stc-text);
    transition: background-color 0.25s, color 0.25s;
}

/* スクロールバー */
.output-content::-webkit-scrollbar { width: 6px; }
.output-content::-webkit-scrollbar-track { background: transparent; }
.output-content::-webkit-scrollbar-thumb {
    background: var(--stc-border-mid);
    border-radius: 3px;
}
.output-content::-webkit-scrollbar-thumb:hover {
    background: var(--stc-text-muted);
}

/* ============================================================
   差分ブロック
   ============================================================ */
.diff-block {
    display: inline;
    position: relative;
    border-radius: 3px;
    padding: 1px 2px;
}

.diff-removed {
    background-color: var(--stc-removed-bg);
    color: var(--stc-removed-text);
    text-decoration: line-through;
    text-decoration-color: var(--stc-removed-line);
}

.diff-added {
    background-color: var(--stc-added-bg);
    color: var(--stc-added-text);
}

.diff-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: middle;
    letter-spacing: 0.05em;
}

.diff-removed .diff-label { background: var(--stc-removed-badge); color: #fff; }
.diff-added   .diff-label { background: var(--stc-added-badge);   color: #fff; }

.diff-empty {
    font-style: italic;
    opacity: 0.6;
    font-size: 12px;
}

.empty-placeholder {
    color: var(--stc-text-disabled);
    font-style: italic;
    font-size: 13px;
}

/* ナビゲーションアクティブ差分 */
.diff-block.diff-nav-active {
    outline: 2px solid var(--stc-primary);
    outline-offset: 1px;
}

/* ============================================================
   スマホ対応（768px以下）
   ============================================================ */
@media (max-width: 768px) {
    #stc-comparison-tool {
        padding: 14px;
        border-radius: 0;
        box-shadow: none;
    }

    #stc-comparison-tool .text-inputs textarea,
    #stc-comparison-tool .output-block,
    .text-input-label {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .text-inputs-labels { flex-direction: column; gap: 0; }
    .text-input-label   { margin-top: 8px; }
    .results-summary    { justify-content: flex-start; }
    .stc-toolbar        { justify-content: flex-start; }

    .button-row {
        flex-direction: column;
        gap: 8px;
    }

    #stc-comparison-tool #compare-button,
    #stc-comparison-tool #clear-button,
    #stc-comparison-tool #share-button {
        width: 100%;
        text-align: center;
    }

    .line-row             { font-size: 12px; }
    .diff-nav-bar         { flex-wrap: wrap; gap: 8px; }
    .detail-stats-divider { display: none; }
    .detail-stats-col     { padding: 4px 14px; }
    .options-bar          { flex-direction: column; gap: 14px; }
}

/* ============================================================
   極小スクリーン（480px以下）
   ============================================================ */
@media (max-width: 480px) {
    .mode-tab   { padding: 6px 10px; font-size: 12px; }
    .sample-btn { padding: 5px 10px; font-size: 12px; }

    #stc-comparison-tool #compare-button {
        font-size: 15px;
        padding: 12px 24px;
    }
}

/* ============================================================
   Phase 5: URL 共有ボタン
   ============================================================ */
#stc-comparison-tool #share-button {
    background: var(--stc-bg-raised);
    color: var(--stc-text);
    border: 1.5px solid var(--stc-border);
    border-radius: var(--stc-radius);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
}

#stc-comparison-tool #share-button:hover {
    background: var(--stc-primary);
    color: #fff;
    border-color: var(--stc-primary);
}

#stc-comparison-tool #share-button.copied {
    background: var(--stc-added-bg);
    color: var(--stc-added-text);
    border-color: var(--stc-added-text);
}

/* ============================================================
   Phase 5: リアルタイム比較チェックボックス
   ============================================================ */
.realtime-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--stc-text-sub);
    cursor: pointer;
    padding: 8px 14px;
    border-radius: var(--stc-radius);
    border: 1.5px solid var(--stc-border);
    background: var(--stc-bg-input);
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    user-select: none;
}

.realtime-label:hover {
    border-color: var(--stc-primary);
    color: var(--stc-primary);
}

.realtime-label input[type="checkbox"] {
    accent-color: var(--stc-primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ============================================================
   Phase 5: インライン表示トグル
   ============================================================ */
.inline-view-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 6px 0;
}

.btn-inline-toggle {
    background: var(--stc-bg-raised);
    color: var(--stc-text-sub);
    border: 1.5px solid var(--stc-border);
    border-radius: var(--stc-radius);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.btn-inline-toggle:hover {
    background: var(--stc-primary);
    color: #fff;
    border-color: var(--stc-primary);
}

.btn-inline-toggle.active {
    background: var(--stc-primary);
    color: #fff;
    border-color: var(--stc-primary);
}

/* ============================================================
   Phase 5: インライン差分出力
   ============================================================ */
.inline-diff-output {
    background: var(--stc-bg-input);
    border: 1.5px solid var(--stc-border);
    border-radius: var(--stc-radius);
    overflow: hidden;
    margin-bottom: 24px;
    font-family: 'Courier New', Consolas, 'Noto Sans Mono', monospace;
    font-size: 13px;
}

.inline-diff-body {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 500px;
}

.inline-line {
    display: flex;
    align-items: stretch;
    min-height: 24px;
    line-height: 1.6;
    border-bottom: 1px solid var(--stc-border);
}

.inline-line:last-child {
    border-bottom: none;
}

.inline-sign {
    flex-shrink: 0;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
}

.inline-text {
    flex: 1;
    padding: 3px 12px 3px 6px;
    word-break: break-all;
    white-space: pre-wrap;
}

.inline-removed {
    background: var(--stc-removed-bg);
    color: var(--stc-removed-text);
}

.inline-removed .inline-sign {
    background: rgba(220, 38, 38, 0.15);
    color: var(--stc-removed-text);
}

.inline-added {
    background: var(--stc-added-bg);
    color: var(--stc-added-text);
}

.inline-added .inline-sign {
    background: rgba(22, 163, 74, 0.15);
    color: var(--stc-added-text);
}

.inline-context {
    background: var(--stc-bg-input);
    color: var(--stc-text-sub);
}

.inline-context .inline-sign {
    color: var(--stc-border);
}

/* ============================================================
   Phase 5: モバイル対応
   ============================================================ */
@media (max-width: 768px) {
    .realtime-label          { width: 100%; justify-content: flex-start; }
    #stc-comparison-tool #share-button { width: 100%; text-align: center; }
    .inline-view-toggle-row  { justify-content: flex-start; }
    .btn-inline-toggle       { width: 100%; text-align: center; }
    .inline-diff-body        { max-height: 320px; }
}