:root {
  color-scheme: dark;

  --background: #101114;

  --surface: #181a1f;
  --surface-raised: #202228;
  --surface-hover: #292c33;

  --border: #343740;
  --border-strong: #484c57;

  --text: #f2f2f3;
  --text-muted: #9da1aa;

  --accent: #e4a72d;
  --accent-hover: #f0b73e;
  --accent-text: #151515;

  --danger: #ef6d6d;

  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;

  --page-padding: clamp(16px, 3vw, 36px);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;

  background: var(--background);
}

body {
  margin: 0;

  min-width: 320px;
  min-height: 100%;

  background: var(--background);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app {
  width: min(1500px, 100%);

  margin: 0 auto;

  padding: var(--page-padding);
}


/*
 * ============================================================
 * HEADER
 * ============================================================
 */

.app-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;
}

.app-header h1 {
  margin: 0 0 6px;

  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.app-header p {
  margin: 0;

  color: var(--text-muted);

  line-height: 1.5;
}

kbd {
  display: inline-block;

  min-width: 1.6em;

  padding: 2px 6px;

  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;

  background: var(--surface-raised);

  color: var(--text);

  font-family: inherit;
  font-size: 0.85em;

  line-height: 1.4;

  text-align: center;
}


/*
 * ============================================================
 * SETTINGS
 * ============================================================
 */

.settings-panel {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 12px;

  padding: 16px;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  background: var(--surface);
}

.settings-heading {
  min-width: 0;
}

.settings-heading h2 {
  margin: 0 0 3px;

  font-size: 1rem;
}

.settings-heading p {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.825rem;
  line-height: 1.4;
}

.settings-fields {
  display: flex;

  align-items: flex-end;

  gap: 14px;
}

.setting-field {
  display: flex;

  min-width: 145px;

  flex-direction: column;

  gap: 6px;
}

.setting-field-wide {
  min-width: 210px;
}

.setting-label {
  color: var(--text-muted);

  font-size: 0.75rem;
  font-weight: 650;
}

.setting-label-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.number-input {
  width: 100%;

  min-height: 44px;

  padding: 8px 10px;

  border: 1px solid var(--border);
  border-radius: var(--radius-small);

  outline: none;

  background: var(--surface-raised);

  color: var(--text);
}

.number-input:focus {
  border-color: var(--accent);

  outline: 3px solid rgba(228, 167, 45, 0.22);
}

.input-with-unit {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius-small);

  background: var(--surface-raised);
}

.input-with-unit:focus-within {
  border-color: var(--accent);

  outline: 3px solid rgba(228, 167, 45, 0.22);
}

.input-with-unit .number-input {
  border: 0;
  border-radius: 0;

  outline: none;
}

.input-with-unit .number-input:focus {
  border: 0;

  outline: none;
}

.input-unit {
  padding: 0 12px;

  color: var(--text-muted);

  font-size: 0.8rem;
  font-weight: 650;
}

.range-value {
  color: var(--text);

  font-size: 0.75rem;
  font-weight: 700;
}

.range-input {
  width: 100%;

  min-height: 30px;

  margin: 0;

  accent-color: var(--accent);

  cursor: pointer;
}

.range-input:disabled {
  cursor: not-allowed;

  opacity: 0.35;
}


/*
 * ============================================================
 * MAIN CONTROLS
 * ============================================================
 */

.controls-panel {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 16px;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  background: var(--surface);
}

.add-images,
.control-group {
  display: flex;

  align-items: center;

  gap: 14px;
}

.control-group {
  justify-content: flex-end;

  flex-wrap: wrap;
}

.limit-text {
  color: var(--text-muted);

  font-size: 0.875rem;
  line-height: 1.4;
}


/*
 * ============================================================
 * BUTTONS
 * ============================================================
 */

.button {
  display: inline-flex;

  min-height: 44px;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 10px 16px;

  border: 1px solid transparent;
  border-radius: var(--radius-small);

  cursor: pointer;

  font-weight: 650;
  line-height: 1;

  text-decoration: none;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    opacity 120ms ease;
}

.button-primary {
  border-color: var(--accent);

  background: var(--accent);

  color: var(--accent-text);
}

.button-secondary {
  border-color: var(--border);

  background: var(--surface-raised);

  color: var(--text);
}

.button:disabled {
  cursor: not-allowed;

  opacity: 0.42;
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:not(:disabled):hover {
    border-color: var(--accent-hover);

    background: var(--accent-hover);
  }

  .button-secondary:not(:disabled):hover {
    border-color: var(--border-strong);

    background: var(--surface-hover);
  }
}

.button:focus-visible,
.toggle input:focus-visible + .toggle-track,
.image-remove:focus-visible,
.marker-checkbox:focus-visible + .marker-box,
.image-label-input:focus-visible,
.range-input:focus-visible {
  outline: 3px solid rgba(228, 167, 45, 0.35);

  outline-offset: 3px;
}


/*
 * ============================================================
 * TOGGLES
 * ============================================================
 */

.toggle {
  display: inline-flex;

  min-height: 44px;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  user-select: none;
}

.toggle input {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}

.toggle-track {
  position: relative;

  display: inline-flex;

  width: 44px;
  height: 24px;

  flex: 0 0 auto;

  align-items: center;

  border: 1px solid var(--border-strong);
  border-radius: 999px;

  background: var(--surface-raised);

  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.toggle-thumb {
  position: absolute;

  left: 3px;

  width: 16px;
  height: 16px;

  border-radius: 50%;

  background: var(--text-muted);

  transition:
    transform 120ms ease,
    background-color 120ms ease;
}

.toggle input:checked + .toggle-track {
  border-color: var(--accent);

  background: var(--accent);
}

.toggle input:checked + .toggle-track .toggle-thumb {
  background: var(--accent-text);

  transform: translateX(20px);
}

.toggle-label {
  font-size: 0.925rem;
  font-weight: 600;
}


/*
 * ============================================================
 * STATUS
 * ============================================================
 */

.status-message {
  min-height: 24px;

  margin: 10px 2px 0;

  color: var(--text-muted);

  font-size: 0.875rem;
  line-height: 1.5;
}

.status-message.is-error {
  color: var(--danger);
}


/*
 * ============================================================
 * WORKSPACE
 * ============================================================
 */

.workspace {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    320px;

  gap: 24px;

  align-items: start;

  margin-top: 12px;
}

.preview-section,
.images-section {
  min-width: 0;
}

.section-heading {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 10px;
}

.section-heading h2 {
  margin: 0 0 3px;

  font-size: 1rem;
}

.section-heading p {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.825rem;
}


/*
 * ============================================================
 * PREVIEW
 * ============================================================
 */

.preview-container {
  position: relative;

  display: flex;

  width: 100%;

  min-height: 320px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  background:
    linear-gradient(
      45deg,
      #17191d 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #17191d 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #17191d 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #17191d 75%
    ),
    #141518;

  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;

  background-size:
    16px 16px;
}

.preview-container:not(.preview-empty) {
  min-height: 0;
}

#previewCanvas {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;
}


/*
 * ============================================================
 * EMPTY STATE
 * ============================================================
 */

.empty-state {
  display: flex;

  max-width: 360px;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 40px 24px;

  color: var(--text-muted);

  text-align: center;

  line-height: 1.5;
}

.empty-state strong {
  color: var(--text);
}

.empty-state-icon {
  display: grid;

  width: 48px;
  height: 48px;

  margin-bottom: 4px;

  place-items: center;

  border: 1px dashed var(--border-strong);
  border-radius: 50%;

  color: var(--accent);

  font-size: 1.75rem;
  font-weight: 300;
}


/*
 * ============================================================
 * IMAGE COUNTERS
 * ============================================================
 */

.image-counter {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  background: var(--surface);
}

.counter-item {
  display: flex;

  min-width: 0;

  flex: 1;

  flex-direction: column;

  gap: 2px;
}

.counter-item strong {
  color: var(--text);

  font-size: 1.15rem;
  line-height: 1;
}

.counter-item span {
  color: var(--text-muted);

  font-size: 0.7rem;
  line-height: 1.25;
}

.counter-divider {
  width: 1px;
  height: 30px;

  flex: 0 0 auto;

  background: var(--border);
}


/*
 * ============================================================
 * IMAGE LIST
 * ============================================================
 */

.image-list {
  display: grid;

  grid-template-columns: 1fr;

  gap: 8px;
}

.image-item {
  display: grid;

  grid-template-columns:
    62px
    minmax(0, 1fr)
    40px;

  grid-template-areas:
    "thumbnail details remove"
    "thumbnail marker remove"
    "label label label";

  gap: 7px 10px;

  align-items: center;

  min-width: 0;

  padding: 8px;

  border: 1px solid var(--border);
  border-radius: var(--radius-medium);

  background: var(--surface);
}

.image-thumbnail {
  grid-area: thumbnail;

  display: block;

  width: 62px;
  height: 62px;

  border-radius: 6px;

  background: #090909;

  object-fit: contain;
}

.image-details {
  grid-area: details;

  min-width: 0;
}

.image-name {
  display: block;

  overflow: hidden;

  margin-bottom: 4px;

  color: var(--text);

  font-size: 0.825rem;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-meta {
  display: block;

  color: var(--text-muted);

  font-size: 0.75rem;
  line-height: 1.4;
}

.image-remove {
  grid-area: remove;

  display: grid;

  width: 40px;
  height: 40px;

  place-items: center;

  border: 1px solid transparent;
  border-radius: var(--radius-small);

  background: transparent;

  color: var(--text-muted);

  cursor: pointer;

  font-size: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .image-remove:hover {
    border-color: var(--border);

    background: var(--surface-hover);

    color: var(--text);
  }
}


/*
 * ============================================================
 * INDIVIDUAL LABEL CONTROLS
 * ============================================================
 */

.marker-control {
  grid-area: marker;

  display: inline-flex;

  width: fit-content;

  align-items: center;

  gap: 7px;

  cursor: pointer;

  color: var(--text-muted);

  font-size: 0.75rem;
  font-weight: 600;

  user-select: none;
}

.marker-checkbox {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;
}

.marker-box {
  display: grid;

  width: 20px;
  height: 20px;

  flex: 0 0 auto;

  place-items: center;

  border: 1px solid var(--border-strong);
  border-radius: 5px;

  background: var(--surface-raised);

  color: transparent;

  font-size: 0.7rem;
  font-weight: 800;

  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    color 120ms ease;
}

.marker-checkbox:checked + .marker-box {
  border-color: var(--accent);

  background: var(--accent);

  color: var(--accent-text);
}

.marker-control:has(.marker-checkbox:checked) {
  color: var(--text);
}

.image-label-field {
  grid-area: label;

  display: flex;

  min-width: 0;

  flex-direction: column;

  gap: 5px;

  padding-top: 3px;

  border-top: 1px solid var(--border);
}

.image-label-field span {
  color: var(--text-muted);

  font-size: 0.7rem;
  font-weight: 600;
}

.image-label-input {
  width: 100%;

  min-height: 38px;

  padding: 7px 9px;

  border: 1px solid var(--border);
  border-radius: var(--radius-small);

  outline: none;

  background: var(--surface-raised);

  color: var(--text);

  font-size: 0.8rem;
}

.image-label-input::placeholder {
  color: #747982;
}

.image-label-input:focus {
  border-color: var(--accent);
}


/*
 * ============================================================
 * ACCESSIBILITY
 * ============================================================
 */

.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
}


/*
 * ============================================================
 * RESPONSIVE
 * ============================================================
 */

@media (max-width: 1000px) {
  .settings-panel {
    align-items: flex-start;

    flex-direction: column;
  }

  .settings-fields {
    width: 100%;
  }

  .setting-field {
    flex: 1;
  }

  .setting-field-wide {
    flex: 1.4;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .image-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-header,
  .controls-panel {
    align-items: stretch;
  }

  .app-header {
    flex-direction: column;
  }

  .controls-panel {
    flex-direction: column;
  }

  .add-images,
  .control-group {
    width: 100%;

    justify-content: flex-start;
  }

  .control-group .button {
    margin-left: auto;
  }

  .settings-fields {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .settings-fields {
    flex-direction: column;

    align-items: stretch;
  }

  .setting-field,
  .setting-field-wide {
    width: 100%;
  }

  .image-list {
    grid-template-columns: 1fr;
  }

  .add-images {
    align-items: flex-start;

    flex-direction: column;
  }

  .control-group {
    align-items: stretch;

    flex-direction: column;
  }

  .control-group .button {
    width: 100%;

    margin-left: 0;
  }

  .toggle {
    width: 100%;
  }

  .app-header .button {
    width: 100%;
  }
}