@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #090C10;
  --grid-line: #12181F;
  --panel: #0E1319;
  --panel-2: #131A21;
  --border: #212A33;
  --border-strong: #2C3844;
  --text: #DCE6EB;
  --text-muted: #5C6B76;
  --signal: #39FFB0;
  --signal-dim: #0E2620;
  --signal-text: #39FFB0;
  --danger: #FF5D6C;
  --radius: 4px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px 40px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 2px 16px;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

header .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  animation: pulse 1.8s ease-in-out infinite;
}

header h1 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
}

header .id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.tier-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.stepline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.steps {
  display: flex;
  gap: 6px;
  flex: 1;
}

.steps div {
  flex: 1;
  height: 2px;
  background: var(--border);
  position: relative;
  transition: background 0.3s;
}

.steps div.active {
  background: var(--signal);
  box-shadow: 0 0 6px var(--signal);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--signal);
  border-left: 1px solid var(--signal);
}

.card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--signal);
  border-right: 1px solid var(--signal);
}

.step { display: none; }
.step.active { display: block; }

.hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.6;
}

.slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 18px;
}

.slot {
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--bg);
  --corner: var(--border-strong);
  background-image:
    linear-gradient(to right, var(--corner) 1px, transparent 1px),
    linear-gradient(to bottom, var(--corner) 1px, transparent 1px),
    linear-gradient(to left, var(--corner) 1px, transparent 1px),
    linear-gradient(to bottom, var(--corner) 1px, transparent 1px),
    linear-gradient(to left, var(--corner) 1px, transparent 1px),
    linear-gradient(to top, var(--corner) 1px, transparent 1px),
    linear-gradient(to right, var(--corner) 1px, transparent 1px),
    linear-gradient(to top, var(--corner) 1px, transparent 1px);
  background-repeat: no-repeat;
  background-size:
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px;
  background-position:
    top 5px left 5px, top 5px left 5px,
    top 5px right 5px, top 5px right 5px,
    bottom 5px right 5px, bottom 5px right 5px,
    bottom 5px left 5px, bottom 5px left 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.slot.filled { --corner: var(--signal); border-color: var(--signal); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
  padding: 0 4px;
  text-transform: uppercase;
}
.slot input { display: none; }

.slot .check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--signal);
  color: #04140F;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  padding: 13px 16px;
  cursor: pointer;
}

button:active { transform: scale(0.98); }

button.primary {
  background: var(--signal-dim);
  border-color: var(--signal);
  color: var(--signal-text);
  width: 100%;
  box-shadow: 0 0 0 1px rgba(57,255,176,0.15) inset;
}

button.primary:disabled {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.row { display: flex; gap: 8px; }
.row button:first-child { flex: 1; }
.row button.primary { flex: 2; }

label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

label:first-child { margin-top: 0; }

input[type=text], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

input[type=text]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal);
}

textarea { resize: none; }

.ai-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--signal-text);
  background: var(--signal-dim);
  border: 1px solid rgba(57,255,176,0.3);
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--danger);
  background: rgba(255, 93, 108, 0.1);
  border: 1px solid var(--danger);
  padding: 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}

.preview p { margin: 0; font-size: 13px; line-height: 1.6; }
.preview p.title { font-weight: 600; margin-bottom: 6px; }
.preview p.desc { color: var(--text-muted); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--signal);
  color: var(--signal-text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 18px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.toast.show { opacity: 1; }

.spinner {
  width: 13px;
  height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--signal);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }