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

:root {
  --bg:         #060914;
  --surface:    #0c0f1d;
  --card:       #101426;
  --border:     #1a1f38;
  --border-hov: #262d50;
  --primary:    #6d77ff;
  --purple:     #9d4edd;
  --gold:       #f0b429;
  --cyan:       #00d4ff;
  --green:      #1dd1a1;
  --red:        #ff5c5c;
  --orange:     #ff9f43;
  --pink:       #ff6eb4;
  --text:       #eef0f8;
  --text-2:     #8b91b8;
  --text-3:     #3d4470;
  --mono:       'JetBrains Mono', 'Fira Code', monospace;
  --font:       'Inter', system-ui, sans-serif;
  --toolbar-h:  52px;
  --status-h:   26px;
  --panel-w:    320px;
  --transition: .15s ease;
}

html, body {
  height: 100%; overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hov); }

/* ════════════════════════════════════════════════
   TOOLBAR
════════════════════════════════════════════════ */
.toolbar {
  height: var(--toolbar-h);
  background: rgba(6,9,20,.95);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0;
  padding: 0 12px; position: relative; z-index: 50;
  backdrop-filter: blur(12px);
}
.toolbar::after {
  content: '';
  position: absolute; inset-x: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,119,255,.5), rgba(0,212,255,.3), transparent);
}

.toolbar-left  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.toolbar-center{ flex: 1; }
.toolbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.toolbar-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; padding: 4px 6px; border-radius: 8px;
  transition: background var(--transition);
}
.toolbar-brand:hover { background: rgba(255,255,255,.05); }
.toolbar-brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  background: linear-gradient(135deg, #c084fc 0%, #6d77ff 60%, #00d4ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.toolbar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.toolbar-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.toolbar-title svg { color: var(--text-3); }

.toolbar-file-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 10px;
}
#fileIndicator { color: var(--gold); font-size: 10px; }
.toolbar-file-input {
  background: none; border: none; outline: none;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--text); width: 130px;
}

/* toolbar buttons */
.tbtn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; border-radius: 7px;
  color: var(--text-2); font-family: var(--font); font-size: 12.5px;
  padding: 5px 8px; transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.tbtn:hover { background: rgba(255,255,255,.07); color: var(--text); }
.tbtn.active { background: rgba(109,119,255,.15); color: var(--primary); }

.tbtn-icon { width: 32px; height: 30px; padding: 0; font-size: 11px; }
.tbtn-icon sup { font-size: 8px; vertical-align: super; }

.tbtn-font-size {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  min-width: 20px; text-align: center;
}

.tbtn-run {
  background: linear-gradient(135deg, #6d77ff, #9d4edd);
  color: #fff; border: none; border-radius: 7px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: opacity var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 18px rgba(109,119,255,.35);
}
.tbtn-run:hover { opacity: .9; box-shadow: 0 0 24px rgba(109,119,255,.55); }
.tbtn-run:active { transform: scale(.97); }

.toolbar-actions { display: flex; align-items: center; gap: 2px; }

.tbtn-mobile-menu { display: none; }

/* ════════════════════════════════════════════════
   MOBILE DRAWER
════════════════════════════════════════════════ */
.mobile-drawer {
  display: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 8px 12px;
}
.mobile-drawer.open { display: block; }
.mobile-drawer-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════ */
.editor-layout {
  display: flex;
  height: calc(100vh - var(--toolbar-h) - var(--status-h));
  overflow: hidden;
}

/* ════════════════════════════════════════════════
   EDITOR PANE
════════════════════════════════════════════════ */
.editor-pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

#cmEditor {
  flex: 1; height: 100%; overflow: hidden;
}

/* CodeMirror overrides */
.cm-editor {
  height: 100% !important;
  background: var(--bg) !important;
  font-family: var(--mono) !important;
}
.cm-scroller { overflow: auto !important; }
.cm-content { padding: 12px 0 !important; }
.cm-focused { outline: none !important; }

/* Line numbers */
.cm-lineNumbers { color: #2d3465 !important; min-width: 48px; }
.cm-lineNumbers .cm-activeLineGutter { color: #5561a0 !important; background: rgba(109,119,255,.05) !important; }
.cm-gutter { background: #060914 !important; border-right: 1px solid #131730 !important; }
.cm-gutterElement { padding: 0 10px 0 6px !important; }

/* Active line */
.cm-activeLine { background: rgba(109,119,255,.055) !important; }
.cm-activeLineGutter { background: rgba(109,119,255,.055) !important; }

/* Selection */
.cm-selectionBackground { background: rgba(109,119,255,.28) !important; }
.cm-focused .cm-selectionBackground { background: rgba(109,119,255,.3) !important; }

/* Cursor */
.cm-cursor { border-left-color: #6d77ff !important; border-left-width: 2px !important; }

/* Fold gutter */
.cm-foldGutter { color: #2d3465 !important; }
.cm-foldGutter:hover { color: #6d77ff !important; }

/* Bracket matching */
.cm-matchingBracket { background: rgba(0,212,255,.15) !important; outline: 1px solid rgba(0,212,255,.4) !important; border-radius: 2px; }
.cm-nonmatchingBracket { background: rgba(255,92,92,.15) !important; outline: 1px solid rgba(255,92,92,.4) !important; }

/* Search panel */
.cm-panels { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.cm-panels * { color: var(--text) !important; }
.cm-textfield { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 5px; padding: 3px 8px; font-family: var(--mono); }
.cm-button { background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text-2) !important; border-radius: 5px; cursor: pointer; padding: 3px 10px; }
.cm-button:hover { background: var(--border) !important; color: var(--text) !important; }

/* Autocomplete dropdown */
.cm-tooltip { background: #111728 !important; border: 1px solid #262d50 !important; border-radius: 10px !important; box-shadow: 0 12px 40px rgba(0,0,0,.7) !important; padding: 4px 0 !important; }
.cm-tooltip-autocomplete > ul { max-height: 280px; }
.cm-tooltip-autocomplete > ul > li {
  display: flex !important; align-items: center !important; gap: 8px;
  padding: 7px 14px !important; font-family: var(--mono) !important; font-size: 13px !important;
  color: #a5abff !important; cursor: pointer;
  border-left: 2px solid transparent;
}
.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: rgba(109,119,255,.15) !important;
  border-left-color: var(--primary) !important;
  color: var(--text) !important;
}
.cm-completionIcon { display: none !important; }
.cm-completionLabel { flex: 1; font-weight: 600; }
.cm-completionDetail { font-size: 11px !important; color: var(--text-3) !important; font-family: var(--font) !important; }

/* Documentation popup */
.cm-tooltip.cm-tooltip-hover {
  background: #111728 !important;
  border: 1px solid var(--border-hov) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  max-width: 360px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}

/* Highlight style – CenzoJS tokens */
.cenzo-fn     { color: #a5abff; font-weight: 700; }
.cenzo-dollar { color: #9d4edd; font-weight: 700; }
.cenzo-bracket{ color: #00d4ff; }
.cenzo-semi   { color: #5d6494; }
.cenzo-string { color: #1dd1a1; }
.cenzo-number { color: #ff9f43; }
.cenzo-comment{ color: #3d4470; font-style: italic; }
.cenzo-escape { color: #ff9f43; }

/* ════════════════════════════════════════════════
   SIGNATURE TOOLTIP (floating above cursor)
════════════════════════════════════════════════ */
.cm-sig-wrap {
  background: #0f1526;
  border: 1px solid #1f2645;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 220px;
  max-width: 440px;
  box-shadow: 0 10px 36px rgba(0,0,0,.75);
  pointer-events: none;
}
.cm-sig-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px;
}
.cm-sig-fn     { color: #a5abff; font-weight: 800; margin-right: 1px; }
.cm-sig-bracket{ color: #00d4ff; font-weight: 700; }
.cm-sig-sep    { color: #2d3465; }
.cm-sig-arg    { color: #3d4470; transition: color .1s; }
.cm-sig-arg-active {
  color: #eef0f8;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #6d77ff;
  text-underline-offset: 3px;
}
.cm-sig-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #161c35;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.cm-sig-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9d4edd;
  font-weight: 700;
  background: rgba(157,78,221,.1);
  border: 1px solid rgba(157,78,221,.2);
  border-radius: 4px;
  padding: 1px 6px;
}
.cm-sig-req {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
}
.cm-sig-req.req { color: #6d77ff; background: rgba(109,119,255,.1); border: 1px solid rgba(109,119,255,.2); }
.cm-sig-req.opt { color: #3d4470; background: rgba(61,68,112,.1);   border: 1px solid rgba(61,68,112,.2); }
.cm-sig-desc { color: #8b91b8; line-height: 1.5; flex: 1; }

/* ════════════════════════════════════════════════
   RESIZE GUTTER
════════════════════════════════════════════════ */
.gutter {
  width: 4px; cursor: col-resize;
  background: var(--border);
  transition: background var(--transition);
  flex-shrink: 0;
  position: relative;
}
.gutter::after {
  content: '';
  position: absolute; inset: 0 -3px;
}
.gutter:hover, .gutter.dragging { background: var(--primary); }

/* ════════════════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════════════════ */
.right-panel {
  width: var(--panel-w); flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
}
.right-panel.collapsed { width: 0; border-left: none; }

.panel-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-tab {
  flex: 1; padding: 10px 6px; background: none; border: none;
  cursor: pointer; color: var(--text-3); font-size: 12px; font-weight: 600;
  font-family: var(--font); letter-spacing: .3px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.panel-tab:hover { color: var(--text-2); }
.panel-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.panel-content {
  display: none; flex: 1; overflow-y: auto; flex-direction: column;
}
.panel-content.active { display: flex; }

/* ── OUTPUT ── */
.output-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.output-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
}
.output-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
}
.output-status.running .output-dot { background: var(--gold); animation: pulse 1s infinite; }
.output-status.success .output-dot { background: var(--green); }
.output-status.success { color: var(--green); }
.output-status.error   { color: var(--red); }
.output-status.error .output-dot { background: var(--red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.output-clear-btn {
  font-size: 11px; font-weight: 600; background: none; border: 1px solid var(--border);
  color: var(--text-3); border-radius: 5px; padding: 3px 8px; cursor: pointer;
  font-family: var(--font); transition: var(--transition);
}
.output-clear-btn:hover { border-color: var(--border-hov); color: var(--text); }

.output-body { flex: 1; padding: 14px; overflow-y: auto; }
.output-placeholder {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: var(--text-3);
}
.output-placeholder p { font-size: 12.5px; line-height: 1.6; }
.output-placeholder kbd {
  display: inline-block; background: var(--card); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-size: 11px;
  color: var(--text-2);
}

.output-line {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  padding: 2px 0;
}
.output-line.out  { color: var(--text); }
.output-line.info { color: var(--text-2); font-style: italic; }
.output-line.err  { color: var(--red); }
.output-line.val  { color: var(--green); }

/* ── REFERENCE ── */
.ref-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ref-search-wrap svg { color: var(--text-3); flex-shrink: 0; }
.ref-search {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font); font-size: 13px; color: var(--text);
}
.ref-search::placeholder { color: var(--text-3); }
.ref-list { flex: 1; overflow-y: auto; }

.ref-item {
  padding: 9px 14px; border-bottom: 1px solid rgba(26,31,56,.5);
  cursor: pointer; transition: background var(--transition);
}
.ref-item:hover { background: rgba(109,119,255,.07); }
.ref-item-name {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #a5abff; margin-bottom: 3px;
}
.ref-item-desc { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.ref-item-syntax {
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  margin-top: 4px; opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── SNIPPETS ── */
.snippets-list { flex: 1; overflow-y: auto; padding: 8px; }
.snippet-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: var(--transition);
}
.snippet-card:hover { border-color: rgba(109,119,255,.3); background: rgba(109,119,255,.06); }
.snippet-title {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.snippet-desc { font-size: 11.5px; color: var(--text-2); margin-bottom: 8px; }
.snippet-code {
  font-family: var(--mono); font-size: 11.5px; color: var(--cyan);
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}
.snippet-insert {
  margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--primary);
  opacity: 0; transition: opacity var(--transition);
}
.snippet-card:hover .snippet-insert { opacity: 1; }

/* ════════════════════════════════════════════════
   STATUS BAR
════════════════════════════════════════════════ */
.statusbar {
  height: var(--status-h);
  background: linear-gradient(135deg, #0a0d1e, #0c0f1d);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; flex-shrink: 0;
}
.statusbar-left, .statusbar-right {
  display: flex; align-items: center; gap: 0;
}
.sb-item {
  font-size: 11px; color: var(--text-3); padding: 0 10px;
  border-right: 1px solid var(--border);
}
.statusbar-right .sb-item { border-right: none; border-left: 1px solid var(--border); }
.sb-lang { color: var(--primary); font-weight: 700; letter-spacing: .4px; }
.sb-hint { color: var(--cyan); font-family: var(--mono); font-size: 10.5px; }

/* ════════════════════════════════════════════════
   FUNCTION DOC POPUP
════════════════════════════════════════════════ */
.fn-doc-popup {
  position: fixed; z-index: 400;
  background: #111728; border: 1px solid #262d50;
  border-radius: 10px; padding: 14px 16px;
  max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.7);
  pointer-events: none;
}
.fn-doc-name {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: #a5abff; margin-bottom: 6px;
}
.fn-doc-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 8px; }
.fn-doc-syntax { font-family: var(--mono); font-size: 12px; color: var(--cyan); }

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toolbar-left .toolbar-brand-name { display: none; }
  .toolbar-file-pill { display: none; }
  .toolbar-title { display: none; }
  .toolbar-divider { display: none; }
  .toolbar-actions { display: none; }
  .tbtn-mobile-menu { display: flex !important; }
  .gutter { display: none; }
  .right-panel {
    display: none;
    position: fixed; inset: auto 0 var(--status-h) 0;
    width: 100% !important; height: 50vh;
    border-left: none; border-top: 1px solid var(--border);
    z-index: 100;
  }
  .right-panel.mobile-open { display: flex !important; }
  .editor-layout { flex-direction: column; }
  .editor-pane { flex: 1; min-height: 0; }
  .statusbar { position: fixed; bottom: 0; left: 0; right: 0; }
}

@media (min-width: 769px) {
  .tbtn-mobile-menu { display: none !important; }
  .mobile-drawer { display: none !important; }
}

/* ════════════════════════════════════════════════
   LINTER SQUIGGLES
════════════════════════════════════════════════ */
.cm-lintRange-error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 L1.5 1 L3 2.5 L4.5 1 L6 2.5' stroke='%23ff5c5c' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
}
.cm-lintRange-warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.5 L1.5 1 L3 2.5 L4.5 1 L6 2.5' stroke='%23f0b429' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
}
.cm-gutterElement.cm-lint-marker {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cm-gutter-lint { width: 18px; }
.cm-lint-marker-error::before  { content: '⚠'; font-size: 11px; color: #ff5c5c; }
.cm-lint-marker-warning::before { content: '!'; font-size: 11px; color: #f0b429; font-weight: 700; }

/* Lint tooltip */
.cm-tooltip.cm-tooltip-lint {
  background: #12162a; border: 1px solid rgba(255,92,92,.35);
  border-radius: 8px; padding: 8px 12px;
  font-size: 12.5px; color: #ff5c5c; max-width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════════════
   EDITOR TOAST
════════════════════════════════════════════════ */
.editor-toast {
  position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%) translateY(14px);
  background: #1a1f3a; border: 1px solid rgba(109,119,255,.35);
  color: var(--text-1); font-size: 13px; font-family: var(--mono);
  padding: 9px 18px; border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  white-space: nowrap; z-index: 9999;
}
.editor-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.editor-toast.info { border-color: rgba(0,212,255,.3); }

/* Find/Format/Share button highlight */
#btnShare:hover, #btnFind:hover, #btnFormat:hover {
  color: var(--primary);
  background: rgba(109,119,255,.15);
}