:root {
  color-scheme: light;
  --primary: #1e6684;
  --primary-dark: #123d55;
  --secondary: #9ed8e9;
  --secondary-strong: #4ba7c4;
  --bg: #f4f9fb;
  --panel: #ffffff;
  --ink: #203040;
  --muted: #667987;
  --line: #d8e9ef;
  --accent: #197db0;
  --accent-strong: #0e5c83;
  --warm: #f4a261;
  --shadow: 0 4px 20px rgba(24, 76, 102, 0.12);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(62% 48% at 12% 8%, rgba(158, 216, 233, 0.28) 0%, rgba(158, 216, 233, 0) 70%),
    radial-gradient(52% 42% at 86% 14%, rgba(244, 162, 97, 0.13) 0%, rgba(244, 162, 97, 0) 72%),
    linear-gradient(165deg, #f4fbfd 0%, #eaf6fa 46%, #f8fbfc 100%);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button,
.file-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 50px;
  padding: 9px 12px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}

button:hover,
.file-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.app-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 64%, #1f7896 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(18, 61, 85, 0.24);
}

.header-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 86px;
  border-radius: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.back-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(18, 61, 85, 0.22);
}

.sidebar-back {
  width: 100%;
  margin-top: 4px;
  border-color: rgba(30, 102, 132, 0.18);
  color: var(--primary-dark);
  background: #fff;
  box-shadow: var(--shadow);
}

.sidebar-back:hover {
  color: var(--primary-dark);
  background: #f4fbfd;
}

.app-header h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
  font-weight: 800;
}

.app-header p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.app-header .database-date {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.header-actions button,
.header-actions .file-button {
  width: 190px;
  flex: 0 0 190px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50px;
  margin: 0;
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(18, 61, 85, 0.22);
}

#krapfLoadButton {
  background: linear-gradient(135deg, #2a89b6 0%, #9ed8e9 100%);
  color: #0f3447;
}

.header-actions .file-button {
  background: linear-gradient(135deg, #256fb2 0%, #8fc7ff 100%);
  color: #0e3658;
}

.header-actions button:hover,
.header-actions .file-button:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.file-button input {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  height: calc(100vh - 78px);
  min-height: 560px;
}

.sidebar {
  border-right: 1px solid rgba(30, 102, 132, 0.16);
  background: rgba(234, 246, 250, 0.78);
  overflow: auto;
  padding: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--primary-dark);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-title-row h2 {
  margin: 0;
}

.panel-action-button {
  min-width: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border-color: rgba(30, 102, 132, 0.2);
  background: #f4fbfd;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.panel-action-button:hover,
.panel-action-button.active {
  border-color: #d28a15;
  background: linear-gradient(135deg, #ffe4a8 0%, #f4a261 100%);
  color: #44240a;
  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.24), 0 8px 18px rgba(179, 100, 20, 0.22);
}

.panel-action-button.active {
  animation: activePulse 1.8s ease-in-out infinite;
}

.home-view-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(30, 102, 132, 0.2);
  background: #f4fbfd;
  color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.home-view-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-view-button:hover {
  border-color: var(--secondary-strong);
  background: linear-gradient(135deg, #e7f7fb 0%, #d5eef7 100%);
  color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24, 76, 102, 0.16);
}

@keyframes activePulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

label:not(.file-button) {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  background: #fbfdff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

input[type="search"]:focus {
  border-color: var(--secondary-strong);
  box-shadow: 0 0 0 4px rgba(75, 167, 196, 0.16);
}

#searchButton {
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary-strong) 100%);
  color: #fff;
  border: 0;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(25, 125, 176, 0.20);
}

#searchButton:hover {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  color: #fff;
}

.hint,
.empty {
  color: var(--muted);
  font-size: 13px;
}

.results {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.result-item {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(24, 76, 102, 0.08);
}

.result-item strong {
  display: block;
  margin-bottom: 2px;
}

.result-item span,
.details span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.details {
  display: grid;
  gap: 7px;
}

.life-events {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.life-events-title {
  color: var(--primary-dark);
  font-weight: 800;
}

.life-events ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-events li {
  border-left: 3px solid var(--secondary-strong);
  padding-left: 9px;
}

.life-events li strong,
.life-events li span {
  display: block;
}

.viewer-wrap {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px;
  gap: 0;
}

.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(24, 76, 102, 0.10);
}

.viewer-toolbar > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.viewer-title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ancestry-side-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewer-toolbar button {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #f8fcfd;
}

.viewer-toolbar .line-side-button {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.viewer-toolbar .line-side-button.paternal {
  border-color: #b9dcf4;
  background: #eef8ff;
  color: #15577f;
}

.viewer-toolbar .line-side-button.maternal {
  border-color: #dbc3ee;
  background: #f8f0ff;
  color: #7a3ba5;
}

.viewer-toolbar .line-side-button.paternal.active {
  border-color: #73b9e6;
  background: linear-gradient(135deg, #eef8ff 0%, #bfe4fb 100%);
  box-shadow: 0 0 0 3px rgba(115, 185, 230, 0.25), 0 8px 18px rgba(60, 130, 180, 0.18);
}

.viewer-toolbar .line-side-button.maternal.active {
  border-color: #b98add;
  background: linear-gradient(135deg, #f8f0ff 0%, #e1c4f5 100%);
  box-shadow: 0 0 0 3px rgba(185, 138, 221, 0.24), 0 8px 18px rgba(126, 60, 166, 0.18);
}

.viewer-toolbar .standard-view-button {
  min-width: 132px;
  margin-right: 6px;
  font-weight: 800;
}

.viewer-toolbar .standard-view-button.active {
  border-color: var(--secondary-strong);
  background: linear-gradient(135deg, #e7f7fb 0%, #d5eef7 100%);
  color: var(--accent-strong);
}

.viewer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(30, 102, 132, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(30, 102, 132, 0.07) 1px, transparent 1px),
    linear-gradient(165deg, #f8fdff 0%, #edf8fb 100%);
  background-size: 28px 28px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}

.edge-layer {
  position: absolute;
  left: -2400px;
  top: -1600px;
  width: 4800px;
  height: 3200px;
  pointer-events: none;
  overflow: visible;
}

.person-card {
  position: absolute;
  width: 190px;
  height: 112px;
  border: 1px solid #c7e5ee;
  border-left: 5px solid var(--secondary-strong);
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.person-card.sex-male {
  background: #eef8ff;
  border-color: #b9dcf4;
  border-left-color: #73b9e6;
}

.person-card.sex-female {
  background: #f8f0ff;
  border-color: #dbc3ee;
  border-left-color: #b98add;
}

.person-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(24, 76, 102, 0.16);
}

.person-card.center {
  border-left-color: var(--warm);
  outline: 3px solid rgba(244, 162, 97, 0.28);
}

.person-card strong {
  display: block;
  line-height: 1.22;
  margin-bottom: 5px;
}

.person-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.person-card.privacy-blurred .person-card-content {
  filter: blur(5px);
  opacity: .62;
  user-select: none;
}

.person-card.privacy-blurred::after {
  content: "Datenschutz";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(24, 76, 102, .16);
  pointer-events: none;
}

.person-card .birth-line,
.person-card .death-line,
.result-item .birth-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.birth-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(21, 32, 51, 0.22);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(18, 32, 51, 0.12);
  vertical-align: -2px;
}

.flag-de {
  background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%);
}

.flag-ch {
  background:
    linear-gradient(90deg, transparent 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    #d52b1e;
}

.flag-at {
  background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%);
}

.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

.flag-it {
  background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%);
}

.flag-es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.flag-nl {
  background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%);
}

.flag-pl {
  background: linear-gradient(#fff 0 50%, #dc143c 50%);
}

.flag-cz {
  background:
    linear-gradient(146deg, #11457e 0 38%, transparent 38%),
    linear-gradient(#fff 0 50%, #d7141a 50%);
}

.flag-ru {
  background: linear-gradient(#fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%);
}

.flag-us {
  background:
    linear-gradient(#b22234 0 7.69%, #fff 7.69% 15.38%, #b22234 15.38% 23.07%, #fff 23.07% 30.76%, #b22234 30.76% 38.45%, #fff 38.45% 46.14%, #b22234 46.14% 53.83%, #fff 53.83% 61.52%, #b22234 61.52% 69.21%, #fff 69.21% 76.9%, #b22234 76.9% 84.59%, #fff 84.59% 92.28%, #b22234 92.28%),
    linear-gradient(#3c3b6e, #3c3b6e);
  background-size: 100% 100%, 40% 54%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
}

.flag-gb {
  background:
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 41%, #c8102e 41% 59%, transparent 59%),
    #012169;
}

.flag-ca {
  background: linear-gradient(90deg, #d80621 0 25%, #fff 25% 75%, #d80621 75%);
}

.flag-au {
  background: #012169;
}

.generation-label {
  position: absolute;
  width: 190px;
  text-align: center;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  color: var(--primary-dark);
  font-size: 20px;
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  .app-header {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .header-title-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc(100vh - 122px);
  }

  .sidebar {
    max-height: 320px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .viewer-wrap {
    padding: 14px;
  }
}