/* ============================================================
   THE SEALED VAULT — Commercial Build
   vault.css — Main App Shell, Navigation & Vault Panels
   © 2026 The Sealed Vault LLC
   ============================================================ */

/* ── Main App Shell ────────────────────────────────────────── */
#main-app {
  position: relative;
  z-index: var(--z-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── User Bar ──────────────────────────────────────────────── */
#user-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-above);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 24px;
  background: rgba(2,8,16,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gold-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.user-bar-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.user-bar-logo-img { width:32px; height:32px; border-radius:50%; filter:drop-shadow(0 0 6px rgba(212,168,67,0.3)); }
.user-bar-brand { font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:0.1em; color:var(--gold-lt); text-transform:uppercase; }
.user-bar-spacer { flex:1; }

.user-dot { width:8px; height:8px; border-radius:50%; background:#4caf50; box-shadow:0 0 8px rgba(76,175,80,0.8); flex-shrink:0; }
.user-email { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.user-plan-badge { padding:3px 10px; border-radius:var(--radius-full); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; flex-shrink:0; }
.plan-free       { background:rgba(143,168,204,0.1); border:1px solid var(--border);               color:var(--muted); }
.plan-lite       { background:rgba(76,175,80,0.1);   border:1px solid rgba(76,175,80,0.35);        color:#81c784; }
.plan-plus       { background:rgba(156,39,176,0.1);  border:1px solid rgba(156,39,176,0.35);       color:#ce93d8; }
.plan-pro        { background:var(--cyan-glow);      border:1px solid var(--cyan-border);          color:var(--cyan); }
.plan-family     { background:var(--gold-glow);      border:1px solid var(--gold-border);          color:var(--gold-lt); }
.plan-enterprise { background:rgba(212,168,67,0.2);  border:1px solid var(--gold);                 color:var(--gold-lt); }

.signout-btn { background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--muted); font-family:var(--font-mono); font-size:var(--fs-xs); padding:5px 12px; cursor:pointer; transition:all var(--transition); flex-shrink:0; }
.signout-btn:hover { border-color:var(--muted); color:var(--cream); }

/* ── Vault Wrapper ─────────────────────────────────────────── */
.vault-wrap { flex:1; width:100%; max-width:900px; margin:0 auto; padding:var(--space-xl) var(--space-lg) var(--space-3xl); }

/* ── App Header ────────────────────────────────────────────── */
.app-header { text-align:center; margin-bottom:var(--space-xl); }
.app-header img { width:64px; height:64px; border-radius:50%; filter:drop-shadow(0 0 20px rgba(212,168,67,0.4)); margin-bottom:var(--space-md); }
.app-title { font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:700; letter-spacing:0.15em; text-transform:uppercase; background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 50%,var(--gold-dim) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; }
.app-subtitle { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:0.2em; text-transform:uppercase; }

/* ── Main Tab Navigation ───────────────────────────────────── */
.main-tabs { display:grid; grid-template-columns:repeat(6,1fr); background:rgba(5,13,26,0.7); backdrop-filter:blur(12px); border:1px solid var(--gold-border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; }
.main-tab-btn { padding:13px 4px; background:transparent; border:none; border-right:1px solid var(--border); cursor:pointer; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); transition:all var(--transition); position:relative; white-space:nowrap; }
.main-tab-btn:last-child { border-right:none; }
.main-tab-btn:hover:not(.active) { background:rgba(255,255,255,0.04); color:var(--cream); }
.main-tab-btn.active { background:rgba(212,168,67,0.1); color:var(--gold-lt); }
.main-tab-btn.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

/* ── Panel Card ────────────────────────────────────────────── */
.panel-card { background:rgba(8,16,32,0.88); backdrop-filter:blur(20px); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:var(--space-xl); box-shadow:var(--shadow-card); }

/* ── Vault Card ────────────────────────────────────────────── */
.vault-card { background:rgba(11,20,42,0.6); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-lg); margin-bottom:var(--space-lg); }
.vault-card-title { font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--space-md); padding-bottom:var(--space-sm); border-bottom:1px solid var(--border-dim); display:flex; align-items:center; gap:8px; }

/* ── Field Rows ────────────────────────────────────────────── */
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); margin-bottom:var(--space-md); }
.field-row.trio { grid-template-columns:1fr 1fr 1fr; }
.field-row.single { grid-template-columns:1fr; }

/* ── Timelock Badge ────────────────────────────────────────── */
.timelock-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; background:rgba(139,26,26,0.3); border:1px solid rgba(192,57,43,0.5); border-radius:var(--radius-full); font-family:var(--font-mono); font-size:10px; font-weight:600; color:#f1948a; letter-spacing:0.08em; text-transform:uppercase; margin-left:8px; }

/* ── Emergency Section ─────────────────────────────────────── */
.emergency-toggle { display:flex; align-items:center; justify-content:space-between; padding:var(--space-md) var(--space-lg); background:rgba(139,26,26,0.08); border:1px solid rgba(192,57,43,0.2); border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition); margin-bottom:var(--space-sm); user-select:none; }
.emergency-toggle:hover { background:rgba(139,26,26,0.14); border-color:rgba(192,57,43,0.35); }
.emergency-toggle-label { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#f1948a; }
.emergency-toggle-arrow { color:var(--muted); font-size:var(--fs-sm); transition:transform var(--transition); }
.emergency-section { display:none; padding:var(--space-lg); background:rgba(139,26,26,0.06); border:1px solid rgba(192,57,43,0.2); border-top:none; border-radius:0 0 var(--radius-md) var(--radius-md); margin-bottom:var(--space-lg); }
.emergency-section.open { display:block; animation:fadeUp 0.2s ease both; }
.emergency-toggle.open .emergency-toggle-arrow { transform:rotate(180deg); }
.emergency-notice { padding:10px 14px; background:rgba(139,26,26,0.1); border:1px solid rgba(192,57,43,0.25); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--fs-xs); color:rgba(241,148,138,0.8); line-height:1.6; margin-bottom:var(--space-md); }

/* ── Attachment Zone ───────────────────────────────────────── */
.attach-drop-zone { border:2px dashed var(--border); border-radius:var(--radius-md); padding:var(--space-xl) var(--space-lg); text-align:center; cursor:pointer; transition:all var(--transition); position:relative; }
.attach-drop-zone:hover,.attach-drop-zone.drag-over { border-color:var(--gold); background:var(--gold-glow); }
.attach-drop-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.attach-drop-icon { font-size:2rem; margin-bottom:8px; display:block; }
.attach-drop-text { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); line-height:1.6; }
.attach-drop-text strong { color:var(--gold-lt); }
.attach-list { margin-top:var(--space-md); display:flex; flex-direction:column; gap:6px; }
.attach-item { display:flex; align-items:center; gap:10px; padding:8px 14px; background:rgba(11,20,42,0.6); border:1px solid var(--border); border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--fs-xs); }
.attach-item-name { flex:1; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-item-size { color:var(--muted); flex-shrink:0; }
.attach-item-remove { background:none; border:none; color:rgba(241,148,138,0.5); cursor:pointer; font-size:var(--fs-sm); padding:2px 6px; transition:color var(--transition); flex-shrink:0; }
.attach-item-remove:hover { color:#f1948a; }

/* ── Seal Button ───────────────────────────────────────────── */
.seal-btn { width:100%; padding:16px; background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dim) 100%); border:none; border-radius:var(--radius-md); color:var(--navy-deep); font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; transition:all var(--transition); position:relative; overflow:hidden; box-shadow:0 4px 20px rgba(212,168,67,0.25); }
.seal-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent); opacity:0; transition:opacity var(--transition); }
.seal-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(212,168,67,0.45); }
.seal-btn:hover::before { opacity:1; }
.seal-btn:disabled { opacity:0.5; transform:none; cursor:not-allowed; }

/* ── Open Panel ─────────────────────────────────────────────── */
.vault-list { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; padding-right:4px; margin-bottom:var(--space-lg); }
.vault-list-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-lg); background:rgba(11,20,42,0.5); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition); }
.vault-list-item:hover { background:rgba(11,20,42,0.8); border-color:var(--gold-border); }
.vault-list-item.selected { background:rgba(212,168,67,0.08); border-color:var(--gold); }
.vault-item-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:rgba(212,168,67,0.1); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.vault-item-info { flex:1; min-width:0; }
.vault-item-name { font-size:var(--fs-sm); font-weight:600; color:var(--cream); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vault-item-meta { font-family:var(--font-mono); font-size:10px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.status-dot.locked { background:#f1948a; box-shadow:0 0 5px rgba(241,148,138,0.5); }
.status-dot.unlocked { background:#58d5a8; box-shadow:0 0 5px rgba(88,213,168,0.5); }

/* ── Lock Status ───────────────────────────────────────────── */
.lock-status-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(11,20,42,0.5); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:var(--space-md); font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); }
.lock-countdown { font-weight:600; color:#f1948a; margin-left:auto; }
.lock-countdown.unlocked { color:#58d5a8; }

/* ── Conditions ────────────────────────────────────────────── */
.conditions-list { list-style:none; margin-bottom:var(--space-lg); }
.conditions-list li { display:flex; align-items:center; gap:10px; padding:7px 0; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted); border-bottom:1px solid var(--border-dim); }
.conditions-list li:last-child { border-bottom:none; }
.conditions-list li.met { color:#58d5a8; }

/* ── Revealed Content ──────────────────────────────────────── */
.revealed-content { display:none; animation:fadeUp 0.4s ease both; }
.revealed-content.show { display:block; }
.vault-divider { display:flex; align-items:center; gap:12px; margin:var(--space-lg) 0; font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-lt); }
.vault-divider::before,.vault-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-border),transparent); }
.vault-seal-icon { width:48px; height:48px; border-radius:50%; border:1px solid var(--gold-border); background:var(--gold-glow); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto var(--space-md); box-shadow:var(--shadow-gold); animation:pulse-gold 2s ease infinite; }
.message-box { background:rgba(5,13,26,0.6); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-lg); font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.8; color:var(--cream); white-space:pre-wrap; word-break:break-word; max-height:340px; overflow-y:auto; margin-bottom:var(--space-md); }

/* ── Vault Actions ─────────────────────────────────────────── */
.vault-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:var(--space-md); }
.vault-action-btn { padding:10px 14px; background:transparent; border-radius:var(--radius-md); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; letter-spacing:0.08em; cursor:pointer; transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border); color:var(--muted); }
.vault-action-btn:hover { background:rgba(255,255,255,0.04); color:var(--cream); }
.vault-action-btn.share { border-color:var(--cyan-border); color:var(--cyan); }
.vault-action-btn.share:hover { background:var(--cyan-glow); }
.vault-action-btn.reseal { border-color:var(--gold-border); color:var(--gold-lt); }
.vault-action-btn.reseal:hover { background:var(--gold-glow); }
.vault-action-btn.delete { border-color:rgba(192,57,43,0.3); color:#f1948a; }
.vault-action-btn.delete:hover { background:rgba(192,57,43,0.1); }

/* ── Upgrade Banner ────────────────────────────────────────── */
.upgrade-banner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:var(--space-md) var(--space-lg); background:var(--gold-glow); border:1px solid var(--gold-border); border-radius:var(--radius-md); margin-bottom:var(--space-lg); flex-wrap:wrap; }
.upgrade-banner-text { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--gold-lt); line-height:1.5; }
.upgrade-banner-text strong { color:var(--gold-lt); display:block; margin-bottom:2px; }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:640px) {
  .main-tabs { grid-template-columns:repeat(3,1fr); }
  .field-row,.field-row.trio { grid-template-columns:1fr; }
  .vault-actions { grid-template-columns:1fr; }
  .vault-wrap { padding:var(--space-lg) var(--space-md) var(--space-3xl); }
}
@media(max-width:480px) {
  .user-bar { padding:8px 16px; }
  .user-bar-brand { display:none; }
  .panel-card { padding:var(--space-lg); }
}

/* ════════════════════════════════════════════════════════════
   FAMILY PLAN STYLES
   ════════════════════════════════════════════════════════════ */

/* ── Family Button (in user bar) ──────────────────────────── */
.family-admin-btn {
  background: var(--gold-glow);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  color: var(--gold-lt);
  font-size: 16px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.family-admin-btn:hover {
  background: rgba(212,168,67,0.18);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(212,168,67,0.3);
}

/* ── Family Invite Banner (top of main app) ───────────────── */
.family-invite-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 900px;
  padding: 14px 22px;
  background: linear-gradient(180deg,
    rgba(212,168,67,0.08) 0%,
    rgba(212,168,67,0.04) 100%);
  border: 1px solid var(--gold-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 2px 12px rgba(212,168,67,0.1);
}
.family-invite-banner-icon {
  font-size: 20px;
  color: var(--gold-lt);
  flex-shrink: 0;
}
.family-invite-banner-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--cream);
  line-height: 1.4;
  min-width: 200px;
}
.family-invite-banner-text strong {
  color: var(--gold-lt);
  font-weight: 700;
}
.family-invite-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.family-invite-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid;
}
.family-invite-btn-accept {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  border-color: var(--gold);
  color: #020810;
}
.family-invite-btn-accept:hover { box-shadow: 0 0 14px rgba(212,168,67,0.5); }
.family-invite-btn-decline {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.family-invite-btn-decline:hover {
  border-color: var(--muted);
  color: var(--cream);
}
.family-invite-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Family Panel Overlay & Modal ─────────────────────────── */
.family-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-above);
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.family-panel {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a1628 0%, #050d1a 100%);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 168, 67, 0.12);
  overflow: hidden;
}

.family-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--gold-border);
  background: rgba(212, 168, 67, 0.04);
}
.family-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 4px;
}
.family-panel-subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Family Panel Tabs ────────────────────────────────────── */
.family-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(5, 13, 26, 0.6);
}
.family-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--transition);
}
.family-tab-btn:hover { color: var(--cream); }
.family-tab-btn.active {
  color: var(--gold-lt);
  border-bottom-color: var(--gold);
  background: var(--gold-glow);
}

/* ── Family Panel Body ────────────────────────────────────── */
.family-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px;
}
.family-tab-pane { display: none; }
.family-tab-pane[style*="display:block"],
.family-tab-pane[style*="display: block"] { display: block; }

/* ── Family Sections ──────────────────────────────────────── */
.family-section {
  margin-bottom: var(--space-lg);
}
.family-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.family-section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.family-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ── Family Member / Invite Rows ──────────────────────────── */
.family-list { display: flex; flex-direction: column; gap: 8px; }
.family-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(2, 8, 16, 0.55);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.family-row:hover { border-color: var(--border); }
.family-row-pending { background: rgba(212, 168, 67, 0.04); }

.family-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-dim) 0%, #5a4218 100%);
  color: #020810;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.family-row-avatar-pending {
  background: rgba(143, 168, 204, 0.12);
  color: var(--muted);
  border: 1px dashed var(--border);
}

.family-row-main { flex: 1; min-width: 0; overflow: hidden; }
.family-row-email {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.family-row-you {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold-lt);
  letter-spacing: 0.06em;
}
.family-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.family-row-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}

/* ── Role Badges ──────────────────────────────────────────── */
.family-role-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
}
.family-role-admin {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold-lt);
}
.family-role-member {
  background: rgba(143, 168, 204, 0.08);
  border-color: var(--border);
  color: var(--muted);
}
.family-role-pending {
  background: rgba(212, 168, 67, 0.06);
  border-color: var(--gold-border);
  color: var(--gold-dim);
}

/* ── Row Action Buttons ───────────────────────────────────── */
.family-row-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.family-row-btn:hover {
  border-color: var(--cream);
  color: var(--cream);
}
.family-row-btn-danger {
  border-color: rgba(192, 57, 43, 0.4);
  color: #f1948a;
}
.family-row-btn-danger:hover {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.1);
  color: #f1948a;
}

.family-pending-empty {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--border-dim);
  border-radius: var(--radius-md);
}

.family-full-msg {
  padding: 12px 16px;
  background: rgba(230, 126, 34, 0.08);
  border: 1px solid rgba(230, 126, 34, 0.3);
  border-radius: var(--radius-md);
  color: #e67e22;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}

/* ── Invite Form ──────────────────────────────────────────── */
.family-invite-form { /* reuse .family-section spacing */ }
.family-invite-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.family-input {
  flex: 1;
  min-width: 200px;
  background: rgba(2, 8, 16, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: 10px 14px;
  transition: border-color var(--transition);
}
.family-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.family-action-btn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  color: #020810;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.family-action-btn:hover { box-shadow: 0 0 14px rgba(212, 168, 67, 0.5); }

/* ── Status Line ──────────────────────────────────────────── */
.family-status {
  margin-top: var(--space-md);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.family-status-loading {
  background: rgba(0, 180, 216, 0.08);
  border: 1px solid var(--cyan-border);
  color: var(--cyan);
}
.family-status-success {
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #81c784;
}
.family-status-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #f1948a;
}

/* ── Vaults Tab ───────────────────────────────────────────── */
.family-vaults-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.family-vault-card {
  padding: 14px 16px;
  background: rgba(2, 8, 16, 0.55);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.family-vault-card:hover { border-color: var(--gold-border); }
.family-vault-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.family-vault-card-name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cream);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.family-vault-card-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
  flex-shrink: 0;
}
.family-vault-status-unlocked {
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.4);
  color: #81c784;
}
.family-vault-status-sealed {
  background: var(--gold-glow);
  border-color: var(--gold-border);
  color: var(--gold-lt);
}
.family-vault-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.family-vault-card-id {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.family-vaults-loading,
.family-vaults-empty,
.family-vaults-error {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-dim);
  color: var(--muted);
}
.family-vaults-error { border-color: rgba(192, 57, 43, 0.3); color: #f1948a; }
.family-vaults-member-only {
  padding: 24px;
  background: rgba(2, 8, 16, 0.55);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--cream);
  line-height: 1.6;
  text-align: center;
}

/* ── Settings Tab ─────────────────────────────────────────── */
.family-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.family-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(2, 8, 16, 0.4);
}
.family-settings-row:last-of-type { border-bottom: none; }
.family-settings-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.family-settings-value {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--cream);
  text-align: right;
  word-break: break-word;
}
.family-settings-note {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
  background: rgba(212, 168, 67, 0.04);
  border-top: 1px solid var(--border-dim);
}

/* ── Mobile Adjustments ───────────────────────────────────── */
@media (max-width: 540px) {
  .family-panel { max-height: 100vh; height: 100vh; border-radius: 0; }
  .family-panel-header { padding: 16px 18px; }
  .family-panel-body   { padding: 16px 18px; }
  .family-panel-tabs   { overflow-x: auto; }
  .family-tab-btn      { white-space: nowrap; padding: 12px 14px; }
  .family-row-btn      { padding: 6px 10px; }
  .family-invite-row   { flex-direction: column; }
  .family-action-btn   { width: 100%; }
  .family-invite-banner { border-radius: 0; }
  .family-settings-row { flex-direction: column; align-items: flex-start; }
  .family-settings-value { text-align: left; }
}

/* ════════════════════════════════════════════════════════════
   EMERGENCY OVERRIDE CARD (Seal Tab) — "Second Key" Treatment
   Visually emphasized so users don't skip past it.
   ════════════════════════════════════════════════════════════ */

.vault-card-emergency {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(212,168,67,0.07) 0%,
      rgba(212,168,67,0.025) 100%),
    rgba(2,8,16,0.55);
  border: 1px solid var(--gold-border);
  box-shadow:
    0 0 22px rgba(212,168,67,0.14),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Decorative left-edge accent — runs the height of the card */
.vault-card-emergency::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--gold-lt) 0%,
    var(--gold) 50%,
    var(--gold-dim) 100%);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: 0 0 8px var(--gold-glow);
}

.vault-card-emergency .vault-card-title {
  color: var(--gold-lt);
}
.vault-card-emergency .vault-card-title .icon {
  filter: drop-shadow(0 0 4px rgba(212,168,67,0.55));
}

.emergency-required-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #c0392b 0%, #8e2820 100%);
  color: #fff;
  border: 1px solid #c0392b;
  box-shadow: 0 0 10px rgba(192,57,43,0.45);
  animation: emergencyBadgePulse 2.6s ease-in-out infinite;
}

@keyframes emergencyBadgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(192,57,43,0.45); }
  50%      { box-shadow: 0 0 18px rgba(192,57,43,0.75); }
}

.emergency-card-notice {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--cream);
  padding: 12px 14px 12px 16px;
  background: rgba(2,8,16,0.55);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.emergency-card-notice strong {
  color: var(--gold-lt);
  font-weight: 700;
}
.emergency-card-notice em {
  color: var(--gold-dim);
  font-style: italic;
}

/* Required asterisk on labels */
.form-label-req {
  color: #f1948a;
  font-weight: 700;
  margin-left: 3px;
  font-size: 1.05em;
}

/* Inputs inside the emergency card — gold-tinted edge to reinforce theme */
.form-input-emergency {
  border-color: var(--gold-border);
  background: rgba(2,8,16,0.65);
}
.form-input-emergency:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.form-input-emergency::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════
   EMAIL VERIFICATION SCREEN — Status Message
   ════════════════════════════════════════════════════════════ */
.verification-msg {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  min-height: 0;
  display: none;
}
.verification-msg-success {
  display: block;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #81c784;
}
.verification-msg-error {
  display: block;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #f1948a;
}

/* ════════════════════════════════════════════════════════════
   PASSPHRASE REQUIREMENTS CHECKLIST
   Live indicators next to passphrase fields. Items turn from
   gray (unsatisfied) to green (satisfied) as the user types.
   Enforced gates: registration, vault seal, vault reseal.
   ════════════════════════════════════════════════════════════ */
.pass-requirements {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.pass-requirements li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  transition: color var(--transition);
}
.pass-requirements .req-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.pass-requirements .req-unsatisfied {
  color: var(--muted);
}
.pass-requirements .req-unsatisfied .req-mark {
  background: rgba(143, 168, 204, 0.08);
  color: var(--muted);
  border: 1px solid var(--border-dim);
}
.pass-requirements .req-satisfied {
  color: #81c784;
}
.pass-requirements .req-satisfied .req-mark {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.4);
}