@import url("line-stamp.css?v=20260924-background");

:root {
  --emoji-accent: #7a4df4;
  --emoji-accent-dark: #5e35ce;
  --accent: var(--emoji-accent);
  --accent-strong: var(--emoji-accent-dark);
  --accent-soft: #eee8ff;
}

.button.primary,
.wide-button:not(.danger),
.count-button.active,
.segment.active {
  border-color: var(--emoji-accent);
}

.button.primary,
.wide-button:not(.danger) {
  background: var(--emoji-accent);
}

.button.primary:hover,
.wide-button:not(.danger):hover {
  background: var(--emoji-accent-dark);
}

.segmented.input-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emoji-layout-grid {
  display: grid;
  gap: 10px;
}

.layout-option {
  display: grid;
  gap: 7px;
  min-height: 0;
  padding: 12px;
  text-align: left;
}

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

.layout-option-heading strong {
  font-size: 20px;
}

.recommended-badge,
.sheet-count-badge {
  border-radius: 999px;
  background: #eee8ff;
  color: #5e35ce;
  font-size: 10px;
  font-weight: 850;
  padding: 4px 7px;
}

.layout-option-sheets,
.layout-option-grid,
.layout-option-size {
  display: block;
}

.layout-option-sheets {
  color: #2f3d43;
  font-size: 13px;
  font-weight: 800;
}

.layout-option-grid {
  color: #46367d;
  font-size: 14px;
  font-weight: 850;
}

.layout-option-size {
  color: #66747a;
  font-size: 11px;
  font-weight: 700;
}

.layout-diagram-row {
  display: flex;
  gap: 7px;
  width: 100%;
}

.mini-sheet {
  --cols: 6;
  --rows: 4;
  display: block;
  width: 100%;
  aspect-ratio: var(--cols) / var(--rows);
  border: 2px solid #8d79c8;
  border-radius: 5px;
  background-color: #fbf9ff;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), #cfc4ee calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), #cfc4ee calc(100% - 1px));
  background-size:
    calc(100% / var(--cols)) 100%,
    100% calc(100% / var(--rows));
}

.grid-4x5 {
  --cols: 4;
  --rows: 5;
}

.layout-diagram-row.two-sheets .mini-sheet {
  width: calc(50% - 4px);
}

.layout-rule {
  margin: 0;
  color: #59666c;
  font-size: 11px;
  line-height: 1.65;
}

.prompt-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #d8ccff;
  border-radius: 10px;
  background: #f8f5ff;
  box-shadow: 0 10px 26px rgba(66, 42, 128, 0.08);
}

.prompt-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prompt-panel-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.prompt-panel-heading strong {
  color: #2a2148;
  font-size: 16px;
}

#promptModeLabel {
  border-radius: 999px;
  background: #e9e0ff;
  color: #5e35ce;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 8px;
  white-space: nowrap;
}

.prompt-sheet-tabs {
  width: min(210px, 42%);
  flex: 0 0 auto;
}

.prompt-sheet-tabs[hidden] {
  display: none;
}

.prompt-help {
  margin: 0;
  color: #594f72;
  font-size: 12px;
  line-height: 1.65;
}

.prompt-variable-editor {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #f0b7b7;
  border-radius: 8px;
  background: #fff8f8;
}

.prompt-variable-editor > span {
  color: #c32626;
  font-size: 12px;
  font-weight: 850;
}

.prompt-variable-editor input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dc7b7b;
  border-radius: 7px;
  background: #fff;
  color: #d32626;
  font-size: 14px;
  font-weight: 800;
  padding: 0 10px;
}

.prompt-variable-editor input:focus {
  border-color: #c32626;
  box-shadow: 0 0 0 3px rgba(195, 38, 38, 0.11);
  outline: none;
}

.prompt-variable-editor small {
  color: #7d6767;
  font-size: 10px;
  line-height: 1.5;
}

.prompt-text {
  width: 100%;
  height: 96px;
  overflow: auto;
  border: 1px solid #cfc4ee;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: 500 13px/1.75 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 12px 14px;
  white-space: pre-wrap;
}

.prompt-variable {
  color: #d32626;
  font-weight: 850;
}

.prompt-text:focus {
  border-color: var(--emoji-accent);
  box-shadow: 0 0 0 3px rgba(122, 77, 244, 0.12);
  outline: none;
}

.prompt-copy-button {
  justify-self: start;
  width: auto;
  min-width: 230px;
}

.input-note,
.application-note {
  color: #59666c;
  font-size: 12px;
  line-height: 1.65;
  margin: 10px 0 0;
}

.application-note {
  background: #f3efff;
  border: 1px solid #d8ccff;
  border-radius: 12px;
  color: #46367d;
  margin: 0 0 16px;
  padding: 10px 14px;
}

.stamp-preview,
.editor-preview-frame {
  aspect-ratio: 1;
}

.cover-badge {
  background: var(--emoji-accent);
}

.stamp-card.cover {
  border-color: var(--emoji-accent);
  box-shadow: 0 0 0 2px rgba(122, 77, 244, 0.14);
}

@media (max-width: 720px) {
  .emoji-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-option-heading strong {
    font-size: 18px;
  }

  .layout-option-size {
    font-size: 10px;
  }

  .prompt-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .prompt-sheet-tabs {
    width: 100%;
  }

  .prompt-copy-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .emoji-layout-grid {
    grid-template-columns: 1fr;
  }
}