:root {
  color-scheme: light;
  font-family: "Inter", "Microsoft YaHei", system-ui, sans-serif;
  background: #f4f5f7;
  color: #20242b;
  --line: #e4e7eb;
  --muted: #5c6470;
  --accent: #2451ad;
  --selected: #edf3ff;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select, textarea, input { font: inherit; }
button, select, input[type=file] { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button, select, textarea, input:not([type=file]) {
  border: 1px solid #d9dee6;
  border-radius: 7px;
  color: inherit;
  background: #fff;
  padding: 8px 11px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  min-height: 62px;
  color: #f6f8fc;
  background: #202630;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wordmark strong { font-size: 19px; letter-spacing: .12em; }
.wordmark span { font-size: 13px; color: #d2d8e2; }
.page-controls, .toolbar-actions { display: flex; gap: 8px; align-items: center; }
.page-controls { flex: 1; justify-content: center; min-width: 0; }
#pages { width: min(31vw, 400px); }
.toolbar button, .toolbar select { color: #20242b; }
.toolbar .primary { background: #3d6cda; border-color: #3d6cda; color: #fff; }
.workspace { display: grid; grid-template-columns: 228px minmax(0, 1fr) 326px; height: calc(100dvh - 62px); }
.directory, .panel { background: #fff; min-width: 0; overflow-y: auto; padding: 16px; }
.directory { border-right: 1px solid var(--line); }
.panel { border-left: 1px solid var(--line); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-size: 16px; font-weight: 680; }
.small-button, .view-toggle button { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
.add-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.add-tools button { padding-inline: 0; font-size: 13px; }
.search { display: block; margin: 12px 0; }
.search input { width: 100%; font-size: 13px; }
.module-list { display: grid; gap: 5px; }
.module-list button { width: 100%; text-align: start; font-size: 13px; overflow-wrap: anywhere; border-color: transparent; }
.module-list button:hover, .module-list button[aria-pressed=true] { background: var(--selected); color: #183b89; }
.module-list button.custom { border-left: 3px solid #6c8bd0; }
.canvas { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.canvas-bar { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.view-toggle { display: flex; gap: 5px; }
.view-toggle [aria-pressed=true] { background: var(--selected); color: #183b89; border-color: #b7c8ea; }
.canvas-bar a, .download { color: #214b9f; font-size: 13px; text-underline-offset: 3px; }
.frame-stage { flex: 1; min-height: 0; padding: 0 12px 12px; display: flex; justify-content: center; }
#preview { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
#preview.phone { max-width: 390px; }
.status { margin: 10px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.status.error { color: #9a2530; }
.download { display: inline-block; margin-bottom: 12px; }
#inspector { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
#inspector-title { font-size: 15px; margin: 0 0 12px; overflow-wrap: anywhere; }
.edit-field { display: grid; gap: 6px; min-width: 0; margin-bottom: 13px; }
.edit-field > span { font-size: 13px; font-weight: 600; }
.edit-field textarea { width: 100%; min-height: 64px; resize: vertical; line-height: 1.5; }
.edit-field img, .edit-field video { display: block; width: 100%; max-height: 155px; object-fit: contain; background: #eef0f2; border-radius: 6px; }
.edit-field input { max-width: 100%; font-size: 12px; }
.edit-field small { color: var(--muted); font-size: 12px; }
.custom-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.custom-actions button { font-size: 12px; }
.custom-actions .remove { color: #9a2530; }
@media (max-width: 1100px) { .workspace { grid-template-columns: 185px minmax(0, 1fr) 280px; } }
@media (max-width: 780px) {
  .toolbar { flex-wrap: wrap; gap: 9px; }
  #pages { width: min(60vw, 320px); }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .directory, .panel { border: 0; }
  .module-list { max-height: 145px; overflow: auto; }
  .canvas { height: 65dvh; }
}
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 390px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 32px; }
.login-brand { font-size: 16px; font-weight: 720; letter-spacing: .16em; }
.login-card h1 { font-size: 22px; margin: 12px 0 22px; }
.login-error { color: #9a2530; font-size: 13px; }
.login-error:empty { display: none; }
.login-card .primary { width: 100%; color: #fff; background: #2451ad; border-color: #2451ad; }