/* Phase 0 split — extracted from index.html. Do not edit by hand mid-merge. */


#yt-build{display:none!important}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#030712;
  --bg2:#0a0a1a;
  --bg3:#0f0f23;
  --border:#1e2033;
  --border2:#2a2d4a;
  --primary:#4E35C6;
  --primary-hover:#6b53e0;
  --primary-glow:rgba(78,53,198,0.3);
  --green:#10B981;
  --green-dim:rgba(16,185,129,0.15);
  --red:#ef4444;
  --red-dim:rgba(239,68,68,0.15);
  --gold:#f59e0b;
  --text:#ffffff;
  --text2:#9ca3af;
  --text3:#6b7280;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',-apple-system,sans-serif;
  height:100vh;height:100dvh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* === TOAST === */
.toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:10px 18px;
  font-size:13px;
  font-weight:500;
  z-index:999;
  animation:fadeInOut 2s ease forwards;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
@keyframes fadeInOut{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}15%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0}}


/* === THEME (light overrides + #themeToggleBtn) === */

/* Light theme overrides via body.light-theme */
body.light-theme {
  --bg: #f5f6fa;
  --bg2: #ffffff;
  --bg3: #eceef5;
  --border: #d8dbe8;
  --border2: #c2c6da;
  --primary: #4E35C6;
  --primary-hover: #3a25a8;
  --primary-glow: rgba(78,53,198,0.18);
  --green: #059669;
  --green-dim: rgba(5,150,105,0.12);
  --red: #dc2626;
  --red-dim: rgba(220,38,38,0.12);
  --gold: #d97706;
  --text: #111827;
  --text2: #1f2937;
  --text3: #374151;
  background: #f5f6fa !important;
  color: #111827;
}
body.light-theme .app,
body.light-theme .screen { background: transparent; color: var(--text); }
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d8dbe8 !important;
}
/* Theme toggle button */
#themeToggleBtn {
  position: fixed;
  top: 63px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.2s, background 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#themeToggleBtn:hover { transform: scale(1.05); }
#themeToggleBtn:active { transform: scale(0.95); }
body.light-theme #themeToggleBtn {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* === LANGUAGE SWITCHER === */

#langSwitcher {
  position: fixed;
  top: 63px;
  right: 56px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  z-index: 9998;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#langSwitcher:hover { transform: scale(1.03); }
#langMenu {
  position: fixed;
  top: 105px;
  right: 56px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 4px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  min-width: 110px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
#langMenu.open { display: flex; }
#langMenu button {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
#langMenu button:hover { background: var(--bg3); }
#langMenu button.active { background: var(--primary); color: #fff; }