:root {
  color-scheme: light dark;

  --bg-color: #ffffff;
  --text-color: #37352f;
  --border-color: #ededeb;

  --button-bg: #ffffff;
  --button-hover: #f1f1f0;
  --button-text-color: rgba(55, 53, 47, 0.7);
  --input-bg: #ffffff;
  --input-border: #ededeb;

  --writer-stroke: #2383e2;
  --writer-outline: #f0f0f0;
  --writer-highlight: #2383e2;
  --writer-drawing: #333333;

  --panel-bg: rgba(0, 0, 0, 0.02);
  --danger: #d0302f;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.08);

  --ui-font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #191919;
    --text-color: #ffffff;
    --border-color: #2f2f2f;

    --button-bg: #2f2f2f;
    --button-hover: #3f3f3f;
    --button-text-color: rgba(255, 255, 255, 0.7);
    --input-bg: #2a2a2a;
    --input-border: #3a3a3a;

    --writer-stroke: #2383e2;
    --writer-outline: #2d2d2d;
    --writer-highlight: #2383e2;
    --writer-drawing: #ffffff;

    --panel-bg: rgba(255, 255, 255, 0.03);
    --danger: #ff6b6b;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--ui-font-size);
  transition: background-color 0.3s ease;
}

button {
  font-family: inherit;
}

/* 各功能页与首页挂载区共用 */
.widget-mount {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 演示/练习：writer 下方按钮行 */
.practice-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.practice-button {
  padding: 6px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--button-bg);
  color: var(--button-text-color);
  font-size: var(--ui-font-size);
  font-weight: 500;
  transition: background-color 0.2s;
  user-select: none;
}

.practice-button:hover {
  background-color: var(--button-hover);
}

.practice-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: var(--button-bg);
}