/* ============================================================
   企服管家 H5 落地页 - 复刻版样式
   设计稿宽度 375px，深蓝科技风渐变背景 + 白色卡片
   ============================================================ */

* { box-sizing: border-box; }

/* Strict goal scope keeps non-target sections hidden despite component display rules. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0 auto;
  padding: 0;
  max-width: 375px;
  width: 100%;
  min-height: 100%;
  background: #0a1628;
  color: #000;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  position: relative;
}

p { margin: 0; }
a { text-decoration: none; }
img { border: 0; }

/* ---------- 动效背景 ---------- */
@keyframes gradient-shift {
  0%, 100% { background-position: 0 50%; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; }
}
@keyframes pulse-glow {
  0%, 100% { opacity: .25; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.05); }
}
@keyframes scroll-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes scale-infinite {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 2px 8px rgba(43, 90, 160, .3); }
  50% { box-shadow: 0 2px 16px rgba(43, 90, 160, .6); }
}

.home-page,
.complaint-page {
  width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #050a15, #0f1a2e 15%, #1a2d4d 30%, #244270 50%, #2e5a93 70%, #3a6fb5);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}
.home-page { padding-bottom: 80px; }
.complaint-page { padding-bottom: 60px; }

.bg-decoration { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bg-grid {
  position: absolute; inset: 0; opacity: .15;
  background-image:
    linear-gradient(rgba(30, 90, 180, .08) 1px, transparent 0),
    linear-gradient(90deg, rgba(30, 90, 180, .08) 1px, transparent 0);
  background-size: 25px 25px;
}
.bg-orb { position: absolute; border-radius: 50%; filter: blur(50px); }
.bg-orb-1 {
  left: 25%; top: 0; width: 200px; height: 200px; opacity: .25;
  background: radial-gradient(circle, rgba(30, 90, 180, .5) 0, transparent 70%);
  animation: pulse-glow 4s ease-in-out infinite;
}
.bg-orb-2 {
  right: 25%; bottom: 0; width: 250px; height: 250px; opacity: .15;
  background: radial-gradient(circle, rgba(20, 70, 150, .4) 0, transparent 70%);
  filter: blur(60px);
  animation: pulse-glow 5s ease-in-out 2s infinite;
}
.bg-orb-3 {
  left: 50%; top: 50%; width: 300px; height: 300px; opacity: .1;
  background: radial-gradient(circle, rgba(30, 90, 180, .3) 0, transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(75px);
  animation: pulse-glow 6s ease-in-out 1s infinite;
}
.watermark-wrap {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 100px, hsla(0, 0%, 60%, .08) 0, hsla(0, 0%, 60%, .08) 100.5px);
}
.watermark-cross {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 100px, hsla(0, 0%, 60%, .08) 0, hsla(0, 0%, 60%, .08) 100.5px);
  display: flex; align-items: center; justify-content: center;
}
.watermark-text {
  position: absolute;
  font-size: 60px;
  color: hsla(0, 0%, 60%, .05);
  transform: rotate(-45deg);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 10px;
  user-select: none;
}
.bg-guang { position: absolute; left: 0; top: 0; width: 100%; opacity: .4; }

.pc-container { position: relative; z-index: 2; }

/* ---------- 通用卡片与标题 ---------- */
.card {
  margin: 0 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15), 0 0 0 .5px rgba(30, 90, 180, .1);
}
.line-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, #ececec, transparent);
  margin: 10px 0;
}
.section-title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: #2b5aa0;
}
.section-title-wrap .section-icon { font-size: 20px; margin-right: 6px; z-index: 88; }
.section-title-wrap .section-title { font-weight: 700; position: relative; z-index: 88; }
.section-title-wrap .title-underline {
  position: absolute; bottom: 0; left: 0;
  height: 9.5px; width: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #2b5aa0, #3d7bd6);
  opacity: .6; z-index: 9;
}

/* ---------- 头部 ---------- */
.header-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 0;
}
.header-section .hero-heading {
  font-size: 26px; font-weight: 700; color: #fff; line-height: 1.25;
}
.header-section .hero-img { width: 154px; margin-left: -20px; }

/* ---------- 企业信息卡 ---------- */
.company-card { margin-top: 0; padding: 16px; }
.company-card .company-name {
  font-size: 18px; font-weight: 700; color: #1a1a1a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.company-card .company-row { font-size: 16px; color: #333; margin: 12px 0; }
.company-card .company-legal { font-weight: 600; color: #2b5aa0; }
.company-card .online-row {
  display: flex; align-items: center; flex-wrap: wrap;
  font-size: 14px; color: #181818; margin-top: 12px; margin-bottom: 3px;
}
.company-card .online-text { font-weight: 600; color: #2b5aa0; cursor: pointer; }
.company-card .consult-badge {
  position: relative; margin-left: 6px; overflow: hidden;
  border-radius: 12px; padding: 1.5px 9px;
  font-size: 13px; color: #fff;
  background: linear-gradient(135deg, #1a2d4d, #244270 50%, #2e5a93);
  box-shadow: 0 2px 6px rgba(30, 90, 180, .4);
  cursor: pointer;
}
.company-card .warn-badge {
  display: inline-block; margin: 10px 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #e40000, #ff6b6b);
  padding: 3px 8px; font-size: 13px; color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.company-card .source-note { font-size: 12px; color: #666; }

/* ---------- 年报信息卡 ---------- */
.annual-card { margin-top: 10px; padding: 14px; }
.annual-card .annual-inner {
  border-radius: 6px; padding: 14px;
  border: 1px solid #2b5aa0;
  box-shadow: 0 2px 8px rgba(30, 90, 180, .2), inset 0 .5px 0 hsla(0, 0%, 100%, .1);
}
.annual-card .annual-title { text-align: center; font-size: 17px; font-weight: 700; color: #2b5aa0; }
.annual-card .annual-table-header {
  display: flex; margin-top: 15px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(43, 90, 160, .2), rgba(61, 123, 214, .2));
  padding: 4px 0; font-size: 14px; font-weight: 700; color: #000;
  border: .5px solid rgba(30, 90, 180, .15);
}
.annual-card .annual-row {
  display: flex; margin-top: 12px;
  border-radius: 4px; padding: 4px 0;
  font-size: 14px; color: #000;
}
.annual-card .annual-col { text-align: center; width: 33.33%; }
.annual-card .annual-col.blue { font-weight: 600; color: #2b5aa0; }
.annual-card .annual-col.red { font-weight: 600; color: #e40000; cursor: pointer; }
.annual-card .annual-note {
  margin-top: 15px; border-radius: 5px;
  background: #f9f9f9; padding: 8px;
  font-size: 12px; color: #666; line-height: 1.6;
  border: .5px solid rgba(30, 90, 180, .08);
}

/* ---------- 关于年报 ---------- */
.about-card { margin-top: 10px; padding: 14px; }
.about-card .about-text {
  margin-top: 6px; border-radius: 6px;
  background: linear-gradient(to bottom right, #eaf3ff, #f0f7ff);
  padding: 8px; font-size: 13px; line-height: 1.7; letter-spacing: .5px; color: #000;
  border: .5px solid rgba(30, 90, 180, .1);
}
.about-card .date-hl { font-size: 14px; color: #e00; }
.about-card .red-bold { font-weight: 700; color: #e40000; }
.about-card .about-note {
  margin-top: 15px; border-radius: 5px;
  background: #f9f9f9; padding: 8px;
  font-size: 12px; color: #555; line-height: 1.6;
  border: .5px solid rgba(30, 90, 180, .08);
}
.about-card .gsxt-link { font-weight: 600; color: #2b5aa0; text-decoration: underline; }

/* ---------- 企业服务办理卡 ---------- */
.service-card { margin-top: 10px; padding: 14px; }
.service-card .service-header { display: flex; align-items: center; justify-content: space-between; }
.service-card .refund-tip {
  margin-left: 6px; font-size: 12px; color: #ffa319;
  position: relative; z-index: 88; white-space: nowrap;
}
.service-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; border-radius: 8px; padding: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 90, 180, .25);
  transition: all .2s; overflow: hidden;
}
.service-item.active {
  box-shadow: 0 0 0 2px #fff, 0 4px 16px rgba(0, 0, 0, .3);
  transform: scale(1.02);
}
.service-item .svc-bg-img { position: absolute; bottom: 0; left: 0; width: 32px; pointer-events: none; }
.service-item .svc-check-img {
  position: absolute; bottom: 0; right: 0; width: 16px;
  pointer-events: none;
  animation: bounce-y 1s infinite;
}
.service-item .svc-info { position: relative; z-index: 9; }
.service-item .svc-name { font-size: 16px; font-weight: 700; color: #fff; }
.service-item .svc-desc { margin-top: 4px; font-size: 12px; color: hsla(0, 0%, 100%, .9); }
.service-item .svc-price-wrap { position: relative; z-index: 9; display: flex; align-items: center; }
.service-item .svc-original {
  margin-right: 12px; font-size: 11.5px; color: #d0d0d0; text-decoration: line-through;
}
.service-item .svc-price { font-size: 19px; font-weight: 700; color: #fff; }

.gradient-0 { background: linear-gradient(to right, rgb(157, 174, 255), rgb(90, 120, 255)); }
.gradient-1 { background: linear-gradient(to right, rgb(102, 126, 234), rgb(118, 75, 162)); }
.gradient-2 { background: linear-gradient(to right, rgb(255, 107, 107), rgb(255, 142, 142)); }
.gradient-3 { background: linear-gradient(to right, rgb(78, 205, 196), rgb(68, 160, 141)); }

.pay-card {
  position: relative; display: flex; align-items: center;
  margin-top: 12px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(43, 90, 160, .2), rgba(61, 123, 214, .2));
  padding: 12px;
  border: .5px solid rgba(30, 90, 180, .1);
  cursor: pointer;
}
.pay-card.active { border-color: #2b5aa0; box-shadow: 0 0 0 2px rgba(43, 90, 160, .2); }
.pay-card .pay-check-img {
  position: absolute; bottom: 0; right: 0; width: 16px;
  animation: pulse-glow 2s infinite;
}
.pay-card .pay-icon-img { width: 30px; flex-shrink: 0; }
.pay-card .pay-name { margin-left: 12px; font-size: 13.5px; font-weight: 500; }

.submit-btn {
  position: relative; margin-top: 12px; overflow: hidden;
  border-radius: 25px; padding: 12px;
  text-align: center; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1a2d4d, #244270 30%, #2e5a93 60%, #3a6fb5);
  box-shadow: 0 4px 12px rgba(30, 90, 180, .4), inset 0 .5px 0 hsla(0, 0%, 100%, .1);
  cursor: pointer; transition: all .2s;
}
.submit-btn:active { transform: scale(.98); }

.agreement-bar { margin-top: 12px; font-size: 15px; color: #000; line-height: 1.5; display: flex; align-items: flex-start; }
.agreement-bar .agreement-text { flex: 1; }
.agreement-bar .link, .link { color: #2b5aa0; cursor: pointer; }

/* 自定义勾选框 */
.ckbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid #c8ccd4; border-radius: 4px;
  margin-right: 6px; margin-top: 1px;
  cursor: pointer; background: #fff;
  transition: all .15s;
}
.ckbox.checked { background: #04C76D; border-color: #04C76D; }
.ckbox.ck-round { border-radius: 50%; }
.ckbox svg { width: 12px; height: 12px; display: none; }
.ckbox.checked svg { display: block; }

/* ---------- 流程卡 ---------- */
.flow-card { margin-top: 10px; overflow: hidden; border-radius: 8px; padding-bottom: 16px; }
.flow-card .flow-header {
  height: 38px;
  display: flex; justify-content: center; align-items: center;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, rgba(43, 90, 160, .3), rgba(61, 123, 214, .3));
  font-size: 16px; font-weight: 700; color: #000;
  border-bottom: 1px solid rgba(30, 90, 180, .15);
}
.flow-card .flow-steps {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin: 16px 10px;
  text-align: center; font-size: 13px; font-weight: 700; color: #000;
}
.flow-card .flow-item {
  display: flex; align-items: center; gap: 4px;
  border-radius: 6px;
  background: rgba(43, 90, 160, .15);
  padding: 4px 6px;
  border: .5px solid rgba(30, 90, 180, .2);
}
.flow-card .flow-arrow { font-weight: 700; color: #2b5aa0; }
.flow-card .flow-note {
  margin: 0 16px; border-radius: 23px;
  background: linear-gradient(90deg, rgba(43, 90, 160, .2), rgba(61, 123, 214, .2));
  padding: 8px 16px; text-align: center; font-size: 14px; color: #555;
  border: .5px solid rgba(30, 90, 180, .15);
}

/* ---------- 实时案例卡 ---------- */
.cases-card { margin-top: 10px; overflow: hidden; border-radius: 8px; height: 260px; }
.cases-card .cases-header {
  height: 38px;
  display: flex; justify-content: center; align-items: center;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, rgba(43, 90, 160, .3), rgba(61, 123, 214, .3));
  font-size: 16px; font-weight: 700; color: #000;
  border-bottom: 1px solid rgba(30, 90, 180, .15);
}
.cases-card .scroll-continuous { position: relative; width: 100%; height: 216px; overflow: hidden; }
.cases-card .scroll-content { width: 100%; height: auto; padding: 5px 0; animation: scroll-up linear infinite; }
.cases-card .case-row {
  display: flex; align-items: center;
  margin-top: 6px; border-radius: 4px; padding: 4px 12px;
  font-size: 11.5px; color: #000;
}
.case-col-time { width: 22%; text-align: center; }
.case-col-name { width: 28%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-col-phone, .case-col-status { width: 25%; text-align: center; }
.case-name, .case-time { font-size: 12px; font-weight: 500; color: #333; }
.case-phone { font-size: 12px; font-weight: 500; color: #555; }
.status-badge { display: inline-block; border-radius: 4px; padding: 3px 8px; font-size: 11px; color: #fff; }
.status-badge.paid { background: #04c76d; }
.status-badge.reported { background: linear-gradient(135deg, #1a3157, #2b5aa0); }
.cases-card .cases-empty {
  display: flex; align-items: center; justify-content: center;
  height: 216px; font-size: 13px; color: #bbb;
}

/* ---------- 特别提醒卡 ---------- */
.notice-card { margin-top: 10px; padding: 14px; }
.notice-card .notice-text {
  margin-top: 13px; border-radius: 6px;
  background: linear-gradient(to bottom right, rgba(43, 90, 160, .15), rgba(61, 123, 214, .15));
  padding: 10px; font-size: 13.5px; line-height: 1.7; letter-spacing: .5px; color: #000;
  border: .5px solid rgba(30, 90, 180, .15);
}

/* ---------- 为什么选择我们 ---------- */
.why-card { margin-top: 10px; overflow: hidden; border-radius: 8px; }
.why-card .why-header {
  padding: 12px 0; text-align: center;
  font-size: 18px; font-weight: 700; color: #000;
  background: linear-gradient(90deg, rgba(43, 90, 160, .3), rgba(61, 123, 214, .3), rgba(43, 90, 160, .3));
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(30, 90, 180, .15);
}
.why-card .why-subtitle { margin: 20px 0; padding: 0 12px; text-align: center; font-size: 14px; color: #555; line-height: 1.6; }
.why-card .why-features { display: flex; justify-content: space-between; gap: 8px; margin: 20px 12px; }
.why-feature-item {
  flex: 1; border-radius: 8px; padding: 12px 6px;
  text-align: center;
  border: 1px solid rgba(30, 90, 180, .2);
  background: linear-gradient(135deg, #fff, rgba(30, 90, 180, .05));
  box-shadow: 0 2px 6px rgba(30, 90, 180, .15);
}
.why-feature-icon { display: flex; justify-content: center; margin-bottom: 10px; }
.why-feature-icon > span {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(43, 90, 160, .4), rgba(61, 123, 214, .4));
  box-shadow: 0 2px 6px rgba(30, 90, 180, .3);
}
.why-feature-text { font-size: 11px; font-weight: 500; color: #3a414b; line-height: 1.5; }
.why-card .why-stats {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  margin: 20px 12px 12px;
}
.why-stat-item {
  display: flex; align-items: center;
  width: 49%; padding: 10px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(43, 90, 160, .1), rgba(61, 123, 214, .1));
  border: .5px solid rgba(30, 90, 180, .15);
  margin-bottom: 12px;
}
.why-stat-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(43, 90, 160, .3), rgba(61, 123, 214, .3));
  box-shadow: 0 2px 6px rgba(30, 90, 180, .25);
  margin-right: 8px;
}
.why-stat-info { display: flex; flex-direction: column; }
.why-stat-num { font-size: 17px; font-weight: 700; color: #2b5aa0; margin-bottom: 2px; white-space: nowrap; }
.why-stat-label { font-size: 12px; color: #666; white-space: nowrap; }

/* ---------- 服务保障卡 ---------- */
.guarantee-card { margin-top: 10px; overflow: hidden; border-radius: 8px; padding-bottom: 10px; }
.guarantee-card .guarantee-header {
  padding: 12px 0; text-align: center;
  font-size: 18px; font-weight: 700; color: #000;
  background: linear-gradient(90deg, rgba(43, 90, 160, .3), rgba(61, 123, 214, .3), rgba(43, 90, 160, .3));
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(30, 90, 180, .15);
  margin-bottom: 8px;
}
.guarantee-card .guarantee-grid { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 10px; }
.guarantee-item {
  display: flex; align-items: center;
  width: 49%; padding: 10px 8px;
  border-radius: 8px;
  background: linear-gradient(to bottom right, rgba(43, 90, 160, .15), rgba(61, 123, 214, .15));
  border: .5px solid rgba(30, 90, 180, .2);
  box-shadow: 0 2px 8px rgba(30, 90, 180, .2);
  margin-bottom: 8px;
}
.guarantee-icon-circle {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(43, 90, 160, .4), rgba(61, 123, 214, .4));
  box-shadow: 0 2px 8px rgba(30, 90, 180, .35);
  margin-right: 10px;
}
.guarantee-info { display: flex; flex-direction: column; }
.guarantee-name { font-size: 16px; font-weight: 700; color: #3a414b; margin-bottom: 2px; white-space: nowrap; }
.guarantee-desc { font-size: 12px; color: #666; white-space: nowrap; }

/* ---------- 页脚 ---------- */
.footer-section {
  position: relative; z-index: 2;
  margin: 18px 16px; border-radius: 8px;
  padding: 16px 5px 50px; text-align: center;
}
.footer-beian-row { line-height: 2; font-size: 12px; color: #999; margin-top: 10px; padding-bottom: 6px; }
.footer-beian-link, .footer-beian-text { font-size: 12px; color: #999; }
.footer-copyright {
  display: flex; align-items: center; justify-content: center;
  margin-top: 12px; padding-bottom: 10px;
  font-size: 12px; color: #999; opacity: .6;
}

/* ---------- 底部固定栏 ---------- */
.bottom-bar {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 375px; max-width: 100%;
  z-index: 98; background: #fff;
  padding: 12px 18px;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, .15);
}
.bottom-bar span {
  display: block; position: relative; overflow: hidden;
  border-radius: 25px; padding: 12px;
  text-align: center; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1a2d4d, #244270 30%, #2e5a93 60%, #3a6fb5);
  box-shadow: 0 4px 12px rgba(30, 90, 180, .4), inset 0 .5px 0 hsla(0, 0%, 100%, .1);
  cursor: pointer;
  animation: scale-infinite 2s ease-in-out infinite;
}
.bottom-bar span:active { transform: scale(.95); }

/* ---------- 悬浮按钮 ---------- */
.float-btns {
  position: fixed; right: 0; top: 140px; z-index: 99;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 376px) {
  .float-btns { right: calc(50% - 187.5px); }
}
.float-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; background: #fff;
  padding: 6px; margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  cursor: pointer;
}
.float-btn .float-icon { font-size: 18px; }
.float-btn .float-label { margin-top: 2px; font-size: 11px; color: #333; white-space: nowrap; }

/* ---------- 弹窗通用 ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .55);
  display: none;
  align-items: center; justify-content: center;
}
.popup-overlay.show { display: flex; }

/* 支付确认弹窗 */
.popup-card {
  width: 320px; margin: 0 auto;
  background: #fff; border-radius: 24px;
  overflow: hidden; position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 0 0 1px hsla(0, 0%, 100%, .1);
}
.popup-card .popup-accent { height: 3px; background: linear-gradient(90deg, #2b5aa0, #3d7bd6, #5ba0f5); }
.popup-card .popup-close-circle {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #f3f5f9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; transition: all .15s;
}
.popup-card .popup-close-circle:active { background: #e2e6ed; transform: scale(.92); }
.popup-card .popup-body { padding: 28px 24px 0; }
.popup-main-title { font-size: 20px; font-weight: 700; color: #1a1a2e; text-align: center; letter-spacing: .5px; }
.popup-subtitle { font-size: 12.5px; color: #aaa; text-align: center; margin-top: 6px; margin-bottom: 22px; }
.order-info-card {
  background: linear-gradient(135deg, #f6f9fe, #eef4fc);
  border-radius: 14px; padding: 16px 18px;
  border: 1px solid rgba(43, 90, 160, .1);
  margin-bottom: 20px;
}
.order-service-row, .order-price-row {
  display: flex; justify-content: space-between; align-items: center; padding: 4px 0;
}
.order-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 90, 160, .12), transparent);
  margin: 12px 0;
}
.order-label { font-size: 13.5px; color: #7a8599; font-weight: 500; }
.order-value {
  font-size: 14px; color: #1a1a2e; font-weight: 600;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.order-price .price-unit { font-size: 18px; color: #e40000; font-weight: 600; margin-right: 1px; }
.order-price .price-num {
  font-size: 32px; font-weight: 800; color: #e40000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -1px;
}
.idcard-section { margin-bottom: 16px; }
.idcard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.idcard-label { font-size: 13.5px; font-weight: 600; color: #1a1a2e; }
.idcard-required { font-size: 11px; color: #ff6b6b; }
.idcard-input {
  padding: 2px;
  border-radius: 12px; overflow: hidden;
  background: #f8f9fc;
  border: 1.5px solid #e8ecf2;
  transition: all .2s;
}
.idcard-input:focus-within { border-color: #2b5aa0; box-shadow: 0 0 0 3px rgba(43, 90, 160, .08); }
.idcard-input input {
  width: 100%; border: 0; outline: 0; background: transparent;
  padding: 11px 14px; font-size: 14px; color: #333;
}
.idcard-input input::placeholder { color: #c5cad4; }
.agreement-row { display: flex; align-items: flex-start; padding: 10px 0 0; }
.agreement-row .agreement-text { font-size: 12px; color: #999; line-height: 1.7; }
.popup-footer { padding: 20px 24px 24px; }
.confirm-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; border-radius: 25px;
  font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1a3157, #2b5aa0 50%, #3d7bd6);
  box-shadow: 0 6px 20px rgba(30, 90, 180, .35), inset 0 .5px 0 hsla(0, 0%, 100%, .1);
  cursor: pointer; transition: all .2s; letter-spacing: .5px;
}
.confirm-btn .btn-icon { font-size: 18px; font-weight: 300; }
.confirm-btn:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(30, 90, 180, .2); }
.safe-notice {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 14px; font-size: 11px; color: #bbb;
}

/* 文本弹窗（协议/隐私） */
.text-popup {
  width: 320px; max-height: 480px;
  background: #fff; border-radius: 12px; overflow: hidden;
  position: relative;
}
.text-popup .popup-close-circle {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #f3f5f9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
}
.text-popup .text-popup-title {
  font-size: 16px; font-weight: 700; color: #333;
  padding: 15px; text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.text-popup .text-popup-content {
  padding: 15px; max-height: 360px; overflow-y: auto;
  font-size: 13px; line-height: 1.8; color: #666;
}

/* ---------- 轻提示 ---------- */
.mini-toast {
  position: fixed; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  z-index: 300;
  max-width: 240px;
  background: rgba(0, 0, 0, .78);
  color: #fff; font-size: 13px; line-height: 1.5;
  padding: 10px 16px; border-radius: 8px;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.mini-toast.show { opacity: 1; }

/* ============================================================
   进度页
   ============================================================ */
.progress-page {
  width: 375px; min-height: 100vh; margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #0a1628, #12223e 35%, #1a3157 70%, #244174);
}
.progress-page .progress-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 0;
}
.progress-page .progress-top .hero-heading { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.25; }
.progress-page .progress-top .hero-img { width: 154px; margin-left: -20px; }

.progress-page .company-info-card {
  margin: -24px 14px 12px;
  background: #fff; border-radius: 10px; padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  position: relative; z-index: 2;
}
.company-info-card .company-name {
  font-size: 16px; font-weight: 700; color: #e40000;
  text-align: center; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px dashed #eee;
}
.company-info-card .info-row { display: flex; align-items: center; margin-bottom: 10px; font-size: 13px; }
.company-info-card .info-row:last-child { margin-bottom: 0; }
.company-info-card .label { color: #999; width: 72px; flex-shrink: 0; }
.company-info-card .value { flex: 1; color: #333; }
.company-info-card .value.blue { color: #2b5aa0; font-weight: 500; }
.call-btn-small {
  background: linear-gradient(135deg, #1a2d4d, #2b5aa0);
  color: #fff; font-size: 11px;
  padding: 3px 10px; border-radius: 10px;
  margin-left: 6px; flex-shrink: 0;
  display: inline-block;
}
.consult-btn-small {
  height: 26px; line-height: 26px;
  background: linear-gradient(135deg, #1a2d4d, #2b5aa0);
  border-radius: 13px; font-size: 11px; color: #fff;
  padding: 0 10px; display: inline-block; cursor: pointer;
}

.progress-page .progress-main-card {
  margin: 0 14px 12px;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  position: relative; z-index: 2;
}
.progress-main-card .card-title { font-size: 16px; font-weight: 700; color: #1a1a2e; padding: 16px 16px 0; }
.progress-main-card .card-content { padding: 16px; }

.payment-reminder {
  display: flex; align-items: center;
  padding: 10px 14px; margin-bottom: 16px;
  background: #fef9e7; border-radius: 8px;
  font-size: 12.5px; color: #92400e;
  border: 1px solid rgba(245, 158, 11, .15);
}
.payment-reminder svg { margin-right: 8px; flex-shrink: 0; }

.refund-status { text-align: center; padding: 24px; }
.refund-status p { margin-top: 10px; font-size: 14px; color: #10b981; font-weight: 500; }

.progress-steps .step-item { display: flex; align-items: flex-start; position: relative; }
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e8ecf1; color: #9ca3af;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  margin-right: 12px; flex-shrink: 0;
  position: relative; z-index: 2;
  transition: all .3s;
}
.step-dot.completed {
  background: linear-gradient(135deg, #1a3157, #2b5aa0);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 90, 160, .3);
}
.step-dot.processing {
  background: #2b5aa0; color: #fff;
  box-shadow: 0 2px 8px rgba(43, 90, 160, .3);
  animation: pulse-dot 1.5s ease infinite;
}
.step-dot.failed { background: #e40000; color: #fff; }
.step-line {
  position: absolute; top: 28px; left: 13px;
  width: 2px; height: calc(100% + 4px);
  background: #e8ecf1; z-index: 1;
}
.step-line.completed { background: linear-gradient(180deg, #2b5aa0, rgba(43, 90, 160, .3)); }
.step-content { flex: 1; padding-bottom: 20px; padding-top: 4px; }
.step-item:last-child .step-content { padding-bottom: 0; }
.step-title { font-size: 14px; font-weight: 600; color: #9ca3af; margin-bottom: 3px; transition: color .3s; }
.step-title.completed { color: #1a1a2e; }
.step-title.processing { color: #2b5aa0; }
.step-title.failed { color: #e40000; }
.step-desc { font-size: 12.5px; color: #9ca3af; }
.step-desc.completed { color: #666; }
.step-extra {
  margin-top: 8px; font-size: 12px; color: #666;
  background: #f8f9fb; padding: 10px 12px;
  border-radius: 8px; border: 1px solid #eee;
}
.step-extra .contact-btn {
  height: 26px; line-height: 26px;
  background: linear-gradient(135deg, #1a2d4d, #2b5aa0);
  border-radius: 13px; font-size: 11px; color: #fff;
  margin-top: 6px; padding: 0 10px;
  display: inline-block; cursor: pointer;
}
.cert-btn-wrapper { margin-top: 16px; }
.cert-btn {
  display: block; height: 40px; line-height: 40px;
  background: linear-gradient(135deg, #1a3157, #2b5aa0);
  border-radius: 20px;
  font-size: 14px; color: #fff; text-align: center;
  cursor: pointer;
}
.contact-desc { font-size: 13px; color: #888; margin-bottom: 14px; line-height: 1.5; }
.contact-actions { display: flex; align-items: center; gap: 12px; }
.contact-phone-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px;
  background: #f5f7fa; border-radius: 20px;
  font-size: 13px; color: #333;
  border: 1px solid rgba(43, 90, 160, .15);
  transition: all .2s;
}
.contact-phone-btn:active { background: #eef1f5; }
.contact-kf-btn {
  flex: 1; height: 38px; line-height: 38px;
  background: linear-gradient(135deg, #1a3157, #2b5aa0);
  border-radius: 20px;
  font-size: 13px; color: #fff; text-align: center;
  cursor: pointer;
}
.progress-footer-space { height: 40px; }

/* ============================================================
   投诉页
   ============================================================ */
.back-row { padding: 12px 16px 6px; position: fixed; top: 0; left: 0; z-index: 99; }
@media (min-width: 376px) {
  .back-row { left: calc(50% - 187.5px); }
}
.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  padding: 6px 14px; border-radius: 20px;
  background: hsla(0, 0%, 100%, .12);
  color: hsla(0, 0%, 100%, .85);
  font-size: 13px; cursor: pointer; transition: all .2s;
}
.back-btn:active { background: hsla(0, 0%, 100%, .2); }

.complaint-card { margin-top: 10px; padding: 14px; }
.complaint-card .form-group { margin-bottom: 20px; }
.complaint-card .form-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; }
.tag-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item {
  padding: 7px 14px;
  font-size: 13px; font-weight: 500; color: #555;
  background: #f5f7fa; border-radius: 20px;
  cursor: pointer; transition: all .2s;
  border: 1px solid rgba(30, 90, 180, .12);
}
.tag-item:active { transform: scale(.96); }
.tag-item.active {
  color: #fff;
  background: linear-gradient(135deg, #1a2d4d, #2e5a93);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(30, 90, 180, .3);
}
.form-input {
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid rgba(30, 90, 180, .12);
  padding: 10px 12px;
}
.form-input input, .form-input textarea {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-size: 14px; color: #333;
  font-family: inherit;
  resize: none;
}
.form-input input::placeholder, .form-input textarea::placeholder { color: #bbb; }
.form-input .word-limit { text-align: right; font-size: 11px; color: #999; margin-top: 4px; }
.complaint-card .submit-btn { margin-top: 8px; padding: 13px; }
.tip-text {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 16px; font-size: 12px; color: #999;
}

/* ============================================================
   y0p.cn H5 首页复刻
   ============================================================ */
body.y0p-body {
  max-width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 18% 14%, rgba(104, 185, 255, .35), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(73, 127, 255, .3), transparent 28%),
    linear-gradient(180deg, #0d53f2 0%, #2979ff 22%, #2d77ff 40%, #3567f1 62%, #275de0 100%);
  color: #17305d;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.y0p-page {
  position: relative;
  min-height: 100vh;
  padding: 18px 12px 104px;
  overflow-x: hidden;
}

.y0p-page::before,
.y0p-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.y0p-page::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 20%),
    linear-gradient(45deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, 0) 18%);
  opacity: .55;
}

.y0p-page::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .16;
}

.y0p-hero,
.y0p-content,
.y0p-footer,
.y0p-bottom-bar,
.y0p-floating-tools {
  position: relative;
  z-index: 2;
}

.y0p-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 118px;
  margin-bottom: 12px;
}

.y0p-hero-copy {
  padding-top: 12px;
  color: #fff;
  font-family: "Alimama ShuHeiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  text-shadow: 0 8px 18px rgba(0, 35, 119, .25);
}

.y0p-hero-line {
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: 1px;
}

.y0p-hero-line + .y0p-hero-line { margin-top: 4px; }
.y0p-hero-line-indent { margin-left: 18px; }

.y0p-hero-art {
  width: 186px;
  margin-right: -8px;
  margin-top: -4px;
}

.y0p-floating-tools {
  position: fixed;
  top: 156px;
  right: max(8px, calc((100vw - 375px) / 2 + 4px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.y0p-float-tool {
  width: 62px;
  min-height: 62px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 26px rgba(11, 37, 102, .22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #5b657f;
  text-decoration: none;
  padding: 6px 4px;
  cursor: pointer;
}

.y0p-float-tool:active { transform: scale(.97); }

.y0p-float-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.y0p-float-icon::before,
.y0p-float-icon::after {
  content: "";
  position: absolute;
}

.y0p-float-icon-chat {
  background: linear-gradient(135deg, #d7c5ff, #8e6df4);
}

.y0p-float-icon-chat::before {
  left: 6px;
  top: 7px;
  width: 14px;
  height: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
}

.y0p-float-icon-chat::after {
  left: 11px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, .95);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.y0p-float-icon-note {
  background: linear-gradient(135deg, #ffd7c7, #ff8c52);
}

.y0p-float-icon-note::before {
  left: 7px;
  top: 5px;
  width: 12px;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .96);
}

.y0p-float-icon-note::after {
  left: 10px;
  top: 10px;
  width: 7px;
  height: 1.5px;
  background: #ff9d72;
  box-shadow: 0 4px 0 #ff9d72, 0 8px 0 #ff9d72;
}

.y0p-float-icon-phone {
  background: linear-gradient(135deg, #ffd470, #f49b11);
}

.y0p-float-icon-phone::before {
  left: 9px;
  top: 6px;
  width: 8px;
  height: 14px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-top-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(42deg);
}

.y0p-float-text {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 767px) {
  .y0p-floating-tools {
    position: relative;
    top: auto;
    right: auto;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    margin: -12px 12px 12px;
  }

  .y0p-float-tool {
    width: 44px;
    min-height: 44px;
    border-radius: 14px;
    padding: 0;
  }

  .y0p-float-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.y0p-content { display: grid; gap: 14px; }

.y0p-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(11, 45, 122, .18);
  overflow: hidden;
}

.y0p-company-card {
  padding: 14px 18px 12px;
}

.y0p-company-name {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(215, 221, 238, .9);
  color: #ef1d22;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}

.y0p-company-row {
  margin-top: 7px;
  font-size: 14px;
  color: #4f5f88;
  word-break: break-all;
}

.y0p-company-row span {
  color: #2a344d;
  font-weight: 600;
}

.y0p-company-source {
  margin-top: 10px;
  color: #ff4c42;
  font-size: 12px;
  line-height: 1.45;
}

.y0p-card-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px 12px;
  padding: 8px 16px 8px 14px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, #2689ff, #1160ff);
  box-shadow: 0 10px 18px rgba(24, 93, 255, .18);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.y0p-card-cap-icon {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.y0p-card-cap-icon::before {
  content: "";
  position: absolute;
  inset: 1px 0 1px 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .92);
}

.y0p-card-cap-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 10px;
  height: 2px;
  background: #1d79ff;
  box-shadow: 0 4px 0 #1d79ff, 0 8px 0 #1d79ff;
}

.y0p-card-cap-icon-data::after {
  left: 3px;
  top: 3px;
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: #1d79ff;
  box-shadow: 4px 2px 0 0 #3fb2ff, 8px -1px 0 0 #71d4ff;
}

.y0p-notice-card {
  padding: 0 0 16px;
}

.y0p-notice-panel {
  margin: 0 12px 0;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.y0p-notice-rule {
  border: 2px solid #ff9950;
  border-radius: 999px;
  padding: 11px 12px;
  text-align: center;
  color: #ff7b1a;
  font-weight: 700;
  line-height: 1.5;
}

.y0p-notice-rule-name,
.y0p-notice-rule-article { font-size: 15px; }

.y0p-notice-text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: #32496f;
}

.y0p-text-danger {
  color: #ff3d33;
  font-weight: 700;
}

.y0p-service-card {
  padding-bottom: 22px;
  background: linear-gradient(180deg, rgba(238, 245, 255, .96) 0%, rgba(255, 255, 255, .98) 24%, rgba(244, 249, 255, .98) 100%);
}

.y0p-service-banner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 10px 0 0;
}

.y0p-service-banner-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(90deg, #2995ff, #246fff 68%, #1d62f3 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 12px 20px rgba(24, 93, 255, .2);
}

.y0p-service-banner-title::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .95);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.y0p-service-banner-title::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 15px;
  width: 9px;
  height: 2px;
  background: #297eff;
  box-shadow: 0 4px 0 #297eff, 0 8px 0 #297eff;
}

.y0p-progress-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 0;
  padding: 7px 13px 7px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffbb1f, #ff931d 58%, #ff8419 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 18px rgba(255, 145, 19, .22);
}

.y0p-progress-link img {
  width: 20px;
  margin-right: -3px;
}

.y0p-service-panel {
  position: relative;
  margin: 10px 12px 0;
  padding: 82px 14px 18px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(247, 251, 255, .98) 0%, rgba(255, 255, 255, .98) 24%, rgba(244, 248, 255, .98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 12px 28px rgba(45, 94, 193, .08);
}

.y0p-service-panel::before {
  content: "";
  position: absolute;
  inset: 12px 12px auto;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(69, 137, 255, .08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.y0p-service-panel-bg {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 88px;
  background:
    url("../img/y0p-payprocess.png") center 10px / 100% auto no-repeat,
    linear-gradient(180deg, rgba(59, 130, 246, .08), rgba(255, 255, 255, 0));
  opacity: .42;
  pointer-events: none;
}

.y0p-service-block {
  position: relative;
  z-index: 1;
}

.y0p-service-block + .y0p-service-block { margin-top: 14px; }

.y0p-service-label {
  margin-bottom: 11px;
  color: #7385a7;
  font-size: 14px;
  font-weight: 700;
}

.y0p-service-list,
.y0p-pay-list {
  display: grid;
  gap: 10px;
}

.y0p-service-item {
  position: relative;
  border: 1.5px solid #80b1ff;
  border-radius: 999px;
  background: linear-gradient(180deg, #ecf5ff 0%, #dceaff 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 14px 0 18px;
  color: #1f3f75;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 8px 18px rgba(53, 103, 241, .12);
  cursor: pointer;
}

.y0p-service-item.active {
  border-color: #4a8cff;
  background: linear-gradient(180deg, #deeeff 0%, #cfe1ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 22px rgba(42, 116, 255, .18);
}

.y0p-service-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 56%);
  pointer-events: none;
}

.y0p-service-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.y0p-service-name {
  color: #246eff;
  font-size: 15px;
  font-weight: 700;
}

.y0p-service-origin {
  color: #7d98cd;
  font-size: 12px;
  font-weight: 600;
}

.y0p-service-price {
  color: #276cff;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.y0p-service-radio,
.y0p-pay-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px rgba(127, 156, 216, .88);
  background: #fff;
  flex-shrink: 0;
}

.y0p-service-item.active .y0p-service-radio {
  background: radial-gradient(circle at center, #2c78ff 0 42%, #ffffff 48%, #ffffff 100%);
  box-shadow: 0 0 0 1px rgba(94, 128, 205, .95);
}

.y0p-pay-item {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  box-shadow:
    inset 0 0 0 1px rgba(45, 108, 235, .08),
    0 4px 10px rgba(60, 95, 175, .03);
  cursor: pointer;
}

.y0p-pay-item.active {
  box-shadow:
    inset 0 0 0 1.5px rgba(92, 193, 71, .24),
    0 8px 18px rgba(92, 193, 71, .07);
}

.y0p-pay-icon {
  width: 28px;
  height: 28px;
}

.y0p-pay-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}

.y0p-pay-name {
  color: #38548c;
  font-size: 14px;
  font-weight: 700;
}

.y0p-pay-tip {
  color: #8fa0bf;
  font-size: 12px;
}

.y0p-pay-check {
  width: 20px;
  height: 20px;
  border-color: #dce3f0;
  box-shadow: none;
  position: relative;
}

.y0p-pay-check::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.y0p-pay-item.active .y0p-pay-check {
  background: #5cc248;
  border-color: #5cc248;
}

.y0p-pay-item.active .y0p-pay-check::before {
  opacity: 1;
}

.y0p-agreement-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
}

.y0p-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid #d0d9eb;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.y0p-check svg {
  width: 12px;
  height: 12px;
  display: none;
}

.y0p-check.checked {
  background: #5bc148;
  border-color: #5bc148;
}

.y0p-check.checked svg { display: block; }

.y0p-agreement-text {
  color: #7b8baa;
  font-size: 13px;
  line-height: 1.6;
}

.y0p-link {
  color: #2f7cff;
  font-weight: 700;
  cursor: pointer;
}

.y0p-cases-card {
  padding: 0 0 10px;
}

.y0p-cases-list {
  max-height: 412px;
  overflow: auto;
  margin: 0 12px 0;
  padding: 4px 2px 2px;
}

.y0p-case-row {
  display: grid;
  grid-template-columns: 130px 1fr 42px 54px;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(220, 229, 245, .75);
}

.y0p-case-row:last-child { border-bottom: 0; }

.y0p-case-meta,
.y0p-case-company,
.y0p-case-owner,
.y0p-case-status {
  font-size: 12px;
  line-height: 1.45;
  color: #4d5c7d;
}

.y0p-case-time {
  color: #334d7d;
  font-weight: 700;
}

.y0p-case-company {
  color: #233965;
  font-weight: 600;
}

.y0p-case-owner {
  color: #3f66a5;
  text-align: center;
}

.y0p-case-status {
  text-align: right;
  font-weight: 700;
}

.y0p-status-primary { color: #1f57a8; }
.y0p-status-secondary { color: #4c5e82; display: block; }

.y0p-faq-card {
  padding: 16px 14px 10px;
}

.y0p-faq-title {
  margin: 0 0 14px;
  color: #2c3b63;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.y0p-faq-list { display: grid; gap: 12px; }

.y0p-faq-item {
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(205, 221, 247, .9);
}

.y0p-faq-question {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #253f6b;
  font-size: 16px;
  font-weight: 700;
}

.y0p-faq-index {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #8dc0ff, #498dff);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

.y0p-faq-answer {
  margin-top: 8px;
  color: #596b8f;
  font-size: 13px;
  line-height: 1.8;
}

.y0p-compare-card {
  padding: 14px;
}

.y0p-compare-banner {
  margin: -2px auto 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(90deg, #2a8cff, #1c62ff);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 20px rgba(29, 101, 255, .18);
}

.y0p-compare-body {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
}

.y0p-compare-column {
  padding: 12px 10px;
  border-radius: 16px;
}

.y0p-compare-good {
  background: linear-gradient(180deg, rgba(58, 130, 255, .16), rgba(82, 164, 255, .08));
}

.y0p-compare-bad {
  background: linear-gradient(180deg, rgba(230, 236, 245, .95), rgba(244, 247, 251, .92));
}

.y0p-compare-column-title {
  margin-bottom: 12px;
  color: #2a63c7;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.y0p-compare-bad .y0p-compare-column-title {
  color: #8f96ab;
}

.y0p-compare-vs {
  align-self: center;
  color: #5973ab;
  font-size: 42px;
  font-weight: 900;
  text-align: center;
}

.y0p-compare-points { display: grid; gap: 10px; }

.y0p-compare-point {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #2f4f88;
  font-size: 13px;
  line-height: 1.55;
}

.y0p-compare-point-bad { color: #7c849a; }

.y0p-compare-point-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.y0p-compare-point-good .y0p-compare-point-icon {
  background: linear-gradient(180deg, #4aa5ff, #1f6fff);
}

.y0p-compare-point-bad .y0p-compare-point-icon {
  background: linear-gradient(180deg, #d0d7e5, #aeb7ca);
}

.y0p-compare-point-good .y0p-compare-point-icon::before,
.y0p-compare-point-bad .y0p-compare-point-icon::before,
.y0p-compare-point-good .y0p-compare-point-icon::after,
.y0p-compare-point-bad .y0p-compare-point-icon::after {
  content: "";
  position: absolute;
  background: #fff;
}

.y0p-compare-point-good .y0p-compare-point-icon::before {
  left: 5px;
  top: 8px;
  width: 4px;
  height: 2px;
  transform: rotate(45deg);
}

.y0p-compare-point-good .y0p-compare-point-icon::after {
  left: 8px;
  top: 6px;
  width: 7px;
  height: 2px;
  transform: rotate(-45deg);
}

.y0p-compare-point-bad .y0p-compare-point-icon::before {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  transform: rotate(45deg);
}

.y0p-compare-point-bad .y0p-compare-point-icon::after {
  left: 4px;
  top: 8px;
  width: 10px;
  height: 2px;
  transform: rotate(-45deg);
}

.y0p-footer {
  margin: 18px 0 0;
  padding: 0 0 4px;
  text-align: center;
}

.y0p-footer-line,
.y0p-footer-line a {
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  line-height: 1.8;
  text-decoration: none;
}

.y0p-bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(351px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
  backdrop-filter: blur(8px);
  z-index: 8;
}

.y0p-submit-btn {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4c22ff 0%, #6f57ff 28%, #9748e3 56%, #ff5820 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 16px 28px rgba(57, 78, 179, .32);
  cursor: pointer;
}

.y0p-submit-btn:active { transform: scale(.985); }

.y0p-text-popup {
  width: 332px;
  border-radius: 18px;
}

.y0p-dialog {
  width: 320px;
  padding: 24px 18px 18px;
  border-radius: 22px;
  background: #fff;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

.y0p-dialog-title {
  color: #253962;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

.y0p-dialog-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f4f8ff, #eef4ff);
}

.y0p-dialog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #566b96;
  font-size: 14px;
}

.y0p-dialog-row + .y0p-dialog-row { margin-top: 10px; }

.y0p-dialog-row strong {
  color: #24385f;
  font-size: 15px;
}

.y0p-dialog-price {
  color: #2c79ff !important;
  font-size: 24px !important;
}

.y0p-dialog-tip {
  margin: 14px 0 0;
  color: #7e8dac;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.y0p-dialog-confirm {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2c79ff, #4a96ff);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 768px) {
  .y0p-floating-tools {
    right: calc(50% - 187.5px - 74px);
  }
}

.y0p-access-card {
  padding: 16px 18px;
  border: 1px solid rgba(255, 120, 120, .18);
  background: linear-gradient(180deg, rgba(255, 249, 249, .98), rgba(255, 255, 255, .98));
}

.y0p-access-title {
  color: #d63131;
  font-size: 18px;
  font-weight: 800;
}

.y0p-access-text {
  margin-top: 8px;
  color: #7a5560;
  font-size: 13px;
  line-height: 1.7;
}

.y0p-empty-state {
  padding: 32px 16px;
  color: #8a94a6;
  font-size: 13px;
  text-align: center;
}

.y0p-submit-btn:disabled,
.y0p-submit-btn-disabled {
  opacity: .6;
  cursor: not-allowed;
}

.complaint-company-row {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: #34415c;
  word-break: break-all;
}

.complaint-company-row strong {
  color: #1c356a;
  font-size: 17px;
}

.submit-btn-disabled {
  opacity: .6;
  pointer-events: none;
}