:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #f4f6fa;
  color: #172033;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(109, 93, 252, 0.06), transparent 28rem),
    #f4f6fa;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
select,
input[type="color"],
input[type="range"] {
  cursor: pointer;
}

svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

.atd-app {
  --panel-border: #e5e9f1;
  --muted: #7a8499;
  --accent: #6657eb;
  --accent-dark: #5547d7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.atd-header {
  height: 76px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 20;
}

.atd-brand,
.atd-brand > div:first-child,
.atd-header-actions,
.atd-section-heading > div,
.atd-toolbar-group,
.atd-save-status,
.atd-button,
.atd-switch-label,
.atd-style-heading > div,
.atd-preset-main,
.atd-footer-tip {
  display: flex;
  align-items: center;
}

.atd-brand {
  gap: 13px;
}

.atd-logo {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, #7668f6, #5748d9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(94, 77, 222, 0.25);
}

.atd-logo svg {
  width: 23px;
  height: 23px;
}

.atd-brand h1 {
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.atd-brand p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.atd-header-actions {
  gap: 18px;
}

.atd-save-status {
  gap: 7px;
  color: #7b8495;
  font-size: 12px;
}

.atd-save-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25b784;
  box-shadow: 0 0 0 4px rgba(37, 183, 132, 0.1);
}

.atd-button {
  height: 36px;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    0.18s ease background,
    0.18s ease border,
    0.18s ease transform,
    0.18s ease box-shadow;
}

.atd-button:active {
  transform: translateY(1px);
}

.atd-button-primary {
  color: white;
  border-color: var(--accent);
  background: linear-gradient(180deg, #7162ee, #6252e1);
  box-shadow: 0 5px 13px rgba(95, 79, 220, 0.23);
}

.atd-button-primary:hover {
  background: linear-gradient(180deg, #6556e5, #5647d5);
}

.atd-button-secondary {
  color: #495369;
  background: white;
  border-color: #dfe4ec;
  box-shadow: 0 1px 2px rgba(25, 34, 50, 0.03);
}

.atd-button-secondary:hover,
.atd-button-quiet:hover {
  color: var(--accent);
  border-color: #cfc9fa;
  background: #faf9ff;
}

.atd-button-secondary.is-active {
  color: #fff;
  border-color: #5547d7;
  background: #6657eb;
  box-shadow: 0 4px 12px rgba(102, 87, 235, 0.2);
}

.atd-button:disabled,
.atd-icon-button:disabled,
.atd-text-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.atd-button-quiet {
  color: #687287;
  background: transparent;
  border-color: transparent;
}

.atd-main {
  height: calc(100vh - 76px);
  min-height: 680px;
  display: grid;
  grid-template-columns: 300px minmax(560px, 1fr) 292px;
}

.atd-panel {
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #d8dce5 transparent;
}

.atd-left-panel {
  border-right: 1px solid var(--panel-border);
}

.atd-right-panel {
  border-left: 1px solid var(--panel-border);
}

.atd-section {
  padding: 19px 18px;
  border-bottom: 1px solid #edf0f5;
}

.atd-section-heading {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.atd-section-heading > div {
  gap: 9px;
}

.atd-step {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: #efedff;
  border: 1px solid #dfdbff;
  border-radius: 6px;
  padding: 3px 5px;
}

.atd-section h2 {
  margin: 0;
  color: #242d40;
  font-size: 14px;
  font-weight: 700;
}

.atd-text-button {
  padding: 4px;
  color: var(--accent);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 600;
}

.atd-text-button:hover {
  color: var(--accent-dark);
}

.atd-raw-input {
  width: 100%;
  height: 122px;
  display: block;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  outline: none;
  color: #263045;
  background: #fbfcfe;
  font-size: 12px;
  line-height: 1.65;
  transition:
    border 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.atd-raw-input::placeholder {
  color: #a2aabd;
}

.atd-raw-input:focus {
  border-color: #958af4;
  background: white;
  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.1);
}

.atd-parse-row {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.atd-parse-hint {
  max-width: 140px;
  overflow: hidden;
  color: #9099aa;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-parse-button {
  height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.atd-parse-button svg {
  color: #20a77d;
}

.atd-result-list {
  display: grid;
  gap: 8px;
}

.atd-result-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 19px;
  align-items: center;
  gap: 9px;
  padding: 9px 9px 9px 10px;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  background: #fff;
  transition:
    border 0.18s ease,
    box-shadow 0.18s ease;
}

.atd-result-item:focus-within {
  border-color: #c8c1fa;
  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.07);
}

.atd-result-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: var(--field-color);
  background: color-mix(in srgb, var(--field-color) 10%, white);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.atd-result-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atd-result-label {
  color: #8c95a7;
  font-size: 9px;
}

.atd-result-content input {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  color: #283248;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.atd-result-content input::placeholder {
  color: #b2b8c5;
  font-weight: 400;
}

.atd-detected-mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: #aeb5c3;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
  opacity: 0.45;
}

.atd-detected-mark svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.atd-result-item.is-detected .atd-detected-mark {
  color: #13a875;
  border-color: #bfeada;
  background: #eefbf6;
  opacity: 1;
}

.atd-format-preview {
  margin-top: 9px;
  padding: 9px 10px;
  background: #f8f7ff;
  border: 1px solid #e4e0ff;
  border-radius: 9px;
}

.atd-format-preview > span {
  display: block;
  margin-bottom: 5px;
  color: #7b70d7;
  font-size: 9px;
  font-weight: 700;
}

.atd-format-preview pre {
  margin: 0;
  overflow: hidden;
  color: #343d50;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

.atd-format-preview pre.is-placeholder {
  color: #a1a7b4;
}

.atd-preset-section {
  border-bottom: 0;
}

.atd-count-badge {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #7b8496;
  background: #f2f4f8;
  border-radius: 10px;
  font-size: 10px;
}

.atd-preset-save {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 7px;
  margin-bottom: 9px;
}

.atd-preset-save input,
.atd-control-group select,
.atd-control-group input[type="number"] {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  color: #374157;
  background: #fbfcfe;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  outline: 0;
  font-size: 11px;
}

.atd-preset-save input:focus,
.atd-control-group select:focus,
.atd-control-group input[type="number"]:focus {
  border-color: #a69cf5;
  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.08);
}

.atd-icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #687287;
  background: #fff;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  transition: 0.18s ease;
}

.atd-icon-button:hover {
  color: var(--accent);
  border-color: #cfc9fa;
  background: #faf9ff;
}

.atd-icon-button-accent {
  color: white;
  border-color: var(--accent);
  background: var(--accent);
}

.atd-icon-button-accent:hover {
  color: white;
  border-color: var(--accent-dark);
  background: var(--accent-dark);
}

.atd-preset-list {
  display: grid;
  gap: 7px;
}

.atd-preset-empty {
  padding: 16px 10px;
  color: #9aa2b1;
  background: #fafbfc;
  border: 1px dashed #dfe4eb;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.atd-preset-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid #e5e9f0;
  border-radius: 9px;
  background: #fff;
  transition: 0.18s ease;
}

.atd-preset-item:hover,
.atd-preset-item.is-active {
  border-color: #ccc5fa;
  background: #fbfaff;
}

.atd-preset-item-renaming {
  display: block;
  padding: 5px;
  border-color: #bfb7f7;
  background: #fbfaff;
}

.atd-preset-rename-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px 27px;
  gap: 4px;
}

.atd-preset-rename-form input {
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  color: #394257;
  background: #fff;
  border: 1px solid #bfb7f7;
  border-radius: 6px;
  outline: 0;
  font-size: 10px;
}

.atd-preset-rename-form input:focus {
  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.09);
}

.atd-preset-rename-form button {
  width: 27px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #6557d8;
  background: #fff;
  border: 1px solid #ddd8ff;
  border-radius: 6px;
}

.atd-preset-rename-form button:last-child {
  color: #8d95a4;
}

.atd-preset-main {
  min-width: 0;
  gap: 8px;
  padding: 7px;
  text-align: left;
  background: transparent;
  border: 0;
}

.atd-preset-thumb {
  width: 31px;
  height: 24px;
  display: block;
  position: relative;
  flex: 0 0 auto;
  background: #f1f2f6;
  border: 1px solid #dde1e8;
  border-radius: 4px;
}

.atd-preset-thumb i {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #8d83ec;
}

.atd-preset-thumb i:nth-child(1) {
  left: 4px;
  top: 5px;
  width: 9px;
}

.atd-preset-thumb i:nth-child(2) {
  right: 4px;
  top: 5px;
  width: 9px;
  background: #4ab493;
}

.atd-preset-thumb i:nth-child(3) {
  left: 4px;
  right: 4px;
  top: 13px;
  background: #eaa067;
}

.atd-preset-main > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atd-preset-main strong,
.atd-preset-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-preset-main strong {
  color: #3a4357;
  font-size: 11px;
}

.atd-preset-badge {
  display: inline-flex;
  align-items: center;
  height: 15px;
  margin-left: 5px;
  padding: 0 5px;
  color: #6758d9;
  background: #efedff;
  border-radius: 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  vertical-align: middle;
}

.atd-preset-main small {
  color: #989faf;
  font-size: 9px;
}

.atd-preset-lock {
  width: 42px;
  color: #9a93c8;
  font-size: 8px;
  text-align: center;
}

.atd-preset-actions {
  display: flex;
  align-items: center;
  padding-right: 3px;
}

.atd-preset-action {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #a1a8b6;
  background: transparent;
  border: 0;
  border-radius: 6px;
  opacity: 0;
}

.atd-preset-item:hover .atd-preset-action,
.atd-preset-item.is-active .atd-preset-action {
  opacity: 1;
}

.atd-preset-rename:hover {
  color: #6557d8;
  background: #f0edff;
}

.atd-preset-delete:hover {
  color: #d25555;
  background: #fff1f1;
}

.atd-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 55px minmax(0, 1fr) 43px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
    radial-gradient(circle at center, #edf0f7, #e6eaf2);
}

.atd-workspace-toolbar {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid #e1e5ed;
}

.atd-toolbar-group {
  min-width: 0;
  gap: 6px;
}

.atd-image-name {
  max-width: 230px;
  overflow: hidden;
  color: #929aab;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-switch-label {
  gap: 7px;
  margin-left: 7px;
  color: #667085;
  font-size: 11px;
  white-space: nowrap;
}

.atd-switch-label > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.atd-switch {
  width: 31px;
  height: 18px;
  display: block;
  position: relative;
  background: #c8ced9;
  border-radius: 10px;
  transition: background 0.18s ease;
}

.atd-switch i {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(38, 45, 58, 0.25);
  transition: transform 0.18s ease;
}

.atd-switch-label input:checked + .atd-switch {
  background: var(--accent);
}

.atd-switch-label input:checked + .atd-switch i {
  transform: translateX(13px);
}

.atd-canvas-shell {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 32px;
}

.atd-preprocess-toolbar {
  min-width: min(860px, calc(100% - 32px));
  min-height: 56px;
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px 8px 13px;
  color: #3e475a;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #dcdfea;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 38, 54, 0.17);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.atd-preprocess-toolbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.atd-preprocess-title,
.atd-preprocess-actions,
.atd-preprocess-title > span:last-child,
.atd-preprocess-color {
  display: flex;
  align-items: center;
}

.atd-preprocess-title {
  flex: 0 0 auto;
  gap: 9px;
}

.atd-preprocess-title > span:last-child {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.atd-preprocess-title strong {
  font-size: 11px;
}

.atd-preprocess-title small {
  color: #969eae;
  font-size: 8px;
  white-space: nowrap;
}

.atd-preprocess-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #786af5, #5a4bdd);
  border-radius: 8px;
}

.atd-preprocess-actions {
  min-width: 0;
  justify-content: flex-end;
  gap: 6px;
}

.atd-preprocess-color {
  height: 34px;
  gap: 6px;
  padding: 0 8px;
  color: #626c80;
  background: #f8f9fb;
  border: 1px solid #e0e4eb;
  border-radius: 8px;
  font-size: 9px;
}

.atd-preprocess-color input {
  width: 20px;
  height: 20px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.atd-preprocess-color input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.atd-preprocess-color input::-webkit-color-swatch {
  border: 1px solid #d7dbe4;
  border-radius: 5px;
}

.atd-preprocess-count {
  min-width: 50px;
  color: #8b94a5;
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}

.atd-text-action {
  height: 30px;
  padding: 0 7px;
  color: #7c8597;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
}

.atd-text-action:hover {
  color: #5f50dd;
  background: #f3f1ff;
}

.atd-app.is-preprocessing .atd-right-panel {
  pointer-events: none;
  opacity: 0.58;
}

.atd-app.is-preprocessing .atd-workspace-toolbar {
  background: rgba(249, 248, 255, 0.94);
}

.atd-canvas-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#c9ceda 0.75px, transparent 0.75px);
  background-size: 15px 15px;
  opacity: 0.48;
}

.atd-stage {
  min-width: 260px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: white;
  border-radius: 3px;
  outline: none;
  box-shadow:
    0 2px 5px rgba(32, 40, 55, 0.12),
    0 22px 55px rgba(38, 45, 63, 0.14);
  user-select: none;
  touch-action: none;
}

.atd-stage:focus-visible {
  box-shadow:
    0 0 0 3px rgba(109, 93, 252, 0.18),
    0 22px 55px rgba(38, 45, 63, 0.14);
}

.atd-stage.is-drawing {
  cursor: crosshair;
}

.atd-stage.is-mask-drawing {
  cursor: crosshair;
}

.atd-blank-grid,
.atd-stage > img,
.atd-preprocess-layer,
.atd-zone-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atd-blank-grid {
  pointer-events: none;
  background:
    linear-gradient(#edf0f4 1px, transparent 1px),
    linear-gradient(90deg, #edf0f4 1px, transparent 1px);
  background-size: 5% 7.8125%;
  opacity: 0.55;
}

.atd-stage > img {
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.atd-zone-layer {
  overflow: hidden;
}

.atd-preprocess-layer {
  z-index: 8;
  display: none;
  overflow: hidden;
}

.atd-stage.is-preprocessing .atd-preprocess-layer {
  display: block;
}

.atd-stage.is-preprocessing .atd-zone-layer {
  visibility: hidden;
  pointer-events: none;
}

.atd-mask-block {
  position: absolute;
  cursor: move;
  background: var(--mask-color);
  border: 1px solid rgba(58, 65, 80, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(30, 35, 47, 0.1);
}

.atd-mask-block.is-selected {
  border: 2px solid #6657eb;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 0 3px rgba(102, 87, 235, 0.16);
}

.atd-mask-index {
  min-width: 17px;
  height: 17px;
  position: absolute;
  left: 3px;
  top: 3px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: #fff;
  background: rgba(36, 42, 55, 0.68);
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
  pointer-events: none;
}

.atd-mask-handle {
  width: 9px;
  height: 9px;
  position: absolute;
  z-index: 3;
  display: none;
  background: #fff;
  border: 2px solid #6657eb;
  border-radius: 2px;
}

.atd-mask-block.is-selected .atd-mask-handle {
  display: block;
}

.atd-mask-nw {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.atd-mask-ne {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.atd-mask-sw {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.atd-mask-se {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.atd-stage-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #8e97a8;
  text-align: center;
  pointer-events: none;
}

.atd-stage-empty strong {
  color: #606a7e;
  font-size: clamp(11px, 1.2vw, 15px);
}

.atd-stage-empty span {
  font-size: clamp(8px, 0.9vw, 11px);
}

.atd-empty-illustration {
  width: clamp(46px, 5.8vw, 68px);
  height: clamp(46px, 5.8vw, 68px);
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  color: #a7afbf;
  background: #f2f4f7;
  border-radius: 50%;
}

.atd-empty-illustration svg {
  width: 68%;
  height: 68%;
  stroke-width: 1.3;
}

.atd-zone {
  position: absolute;
  cursor: move;
  border: 1.5px solid var(--field-color);
  background: color-mix(in srgb, var(--field-color) 5%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.atd-zone.is-selected {
  z-index: 5;
  background: color-mix(in srgb, var(--field-color) 8%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 2px color-mix(in srgb, var(--field-color) 18%, transparent);
}

.atd-zone-tag {
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: 2;
  padding: 2px 5px 2px 4px;
  color: white;
  background: var(--field-color);
  border-radius: 0 0 4px 0;
  font-size: clamp(6px, 0.65vw, 9px);
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
  transform: translateY(-100%);
}

.atd-zone-text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  white-space: pre-wrap;
  pointer-events: none;
}

.atd-zone-text.is-placeholder {
  opacity: 0.35;
}

.atd-resize-handle {
  width: 8px;
  height: 8px;
  position: absolute;
  z-index: 3;
  display: none;
  background: white;
  border: 1.5px solid var(--field-color);
  border-radius: 2px;
}

.atd-zone.is-selected .atd-resize-handle {
  display: block;
}

.atd-resize-nw {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}

.atd-resize-ne {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}

.atd-resize-sw {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}

.atd-resize-se {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

.atd-stage.is-preview .atd-zone {
  cursor: default;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.atd-stage.is-preview .atd-zone-tag,
.atd-stage.is-preview .atd-resize-handle {
  display: none;
}

.atd-drop-hint {
  position: absolute;
  inset: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--accent);
  background: rgba(248, 247, 255, 0.92);
  border: 2px dashed #9186ee;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.atd-drop-hint svg {
  width: 34px;
  height: 34px;
}

.atd-canvas-shell.is-dragover .atd-drop-hint {
  opacity: 1;
}

.atd-canvas-footer {
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.76);
  border-top: 1px solid #e0e4ec;
}

.atd-footer-tip {
  gap: 7px;
  color: #8c95a6;
  font-size: 9px;
}

.atd-footer-tip kbd {
  padding: 2px 5px;
  color: #737d91;
  background: white;
  border: 1px solid #d9dee7;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 8px;
}

.atd-footer-tip > span {
  width: 2px;
  height: 2px;
  margin: 0 1px;
  background: #b5bcc8;
  border-radius: 50%;
}

.atd-canvas-size {
  color: #99a1b0;
  font-size: 9px;
}

.atd-section-description {
  margin: -5px 0 12px;
  color: #9199aa;
  font-size: 10px;
  line-height: 1.6;
}

.atd-layout-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 11px;
}

.atd-layout-mode-picker > button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 8px;
  color: #7b8495;
  text-align: left;
  background: #f8f9fb;
  border: 1px solid #e2e6ed;
  border-radius: 9px;
  transition: 0.18s ease;
}

.atd-layout-mode-picker > button strong {
  color: #40495b;
  font-size: 10px;
}

.atd-layout-mode-picker > button small {
  overflow: hidden;
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-layout-mode-picker > button.is-active {
  color: #2563eb;
  background: #eff6ff;
  border-color: #93b4f8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.06);
}

.atd-layout-mode-picker > button.is-active strong {
  color: #1d4ed8;
}

.atd-combined-config {
  display: grid;
  gap: 8px;
}

.atd-composition-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.atd-composition-heading > strong {
  color: #4b5568;
  font-size: 10px;
}

.atd-composition-heading > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.atd-composition-heading button {
  padding: 0;
  color: #5f75a0;
  background: transparent;
  border: 0;
  font-size: 9px;
}

.atd-composition-sequence {
  max-height: 154px;
  min-height: 42px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  padding: 5px;
  background: #f8fafc;
  border: 1px dashed #ccd6e6;
  border-radius: 8px;
}

.atd-composition-token {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  color: #364153;
  background: #fff;
  border: 1px solid #dce3ed;
  border-radius: 6px;
}

.atd-composition-token.is-field {
  border-left: 3px solid #2563eb;
}

.atd-composition-token.is-separator {
  border-left: 3px solid #f59e0b;
}

.atd-composition-token > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-composition-token > span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.atd-composition-token button {
  width: 20px;
  height: 20px;
  padding: 0;
  color: #738098;
  background: #f4f6f9;
  border: 1px solid #e2e6ec;
  border-radius: 5px;
  font-size: 9px;
  line-height: 1;
}

.atd-composition-token button:last-child {
  color: #c45f5f;
}

.atd-composition-token button:disabled {
  opacity: 0.25;
}

.atd-composition-empty {
  padding: 8px 5px;
  color: #9aa4b5;
  font-size: 9px;
  line-height: 1.55;
}

.atd-composition-add {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.atd-composition-add button {
  min-width: 0;
  height: 27px;
  overflow: hidden;
  padding: 0 4px;
  color: #55627a;
  background: #fff;
  border: 1px solid #dfe4ec;
  border-radius: 6px;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atd-composition-add button:hover {
  color: #1d4ed8;
  background: #f4f8ff;
  border-color: #adc4f4;
}

.atd-composition-preview {
  padding: 7px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.atd-composition-preview > span {
  display: block;
  margin-bottom: 4px;
  color: #8b95a7;
  font-size: 8px;
}

.atd-composition-preview pre {
  min-height: 32px;
  max-height: 76px;
  margin: 0;
  overflow: auto;
  color: #334155;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

.atd-field-list {
  display: grid;
  gap: 7px;
}

.atd-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  transition: 0.18s ease;
}

.atd-field-row.is-selected {
  border-color: #c7c0f8;
  background: #fbfaff;
  box-shadow: 0 0 0 2px rgba(109, 93, 252, 0.05);
}

.atd-field-select {
  min-width: 0;
  height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px;
  text-align: left;
  background: transparent;
  border: 0;
}

.atd-field-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--field-color);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--field-color) 24%, transparent);
}

.atd-field-select > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.atd-field-select strong {
  color: #3d4659;
  font-size: 11px;
}

.atd-field-select small {
  color: #a0a7b5;
  font-size: 9px;
}

.atd-field-row.has-zone .atd-field-select small {
  color: #1aa879;
}

.atd-draw-button {
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  color: #6f7890;
  background: #f6f7f9;
  border: 1px solid #e4e7ed;
  border-radius: 7px;
  font-size: 10px;
}

.atd-field-row.is-selected .atd-draw-button {
  color: var(--accent);
  border-color: #d6d1fa;
  background: #f3f1ff;
}

.atd-style-section {
  border-bottom: 0;
}

.atd-style-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.atd-style-heading > div {
  gap: 9px;
}

.atd-style-color {
  width: 5px;
  height: 32px;
  border-radius: 4px;
}

.atd-style-heading > div > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.atd-style-heading span {
  color: #9ba3b1;
  font-size: 9px;
}

.atd-style-heading strong {
  color: #333d51;
  font-size: 12px;
}

.atd-delete-button {
  color: #9aa2b0;
  border-color: transparent;
  background: transparent;
}

.atd-delete-button:hover:not(:disabled) {
  color: #d55757;
  border-color: #f2cccc;
  background: #fff5f5;
}

.atd-delete-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.atd-control-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.atd-control-group > label {
  display: flex;
  justify-content: space-between;
  color: #737d90;
  font-size: 10px;
  font-weight: 600;
}

.atd-control-group > label span {
  color: #a0a7b5;
  font-weight: 500;
}

.atd-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.atd-number-input,
.atd-color-input {
  position: relative;
}

.atd-number-input > span {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #9ba2b0;
  font-size: 9px;
  transform: translateY(-50%);
  pointer-events: none;
}

.atd-number-input input {
  padding-right: 25px !important;
}

.atd-color-input {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  background: #fbfcfe;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
}

.atd-color-input input {
  width: 19px;
  height: 19px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.atd-color-input input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.atd-color-input input::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}

.atd-color-input span {
  overflow: hidden;
  color: #596278;
  font-size: 9px;
  text-overflow: ellipsis;
}

.atd-segmented {
  height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  background: #f2f4f7;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
}

.atd-segmented button {
  display: grid;
  place-items: center;
  padding: 0;
  color: #8c94a5;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.atd-segmented button.is-active {
  color: var(--accent);
  background: white;
  box-shadow: 0 1px 3px rgba(40, 48, 64, 0.1);
}

.atd-segmented svg {
  width: 15px;
  height: 15px;
}

.atd-control-group input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 5px 0 2px;
  accent-color: var(--accent);
}

.atd-rect-editor {
  margin-top: 3px;
  padding: 11px;
  background: #f8f9fb;
  border: 1px solid #e8ebf0;
  border-radius: 9px;
}

.atd-rect-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #727c8f;
  font-size: 10px;
  font-weight: 600;
}

.atd-rect-title small {
  color: #a2a9b6;
  font-size: 8px;
  font-weight: 400;
}

.atd-rect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.atd-rect-grid label {
  min-width: 0;
  position: relative;
}

.atd-rect-grid label span {
  position: absolute;
  left: 6px;
  top: 50%;
  z-index: 1;
  color: #a0a7b5;
  font-size: 8px;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.atd-rect-grid input {
  width: 100%;
  height: 28px;
  padding: 0 3px 0 17px;
  color: #505a70;
  background: white;
  border: 1px solid #e0e4ea;
  border-radius: 6px;
  outline: 0;
  font-size: 9px;
}

.atd-rect-grid input:disabled {
  color: #b4bac5;
  background: #f2f4f7;
}

.atd-draw-banner {
  min-width: 390px;
  height: 42px;
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px 0 16px;
  color: #4c556a;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #dfe3eb;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(30, 37, 52, 0.18);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 15px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.atd-draw-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.atd-draw-banner-dot {
  width: 8px;
  height: 8px;
  background: var(--field-color);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--field-color) 12%, transparent);
}

.atd-draw-banner strong {
  color: var(--field-color);
}

.atd-draw-banner button {
  height: 26px;
  margin-left: 7px;
  padding: 0 9px;
  color: #7d8697;
  background: #f4f5f7;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
}

.atd-toast {
  max-width: 420px;
  position: fixed;
  top: 87px;
  left: 50%;
  z-index: 100;
  padding: 9px 14px;
  color: white;
  background: rgba(32, 39, 53, 0.93);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 30, 43, 0.2);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.atd-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1300px) {
  .atd-main {
    grid-template-columns: 280px minmax(500px, 1fr) 278px;
  }

  .atd-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .atd-footer-tip span,
  .atd-footer-tip kbd:nth-of-type(3) {
    display: none;
  }
}