:root {
  --bg:#f6f8f7;
  --card:#fff;
  --text:#192f30;
  --muted:#576e70;
  --line:#dce7e4;
  --accent:#096f69;
  --accent-soft:#e8f4ef;
  --ok:#176f53;
  --danger:#aa303c;
  --radius:20px;
  --tabbar-h:76px;
  color-scheme:light;
}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
html,body {
  margin:0;
  background:var(--bg);
  color:var(--text);
}
body {
  font:15px/1.55 "Avenir Next","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  min-height:100vh;
}
button,input,select {
  font:inherit;
  color:inherit;
}
a {
  color:var(--accent);
  text-decoration:none;
}
button,a,input,select {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #36a89b;
  outline-offset:4px;
}
[hidden] {
  display:none!important;
}
h1 {
  font-size:clamp(26px,3vw,40px);
  font-weight:650;
  line-height:1.2;
  letter-spacing:-.04em;
  margin:4px 0 24px;
  overflow-wrap:anywhere;
}
h2 {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.015em;
  margin:24px 0 12px;
}
p {
  margin:0 0 16px;
}
.view {
  width:100%;
  padding:28px clamp(20px,4vw,64px) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}
.brandbar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px clamp(20px,4vw,64px) 0;
  color:var(--text);
  font-size:20px;
  font-weight:750;
  letter-spacing:-.05em;
}
.brandmark {
  width:32px;
  height:32px;
  background:var(--accent);
  border-radius:10px;
  display:grid;
  place-items:center;
  color:white;
}
.icon {
  width:22px;
  height:22px;
  flex:none;
  vertical-align:middle;
}
.muted {
  color:var(--muted);
}
.small {
  font-size:13px;
}
.center {
  text-align:center;
}
.row,.spread {
  display:flex;
  align-items:center;
  gap:12px;
}
.spread {
  justify-content:space-between;
  flex-wrap:wrap;
}
.grow {
  flex:1;
  min-width:0;
}
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:16px;
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
.page-heading h1 {
  margin-bottom:0;
}
.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:var(--accent);
}
.home-grid {
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:20px;
}
.capture-card {
  padding:32px;
  border-radius:var(--radius);
  border:1px solid #cbded8;
  background:#eaf4ef;
  position:relative;
}
.capture-symbol {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:var(--accent);
  border:1px solid #bdd9d0;
  border-radius:16px;
  background:#f7fcf9;
}
.capture-symbol .icon {
  width:30px;
  height:30px;
}
.capture-card h2 {
  font-size:26px;
  line-height:1.25;
  letter-spacing:-.035em;
  margin:20px 0 10px;
}
.capture-card p {
  color:#466361;
  max-width:48ch;
}
.hero {
  background:#fff;
  color:var(--text);
}
.balance-card {
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px;
}
.big {
  font-size:64px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.065em;
  font-variant-numeric:tabular-nums;
  margin:14px 0 8px;
}
.balance-unit {
  font-size:17px;
  font-weight:500;
  letter-spacing:0;
  margin-inline-start:8px;
}
.balance-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:22px;
  font-weight:650;
  font-size:14px;
}
.section-heading {
  margin-top:16px;
}
.section-heading a {
  padding:12px 0;
}
.chip {
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border:1px solid #d0e4dc;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:#f1f8f4;
  color:var(--accent);
}
.chip.pro {
  background:#f9f3e5;
  color:#795b1b;
  border-color:#e7d6ab;
}
.notice {
  background:#fbf4df;
  color:#735717;
  border-radius:12px;
  padding:12px;
  font-size:13px;
  margin-top:14px;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:12px;
  padding:12px 18px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  min-height:48px;
  text-align:center;
  line-height:1.35;
  transition:background .15s,transform .15s;
}
.btn:hover {
  background:#085c57;
}
.btn:active {
  transform:translateY(1px);
}
.btn.block {
  width:100%;
}
.btn.ghost,.btn.light {
  background:#f2f7f5;
  color:var(--accent);
  border-color:var(--line);
}
.btn.ghost:hover {
  background:#e5f1eb;
}
.btn.danger {
  background:#fff4f4;
  color:var(--danger);
  border-color:#efd6d7;
}
.btn:disabled {
  opacity:.5;
  cursor:default;
  transform:none;
}
.btn.small {
  min-height:44px;
  padding:8px 14px;
  font-size:13px;
}
.list {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.item {
  display:flex;
  gap:14px;
  padding:19px 22px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  align-items:center;
  min-width:0;
}
.item:last-child {
  border-bottom:0;
}
a.item:hover {
  background:#f4f9f6;
}
.item .ico {
  width:44px;
  height:48px;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent);
  display:grid;
  place-items:center;
  flex:none;
}
.item .title {
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item .sub {
  color:var(--muted);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
}
.amount {
  font-weight:650;
  font-size:13px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.amount.plus {
  color:var(--ok);
}
.empty {
  text-align:center;
  color:var(--muted);
  padding:40px 24px;
}
.empty-mark {
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  background:var(--accent-soft);
  color:var(--accent);
}
.empty-mark .icon {
  width:30px;
  height:30px;
}
.tabs {
  display:flex;
  gap:4px;
  padding:5px;
  border:1px solid var(--line);
  background:#edf3f0;
  border-radius:14px;
  margin:24px 0 16px;
  overflow:auto;
}
.tabs button {
  flex:1;
  border:0;
  background:transparent;
  padding:12px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  min-height:44px;
}
.tabs button.on {
  background:white;
  color:var(--accent);
  box-shadow:0 1px 5px #19392b12;
}
.text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  unicode-bidi:plaintext;
  font-size:16px;
  line-height:1.85;
  max-width:90ch;
  min-height:100px;
}
.toolbar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.toolbar .btn {
  flex:1 1 auto;
}
.toggle {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:18px;
  min-height:44px;
}
.toggle input {
  width:20px;
  height:20px;
  accent-color:var(--accent);
}
.grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.pack {
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  border:1px solid var(--line);
  text-align:start;
  min-height:110px;
}
.pack:hover {
  border-color:var(--accent);
  background:#f4faf7;
}
.pack .min {
  font-size:24px;
  font-weight:650;
  letter-spacing:-.04em;
}
.pack .price {
  color:var(--accent);
  font-weight:600;
  margin-top:6px;
}
.pro-card {
  border:1px solid #b9d8cd;
  background:#edf6f1;
}
.pro-card .price {
  font-size:24px;
  font-weight:650;
}
.field {
  display:flex;
  gap:10px;
  margin-top:12px;
}
.input,select.input {
  flex:1;
  min-width:0;
  border:1px solid #bdcfca;
  border-radius:12px;
  padding:12px;
  background:#fff;
  min-height:48px;
}
.tabbar {
  position:fixed;
  inset-inline:0;
  bottom:0;
  min-height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  display:flex;
  background:#fffffff5;
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
  z-index:5;
}
.tabbar a {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 2px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  text-align:center;
  border-radius:12px;
  overflow-wrap:anywhere;
}
.tabbar a.on {
  color:var(--accent);
  background:var(--accent-soft);
}
.toast {
  position:fixed;
  inset-inline:20px;
  bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  background:#173b36;
  color:#fff;
  padding:14px 18px;
  border-radius:14px;
  text-align:center;
  z-index:10;
  max-width:520px;
  margin:auto;
  box-shadow:0 8px 32px #16392d22;
}
.skeleton {
  height:90px;
  border-radius:var(--radius);
  background:linear-gradient(90deg,#e5ede9,#f3f7f4,#e5ede9);
  background-size:200% 100%;
  animation:sk 1.4s infinite;
  margin-bottom:16px;
}
@keyframes sk {
  to {
    background-position:-200% 0;
  }
}
.doc p {
  margin:0 0 18px;
  white-space:pre-wrap;
  max-width:85ch;
}
.back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-weight:600;
  min-height:44px;
}
.back .arr {
  font-size:26px;
}
[dir=rtl] .back .arr,[dir=rtl] .balance-link .icon {
  transform:scaleX(-1);
}
.space-top {
  margin-top:16px;
}
.space-top-sm {
  margin-top:12px;
}
.space-top-xs {
  margin-top:8px;
}
.translation-chips {
  margin:0 0 16px;
}
.full-width {
  width:100%;
}
.clipboard-helper {
  position:fixed;
  opacity:0;
  pointer-events:none;
}
.brandbar .icon {
  width:22px;
  height:22px;
}
@media(min-width:900px) {
  .brandbar {
    padding-top:32px;
  }
  .view {
    padding-bottom:40px;
    padding-inline-start:calc(230px + 4vw);
  }
  .brandbar {
    padding-inline-start:calc(230px + 4vw);
  }
  .tabbar {
    inset-inline-start:0;
    inset-inline-end:auto;
    top:0;
    bottom:0;
    width:230px;
    border-top:0;
    border-inline-end:1px solid var(--line);
    flex-direction:column;
    justify-content:center;
    gap:12px;
    padding:24px;
  }
  .tabbar a {
    flex:0;
    min-height:54px;
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    font-size:14px;
    padding:14px;
  }
  .toast {
    inset-inline-start:250px;
    bottom:24px;
  }
  .toolbar .btn {
    flex:0 1 auto;
  }
  .grid {
    gap:16px;
  }
}
@media(max-width:600px) {
  .view {
    padding-top:24px;
  }
  .home-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .capture-card {
    padding:24px;
  }
  .capture-card h2 {
    font-size:25px;
  }
  .capture-card .btn {
    width:100%;
  }
  .balance-card {
    padding:22px;
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:14px;
  }
  .balance-card>.big {
    grid-column:2;
    grid-row:1/3;
    font-size:42px;
    margin:0;
    align-self:center;
  }
  .balance-link,.balance-card>.notice {
    grid-column:1/-1;
  }
  .balance-link {
    margin-top:16px;
    padding-top:14px;
  }
  .page-heading {
    align-items:flex-start;
  }
  .page-heading .chip {
    margin-top:22px;
  }
  .card {
    padding:20px;
  }
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pack {
    padding:18px;
  }
  .item {
    padding:16px;
  }
  .item .ico {
    width:38px;
    height:44px;
  }
  .field {
    flex-wrap:wrap;
  }
  .field .input {
    flex:1 1 150px;
  }
  .field .btn {
    flex:1 1 120px;
  }
  .big {
    font-size:48px;
  }
  .text {
    font-size:15px;
  }
  .tabbar {
    gap:2px;
  }
  .pro-card .spread {
    align-items:flex-start;
  }
  .tabs button {
    padding:11px 10px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}