:root {
  color-scheme: dark;
  --background: #080b0d;
  --panel: #0c1114;
  --border: #273036;
  --muted: #89949b;
  --text: #f4f2ee;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 85% 0, rgba(36,104,180,.14), transparent 28%), var(--background);
  font-family: Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
}
button, input, select { font: inherit; }

.topbar {
  height: 82px;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #20272c;
}
.brand small, .section-label { color: #647179; font: 700 10px/1.2 monospace; letter-spacing: .17em; }
.brand h1 { margin: 5px 0 0; font-size: 25px; }
.export-button { border: 0; border-radius: 7px; padding: 12px 18px; background: #f2f0ec; color: #101416; font-weight: 800; cursor: pointer; }

.app-layout { height: calc(100vh - 82px); display: grid; grid-template-columns: 318px minmax(0, 1fr); }
.controls { padding: 10px 22px 18px; overflow: auto; border-right: 1px solid #20272c; background: var(--panel); }
.controls section { padding: 12px 0; border-bottom: 1px solid #222a2f; }
.field, .secondary-button, .upload-button {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #303a40;
  border-radius: 6px;
  outline: none;
  background: #080c0e;
  color: #eef1f2;
  font-size: 12px;
}
.button-row { display: grid; grid-template-columns: 1fr 72px; gap: 7px; }
.upload-button { display: flex; align-items: center; justify-content: center; border-style: dashed; background: #11181c; font-weight: 700; cursor: pointer; }
.upload-button input { display: none; }
.secondary-button { cursor: pointer; color: #b9c1c5; }
.dimension-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.slider-label { display: flex; justify-content: space-between; margin: 8px 0 2px; color: #aeb7bc; font-size: 10px; }
.slider-label b { color: white; }
.slider { width: 100%; height: 12px; accent-color: #d5d8da; }
.logo-preview { height: 37px; margin-top: 6px; padding: 5px 8px; display: flex; align-items: center; border-radius: 5px; background: linear-gradient(135deg, #1b242a, #11171b); }
.logo-preview img { max-width: 100%; max-height: 27px; object-fit: contain; }
.color-list { display: flex; gap: 11px; margin-top: 10px; }
.color-button { width: 27px; height: 27px; border: 3px solid var(--panel); border-radius: 50%; box-shadow: 0 0 0 1px #3b454b; cursor: pointer; }
.color-button.active { box-shadow: 0 0 0 2px white; transform: scale(1.06); }

.preview-panel { min-width: 0; padding: 24px clamp(24px, 4vw, 58px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.preview-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.preview-header span:last-child { color: #768289; font-size: 10px; }
.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #4bc786; }
.canvas-frame { max-height: calc(100vh - 175px); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #313a40; border-radius: 5px; background: #030506; box-shadow: 0 28px 70px rgba(0,0,0,.44); cursor: grab; touch-action: none; }
.canvas-frame.dragging { cursor: grabbing; }
canvas { display: block; max-width: 100%; max-height: calc(100vh - 175px); width: auto; height: auto; user-select: none; }
.hints { padding-top: 10px; color: #69757c; font-size: 10px; }
.hints span { margin-right: 18px; }
.hints span::before { content: "•"; margin-right: 7px; }

@media (max-width: 850px) {
  body { overflow: auto; }
  .app-layout { height: auto; grid-template-columns: 1fr; }
  .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; border-right: 0; }
  .canvas-frame, canvas { max-height: 70vh; }
}
@media (max-width: 560px) {
  .topbar { padding: 12px 15px; }
  .brand h1 { font-size: 20px; }
  .export-button { padding: 10px; font-size: 11px; }
  .controls { grid-template-columns: 1fr; }
  .preview-panel { padding: 22px 12px; }
}