:root{
  --bg:#0b0c10;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --surface:rgba(255,255,255,.07);
  --surface2:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.10);
  --blue:#0a84ff;
  --green:#30d158;
  --r-xl:28px;
  --r-lg:22px;
  --shadow-app:0 28px 80px rgba(0,0,0,.55);
  --shadow-card:0 14px 28px rgba(0,0,0,.28);
  --pad:16px;
}

html[data-theme="light"]{
  --bg:#f2f2f7;
  --text:rgba(17,17,17,.94);
  --muted:rgba(17,17,17,.58);
  --surface:rgba(255,255,255,.92);
  --surface2:rgba(255,255,255,.74);
  --stroke:rgba(0,0,0,.08);
  --shadow-app:0 22px 60px rgba(0,0,0,.12);
  --shadow-card:0 10px 20px rgba(0,0,0,.10);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,Segoe UI,Roboto,Arial;
  letter-spacing:-.02em;
  color:var(--text);
  background:
    radial-gradient(1000px 720px at 15% -10%, rgba(10,132,255,.18), transparent 60%),
    radial-gradient(1000px 720px at 90% 0%, rgba(48,209,88,.10), transparent 60%),
    var(--bg);
}

.app{
  width:min(430px, 100%);
  margin:22px auto 14px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow:var(--shadow-app);
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px var(--pad) 14px;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(18px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.logoImg{
  width:76px;
  height:76px;
  object-fit:contain;
  border-radius:18px;
  background:transparent;
}

.brandText{ min-width:0; }
.title{
  font-size:22px;
  font-weight:950;
  line-height:1.05;
}
.subtitle{
  margin-top:5px;
  font-size:13px;
  font-weight:650;
  color:var(--muted);
}

/* Right controls */
.headerRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.certBadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  color:var(--green);
  border:1px solid rgba(48,209,88,.34);
  background:rgba(48,209,88,.12);
  white-space:nowrap;
}

.certBadge .tick{ font-size:12px; line-height:1; }

/* Theme button */
.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--text);
  font-weight:950;
  font-size:13px;
  backdrop-filter: blur(16px);
  box-shadow:0 10px 18px rgba(0,0,0,.12) inset;
  cursor:pointer;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 5px rgba(10,132,255,.16);
}

/* Main */
.main{
  padding:14px var(--pad) 0;
}

/* WHAT WE DO */
.what{
  margin-bottom:14px;
  padding:16px 14px;
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-card);
}

.whatImg{
  width:100%;
  max-height:190px;
  object-fit:contain;
  border-radius:18px;
  display:block;
  margin-bottom:12px;
}

.whatTitle{
  margin:0 0 10px;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.03em;
}

.whatText{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  line-height:1.45;
}
.whatText b{
  color:var(--text);
  font-weight:900;
}

/* Form group */
.sheet{
  border-radius:var(--r-lg);
  border:1px solid var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.sheetTitle{
  padding:16px 14px 0;
  font-size:18px;
  font-weight:950;
}

.sheetSub{
  padding:6px 14px 14px;
  font-size:12px;
  color:var(--muted);
  font-weight:650;
}

.form{
  display:flex;
  flex-direction:column;
}

.field{
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .field{
  border-top:1px solid rgba(0,0,0,.06);
}

.field span{
  display:block;
  font-size:12px;
  font-weight:850;
  color:var(--muted);
  margin-bottom:8px;
}

.field input{
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--surface2);
  color:var(--text);
  font-size:16px;
  font-weight:850;
  outline:none;
}

.field input:focus{
  border-color:rgba(10,132,255,.55);
  box-shadow:0 0 0 6px rgba(10,132,255,.14);
}

.calc{
  padding:10px 14px 16px;
  font-size:12px;
  color:var(--muted);
  font-weight:750;
}

/* Stats */
.cards{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding-bottom:12px;
}

.card{
  border-radius:20px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:var(--shadow-card);
  padding:14px 14px 12px;
}

.kicker{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
}

.big{
  margin-top:8px;
  font-size:30px;
  font-weight:950;
  letter-spacing:-.03em;
}

/* Bottom bar */
.bottom{
  position:sticky;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px var(--pad);
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.10));
  backdrop-filter: blur(18px);
}

html[data-theme="light"] .bottom{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.04));
}

.bottomTitle{
  font-size:14px;
  font-weight:950;
}

.bottomSub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:650;
}

/* Send button + press animation */
.send{
  border:none;
  border-radius:18px;
  padding:14px 18px;
  min-width:128px;
  background:linear-gradient(180deg, rgba(10,132,255,1), rgba(10,132,255,.86));
  color:#fff;
  font-weight:950;
  font-size:15px;
  box-shadow:0 18px 34px rgba(10,132,255,.22);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

.send:disabled{
  opacity:.55;
  filter:saturate(.7);
  cursor:not-allowed;
  box-shadow:none;
}

.send.pressing{ transform:scale(.985); }

/* Modals */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  z-index:9999;
}
.modal.show{ display:flex; }

.modalCard{
  width:min(360px, 100%);
  border-radius:22px;
  border:1px solid var(--stroke);
  background:var(--surface);
  box-shadow:var(--shadow-app);
  padding:18px;
  text-align:center;
}

.tickWrap{
  width:56px;
  height:56px;
  margin:2px auto 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(48,209,88,.14);
  border:1px solid rgba(48,209,88,.35);
  color:var(--green);
  font-size:28px;
  font-weight:950;
}

.modalTitle{
  font-size:16px;
  font-weight:950;
}

.modalSub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:650;
}

.modalBtn{
  margin-top:14px;
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--surface2);
  color:var(--text);
  font-weight:950;
  cursor:pointer;
}

/* Receipt */
.receipt{
  margin-top:12px;
  text-align:left;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--surface2);
  padding:12px;
}

.receiptRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .receiptRow{
  border-top:1px solid rgba(0,0,0,.06);
}
.receiptRow:first-child{ border-top:none; }

.receiptRow span{
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}

.receiptRow b{
  font-size:12px;
  font-weight:950;
  max-width:60%;
  text-align:right;
  word-break:break-word;
}