/* ============================================================
   custom-compiler.css — EduSeekho HTML/CSS Compiler
   Standalone, no customstyle.php dependency
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.seo-ad-col { display: none; }

/* ── Light tokens ── */
:root {
  --bg: #f0f2f5; --surface: #ffffff; --surface2: #f8f9fb; --surface3: #eef0f4;
  --border: #dde1e8; --border2: #c8cdd7;
  --text: #0f1117; --text2: #3c4250; --muted: #6b7380; --muted2: #9aa0ad;
  --accent: #2563eb; --accent-h: #1d4ed8; --accent-s: #eff6ff;
  --green: #16a34a; --green-bg: #f0fdf4; --green-b: #bbf7d0;
  --red: #dc2626; --red-bg: #fef2f2; --orange: #ea580c; --yellow: #ca8a04;
  --r: 7px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --font: 'Poppins', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Dark tokens ── */
body.dark {
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2128; --surface3: #21262d;
  --border: #30363d; --border2: #3d444e;
  --text: #e6edf3; --text2: #b1bac4; --muted: #7d8590; --muted2: #5c6370;
  --accent: #4493f8; --accent-h: #5ea3ff; --accent-s: #0d2041;
  --green: #3fb950; --green-bg: #0a1f0f; --green-b: #1a4d27;
  --red: #f85149; --red-bg: #1f0909;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
}

/* ── Base ── */
html { height: 100%; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  transition: background .2s, color .2s;
  /* Allow page scroll for SEO content */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100vh;
}

.profile-avatar-img {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--border);
}

/* ══ NAV ══ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: 50px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: sticky; top: 0; z-index: 100;
}
.nav-left  { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-logo { height: 28px; width: auto; border-radius: 6px; }
.nav-sep { width: 1px; height: 25px; background: var(--border); }
.nav-tag { font-size: 12px; font-weight: 500; color: var(--muted); }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--green); background: var(--green-bg);
  border: 1px solid var(--green-b); border-radius: 5px; padding: 2px 7px;
}

/* ── Dark btn ── */
.dark-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: background .12s, color .12s;
}
.dark-btn:hover { background: var(--surface2); color: var(--text); }

/* ── Theme dropdown ── */
.theme-drop { position: relative; display: inline-flex; }
.theme-btn {
  display: flex; align-items: center; gap: 7px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 500;
  transition: background .12s, color .12s; white-space: nowrap;
}
.theme-btn:hover { background: var(--surface2); color: var(--text); }
.t-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chev { transition: transform .2s; opacity: .5; }
.theme-drop.open .chev { transform: rotate(180deg); }
.theme-menu {
  display: none; position: absolute;
  top: calc(100% + 7px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px; min-width: 210px;
  z-index: 500; box-shadow: var(--shadow-lg);
  flex-direction: column; gap: 1px;
}
.theme-drop.open .theme-menu { display: flex; }
.menu-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted2); padding: 6px 9px 3px;
}
.menu-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 6px; cursor: pointer;
  border: none; background: transparent; width: 100%;
  text-align: left; font-family: var(--font);
  font-size: 12px; color: var(--text2); transition: background .1s;
}
.menu-opt:hover { background: var(--surface2); }
.menu-opt.active { background: var(--accent-s); color: var(--accent); font-weight: 600; }
body.dark .menu-opt.active { background: rgba(68,147,248,.12); }
.swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.opt-name { flex: 1; }
.opt-check { font-size: 11px; opacity: 0; color: var(--accent); }
.menu-opt.active .opt-check { opacity: 1; }

/* ── Profile dropdown ── */
.profile-drop { position: relative; display: inline-flex; }
.profile-btn {
  display: flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px 5px 7px; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap; flex-shrink: 0;
}
.profile-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
.profile-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
.profile-avatar.guest { background: var(--surface3); color: var(--muted); }
.profile-chev { width: 11px; height: 11px; opacity: .5; transition: transform .2s; flex-shrink: 0; }
.profile-drop.open .profile-chev { transform: rotate(180deg); }
.profile-menu {
  display: none; position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 8px; min-width: 200px;
  z-index: 502; box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  flex-direction: column; gap: 3px;
}
.profile-drop.open .profile-menu { display: flex; }
.profile-menu-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.profile-menu-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.profile-menu-plan  { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.profile-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  text-decoration: none; font-family: var(--font);
  font-size: 12.5px; font-weight: 500; color: var(--text2);
  background: transparent; border: none; width: 100%;
  text-align: left; transition: background .1s, color .1s; cursor: pointer;
}
.profile-menu-item:hover { background: var(--surface2); color: var(--text); }
.profile-menu-item.danger { color: var(--red); }
.profile-menu-item.danger:hover { background: rgba(239,68,68,.08); }
.profile-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
.profile-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ══ DESKTOP LAYOUT ══════════════════════════════════════════
   Stack:
   [nav 50px sticky]
   [workspace flex-row, height calc(100vh-50px)]
   [seo-outer block, scrolls naturally]
   ══════════════════════════════════════════════════════════ */

.page-wrap { display: block; }

.workspace {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 50px);
  height: calc(100dvh - 50px);
  overflow: hidden;
  flex-shrink: 0;
  min-width: 0;
}

/* Editor: 50% minus half of ad panel */
.editor-panel {
  width: calc(50% - 83px);
  flex: none;
  min-width: 200px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* Drag resizer */
.panel-resizer {
  width: 3px; background: var(--border);
  cursor: col-resize; flex-shrink: 0;
  transition: background .2s; z-index: 10;
}
.panel-resizer:hover,
.panel-resizer.dragging { background: var(--accent); }

/* Preview: flex 1 */
.right-col {
  flex: 1 1 0; min-width: 200px;
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--surface);
}

/* Ad panel: fixed 160px */
.ad-panel {
  width: 160px; flex: 0 0 160px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  overflow-y: auto; background: var(--surface);
  border-left: 1px solid var(--border);
  padding-top: 8px; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.ad-panel::-webkit-scrollbar { width: 3px; }
.ad-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.ad-slot-sky {
  width: 148px; height: 600px; flex-shrink: 0;
  background: var(--surface2); border: 1px dashed var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted2); border-radius: 4px;
}

/* ══ FILE TABS BAR (Option B: single row) ══ */
.file-tabs-bar {
  display: flex; align-items: center; flex-wrap: nowrap;
  height: 42px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 40;
  min-width: 0;
}
.tab-ext-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tab-ext-dot.html { background: #e34c26; }
.tab-ext-dot.css  { background: #264de4; }
.tab-ext-dot.js   { background: #e8b400; }
.files-dropdown {
  display: flex;
  position: relative;
  height: 100%;
  flex-shrink: 0;
  flex: 0 0 auto;
  z-index: 60;
  background: var(--surface2);
}
.files-btn {
  display: flex; align-items: center; gap: 6px;
  min-width: 104px;
  padding: 0 13px; height: 100%;
  border: none; border-right: 1px solid var(--border);
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--text2); background: transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.files-btn:hover,
.files-dropdown.open .files-btn {
  background: var(--surface3); color: var(--text);
}
.files-dropdown.open .files-btn {
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.files-chev { opacity: .55; transition: transform .18s, opacity .24s ease; flex-shrink: 0; }
.files-dropdown:hover .files-chev { opacity: .75; }
.files-dropdown.open .files-chev { transform: rotate(180deg); }
.files-menu {
  position: absolute;
  top: calc(100% + 7px); left: 8px;
  width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 24px));
  max-height: min(340px, calc(100vh - 140px));
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transform-origin: top left;
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 1000;
}
.files-dropdown.open .files-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.files-menu::-webkit-scrollbar { width: 4px; }
.files-menu::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.file-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0;
  padding: 7px 8px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--text2);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background .1s, color .1s;
}
.file-menu-item:hover { background: var(--surface2); color: var(--text); }
.file-menu-item.active {
  background: var(--accent-s); color: var(--accent); font-weight: 600;
}
body.dark .file-menu-item.active { background: rgba(68,147,248,.12); }
.file-menu-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-menu-close {
  width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 4px; color: var(--muted);
  font-size: 14px; line-height: 1;
  transition: background .1s, color .1s;
}
.file-menu-close:hover { background: var(--border); color: var(--text); }

.add-file-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px; height: 100%;
  border: none; border-right: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; background: transparent;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.add-file-btn:hover { background: var(--surface3); color: var(--accent); }

.tab-bar-actions {
  display: flex; align-items: center;
  height: 100%; padding: 0 8px; gap: 2px;
  flex-shrink: 0; flex: 0 0 auto; margin-left: auto;
  position: relative; z-index: 2;
  border-left: 1px solid var(--border);
  background: var(--surface2);
}
.btn-run {
  display: flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--r); padding: 5px 14px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap;
}
.btn-run:hover { background: var(--accent-h); }
.btn-run:active { transform: scale(.98); }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.icon-btn:hover { background: var(--surface3); color: var(--text); border-color: var(--border); }

/* ══ EDITOR BODY ══ */
.editor-body { flex: 1; overflow: hidden; position: relative; min-height: 0; }
#monaco-wrap { position: absolute; inset: 0; }

/* ── Statusbar ── */
.statusbar {
  display: flex; align-items: center; height: 24px; flex-shrink: 0;
  background: var(--accent); font-size: 11px;
  font-family: var(--mono); color: rgba(255,255,255,.9);
}
.sb-pill { display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 100%; cursor: default; }
.sb-div { width: 1px; height: 14px; background: rgba(255,255,255,.25); }

/* ══ PREVIEW PANEL ══ */
.preview-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; height: 42px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 8px;
}
.preview-bar-left { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text2); }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.preview-bar-right { display: flex; align-items: center; gap: 8px; }
.preview-width-badge {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 8px;
  min-width: 56px; text-align: center; font-family: var(--mono);
}
.preview-refresh-btn {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text2);
  background: var(--bg); cursor: pointer; transition: all .15s;
}
.preview-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
.preview-stage {
  flex: 1; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; align-items: stretch; justify-content: stretch;
  background: #ffffff;
}
.preview-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; width: 100%;
  color: var(--muted2); font-size: 13px; gap: 10px;
}
.preview-empty svg { opacity: .2; }

/* ── Browser Chrome ── */
.browser-chrome {
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden; border-bottom: 1px solid #d0d4d8;
}
.browser-titlebar {
  height: 36px; background: #f5f5f5;
  display: flex; align-items: center;
  padding: 0 10px; gap: 8px; flex-shrink: 0;
  border-bottom: 1px solid #d0d4d8;
}
body.dark .browser-titlebar { background: #1c2128; border-bottom-color: #30363d; }
.browser-dots { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.browser-dot  { width: 11px; height: 11px; border-radius: 50%; }
.browser-dot.red    { background: #ff5f57; }
.browser-dot.yellow { background: #ffbd2e; }
.browser-dot.green  { background: #28c840; }
.browser-tabs-row { display: flex; align-items: flex-end; height: 100%; margin-left: 8px; min-width: 0; overflow: hidden; }
.browser-tab {
  background: #fff; padding: 0 14px; height: 28px;
  display: flex; align-items: center;
  font-size: 11px; color: #333;
  border-radius: 8px 8px 0 0;
  border: 1px solid #d0d4d8; border-bottom: none;
  gap: 6px; font-family: var(--font); font-weight: 500; white-space: nowrap;
}
body.dark .browser-tab { background: #0d1117; color: #e6edf3; border-color: #30363d; }
.browser-addressbar {
  height: 32px; background: #f5f5f5;
  display: flex; align-items: center;
  padding: 0 10px; gap: 6px; flex-shrink: 0;
  border-bottom: 1px solid #d0d4d8;
}
body.dark .browser-addressbar { background: #1c2128; border-bottom-color: #30363d; }
.browser-nav-btn {
  width: 22px; height: 22px; border: none; background: none;
  color: #666; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  border-radius: 4px; padding: 0; flex-shrink: 0;
}
.browser-nav-btn:hover { background: #e0e0e0; }
body.dark .browser-nav-btn { color: #8b949e; }
body.dark .browser-nav-btn:hover { background: #21262d; }
.browser-url {
  flex: 1; height: 24px; background: #fff; border-radius: 12px;
  min-width: 0; overflow: hidden;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 11px; color: #333; font-family: var(--font);
  border: 1px solid #d0d4d8; gap: 5px;
}
body.dark .browser-url { background: #0d1117; color: #e6edf3; border-color: #30363d; }
.browser-lock { color: #188038; flex-shrink: 0; }
.browser-content { flex: 1; min-width: 0; min-height: 0; background: #fff; overflow: hidden; position: relative; }
.browser-content iframe { width: 100%; height: 100%; border: none; display: block; }
body.dark .browser-content { background: #0d1117; }

/* ══ SEO SECTION ══ */
.seo-outer { display: flex; flex-direction: row; }
.seo-content-col {
  flex: 1 1 0; min-width: 0;
  padding: 48px 40px 80px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.seo-ad-col {
  width: 160px; flex: 0 0 160px;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.seo-section h2 { font-size: 22px; font-weight: 700; margin-bottom: 14px; color: var(--text); }
.seo-section h3 { font-size: 15px; font-weight: 600; margin: 28px 0 8px; color: var(--text); }
.seo-section p  { font-size: 14px; line-height: 1.85; color: var(--text2); margin-bottom: 12px; }
.seo-section ul { padding-left: 20px; margin-bottom: 14px; }
.seo-section ul li { font-size: 14px; line-height: 1.8; color: var(--text2); margin-bottom: 5px; }
.seo-section code { font-family: var(--mono); font-size: 12.5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.seo-faq { margin-top: 36px; }
.seo-faq-item { border-bottom: 1px solid var(--border); padding: 18px 0; }
.seo-faq-q { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.seo-faq-a { font-size: 14px; color: var(--text2); line-height: 1.75; }

/* ══ TOAST ══ */
#toast {
  position: fixed; bottom: 22px; right: 22px;
  background: var(--text); color: var(--surface);
  padding: 10px 15px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 9999;
  display: flex; align-items: center; gap: 8px; max-width: 320px;
}
#toast.toast-show { opacity: 1; transform: translateY(0); }
#toast.toast-err  { background: var(--red); color: #fff; }

/* ══ MODALS ══ */
.modal-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  z-index: 1000; align-items: center; justify-content: center;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px; max-width: 450px; width: 92%;
  display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lg);
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-desc  { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.modal input {
  background: var(--surface2); border: 1.5px solid var(--border);
  color: var(--text); border-radius: var(--r);
  padding: 9px 12px; font-size: 12px; font-family: var(--mono);
  width: 100%; outline: none; transition: border-color .15s;
}
.modal input:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-ghost {
  padding: 8px 15px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: var(--font); border: 1.5px solid var(--border);
  background: transparent; color: var(--text2); transition: background .12s;
}
.btn-ghost:hover { background: var(--surface2); }
.btn-primary {
  padding: 8px 15px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: var(--font); border: none;
  background: var(--accent); color: #fff; transition: background .12s;
}
.btn-primary:hover { background: var(--accent-h); }

/* ── Add file modal ── */
.add-file-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 1001; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.add-file-modal.open { opacity: 1; pointer-events: all; }
.add-file-modal-inner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  width: 340px; max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.add-file-modal-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.add-file-input-row   { display: flex; gap: 8px; margin-bottom: 12px; }
.add-file-name-input {
  flex: 1; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: var(--font); outline: none;
  background: var(--bg); color: var(--text); transition: border-color .15s;
}
.add-file-name-input:focus { border-color: var(--accent); }
.add-file-ext-select {
  padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: var(--font); outline: none;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.add-file-limit   { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.add-file-actions { display: flex; gap: 8px; justify-content: flex-end; }
.add-file-cancel {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-weight: 600; background: none;
  color: var(--text2); cursor: pointer; font-family: var(--font);
}
.add-file-confirm {
  padding: 8px 16px; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; cursor: pointer; font-family: var(--font);
}

/* ══ MOBILE ADS — hidden by default ══ */
.mob-ad-top    { display: none; }
.mob-ad-bottom { display: none; }

/* ══ MOBILE TAB BAR — hidden on desktop ══ */
.mob-tabbar { display: none; }

/* ══ TABLET ≤900px ══ */
@media (max-width: 900px) {
  .ad-panel   { display: none !important; }
  .seo-ad-col { display: none !important; }
  .editor-panel { width: 50%; }
}

/* ══ PRO PLAN ══ */
body.plan-pro .ad-panel,
body.plan-pro .mob-ad-top,
body.plan-pro .mob-ad-bottom,
body.plan-pro .seo-ad-col { display: none !important; }

/* ══ MOBILE ≤700px ══ */
@media (max-width: 767.98px) {
  :root {
    --mobile-nav-h: 50px;
    --mobile-top-ad-h: 50px;
    --mobile-tabbar-h: 44px;
    --mobile-bottom-ad-h: 50px;
  }

  body.plan-pro {
    --mobile-top-ad-h: 0px;
    --mobile-bottom-ad-h: 0px;
  }

  body {
    min-width: 0;
    padding-bottom: var(--mobile-bottom-ad-h);
  }

  /* Hide desktop-only nav items */
  .nav-tag, .badge, .nav-sep { display: none !important; }
  .nav-right .dark-btn,
  .nav-right .theme-drop,
  .nav-right .profile-drop { display: none !important; }

  .nav {
    width: 100%;
    max-width: 100vw;
    height: var(--mobile-nav-h);
    padding: 0 10px;
    gap: 8px;
    overflow: visible;
    z-index: 600;
  }

  .nav-left,
  .nav-right {
    gap: 8px;
    min-width: 0;
  }

  .nav-left { flex: 0 0 auto; }
  .nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-right::-webkit-scrollbar { display: none; }

  .brand { flex: 0 0 auto; min-width: 0; }
  .brand-logo {
    display: block;
    max-width: 132px;
    height: 28px;
    object-fit: contain;
  }

  /* Mobile ad top */
  .mob-ad-top {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 100%; height: var(--mobile-top-ad-h);
    background: var(--surface2); border-bottom: 1px solid var(--border);
    overflow: hidden; flex-shrink: 0;
  }

  /* Mobile ad bottom — sticky */
  .mob-ad-bottom {
    display: flex !important;
    align-items: center; justify-content: center;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--mobile-bottom-ad-h); z-index: 400;
    background: var(--surface); border-top: 1px solid var(--border);
    overflow: hidden;
  }

  /* Mobile tab bar */
  .mob-tabbar {
    display: flex !important;
    width: 100%; height: var(--mobile-tabbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0; align-items: stretch;
    position: sticky; top: var(--mobile-nav-h); z-index: 300;
  }
  .mob-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: none;
    border-bottom: 2.5px solid transparent;
    font-family: var(--font); font-size: 12px; font-weight: 600;
    color: var(--muted); cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
  }
  .mob-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
  .mob-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* Workspace: fixed height block, panels positioned inside */
  .workspace {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* viewport minus: nav + mobile top ad + tabbar + fixed bottom ad */
    height: calc(100vh - var(--mobile-nav-h) - var(--mobile-top-ad-h) - var(--mobile-tabbar-h) - var(--mobile-bottom-ad-h)) !important;
    height: calc(100dvh - var(--mobile-nav-h) - var(--mobile-top-ad-h) - var(--mobile-tabbar-h) - var(--mobile-bottom-ad-h)) !important;
    height: calc(100svh - var(--mobile-nav-h) - var(--mobile-top-ad-h) - var(--mobile-tabbar-h) - var(--mobile-bottom-ad-h)) !important;
    min-height: 280px !important;
    overflow: hidden !important;
    flex-shrink: 0;
    margin-bottom: 16px !important;
  }

  /* Both panels hidden by default, fill workspace when active */
  .editor-panel,
  .right-col {
    display: none !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .editor-panel.mob-active,
  .right-col.mob-active { display: flex !important; }

  .preview-panel,
  .right-col.mob-active {
    height: 100% !important;
    max-height: 100% !important;
  }

  .preview-stage {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative;
  }

  .browser-chrome {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .browser-content {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 120px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .browser-content iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
  }

  /* Ad panel hidden on mobile */
  .ad-panel { display: none !important; }

  /* Resizer hidden on mobile */
  .panel-resizer { display: none !important; }

  /* SEO — block flow below workspace */
  .page-wrap  { display: block !important; }
  .seo-outer  { display: block !important; margin-top: 0 !important; clear: both; }
  .seo-ad-col { display: none !important; }
  .seo-content-col { padding: 32px 20px 80px; }

  /* Toast above sticky bottom ad */
  #toast { bottom: 72px !important; }

  /* File selector compact */
  .files-btn { min-width: 60px; font-size: 11px; padding: 0 9px; gap: 4px; }
  .files-menu {
    left: 6px;
    min-width: 190px;
    max-width: calc(100vw - 16px);
    max-height: min(260px, calc(100vh - 160px));
  }
  .add-file-btn  { font-size: 11px; padding: 0 8px; }
  .tab-bar-actions { padding: 0 4px; gap: 1px; }
  .btn-run { padding: 5px 10px; font-size: 11.5px; }

  .file-tabs-bar,
  .preview-bar,
  .statusbar {
    min-width: 0;
    max-width: 100%;
  }

  .files-dropdown,
  .preview-bar-left,
  .preview-bar-right,
  .browser-addressbar {
    min-width: 0;
  }

  .tab-bar-actions {
    margin-left: auto;
  }

  .preview-bar { padding: 0 8px; }
  .preview-width-badge { min-width: 0; max-width: 70px; overflow: hidden; }
  .preview-refresh-btn { flex-shrink: 0; }

  .browser-tabs-row { min-width: 0; }
  .browser-tab {
    max-width: calc(100vw - 78px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #monaco-wrap,
  .monaco-editor,
  .monaco-editor .overflow-guard {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .browser-titlebar {
    height: 32px;
    padding: 0 8px;
    gap: 6px;
  }

  .browser-tab {
    height: 25px;
    padding: 0 10px;
  }

  .browser-addressbar {
    height: 30px;
    padding: 0 8px;
    gap: 4px;
  }

  .browser-nav-btn {
    width: 20px;
    height: 20px;
  }

  .browser-url {
    height: 22px;
    padding: 0 8px;
    font-size: 10.5px;
  }
}