:root {
  --c-primary-1: #5AC3D6;  /* accent light */
  --c-primary-2: #223544;  /* deep surface */
  --c-primary-3: #4E6D84;  /* app background */
  --c-emph-1:    #F5A623;  /* amber */
  --c-emph-2:    #D94E87;  /* pink */
  --c-emph-3:    #49C46D;  /* green */

  --bg: var(--c-primary-3);
  --surface: var(--c-primary-2);
  --text: #EAF2F7;
  --muted: rgba(255,255,255,0.75);
  --border: rgba(255,255,255,0.18);
  --input-bg: rgba(255,255,255,0.06);
  --input-border: rgba(255,255,255,0.22);
  --link: var(--c-primary-1);
  --focus: var(--c-primary-1);
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 10px;
  background: var(--bg);
  color: var(--text);
}

header h1 {
  font-size: 14px;
  margin: 0 0 8px;
  color: var(--text);
}

section {
  margin-bottom: 10px;
  background: var(--surface);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}

label { font-size: 12px; color: var(--text); }
label input { margin-left: 6px; }

.chk { align-items: center; }

input, select {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 4px 6px;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

button {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--c-primary-1);
  color: #11343C;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(0.5px); }

#count { font-weight: bold; margin: 0 4px; }
#status { font-size: 12px; white-space: pre-wrap; color: var(--muted); }

.link {
  font-size: 12px;
  margin-left: auto;
  text-decoration: underline;
  cursor: pointer;
  color: var(--link);
}

.preview ul, #preview {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
}

#preview li {
  font-size: 12px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#preview li:last-child { border-bottom: 0; }