:root {
  --bg: #F5EFE1;
  --bg-tint: #EFE8D7;
  --surface: #FDFAF2;
  --surface-alt: #FFFFFF;
  --border: #E4DAC3;
  --border-strong: #D0C3A4;
  --border-subtle: #EDE4CE;
  --ink: #2B2720;
  --ink-soft: #5A5347;
  --ink-muted: #8A8274;
  --ink-dim: #B5AD9C;
  --olive: #6F7C33;
  --olive-soft: #D5DAB3;
  --olive-tint: #EDEFDE;
  --olive-deep: #4A5322;
  --peach: #E89B82;
  --peach-soft: #F7D7C8;
  --peach-tint: #FBEBE2;
  --peach-deep: #B5593F;
  --terracotta: #B5573A;
  --terracotta-soft: #E5C0AD;
  --terracotta-tint: #F1DDCE;
  --terracotta-deep: #7A3619;
  --dusty-blue: #9FACBF;
  --dusty-blue-soft: #D6DCE5;
  --dusty-blue-tint: #E8ECF1;
  --rust-red: #A03C24;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, a, select, input, textarea, label, [role="button"] { touch-action: manipulation; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed;
  top: -100px; right: -80px; width: 280px; height: 280px;
  background: radial-gradient(circle at center, var(--peach-tint) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: ''; position: fixed;
  bottom: -120px; left: -100px; width: 320px; height: 320px;
  background: radial-gradient(circle at center, var(--olive-tint) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
header, main, .toast, .modal, .panel { position: relative; z-index: 1; }

/* Header */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  padding-top: calc(18px + env(safe-area-inset-top));
  background: rgba(245, 239, 225, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
  text-decoration: none;
}
.logo-img { height: 32px; width: auto; flex-shrink: 0; }
.logo-mark { width: 11px; height: 11px; border-radius: 50%; background: var(--terracotta); align-self: center; flex-shrink: 0; }
.logo-sub {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); margin-left: 2px;
}
.header-right { display: flex; align-items: center; gap: 10px; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all 0.18s;
  max-width: 160px;
  color: var(--ink);
}
.user-chip:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.user-chip-initials {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--olive); color: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.user-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip.unset { color: var(--ink-muted); }
.user-chip.unset .user-chip-initials { background: var(--border-strong); }

.icon-btn {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-soft);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
  flex-shrink: 0;
  text-decoration: none;
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.icon-btn.rotatable:hover { transform: rotate(15deg); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 18px; height: 18px; }

/* Main */
main { padding: 28px 22px 40px; max-width: 560px; margin: 0 auto; }
main.wide { max-width: 720px; }

.page-intro {
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 8px;
}
.page-intro em { font-style: italic; color: var(--terracotta); font-weight: 400; }
.page-sub { font-size: 14px; color: var(--ink-muted); margin: 0 0 28px; line-height: 1.5; }

/* Fields */
.field { margin-bottom: 20px; }
.field > label, .field-label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-soft); margin-bottom: 8px; padding-left: 4px;
}

select, input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 18px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  transition: all 0.18s ease;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8274' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  background-size: 18px; padding-right: 46px; cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--olive);
  background: var(--surface-alt);
  box-shadow: 0 0 0 4px var(--olive-tint);
}
textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); line-height: 1.5; }
::placeholder { color: var(--ink-dim); }

/* Importance buttons */
.importance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.imp-btn {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-soft); padding: 14px 4px 12px;
  border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  cursor: pointer; transition: all 0.2s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.imp-dot { width: 10px; height: 10px; border-radius: 50%; transition: all 0.2s; }
.imp-btn[data-level="Low"] .imp-dot { background: var(--olive); }
.imp-btn[data-level="Medium"] .imp-dot { background: var(--dusty-blue); }
.imp-btn[data-level="High"] .imp-dot { background: var(--peach); }
.imp-btn[data-level="Critical"] .imp-dot { background: var(--rust-red); }
.imp-btn.selected { color: var(--ink); font-weight: 600; border-width: 1.5px; }
.imp-btn[data-level="Low"].selected { background: var(--olive-tint); border-color: var(--olive); }
.imp-btn[data-level="Medium"].selected { background: var(--dusty-blue-tint); border-color: var(--dusty-blue); }
.imp-btn[data-level="High"].selected { background: var(--peach-tint); border-color: var(--peach); }
.imp-btn[data-level="Critical"].selected { background: var(--terracotta-tint); border-color: var(--rust-red); }
.imp-btn.selected .imp-dot { box-shadow: 0 0 0 4px rgba(255,255,255,0.7); transform: scale(1.1); }
.imp-btn:active { transform: scale(0.97); }

/* Photo */
.photo-area {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  text-align: center;
  background: var(--surface); cursor: pointer;
  transition: all 0.2s ease; position: relative; overflow: hidden;
}
.photo-area .photo-label {
  display: block; padding: 32px 20px; cursor: pointer;
}
.photo-area #photoInput {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  top: 0; left: 0;
}
.photo-area:hover { border-color: var(--olive); background: var(--olive-tint); }
.photo-area .photo-icon-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--peach-tint);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; transition: background 0.2s;
}
.photo-area:hover .photo-icon-wrap { background: var(--olive-soft); }
.photo-area .photo-icon-wrap svg { width: 22px; height: 22px; color: var(--terracotta); transition: color 0.2s; }
.photo-area:hover .photo-icon-wrap svg { color: var(--olive-deep); }
.photo-area .label { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); }
.photo-area .hint { font-size: 12px; color: var(--ink-muted); margin-top: 4px; letter-spacing: 0.02em; }
.photo-area.has-photo { padding: 0; border-style: solid; border-color: var(--border); background: var(--surface); }
.photo-area.has-photo img { width: 100%; display: block; border-radius: var(--r-lg); }
.photo-area.has-photo .preview-overlay { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.preview-btn {
  background: rgba(253, 250, 242, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); color: var(--ink);
  padding: 8px 14px; border-radius: 100px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer;
}
/* #photoInput visibility handled by .photo-area scoped rule above */

/* Buttons */
.btn {
  background: var(--olive); color: var(--surface-alt);
  border: none; border-radius: 100px; padding: 18px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em; cursor: pointer;
  transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--olive-deep); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { background: var(--border-strong); color: var(--ink-muted); cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn.secondary:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--border-strong); }
.btn.terracotta { background: var(--terracotta); }
.btn.terracotta:hover:not(:disabled) { background: var(--terracotta-deep); }
.btn.small { padding: 10px 16px; font-size: 14px; width: auto; }
.btn.danger { background: var(--rust-red); }

/* Toast */
.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom));
  left: 22px; right: 22px; padding: 14px 18px;
  border-radius: var(--r-lg); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  transform: translateY(calc(100% + 50px));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 520px; margin: 0 auto; z-index: 100;
  box-shadow: 0 8px 24px rgba(60, 45, 20, 0.12);
}
.toast.show { transform: translateY(0); }
.toast.success { background: var(--olive); color: var(--surface-alt); }
.toast.error { background: var(--rust-red); color: var(--surface-alt); }
.toast.info { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--border); }
.toast a { color: inherit; text-decoration: underline; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(43, 39, 32, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s; z-index: 50;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none; z-index: 60;
}
.modal-content {
  background: var(--bg); border-radius: var(--r-xl);
  padding: 24px; max-width: 420px; width: 100%;
  transform: translateY(20px) scale(0.96); opacity: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  max-height: 85vh; overflow-y: auto;
}
.modal.open .modal-content { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
.modal h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 24px;
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.modal .cancel-btn {
  background: transparent; border: none; color: var(--ink-muted);
  padding: 10px; font-family: var(--font-body); font-size: 14px;
  cursor: pointer; margin-top: 8px; width: 100%;
}

/* User select list */
.user-list { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 8px; }
.user-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.user-item:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.user-item.selected { background: var(--olive-tint); border-color: var(--olive); }
.user-item-initials {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--olive); color: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}

/* Spinner */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.toast.info .spinner { border-color: var(--border-subtle); border-top-color: var(--olive); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Connection indicator — sits below header, full width strip */
.conn-badge {
  position: fixed; top: calc(76px + env(safe-area-inset-top)); left: 22px; right: 22px;
  transform: translateY(-80px); opacity: 0;
  background: var(--rust-red); color: white;
  padding: 8px 16px; border-radius: 100px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 200;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.conn-badge.show { transform: translateY(0); opacity: 1; }
.conn-badge.queued { background: var(--peach-deep); }

/* Recent */
.recent { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.recent h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--ink); margin: 0 0 16px; letter-spacing: -0.01em;
}
.recent-item {
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 14px; transition: all 0.18s;
}
.recent-item:hover { border-color: var(--border-strong); transform: translateX(2px); }
.recent-item-main { min-width: 0; flex: 1; }
.recent-item-title { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item-meta { font-size: 12px; color: var(--ink-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recent-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: var(--bg-tint); border-radius: 100px;
  font-size: 11px; font-weight: 500;
}
.recent-chip-dot { width: 6px; height: 6px; border-radius: 50%; }
.recent-chip.Low .recent-chip-dot { background: var(--olive); }
.recent-chip.Medium .recent-chip-dot { background: var(--dusty-blue); }
.recent-chip.High .recent-chip-dot { background: var(--peach); }
.recent-chip.Critical .recent-chip-dot { background: var(--rust-red); }
.recent-chip.queued { background: var(--peach-tint); color: var(--peach-deep); }
.recent-chip.queued .recent-chip-dot { background: var(--peach-deep); }
.recent-item a {
  color: var(--terracotta); text-decoration: none; font-weight: 600;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 100px;
  background: var(--terracotta-tint); transition: all 0.18s;
  flex-shrink: 0;
}
.recent-item a:hover { background: var(--terracotta-soft); }
.recent-empty {
  color: var(--ink-dim); font-size: 14px; padding: 20px;
  text-align: center; background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  font-style: italic; font-family: var(--font-display);
}

/* ---- Admin-specific ---- */
.tabs {
  display: flex; gap: 4px; background: var(--surface);
  padding: 4px; border-radius: 100px; border: 1px solid var(--border);
  margin-bottom: 24px; overflow-x: auto;
}
.tab {
  background: transparent; border: none; color: var(--ink-muted);
  padding: 10px 16px; border-radius: 100px; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  white-space: nowrap; transition: all 0.18s;
}
.tab.active { background: var(--ink); color: var(--surface-alt); }
.tab:hover:not(.active) { color: var(--ink); }

.admin-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px;
}
.admin-section h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  margin: 0 0 12px; letter-spacing: -0.01em;
}
.admin-section .sub {
  font-size: 13px; color: var(--ink-muted); margin: -8px 0 16px;
}

.list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--r-md);
  margin-bottom: 6px;
}
.list-row input { flex: 1; padding: 8px 12px; font-size: 14px; }
.list-row .drag { cursor: grab; color: var(--ink-dim); padding: 4px; }
.list-row .remove {
  background: transparent; border: none; color: var(--ink-muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.list-row .remove:hover { background: var(--terracotta-tint); color: var(--terracotta-deep); }
.list-row .remove svg { width: 16px; height: 16px; }

.add-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.add-row input { flex: 1; }
.add-row button {
  background: var(--olive); color: var(--surface-alt);
  border: none; border-radius: var(--r-md);
  padding: 0 18px; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); font-size: 14px;
}

.kv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.kv-grid label { grid-column: 1 / -1; margin-top: 8px; }

.site-picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.site-picker button {
  background: var(--surface); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 100px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
}
.site-picker button.active {
  background: var(--ink); color: var(--surface-alt); border-color: var(--ink);
}

/* New site tabs — primary site navigation */
.site-tabs-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.site-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.site-tabs button {
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 16px;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.18s;
}
.site-tabs button:hover:not(.active) {
  background: var(--bg-tint);
  color: var(--ink);
}
.site-tabs button.active {
  background: var(--ink);
  color: var(--surface-alt);
}
.site-tabs button .room-count {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.site-tabs button:not(.active) .room-count {
  background: var(--border-subtle);
  color: var(--ink-muted);
}

/* Rooms section — primary workspace */
.rooms-section {
  border: 1px solid var(--border);
  background: var(--surface);
}
.rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.rooms-header h3 {
  margin: 0;
}
.room-count-badge {
  background: var(--olive-tint);
  color: var(--olive-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Prominent add bars — for rooms and sites */
.add-room-bar, .add-site-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-tint);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  transition: all 0.18s;
}
.add-room-bar:focus-within, .add-site-bar:focus-within {
  border-style: solid;
  border-color: var(--olive);
  background: var(--olive-tint);
}
.add-room-bar input, .add-site-bar input {
  flex: 1;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 15px;
  padding: 12px 16px;
}
.add-room-bar input:focus, .add-site-bar input:focus {
  box-shadow: none;
}
.add-room-bar button, .add-site-bar button {
  background: var(--olive);
  color: var(--surface-alt);
  border: none;
  border-radius: var(--r-md);
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s;
  white-space: nowrap;
}
.add-room-bar button:hover, .add-site-bar button:hover {
  background: var(--olive-deep);
}
.add-room-bar button:active, .add-site-bar button:active {
  transform: scale(0.97);
}

.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.status-chip.ok { background: var(--olive-tint); color: var(--olive-deep); }
.status-chip.fail { background: var(--terracotta-tint); color: var(--terracotta-deep); }

@media (max-width: 380px) {
  .imp-btn { font-size: 12px; padding: 12px 2px 10px; }
  .page-intro { font-size: 28px; }
  .logo { font-size: 24px; }
  .logo-sub { display: none; }
}

/* Keyboard focus indicator — accessibility */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}
/* Inputs/selects/textareas already have custom focus styles via box-shadow */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}

/* Two-column admin layout on wider screens */
@media (min-width: 900px) {
  main.wide { max-width: 960px; }
}

/* Audit table */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
  padding: 0 20px;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.audit-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.audit-table tbody tr {
  transition: background 0.12s;
}
.audit-table tbody tr:hover {
  background: var(--bg-tint);
}
.audit-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--ink-soft);
}
.audit-table .cell-date {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.audit-table .cell-title {
  font-weight: 500;
  color: var(--ink);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-table .table-link {
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--terracotta-tint);
  transition: all 0.18s;
  white-space: nowrap;
}
.audit-table .table-link:hover {
  background: var(--terracotta-soft);
}
.audit-table .error-row td {
  border-bottom: 1px solid var(--border-subtle);
  padding-top: 0;
}
.audit-table .error-detail {
  font-size: 12px;
  color: var(--rust-red);
  font-family: var(--font-mono);
  padding: 2px 10px 8px;
}

/* ---- Login page ---- */
#loginView {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.login-container {
  width: 100%;
  max-width: 380px;
  animation: loginFadeIn 0.4s ease;
}
@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.login-logo-img {
  height: 80px;
  width: auto;
}
.login-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.login-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.login-sub {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-admin-toggle {
  font-size: 13px !important;
}
.admin-passcode-section {
  margin-top: 12px;
  animation: loginFadeIn 0.3s ease;
}

/* ---- User management styles ---- */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.role-badge.user {
  background: var(--dusty-blue-tint);
  color: var(--ink-soft);
}
.role-badge.admin {
  background: var(--terracotta-tint);
  color: var(--terracotta-deep);
}
.pin-status {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.pin-status.set { color: var(--olive); }
.pin-status.unset { color: var(--rust-red); }

.user-row {
  flex-wrap: wrap;
  gap: 8px !important;
}

.add-user-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-tint);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  transition: all 0.18s;
  flex-wrap: wrap;
}
.add-user-bar:focus-within {
  border-style: solid;
  border-color: var(--olive);
  background: var(--olive-tint);
}
.add-user-bar input, .add-user-bar select {
  flex: 1;
  min-width: 100px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 14px;
  padding: 12px 14px;
}
.add-user-bar input:focus, .add-user-bar select:focus {
  box-shadow: none;
}
.add-user-bar button {
  background: var(--olive);
  color: var(--surface-alt);
  border: none;
  border-radius: var(--r-md);
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.add-user-bar button:hover {
  background: var(--olive-deep);
}