:root {
  /* Default Dark Theme Variables */
  --primary-color: #6366f1;
  --primary-hover: #4f46e5;
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e293b;
  --card-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --font-main: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border: rgba(255, 255, 255, 0.1);
}

/* Light Theme Overrides */
body.light-theme {
  --bg-gradient-start: #f8fafc;
  --bg-gradient-end: #e2e8f0;
  --card-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.1);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --input-bg: rgba(255, 255, 255, 0.5);
  --input-border: rgba(0, 0, 0, 0.3);
}

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

body {
  font-family: var(--font-main);
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* --- Header --- */
header {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(to right, #818cf8, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 12px;
  text-align: right;
  align-items: center;
  justify-content: center;
}
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--text-main); }
.nav-link {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Main Layout --- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* --- Ads Placeholder Top --- */
.ad-container {
  width: 100%;
  max-width: 728px;
  height: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--glass-border);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Ad Responsiveness */
.ad-desktop { display: flex; min-height: 215px; }
.ad-mobile { display: none; }

/* BMC Button custom adjustment */
.bmc-block {
  & h4 {
    margin-bottom:12px;font-size:1.4rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-decoration:none;background:linear-gradient(160deg,rgba(255,197,0,1)0%,rgba(208,160,3,0.85)45%,rgba(255,202,0,0.9)60%,rgba(208,176,3,0.9)100%);
    background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 #0000000f;transition:text-shadow 10ms ease,transform 180ms ease;animation:bmcH4Gradient 3s ease-in-out infinite;
  }
  @keyframes bmcH4Gradient { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }
  @media (prefers-reduced-motion: reduce) { h4{animation:none;transition:none} }
}

.bmc-btn {
  padding: 8px 12px;
  box-shadow: 0 0 3px rgba(255, 181, 0, 1);
  outline: 1px solid rgba(255, 181, 0, .75);
  outline-offset: -1px;
  animation: pulseShadowYellow 2s infinite;
  & > span { color: rgba(255, 181, 0, 1); font-weight: 700; letter-spacing: -.02em; text-decoration: none; background: linear-gradient(160deg, rgba(255, 197, 0, 1)0%, rgba(208, 160, 3, 0.85)45%, rgba(255, 202, 0, 0.9)60%, rgba(208, 176, 3, 0.9)100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: text-shadow 10ms ease, transform 180ms ease; animation: bmcH4Gradient 3s ease-in-out infinite; }
}

@keyframes pulseShadowYellow {
  0% { box-shadow: 0 0 1px rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 0 5px rgba(255, 181, 0, 1); }
  100% { box-shadow: 0 0 1px rgba(255, 255, 255, 0.3); }
}

/* --- Converter App Card --- */
.app-card {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 70vh;
  min-height: 500px;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.editor-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.editor-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

textarea {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 16px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 14px;
  resize: none;
  outline: none;
  transition: border-color 0.3s;
}
textarea:focus { border-color: var(--primary-color); }

.actions-col {
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.convert-btn {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: white;
  border: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  animation: pulseShadow 2s infinite;
  & #btn_icon { line-height: 1; font-weight: bold; }
}
.convert-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(99, 102, 241, 0.6); }
.convert-btn:active { transform: scale(0.95); }

#spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseShadow {
  0% { box-shadow: 0 0 3px rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.7); }
  100% { box-shadow: 0 0 3px rgba(99, 102, 241, 0.3); }
}

/* --- Content Sections --- */
.content-section { width: 100%; max-width: 900px; margin-top: 20px; display: flex; flex-direction: column; gap: 40px; }
.content-block { line-height: 1.7; color: var(--text-muted); }
.content-block h2 { color: var(--text-main); margin-bottom: 20px; font-size: 1.8rem; font-weight: 700; }
.content-block h3 { color: var(--text-main); margin-top: 24px; margin-bottom: 12px; font-size: 1.3rem; font-weight: 600; }
.content-block p { margin-bottom: 16px; }
.content-block a { color: var(--primary-color); text-decoration: none; font-weight: 500; text-decoration: underline; }
.content-block a:hover { text-decoration: underline; }
.content-block ul { margin-bottom: 20px; padding-left: 20px; }
.content-block li { margin-bottom: 8px; }
.content-block li code { background: var(--input-bg); padding: 2px 4px; border-radius: 4px; font-family: var(--font-mono); font-style: italic; color: var(--primary-color); font-weight: 500; font-size: 0.85rem; }

/* --- Footer --- */
footer {
  margin-top: auto;
  border-top: 1px solid var(--glass-border);
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- EMBED MODE (Minimal UI) --- */
body.embed-mode {
  padding: 0;
  min-height: auto;
}
body.embed-mode header,
body.embed-mode footer,
body.embed-mode .ad-container,
body.embed-mode .info-section,
body.embed-mode .content-section {
  display: none !important;
}
body.embed-mode main { padding: 0; height: 100vh; }
body.embed-mode .app-card {
  height: 100vh;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .brand { font-size: 1.3rem; }
  header { padding: 20px; }
  .app-card { flex-direction: column; height: auto; }
  .ad-desktop { display: none; }
  .ad-mobile { display: flex; height: auto; min-height: 50px; }
  .nav-links { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; justify-items: right; }
  .nav-links a { width: max-content; margin-left: 0; padding: 6px; }
  .nav-links a span { display: none; }
  .actions-col { flex-direction: row; height: auto; padding: 20px 0; }
  .convert-btn {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    & #btn_icon { transform: rotate(90deg); }
  }
}

/* PIP Install Button */
#pip_install {
  position: relative;
  display: inline-block;
  font-size: 1.0rem;
  font-weight: 700;
  letter-spacing: 0px;
  text-align: center;
  margin: auto;
  white-space: nowrap;
  border: 1px solid var(--primary-hover);
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform .2s ease, border-color .2s ease;
}
#pip_install:hover { transform: scale(1.03); border-color: var(--primary-color); cursor: pointer; }
#pip_install:active { transform: scale(0.97); }
#pip_install:before,
#pip_install:after {
  content: '';
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: var(--primary-color);
}
#pip_install:before { left: -18px; }
#pip_install:after { right: -18px; }


/* Custom Scrollbar for Textareas */
textarea { --sb-track-color: #232E33; --sb-thumb-color: #544ee8; --sb-size: 8px; }
textarea::-webkit-scrollbar { width: var(--sb-size) }
textarea::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 3px; }
textarea::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 3px; }
@supports not selector(::-webkit-scrollbar) { textarea { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } }