:root{--bg1:#e6f0ff;--bg2:#eef2ff;--accent:#4f46e5;--muted:#6b7280;--card:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#111827}
.container{background:var(--card);max-width:1000px;margin:24px auto;padding:28px;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
h1{font-size:26px;margin:0 0 10px}h2{font-size:20px;margin-top:24px;border-left:4px solid var(--accent);padding-left:8px}
p{line-height:1.6;color:#374151}label{font-weight:600;margin-bottom:6px;display:block}
input,select,button{font-size:16px}input,select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px}
button{
  background:var(--accent);
  color:white;
  border:0;
  border-radius:10px;
  padding:12px;
  font-size:16px;
  font-weight:600;
  width:100%;
  cursor:pointer;
  margin-top:12px;
  transition:background .3s;
}
button:hover{background:#4338ca}
.result{
  background:#f9fafb;
  padding:16px;
  border-radius:12px;
  text-align:center;
  font-size:20px;
  font-weight:700;
  margin-top:16px;
}
.hero-list{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:12px}@media (max-width:700px){.hero-list{grid-template-columns:1fr}}
.card-link{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;color:#111827;text-decoration:none}
.card-link:hover{border-color:#c7cbe0;box-shadow:0 6px 18px rgba(0,0,0,.06)}.badge{display:inline-block;background:#eef2ff;color:#1e3a8a;border-radius:999px;padding:2px 8px;font-size:12px;margin-left:6px}

footer{margin-top:20px;color:#6b7280;font-size:14px;text-align:center}.grid3{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:12px}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid3{grid-template-columns:1fr}}
.sep{height:1px;background:#e5e7eb;margin:16px 0}

table{width:100%;border-collapse:collapse;font-size:15px;}
th,td{border-bottom:1px solid #e5e7eb;text-align:left;padding:10px;}
th{background:#eef2ff;color:#1e3a8a;font-weight:700;}
tr:hover{background:#f3f4f6}
#searchRegion{
  margin-bottom:10px;
  padding:8px;
  width:100%;
  border-radius:8px;
  border:1px solid #d1d5db;
}
.breadcrumbs{
  font-size:14px;margin-bottom:16px;color:var(--accent);
}
.breadcrumbs a{color:var(--accent);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs span{color:#6b7280;margin:0 6px;}

/* --- Responsive grid for triple inputs --- */
.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(120px, 1fr));
  gap:12px;
  margin-top:12px;
}


@media (max-width: 760px){
  .grid3{ grid-template-columns:repeat(2, 1fr); }
}


@media (max-width: 480px){
  .grid3{ grid-template-columns:1fr; }
}


.result{
  overflow-wrap:anywhere;
  word-wrap:break-word;
}

.tab {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  width: 100%;
}
.tab.active {
  position: relative;
  visibility: visible;
  height: auto;
  opacity: 1;
  overflow: visible;
}