:root {
  --bg: #0f1217;
  --card: #171a21;
  --text: #e8edf7;
  --muted: #a9b0bf;
  --primary: #2a7de1;
  --primary-2: #235fb1;
  --border: #2b3240;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app-header { padding: 24px 24px 4px; }
.app-header h1 { margin: 0; font-size: 24px; }
.app-header .subtitle { margin: 8px 0 0; color: var(--muted); }

.container { display: grid; grid-template-columns: 360px 1fr; gap: 20px; padding: 16px 24px 24px; }

.controls, .output { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }

.control-group { margin-bottom: 12px; }
.label { display: block; margin-bottom: 6px; color: var(--muted); }
input[type="file"], textarea, input[type="number"] {
  width: 100%;
  background: #0c0f13;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px;
}
textarea { resize: vertical; min-height: 160px; }

.actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
button { cursor: pointer; border: 0; padding: 8px 14px; border-radius: 8px; }
.primary { background: var(--primary); color: white; }
.primary:hover { background: var(--primary-2); }
.secondary { background: #2b3240; color: var(--text); }
.download { color: #9bd1ff; text-decoration: none; }
.download[disabled] { pointer-events: none; opacity: .5; }

.advanced { margin-top: 12px; }
.advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.advanced-grid label { font-size: 12px; color: var(--muted); display: grid; gap: 6px; }

.output { display: flex; align-items: flex-start; justify-content: center; }
.canvas-wrap { width: 100%; overflow: auto; border-radius: 8px; background: #0c0f13; display: grid; place-items: center; min-height: 240px; }
canvas { max-width: 100%; height: auto; }

.app-footer { text-align: center; color: var(--muted); padding: 8px 24px 24px; }