:root{
  --bg:#ffffff;
  --panel:#f6f7f9;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --accent:#2563eb;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui;
  background:var(--bg);
  color:var(--text);
}

#app{min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:10;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.title{
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}

button:hover{
  background:#eef2f7;
}

button:active{
  transform: translateY(0.5px);
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.tabs{display:flex;gap:8px}

.tab{
  background:transparent;
  border:1px solid transparent;
}

.tab.active{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.25);
}

.split{
  height:calc(100vh - 58px);
  display:flex;
  flex-direction:column
}

.pane{
  flex:1;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid var(--border)
}

.paneHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.015);
}

.paneTitle{font-weight:900}

.paneFile{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

textarea{
  width:100%;
  height:calc(100% - 0px);
  padding:12px;
  border:none;
  outline:none;
  resize:none;
  background:transparent;
  color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

textarea::placeholder{
  color: rgba(15,23,42,.45);
}

pre{
  margin:0;
  padding:12px;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--text);
}

/* files */
.files{
  border-top:1px solid var(--border);
  padding:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.file{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}

.file.active{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.25);
}

/* Mobile switch */
body[data-page="editor"] #viewerPane{display:none}
body[data-page="viewer"] #editorPane{display:none}

/* plugin UI */
.pluginBar{
  display:flex;
  gap:6px;
  padding:6px 8px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.015);
}

.pluginIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.03);
  cursor:pointer;
}

.pluginIcon:hover{
  background:rgba(0,0,0,.06);
}

.pluginIcon.active{
  outline:2px solid rgba(37,99,235,.35);
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.10);
}
.spaceWrap{
  min-width:0;
  display:flex;
  justify-content:center;
}

.spaceSelect{
  width:100%;
  max-width: 320px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-weight:900;
  text-align:center;
  outline:none;
  cursor:pointer;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spaceSelect:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.spacesHost{
  height: calc(100vh - 58px);
}

.spaceRoot{
  height: 100%;
}
.spacesHost{
  height:calc(100vh - 58px);
}

.spaceRoot{
  height:100%;
}

.spaceRoot .split{
  height:100%;
}