/* ============================================================
   SeacareOS Keyboard Center v9.4 — same visual language as home
   ============================================================ */
body.keyboard-hub,
body.keyboard-detail {
  background:#0a0a0b!important;
  color:#fff!important;
}
body.keyboard-hub #app,
body.keyboard-detail #app {
  display:block;
}
body.keyboard-hub .light-bg,
body.keyboard-detail .light-bg {
  background:
    linear-gradient(180deg, rgba(10,10,11,.42) 0%, rgba(10,10,11,.22) 34%, rgba(10,10,11,.72) 78%, #0a0a0b 100%)!important;
}
body.keyboard-hub .noise,
body.keyboard-detail .noise { opacity:.25!important; }
body.keyboard-hub .version-badge,
body.keyboard-detail .version-badge {
  background:rgba(255,255,255,.78)!important;
  color:#102033!important;
  border-color:rgba(255,255,255,.74)!important;
}
.keyboard-hero {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:118px 20px 76px;
  background:transparent!important;
}
.keyboard-hero .hero-inner {
  width:min(980px,100%);
  margin:0 auto;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.keyboard-hero .hero-coin,
.keyboard-hero h1,
.keyboard-hero .hero-lead,
.keyboard-hero .hero-actions,
.keyboard-hero .hero-quick-launch {
  grid-column:auto!important;
  grid-row:auto!important;
}
.keyboard-hero .hero-quick-launch {
  width:min(100%,860px)!important;
  max-width:860px!important;
}
.keyboard-hero .hero-lead,
body.keyboard-detail .g-badge,
body.keyboard-detail .g-hero-sub {
  color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.68)!important;
}
.keyboard-hero h1,
body.keyboard-detail .g-hero h1 {
  color:#fff!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
  text-shadow:0 3px 24px rgba(0,0,0,.64)!important;
}
.keyboard-hero .gradient-text,
body.keyboard-detail .g-hero .gradient-text { color:rgba(255,255,255,.86)!important; }
.keyboard-hero .hero-quick-launch {
  max-width:860px;
  margin:34px auto 0;
}
.keyboard-two-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:14px;
  align-items:stretch;
}
.keyboard-card {
  min-height:172px!important;
  align-items:flex-start!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:12px!important;
  padding:22px!important;
  text-align:left;
  min-width:0!important;
  overflow:visible!important;
}
.keyboard-card span:not(.kbd-chip) { font-size:1.08rem!important; line-height:1.24!important; overflow-wrap:anywhere!important; }
.keyboard-card small { display:block!important; line-height:1.55!important; overflow-wrap:anywhere!important; }
.keyboard-card .kbd-chip {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  font-size:.68rem!important;
  line-height:1.05!important;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#52667a;
  background:rgba(16,32,51,.06);
  border:1px solid rgba(16,32,51,.10);
  border-radius:999px;
  padding:5px 9px;
}
.keyboard-card:hover .kbd-chip { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.10); }
.keyboard-note {
  margin:18px auto 0;
  max-width:760px;
  color:rgba(255,255,255,.82);
  font-size:.92rem;
  line-height:1.7;
  text-shadow:0 2px 14px rgba(0,0,0,.62);
}
/* TickType detail page: keep content, but hero/background matches homepage */
body.keyboard-detail .g-page {
  background:transparent!important;
  color:#fff!important;
  padding-top:0!important;
}
body.keyboard-detail .g-hero {
  min-height:68vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:126px 20px 66px!important;
  background:transparent!important;
  border-bottom:none!important;
}
body.keyboard-detail .g-hero::before { display:none!important; }
body.keyboard-detail .g-badge {
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.30)!important;
  border-radius:999px!important;
  padding:7px 16px!important;
}
body.keyboard-detail .spec-row { max-width:760px; }
body.keyboard-detail .spec-chip {
  background:rgba(255,255,255,.92)!important;
  color:#102033!important;
  border-color:rgba(255,255,255,.78)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
}
body.keyboard-detail .spec-chip b { color:#2b6f9f!important; }
body.keyboard-detail .g-topnav {
  top:86px;
  background:rgba(248,251,255,.92)!important;
  border:1px solid rgba(16,32,51,.10)!important;
  border-radius:18px!important;
  width:min(calc(100vw - 28px),1060px);
  margin:0 auto 0;
  padding:7px!important;
  box-shadow:0 18px 60px rgba(16,32,51,.14)!important;
}
body.keyboard-detail .g-topnav a {
  color:#52667a!important;
  border-radius:12px!important;
  border-bottom:none!important;
}
body.keyboard-detail .g-topnav a:hover,
body.keyboard-detail .g-topnav a.active-tab {
  color:#fff!important;
  background:#102033!important;
}
body.keyboard-detail .g-wrap {
  max-width:1100px!important;
  margin:32px auto 0!important;
  padding:34px 20px 72px!important;
  background:#f2f6fa!important;
  color:#102033!important;
  border-radius:28px 28px 0 0;
  box-shadow:0 -20px 80px rgba(0,0,0,.18);
}
body.keyboard-detail .g-wrap h2,
body.keyboard-detail .g-wrap h3,
body.keyboard-detail .g-wrap h4,
body.keyboard-detail .g-wrap p,
body.keyboard-detail .g-wrap li,
body.keyboard-detail .g-wrap td,
body.keyboard-detail .g-wrap th {
  text-shadow:none!important;
}
body.keyboard-detail .g-footer {
  background:#f2f6fa!important;
  color:#52667a!important;
  text-shadow:none!important;
}
@media(max-width:860px){
  .keyboard-two-grid{grid-template-columns:1fr;}
  .keyboard-card{min-height:auto!important;}
}
@media(max-width:700px){
  .keyboard-card{min-height:112px!important; padding:18px!important; gap:9px!important;}
  .keyboard-card small{display:none!important;}
  .keyboard-card .kbd-chip{font-size:.62rem!important; letter-spacing:.09em;}
  body.keyboard-detail .g-topnav{top:74px;width:calc(100vw - 18px);}
  body.keyboard-detail .g-hero{min-height:70vh;padding-top:118px!important;}
}
