:root {
  --system-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(30px);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  --line-color: #86868b;
  --text-main: #1d1d1f;
  --text-muted: #86868b;
  --accent: #0071e3;
  --danger: #ff3b30;

  /* 7 Generation Palette */
  --gen-1: #0071e3; --gen-2: #34c759; --gen-3: #ffcc00; 
  --gen-4: #ff9500; --gen-5: #ff3b30; --gen-6: #af52de; --gen-7: #5856d6;
}

body, html { margin: 0; padding: 0; font-family: var(--system-font); color: var(--text-main); height: 100vh; overflow: hidden; background: #f5f5f7; }

/* Fluid Ambient Background */
.ambient-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.blur-spot { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.55; }
.spot-1 { top: -10%; left: 10%; width: 500px; height: 500px; background: #ffc5e3; animation: float 20s infinite ease-in-out; }
.spot-2 { bottom: -10%; right: 15%; width: 600px; height: 600px; background: #c5e3ff; animation: float 25s infinite ease-in-out reverse; }
.spot-3 { top: 40%; left: 40%; width: 450px; height: 450px; background: #e3ffd5; animation: float 22s infinite ease-in-out; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -30px); } }

.glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }

/* Navigation Grid Alignment */
.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; margin: 16px; border-radius: 16px; position: relative; z-index: 100; animation: hueRotate 20s infinite linear; }
@keyframes hueRotate { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.brand { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.5px; width: 200px; display: flex; align-items: center; }
.controls-center { display: flex; gap: 10px; justify-content: center; align-items: center; }
.nav-group-right { width: 200px; display: flex; justify-content: flex-end; align-items: center; }

/* Buttons & Forms */
.glass-btn { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0,0,0,0.1); color: var(--text-main); padding: 8px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.glass-btn:hover { background: #fff; transform: translateY(-1px); }
.primary-btn { background: var(--accent); color: #fff; border: none; }
.primary-btn:hover { background: #0077ed; }
.danger-btn { background: rgba(255, 59, 48, 0.1); color: var(--danger); }
.danger-btn:hover { background: rgba(255, 59, 48, 0.2); }

/* Mathematically Centered Dropdown Button Component */
.dropdown-container { position: relative; }
.view-trigger { 
  position: relative;
  width: 160px; 
  padding-left: 24px;
  padding-right: 24px;
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  box-sizing: border-box;
}
.trigger-text {
  text-align: center;
  width: 100%;
}
.dropdown-arrow { 
  position: absolute;
  right: 14px;
  font-size: 0.8rem; 
  color: var(--text-muted); 
  pointer-events: none;
}
.dropdown-menu { position: absolute; top: 110%; right: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: 0.2s; box-sizing: border-box; }
.dropdown-menu.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-link { text-align: left; background: transparent; border: none; padding: 10px; border-radius: 8px; cursor: pointer; color: var(--text-muted); font-weight: 500; width: 100%; }
.nav-link:hover { color: var(--text-main); background: rgba(0,0,0,0.02); }
.nav-link.active { background: #fff; color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* Workspace & Viewports */
.workspace { height: calc(100vh - 95px); padding: 0 16px 16px 16px; box-sizing: border-box; }
.view-panel { display: none; width: 100%; height: 100%; }
.view-panel.active { display: block; }
.content-card-container { height: calc(100% - 40px); padding: 24px; border-radius: 20px; overflow-y: auto; }

/* Tree Canvas & Legend */
.tree-container { width: 100%; height: 100%; border-radius: 20px; position: relative; padding: 20px; overflow: auto; cursor: grab; box-sizing: border-box; }
.tree-container:active { cursor: grabbing; }
.tree-canvas { width: max-content; min-width: 100%; min-height: 100%; padding: 40px; transform-origin: top center; transition: transform 0.1s; box-sizing: border-box; }
.empty-state-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--text-muted); }

.tree-legend { position: absolute; top: 20px; left: 20px; padding: 12px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; }
.leg-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.gen-1-bg { background-color: var(--gen-1); } .gen-2-bg { background-color: var(--gen-2); }
.gen-3-bg { background-color: var(--gen-3); } .gen-4-bg { background-color: var(--gen-4); }
.gen-5-bg { background-color: var(--gen-5); } .gen-6-bg { background-color: var(--gen-6); }
.gen-7-bg { background-color: var(--gen-7); }

.zoom-controls { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; z-index: 50; border-radius: 12px; overflow: hidden; padding: 4px; gap: 2px;}
.zoom-controls button { background: transparent; border: none; width: 36px; height: 36px; font-size: 1.2rem; cursor: pointer; border-radius: 8px;}
.zoom-controls button:hover { background: rgba(0,0,0,0.05); }

/* =========================================================
   THE FLEXBOX LINEAGE ENGINE (Optimized)
   ========================================================= */
.tree-structure ul { display: flex; justify-content: center; padding-top: 30px; position: relative; list-style: none; margin: 0; padding-left: 0; }
.tree-structure li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 30px 10px 0 10px; }

/* Horizontal connecting lines between siblings */
.tree-structure li::before, .tree-structure li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--line-color); width: 50%; height: 30px; }
.tree-structure li::after { right: auto; left: 50%; border-left: 2px solid var(--line-color); }
.tree-structure li:only-child::after, .tree-structure li:only-child::before { display: none; }
.tree-structure li:only-child { padding-top: 0; }
.tree-structure li:first-child::before, .tree-structure li:last-child::after { border: 0 none; }
.tree-structure li:last-child::before { border-right: 2px solid var(--line-color); border-radius: 0 8px 0 0; }
.tree-structure li:first-child::after { border-radius: 8px 0 0 0; }

/* Drop line from parent couple to children */
.tree-structure ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--line-color); width: 0; height: 30px; transform: translateX(-50%); }

/* Couple Grouping */
.couple-wrapper { display: flex; justify-content: center; gap: 24px; position: relative; z-index: 10; margin-bottom: 0px; }
/* The Marriage Line */
.couple-wrapper.has-spouse::after { content: ''; position: absolute; top: 50%; left: 40px; right: 40px; height: 2px; background: var(--line-color); z-index: -1; }

/* Member Cards */
.member-card { padding: 12px; border-radius: 12px; width: 140px; background: rgba(255,255,255,0.85); display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,1); box-shadow: 0 4px 15px rgba(0,0,0,0.05); cursor: pointer; transition: 0.2s; position: relative; }
.member-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--accent); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: white; }
.name { font-size: 0.85rem; font-weight: 700; text-align: center; line-height: 1.2; word-wrap: break-word; }
.dates { font-size: 0.7rem; color: var(--text-muted); }

/* Dynamic Gen Colors */
.gen-1 { border-top: 4px solid var(--gen-1); } .gen-1 .avatar { background: var(--gen-1); }
.gen-2 { border-top: 4px solid var(--gen-2); } .gen-2 .avatar { background: var(--gen-2); }
.gen-3 { border-top: 4px solid var(--gen-3); } .gen-3 .avatar { background: var(--gen-3); }
.gen-4 { border-top: 4px solid var(--gen-4); } .gen-4 .avatar { background: var(--gen-4); }
.gen-5 { border-top: 4px solid var(--gen-5); } .gen-5 .avatar { background: var(--gen-5); }
.gen-6 { border-top: 4px solid var(--gen-6); } .gen-6 .avatar { background: var(--gen-6); }
.gen-7 { border-top: 4px solid var(--gen-7); } .gen-7 .avatar { background: var(--gen-7); }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.active { display: flex; animation: fadeIn 0.2s; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.modal-content { width: 90%; max-width: 420px; padding: 24px; border-radius: 20px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { margin: 0; font-size: 1.2rem; }
.close-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; gap: 12px; }
.half { flex: 1; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: #555; }
.glass-input { background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.1); padding: 10px 12px; border-radius: 10px; font-family: inherit; font-size: 0.95rem; outline: none; transition: 0.2s; width: 100%; box-sizing: border-box;}
.glass-input:focus { background: rgba(255,255,255,1); border-color: var(--accent); }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.hidden { display: none !important; }