/* ========================================================= */
/* GRID VIII – RADICALS 001–214                              */
/* Description: 20-column radical grid + service row          */
/* Update: 001                                                */
/* Date: 2026-06-14                                           */
/* ========================================================= */

*{box-sizing:border-box;}

body{
  margin:0;
  background:#f5f8fc;
  color:#102a43;
  font-family:Arial, Helvetica, sans-serif;
}

.g8-wrap{
  max-width:1600px;
  margin:0 auto;
  padding:18px;
}

/* GOLD SYSTEM NAVIGATION */
.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:800;
  border-radius:7px;
  padding:8px 12px;
  font-size:14px;
  line-height:1.15;
  min-width:82px;
}

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

.system-nav a:hover,
.system-nav a.active{
  background:#003f99;
  color:#fff;
}

.system-nav a:hover span,
.system-nav a.active span{
  color:#fff;
}

/* HEADER */
.g8-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  padding:18px;
  background:#ffffff;
  border:1px solid #d7e3f3;
  border-radius:14px;
}

.g8-kicker{
  font-weight:800;
  color:#0b61ff;
  letter-spacing:.08em;
}

.g8-head h1{
  margin:4px 0 6px;
  font-size:34px;
  color:#12365f;
}

.g8-head p{
  margin:0;
  color:#5d6b82;
}

.g8-hub{
  text-decoration:none;
  color:#fff;
  background:#0b61ff;
  border-radius:9px;
  padding:10px 14px;
  font-weight:800;
  white-space:nowrap;
}

/* GRID */
.g8-grid{
  display:grid;
  grid-template-columns:repeat(20, 1fr);
  gap:6px;
}

.g8-tile{
  min-height:78px;
  border:1px solid #cfd8e3;
  border-radius:10px;
  background:#ffffff;
  text-decoration:none;
  color:#102a43;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.g8-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.g8-topic{
  position:absolute;
  top:5px;
  right:6px;
  font-size:10px;
  color:#607086;
  font-weight:700;
}

.g8-radical-id{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
}

.g8-han{
  font-size:34px;
  font-weight:800;
  line-height:1.1;
  margin-top:4px;
}

/* alternating visual blocks: 001–010 light, 011–020 medium */
.g8-light{background:#eaf6ff;}
.g8-mid{background:#d7ecff;}

.g8-line101{
  border-top:4px solid #0b61ff;
}

.g8-spacer{
  min-height:28px;
  background:transparent;
  border:0;
  pointer-events:none;
}

.g8-service-title{
  min-height:78px;
  border:2px solid #12365f;
  background:#12365f;
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
  font-size:13px;
  padding:6px;
}

.g8-service{
  min-height:78px;
  border:2px solid #0b61ff;
  background:#ffffff;
  color:#0b61ff;
  border-radius:10px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
  font-size:13px;
  padding:6px;
}

.g8-service:hover{
  background:#0b61ff;
  color:#fff;
}

.g8-reserve{
  min-height:58px;
  border:1px dashed #cfd8e3;
  border-radius:8px;
  background:#f7f9fc;
  color:#8a98aa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

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

@media(max-width:700px){
  .g8-wrap{padding:10px;}
  .g8-grid{grid-template-columns:repeat(5, 1fr);}
  .g8-head{display:block;}
  .g8-hub{display:inline-block;margin-top:12px;}
  .g8-tile{min-height:70px;}
  .g8-han{font-size:30px;}
}
.g8-tooltip{
  display:none;
  position:absolute;
  z-index:9999;
  max-width:260px;
  background:#ffffff;
  border:2px solid #0b61ff;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:10px 12px;
  color:#102a43;
  pointer-events:none;
  font-family:Arial, Helvetica, sans-serif;
}

.g8-tip-main{
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}

.g8-tip-pin,
.g8-tip-en,
.g8-tip-de{
  font-size:13px;
  line-height:1.35;
  font-weight:700;
}

.g8-tip-topic{
  margin-top:7px;
  font-size:10px;
  color:#777;
  font-weight:700;
}
/* ========================================================= */
/* GRID VIII – VISUAL UPDATE 002                             */
/* Description: Smaller topic line, stronger radical center, */
/*              improved service row styling                 */
/* Date: 2026-06-14                                          */
/* ========================================================= */

/* Topic number: very small, one line, not dominant */
.g8-topic-small{
  font-size:9px !important;
  line-height:1 !important;
  color:#667085 !important;
  font-weight:600 !important;
  text-align:center !important;
  margin:0 0 2px 0 !important;
  white-space:nowrap !important;
}

/* Radical number: dominant visual anchor */
.g8-radical-id{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#062b49 !important;
  text-align:center !important;
  margin:0 0 2px 0 !important;
}

/* Hanzi: strong but below radical number */
.g8-han{
  font-size:34px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#062b49 !important;
  text-align:center !important;
}

/* Service row basic styling */
.g8-service{
  background:#063b73 !important;
  color:#ffffff !important;
  border:2px solid #0b61ff !important;
  font-weight:900 !important;
}

/* Service row text */
.g8-service-title{
  font-size:12px !important;
  line-height:1.15 !important;
  text-align:center !important;
  color:#ffffff !important;
}

/* First service tile: label only */
.g8-service:first-of-type{
  background:#102a43 !important;
}

/* Directory should stand out */
.g8-service[href="directory.html"]{
  background:#1f8a4c !important;
  border-color:#166b39 !important;
}

/* Introduction: different from data tables */
.g8-service[href="introduction.html"]{
  background:#0f6fba !important;
}

/* Empty reserve tiles quieter */
.g8-empty{
  background:#ffffff !important;
  color:#8a94a6 !important;
  border:1px solid #d7e3f3 !important;
}

.g8-empty-num{
  font-size:13px !important;
  color:#344054 !important;
}
/* ========================================================= */
/* 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;
}