@charset "UTF-8";
/* ====================================================================
   96IDCtx 前台主题 · 基础层
   文件：assets/css/i9-base.css
   --------------------------------------------------------------------
   设计语言 : 对标主流云厂商官网体系（TDesign 规范）——白底、信息密集、
              4~6px 小圆角、近乎无投影、中性灰分层级、蓝白为主、红橙做强调。
   主色     : #0052D9（已确认）
   命名空间 : token 前缀 --i9-*，类名前缀 .i9-
   ==================================================================== */

/* ====================================================================
   1. 设计 Tokens
   ==================================================================== */
:root {
  /* ---- 品牌色 ---- */
  --i9-brand: #0052D9;
  --i9-brand-hover: #366EF4;
  --i9-brand-active: #003CAB;
  --i9-brand-disabled: #B5C7F0;
  --i9-brand-1: #F2F3FF;
  --i9-brand-2: #D9E1FF;
  --i9-brand-3: #B5C7FF;
  --i9-brand-4: #8EABFF;
  --i9-brand-6: #366EF4;
  --i9-brand-7: #0052D9;
  --i9-brand-8: #003CAB;
  --i9-brand-9: #002A7C;
  --i9-brand-ring: rgba(0, 82, 217, .12);
  /* 强调辅助色（用于品牌渐变：头像、数字、强调字等） */
  --i9-cyan: #2B7FFF;
  --i9-grad-brand: linear-gradient(135deg, #0052D9 0%, #2B7FFF 100%);

  /* ---- 功能色 ---- */
  --i9-success: #2BA471;
  --i9-success-hover: #56C08D;
  --i9-success-bg: #E3F9E9;
  --i9-success-text: #0C6B43;
  --i9-warning: #E37318;
  --i9-warning-hover: #EC8B39;
  --i9-warning-bg: #FFF1E9;
  --i9-warning-text: #A34700;
  --i9-error: #D54941;
  --i9-error-hover: #E34D59;
  --i9-error-bg: #FFF0ED;
  --i9-error-text: #A82A26;

  /* ---- 促销强调色（角标/价格，红橙系） ---- */
  --i9-accent-red: #FF4242;
  --i9-accent-orange: #FF6A00;
  --i9-accent-grad: linear-gradient(90deg, #FF6A00 0%, #FF4242 100%);
  --i9-accent-grad-soft: linear-gradient(90deg, #FFF3E8 0%, #FFECEC 100%);

  /* ---- 中性色 ---- */
  --i9-white: #FFFFFF;
  --i9-gray-1: #F3F3F3;
  --i9-gray-2: #EEEEEE;
  --i9-gray-3: #E7E7E7;
  --i9-gray-4: #DCDCDC;
  --i9-gray-5: #C5C5C5;
  --i9-gray-6: #A6A6A6;
  --i9-gray-7: #8B8B8B;
  --i9-gray-8: #777777;
  --i9-gray-9: #5E5E5E;
  --i9-gray-10: #4B4B4B;
  --i9-gray-11: #383838;
  --i9-gray-12: #2C2C2C;
  --i9-gray-13: #242424;
  --i9-gray-14: #181818;

  /* ---- 文字层级 ---- */
  --i9-text-1: #000000;
  --i9-text-2: rgba(0, 0, 0, .9);
  --i9-text-3: rgba(0, 0, 0, .6);
  --i9-text-4: rgba(0, 0, 0, .55);
  --i9-text-5: rgba(0, 0, 0, .45);
  --i9-text-inverse: #FFFFFF;

  /* ---- 边框 ---- */
  --i9-border: #DCDCDC;
  --i9-border-light: #E7E7E7;
  --i9-border-soft: #EEEEEE;
  --i9-border-input: #DCDCDC;
  --i9-border-strong: #C5C5C5;

  /* ---- 背景 ---- */
  --i9-bg: #FFFFFF;
  --i9-bg-page: #FFFFFF;
  --i9-bg-gray: #F3F3F3;
  --i9-bg-soft: #FAFAFA;
  --i9-bg-blue: #F2F3FF;
  --i9-bg-dark: #1A1A1A;
  --i9-mask: rgba(0, 0, 0, .5);

  /* ---- 圆角（2/4/6/8/999） ---- */
  --i9-radius-xs: 2px;
  --i9-radius-sm: 4px;
  --i9-radius-md: 6px;
  --i9-radius-lg: 8px;
  --i9-radius-pill: 999px;

  /* ---- 阴影（极轻） ---- */
  --i9-sh-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, .04), 0 8px 10px rgba(0, 0, 0, .06);
  --i9-sh-2: 0 2px 16px rgba(0, 0, 0, .08), 0 6px 12px rgba(0, 0, 0, .04);
  --i9-sh-3: 0 6px 30px rgba(0, 0, 0, .1), 0 12px 20px rgba(0, 0, 0, .06);
  --i9-sh-brand: 0 4px 14px rgba(0, 82, 217, .18);

  /* ---- 字体 ---- */
  --i9-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --i9-font-num: "DIN Alternate", "Bahnschrift", var(--i9-font);
  --i9-font-mono: "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- 字号 ---- */
  --i9-fs-hero: 44px;   --i9-lh-hero: 1.22;
  --i9-fs-h1: 32px;     --i9-lh-h1: 1.25;
  --i9-fs-h2: 24px;     --i9-lh-h2: 1.33;
  --i9-fs-h3: 20px;     --i9-lh-h3: 1.4;
  --i9-fs-h4: 16px;     --i9-lh-h4: 1.5;
  --i9-fs-body: 14px;   --i9-lh-body: 1.6;
  --i9-fs-sm: 13px;     --i9-lh-sm: 1.54;
  --i9-fs-xs: 12px;     --i9-lh-xs: 1.5;
  --i9-fs-price: 20px;
  --i9-fw-regular: 400; --i9-fw-medium: 500; --i9-fw-semibold: 600; --i9-fw-bold: 700;

  /* ---- 间距 ---- */
  --i9-sp-1: 4px;  --i9-sp-2: 8px;  --i9-sp-3: 12px; --i9-sp-4: 16px;
  --i9-sp-5: 20px; --i9-sp-6: 24px; --i9-sp-8: 32px; --i9-sp-10: 40px;
  --i9-sp-12: 48px; --i9-sp-16: 64px; --i9-sp-20: 80px;

  /* ---- 结构 ---- */
  --i9-container: 1200px;
  --i9-container-wide: 1320px;
  --i9-container-narrow: 960px;
  --i9-header-h: 60px;
  --i9-sec-py: 56px;
  --i9-card-pad: 20px;
  --i9-gap: 16px;

  /* ---- 层级 ---- */
  --i9-z-header: 900;
  --i9-z-mega: 880;
  --i9-z-drawer: 1000;
  --i9-z-modal: 1050;
  --i9-z-toast: 1060;

  /* ---- 动效 ---- */
  --i9-ease: cubic-bezier(.38, 0, .24, 1);
  --i9-dur-fast: .15s;
  --i9-dur: .24s;
}

/* ====================================================================
   2. 复位
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--i9-font);
  font-size: var(--i9-fs-body);
  line-height: var(--i9-lh-body);
  color: var(--i9-text-2);
  background: var(--i9-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--i9-fw-semibold); line-height: 1.3; color: var(--i9-text-2); }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--i9-dur-fast) var(--i9-ease); }
a:hover { color: var(--i9-brand); }
img, svg, video { display: block; max-width: 100%; height: auto; border: 0; }
button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--i9-border-soft); margin: var(--i9-sp-6) 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--i9-brand); outline-offset: 2px; border-radius: var(--i9-radius-xs); }

.i9-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 10px 18px; color: #fff; background: var(--i9-brand);
  border-radius: 0 0 var(--i9-radius-sm) 0;
}
.i9-skip:focus { left: 0; }

/* ====================================================================
   3. 容器与网格
   ==================================================================== */
.i9-container {
  width: 100%;
  max-width: var(--i9-container);
  margin-inline: auto;
  padding-inline: 20px;
}
.i9-container--wide { max-width: var(--i9-container-wide); }
.i9-container--narrow { max-width: var(--i9-container-narrow); }

.i9-section { padding-block: var(--i9-sec-py); }
.i9-section--gray { background: var(--i9-bg-gray); }
.i9-section--soft { background: var(--i9-bg-soft); }
.i9-section--blue { background: var(--i9-bg-blue); }
.i9-section--white { background: #fff; }
.i9-section--tight { padding-block: 32px; }
.i9-section--first { padding-top: 40px; }

.i9-grid { display: grid; gap: var(--i9-gap); }
.i9-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i9-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i9-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.i9-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.i9-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.i9-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.i9-grid--gap-sm { gap: 12px; }
.i9-grid--gap-lg { gap: 24px; }

.i9-flex { display: flex; }
.i9-inline-flex { display: inline-flex; }
.i9-items-center { align-items: center; }
.i9-items-start { align-items: flex-start; }
.i9-items-end { align-items: flex-end; }
.i9-justify-between { justify-content: space-between; }
.i9-justify-center { justify-content: center; }
.i9-justify-end { justify-content: flex-end; }
.i9-flex-col { flex-direction: column; }
.i9-flex-wrap { flex-wrap: wrap; }
.i9-flex-1 { flex: 1 1 auto; min-width: 0; }
.i9-gap-1 { gap: 4px; } .i9-gap-2 { gap: 8px; } .i9-gap-3 { gap: 12px; }
.i9-gap-4 { gap: 16px; } .i9-gap-5 { gap: 20px; } .i9-gap-6 { gap: 24px; }
.i9-mt-1 { margin-top: 4px; } .i9-mt-2 { margin-top: 8px; }
.i9-mt-3 { margin-top: 12px; } .i9-mt-4 { margin-top: 16px; } .i9-mt-6 { margin-top: 24px; }
.i9-mb-2 { margin-bottom: 8px; } .i9-mb-3 { margin-bottom: 12px; } .i9-mb-4 { margin-bottom: 16px; }
.i9-ml-auto { margin-left: auto; }
.i9-w-full { width: 100%; }
.i9-text-center { text-align: center; }
.i9-text-right { text-align: right; }
.i9-relative { position: relative; }
.i9-hidden { display: none !important; }

/* ====================================================================
   4. 文字
   ==================================================================== */
.i9-hero-title { font-size: var(--i9-fs-hero); line-height: var(--i9-lh-hero); font-weight: var(--i9-fw-bold); color: var(--i9-text-1); letter-spacing: -.5px; }
.i9-h1 { font-size: var(--i9-fs-h1); line-height: var(--i9-lh-h1); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-h2 { font-size: var(--i9-fs-h2); line-height: var(--i9-lh-h2); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-h3 { font-size: var(--i9-fs-h3); line-height: var(--i9-lh-h3); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-h4 { font-size: var(--i9-fs-h4); line-height: var(--i9-lh-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-text { font-size: var(--i9-fs-body); color: var(--i9-text-2); }
.i9-text-sm { font-size: var(--i9-fs-sm); line-height: var(--i9-lh-sm); color: var(--i9-text-3); }
.i9-text-xs { font-size: var(--i9-fs-xs); line-height: var(--i9-lh-xs); color: var(--i9-text-4); }
.i9-text-secondary { color: var(--i9-text-3); }
.i9-text-muted { color: var(--i9-text-4); }
.i9-text-brand { color: var(--i9-brand); }
.i9-text-error { color: var(--i9-error); }
.i9-text-success { color: var(--i9-success); }
.i9-fw-medium { font-weight: var(--i9-fw-medium); }
.i9-fw-semibold { font-weight: var(--i9-fw-semibold); }
.i9-fw-bold { font-weight: var(--i9-fw-bold); }
.i9-num { font-family: var(--i9-font-num); font-variant-numeric: tabular-nums; }
.i9-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i9-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
.i9-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }

/* 区块头：左标题 + 右「更多」 */
.i9-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--i9-sp-4);
  margin-bottom: var(--i9-sp-6);
}
.i9-sec-head__left { min-width: 0; }
.i9-sec-head__title {
  font-size: var(--i9-fs-h2);
  line-height: var(--i9-lh-h2);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-sec-head__desc { margin-top: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-sec-head__more {
  display: inline-flex; align-items: center; gap: 4px;
  flex: none; font-size: var(--i9-fs-sm); color: var(--i9-brand);
}
.i9-sec-head__more:hover { color: var(--i9-brand-hover); }
.i9-sec-head--center { flex-direction: column; align-items: center; text-align: center; }

/* ====================================================================
   5. 按钮
   ==================================================================== */
.i9-btn {
  --_bg: var(--i9-brand);
  --_fg: #fff;
  --_bd: var(--i9-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-regular);
  line-height: 1;
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--i9-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--i9-dur-fast) var(--i9-ease),
              border-color var(--i9-dur-fast) var(--i9-ease),
              color var(--i9-dur-fast) var(--i9-ease),
              box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-btn:hover { background: var(--i9-brand-hover); border-color: var(--i9-brand-hover); color: #fff; }
.i9-btn:active { background: var(--i9-brand-active); border-color: var(--i9-brand-active); }
.i9-btn:focus-visible { box-shadow: 0 0 0 2px var(--i9-brand-ring); }
.i9-btn[disabled], .i9-btn.is-disabled {
  background: var(--i9-brand-disabled);
  border-color: var(--i9-brand-disabled);
  color: #fff;
  pointer-events: none;
}

.i9-btn--secondary { --_bg: #fff; --_fg: var(--i9-brand); --_bd: var(--i9-brand); }
.i9-btn--secondary:hover { --_bg: var(--i9-brand-1); --_fg: var(--i9-brand-hover); --_bd: var(--i9-brand-hover); }

.i9-btn--default { --_bg: #fff; --_fg: var(--i9-text-2); --_bd: var(--i9-border); }
.i9-btn--default:hover { --_bg: #fff; --_fg: var(--i9-brand); --_bd: var(--i9-brand); }

.i9-btn--text { --_bg: transparent; --_fg: var(--i9-brand); --_bd: transparent; }
.i9-btn--text:hover { --_bg: var(--i9-brand-1); --_fg: var(--i9-brand-hover); --_bd: transparent; }

.i9-btn--danger { --_bg: var(--i9-error); --_fg: #fff; --_bd: var(--i9-error); }
.i9-btn--danger:hover { --_bg: var(--i9-error-hover); --_bd: var(--i9-error-hover); }

.i9-btn--accent { --_bg: transparent; --_fg: #FF4242; --_bd: #FF4242; }
.i9-btn--accent:hover { --_bg: #FF4242; --_fg: #fff; --_bd: #FF4242; }

.i9-btn--lg { height: 40px; padding: 0 24px; font-size: 15px; }
.i9-btn--sm { height: 26px; padding: 0 10px; font-size: var(--i9-fs-xs); }
.i9-btn--block { display: flex; width: 100%; }
.i9-btn--icon { width: 32px; padding: 0; }
.i9-btn-group { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.i9-btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.i9-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-top-color: #fff;
  border-radius: 50%;
  animation: i9-spin .7s linear infinite;
}
.i9-btn--secondary.is-loading::after,
.i9-btn--default.is-loading::after,
.i9-btn--text.is-loading::after { border-color: var(--i9-brand-3); border-top-color: var(--i9-brand); }
@keyframes i9-spin { to { transform: rotate(360deg); } }

.i9-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--i9-fs-sm); color: var(--i9-brand); }
.i9-link:hover { color: var(--i9-brand-hover); }

/* ====================================================================
   6. 卡片
   ==================================================================== */
.i9-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease),
              box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-card--pad { padding: var(--i9-card-pad); }
.i9-card--pad-lg { padding: var(--i9-sp-8); }
.i9-card--flat { border-color: transparent; }
.i9-card--shadow { box-shadow: var(--i9-sh-1); border-color: transparent; }
.i9-card--hover:hover,
a.i9-card:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); }
.i9-card--outline:hover { border-color: var(--i9-brand); }

.i9-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-card__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-card__body { padding: 20px; }
.i9-card__body--tight { padding: 12px 20px; }
.i9-card__foot { padding: 12px 20px; border-top: 1px solid var(--i9-border-soft); background: var(--i9-bg-soft); }

/* ====================================================================
   7. 左栏类目 + 右侧内容（产品页核心形态）
   ==================================================================== */
.i9-split {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
}
.i9-split__aside { padding: 8px; background: var(--i9-bg-soft); border-right: 1px solid var(--i9-border-soft); }
.i9-split__body { padding: 20px 24px; min-width: 0; }

.i9-cat { display: flex; flex-direction: column; }
.i9-cat__item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-2);
  text-align: left;
  border-radius: var(--i9-radius-sm);
  transition: background var(--i9-dur-fast) var(--i9-ease), color var(--i9-dur-fast) var(--i9-ease);
}
.i9-cat__item:hover { color: var(--i9-brand); background: #fff; }
.i9-cat__item.is-active { color: var(--i9-brand); font-weight: var(--i9-fw-semibold); background: #fff; }
.i9-cat__item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 16px;
  transform: translateY(-50%);
  background: var(--i9-brand);
  border-radius: 0 2px 2px 0;
}

.i9-tabline {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-tabline__item { position: relative; padding: 4px 0; font-size: var(--i9-fs-body); color: var(--i9-text-3); }
.i9-tabline__item:hover { color: var(--i9-brand); }
.i9-tabline__item.is-active { color: var(--i9-brand); font-weight: var(--i9-fw-medium); }
.i9-tabline__item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -15px;
  height: 2px; background: var(--i9-brand);
}

/* ====================================================================
   8. 产品卡
   ==================================================================== */
.i9-prod {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--i9-radius-md);
  transition: background var(--i9-dur-fast) var(--i9-ease), box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-prod:hover { background: #fff; box-shadow: var(--i9-sh-1); }
.i9-prod__ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--i9-brand);
}
.i9-prod__ico svg, .i9-prod__ico img { width: 24px; height: 24px; }
.i9-prod__main { min-width: 0; }
.i9-prod__name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
  line-height: 1.45;
}
.i9-prod:hover .i9-prod__name { color: var(--i9-brand); }
.i9-prod__desc { margin-top: 4px; font-size: var(--i9-fs-sm); line-height: 1.6; color: var(--i9-text-3); }
.i9-prod__badges { display: inline-flex; gap: 4px; }

.i9-badge {
  display: inline-flex; align-items: center;
  height: 16px; padding: 0 4px;
  font-size: 11px; line-height: 1;
  border-radius: var(--i9-radius-xs);
}
.i9-badge--new { color: #fff; background: var(--i9-success); }
.i9-badge--hot { color: #fff; background: var(--i9-accent-red); }
.i9-badge--rec { color: #fff; background: var(--i9-accent-orange); }
.i9-badge--free { color: var(--i9-success-text); background: var(--i9-success-bg); }
.i9-badge--gray { color: var(--i9-text-3); background: var(--i9-gray-1); }

/* ====================================================================
   9. 价格
   ==================================================================== */
.i9-pricecard {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease), transform var(--i9-dur) var(--i9-ease);
}
/* 悬浮时顶部一条主色光带（灵动细节） */
.i9-pricecard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, #0052D9, #12C2E9);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity var(--i9-dur) var(--i9-ease), transform var(--i9-dur) var(--i9-ease);
}
.i9-pricecard:hover::before { opacity: 1; transform: scaleX(1); }
.i9-pricecard:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); transform: translateY(-2px); }
.i9-pricecard__name {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-medium); color: var(--i9-text-2);
}
.i9-pricecard__desc { margin-top: 6px; min-height: 40px; font-size: var(--i9-fs-sm); line-height: 1.6; color: var(--i9-text-3); }
.i9-pricecard__price {
  margin-top: 10px;
  font-family: var(--i9-font-num);
  font-size: var(--i9-fs-price);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-error);
  line-height: 1.2;
}
.i9-pricecard__price small { font-size: var(--i9-fs-sm); font-weight: var(--i9-fw-regular); color: var(--i9-text-4); }

.i9-price { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--i9-font-num); color: var(--i9-error); }
.i9-price__symbol { font-size: .62em; }
.i9-price__num { font-size: 1em; font-weight: var(--i9-fw-semibold); }
.i9-price__unit { font-size: .58em; color: var(--i9-text-4); font-weight: var(--i9-fw-regular); }
.i9-price__origin { font-size: .58em; color: var(--i9-text-4); text-decoration: line-through; }
.i9-price--sm { font-size: 15px; }
.i9-price--md { font-size: 20px; }
.i9-price--lg { font-size: 28px; }

/* ====================================================================
   10. 动态列表 / 标签 / 表格
   ==================================================================== */
.i9-news { display: flex; flex-direction: column; }
.i9-news__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: var(--i9-fs-body);
  min-width: 0;
}
.i9-news__item + .i9-news__item { border-top: 1px dashed var(--i9-border-soft); }
.i9-news__tag {
  flex: none; padding: 1px 6px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand); background: var(--i9-brand-1);
  border-radius: var(--i9-radius-xs);
}
.i9-news__tag--price { color: var(--i9-warning-text); background: var(--i9-warning-bg); }
.i9-news__tag--new { color: var(--i9-success-text); background: var(--i9-success-bg); }
.i9-news__title { flex: 1 1 auto; min-width: 0; color: var(--i9-text-2); }
.i9-news__item:hover .i9-news__title { color: var(--i9-brand); }
.i9-news__date { flex: none; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }

.i9-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-3); background: var(--i9-gray-1);
  border-radius: var(--i9-radius-xs);
}
.i9-tag--brand { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-tag--success { color: var(--i9-success-text); background: var(--i9-success-bg); }
.i9-tag--warning { color: var(--i9-warning-text); background: var(--i9-warning-bg); }
.i9-tag--error { color: var(--i9-error-text); background: var(--i9-error-bg); }
.i9-tag--pill { border-radius: var(--i9-radius-pill); }

.i9-table { font-size: var(--i9-fs-sm); }
.i9-table th {
  padding: 12px 16px;
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-3);
  text-align: left;
  white-space: nowrap;
  background: var(--i9-bg-soft);
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-table td {
  padding: 14px 16px;
  color: var(--i9-text-2);
  border-bottom: 1px solid var(--i9-border-soft);
  vertical-align: middle;
}
.i9-table tbody tr:hover td { background: var(--i9-brand-1); }

/* ====================================================================
   11. 表单
   ==================================================================== */
.i9-field { margin-bottom: 16px; }
.i9-field__label { display: block; margin-bottom: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-2); }
.i9-field__hint { margin-top: 4px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-input, .i9-select {
  display: block; width: 100%; height: 32px; padding: 0 12px;
  font-size: var(--i9-fs-body); color: var(--i9-text-2);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-sm);
  transition: border-color var(--i9-dur-fast) var(--i9-ease), box-shadow var(--i9-dur-fast) var(--i9-ease);
}
/* 文本域：高度自适应，不继承 .i9-input 的固定 32px */
.i9-textarea {
  display: block; width: 100%; height: auto; min-height: 88px; padding: 8px 12px;
  font-size: var(--i9-fs-body); color: var(--i9-text-2);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-sm);
  resize: vertical;
  transition: border-color var(--i9-dur-fast) var(--i9-ease), box-shadow var(--i9-dur-fast) var(--i9-ease);
}
.i9-input::placeholder, .i9-textarea::placeholder { color: var(--i9-text-5); }
.i9-input:hover, .i9-select:hover, .i9-textarea:hover { border-color: var(--i9-border-strong); }
.i9-input:focus, .i9-select:focus, .i9-textarea:focus { border-color: var(--i9-brand); box-shadow: 0 0 0 2px var(--i9-brand-ring); }
.i9-select {
  padding-right: 30px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}
.i9-input--sm, .i9-select--sm { height: 26px; font-size: var(--i9-fs-xs); }
.i9-input-group { display: flex; align-items: center; gap: 8px; }
.i9-input-group .i9-input { flex: 1 1 auto; min-width: 0; }

.i9-searchbox {
  display: flex; align-items: center; gap: 8px;
  width: 220px; height: 32px; padding: 0 12px;
  background: var(--i9-gray-1);
  border: 1px solid transparent;
  border-radius: var(--i9-radius-sm);
  transition: all var(--i9-dur) var(--i9-ease);
}
.i9-searchbox:focus-within { width: 320px; background: #fff; border-color: var(--i9-brand); }
.i9-searchbox input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font-size: var(--i9-fs-sm); }
.i9-searchbox input:focus { outline: none; }
.i9-searchbox .i9-ico { flex: none; color: var(--i9-text-4); }

/* ====================================================================
   12. 步骤 / 空态 / 骨架 / 分页 / 提示
   ==================================================================== */
.i9-steps { display: flex; align-items: flex-start; }
.i9-steps__item { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--i9-text-4); }
.i9-steps__item::after { content: ""; flex: 1 1 auto; height: 1px; margin: 0 12px; background: var(--i9-border-light); }
.i9-steps__item:last-child { flex: 0 0 auto; }
.i9-steps__item:last-child::after { display: none; }
.i9-steps__num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: var(--i9-fs-xs); color: var(--i9-text-3);
  background: var(--i9-gray-1); border-radius: 50%;
}
.i9-steps__title { font-size: var(--i9-fs-sm); }
.i9-steps__item.is-active { color: var(--i9-brand); }
.i9-steps__item.is-active .i9-steps__num { color: #fff; background: var(--i9-brand); }
.i9-steps__item.is-done .i9-steps__num { color: #fff; background: var(--i9-success); }

.i9-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--i9-text-4); }
.i9-empty__icon { width: 56px; height: 56px; color: var(--i9-gray-4); }
.i9-empty__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-medium); color: var(--i9-text-3); }

.i9-skeleton { position: relative; overflow: hidden; background: var(--i9-gray-2); border-radius: var(--i9-radius-sm); }
.i9-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%);
  animation: i9-shimmer 1.4s infinite;
}
@keyframes i9-shimmer { to { transform: translateX(100%); } }

.i9-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.i9-pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  font-size: var(--i9-fs-sm); color: var(--i9-text-2);
  background: #fff; border: 1px solid var(--i9-border);
  border-radius: var(--i9-radius-sm);
}
.i9-pager__item:hover { color: var(--i9-brand); border-color: var(--i9-brand); }
.i9-pager__item.is-active { color: #fff; background: var(--i9-brand); border-color: var(--i9-brand); }
.i9-pager__item.is-disabled { color: var(--i9-text-5); pointer-events: none; }

.i9-alert {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand); background: var(--i9-brand-1);
  border-radius: var(--i9-radius-sm);
}
.i9-alert--warning { color: var(--i9-warning-text); background: var(--i9-warning-bg); }
.i9-alert--success { color: var(--i9-success-text); background: var(--i9-success-bg); }
.i9-alert--error { color: var(--i9-error-text); background: var(--i9-error-bg); }

/* ====================================================================
   13. 弹层
   ==================================================================== */
.i9-toast-stack {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: var(--i9-z-toast);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.i9-toast {
  display: flex; align-items: center; gap: 8px;
  min-width: 200px; max-width: 420px;
  padding: 9px 16px;
  font-size: var(--i9-fs-sm); color: var(--i9-text-2);
  background: #fff; border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-sm);
  box-shadow: var(--i9-sh-2);
  pointer-events: auto;
  animation: i9-toast-in var(--i9-dur) var(--i9-ease);
}
.i9-toast.is-leaving { animation: i9-toast-out var(--i9-dur-fast) var(--i9-ease) forwards; }
.i9-toast__icon { flex: none; width: 16px; height: 16px; }
.i9-toast--success .i9-toast__icon { color: var(--i9-success); }
.i9-toast--error .i9-toast__icon { color: var(--i9-error); }
.i9-toast--warning .i9-toast__icon { color: var(--i9-warning); }
.i9-toast--info .i9-toast__icon { color: var(--i9-brand); }
@keyframes i9-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes i9-toast-out { to { opacity: 0; transform: translateY(-12px); } }

.i9-overlay {
  position: fixed; inset: 0; z-index: var(--i9-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--i9-mask);
  opacity: 0; visibility: hidden;
  transition: opacity var(--i9-dur) var(--i9-ease), visibility var(--i9-dur) var(--i9-ease);
}
.i9-overlay.is-open { opacity: 1; visibility: visible; }
.i9-modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--i9-radius-lg);
  box-shadow: var(--i9-sh-3);
  transform: translateY(8px);
  transition: transform var(--i9-dur) var(--i9-ease);
}
.i9-overlay.is-open .i9-modal { transform: none; }
.i9-modal--sm { max-width: 400px; }
.i9-modal--lg { max-width: 800px; }
.i9-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--i9-border-soft); }
.i9-modal__title { flex: 1 1 auto; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); }
.i9-modal__body { padding: 24px; overflow: auto; }
.i9-modal__foot { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--i9-border-soft); }

.i9-drawer {
  position: fixed; top: 0; bottom: 0; z-index: var(--i9-z-drawer);
  width: min(88vw, 340px);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: var(--i9-sh-3);
  transition: transform var(--i9-dur) var(--i9-ease);
}
.i9-drawer--right { right: 0; transform: translateX(101%); }
.i9-drawer--left { left: 0; transform: translateX(-101%); }
.i9-drawer.is-open { transform: none; }
.i9-drawer__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--i9-border-soft); }
.i9-drawer__title { flex: 1 1 auto; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); }
.i9-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }

.i9-tooltip {
  position: absolute; z-index: 1100;
  max-width: 260px; padding: 6px 10px;
  font-size: var(--i9-fs-xs); line-height: 1.5;
  color: #fff; background: rgba(0, 0, 0, .85);
  border-radius: var(--i9-radius-sm);
  pointer-events: none; opacity: 0;
  transition: opacity var(--i9-dur-fast) var(--i9-ease);
}
.i9-tooltip.is-open { opacity: 1; }

.i9-no-scroll { overflow: hidden; }

/* 图片自适应兜底
   --------------------------------------------------------------------
   主题里多处是「定宽/定高的插画容器 + 内含 <img>」（如 .i9-trial__art
   200×120、.i9-banner-card__art 200×104）。若图片自身尺寸更大，
   在没有任何约束时会直接溢出容器、撑破卡片（实测：试用中心插图溢出）。
   全站已有重置 img { max-width:100%; height:auto } 兜住「横向溢出」，
   但它管不了「纵向溢出」：.i9-trial__art 是固定高 88px（手机）的容器，
   而插图按 width:100% 撑满后高度 = 宽 / 2 ≈ 165px，会向下压住后面的内容。
   所以这里让容器内的图缩进框内（contain），水平垂直都不越界。

   注意：**不含** .i9-banner__art —— 它的 .i9-banner__img 自带
   max-width + height:auto（还有浮动动画），强行 height:100% 会把它压扁。 */
.i9-trial__art img,
.i9-banner-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ====================================================================
   14. 图标与图片占位
   ==================================================================== */
.i9-ico { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -.18em; }
.i9-ico--xs { width: 12px; height: 12px; }
.i9-ico--sm { width: 14px; height: 14px; }
.i9-ico--md { width: 20px; height: 20px; }
.i9-ico--lg { width: 24px; height: 24px; }
.i9-ico--xl { width: 32px; height: 32px; }
.i9-ico--2xl { width: 40px; height: 40px; }
.i9-ico-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--i9-brand); background: var(--i9-brand-1);
  border-radius: var(--i9-radius-md);
}
.i9-ico-box--lg { width: 48px; height: 48px; }
.i9-ico-box--plain { background: none; }

/* 图片占位：data-i9-ph="说明" 会显示在右下角，方便你上线前逐张替换 */
.i9-ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--i9-text-4);
  background: linear-gradient(135deg, #F2F3FF 0%, #EAF1FF 50%, #D9E1FF 100%);
  border-radius: var(--i9-radius-md);
}
.i9-ph::after {
  content: attr(data-i9-ph);
  position: absolute; right: 8px; bottom: 6px;
  font-size: 11px; color: var(--i9-text-4);
}
.i9-ph > svg { width: 40%; height: auto; max-height: 60%; color: var(--i9-brand-4); }
.i9-ph--dark { background: linear-gradient(135deg, #0B1B3A 0%, #123A7A 55%, #0052D9 100%); color: rgba(255, 255, 255, .7); }
.i9-ph--dark::after { color: rgba(255, 255, 255, .55); }
.i9-ph--dark > svg { color: rgba(255, 255, 255, .35); }
.i9-ph--gray { background: var(--i9-gray-1); }

/* ====================================================================
   15. 动效偏好
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}