/* ==========================================================================
   E-Koken CodePen v6.9.1 — Layout & Color Fix
   KEY CHANGES:
   • ide-body: height:100vh overflow:hidden → no grey gap ever
   • preview-workspace-bg: flex:1 1 0 min-height:0 → fills full remaining height
   • .device-desktop: 100% width/height, no border-radius
   • .device-tablet/.device-mobile: centered with fixed widths, full height
   • Console: flex-shrink:0, fixed height, always at bottom
   • generateCode() no longer forces dark bg → preview uses user's own CSS colors
   • Pearl Light theme: border & color fixes maintained
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   ROOT DESIGN TOKENS
   ========================================================= */
:root {
  --bg-primary:    #090d16;
  --bg-secondary:  #0f172a;
  --bg-card:       rgba(15,23,42,0.95);
  --bg-glass:      rgba(30,41,59,0.6);
  --border-glass:  rgba(255,255,255,0.10);
  --text-main:     #f8fafc;
  --text-muted:    #94a3b8;
  --text-dim:      #64748b;
  --accent-primary:   #6366f1;
  --accent-secondary: #a855f7;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm:  8px;
  --shadow-card: 0 20px 40px -15px rgba(0,0,0,0.5);
}

/* =========================================================
   BODY — CRITICAL: h-screen + overflow:hidden eliminates
   the grey gap below the workspace
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Login page body (no ide-body class) */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* IDE mode body — fixed viewport, NO scroll */
body.ide-body {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* Custom scrollbars */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(15,23,42,0.4); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.6); }

/* =========================================================
   THEME: DARK DEFAULT
   ========================================================= */
body.theme-dark-default {
  --bg-primary:   #090d16;  --bg-secondary: #0f172a;
  --bg-card:      rgba(15,23,42,0.95);
  --bg-glass:     rgba(30,41,59,0.6);
  --border-glass: rgba(255,255,255,0.10);
  --text-main:    #f8fafc;  --text-muted:   #94a3b8;  --text-dim: #64748b;
  --accent-primary:   #6366f1;  --accent-secondary: #a855f7;
  background-color: #090d16;   color: #f8fafc;
}

/* =========================================================
   THEME: SYNTHWAVE NEON
   ========================================================= */
body.theme-synthwave-neon {
  --bg-primary:   #130924;  --bg-secondary: #1a0c33;
  --bg-card:      rgba(26,12,51,0.95);
  --bg-glass:     rgba(43,20,84,0.55);
  --border-glass: rgba(236,72,153,0.25);
  --text-main:    #fdf2f8;  --text-muted:   #f472b6;  --text-dim: #c084fc;
  --accent-primary:   #ec4899;  --accent-secondary: #a855f7;
  background-color: #130924;   color: #fdf2f8;
}
body.theme-synthwave-neon .glass-header { background:rgba(26,12,51,0.92); border-bottom-color:rgba(236,72,153,0.3); }
body.theme-synthwave-neon .glass-panel  { border-color:rgba(236,72,153,0.2); }
body.theme-synthwave-neon .btn-primary  { background:linear-gradient(135deg,#ec4899,#a855f7); box-shadow:0 4px 14px rgba(236,72,153,0.4); }

/* =========================================================
   THEME: MATRIX GREEN
   ========================================================= */
body.theme-matrix-green {
  --bg-primary:   #04120a;  --bg-secondary: #081e10;
  --bg-card:      rgba(8,30,16,0.95);
  --bg-glass:     rgba(12,45,24,0.55);
  --border-glass: rgba(34,197,94,0.25);
  --text-main:    #f0fdf4;  --text-muted:   #4ade80;  --text-dim: #22c55e;
  --accent-primary:   #22c55e;  --accent-secondary: #10b981;
  background-color: #04120a;   color: #f0fdf4;
}
body.theme-matrix-green .glass-header { background:rgba(8,30,16,0.92); border-bottom-color:rgba(34,197,94,0.3); }
body.theme-matrix-green .glass-panel  { border-color:rgba(34,197,94,0.2); }
body.theme-matrix-green .btn-primary  { background:linear-gradient(135deg,#22c55e,#10b981); box-shadow:0 4px 14px rgba(34,197,94,0.4); }

/* =========================================================
   THEME: DRACULA OCEAN
   ========================================================= */
body.theme-dracula-ocean {
  --bg-primary:   #0b1329;  --bg-secondary: #0f1c3f;
  --bg-card:      rgba(15,28,63,0.95);
  --bg-glass:     rgba(23,42,94,0.55);
  --border-glass: rgba(56,189,248,0.20);
  --text-main:    #f0f9ff;  --text-muted:   #7dd3fc;  --text-dim: #38bdf8;
  --accent-primary:   #38bdf8;  --accent-secondary: #818cf8;
  background-color: #0b1329;   color: #f0f9ff;
}
body.theme-dracula-ocean .glass-header { background:rgba(15,28,63,0.92); border-bottom-color:rgba(56,189,248,0.3); }
body.theme-dracula-ocean .glass-panel  { border-color:rgba(56,189,248,0.2); }
body.theme-dracula-ocean .btn-primary  { background:linear-gradient(135deg,#38bdf8,#818cf8); box-shadow:0 4px 14px rgba(56,189,248,0.4); }

/* =========================================================
   THEME: PEARL LIGHT (AÇIK TEMA) — TAM RENK İZOLASYONU
   ========================================================= */
body.theme-pearl-light {
  --bg-primary:   #f1f5f9;  --bg-secondary: #ffffff;
  --bg-card:      #ffffff;
  --bg-glass:     rgba(248,250,252,0.97);
  --border-glass: #cbd5e1;
  --text-main:    #0f172a;  --text-muted:   #334155;  --text-dim: #64748b;
  --accent-primary:   #4f46e5;  --accent-secondary: #7c3aed;
  background-color: #f1f5f9;   color: #0f172a;
}

body.theme-pearl-light .glass-header {
  background: #ffffff;
  border-bottom: 1.5px solid #cbd5e1;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
body.theme-pearl-light .glass-panel {
  background: #ffffff;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
body.theme-pearl-light .glass-panel:hover { border-color: #94a3b8 !important; }
body.theme-pearl-light #file-tree-sidebar { background:#f8fafc; border-right:1.5px solid #cbd5e1; }
body.theme-pearl-light .editor-tabs-bar   { background:#f1f5f9; border-bottom:1.5px solid #cbd5e1; }
body.theme-pearl-light .tab-btn           { background:#e2e8f0; border:1px solid #cbd5e1; color:#334155 !important; }
body.theme-pearl-light .tab-btn.active    { background:#fff; border-color:#4f46e5; color:#4f46e5 !important; }
body.theme-pearl-light .tab-btn:hover     { background:#fff; border-color:#94a3b8; }
body.theme-pearl-light .preview-header-bar { background:#f8fafc; border-bottom:1.5px solid #cbd5e1; }
body.theme-pearl-light .console-panel     { background:#f8fafc; border-top:1.5px solid #cbd5e1; }
body.theme-pearl-light .console-header    { background:#e2e8f0; border-bottom:1.5px solid #cbd5e1; color:#0f172a !important; }
body.theme-pearl-light .console-logs      { color:#0f172a; }
body.theme-pearl-light .console-line.log  { background:#eff6ff; border-left-color:#3b82f6; color:#1e40af; }
body.theme-pearl-light .console-line.warn { background:#fffbeb; border-left-color:#f59e0b; color:#92400e; }
body.theme-pearl-light .console-line.error{ background:#fff1f2; border-left-color:#f43f5e; color:#9f1239; }
body.theme-pearl-light .btn-primary       { background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff !important; box-shadow:0 4px 14px rgba(79,70,229,0.35); }
body.theme-pearl-light .btn-secondary     { background:#f1f5f9; border:1.5px solid #cbd5e1 !important; color:#334155 !important; }
body.theme-pearl-light .btn-secondary:hover { background:#e2e8f0; border-color:#94a3b8 !important; }
body.theme-pearl-light .btn-danger-outline { background:#fff1f2; border:1.5px solid #fecdd3 !important; color:#be123c !important; }
body.theme-pearl-light .header-icon-btn   { color:#334155; }
body.theme-pearl-light .header-icon-btn:hover { background:#e2e8f0; }
body.theme-pearl-light .modern-input      { background:#f8fafc; border:1.5px solid #cbd5e1; color:#0f172a; }
body.theme-pearl-light .modern-input:focus{ border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,0.15); }
body.theme-pearl-light .modal-overlay     { background:rgba(15,23,42,0.5) !important; }
body.theme-pearl-light .modal-content     { background:#fff !important; border:1.5px solid #cbd5e1 !important; color:#0f172a !important; }
body.theme-pearl-light .device-segmented-control { background:#e2e8f0; border:1.5px solid #cbd5e1; }
body.theme-pearl-light .device-seg-btn        { color:#334155; }
body.theme-pearl-light .device-seg-btn:hover  { background:#f1f5f9; color:#0f172a; }
body.theme-pearl-light .device-seg-btn.active { background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; color:#fff !important; }
body.theme-pearl-light .status-bar-footer     { background:#fff; border-top:1.5px solid #cbd5e1; color:#334155; }
body.theme-pearl-light .resizer-bar           { background:#e2e8f0; border-left-color:#cbd5e1; border-right-color:#cbd5e1; }
body.theme-pearl-light #project-title-input { color: #0f172a !important; }
body.theme-pearl-light .close-btn { color: #64748b !important; }
body.theme-pearl-light .close-btn:hover { color: #0f172a !important; }
body.theme-pearl-light .modal-content h3, 
body.theme-pearl-light .modal-content h4 { color: #0f172a !important; }
body.theme-pearl-light .modal-content .bg-slate-100 { background-color: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
body.theme-pearl-light .modal-content .bg-white\/60 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
body.theme-pearl-light .preview-workspace-bg { background: #f1f5f9 !important; }

/* =========================================================
   LOFI EQUALIZER BARS
   ========================================================= */
.lofi-eq-icon { display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.lofi-eq-icon .eq-bar {
  width:3px; background-color:#c084fc; border-radius:2px; height:4px; transition:height 0.1s ease;
}
.lofi-eq-icon.playing .eq-bar:nth-child(1){animation:eqBounce 0.75s ease-in-out infinite alternate;}
.lofi-eq-icon.playing .eq-bar:nth-child(2){animation:eqBounce 0.50s ease-in-out infinite alternate 0.1s;}
.lofi-eq-icon.playing .eq-bar:nth-child(3){animation:eqBounce 0.90s ease-in-out infinite alternate 0.2s;}
@keyframes eqBounce{from{height:3px;}to{height:13px;}}

.station-chip {
  padding:4px 12px; border-radius:8px; font-size:0.7rem; font-weight:700; cursor:pointer;
  border:1.5px solid rgba(168,85,247,0.35); background:rgba(168,85,247,0.12); color:#c084fc;
  transition:all 0.2s ease; display:inline-flex; align-items:center; gap:5px;
}
.station-chip:hover  { background:rgba(168,85,247,0.22); border-color:#a855f7; }
.station-chip.active { background:linear-gradient(135deg,#a855f7,#7e22ce) !important; color:#fff !important; box-shadow:0 4px 12px rgba(168,85,247,0.4) !important; }

/* =========================================================
   THEME SELECT CARDS
   ========================================================= */
.theme-select-card {
  padding:8px 12px; border-radius:12px; cursor:pointer;
  border:1.5px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; gap:8px;
  font-size:0.75rem; font-weight:700;
  transition:all 0.2s ease;
}
.theme-select-card:hover   { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.2); border-color:rgba(255,255,255,0.25); }
.theme-select-card.active  { border-color:var(--accent-primary) !important; box-shadow:0 0 0 2px var(--accent-primary),0 4px 14px rgba(0,0,0,0.2) !important; }

/* Settings Modal Tabs & Cards */
.settings-tab-btn {
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
.settings-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.05);
}
.settings-tab-btn.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.35) !important;
}

.theme-card-option {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-card-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.theme-card-option.active {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 8px 20px rgba(0,0,0,0.3) !important;
}

/* =========================================================
   AÇIK TEMA (PEARL LIGHT) — TÜM MODALLAR İÇİN YÜKSEK KONTRAST
   ========================================================= */
body.theme-pearl-light .modal-content {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

body.theme-pearl-light .modal-content h3,
body.theme-pearl-light .modal-content h4,
body.theme-pearl-light .modal-content .font-extrabold,
body.theme-pearl-light .modal-content .font-bold {
  color: #0f172a !important;
}

body.theme-pearl-light .modal-content p {
  color: #334155 !important;
}

body.theme-pearl-light .modal-content span:not(.btn-primary span) {
  color: #1e293b;
}

body.theme-pearl-light .modal-content .bg-indigo-50,
body.theme-pearl-light .modal-content .bg-indigo-500\/10 {
  background-color: #eef2ff !important;
  border: 1.5px solid #c7d2fe !important;
}

body.theme-pearl-light .modal-content .text-indigo-900,
body.theme-pearl-light .modal-content .text-indigo-800,
body.theme-pearl-light .modal-content .text-indigo-700,
body.theme-pearl-light .modal-content .text-indigo-600,
body.theme-pearl-light .modal-content .text-indigo-400,
body.theme-pearl-light .modal-content .text-indigo-300 {
  color: #3730a3 !important;
}

body.theme-pearl-light .modal-content .bg-slate-100,
body.theme-pearl-light .modal-content .bg-slate-50,
body.theme-pearl-light .modal-content .bg-white\/5 {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.theme-pearl-light .modal-content .text-slate-900,
body.theme-pearl-light .modal-content .text-slate-800,
body.theme-pearl-light .modal-content .text-slate-700,
body.theme-pearl-light .modal-content .text-slate-600,
body.theme-pearl-light .modal-content .text-slate-300,
body.theme-pearl-light .modal-content .text-slate-100 {
  color: #0f172a !important;
}

body.theme-pearl-light #unified-share-url-input {
  background-color: #ffffff !important;
  border: 1.5px solid #a5b4fc !important;
  color: #1e1b4b !important;
  font-weight: 800 !important;
}

body.theme-pearl-light #settings-modal h3,
body.theme-pearl-light #settings-modal h4 {
  color: #0f172a !important;
}


body.theme-pearl-light #settings-modal p {
  color: #64748b !important;
}

/* Nav Tab Bar in Light Theme */
body.theme-pearl-light #settings-modal .settings-tab-btn {
  color: #475569 !important;
  background: transparent;
}
body.theme-pearl-light #settings-modal .settings-tab-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
body.theme-pearl-light #settings-modal .settings-tab-btn.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}

/* Settings Category Blocks in Light Theme */
body.theme-pearl-light #settings-modal .bg-slate-100 {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Individual Feature Item Cards in Light Theme */
body.theme-pearl-light #settings-modal .bg-white,
body.theme-pearl-light #settings-modal .bg-white\/60 {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* Theme Selection Cards in Light & Dark Theme */
#thm-btn-dark-default,
#thm-btn-dark-default *,
body.theme-pearl-light #thm-btn-dark-default,
body.theme-pearl-light #thm-btn-dark-default *,
body.theme-pearl-light #thm-btn-dark-default span {
  color: #ffffff !important;
}
body.theme-pearl-light #thm-btn-dark-default {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
body.theme-pearl-light #thm-btn-dark-default.active {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 8px 20px rgba(0,0,0,0.3) !important;
}

#thm-btn-pearl-light,
#thm-btn-pearl-light *,
body.theme-pearl-light #thm-btn-pearl-light,
body.theme-pearl-light #thm-btn-pearl-light *,
body.theme-pearl-light #thm-btn-pearl-light span {
  color: #0f172a !important;
}
body.theme-pearl-light #thm-btn-pearl-light {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
body.theme-pearl-light #thm-btn-pearl-light.active {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25), 0 6px 16px rgba(0,0,0,0.08) !important;
}


/* =========================================================
   IDE AYARLARI MODALI (#SETTINGS-MODAL) TEMA VE KONTRAST BİLEŞENLERİ
   ========================================================= */

/* --- KARANLIK TEMA (DARK-DEFAULT) --- */
body.theme-dark-default #settings-modal .modal-content,
body.dark #settings-modal .modal-content {
  background-color: #0b0f19 !important;
  border: 1.5px solid rgba(99, 102, 241, 0.4) !important;
  color: #f8fafc !important;
}

body.theme-dark-default #settings-modal h3,
body.theme-dark-default #settings-modal h4,
body.theme-dark-default #settings-modal h5,
body.theme-dark-default #settings-modal span.font-extrabold,
body.dark #settings-modal h3,
body.dark #settings-modal h4,
body.dark #settings-modal h5,
body.dark #settings-modal span.font-extrabold {
  color: #f8fafc !important;
}

body.theme-dark-default #settings-modal p,
body.theme-dark-default #settings-modal .text-slate-500,
body.theme-dark-default #settings-modal .text-slate-400,
body.dark #settings-modal p,
body.dark #settings-modal .text-slate-500,
body.dark #settings-modal .text-slate-400 {
  color: #94a3b8 !important;
}

body.theme-dark-default #settings-modal .bg-slate-100,
body.theme-dark-default #settings-modal .bg-slate-50,
body.dark #settings-modal .bg-slate-100,
body.dark #settings-modal .bg-slate-50 {
  background-color: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark-default #settings-modal .theme-select-card,
body.dark #settings-modal .theme-select-card {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}
body.theme-dark-default #settings-modal .theme-select-card span,
body.dark #settings-modal .theme-select-card span {
  color: #f8fafc !important;
}

body.theme-dark-default #settings-modal .theme-select-card.active,
body.dark #settings-modal .theme-select-card.active {
  background-color: rgba(79, 70, 229, 0.35) !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #6366f1, 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}

body.theme-dark-default #settings-modal .settings-tab-btn,
body.dark #settings-modal .settings-tab-btn {
  color: #94a3b8 !important;
}
body.theme-dark-default #settings-modal .settings-tab-btn.active,
body.dark #settings-modal .settings-tab-btn.active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

body.theme-dark-default #settings-modal .btn-secondary,
body.dark #settings-modal .btn-secondary {
  background-color: rgba(30, 41, 59, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

/* --- AÇIK TEMA (PEARL-LIGHT) --- */
body.theme-pearl-light #settings-modal .modal-content {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-pearl-light #settings-modal h3,
body.theme-pearl-light #settings-modal h4,
body.theme-pearl-light #settings-modal h5,
body.theme-pearl-light #settings-modal span.font-extrabold {
  color: #0f172a !important;
}

body.theme-pearl-light #settings-modal p,
body.theme-pearl-light #settings-modal .text-slate-500,
body.theme-pearl-light #settings-modal .text-slate-400 {
  color: #475569 !important;
}

body.theme-pearl-light #settings-modal .bg-slate-100,
body.theme-pearl-light #settings-modal .bg-slate-50 {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.theme-pearl-light #settings-modal .theme-select-card {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}
body.theme-pearl-light #settings-modal .theme-select-card span {
  color: #1e293b !important;
}

body.theme-pearl-light #settings-modal .theme-select-card.active {
  background-color: #e0e7ff !important;
  border-color: #4f46e5 !important;
  color: #4338ca !important;
  box-shadow: 0 0 0 2px #4f46e5 !important;
}

body.theme-pearl-light #settings-modal .settings-tab-btn {
  color: #475569 !important;
}
body.theme-pearl-light #settings-modal .settings-tab-btn.active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

body.theme-pearl-light #settings-modal .btn-secondary {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* MOR / İNDİGO BUTONLAR KUSURSUZ BEYAZ METİN GARANTİSİ */
.btn-primary,
.btn-primary *,
.btn-primary span,
.settings-tab-btn.active,
.settings-tab-btn.active *,
.settings-tab-btn.active span,
#settings-modal .btn-primary,
#settings-modal .btn-primary *,
#settings-modal .btn-primary span,
#settings-modal .settings-tab-btn.active,
#settings-modal .settings-tab-btn.active *,
#settings-modal .settings-tab-btn.active span,
body.theme-pearl-light .btn-primary,
body.theme-pearl-light .btn-primary *,
body.theme-pearl-light .btn-primary span,
body.theme-pearl-light #settings-modal .btn-primary,
body.theme-pearl-light #settings-modal .btn-primary *,
body.theme-pearl-light #settings-modal .btn-primary span,
body.theme-pearl-light #settings-modal .settings-tab-btn.active,
body.theme-pearl-light #settings-modal .settings-tab-btn.active *,
body.theme-pearl-light #settings-modal .settings-tab-btn.active span {
  color: #ffffff !important;
}



/* =========================================================
   AÇIK TEMA (PEARL LIGHT) — YÖNETİM PANELİ (ADMIN.PHP) OVERHAUL
   ========================================================= */
body.theme-pearl-light.admin-body,
body.theme-pearl-light#admin-body-tag {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

body.theme-pearl-light header.admin-header {
  background-color: #ffffff !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
  color: #0f172a !important;
}

body.theme-pearl-light header.admin-header h1 {
  color: #0f172a !important;
}

body.theme-pearl-light .admin-stat-card-total {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.theme-pearl-light .admin-stat-card-total .stat-val {
  color: #0f172a !important;
}

body.theme-pearl-light .admin-stat-card-pending {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}
body.theme-pearl-light .admin-stat-card-pending .stat-title {
  color: #92400e !important;
}
body.theme-pearl-light .admin-stat-card-pending .stat-val {
  color: #b45309 !important;
}

body.theme-pearl-light .admin-stat-card-active {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
body.theme-pearl-light .admin-stat-card-active .stat-title {
  color: #065f46 !important;
}
body.theme-pearl-light .admin-stat-card-active .stat-val {
  color: #047857 !important;
}

body.theme-pearl-light .admin-stat-card-inactive {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}
body.theme-pearl-light .admin-stat-card-inactive .stat-title {
  color: #9f1239 !important;
}
body.theme-pearl-light .admin-stat-card-inactive .stat-val {
  color: #be123c !important;
}

body.theme-pearl-light .admin-filter-bar {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}
body.theme-pearl-light .admin-filter-bar .bg-slate-950\/80 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

body.theme-pearl-light .admin-search-input {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-pearl-light .admin-table-container {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

body.theme-pearl-light .admin-table-container thead {
  background-color: #f1f5f9 !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.theme-pearl-light .admin-table-container tbody tr {
  border-bottom: 1px solid #e2e8f0 !important;
}

body.theme-pearl-light .admin-table-container tbody tr:hover {
  background-color: #f8fafc !important;
}

body.theme-pearl-light .admin-table-container tbody td {
  color: #334155 !important;
}
body.theme-pearl-light .admin-table-container tbody td.td-username {
  color: #0f172a !important;
}

/* =========================================================
   AÇIK TEMA (PEARL LIGHT) — YÖNETİM PANELİ BUTON ELEMANLARI
   ========================================================= */
body.theme-pearl-light #admin-theme-toggle-btn,
body.theme-pearl-light header.admin-header button:not(.bg-indigo-600):not(.admin-csv-btn),
body.theme-pearl-light header.admin-header .admin-btn-secondary {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

body.theme-pearl-light header.admin-header button:not(.bg-indigo-600):not(.admin-csv-btn):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body.theme-pearl-light .admin-csv-btn {
  background-color: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  color: #047857 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

body.theme-pearl-light .admin-csv-btn:hover {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
}

body.theme-pearl-light .admin-filter-bar button:not(.bg-indigo-600) {
  color: #334155 !important;
}
body.theme-pearl-light .admin-filter-bar button:not(.bg-indigo-600):hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.theme-pearl-light select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.theme-pearl-light .user-row-btn-secondary {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}
body.theme-pearl-light .user-row-btn-secondary:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}





/* =========================================================
   HEADER ICON BUTTONS
   ========================================================= */
.header-icon-btn {
  padding:0.45rem !important;
  border-radius:10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
  cursor:pointer !important;
}
.header-icon-btn:hover {
  transform:translateY(-2px) scale(1.07) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.25) !important;
}

/* =========================================================
   GLASS COMPONENTS
   ========================================================= */
.glass-panel {
  background:var(--bg-card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1.5px solid var(--border-glass);
  box-shadow:var(--shadow-card);
  transition:background 0.3s ease, border-color 0.3s ease;
}
.glass-panel:hover { border-color:rgba(99,102,241,0.2); }

.glass-header {
  background:var(--bg-secondary);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1.5px solid var(--border-glass);
  transition:background 0.3s ease;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  color:#fff; font-weight:600; border:none; border-radius:var(--radius-sm);
  padding:0.45rem 0.9rem; cursor:pointer; transition:all 0.2s ease;
  display:inline-flex; align-items:center; gap:0.4rem;
  box-shadow:0 4px 14px rgba(99,102,241,0.3);
}
.btn-primary:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 6px 20px rgba(99,102,241,0.5); }

.btn-secondary {
  background:var(--bg-glass); color:var(--text-main);
  border:1.5px solid var(--border-glass); border-radius:var(--radius-sm);
  padding:0.45rem 0.85rem; font-weight:500; cursor:pointer;
  transition:all 0.2s ease; display:inline-flex; align-items:center; gap:0.4rem;
}
.btn-secondary:hover { background:rgba(99,102,241,0.15); border-color:rgba(99,102,241,0.4); }

.btn-danger-outline {
  background:rgba(244,63,94,0.1); color:#fb7185;
  border:1.5px solid rgba(244,63,94,0.3); border-radius:var(--radius-sm);
  padding:0.45rem 0.85rem; font-weight:600; cursor:pointer;
  transition:all 0.2s ease; display:inline-flex; align-items:center; gap:0.4rem;
}
.btn-danger-outline:hover { background:rgba(244,63,94,0.22); border-color:rgba(244,63,94,0.65); color:#fff; }

/* =========================================================
   FORM INPUTS
   ========================================================= */
.modern-input {
  background:rgba(15,23,42,0.6); border:1.5px solid var(--border-glass);
  color:var(--text-main); border-radius:var(--radius-sm);
  padding:0.5rem 0.85rem; font-size:0.875rem; transition:all 0.2s ease;
  outline:none; width:100%;
}
.modern-input:focus { border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.2); }

/* =========================================================
   MODALS
   ========================================================= */
.modal-overlay {
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  background:rgba(9,13,22,0.82) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  display:none; /* JS sets to flex */
  align-items:center; justify-content:center; padding:1rem;
  animation:modalFadeIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes modalFadeIn{from{opacity:0;transform:scale(0.96);}to{opacity:1;transform:scale(1);}}

/* =========================================================
   FULLSCREEN PREVIEW
   ========================================================= */
.fullscreen-overlay {
  position:fixed !important; inset:0 !important; z-index:999999 !important;
  background:#090d16 !important; display:none; flex-direction:column;
}
.fullscreen-top-bar {
  height:48px; background:#0f172a; border-bottom:1px solid rgba(255,255,255,0.1);
  padding:0 1rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.fullscreen-iframe-wrapper { flex:1 1 0; min-height:0; width:100%; }
.fullscreen-iframe { width:100%; height:100%; border:none; }

/* =========================================================
   RESIZER BAR
   ========================================================= */
.resizer-bar {
  width:8px; height:100%; background:rgba(255,255,255,0.04);
  border-left:1px solid var(--border-glass); border-right:1px solid var(--border-glass);
  cursor:col-resize; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease; z-index:20; flex-shrink:0;
}
.resizer-bar::after { content:''; width:2px; height:24px; background:rgba(255,255,255,0.2); border-radius:2px; }
.resizer-bar:hover,.resizer-bar.dragging {
  background:rgba(99,102,241,0.28); box-shadow:0 0 10px rgba(99,102,241,0.4);
}
.resizer-bar:hover::after,.resizer-bar.dragging::after { background:var(--accent-primary); }

/* =========================================================
   EDITOR INSTANCE
   ========================================================= */
.editor-instance { width:100%; height:100%; overflow:hidden !important; }

/* =========================================================
   EDITOR TABS
   ========================================================= */
.editor-tabs-bar {
  background:var(--bg-secondary);
  border-bottom:1.5px solid var(--border-glass);
  min-height:36px; flex-shrink:0;
}
.tab-btn {
  padding:5px 10px; border-radius:6px 6px 0 0; font-size:0.73rem; font-weight:600;
  cursor:pointer; border:1.5px solid transparent; border-bottom:none;
  background:rgba(255,255,255,0.04); color:var(--text-muted);
  transition:all 0.15s ease; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.tab-btn:hover  { background:rgba(255,255,255,0.08); color:var(--text-main); border-color:var(--border-glass); }
.tab-btn.active { background:rgba(99,102,241,0.15); color:#818cf8; border-color:rgba(99,102,241,0.35); }

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar-panel  { background:var(--bg-secondary); }
.sidebar-title  { color:var(--text-dim) !important; }

/* =========================================================
   PREVIEW PANEL — PERFECTLY CENTERED LAYOUT FIX
   ========================================================= */
#preview-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.preview-header-bar {
  background: var(--bg-secondary);
  border-bottom: 1.5px solid var(--border-glass);
  flex-shrink: 0;
}

/* Flex container centered horizontally and vertically */
.preview-workspace-bg {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Centered container wrapper */
.preview-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  margin: auto !important;
}

.device-screen-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.device-screen-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* --- DESKTOP: 100% fill --- */
.device-desktop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
}

/* --- TABLET: centered 768px frame --- */
.device-tablet {
  position: relative !important;
  width: min(768px, 95%) !important;
  height: min(100%, 95%) !important;
  max-height: 98% !important;
  margin: auto !important;
  border-radius: 16px;
  border: 6px solid #1e293b !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* --- MOBILE: centered 390px phone frame --- */
.device-mobile {
  position: relative !important;
  width: min(390px, 92%) !important;
  height: min(100%, 96%) !important;
  max-height: 98% !important;
  margin: auto !important;
  border-radius: 24px;
  border: 8px solid #1e293b !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08);
}


/* =========================================================
   COMPACT DEVICE SEGMENTED CONTROL
   ========================================================= */
.device-segmented-control {
  background:rgba(15,23,42,0.65); border:1.5px solid var(--border-glass);
  padding:2px; border-radius:8px; display:inline-flex; align-items:center; gap:1px;
}
.device-seg-btn {
  color:var(--text-dim); background:transparent; border:none; cursor:pointer;
  padding:3px 9px; border-radius:6px; font-size:0.7rem; font-weight:600;
  display:inline-flex; align-items:center; gap:3px;
  transition:all 0.18s ease; white-space:nowrap;
}
.device-seg-btn:hover  { color:var(--text-main); background:rgba(255,255,255,0.08); }
.device-seg-btn.active {
  background:linear-gradient(135deg,#6366f1,#4f46e5) !important;
  color:#fff !important; box-shadow:0 2px 8px rgba(99,102,241,0.4) !important; font-weight:700 !important;
}

/* =========================================================
   CONSOLE PANEL — always at bottom, equal split
   ========================================================= */
.console-panel {
  flex-shrink:0;          /* NEVER grow, always at bottom */
  height:180px;           /* default open height */
  min-height:36px;
  max-height:40%;         /* cap at 40% of preview-panel */
  display:flex;
  flex-direction:column;
  background:rgba(9,13,22,0.97);
  border-top:1.5px solid var(--border-glass);
  overflow:hidden;
  transition:height 0.28s cubic-bezier(0.16,1,0.3,1);
}
.console-panel.collapsed { height:36px !important; }

.console-header {
  height:36px; min-height:36px; padding:0 12px;
  background:rgba(15,23,42,0.95);
  border-bottom:1px solid var(--border-glass);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; user-select:none;
  color:var(--text-muted);
}
.console-header span { color:var(--text-muted) !important; }

.console-logs {
  flex:1 1 0; min-height:0; overflow-y:auto; padding:5px;
  font-family:'Fira Code','JetBrains Mono',monospace;
  font-size:0.72rem; display:flex; flex-direction:column; gap:3px;
}
.console-line {
  padding:4px 8px; border-radius:5px; font-size:0.72rem; line-height:1.4;
  word-break:break-all; border-left:3px solid transparent;
}
.console-line.log   { background:rgba(255,255,255,0.03); border-left-color:#38bdf8; color:#e2e8f0; }
.console-line.warn  { background:rgba(245,158,11,0.10); border-left-color:#f59e0b; color:#fbbf24; }
.console-line.error { background:rgba(244,63,94,0.10);  border-left-color:#f43f5e; color:#fca5a5; }

/* =========================================================
   STATUS BAR
   ========================================================= */
.status-bar-footer {
  flex-shrink:0;
  background:var(--bg-secondary);
  border-top:1.5px solid var(--border-glass);
  color:var(--text-muted);
}

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */
.mobile-view-toggle { display:none; }

@media (max-width:768px) {
  .mobile-view-toggle {
    display:flex !important; align-items:center;
    background:rgba(99,102,241,0.12); border:1.5px solid rgba(99,102,241,0.3); border-radius:8px; padding:2px;
  }
  .mobile-view-btn {
    padding:3px 10px; font-size:0.75rem; font-weight:600; color:var(--text-muted);
    border-radius:6px; border:none; background:transparent; cursor:pointer; transition:all 0.15s ease;
  }
  .mobile-view-btn.active { background:var(--accent-primary); color:#fff; }

  #workspace-container { padding:0.4rem !important; }
  #resizer-bar         { display:none !important; }

  body.mobile-mode-editor  #editor-panel  { display:flex !important; width:100% !important; border-radius:12px !important; }
  body.mobile-mode-editor  #preview-panel { display:none !important; }
  body.mobile-mode-preview #preview-panel { display:flex !important; width:100% !important; border-radius:12px !important; }
  body.mobile-mode-preview #editor-panel  { display:none !important; }
}