:root{
  --ink:#0E2B2A;
  --ink-2:#123B3A;
  --paper:#EEF1E9;
  --paper-2:#E2E7DC;
  --coral:#FF6A4D;
  --coral-dim:#E0563C;
  --gold:#F4B740;
  --teal:#2FBEB0;
  --text-dark:#142322;
  --text-muted:#5B6B66;
  --line:#D8DECF;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  --grain-strong:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    var(--grain-soft),
    radial-gradient(ellipse at 20% -10%, #1B4644 0%, transparent 55%),
    radial-gradient(ellipse at 100% 110%, #163938 0%, transparent 50%),
    var(--ink);
  background-blend-mode:overlay, normal, normal, normal;
  color:var(--paper);
  font-family:var(--font-body);
  min-height:100vh;
  padding:2.5rem 1.25rem 4rem;
  -webkit-font-smoothing:antialiased;
}
.stage{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.5rem;
}
.brand .mark{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.brand .mark svg{ width:30px; height:30px; }
.brand .mark span{
  font-family:var(--font-display);
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:-0.01em;
}
.brand p{
  margin:0;
  color:#9FB5AE;
  font-size:.9rem;
  max-width:30ch;
}

.layout{
  display:flex;
  gap:3rem;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
}

/* ---------- side panels (role switcher + stepper) ---------- */
.side-panel{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  min-width:220px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:1.1rem 1.1rem 1.2rem;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 40px -28px rgba(0,0,0,.5);
}
.side-panel h3{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8FA69E;
  margin:0 0 .1rem;
  font-weight:700;
}
.role-switcher{
  display:flex;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.role-switcher button{
  flex:1;
  border:none;
  background:transparent;
  color:#9FB5AE;
  font-size:.78rem;
  font-weight:600;
  padding:.5rem .4rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s, color .15s;
  font-family:inherit;
}
.role-switcher button.active{
  background:var(--coral);
  color:#12211F;
}
.role-note{
  font-size:.76rem;
  color:#8FA69E;
  line-height:1.5;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  padding:.7rem .8rem;
  border-radius:10px;
}
.role-note b{ color:var(--paper); }

.stepper{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.stepper button{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid transparent;
  color:#B9CBC4;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  text-align:left;
  padding:.55rem .8rem;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
}
.stepper button .n{
  font-variant-numeric:tabular-nums;
  font-size:.72rem;
  color:#7C948C;
  width:1.1rem;
}
.stepper button:hover{ background:rgba(255,255,255,.08); }
.stepper button.active{
  background:rgba(255,106,77,.12);
  border-left-color:var(--coral);
  color:#fff;
}
.stepper button.active .n{ color:var(--coral); }

/* ---------- device ---------- */
.device{
  position:relative;
  width:clamp(280px, 86vw, 336px);
  aspect-ratio:9/19.3;
  background:#0A1615;
  border-radius:2.6rem;
  padding:12px;
  box-shadow:0 40px 70px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  flex-shrink:0;
}
.device::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:2.6rem;
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.18), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.screen-shell{
  position:relative;
  height:100%;
  background:var(--paper);
  border-radius:1.9rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--text-dark);
}
.notch{
  position:absolute;
  top:8px; left:50%; transform:translateX(-50%);
  width:34%; height:22px;
  background:#0A1615;
  border-radius:14px;
  z-index:5;
}
.statusbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.55rem 1.3rem .3rem;
  font-size:.72rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.statusbar .icons{ display:flex; gap:4px; align-items:center; }
.statusbar .bat{ width:20px; height:10px; border:1.2px solid var(--text-dark); border-radius:2px; position:relative; }
.statusbar .bat::after{ content:""; position:absolute; inset:1.5px; width:70%; background:var(--text-dark); border-radius:1px; }

.screen-area{
  flex:1;
  overflow-y:auto;
  padding:.4rem 1.1rem 1rem;
}
.screen-area::-webkit-scrollbar{ display:none; }

.tabbar{
  display:flex;
  border-top:1px solid var(--line);
  padding:.55rem .5rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  flex-shrink:0;
  background:var(--paper);
}
.tabbar button{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:.62rem;
  font-weight:700;
  color:#96A69E;
  cursor:pointer;
  padding:.2rem;
}
.tabbar button.active{ color:var(--ink); }
.tabbar svg{ width:20px; height:20px; }

/* ---------- generic screen typography ---------- */
.h1{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; margin:.6rem 0 .2rem; text-wrap:balance; }
.sub{ font-size:.85rem; color:var(--text-muted); margin:0 0 1rem; line-height:1.45; }
.field{ margin-bottom:.9rem; }
.field label{ display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#7C8C86; margin-bottom:.35rem; }
.field input, .field select{
  width:100%;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:.65rem .75rem;
  font-size:.9rem;
  font-family:inherit;
  color:var(--text-dark);
}
.field input:focus, .field select:focus{ outline:2px solid var(--teal); outline-offset:1px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  width:100%;
  border:none;
  border-radius:12px;
  padding:.8rem 1rem;
  font-size:.9rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:transform .1s, filter .15s;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--coral); color:#241110; box-shadow:0 10px 22px -10px rgba(255,106,77,.65); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:#fff; color:var(--text-dark); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:#C7CFC0; }
.btn-dark{ background:#111; color:#fff; }
.btn-danger{ background:#fff; color:#C0392B; border:1.5px solid #F0C4BC; }
.btn-danger:hover{ border-color:#E3A899; }
.btn-sm{ width:auto; padding:.4rem .8rem; font-size:.76rem; border-radius:8px; }
.stack{ display:flex; flex-direction:column; gap:.6rem; }

.startpad{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:2.4rem; gap:.3rem; }
.startpad .wm{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.startpad .wm svg{ width:34px; height:34px; }
.startpad .wm span{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; letter-spacing:-.01em; }
.startpad .tag{ color:var(--text-muted); font-size:.88rem; max-width:22ch; margin-bottom:2.2rem; }
.startpad .stack{ width:100%; }

.invite-preview{
  background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:.9rem 1rem; margin-bottom:1rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.invite-preview .name{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.invite-preview .meta{ font-size:.78rem; color:var(--text-muted); }
.chip{
  display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px;
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; width:fit-content;
}
.chip-host{ background:#FFE3D6; color:#B4441C; }
.chip-payer{ background:#DFF3EE; color:#1C7A6C; }
.chip-viewer{ background:#E8E8E8; color:#5A5A5A; }

/* ---------- card ---------- */
.card{
  position:relative;
  border-radius:18px;
  padding:1.15rem 1.2rem;
  color:#EFFBF8;
  background:
    var(--grain-strong),
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(155deg, #16504D 0%, #0D2C2A 60%, #0A1F1E 100%);
  background-blend-mode:overlay, normal, normal;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 18px 34px -14px rgba(6,26,24,.65);
  aspect-ratio:1.586/1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin-bottom:1rem;
}
.card::after{
  content:"";
  position:absolute;
  top:-60%; left:-20%;
  width:70%; height:220%;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform:rotate(8deg);
}
.card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.card .wordmark{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.card .netmark{ display:flex; }
.card .netmark .c1, .card .netmark .c2{ width:19px; height:19px; border-radius:50%; }
.card .netmark .c1{ background:var(--coral); }
.card .netmark .c2{ background:var(--gold); margin-left:-8px; opacity:.9; }
.card .num{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.14em; font-size:.92rem; font-variant-numeric:tabular-nums; opacity:.92; }
.card .bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:.6rem; }
.card .tripname{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.card .expiry{ font-size:.66rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.75; text-align:right; flex-shrink:0; }

.balance-block{ text-align:center; margin:.3rem 0 1.1rem; }
.balance-block .amt{ font-size:2.1rem; font-weight:800; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.balance-block .lbl{ font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.stat-strip{ display:flex; justify-content:center; gap:1.4rem; margin-bottom:1.1rem; }
.stat-strip div{ text-align:center; }
.stat-strip .v{ font-weight:800; font-size:.95rem; }
.stat-strip .k{ font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }

.wallet-btns{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:.8rem; }
.wallet-badge{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:11px; padding:.7rem; font-weight:700; font-size:.84rem; cursor:pointer; border:none; font-family:inherit;
}
.disabled-note{
  background:#F3EFE0; border:1px dashed #D8CBA0; color:#8A7638; font-size:.78rem; padding:.6rem .75rem; border-radius:10px; line-height:1.4;
}

.balance-summary{
  display:flex; justify-content:space-between; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin-bottom:.9rem;
}
.balance-summary div{ text-align:center; flex:1; }
.balance-summary .v{ font-weight:800; font-family:ui-monospace, monospace; font-variant-numeric:tabular-nums; font-size:.92rem; }
.balance-summary .k{ font-size:.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.balance-summary .pos{ color:#1C7A6C; }
.balance-summary .neg{ color:#B4441C; }

.day-label{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#8A9993; margin:1rem 0 .4rem; }
.txn{ display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; }
.txn:last-child{ border-bottom:none; }
.txn:hover{ background:rgba(0,0,0,.02); }
.txn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.txn .badge{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0; color:#fff; }
.txn .info{ flex:1; min-width:0; }
.txn .merchant{ font-weight:700; font-size:.86rem; }
.txn .meta{ font-size:.72rem; color:var(--text-muted); }
.txn .amt{ font-family:ui-monospace, monospace; font-weight:700; font-size:.86rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.txn .chev{ color:#B7C4BD; flex-shrink:0; }
.txn .chev svg{ width:14px; height:14px; }

.chev{ color:#B7C4BD; flex-shrink:0; }
.chev svg{ width:14px; height:14px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.55rem; }
.preset{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.35rem .75rem; font-size:.74rem; font-weight:700; font-family:inherit; cursor:pointer; color:var(--text-dark); }
.preset.on{ background:var(--teal); color:#06302B; border-color:var(--teal); }

.limit-panel{ background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:.8rem .9rem; margin-bottom:.8rem; }
.limit-row{ margin-bottom:.6rem; }
.limit-row:last-child{ margin-bottom:0; }
.limit-row .lbl{ display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; margin-bottom:.35rem; font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.limit-bar{ height:6px; background:var(--paper-2); border-radius:999px; overflow:hidden; }
.limit-bar-fill{ height:100%; background:var(--teal); border-radius:999px; }
.limit-bar-fill.warn{ background:var(--coral); }
.limit-tag{ font-size:.66rem; color:#8A6A1F; font-weight:700; background:#FCEFD0; display:inline-block; padding:.05rem .45rem; border-radius:6px; margin-top:.2rem; font-family:ui-monospace,monospace; }

.split-row{ display:flex; align-items:center; gap:.65rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.split-row:last-child{ border-bottom:none; }
.split-row .info{ flex:1; min-width:0; }
.split-row .name{ font-weight:700; font-size:.85rem; }
.split-row .dep{ font-size:.72rem; color:var(--text-muted); }
.split-row .dep.comp{ color:#1C7A6C; font-weight:700; }

.field select.field-select{ appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%235B6B66%22 d=%22M7 10l5 5 5-5z%22/></svg>') no-repeat right .6rem center/16px; }

.member-row{ display:flex; align-items:center; gap:.65rem; padding:.6rem 0; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; }
.member-row:last-child{ border-bottom:none; }
.member-row:hover{ background:rgba(0,0,0,.02); }
.member-row:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--ink-2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0; }
.member-row .info{ flex:1; }
.member-row .name{ font-weight:700; font-size:.86rem; }
.member-row .dep{ font-size:.7rem; color:var(--text-muted); font-family:ui-monospace,monospace; }
.member-row .credit-tag{ font-size:.68rem; color:#1C7A6C; font-weight:700; font-family:ui-monospace,monospace; }
.role-toggle{ display:flex; gap:4px; background:var(--paper-2); padding:2px; border-radius:8px; }
.role-toggle button{ border:none; background:transparent; font-size:.66rem; font-weight:800; padding:.28rem .5rem; border-radius:6px; cursor:pointer; font-family:inherit; color:#6B7B75; }
.role-toggle button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }

.invite-box{ display:flex; gap:.5rem; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:.55rem .7rem; align-items:center; margin-bottom:1rem; }
.invite-box code{ flex:1; font-size:.78rem; color:var(--text-muted); }

.closed-hero{ text-align:center; padding-top:1.2rem; }
.closed-hero .stub{ display:inline-flex; align-items:center; gap:.35rem; background:#DFF3EE; color:#1C7A6C; padding:.3rem .7rem; border-radius:999px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7rem; }
.summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:1rem 0; }
.summary-grid div{ background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:.6rem .3rem; text-align:center; }
.summary-grid .v{ font-weight:800; font-family:ui-monospace,monospace; font-size:.88rem; font-variant-numeric:tabular-nums; }
.summary-grid .k{ font-size:.6rem; color:var(--text-muted); text-transform:uppercase; }
table.refund{ width:100%; border-collapse:collapse; margin-bottom:1rem; font-size:.8rem; }
table.refund th{ text-align:left; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#8A9993; padding-bottom:.4rem; border-bottom:1px solid var(--line); }
table.refund td{ padding:.45rem 0; border-bottom:1px solid var(--line); }
table.refund td:last-child, table.refund th:last-child{ text-align:right; font-family:ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.sheet-overlay{ position:absolute; inset:0; background:rgba(10,20,18,.45); display:flex; align-items:flex-end; z-index:20; }
.sheet{ background:#fff; width:100%; border-radius:20px 20px 0 0; padding:1.1rem 1.2rem 1.4rem; }
.sheet .grabber{ width:36px; height:4px; background:var(--line); border-radius:2px; margin:0 auto .8rem; }
.bank-option{ display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--line); cursor:pointer; }
.bank-option .sq{ width:32px; height:32px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.72rem; }
.bank-option.selected{ background:#F6F9F4; margin:0 -1.2rem; padding-left:1.2rem; padding-right:1.2rem; }

fieldset{ border:none; padding:0; margin:0; }

@media (prefers-reduced-motion:no-preference){
  .screen-area{ animation:fadein .18s ease; }
  .sheet{ animation:sheetup .22s cubic-bezier(.2,.8,.3,1); }
  .txn, .member-row{ animation:itemin .28s ease backwards; }

  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(255,106,77,.7); }
  .btn-ghost:hover, .btn-danger:hover{ transform:translateY(-1px); }
  .wallet-badge:hover{ transform:translateY(-1px); filter:brightness(1.05); }
  .preset:hover{ transform:translateY(-1px); border-color:#C7CFC0; }
  .role-toggle button:hover{ color:var(--ink); }
  .tabbar button:hover{ color:var(--ink); }
  .stepper button:hover{ transform:translateX(2px); }

  .btn, .wallet-badge, .preset{ transition:transform .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease; }
}
@keyframes fadein{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
@keyframes sheetup{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
@keyframes itemin{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }

@media (max-width:760px){
  .layout{ flex-direction:column; align-items:center; }
  .side-panel{ width:100%; max-width:336px; }
  .stepper{ flex-direction:row; flex-wrap:wrap; }
  .stepper button{ flex:1 1 auto; }
}