/* ============================================================
BEZEICHNUNG: GRID IV TREE OF LIFE CSS
BESCHREIBUNG: GOLD Grid IV Styling 901-975 Tree of Life
UPDATE: 001
DATUM: 2026-05-28
============================================================ */

:root{
  --bg:#f7fbff;
  --ink:#10243f;
  --muted:#60738f;
  --line:#d7e2f0;
  --card:#ffffff;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.g4-shell{
  max-width:1320px;
  margin:0 auto;
  padding:18px;
}

.g4-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 8px 24px rgba(20,50,90,.08);
}

.g4-header h1{
  margin:0 0 6px;
  font-size:30px;
  letter-spacing:.04em;
}

.g4-header p{
  margin:0;
  color:var(--muted);
}

.g4-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.g4-nav a{
  text-decoration:none;
  color:#fff;
  background:#174f96;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  white-space:nowrap;
}

.g4-tools{
  margin:16px 0;
  display:flex;
  gap:14px;
  align-items:center;
}

#g4Search{
  width:min(520px,100%);
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:16px;
}

#g4Status{
  color:var(--muted);
  font-size:14px;
}

.g4-grid{
  display:grid;
  grid-template-columns:repeat(10, minmax(98px, 1fr));
  gap:10px;
}

.g4-card{
  min-height:118px;
  padding:10px;
  border-radius:16px;
  background:var(--card);
  border:2px solid #bcd0e8;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 4px 14px rgba(20,50,90,.08);
  transition:transform .12s ease, box-shadow .12s ease;
}

.g4-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(20,50,90,.15);
}

.g4-id{
  font-size:24px;
  font-weight:900;
}

.g4-title{
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}

.g4-meta{
  margin-top:6px;
  font-size:10px;
  color:var(--muted);
  line-height:1.2;
}

.g4-amount{
  margin-top:8px;
  font-size:11px;
  font-weight:700;
  color:#344963;
}

.directory{
  background:#0b376f;
  color:#fff;
  border-color:#0b376f;
}

.directory .g4-meta,
.directory .g4-amount{
  color:#dcecff;
}

.theme-1{border-color:#2087c7;background:#eef8ff}
.theme-2{border-color:#46a85a;background:#effaf1}
.theme-3{border-color:#e3ac10;background:#fff9e8}
.theme-4{border-color:#ec781e;background:#fff3e8}
.theme-5{border-color:#8d5bb5;background:#f7efff}
.theme-6{border-color:#1e73be;background:#edf6ff}
.theme-7{border-color:#e33a2e;background:#fff0ee}
.theme-8{border-color:#d73688;background:#fff0f8}
.theme-9{border-color:#139c91;background:#ecfffc}
.theme-10{border-color:#e5a000;background:#fff8e7}

.g4-empty{
  grid-column:1/-1;
  padding:30px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  color:var(--muted);
}

@media(max-width:1100px){
  .g4-grid{grid-template-columns:repeat(6,1fr)}
}

@media(max-width:760px){
  .g4-header{display:block}
  .g4-nav{margin-top:14px}
  .g4-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:480px){
  .g4-grid{grid-template-columns:repeat(2,1fr)}
}
/* ========================================================= */
/* GOLD SYSTEM NAVIGATION – GRID I–VIII                      */
/* Update: 001                                               */
/* Date: 2026-06-14                                          */
/* ========================================================= */

.system-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:0 0 18px 0;
  padding:12px;
  background:#0b61ff;
  border-radius:10px;
}

.system-nav a{
  display:inline-block;
  text-align:center;
  text-decoration:none;
  background:#ffffff;
  color:#0b61ff;
  font-weight:900;
  border-radius:7px;
  padding:8px 12px;
  font-size:14px;
  line-height:1.15;
  min-width:82px;
  border:1px solid #ffffff;
}

.system-nav a span{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#444;
  margin-top:3px;
}

.system-nav a:hover{
  background:#003f99;
  color:#ffffff;
}

.system-nav a:hover span{
  color:#ffffff;
}

/* active grid */
.system-nav a.active{
  background:#063b73;
  color:#ffffff;
}

.system-nav a.active span{
  color:#ffffff;
}

/* directory tile red border */
.dir-tile{
  border:3px solid #d90000 !important;
}