:root {
  /* Warm near-black base — espresso, not pure graphite */
  --bg: #14100C;
  --surface: #1E170F;
  --surface-2: #2A2015;

  --line: #3D2F20;

  /* Muted antique brass — the interface's "voice": text accents, active states */
  --gold: #B99457;
  --gold-bright: #D4B378;
  --gold-glow: rgba(185, 148, 87, 0.28);

  /* Burgundy wax — reserved for the seal mark and serious/destructive actions */
  --burgundy: #7A2331;
  --burgundy-bright: #9C2E3F;
  --burgundy-glow: rgba(122, 35, 49, 0.32);

  --text: #EFE7DA;
  --text-muted: #9C8F7C;

  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-photo: 16px 16px 4px 4px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 15% -10%, var(--burgundy-glow), transparent 45%),
    radial-gradient(circle at 100% 20%, var(--gold-glow), transparent 55%);
}
/* Film-grain texture, matching the moodboard's dark editorial photography */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The app's own bounded interface column (max 480px, centered) */
#app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
}
/* A large, muted background motif — anchored to the edge of the app column
   itself (not the raw viewport), so on wide screens it still reads as part
   of the interface rather than page chrome floating outside it. */
#app::after {
  content: '';
  position: fixed;
  right: max(0px, calc((100vw - 480px) / 2 - 60px));
  bottom: -40px;
  width: 300px; height: 300px;
  background-image: url('/images/bg-motif.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.09;
  filter: grayscale(0.45) sepia(0.35) brightness(1.15);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.italic { font-style: italic; }

@keyframes emberPulse {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 4px var(--gold-glow)); transform: scale(1); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px var(--gold-glow)); transform: scale(1.06); }
}
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-muted);
  position: relative; z-index: 2;
}
.boot-seal { width: 64px; height: 64px; animation: emberPulse 2.4s ease-in-out infinite; position: relative; z-index: 2; }

.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 22px 18px 48px;
  min-height: 100vh;
  animation: fadeSlideIn 0.4s ease;
  position: relative;
  z-index: 2;
}

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand img { width: 26px; height: 26px; }
.topbar h1 { font-size: 22px; margin: 0; }
.link-btn { background: none; border: none; color: var(--gold); font-family: 'Manrope', sans-serif; font-size: 14px; cursor: pointer; padding: 6px 0; transition: opacity .15s ease; }
.link-btn:active { opacity: 0.6; }
.back-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

/* ---------- Corner brackets — a framed, tarot-card-like geometric detail ---------- */
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
.corner-frame::before { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.corner-frame::after { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

/* ---------- Profile block ---------- */
.profile {
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.profile-aura {
  position: absolute;
  top: -30%; right: -22%;
  width: 200px; height: 200px;
  opacity: 0.10;
  pointer-events: none;
  filter: grayscale(0.2);
}
.profile-photo {
  width: 84px; height: 84px;
  border-radius: 22px;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--line);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.profile-info { position: relative; z-index: 1; }
.profile-info h2 { font-size: 25px; margin: 0 0 4px; }
.profile-meta { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }

.summary-card {
  margin-top: 14px;
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 6px var(--radius-md) var(--radius-md) 6px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.summary-card .label { color: var(--gold); font-size: 12.5px; margin: 0 0 6px; font-family: 'Manrope'; }

.source-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ---------- Section header ---------- */
.section-label { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; color: var(--text-muted); font-size: 13.5px; }
.section-label::after {
  content: '';
  flex: 1;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='8'><path d='M0 4 Q7 0 14 4 T28 4' stroke='%23B99457' fill='none' stroke-width='1.3' opacity='0.55'/></svg>");
  background-repeat: repeat-x;
  background-position: left center;
  -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
  mask-image: linear-gradient(to right, black 60%, transparent);
}

/* ---------- Category cards ---------- */
.category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px 18px 18px 999px;
  padding: 12px 16px 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.category-card:active { background: var(--surface-2); transform: scale(0.99); }
.category-card:hover { border-color: var(--gold); }
.category-glyph { width: 20px; height: 20px; flex-shrink: 0; animation: emberPulse 3.2s ease-in-out infinite; }
.category-card .title { font-family: 'Cormorant Garamond', serif; font-size: 19px; flex: 1; }
.category-card .chev { color: var(--text-muted); }
.category-card .sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: 'Manrope'; }

.empty-state { color: var(--text-muted); font-size: 14px; padding: 20px 4px; text-align: center; }

/* ---------- Backstory + work frames ---------- */
.frame {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(185,148,87,0.045);
}
.frame .label { color: var(--gold); font-size: 12.5px; margin: 0 0 8px; }
.frame p { margin: 0; line-height: 1.7; font-size: 14.5px; white-space: pre-wrap; }

.work-date-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.work-date-line .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.work-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 16px; overflow: hidden; }
.work-caption { padding: 12px 16px 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--gold-bright); }
.work-card img { width: 100%; display: block; max-height: 260px; object-fit: cover; border-radius: var(--radius-photo); }
.work-card .photo-ph { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--line); font-size: 26px; border-radius: var(--radius-photo); }
.work-card .body { padding: 14px 16px 16px; }
.work-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); white-space: pre-wrap; }

/* ---------- Forms (owner) ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-family: 'Manrope'; font-size: 14.5px; resize: vertical;
}
.field textarea { min-height: 90px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 1px solid var(--gold); border-color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: none;
  font-family: 'Manrope'; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: #241B10; }
.btn-primary:active { background: var(--gold-bright); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-danger { background: transparent; border: 1px solid var(--burgundy); color: #E29AA4; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; margin-top: 4px; }

.card-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }

/* ---------- Password screen ---------- */
.center-screen {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 16px;
  max-width: 380px; margin: 0 auto; padding: 24px; animation: fadeSlideIn 0.4s ease;
  position: relative; z-index: 2;
}
.center-screen .glyph-seal { width: 60px; height: 60px; margin: 0 auto; animation: emberPulse 2.4s ease-in-out infinite; }
.center-screen h2 { text-align: center; margin: 0 0 6px; }
.center-screen p.hint { color: var(--text-muted); text-align: center; font-size: 13.5px; margin: 0 0 8px; }
.error-msg { color: #E29AA4; font-size: 13px; text-align: center; min-height: 18px; }

/* ---------- Onboarding ---------- */
.onboard-option {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 14px 18px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.onboard-option:active { transform: scale(0.99); }
.onboard-option.selected { border-color: var(--gold); background: rgba(185,148,87,0.10); }
.onboard-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; position: relative; }
.onboard-option.selected .onboard-radio { border-color: var(--gold); }
.onboard-option.selected .onboard-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.onboard-option .label { font-size: 15px; }

/* ---------- CRM ---------- */
.folder-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: none; }
.folder-tabs::-webkit-scrollbar { display: none; }
.folder-tab { flex-shrink: 0; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-muted); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.folder-tab.active { background: var(--gold); color: #241B10; border-color: var(--gold); font-weight: 600; }
.folder-tab .count { opacity: 0.7; margin-left: 4px; }

.stats-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: none; }
.stats-row::-webkit-scrollbar { display: none; }
.stat-chip { flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.stat-chip b { color: var(--gold-bright); font-weight: 700; }

.client-row {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px 18px 18px 999px; padding: 10px 16px 10px 10px; margin-bottom: 8px; cursor: pointer;
}
.client-row img, .client-row .ph-fallback {
  width: 46px; height: 46px; border-radius: 16px; object-fit: cover; background: var(--surface-2);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-family: 'Cormorant Garamond'; font-size: 20px;
}
.client-row .name { font-family: 'Cormorant Garamond'; font-size: 17px; }
.client-row .sub { color: var(--text-muted); font-size: 12.5px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--gold); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; z-index: 50; animation: fadeSlideIn 0.25s ease;
}

.copy-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; word-break: break-all; color: var(--text-muted); margin-bottom: 8px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(6,5,4,0.75); display: flex; align-items: flex-end; z-index: 40; }
.modal-sheet {
  background: var(--bg); border-top: 1px solid var(--line); border-radius: 26px 26px 0 0;
  padding: 20px 18px 28px; width: 100%; max-width: 480px; margin: 0 auto; max-height: 86vh;
  overflow-y: auto; animation: sheetUp 0.28s ease;
}
.modal-sheet h3 { margin-top: 0; }
.modal-sheet a { color: var(--gold); }

/* ---------- Privacy policy ---------- */
.policy-eyebrow { color: var(--gold); font-size: 12px; letter-spacing: 0.04em; margin: 0 0 6px; }
.policy-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.policy-card h4 { font-size: 16px; margin: 0 0 8px; }
.policy-card p, .policy-card li { font-size: 13px; line-height: 1.65; color: var(--text-muted); margin: 0 0 8px; }
.policy-card ul { margin: 0 0 8px; padding-left: 18px; }
.policy-links a { display: block; font-size: 13px; color: var(--gold); text-decoration: none; margin-bottom: 8px; }
.policy-links a:active { opacity: 0.7; }