/* OneSave mini app — styles */
:root {
  --navy: #041324;
  --navy-soft: #0A1E33;
  --navy-lift: #102942;
  --ink: #EAF2FA;
  --muted: #8AA0B8;
  --edge: rgba(138,160,184,.18);
  --edge-strong: rgba(138,160,184,.34);
  --cyan: #3AD3E4;
  --cyan-deep: #00A9C9;
  --cyan-soft: rgba(58,211,228,.12);
  --orange: #FF6A2B;
  --orange-soft: rgba(255,106,43,.14);
  --green: #46D39A;
  --green-soft: rgba(70,211,154,.14);
  --red: #FF5C6C;
  --red-soft: rgba(255,92,108,.14);
  --skeleton: rgba(138,160,184,.14);
  --skeleton-hi: rgba(138,160,184,.28);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 18px;
  --r-lg: 20px;
  --r-sm: 12px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --nav-h: 64px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --tg-top: var(--tg-content-safe-area-inset-top, 0px);
  --tg-bottom: var(--tg-safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --navy: #F1F6FB;
  --navy-soft: #FFFFFF;
  --navy-lift: #E6EEF7;
  --ink: #0B1B2E;
  --muted: #5E7390;
  --edge: rgba(11,27,46,.10);
  --edge-strong: rgba(11,27,46,.22);
  --cyan: #00A9C9;
  --cyan-deep: #0088A6;
  --cyan-soft: rgba(0,169,201,.12);
  --orange: #F25A1C;
  --orange-soft: rgba(242,90,28,.12);
  --green: #1DAE76;
  --green-soft: rgba(29,174,118,.12);
  --red: #E0394C;
  --red-soft: rgba(224,57,76,.12);
  --skeleton: rgba(11,27,46,.07);
  --skeleton-hi: rgba(11,27,46,.14);
  --shadow: 0 18px 50px rgba(11,27,46,.16);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--navy); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  overscroll-behavior-y: none;
  background-image:
    radial-gradient(900px 400px at 10% -10%, rgba(58,211,228,.10), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(255,106,43,.08), transparent 60%);
  background-repeat: no-repeat; background-attachment: fixed;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(900px 400px at 10% -10%, rgba(0,169,201,.12), transparent 60%),
    radial-gradient(700px 400px at 100% 0%, rgba(242,90,28,.08), transparent 60%);
}
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: var(--cyan); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Full screens (splash etc.) ---------- */
.screen.full {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px;
  background: var(--navy); z-index: 50;
  background-image: inherit;
}
.splash { text-align: center; max-width: 360px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.splash-logo { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 22px; }
.splash-logo img { width: 92px; height: 92px; border-radius: 26px; position: relative; z-index: 1;
  box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: logo-pop .7s var(--ease) both; }
.splash-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0;
  animation: ring 2.2s ease-out infinite; }
.splash-ring.r2 { animation-delay: .7s; border-color: var(--orange); }
.splash-logo.static .splash-ring { display: none; }
.splash-logo.danger img { box-shadow: 0 0 0 4px var(--red-soft), 0 16px 40px rgba(0,0,0,.4); }
.splash-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; animation: fade-up .5s var(--ease) .15s both; }
.splash-sub { color: var(--muted); margin-top: 6px; animation: fade-up .5s var(--ease) .25s both; }
.splash-sub.wide { margin-bottom: 22px; }
.splash-status { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: 14px;
  animation: fade-up .5s var(--ease) .4s both; }
.splash-error { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.splash-error h2 { font-size: 18px; }
.splash-error p { color: var(--muted); margin-bottom: 8px; }
@keyframes logo-pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fade-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--edge-strong);
  border-top-color: var(--cyan); animation: spin .8s linear infinite; display: inline-block; }
.spin.big { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Layout ---------- */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; padding-top: calc(var(--tg-top) + var(--sat));
  background: linear-gradient(var(--navy) 70%, transparent); }
.topbar-inner { max-width: 980px; margin: 0 auto; padding: 12px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  color: #04131F; background: linear-gradient(135deg, var(--cyan), var(--cyan-deep)); flex: none; overflow: hidden; }
.avatar { position: relative; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topbar-text { min-width: 0; }
.topbar-hello { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { color: var(--muted); font-size: 13px; }
.icon-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--muted);
  background: var(--navy-soft); border: 1px solid var(--edge); transition: color .16s, border-color .16s, transform .16s; }
.icon-btn:active { transform: scale(.94); }
.icon-btn:hover { color: var(--ink); border-color: var(--edge-strong); }

#main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 4px 16px calc(var(--nav-h) + var(--tg-bottom) + var(--sab) + 24px); }
.tab { animation: tab-in .22s var(--ease) both; }
.tab.leaving { animation: tab-out .18s var(--ease) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tab-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.page-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 10px; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.desk-2 { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
@media (min-width: 760px) {
  .desk-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
  .desk-2 > * { min-width: 0; }
  .page-title { font-size: 28px; }
}

/* Reveal cascade */
.reveal { animation: reveal .36s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Cards ---------- */
.card { background: var(--navy-soft); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 16px; position: relative; }
.card.lift { background: var(--navy-lift); }
.card.clickable { cursor: pointer; transition: border-color .16s, transform .16s; }
.card.clickable:active { transform: scale(.985); }
.card.clickable:hover { border-color: var(--edge-strong); }
.card-title { font-size: 16px; font-weight: 700; }
.card-sub { color: var(--muted); font-size: 13px; }

.balance-card { color: #04131F; border: none; overflow: hidden; padding: 20px 18px 18px;
  background: linear-gradient(135deg, #5EE6F3 0%, var(--cyan) 35%, var(--cyan-deep) 100%); }
.balance-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%;
  background: rgba(255,255,255,.18); filter: blur(2px); }
.balance-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: 40px; bottom: -120px; border-radius: 50%;
  background: rgba(4,19,36,.12); }
.balance-card > * { position: relative; z-index: 1; }
.balance-label { font-size: 13px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .08em; }
.balance-value { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.balance-value small { font-size: 18px; font-weight: 700; opacity: .8; }
.balance-meta { font-size: 13px; opacity: .85; margin-bottom: 16px; }
.balance-actions { display: flex; gap: 10px; }
.balance-actions .btn { flex: 1; }
.btn.on-gradient { background: rgba(4,19,36,.88); color: #EAF2FA; }
.btn.on-gradient.ghost { background: rgba(255,255,255,.28); color: #04131F; border: none; }

/* Tiles */
.tile { background: var(--navy-soft); border: 1px solid var(--edge); border-radius: var(--r); padding: 14px 14px 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.tile-label { font-size: 12.5px; color: var(--muted); font-weight: 600; padding-right: 24px; }
.tile-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.tile-value small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.tile-sub { font-size: 12px; color: var(--muted); }
.tile .bar { margin-top: 4px; }
.tile.accent { border-color: rgba(58,211,228,.35); background: linear-gradient(160deg, var(--cyan-soft), var(--navy-soft) 60%); }
.tile.warn { border-color: rgba(255,106,43,.4); }
.tile-icon { position: absolute; right: 12px; top: 12px; color: var(--muted); opacity: .6; }
.tile { position: relative; }

/* Progress bars */
.bar { height: 6px; border-radius: 100px; background: var(--navy-lift); overflow: hidden; }
:root[data-theme="light"] .bar { background: rgba(11,27,46,.08); }
.bar > i { display: block; height: 100%; width: 0; border-radius: 100px; background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
  transition: width .9s var(--ease); }
.bar.orange > i { background: linear-gradient(90deg, #FF9A6B, var(--orange)); }
.bar.green > i { background: linear-gradient(90deg, #7BE7BD, var(--green)); }
.bar.red > i { background: linear-gradient(90deg, #FF8B96, var(--red)); }
.bar-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px;
  font-weight: 700; font-size: 15px; line-height: 1.2; border: 1.5px solid transparent; transition: filter .16s, transform .12s, opacity .16s, border-color .16s, background .16s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn.primary { background: linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color: #04131F; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.orange { background: linear-gradient(135deg, #FF8A55, var(--orange)); color: #fff; }
.btn.ghost { background: var(--navy-lift); color: var(--ink); border-color: var(--edge); }
.btn.ghost:hover { border-color: var(--edge-strong); }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.sm { padding: 8px 12px; font-size: 13.5px; border-radius: 11px; }
.btn.big { padding: 15px 22px; font-size: 16px; border-radius: 16px; }
.btn.block { width: 100%; }
.btn .spin { border-top-color: currentColor; }

/* Chips / segmented */
.seg { display: inline-flex; background: var(--navy-soft); border: 1px solid var(--edge); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); transition: background .18s, color .18s; }
.seg button.active { background: var(--navy-lift); color: var(--ink); }
:root[data-theme="light"] .seg button.active { background: #fff; box-shadow: 0 1px 4px rgba(11,27,46,.12); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
  background: var(--navy-lift); color: var(--muted); white-space: nowrap; }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.cyan { background: var(--cyan-soft); color: var(--cyan); }
.badge.orange { background: var(--orange-soft); color: var(--orange); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.live .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Lists */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.list-item:last-child { border-bottom: none; }
.list-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-lift); flex: none; font-size: 17px; }
.list-icon.plus { background: var(--green-soft); color: var(--green); }
.list-icon.minus { background: var(--orange-soft); color: var(--orange); }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-sub { font-size: 12.5px; color: var(--muted); }
.list-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-val.plus { color: var(--green); }
.list-val.minus { color: var(--ink); }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--edge); color: var(--ink); font-weight: 600; }
.link-row:last-child { border-bottom: none; }
.link-row .chev { color: var(--muted); }

/* Quick actions */
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qa button { background: var(--navy-soft); border: 1px solid var(--edge); border-radius: var(--r); padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); transition: border-color .16s, transform .12s; text-align: center; line-height: 1.25; }
.qa button:active { transform: scale(.97); }
.qa .qa-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan); }
.qa .qa-ic.orange { background: var(--orange-soft); color: var(--orange); }
.qa .qa-ic.green { background: var(--green-soft); color: var(--green); }
.qa svg { width: 20px; height: 20px; }

/* Empty state */
.empty { text-align: center; padding: 36px 20px; }
.empty .empty-ic { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--navy-lift); color: var(--muted); }
.empty .empty-ic svg { width: 32px; height: 32px; }
.empty h3 { font-size: 18px; margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 320px; margin: 0 auto 18px; }

/* Bot cards */
.bot-card { padding: 14px 14px 12px; }
.bot-head { display: flex; align-items: center; gap: 12px; }
.bot-avatar { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #04131F; flex: none;
  background: linear-gradient(135deg, var(--orange), #FFB07A); }
.bot-avatar.off { filter: grayscale(1); opacity: .6; }
.bot-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-user { color: var(--muted); font-size: 13px; }
.bot-usage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.bot-usage div { background: var(--navy-lift); border-radius: 12px; padding: 8px 6px; text-align: center; }
:root[data-theme="light"] .bot-usage div { background: var(--navy); }
.bot-usage b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.bot-usage span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bot-actions { display: flex; gap: 8px; }
.bot-actions .btn { flex: 1; }

/* Switch */
.switch { position: relative; width: 48px; height: 28px; border-radius: 100px; background: var(--navy-lift); border: 1px solid var(--edge); flex: none; transition: background .2s, border-color .2s; }
:root[data-theme="light"] .switch { background: rgba(11,27,46,.12); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .22s var(--ease), background .2s; }
.switch.on { background: linear-gradient(135deg, var(--green), #2FB884); border-color: transparent; }
.switch.on::after { transform: translateX(20px); background: #fff; }
.switch:disabled { opacity: .5; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); opacity: .85; }
.input, textarea.input { width: 100%; background: var(--navy-lift); border: 1.5px solid var(--edge); border-radius: 14px; padding: 12px 14px; color: var(--ink); outline: none;
  transition: border-color .16s, box-shadow .16s; }
:root[data-theme="light"] .input { background: #fff; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.input::placeholder { color: var(--muted); opacity: .7; }
textarea.input { min-height: 90px; resize: vertical; }
.input.error { border-color: var(--red); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.field-row:last-child { border-bottom: none; }
.field-row .lbl { font-weight: 600; font-size: 14.5px; }
.field-row .sub { font-size: 12.5px; color: var(--muted); }
.form-error { background: var(--red-soft); color: var(--red); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 12px; }
.form-error a, .form-error button { color: inherit; font-weight: 700; text-decoration: underline; }

/* Steps */
.steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step .num { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 13px;
  background: var(--cyan-soft); color: var(--cyan); }
.step p { font-size: 14px; padding-top: 3px; }

/* Amount picker */
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.amounts button { background: var(--navy-lift); border: 1.5px solid var(--edge); border-radius: 14px; padding: 14px 8px; font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  transition: border-color .16s, background .16s, transform .12s; }
.amounts button small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.amounts button.active { border-color: var(--cyan); background: var(--cyan-soft); }
.amounts button:active { transform: scale(.96); }

/* Providers */
.providers { display: flex; flex-direction: column; gap: 10px; }
.provider { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--navy-lift); border: 1.5px solid var(--edge); text-align: left; width: 100%;
  transition: border-color .16s, transform .12s; }
.provider:active { transform: scale(.985); }
.provider:hover { border-color: var(--edge-strong); }
.provider .p-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cyan-soft); color: var(--cyan); font-size: 18px; flex: none; }
.provider .p-ic.orange { background: var(--orange-soft); color: var(--orange); }
.provider .p-title { font-weight: 700; }
.provider .p-desc { font-size: 12.5px; color: var(--muted); }

/* Plan cards */
.plan-current { padding: 18px; overflow: hidden; }
.plan-current .pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.plan-current .pc-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.plan-current .pc-sub { color: var(--muted); font-size: 13px; }
.plan-usage { display: flex; flex-direction: column; gap: 12px; }
.plan-usage .pu-lbl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.plan-usage .pu-lbl b { font-variant-numeric: tabular-nums; }
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.plan-card.featured { border-color: rgba(58,211,228,.5); background: linear-gradient(170deg, var(--cyan-soft), var(--navy-soft) 55%); }
.plan-card.featured::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--cyan), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan-card .pl-head { display: flex; justify-content: space-between; align-items: center; }
.plan-card .pl-title { font-size: 18px; font-weight: 800; }
.plan-card .pl-price { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan-card .pl-price small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.plan-card .pl-rub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.plan-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.plan-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; }
.plan-card li svg { width: 17px; height: 17px; flex: none; color: var(--green); margin-top: 2px; }
.plan-card .btn { margin-top: auto; }

/* Stats */
.chart-card { padding: 14px 14px 10px; }
.chart-card .chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chart-card .chart-title { font-weight: 700; font-size: 15px; }
.chart-wrap { position: relative; height: 200px; }
.chart-wrap.small { height: 150px; }
.endpoints .ep { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; }
.endpoints .ep .ep-name { width: 110px; flex: none; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.endpoints .ep .bar { flex: 1; }
.endpoints .ep b { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

/* Keys */
.key-card { padding: 18px; }
.token-box { display: flex; align-items: center; gap: 10px; background: var(--navy-lift); border: 1px dashed var(--edge-strong); border-radius: 14px; padding: 12px 14px; font-family: var(--mono); font-size: 14px; word-break: break-all; }
:root[data-theme="light"] .token-box { background: var(--navy); }
.token-box .tk { flex: 1; min-width: 0; }
.token-box.secret { color: var(--cyan); }
pre.code { margin: 0; background: #02090F; color: #CFE3F3; border-radius: 14px; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; border: 1px solid var(--edge); }
:root[data-theme="light"] pre.code { background: #0B1B2E; }
.key-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.key-stats div { background: var(--navy-lift); border-radius: 12px; padding: 10px 8px; text-align: center; }
:root[data-theme="light"] .key-stats div { background: var(--navy); }
.key-stats b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.key-stats span { font-size: 11px; color: var(--muted); }

/* Skeletons */
.sk { position: relative; overflow: hidden; background: var(--skeleton); border-radius: 10px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-hi), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk.line { height: 14px; margin: 6px 0; }
.sk.line.w40 { width: 40%; } .sk.line.w60 { width: 60%; } .sk.line.w80 { width: 80%; }
.sk.block { height: 120px; border-radius: var(--r-lg); }
.sk.tile { height: 96px; border-radius: var(--r); }
.sk.chart { height: 200px; border-radius: var(--r-lg); }
.sk.card { height: 180px; border-radius: var(--r-lg); }

/* ---------- Bottom nav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 12px calc(var(--tg-bottom) + var(--sab) + 8px);
  pointer-events: none; }
.bottom-nav-inner { max-width: 560px; margin: 0 auto; height: var(--nav-h); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; padding: 6px;
  background: rgba(10,30,51,.86); border: 1px solid var(--edge); border-radius: 22px; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow); pointer-events: auto; }
:root[data-theme="light"] .bottom-nav-inner { background: rgba(255,255,255,.86); }
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; color: var(--muted); font-size: 10.5px; font-weight: 600;
  transition: color .18s, background .18s, transform .12s; position: relative; }
.nav-btn svg { width: 22px; height: 22px; transition: transform .25s var(--ease); }
.nav-btn:active { transform: scale(.94); }
.nav-btn.active { color: var(--cyan); background: var(--cyan-soft); }
.nav-btn.active svg { transform: translateY(-1px); }

/* ---------- Sheet ---------- */
.sheet-root { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(2,9,15,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in .2s both; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 40px - var(--tg-top)); margin: 0 auto; max-width: 620px;
  background: var(--navy-soft); border-radius: 24px 24px 0 0; border: 1px solid var(--edge); border-bottom: none;
  display: flex; flex-direction: column; box-shadow: var(--shadow); animation: sheet-in .32s var(--ease) both; }
.sheet-root.closing .sheet { animation: sheet-out .22s var(--ease) both; }
.sheet-root.closing .sheet-backdrop { animation: fade-out .22s both; }
.sheet-grip { width: 40px; height: 4px; border-radius: 100px; background: var(--edge-strong); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 6px 20px; }
.sheet-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.sheet-body { padding: 8px 20px calc(20px + var(--tg-bottom) + var(--sab)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 760px) {
  .sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 24px; border-bottom: 1px solid var(--edge); max-height: calc(100% - 80px); animation: modal-in .26s var(--ease) both; }
  .sheet-root.closing .sheet { animation: modal-out .18s var(--ease) both; }
  .sheet-grip { display: none; }
  .sheet-head { padding-top: 18px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(-50%) scale(.96); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes modal-out { from { opacity: 1; transform: translateY(-50%) scale(1); } to { opacity: 0; transform: translateY(-50%) scale(.96); } }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn { flex: 1; }
.sheet-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 16px 0 8px; }
.sheet-section:first-child { margin-top: 4px; }
.sheet p.lead { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.waiting { text-align: center; padding: 20px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.waiting .spin.big { margin-bottom: 6px; }
.waiting .success { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; animation: logo-pop .5s var(--ease) both; }
.waiting .success svg { width: 32px; height: 32px; }

/* ---------- Modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,9,15,.62); animation: fade-in .18s both; }
.modal { position: relative; width: 100%; max-width: 360px; background: var(--navy-soft); border: 1px solid var(--edge); border-radius: 22px; padding: 22px 20px 18px; box-shadow: var(--shadow);
  animation: pop .24s var(--ease) both; }
.modal h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.modal p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }
.modal-root.closing .modal { animation: pop-out .16s var(--ease) both; }
.modal-root.closing .modal-backdrop { animation: fade-out .16s both; }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-out { from { opacity: 1; } to { opacity: 0; transform: scale(.95); } }

/* ---------- Toast ---------- */
.toast-root { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--tg-bottom) + var(--sab) + 20px); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--navy-lift); color: var(--ink); border: 1px solid var(--edge-strong); padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); max-width: 420px; display: flex; align-items: center; gap: 8px; animation: toast-in .3s var(--ease) both; }
.toast.ok { border-color: rgba(70,211,154,.5); }
.toast.err { border-color: rgba(255,92,108,.5); }
.toast.leaving { animation: toast-out .25s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- App enter / onboarding ---------- */
#app.enter { animation: fade-in .35s var(--ease) both; }
.screen.full.ob { display: block; place-items: normal; padding: 0; overflow: hidden; z-index: 55;
  background-image: radial-gradient(700px 420px at 50% -10%, rgba(58,211,228,.14), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(255,106,43,.10), transparent 60%); }
:root[data-theme="light"] .screen.full.ob { background-image: radial-gradient(700px 420px at 50% -10%, rgba(0,169,201,.14), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(242,90,28,.10), transparent 60%); }
.ob.leaving { animation: fade-out .3s var(--ease) both; }
.ob-inner { height: 100%; width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding: calc(var(--tg-top) + var(--sat) + 10px) 0 calc(var(--tg-bottom) + var(--sab) + 16px); }
.ob-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0; min-height: 44px; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 100px; background: var(--edge-strong); transition: width .3s var(--ease), background .3s; display: block; }
.ob-dots i.on { width: 22px; background: var(--cyan); }
.ob-skip { color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
.ob-skip:hover { color: var(--ink); }
.ob-viewport { flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.ob-track { display: flex; height: 100%; width: 100%; transition: transform .45s var(--ease); will-change: transform; }
.ob-track.drag { transition: none; }
.ob-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 8px 24px 0; min-width: 0; }
.ob-art { position: relative; height: min(42vh, 330px); min-height: 230px; display: grid; place-items: center; margin-bottom: 18px; }
.ob-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(50px); opacity: .55; pointer-events: none; }
.ob-glow.cyan { background: var(--cyan); } .ob-glow.orange { background: var(--orange); } .ob-glow.green { background: var(--green); }
:root[data-theme="light"] .ob-glow { opacity: .28; }
.ob-text { text-align: center; max-width: 400px; margin: 0 auto; }
.ob-text h2 { font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 10px;
  background: linear-gradient(120deg, var(--ink) 40%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ob-text p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.ob-slide.active .ob-art { animation: ob-pop .6s var(--ease) both; }
.ob-slide.active .ob-text h2 { animation: fade-up .5s var(--ease) .12s both; }
.ob-slide.active .ob-text p { animation: fade-up .5s var(--ease) .26s both; }
.ob-slide.active .ob-cta { animation: fade-up .5s var(--ease) .4s both; }
@keyframes ob-pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.ob-foot { padding: 14px 24px 0; }
.ob-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.ob-final .splash-logo { margin-bottom: 0; }
.ob-slide.active.ob-final .splash-logo img { animation: logo-pop .7s var(--ease) both; }

/* slide 1: phone */
.ob-phone { position: relative; width: 190px; height: 300px; border-radius: 30px; background: var(--navy-soft); border: 1.5px solid var(--edge-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 5px #02090F; padding: 26px 12px 14px; overflow: hidden; }
:root[data-theme="light"] .ob-phone { box-shadow: 0 30px 60px rgba(11,27,46,.25), inset 0 0 0 5px #0B1B2E; }
.ob-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 56px; height: 8px; border-radius: 100px; background: #02090F; }
.ob-chat { display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: flex-end; padding-bottom: 6px; }
.ob-bbl { max-width: 86%; padding: 8px 10px; border-radius: 14px; font-size: 11px; line-height: 1.3; }
.ob-bbl.in { align-self: flex-start; background: var(--navy-lift); color: var(--cyan); border-bottom-left-radius: 4px; display: flex; gap: 6px; align-items: center; word-break: break-all; }
.ob-link-ic { font-size: 12px; }
.ob-bbl.typing { align-self: flex-end; background: var(--cyan-soft); display: flex; gap: 4px; padding: 10px 12px; border-bottom-right-radius: 4px; }
.ob-bbl.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); display: block; }
.ob-vcard { align-self: flex-end; width: 92%; background: var(--navy-lift); border-radius: 14px; border-bottom-right-radius: 4px; overflow: hidden; border: 1px solid var(--edge); transform-origin: 100% 100%; }
.ob-vthumb { height: 76px; background: linear-gradient(135deg, #FF8A55, var(--orange) 60%, #C8431A); position: relative; display: grid; place-items: center; }
.ob-play { width: 0; height: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 3px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.ob-vdur { position: absolute; right: 6px; bottom: 6px; background: rgba(2,9,15,.7); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 6px; font-weight: 700; }
.ob-vmeta { padding: 7px 9px 8px; font-size: 10.5px; }
.ob-vmeta b { display: block; margin-bottom: 5px; }
.ob-vbar { display: block; height: 3px; border-radius: 10px; background: var(--edge); overflow: hidden; }
.ob-vbar i { display: block; height: 100%; width: 100%; background: var(--cyan); transform-origin: 0 50%; }
.ob-slide.active .ob-bbl.in { animation: ob-c-in 6s var(--ease) infinite; }
.ob-slide.active .ob-bbl.typing { animation: ob-c-typing 6s var(--ease) infinite; }
.ob-slide.active .ob-bbl.typing i:nth-child(1) { animation: ob-dot 1s ease-in-out infinite; }
.ob-slide.active .ob-bbl.typing i:nth-child(2) { animation: ob-dot 1s ease-in-out .15s infinite; }
.ob-slide.active .ob-bbl.typing i:nth-child(3) { animation: ob-dot 1s ease-in-out .3s infinite; }
.ob-slide.active .ob-vcard { animation: ob-c-video 6s var(--ease) infinite; }
.ob-slide.active .ob-vbar i { animation: ob-c-bar 6s linear infinite; }
@keyframes ob-c-in { 0% { opacity: 0; transform: translateX(-30px) scale(.9); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes ob-c-typing { 0%, 14% { opacity: 0; transform: translateY(10px) scale(.8); } 20%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ob-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes ob-c-video { 0%, 44% { opacity: 0; transform: translate(40px, 60px) rotate(8deg) scale(.6); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes ob-c-bar { 0%, 56% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }

/* slide 2: channel */
.ob-chan { position: relative; width: 250px; background: var(--navy-soft); border: 1px solid var(--edge-strong); border-radius: 22px; padding: 16px; box-shadow: var(--shadow); z-index: 1; }
.ob-chan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ob-chan-av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #04131F; background: linear-gradient(135deg, var(--green), #2FB884); flex: none; }
.ob-chan-head b { display: block; font-size: 15px; }
.ob-chan-head span { font-size: 12.5px; color: var(--muted); }
.ob-chan-head em { font-style: normal; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; font-size: 14px; }
.ob-bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.ob-bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--green), rgba(70,211,154,.35)); transform-origin: 50% 100%; display: block; }
.ob-bars i:nth-child(1) { height: 22%; } .ob-bars i:nth-child(2) { height: 30%; } .ob-bars i:nth-child(3) { height: 28%; } .ob-bars i:nth-child(4) { height: 44%; }
.ob-bars i:nth-child(5) { height: 52%; } .ob-bars i:nth-child(6) { height: 66%; } .ob-bars i:nth-child(7) { height: 78%; } .ob-bars i:nth-child(8) { height: 100%; }
.ob-slide.active .ob-bars i { animation: ob-bar 4.5s var(--ease) infinite; animation-delay: calc(var(--d, 0) * 1ms); }
.ob-bars i:nth-child(1) { --d: 0; } .ob-bars i:nth-child(2) { --d: 90; } .ob-bars i:nth-child(3) { --d: 180; } .ob-bars i:nth-child(4) { --d: 270; }
.ob-bars i:nth-child(5) { --d: 360; } .ob-bars i:nth-child(6) { --d: 450; } .ob-bars i:nth-child(7) { --d: 540; } .ob-bars i:nth-child(8) { --d: 630; }
@keyframes ob-bar { 0% { transform: scaleY(.08); opacity: .4; } 30%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.08); opacity: .4; } }
.ob-arrow { position: absolute; right: -14px; top: -16px; width: 56px; height: 56px; padding: 12px; border-radius: 18px; color: #04131F;
  background: linear-gradient(135deg, var(--green), #2FB884); box-shadow: 0 12px 30px rgba(70,211,154,.4); }
.ob-slide.active .ob-arrow { animation: ob-bob 2.4s ease-in-out infinite; }
@keyframes ob-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
.ob-joins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ob-join { position: absolute; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-soft); border: 1px solid rgba(70,211,154,.35); padding: 4px 9px; border-radius: 100px; opacity: 0; white-space: nowrap; }
:root[data-rm="1"] .ob-join { opacity: 1; }
.ob-join.j1 { left: 2%; bottom: 6%; } .ob-join.j2 { right: 2%; bottom: 2%; } .ob-join.j3 { left: 4%; top: 6%; }
.ob-slide.active .ob-join { animation: ob-join 4.5s var(--ease) infinite; }
.ob-slide.active .ob-join.j2 { animation-delay: 1.5s; } .ob-slide.active .ob-join.j3 { animation-delay: 3s; }
@keyframes ob-join { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 10%, 30% { opacity: 1; transform: none; } 42%, 100% { opacity: 0; transform: translateY(-16px); } }

/* slide 3: money falling into the wallet (transform/opacity only) */
.ob-money { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ob-coin, .ob-bill { position: absolute; top: -8%; left: 50%; opacity: 0; display: grid; place-items: center; font-weight: 800; will-change: transform, opacity; }
.ob-coin { width: 34px; height: 34px; border-radius: 50%; font-size: 16px; color: #7A4A00;
  background: radial-gradient(circle at 32% 28%, #FFF3C4, #FFD25A 45%, #E9A21B 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), inset 0 -3px 0 rgba(150,90,0,.35), 0 6px 14px rgba(233,162,27,.35); }
.ob-coin.gold { color: #fff; font-size: 17px; background: radial-gradient(circle at 32% 28%, #FFE08A, #FFB321 50%, #F08A00 100%); }
.ob-coin.ton { color: #fff; font-size: 14px; background: radial-gradient(circle at 32% 28%, #9BE7FF, #2FA9E8 50%, #0A6FC2 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 6px 14px rgba(47,169,232,.35); }
.ob-bill { width: 54px; height: 30px; border-radius: 6px; font-size: 15px; color: #0F5A3A;
  background: linear-gradient(135deg, #B8F5D6, #5FD9A3 55%, #2FB884); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 5px rgba(15,90,58,.18), 0 8px 16px rgba(47,184,132,.3); }
.ob-bill b, .ob-coin b { font-weight: 800; }
.ob-coin.c1 { left: 20%; } .ob-coin.c2 { left: 44%; } .ob-coin.c3 { left: 70%; } .ob-coin.c4 { left: 34%; width: 28px; height: 28px; }
.ob-bill.b1 { left: 56%; } .ob-bill.b2 { left: 12%; } .ob-bill.b3 { left: 74%; }
:root[data-rm="1"] .ob-coin, :root[data-rm="1"] .ob-bill { opacity: 1; }
:root[data-rm="1"] .ob-coin.c1 { transform: translateY(70px) rotate(-8deg); } :root[data-rm="1"] .ob-coin.c2 { transform: translateY(40px); }
:root[data-rm="1"] .ob-coin.c3 { transform: translateY(78px) rotate(10deg); } :root[data-rm="1"] .ob-coin.c4 { transform: translateY(102px); }
:root[data-rm="1"] .ob-bill.b1 { transform: translateY(58px) rotate(12deg); } :root[data-rm="1"] .ob-bill.b2 { transform: translateY(46px) rotate(-14deg); } :root[data-rm="1"] .ob-bill.b3 { transform: translateY(26px) rotate(-6deg); }
.ob-slide.active .ob-coin { animation: ob-coin-fall 2.6s cubic-bezier(.4,0,.8,.5) infinite; }
.ob-slide.active .ob-bill { animation: ob-bill-fall 3.2s cubic-bezier(.35,0,.7,.5) infinite; }
.ob-slide.active .ob-coin.c2 { animation-delay: .7s; animation-duration: 2.3s; } .ob-slide.active .ob-coin.c3 { animation-delay: 1.3s; }
.ob-slide.active .ob-coin.c4 { animation-delay: 1.9s; animation-duration: 2.2s; }
.ob-slide.active .ob-bill.b1 { animation-delay: .3s; } .ob-slide.active .ob-bill.b2 { animation-delay: 1.5s; animation-duration: 3.5s; } .ob-slide.active .ob-bill.b3 { animation-delay: 2.3s; animation-duration: 3s; }
@keyframes ob-coin-fall { 0% { transform: translateY(0) rotate(0) scale(1); opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; transform: translateY(190px) rotate(240deg) scale(1); } 86%, 100% { transform: translateY(232px) rotate(300deg) scale(.4); opacity: 0; } }
@keyframes ob-bill-fall { 0% { transform: translateY(0) rotate(-18deg); opacity: 0; } 10% { opacity: 1; } 30% { transform: translateY(70px) rotate(14deg); } 52% { transform: translateY(140px) rotate(-12deg); } 72% { opacity: 1; transform: translateY(195px) rotate(8deg); } 86%, 100% { transform: translateY(232px) rotate(0) scale(.45); opacity: 0; } }
.ob-wallet { position: relative; width: 240px; margin-top: 90px; border-radius: 22px; padding: 22px 20px 18px; color: #fff; text-align: left;
  background: linear-gradient(145deg, #FF8A55, var(--orange) 55%, #C8431A); box-shadow: 0 24px 50px rgba(255,106,43,.35); }
.ob-wallet-flap { position: absolute; left: 14px; right: 14px; top: -10px; height: 26px; border-radius: 14px 14px 6px 6px; background: linear-gradient(180deg, #FFA379, #FF8A55); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.ob-wallet-lbl { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; }
.ob-wallet-val { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; }
.ob-wallet-val em { font-style: normal; font-variant-numeric: tabular-nums; }
.ob-wallet-src { display: flex; gap: 6px; margin-top: 10px; }
.ob-wallet-src i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: rgba(255,255,255,.2); white-space: nowrap; }
.ob-slide.active .ob-wallet { animation: ob-wallet-pulse 2.8s ease-in-out infinite; }
@keyframes ob-wallet-pulse { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.03); } }

/* slide 4: identity morph */
.ob-msg { width: 270px; background: var(--navy-soft); border: 1px solid var(--edge-strong); border-radius: 22px; padding: 14px 16px 12px; box-shadow: var(--shadow); text-align: left; position: relative; z-index: 1; }
.ob-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ob-morph-av { position: relative; width: 36px; height: 36px; border-radius: 12px; overflow: hidden; flex: none; }
.ob-morph-av img { width: 100%; height: 100%; display: block; border-radius: 12px; position: absolute; inset: 0; }
.ob-morph-av b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--orange), #FFB07A); opacity: 0; }
.ob-morph-name { font-weight: 700; font-size: 15px; position: relative; display: block; height: 22px; flex: 1; }
.ob-morph-name span, .ob-msg-sig span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ob-morph-name .b, .ob-msg-sig .b { opacity: 0; color: var(--orange); }
.ob-msg-file { display: flex; align-items: center; gap: 10px; background: var(--navy-lift); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.ob-msg-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--cyan-soft); color: var(--cyan); display: grid; place-items: center; font-size: 13px; flex: none; }
.ob-msg-file b { display: block; font-size: 13.5px; } .ob-msg-file small { color: var(--muted); font-size: 11.5px; }
.ob-msg-cap { font-size: 13px; margin-bottom: 6px; }
.ob-msg-sig { position: relative; height: 20px; font-size: 13px; font-weight: 700; color: var(--cyan); }
:root[data-rm="1"] .ob-morph-av b, :root[data-rm="1"] .ob-morph-name .b, :root[data-rm="1"] .ob-msg-sig .b { opacity: 1; }
:root[data-rm="1"] .ob-morph-av img, :root[data-rm="1"] .ob-morph-name .a, :root[data-rm="1"] .ob-msg-sig .a { opacity: 0; }
.ob-slide.active .ob-morph-av img, .ob-slide.active .ob-morph-name .a, .ob-slide.active .ob-msg-sig .a { animation: ob-morph-a 5s var(--ease) infinite; }
.ob-slide.active .ob-morph-av b, .ob-slide.active .ob-morph-name .b, .ob-slide.active .ob-msg-sig .b { animation: ob-morph-b 5s var(--ease) infinite; }
@keyframes ob-morph-a { 0%, 36% { opacity: 1; transform: none; filter: blur(0); } 46%, 88% { opacity: 0; transform: translateY(-8px); filter: blur(3px); } 98%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ob-morph-b { 0%, 38% { opacity: 0; transform: translateY(8px); filter: blur(3px); } 48%, 86% { opacity: 1; transform: none; filter: blur(0); } 96%, 100% { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@media (max-height: 640px) { .ob-art { height: 36vh; min-height: 200px; } .ob-text h2 { font-size: 23px; } .ob-phone { transform: scale(.85); } }

/* ---------- Dashboard: earnings card ---------- */
.earn-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-color: rgba(255,106,43,.35); background: linear-gradient(160deg, var(--orange-soft), var(--navy-soft) 65%); cursor: pointer; }
.earn-card .earn-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, #FF8A55, var(--orange)); color: #fff; flex: none; font-size: 20px; }
.earn-card .earn-val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.earn-card .earn-val small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.earn-card .earn-sub { font-size: 12.5px; color: var(--muted); }
.earn-card .chev { color: var(--muted); }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.hint.card-hint { margin: -2px 0 12px; }

/* ---------- Bots: avatar, meta ---------- */
.bot-avatar { position: relative; overflow: hidden; }
.bot-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bot-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bot-meta .sep { opacity: .5; }
.bot-earned { color: var(--orange); font-weight: 700; }
.counter-lbl { display: flex; justify-content: space-between; }
.counter-lbl .cnt { font-weight: 500; font-variant-numeric: tabular-nums; }
.counter-lbl .cnt.over { color: var(--red); }
.note { display: flex; gap: 10px; align-items: flex-start; background: var(--navy-lift); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
:root[data-theme="light"] .note { background: var(--navy); }
.note .btn { flex: none; }

/* ---------- Earnings tab ---------- */
.earn-hero { padding: 18px; overflow: hidden; border-color: rgba(255,106,43,.35); background: linear-gradient(150deg, rgba(255,106,43,.22), var(--navy-soft) 60%); }
.earn-hero .eh-lbl { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.earn-hero .eh-val { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 4px; }
.earn-hero .eh-val small { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.earn-hero .eh-sub { font-size: 13px; color: var(--muted); }
.bybot .list-item { padding: 10px 0; }
.bybot .bot-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: right; font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); font-weight: 700; padding: 6px 3px; border-bottom: 1px solid var(--edge); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { padding: 9px 3px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td:first-child { font-weight: 600; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary .chev { color: var(--muted); transition: transform .25s var(--ease); }
details.card[open] > summary .chev { transform: rotate(90deg); }
details.card .det-body { margin-top: 12px; }

/* ---------- Crypto income (iteration 3) ---------- */
.earn-card .earn-crypto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 3px; font-weight: 800; font-size: 16px; color: var(--green); font-variant-numeric: tabular-nums; }
.earn-card .earn-crypto .zero { color: var(--muted); }
.earn-card .earn-crypto em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.earn-hero .eh-crypto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); }
.earn-hero .eh-cval { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 3px; color: var(--green); font-variant-numeric: tabular-nums; }
.earn-hero .eh-cval .zero { color: var(--muted); }
.list-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.list-val.crypto { color: var(--green); font-size: 13px; }
.bot-crypto { color: var(--green); font-weight: 700; }

/* ---------- Bot settings: payments ---------- */
.pay-box { border-top: 1px solid var(--edge); margin-bottom: 4px; }
.form-warn { background: var(--orange-soft); color: var(--orange); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 8px 0 12px; line-height: 1.4; }
.crypto-box { margin-top: 8px; border: 1px solid var(--edge-strong); border-radius: var(--r); padding: 14px 14px 4px; background: linear-gradient(160deg, var(--green-soft), transparent 55%); }
.cb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cb-head b { display: block; font-size: 15px; }
.cb-logo { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, #2FA9E8, #0A6FC2); flex: none; }
.cb-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cb-st.on { color: var(--green); }
.cb-st .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cb-connected .hint { margin-bottom: 10px; }
.cb-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.cb-btns .btn { flex: 1; }
.cb-howto { background: var(--navy-lift); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
:root[data-theme="light"] .cb-howto { background: var(--navy); }
.cb-howto-title { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.cb-howto .steps { margin-bottom: 12px; gap: 8px; }
.cb-howto .step p { font-size: 13px; }
.cb-token-row { display: flex; gap: 8px; }
.cb-token-row .input { flex: 1; min-width: 0; font-size: 13px; }
.cb-token-row .btn { flex: none; }
.crypto-box .field-row { border-top: 1px solid var(--edge); border-bottom: none; }
.cb-opts { border-top: 1px solid var(--edge); padding-top: 12px; }
select.input { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer; }
select.input, :root[data-theme] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238AA0B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }

/* ---------- More tab ---------- */
.acct { display: flex; align-items: center; gap: 14px; }
.acct .avatar { width: 56px; height: 56px; border-radius: 18px; font-size: 22px; }
.acct .acct-name { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.acct .acct-sub { color: var(--muted); font-size: 13px; }
.admin-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(135deg, #FF8A55, var(--orange) 60%, #D9521E); box-shadow: 0 14px 34px rgba(255,106,43,.3); transition: transform .14s, filter .16s; }
.admin-btn:active { transform: scale(.985); }
.admin-btn .ab-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.admin-btn .ab-ic svg { width: 22px; height: 22px; }
.admin-btn b { display: block; font-size: 16px; }
.admin-btn span { font-size: 12.5px; opacity: .9; }
.admin-btn .chev { margin-left: auto; opacity: .85; }
.link-row.btnlike { width: 100%; text-align: left; background: none; }
.link-row .lr-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sheet { transform: none; }
  @media (min-width: 760px) { .sheet { transform: translateY(-50%); } }
}
:root[data-rm="1"] *, :root[data-rm="1"] *::before, :root[data-rm="1"] *::after { animation: none !important; transition: none !important; }