:root {
  color-scheme: dark;
  --page: #000;
  --panel: #171717;
  --border: #2b2b2b;
  --text: #eee;
  --muted: #858585;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--page); }
body {
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, textarea { font: inherit; }
.app-shell { width: 100%; min-height: 100dvh; padding: clamp(6px, 1.2vw, 14px); }
.notepad {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  min-height: calc(100dvh - clamp(12px, 2.4vw, 28px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.toolbar {
  display: flex;
  min-height: 37px;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 4px 6px 3px 10px;
  border-bottom: 1px solid var(--border);
}
.save-area {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin-right: auto;
}
.save-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}
.save-action {
  flex: none;
  padding: 2px 0;
  border: 0;
  color: #999;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.save-action:hover { color: #d0d0d0; }
.shortcut-hint { margin-left: 4px; color: #626262; font-size: 10px; }
.toolbar-actions { display: flex; flex: none; align-items: center; gap: 4px; }
.utility-button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #303030;
  border-radius: 6px;
  color: #a8a8a8;
  background: #1d1d1d;
  font-size: 11px;
  cursor: pointer;
}
.utility-button:hover { border-color: #414141; color: #dcdcdc; background: #272727; }
.language-button {
  min-width: 26px;
  padding-inline: 5px;
  border-color: transparent;
  color: #777;
  background: transparent;
}
.language-button:hover { border-color: #333; color: #bdbdbd; background: #202020; }
.utility-button:active { transform: translateY(1px); }
.utility-button:focus-visible, .save-action:focus-visible { outline: 2px solid #8b8b8b; outline-offset: 2px; }
.utility-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.editor {
  width: 100%;
  min-height: 0;
  resize: none;
  border: 0;
  outline: 0;
  padding: clamp(14px, 2.2vw, 26px);
  color: var(--text);
  caret-color: #fff;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  tab-size: 2;
}
.editor::placeholder { color: #555; }
::selection { color: #fff; background: #454545; }
@media (max-width: 420px) {
  .app-shell { padding: 5px; }
  .notepad { min-height: calc(100dvh - 10px); border-radius: 8px; }
  .toolbar { min-height: 37px; gap: 4px; padding-left: 8px; }
  .save-area { gap: 5px; }
  .save-action { font-size: 10px; }
  .shortcut-hint { display: none; }
  .utility-button { padding: 0 6px; }
  .editor { padding: 13px; }
}