:root {
  --brand-ink: #1f1f1f;
  --brand-blue: #1677ff;
  --brand-cyan: #1677ff;
  --brand-orange: #ff6a00;
  --brand-bg: #f5f6f7;
  --brand-card: #ffffff;
  --brand-line: #e5e6eb;
  --brand-muted: #86909c;
  --brand-shadow: 0 10px 28px rgba(31, 35, 41, .08);
}

html { background: var(--brand-bg); }
body { background: var(--brand-bg) !important; color: var(--brand-ink); }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }

.header-top, .topbar, .top {
  background: #1f1f1f !important;
  color: #d9e8f2 !important;
}
.header-nav, .header, .header-nav-content { background: rgba(255,255,255,.96) !important; }
.header-nav, .header { box-shadow: 0 7px 25px rgba(13,48,76,.08); position: relative; z-index: 12; }
.main-nav a { color: #496276 !important; font-weight: 600; }
.main-nav a:hover, .main-nav a.active { background: #fff7f0 !important; color: var(--brand-orange) !important; box-shadow: inset 0 -3px 0 var(--brand-orange); }
.brand-logo, .header-nav .brand-logo, .logo.brand-logo {
  border: 0 !important;
  border-right: 1px solid var(--brand-line) !important;
  background: #fff !important;
}
.brand-logo .brand-symbol, .logo.brand-logo .brand-symbol {
  background: linear-gradient(145deg, #ff8a00, var(--brand-orange)) !important;
  box-shadow: 0 8px 20px rgba(255,106,0,.2) !important;
}
.brand-copy strong { color: var(--brand-ink) !important; }
.brand-copy small { color: var(--brand-orange) !important; }

/* 产品页 */
.product-hero {
  min-height: 360px;
  background: radial-gradient(circle at 78% 35%, rgba(61,137,255,.3), transparent 25%), linear-gradient(120deg, #071d49, #135dc8 58%, #1677ff) !important;
}
.product-hero:after {
  content: ""; position: absolute; width: 540px; height: 540px; right: -100px; top: -245px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.035);
}
.hero-inner h1 { font-weight: 700; letter-spacing: .03em; }
.hero-kicker { color: #9fe7eb !important; font-weight: 700; }
.hero-button, .card-actions button:first-child { background: var(--brand-orange) !important; border-radius: 6px !important; box-shadow: 0 8px 18px rgba(255,106,0,.2) !important; }
.hero-button:hover, .card-actions button:first-child:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255,112,71,.3) !important; }
.product-area { padding-top: 72px; }
.product-card, .advantage-grid article { border: 1px solid var(--brand-line) !important; border-radius: 8px; box-shadow: var(--brand-shadow) !important; }
.product-card { overflow: hidden; }
.product-card:hover { transform: translateY(-7px); }
.product-card.recommend { border-top: 3px solid var(--brand-orange) !important; }
.product-card .tag { border-radius: 999px; background: #fff1eb; color: #e25b3c; font-weight: 700; }
.product-price b { color: var(--brand-orange); }
.service-panel { border: 1px solid var(--brand-line) !important; border-radius: 8px; background: #fff !important; box-shadow: var(--brand-shadow); }
.service-action input { border-radius: 10px 0 0 10px; border-color: #b9dce5; }
.service-action button { border-radius: 0 6px 6px 0; background: var(--brand-blue); }
.advantage-grid article { border-top: 3px solid var(--brand-cyan) !important; }
.footer, .site-footer { background: #091b2d !important; }

/* 域名页 */
.banner {
  height: 350px !important; text-align: left !important; place-items: center start !important; padding-left: max(24px, calc((100% - 1180px) / 2));
  background: radial-gradient(circle at 72% 25%, rgba(82,151,255,.3), transparent 24%), linear-gradient(115deg, #071d49, #135dc8 62%, #1677ff) !important;
}
.banner:before { content: "DOMAIN · BRAND · GROWTH"; position: absolute; top: 56px; left: max(24px, calc((100% - 1180px) / 2)); color: #b8d4ff; font-size: 12px; font-weight: 700; letter-spacing: 4px; }
.banner h1 { font-size: clamp(38px, 5vw, 58px) !important; font-weight: 700 !important; letter-spacing: .06em !important; text-shadow: 0 8px 30px rgba(0,0,0,.2); }
.banner p { color: #e6efff; }
.banner button { border: 0 !important; border-radius: 6px !important; padding: 12px 34px !important; background: var(--brand-orange) !important; color: #fff !important; box-shadow: 0 12px 25px rgba(255,106,0,.2); }
.banner button:hover { transform: translateY(-2px); background: #ff815d !important; }
.banner:after { border-color: rgba(159,231,235,.45) transparent transparent !important; opacity: .65; }
.domain-box { margin-top: -42px !important; position: relative; z-index: 3; padding: 0 0 58px !important; }
.category-tabs { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 16px 35px rgba(13,48,76,.1); }
.category-tabs button { background: #fff !important; color: #526d80 !important; font-weight: 600; }
.category-tabs button.on { background: var(--brand-orange) !important; color: #fff !important; }
.search-copy { color: var(--brand-ink); font-weight: 600; }
.search-copy strong { color: var(--brand-orange) !important; }
.search-box { border-radius: 8px; background: #f2f3f5 !important; padding: 10px !important; box-shadow: 0 12px 30px rgba(31,35,41,.06); }
.search-box input { border: 0 !important; border-radius: 11px 0 0 11px; box-shadow: inset 0 0 0 1px #d5e6ee; }
.search-box button { border-radius: 0 6px 6px 0; background: var(--brand-orange) !important; }
.advantages { background: transparent !important; }
.advantage-grid article { padding: 26px !important; background: #fff; border-top: 3px solid var(--brand-orange); border-radius: 8px; box-shadow: 0 12px 35px rgba(31,35,41,.08); }
.advantage-grid article>b { box-shadow: 0 8px 18px rgba(34,133,196,.18); }

/* 虚拟主机页 */
.hero { background: radial-gradient(circle at 78% 22%, rgba(82,151,255,.3), transparent 22%), linear-gradient(115deg, #071d49, #135dc8 55%, #1677ff) !important; }
.hero-copy h1 { font-weight: 700; letter-spacing: .03em; }
.outline { border: 0 !important; border-radius: 6px !important; background: #fff !important; color: #1455b8 !important; font-weight: 700; box-shadow: 0 10px 25px rgba(0,0,0,.14); }
.outline:hover { transform: translateY(-2px); background: #e9fbfb !important; }
.tabs { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 10px 25px rgba(13,48,76,.08); }
.tabs button.on { background: var(--brand-blue) !important; }
.card { border: 1px solid var(--brand-line) !important; border-radius: 8px; overflow: hidden; box-shadow: var(--brand-shadow); }
.card:hover { transform: translateY(-8px); }
.card.featured { border: 2px solid var(--brand-orange) !important; }
.card.featured h3 { background: linear-gradient(135deg, var(--brand-orange), #e95238) !important; }
.price { background: #eef8fb !important; color: var(--brand-blue) !important; }
.buy { border-radius: 6px !important; background: var(--brand-orange) !important; }
.detail { border-radius: 6px !important; color: var(--brand-blue) !important; }
.api-toolbar { border-radius: 14px; margin-top: 18px; box-shadow: 0 8px 25px rgba(13,48,76,.06); }

/* 商标首页 */
.trademark-banner { height: 365px !important; background: radial-gradient(circle at 78% 25%, rgba(82,151,255,.26), transparent 24%), linear-gradient(115deg, #071d49, #135dc8 60%, #1677ff) !important; }
.trademark-banner:before { content: "品牌服务 · 一站式办理"; position: absolute; left: max(24px, calc((100% - 1180px) / 2)); top: 76px; color: #a9eff0; font-size: 15px; letter-spacing: 4px; font-weight: 700; }
.trademark-banner:after { content: "让每一个好名字，都值得被看见"; position: absolute; left: max(24px, calc((100% - 1180px) / 2)); top: 110px; color: #fff; font-size: clamp(28px, 4vw, 50px); font-weight: 700; letter-spacing: 2px; }
.banner-hotspot { left: max(24px, calc((100% - 1180px) / 2)) !important; top: 210px !important; width: 150px !important; height: 46px !important; border-radius: 6px !important; background: var(--brand-orange) !important; color: #fff !important; }
.trademark-search-form { border: 0 !important; border-radius: 22px !important; box-shadow: 0 22px 55px rgba(13,48,76,.14) !important; overflow: hidden; }
.search-tabs button.active { border-top-color: var(--brand-cyan) !important; color: var(--brand-blue); font-weight: 700; }
.search-container { border-radius: 8px; background: #f2f3f5 !important; }
.search-wrapper { border-color: var(--brand-cyan) !important; border-radius: 11px; overflow: hidden; }
.search-btn, .blue-btn { background: var(--brand-orange) !important; }
.flow-section { background: transparent !important; }
.flow-section h2 { font-weight: 700; color: var(--brand-ink) !important; }

/* 购物车与支付 */
.cart-items { display: grid; gap: 10px; margin: 12px 0; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 0; border-bottom: 1px solid #e7eef3; transition: opacity .18s; }
.cart-item.is-unselected { opacity: .5; }
.cart-select { display: grid; place-items: center; flex: 0 0 20px; cursor: pointer; }
.cart-select input, .cart-select-all input { width: 15px; height: 15px; accent-color: var(--brand-orange); cursor: pointer; }
.cart-item-copy { min-width: 0; flex: 1; }
.cart-item strong, .cart-item small { display: block; }
.cart-item strong { color: #173d5b; font-size: 13px; }
.cart-item small { margin-top: 3px; color: #8a9aaa; font-size: 11px; }
.cart-item button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff1ed; color: #e25b3c; cursor: pointer; }
.cart-empty-message { margin: 12px 0; color: #9aa8b4; font-size: 12px; }
.cart-summary { display: grid; grid-template-columns:auto 1fr auto; align-items:center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf2f6; color: #71869a; font-size: 12px; }
.cart-select-all { color: #526d80; cursor: pointer; white-space: nowrap; }
.cart-summary strong { color: var(--brand-orange); }
.cart-button { display: inline-block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: var(--brand-orange); color: #fff !important; cursor: pointer; text-align: center; }
.cart-button:disabled { background: #c9d2da; cursor: not-allowed; }
.cart-recent-order { margin-top: 11px; padding-top: 10px; border-top: 1px solid #edf2f6; }
.cart-recent-order > small { color: #9aa8b4; font-size: 11px; }
.cart-recent-button { width: 100%; padding: 7px 9px; border: 1px solid #dce8f1; border-radius: 5px; background: #f8fbfd; color: #526d80; font-size: 11px; text-align: left; cursor: pointer; }
.cart-recent-button small { display: block; margin-top: 3px; color: #8a9aaa; }
.payment-modal { display: none; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; padding: 20px; background: rgba(7,29,73,.68); }
.payment-modal.show { display: flex; }
.payment-card { position: relative; width: min(440px, 100%); padding: 28px; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center; }
.payment-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: #8a98a8; font-size: 26px; cursor: pointer; }
.payment-kicker { margin: 0; color: var(--brand-blue); font-size: 11px; letter-spacing: 3px; }
.payment-card h2 { margin: 4px 0 12px; color: #173d5b; font-weight: 600; }
.payment-order { padding: 10px; border-radius: 6px; background: #f5f8fc; color: #526d80; font-size: 13px; }
.payment-copy-order { margin-top: 7px; border: 0; background: transparent; color: var(--brand-blue); font-size: 11px; cursor: pointer; }
.payment-items { display: grid; gap: 6px; max-height: 110px; margin-top: 9px; overflow: auto; text-align: left; }
.payment-items span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-bottom: 1px solid #edf2f6; color: #526d80; font-size: 11px; }
.payment-items b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.payment-items small { flex: 0 0 auto; color: #8a9aaa; }
.payment-account { min-height: 18px; margin: 8px 0 0; color: #8a9aaa; font-size: 11px; }
.payment-methods { display: flex; gap: 10px; margin: 16px 0; }
.payment-method { flex: 1; padding: 9px; border: 1px solid #dce8f1; border-radius: 6px; background: #fff; color: #526d80; cursor: pointer; }
.payment-method.active { border-color: var(--brand-blue); background: #eef5ff; color: var(--brand-blue); font-weight: 700; }
.payment-method:disabled { cursor: not-allowed; opacity: .45; }
.payment-channel-tip { min-height: 17px; margin: -8px 0 10px; color: #8a9aaa; font-size: 11px; }
.payment-create { width: 100%; border: 0; cursor: pointer; }
.payment-qr { display: grid; justify-items: center; gap: 8px; margin-top: 16px; color: #71869a; font-size: 12px; }
.payment-qr img { width: 210px; height: 210px; padding: 8px; border: 1px solid #edf2f6; }
.payment-status { min-height: 20px; margin: 12px 0 0; color: #71869a; font-size: 12px; }
.payment-expiry { min-height: 17px; margin: 10px 0 0; color: #d88943; font-size: 11px; }
.payment-expiry[data-state="expired"] { color: #d35b4a; }
.payment-status[data-state="SUCCESS"], .payment-status[data-state="PAID"], .payment-status[data-state="TRADE_SUCCESS"], .payment-status[data-state="PAY_SUCCESS"], .payment-status[data-state="FINISHED"] { color: #1f9a6a; }
.payment-status[data-state="FAILED"], .payment-status[data-state="CLOSED"], .payment-status[data-state="TRADE_CLOSED"], .payment-status[data-state="CANCELLED"], .payment-status[data-state="EXPIRED"] { color: #d35b4a; }
.payment-done { padding: 8px 18px; border: 0; border-radius: 6px; background: #eef5ff; color: var(--brand-blue); cursor: pointer; }

@media(max-width:900px) {
  .main-nav { background: #fff; }
  .product-hero { min-height: 390px; }
  .banner { height: 310px !important; padding-left: 24px; }
  .banner:before { left: 24px; top: 38px; }
  .domain-box { margin-top: -28px !important; }
  .trademark-banner { height: 310px !important; }
  .trademark-banner:before, .trademark-banner:after { left: 24px; }
  .trademark-banner:after { top: 98px; max-width: 80%; line-height: 1.25; }
  .banner-hotspot { left: 24px !important; top: 205px !important; }
}
@media(max-width:560px) {
  .brand-copy strong { font-size: 19px !important; }
  .banner { height: 270px !important; }
  .banner:before { font-size: 10px; letter-spacing: 2px; }
  .banner h1 { font-size: 33px !important; }
  .banner p { font-size: 17px !important; }
  .domain-box { margin-top: -20px !important; }
  .category-tabs button { font-size: 12px; }
  .search-box input { border-radius: 10px !important; }
  .search-box button { margin-top: 8px; border-radius: 10px !important; }
  .trademark-banner { height: 270px !important; }
  .trademark-banner:after { font-size: 28px; top: 86px; }
  .banner-hotspot { top: 190px !important; }
  .trademark-search-form { border-radius: 16px !important; }
}