/* BodyBound — assets/css/app.css */

:root,
[data-theme="dark"] {
  /* ── Backgrounds — matched to community site ── */
  --bg:       #080c10;
  --bg2:      #141a22;
  --bg3:      #1a2230;
  --border:   #252d3a;
  --border2:  #1e2635;
  /* ── Accents — electric blue primary, mint green secondary ── */
  --accent:   #5b9cf6;
  --accent2:  #34d399;
  --accent3:  #fb923c;
  --purple:   #a78bfa;
  --warn:     #fbbf24;
  --danger:   #f87171;
  /* ── Text ── */
  --text:     #dde2ea;
  --text2:    #7a8694;
  --text3:    #4a5568;
  /* ── Glow uses blue accent ── */
  --glow:     rgba(91,156,246,0.15);
  --r:12px; --r2:8px; --r3:6px;
}

/* Light theme kept for toggle compatibility but dark-first */
[data-theme="light"] {
  --bg:       #f0f4f8;
  --bg2:      #ffffff;
  --bg3:      #e8edf4;
  --border:   #c8d0dc;
  --border2:  #b8c4d4;
  --accent:   #2563eb;
  --accent2:  #059669;
  --accent3:  #d1740d;
  --purple:   #6f42c1;
  --warn:     #b08800;
  --danger:   #cf222e;
  --text:     #1a2230;
  --text2:    #4a5568;
  --text3:    #7a8694;
  --glow:     rgba(37,99,235,0.1);
  --r:12px; --r2:8px; --r3:6px;
}

/* Smooth theme transitions */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .15s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}

/* ══ AUTH SCREEN ══════════════════════════════════════════════════════════════ */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
}

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  max-width: 980px;
  width: 100%;
  align-items: center;
}
@media (max-width: 780px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .auth-info { order: 1; }
  .auth-card { order: 0; }
}

/* Info / left column */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.auth-tagline {
  font-size: 1.05rem;
  color: var(--text2);
  line-height: 1.65;
  margin: 0 0 28px;
}
.auth-about {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth-about p {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.7;
  margin: 0 0 10px;
}
.auth-about p:last-child { margin-bottom: 0; }

.auth-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.auth-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.auth-feature-icon {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-feature-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  margin-bottom: 2px;
}
.auth-feature-desc {
  font-size: .8rem;
  color: var(--text3);
  line-height: 1.55;
}
.auth-disclaimer {
  font-size: .75rem;
  color: var(--text3);
  line-height: 1.6;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.auth-bg {
  position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.auth-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(91,156,246,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,156,246,0.03) 1px, transparent 1px);
  background-size:48px 48px;
}
.auth-orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:0.4;
}
.auth-orb-1 {
  width:600px; height:600px;
  top:-200px; left:-100px;
  background:radial-gradient(circle, rgba(91,156,246,0.15), transparent 70%);
}
.auth-orb-2 {
  width:500px; height:500px;
  bottom:-150px; right:-100px;
  background:radial-gradient(circle, rgba(56,189,248,0.12), transparent 70%);
}

.auth-card {
  position: relative;
  width: 100%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px;
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
}

.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo-mark {
  width:60px; height:60px;
  background:linear-gradient(135deg,#5b9cf6,#2563eb);
  border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; margin-bottom:12px;
  box-shadow:0 0 30px rgba(91,156,246,0.3);
}
.auth-logo-text {
  font-size:1.8rem; font-weight:800; letter-spacing:-0.04em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-logo-sub { font-size:0.85rem; color:var(--text2); margin-top:4px; }

.auth-tabs {
  display:flex; gap:4px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:12px; padding:4px;
  margin-bottom:24px;
}
.auth-tab {
  flex:1; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.9rem; font-weight:600;
  color:var(--text2); background:transparent; border:none;
  padding:10px; border-radius:9px; cursor:pointer; transition:all 0.2s;
}
.auth-tab:hover { color:var(--text); }
.auth-tab.active { color:var(--bg); background:var(--accent); }

.auth-error {
  background:rgba(248,113,113,0.1);
  border:1px solid rgba(248,113,113,0.3);
  color:var(--danger);
  border-radius:8px;
  padding:10px 14px;
  font-size:0.88rem;
  margin-bottom:12px;
}

.auth-submit { margin-top:8px; font-size:1rem; padding:14px; }

.auth-footer {
  text-align:center;
  margin-top:24px;
  font-size:0.75rem;
  color:var(--text3);
  line-height:1.6;
  border-top:1px solid var(--border);
  padding-top:16px;
}

.field-hint { font-size:0.75rem; color:var(--text3); margin-top:3px; }

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:44px; }
.pw-toggle {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1rem;
  color:var(--text3); padding:4px;
}
.pw-toggle:hover { color:var(--text2); }

/* ══ APP LAYOUT ══════════════════════════════════════════════════════════════ */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(91,156,246,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,156,246,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none; z-index:0;
}
body.not-authed::before { display:none; }

.wrapper { position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:0 24px; }

/* ── HEADER ── */
header {
  border-bottom:1px solid var(--border2);
  padding:0;
  position:sticky; top:0;
  background:rgba(8,12,16,0.95);
  backdrop-filter:blur(24px);
  z-index:900;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; height:58px; }

.logo { font-weight:800; font-size:1.3rem; letter-spacing:-0.03em; display:flex; align-items:center; gap:10px; }
.logo-mark { width:34px; height:34px; background:linear-gradient(135deg,#5b9cf6,#2563eb); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 0 14px rgba(91,156,246,0.3); }
.logo-text { background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.desktop-nav { display:flex; gap:2px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:3px; }
.desktop-nav button { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; font-weight:600; color:var(--text2); background:transparent; border:none; padding:6px 14px; border-radius:7px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.desktop-nav button:hover { color:var(--text); background:var(--bg3); }
.desktop-nav button.active { color:#fff; background:#3b82f6; border-radius:7px; }

.header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.user-chip { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:5px 12px 5px 6px; }
.user-avatar { width:26px; height:26px; background:linear-gradient(135deg,#5b9cf6,#2563eb); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; color:var(--bg); }
.user-name { font-size:0.82rem; font-weight:600; color:var(--text2); }

/* Mobile nav */
.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:rgba(13,17,23,0.98); backdrop-filter:blur(24px); border-top:1px solid var(--border); padding:8px 0 max(10px,env(safe-area-inset-bottom)); }
.mobile-nav-inner { display:flex; justify-content:space-around; }
.mnav-btn { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; color:var(--text3); font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:600; cursor:pointer; padding:6px 10px; border-radius:12px; transition:all 0.2s; min-width:54px; }
.mnav-btn.active { color:var(--accent); }
.mnav-btn.active svg { filter:drop-shadow(0 0 5px var(--accent)); }

@media(max-width:800px) {
  .desktop-nav { display:none; }
  .mobile-nav  { display:block; }
  .wrapper     { padding:0 16px; }

  /* On mobile: hide backup/restore/signout from header — use a menu instead */
  .header-actions .btn-backup,
  .header-actions .btn-restore,
  .header-actions .btn-signout,
  .header-actions .user-name { display:none; }

  /* Hide desktop theme toggle on mobile, show the logo-adjacent one instead */
  #theme-toggle { display:none !important; }
  .mobile-theme-toggle { display:flex !important; }

  /* Make install + theme buttons big enough to tap */
  .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(91,156,246,0.2);
  }

  /* Keep header-actions from wrapping/overflowing */
  .header-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }

  header { padding: 10px 0; }
}

/* ── SECTIONS ── */
#app-main { position:relative; z-index:1; }
.section { display:none; padding:30px 0 100px; }
.section.active { display:block; animation:fadeUp 0.26s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.section-title { font-size:clamp(1.5rem,4vw,2rem); font-weight:800; letter-spacing:-0.04em; margin-bottom:6px; line-height:1.1; }
.section-sub { color:var(--text2); font-size:0.95rem; margin-bottom:26px; }

/* ── STAT CARDS ── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:26px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:20px; position:relative; overflow:hidden; transition:border-color 0.2s,transform 0.2s; }
.stat-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.stat-card::before { content:''; position:absolute; top:0; right:0; width:90px; height:90px; border-radius:50%; transform:translate(32px,-32px); opacity:0.1; }
.stat-card.green::before{background:var(--accent)} .stat-card.blue::before{background:var(--accent2)} .stat-card.orange::before{background:var(--accent3)} .stat-card.warn::before{background:var(--warn)}
.stat-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text3); margin-bottom:10px; font-family:'JetBrains Mono',monospace; }
.stat-value { font-size:2.1rem; font-weight:800; line-height:1; margin-bottom:5px; letter-spacing:-0.03em; }
.stat-card.green .stat-value{color:var(--accent)} .stat-card.blue .stat-value{color:var(--accent2)} .stat-card.orange .stat-value{color:var(--accent3)} .stat-card.warn .stat-value{color:var(--warn)}
.stat-meta { font-size:0.8rem; color:var(--text2); font-weight:500; }

/* ── ALERTS ── */
.alert { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-radius:var(--r2); margin-bottom:10px; font-size:0.92rem; font-weight:500; }
.alert-warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--warn)}
.alert-danger{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--danger)}
.alert-success{background:rgba(91,156,246,.1);border:1px solid rgba(91,156,246,.3);color:var(--accent)}
.alert-info{background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.3);color:var(--accent2)}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.alert-text{flex:1;line-height:1.5}
.alert-dismiss{background:none;border:none;color:inherit;cursor:pointer;opacity:0.5;font-size:1.1rem;padding:0 4px;flex-shrink:0}
.alert-dismiss:hover{opacity:1}

/* ── TWO-COL ── */
.two-col { display:grid; grid-template-columns:1fr 380px; gap:22px; align-items:start; }
@media(max-width:960px){.two-col{grid-template-columns:1fr}}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.card-title{font-size:0.98rem;font-weight:700;letter-spacing:-0.01em}
.card-body{padding:22px}

/* ── INFO NOTE ── */
.info-note{display:flex;align-items:flex-start;gap:12px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.2);border-radius:var(--r2);padding:14px 16px;margin-bottom:16px;font-size:0.9rem;color:var(--text2);line-height:1.55}
.info-note-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.info-note strong{color:var(--accent2);font-weight:700}
.info-note a{color:var(--accent2);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(56,189,248,.3)}
.info-note a:hover{border-bottom-color:var(--accent2)}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:0.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;font-family:'JetBrains Mono',monospace}
input,select,textarea{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.95rem;font-weight:500;color:var(--text);background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r3);padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select option{background:var(--bg2)}
textarea{resize:vertical;min-height:80px}
input::placeholder,textarea::placeholder{color:var(--text3)}
@media(max-width:640px){.form-row{grid-template-columns:1fr}.form-row.three{grid-template-columns:1fr 1fr}}

/* ── BUTTONS ── */
.btn{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.9rem;font-weight:700;padding:11px 20px;border-radius:var(--r3);border:none;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;letter-spacing:-.01em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 6px 20px var(--glow)}
.btn-secondary{background:var(--bg3);color:var(--text);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:rgba(248,113,113,.12);color:var(--danger);border:1.5px solid rgba(248,113,113,.25)}
.btn-danger:hover{background:var(--danger);color:white}
.btn-small{padding:7px 14px;font-size:0.82rem}
.btn-full{width:100%;justify-content:center}

/* ── SEARCH ── */
.search-wrap{position:relative;margin-bottom:18px}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.95rem;pointer-events:none}
.search-wrap input{padding-left:42px}

/* ── TABLE ── */
.log-table{width:100%;border-collapse:collapse}
.log-table th{font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.log-table td{font-size:0.9rem;padding:12px 16px;border-bottom:1px solid rgba(42,52,65,.5);color:var(--text2);vertical-align:middle}
.log-table tr:last-child td{border-bottom:none}
.log-table tr:hover td{background:rgba(255,255,255,.02)}
.log-table td:first-child{color:var(--text);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── TAGS ── */
.tag{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:0.7rem;padding:4px 9px;border-radius:6px;font-weight:500;letter-spacing:.02em}
.tag-green{background:rgba(91,156,246,.12);color:var(--accent)}
.tag-blue{background:rgba(56,189,248,.12);color:var(--accent2)}
.tag-orange{background:rgba(249,115,22,.12);color:var(--accent3)}
.tag-purple{background:rgba(167,139,250,.12);color:var(--purple)}
.tag-gray{background:rgba(255,255,255,.06);color:var(--text3)}

/* ── INVENTORY ── */
.peptide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;padding:20px}
@media(max-width:640px){.peptide-grid{grid-template-columns:1fr;padding:14px}}
.peptide-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:all .2s}
.peptide-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.peptide-card.low-stock{border-color:rgba(251,191,36,.4)}
.peptide-card.out-stock{border-color:rgba(248,113,113,.4)}
.peptide-name{font-size:1.05rem;font-weight:800;margin-bottom:3px;letter-spacing:-.02em}
.peptide-abbr{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.stock-bar-wrap{margin:12px 0}
.stock-bar-label{display:flex;justify-content:space-between;font-size:0.77rem;color:var(--text2);margin-bottom:5px;font-family:'JetBrains Mono',monospace;font-weight:500}
.stock-bar{height:6px;background:var(--border);border-radius:4px;overflow:hidden}
.stock-bar-fill{height:100%;border-radius:4px;transition:width .5s ease}
.fill-good{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.fill-warn{background:var(--warn)}
.fill-low{background:var(--danger)}
.peptide-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:0.8rem;color:var(--text2);font-weight:500}
.peptide-meta span{display:flex;align-items:center;gap:4px}
.peptide-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ── REFERENCE ── */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
@media(max-width:680px){.ref-grid{grid-template-columns:1fr}}
.ref-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .2s}
.ref-card:hover{border-color:var(--accent)}
.ref-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px}
.ref-name{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.ref-category{font-size:.75rem;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:3px}
.ref-body{font-size:.87rem;color:var(--text2);line-height:1.7;margin-bottom:16px}
.ref-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ref-spec{background:var(--bg3);border-radius:8px;padding:10px 12px}
.ref-spec-label{font-size:.67rem;font-family:'JetBrains Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;font-weight:700}
.ref-spec-val{font-size:.84rem;color:var(--text);font-weight:500}

/* ── DISCLAIMER ── */
.disclaimer{background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.2);border-radius:var(--r2);padding:16px 20px;font-size:.88rem;color:var(--text2);line-height:1.65;margin-bottom:24px}
.disclaimer strong{color:var(--accent3)}

/* ── CHART ── */
.mini-chart{display:flex;align-items:flex-end;gap:5px;height:56px;padding:0 2px}
.chart-bar{flex:1;background:linear-gradient(to top,var(--accent),var(--accent2));border-radius:4px 4px 0 0;opacity:.6;transition:opacity .2s;min-width:10px}
.chart-bar:hover{opacity:1}
.chart-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text3);margin-top:6px;font-family:'JetBrains Mono',monospace;font-weight:500}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--danger);color:white;border-radius:50%;font-size:.62rem;font-weight:700;margin-left:5px}

/* ── FILTER CHIPS ── */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg2);color:var(--text2);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .18s}
.chip:hover{color:var(--text);border-color:var(--border2)}
.chip.active{background:rgba(91,156,246,.12);border-color:var(--accent);color:var(--accent)}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:500;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;animation:modalIn .22s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}
.modal-title{font-size:1.1rem;font-weight:800;letter-spacing:-.02em}
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:8px;transition:all .2s}
.modal-close:hover{color:var(--danger);background:rgba(248,113,113,.1)}
.modal-body{padding:22px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px;border-top:1px solid var(--border)}

/* ── SCHEDULE SECTION ── */
.schedule-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:16px;margin-top:4px}
.schedule-times-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.time-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(91,156,246,.12);border:1px solid rgba(91,156,246,.25);color:var(--accent);border-radius:20px;padding:5px 12px;font-size:.82rem;font-family:'JetBrains Mono',monospace;font-weight:500}
.time-chip button{background:none;border:none;color:inherit;cursor:pointer;opacity:.6;font-size:.9rem;padding:0;line-height:1}
.time-chip button:hover{opacity:1}
.day-toggles{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.day-toggle{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg2);color:var(--text2);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center}
.day-toggle.on{background:rgba(91,156,246,.15);border-color:var(--accent);color:var(--accent)}

/* ── EMPTY ── */
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:2.6rem;margin-bottom:12px;opacity:.4}
.empty-text{color:var(--text2);font-size:.95rem;font-weight:500}

/* ── TOAST ── */
.toast-container{position:fixed;bottom:90px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media(min-width:801px){.toast-container{bottom:24px}}
.toast{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:13px 18px;font-size:.9rem;font-weight:600;color:var(--text);animation:toastIn .28s ease,toastOut .28s ease 2.7s forwards;box-shadow:0 8px 32px rgba(0,0,0,.5);max-width:300px;pointer-events:auto}
.toast.success{border-color:rgba(91,156,246,.4);color:var(--accent)}
.toast.error{border-color:rgba(248,113,113,.4);color:var(--danger)}
.toast.warn{border-color:rgba(251,191,36,.4);color:var(--warn)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}

/* ── PWA INSTALL BANNER ── */
.install-banner{display:none;position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:400;background:var(--bg2);border:1px solid var(--accent);border-radius:18px;padding:18px 22px;box-shadow:0 8px 40px rgba(91,156,246,.2);max-width:400px;width:calc(100% - 32px);animation:bannerIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes bannerIn{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.95)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.install-banner.show{display:flex;align-items:center;gap:16px}
@media(min-width:801px){.install-banner{bottom:24px}}
.install-banner-icon{width:48px;height:48px;background:linear-gradient(135deg,#5b9cf6,#2563eb);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.install-banner-text{flex:1}
.install-banner-title{font-size:.95rem;font-weight:800;margin-bottom:3px}
.install-banner-sub{font-size:.78rem;color:var(--text2)}
.install-banner-actions{display:flex;gap:8px;flex-shrink:0}
.install-btn-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1.1rem;padding:4px}
.install-btn-x:hover{color:var(--danger)}

/* ── SITE CREDIT ── */
.site-credit{text-align:center;padding:28px 0 14px;color:var(--text3);font-size:.73rem;font-family:'JetBrains Mono',monospace;border-top:1px solid var(--border);margin-top:40px}

/* ── LOADER ── */
.loader{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text3)}
.loader svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MOBILE ── */
@media(max-width:640px){
  .auth-card{padding:24px}
  .section{padding:20px 0 110px}
  .stats-row{grid-template-columns:1fr 1fr;gap:12px}
  .stat-value{font-size:1.8rem}
  .card-body{padding:16px}
  .modal-body{padding:16px}
  .modal-footer{padding:14px 16px}
  .ref-specs{grid-template-columns:1fr}
  .two-col{gap:16px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOG PAGE — MOBILE CARD VIEW
═══════════════════════════════════════════════════════════════════════════ */

.log-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.log-toolbar select {
  min-width: 130px;
}

.log-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.view-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 6px 9px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.view-btn.active {
  background: var(--accent);
  color: #fff;
}
.view-btn:hover:not(.active) {
  background: var(--bg2);
  color: var(--text);
}

/* Day groups */
.log-day-group {
  margin-bottom: 24px;
}
.log-day-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 10px;
  padding-left: 2px;
}

/* Cards grid */
.log-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.log-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.log-card:active {
  transform: scale(.985);
  border-color: var(--accent);
}
@media (hover: hover) {
  .log-card:hover {
    border-color: var(--accent);
  }
}

.log-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.log-card-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}
.log-card-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--text3);
}
.log-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.log-card-detail {
  font-size: .78rem;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: 'JetBrains Mono', monospace;
}
.log-card-photo-badge {
  font-size: .75rem;
  color: var(--accent2, #f59e0b);
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 600;
}
.log-card-notes {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Table view wrapper (already has .log-table styles, just needs card wrap) */
#log-body > .card {
  overflow: hidden;
}

/* Responsive: wider cards on tablet+ */
@media (min-width: 600px) {
  .log-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (min-width: 960px) {
  .log-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTALL MODAL STEPS
═══════════════════════════════════════════════════════════════════════════ */
.install-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.install-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.install-step-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 4px;
  color: var(--text);
}
.install-step-desc {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.6;
}
.install-step-desc strong {
  color: var(--text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOG UPDATE THREAD
═══════════════════════════════════════════════════════════════════════════ */
.log-update-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px;
}
.log-update-entry {
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.log-update-meta {
  font-size: .72rem;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.log-update-del {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: .8rem;
  padding: 0 2px;
  line-height: 1;
}
.log-update-del:hover { color: var(--danger); }
.log-update-text {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ── MOBILE MENU ──────────────────────────────────────────────────────────── */
.header-desktop-only { display: flex; align-items: center; }
.mobile-menu-btn     { display: none; }

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s;
}
.mobile-menu-item:hover { background: var(--bg3); }

@media(max-width:800px) {
  .header-desktop-only { display: none !important; }
  .mobile-menu-btn     { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════════════════════ */
.dash-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}
.dash-left  { position: sticky; top: 80px; }
.dash-right { min-width: 0; }

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-left   { position: static; }
}

/* Peptide cards on dashboard */
.dash-peptide-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.dash-peptide-header  { margin-bottom: 10px; }
.dash-peptide-name    { font-size: 1rem; font-weight: 700; color: var(--text); }
.dash-peptide-sub     { font-size: .8rem; color: var(--text3); margin-top: 2px; }
.dash-peptide-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-peptide-info    { border-top: 1px solid var(--border); padding-top: 12px; }

.dash-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.dash-onhand {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  color: var(--text2);
}
.dash-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.dash-info-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 3px;
}
.dash-info-val { font-size: .85rem; color: var(--text2); }
.dash-inventory-row { margin-top: 4px; }
.dash-inventory-row input[type="number"] {
  width: 80px;
  padding: 6px 10px;
  font-size: .85rem;
}

/* Recent history rows */
.dash-history-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dash-history-row:last-child { border-bottom: none; }
.dash-history-name { font-weight: 600; font-size: .9rem; color: var(--text); margin-bottom: 2px; }
.dash-history-meta { font-size: .8rem; color: var(--text3); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — REFERENCE STYLE COMPONENTS
═══════════════════════════════════════════════════════════════════════════ */
.dash-mini-label {
  font-size: .72rem;
  color: var(--text3);
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Unit toggle buttons (ug/mcg/mg/tablet) */
.ip-unit-btn {
  padding: 5px 10px;
  font-size: .78rem;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
}
.ip-unit-btn:hover    { background: var(--bg2); }
.ip-unit-active,
.ip-unit-btn.ip-unit-active {
  outline: 2px solid rgba(91,156,246,.45);
  border-color: rgba(91,156,246,.55);
  background: var(--bg2);
  color: var(--text);
  font-weight: 700;
}

/* Peptide card top row */
.dash-peptide-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Inline tags (Next due, On hand) */
.dash-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  margin-right: 6px;
  margin-bottom: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
}

/* KV boxes (Schedule / Cycle) */
.dash-kv {
  padding: 10px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.dash-kv-k {
  font-size: .68rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  margin-bottom: 4px;
}
.dash-kv-v { font-size: .85rem; color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════════
   REFERENCE-STYLE DASHBOARD
═══════════════════════════════════════════════════════════════════════════ */
.ref-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .ref-grid { grid-template-columns: 1fr; } }

.ref-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.ref-h2 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text3);
  font-weight: 700;
  letter-spacing: .02em;
}
.ref-mini {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 4px;
}
.ref-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ref-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 600px) {
  .ref-row, .ref-row3 { grid-template-columns: 1fr; }
}

/* Unit toggle buttons */
.ref-unit-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ref-unit-btn {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
}
.ref-unit-btn:hover { background: var(--bg2); }
.ref-unit-active {
  outline: 2px solid rgba(91,156,246,.5);
  border-color: rgba(91,156,246,.6) !important;
  background: var(--bg2) !important;
  color: var(--text) !important;
  font-weight: 700;
}

/* Peptide cards */
.ref-peptide {
  border-radius: 14px;
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.ref-peptide-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ref-peptide-name { font-weight: 800; font-size: 16px; color: var(--text); }
.ref-sub { color: var(--text3); font-size: 12px; margin-top: 2px; }
.ref-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ref-hr { height: 1px; background: var(--border); margin: 10px 0; }

/* KV boxes */
.ref-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .ref-kvs { grid-template-columns: 1fr; } }
.ref-kv { padding: 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.ref-k { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ref-v { margin-top: 4px; font-size: 13px; color: var(--text2); }

/* Tags */
.ref-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
}

/* Buttons */
.ref-btn {
  padding: 7px 11px;
  font-size: 12px;
  border-radius: 9px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.ref-btn:hover { background: var(--bg3); }
.ref-btn-good   { background: rgba(91,156,246,.12); border-color: rgba(91,156,246,.3); color: var(--accent); }
.ref-btn-danger { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.25); color: var(--danger); }

/* History items */
.ref-hist-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  margin-bottom: 6px;
}
.ref-hist-item:hover { background: var(--bg3); }
.ref-notice { font-size: 12px; color: var(--text3); }

/* Collapsible toggle button */
.ref-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
}
.ref-collapsible-toggle:hover { background: var(--bg2); }
.ref-collapsible-toggle svg   { transition: transform .2s; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE PANEL
═══════════════════════════════════════════════════════════════════════════ */
#profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  backdrop-filter: blur(2px);
}
#profile-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 201;
  overflow-y: auto;
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}
#profile-panel.open { transform: translateX(0); }

.profile-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.profile-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.profile-close:hover { background: var(--bg3); color: var(--text); }

.profile-avatar-lg {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #5b9cf6, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--bg);
  flex-shrink: 0;
}
.profile-panel-name { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.profile-panel-user { font-size: .82rem; color: var(--text3); margin-top: 2px; }

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.profile-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.profile-stat-label { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.profile-stat-value { font-size: .95rem; font-weight: 700; color: var(--text); margin-top: 4px; }

.profile-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  margin-bottom: 10px;
}
.profile-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.profile-row input { flex: 1; }
.profile-msg {
  font-size: .82rem;
  margin-bottom: 8px;
  display: none;
}

/* Make user chip look clickable */
.user-chip:hover { opacity: 0.8; }
.user-chip { transition: opacity .15s; }

/* ═══════════════════════════════════════════════════════════════
   RECONSTITUTION EXPLAINER
═══════════════════════════════════════════════════════════════ */
.recon-explainer {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.recon-explainer-lead {
  font-size: .95rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 18px;
}
.recon-explainer-lead strong { color: var(--text); }
.recon-explainer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .recon-explainer-cols { grid-template-columns: 1fr; }
}
.recon-explainer-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.6;
}
.recon-explainer-item strong { color: var(--text); }
.recon-explainer-icon {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   VENDOR LOG
═══════════════════════════════════════════════════════════════ */
.vendor-group {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.vendor-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.vendor-group-name { font-weight: 800; font-size: 1rem; color: var(--text); }
.vendor-group-meta { font-size: .8rem; color: var(--text3); }

.vendor-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.vendor-row:last-child { border-bottom: none; }
.vendor-row-main { flex: 1; min-width: 0; }
.vendor-row-vendor { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 4px; }
.vendor-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .78rem;
  color: var(--text3);
}
.vendor-row-meta span {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.vendor-row-notes { font-size: .8rem; color: var(--text3); margin-top: 6px; line-height: 1.5; }
.vendor-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }