section.wg {
  display: block;
  height: auto; min-height: 0; max-height: none;
  border: 0; border-radius: 0; box-shadow: none;
  background-color: transparent; background-image: none;
  grid-template-columns: none; grid-template-rows: none;
  flex-direction: row; flex-wrap: nowrap;
  align-items: normal; justify-content: normal; place-items: normal;
  gap: normal; text-align: start;
  margin-block: 0;
  list-style: none;
}
@media (max-width: 900px) { section.wg.wg-hide-m { display: none } }
@media (min-width: 901px) { section.wg.wg-hide-d { display: none } }

section.wg > .wrap { width: 100%; max-width: 1280px; margin-inline: auto }
section.wg > .wg-full { width: 100%; max-width: none }

.wg .sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sf-hair, var(--line));
}
.wg .sec-head h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; min-width: 0;
  font: 900 clamp(16px, 2.2vw, 22px) / 1.6 var(--font);
  letter-spacing: -.035em; font-size: calc(clamp(16px, 2.2vw, 22px) * var(--fz-h2, 1))}
.wg .sec-head h2::before {
  content: ""; flex: none; width: 4px; height: 1.05em; border-radius: 4px;
  background: linear-gradient(to bottom, var(--green), var(--gold));
}
.wg .sec-head .more {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font: 800 12px var(--font); color: var(--green); white-space: nowrap;
  padding: 8px 14px; border-radius: 30px;
  background: color-mix(in oklch, var(--green), transparent 92%);
  transition: background .16s, transform .16s; font-size: calc(12px * var(--fz-btn, 1))}
.wg .sec-head .more:hover { background: color-mix(in oklch, var(--green), transparent 84%); transform: translateX(-2px) }
.wg .wg-h1, .wg .wg-h2 { text-wrap: balance }
.wg .wg-h2 { font-weight: 900; letter-spacing: -.035em; line-height: 1.5 }
.wg .sec-head.is-center { justify-content: center; text-align: center }
.wg .sec-head.is-center h2 { justify-content: center }
@media (max-width: 560px) {
  .wg .sec-head { gap: 10px; padding-bottom: 10px }
  .wg .sec-head .more { padding: 6px 11px; font-size: calc(11px * var(--fz-btn, 1))}
}

section.wg-image { background: none }
.wg .wg-image {
  margin: 0 auto; padding: 0; border: 0; background: none; box-shadow: none;
  border-radius: var(--wg-img-r, 16px); overflow: hidden; line-height: 0;
  max-width: 100%;
}
.wg .wg-image > a { display: block; border-radius: inherit; overflow: hidden }
.wg .wg-image img {
  display: block; width: 100%; height: auto;
  border-radius: inherit; background: none;
}

section.wg-hero { background-image: none }
.wg-hero-in {
  background: none !important; padding: 0 !important; border: 0;
  gap: clamp(18px, 3vw, 34px); align-items: center;
}
.wg-hero-text { min-width: 0 }
.wg-hero-text .wg-h1 { margin: 0 0 12px }
.wg-hero-img {
  height: auto !important; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface2); border-radius: var(--sf-r-lg, var(--radius));
}
.wg-hero-img { max-height: var(--wg-hero-h, 340px) }
.wg-hero-img img { width: 100%; height: 100%; object-fit: cover }

.wg-hero-in.is-center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.wg-hero-in.is-center .wg-hero-text { width: 100%; max-width: 780px; margin-inline: auto }
.wg-hero-in.is-center .wg-sub { margin-inline: auto; max-width: 62ch }
.wg-hero-in.is-center .wg-btns { justify-content: center; margin-bottom: 0 }
.wg-hero-in.is-center .wg-hero-img {
  width: 100%; max-width: 1000px; margin-inline: auto; aspect-ratio: 16 / 7;
}
.wg .wg-btns { display: flex; gap: 10px; flex-wrap: wrap }
@media (max-width: 900px) {
  .wg-hero-in { grid-template-columns: 1fr }
  .wg-hero-in .wg-hero-img { order: -1; aspect-ratio: 16 / 9 }
  .wg-hero-in.is-center .wg-hero-img { order: 0; aspect-ratio: 16 / 9 }
}
@media (max-width: 560px) {
  .wg .wg-btns { display: grid; grid-template-columns: 1fr }
  .wg .wg-btns .btn { width: 100%; justify-content: center; text-align: center }
}

section.wg-slider { background: none; box-shadow: none; border: 0; height: auto; overflow: visible }
.wg .wg-slider {
  position: relative; overflow: hidden; border: 0; box-shadow: none; background: none;
  border-radius: var(--sf-r-lg, var(--radius));
  height: clamp(170px, 44vw, var(--sl-h, 320px));
}
.wg .wg-slides { position: absolute; inset: 0; height: 100% }
.wg .wg-slide {
  position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease, ease);
}
.wg .wg-slide.on { opacity: 1; pointer-events: auto }
.wg .wg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 }
.wg .wg-slide-txt {
  position: absolute; inset: auto clamp(14px, 4vw, 32px) clamp(30px, 5vw, 36px) clamp(14px, 4vw, 32px);
  color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.wg .wg-dots { bottom: 12px }

section.wg-split { background-image: none }
.wg .wg-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 46px); align-items: center; width: 100%;
}
.wg .wg-split-txt { min-width: 0 }
.wg .wg-split-txt > :last-child { margin-bottom: 0 }
.wg .wg-split-img {
  min-width: 0; overflow: hidden; background: var(--surface2);
  border-radius: var(--sf-r-lg, var(--radius));
}
.wg .wg-split-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3 }
.wg .wg-split.is-flip .wg-split-txt { order: 2 }
@media (max-width: 860px) {
  .wg .wg-split { grid-template-columns: 1fr; gap: 20px }
  .wg .wg-split.is-flip .wg-split-txt { order: 0 }
  .wg .wg-split-img { order: -1 }
  .wg .wg-split-img img { aspect-ratio: 16 / 9 }
}

section.wg-cta { background-image: none; border: 0; box-shadow: none }
.wg .wg-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 26px); flex-wrap: wrap;
  border: 0; box-shadow: none;
  border-radius: var(--sf-r-lg, var(--radius));
  padding: clamp(20px, 3vw, 32px);
}
.wg .wg-cta > div { min-width: 0; flex: 1 1 min(100%, 320px) }
.wg .wg-cta h2 { margin: 0 0 8px; font: 900 clamp(17px, 2.6vw, 23px) / 1.55 var(--font); letter-spacing: -.03em; font-size: calc(clamp(17px, 2.6vw, 23px) * var(--fz-h2, 1))}
.wg .wg-cta p { margin: 0; font-size: calc(13px * var(--fz-widget, 1)); line-height: 1.95; opacity: .82; overflow-wrap: anywhere }
.wg .wg-cta .btn {
  flex: none; padding: 14px 26px; font-weight: 800;
  border-radius: var(--sf-r-sm, 14px); white-space: nowrap;
}
.wg .wg-cta.is-soft { background: var(--surface2); color: var(--ink) }
.wg .wg-cta.is-dark { background: color-mix(in oklch, var(--ink), var(--surface) 8%); color: var(--surface) }
.wg .wg-cta.is-dark .btn { background: var(--surface); color: var(--ink) }
.wg .wg-cta.is-accent { background: linear-gradient(135deg, var(--green), var(--green2, var(--green))); color: #fff }
.wg .wg-cta.is-accent .btn { background: #fff; color: var(--green) }
.wg .wg-cta.is-plain { background: none; color: inherit; padding: 0; border: 0; box-shadow: none }
.wg .wg-cta.is-plain p { opacity: 1; color: var(--muted) }
@media (max-width: 700px) {
  .wg .wg-cta {
    flex-direction: column; align-items: stretch; text-align: start;
    padding: clamp(18px, 5vw, 22px); gap: 16px;
  }
  .wg .wg-cta > div { flex: 1 1 auto }
  .wg .wg-cta h2 { font-size: calc(17px * var(--fz-h2, 1))}
  .wg .wg-cta p { font-size: calc(12.5px * var(--fz-widget, 1))}
  .wg .wg-cta .btn { width: 100%; justify-content: center; padding: 14px 18px }
  .wg .wg-cta.is-plain { padding: 0 }
}

section.wg-brands { display: block; background-image: none }
.wg .wg-brands {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(9px, 1.4vw, 14px); width: 100%;
}
.wg .wg-brands > a {
  flex: 0 1 clamp(112px, 14vw, 158px);
  display: grid; place-items: center; gap: 8px; text-align: center;
  min-height: 96px; min-width: 0; padding: 15px 11px;
  background: var(--surface);
  border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r, 16px);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.wg .wg-brands > a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--green), transparent 55%);
  box-shadow: var(--sf-shadow-1);
}
.wg .wg-brands img {
  max-width: 100%; max-height: 42px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s;
}
.wg .wg-brands > a:hover img { filter: none; opacity: 1 }
.wg .wg-brands span, .wg .wg-brands b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 12px var(--font); color: var(--muted); font-size: calc(12px * var(--fz-widget, 1))}
.wg .wg-brands > a:hover span { color: var(--ink) }
@media (max-width: 480px) {
  .wg .wg-brands > a { flex: 0 1 calc(33.333% - 8px); min-height: 82px; padding: 11px 7px }
  .wg .wg-brands img { max-height: 30px }
  .wg .wg-brands span { font-size: calc(10.5px * var(--fz-widget, 1))}
}

section.wg-features { display: block; gap: normal; grid-template-columns: none }
.wg .wg-features {
  display: grid; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 22vw, 250px), 1fr));
  gap: clamp(9px, 1.4vw, 14px);
}
.wg .wg-feature {
  display: flex; align-items: flex-start; gap: 11px; min-width: 0;
  background: var(--surface); border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r-sm, 14px); padding: 15px;
}
.wg .wg-feature > div { min-width: 0 }
.wg .wg-feature .ic {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; font-size: calc(20px * var(--fz-icon, 1)); background: var(--surface2);
}
.wg .wg-feature b { display: block; font-size: calc(13px * var(--fz-widget, 1)); line-height: 1.6; overflow-wrap: anywhere }
.wg .wg-feature span {
  display: block; margin-top: 4px; font-size: calc(11.5px * var(--fz-widget, 1)); line-height: 1.8;
  color: var(--muted); overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .wg .wg-features { grid-template-columns: 1fr 1fr; gap: 8px }
  .wg .wg-feature { padding: 12px; gap: 9px }
  .wg .wg-feature .ic { width: 34px; height: 34px; font-size: calc(17px * var(--fz-icon, 1)); border-radius: 11px }
  .wg .wg-feature b { font-size: calc(12px * var(--fz-widget, 1))}
  .wg .wg-feature span { font-size: calc(10.5px * var(--fz-widget, 1)); line-height: 1.75 }
}
@media (max-width: 400px) {
  .wg .wg-features { grid-template-columns: 1fr }
  .wg .wg-feature { align-items: center }
}

.wg .wg-cats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(9px, 1.4vw, 14px); width: 100%;
}
.wg .wg-cats > a {
  flex: 0 1 clamp(130px, 15vw, 175px);
  min-width: 0; padding: 16px 12px; text-align: center;
  background: var(--surface); border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r, 16px); transition: .2s var(--ease, ease);
}
.wg .wg-cats > a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--green), transparent 55%);
  box-shadow: var(--sf-shadow-1);
}
.wg .wg-cats .ic { display: block; font-size: calc(26px * var(--fz-icon, 1)); margin-bottom: 8px; line-height: 1 }
.wg .wg-cats img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin: 0 auto 8px }
.wg .wg-cats b { display: block; font-size: calc(12.5px * var(--fz-widget, 1)); line-height: 1.6; overflow-wrap: anywhere }
.wg .wg-cats i { display: block; margin-top: 3px; font-size: calc(10.5px * var(--fz-widget, 1)); font-style: normal; color: var(--muted) }
.wg .wg-cats.is-circles > a { border: 0; background: none; padding: 6px 4px }
.wg .wg-cats.is-circles > a:hover { box-shadow: none }
.wg .wg-cats.is-list { justify-content: flex-start }
.wg .wg-cats.is-list > a {
  flex: 1 1 clamp(200px, 30%, 290px);
  display: flex; align-items: center; gap: 11px; text-align: start;
}
.wg .wg-cats.is-list img, .wg .wg-cats.is-list .ic { margin: 0; flex: none }
.wg .wg-cats.is-list img { width: 44px; height: 44px }
@media (max-width: 640px) {
  .wg .wg-cats > a { flex: 0 1 calc(33.333% - 7px); padding: 12px 7px; border-radius: var(--sf-r-sm, 14px) }
  .wg .wg-cats img { width: 52px; height: 52px; margin-bottom: 6px }
  .wg .wg-cats .ic { font-size: calc(22px * var(--fz-icon, 1)); margin-bottom: 5px }
  .wg .wg-cats b { font-size: calc(11.5px * var(--fz-widget, 1))}
  .wg .wg-cats i { font-size: calc(9.5px * var(--fz-widget, 1))}
  .wg .wg-cats.is-list > a { flex: 1 1 100% }
}
@media (max-width: 400px) {
  .wg .wg-cats > a { flex: 0 1 calc(50% - 5px) }
}

.wg .wg-stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s-3, 14px) }
.wg .wg-steps { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s-4, 20px) }
.wg .wg-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px }
.wg .wg-map { height: var(--h, 320px); overflow: hidden; border-radius: var(--sf-r-lg, var(--radius)) }
.wg .wg-video { border-radius: var(--sf-r-lg, var(--radius)); overflow: hidden }
section.wg-map, section.wg-video, section.wg-notice, section.wg-faq, section.wg-logos,
section.wg-stats, section.wg-steps, section.wg-tabs {
  height: auto; overflow: visible; background-image: none; padding-inline: 0;
}
@media (max-width: 700px) {
  .wg .wg-stats { grid-template-columns: 1fr 1fr }
  .wg .wg-steps { grid-template-columns: 1fr }
}

.sf-act .lbl, .sf-act .sf-i { color: inherit }
.sf-act.sf-act-login {
  background: color-mix(in oklch, var(--green), transparent 92%);
  border-color: color-mix(in oklch, var(--green), transparent 58%);
  color: var(--green); font-weight: 800;
}
.sf-act.sf-act-login .lbl { color: var(--green) }
.sf-act.sf-act-login > .sf-i:last-child { opacity: .7 }
.sf-act.sf-act-login:hover,
.sf-acct.open .sf-act.sf-act-login {
  background: var(--green); border-color: var(--green); color: #fff;
}
.sf-act.sf-act-login:hover .lbl,
.sf-acct.open .sf-act.sf-act-login .lbl { color: #fff }
.sf-acct-guest .sfbtn.block { color: #fff }

.sidebox.filterbox { padding: 0; overflow: hidden }
.filterbox .fb-active { padding: 13px 14px; border-bottom: 1px solid var(--sf-hair, var(--line)); background: var(--surface2) }
.filterbox .fb-active-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px }
.filterbox .fb-active-head b { font: 900 11.5px var(--font); font-size: calc(11.5px * var(--fz-form, 1))}
.filterbox .fb-active-head a { font: 800 11px var(--font); color: var(--red); font-size: calc(11px * var(--fz-form, 1))}
.filterbox .fb-chips { display: flex; flex-wrap: wrap; gap: 6px }
.filterbox .fb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 30px; background: var(--surface);
  border: 1px solid var(--sf-hair, var(--line));
  font: 700 11px var(--font); color: var(--ink); font-size: calc(11px * var(--fz-badge, 1))}
.filterbox .fb-chip i { font-style: normal; font-size: calc(12px * var(--fz-badge, 1)); color: var(--muted); line-height: 1 }
.filterbox .fb-chip:hover { border-color: var(--red); color: var(--red) }
.filterbox .fb-chip:hover i { color: var(--red) }

.filterbox .fgroup { border-top: 1px solid var(--sf-hair, var(--line)) }
.filterbox .fb-active + .fgroup, .filterbox .fgroup:first-of-type { border-top: 0 }
.filterbox .fgroup > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 14px; list-style: none;
  font: 900 12.5px var(--font); color: var(--ink); font-size: calc(12.5px * var(--fz-form, 1))}
.filterbox .fgroup > summary::-webkit-details-marker { display: none }
.filterbox .fgroup > summary::before {
  content: ""; flex: none; width: 3px; height: 14px; border-radius: 3px; background: var(--green);
}
.filterbox .fgroup > summary::after {
  content: ""; margin-inline-start: auto; flex: none; width: 7px; height: 7px;
  border-inline-end: 1.7px solid var(--muted); border-block-end: 1.7px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease, ease);
}
.filterbox .fgroup[open] > summary::after { transform: rotate(-135deg) translateY(-2px) }
.filterbox .fgroup > summary:hover { background: var(--surface2) }
.filterbox .fgroup > summary .fg-n {
  font: 800 10px var(--font); color: var(--green);
  background: color-mix(in oklch, var(--green), transparent 88%);
  border-radius: 20px; padding: 2px 7px; font-size: calc(10px * var(--fz-form, 1))}
.filterbox .fg-body { padding: 0 14px 15px }
.filterbox .fg-body > form { margin: 0 }
.filterbox .fg-body .fscroll {
  max-height: 216px; overflow-y: auto; scrollbar-width: thin;
  margin-inline: -6px; padding-inline: 6px;
}
.filterbox .fg-body .fscroll::-webkit-scrollbar { width: 5px }
.filterbox .fg-body .fscroll::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 6px }
.filterbox .fchk { font-size: calc(12px * var(--fz-form, 1)); padding: 7px 6px }
.filterbox .fchk i { margin-inline-start: auto; margin-right: 0; font-variant-numeric: tabular-nums }
.filterbox .fprice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px }
.filterbox .fprice .form-group { margin: 0; gap: 5px }
.filterbox .fprice label { font: 700 10.5px var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-price, 1))}
.filterbox .fprice input {
  width: 100%; padding: 10px 11px; font: 700 12px var(--font);
  background: var(--surface2); border: 1px solid transparent; border-radius: 11px;
  color: var(--ink); text-align: center; font-size: calc(12px * var(--fz-price, 1))}
.filterbox .fprice input:focus { outline: 0; background: var(--surface); border-color: var(--green) }
.filterbox .fpresets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.filterbox .fpreset {
  padding: 6px 10px; border-radius: 30px; font: 700 11px var(--font); color: var(--muted);
  background: var(--surface2); border: 1px solid transparent; font-size: calc(11px * var(--fz-form, 1))}
.filterbox .fpreset:hover, .filterbox .fpreset.on { color: var(--green); border-color: var(--green); background: var(--surface) }
.filterbox .fhint { font: 500 10.5px/1.8 var(--font); color: var(--muted); margin: 9px 0 0; font-size: calc(10.5px * var(--fz-form, 1))}
.filterbox .fg-body > .btn { margin-top: 11px }

@media (min-width: 981px) {
  .layout-side { grid-template-columns: 276px minmax(0, 1fr); gap: 26px; align-items: start }
  .sidebox.filterbox {
    position: sticky; top: calc(var(--sf-head-h, 74px) + 14px);
    max-height: calc(100dvh - var(--sf-head-h, 74px) - 28px);
    overflow-y: auto; scrollbar-width: thin;
    border: 1px solid var(--sf-hair, var(--line));
    border-radius: var(--sf-r, 16px); background: var(--surface);
  }
  .sidebox.filterbox::-webkit-scrollbar { width: 6px }
  .sidebox.filterbox::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 6px }
  .filterbox .fgroup[open] > summary { padding-bottom: 10px }
}

.acc-panel {
  background: var(--surface); border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r-lg, var(--radius)); padding: 0; overflow: hidden;
  margin-bottom: 18px;
}
.acc-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--sf-hair, var(--line));
  background: color-mix(in oklch, var(--surface2), transparent 35%);
}
.acc-panel-head .ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--green), transparent 90%); color: var(--green); font-size: calc(18px * var(--fz-icon, 1));
}
.acc-panel-head b { display: block; font: 900 13.5px var(--font); font-size: calc(13.5px * var(--fz-base, 1))}
.acc-panel-head span { display: block; margin-top: 3px; font: 500 11px var(--font); color: var(--muted); font-size: calc(11px * var(--fz-base, 1))}
.acc-panel-body { padding: 18px }
.acc-panel-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--sf-hair, var(--line));
  background: color-mix(in oklch, var(--surface2), transparent 45%);
}
.acc-panel-foot .muted { font-size: calc(11px * var(--fz-small, 1)); margin: 0 }
.acc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.acc-fields .full { grid-column: 1 / -1 }
.acc-fields .form-group { margin: 0; gap: 7px }
.acc-fields label { font: 800 11.5px var(--font); color: var(--ink); font-size: calc(11.5px * var(--fz-form, 1))}
.acc-fields input, .acc-fields select {
  width: 100%; padding: 12px 13px; font: 600 13px var(--font); color: var(--ink);
  background: var(--surface2); border: 1px solid transparent; border-radius: var(--sf-r-sm, 13px);
  transition: border-color .16s, background .16s, box-shadow .16s; font-size: calc(13px * var(--fz-form, 1))}
.acc-fields input:focus {
  outline: 0; background: var(--surface); border-color: var(--green);
  box-shadow: var(--sf-ring, 0 0 0 3px rgba(0, 0, 0, .05));
}
.acc-fields input:disabled { color: var(--muted); cursor: not-allowed; opacity: 1 }
.acc-fields small { font: 500 10.5px/1.8 var(--font); color: var(--muted); font-size: calc(10.5px * var(--fz-small, 1))}
@media (max-width: 620px) {
  .acc-fields { grid-template-columns: 1fr }
  .acc-panel-body { padding: 15px }
  .acc-panel-head { padding: 14px }
  .acc-panel-foot { padding: 13px 14px }
  .acc-panel-foot .btn { width: 100%; justify-content: center }
}

.wallet-top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px; margin-bottom: 20px; align-items: stretch;
}
.wallet-top > * { min-width: 0 }
.wallet-hero {
  margin: 0; display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--sf-r-lg, var(--radius)); padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(135deg, var(--ink), color-mix(in oklch, var(--ink), var(--green) 34%));
  color: var(--surface); position: relative; overflow: hidden;
}
.wallet-hero::after {
  content: ""; position: absolute; inset-inline-start: -40px; bottom: -70px;
  width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.wallet-label { font-size: calc(11.5px * var(--fz-form, 1)); opacity: .75; display: block; margin-bottom: 8px }
.wallet-balance { font: 900 clamp(26px, 5vw, 38px) / 1.2 var(--font); letter-spacing: -.04em; margin-bottom: 8px; font-size: calc(clamp(26px, 5vw, 38px) * var(--fz-base, 1))}
.wallet-note { font-size: calc(11.5px * var(--fz-base, 1)); opacity: .72; line-height: 1.85; margin: 0; max-width: 42ch }
.wallet-sums { display: grid; gap: 12px }
.wallet-sum {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r, 16px); padding: 15px 16px;
}
.wallet-sum .ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: calc(17px * var(--fz-icon, 1))}
.wallet-sum.in .ic { background: color-mix(in oklch, var(--green), transparent 88%); color: var(--green) }
.wallet-sum.out .ic { background: color-mix(in oklch, var(--red), transparent 90%); color: var(--red) }
.wallet-sum span { display: block; font: 600 11px var(--font); color: var(--muted); font-size: calc(11px * var(--fz-base, 1))}
.wallet-sum b { display: block; margin-top: 4px; font: 900 16px var(--font); font-variant-numeric: tabular-nums; font-size: calc(16px * var(--fz-base, 1))}
.wallet-sum.in b { color: var(--green) }
.wallet-sum.out b { color: var(--red) }
.wallet-charge .acc-fields { grid-template-columns: 1fr }
@media (max-width: 860px) {
  .wallet-top { grid-template-columns: 1fr }
  .wallet-sums { grid-template-columns: 1fr 1fr }
}
@media (max-width: 460px) {
  .wallet-sums { grid-template-columns: 1fr }
}

.acc-table {
  background: var(--surface); border: 1px solid var(--sf-hair, var(--line));
  border-radius: var(--sf-r-lg, var(--radius)); overflow: hidden;
}
.acc-table .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.acc-table table { width: 100%; border-collapse: collapse; min-width: 520px }
.acc-table th {
  background: var(--surface2); font: 800 10.5px var(--font); color: var(--muted);
  text-align: start; padding: 12px 16px; white-space: nowrap; font-size: calc(10.5px * var(--fz-table, 1))}
.acc-table td {
  padding: 13px 16px; font-size: calc(12px * var(--fz-table, 1)); white-space: nowrap;
  border-top: 1px solid var(--sf-hair, var(--line));
}
.acc-table tr:hover td { background: color-mix(in oklch, var(--green), transparent 96%) }