:root {
  --bg: #000000;
  --card: rgba(20, 24, 29, 0.90);
  --line: rgba(168, 178, 189, 0.22);
  --text: #e9eef4;
  --muted: #9aa6b3;
  --green: #55c593;
  --green-soft: rgba(85, 197, 147, 0.18);
  --title: #f1f6fb;
  --card-shadow: 0 8px 22px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.03) inset;
  --card-shadow-hover: 0 12px 28px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.04) inset;
  --lift-y: -1px;
  /* Hint/label typography scale */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --lh-11: 1.45;
  --lh-12: 1.55;
  --lh-13: 1.6;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text);
  font-family: Inter, "Microsoft YaHei", sans-serif;
  background: #000;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bg { display: none !important; }
.noise {
  display: block !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 3px 3px;
}
.fx-1 { width: 420px; height: 420px; top: -80px; right: -80px; background: #2a4d63; animation: float1 8s ease-in-out infinite; }
.fx-2 { width: 360px; height: 360px; bottom: -80px; left: -80px; background: #2c5b4b; animation: float2 9s ease-in-out infinite; }
@keyframes float1 { 0%,100%{ transform:translateY(0)}50%{ transform:translateY(14px)} }
@keyframes float2 { 0%,100%{ transform:translateY(0)}50%{ transform:translateY(-16px)} }

.wrap { max-width: 1280px; margin: 0 auto; padding: 24px; position: relative; z-index: 2; }
.top-banner{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(151,174,196,.24);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  margin-bottom: 14px;
  background: transparent;
}
.top-banner img{
  width: 100%;
  height: auto;
  display: block;
}
.hero {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,.42);
}
.pill { display: inline-block; background: rgba(85,197,147,.12); border: 1px solid rgba(85,197,147,.35); color: #c5dece; font-size: 11px; border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; font-weight: 600; }
.hero h1 { margin: 0; font-size: 30px; letter-spacing: .2px; color: var(--title); font-weight: 800; }
.hero p { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.hero__actions { display: flex; gap: 10px; }
.hero__meta{
  margin-top: 12px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #9ca8b5;
  font-size: var(--fs-11);
  line-height: var(--lh-11);
}
.hero__meta b{ color: #d8e3ec; font-weight: 700; letter-spacing: .2px; }

.layout {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(126, 170, 198, .20);
  background:
    linear-gradient(180deg, rgba(70, 126, 149, .08), rgba(12, 18, 25, .78) 24%, rgba(10, 16, 23, .86) 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.20);
}
.layout::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(117, 207, 176, .0), rgba(117, 207, 176, .58), rgba(166, 202, 255, .42), rgba(117, 207, 176, .0));
  pointer-events: none;
  opacity: .86;
}
.left { display: grid; gap: 18px; position: relative; }
.top-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.top-actions .btn{
  min-width: 104px;
}
.notice-banner{
  flex: 1 1 auto;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.28);
  background: rgba(14, 20, 27, .72);
  color: #dbe6ee;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: border-color .16s ease, background .16s ease;
}
.notice-banner:hover{
  border-color: rgba(151,174,196,.44);
  background: rgba(17, 24, 32, .82);
}
.notice-banner__tag{
  flex: 0 0 auto;
  color: #c6d3df;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.notice-banner__tag::before{
  content: "i";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(151,174,196,.48);
  color: #d4e0ea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.notice-banner__text{
  flex: 1 1 auto;
  min-width: 0;
  color: #c0cfdb;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-banner__action{
  flex: 0 0 auto;
  color: #d7e2ea;
  font-size: 12px;
  font-weight: 700;
}
#noticeBtn{
  display: block;
  min-width: 120px;
  margin: 8px auto 0;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  position: relative;
  z-index: 1;
}
.card:hover { transform: translateY(var(--lift-y)); border-color: rgba(151,174,196,.28); box-shadow: var(--card-shadow-hover); }
.card.select-open { z-index: 40; }
.card--flow{
  border-color: rgba(79,187,139,.38);
  background:
    linear-gradient(180deg, rgba(79,187,139,.12), rgba(79,187,139,.03)),
    var(--card);
  box-shadow:
    0 11px 28px rgba(0,0,0,.26),
    0 0 0 1px rgba(79,187,139,.12) inset;
}
.card--info{
  background:
    linear-gradient(180deg, rgba(150,168,186,.09), rgba(150,168,186,.03)),
    var(--card);
  border-color: rgba(151,174,196,.24);
}
.card--assets{
  background:
    linear-gradient(180deg, rgba(79,187,139,.09), rgba(79,187,139,.02)),
    var(--card);
  border-color: rgba(120,187,156,.28);
}
.card--resources{
  background:
    linear-gradient(180deg, rgba(224,176,96,.10), rgba(224,176,96,.02)),
    var(--card);
  border-color: rgba(207,171,112,.28);
}
.card--skins{
  background:
    linear-gradient(180deg, rgba(170,122,214,.08), rgba(170,122,214,.02)),
    var(--card);
  border-color: rgba(162,137,196,.28);
}
.card--combined{
  padding: 0;
  overflow: visible;
  border-color: rgba(151,174,196,.22);
  background: rgba(18, 23, 29, .94);
}
.card--combined:hover{
  transform: none;
  box-shadow: var(--card-shadow);
}
.subsec{
  padding: 16px 18px;
  border-top: 1px solid rgba(151,174,196,.10);
  background: transparent;
  position: relative;
}
.subsec.select-open-layer{
  z-index: 90;
}
.subsec:first-child{ border-top: none; }
.left .subsec{
  backdrop-filter: saturate(105%);
}
.left .subsec + .subsec{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
.subsec .card__hd{ margin-bottom: 12px; }
.subsec--info{
  background: transparent;
}
.subsec--flow{
  background: linear-gradient(180deg, rgba(79,187,139,.08), rgba(79,187,139,.02));
}
.subsec--resources{
  background: transparent;
}
.subsec--assets{
  background: transparent;
}
.subsec--skins{
  background: transparent;
}
.subsec::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 120px;
  height: 2px;
  border-radius: 99px;
  opacity: .55;
}
.subsec--info::before{ background: linear-gradient(90deg, rgba(142,165,187,.55), transparent); }
.subsec--flow::before{ background: linear-gradient(90deg, rgba(79,187,139,.52), transparent); }
.subsec--resources::before{ background: linear-gradient(90deg, rgba(201,156,83,.50), transparent); }
.subsec--assets::before{ background: linear-gradient(90deg, rgba(79,187,139,.52), transparent); }
.subsec--skins::before{ background: linear-gradient(90deg, rgba(159,127,202,.50), transparent); }
.subsec:first-child::before{ display: none; }
.card--settlement{
  background:
    linear-gradient(180deg, rgba(79,187,139,.12), rgba(79,187,139,.03)),
    var(--card);
  border-color: rgba(109,195,157,.32);
  box-shadow:
    0 12px 28px rgba(0,0,0,.26),
    0 0 0 1px rgba(79,187,139,.10) inset;
}
.card__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 800; font-size: 15px; color: var(--title); }
.card__hd span { width: 4px; height: 16px; border-radius: 99px; background: linear-gradient(180deg,#7ad0a8,#4fbb8b); }
.card--info .card__hd span { background: linear-gradient(180deg,#b8c7d6,#8ea5bb); }
/* base info compact row */
.base-row{
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1fr 0.95fr 0.8fr 0.8fr;
  gap: 10px;
  align-items: end;
  padding-top: 0;
}
.subsec--info .field{
  gap: 5px;
}
.subsec--info .field span{
  color: #a9b7c4;
  font-weight: 650;
  font-size: 11px;
}
.subsec--info .input,
.subsec--info .custom-select__trigger{
  background: rgba(17, 23, 30, .92);
  border-color: rgba(151,174,196,.24);
  height: 36px;
  font-size: 13px;
}
.subsec--info select.input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 10px;
  padding: 0 36px 0 12px;
  color: #dfeaf3;
  font-weight: 600;
  background-image:
    linear-gradient(90deg, rgba(151,174,196,.10), rgba(151,174,196,.10)),
    linear-gradient(45deg, transparent 50%, #9cb0c2 50%),
    linear-gradient(135deg, #9cb0c2 50%, transparent 50%);
  background-position:
    calc(100% - 30px) 50%,
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 1px 62%, 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.subsec--info select.input:hover{
  border-color: rgba(120,187,156,.46);
  background-color: rgba(21, 29, 37, .96);
}
.subsec--info select.input:focus{
  border-color: rgba(79,187,139,.68);
  box-shadow: 0 0 0 3px rgba(79,187,139,.14);
  background-color: rgba(22, 31, 39, .98);
}
.subsec--info select.input option{
  background: #1a232d;
  color: #dfeaf3;
}
.subsec--info .custom-select.open .custom-select__trigger{
  box-shadow: 0 0 0 3px rgba(85,197,147,.15);
}
.subsec--info .card__hd{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(151,174,196,.14);
}

/* assets compact row */
.assets-note-inline{
  margin: -1px 0 8px;
  color: #9caebb;
  font-size: 13px;
  line-height: 1.6;
}
.assets-row{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.subsec--assets .field{
  gap: 7px;
  border: 1px solid rgba(151,174,196,.20);
  background: rgba(17, 22, 28, .58);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.16);
  padding: 8px 8px 9px;
  min-height: 82px;
}
.subsec--assets .field span{
  color: #b8c7d5;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 16px;
}
.subsec--assets .input,
.subsec--assets .custom-select__trigger{
  height: 40px;
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(12, 17, 23, .78);
  border-color: rgba(151,174,196,.22);
}
.subsec--assets .input:focus,
.subsec--assets .custom-select.open .custom-select__trigger{
  border-color: rgba(85,197,147,.62);
  box-shadow: 0 0 0 3px rgba(85,197,147,.12);
  background: rgba(15, 21, 27, .85);
}
.subsec--assets .accent{
  border-color: rgba(85,197,147,.55);
  background: rgba(27, 58, 43, .66);
}
.subsec--assets .field em{
  color: #7f8f9f;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.subsec--assets .custom-select.open .custom-select__trigger::after{
  top: 16px;
}

/* stronger interaction feedback for 基础信息 dropdowns */
.card--info .custom-select__trigger{
  background: rgba(36, 46, 56, .64);
  border-color: rgba(151,174,196,.24);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, transform .14s ease;
}
.card--info .custom-select__trigger:hover{
  border-color: rgba(151,174,196,.40);
  background: rgba(42, 52, 62, .72);
}
.card--info .custom-select.open .custom-select__trigger{
  border-color: rgba(111, 195, 157, .78);
  box-shadow:
    0 0 0 3px rgba(79,187,139,.18),
    0 6px 16px rgba(0,0,0,.22);
  background: rgba(45, 57, 68, .84);
  transform: translateY(-1px);
}
.card--info .custom-select__menu{
  border-color: rgba(151,174,196,.34);
  background: rgba(30, 39, 48, .86);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
}
.card--info .custom-select__item{
  color: #dbe5ee;
}
.card--info .custom-select__item:hover{
  background: rgba(79,187,139,.20);
  color: #f1fbf6;
}
.card--info .custom-select__item.active{
  background: rgba(79,187,139,.24);
  border: 1px solid rgba(79,187,139,.42);
  color: #effcf5;
}
.card--assets .card__hd span { background: linear-gradient(180deg,#84ddb1,#4fbb8b); }
.card--resources .card__hd span { background: linear-gradient(180deg,#f2cd8a,#c99c53); }
.card--skins .card__hd span { background: linear-gradient(180deg,#c7a4f0,#9f7fca); }
.card--settlement .card__hd span { background: linear-gradient(180deg,#8de3bc,#4fbb8b); }
.subsec--assets .card__hd span { background: linear-gradient(180deg,#84ddb1,#4fbb8b); }
.subsec--flow .card__hd span { background: linear-gradient(180deg,#84ddb1,#4fbb8b); }
.subsec--resources .card__hd span { background: linear-gradient(180deg,#f2cd8a,#c99c53); }
.subsec--skins .card__hd span { background: linear-gradient(180deg,#c7a4f0,#9f7fca); }
.sticky { position: static; top: auto; }
.flow-link{
  margin-left: auto;
  border: none;
  background: transparent;
  color: #9fd2ba;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.flow-link:hover{ text-decoration: underline; }
.flow-tip{
  margin: -2px 0 12px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px dashed rgba(151,174,196,.28);
  background: rgba(12, 18, 24, .42);
  color: #9eb4c7;
  font-size: 13px;
  line-height: 1.6;
}

.process-steps{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.process-step{
  border: 1px solid rgba(151,174,196,.2);
  background: rgba(10, 16, 22, .52);
  border-radius: 12px;
  padding: 12px 11px 12px;
  min-height: 106px;
  position: relative;
  transition: border-color .16s ease, transform .16s ease, background .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  text-align: center;
}
.process-step:hover{
  border-color: rgba(79,187,139,.50);
  transform: translateY(var(--lift-y));
  background: rgba(15, 22, 29, .66);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.process-step__num{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: transparent;
  color: #b8c9d8;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(168, 186, 203, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  letter-spacing: .1px;
}
.process-step:first-child .process-step__num{
  background: transparent;
  color: #96e5c2;
  border-color: rgba(122, 231, 184, .58);
  box-shadow: inset 0 0 0 1px rgba(122, 231, 184, .18);
}
.process-step__icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79,187,139,.16);
  border: 1px solid rgba(79,187,139,.34);
  margin: 0 auto;
  margin-top: 6px;
}
.process-step__icon img{
  width: 22px;
  height: 22px;
  display: block;
}
.process-step__title{
  margin-top: 10px;
  color: #e7f0f7;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
  text-align: center;
}
.process-step__desc{
  margin-top: 4px;
  color: #97acbf;
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  text-align: center;
}
.process-step__line{
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 1px;
  background: linear-gradient(90deg, rgba(151,174,196,.58), rgba(151,174,196,.18));
}
.process-step__line::after{
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(151,174,196,.56);
  border-right: 1px solid rgba(151,174,196,.56);
  transform: rotate(45deg);
}
.process-steps .process-step:first-child{
  animation: stepPulse 1.8s ease-in-out infinite;
}
.process-steps .process-step:first-child .process-step__title{
  color: #dff8ec;
  position: relative;
  animation: stepTitlePulse 1.8s ease-in-out infinite;
}
.process-steps .process-step:first-child .process-step__title::before{
  content: none;
}
.process-steps .process-step:first-child .process-step__title::selection{
  background: rgba(122,231,184,.25);
}
.process-steps .process-step:first-child .process-step__title::after{
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, rgba(122,231,184,0), rgba(122,231,184,.7), rgba(122,231,184,0));
  opacity: .45;
  animation: stepTitleSweep 1.8s ease-in-out infinite;
}
.process-steps .process-step:first-child::after{
  content: "进行中";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #bff6db;
  border: 1px solid rgba(122,231,184,.42);
  background-color: rgba(26, 67, 52, .42);
  border-radius: 999px;
  padding: 1px 6px 1px 14px;
  letter-spacing: .2px;
  background-image: radial-gradient(circle, rgba(122,231,184,.95) 0 45%, rgba(122,231,184,0) 55%);
  background-repeat: no-repeat;
  background-position: 6px center;
  background-size: 6px 6px;
  animation: stepBadgePulse 1.2s ease-in-out infinite;
  z-index: 3;
}
@keyframes stepPulse{
  0%, 100%{
    box-shadow: 0 6px 14px rgba(0,0,0,.18), 0 0 0 0 rgba(79,187,139,0);
    border-color: rgba(151,174,196,.2);
  }
  50%{
    box-shadow: 0 10px 20px rgba(0,0,0,.22), 0 0 0 5px rgba(79,187,139,.10);
    border-color: rgba(79,187,139,.48);
  }
}
@keyframes stepTitlePulse{
  0%, 100%{
    text-shadow: 0 0 0 rgba(122,231,184,0);
    opacity: .9;
  }
  50%{
    text-shadow: 0 0 8px rgba(122,231,184,.38);
    opacity: 1;
  }
}
@keyframes stepTitleSweep{
  0%, 100%{
    transform: scaleX(.72);
    opacity: .2;
  }
  50%{
    transform: scaleX(1);
    opacity: .62;
  }
}
@keyframes stepBadgePulse{
  0%, 100%{
    filter: drop-shadow(0 0 0 rgba(122,231,184,0));
    opacity: .85;
  }
  50%{
    filter: drop-shadow(0 0 6px rgba(122,231,184,.45));
    opacity: 1;
  }
}

.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field span { color: var(--muted); font-size: 12px; display: flex; gap: 8px; font-weight: 600; }
.subsec--skins .field{
  gap: 6px;
}
.subsec--skins .field span{
  font-size: 12px;
  font-weight: 700;
  color: #b7c6d5;
}
.field em { font-style: normal; color: #7f8b97; font-size: 11px; }
.selected-tag{
  max-width: 100%;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(151,174,196,.30);
  background: rgba(20, 27, 35, .72);
  color: #d5e2ed;
  font-size: 12px;
  line-height: 22px;
  padding: 0 7px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.selected-tag--green{
  border-color: rgba(85,197,147,.5);
  background: rgba(79,187,139,.18);
  color: #d8f4e6;
}
.selected-tag--teal{
  border-color: rgba(84,214,197,.5);
  background: rgba(60,179,160,.18);
  color: #d7f6f0;
}
.selected-tag--violet{
  border-color: rgba(170,122,214,.55);
  background: rgba(147,99,191,.20);
  color: #f0e2ff;
}
.selected-tag--blue{
  border-color: rgba(96,158,230,.55);
  background: rgba(74,123,194,.2);
  color: #e3efff;
}
.selected-tag--cyan{
  border-color: rgba(76,191,207,.55);
  background: rgba(55,146,160,.2);
  color: #daf7fb;
}
.selected-tag--pink{
  border-color: rgba(225,134,189,.55);
  background: rgba(173,95,145,.2);
  color: #ffe4f5;
}
.selected-tag--red{
  border-color: rgba(238,113,121,.55);
  background: rgba(176,75,82,.22);
  color: #ffe1e4;
}
.selected-tag--orange{
  border-color: rgba(244,165,90,.6);
  background: rgba(182,118,56,.24);
  color: #ffe9d1;
}
.selected-tag--indigo{
  border-color: rgba(124,127,235,.55);
  background: rgba(84,87,178,.22);
  color: #e7e9ff;
}
.selected-tag__label{
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selected-tag__x{
  border: none;
  background: transparent;
  color: #d8e4ee;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.selected-tag__x:hover{
  background: rgba(255,255,255,.18);
  color: #ffffff;
}
.custom-select__trigger--multi{
  min-height: 40px;
  height: auto;
  padding: 7px 30px 7px 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.input {
  width: 100%; height: 40px; border-radius: 10px; border: 1px solid rgba(151,174,196,.25);
  background: rgba(27, 33, 40, .92); color: var(--text); padding: 0 12px; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  font-size: 13px;
  font-weight: 500;
}
.input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.input:focus { border-color: rgba(79,187,139,.72); box-shadow: 0 0 0 4px rgba(79,187,139,.16); transform: translateY(-1px); }
.accent { border-color: rgba(79,187,139,.52); background: rgba(79,187,139,.10); font-weight: 700; }

/* custom select */
.select-native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.custom-select {
  position: relative;
}
.custom-select__trigger {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.25);
  background: rgba(16, 21, 27, .68);
  color: var(--text);
  padding: 0 34px 0 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.custom-select__trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.8px solid #b4c0cd;
  border-bottom: 1.8px solid #b4c0cd;
  transform: rotate(45deg);
  position: absolute;
  right: 13px;
  top: 13px;
  transition: transform .18s ease, top .18s ease;
}
.custom-select.open .custom-select__trigger {
  border-color: rgba(79,187,139,.72);
  box-shadow: 0 0 0 3px rgba(79,187,139,.15);
  background: rgba(20, 26, 33, .82);
}
.custom-select.open .custom-select__trigger::after {
  transform: rotate(225deg);
  top: 16px;
}
.custom-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid rgba(120, 145, 170, .34);
  background:
    linear-gradient(180deg, rgba(31, 40, 50, .96), rgba(21, 29, 37, .96));
  border-radius: 12px;
  box-shadow:
    0 16px 34px rgba(0,0,0,.46),
    0 0 0 1px rgba(79,187,139,.10) inset;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  max-height: 248px;
  overflow: auto;
  padding: 8px;
  margin: 0;
  list-style: none;
  z-index: 120;
}
.subsec--info .custom-select{
  z-index: 30;
}
.subsec--info .custom-select.open{
  z-index: 80;
}
.custom-select__menu::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(236, 246, 255, .04) inset;
}
.custom-select__item {
  padding: 10px 11px;
  border-radius: 9px;
  color: #dce6ef;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  line-height: 1.35;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.custom-select__item:hover {
  background: rgba(79,187,139,.18);
  border-color: rgba(79,187,139,.28);
  color: #f1fbf6;
}
.custom-select__item.active {
  background: rgba(79,187,139,.24);
  border: 1px solid rgba(79,187,139,.48);
  color: #e6fff2;
  box-shadow: 0 0 0 1px rgba(79,187,139,.14) inset;
}
.custom-select__menu.is-hidden {
  display: none;
}
.custom-select__menu::-webkit-scrollbar{
  width: 8px;
}
.custom-select__menu::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.custom-select__menu::-webkit-scrollbar-thumb{
  background: rgba(145, 164, 184, .45);
  border-radius: 999px;
}
.custom-select__menu::-webkit-scrollbar-thumb:hover{
  background: rgba(145, 164, 184, .62);
}
.note {
  margin-bottom: 14px; border: 1px dashed rgba(151,174,196,.33); background: rgba(9,14,20,.45);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #a6b4c1; line-height: 1.55;
}
.card--assets .note{
  border-color: rgba(120,187,156,.34);
  background: rgba(18, 28, 24, .42);
  color: #a9c6b8;
}
.res-warn{
  border: 1px solid rgba(151,174,196,.16);
  background: rgba(22, 28, 35, .56);
  border-radius: 10px;
  padding: 10px 12px;
}
.card--resources .res-warn{
  border-color: rgba(207,171,112,.22);
  background: rgba(30, 26, 18, .44);
}
.res-warn__head{
  color: #e7c97f;
  font-size: var(--fs-12);
  font-weight: 700;
}
.res-warn__list{
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #d8e3ec;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
.res-warn__list .k-green{ color: #52d99c; font-weight: 700; }
.res-warn__list .k-white{ color: #e9f1f8; }
.res-warn__list .k-yellow{ color: #ffd257; font-weight: 700; }
.res-warn__list .k-red{ color: #ff5b6d; font-weight: 700; }

.price-ref-btn{
  margin-top: 12px;
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.24);
  background: rgba(16, 21, 27, .5);
  color: #b8c8d6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.price-ref-btn:hover{
  border-color: rgba(79,187,139,.38);
  color: #d1e0eb;
}
.card--resources .price-ref-btn:hover{
  border-color: rgba(207,171,112,.40);
  color: #ecd8b2;
}
.price-ref-btn__arrow{
  font-size: 16px;
  transition: transform .16s ease;
}
.price-ref-btn[aria-expanded="true"] .price-ref-btn__arrow{
  transform: rotate(180deg);
}

.price-ref{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.price-ref__item{
  border: 1px solid rgba(151,174,196,.2);
  background: rgba(13, 18, 24, .52);
  border-radius: 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.price-ref__name{
  color: #a9b7c4;
  font-size: 12px;
}
.price-ref__price{
  color: #8fd9b4;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.price-ref-tip{
  margin-top: 10px;
  color: #8f9dac;
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  text-align: center;
}

.ratio { border: 1px solid rgba(151,174,196,.24); background: rgba(9,14,20,.45); border-radius: 12px; padding: 15px; }
.ratio__k { font-size: 12px; color: var(--muted); }
.ratio__v { margin-top: 5px; font-size: 40px; color: #90e4bd; font-weight: 800; line-height: 1; letter-spacing: .3px; }
.ratio__desc { margin-top: 8px; font-size: 12px; color: #a4b1be; line-height: 1.55; }
.ratio__chips{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip{
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(151,174,196,.28);
  background: rgba(14,20,27,.55);
  color: #a5b2bf;
  font-size: var(--fs-11);
  font-weight: 600;
}
.chip.is-ok{
  border-color: rgba(79,187,139,.50);
  background: rgba(79,187,139,.14);
  color: #cce9db;
}

.switches { margin-top: 12px; display: grid; gap: 10px; }
.switch-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid rgba(151,174,196,.2); background: rgba(9,14,20,.45); border-radius: 12px; padding: 11px 12px;
}
.switch-item b { font-size: 13px; letter-spacing: .1px; }
.switch-item p { margin: 4px 0 0; font-size: var(--fs-11); color: var(--muted); line-height: var(--lh-11); }

.toggle {
  width: 50px; height: 28px; border-radius: 999px; border: 1px solid rgba(151,174,196,.4); background: #2c3642;
  position: relative; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .16s ease;
}
.toggle::after {
  content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 999px; background: #d8e3ec; transition: left .2s ease, box-shadow .2s ease;
}
.toggle.is-on { background: rgba(70,197,138,.5); border-color: rgba(70,197,138,.8); }
.toggle.is-on::after { left: 25px; background: #ecfff6; box-shadow: 0 0 0 4px rgba(236,255,246,.08); }
.toggle:hover{ transform: translateY(-1px); }
.toggle:active{ transform: scale(.96); }

.line-items { margin-top: 12px; border-top: 1px solid rgba(151,174,196,.2); border-bottom: 1px solid rgba(151,174,196,.2); padding: 10px 0; display: grid; gap: 8px; }
.line-items div { display: flex; justify-content: space-between; font-size: 13px; color: #a8b5c2; line-height: 1.4; }
.line-items b { color: #f0f5fa; }
.line-items em { font-style: normal; }

.total { margin-top: 13px; display: flex; justify-content: space-between; align-items: end; }
.total span { color: var(--muted); font-size: var(--fs-12); }
.total strong { font-size: 36px; color: #97e2be; line-height: 1; letter-spacing: .2px; }
.total em { font-style: normal; }

.btn {
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.35);
  background: rgba(24,30,37,.92);
  color: var(--text);
  cursor: pointer;
  padding: 0 13px;
  font-weight: 750;
  font-size: var(--fs-13);
  letter-spacing: .1px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover { transform: translateY(var(--lift-y)); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid rgba(79,187,139,.45); outline-offset: 2px; }
.ghost {
  font-weight: 650;
  background: rgba(12, 18, 24, .40);
}
.primary { font-weight: 850; }
.primary:focus-visible { outline-color: rgba(79,187,139,.62); }
.toggle:focus-visible { outline: 2px solid rgba(79,187,139,.45); outline-offset: 2px; }

.modal__card {
  width: min(460px,100%); background: rgba(16,22,29,.95); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  box-shadow: 0 16px 38px rgba(0,0,0,.42);
}
.ghost:hover { border-color: rgba(151,174,196,.58); }
.primary { border-color: rgba(85,197,147,.58); background: rgba(85,197,147,.18); color: #e9f7ef; }
.primary:hover { background: rgba(85,197,147,.26); }
.card--settlement .ratio{
  border-color: rgba(109,195,157,.34);
  background: rgba(15, 28, 23, .42);
}
.card--settlement .line-items{
  border-top-color: rgba(109,195,157,.24);
  border-bottom-color: rgba(109,195,157,.24);
}

/* settlement center - screenshot-like emphasis */
.settlement-options{
  display: grid;
  gap: 10px;
}
.settle-opt{
  border-radius: 12px;
  border: 1px solid rgba(151,174,196,.22);
  background: rgba(18, 24, 31, .62);
  padding: 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.settle-opt__left{ min-width: 0; }
.settle-opt__title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settle-opt__desc{
  margin-top: 6px;
  color: rgba(233, 241, 248, .74);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .05px;
}
.safe-intro-link{
  margin-top: 8px;
  border: none;
  background: transparent;
  color: #65d79f;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.safe-intro-link:hover{
  text-decoration: underline;
}
.settle-opt__desc b{ font-weight: 800; }
.settle-opt__badge{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid rgba(151,174,196,.18);
  background: rgba(12, 18, 24, .40);
  color: #eaf2f8;
}
.settle-opt__badge svg{
  width: 14px;
  height: 14px;
  display: block;
}
.settle-opt__badge--danger{
  border-color: rgba(255,90,108,.28);
  background: rgba(255,90,108,.12);
  color: #ffd6dc;
}
.settle-opt__badge--safe{
  border-color: rgba(85,197,147,.28);
  background: rgba(85,197,147,.12);
  color: #d7ffec;
}

.hl-yellow{ color: #ffd257; font-weight: 800; }
.hl-red{ color: #ff6b7b; font-weight: 800; }
.hl-green{ color: #7ae7b8; font-weight: 800; }
.settle-opt--danger{
  border-color: rgba(255,90,108,.30);
  background: linear-gradient(180deg, rgba(255,90,108,.14), rgba(22,24,28,.58));
}
.settle-opt--danger .settle-opt__title{ color: #ff6f83; }
.settle-opt--danger .settle-opt__desc{ color: rgba(255,255,255,.70); }
.settle-opt--safe{
  border-color: rgba(85,197,147,.34);
  background: linear-gradient(180deg, rgba(85,197,147,.12), rgba(20,28,24,.55));
}
.settle-opt--safe .settle-opt__title{ color: #6fdbac; }
.settle-opt--safe .settle-opt__desc b{ color: #7ae7b8; }

.settle-opt--danger .toggle.is-on{
  background: rgba(255,90,108,.58);
  border-color: rgba(255,110,126,.9);
  box-shadow: 0 0 0 4px rgba(255,90,108,.16);
}
.settle-opt--safe .toggle.is-on{
  background: rgba(85,197,147,.58);
  border-color: rgba(85,197,147,.9);
  box-shadow: 0 0 0 4px rgba(85,197,147,.16);
}
.settle-opt.is-active{
  transform: translateY(-1px);
}
.settle-opt--danger.is-active{
  border-color: rgba(255,110,126,.52);
  background: linear-gradient(180deg, rgba(255,90,108,.18), rgba(22,24,28,.62));
  box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 0 0 1px rgba(255,90,108,.16) inset;
}
.settle-opt--safe.is-active{
  border-color: rgba(85,197,147,.56);
  background: linear-gradient(180deg, rgba(85,197,147,.18), rgba(20,28,24,.62));
  box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 0 0 1px rgba(85,197,147,.16) inset;
}

.settle-sum{
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(151,174,196,.22);
  background: rgba(17, 22, 28, .74);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}
.contact-btn{
  margin-top: 10px;
  width: 100%;
  height: 42px;
  font-size: 14px;
}
.next-step-hint{
  margin-top: 10px;
  border: 1px dashed rgba(151,174,196,.28);
  border-radius: 10px;
  padding: 8px 10px;
  color: #9fb0bf;
  font-size: 13px;
  line-height: 1.55;
}
.next-step-hint.is-ready{
  border-color: rgba(85,197,147,.48);
  color: #bdeed7;
  background: rgba(23, 53, 40, .45);
}
.contact-btn.is-ready{
  border-color: rgba(85,197,147,.85);
  box-shadow: 0 0 0 3px rgba(85,197,147,.14);
  animation: contactPulse 1.6s ease-in-out infinite;
}
.contact-btn.is-ready:hover{
  box-shadow: 0 0 0 4px rgba(85,197,147,.22);
}
.contact-btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  border-color: rgba(151,174,196,.28);
  background: rgba(45,52,61,.45);
  color: #a8b4c0;
}
.contact-btn:disabled:hover{
  transform: none;
}
@keyframes contactPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85,197,147,.00); }
  50% { box-shadow: 0 0 0 7px rgba(85,197,147,.14); }
}
.settle-sum__left{ min-width: 0; }
.settle-sum__label{
  font-size: var(--fs-12);
  color: #97a7b5;
}
.settle-sum__money{
  margin-top: 4px;
  font-size: 42px;
  font-weight: 800;
  color: #76e4b3;
  line-height: 1;
  letter-spacing: .2px;
}
.settle-sum__money em{ font-style: normal; }
.settle-sum__hint{
  margin-top: 6px;
  color: #9db0bf;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
.settle-sum__left .ratio__chips{
  margin-top: 8px;
}

.settle-sum__right{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.metric{
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.20);
  background: rgba(12, 18, 24, .55);
  padding: 9px 10px;
  min-width: 0;
}
.metric__k{
  display: block;
  font-size: var(--fs-11);
  color: #8fa2b2;
}
.metric__v{
  margin-top: 4px;
  display: block;
  font-size: 14px;
  color: #dbe7f0;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric__v em{ font-style: normal; }

.metric--ratio .metric__k{
  color: #9cbce4;
}
.metric--ratio .metric__v{
  color: #d6e7ff;
}

.metric--coin .metric__k{
  color: #8fd6b6;
}
.metric--coin .metric__v{
  color: #c8f2de;
}
.metric--coin .metric__v em{
  color: #6fe0ac;
}

.metric--equip .metric__k{
  color: #d9b88e;
}
.metric--equip .metric__v{
  color: #f3e4cf;
}
.metric--equip .metric__v em{
  color: #f0bd76;
}

.metric--fee .metric__k{
  color: #e9a3b3;
}
.metric--fee .metric__v{
  color: #ffd6df;
}

@media (max-width: 1100px){
  .settle-sum{
    flex-direction: column;
    align-items: stretch;
  }
  .settle-sum__right{
    width: 100%;
  }
}

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 9; }
.modal__card h3 { margin: 0 0 8px; font-size: 18px; color: var(--title); }
.modal__card p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.notice-list{
  max-height: min(62vh, 460px);
  overflow: auto;
  margin: 0 0 14px;
  padding-right: 4px;
}
.notice-list p{
  margin: 0 0 8px;
  color: #d8e4ee;
  font-size: 13px;
  line-height: 1.6;
}
.notice-list .notice-sub{
  color: #b7c7d5;
  padding-left: 12px;
}
.is-hidden { display: none !important; }

.modal__card--process{
  width: min(520px, 100%);
  background: rgba(20, 24, 29, 0.96);
}
.modal__card--contact{
  width: min(500px, 100%);
  background: rgba(20, 24, 29, 0.97);
}
.modal__card--safeintro{
  width: min(760px, 100%);
  background: rgba(22, 25, 31, 0.98);
}
.safeintro-body{
  max-height: min(68vh, 620px);
  overflow: auto;
  padding-right: 6px;
  display: grid;
  gap: 14px;
}
.safeintro-sec h4{
  margin: 0 0 8px;
  font-size: 15px;
  color: #edf5fc;
  border-left: 4px solid #35dd98;
  padding-left: 10px;
}
.safeintro-panel{
  border: 1px solid rgba(151,174,196,.16);
  background: rgba(12, 17, 23, .62);
  border-radius: 10px;
  padding: 12px;
  color: #d7e2ec;
  font-size: 14px;
  line-height: 1.75;
}
.safeintro-alert{
  border: 1px solid rgba(221, 94, 106, .45);
  background: rgba(70, 33, 39, .5);
  color: #ffd9de;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.7;
}
.contact-desc{
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 132px;
  overflow: auto;
  padding-right: 4px;
}
.copy-all-btn{
  width: 100%;
  margin-bottom: 8px;
}
.contact-list,
#contactList{
  display: grid;
  gap: 8px;
}
#contactList + #contactQQList{
  margin-top: 8px;
}
#contactQQList{
  display: grid;
  gap: 8px;
}
.modal__card--contact{
  max-height: min(84vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact-scroll{
  max-height: min(64vh, 560px);
  overflow: auto;
  padding-right: 6px;
}
.contact-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(151,174,196,.2);
  border-radius: 10px;
  background: rgba(12, 18, 24, .5);
  padding: 10px 12px;
  color: #d3dee8;
  font-size: 13px;
}
.contact-item span{
  color: #97a8b7;
}
.contact-item b{
  font-size: 14px;
  color: #f2f8fd;
  margin-left: auto;
  margin-right: 8px;
}
.contact-copy-btn{
  height: 32px;
  min-width: 56px;
  padding: 0 10px;
  font-size: 12px;
}
.contact-qr{
  margin-top: 12px;
  border: 1px dashed rgba(151,174,196,.28);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: rgba(10, 15, 20, .46);
}
.contact-qr img{
  width: min(240px, 100%);
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.2);
}
.contact-qr__tip{
  color: #9aabbb;
  font-size: 12px;
  line-height: 1.5;
}
.toast{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 1200;
  min-width: 280px;
  max-width: min(520px, calc(100vw - 28px));
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.28);
  background: rgba(22, 28, 35, .96);
  color: #e8f3ec;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.is-show{
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.is-success{
  border-color: rgba(85,197,147,.55);
  background: rgba(23, 53, 40, .95);
  color: #d8f7e8;
}
.toast.is-error{
  border-color: rgba(255,107,123,.55);
  background: rgba(63, 29, 35, .95);
  color: #ffd8de;
}
.toast.is-warn{
  border-color: rgba(255, 210, 87, .55);
  background: rgba(62, 50, 24, .95);
  color: #ffe9b5;
}

.inline-toast{
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.22);
  background: rgba(12, 18, 24, .52);
  color: #dbe7f0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
.inline-toast.is-success{
  border-color: rgba(85,197,147,.55);
  background: rgba(23, 53, 40, .55);
  color: #d8f7e8;
}
.inline-toast.is-warn{
  border-color: rgba(255, 210, 87, .55);
  background: rgba(62, 50, 24, .55);
  color: #ffe9b5;
}
.process-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.process-modal__close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(151,174,196,.22);
  background: rgba(12, 18, 24, .45);
  color: #dbe7f0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.process-modal__close:hover{ border-color: rgba(151,174,196,.38); }

.process-modal__body{
  padding: 6px 4px 10px;
}
.process-modal__item{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}
.process-modal__dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8de3bc, #4fbb8b);
  color: #062014;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
.process-modal__title{
  font-size: 16px;
  font-weight: 800;
  color: #eef6fc;
  letter-spacing: .2px;
}
.process-modal__desc{
  margin-top: 6px;
  color: rgba(233, 241, 248, .70);
  font-size: 12px;
  line-height: 1.6;
}
.process-modal__line{
  width: 2px;
  height: 16px;
  background: rgba(127, 216, 169, .35);
  margin: 6px 0 6px 16px;
  border-radius: 999px;
}
.process-modal__btn{
  width: 100%;
  height: 42px;
  border-radius: 10px;
}

/* screenshot-aligned refinement: settlement + resources */
.card--settlement{
  border-radius: 18px;
  border-color: rgba(84, 162, 141, .34);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(28, 71, 61, .26) 0%, rgba(11, 18, 26, .95) 48%, rgba(9, 15, 22, .98) 100%),
    #09111a;
  box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 0 0 1px rgba(130, 206, 176, .06);
}
.right .card--settlement{
  margin-top: 0;
  background:
    linear-gradient(180deg, rgba(83, 176, 156, .10), rgba(9, 15, 22, .98) 34%),
    radial-gradient(120% 160% at 0% 0%, rgba(28, 71, 61, .22) 0%, rgba(11, 18, 26, .94) 48%, rgba(9, 15, 22, .98) 100%),
    #09111a;
}
.card--settlement .card__hd{
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(120, 189, 165, .18);
}
.settlement-options{ gap: 12px; }
.settle-opt{
  border-radius: 15px;
  padding: 14px 14px;
}
.settle-opt__title{
  font-size: 16px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 900;
  line-height: 1.15;
}
.settle-opt__desc{
  margin-top: 7px;
  font-size: 12px;
  font-size: clamp(12px, .92vw, 13px);
  line-height: 1.45;
  color: rgba(238, 246, 252, .76);
}
.settle-opt__badge{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(151,174,196,.24);
  background: rgba(11, 18, 24, .48);
}
.settle-opt__badge svg{
  width: 12px;
  height: 12px;
}
.toggle{
  width: 54px;
  height: 30px;
  background: #324252;
  border-color: rgba(176, 194, 210, .38);
}
.toggle::after{
  width: 22px;
  height: 22px;
}
.toggle.is-on::after{ left: 27px; }
.settle-sum{
  margin-top: 14px;
  border-radius: 16px;
  border-color: rgba(85, 197, 147, .26);
  background:
    linear-gradient(125deg, rgba(44, 110, 94, .28), rgba(9, 18, 30, .92) 42%, rgba(11, 20, 33, .92) 100%);
  align-items: stretch;
  padding: 16px;
}
.settle-sum__left{
  flex: 1.35 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(111, 219, 172, .16), rgba(111, 219, 172, .04) 55%, rgba(10, 18, 28, .12));
  box-shadow: inset 0 0 0 1px rgba(120, 226, 179, .16);
}
.settle-sum__label{
  color: #e7fff4;
  font-size: 14px;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settle-sum__money{
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 800;
  letter-spacing: .5px;
  color: #b5ffe0;
}
.settle-sum__money em{
  font-style: normal;
  font-size: clamp(56px, 5.2vw, 82px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: .8px;
  color: #8dffcb;
}
.settle-sum__hint{
  margin-top: 12px;
  color: #d9ecf8;
  font-size: 13px;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.55;
  max-width: 42ch;
}
.settle-sum__left .ratio__chips{ display: none; }
.settle-sum__ratio-card{
  width: 100%;
  min-width: 0;
  position: relative;
  border-radius: 14px;
  border-color: rgba(84, 177, 144, .4);
  background: linear-gradient(145deg, rgba(11, 36, 36, .68), rgba(10, 19, 28, .84));
  box-shadow: inset 0 0 0 1px rgba(110, 200, 164, .06);
}
.settle-sum__right{
  flex: .8 1 0;
  width: auto;
  min-width: 240px;
  max-width: 420px;
  display: grid;
  gap: 10px;
}
.settle-sum__ratio-card .ratio__k{
  color: #d8ebf7;
  font-size: 13px;
  font-size: clamp(12px, .96vw, 13px);
  font-weight: 700;
  letter-spacing: .04em;
}
.settle-sum__ratio-card .ratio__v{
  margin-top: 8px;
  font-size: 44px;
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .35px;
  color: #95f7c8;
  text-shadow: none;
}
.settle-sum__ratio-card .ratio__desc{
  margin-top: 12px;
  color: #bed2e1;
  font-size: 13px;
  font-size: clamp(12px, .94vw, 13px);
  line-height: 1.5;
  min-height: 38px;
  max-height: 88px;
  overflow: auto;
  padding-right: 4px;
}
.settle-sum__ratio-card .ratio__adj{
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(118, 210, 168, .35);
  background: rgba(16, 34, 28, .56);
  color: #b7e8d2;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}
.settle-sum__ratio-card .ratio__adj::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #83f3c0;
  box-shadow: 0 0 8px rgba(131, 243, 192, .9);
  flex: 0 0 6px;
  animation: ratioDotBreath 1.7s ease-in-out infinite;
}
.settle-sum__ratio-card .ratio__adj.is-empty{
  display: none;
}
@keyframes ratioDotBreath {
  0%, 100% {
    opacity: .55;
    transform: scale(.88);
    box-shadow: 0 0 4px rgba(131, 243, 192, .45);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(131, 243, 192, .95);
  }
}
.line-items{
  margin-top: 14px;
  border-top: 1px solid rgba(126, 186, 162, .22);
  border-bottom: 1px solid rgba(126, 186, 162, .22);
  padding: 12px 0;
  gap: 10px;
}
.line-items--side{
  margin-top: 0;
  border: 1px solid rgba(84, 177, 144, .4);
  background: linear-gradient(145deg, rgba(11, 36, 36, .68), rgba(10, 19, 28, .84));
  box-shadow: inset 0 0 0 1px rgba(110, 200, 164, .06);
  border-radius: 14px;
  padding: 10px 12px;
  gap: 8px;
}
.line-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
}
.line-items--side .line-item{
  border-top: 1px solid rgba(126, 186, 162, .16);
}
.line-items--side .line-item:first-child{
  border-top: none;
}
.line-item__k{
  color: #bfd9e8;
  font-size: 12px;
  font-size: clamp(11px, .9vw, 12px);
  font-weight: 600;
}
.line-item__v{
  color: #eaf7ff;
  font-size: 18px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: .1px;
}
.line-item__v em{ font-style: normal; }
.next-step-hint{
  margin-top: 12px;
  border-radius: 11px;
  border-color: rgba(127, 178, 204, .27);
  color: #aed0e4;
  background: rgba(12, 21, 31, .72);
  padding: 11px 14px;
  font-size: 13px;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.38;
}
.next-step-hint.is-ready{
  border: 1px dashed rgba(151,174,196,.28);
  background: rgba(12, 21, 31, .72);
  color: #aed0e4;
  font-weight: 500;
  box-shadow: none;
}
.next-step-hint.is-ready::before{
  content: "";
}
.contact-btn{
  margin-top: 12px;
  height: 46px;
  border-radius: 12px;
  border-color: rgba(92, 208, 160, .72);
  background: linear-gradient(180deg, #46cc9f, #36ac88);
  color: #f3fff8;
  font-size: 14px;
  font-size: clamp(13px, 1.05vw, 14px);
  font-weight: 850;
}
.contact-btn.is-ready{
  box-shadow: 0 0 0 3px rgba(89, 219, 163, .24), 0 10px 26px rgba(31, 132, 96, .34);
  animation: ctaGlow 1.05s ease-in-out infinite;
}
.contact-btn:disabled{
  opacity: .96;
  border-color: rgba(92, 208, 160, .56);
  background: linear-gradient(180deg, rgba(70, 204, 159, .88), rgba(54, 172, 136, .88));
  color: #e9fff3;
}
.contact-btn.is-ready:hover{
  box-shadow: 0 0 0 4px rgba(89, 219, 163, .30), 0 12px 30px rgba(31, 132, 96, .42);
}
@keyframes ctaGlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(89, 219, 163, .0), 0 8px 18px rgba(31, 132, 96, .22);
  }
  50% {
    transform: translateY(-2px) scale(1.012);
    filter: brightness(1.1);
    box-shadow: 0 0 0 8px rgba(89, 219, 163, .16), 0 12px 28px rgba(31, 132, 96, .38);
  }
}
.subsec--resources .card__hd,
.subsec--skins .card__hd{
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(151,174,196,.16);
}
.subsec--resources .card__hd{
  color: #ffeec1;
}
.subsec--resources .card__hd span{
  background: linear-gradient(180deg, #ffcd68, #d59a37);
}
.subsec--skins .card__hd{
  color: #ead8ff;
}
.subsec--skins .card__hd span{
  background: linear-gradient(180deg, #d6b6ff, #9363bf);
}
.res-warn{
  border-radius: 14px;
  border-color: rgba(213, 165, 79, .34);
  background: rgba(37, 33, 23, .44);
  padding: 14px 14px 13px;
}
.res-warn__head{
  font-size: 14px;
  font-size: clamp(13px, 1.05vw, 14px);
  color: #ffd073;
}
.res-warn__list{
  margin-top: 10px;
  gap: 6px;
  font-size: 13px;
  font-size: clamp(12px, .98vw, 13px);
  line-height: 1.5;
}
.subsec--resources .assets-row .field span,
.subsec--skins .field span{
  color: #bde0f8;
}
.subsec--resources .input,
.subsec--resources .custom-select__trigger,
.subsec--skins .input,
.subsec--skins .custom-select__trigger{
  height: 42px;
  border-radius: 11px;
}

/* business/simple polish */
body{
  background: #0f1318;
}
.noise{
  opacity: .02;
}
.top-banner{
  border-color: rgba(151,174,196,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.layout{
  border-color: rgba(151,174,196,.16);
  background: #111820;
}
.layout::before{
  background: linear-gradient(90deg, rgba(151,174,196,0), rgba(151,174,196,.28), rgba(151,174,196,0));
}
.card,
.card--flow,
.card--combined,
.card--settlement{
  background: #151d26;
  border-color: rgba(151,174,196,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.settle-opt,
.settle-opt--danger,
.settle-opt--safe{
  background: #1a232d;
  border-color: rgba(151,174,196,.18);
}
.settle-opt--danger .settle-opt__title,
.settle-opt--safe .settle-opt__title{
  color: #e4edf5;
}
.settle-sum,
.settle-sum__ratio-card,
.line-items--side{
  background: #18222d;
  border-color: rgba(151,174,196,.2);
  box-shadow: none;
}
.notice-banner{
  border-color: rgba(151,174,196,.28);
  background: #161f29;
}
.notice-banner:hover{
  border-color: rgba(151,174,196,.52);
  background: #1a2531;
  transform: translateY(-1px);
}
.notice-banner:active{
  transform: translateY(0);
}
.notice-banner__action{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* unify top banner + content into one master card */
.mega-card{
  border: 1px solid rgba(151,174,196,.22);
  border-radius: 16px;
  background: #121923;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  overflow: hidden;
}
.mega-card .top-banner{
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.mega-card .layout{
  margin-top: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
  background: transparent;
}
.mega-card .layout::before{
  display: none;
}
.mega-card .right .card--settlement{
  border-color: rgba(151,174,196,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 0 0 1px rgba(151,174,196,.03);
}

@media (max-width: 760px) {
  .mega-card{
    border-radius: 12px;
  }
  .mega-card .layout{
    padding: 10px;
  }
  .top-banner{
    margin-bottom: 8px;
    border-radius: 12px;
  }
  .layout{
    margin-top: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .layout::before{
    display: none;
  }
  .settle-opt__title{ font-size: 18px; }
  .settle-opt__desc{ font-size: 13px; }
  .settle-sum{ flex-direction: column; }
  .settle-sum__right{ width: 100%; min-width: 0; }
  .settle-sum__ratio-card{ width: 100%; min-width: 0; }
  .settle-sum__money{ font-size: 24px; }
  .settle-sum__money em{ font-size: clamp(50px, 11vw, 68px); }
  .settle-sum__ratio-card .ratio__v{ font-size: 52px; }
  .line-item__k{ font-size: 16px; }
  .line-item__v{ font-size: 20px; }
  .next-step-hint{ font-size: 15px; }
  .contact-btn{ font-size: 17px; }
  .res-warn__head{ font-size: 17px; }
  .res-warn__list{ font-size: 14px; }
}

@media (max-width: 1080px) {
  .base-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assets-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .base-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assets-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { padding: 14px; }
  .top-banner{
    margin-bottom: 12px;
    border-radius: 12px;
  }
  .hero { flex-direction: column; align-items: start; padding: 16px; }
  .grid-3 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 24px; }
  .hero__meta{ gap: 8px; }
  .layout { margin-top: 14px; gap: 14px; }
  .left { gap: 14px; }
  .card { padding: 14px; }
  .card--combined{ padding: 0; }
  .subsec{ padding: 14px; }
  .total strong { font-size: 32px; }
  .price-ref{ grid-template-columns: 1fr; }
  .base-row { grid-template-columns: 1fr; gap: 10px; }
  .assets-row { grid-template-columns: 1fr; gap: 10px; }
  .process-steps{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .process-step{
    min-width: 170px;
    scroll-snap-align: start;
  }
  .process-step__line{ display: none; }

}

@media (max-width: 480px) {
  .wrap { padding: 10px; max-width: 100%; margin: 0; }
  .top-banner{ margin-bottom: 10px; }

  .top-actions{
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
  }
  .notice-banner{
    height: auto;
    padding: 10px 12px;
    align-items: flex-start;
  }
  .notice-banner__text{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }
  .top-actions .btn{
    width: 100%;
    min-width: 0;
  }

  .hero{ padding: 14px; }
  .card{ padding: 12px; border-radius: 14px; }
  .subsec{ padding: 12px; }

  .settle-opt{ padding: 11px 12px; }
  .settle-opt__title{ font-size: 17px; }
  .settle-opt__desc{ font-size: 12px; }

  .settle-sum__money em{ font-size: clamp(46px, 12vw, 64px); }
  .settle-sum__ratio-card .ratio__v{ font-size: clamp(44px, 11vw, 56px); }

  .modal{ padding: 10px; }
  .modal__card{ padding: 14px; }
  .modal__card h3{ font-size: 17px; }
  .safeintro-body{ max-height: min(72vh, 520px); }
  .contact-scroll{ max-height: min(70vh, 560px); }

  /* Mobile fix: 特价/安全险两块与金额区域精细对齐 */
  .settlement-options{
    gap: 12px !important;
  }
  .settle-opt{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(151,174,196,.24) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.16) !important;
  }
  .settlement-options .settle-opt + .settle-opt{
    margin-top: 2px;
  }
  .settle-opt__left{
    min-width: 0 !important;
  }
  .settle-opt__title{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    margin: 0 !important;
  }
  .settle-opt__desc{
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.52 !important;
    color: rgba(233, 241, 248, .82) !important;
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .settle-opt--danger .settle-opt__desc .hl-yellow:last-child{
    display: inline-block;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,210,87,.30), rgba(255,210,87,.16));
    border: 1px solid rgba(255, 210, 87, .46);
    color: #ffe590 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .03em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255,210,87,.2);
  }
  .safe-intro-link{
    display: inline-flex !important;
    align-items: center;
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #81ddb0 !important;
    opacity: .96;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
  .toggle{
    align-self: center !important;
    justify-self: end !important;
    width: 46px !important;
    height: 26px !important;
    margin: 0 !important;
    position: relative;
    top: 0;
  }
  .toggle::after{
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    top: 3px !important;
  }
  .toggle.is-on::after{
    left: 23px !important;
  }

  /* Mobile fix: 区块与金额区间距统一 */
  .settle-sum{
    margin-top: 12px !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .settle-sum__left,
  .settle-sum__right{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Mobile fix: 预计总租金金额与说明对齐，去除右侧空白感 */
  .settle-sum__left{
    display: grid !important;
    row-gap: 6px;
    padding: 10px 12px !important;
  }
  .settle-sum__money{
    margin-top: 0 !important;
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
  }
  .settle-sum__money em{
    font-size: clamp(42px, 12vw, 60px) !important;
    line-height: .95 !important;
    text-align: right;
  }
  .settle-sum__hint{
    margin-top: 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: rgba(217, 236, 248, .74) !important;
    max-width: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card, .input, .toggle, .bg { transition: none !important; animation: none !important; }
}

/* Mobile-first adaptation without changing desktop layout */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Remove decorative layers that hurt readability/perf on small screens */
  .bg,
  .noise {
    display: none !important;
  }

  .wrap {
    max-width: 100%;
    padding: 16px;
    margin: 0;
  }

  .mega-card,
  .layout,
  .card,
  .subsec {
    box-shadow: none !important;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    margin-top: 10px;
    border: none;
    background: transparent;
  }

  .layout::before {
    display: none;
  }

  .left,
  .right {
    width: 100%;
    min-width: 0;
  }

  .top-banner {
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .top-banner img,
  img,
  svg {
    max-width: 100%;
    height: auto;
  }

  .top-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .top-actions .btn,
  .notice-banner {
    width: 100%;
    min-width: 0;
  }

  .notice-banner {
    height: auto;
    padding: 10px 12px;
    align-items: flex-start;
  }

  .notice-banner__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px;
    line-height: 1.4;
  }

  /* Single-column module layout */
  .grid,
  .grid-3,
  .base-row,
  .assets-row,
  .price-ref,
  .process-steps,
  .settle-sum__right {
    grid-template-columns: 1fr !important;
  }

  .settle-sum {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .settle-sum__left,
  .settle-sum__right,
  .settle-sum__ratio-card,
  .line-items--side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .settle-sum__label,
  .settle-sum__hint,
  .line-item__k,
  .price-ref-tip,
  .flow-tip,
  .res-warn__list,
  .notice-list p,
  .modal__card p {
    font-size: 12px !important;
  }

  .settle-sum__money {
    margin-top: 6px;
    font-size: 22px;
  }

  .settle-sum__money em {
    font-size: clamp(42px, 12vw, 56px) !important;
  }

  .settle-sum__ratio-card .ratio__v {
    font-size: clamp(32px, 10vw, 44px) !important;
  }

  .btn,
  button {
    min-height: 38px;
    font-size: 13px;
  }

  .contact-btn {
    height: 44px;
    font-size: 14px !important;
  }

  /* Form controls full width, labels stacked */
  .field {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field > span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
  }

  .input,
  select.input,
  input.input,
  .custom-select,
  .custom-select__trigger {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Complex components: keep readable via horizontal scroll when needed */
  .process-steps {
    display: flex !important;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }

  .process-step {
    min-width: 160px;
    scroll-snap-align: start;
  }

  .process-step__line {
    display: none;
  }

  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    padding: 12px;
  }

  .modal__card {
    width: 100%;
    max-height: 86vh;
    overflow: auto;
    padding: 14px;
  }
}

/* ===== Mobile targeted fixes (375-414px) ===== */
@media screen and (max-width: 768px) {
  /* [问题2] 全局防溢出：禁止水平溢出，文字可换行，媒体不超宽 */
  html,
  body,
  .wrap,
  .mega-card,
  .layout,
  .left,
  .right,
  .card,
  .subsec {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html,
  body {
    overflow-x: hidden !important;
  }
  *,
  *::before,
  *::after {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  img,
  svg,
  video,
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* [问题4] 公告长文本自动换行，避免撑开布局 */
  .notice-banner {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  .notice-banner__text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
  }

  /* [问题3] 基础信息/资产输入：单列、标签在上输入在下、输入框全宽 */
  .grid,
  .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* 手机端：基础信息/资产信息改为双列 */
  .base-row,
  .assets-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .field > span {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .input,
  input.input,
  select.input,
  .custom-select,
  .custom-select__trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 超窄屏回退为单列，避免挤压 */
  @media (max-width: 380px) {
    .base-row,
    .assets-row {
      grid-template-columns: 1fr !important;
    }
  }

  /* [收号流程手机端] 横向单行滑动，不换行，原生触感 */
  .process-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .process-steps::-webkit-scrollbar {
    display: none;
  }
  .process-step {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    scroll-snap-align: start;
    min-height: 106px !important;
    text-align: center !important;
  }
  .process-step__line {
    display: none !important;
  }
  .process-step__title,
  .process-step__desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }

  /* [问题2] 复杂区域可见：表格/列表支持小屏阅读 */
  .table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .res-warn,
  .res-warn__list,
  .notice-list,
  .price-ref,
  .line-items,
  .line-items--side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 手机端：当前比例卡片和租金明细卡片并排两列 */
  .settle-sum__right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .settle-sum__ratio-card,
  .line-items--side {
    height: 100%;
    margin-top: 0 !important;
  }

  /* 手机端：特价账号/安全险服务更清晰且不占空间（功能不变） */
  .settle-opt {
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .settle-opt__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .settle-opt__desc {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .toggle {
    width: 46px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: none !important;
  }
  .toggle::after {
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .toggle.is-on::after {
    left: 23px !important;
  }
  .toggle:active,
  .toggle:hover {
    transform: none !important;
  }

  /* 手机端：金额行对齐，标签左、金额右 */
  .line-item,
  .line-items--side .line-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .line-item__k {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
    font-size: 12px !important;
  }
  .line-item__v {
    flex: 0 0 auto;
    margin-left: 10px;
    text-align: right !important;
    white-space: nowrap;
    font-size: 14px !important;
  }
  /* 手机端隐藏手续费状态行 */
  .line-item--fee {
    display: none !important;
  }

  /* 手机端：当前比例更紧凑，修正标签与比例同区且不抢空间 */
  .settle-sum__ratio-card {
    padding-right: 104px !important;
  }
  .settle-sum__ratio-card .ratio__k {
    font-size: 12px !important;
  }
  .settle-sum__ratio-card .ratio__v {
    text-align: right !important;
    font-size: clamp(24px, 6.2vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: .25px !important;
  }
  .settle-sum__ratio-card .ratio__adj {
    top: 8px !important;
    right: 8px !important;
    min-height: 16px !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
    background: rgba(151, 174, 196, .14) !important;
    border-color: rgba(151, 174, 196, .26) !important;
    color: #cfe0ec !important;
  }
  .settle-sum__ratio-card .ratio__adj::before {
    width: 5px !important;
    height: 5px !important;
    flex-basis: 5px !important;
  }
}

/* Hotfix: mobile right panel readability + fee row hide */
@media screen and (max-width: 480px) {
  /* 1) 手续费行强制隐藏（防止被其他规则覆盖） */
  .line-item--fee,
  .line-item.line-item--fee {
    display: none !important;
  }

  /* 2) 当前比例卡片留白收紧，避免文字被挤成竖排 */
  .settle-sum__ratio-card {
    padding: 10px 9px 9px 9px !important;
  }
  .settle-sum__ratio-card .ratio__k,
  .settle-sum__ratio-card .ratio__desc {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .settle-sum__ratio-card .ratio__k {
    font-size: 11px !important;
    color: #b7ccda !important;
    letter-spacing: .01em !important;
    line-height: 1.3 !important;
  }
  .settle-sum__ratio-card .ratio__v {
    white-space: nowrap !important;
    word-break: keep-all !important;
    text-align: left !important;
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.04 !important;
    letter-spacing: .02em !important;
  }
  .settle-sum__ratio-card .ratio__desc {
    margin-top: 4px !important;
    font-size: 11px !important;
    color: #97abbb !important;
    line-height: 1.32 !important;
    max-height: 58px !important;
    overflow: auto !important;
  }
  .settle-sum__ratio-card .ratio__adj {
    top: 6px !important;
    right: 6px !important;
    max-width: 58px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    min-height: 16px !important;
    line-height: 1.05 !important;
    color: #e6fff4 !important;
    border-color: rgba(131,243,192,.52) !important;
    background: rgba(131,243,192,.22) !important;
    box-shadow: 0 0 0 1px rgba(131,243,192,.14) inset !important;
  }
  .settle-sum__ratio-card .ratio__adj::before {
    width: 5px !important;
    height: 5px !important;
    flex-basis: 5px !important;
    background: #8affcf !important;
    box-shadow: 0 0 6px rgba(138,255,207,.95) !important;
  }

  /* 3) 右侧两列比例微调，给当前比例更多宽度 */
  .settle-sum__right {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    gap: 8px !important;
  }

  /* 右侧租金卡片：统一横向排版，禁止按字竖排 */
  .line-items--side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 8px !important;
  }
  .line-items--side .line-item {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 26px !important;
    gap: 8px !important;
  }
  .line-items--side .line-item__k {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .line-items--side .line-item__v {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-align: right !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line-items--side .line-item--fee {
    display: none !important;
  }
}

/* Mobile fee rows hardening (320px~480px) */
@media screen and (max-width: 768px) {
  .line-items--side {
    overflow-x: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .line-items--side .line-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .line-items--side .line-item__k {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .line-items--side .line-item__v {
    flex: 0 0 auto !important;
    min-width: 74px !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.2 !important;
  }
}

/* ========== 手机端：结算区内部排版（随页面文档流，整块在一起；不影响 PC） ========== */
@media (max-width: 768px) {
  /* 选项区与金额区纵向节奏 */
  .layout .right .card--settlement .settlement-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }

  .layout .right .card--settlement .settle-sum {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    position: relative;
    z-index: 1;
  }

  /* 左侧：标题 → 金额 → 说明，纵向 flex，禁止与背景层叠错位 */
  .layout .right .card--settlement .settle-sum__left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: relative;
    z-index: 2;
    background-clip: padding-box;
  }

  .layout .right .card--settlement .settle-sum__label {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1.35;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .settle-sum__money {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0;
    line-height: 1.1;
    min-height: 0;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .settle-sum__money em {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(32px, 9.5vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em;
    word-break: normal;
    overflow-wrap: normal;
  }

  .layout .right .card--settlement .settle-sum__hint {
    margin: 0;
    margin-top: 2px;
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: rgba(217, 236, 248, 0.82) !important;
    position: relative;
    z-index: 2;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 右侧：单列，比例卡 → 明细（必须 !important 覆盖文件中较早的 grid 两列 + !important） */
  .layout .right .card--settlement .settle-sum__right {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none;
    position: relative;
    z-index: 1;
    align-items: stretch !important;
  }

  .layout .right .card--settlement .settle-sum__ratio-card,
  .layout .right .card--settlement .line-items--side {
    height: auto !important;
    min-height: 0;
  }

  /* 当前比例卡片：仅手机端改网格布局；配色/圆角/阴影与全局 .settle-sum__ratio-card、.line-items--side 一致，融入深色结算区 */
  .layout .right .card--settlement .settle-sum__ratio-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(84, 177, 144, 0.4) !important;
    background: linear-gradient(145deg, rgba(11, 36, 36, 0.68), rgba(10, 19, 28, 0.84)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(110, 200, 164, 0.06),
      var(--card-shadow) !important;
    position: relative;
    z-index: 1;
  }

  .layout .right .card--settlement .settle-sum__ratio-card:has(.ratio__adj.is-empty) {
    grid-template-columns: 1fr;
  }

  .layout .right .card--settlement .settle-sum__ratio-card:has(.ratio__adj.is-empty) .ratio__k {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__k {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    font-size: var(--fs-13) !important;
    font-weight: 700 !important;
    color: #d8ebf7 !important;
    text-align: left !important;
    letter-spacing: 0.04em;
    word-break: keep-all;
    overflow-wrap: normal;
    justify-self: start;
    align-self: center;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__adj {
    grid-column: 2;
    grid-row: 1;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    align-self: center;
    justify-self: end;
    max-width: min(148px, 46vw);
    min-height: 18px;
    padding: 2px 8px !important;
    font-size: var(--fs-11) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em;
    color: #b7e8d2 !important;
    background: rgba(16, 34, 28, 0.56) !important;
    border: 1px solid rgba(118, 210, 168, 0.35) !important;
    border-radius: 999px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
    z-index: 2;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__adj::before {
    display: block !important;
    flex: 0 0 6px;
    animation: ratioDotBreath 1.7s ease-in-out infinite;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__adj.is-empty {
    display: none !important;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__v {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 16px 0 10px !important;
    padding: 0 6px !important;
    text-align: center !important;
    font-size: clamp(32px, 8.8vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: 0.12em;
    white-space: nowrap;
    color: #95f7c8 !important;
    text-shadow: none !important;
    justify-self: stretch;
    align-self: center;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .settle-sum__ratio-card .ratio__desc {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 !important;
    padding: 0 6px 2px !important;
    text-align: center !important;
    font-size: var(--fs-12) !important;
    font-weight: 500 !important;
    line-height: var(--lh-12) !important;
    color: #bed2e1 !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .line-items--side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-top: 0 !important;
    padding: 10px 12px !important;
    position: relative;
    z-index: 1;
  }

  .layout .right .card--settlement .line-items--side .line-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: auto;
    padding: 4px 0;
    border-top: 1px solid rgba(126, 186, 162, 0.14);
  }

  .layout .right .card--settlement .line-items--side .line-item:first-child {
    border-top: none;
    padding-top: 0;
  }

  .layout .right .card--settlement .line-items--side .line-item__k {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    word-break: normal;
    overflow-wrap: break-word;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .line-items--side .line-item__v {
    flex: 0 0 auto;
    flex-shrink: 0;
    max-width: 42%;
    min-width: min-content;
    white-space: nowrap;
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    position: relative;
    z-index: 2;
  }

  .layout .right .card--settlement .next-step-hint {
    position: relative;
    z-index: 2;
    margin-top: 10px;
  }

  .layout .right .card--settlement .contact-btn {
    position: relative;
    z-index: 2;
    margin-top: 10px;
  }
}