:root {
  color-scheme:dark;
  --bg:#202125;
  --panel:#292a30;
  --panel-soft:#24262c;
  --line:#ffffff0c;
  --text:#f4f6fc;
  --muted:#969ba8;
  --blue:#78a7ff;
  --primary:#326ff5;
  --green:#7ad9bc;
  --coral:#ff9a8b;
  --amber:#edc080;
  --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif
}
* {
  box-sizing:border-box
}
html {
  min-height:100%;
  scroll-behavior:smooth
}
body {
  margin:0;
  background:#10151f;
  color:var(--text);
  font:14px/1.55 var(--font);
  -webkit-font-smoothing:antialiased
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse 680px 680px at 50% 10%,#203b6b66,transparent);
  pointer-events:none
}
button,input,select,textarea {
  font:inherit
}
button {
  border:0;
  cursor:pointer;
  color:inherit;
  background:none;
  -webkit-tap-highlight-color:transparent
}
button:disabled {
  opacity:.4;
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid #94b9ff;
  outline-offset:3px
}
button {
  touch-action:manipulation
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:28px;
  line-height:1.25;
  letter-spacing:-.9px;
  font-weight:650
}
h2 {
  font-size:21px;
  line-height:1.4;
  font-weight:620;
  letter-spacing:-.5px
}
h3 {
  font-size:15px;
  font-weight:580
}
small {
  font-size:11px
}
strong,b {
  font-weight:600
}
em {
  font-style:normal
}
.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0
}
.icon.filled {
  fill:currentColor;
  stroke:none
}
.num {
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
  white-space:nowrap
}
.green {
  color:var(--green)
}
.blue {
  color:var(--blue)
}
.coral {
  color:var(--coral)
}
.amber {
  color:var(--amber)
}
.muted {
  color:var(--muted)
}
.small {
  font-size:12px
}
.tiny {
  font-size:11px
}
.grow {
  flex:1;
  min-width:0
}
.row,.between {
  display:flex;
  align-items:center;
  gap:12px
}
.between {
  justify-content:space-between
}
.right {
  text-align:right
}
.center {
  text-align:center
}
.full {
  width:100%
}
.stack {
  display:grid;
  gap:13px
}
.space-top {
  margin-top:16px
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:1.8px
}
.app-shell {
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  min-height:100dvh;
  background:radial-gradient(ellipse 410px 300px at 0% 0%,#364e7040,transparent),var(--bg);
  box-shadow:0 0 100px #0004;
  border-left:1px solid #ffffff04;
  border-right:1px solid #ffffff04
}
main {
  padding:24px 20px calc(34px + env(safe-area-inset-bottom));
  min-width:0
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:32px;
  min-height:40px
}
.account {
  display:flex;
  align-items:center;
  gap:9px;
  padding:0;
  min-height:44px;
  font-size:11px;
  font-weight:580;
  letter-spacing:.4px
}
.account>.icon {
  width:13px;
  height:13px;
  color:#b8c5dd
}
.top-tools {
  display:flex;
  align-items:center;
  gap:6px
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border-radius:13px;
  position:relative;
  flex-shrink:0;
  color:#b2b7c3
}
.icon-button:hover {
  background:#ffffff08
}
.demo-button {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  min-height:44px;
  color:#acbce0;
  padding:0 7px
}
.demo-button>.icon {
  width:12px;
  height:12px
}
.notification-dot {
  position:absolute;
  top:9px;
  right:10px;
  width:6px;
  height:6px;
  background:var(--blue);
  border-radius:100%;
  box-shadow:0 0 0 2px var(--bg)
}
.avatar {
  display:inline-flex;
  width:39px;
  height:39px;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--av),var(--avdark));
  border:1px solid #ffffff15;
  box-shadow:inset 0 1px 2px #ffffff16;
  color:#f0f4ff;
  border-radius:50%;
  font-size:12px;
  font-weight:500
}
.tone-0 {
  --av:#5a87e1;
  --avdark:#304778
}
.tone-1 {
  --av:#bd986c;
  --avdark:#64513c
}
.tone-2 {
  --av:#bd8d9e;
  --avdark:#704d66
}
.tone-3 {
  --av:#9384b9;
  --avdark:#4f466b
}
.tone-4 {
  --av:#75a69d;
  --avdark:#365b60
}
.tone-5 {
  --av:#b5a46c;
  --avdark:#665f39
}
.tone-6 {
  --av:#b78086;
  --avdark:#683f50
}
.tone-7 {
  --av:#6ca9c8;
  --avdark:#365c78
}
.avatar.sm {
  width:33px;
  height:33px;
  font-size:10px
}
.avatar.xs {
  width:25px;
  height:25px;
  font-size:8px
}
.avatar.lg {
  width:54px;
  height:54px;
  font-size:16px
}
.avatar.xl {
  width:72px;
  height:72px;
  font-size:23px
}
.avatar-stack {
  display:inline-flex;
  align-items:center;
  padding-left:0
}
.avatar-stack>.avatar {
  margin-left:-7px;
  border:2px solid var(--panel)
}
.avatar-stack>.avatar:first-child {
  margin-left:0
}
.avatar.overflow {
  background:#383e4a;
  color:#d4dceb
}
.brandline {
  display:flex;
  align-items:center;
  gap:5px;
  color:#a8c0ed;
  font-size:9px;
  letter-spacing:1.15px
}
.brandline>.icon {
  width:13px;
  height:13px
}
.home-title {
  display:block;
  margin-bottom:25px
}
.home-entry-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.home-entry-actions .btn {width:100%;min-height:46px}
.home-next {margin-bottom:20px;padding:18px 18px 2px;border:1px solid #78a7ff2b;border-radius:var(--radius);background:linear-gradient(135deg,#2a354b,#262930 80%)}
.home-next h2 {font-size:17px;margin:0}
.home-next-hint {margin:6px 0 8px;color:var(--muted);font-size:11px}
.home-next-row {display:flex;align-items:center;gap:11px;width:100%;min-height:94px;padding:16px 0;text-align:left;border-top:1px solid var(--line)}
.attention-icon {display:grid;place-items:center;flex:0 0 34px;width:34px;height:38px;border-radius:12px;background:#78a7ff10}
.attention-icon .icon {width:19px;height:19px}
.home-next-row .grow {min-width:0}
.home-next-row strong {display:block;font-size:13px;font-weight:600}
.home-next-row .grow>small {display:block;margin:2px 0 5px;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.attention-context {display:block;margin:0 0 6px;color:var(--amber);font-size:10px;line-height:1.5}
.attention-count {font-size:11px;font-weight:400;color:var(--muted)}
.attention-amount {display:block;font-size:19px;line-height:1.3;white-space:nowrap}
.attention-amount small {color:var(--muted);font-size:10px;font-weight:400}
.attention-note {display:block;color:var(--muted);font-size:11px}
.attention-link {display:flex;align-items:center;gap:3px;flex-shrink:0;font-size:11px}
.attention-link .icon {width:14px;height:14px}
.attention-expand {width:100%;min-height:44px;border-top:1px solid var(--line)}
.home-next-row:hover {background:#ffffff03}
.home-title h1 {
  font-size:32px;
  line-height:1.22;
  margin-top:12px;
  letter-spacing:-1.1px
}
.home-title h1>span,.simple-title h1>span {
  color:#6397ff
}
.home-title .btn {
  align-self:flex-end;
  margin-bottom:4px;
  padding:10px 13px;
  font-size:12px;
  gap:5px
}
.home-title .btn .icon {
  width:17px;
  height:17px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 17px;
  border-radius:13px;
  background:#ffffff09;
  font-size:13px;
  font-weight:550;
  line-height:1.45;
  transition:background .15s,transform .15s;
  text-align:center
}
.btn:hover:not(:disabled) {
  background:#ffffff14;
  transform:translateY(-1px)
}
.btn.primary {
  background:var(--primary);
  box-shadow:0 5px 20px #1655ff15;
  color:white
}
.btn.primary:hover:not(:disabled) {
  background:#4380ff
}
.btn.soft {
  background:#5288ff15;
  color:#9dbfff
}
.btn.danger {
  background:#ff9a8b10;
  color:var(--coral)
}
.btn.small {
  min-height:44px;
  font-size:12px;
  padding:10px 13px
}
.btn>.icon {
  width:18px;
  height:18px
}
.text-button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 0;
  color:#99b9f7;
  font-size:12px;
  flex-shrink:0
}
.text-button>.icon {
  width:15px;
  height:15px
}
.total-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px
}
.total-tile {
  padding:15px 11px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#292b30;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  min-width:0
}
.tile {
  display:inline-grid;
  place-items:center;
  width:37px;
  height:37px;
  flex-shrink:0;
  border-radius:12px;
  background:#5d91ff12;
  color:#8aafff
}
.tile>.icon {
  width:20px;
  height:20px
}
.tile.green {
  color:var(--green);
  background:#7ad9bc0b
}
.tile.amber {
  color:var(--amber);
  background:#edc0800b
}
.tile.coral {
  color:var(--coral);
  background:#ff9a8b0b
}
.total-tile>.tile {
  width:30px;
  height:34px;
  border-radius:10px
}
.total-tile:first-child>.tile>.icon {
  transform:rotate(135deg)
}
.total-tile:nth-child(2)>.tile>.icon {
  transform:rotate(-45deg)
}
.total-tile small {
  color:var(--muted);
  font-size:10px;
  white-space:nowrap
}
.total-tile strong {
  display:block;
  font-size:19px;
  line-height:1.4;
  margin-top:2px;
  font-weight:520
}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:25px 0 12px;
  min-height:34px
}
.section-title h2 {
  font-size:17px
}
.section-title h2>small,.section-title h3>small {
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  margin-left:5px
}
.section-title.flush {
  margin:0 0 12px
}
.tabs {
  display:flex;
  align-items:center;
  gap:23px;
  border-bottom:1px solid var(--line);
  margin-bottom:17px
}
.tabs>button {
  color:var(--muted);
  font-size:12px;
  min-height:45px;
  padding:7px 0 12px;
  position:relative;
  white-space:nowrap
}
.tabs>button.active {
  color:#d5e4ff
}
.tabs>button.active:after {
  content:"";
  height:2px;
  border-radius:4px;
  background:#6c9eff;
  position:absolute;
  left:0;
  right:0;
  bottom:-1px
}
.tabs>button small {
  font-size:10px;
  margin-left:4px;
  color:#a0b8e5
}
.session-card {
  display:block;
  width:100%;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(110deg,#292b30,#27292e);
  border:1px solid var(--line);
  text-align:left;
  transition:border-color .15s
}
.session-card:hover {
  border-color:#6a9fff40
}
.session-card h3 {
  font-size:14px;
  line-height:1.4
}
.session-card p {
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.session-card p>span {
  padding:0 3px
}
.session-card>.row {
  gap:10px
}
.badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:10px;
  line-height:1.4;
  padding:5px 7px;
  border-radius:7px;
  white-space:nowrap;
  background:#ffffff07;
  color:#bac3d7;
  font-weight:450
}
.badge.blue {
  color:#98baff;
  background:#5791ff12
}
.badge.green {
  color:#8ddac4;
  background:#7ad9bc0c
}
.badge.amber {
  color:var(--amber);
  background:#edc0800c
}
.badge.coral {
  color:var(--coral);
  background:#ff9a8b0c
}
.session-bottom {
  border-top:1px solid var(--line);
  margin-top:17px;
  padding-top:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.my-total {
  display:flex;
  align-items:center;
  gap:7px
}
.my-total>small {
  font-size:10px;
  color:#959ba9
}
.my-total>b {
  font-size:17px;
  font-weight:500
}
.my-total>.icon {
  width:14px;
  height:14px;
  color:#7d8596
}
.mini-progress {
  height:3px;
  background:#ffffff06;
  border-radius:4px;
  margin-top:15px;
  overflow:hidden
}
.mini-progress>span {
  display:block;
  height:100%;
  background:#739dff;
  border-radius:inherit
}
.discovery,.optimization-link {
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  margin-top:20px;
  padding:14px 12px;
  background:#578cff08;
  border:1px solid #578cff16;
  border-radius:16px
}
.discovery strong,.optimization-link strong {
  display:block;
  font-size:12px;
  font-weight:520
}
.discovery small,.optimization-link small {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted)
}
.discovery>.icon,.optimization-link>.icon {
  width:15px;
  color:#8faddc
}
.app-footer {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:9px;
  color:#79808d;
  margin:32px 0 0
}
.demo-tools {margin-top:12px}
.record-attachment {display:flex;align-items:center;gap:12px;width:100%;padding:11px;background:#1d2430;border:1px solid #708ab333;border-radius:14px;text-align:left}
.record-attachment>img {width:62px;height:74px;object-fit:cover;border-radius:7px;background:white;flex-shrink:0}
.record-attachment>span {flex:1;min-width:0}
.record-attachment strong,.record-attachment small {display:block}
.record-attachment strong {font-size:12px}
.record-attachment small {font-size:10px;color:var(--muted);overflow-wrap:anywhere;margin-top:5px}
.record-attachment>.icon {width:16px;flex-shrink:0;color:#8fb8fa}
.attachment-full {display:block;width:100%;height:auto;max-height:65dvh;object-fit:contain;background:#fff;border-radius:12px}
.app-footer>.icon {
  width:14px;
  height:14px
}
.page-content {
  animation:enter .2s ease
}
.page-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:23px
}
.page-heading h1 {
  font-size:25px;
  letter-spacing:-.7px
}
.page-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  overflow-wrap:anywhere
}
.page-heading>.back {
  background:#ffffff04;
  border:1px solid var(--line);
  min-width:38px;
  width:38px;
  height:40px;
  min-height:40px;
  border-radius:12px
}
.card {
  padding:19px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:16px;
  min-width:0
}
.card>h3 {
  margin-bottom:12px
}
.session-hero {
  padding:23px;
  background:radial-gradient(ellipse at 0% 0%,#4674c122,transparent 70%),var(--panel)
}
.session-hero h2 {
  font-size:23px;
  margin-top:15px;
  overflow-wrap:anywhere
}
.session-hero>p {
  margin-top:6px;
  font-size:11px;
  color:var(--muted)
}
.hero-net {
  margin-top:25px
}
.hero-net>small {
  display:block;
  color:var(--muted)
}
.hero-net>strong {
  display:block;
  font-size:36px;
  font-weight:450;
  margin:4px 0 0
}
.hero-actions {
  display:flex;
  gap:9px;
  margin-top:23px
}
.foot-links {
  margin-top:5px
}
.foot-links>.text-button {
  font-size:11px
}
.member-row {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  min-height:60px
}
.member-row:last-child {
  border:0;
  padding-bottom:0
}
.member-row strong {
  display:block;
  font-size:12px;
  font-weight:520
}
.member-row strong>em {
  font-size:9px;
  color:#98baff;
  margin-left:3px
}
.member-row small {
  font-size:10px;
  color:var(--muted);
  display:block;
  line-height:1.6;
  margin-top:3px
}
.member-row>b {
  font-size:15px;
  font-weight:450
}
.member-row>.icon {
  width:12px;
  color:#737d90
}
.ledger-card {
  padding:17px
}
.ledger-row {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  text-align:left
}
.ledger-index {
  font-size:13px;
  color:#8d9eba;
  width:22px;
  flex-shrink:0;
  align-self:flex-start;
  margin-top:1px
}
.ledger-row strong {
  font-size:12px;
  font-weight:520;
  display:block;
  line-height:1.5;
  overflow-wrap:anywhere
}
.ledger-row small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.ledger-row b {
  font-size:14px;
  font-weight:450
}
.ledger-row .right {
  flex-shrink:0
}
.detail-list {
  margin-top:17px
}
.detail-list>div {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  padding:9px 0;
  font-size:12px
}
.detail-list>div>span {
  color:var(--muted);
  min-width:0
}
.detail-list strong {
  font-size:12px;
  text-align:right;
  font-weight:450;
  overflow-wrap:anywhere;
  min-width:0
}
.notice {
  display:flex;
  gap:9px;
  padding:13px 12px;
  background:#6697ed0a;
  border:1px solid #6697ed12;
  border-radius:12px;
  color:#b3bfd5;
  font-size:11px;
  line-height:1.8;
  margin-top:16px
}
.notice>.icon {
  width:16px;
  height:16px;
  margin-top:2px
}
.notice.amber {
  color:#e1c29c;
  background:#edc08008;
  border-color:#edc08015
}
.notice.coral {
  color:#f0b1a8;
  background:#ff9a8b08;
  border-color:#ff9a8b15
}
.notice.green {
  color:#a0d6c6;
  background:#7ad9bc08;
  border-color:#7ad9bc15
}
.next-card {
  padding:23px;
  border-radius:23px;
  background:radial-gradient(ellipse at 100% -10%,#466edc28,transparent 80%),linear-gradient(110deg,#293b60,#2b3043);
  border:1px solid #8daeff17;
  margin-bottom:14px;
  position:relative;
  overflow:hidden
}
.next-card:after {
  content:"";
  position:absolute;
  pointer-events:none;
  width:220px;
  height:220px;
  border:1px solid #a7c4ff08;
  border-radius:50%;
  right:-110px;
  top:40px;
  box-shadow:0 0 0 24px #a7c4ff03
}
.next-card .eyebrow {
  font-size:9px;
  color:#b1c9ef
}
.next-card h2 {
  font-size:20px;
  margin-top:19px;
  font-weight:550;
  position:relative;
  z-index:1
}
.next-amount {
  font-size:43px;
  font-weight:450;
  line-height:1.3;
  letter-spacing:-1.5px;
  margin-top:10px
}
.next-card>p {
  font-size:11px;
  color:#aebbd3;
  margin-top:6px;
  margin-bottom:24px
}
.next-card>.btn {
  position:relative;
  z-index:1
}
.next-card.done {
  background:linear-gradient(120deg,#293d3e,#2b3040)
}
.overview .between>h3 {
  font-size:14px
}
.overview .text-button {
  font-size:10px;
  min-height:30px
}
.overview .text-button>.icon {
  width:13px;
  height:13px
}
.overview-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px 12px;
  margin-top:16px
}
.overview-grid>div:first-child {
  grid-column:span 2;
  padding-bottom:13px;
  border-bottom:1px solid var(--line)
}
.overview-grid small {
  display:block;
  color:var(--muted);
  font-size:11px
}
.overview-grid strong {
  font-size:19px;
  font-weight:460;
  margin-top:4px;
  display:block
}
.overview-grid>div:first-child strong {
  font-size:14px
}
.overview-grid strong>span {
  padding:0 5px;
  color:#77859b
}
.overview-grid strong b {
  font-weight:450
}
.overview-grid>div:last-child {
  grid-column:span 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid var(--line)
}
.overview-grid>div:last-child strong {
  font-size:14px;
  margin:0
}
.progress-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#98a5ba;
  font-size:10px;
  margin:18px 0 8px
}
.progress-caption>b {
  color:#a3c3ff;
  font-size:12px
}
.progress {
  height:5px;
  background:#141b2b66;
  border-radius:5px;
  overflow:hidden
}
.progress>span {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4380f8,#8bb8ff);
  transition:width .3s
}
.overview>p {
  margin-top:9px;
  font-size:10px
}
.optimization-link {
  margin-top:0;
  margin-bottom:23px
}
.task-card {
  border:1px solid var(--line);
  border-radius:19px;
  background:#292b31;
  color:var(--text);
  overflow:hidden
}
.task-card.coral {
  border-color:#ff9a8b25
}
.task-card.amber {
  border-color:#edc08015
}
.task-main {
  width:100%;
  padding:17px 16px 13px;
  display:block;
  text-align:left
}
.task-main .row {
  gap:9px
}
.task-main strong {
  font-size:13px;
  font-weight:550;
  display:block
}
.task-main small {
  font-size:10px;
  display:block;
  color:var(--muted);
  margin-top:4px
}
.task-main .avatar {
  width:34px;
  height:34px;
  font-size:10px
}
.task-amount {
  font-size:21px;
  font-weight:450;
  letter-spacing:-.8px
}
.task-status {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:13px
}
.task-status>span:not(.badge) {
  font-size:10px;
  color:var(--muted);
  flex:1
}
.task-status>.icon {
  width:12px;
  color:#7b879e
}
.task-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:0 16px 14px
}
.task-actions .btn {
  font-size:11px;
  padding:10px 12px;
  min-height:44px
}
.task-actions .text-button {
  font-size:11px
}
.task-card+.task-card {
  margin-top:12px
}
.stack>.task-card+.task-card {
  margin-top:0
}
.payment-row {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  text-align:left;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  min-height:76px
}
.payment-row:last-child {
  border-bottom:0
}
.payment-row>.tile {
  width:31px;
  height:35px
}
.payment-row strong {
  font-size:12px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:4px
}
.payment-row strong>.icon {
  width:13px;
  height:13px
}
.payment-row small {
  font-size:10px;
  display:block;
  color:var(--muted);
  line-height:1.7;
  margin-top:2px
}
.payment-row>b {
  font-size:16px;
  font-weight:450
}
.payment-row>.icon {
  width:12px;
  color:#7d889b
}
.payment-list {
  padding-top:3px;
  padding-bottom:3px
}
.medium-amount {
  font-size:35px;
  font-weight:450;
  margin-top:10px
}
.card>.tiny {
  margin-top:8px;
  line-height:1.8
}
.timeline {
  padding:0;
  list-style:none;
  position:relative;
  margin:20px 0 0
}
.timeline:before {
  content:"";
  position:absolute;
  left:4px;
  top:6px;
  bottom:15px;
  width:1px;
  background:#ffffff12
}
.timeline>li {
  display:flex;
  gap:13px;
  position:relative;
  padding-bottom:20px
}
.timeline>li:last-child {
  padding-bottom:0
}
.timeline-dot {
  width:9px;
  height:9px;
  flex-shrink:0;
  margin-top:6px;
  background:#6c95dd;
  border:2px solid #34445f;
  border-radius:50%
}
.timeline strong {
  font-size:11px;
  line-height:1.8;
  font-weight:450;
  display:block
}
.timeline small {
  color:#8d98ac;
  font-size:10px;
  display:block;
  margin-top:3px
}
.completed-hero {
  border-radius:24px;
  padding:33px 20px 30px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%,#7ad9bc17,transparent 70%),linear-gradient(130deg,#2c3b3d,#2c2f3e);
  border:1px solid #93cfc415;
  margin-bottom:15px
}
.success-orbit {
  width:72px;
  height:72px;
  margin:0 auto 23px;
  border:1px solid #7ad9bc26;
  border-radius:25px;
  display:grid;
  place-items:center;
  background:#7ad9bc0d;
  box-shadow:0 0 0 10px #7ad9bc03
}
.success-orbit>.icon {
  width:34px;
  height:34px;
  color:var(--green);
  stroke-width:1.5
}
.completed-hero .eyebrow {
  font-size:9px;
  letter-spacing:1.2px
}
.completed-hero h2 {
  font-size:32px;
  font-weight:550;
  line-height:1.35;
  margin-top:18px;
  letter-spacing:-.5px
}
.completed-hero h2>span {
  color:var(--green)
}
.completed-hero p {
  font-size:11px;
  color:#9eadaf;
  margin-top:14px
}
.report-amount {
  font-size:42px;
  letter-spacing:-1.3px;
  font-weight:420;
  line-height:1.3;
  margin-top:26px
}
.completed-hero>small {
  display:block;
  color:#a4afb8;
  margin-top:6px;
  font-size:10px
}
.completed-hero>.badge {
  margin-top:20px;
  font-size:10px;
  padding:7px 11px
}
.report-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:16px
}
.report-stats>div {
  padding:17px 5px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  text-align:center
}
.report-stats strong {
  display:block;
  font-size:27px;
  font-weight:450
}
.report-stats strong>em {
  font-size:14px
}
.report-stats small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}
.simple-title {
  margin-bottom:25px
}
.simple-title h1 {
  margin-top:12px;
  font-size:30px
}
.simple-title p {
  color:var(--muted);
  font-size:12px;
  margin-top:9px
}
.context-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  margin-top:18px
}
.context-label+.task-card {
  margin-top:0
}
.currency-card .total-pair {
  margin:17px 0 0
}
.currency-card .total-pair small {
  display:block;
  color:var(--muted);
  font-size:10px
}
.currency-card .total-pair strong {
  display:block;
  font-size:22px;
  font-weight:450;
  margin-top:4px
}
.currency-card .between>small {
  color:var(--muted);
  font-size:10px
}
.profile-hero {
  text-align:center;
  padding-top:30px
}
.profile-hero h2 {
  font-size:23px;
  margin-top:16px
}
.profile-hero>p {
  font-size:11px;
  color:var(--muted);
  margin:7px 0 18px
}
.wallets {
  margin-top:28px;
  text-align:left;
  border-top:1px solid var(--line)
}
.wallets>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:17px 0;
  border-bottom:1px solid var(--line)
}
.wallets>div:last-child {
  border:0;
  padding-bottom:4px
}
.wallets>div>span {
  font-size:12px
}
.wallets small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.wallets strong {
  font-size:23px;
  font-weight:450
}
.menu-card {
  padding:4px 17px
}
.menu-row {
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  text-align:left;
  min-height:67px;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.menu-row:last-child {
  border:0
}
.menu-row>.icon {
  width:14px;
  color:#8792a7
}
.scene-bar {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  background:#5a8cff08;
  border:1px solid #5a8cff19;
  border-radius:12px;
  padding:7px 10px;
  margin:-6px 0 22px
}
.scene-bar>span {
  display:flex;
  gap:6px;
  align-items:center;
  flex:1;
  min-width:0
}
.scene-bar>span>.icon {
  width:14px;
  height:14px;
  color:#a4c0ff
}
.scene-bar strong {
  font-size:10px;
  color:#b5c7e7;
  font-weight:500
}
.scene-bar>.text-button {
  font-size:10px;
  min-height:30px
}
.scene-bar>.icon-button {
  min-width:30px;
  min-height:30px
}
.scene-bar>.icon-button>.icon {
  width:14px;
  height:14px
}
.storage-warning {
  font-size:11px;
  padding:12px 14px;
  background:#edc08008;
  border:1px solid #edc08014;
  border-radius:12px;
  color:#b9a58a;
  margin:18px 0 0;
  line-height:1.8
}
.empty {
  padding:30px 12px;
  text-align:center
}
.empty-icon {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0 auto 15px;
  border-radius:18px;
  background:#5f8ee011;
  color:#92b0e8
}
.empty h3 {
  font-size:15px
}
.empty p {
  font-size:11px;
  color:var(--muted);
  line-height:1.9;
  margin:9px auto 18px;
  max-width:270px
}
.correction-card h3 {
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px
}
.correction-card h3>.icon {
  width:16px;
  height:16px;
  color:var(--coral)
}
.correction-card p {
  font-size:11px;
  margin:12px 0;
  line-height:1.9
}
.correction-card {
  border-color:#ff9a8b26
}
/* A single phone-width canvas at every viewport. Modal body owns its scroll. */ .modal-open {
  overflow:hidden
}
.overlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  background:#080d17bd;
  backdrop-filter:blur(5px)
}
.sheet {
  width:100%;
  max-width:460px;
  max-height:94dvh;
  max-height:min(94dvh,1000px);
  display:flex;
  flex-direction:column;
  border-radius:27px 27px 0 0;
  background:#272a32;
  border:1px solid #a9bddb15;
  border-bottom:0;
  box-shadow:0 -15px 80px #0004;
  animation:sheet-up .22s ease
}
.handle {
  width:35px;
  height:4px;
  background:#68708470;
  border-radius:6px;
  margin:10px auto 0;
  flex-shrink:0
}
.sheet-head {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:18px 21px 14px;
  flex-shrink:0
}
.sheet-head h2 {
  font-size:19px;
  line-height:1.5;
  letter-spacing:-.4px;
  font-weight:600
}
.sheet-head p {
  font-size:10px;
  color:#9da8bc;
  margin-top:5px;
  line-height:1.8
}
.sheet-head>.icon-button {
  min-width:34px;
  min-height:36px;
  margin-right:-6px
}
.sheet-head>.icon-button>.icon {
  width:19px;
  height:19px
}
.sheet-body {
  padding:3px 21px 23px;
  overflow-y:auto;
  overscroll-behavior:contain;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:#56647b #272a32
}
.sheet-footer {
  padding:15px 21px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid #ffffff09;
  background:#272a32;
  flex-shrink:0
}
.sheet-footer .btn {
  font-size:12px
}
.footnote {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:9px;
  color:#8592a8;
  margin-top:11px
}
.footnote>.icon {
  width:12px;
  height:12px
}
.field {
  display:block;
  margin:18px 0
}
.field>span,.field-label {
  display:block;
  color:#aeb8ca;
  font-size:12px;
  margin-bottom:8px
}
.field-label>small {
  color:var(--muted);
  font-size:10px;
  font-weight:400
}
.field input,.field select,.copy-fallback {
  width:100%;
  min-height:48px;
  padding:12px 13px;
  color:var(--text);
  border:1px solid #ffffff12;
  border-radius:12px;
  background:#1d232f;
  font-size:14px;
  outline-offset:1px
}
.field input::placeholder {
  color:#67768d;
  font-size:12px
}
.field input:focus,.field select:focus {
  border-color:#7caaff80
}
.field select {
  padding-right:25px
}
.form-error {
  color:var(--coral);
  font-size:11px;
  line-height:1.8;
  margin-top:13px
}
.form-error:empty {
  display:none
}
.account-option,.scene-option {
  display:flex;
  align-items:center;
  width:100%;
  gap:12px;
  padding:14px 0;
  text-align:left;
  border-bottom:1px solid var(--line);
  min-height:72px
}
.account-option:last-child,.scene-option:last-child {
  border:0
}
.account-option strong,.scene-option strong {
  display:block;
  font-size:13px;
  font-weight:500
}
.account-option small,.scene-option small {
  display:block;
  font-size:10px;
  color:#97a5bc;
  margin-top:5px;
  line-height:1.7
}
.account-option>.icon,.scene-option>.icon {
  width:16px;
  color:#8cacdf
}
.demo-controls {
  margin-top:15px
}
.control-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  width:100%;
  gap:12px;
  min-height:82px;
  border-bottom:1px solid var(--line)
}
.control-row strong {
  font-size:12px;
  font-weight:520;
  display:block
}
.control-row small {
  color:#94a1b8;
  display:block;
  font-size:10px;
  line-height:1.8;
  margin-top:4px
}
.toggle {
  width:37px;
  height:22px;
  border-radius:20px;
  background:#4b5362;
  flex-shrink:0;
  padding:3px;
  transition:background .15s
}
.toggle:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#c3ccda;
  transition:transform .15s
}
.toggle.on {
  background:#376ff1
}
.toggle.on:before {
  transform:translateX(15px);
  background:#fff
}
.template-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:6px 0 22px
}
.template {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  justify-content:center;
  min-height:79px;
  border:1px solid #ffffff10;
  border-radius:14px;
  color:#a0abc1;
  background:#202634;
  font-size:11px
}
.template>.icon {
  width:24px;
  height:24px
}
.template.active {
  background:#2b4f8b;
  color:#f4f8ff;
  border-color:#89b3ff;
  box-shadow:inset 0 0 0 1px #89b3ff
}
.template small {font-size:9px;color:#a8b5cb}
.template.active small {color:#d7e6ff}
.member-picks {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:8px
}
.member-pick {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  justify-content:center;
  min-height:80px;
  background:#1f2530;
  border:1px solid #ffffff08;
  border-radius:13px;
  position:relative;
  padding:10px 4px;
  font-size:10px;
  color:#a9b5ca
}
.member-pick .avatar {
  width:33px;
  height:33px;
  font-size:10px
}
.member-pick.selected {
  background:#2d5190;
  border-color:#88b3ff;
  color:#fff
}
.member-pick:disabled {
  opacity:1
}
.member-pick>i {
  position:absolute;
  top:4px;
  right:4px;
  border-radius:50%;
  width:14px;
  height:14px;
  background:transparent;
  border:1px solid #7e8b9f;
  display:grid;
  place-items:center
}
.member-pick.selected>i {background:#397bff;border-color:#c9e0ff;color:#fff}
.member-pick>i>.icon {
  width:9px;
  height:9px
}
.invite-code {
  text-align:center;
  padding:27px 0;
  font-size:35px;
  letter-spacing:6px;
  color:#a8c7ff;
  font-weight:500
}
.segmented {
  display:flex;
  padding:4px;
  border-radius:12px;
  background:#1b2230;
  margin:6px 0 22px
}
.segmented>button {
  flex:1;
  min-height:40px;
  border-radius:9px;
  font-size:12px;
  color:#899ab4
}
.segmented>button.active {
  background:#354560;
  color:#d7e6ff;
  box-shadow:0 2px 5px #10182630
}
.score-row {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:63px;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.score-row input {
  width:104px;
  min-height:43px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #ffffff10;
  background:#1d2432;
  color:var(--text);
  font-size:19px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  outline-offset:1px
}
.score-row small {
  color:#94a3bc;
  display:block;
  font-size:10px;
  margin-top:4px
}
.score-total {
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:#a6b6d1
}
.score-total>b {
  font-size:18px;
  font-weight:450
}
.participant-chips {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:4px
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:44px;
  border-radius:13px;
  padding:7px 10px 7px 7px;
  border:1px solid #66738b;
  background:#20252f;
  font-size:11px;
  color:#a2b0c7
}
.chip.selected {
  border-color:#98bdff;
  background:#2f68d7;
  color:#fff;
  box-shadow:inset 0 0 0 1px #98bdff40
}
.chip-check {display:grid;place-items:center;width:17px;height:17px;border:1px solid #8290a7;border-radius:5px;margin-left:3px}
.chip-check .icon {width:13px;height:13px}
.chip.selected .chip-check {background:#fff;border-color:#fff;color:#2454b3}
.selection-count {color:#adcbff;font-size:11px;white-space:nowrap}
.helper {font-size:11px;color:#a5aebe;line-height:1.7;margin:6px 0 10px}
.record-type-label {display:flex;align-items:center;gap:8px;color:#c2d7ff;font-size:12px;margin:0 0 17px}
.record-type-label .icon {width:18px;height:18px}
.invite-route {display:flex;gap:12px;align-items:center;background:#304b771f;border:1px solid #5e8dd833;border-radius:15px;padding:14px;margin:0 0 20px}
.invite-route>.icon {width:26px;height:26px;color:#9ec3ff;flex-shrink:0}
.invite-route strong,.invite-route small {display:block}
.invite-route strong {font-size:12px;font-weight:550}
.invite-route small {font-size:10px;color:#a9b7ce;margin-top:3px}
.friend-self,.friend-row {display:flex;gap:11px;align-items:center;padding:13px 0}
.friend-self {margin-bottom:10px}
.friend-row {border-bottom:1px solid var(--line)}
.friend-row strong,.friend-self strong {display:block;font-size:13px;font-weight:550}
.friend-row small,.friend-self small {display:block;font-size:10px;color:#a5aebe;margin-top:3px}
.friend-row .text-button {min-height:44px}
.search-result {background:#344b6e22;border-radius:12px;padding:12px;margin-top:8px}
.qr-card {border-radius:20px;background:#f8fbff;padding:17px 18px;color:#16283e;text-align:center}
.qr-brand {display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:2px;font-size:11px;font-weight:650;color:#3b5e92}
.qr-brand .icon {width:15px;height:15px}
.invite-qr {display:block;width:224px;max-width:100%;height:auto;margin:12px auto}
.qr-card>strong {display:block;font-size:15px}
.qr-card>small {display:block;color:#697d9a;font-size:10px;margin-top:5px}
.invite-code.compact {font-size:23px;letter-spacing:4px;padding:16px 0 0}
.scan-frame {width:100%;height:220px;position:relative;background:#151e2c;border:1px solid #5e88bd42;border-radius:18px;overflow:hidden;margin-bottom:12px;display:grid;place-items:center}
.scan-frame>.icon {position:absolute;width:55px;height:55px;color:#7596c8}
.scan-frame video {position:absolute;width:100%;height:100%;object-fit:cover;z-index:1}
.scan-frame video[hidden] {display:none}
.scan-corners {position:absolute;inset:28px 55px;border:2px solid #8eb8ff;border-radius:12px;z-index:2;pointer-events:none}
.qr-upload {position:relative;cursor:pointer;justify-content:center}
.qr-upload input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qr-upload:focus-within {outline:2px solid #94b9ff;outline-offset:3px}
.join-preview-icon {margin:0 auto 12px;display:grid;place-items:center;width:60px;height:60px;border:1px solid #80adf34d;border-radius:18px;background:#487bcc1a;color:#a0c8ff}
.join-preview-icon .icon {width:29px;height:29px}
.btn[hidden] {display:none}
.chip .avatar {
  width:23px;
  height:23px;
  font-size:8px
}
.split-preview {
  margin-top:18px;
  padding:13px;
  border:1px solid #7ba6ff18;
  border-radius:12px;
  background:#78a7ff06
}
.split-preview>small {
  display:block;
  font-size:10px;
  color:#9cadc8;
  margin-bottom:6px;
  line-height:1.8
}
.split-preview>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:7px;
  font-size:11px;
  color:#c6d3e8
}
.split-preview b {
  font-weight:450
}
.simple-person {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.simple-person>span:not(.avatar) {
  flex:1
}
.simple-person>b {
  font-size:16px;
  font-weight:450
}
.mini-heading {
  font-size:12px;
  font-weight:550;
  color:#becde4;
  margin:24px 0 8px
}
.person-hero {
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:14px 0 20px
}
.person-hero>strong {
  font-size:32px;
  margin-top:17px;
  font-weight:450
}
.person-hero>small {
  color:#99a7bc;
  font-size:10px;
  margin-top:5px
}
.person-task {
  width:100%;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  text-align:left
}
.person-task>b {
  font-size:14px;
  font-weight:450
}
.person-task>.badge {
  font-size:9px
}
.explanation h3 {
  font-size:14px;
  color:#d0ddf2;
  margin:22px 0 8px
}
.explanation p {
  font-size:12px;
  color:#a7b4cc;
  line-height:1.95
}
.optimization-stats {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:37px;
  margin:20px 0 25px
}
.optimization-stats>div {
  text-align:center
}
.optimization-stats b {
  display:block;
  font-size:38px;
  font-weight:450
}
.optimization-stats small {
  display:block;
  color:#99abc7;
  font-size:10px
}
.optimization-stats>.icon {
  color:#7e97bf
}
.inset-card {
  padding:15px;
  border:1px solid #ffffff0c;
  border-radius:15px;
  background:#1d2431;
  margin-top:15px
}
.inset-card h3 {
  font-size:12px;
  font-weight:500;
  margin-bottom:12px;
  color:#c6d6ef
}
.inset-card.blue-border {
  border-color:#78a7ff35
}
.graph-edge {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  padding:11px 0;
  border-bottom:1px solid var(--line)
}
.graph-edge:last-child {
  border:0
}
.graph-edge>span {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex:1
}
.graph-edge>span>.avatar {
  width:20px;
  height:20px;
  font-size:7px
}
.graph-edge>.icon {
  width:14px;
  height:14px;
  color:#7891b8
}
.graph-edge>b {
  font-size:12px;
  font-weight:500;
  margin-left:auto
}
.transfer-people {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
  padding:14px 0 22px
}
.transfer-people>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:12px
}
.transfer-people>.icon {
  color:#7894bf
}
.detail-amount {
  text-align:center;
  font-size:39px;
  letter-spacing:-1px;
  font-weight:450;
  margin:4px 0 16px
}
.status-en {
  display:block;
  color:#8f9fb8;
  font-size:10px;
  margin-top:7px
}
.wallet-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#a6b5cf;
  margin:14px 0
}
.wallet-line>strong {
  font-weight:450;
  color:#a8c8ff
}
.low-balance {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  border-radius:11px;
  background:#edc08008;
  padding:5px 11px;
  margin:14px 0;
  color:#e4c49c;
  font-size:11px
}
.low-balance>span {
  display:flex;
  gap:5px;
  align-items:center
}
.low-balance>span>.icon {
  width:14px;
  height:14px
}
.low-balance>.text-button {
  font-size:11px;
  color:#f0ce9d
}
.payment-options {
  display:grid;
  gap:9px;
  margin:20px 0
}
.payment-option {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:80px;
  padding:12px 11px;
  text-align:left;
  border:1px solid #ffffff0b;
  border-radius:14px;
  background:#202632
}
.payment-option.selected {
  border-color:#82adff77;
  background:#407cff0b
}
.radio {
  width:16px;
  height:16px;
  border:1px solid #7184a3;
  border-radius:50%;
  flex-shrink:0
}
.selected>.radio {
  border:5px solid #6d9dff;
  background:#203658
}
.payment-option .tile {
  width:32px;
  height:35px
}
.payment-option strong {
  font-size:12px;
  display:block;
  font-weight:500
}
.payment-option small {
  color:#97a7c0;
  font-size:10px;
  display:block;
  margin-top:5px;
  line-height:1.7
}
.pay-breakdown {
  border-top:1px solid var(--line);
  margin-top:17px
}
.pay-breakdown .detail-list {
  margin-top:8px
}
.pay-breakdown .detail-list>div {
  font-size:11px;
  padding:8px 0
}
.pay-breakdown .detail-list strong {
  font-size:12px
}
.result-symbol {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:15px auto 25px;
  border-radius:23px;
  border:1px solid currentColor;
  background:#ffffff03
}
.result-symbol>.icon {
  width:30px;
  height:30px
}
.processing-visual {
  font-size:11px;
  line-height:1.9;
  color:#a5b9da;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:9px
}
.processing-visual>.icon {
  animation:spin 2s linear infinite
}
.method-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:22px
}
.method {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-direction:column;
  min-height:75px;
  padding:10px 2px;
  border-radius:13px;
  border:1px solid #ffffff0e;
  font-size:10px;
  background:#202632;
  color:#a1b1cb
}
.method.selected {
  background:#497cff15;
  border-color:#7caaff66;
  color:#bbd4ff
}
.method>.icon {
  width:21px;
  height:21px
}
.receipt-upload {
  margin:12px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:76px;
  border:1px dashed #7e9bc044;
  border-radius:13px;
  color:#a0b4d2;
  font-size:10px;
  position:relative;
  cursor:pointer
}
.receipt-upload input {
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer
}
.receipt-upload>.icon {
  width:19px;
  height:19px
}
.receipt-preview {
  display:block;
  width:100%;
  max-height:300px;
  object-fit:contain;
  border-radius:13px;
  margin-top:14px;
  background:#1e2737
}
.checkbox-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:24px;
  font-size:12px
}
.checkbox-row input {
  accent-color:#598dff;
  width:17px;
  height:17px;
  margin:2px 0
}
.checkbox-row small {
  display:block;
  font-size:10px;
  color:#99a9c2;
  margin-top:5px;
  line-height:1.9
}
.share-card {
  background:linear-gradient(130deg,#25394c,#2c3049);
  border:1px solid #97bbff26;
  border-radius:20px;
  text-align:center;
  padding:27px 18px
}
.share-card .brandline {
  justify-content:center
}
.share-card h2 {
  margin-top:23px;
  font-size:23px
}
.share-card p {
  font-size:11px;
  color:#9eb1ce;
  line-height:1.8;
  margin-top:12px
}
.share-card>strong {
  display:block;
  font-size:37px;
  font-weight:450;
  margin:24px 0 14px
}
.share-text {
  font:11px/1.8 var(--font);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:180px;
  overflow:auto;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  color:#a9bad6;
  margin:18px 0 0
}
.copy-fallback {
  min-height:220px;
  resize:vertical;
  margin-top:15px;
  font-size:12px;
  line-height:1.8
}
#toast {
  position:fixed;
  bottom:105px;
  left:50%;
  transform:translate(-50%,12px);
  max-width:360px;
  width:max-content;
  max-width:calc(100% - 40px);
  padding:12px 18px;
  border-radius:13px;
  border:1px solid #a9c4ed26;
  background:#344157f5;
  color:#e8f0ff;
  font-size:12px;
  line-height:1.8;
  text-align:center;
  box-shadow:0 6px 25px #0003;
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
@keyframes enter {
  from {
    opacity:.2;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes sheet-up {
  from {
    opacity:.3;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media(max-width:375px) {
  main {
    padding-left:16px;
    padding-right:16px
  }
  .home-title h1 {
    font-size:29px
  }
  .home-title .btn {
    font-size:11px;
    padding:10px 11px
  }
  .brandline {
    font-size:8px;
    letter-spacing:.9px
  }
  .total-tile {
    padding:13px 9px;
    gap:6px
  }
  .total-tile strong {
    font-size:17px
  }
  .total-tile small {
    font-size:9px
  }
  .session-card {
    padding:16px 14px
  }
  .session-card h3 {
    font-size:13px
  }
  .my-total>small {
    display:none
  }
  .task-main {
    padding:15px 13px 12px
  }
  .task-amount {
    font-size:19px
  }
  .task-actions {
    padding-left:13px;
    padding-right:13px
  }
  .next-card {
    padding:21px 19px
  }
  .next-amount {
    font-size:39px
  }
  .card {
    padding:17px
  }
  .member-row {
    gap:8px
  }
  .member-row .avatar {
    width:32px;
    height:32px;
    font-size:10px
  }
  .member-row>b {
    font-size:14px
  }
  .sheet-body,.sheet-head {
    padding-left:18px;
    padding-right:18px
  }
  .sheet-footer {
    padding-left:18px;
    padding-right:18px
  }
  .graph-edge {
    gap:4px;
    font-size:9px
  }
  .graph-edge>b {
    font-size:11px
  }
  .graph-edge>span>.avatar {
    display:none
  }
  .score-row input {
    width:95px
  }
  .topbar {
    margin-bottom:26px
  }
}
@media(min-width:600px) {
  .app-shell {
    min-height:100vh
  }
  .topbar {
    margin-bottom:30px
  }
  .sheet {
    max-height:min(93dvh,900px)
  }
  main {
    padding-top:26px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep the next action and settlement progress visible together on a phone. */ .app-shell:has(.next-card) .topbar {
  margin-bottom:18px
}
.app-shell:has(.next-card) .scene-bar {
  margin-bottom:16px;
  padding-top:3px;
  padding-bottom:3px
}
.app-shell:has(.next-card) .page-heading {
  margin-bottom:16px
}
.app-shell:has(.next-card) .page-heading .grow>p {
  margin-top:5px;
  color:#c5ccdb;
  font-size:16px;
  font-weight:550;
  line-height:1.5;
  overflow-wrap:anywhere
}
.next-card {
  padding:20px
}
.next-card h2 {
  margin-top:12px;
  font-size:19px
}
.next-amount {
  font-size:39px;
  margin-top:5px
}
.next-card>p {
  margin-bottom:18px
}
.overview {
  padding:16px 18px
}
.overview-grid {
  gap:12px
}
.overview-grid>div:first-child {
  padding-bottom:10px
}
.progress-caption {
  margin-top:13px
}
.overview-grid>div:last-child {
  padding-top:10px
}
.next-card:after {
  display:none
}

/* The StarryBlu scene flows from the account toolbar into the activity actions. */
.home-shell {
  background:var(--bg)
}
.home-shell main {
  position:relative;
  isolation:isolate
}
.home-artwork {
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:260px;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg)
}
.home-artwork img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:64% center
}
.home-artwork:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#14192230,transparent 28%,transparent 65%,var(--bg) 100%),linear-gradient(90deg,#171c24e6,#171c24a8 27%,#171c2426 53%,transparent 72%);
}
.home-shell .topbar {
  position:relative;
  margin-bottom:0
}
.home-shell .account,
.home-shell .top-tools {
  text-shadow:0 1px 12px #0009
}
.home-shell .top-tools>.icon-button {
  color:#d2d9e5
}
.home-shell .scene-bar {
  position:relative;
  margin:12px 0 0;
  background:#202125d9;
  border-radius:12px
}
.home-shell .home-title {
  position:relative;
  margin-bottom:22px
}
.home-hero-copy {
  width:58%;
  max-width:240px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px 0 16px;
  text-shadow:0 2px 18px #111827b3
}
.home-title .home-hero-copy h1 {
  margin-top:0;
  font-size:29px;
  line-height:1.24;
  letter-spacing:-.8px
}
.home-shell .home-entry-actions {
  margin-top:0;
  padding-top:0
}
.home-shell .home-entry-actions .btn {
  min-height:48px;
  margin-bottom:0;
  border-radius:15px;
  font-size:13px
}
.home-shell .home-entry-actions .soft {
  background:#2b303c;
  border:1px solid #91acd31a;
  color:#c0d4f7
}
.home-shell .home-next {
  background:linear-gradient(135deg,#2b3342,#272a31 80%);
  border-color:#849dbe26
}
@media(max-width:375px) {
  .home-artwork {height:250px}
  .home-hero-copy {min-height:132px}
  .home-title .home-hero-copy h1 {font-size:27px}
}