/* ==========================================================================
   Token 超充站 · 独立落地页（路径 /tss/）
   --------------------------------------------------------------------------
   来源：D:\Project\C#\Token超充站\落地页\styles.css（全量迁移，保留原设计取值）
   分工：官网 styles.css 负责站点外壳（header / footer / 设计令牌 / 全局重置），
        本文件只负责落地页正文区与咨询弹窗。

   迁移时共 5 处改动，其余声明与取值一律与原文件保持一致：
   1) 作用域隔离：所有选择器加 `.tss` 前缀；弹窗在 .tss 之外（与官网 footer
      平级），用 `.tss-modal` 作作用域根。避免与官网同名类相互覆盖。
   2) 原落地页自带的 .site-header / .site-footer / .brand / .brand-mark /
      .desktop-nav / .header-cta 整段移除 —— 头尾已改为官网统一结构。
   3) 原 html / body / * / button / a 的全局规则移除：官网 styles.css 已提供
      同义重置；落地页的底色与字体改由 `.tss` 承载，不再覆盖 body。
   4) @keyframes modal-in → tss-modal-in（关键帧名是全局命名空间，避免撞名）。
   5) 原两段响应式媒体查询未迁移：官网以 --page-min-width: 1280px 锁定桌面布局，
      与官网其余页面保持一致；若保留断点，窄窗下会出现「外壳桌面、正文单列」的
      错位。需要移动端适配时应整体改造，而不是单独放开这一页。
   ========================================================================== */

/* ---------- 设计令牌：与原落地页一致，作用域收在 .tss / .tss-modal 下 ----------
   主题色为「一键对接」图标里的绿：WorkBuddy 图标主体 #0CC8A6，向右下过渡到 #49CC7E。
   主题取该绿深一档的 #0BA47E（白底 3.17:1，够 50px 大标题用）；
   Cherry 图标里的 #23AF69 偏黄绿、CodeBuddy 的 #2EA99D 偏灰青，只留在图标本身。
   --green        装饰性填充（圆点 / 柱状图 / 进度条 / 大标题强调）
   --green-deep   白底上的小字与眉标（6.6:1）
   --green-soft   浅底（图标底、选中态） */
.tss,
.tss-modal {
  --ink: #141326;
  --muted: #6f6b80;
  --soft: #f4faf8;
  --line: #e4eeeb;
  --green: #10c99c;
  --green-deep: #056a51;
  --green-soft: #e1f5ef;
  --cyan: #b9f6f0;
  --orange: #ffb96e;
  --white: #ffffff;
  --shadow: 0 28px 80px rgba(4, 90, 72, .13);
  --radius-lg: 30px;
  --radius-md: 20px;
}

/* 锚点跳转（页内「了解更多」等）保持平滑滚动。
   本站只有这一页需要，且本文件只在 /tss/ 加载，故直接写在 html 上。 */
html {
  scroll-behavior: smooth;
}

/* 正文区根节点：原 body 的底色 / 字色 / 字体 + 原 .page-shell 的溢出裁剪
   （hero 的装饰轨道与悬浮卡片允许溢出容器，但不得撑出横向滚动条）。 */
.tss {
  color: var(--ink);
  background: #fafdfc;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- Hero ---------- */
.tss .section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  max-width: 1180px;
  margin: 0 auto;
}

.tss .hero {
  min-height: 650px;
  align-items: center;
  padding: 76px 0 70px;
  position: relative;
}

.tss .hero-copy {
  padding-left: 8px;
  position: relative;
  z-index: 2;
}

/* 眉标：正文 hero 与弹窗里各用一处，两处作用域都要覆盖
   （原文件是全局选择器，作用域化后必须各写一条） */
.tss .eyebrow,
.tss .section-kicker,
.tss-modal .section-kicker {
  color: var(--green);
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 750;
}

.tss .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  /* 眉标字号单独放大：section-kicker 仍是 10px，不受影响 */
  font-size: 26px;
  letter-spacing: .08em;
}

/* 眉标前的标志：用品图标（assets/tss.png，与下载页同一张）。
   图标自身已是圆角方块 + 品牌绿，所以不再套白底和描边，只给一点投影把它从底色上抬起来。 */
.tss .eyebrow-icons {
  display: flex;
  align-items: center;
  flex: none;
}

.tss .eyebrow-icons img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(4, 90, 72, .18);
}

/* 主标题是三行承诺（积分 / 限量 / 价格），一行一个主题。
   字号必须比原来单句标题小：三行 × 50px 才能在一栏（约 554px）里放下
   最长那句「价格最低 5 折，越充越省」，超过 52px 就会在栏内折行。 */
.tss .hero h1 {
  margin: 0;
  max-width: 560px;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.28;
  letter-spacing: -.04em;
  font-weight: 680;
}

/* 每句独占一行，窄窗下也只在句内断行，不会两句挤在一起 */
.tss .hero h1 .hero-line {
  display: block;
}

.tss .hero h1 em {
  color: var(--green);
  font-style: normal;
}

.tss .hero-description {
  /* 两句话各自成行（HTML 里有 <br>）：520px 是实测「第一句恰好一行」的宽度，
     窄于此值会把「额度」拆到下一行，出现孤字行 */
  max-width: 520px;
  margin: 24px 0 31px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

/* 描述里的赠积分承诺：用品牌绿提亮，避免埋在灰字里被忽略 */
.tss .hero-description b {
  color: var(--green-deep);
  font-weight: 700;
}

.tss .hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.tss .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 0;
    border-radius: 999px;
    padding: 7px 20px 7px 23px;
    color: #fff;
    background: var(--ink);
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 12px 24px rgba(20, 19, 38, .14);
    transition: .25s ease;
}

.tss .primary-button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
}

.tss .primary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 17px 28px rgba(20, 19, 38, .2);
}

.tss .text-button {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.tss .text-button span {
  color: var(--green);
  margin-left: 8px;
  font-size: 16px;
}

.tss .trust-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 55px;
  color: var(--muted);
}

.tss .avatar-stack {
  display: flex;
  padding-right: 7px;
}

.tss .avatar-stack span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-right: -7px;
  border-radius: 50%;
  border: 2px solid #fafdfc;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  background: var(--cyan);
}

.tss .avatar-stack span:nth-child(2) {
  background: #b7e7d9;
}

.tss .avatar-stack span:nth-child(3) {
  background: #ffd9a7;
}

.tss .avatar-stack span:nth-child(4) {
  background: var(--ink);
  color: #fff;
}

.tss .trust-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.tss .trust-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.tss .trust-divider {
  width: 1px;
  height: 28px;
  margin: 0 7px;
  background: var(--line);
}

.tss .rating span {
  color: #f4a843;
  font-size: 10px;
  letter-spacing: 1px;
}

.tss .hero-visual {
  min-height: 500px;
  display: grid;
  place-items: center;
  position: relative;
}

.tss .visual-glow {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 200, 166, .38), rgba(170, 235, 220, .18) 58%, transparent 70%);
  filter: blur(8px);
}

.tss .orbit {
  position: absolute;
  border: 1px solid rgba(11, 164, 126, .2);
  border-radius: 50%;
  transform: rotate(-25deg);
}

.tss .orbit-one {
  width: 540px;
  height: 275px;
}

.tss .orbit-two {
  width: 450px;
  height: 335px;
  transform: rotate(35deg);
  border-color: rgba(11, 164, 126, .2);
}

.tss .dashboard-card {
  position: absolute;
  width: 356px;
  padding: 28px 27px 24px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  transform: rotate(-4deg);
}

.tss .dashboard-top,
.tss .balance-meta,
.tss .chart-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tss .dashboard-top {
  color: var(--muted);
  font-size: 13px;
}

.tss .live-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #10c3a2;
  box-shadow: 0 0 0 4px rgba(16, 195, 162, .16);
}

.tss .menu-dot {
  letter-spacing: 2px;
}

/* 卡片头：圆点在左、标题居中、菜单在右。
   居中用 auto 外边距吃掉两侧剩余空间 —— 原先是给圆点写死负外边距，
   卡片一加宽就失效（字会偏左、绿点跑到中间），这里换成不依赖宽度的写法。 */
.tss .dashboard-top > span:nth-child(2) {
  margin: 0 auto;
}

.tss .balance-label {
  margin-top: 38px;
  color: var(--muted);
  font-size: 14px;
}

.tss .balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
}

.tss .balance strong {
  font-size: 38px;
  letter-spacing: -.06em;
}

.tss .balance span {
  color: var(--muted);
  font-size: 13px;
}

.tss .balance-progress {
  height: 6px;
  margin: 18px 0 12px;
  border-radius: 10px;
  background: #e4f2ee;
  overflow: hidden;
}

.tss .balance-progress span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.tss .balance-meta {
  color: var(--muted);
  font-size: 12px;
}

.tss .balance-meta b {
  padding: 6px 10px;
  color: #067f68;
  border-radius: 99px;
  background: #e1f5ef;
  font-size: 12px;
}

.tss .usage-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 92px;
  margin-top: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}

.tss .usage-chart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #2fbfa0, #c9efe4);
}

.tss .usage-chart span:last-child {
  background: linear-gradient(180deg, var(--green), #9fe6d4);
}

.tss .chart-caption {
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
}

.tss .chart-caption b {
  color: #067f68;
  font-size: 13px;
}

.tss .float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 17px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 17px 45px rgba(4, 90, 72, .12);
  backdrop-filter: blur(12px);
}

.tss .software-card {
  top: 56px;
  right: -6px;
  transform: rotate(5deg);
}

/* 左下浮卡：字号变大后卡片变宽，会盖住「近 30 天调用趋势」这行说明，
   所以往左挪出 32px（right 边缘 ≈873，仍压在卡片左下角，不碰左侧正文） */
.tss .saving-card {
  bottom: 52px;
  left: -56px;
  transform: rotate(-5deg);
}

.tss .mini-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 19px;
}

.tss .mini-icon.green {
  color: var(--green-deep);
  background: var(--green-soft);
}

.tss .mini-icon.orange {
  color: #c67719;
  background: #fff0dc;
}

.tss .float-card b {
  display: block;
  font-size: 14px;
}

.tss .float-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.tss .check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 9px;
  color: #fff;
  border-radius: 50%;
  background: #0ba47e;
  font-size: 12px;
}

.tss .spark {
  position: absolute;
  color: var(--green);
  font-size: 22px;
}

.tss .spark-a {
  top: 15px;
  left: 80px;
}

.tss .spark-b {
  right: 48px;
  bottom: 20px;
  color: #0ba47e;
}

.tss .spark-c {
  right: 15px;
  top: 166px;
  color: var(--orange);
}

/* ---------- 适配软件条 ---------- */
/* ---------- 一键对接：支持软件图标 ----------
   布局是「标题一行 + 图标胶囊自动换行居中」，条目用 <ul><li>。
   新增软件只要在 HTML 里追加一个 <li>，无需改这里。 */
.tss .logo-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 30px 20px 38px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tss .logo-strip-title {
  margin: 0;
  /* 比原 12.5px 明显放大：这是整条区块的唯一标题，需要能一眼看到 */
  font-size: 17px;
  font-weight: 700;
  /* 中文字距会在末字右侧多留一格，用 text-indent 抵消，保证视觉居中 */
  letter-spacing: .08em;
  text-indent: .08em;
  color: var(--ink);
}

/* 后半句用品牌绿，和首屏「陈述 + 绿色强调」的节奏保持一致 */
.tss .logo-strip-title span {
  color: var(--green-deep);
}

.tss .logo-strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  /* 900px 是实测出来的「6 + 5」换行点：再宽会变成 7 + 4（末行明显偏短），
     再窄会挤成 3 行。条目增减后需重新核对这个值。 */
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tss .logo-strip-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(4, 90, 72, .05);
  font-size: 13px;
  font-weight: 550;
  color: #3a3552;
  white-space: nowrap;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tss .logo-strip-item:hover {
  border-color: #c9ece1;
  box-shadow: 0 8px 20px rgba(4, 90, 72, .1);
  transform: translateY(-1px);
}

.tss .logo-strip-icon {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* ---------- 优势区 ---------- */
.tss .section-block {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 0;
}

.tss .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 54px;
}

.tss .section-heading h2 {
  margin: 15px 0 0;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -.065em;
}

.tss .section-heading h2 span {
  color: var(--green);
}

.tss .section-heading p {
  max-width: 375px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.tss .advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}

.tss .advantage-card {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: .25s ease;
}

.tss .advantage-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(4, 90, 72, .08);
}

.tss .advantage-card.featured {
  color: #fff;
  border-color: transparent;
  background: var(--ink);
}

.tss .card-number {
  position: absolute;
  top: 31px;
  right: 31px;
  color: #a9a5b8;
  font-size: 10px;
  letter-spacing: .12em;
}

.tss .featured .card-number {
  color: #77738b;
}

.tss .card-icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin-bottom: 85px;
  border-radius: 18px;
  font-size: 28px;
}

.tss .icon-green {
  color: #3fdab0;
  background: #0c3a30;
}

.tss .icon-cyan {
  color: #2c5fe0;
  background: #e8eeff;
}

.tss .icon-orange {
  color: #ca791d;
  background: #fff0dc;
}

.tss .advantage-card h3 {
  margin: 0 0 13px;
  font-size: 21px;
  letter-spacing: -.05em;
}

.tss .advantage-card p {
  position: relative;
  z-index: 2;
  max-width: 260px;
  min-height: 64px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.tss .featured p {
  color: #a9a5b8;
}

.tss .advantage-card a {
  position: absolute;
  bottom: 30px;
  z-index: 2;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.tss .featured a {
  color: #fff;
}

.tss .advantage-card a span {
  margin-left: 10px;
  color: var(--green);
  font-size: 17px;
}

.tss .featured a span {
  color: #5fe0be;
}

.tss .card-pattern {
  position: absolute;
  right: -46px;
  bottom: -100px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}

.tss .card-pattern::after,
.tss .card-pattern::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: inherit;
  border-radius: inherit;
}

.tss .card-pattern::before {
  inset: 45px;
}

.tss .pattern-cyan {
  border-color: rgba(77, 107, 254, .14);
}

.tss .pattern-orange {
  border-color: rgba(218, 131, 41, .14);
}

/* ---------- 流程 / 定价（原落地页备用区块，暂未在页面中出现，随样式一并迁移） ---------- */
.tss .workflow {
  padding-top: 40px;
}

.tss .compact {
  margin-bottom: 55px;
}

.tss .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tss .step {
  position: relative;
  padding-right: 20px;
}

.tss .step-index {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green);
  font-size: 10px;
  font-weight: 750;
}

.tss .step-line {
  position: absolute;
  top: 18px;
  left: 57px;
  right: 0;
  height: 1px;
  background: var(--line);
}

.tss .step h3 {
  margin: 27px 0 10px;
  font-size: 17px;
  letter-spacing: -.04em;
}

.tss .step p {
  max-width: 200px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.tss .pricing {
  padding-top: 72px;
}

.tss .pricing-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 60px 70px;
  border-radius: var(--radius-lg);
  background: linear-gradient(105deg, #e8faf6 0%, #f4fdfb 50%, #eafbf7 100%);
}

.tss .pricing-panel h2 {
  margin: 14px 0 18px;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.065em;
}

.tss .pricing-panel h2 span {
  color: var(--green);
}

.tss .pricing-panel p {
  max-width: 370px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.tss .pricing-action {
  display: flex;
  align-items: center;
  gap: 25px;
}

.tss .price-highlight small,
.tss .safe-tip {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.tss .price-highlight strong {
  display: block;
  margin-top: 4px;
  color: var(--green-deep);
  font-size: 43px;
  letter-spacing: -.08em;
}

.tss .price-highlight sup {
  margin-left: 5px;
  font-size: 12px;
  letter-spacing: 0;
}

.tss .safe-tip {
  align-self: end;
  margin-left: -10px;
  margin-bottom: 2px;
}

/* ---------- 咨询弹窗（在 .tss 之外，与官网 footer 平级，故单独作用域） ---------- */
.tss-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 19, 38, .42);
  backdrop-filter: blur(8px);
}

.tss-modal[hidden] {
  display: none;
}

.tss-modal .modal-card {
  width: min(100%, 480px);
  position: relative;
  padding: 38px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(20, 19, 38, .25);
  animation: tss-modal-in .25s ease both;
}

.tss-modal .modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
}

.tss-modal .modal-progress {
  width: 100%;
  height: 4px;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--green-soft);
}

.tss-modal .modal-progress span {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .25s ease;
}

.tss-modal .modal-card h2 {
  margin: 13px 0 9px;
  font-size: 29px;
  letter-spacing: -.06em;
}

.tss-modal .modal-card > p {
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.tss-modal .intent-options {
  display: grid;
  gap: 10px;
}

.tss-modal .intent-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 17px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  transition: .2s ease;
}

.tss-modal .intent-options button span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.tss-modal .intent-options button:hover,
.tss-modal .intent-options button.selected {
  border-color: var(--green);
  background: #f3fdfa;
  box-shadow: 0 0 0 3px rgba(11, 164, 126, .12);
}

.tss-modal .intent-options button.selected::after {
  content: "✓";
  color: var(--green);
}

.tss-modal .modal-submit {
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  font-size: 12px;
  font-weight: 650;
  opacity: 1;
}

.tss-modal .modal-submit:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.tss-modal .modal-submit span {
  margin-left: 9px;
  font-size: 15px;
}

.tss-modal .modal-note {
  display: block;
  margin-top: 17px;
  color: #aaa6b7;
  text-align: center;
  font-size: 9px;
}

.tss-modal .modal-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border-radius: 14px;
  background: #edfaf6;
}

.tss-modal .modal-result[hidden] {
  display: none;
}

.tss-modal .result-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  border-radius: 50%;
  background: #0ba47e;
  font-size: 13px;
}

.tss-modal .modal-result strong,
.tss-modal .modal-result small {
  display: block;
}

.tss-modal .modal-result strong {
  font-size: 11px;
}

.tss-modal .modal-result strong b {
  color: var(--green-deep);
}

.tss-modal .modal-result small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

@keyframes tss-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}