:root {
  --bg: #0b0f19; --card: #151d30; --border: #24324f;
  --text: #f1f5f9; --sub: #94a3b8; --pri: #2563eb; --pri-h: #1d4ed8;
  --success-bg: #064e3b; --success-border: #059669; --success-text: #34d399;
  --danger-bg: #4c0519; --danger-border: #e11d48; --danger-text: #fda4af;
  --warn-bg: #451a03; --warn-border: #d97706; --warn-text: #fbbf24;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 1.5rem 1rem; }
.vault-container { background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 740px; padding: 1.5rem; box-shadow: 0 15px 35px rgba(0,0,0,0.6); }

h1 { font-size: 1.25rem; font-weight: 700; }
p.sub { font-size: 0.75rem; color: var(--sub); margin-top: 0.25rem; margin-bottom: 1rem; }

.header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.lang-switch { display: flex; gap: 0.4rem; align-items: center; }
.session-status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-size: 0.7rem; color: var(--sub); }
.btn-text-sub { background: none; border: none; color: var(--sub); cursor: pointer; font-size: 0.7rem; }

/* 🏛️ 法規合規橫額樣式 */
.compliance-banner {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.compliance-banner:hover {
  border-color: #38bdf8;
  background: rgba(30, 41, 59, 0.95);
}
.compliance-badge-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.c-badge {
  font-size: 0.65rem;
  color: #94a3b8;
  background: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #1e293b;
}
.compliance-detail-link {
  font-size: 0.68rem;
  color: #38bdf8;
  text-decoration: underline;
  font-weight: 600;
}
.compliance-modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

/* 💡 家人指引 */
.guide-box { background: #1e293b; border: 1px solid #38bdf8; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; }
.guide-title { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 700; color: #38bdf8; }
.guide-content { margin-top: 0.5rem; font-size: 0.75rem; color: #cbd5e1; display: flex; flex-direction: column; gap: 0.4rem; }
.guide-step { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; }
.step-num { background: #0284c7; color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; justify-content: center; align-items: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }

.panel { border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem; border: 1px solid; }
.tier-public { background: var(--success-bg); border-color: var(--success-border); color: #ecfdf5; }
.tier-secret { background: #181b2a; border-color: var(--border); }

.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.panel-head h2 { font-size: 0.9rem; font-weight: 700; }
.tier-secret .panel-head h2 { color: #f87171; }

.badge { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase; }
.badge-green { background: #059669; color: white; }
.badge-red { background: #e11d48; color: white; }

.empty-hint { font-size: 0.8rem; color: #a7f3d0; font-style: italic; }
.disclaimer-text { font-size: 0.68rem; color: #a7f3d0; margin-top: 0.6rem; line-height: 1.4; }

.item-card { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.card-label { color: #93c5fd; font-weight: 600; }
.val-text { font-size: 0.85rem; margin: 0.25rem 0; }
.pre-wrap { white-space: pre-wrap; }
.tel-link { color: #38bdf8; text-decoration: none; font-weight: 600; }
.tel-link:hover { text-decoration: underline; }

label { display: block; font-size: 0.75rem; color: var(--sub); margin-bottom: 0.35rem; }
input, textarea, select { width: 100%; background: #0b0f19; border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 0.6rem; font-size: 0.85rem; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--pri); }
.mono-input { font-family: monospace; }

.btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
button { flex: 1; min-width: 120px; padding: 0.65rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; border: none; transition: 0.2s; }
.btn-sm { min-width: 40px; padding: 4px 8px; font-size: 0.75rem; }
.btn-pri { background: var(--pri); color: white; }
.btn-pri:hover { background: var(--pri-h); }
.btn-sec { background: #24324f; color: var(--text); }
.btn-sec:hover { background: #334469; }

.error-msg { font-size: 0.75rem; color: #f87171; margin-top: 0.5rem; display: none; }
.toolbar { border-top: 1px solid var(--border); padding-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.hidden { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; padding: 1rem; z-index: 50; }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto; padding: 1.5rem; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-header h2 { font-size: 1.1rem; font-weight: 700; }
.btn-close { background: none; border: none; color: var(--sub); font-size: 1.25rem; cursor: pointer; }

.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-row { display: flex; gap: 0.5rem; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.w-full { width: 100%; }
.my-sm { margin: 0.5rem 0; }
.mb-sm { margin-bottom: 0.5rem; }
.mt-sm { margin-top: 0.5rem; }

.border-blue { border-color: #38bdf8; }
.border-green { border-color: #34d399; }
.border-red { border-color: #f87171; }
.label-blue { color: #38bdf8; font-weight: 600; margin: 0; }
.label-green { color: #34d399; font-weight: 600; }
.label-red { color: #f87171; font-weight: 600; }
.label-yellow { color: #fbbf24; font-weight: 600; }

.card-hint { font-size: 0.72rem; color: var(--sub); line-height: 1.4; }
.custom-insurer-box { background: #0b0f19; padding: 0.5rem; border-radius: 6px; margin-bottom: 0.5rem; }
.items-list { margin-top: 0.75rem; max-height: 140px; overflow-y: auto; }
.hint-card-box { border-top: 1px dashed var(--border); padding-top: 0.6rem; margin-top: 0.6rem; }