/* Kraga Paneller: Yönetim, Mağaza, Hesap ayarları, Kişiselleştirme ve diğer form pencereleri için ortak profesyonel düzen. (Otomatik üretim: _panels_gen.cjs) */

html #adminModal#adminModal.modal-overlay,
html #profileEditModal#profileEditModal.modal-overlay,
html #customInstructionsModal#customInstructionsModal.modal-overlay,
html #projectModal#projectModal.modal-overlay,
html #mcpModal#mcpModal.modal-overlay,
html #skillModal#skillModal.modal-overlay,
html #stitchAuthModal#stitchAuthModal.modal-overlay { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html #adminModal#adminModal > .modal,
html #profileEditModal#profileEditModal > .modal,
html #customInstructionsModal#customInstructionsModal > .modal,
html #projectModal#projectModal > .modal,
html #mcpModal#mcpModal > .modal,
html #skillModal#skillModal > .modal,
html #stitchAuthModal#stitchAuthModal > .modal {
    display: flex; flex-direction: column; width: min(680px, 94vw); max-width: 680px; max-height: 88dvh; height: auto;
    margin: 0; padding: 0; overflow: hidden; border-radius: 14px; border: 1px solid var(--border-default); background: var(--bg-secondary);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
html #adminModal#adminModal > .modal { width: min(1280px, 96vw) !important; max-width: none !important; height: min(860px, 92dvh) !important; max-height: 92dvh !important; }
html #profileEditModal#profileEditModal > .modal { width: min(560px, 94vw) !important; max-width: 560px !important; }
html #customInstructionsModal#customInstructionsModal > .modal { width: min(640px, 94vw) !important; max-width: 640px !important; }
html #adminModal#adminModal .modal-header,
html #profileEditModal#profileEditModal .modal-header,
html #customInstructionsModal#customInstructionsModal .modal-header,
html #projectModal#projectModal .modal-header,
html #mcpModal#mcpModal .modal-header,
html #skillModal#skillModal .modal-header,
html #stitchAuthModal#stitchAuthModal .modal-header { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px !important; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; background: var(--bg-secondary) !important; }
html #adminModal#adminModal .modal-title,
html #profileEditModal#profileEditModal .modal-title,
html #customInstructionsModal#customInstructionsModal .modal-title,
html #projectModal#projectModal .modal-title,
html #mcpModal#mcpModal .modal-title,
html #skillModal#skillModal .modal-title,
html #stitchAuthModal#stitchAuthModal .modal-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 650 1.15rem/1.25 var(--font-body) !important; letter-spacing: -.012em; color: var(--text-primary) !important; }
html #adminModal#adminModal .modal-title svg,
html #profileEditModal#profileEditModal .modal-title svg,
html #customInstructionsModal#customInstructionsModal .modal-title svg,
html #projectModal#projectModal .modal-title svg,
html #mcpModal#mcpModal .modal-title svg,
html #skillModal#skillModal .modal-title svg,
html #stitchAuthModal#stitchAuthModal .modal-title svg { width: 20px !important; height: 20px !important; margin: 0 !important; flex: none; stroke: currentColor !important; color: var(--text-secondary); }
html #adminModal#adminModal .modal-close,
html #profileEditModal#profileEditModal .modal-close,
html #customInstructionsModal#customInstructionsModal .modal-close,
html #projectModal#projectModal .modal-close,
html #mcpModal#mcpModal .modal-close,
html #skillModal#skillModal .modal-close,
html #stitchAuthModal#stitchAuthModal .modal-close { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--text-secondary); background: transparent; }
html #adminModal#adminModal .modal-close:hover,
html #profileEditModal#profileEditModal .modal-close:hover,
html #customInstructionsModal#customInstructionsModal .modal-close:hover,
html #projectModal#projectModal .modal-close:hover,
html #mcpModal#mcpModal .modal-close:hover,
html #skillModal#skillModal .modal-close:hover,
html #stitchAuthModal#stitchAuthModal .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
html #adminModal#adminModal .modal-body,
html #profileEditModal#profileEditModal .modal-body,
html #customInstructionsModal#customInstructionsModal .modal-body,
html #projectModal#projectModal .modal-body,
html #mcpModal#mcpModal .modal-body,
html #skillModal#skillModal .modal-body,
html #stitchAuthModal#stitchAuthModal .modal-body { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; padding: 22px !important; gap: 0; }
html #adminModal#adminModal .form-group,
html #profileEditModal#profileEditModal .form-group,
html #customInstructionsModal#customInstructionsModal .form-group,
html #projectModal#projectModal .form-group,
html #mcpModal#mcpModal .form-group,
html #skillModal#skillModal .form-group,
html #stitchAuthModal#stitchAuthModal .form-group { margin: 0 0 18px !important; padding: 0; border: 0; background: none; }
html #adminModal#adminModal .form-group label,
html #profileEditModal#profileEditModal .form-group label,
html #customInstructionsModal#customInstructionsModal .form-group label,
html #projectModal#projectModal .form-group label,
html #mcpModal#mcpModal .form-group label,
html #skillModal#skillModal .form-group label,
html #stitchAuthModal#stitchAuthModal .form-group label,
html #adminModal#adminModal label,
html #profileEditModal#profileEditModal label,
html #customInstructionsModal#customInstructionsModal label,
html #projectModal#projectModal label,
html #mcpModal#mcpModal label,
html #skillModal#skillModal label,
html #stitchAuthModal#stitchAuthModal label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font: 600 .9rem/1.35 var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-primary) !important; }
html #adminModal#adminModal label svg,
html #profileEditModal#profileEditModal label svg,
html #customInstructionsModal#customInstructionsModal label svg,
html #projectModal#projectModal label svg,
html #mcpModal#mcpModal label svg,
html #skillModal#skillModal label svg,
html #stitchAuthModal#stitchAuthModal label svg { width: 16px; height: 16px; color: var(--text-muted); }
html #adminModal#adminModal .form-hint,
html #profileEditModal#profileEditModal .form-hint,
html #customInstructionsModal#customInstructionsModal .form-hint,
html #projectModal#projectModal .form-hint,
html #mcpModal#mcpModal .form-hint,
html #skillModal#skillModal .form-hint,
html #stitchAuthModal#stitchAuthModal .form-hint,
html #adminModal#adminModal small,
html #profileEditModal#profileEditModal small,
html #customInstructionsModal#customInstructionsModal small,
html #projectModal#projectModal small,
html #mcpModal#mcpModal small,
html #skillModal#skillModal small,
html #stitchAuthModal#stitchAuthModal small { display: block; margin-top: 6px; font: 400 .82rem/1.5 var(--font-body) !important; color: var(--text-muted) !important; }
html #adminModal#adminModal input[type="text"],
html #profileEditModal#profileEditModal input[type="text"],
html #customInstructionsModal#customInstructionsModal input[type="text"],
html #projectModal#projectModal input[type="text"],
html #mcpModal#mcpModal input[type="text"],
html #skillModal#skillModal input[type="text"],
html #stitchAuthModal#stitchAuthModal input[type="text"],
html #adminModal#adminModal input[type="password"],
html #profileEditModal#profileEditModal input[type="password"],
html #customInstructionsModal#customInstructionsModal input[type="password"],
html #projectModal#projectModal input[type="password"],
html #mcpModal#mcpModal input[type="password"],
html #skillModal#skillModal input[type="password"],
html #stitchAuthModal#stitchAuthModal input[type="password"],
html #adminModal#adminModal input[type="url"],
html #profileEditModal#profileEditModal input[type="url"],
html #customInstructionsModal#customInstructionsModal input[type="url"],
html #projectModal#projectModal input[type="url"],
html #mcpModal#mcpModal input[type="url"],
html #skillModal#skillModal input[type="url"],
html #stitchAuthModal#stitchAuthModal input[type="url"],
html #adminModal#adminModal input[type="number"],
html #profileEditModal#profileEditModal input[type="number"],
html #customInstructionsModal#customInstructionsModal input[type="number"],
html #projectModal#projectModal input[type="number"],
html #mcpModal#mcpModal input[type="number"],
html #skillModal#skillModal input[type="number"],
html #stitchAuthModal#stitchAuthModal input[type="number"],
html #adminModal#adminModal input[type="email"],
html #profileEditModal#profileEditModal input[type="email"],
html #customInstructionsModal#customInstructionsModal input[type="email"],
html #projectModal#projectModal input[type="email"],
html #mcpModal#mcpModal input[type="email"],
html #skillModal#skillModal input[type="email"],
html #stitchAuthModal#stitchAuthModal input[type="email"],
html #adminModal#adminModal input[type="search"],
html #profileEditModal#profileEditModal input[type="search"],
html #customInstructionsModal#customInstructionsModal input[type="search"],
html #projectModal#projectModal input[type="search"],
html #mcpModal#mcpModal input[type="search"],
html #skillModal#skillModal input[type="search"],
html #stitchAuthModal#stitchAuthModal input[type="search"],
html #adminModal#adminModal textarea,
html #profileEditModal#profileEditModal textarea,
html #customInstructionsModal#customInstructionsModal textarea,
html #projectModal#projectModal textarea,
html #mcpModal#mcpModal textarea,
html #skillModal#skillModal textarea,
html #stitchAuthModal#stitchAuthModal textarea,
html #adminModal#adminModal select,
html #profileEditModal#profileEditModal select,
html #customInstructionsModal#customInstructionsModal select,
html #projectModal#projectModal select,
html #mcpModal#mcpModal select,
html #skillModal#skillModal select,
html #stitchAuthModal#stitchAuthModal select,
html #adminModal#adminModal .project-input,
html #profileEditModal#profileEditModal .project-input,
html #customInstructionsModal#customInstructionsModal .project-input,
html #projectModal#projectModal .project-input,
html #mcpModal#mcpModal .project-input,
html #skillModal#skillModal .project-input,
html #stitchAuthModal#stitchAuthModal .project-input,
html #adminModal#adminModal .admin-input,
html #profileEditModal#profileEditModal .admin-input,
html #customInstructionsModal#customInstructionsModal .admin-input,
html #projectModal#projectModal .admin-input,
html #mcpModal#mcpModal .admin-input,
html #skillModal#skillModal .admin-input,
html #stitchAuthModal#stitchAuthModal .admin-input {
    width: 100%; background: var(--bg-tertiary) !important; color: var(--text-primary); border: 1px solid var(--border-default) !important; border-radius: 10px; padding: 10px 13px; min-height: 42px;
    font: 400 .92rem/1.45 var(--font-body); outline: none; box-shadow: none; transition: border-color 150ms ease, box-shadow 150ms ease;
}
html #adminModal#adminModal textarea,
html #profileEditModal#profileEditModal textarea,
html #customInstructionsModal#customInstructionsModal textarea,
html #projectModal#projectModal textarea,
html #mcpModal#mcpModal textarea,
html #skillModal#skillModal textarea,
html #stitchAuthModal#stitchAuthModal textarea { min-height: 96px; resize: vertical; }
html #adminModal#adminModal input:focus,
html #profileEditModal#profileEditModal input:focus,
html #customInstructionsModal#customInstructionsModal input:focus,
html #projectModal#projectModal input:focus,
html #mcpModal#mcpModal input:focus,
html #skillModal#skillModal input:focus,
html #stitchAuthModal#stitchAuthModal input:focus,
html #adminModal#adminModal textarea:focus,
html #profileEditModal#profileEditModal textarea:focus,
html #customInstructionsModal#customInstructionsModal textarea:focus,
html #projectModal#projectModal textarea:focus,
html #mcpModal#mcpModal textarea:focus,
html #skillModal#skillModal textarea:focus,
html #stitchAuthModal#stitchAuthModal textarea:focus,
html #adminModal#adminModal select:focus,
html #profileEditModal#profileEditModal select:focus,
html #customInstructionsModal#customInstructionsModal select:focus,
html #projectModal#projectModal select:focus,
html #mcpModal#mcpModal select:focus,
html #skillModal#skillModal select:focus,
html #stitchAuthModal#stitchAuthModal select:focus { border-color: color-mix(in srgb, var(--text-primary) 40%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 8%, transparent); }
html #adminModal#adminModal ::placeholder,
html #profileEditModal#profileEditModal ::placeholder,
html #customInstructionsModal#customInstructionsModal ::placeholder,
html #projectModal#projectModal ::placeholder,
html #mcpModal#mcpModal ::placeholder,
html #skillModal#skillModal ::placeholder,
html #stitchAuthModal#stitchAuthModal ::placeholder { color: var(--text-muted); }
html #adminModal#adminModal .settings-btn,
html #profileEditModal#profileEditModal .settings-btn,
html #customInstructionsModal#customInstructionsModal .settings-btn,
html #projectModal#projectModal .settings-btn,
html #mcpModal#mcpModal .settings-btn,
html #skillModal#skillModal .settings-btn,
html #stitchAuthModal#stitchAuthModal .settings-btn,
html #adminModal#adminModal .btn-primary,
html #profileEditModal#profileEditModal .btn-primary,
html #customInstructionsModal#customInstructionsModal .btn-primary,
html #projectModal#projectModal .btn-primary,
html #mcpModal#mcpModal .btn-primary,
html #skillModal#skillModal .btn-primary,
html #stitchAuthModal#stitchAuthModal .btn-primary,
html #adminModal#adminModal .btn-outline,
html #profileEditModal#profileEditModal .btn-outline,
html #customInstructionsModal#customInstructionsModal .btn-outline,
html #projectModal#projectModal .btn-outline,
html #mcpModal#mcpModal .btn-outline,
html #skillModal#skillModal .btn-outline,
html #stitchAuthModal#stitchAuthModal .btn-outline,
html #adminModal#adminModal .btn-secondary,
html #profileEditModal#profileEditModal .btn-secondary,
html #customInstructionsModal#customInstructionsModal .btn-secondary,
html #projectModal#projectModal .btn-secondary,
html #mcpModal#mcpModal .btn-secondary,
html #skillModal#skillModal .btn-secondary,
html #stitchAuthModal#stitchAuthModal .btn-secondary,
html #adminModal#adminModal .account-photo-btn,
html #profileEditModal#profileEditModal .account-photo-btn,
html #customInstructionsModal#customInstructionsModal .account-photo-btn,
html #projectModal#projectModal .account-photo-btn,
html #mcpModal#mcpModal .account-photo-btn,
html #skillModal#skillModal .account-photo-btn,
html #stitchAuthModal#stitchAuthModal .account-photo-btn,
html #adminModal#adminModal #ciSaveBtn,
html #profileEditModal#profileEditModal #ciSaveBtn,
html #customInstructionsModal#customInstructionsModal #ciSaveBtn,
html #projectModal#projectModal #ciSaveBtn,
html #mcpModal#mcpModal #ciSaveBtn,
html #skillModal#skillModal #ciSaveBtn,
html #stitchAuthModal#stitchAuthModal #ciSaveBtn,
html #adminModal#adminModal #ciCancelBtn,
html #profileEditModal#profileEditModal #ciCancelBtn,
html #customInstructionsModal#customInstructionsModal #ciCancelBtn,
html #projectModal#projectModal #ciCancelBtn,
html #mcpModal#mcpModal #ciCancelBtn,
html #skillModal#skillModal #ciCancelBtn,
html #stitchAuthModal#stitchAuthModal #ciCancelBtn {
    min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
    border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); font: 600 .88rem var(--font-body); box-shadow: none; cursor: pointer;
    transition: background 150ms ease, transform 120ms ease;
}
html #adminModal#adminModal .settings-btn:hover,
html #profileEditModal#profileEditModal .settings-btn:hover,
html #customInstructionsModal#customInstructionsModal .settings-btn:hover,
html #projectModal#projectModal .settings-btn:hover,
html #mcpModal#mcpModal .settings-btn:hover,
html #skillModal#skillModal .settings-btn:hover,
html #stitchAuthModal#stitchAuthModal .settings-btn:hover,
html #adminModal#adminModal .btn-outline:hover,
html #profileEditModal#profileEditModal .btn-outline:hover,
html #customInstructionsModal#customInstructionsModal .btn-outline:hover,
html #projectModal#projectModal .btn-outline:hover,
html #mcpModal#mcpModal .btn-outline:hover,
html #skillModal#skillModal .btn-outline:hover,
html #stitchAuthModal#stitchAuthModal .btn-outline:hover,
html #adminModal#adminModal .btn-secondary:hover,
html #profileEditModal#profileEditModal .btn-secondary:hover,
html #customInstructionsModal#customInstructionsModal .btn-secondary:hover,
html #projectModal#projectModal .btn-secondary:hover,
html #mcpModal#mcpModal .btn-secondary:hover,
html #skillModal#skillModal .btn-secondary:hover,
html #stitchAuthModal#stitchAuthModal .btn-secondary:hover,
html #adminModal#adminModal .account-photo-btn:hover,
html #profileEditModal#profileEditModal .account-photo-btn:hover,
html #customInstructionsModal#customInstructionsModal .account-photo-btn:hover,
html #projectModal#projectModal .account-photo-btn:hover,
html #mcpModal#mcpModal .account-photo-btn:hover,
html #skillModal#skillModal .account-photo-btn:hover,
html #stitchAuthModal#stitchAuthModal .account-photo-btn:hover { background: var(--bg-hover); }
html #adminModal#adminModal #ciSaveBtn,
html #profileEditModal#profileEditModal #ciSaveBtn,
html #customInstructionsModal#customInstructionsModal #ciSaveBtn,
html #projectModal#projectModal #ciSaveBtn,
html #mcpModal#mcpModal #ciSaveBtn,
html #skillModal#skillModal #ciSaveBtn,
html #stitchAuthModal#stitchAuthModal #ciSaveBtn,
html #adminModal#adminModal .btn-primary,
html #profileEditModal#profileEditModal .btn-primary,
html #customInstructionsModal#customInstructionsModal .btn-primary,
html #projectModal#projectModal .btn-primary,
html #mcpModal#mcpModal .btn-primary,
html #skillModal#skillModal .btn-primary,
html #stitchAuthModal#stitchAuthModal .btn-primary,
html #adminModal#adminModal #adminCreateBtn,
html #profileEditModal#profileEditModal #adminCreateBtn,
html #customInstructionsModal#customInstructionsModal #adminCreateBtn,
html #projectModal#projectModal #adminCreateBtn,
html #mcpModal#mcpModal #adminCreateBtn,
html #skillModal#skillModal #adminCreateBtn,
html #stitchAuthModal#stitchAuthModal #adminCreateBtn { background: var(--text-primary) !important; color: var(--bg-deep) !important; border-color: var(--text-primary) !important; box-shadow: none !important; }
html #adminModal#adminModal #ciSaveBtn:hover,
html #profileEditModal#profileEditModal #ciSaveBtn:hover,
html #customInstructionsModal#customInstructionsModal #ciSaveBtn:hover,
html #projectModal#projectModal #ciSaveBtn:hover,
html #mcpModal#mcpModal #ciSaveBtn:hover,
html #skillModal#skillModal #ciSaveBtn:hover,
html #stitchAuthModal#stitchAuthModal #ciSaveBtn:hover,
html #adminModal#adminModal .btn-primary:hover,
html #profileEditModal#profileEditModal .btn-primary:hover,
html #customInstructionsModal#customInstructionsModal .btn-primary:hover,
html #projectModal#projectModal .btn-primary:hover,
html #mcpModal#mcpModal .btn-primary:hover,
html #skillModal#skillModal .btn-primary:hover,
html #stitchAuthModal#stitchAuthModal .btn-primary:hover,
html #adminModal#adminModal #adminCreateBtn:hover,
html #profileEditModal#profileEditModal #adminCreateBtn:hover,
html #customInstructionsModal#customInstructionsModal #adminCreateBtn:hover,
html #projectModal#projectModal #adminCreateBtn:hover,
html #mcpModal#mcpModal #adminCreateBtn:hover,
html #skillModal#skillModal #adminCreateBtn:hover,
html #stitchAuthModal#stitchAuthModal #adminCreateBtn:hover { background: color-mix(in srgb, var(--text-primary) 88%, transparent) !important; }
html #adminModal#adminModal .modal-footer,
html #profileEditModal#profileEditModal .modal-footer,
html #customInstructionsModal#customInstructionsModal .modal-footer,
html #projectModal#projectModal .modal-footer,
html #mcpModal#mcpModal .modal-footer,
html #skillModal#skillModal .modal-footer,
html #stitchAuthModal#stitchAuthModal .modal-footer { flex: none; display: flex; justify-content: flex-end; gap: 10px; margin: 0 !important; padding: 14px 22px !important; border: 0 !important; border-top: 1px solid var(--border-subtle) !important; background: var(--bg-secondary); }
html #adminModal#adminModal .toggle-switch,
html #profileEditModal#profileEditModal .toggle-switch,
html #customInstructionsModal#customInstructionsModal .toggle-switch,
html #projectModal#projectModal .toggle-switch,
html #mcpModal#mcpModal .toggle-switch,
html #skillModal#skillModal .toggle-switch,
html #stitchAuthModal#stitchAuthModal .toggle-switch,
html #adminModal#adminModal .switch,
html #profileEditModal#profileEditModal .switch,
html #customInstructionsModal#customInstructionsModal .switch,
html #projectModal#projectModal .switch,
html #mcpModal#mcpModal .switch,
html #skillModal#skillModal .switch,
html #stitchAuthModal#stitchAuthModal .switch { width: 40px; min-width: 40px; height: 22px; }
html #adminModal#adminModal .toggle-switch .slider,
html #profileEditModal#profileEditModal .toggle-switch .slider,
html #customInstructionsModal#customInstructionsModal .toggle-switch .slider,
html #projectModal#projectModal .toggle-switch .slider,
html #mcpModal#mcpModal .toggle-switch .slider,
html #skillModal#skillModal .toggle-switch .slider,
html #stitchAuthModal#stitchAuthModal .toggle-switch .slider,
html #adminModal#adminModal .switch .slider,
html #profileEditModal#profileEditModal .switch .slider,
html #customInstructionsModal#customInstructionsModal .switch .slider,
html #projectModal#projectModal .switch .slider,
html #mcpModal#mcpModal .switch .slider,
html #skillModal#skillModal .switch .slider,
html #stitchAuthModal#stitchAuthModal .switch .slider { border-radius: 999px; transition: background 150ms ease; }
html #adminModal#adminModal .toggle-switch input:not(:checked) + .slider,
html #profileEditModal#profileEditModal .toggle-switch input:not(:checked) + .slider,
html #customInstructionsModal#customInstructionsModal .toggle-switch input:not(:checked) + .slider,
html #projectModal#projectModal .toggle-switch input:not(:checked) + .slider,
html #mcpModal#mcpModal .toggle-switch input:not(:checked) + .slider,
html #skillModal#skillModal .toggle-switch input:not(:checked) + .slider,
html #stitchAuthModal#stitchAuthModal .toggle-switch input:not(:checked) + .slider,
html #adminModal#adminModal .switch input:not(:checked) + .slider,
html #profileEditModal#profileEditModal .switch input:not(:checked) + .slider,
html #customInstructionsModal#customInstructionsModal .switch input:not(:checked) + .slider,
html #projectModal#projectModal .switch input:not(:checked) + .slider,
html #mcpModal#mcpModal .switch input:not(:checked) + .slider,
html #skillModal#skillModal .switch input:not(:checked) + .slider,
html #stitchAuthModal#stitchAuthModal .switch input:not(:checked) + .slider { background: color-mix(in srgb, var(--text-primary) 14%, transparent) !important; border: 0 !important; }
html #adminModal#adminModal .toggle-switch input:checked + .slider,
html #profileEditModal#profileEditModal .toggle-switch input:checked + .slider,
html #customInstructionsModal#customInstructionsModal .toggle-switch input:checked + .slider,
html #projectModal#projectModal .toggle-switch input:checked + .slider,
html #mcpModal#mcpModal .toggle-switch input:checked + .slider,
html #skillModal#skillModal .toggle-switch input:checked + .slider,
html #stitchAuthModal#stitchAuthModal .toggle-switch input:checked + .slider,
html #adminModal#adminModal .switch input:checked + .slider,
html #profileEditModal#profileEditModal .switch input:checked + .slider,
html #customInstructionsModal#customInstructionsModal .switch input:checked + .slider,
html #projectModal#projectModal .switch input:checked + .slider,
html #mcpModal#mcpModal .switch input:checked + .slider,
html #skillModal#skillModal .switch input:checked + .slider,
html #stitchAuthModal#stitchAuthModal .switch input:checked + .slider { background: var(--text-primary) !important; border: 0 !important; }
html #adminModal#adminModal .toggle-switch .slider:before,
html #profileEditModal#profileEditModal .toggle-switch .slider:before,
html #customInstructionsModal#customInstructionsModal .toggle-switch .slider:before,
html #projectModal#projectModal .toggle-switch .slider:before,
html #mcpModal#mcpModal .toggle-switch .slider:before,
html #skillModal#skillModal .toggle-switch .slider:before,
html #stitchAuthModal#stitchAuthModal .toggle-switch .slider:before,
html #adminModal#adminModal .switch .slider:before,
html #profileEditModal#profileEditModal .switch .slider:before,
html #customInstructionsModal#customInstructionsModal .switch .slider:before,
html #projectModal#projectModal .switch .slider:before,
html #mcpModal#mcpModal .switch .slider:before,
html #skillModal#skillModal .switch .slider:before,
html #stitchAuthModal#stitchAuthModal .switch .slider:before { width: 16px; height: 16px; left: 3px; bottom: 3px; box-shadow: none !important; background: var(--text-secondary) !important; }
html #adminModal#adminModal .toggle-switch input:checked + .slider:before,
html #profileEditModal#profileEditModal .toggle-switch input:checked + .slider:before,
html #customInstructionsModal#customInstructionsModal .toggle-switch input:checked + .slider:before,
html #projectModal#projectModal .toggle-switch input:checked + .slider:before,
html #mcpModal#mcpModal .toggle-switch input:checked + .slider:before,
html #skillModal#skillModal .toggle-switch input:checked + .slider:before,
html #stitchAuthModal#stitchAuthModal .toggle-switch input:checked + .slider:before,
html #adminModal#adminModal .switch input:checked + .slider:before,
html #profileEditModal#profileEditModal .switch input:checked + .slider:before,
html #customInstructionsModal#customInstructionsModal .switch input:checked + .slider:before,
html #projectModal#projectModal .switch input:checked + .slider:before,
html #mcpModal#mcpModal .switch input:checked + .slider:before,
html #skillModal#skillModal .switch input:checked + .slider:before,
html #stitchAuthModal#stitchAuthModal .switch input:checked + .slider:before { transform: translateX(18px); background: var(--bg-deep) !important; }

html #profileEditModal#profileEditModal .account-section { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: 14px; background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
html #profileEditModal#profileEditModal .account-section-header { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
html #profileEditModal#profileEditModal .account-section-header h3 { margin: 0; font: 650 .95rem var(--font-body) !important; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
html #profileEditModal#profileEditModal .account-section-header svg { width: 16px; height: 16px; color: var(--text-muted); }
html #profileEditModal#profileEditModal .account-photo-area { display: flex; align-items: center; gap: 18px; }
html #profileEditModal#profileEditModal .account-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html #profileEditModal#profileEditModal .user-avatar-xl { width: 76px; height: 76px; font-size: 2rem; }
html #profileEditModal#profileEditModal .setting-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--border-subtle); }
html #profileEditModal#profileEditModal .setting-toggle-row:first-of-type { border-top: 0; }
html #profileEditModal#profileEditModal .setting-toggle-row > div:first-child { flex: 1; min-width: 0; padding-right: 0 !important; }
html #profileEditModal#profileEditModal .setting-toggle-row strong, html #profileEditModal#profileEditModal .setting-toggle-row .setting-title, html #profileEditModal#profileEditModal .setting-toggle-row label { display: block; margin: 0 0 3px !important; font: 600 .95rem/1.35 var(--font-body) !important; color: var(--text-primary) !important; }
html #profileEditModal#profileEditModal .setting-toggle-row :is(p, span, div):not(.toggle-switch):not(.slider) { font-size: .84rem; line-height: 1.5; font-weight: 400; color: var(--text-muted); }
html #profileEditModal#profileEditModal .setting-toggle-row > div:first-child > :first-child { display: block; margin: 0 0 3px; font: 600 .95rem/1.35 var(--font-body) !important; color: var(--text-primary) !important; }
html #profileEditModal#profileEditModal .account-info-value { font: 500 .88rem var(--font-body) !important; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------- Kişiselleştirme ---------- */
html #customInstructionsModal#customInstructionsModal .modal-body > div:first-child { padding: 14px 16px !important; margin-bottom: 22px !important; border: 1px solid var(--border-subtle) !important; border-left-width: 1px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--text-primary) 3%, transparent) !important; }
html #customInstructionsModal#customInstructionsModal .modal-body > div:first-child p { margin: 0; font: 400 .9rem/1.55 var(--font-body) !important; color: var(--text-secondary) !important; }
html #customInstructionsModal#customInstructionsModal label { color: var(--text-primary) !important; }
html #customInstructionsModal#customInstructionsModal label span { font: 600 .9rem/1.35 var(--font-body) !important; text-transform: none !important; }
html #customInstructionsModal#customInstructionsModal textarea { min-height: 120px; }
html #customInstructionsModal#customInstructionsModal .modal-footer { position: sticky; bottom: 0; }

/* ---------- Yönetim / Mağaza ---------- */
html #adminModal#adminModal .modal-body { padding: 18px 22px 22px !important; }
html #adminModal#adminModal .stat-card { background: color-mix(in srgb, var(--text-primary) 3%, transparent) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; padding: 14px 16px !important; }
html #adminModal#adminModal .stat-card > div:first-child { font: 500 .8rem var(--font-body) !important; color: var(--text-muted) !important; margin-bottom: 6px !important; }
html #adminModal#adminModal .stat-card > div:last-child { font: 650 1.6rem/1.1 var(--font-body) !important; letter-spacing: -.02em; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] { gap: 16px !important; }
html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] > div { border-radius: 14px !important; border: 1px solid var(--border-subtle) !important; background: color-mix(in srgb, var(--text-primary) 2.5%, transparent) !important; }
html #adminModal#adminModal h3 { margin: 0 0 14px !important; font: 650 1rem var(--font-body) !important; letter-spacing: 0; color: var(--text-primary) !important; }
html #adminModal#adminModal .admin-input-mode-btn, html #adminModal#adminModal .unit-toggle-btn { min-height: 38px; border-radius: 9px !important; border: 1px solid var(--border-default) !important; background: transparent !important; color: var(--text-secondary) !important; font: 600 .85rem var(--font-body) !important; transition: all 150ms ease; }
html #adminModal#adminModal .admin-input-mode-btn.active, html #adminModal#adminModal .unit-toggle-btn.active { background: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--bg-deep) !important; }
html #adminModal#adminModal #adminConversionHint { background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; color: var(--text-secondary) !important; font-size: .84rem !important; }
html #adminModal#adminModal #adminConversionHint span { color: var(--text-secondary) !important; font-weight: 600; }
html #adminModal#adminModal #adminCreateBtn { min-height: 46px; border-radius: 10px !important; font: 650 .95rem var(--font-body) !important; }
html #adminModal#adminModal #adminCreatedCodeBox { background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important; border: 1px dashed var(--border-default) !important; border-radius: 10px !important; }
html #adminModal#adminModal #adminSearchInput, html #adminModal#adminModal #adminUnitFilterSelect, html #adminModal#adminModal #adminStatusFilterSelect, html #adminModal#adminModal #adminSortSelect { width: auto; flex: 1 1 150px; min-height: 38px; padding: 7px 12px; font-size: .85rem; background: var(--bg-tertiary) !important; border: 1px solid var(--border-default) !important; border-radius: 9px !important; }
html #adminModal#adminModal #adminSearchInput { flex: 2 1 220px; }
html #adminModal#adminModal #adminCleanupBtn, html #adminModal#adminModal #adminRefreshBtn { min-height: 38px; border-radius: 9px !important; font: 600 .85rem var(--font-body) !important; }
html #adminModal#adminModal #adminCodesList { padding: 6px 8px; }
html #adminModal#adminModal .admin-code-row { border-radius: 10px; border: 1px solid transparent; }
html #adminModal#adminModal .admin-code-row:hover { background: var(--bg-hover); border-color: var(--border-subtle); }
html #adminModal#adminModal .admin-code-row span[style*="monospace"] { font-family: var(--font-mono) !important; font-size: .9rem !important; color: var(--text-primary) !important; }
html #adminModal#adminModal .admin-code-row { min-width: 0; overflow: hidden; }
html #adminModal#adminModal .admin-code-row > div { min-width: 0; max-width: 100%; }
html #adminModal#adminModal .admin-btn-action { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); }
html #adminModal#adminModal .admin-btn-action:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- Mobil: alttan açılan, yapışkan başlık / altlık ---------- */
@media (max-width: 768px) {
    html #adminModal#adminModal.modal-overlay,
    html #profileEditModal#profileEditModal.modal-overlay,
    html #customInstructionsModal#customInstructionsModal.modal-overlay,
    html #projectModal#projectModal.modal-overlay,
    html #mcpModal#mcpModal.modal-overlay,
    html #skillModal#skillModal.modal-overlay,
    html #stitchAuthModal#stitchAuthModal.modal-overlay { align-items: flex-end !important; justify-content: stretch !important; padding: 0 !important; }
    html #adminModal#adminModal.modal-overlay > .modal,
    html #profileEditModal#profileEditModal.modal-overlay > .modal,
    html #customInstructionsModal#customInstructionsModal.modal-overlay > .modal,
    html #projectModal#projectModal.modal-overlay > .modal,
    html #mcpModal#mcpModal.modal-overlay > .modal,
    html #skillModal#skillModal.modal-overlay > .modal,
    html #stitchAuthModal#stitchAuthModal.modal-overlay > .modal {
        width: 100% !important; max-width: 100% !important; height: auto; max-height: 94dvh !important; border-radius: 20px 20px 0 0; border-bottom: 0; margin: 0 !important;
        transform: translateY(24px); opacity: 0; transition: transform 360ms cubic-bezier(.22,1,.36,1), opacity 220ms ease;
    }
    html #adminModal#adminModal.modal-overlay.active > .modal,
    html #profileEditModal#profileEditModal.modal-overlay.active > .modal,
    html #customInstructionsModal#customInstructionsModal.modal-overlay.active > .modal,
    html #projectModal#projectModal.modal-overlay.active > .modal,
    html #mcpModal#mcpModal.modal-overlay.active > .modal,
    html #skillModal#skillModal.modal-overlay.active > .modal,
    html #stitchAuthModal#stitchAuthModal.modal-overlay.active > .modal { transform: none; opacity: 1; }
    html #adminModal#adminModal.modal-overlay > .modal { height: 94dvh !important; }
    html #adminModal#adminModal .modal-header,
    html #profileEditModal#profileEditModal .modal-header,
    html #customInstructionsModal#customInstructionsModal .modal-header,
    html #projectModal#projectModal .modal-header,
    html #mcpModal#mcpModal .modal-header,
    html #skillModal#skillModal .modal-header,
    html #stitchAuthModal#stitchAuthModal .modal-header { padding: 14px 16px 14px 18px !important; }
    html #adminModal#adminModal .modal-body,
    html #profileEditModal#profileEditModal .modal-body,
    html #customInstructionsModal#customInstructionsModal .modal-body,
    html #projectModal#projectModal .modal-body,
    html #mcpModal#mcpModal .modal-body,
    html #skillModal#skillModal .modal-body,
    html #stitchAuthModal#stitchAuthModal .modal-body { padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
    html #adminModal#adminModal .modal-footer,
    html #profileEditModal#profileEditModal .modal-footer,
    html #customInstructionsModal#customInstructionsModal .modal-footer,
    html #projectModal#projectModal .modal-footer,
    html #mcpModal#mcpModal .modal-footer,
    html #skillModal#skillModal .modal-footer,
    html #stitchAuthModal#stitchAuthModal .modal-footer { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
    html #customInstructionsModal#customInstructionsModal .modal-footer > button, html #customInstructionsModal#customInstructionsModal .modal-body .modal-footer > button { flex: 1; min-height: 46px; }
    html #profileEditModal#profileEditModal .account-section { padding: 14px 14px; }
    html #profileEditModal#profileEditModal .account-photo-area { flex-direction: column; align-items: center; text-align: center; }
    html #profileEditModal#profileEditModal .account-photo-actions { justify-content: center; }
    html #customInstructionsModal#customInstructionsModal textarea { font-size: 16px; }
    /* Yönetim: tek sütun, kart tabanlı kod listesi */
    html #adminModal#adminModal .modal-body > div[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    html #adminModal#adminModal .stat-card { padding: 12px 14px !important; }
    html #adminModal#adminModal .stat-card > div:last-child { font-size: 1.3rem !important; }
    html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] { flex-direction: column !important; }
    html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] > div { min-width: 0 !important; max-width: none !important; width: 100%; flex: none !important; }
    html #adminModal#adminModal #adminCodesList { max-height: none; overflow: visible; }
    html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] > div:last-child { overflow: visible !important; }
    html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] > div:last-child > div[style*="grid-template-columns: 2.5fr"] { display: none !important; }
    html #adminModal#adminModal .modal-body > div[style*="display: flex; gap: 20px"] > div:last-child > div:first-child { flex-wrap: wrap; gap: 10px; }
    html #adminModal#adminModal .admin-code-row { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px !important; margin: 0 0 8px; border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); grid-template-columns: none !important; }
    html #adminModal#adminModal .admin-code-row > div:last-child { justify-content: flex-start; flex-wrap: wrap; }
    html #adminModal#adminModal .admin-code-row > div:nth-child(3) { padding-right: 0 !important; }
    html #adminModal#adminModal .admin-btn-action { min-width: 40px; min-height: 40px; }
    html #adminModal#adminModal #adminSearchInput, html #adminModal#adminModal #adminUnitFilterSelect, html #adminModal#adminModal #adminStatusFilterSelect, html #adminModal#adminModal #adminSortSelect { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
    html #adminModal#adminModal #adminCleanupBtn, html #adminModal#adminModal #adminRefreshBtn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html .modal-overlay > .modal { transition: none !important; } }