* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

/* ---------- login ---------- */
body.login-page {
  display: grid; place-items: center; min-height: 100vh; background: #f7f7f9;
}
.login-card {
  background: #fff; padding: 2em; border: 1px solid #e1e1e6; border-radius: 8px;
  display: grid; gap: 1em; min-width: 320px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.login-card h1 { margin: 0; font-size: 1.2em; text-align: center; }
.login-card label { display: grid; gap: .25em; font-size: .85em; color: #444; }
.login-card input {
  padding: .55em .6em; border: 1px solid #ccc; border-radius: 4px; font: inherit;
}
.login-card input:focus { outline: 2px solid #2c5cdc; outline-offset: -1px; }
.login-card button {
  padding: .65em; background: #2c5cdc; color: #fff; border: 0;
  border-radius: 4px; cursor: pointer; font: inherit; font-weight: 500;
}
.login-card button:hover { background: #244dbb; }
.login-card .error {
  background: #fdecec; color: #9a1c1c; padding: .55em .65em;
  border-radius: 4px; font-size: .85em;
}

/* ---------- editor ---------- */
body.editor-page {
  display: grid;
  grid-template-columns: 240px 1fr 440px;
  height: 100vh; overflow: hidden;
  background: #fff;
}

.sidebar {
  background: #1e1e1e; color: #ddd;
  display: flex; flex-direction: column; min-height: 0;
}
.sidebar header { padding: 1em; border-bottom: 1px solid #333; }
.sidebar header h1 { margin: 0; font-size: 1em; font-weight: 600; }
.sidebar .actions { padding: .5em; display: flex; gap: .5em; border-bottom: 1px solid #333; }
.sidebar .actions button {
  flex: 1; padding: .45em; background: #333; color: #ddd;
  border: 0; border-radius: 4px; cursor: pointer; font: inherit;
}
.sidebar .actions button:hover { background: #444; }

.tree { flex: 1; overflow-y: auto; padding: .5em; font-size: .9em; }
.tree .folder { padding: 0; }
.tree .folder-label {
  cursor: pointer; padding: .3em .5em; border-radius: 3px;
  display: flex; gap: .35em; align-items: center; user-select: none;
}
.tree .folder-label:hover { background: #2a2a2a; }
.tree .folder-children { padding-left: .9em; }
.tree .template {
  padding: .3em .5em .3em 1.4em; cursor: pointer;
  border-radius: 3px; color: #bbb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree .template:hover { background: #2a2a2a; color: #fff; }
.tree .template.active { background: #2c5cdc; color: #fff; }
.tree .empty { padding: 1em .5em; color: #777; font-size: .85em; }

.sidebar .user {
  padding: .75em 1em; border-top: 1px solid #333;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85em;
}
.sidebar .user button {
  background: transparent; border: 1px solid #555; color: #ddd;
  padding: .3em .75em; border-radius: 4px; cursor: pointer; font: inherit;
}
.sidebar .user button:hover { background: #2a2a2a; }

.editor {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0; background: #fafafa;
}
.toolbar {
  display: flex; gap: .5em; padding: .5em;
  border-bottom: 1px solid #ddd; align-items: center; background: #fff;
}
.toolbar input {
  flex: 1; padding: .45em .65em; border: 1px solid #ccc;
  border-radius: 4px; font: inherit;
}
.toolbar input:focus { outline: 2px solid #2c5cdc; outline-offset: -1px; }
.toolbar button {
  padding: .45em .9em; background: #2c5cdc; color: #fff;
  border: 0; border-radius: 4px; cursor: pointer; font: inherit;
}
.toolbar button:hover { background: #244dbb; }
.toolbar button.danger { background: #cc3344; }
.toolbar button.danger:hover { background: #b02a3a; }
.toolbar button:disabled { opacity: .5; cursor: not-allowed; }

.cm-host {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.cm-editor { flex: 1 1 auto; min-height: 0; height: auto; }
.cm-scroller {
  overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 13px;
}

.preview {
  display: grid; grid-template-rows: 1fr 1fr;
  border-left: 1px solid #ddd; background: #ececef;
  min-height: 0; min-width: 0;
}
.preview-pane {
  display: flex; flex-direction: column;
  min-height: 0; padding: .5em; gap: .35em;
}
.preview-pane .label {
  font-size: .72em; color: #666; text-align: center;
  text-transform: uppercase; letter-spacing: .04em;
}
.preview-pane .frame-wrap {
  flex: 1; display: flex; justify-content: center; align-items: stretch;
  min-height: 0;
}
.preview-pane iframe {
  background: #fff; border: 1px solid #ccc; height: 100%;
}
.preview-pane.desktop iframe { width: 100%; max-width: 600px; }
.preview-pane.mobile iframe { width: 375px; }

/* ---------- modal ---------- */
dialog {
  padding: 0; border: 0; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog form { padding: 1.5em; min-width: 420px; }
dialog h2 { margin: 0 0 1em 0; font-size: 1.1em; }
#dropzone {
  border: 2px dashed #ccc; border-radius: 6px;
  padding: 2em; text-align: center; color: #666;
}
#dropzone.drag { border-color: #2c5cdc; background: #f0f4ff; color: #2c5cdc; }
#dropzone p { margin: 0 0 .5em 0; }
#uploadStatus { margin-top: 1em; font-size: .85em; min-height: 1.2em; color: #444; }
#uploadStatus.error { color: #b02a3a; }
dialog menu {
  padding: 0; margin: 1em 0 0; display: flex;
  justify-content: flex-end; gap: .5em;
}
dialog menu button {
  padding: .45em .9em; cursor: pointer; font: inherit;
  background: #eee; border: 1px solid #ccc; border-radius: 4px;
}

/* ---------- command palette ---------- */
dialog#palette {
  margin-top: 12vh;
  width: min(560px, 92vw);
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
dialog#palette::backdrop { background: rgba(0,0,0,.35); }
#paletteInput {
  width: 100%; padding: 1em 1.1em; font: inherit; font-size: 1em;
  border: 0; border-bottom: 1px solid #eee; outline: none;
  border-radius: 10px 10px 0 0;
}
#paletteResults {
  list-style: none; margin: 0; padding: .35em 0;
  max-height: 360px; overflow-y: auto;
}
#paletteResults li {
  padding: .55em 1.1em; cursor: pointer;
  display: flex; gap: .5em; align-items: center;
  font-size: .9em;
}
#paletteResults li.active,
#paletteResults li:hover { background: #2c5cdc; color: #fff; }
#paletteResults li .meta {
  margin-left: auto; font-size: .75em; opacity: .7;
}
#paletteResults li.empty {
  cursor: default; color: #888; font-style: italic;
  background: none;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 1em; right: 1em;
  background: #1e1e1e; color: #fff; padding: .6em 1em;
  border-radius: 6px; font-size: .85em;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 9999;
  max-width: 480px; word-break: break-all;
}
.toast.error { background: #cc3344; }