/* =========================================================
   CF Studio — Design tokens
   ========================================================= */
:root{
  --font-ui: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --accent: #f6821f;
  --accent-2: #3ba7ff;
  --accent-ink: #1a0f04;
  --success: #35d399;
  --danger: #ff5470;
  --warning: #ffb020;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-1: 0 4px 20px rgba(0,0,0,.25);
  --topbar-h: 56px;
}

html[data-theme="dark"]{
  --bg: #0b0d12;
  --bg-elevated: #12151d;
  --surface: #171b26;
  --surface-2: #1f2432;
  --surface-hover: #262c3d;
  --border: #262b39;
  --border-soft: #1d212c;
  --text: #eef0f5;
  --text-dim: #8992a8;
  --text-faint: #5b6178;
  --scrollbar: #2b3040;
  --cm-theme: dracula;
}

html[data-theme="light"]{
  --bg: #f4f5f8;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f1f5;
  --surface-hover: #e7e9ef;
  --border: #dde0e8;
  --border-soft: #e7e9f0;
  --text: #1b1e27;
  --text-dim: #5c6270;
  --text-faint: #9298a8;
  --scrollbar: #d7dae2;
  --cm-theme: eclipse;
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
::selection{ background: rgba(246,130,31,.35); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--accent); color:#1a0f04; padding:.6rem 1rem; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

a{ color: var(--accent-2); }

:focus-visible{
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

code{ font-family: var(--font-mono); color: var(--accent); background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px; }

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  height: var(--topbar-h);
  display:flex; align-items:center; gap:.5rem;
  padding: 0 .75rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 1030;
}
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.2px; }
.brand-mark{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), #ffb35c);
  color:#1a0f04; font-size:.9rem;
}
.brand-text strong{ color: var(--accent); }

.topbar-status{
  display:flex; align-items:center; gap:.45rem;
  font-size:.8rem; color: var(--text-dim);
  padding:.3rem .6rem; border-radius: 999px;
  background: var(--surface); border:1px solid var(--border);
  margin-left: .5rem;
}
.dot{ width:8px; height:8px; border-radius:50%; }
.dot-off{ background: var(--text-faint); }
.dot-ok{ background: var(--success); box-shadow: 0 0 0 3px rgba(53,211,153,.18); }
.dot-busy{ background: var(--warning); animation: pulse 1.1s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.topbar-spacer{ flex:1; }
.topbar-actions{ display:flex; align-items:center; gap:.25rem; }

.icon-btn{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius: var(--radius-sm); border:1px solid transparent;
  background: transparent; color: var(--text-dim); cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover{ background: var(--surface-hover); color: var(--text); }
.icon-btn.icon-btn-xs{ width:28px; height:28px; font-size:.85rem; }
.icon-btn:disabled{ opacity:.35; cursor:not-allowed; }

/* =========================================================
   Layout
   ========================================================= */
.layout{
  display:flex;
  min-height: calc(100dvh - var(--topbar-h));
}

.sidebar{
  width: 320px;
  flex-shrink:0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
}
.sidebar-body{ padding: .9rem; display:flex; flex-direction:column; gap:.9rem; height:100%; overflow:hidden; }

.main{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
}
.view{ padding: 1.25rem; flex:1; min-height:0; }
.view.editor-view{ padding:0; display:flex; flex-direction:column; }

/* Tabs pill */
.tabs-pill{
  display:flex; gap:.25rem; padding:.25rem;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
}
.tab-pill{
  flex:1; border:0; background:transparent; color:var(--text-dim);
  padding:.5rem .5rem; border-radius: var(--radius-sm); font-size:.82rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
}
.tab-pill.active{ background: var(--surface-hover); color: var(--text); }
.tab-panel{ display:flex; flex-direction:column; gap:.7rem; min-height:0; overflow:hidden; flex:1; }
.tab-panel[hidden]{ display:none !important; }

.panel-toolbar{ display:flex; gap:.4rem; align-items:center; }
.panel-toolbar-secondary{ gap:.5rem; }
.btn-group-tight{ display:flex; gap:.35rem; align-items:center; }
.btn-group-tight .form-select{ width:auto; }

.search-box{
  flex:1; display:flex; align-items:center; gap:.4rem;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 .55rem; height:36px;
}
.search-box i{ color: var(--text-faint); font-size:.85rem; }
.search-box input{
  border:0; background:transparent; color:var(--text); flex:1; height:100%;
  font-family: var(--font-ui); font-size:.85rem;
}
.search-box input:focus{ outline:0; }

.form-select, .form-control{
  background: var(--surface); border-color: var(--border); color: var(--text);
  font-family: var(--font-ui);
}
.form-select:focus, .form-control:focus{
  background: var(--surface); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(246,130,31,.15);
}
.form-select.form-select-sm{ font-size:.78rem; }

.btn-outline-soft{
  border:1px solid var(--border); color: var(--text); background: var(--surface);
}
.btn-outline-soft:hover{ background: var(--surface-hover); color: var(--text); border-color: var(--border); }

.btn-accent{
  background: linear-gradient(135deg, var(--accent), #ff9c40);
  border: 0; color: #1a0f04; font-weight:700;
}
.btn-accent:hover{ filter:brightness(1.06); color:#1a0f04; }
.btn-accent:disabled{ opacity:.45; }

/* Empty states */
.empty-state{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.6rem; padding: 2rem 1rem; color: var(--text-faint);
}
.empty-state i{ font-size:1.9rem; }
.empty-state p{ margin:0; font-size:.85rem; max-width: 22ch; }
.empty-state-lg{ min-height: 220px; }
.empty-state-lg p{ max-width: 40ch; font-size:.95rem; }

/* Entity list (workers / projects) */
.entity-list{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.entity-item{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem;
  border-radius: var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition: background .12s, border-color .12s;
}
.entity-item:hover{ background: var(--surface); }
.entity-item.active{ background: var(--surface-2); border-color: var(--accent); }
.entity-icon{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background: var(--surface-2); color: var(--accent-2); font-size:.95rem;
}
.entity-info{ min-width:0; flex:1; }
.entity-name{ font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entity-meta{ display:flex; gap:.5rem; font-size:.72rem; color: var(--text-faint); }
.entity-status{ width:8px; height:8px; border-radius:50%; background: var(--success); flex-shrink:0; }
.entity-status.paused{ background: var(--text-faint); }
.entity-menu{ flex-shrink:0; }

/* =========================================================
   Connect view
   ========================================================= */
.view#viewConnect{ display:flex; align-items:center; justify-content:center; }
.connect-card{
  width:100%; max-width: 460px;
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; box-shadow: var(--shadow-1);
}
.connect-hero{ text-align:center; margin-bottom: 1.4rem; }
.connect-hero-mark{
  display:inline-grid; place-items:center; width:52px; height:52px; border-radius: 14px; margin-bottom:.8rem;
  background: linear-gradient(135deg, var(--accent), #ffb35c); color:#1a0f04; font-size:1.4rem;
}
.connect-hero h1{ font-size:1.35rem; margin:0 0 .4rem; }
.connect-hero p{ font-size:.85rem; color: var(--text-dim); margin:0; }

.connect-form{ display:flex; flex-direction:column; gap:1rem; }
.form-field label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; }
.field-hint{ display:block; margin-top:.4rem; color: var(--text-faint); font-size:.75rem; }
.input-with-btn{ display:flex; gap:.35rem; }
.input-with-btn .form-control{ flex:1; }
.form-check-line{ display:flex; align-items:flex-start; gap:.5rem; font-size:.8rem; color: var(--text-dim); }
.form-check-line .form-check-input{ margin-top:.2rem; }

.btn-spinner{ margin-left:.5rem; }
.alert-inline{
  padding:.65rem .8rem; border-radius: var(--radius-sm); font-size:.82rem; display:flex; gap:.5rem; align-items:flex-start;
}
.alert-inline.ok{ background: rgba(53,211,153,.12); color: var(--success); border:1px solid rgba(53,211,153,.3); }
.alert-inline.err{ background: rgba(255,84,112,.12); color: var(--danger); border:1px solid rgba(255,84,112,.3); }

/* Proxy CORS setup */
.proxy-required-box{
  background: rgba(246,130,31,.08); border:1px solid rgba(246,130,31,.35); border-radius: var(--radius);
  padding:.9rem 1rem; margin-bottom: 1.1rem;
}
.proxy-required-head{
  display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem; color: var(--accent); margin-bottom:.35rem;
}
.proxy-required-box p{ font-size:.8rem; color: var(--text-dim); margin: 0 0 .6rem; }
.proxy-guide-steps{ padding-left: 1.2rem; margin: 0 0 1.1rem; display:flex; flex-direction:column; gap:.6rem; font-size:.88rem; }
.proxy-guide-steps li{ line-height:1.5; }
.proxy-code-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem;
  font-size:.75rem; color: var(--text-faint); font-family: var(--font-mono);
}
.proxy-code{
  background:#0a0c10; color:#c7d3ea; font-family: var(--font-mono); font-size:.74rem; line-height:1.55;
  border-radius: var(--radius-sm); padding:1rem; max-height: 340px; overflow:auto; margin:0; white-space:pre;
  border:1px solid #1c2130;
}
.proxy-guide-note{ font-size:.78rem; color: var(--text-faint); margin: .9rem 0 0; display:flex; gap:.4rem; align-items:flex-start; }

/* Account overview */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.page-head h2, .page-head h3{ margin:0 0 .2rem; }
.text-dim{ color: var(--text-dim); }
.stat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:.8rem; margin-top:1.1rem;
}
.stat-card{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius);
  padding:1rem;
}
.stat-card .stat-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); }
.stat-card .stat-value{ font-size:1.15rem; font-weight:700; margin-top:.3rem; word-break:break-word; }

/* =========================================================
   Editor view
   ========================================================= */
.editor-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .8rem; border-bottom:1px solid var(--border); background: var(--bg-elevated);
}
.editor-title{ display:flex; align-items:center; gap:.5rem; min-width:0; flex:1; }
.editor-title i{ color: var(--accent-2); }
.editor-name-input{
  border:1px solid transparent; background:transparent; color: var(--text); font-weight:700;
  font-size:.92rem; padding:.2rem .35rem; border-radius:6px; min-width:0; max-width: 220px;
}
.editor-name-input:hover, .editor-name-input:focus{ border-color: var(--border); background: var(--surface); outline:0; }
.badge-source{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  color: var(--accent); background: rgba(246,130,31,.12); border:1px solid rgba(246,130,31,.3);
  padding:.15rem .5rem; border-radius: 999px; flex-shrink:0;
}
.unsaved-dot{ width:8px; height:8px; border-radius:50%; background: var(--warning); flex-shrink:0; }

.editor-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.btn-toolbar-group{
  display:flex; align-items:center; gap:.15rem;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); padding:.15rem;
}
.tb-divider{ width:1px; align-self:stretch; background: var(--border); margin:0 .25rem; }

.editor-body{ flex:1; display:flex; min-height:0; }

.file-tree{
  width: 220px; flex-shrink:0; border-right:1px solid var(--border); background: var(--bg-elevated);
  display:flex; flex-direction:column;
}
.file-tree-body{ padding:.7rem; }
.file-tree-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68rem; letter-spacing:.08em; color: var(--text-faint); font-weight:700;
  padding: .2rem .3rem .6rem;
}
.file-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.file-item{
  display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border-radius:6px; cursor:pointer;
  font-size:.8rem; color: var(--text-dim);
}
.file-item i{ font-size:.85rem; }
.file-item:hover{ background: var(--surface); color: var(--text); }
.file-item.active{ background: var(--surface-2); color: var(--text); font-weight:600; }
.file-item .file-main-flag{ font-size:.6rem; color: var(--accent); margin-left:auto; }
.file-item .file-remove{ margin-left:auto; opacity:0; }
.file-item:hover .file-remove{ opacity:1; }

.editor-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cm-container{ flex:1; min-height:0; }
.cm-container .CodeMirror{
  height:100%; font-family: var(--font-mono); font-size: 13.5px; line-height:1.55;
}

.editor-statusbar{
  display:flex; align-items:center; gap:.5rem; padding:.35rem .8rem;
  font-size:.72rem; color: var(--text-faint); background: var(--bg-elevated); border-top:1px solid var(--border);
}
.statusbar-sep{ opacity:.5; }
.statusbar-spacer{ flex:1; }
.lint-ok{ color: var(--success); }
.lint-error{ color: var(--danger); }
.lint-ok i, .lint-error i{ margin-right:.25rem; }

/* =========================================================
   Modals / toasts
   ========================================================= */
.modal-content{
  background: var(--bg-elevated); border:1px solid var(--border); color: var(--text); border-radius: var(--radius);
}
.modal-header, .modal-footer{ border-color: var(--border); }

.deploy-console{
  background:#0a0c10; color:#c7d3ea; font-family: var(--font-mono); font-size:.78rem;
  border-radius: var(--radius-sm); padding:1rem; max-height: 320px; overflow:auto; margin:0; white-space:pre-wrap;
  border:1px solid #1c2130;
}
.deploy-console .lg-ok{ color:#35d399; }
.deploy-console .lg-warn{ color:#ffb020; }
.deploy-console .lg-err{ color:#ff5470; }
.deploy-console .lg-info{ color:#3ba7ff; }
.deploy-result{ margin-top:1rem; padding: .9rem; border-radius: var(--radius-sm); background: rgba(53,211,153,.1); border:1px solid rgba(53,211,153,.3); }
.deploy-result a{ font-family: var(--font-mono); word-break:break-all; }

.toast{
  background: var(--bg-elevated); color: var(--text); border:1px solid var(--border);
  font-family: var(--font-ui); font-size:.85rem;
}
.toast.toast-ok{ border-left:3px solid var(--success); }
.toast.toast-err{ border-left:3px solid var(--danger); }
.toast.toast-info{ border-left:3px solid var(--accent-2); }

/* Fullscreen editor */
.CodeMirror-fullscreen{ z-index: 1200 !important; }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 992px){
  .sidebar{ position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h)); }
  .file-tree{ position: sticky; top:0; height: 100%; }
}

@media (max-width: 991.98px){
  .sidebar{ width: 300px; background: var(--bg-elevated); color: var(--text); }
  .file-tree{ width: 260px; }
  .editor-name-input{ max-width: 140px; }
}

@media (max-width: 575.98px){
  .connect-card{ padding: 1.25rem; border-radius: var(--radius); }
  .btn-toolbar-group{ flex-wrap: wrap; }
  .editor-topbar{ padding:.5rem; }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
}

/* Offcanvas theming (Bootstrap dark override) */
.offcanvas{ background: var(--bg-elevated); color: var(--text); border-color: var(--border); }