:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #eef1f6;
  color: #14213d;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(rgba(24, 52, 110, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 52, 110, .055) 1px, transparent 1px),
    #eef1f6;
  background-size: 32px 32px;
}

button, textarea { font: inherit; }
button { touch-action: manipulation; }

.page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 48px;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: #1647d8;
  color: #fff;
  font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 5px 5px 0 #ffb703;
}

.brand h1 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.brand p { margin: 2px 0 0; color: #65708a; font-size: .875rem; }
.stack { color: #53617d; font: 700 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  min-height: 680px;
  border: 1px solid #c8d0df;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 70px rgba(31, 47, 85, .13);
}

.editor { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid #d8deea; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid #e0e5ee;
}
.panel-head h2 { margin: 0; font-size: 1rem; }
.panel-head span { color: #7a8498; font-size: .8rem; }

#content {
  width: 100%;
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  padding: 26px;
  background: #fbfcff;
  color: #15233e;
  font: 1rem/1.75 ui-monospace, SFMono-Regular, Menlo, "Microsoft YaHei", monospace;
}
#content::placeholder { color: #9da6b7; }
#content:focus { box-shadow: inset 0 0 0 3px rgba(22, 71, 216, .16); }

.editor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 12px 18px;
  border-top: 1px solid #e0e5ee;
}

#status { color: #5e6b83; font-size: .875rem; }
#status[data-tone="ok"] { color: #087f5b; }
#status[data-tone="error"] { color: #c92a2a; }
#status[data-tone="busy"] { color: #1647d8; }

.primary-actions { display: flex; gap: 8px; }
.side { padding: 22px; background: #f7f9fc; }
.side h2 { margin: 2px 0 16px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.stat { min-height: 92px; padding: 14px; border: 1px solid #dbe1ec; border-radius: 12px; background: #fff; }
.stat strong { display: block; color: #1647d8; font: 800 1.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stat span { color: #707b91; font-size: .8rem; }

.tools { display: grid; gap: 9px; }
.button {
  min-height: 44px;
  border: 1px solid #c8d0df;
  border-radius: 9px;
  padding: 0 15px;
  background: #fff;
  color: #24324d;
  font-weight: 650;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tools .button { width: 100%; text-align: left; }
.button:hover { transform: translateY(-1px); border-color: #1647d8; box-shadow: 0 5px 14px rgba(22, 71, 216, .1); }
.button:focus-visible { outline: 3px solid rgba(22, 71, 216, .25); outline-offset: 2px; }
.button.primary { border-color: #1647d8; background: #1647d8; color: #fff; }
.button.danger { color: #b42318; }
.server-note { margin: 22px 0 0; color: #727d91; font-size: .8rem; line-height: 1.6; }

@media (max-width: 820px) {
  .page { width: min(100% - 20px, 680px); padding-top: 18px; }
  .masthead { align-items: flex-start; }
  .stack { display: none; }
  .workspace { grid-template-columns: 1fr; min-height: 0; }
  .editor { min-height: 540px; border-right: 0; border-bottom: 1px solid #d8deea; }
  .side { padding-bottom: 30px; }
}

@media (max-width: 520px) {
  .page { width: 100%; padding: 0; }
  .masthead { margin: 0; padding: 18px 16px; }
  .workspace { border-right: 0; border-left: 0; border-radius: 0; }
  .panel-head, #content { padding-right: 18px; padding-left: 18px; }
  .editor-foot { align-items: stretch; flex-direction: column; }
  .primary-actions { width: 100%; }
  .primary-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}