/* Kraga Ayarlar v2: sakin, satır tabanlı, profesyonel ayarlar paneli (masaüstü + mobil çekmece). */

/* ---------- Kabuk ---------- */
html #settingsModal#settingsModal.modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html #settingsModal#settingsModal .modal.modal-large {
    width: min(1040px, 94vw); max-width: none; height: min(720px, 86vh); max-height: 86vh;
    border-radius: 14px; border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* ---------- Sol gezinme ---------- */
html #settingsModal#settingsModal .modal-sidebar {
    width: 248px; flex: none; padding: 14px 10px 12px;
    background: var(--bg-primary); border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}
html #settingsModal#settingsModal .modal-sidebar-header { display: none; }
.st-search { position: relative; margin: 2px 4px 14px; }
.st-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.st-search input {
    padding-left: 34px !important;
    width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary);
    font: 500 .88rem var(--font-body); outline: none;
}
.st-search input::placeholder { color: var(--text-muted); }
.st-search input:focus { border-color: var(--border-neon); }
.modal-nav-group { padding: 14px 12px 6px; font-size: .74rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.modal-nav-group[hidden], html #settingsModal#settingsModal .modal-nav-item[hidden] { display: none !important; }
html #settingsModal#settingsModal .modal-nav { gap: 2px; }
html #settingsModal#settingsModal .modal-nav-item {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 7px 12px;
    border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary);
    font: 500 .9rem/1.2 var(--font-body); text-align: left; box-shadow: none;
}
html #settingsModal#settingsModal .modal-nav-item svg { width: 18px; height: 18px; flex: none; stroke-width: 1.6; color: var(--text-muted); }
html #settingsModal#settingsModal .modal-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
html #settingsModal#settingsModal .modal-nav-item.active { background: color-mix(in srgb, var(--text-primary) 9%, transparent); color: var(--text-primary); font-weight: 600; }
html #settingsModal#settingsModal .modal-nav-item.active svg { color: var(--text-primary); }

/* ---------- İçerik ---------- */
html #settingsModal#settingsModal .modal-content-area { background: var(--bg-secondary); scroll-behavior: smooth; }
html #settingsModal#settingsModal .modal-header {
    position: sticky; top: 0; z-index: 5; padding: 20px 36px 10px; border: 0;
    background: linear-gradient(var(--bg-secondary) 70%, transparent);
}
html #settingsModal#settingsModal .modal-title { font: 650 1.2rem/1.2 var(--font-body); letter-spacing: -.015em; color: var(--text-primary); display: flex; align-items: center; gap: 0; }
html #settingsModal#settingsModal .modal-title svg { display: none; }
html #settingsModal#settingsModal .modal-save-btn {
    height: 34px; padding: 0 16px; border-radius: 8px; border: 0;
    background: var(--text-primary) !important; color: var(--bg-deep) !important;
    font: 600 .86rem var(--font-body); box-shadow: none; transform: none;
}
html #settingsModal#settingsModal .modal-save-btn:hover { background: color-mix(in srgb, var(--text-primary) 86%, transparent) !important; box-shadow: none; transform: none; }
html #settingsModal#settingsModal .modal-close { width: 34px; height: 34px; border-radius: 8px; color: var(--text-secondary); }
html #settingsModal#settingsModal .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
html #settingsModal#settingsModal .modal-body.modal-tab { padding: 4px 36px 40px; gap: 0; max-width: 820px; width: 100%; }

.st-section { margin: 26px 0 2px; font: 600 .78rem var(--font-body); letter-spacing: .02em; color: var(--text-muted); }
.st-section:first-child { margin-top: 8px; }

/* Satırlar: sol etiket + açıklama, sağ kontrol */
html #settingsModal#settingsModal .modal-tab .form-group {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    margin: 0 !important; padding: 16px 0 !important; border: 0; border-bottom: 1px solid var(--border-subtle);
    border-radius: 0; background: transparent !important; box-shadow: none;
}
html #settingsModal#settingsModal .modal-tab .form-group:last-child { border-bottom: 0; }
html #settingsModal#settingsModal .modal-tab .form-group > label,
html #settingsModal#settingsModal .modal-tab .form-group label {
    display: block; margin: 0 0 2px; font: 500 .95rem/1.35 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-primary) !important;
}
html #settingsModal#settingsModal .form-hint { display: block; font: 400 .84rem/1.45 var(--font-body) !important; color: var(--text-muted) !important; }
/* Satır düzeni yalnızca Genel (seçimler) ve Özellikler (anahtarlar) sekmelerinde */
html #settingsModal#settingsModal #tab-general .form-group:has(> select),
html #settingsModal#settingsModal #tab-features .form-group { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; }
html #settingsModal#settingsModal #tab-general .form-group:has(> select) > label { flex: 1; margin: 0; }
html #settingsModal#settingsModal #tab-general .form-group > select { width: 250px !important; flex: none; }
/* Girdiler */
html #settingsModal#settingsModal :is(input[type="text"], input[type="password"], input[type="url"], input[type="number"], input[type="email"], textarea, select, .form-select) {
    background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 8px;
    padding: 9px 12px; font: 400 .92rem/1.4 var(--font-body); outline: none; box-shadow: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
html #settingsModal#settingsModal :is(input, textarea, select, .form-select):focus { border-color: color-mix(in srgb, var(--text-primary) 40%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 8%, transparent); }
html #settingsModal#settingsModal ::placeholder { color: var(--text-muted); }
html #settingsModal#settingsModal select, html #settingsModal#settingsModal .form-select { min-height: 38px; cursor: pointer; }

/* Anahtar (toggle) */
html #settingsModal#settingsModal .toggle-switch { width: 40px; min-width: 40px; height: 22px; }
html #settingsModal#settingsModal .toggle-switch .slider { border-radius: 999px; transition: background 150ms ease; }
html #settingsModal#settingsModal .toggle-switch input:not(:checked) + .slider { background: color-mix(in srgb, var(--text-primary) 14%, transparent) !important; border: 0 !important; }
html #settingsModal#settingsModal .toggle-switch input:checked + .slider { background: var(--text-primary) !important; border: 0 !important; }
html #settingsModal#settingsModal .toggle-switch .slider:before { width: 16px; height: 16px; left: 3px; bottom: 3px; box-shadow: none !important; background: var(--text-secondary) !important; }
html #settingsModal#settingsModal .toggle-switch input:checked + .slider:before { transform: translateX(18px); background: var(--bg-deep) !important; }

/* Düğmeler */
html #settingsModal#settingsModal :is(.settings-btn, .btn-secondary, .btn-primary) {
    min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-default);
    background: transparent; color: var(--text-primary); font: 500 .88rem var(--font-body); box-shadow: none; cursor: pointer;
}
html #settingsModal#settingsModal :is(.settings-btn, .btn-secondary):hover { background: var(--bg-hover); }

/* API kipi kartları: sade iki seçenek */
html #settingsModal#settingsModal .api-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 18px; }
html #settingsModal#settingsModal .api-mode-tab.mode-card {
    display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; text-align: left;
    border: 1px solid var(--border-default); border-radius: 10px; background: transparent; color: var(--text-secondary); box-shadow: none;
}
html #settingsModal#settingsModal .api-mode-tab.mode-card svg { width: 22px; height: 22px; flex: none; stroke-width: 1.6; }
html #settingsModal#settingsModal .api-mode-tab.mode-card span { font: 600 .92rem var(--font-body) !important; }
html #settingsModal#settingsModal .api-mode-tab.mode-card.active { border-color: color-mix(in srgb, var(--text-primary) 45%, transparent); background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); box-shadow: none; }

/* Bilgi kutuları ve kartlar */
html #settingsModal#settingsModal .promo-info-box, html #settingsModal#settingsModal .settings-card, html #settingsModal#settingsModal .stat-card {
    border: 1px solid var(--border-subtle); border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

/* Yetenek kartları (Skills) */
html #settingsModal#settingsModal .skill-card {
    border: 1px solid var(--border-subtle); border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 3%, transparent); box-shadow: none;
}
html #settingsModal#settingsModal .skill-card:hover { border-color: var(--border-default); }

/* Kaydırma çubuğu */
html #settingsModal#settingsModal ::-webkit-scrollbar { width: 8px; height: 8px; }
html #settingsModal#settingsModal ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 14%, transparent); border-radius: 8px; }
html #settingsModal#settingsModal ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Masaüstünde gizli mobil öğeler ---------- */
.st-handle, .st-root-head, .st-back { display: none; }

/* ---------- Giriş animasyonları ---------- */
html #settingsModal#settingsModal .modal.modal-large { transform: translateY(10px) scale(.985); opacity: 0; transition: transform 320ms cubic-bezier(.22,1,.36,1), opacity 220ms ease; }
html #settingsModal#settingsModal.active .modal.modal-large { transform: none; opacity: 1; }
html #settingsModal#settingsModal .modal-tab.active { animation: stTabIn 320ms cubic-bezier(.22,1,.36,1) both; }
@keyframes stTabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html #settingsModal#settingsModal .modal.modal-large, html #settingsModal#settingsModal .modal-tab.active { transition: none; animation: none; }
}

/* ---------- Kullanım paneli ---------- */
html #settingsModal#settingsModal .us-wrap { display: flex; flex-direction: column; gap: 16px; }
.us-hero { display: flex; align-items: center; gap: 28px; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, transparent), color-mix(in srgb, var(--text-primary) 1.5%, transparent)); }
.us-ring { --ring: var(--text-primary); position: relative; width: 132px; height: 132px; flex: none; }
.us-ring[data-level="mid"] { --ring: var(--neon-yellow); }
.us-ring[data-level="high"] { --ring: var(--neon-red); }
.us-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.us-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.us-ring-track { stroke: color-mix(in srgb, var(--text-primary) 10%, transparent); }
.us-ring-arc { stroke: var(--ring); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms cubic-bezier(.22,1,.36,1), stroke 300ms ease; }
.us-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.us-ring-pct { font: 700 1.55rem/1 var(--font-body); letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.us-ring-cap { margin-top: 4px; font-size: .72rem; color: var(--text-muted); }
.us-hero-text { flex: 1; min-width: 0; }
.us-eyebrow { font-size: .78rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.us-big { margin-top: 6px; font: 700 2.2rem/1.05 var(--font-body); letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.us-sub { margin-top: 4px; font-size: .9rem; color: var(--text-secondary); }
.us-bar { margin-top: 16px; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--text-primary) 10%, transparent); overflow: hidden; }
.us-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--text-primary); transition: width 1100ms cubic-bezier(.22,1,.36,1); }
.us-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.us-tile { padding: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
.us-tile-label { font-size: .78rem; color: var(--text-muted); }
.us-tile-val { margin-top: 6px; font: 650 1.25rem/1.1 var(--font-body) !important; color: var(--text-primary) !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html #settingsModal#settingsModal #usageCustomView { border: 1px solid var(--border-subtle) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--text-primary) 3%, transparent) !important; padding: 32px 24px !important; }
html #settingsModal#settingsModal #usageCustomView h3 { font: 650 1.05rem var(--font-body); color: var(--text-primary) !important; }

/* ---------- MCP sekmesi ---------- */
html #settingsModal#settingsModal #tab-mcp .mcp-header-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
html #settingsModal#settingsModal #tab-mcp .mcp-stat-box { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
html #settingsModal#settingsModal #tab-mcp .mcp-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); font-size: 0; }
html #settingsModal#settingsModal #tab-mcp .mcp-stat-num { color: var(--text-primary); font: 700 1.35rem var(--font-body); }
html #settingsModal#settingsModal #tab-mcp .mcp-stat-label { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--text-muted); }
html #settingsModal#settingsModal #tab-mcp .mcp-hero-card { height: auto; overflow: visible; border-radius: 14px; padding: 18px; background: color-mix(in srgb, var(--text-primary) 3%, transparent); border: 1px solid var(--border-default); box-shadow: none; }
html #settingsModal#settingsModal #tab-mcp .mcp-hero-badge { background: color-mix(in srgb, var(--text-primary) 8%, transparent); border-color: var(--border-default); color: var(--text-secondary); }
html #settingsModal#settingsModal #tab-mcp .btn-mcp-authorize { min-height: 38px; border-radius: 8px; }
html #settingsModal#settingsModal #tab-mcp .mcp-section > div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Mobil: tam ekran, liste → ayrıntı sayfaları ---------- */
@media (max-width: 768px) {
    html #settingsModal#settingsModal.modal-overlay { align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; background: var(--bg-primary); -webkit-backdrop-filter: none; backdrop-filter: none; }
    html #settingsModal#settingsModal .modal.modal-large {
        position: relative; display: block !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: hidden;
        background: var(--bg-primary) !important; box-shadow: none !important;
        transform: translateY(5%); opacity: 0; transition: transform 380ms cubic-bezier(.22,1,.36,1), opacity 240ms ease;
    }
    html #settingsModal#settingsModal.active .modal.modal-large { transform: none; opacity: 1; }
    html #settingsModal#settingsModal .modal.modal-large.st-dragging { transition: none; opacity: 1; }
    .st-handle { display: none !important; }

    /* Kök: bölüm listesi */
    html #settingsModal#settingsModal .modal-sidebar {
        position: absolute !important; inset: 0; z-index: 1 !important; width: 100% !important; max-width: 100% !important;
        display: flex !important; flex-direction: column; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-primary) !important; border: 0 !important;
        transition: transform 380ms cubic-bezier(.22,1,.36,1), opacity 300ms ease; will-change: transform;
    }
    .st-root-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px 14px; touch-action: none; }
    .st-root-title { margin: 0; font: 700 1.75rem/1.1 var(--font-body); letter-spacing: -.025em; color: var(--text-primary); }
    .st-root-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-secondary); }
    html #settingsModal#settingsModal .st-search { display: block !important; margin: 4px 0 6px; }
    html #settingsModal#settingsModal .st-search input { height: 44px; border-radius: 12px; font-size: 1rem; padding-left: 42px !important; }
    html #settingsModal#settingsModal .st-search svg { left: 14px; }
    html #settingsModal#settingsModal .modal-nav { display: flex !important; flex-direction: column !important; overflow: visible !important; gap: 8px !important; padding: 0 !important; }
    html #settingsModal#settingsModal .modal-nav-group { display: block !important; padding: 18px 6px 4px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
    html #settingsModal#settingsModal .modal-nav-group[hidden] { display: none !important; }
    html #settingsModal#settingsModal .modal-nav-item {
        width: 100%; min-height: 58px !important; height: auto !important; padding: 0 14px !important; gap: 14px !important; border-radius: 14px !important; justify-content: flex-start;
        border: 1px solid var(--border-subtle) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important;
        font-size: 1.02rem !important; font-weight: 500 !important; box-shadow: none !important;
        animation: stItemIn 420ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 32ms + 120ms);
        transition: transform 120ms ease, background 150ms ease;
    }
    html #settingsModal#settingsModal .modal-nav-item:active { transform: scale(.985); background: var(--bg-tertiary) !important; }
    html #settingsModal#settingsModal .modal-nav-item svg {
        width: 36px !important; height: 36px !important; padding: 8px; flex: none; border-radius: 10px; stroke-width: 1.6;
        background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-secondary) !important;
    }
    html #settingsModal#settingsModal .modal-nav-item.active { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-subtle) !important; }
    html #settingsModal#settingsModal .modal-nav-item::after {
        content: ''; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--text-muted); border-top: 2px solid var(--text-muted); transform: rotate(45deg);
    }

    /* Ayrıntı: sağdan kayarak gelen sayfa */
    html #settingsModal#settingsModal .modal-content-area {
        position: absolute !important; inset: 0; z-index: 20 !important; display: flex !important; flex-direction: column; overflow: hidden !important;
        background: var(--bg-primary) !important; transform: translateX(100%); visibility: hidden;
        transition: transform 380ms cubic-bezier(.22,1,.36,1), visibility 0s linear 380ms; box-shadow: -24px 0 48px rgba(0, 0, 0, .35);
    }
    html #settingsModal#settingsModal .modal.st-detail .modal-content-area { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(.22,1,.36,1), visibility 0s; }
    html #settingsModal#settingsModal .modal.st-detail .modal-sidebar { transform: translateX(-22%); opacity: .4; pointer-events: none; }
    html #settingsModal#settingsModal .modal-header {
        position: static; order: 0; flex: none; display: flex; align-items: center; gap: 4px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 8px !important;
        background: var(--bg-primary) !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important;
    }
    .st-back { display: inline-grid !important; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); }
    .st-back:active { background: var(--bg-hover); }
    html #settingsModal#settingsModal .modal-title { flex: 1; min-width: 0; max-width: none !important; font-size: 1.12rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html #settingsModal#settingsModal .modal-header > div { margin-left: auto; }
    html #settingsModal#settingsModal .modal-close { display: none !important; }
    html #settingsModal#settingsModal .modal-save-btn { height: 36px; padding: 0 16px; }
    html #settingsModal#settingsModal .modal-body.modal-tab { order: 1; max-width: none; }
    html #settingsModal#settingsModal .modal-body.modal-tab.active {
        flex: 1 1 0% !important; min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding: 16px 18px calc(36px + env(safe-area-inset-bottom, 0px)) !important; gap: 0;
    }
    html #settingsModal#settingsModal .modal-tab:not(.active) { display: none !important; }
    html #settingsModal#settingsModal .st-section { margin-top: 20px; }
    html #settingsModal#settingsModal #tab-general .form-group:has(> select) { flex-direction: column; align-items: stretch; gap: 8px; }
    html #settingsModal#settingsModal #tab-general .form-group > select { width: 100% !important; min-height: 46px; }
    html #settingsModal#settingsModal #tab-features .form-group { gap: 16px; padding: 16px 0 !important; }
    html #settingsModal#settingsModal :is(input[type="text"], input[type="password"], input[type="url"], input[type="number"], textarea, select) { min-height: 46px; font-size: 16px !important; border-radius: 10px; }
    html #settingsModal#settingsModal .api-mode-tabs { grid-template-columns: 1fr; }

    .us-hero { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
    .us-ring { align-self: center; }
    .us-big { font-size: 2rem; }
    .us-tiles { grid-template-columns: 1fr 1fr; }
    .us-tiles .us-tile:last-child { grid-column: 1 / -1; }
    html #settingsModal#settingsModal #tab-mcp .mcp-hero-header { flex-direction: column; align-items: stretch; gap: 12px; }
    html #settingsModal#settingsModal #tab-mcp .btn-mcp-authorize { width: 100%; justify-content: center; }
}

/* ---------- Yetenek ayrıntısı ---------- */
html #skillDetailModal#skillDetailModal.modal-overlay { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html #skillDetailModal#skillDetailModal .modal { max-width: 640px !important; width: 94vw; border-radius: 14px; border: 1px solid var(--border-default); background: var(--bg-secondary); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 88dvh; }
html #skillDetailModal#skillDetailModal .modal-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--border-subtle); background: none; }
html #skillDetailModal#skillDetailModal #skillDetailIcon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; font-size: 1.5rem !important; background: color-mix(in srgb, var(--text-primary) 7%, transparent); border: 1px solid var(--border-subtle); }
html #skillDetailModal#skillDetailModal #skillDetailTitle { font: 650 1.2rem/1.2 var(--font-body) !important; letter-spacing: -.015em; color: var(--text-primary); }
html #skillDetailModal#skillDetailModal #skillDetailCategory { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 6px; font: 600 .72rem var(--font-body) !important; text-transform: none !important; letter-spacing: .02em; color: var(--text-secondary) !important; background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
html #skillDetailModal#skillDetailModal .modal-body { flex: 1 1 auto; min-height: 0; max-height: none !important; padding: 18px 22px 8px; gap: 0; overflow-y: auto; }
html #skillDetailModal#skillDetailModal #skillDetailDesc { font: 400 .95rem/1.6 var(--font-body) !important; color: var(--text-secondary) !important; margin-bottom: 22px !important; }
html #skillDetailModal#skillDetailModal .modal-body label { font: 600 .84rem var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-primary) !important; margin-bottom: 10px !important; }
html #skillDetailModal#skillDetailModal .modal-body > div { margin-bottom: 22px !important; }
html #skillDetailModal#skillDetailModal #skillDetailTriggers { gap: 6px !important; }
html #skillDetailModal#skillDetailModal .skill-trigger-chip { font: 500 .8rem/1.2 var(--font-body) !important; padding: 5px 10px; border-radius: 7px; color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); border: 1px solid var(--border-subtle); }
html #skillDetailModal#skillDetailModal #skillDetailCommands { flex-direction: column !important; gap: 8px !important; }
html #skillDetailModal#skillDetailModal .skill-flag-chip { display: flex !important; align-items: baseline; gap: 14px; width: 100%; padding: 11px 14px; text-align: left !important; border-radius: 10px; border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--text-primary) 3%, transparent); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
html #skillDetailModal#skillDetailModal .skill-flag-chip:hover { background: var(--bg-hover); border-color: var(--border-default); }
html #skillDetailModal#skillDetailModal .skill-flag-name { flex: none; min-width: 96px; font: 600 .8rem var(--font-mono) !important; color: var(--text-primary) !important; text-align: left !important; }
html #skillDetailModal#skillDetailModal .skill-flag-desc { flex: 1; font: 400 .86rem/1.45 var(--font-body) !important; color: var(--text-secondary) !important; text-align: left !important; }
html #skillDetailModal#skillDetailModal #skillDetailChecklist { font: 400 .88rem/1.55 var(--font-body) !important; border-radius: 10px; border-color: var(--border-subtle); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
html #skillDetailModal#skillDetailModal #skillDetailChecklist span[style*="neon-green"] { color: var(--text-secondary) !important; }
html #skillDetailModal#skillDetailModal #skillDetailPrompt { font-size: .78rem !important; line-height: 1.55; border-radius: 10px; border-color: var(--border-subtle); background: color-mix(in srgb, var(--text-primary) 3%, transparent); color: var(--text-secondary) !important; }
html #skillDetailModal#skillDetailModal .modal-footer { margin: 0 !important; padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); flex-wrap: wrap; gap: 12px !important; }
html #skillDetailModal#skillDetailModal #skillDetailMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 220px; font: 500 .8rem var(--font-body) !important; color: var(--text-muted); }
.sd-sep { opacity: .5; }
.sd-state { font-weight: 600; color: var(--text-muted); }
.sd-state.on { color: var(--neon-green); }
.sd-src { color: var(--text-secondary); overflow-wrap: anywhere; }
html #skillDetailModal#skillDetailModal .modal-footer .btn-outline, html #skillDetailModal#skillDetailModal .modal-footer .btn-primary { min-height: 40px; padding: 0 16px !important; border-radius: 9px; font: 600 .88rem var(--font-body) !important; }
html #skillDetailModal#skillDetailModal .modal-footer .btn-outline { border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); }
html #skillDetailModal#skillDetailModal .modal-footer .btn-primary { border: 0; background: var(--text-primary); color: var(--bg-deep); }
@media (max-width: 768px) {
    html #skillDetailModal#skillDetailModal.modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    html #skillDetailModal#skillDetailModal .modal { width: 100% !important; max-width: 100% !important; max-height: 92dvh; border-radius: 18px 18px 0 0; border-bottom: 0; margin: 0 !important; }
    html #skillDetailModal#skillDetailModal .modal-header { padding: 18px 18px 14px; }
    html #skillDetailModal#skillDetailModal .modal-body { padding: 16px 18px 6px; }
    html #skillDetailModal#skillDetailModal .skill-flag-chip { flex-direction: column; align-items: flex-start; gap: 4px; }
    html #skillDetailModal#skillDetailModal .modal-footer { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
    html #skillDetailModal#skillDetailModal #skillDetailMeta { flex-basis: 100%; }
    html #skillDetailModal#skillDetailModal .modal-footer > div:last-child { display: flex; width: 100%; gap: 10px; }
    html #skillDetailModal#skillDetailModal .modal-footer > div:last-child > button { flex: 1; justify-content: center; }
}

/* ================= Tipografi ölçeği (tüm ayar sekmeleri) =================
   Dağınık 10–16px arası ondalıklı boyutlar yerine 4 kademe:
   başlık .95rem · açıklama .84rem · not .75rem · kontrol .92rem */
html #settingsModal#settingsModal .modal-tab { font-family: var(--font-body); }
html #settingsModal#settingsModal .modal-tab :is(label, .form-group > span:first-child) { font-size: .95rem; font-weight: 500; line-height: 1.35; }
html #settingsModal#settingsModal .modal-tab :is(.form-hint, .mcp-desc, .promo-hint, p) { font-size: .84rem !important; line-height: 1.5; font-weight: 400; }
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.8rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.8rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.8em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.82rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.82rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.82em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.85rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.85rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.85em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.88rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.88rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.88em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.9rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.9rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.9em"] { font-size: .84rem !important; line-height: 1.5; }
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.6rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.6rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.6em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.65rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.65rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.65em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.7rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.7rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.7em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.72rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.72rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.72em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.75rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.75rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.75em"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.78rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size:0.78rem"],
html #settingsModal#settingsModal .modal-tab [style*="font-size: 0.78em"] { font-size: .75rem !important; line-height: 1.45; }
html #settingsModal#settingsModal .modal-tab :is(a, button, .token-purchase-link, b, strong) { font-weight: 600; }
html #settingsModal#settingsModal .modal-tab .optional-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; font: 500 .72rem/1.4 var(--font-body) !important; color: var(--text-muted); background: color-mix(in srgb, var(--text-primary) 7%, transparent); vertical-align: 1px; }
html #settingsModal#settingsModal .modal-tab .settings-info-line { font: 400 .8rem/1.55 var(--font-body) !important; letter-spacing: 0; color: var(--text-secondary); padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 3%, transparent); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
html #settingsModal#settingsModal .modal-tab code, html #settingsModal#settingsModal .modal-tab kbd { font-family: var(--font-mono); font-size: .8rem; }

/* Bilgi kutusu ve promo kartı */
html #settingsModal#settingsModal .promo-info-box { font-size: .86rem; line-height: 1.55; color: var(--text-secondary); padding: 14px 16px; }
html #settingsModal#settingsModal #promoStatusText { font: 600 1rem/1.3 var(--font-body) !important; color: var(--text-primary) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html #settingsModal#settingsModal #promoStatusText::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-green); flex: none; }
.promo-code-chip { font: 500 .8rem var(--font-mono); padding: 2px 8px; border-radius: 6px; color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); letter-spacing: .02em; }
html #settingsModal#settingsModal #promoUsageText { font-size: .82rem !important; color: var(--text-muted) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
html #settingsModal#settingsModal #promoTimeLeft { font: 600 .84rem var(--font-body) !important; color: var(--text-secondary) !important; }
html #settingsModal#settingsModal #promoUsageBar { background: var(--text-primary) !important; }
html #settingsModal#settingsModal #promoUsageBar { border-radius: 4px !important; }
html #settingsModal#settingsModal #removePromoBtn { min-height: 34px; padding: 0 14px !important; border-radius: 8px !important; font: 600 .84rem var(--font-body) !important; color: var(--neon-red) !important; background: color-mix(in srgb, var(--neon-red) 10%, transparent) !important; border: 1px solid color-mix(in srgb, var(--neon-red) 35%, transparent) !important; }

/* Model satırı: taşma yok */
html #settingsModal#settingsModal .model-input-row { display: flex; gap: 8px; align-items: stretch; }
html #settingsModal#settingsModal .model-input-row input { flex: 1 1 160px; min-width: 0; }
html #settingsModal#settingsModal .fetch-models-btn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); font: 500 .86rem var(--font-body); }
html #settingsModal#settingsModal .fetch-models-btn span { font-size: .86rem !important; }

@media (max-width: 768px) {
    html #settingsModal#settingsModal .modal-tab { overflow-x: hidden; }
    html #settingsModal#settingsModal .model-input-row { flex-wrap: wrap; }
    html #settingsModal#settingsModal .fetch-models-btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
    html #settingsModal#settingsModal #removePromoBtn { width: 100%; min-height: 44px; margin-bottom: 8px; }
    html #settingsModal#settingsModal #promoUsageText { white-space: normal; }
    html #settingsModal#settingsModal .modal-tab :is(.form-hint, .mcp-desc, p) { font-size: .82rem !important; }
}

html #settingsModal#settingsModal .modal-tab .form-group { border-radius: 0 !important; }

/* Token mağazası: rozet kart başlığının üstüne binmesin, kenarda asılı dursun */
html #tokenModal .package-card .pkg-badge-pill { position: relative; top: auto; right: auto; order: -1; align-self: flex-start; margin: 0 0 10px; padding: 2px 10px; border-radius: 6px; font: 600 .7rem/1.5 var(--font-body) !important; letter-spacing: .04em; text-transform: none; background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-primary); box-shadow: none; }
html #tokenModal .package-card .pkg-badge-pill.is-featured-badge { background: var(--text-primary); color: var(--bg-deep); border-color: var(--text-primary); }

/* Mobil: başlık (ve çarpı) liste kayarken yerinde kalsın; panel görünür alana tam otursun */
@media (max-width: 768px) {
    html #settingsModal#settingsModal.modal-overlay { height: 100%; }
    html #settingsModal#settingsModal .modal.modal-large { height: 100% !important; max-height: 100% !important; }
    html #settingsModal#settingsModal .modal-sidebar { padding-top: 0 !important; scroll-padding-top: 76px; }
    html #settingsModal#settingsModal .st-root-head {
        position: sticky; top: 0; z-index: 30; margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px;
        background: var(--bg-primary); border-bottom: 1px solid transparent;
    }
    html #settingsModal#settingsModal .st-root-close { width: 44px; height: 44px; position: relative; z-index: 31; touch-action: manipulation; }
    html #settingsModal#settingsModal .st-search { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 29; background: var(--bg-primary); padding: 4px 0 10px; margin: 0; }
    html #settingsModal#settingsModal .modal-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; flex: none; }
    html #settingsModal#settingsModal .modal-content-area { height: 100%; }
}