/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Colour tokens — dark only ───────────────────────────── */
:root {
  --bg:   #0A0A12;
  --sf:   #14141E;
  --sf2:  #1C1C28;
  --bd:   #26263A;
  --tx:   #FFFFFF;
  --mu:   #8A8AA0;
  --pr:   #C8874A;
  --pp:   #8B5A3C;
  --bu:   #E8C267;
  --or:   #FB923C;
  --gn:   #34D399;
  --rd:   #F87171;
  --pl:   rgba(200, 135, 74, .14);
  --gl:   rgba(52, 211, 153, .12);
  --rl:   rgba(248, 113, 113, .12);
  --ol:   rgba(251, 146, 60, .12);
}

/* ── Base ────────────────────────────────────────────────── */
html, body { overflow-x: hidden; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.5;
  min-height: 100dvh;
  position: relative;
}

/* ── Ambient gradient orbs (site-wide, shown in app) ────── */
.orbs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transition: opacity .45s ease; }
.orb  { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .25; }
.orb-a { width: 480px; height: 480px; top: -120px; right: -120px; background: #D4A557; }
.orb-b { width: 520px; height: 520px; bottom: -160px; left: -160px; background: #8B5A3C; }
.orb-c { width: 340px; height: 340px; top: 45%; left: 35%; background: #E8C267; opacity: .16; }
body:has(#landing:not(.hidden)) > .orbs { opacity: 0; }

/* ── Landing-only orbs (warm, poop-coded) ───────────────── */
.landing-orbs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transition: opacity .45s ease; }
.l-orb  { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .32; }
.l-orb-a { width: 480px; height: 480px; top: -120px; right: -120px; background: #C8874A; }
.l-orb-b { width: 520px; height: 520px; bottom: -160px; left: -160px; background: #8B5A3C; }
.l-orb-c { width: 340px; height: 340px; top: 45%; left: 35%; background: #7CB342; opacity: .14; }
body:has(#landing.hidden) > .landing-orbs { opacity: 0; }

/* ── Landing page ─────────────────────────────────────────── */
#landing {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 40px;
  transition: opacity .45s ease, transform .45s ease;
}
#landing.hidden {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.land-nav {
  display: flex;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.land-logo { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.land-logo-dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #E8C267 0%, #C8874A 50%, #8B5A3C 100%);
  box-shadow: 0 4px 18px rgba(200, 135, 74, .45);
}
.land-nav-links { margin-left: auto; display: flex; gap: 28px; font-size: 13px; color: var(--mu); }
.land-nav-links a { color: inherit; text-decoration: none; transition: color .15s; }
.land-nav-links a:hover { color: var(--tx); }

.land-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 40px;
  gap: 60px;
}
.land-copy { max-width: 520px; }
.land-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(212, 165, 87, .08);
  border: 1px solid rgba(212, 165, 87, .28);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #D4A557;
  margin-bottom: 24px;
}
.land-title {
  font-size: clamp(38px, 6.2vw, 64px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.04;
  margin-bottom: 22px;
  color: #FFF5E8;
}
.land-title .grad {
  background: linear-gradient(135deg, #8B5A3C 0%, #C8874A 45%, #E8C267 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.land-sub { font-size: 16px; color: #B8A896; margin-bottom: 34px; line-height: 1.65; max-width: 460px; }
.land-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: linear-gradient(135deg, #E8C267 0%, #C8874A 100%);
  color: #2A1810;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 24px rgba(200, 135, 74, .35);
}
.land-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(200, 135, 74, .55); }
.land-cta svg { width: 16px; height: 16px; }

/* ── Abstract gradient hero visual ────────────────────────── */
.land-visual { position: relative; width: 440px; height: 440px; flex-shrink: 0; }
.blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.blob-1 { width: 300px; height: 300px; background: radial-gradient(circle, #C8874A 0%, rgba(200,135,74,0) 70%); top: 40px; left: 20px; animation: drift 12s ease-in-out infinite; }
.blob-2 { width: 280px; height: 280px; background: radial-gradient(circle, #8B5A3C 0%, rgba(139,90,60,0) 70%); bottom: 30px; right: 20px; animation: drift 14s ease-in-out infinite reverse; }
.blob-3 { width: 220px; height: 220px; background: radial-gradient(circle, #E8C267 0%, rgba(232,194,103,0) 70%); top: 120px; right: 100px; animation: drift 16s ease-in-out infinite; }
.blob-4 { width: 180px; height: 180px; background: radial-gradient(circle, #7CB342 0%, rgba(124,179,66,0) 70%); bottom: 90px; left: 70px; animation: drift 18s ease-in-out infinite reverse; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25px, -20px) scale(1.08); }
  66%      { transform: translate(-15px, 20px) scale(.95); }
}
/* ── Interactive 3D poop mount ───────────────────────────── */
.poop-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
.poop-3d:active { cursor: grabbing; }
.poop-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.poop-hint {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(212, 165, 87, .55);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .4s ease;
}
.poop-hint.gone { opacity: 0; }

.accent-dot { position: absolute; border-radius: 50%; z-index: 3; }
.accent-dot-1 { width: 14px; height: 14px; background: #E8C267; top: 5%;  right: 10%; box-shadow: 0 0 20px #E8C267; }
.accent-dot-2 { width: 10px; height: 10px; background: #7CB342; top: 70%; left: -2%;  box-shadow: 0 0 18px #7CB342; }
.accent-dot-3 { width: 12px; height: 12px; background: #C8874A; bottom: 10%; right: 15%; box-shadow: 0 0 20px #C8874A; }

@media (max-width: 820px) {
  .land-hero { flex-direction: column-reverse; text-align: center; gap: 20px; padding: 30px 0; }
  .land-visual { width: 300px; height: 300px; }
  .land-copy { text-align: center; }
  .land-sub { margin-left: auto; margin-right: auto; }
  .land-nav-links { display: none; }
}

/* ── App container ────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 48px;
  display: none;
}
#app.shown { display: block; animation: fadeUp .45s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ──────────────────────────────────────────────── */
.hdr {
  padding: 22px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 0;
  color: var(--mu);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
}
.back-btn:hover { color: var(--tx); border-color: var(--pr); background: rgba(255,77,139,.06); }
.back-btn:active { transform: translateX(-2px); }
.back-btn svg { width: 16px; height: 16px; }
.brand {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, #C8874A 0%, #E8C267 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tag { margin-left: auto; font-size: 12px; color: var(--mu); }
.profile-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 50%;
  padding: 0;
  color: var(--mu);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
}
.profile-btn:hover { color: var(--pr); border-color: var(--pr); background: rgba(200,135,74,.06); }
.profile-btn:active { transform: scale(.96); }
.profile-btn svg { width: 18px; height: 18px; }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--bd);
}
.tab {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab.active { color: var(--tx); border-bottom-color: var(--pr); }

/* ── Panels ──────────────────────────────────────────────── */
.pnl { display: none; padding: 24px; }
.pnl.active { display: block; }

/* ── Section label ───────────────────────────────────────── */
.sl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 12px;
}

/* ── Bristol grid ────────────────────────────────────────── */
.bgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.bc {
  padding: 12px 10px 11px 15px;
  background: var(--sf);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.bc::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--tc, #ccc);
}
.bc:hover  { border-color: var(--tc); transform: translateY(-1px); }
.bc.sel    { border-color: var(--tc); background: var(--tbg); }
.bnum { font-size: 16px; font-weight: 600; color: var(--tc); line-height: 1; }
.bdes { font-size: 10px; color: var(--mu); margin-top: 4px; line-height: 1.3; }
.bsub { display: block; font-size: 9px; opacity: .7; margin-top: 1px; }

/* ── Time picker ─────────────────────────────────────────── */
.time-row { margin-bottom: 24px; }
input[type=datetime-local] {
  width: 100%;
  padding: 13px 14px;
  background: var(--sf);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx);
  outline: none;
  transition: border-color .15s;
  cursor: pointer;
  -webkit-appearance: none;
  color-scheme: dark;
}
input[type=datetime-local]:focus { border-color: var(--pr); }

/* ── Urgency ─────────────────────────────────────────────── */
.urow { display: flex; gap: 8px; margin-bottom: 24px; }
.ub {
  flex: 1;
  padding: 12px 6px;
  background: var(--sf);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--mu);
  transition: all .15s;
}
.ub:hover { color: var(--tx); border-color: var(--bd); }
.ub.sel { background: var(--pl); border-color: var(--pr); color: var(--pr); }

/* ── Photo row (in log form) ─────────────────────────────── */
.photo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.photo-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--sf);
  border: 1.5px dashed var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--mu);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.photo-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.photo-add:hover { border-color: var(--pr); color: var(--pr); }
.photo-add svg { width: 15px; height: 15px; flex-shrink: 0; }
.lthumb-wrap { display: flex; align-items: center; gap: 8px; }
.lthumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid var(--bd); }
.lthumb-x {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--mu);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 10px;
  font-family: inherit;
  transition: all .15s;
}
.lthumb-x:hover { border-color: var(--rd); color: var(--rd); }

/* ── Textarea ────────────────────────────────────────────── */
textarea {
  width: 100%;
  padding: 14px;
  background: var(--sf);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx);
  resize: none;
  outline: none;
  transition: border-color .15s;
  margin-bottom: 24px;
}
textarea:focus { border-color: var(--pr); }
textarea::placeholder { color: var(--mu); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-p {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #E8C267 0%, #C8874A 100%);
  color: #2A1810;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 20px rgba(200, 135, 74, .32);
}
.btn-p:hover   { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(200, 135, 74, .5); }
.btn-p:active  { transform: scale(.99); }
.btn-p:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-o {
  width: 100%;
  padding: 14px;
  background: var(--sf);
  color: var(--tx);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 12px;
}
.btn-o:hover    { border-color: var(--pr); color: var(--pr); }
.btn-o:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hint text ───────────────────────────────────────────── */
.hint { font-size: 11px; color: var(--mu); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ── Metrics grid ────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.metric {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}
.mval {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(135deg, #E8C267 0%, #C8874A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mlbl { font-size: 11px; color: var(--mu); margin-top: 5px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.ctitle { font-size: 13px; font-weight: 500; margin-bottom: 14px; color: var(--tx); }

/* ── Insights / fun facts ────────────────────────────────── */
.fact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
}
.fact-item:last-child { border-bottom: none; padding-bottom: 0; }
.fact-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C8874A;
  margin-top: 7px; flex-shrink: 0;
}
.fact-text { font-size: 13px; line-height: 1.55; color: var(--tx); }
.fact-text strong {
  font-weight: 600;
  background: linear-gradient(135deg, #C8874A 0%, #E8C267 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Type distribution bars ──────────────────────────────── */
.dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dist-row:last-child { margin-bottom: 0; }
.dist-label { font-size: 12px; font-weight: 600; width: 26px; text-align: right; flex-shrink: 0; }
.dist-bar-wrap { flex: 1; background: var(--sf2); border-radius: 100px; height: 8px; overflow: hidden; }
.dist-bar { height: 100%; border-radius: 100px; transition: width .5s ease; }
.dist-count { font-size: 11px; color: var(--mu); width: 18px; text-align: right; flex-shrink: 0; }

/* ── Log history list ────────────────────────────────────── */
.litem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  margin-bottom: 8px;
}
.lbadge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.linfo { flex: 1; min-width: 0; }
.ltime  { font-size: 13px; font-weight: 500; color: var(--tx); }
.lnotes { font-size: 12px; color: var(--mu); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lphoto { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--bd); flex-shrink: 0; }

/* ── AI result box ───────────────────────────────────────── */
.aibox {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tx);
  display: none;
  position: relative;
  overflow: hidden;
}
.aibox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,135,74,.08) 0%, rgba(139,90,60,.06) 100%);
  pointer-events: none;
}
.aibox.vis { display: block; }

/* ── Empty state ─────────────────────────────────────────── */
.empty { text-align: center; padding: 40px 20px; color: var(--mu); font-size: 14px; }

/* ── Spinner ─────────────────────────────────────────────── */
.spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sp .7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--sf);
  color: var(--tx);
  border: 1px solid var(--bd);
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  transition: transform .3s ease;
  z-index: 100;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Login screen ────────────────────────────────────────── */
#login {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 40px;
}
#login.hidden { display: none; }
.login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.login-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 18px;
  padding: 40px 32px 32px;
}
.login-back {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
}
.login-back svg { width: 14px; height: 14px; }
.login-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.4px;
  margin-bottom: 8px;
  color: var(--tx);
}
.login-sub {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.55;
  margin-bottom: 22px;
}
.login-sub strong { color: var(--tx); font-weight: 500; }
.login-input {
  width: 100%;
  padding: 13px 14px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx);
  outline: none;
  transition: border-color .15s;
  margin-bottom: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.login-input:focus { border-color: var(--pr); }
.login-input::placeholder { color: var(--mu); }
select.login-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8AA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ── Profile screen (full page, replaces app) ────────────── */
#profile {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 48px;
}
#profile.hidden { display: none; }
.profile-wrap { padding: 8px 24px 24px; }
.profile-heading {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.4px;
  margin-bottom: 8px;
  color: var(--tx);
}
.profile-skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--mu);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.profile-skip:hover { color: var(--tx); }

/* ── Profile form ────────────────────────────────────────── */
.profile-blurb {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.55;
  margin-bottom: 22px;
}
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 8px;
  margin-top: 14px;
}
.field-row { display: flex; gap: 10px; }
.field-half { flex: 1; }
.cond-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.cond-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sf);
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  font-size: 13px;
  color: var(--mu);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}
.cond-chip:hover { color: var(--tx); }
.cond-chip input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--bd); border-radius: 4px; cursor: pointer; flex-shrink: 0; position: relative; transition: all .15s; }
.cond-chip input:checked { background: var(--pr); border-color: var(--pr); }
.cond-chip input:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: solid #2A1810;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cond-chip:has(input:checked) { background: var(--pl); border-color: var(--pr); color: var(--pr); }

#profile textarea { margin-bottom: 14px; }

/* ── Account row (bottom of profile tab) ─────────────────── */
.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}
.account-info { flex: 1; min-width: 0; }
.account-label { font-size: 11px; color: var(--mu); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.account-email { font-size: 13px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signout-btn {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.signout-btn:hover { border-color: var(--rd); color: var(--rd); }