:root{
  color-scheme: dark;
  --bg: #0e0e0e;
  --panel: #1a1a1a;
  --border: #2c2c2c;
  --green: #1CC166;
  --red: #FF5B67;
  --text: #f5f5f5;
  --text-dim: #aaa;
  --text-muted: #777;
}
*{box-sizing:border-box}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Заголовок */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}
.header__logo {
  width: 90px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:block'%20width='68.2259'%20height='22.84'%20viewBox='0%200%2068.2259%2022.84'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='%23fff'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M42.8917%205.271c-3.3303%200-6.3557%202.045-6.3557%205.5231%200%203.4781%203.0254%206.1708%206.3557%206.1708%201.7194%200%203.0531-.3391%204.0161-1.0174-.0075%201.0378-.3453%201.8589-.9378%202.4199-.6.5712-1.6312.8874-2.7152.8874-.8471%200-1.5177-.0969-2.1001-.3392-.5799-.2422-1.0816-.6323-1.5833-1.2316l-.063-.0739-3.0228%201.9762.0706.1096c1.1547%201.762%203.6228%203.1441%206.6986%203.1441%202.1353%200%203.9152-.6273%205.1657-1.7493%201.253-1.1245%201.9639-2.736%201.9639-4.6816V5.2761h-3.474v.9689c-.3883-.2678-2.0043-.9715-4.0161-.9715l-.0026-.0026Zm-2.8387%205.6939c0-1.6192%201.5126-2.9681%203.4287-2.9681%201.916%200%203.4287%201.349%203.4287%202.9681%200%201.6192-1.5127%202.9682-3.4287%202.9682-1.9161%200-3.4287-1.349-3.4287-2.9682Z'/%3e%3cpath%20d='M14.277%2011.6407c-.3126-.5763-.7437-1.0506-1.2858-1.4229.6631-.747%201.0438-1.7492%201.0034-2.8508-.1008-2.1623-1.9387-3.8504-4.0867-3.8504H0v14.0578h10.7626c2.2085%200%204.006-1.8104%204.006-4.0314-.0101-.6783-.179-1.3235-.4916-1.8997v-.0026Zm-5.5036-5.416c.9227%200%201.7068.4385%201.7068%201.4253-.0101.9716-.8118%201.377-1.7143%201.377H3.474V6.2246h5.2993Zm.764%208.6442H3.474v-3.116h6.0506c.9227%200%201.727.5814%201.727%201.5708-.0202.9791-.8118%201.5401-1.7144%201.5401v.0051ZM19.9797%205.271h-3.4741v12.3008h3.4741V5.2709Zm-1.737-1.3186c1.0791%200%201.9539-.8848%201.9539-1.9762S19.3218%200%2018.2427%200c-1.079%200-1.9538.8848-1.9538%201.9762s.8748%201.9762%201.9538%201.9762Zm12.1617%201.3255c2.6068.4335%204.7775%202.555%204.7775%205.7679v6.5279h-3.4741v-5.6481c0-2.1955-1.3034-3.3583-3.0404-3.3583-1.6135%200-3.0405.8848-3.0405%203.3583v5.6481h-3.474V5.2779h3.474v.872c1.7371-.8797%203.4918-1.0862%204.7775-.872Z'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M60.2214%207.9684c-2.7102-2.9987-6.1692-3.575-8.1003-3.575V8.045c1.4294%200%204.001.4463%205.8842%202.9376-1.8858%202.4887-4.4548%202.9375-5.8842%202.9375v3.6515c1.9311%200%205.3901-.5763%208.1003-3.575%202.811%203.0166%206.0027%203.575%208.0045%203.575V13.92c-1.3614%200-3.7136-.3519-5.8162-2.9375%202.1026-2.5831%204.4548-2.9376%205.8162-2.9376V4.3934c-2.0018%200-5.1935.5585-8.0045%203.575Z'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.header__title {
  font-weight: 700;
  font-size: 17px;
}

/* Основной контейнер */
.main {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px;
}

/* Предпросмотр */
.preview-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
#canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  background: #050505;
  box-shadow: 0 4px 24px #0008;
}

/* Панель полей */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.wide { grid-column: 1 / -1; }

h3 {
  grid-column: 1 / -1;
  font-size: 12px;
  margin: 20px 0 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}
h3:first-of-type { margin-top: 0; }

label {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  margin: 12px 0 5px;
}

input, select {
  width: 100%;
  background: #0e0e0e;
  color: var(--text);
  border: 1px solid #414141;
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
  font-size: 14px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--green);
}
input[readonly] {
  color: var(--text-muted);
  background: #0a0a0a;
  cursor: not-allowed;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 5px;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
  accent-color: var(--green);
}
.checkbox-row label {
  margin: 0;
  cursor: pointer;
}

.date-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.date-row > input { flex: 1; }
.date-row > button {
  flex-shrink: 0;
  padding: 10px 12px;
  font-size: 12px;
  background: #333;
  color: #fff;
  margin: 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.date-row > button:active { background: #444; }

/* Кнопки действий */
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.btn {
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  font: 600 15px Inter, system-ui;
  cursor: pointer;
  transition: opacity .15s;
  text-align: center;
}
.btn:active { opacity: .85; }
.btn--primary {
  background: var(--green);
  color: #05251a;
}
.btn--secondary {
  background: #333;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: 14px;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  background: #222;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 1000;
  max-width: 90%;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.error { background: #4a1f22; }

@media (max-width: 600px) {
  .main { padding: 10px; }
  .panel { padding: 12px; }
  .preview-wrap { padding: 10px; }
  #canvas { max-width: 280px; }
}