/* ---------- Theme variables ---------- */
/* Default: Miami Vice */
:root {
  color-scheme: dark;
  --bg-deep: #0f051a;
  --bg-mid: #1f0e33;
  --panel: #24123c;
  --grid: rgba(255, 45, 149, 0.08);
  --primary: #ff2ea6;
  --secondary: #00f0ff;
  --tertiary: #9d4edd;
  --text: #f2e9ff;
  --text-muted: #b79bd6;
  --border: #5a2e82;
  --field-bg: #0d0416;
  --ok: #39ff9d;
  --btn-text: #170821;
  --wordmark-outline: #0a0410;
}

:root[data-theme="graffiti"] {
  --bg-deep: #140a09;
  --bg-mid: #241210;
  --panel: #2c1613;
  --grid: rgba(232, 50, 31, 0.08);
  --primary: #e8321f;
  --secondary: #7cff3d;
  --tertiary: #ffb400;
  --text: #ffe9d6;
  --text-muted: #d9a98c;
  --border: #5c2b22;
  --field-bg: #1a0d0b;
  --ok: #7cff3d;
  --btn-text: #180b09;
  --wordmark-outline: #120908;
}

:root[data-theme="chrome"] {
  --bg-deep: #05070a;
  --bg-mid: #10151a;
  --panel: #161d23;
  --grid: rgba(56, 189, 248, 0.06);
  --primary: #c7d4de;
  --secondary: #38bdf8;
  --tertiary: #7d8f99;
  --text: #eef3f6;
  --text-muted: #9fb3bd;
  --border: #35414a;
  --field-bg: #0a0e12;
  --ok: #5ee6c0;
  --btn-text: #060a0d;
  --wordmark-outline: #05070a;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 92%, transparent) 0%, color-mix(in srgb, var(--bg-mid) 96%, transparent) 55%, var(--bg-deep) 100%),
    repeating-linear-gradient(0deg, var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 32px);
  min-height: 100vh;
  transition: background 0.2s;
}

header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--secondary) 8%, transparent));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 35%, transparent);
}

.brand { display: flex; flex-direction: column; gap: 0.1rem; }

/* ---------- Graffiti wordmark ---------- */
.wordmark {
  margin: 0;
  display: inline-flex;
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
}
.wordmark span {
  display: inline-block;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wordmark-outline);
  text-shadow:
    2px 2px 0 var(--wordmark-outline),
    0 0 16px color-mix(in srgb, var(--secondary) 65%, transparent);
  transform: skew(-6deg, 0deg);
}
.wordmark span:nth-child(2n) { transform: skew(-6deg, 0deg) rotate(3deg) translateY(1px); }
.wordmark span:nth-child(3n) { transform: skew(-6deg, 0deg) rotate(-4deg) translateY(-2px); }

.tagline {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 0.15rem;
}

nav { display: flex; gap: 0.5rem; }

.tab-btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--text); border-color: var(--secondary); }

.tab-btn.active {
  background: linear-gradient(90deg, var(--primary), var(--tertiary));
  color: var(--btn-text);
  border-color: var(--primary);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* ---------- Theme switcher ---------- */
.theme-switcher { display: flex; gap: 0.4rem; margin-left: auto; }
.theme-btn {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.theme-btn.active { border-color: var(--text); box-shadow: 0 0 10px color-mix(in srgb, var(--secondary) 60%, transparent); }
.swatch { display: block; width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.swatch-miami { background: linear-gradient(135deg, #ff2ea6, #00f0ff); }
.swatch-graffiti { background: linear-gradient(135deg, #e8321f, #7cff3d); }
.swatch-chrome { background: linear-gradient(135deg, #c7d4de, #38bdf8); }

main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }

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

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.toggle-row input { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; cursor: pointer; }

#file-list { list-style: none; padding: 0; margin: 0.6rem 0 0; text-align: left; }
#file-list li { padding: 0.15rem 0; }
#file-list li.file-error { color: var(--primary); }

#drop-area, #cad-drop-area {
  border: 2px dashed var(--secondary);
  border-radius: 10px;
  padding: 2.5rem 1rem;
  text-align: center;
  background: color-mix(in srgb, var(--secondary) 4%, transparent);
  transition: background 0.15s, box-shadow 0.15s;
}
#drop-area.dragover, #cad-drop-area.dragover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 35%, transparent) inset;
}

#cad-params { margin-top: 1.5rem; }
.cad-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.6rem;
}
#cad-params label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}
#cad-params input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}
#cad-backset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
#cad-backset-row select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}

#cad-process-btn { margin-top: 1.5rem; }
#cad-result-area { margin-top: 2rem; }

#cad-warnings .warning-box {
  border: 1px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

#cad-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
#cad-preview-row img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d0416;
}

tr.cluster-review td { color: var(--primary); }

#cad-save-btn { margin-top: 1.2rem; }

.file-label {
  color: var(--secondary);
  text-decoration: underline;
  cursor: pointer;
  text-shadow: 0 0 8px color-mix(in srgb, var(--secondary) 50%, transparent);
}

.muted { opacity: 0.75; font-size: 0.9rem; color: var(--text-muted); }

#modifier-select { margin-top: 1.5rem; }
#modifier-checklist label { display: block; margin: 0.4rem 0; }

h3, h4 {
  color: var(--secondary);
  text-shadow: 0 0 10px color-mix(in srgb, var(--secondary) 25%, transparent);
  letter-spacing: 0.02em;
}

button {
  padding: 0.55rem 1.2rem;
  border-radius: 6px;
  border: 1px solid var(--primary);
  background: linear-gradient(90deg, var(--primary), var(--tertiary));
  color: var(--btn-text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: box-shadow 0.15s, transform 0.1s;
}
button:hover:not(:disabled) {
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 60%, transparent);
  transform: translateY(-1px);
}
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

#process-btn { margin-top: 1.5rem; }

#result-area { margin-top: 2rem; }
#result-preview, #draft-code {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  background: var(--field-bg);
  color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem;
}
#draft-name, #draft-description, #chat-input {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}
#draft-name:focus, #draft-description:focus, #chat-input:focus, #result-preview:focus, #draft-code:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--secondary) 45%, transparent);
}
#draft-name, #draft-description { width: 100%; }

#diff-summary { margin-bottom: 0.75rem; }
#diff-summary ul { margin: 0; padding-left: 1.2rem; }

#modifiers-ul { list-style: none; padding: 0; }
#modifiers-ul li {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--panel);
}
#modifiers-ul li:hover { border-color: var(--primary); }
#modifiers-ul .badge {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#modifier-chat { margin-top: 2rem; }
#chat-log {
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 4rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  background: var(--panel);
}
.chat-msg { margin-bottom: 0.75rem; white-space: pre-wrap; }
.chat-msg .role {
  font-weight: 700;
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-msg.user .role::before { content: "You"; color: var(--secondary); }
.chat-msg.assistant .role::before { content: "Assistant"; color: var(--primary); }

#chat-input-row { display: flex; gap: 0.5rem; }
#chat-input { flex: 1; font-family: inherit; }

#draft-area {
  margin-top: 1.2rem;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 1rem;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 15%, transparent);
}
#draft-area label { display: block; margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid var(--primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--secondary);
}
td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
table a { color: var(--secondary); }

.status-ok { color: var(--ok); }
.status-error { color: var(--primary); }

#save-all-btn { margin-top: 1rem; }

::selection { background: var(--primary); color: var(--btn-text); }