/* styles.css - LncEnsemblePred site stylesheet */
/* 使用现代、清新、浅色主题 */
:root{
  --bg: #f6f9fc;
  --card: #ffffff;
  --muted: #6b7280;
  --brand: #2563eb;    /* indigo */
  --accent: #06b6d4;   /* teal */
  --glass: rgba(37,99,235,0.06);
  --radius: 12px;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
  --max-width: 1100px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{min-height:100vh;margin:0;background:var(--bg);color:#0f172a; font-size:18px;} /* Increased font size */
a{color:var(--brand);text-decoration:none; font-size:18px;} /* Increased font size */
.container{max-width:var(--max-width);margin:10px auto;padding:20px; font-size:18px;} /* Increased font size */
header{display:flex;align-items:center;justify-content:space-between;gap:0px;margin-bottom:20px; font-size:18px;} /* Increased font size */
.brand{display:flex;align-items:center;gap:14px; font-size:18px;} /* Increased font size */
.logo{width:118px;height:78px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:35px;box-shadow:0 6px 18px rgba(37,99,235,0.12)}
/* .logo {width: 88px;height: 78px;border-radius: 10px;overflow: hidden;box-shadow: 0 6px 18px rgba(37,99,235,0.12);}
.logo img {width: 100%;height: 100%;object-fit: cover;} */
.brand h1{margin:0;font-size:30px;} /* Increased font size */
.brand p{margin:0;color:var(--muted);font-size:18px;} /* Increased font size */
nav a{margin-left:16px;color:var(--muted);font-size:20px;} /* Increased font size */
nav a.active{color:var(--brand);font-weight:600}
.site-title{color: black; font-family: Merriweather,Georgia,serif !important;}
.site-tagline{font-family: Merriweather,Georgia,serif !important;}

/* layout */
/* .main-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start} */
.main-grid{grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media (max-width:980px){.main-grid{grid-template-columns:1fr;gap:12px}}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid rgba(15,23,42,0.03)}
.huge{padding:28px}

/* hero / architecture placeholder */
.arch-placeholder{
  height:340px;border-radius:10px;border:1px dashed rgba(15,23,42,0.06);
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(6,182,212,0.04),transparent);
  color:var(--muted);font-weight:700;font-size:15px;
}

/* text content */
.lead{color:var(--muted);margin-top:8px;font-size:16px;line-height:1.5}

/* form styles for webserver page */
.form-row{display:flex;gap:12px;align-items:center;margin-top:12px}
.form-col{flex:1}
label{display:block;font-size:15px;color:#0f172a;font-weight:700;margin-bottom:6px}
textarea,input[type="file"],select,input[type="email"],input[type="text"]{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,42,0.08);background:white;font-family:monospace;font-size:15px;transition:box-shadow .12s ease,border-color .12s ease
}
textarea{min-height:140px;resize:vertical}
input[type="text"],input[type="email"]{height:44px}
input:focus,textarea:focus,select:focus{box-shadow:0 6px 18px rgba(37,99,235,0.08);border-color:rgba(37,99,235,0.55);outline:none}
.form-row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
small.muted{color:var(--muted);font-size:12px}

/* toggle / switches */
.switch{display:inline-flex;align-items:center;gap:8px}
.checkbox-inline{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(2,6,23,0.02);border:1px solid rgba(2,6,23,0.03)}

/* slider styling */
.range-wrap{display:flex;align-items:center;gap:12px}
input[type="range"]{width:160px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:white}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--muted)}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* selected / active button styles */
.btn.active{
  background: linear-gradient(90deg, rgba(37,99,235,0.95), rgba(6,182,212,0.95));
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
  transform: translateY(-1px);
}

/* specifically style ghost buttons when active (keeps border look) */
.btn.ghost.active{
  background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(6,182,212,0.08));
  border-color: rgba(37,99,235,0.18);
  color: var(--brand);
}

.btn:not(.primary){
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:focus{
  outline: 3px solid rgba(37,99,235,0.12);
  outline-offset: 2px;
}

/* right column / info */
.info-list{list-style:none;padding:0;margin:0}
.info-list li{padding:8px 0;border-bottom:1px dashed rgba(15,23,42,0.03);font-size:14px;color:var(--muted)}

/* footer layout */
.site-footer{margin-top:28px;padding:18px;border-radius:10px;background:linear-gradient(180deg,rgba(37,99,235,0.03),transparent);display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.footer-col{flex:1;min-width:220px}
.footer-title{font-weight:700;margin-bottom:8px}
.sister-list{list-style:none;padding-left:0;margin:0}
.sister-list li{font-size:16px;color:var(--muted);padding:6px 0}
.contact-list {font-size: 16px;}
/* small utilities */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(6,182,212,0.12);color:var(--brand);font-weight:700;font-size:12px}
.center{display:flex;align-items:center;justify-content:center}
.note{font-size:13px;color:var(--muted);margin-top:8px}

/* info card on the right */
.info-card{padding:20px;background:linear-gradient(180deg,rgba(6,182,212,0.03),transparent);border:1px solid rgba(15,23,42,0.03)}
.info-card h3{font-size:18px;margin:0 0 6px 0}
.info-card .info-list li{font-size:14px;color:var(--muted);padding:8px 0;border-bottom:none}
.info-card pre{font-size:13px}

/* smaller tweaks for mobile */
@media (max-width:480px){
  .logo{width:64px;height:56px;font-size:26px}
  .brand h1{font-size:20px}
  nav a{font-size:16px}
}