:root {
  color-scheme: dark;
  --bg: #14161a;
  --surface: #1b1d22;
  --surface-2: #171a1f;
  --border: #2a2d34;
  --border-strong: #3a3f48;
  --text: #cfd4dc;
  --text-dim: #9aa0aa;
  --accent: #6cc0ff;
  --danger: #f0b8b8;
  --danger-bg: #3a1d1d;
  --danger-bd: #5a2a2a;
  --info: #b8d4f0;
  --info-bg: #1d2c3a;
  --info-bd: #2a405a;
  --ok: #b8f0c0;
  --ok-bg: #1d3a24;
  --ok-bd: #2a5a34;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- top nav --- */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.nav .brand { font-weight: 600; letter-spacing: .05em; color: var(--text); }
.nav nav { display: flex; align-items: center; gap: .9rem; }
.nav a { color: var(--text); }
.nav .who { color: var(--text-dim); font-size: .8rem; }
.nav .inline { display: inline; margin: 0; }
.nav .link {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--text); font: inherit;
}
.nav .link:hover { text-decoration: underline; }

/* --- layout --- */
.wrap {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* --- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.card h1 { margin: 0 0 1rem; font-size: 1.4rem; font-weight: 600; }
.card h2 { margin: 1rem 0 .5rem; font-size: 1rem; font-weight: 600; }
.card p { margin: .5rem 0; }
.card ul { margin: .5rem 0; padding-left: 1.25rem; }

/* --- forms --- */
label {
  display: block;
  margin: .75rem 0;
  color: var(--text-dim);
  font-size: .85rem;
}
label input, label select, label textarea {
  display: block;
  width: 100%;
  margin-top: .3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .5rem .6rem;
  border-radius: 4px;
  font: inherit;
  font-size: .95rem;
}
label input:focus, label select:focus, label textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- buttons --- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #0d1418;
  border: 0;
  padding: .5rem .9rem;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.sm { padding: .3rem .6rem; font-size: .85rem; }
.btn.ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

/* --- flash --- */
.flash {
  padding: .6rem .9rem;
  border-radius: 4px;
  margin-bottom: .75rem;
  font-size: .9rem;
}
.flash.error   { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd); }
.flash.info    { background: var(--info-bg);   color: var(--info);   border: 1px solid var(--info-bd); }
.flash.success { background: var(--ok-bg);     color: var(--ok);     border: 1px solid var(--ok-bd); }

/* --- layout helpers --- */
.row { display: flex; gap: .5rem; align-items: center; margin: .75rem 0; flex-wrap: wrap; }
.muted { color: var(--text-dim); }
.small { font-size: .8rem; }

/* --- tables --- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
}
.tbl td {
  padding: .55rem .6rem;
  border-bottom: 1px solid #212429;
  vertical-align: top;
}
.tbl tr:hover td { background: var(--surface-2); }

code {
  background: var(--bg);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .85em;
}

/* --- products (luxury/clinical) --- */
.product {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.product:last-of-type { border-bottom: 0; }
.product h2 { font-weight: 500; letter-spacing: .01em; }
.product-buy { text-align: right; flex-shrink: 0; }
.product .price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: .5rem;
}

/* --- typing test --- */
.typing-test { max-width: 900px; margin: 2rem auto; }
.typing-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem; margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.typing-head h1 { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: .02em; }
.typing-head .stats { display: flex; gap: 2rem; }
.typing-head .stat { text-align: right; }
.typing-head .stat .label {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim); margin-bottom: .25rem;
}
.typing-head .stat .value {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--text);
}

.typing-body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.85;
  color: #6b7280;
  padding: 2rem;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: text;
  user-select: none;
  min-height: 12rem;
}
.typing-body .ch { position: relative; }
.typing-body .ch.correct { color: var(--text); }
.typing-body .ch.wrong {
  color: #e57373;
  text-decoration: underline;
  text-decoration-color: #e57373;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.typing-body .ch.current {
  background: rgba(108, 192, 255, .18);
  border-radius: 2px;
}

.typing-hidden-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.typing-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem;
}
.typing-footer p { margin: 0; }

.result-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem; margin: 2rem 0; padding: 2rem;
  background: var(--surface-2); border-radius: 8px;
}
.result-stat { text-align: center; }
.result-label {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-dim); margin-bottom: .5rem;
}
.result-value {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem; color: var(--text); font-variant-numeric: tabular-nums;
}

/* --- privacy blur --- */
body.blur-private .private {
  filter: blur(6px);
  user-select: none;
  transition: filter 0.12s ease;
  cursor: pointer;
}
body.blur-private .private:hover {
  filter: blur(0);
  user-select: text;
  cursor: text;
}
.privacy-btn {
  font-size: .8rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  color: var(--text-dim);
}
.privacy-btn:hover { color: var(--text); }

/* --- admin user table --- */
.row-disabled { opacity: 0.55; }
.row-disabled td { text-decoration: line-through; }
.row-disabled a { text-decoration: line-through; }
.row.wrap { flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row.wrap input[type=text], .row.wrap input:not([type]) { flex: 1; min-width: 15rem; }
.row.wrap select { min-width: 10rem; }

/* --- identity --- */
.success-box {
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd);
  padding: 0.75rem; border-radius: 4px; margin: 1rem 0;
}
.error-box {
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd);
  padding: 0.75rem; border-radius: 4px; margin: 1rem 0;
}

/* --- scheduling --- */
.appt-note {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.appt-note strong {
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.slot-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  background: var(--surface-2);
}
.slot-group legend {
  padding: 0 0.5rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.slot-group legend .muted { font-weight: normal; margin-left: 0.3rem; }
.slot-group input[type="datetime-local"] {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.65rem;
  border-radius: 4px;
  font: inherit;
  font-size: 0.95rem;
  color-scheme: dark;
}
.slot-group input[type="datetime-local"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- scheduling calendar picker --- */
.selection-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.5rem;
}
.slot-chip {
  padding: .55rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .82rem;
  min-width: 12rem;
  text-align: center;
  transition: all .15s;
}
.slot-chip:hover { border-color: var(--accent); color: var(--text); }
.slot-chip.filled {
  border: 1px solid var(--accent);
  background: rgba(108, 192, 255, .1);
  color: var(--text);
}

.calendar-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
}
.day-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .7rem;
  background: var(--surface-2);
}
.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.day-name {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--text);
}
.day-date {
  color: var(--text-dim);
  font-size: .78rem;
}
.slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
}
.slot-btn {
  padding: .35rem .4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: .72rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.slot-btn:hover:not(.disabled):not(.selected) {
  border-color: var(--accent);
  color: var(--text);
}
.slot-btn.selected {
  background: rgba(108, 192, 255, .22);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 500;
}
.slot-btn.disabled {
  opacity: .28;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- admin appointment confirm form --- */
.slot-picks {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0 1rem;
  padding: .75rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.slot-pick {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-size: .9rem;
  margin: 0;
  cursor: pointer;
}
.slot-pick input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}