/* Qingyu-inspired responsive skin for 星河证书站.
   Loaded last so the existing signing/query/help behaviour stays untouched. */
:root {
  --qy-bg: #f5f7f4;
  --qy-surface: #ffffff;
  --qy-soft: #eef3ef;
  --qy-soft-2: #f8faf8;
  --qy-line: #dde5df;
  --qy-text: #20312b;
  --qy-sub: #718078;
  --qy-green: #245747;
  --qy-green-2: #34715e;
  --qy-green-light: #e7f0ea;
  --qy-cream: #f4f0df;
  --qy-danger: #bd6e62;
  --qy-radius: 16px;
  --qy-shadow: 0 18px 55px rgba(29, 67, 54, .08);
  --qy-sidebar: 238px;
  --qy-shell: 1160px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body,
body.theme-light {
  background: var(--qy-bg) !important;
  color: var(--qy-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 83% 8%, rgba(211, 225, 208, .72), transparent 24%),
    radial-gradient(circle at 10% 92%, rgba(239, 232, 201, .46), transparent 26%);
}

#page { background: transparent !important; }

/* Desktop workspace sidebar */
.st-head {
  position: fixed !important;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--qy-sidebar) !important;
  max-width: none !important;
  height: 100dvh;
  margin: 0 !important;
  padding: 28px 20px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-direction: column;
  gap: 28px !important;
  background: rgba(255, 255, 255, .94) !important;
  border-right: 1px solid var(--qy-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.st-brand { gap: 12px !important; width: 100%; }
.st-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: var(--qy-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 18px !important;
}
.st-brand-txt b { color: var(--qy-text) !important; font-size: 15px !important; letter-spacing: .06em !important; }
.st-brand-txt small { color: #91a097 !important; font-size: 8px !important; letter-spacing: .17em !important; }
.st-live {
  width: 100%;
  justify-content: flex-start;
  padding: 11px 13px !important;
  color: var(--qy-sub) !important;
  border: 1px solid var(--qy-line) !important;
  background: var(--qy-soft-2) !important;
  border-radius: 9px !important;
  font-size: 9px !important;
}
.st-live i { background: #66a979 !important; animation: none !important; }

#changebg,
.page-content {
  width: calc(100% - var(--qy-sidebar)) !important;
  min-height: 100dvh !important;
  margin-left: var(--qy-sidebar) !important;
  padding: 0 34px 52px !important;
  background: transparent !important;
}
#changebg::before { display: none !important; }

/* Turn the existing navigation into the sidebar menu. */
.st-bar {
  position: fixed !important;
  z-index: 51 !important;
  inset: 154px auto auto 20px !important;
  width: calc(var(--qy-sidebar) - 40px) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 7px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.st-bar::before {
  content: "工作台";
  display: block;
  order: 0;
  margin: 0 8px 7px;
  color: #a0aaa4;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
.st-bar a {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 13px !important;
  display: flex !important;
  flex: none !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 11px;
  color: #718078 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.st-bar a:hover,
.st-bar a.active-nav { background: var(--qy-green-light) !important; color: var(--qy-green) !important; }
.st-bar a i { width: 20px; margin: 0 !important; color: inherit !important; font-size: 16px !important; line-height: 1 !important; text-align: center; }
.st-bar a span { margin: 0 !important; color: inherit !important; font-size: 12px !important; font-weight: 600; line-height: 1 !important; }
#Tab-Home { order: 1; }
#Tab-Query { order: 2; }
#Tab-Help { order: 3; }

/* Hero */
.st-hero {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  max-width: var(--qy-shell) !important;
  min-height: 306px;
  margin: 34px auto 20px !important;
  padding: 42px 46% 38px 42px !important;
  border-radius: 18px;
  background: linear-gradient(135deg, #173f35 0%, #255848 66%, #315d4b 100%) !important;
  color: #fff;
  box-shadow: 0 20px 55px rgba(26, 67, 54, .12);
}
.st-hero::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 27px;
  width: 168px;
  height: 282px;
  border: 5px solid #edf2df;
  border-radius: 31px;
  background:
    linear-gradient(180deg, transparent 0 19%, rgba(255,255,255,.88) 19% 20%, transparent 20%),
    linear-gradient(180deg, #eff3e4, #dce6d2);
  box-shadow: 0 20px 32px rgba(4, 33, 24, .28);
  transform: rotate(10deg);
}
.st-hero::after {
  content: "属于你的\A应用宇宙\A\A  ✓ 准备就绪";
  white-space: pre;
  position: absolute;
  z-index: 2;
  right: calc(8% + 21px);
  top: 84px;
  width: 126px;
  color: #365449;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  transform: rotate(10deg);
}
.st-eyebrow {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #b8d0c6 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 9px !important;
  letter-spacing: .2em !important;
}
.st-eyebrow::before { content: "✦  "; color: #d7df9a; }
.st-hero h1 {
  margin: 0 0 13px !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(34px, 4.1vw, 52px) !important;
  font-weight: 750 !important;
  letter-spacing: -.045em !important;
}
.st-hero p { max-width: 520px !important; color: #bcd0c8 !important; font-size: 13px !important; line-height: 1.9 !important; }
.st-actions { margin-top: 23px !important; gap: 17px !important; }
.st-cta {
  min-height: 43px !important;
  padding: 0 18px !important;
  color: var(--qy-green) !important;
  background: #eef1df !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
.st-meta { color: #a8c0b7 !important; font-size: 9px !important; }
.st-meta b { color: #fff !important; font-size: 17px !important; }
.st-meta small { font-size: 9px !important; }
.st-track { max-width: 430px; margin-top: 23px !important; color: #a9c0b7 !important; font-size: 8px !important; }
.st-track i { background: rgba(255,255,255,.2) !important; }
.st-track .on { color: #f3efc9 !important; }

.st-notice,
.st-quick,
.st-section { width: 100% !important; max-width: var(--qy-shell) !important; margin-left: auto !important; margin-right: auto !important; }
.st-notice {
  min-height: 58px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center;
  border: 1px solid var(--qy-line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: none !important;
}
.st-notice-dot { width: 11px !important; height: 11px !important; background: #c3a64e !important; box-shadow: 0 0 0 7px #f5f0dc !important; }
.st-notice-txt { color: var(--qy-sub) !important; font-size: 12px !important; }

/* Main functional pages */
#Home { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(480px, 1.42fr); gap: 22px; align-items: start; }
.st-route,
.st-console,
.sign-card,
.st-fold,
.st-query-result { color: var(--qy-text) !important; }
.st-route {
  padding: 27px !important;
  border: 1px solid var(--qy-line) !important;
  border-radius: var(--qy-radius) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--qy-shadow) !important;
}
.st-route-head > span { color: #91a097 !important; font-size: 8px !important; letter-spacing: .18em !important; }
.st-route-head h3 { color: var(--qy-text) !important; font-size: 22px !important; margin: 9px 0 8px !important; }
.st-route-head p { color: var(--qy-sub) !important; font-size: 11px !important; line-height: 1.8 !important; }
.flow-steps { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 23px 0 !important; }
.flow-step {
  min-height: 70px;
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qy-line) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.flow-step:last-child { border-bottom: 0 !important; }
.flow-step > span { width: 34px !important; height: 34px !important; background: var(--qy-green-light) !important; color: var(--qy-green) !important; border: 1px solid #d6e3da !important; }
.flow-step strong { color: var(--qy-text) !important; font-size: 12px !important; }
.flow-step p { color: var(--qy-sub) !important; font-size: 9px !important; }

.st-console { min-width: 0; }
.panel-title { margin: 0 0 13px !important; padding: 0 3px !important; }
.panel-title h2 { color: var(--qy-text) !important; font-size: 24px !important; letter-spacing: -.03em !important; }
.panel-title span { color: #8a9991 !important; font-size: 9px !important; }
.card.sign-card,
.sign-card {
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--qy-line) !important;
  border-radius: var(--qy-radius) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--qy-shadow) !important;
}
.sign-card > .content { padding: 26px !important; }
.input-style { margin: 0 0 20px !important; }
.field-label { display: block !important; margin: 0 0 8px !important; color: var(--qy-text) !important; font-size: 11px !important; font-weight: 650 !important; }
.field-row { gap: 9px !important; }
.form-control,
input.form-control,
#applist.form-control {
  height: 45px !important;
  min-height: 45px !important;
  padding: 0 13px !important;
  color: var(--qy-text) !important;
  border: 1px solid var(--qy-line) !important;
  border-radius: 8px !important;
  background: var(--qy-soft-2) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 43px !important;
}
.form-control:focus { border-color: #7ba28f !important; box-shadow: 0 0 0 3px rgba(67, 117, 93, .1) !important; }
.form-control::placeholder { color: #a2ada7 !important; }
.btn-mini {
  min-width: 92px !important;
  height: 45px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--qy-green) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.st-fold { overflow: hidden; border: 1px solid var(--qy-line) !important; border-radius: 10px !important; background: var(--qy-soft-2) !important; }
.st-fold-btn { min-height: 49px !important; padding: 0 16px !important; color: var(--qy-text) !important; background: transparent !important; font-size: 11px !important; }
.st-fold-btn i:first-child { color: #82a08f !important; }
.st-fold-body { padding: 16px !important; color: var(--qy-sub) !important; border-top: 1px solid var(--qy-line) !important; background: #fff !important; font-size: 11px !important; }
.st-inline-accordion { margin: 16px 0 !important; }
.st-install { margin-top: 22px !important; }
.st-install-btn {
  width: 100% !important;
  min-height: 49px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--qy-green) !important;
  box-shadow: 0 10px 25px rgba(36, 87, 71, .15) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.st-icon-pick { border-radius: 10px !important; border: 1px solid var(--qy-line) !important; }

#Query,
#Help { max-width: 860px !important; padding-top: 6px; }
#Query .sign-card { margin-bottom: 18px !important; }
#Help .st-fold { margin-bottom: 12px; }
.st-query-result { margin-top: 18px !important; }

/* Certificate selector: same controls, Qingyu visual language. */
.cert-type-panel { margin: 21px 0 !important; padding: 19px !important; border: 1px solid var(--qy-line) !important; border-radius: 12px !important; background: #f9fbf9 !important; }
.cert-type-hint { color: var(--qy-sub) !important; }
.cert-type-grid { gap: 11px !important; }
.cert-type-card { min-height: 116px !important; padding: 15px !important; border: 1px solid var(--qy-line) !important; border-radius: 10px !important; background: #fff !important; }
.cert-type-card.is-selected { border-color: #7da38f !important; background: var(--qy-green-light) !important; box-shadow: 0 0 0 2px rgba(57, 104, 82, .08) !important; }
.cert-type-title { color: var(--qy-text) !important; }
.cert-type-dot { border-color: #8a9a92 !important; }
.cert-type-card.is-selected .cert-type-dot { border-color: var(--qy-green) !important; background: var(--qy-green) !important; box-shadow: inset 0 0 0 3px var(--qy-green-light) !important; }
.cert-type-price { color: var(--qy-green) !important; }
.cert-type-desc,
.cert-type-summary,
.standard-device-note { color: var(--qy-sub) !important; }
.cert-type-badge { color: var(--qy-green) !important; background: #fff !important; border: 1px solid var(--qy-line) !important; }
.standard-device-panel { padding-top: 16px !important; border-top-color: var(--qy-line) !important; }
.standard-device-option { border-color: var(--qy-line) !important; background: #fff !important; }
.standard-device-option.is-selected { border-color: #7da38f !important; background: var(--qy-green-light) !important; }
.standard-device-name { color: var(--qy-text) !important; }
.standard-device-icon,
.standard-device-cost { color: var(--qy-green) !important; }

/* Existing overlay components */
.mobileSelect .content { border-radius: 18px 18px 0 0 !important; background: #fff !important; color: var(--qy-text) !important; }
.mobileSelect .grayLayer { background: rgba(22, 46, 38, .55) !important; backdrop-filter: blur(5px); }
.mobileSelect .btnBar { border-bottom: 1px solid var(--qy-line) !important; background: #f8faf8 !important; }
.mobileSelect .ensure { color: var(--qy-green) !important; }
.layui-layer { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 24px 70px rgba(20, 55, 43, .2) !important; }
.layui-layer-title { background: var(--qy-green) !important; color: #fff !important; border: 0 !important; }
.layui-layer-btn .layui-layer-btn0 { background: var(--qy-green) !important; border-color: var(--qy-green) !important; }
.st-modal { color: var(--qy-text) !important; background: #fff !important; }
.st-modal-title { color: var(--qy-text) !important; }

/* Restyle the inline announcement with stronger selectors. */
#gg-modal { background: rgba(22, 46, 38, .64) !important; backdrop-filter: blur(10px) !important; }
#gg-modal,
#gg-modal * { box-sizing: border-box !important; }
#gg-modal > div { width: min(390px, calc(100vw - 30px)) !important; border: 1px solid var(--qy-line) !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 28px 80px rgba(19, 50, 39, .24) !important; }
#gg-modal > div > div:first-child { background: var(--qy-green) !important; }
#gg-modal button { border-radius: 9px !important; }
#gg-modal > div > div:last-child > div:last-child button { background: var(--qy-green) !important; box-shadow: none !important; }

@media (max-width: 980px) {
  :root { --qy-sidebar: 210px; }
  #changebg, .page-content { padding-left: 24px !important; padding-right: 24px !important; }
  #Home { grid-template-columns: 1fr; }
  .st-route { order: 2; }
  .st-console { order: 1; }
  .st-hero { padding-right: 42% !important; }
  .st-hero::before { right: 5%; }
  .st-hero::after { right: calc(5% + 21px); }
}

@media (max-width: 760px) {
  :root { --qy-sidebar: 0px; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .st-head {
    position: sticky !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 18px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-right: 0;
    border-bottom: 1px solid var(--qy-line);
  }
  .st-live { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
  .st-mark { width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 14px !important; }
  .st-brand { width: auto; gap: 9px !important; }
  .st-brand-txt b { font-size: 13px !important; }
  .st-brand-txt small { font-size: 6.5px !important; }
  .st-live { width: auto !important; padding: 6px 9px !important; font-size: 7px !important; border-radius: 99px !important; }
  #changebg, .page-content { width: 100% !important; margin-left: 0 !important; padding: 0 16px 28px !important; }
  .st-hero {
    min-height: 285px;
    margin-top: 18px !important;
    padding: 29px 43% 28px 24px !important;
    border-radius: 14px;
  }
  .st-hero h1 { font-size: 31px !important; }
  .st-hero p { font-size: 11px !important; line-height: 1.75 !important; }
  .st-hero::before { right: 3.5%; top: 44px; width: 118px; height: 215px; border-radius: 24px; border-width: 4px; }
  .st-hero::after { right: calc(3.5% + 15px); top: 91px; width: 92px; font-size: 13px; }
  .st-actions { margin-top: 18px !important; }
  .st-meta { display: none !important; }
  .st-track { display: none !important; }
  .st-cta { min-height: 40px !important; padding: 0 14px !important; font-size: 11px !important; }
  .st-notice { min-height: 52px !important; margin-bottom: 18px !important; }
  .st-bar {
    position: fixed !important;
    z-index: 80 !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 5px;
    border-top: 1px solid var(--qy-line) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 -10px 30px rgba(24, 52, 42, .06) !important;
    backdrop-filter: blur(18px);
  }
  .st-bar::before { display: none; }
  .st-bar a {
    width: auto !important;
    height: 48px !important;
    min-width: 0 !important;
    padding: 5px 12px !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px;
    border-radius: 10px !important;
  }
  .st-bar a i { width: auto; font-size: 17px !important; }
  .st-bar a span { font-size: 9px !important; }
  #Home { display: block; }
  .st-section,
  .st-console,
  .sign-card,
  .sign-card > .content,
  .field-row { min-width: 0 !important; max-width: 100% !important; }
  .field-row .form-control { width: auto !important; min-width: 0 !important; flex: 1 1 auto !important; }
  .field-row .btn-mini { flex: 0 0 auto !important; }
  .st-console { margin-bottom: 18px; }
  .st-route { padding: 22px !important; }
  .sign-card > .content { padding: 22px !important; }
  .panel-title h2 { font-size: 22px !important; }
}

@media (max-width: 480px) {
  #changebg, .page-content { padding-left: 13px !important; padding-right: 13px !important; }
  .st-hero { min-height: 270px; padding: 26px 42% 25px 20px !important; }
  .st-eyebrow { font-size: 7px !important; }
  .st-hero h1 { font-size: 27px !important; }
  .st-hero p { font-size: 10px !important; }
  .st-hero::before { width: 105px; height: 202px; right: 2%; top: 44px; }
  .st-hero::after { right: calc(2% + 12px); width: 83px; font-size: 12px; }
  .st-notice { padding: 0 14px !important; }
  .sign-card > .content { padding: 18px !important; }
  .field-row { flex-wrap: nowrap !important; }
  .btn-mini { min-width: 80px !important; padding: 0 10px !important; font-size: 10px !important; }
  .cert-type-panel { padding: 14px !important; }
  .cert-type-grid { grid-template-columns: 1fr !important; }
  .cert-type-card { min-height: 102px !important; }
  .standard-device-grid { grid-template-columns: 1fr 1fr !important; }
  .standard-device-option { padding: 11px 9px !important; }
  .st-route { padding: 19px !important; }
  .st-bar a { min-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}