/* mirrorbox.css — the secret live-HTML-viewer page (js/mirrorbox.js) */
.mirrorbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 10050;
  flex-direction: column; background: var(--bg-color); color: var(--text-main);
}
.mirrorbox-overlay.open { display: flex; }
html.mirrorbox-open.rage-cursor, html.mirrorbox-open.rage-cursor * { cursor: auto !important; }
html.mirrorbox-open .fake-cursor { display: none; }

.mb-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 14px rgba(16, 185, 129, 0.18);
  position: relative; z-index: 1;
}
.mb-title { font-size: 2.2rem; display: flex; align-items: baseline; gap: 10px; }
.mb-title i { color: var(--neon-green); font-size: 1.8rem; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7)); }
.mb-title small { font-size: 1.2rem; color: var(--text-muted); }
.mb-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mb-actions button, .mb-seg {
  background: var(--bg-color); color: var(--text-main); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 5px 11px; font-size: 1.35rem; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.mb-actions button:hover, .mb-seg:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}
.mb-actions button:active, .mb-seg:active { transform: scale(0.96); }
.mb-seg.on { background: var(--neon-green); color: #04150f; border-color: var(--neon-green); box-shadow: 0 0 12px rgba(16, 185, 129, 0.55); }
.mb-run {
  background: var(--neon-green) !important; color: #04150f !important; border-color: var(--neon-green) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.55);
  font-weight: 700;
}
.mb-run:hover { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8) !important; }
.mb-close { color: var(--neon-red) !important; }
.mb-close:hover { border-color: var(--neon-red) !important; box-shadow: 0 0 10px rgba(255, 59, 92, 0.5) !important; }
.mb-group { display: inline-flex; gap: 0; }
.mb-group .mb-seg { border-radius: 0; margin-left: -1px; }
.mb-group .mb-seg:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.mb-group .mb-seg:last-child { border-radius: 0 8px 8px 0; }
.mb-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 1.3rem; color: var(--text-muted); cursor: pointer; }

.mb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.mb-split .mb-body { grid-template-columns: 1fr 1fr; }
.mb-code .mb-body { grid-template-columns: 1fr 0; }
.mb-preview .mb-body { grid-template-columns: 0 1fr; }
.mb-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mb-code .mb-pane-out, .mb-preview .mb-pane-in { display: none; }
.mb-pane-in { border-right: 1px solid var(--border-color); }
.mb-pane-head { padding: 5px 14px; font-size: 1.2rem; color: var(--text-muted); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; }
#mbEditor {
  flex: 1; width: 100%; resize: none; border: 0; outline: none; padding: 14px;
  background: var(--bg-color); color: var(--text-main);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; tab-size: 2;
  white-space: pre; overflow: auto;
}
.mb-stage-wrap { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; background:
  repeating-conic-gradient(var(--empty-tile-a) 0% 25%, var(--empty-tile-b) 0% 50%) 50% / 24px 24px; }
#mbStage { width: 100%; height: 100%; transition: max-width 0.2s; }
#mbFrame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

@media (max-width: 760px) {
  .mb-body, .mb-split .mb-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .mb-code .mb-body { grid-template-rows: 1fr 0; }
  .mb-preview .mb-body { grid-template-rows: 0 1fr; }
  .mb-pane-in { border-right: 0; border-bottom: 1px solid var(--border-color); }
  .mb-title small { display: none; }
}

/* uploaded files strip + drag-and-drop highlight */
.mb-filebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; border-bottom: 1px solid var(--border-color); min-height: 38px; }
.mb-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.mb-files-empty, .mb-note { font-size: 1.2rem; color: var(--text-muted); }
.mb-note { text-align: right; flex-shrink: 0; max-width: 45%; }
.mb-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--bg-color); }
.mb-chip button { background: none; border: 0; color: var(--text-main); padding: 3px 9px; font-size: 1.25rem; cursor: pointer; }
.mb-chip button:hover { background: var(--card-bg); color: var(--neon-green); }
.mb-chip-x { border-left: 1px solid var(--border-color) !important; color: var(--neon-red) !important; }
.mb-chip small { color: var(--text-muted); margin-left: 4px; }
.mirrorbox-overlay.mb-drop::after {
  content: "Drop files to add them"; position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--neon-green); background: rgba(10, 11, 16, 0.78); border: 3px dashed var(--neon-green); border-radius: 18px; pointer-events: none;
}