@font-face {
  font-family:Unbounded;
  src:url('/assets/fonts/Unbounded.ttf') format('truetype');
  font-weight:200 900;
  font-display:swap;
}

:root[data-accent=blue] {
  --accent:#8ed9ff;
  --accent-ink:#142832;
  --accent-muted:#345565;
  --accent-light:#d7f2ff;
  --accent-hover:#b9e8ff;
  --accent-panel:#24333c;
  --accent-border:#567b8f;
  --accent-orbit:#567e94;
  --accent-orbit-dim:#2b424e;
  --accent-filter:invert(83%) sepia(29%) saturate(689%) hue-rotate(169deg);
}

:root[data-accent=lavender] {
  --accent:#c9b5ff;
  --accent-ink:#261c3e;
  --accent-muted:#514569;
  --accent-light:#eee4ff;
  --accent-hover:#e0d2ff;
  --accent-panel:#30283e;
  --accent-border:#7d6d99;
  --accent-orbit:#8573a5;
  --accent-orbit-dim:#41364e;
  --accent-filter:invert(79%) sepia(35%) saturate(674%) hue-rotate(211deg);
}

.color-dot {
  width:20px;
  height:20px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--accent);
}

.color-options {
  display:grid;
  gap:10px;
  margin:20px 0;
}

.color-option {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:70px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  text-align:left;
  font-size:11px;
}

.color-option[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--accent-panel);
}

.color-option .swatch {
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--swatch);
  flex-shrink:0;
}

.color-option .icon {
  margin-left:auto;
  opacity:0;
}

.color-option[aria-pressed=true] .icon {
  opacity:1;
}

:root {
  color-scheme:dark;
  --bg:#101110;
  --panel:#232823;
  --raised:#2e352c;
  --line:#465040;
  --text:#f2f4eb;
  --muted:#b6bfaf;
  --accent:#d4f77c;
  --accent-ink:#18200d;
  --accent-muted:#4c5b33;
  --accent-light:#f0ffd1;
  --accent-hover:#e2ffa4;
  --accent-panel:#2a3220;
  --accent-border:#6c7a54;
  --accent-orbit:#789447;
  --accent-orbit-dim:#404c2b;
  --accent-filter:invert(91%) sepia(63%) saturate(405%) hue-rotate(21deg);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --safe-top:0px;
  --safe-bottom:0px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Unbounded,sans-serif;
  font-size:12px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button,a {
  touch-action:manipulation;
}

button {
  color:inherit;
  border:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button:disabled {
  opacity:.6;
  cursor:not-allowed;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

button {
  transition:transform 140ms var(--ease-out),background-color 160ms ease,border-color 160ms ease;
}

button:active:not(:disabled) {
  transform:scale(.97);
}

[hidden] {
  display:none!important;
}

h1,h2,p {
  margin:0;
}

h1 {
  font-size:clamp(29px,5vw,45px);
  letter-spacing:-1.6px;
  line-height:1.3;
  font-weight:500;
}

h2 {
  font-size:16px;
  letter-spacing:-.5px;
  font-weight:500;
}

h1:focus {
  outline:0;
}

.muted {
  color:var(--muted);
  font-size:11px;
  line-height:1.9;
  margin-top:15px;
}

.caption {
  color:var(--muted);
  font-size:9px;
}

.eyebrow {
  font-size:9px;
  letter-spacing:1.7px;
  color:var(--muted);
  font-weight:500;
  margin-bottom:14px;
}

.accent {
  color:var(--accent);
}

.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  filter:invert(1);
  opacity:.9;
}

.shell {
  max-width:1040px;
  margin:auto;
  padding:0 44px 140px;
}

.header {
  height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  margin-bottom:38px;
  padding-top:var(--safe-top);
}

.brand {
  font-size:38px;
  font-weight:700;
  letter-spacing:-3px;
  display:flex;
  align-items:center;
  line-height:1;
}

.brand-dot {
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  margin:19px 14px 0 4px;
}

.brand small {
  font-size:10px;
  letter-spacing:2px;
  font-weight:400;
  color:var(--muted);
  margin-top:7px;
}

.header-right {
  display:flex;
  align-items:center;
  gap:23px;
}

.live {
  font-size:9px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}

.live i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}

.avatar {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent-panel);
  color:var(--accent);
  font-weight:500;
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:34px;
  overflow:hidden;
}

.orb {
  width:220px;
  height:190px;
  position:relative;
  display:grid;
  place-items:center;
  flex-shrink:0;
  margin-right:35px;
}

.orb span {
  font-size:90px;
  font-weight:600;
  font-style:italic;
  transform:rotate(-16deg);
  color:var(--accent);
  line-height:1;
}

.orbit {
  border:1px solid var(--accent-orbit);
  position:absolute;
  border-radius:50%;
  width:210px;
  height:105px;
}

.one {
  transform:rotate(-38deg);
}

.two {
  transform:rotate(22deg);
  border-color:var(--accent-orbit-dim);
}

.three {
  transform:rotate(80deg);
  border-color:var(--accent-orbit-dim);
}

.dashboard-grid {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:16px;
}

.balance-card {
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:22px;
  padding:25px 26px 22px;
}

.card-top,.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.card-top {
  font-size:11px;
}

.balance-card .icon {
  filter:none;
}

.balance-value {
  display:flex;
  gap:10px;
  align-items:baseline;
  margin:23px 0 24px;
  font-size:35px;
  letter-spacing:-1.4px;
  line-height:1.2;
}

.currency {
  font-size:23px;
  opacity:.55;
}

.balance-card .caption {
  color:var(--accent-muted);
  font-size:8px;
  max-width:125px;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:48px;
  border-radius:13px;
  padding:12px 18px;
  font-size:10px;
  font-weight:500;
}

.button .icon {
  width:16px;
  height:16px;
}

.light {
  background:var(--accent-light);
  color:var(--accent-ink);
}

.primary {
  background:var(--accent);
  color:var(--accent-ink);
}

.primary .icon {
  filter:none;
}

.secondary {
  background:var(--raised);
  border:1px solid var(--line);
}

.full {
  width:100%;
}

.new-order {
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:22px;
  padding:23px 26px;
  background:var(--panel);
}

.new-order p {
  font-size:9px;
  color:var(--muted);
  margin-top:8px;
}

.new-order .eyebrow {
  font-size:8px;
  display:block;
  margin:10px 0 6px;
}

.new-order h2 {
  font-size:22px;
}

.tile-icon {
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border:1px solid var(--accent-border);
  border-radius:50%;
  background:var(--accent-panel);
}

.tile-icon .icon {
  width:22px;
  height:22px;
  filter:var(--accent-filter);
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:32px 0 16px;
}

.section-head h2 {
  display:flex;
  gap:12px;
  align-items:center;
}

.platforms {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.platform {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:var(--panel);
  border:1px solid var(--line);
  padding:20px;
  border-radius:17px;
  min-height:160px;
  text-align:left;
}

.platform-logo {
  height:34px;
  display:flex;
  align-items:center;
  margin-bottom:15px;
}

.platform-logo .icon {
  width:26px;
  height:26px;
}

.platform strong {
  font-weight:500;
  font-size:13px;
}

.platform-description {
  font-size:8px;
  color:var(--muted);
  margin-top:6px;
}

.platform .end {
  position:absolute;
  right:17px;
  top:22px;
  width:17px;
  height:17px;
}

.wordmark {
  font-weight:600;
  font-size:23px;
  letter-spacing:-2px;
  color:#8b9286;
}

.pill {
  position:absolute;
  right:14px;
  top:22px;
  font-size:7px;
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:20px;
  color:var(--muted);
}

.upcoming {
  background:#151715;
}

.text-button {
  background:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  color:var(--muted);
  min-height:44px;
  padding:0;
}

.text-button .icon {
  width:14px;
  height:14px;
}

.counter {
  font-size:10px;
  color:var(--muted);
  background:var(--raised);
  padding:3px 8px;
  border-radius:7px;
}

.order-list {
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}

.empty {
  text-align:center;
  padding:28px 16px;
  color:var(--muted);
}

.empty>.icon {
  opacity:.45;
  margin-bottom:8px;
}

.empty p {
  color:var(--text);
  font-size:11px;
}

.empty span {
  display:block;
  font-size:9px;
  margin-top:6px;
}

.help-strip {
  margin-top:23px;
  width:100%;
  display:flex;
  align-items:center;
  text-align:left;
  gap:15px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:none;
}

.help-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--panel);
}

.help-strip strong {
  font-size:11px;
  font-weight:400;
}

.help-strip small {
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:5px;
}

.help-strip>.icon {
  margin-left:auto;
  width:17px;
  height:17px;
}

.navigation {
  position:fixed;
  bottom:max(22px,var(--safe-bottom),env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  width:430px;
  padding:7px;
  border:1px solid #393e34;
  border-radius:22px;
  background:#20231fed;
  box-shadow:0 12px 45px #0006;
  backdrop-filter:blur(16px);
}

.navigation button {
  position:relative;
  z-index:1;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none;
  min-height:57px;
  padding:7px 4px;
  font-size:8px;
  color:var(--muted);
}

.navigation button[aria-current] {
  color:var(--accent);
}

.navigation button[aria-current] .icon {
  filter:var(--accent-filter);
}

#nav-indicator {
  position:absolute;
  top:7px;
  left:7px;
  width:calc((100% - 14px)/4);
  height:57px;
  border-radius:15px;
  background:var(--accent-panel);
  transform:translateX(0);
}

.connection {
  padding:13px 16px;
  border-radius:12px;
  background:#24291e;
  border:1px solid #444d35;
  font-size:9px;
  margin:-10px 0 26px;
  color:#d1d8c5;
}

.connection button,.connection a {
  background:none;
  color:var(--accent);
  font:inherit;
  text-decoration:underline;
  margin-left:10px;
  min-height:32px;
}

.page>h1 {
  margin-bottom:10px;
}

.catalog-tools {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin:28px 0 20px;
}

.platform-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
}

.search {
  display:flex;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  max-width:270px;
}

.search input {
  background:none;
  border:0;
  min-width:0;
  width:100%;
  padding:12px;
  font-size:10px;
  color:var(--text);
}

.search .icon {
  width:16px;
  height:16px;
  opacity:.5;
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.service-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:23px;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:170px;
  gap:14px;
}

.service-card h2 {
  font-size:13px;
  line-height:1.7;
}

.service-card p {
  color:var(--muted);
  font-size:9px;
}

.service-card .service-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:auto;
}

.service-price {
  color:var(--accent);
  font-size:16px;
}

.service-price small {
  font-size:8px;
  color:var(--muted);
}

.service-card .icon {
  width:18px;
  height:18px;
}

.square {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--raised);
  border-radius:12px;
  flex-shrink:0;
}

.profile-card {
  margin:28px 0 18px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  text-align:center;
  background:var(--panel);
}

.large {
  width:70px;
  height:70px;
  font-size:26px;
  margin:0 auto 16px;
}

.profile-balance {
  font-size:32px;
  margin:23px 0;
}

.profile-actions {
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}

.action-row {
  width:100%;
  display:flex;
  gap:15px;
  align-items:center;
  padding:18px 20px;
  background:var(--panel);
  min-height:68px;
  text-align:left;
  font-size:11px;
}

.action-row+.action-row {
  border-top:1px solid var(--line);
}

.action-row>.icon:last-child {
  margin-left:auto;
  width:16px;
  height:16px;
  opacity:.45;
}

.footnote {
  text-align:center;
  font-size:8px;
  color:var(--muted);
  margin:30px 0;
}

.order-row {
  display:flex;
  align-items:center;
  text-align:left;
  gap:16px;
  padding:20px;
  width:100%;
  background:var(--panel);
}

.order-row+.order-row {
  border-top:1px solid var(--line);
}

.order-mark {
  display:grid;
  place-items:center;
  background:#292f23;
  border-radius:12px;
  min-width:42px;
  height:42px;
}

.order-row strong {
  font-size:10px;
  font-weight:500;
}

.order-row small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-top:5px;
}

.order-row .order-meta {
  margin-left:auto;
  text-align:right;
  flex-shrink:0;
}

.status {
  font-size:7px;
  padding:4px 8px;
  border-radius:6px;
  background:#30382a;
  color:#c0d6a1;
  display:inline-block;
}

.status.warn {
  background:#3d3323;
  color:#edd2a2;
}

.status.bad {
  background:#402727;
  color:#f3b5ae;
}

.order-row .amount {
  font-size:10px;
  margin-top:5px;
}

#more-orders {
  margin-top:15px;
}

dialog {
  color:var(--text);
  background:#1c211b;
  border:1px solid var(--line);
  border-radius:25px;
  width:min(480px,calc(100% - 30px));
  max-height:85dvh;
  padding:25px;
  margin:auto;
  overflow-y:auto;
  overscroll-behavior:contain;
}

dialog::backdrop {
  background:#0009;
}

body:has(dialog[open]) {
  overflow:hidden;
}

.sheet-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.sheet-heading .eyebrow {
  margin:0;
}

.sheet-heading .square {
  width:35px;
  height:35px;
}

.sheet-heading .icon {
  width:17px;
  height:17px;
}

#sheet-title {
  font-size:22px;
  margin-bottom:18px;
  line-height:1.5;
}

.sheet-handle {
  display:none;
}

label.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:9px;
  color:var(--muted);
  margin:20px 0;
}

input,select,textarea {
  color:var(--text);
  background:var(--panel);
  border:1px solid #42473d;
  border-radius:12px;
  padding:15px;
  width:100%;
  font-size:12px;
  min-height:49px;
}

textarea {
  resize:vertical;
  min-height:125px;
}

input::placeholder,textarea::placeholder {
  color:#a2ad98;
  font-size:10px;
}

input[type=number] {
  appearance:textfield;
}

input::-webkit-inner-spin-button {
  appearance:none;
}

select {
  cursor:pointer;
}

.field small {
  font-size:8px;
}

.form-error {
  color:#ffbbb2;
  font-size:10px;
  padding:12px;
  background:#382421;
  border-radius:10px;
  margin-top:15px;
}

.form-hint {
  font-size:9px;
  color:var(--muted);
  margin:12px 0;
  line-height:1.9;
}

.summary {
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:15px;
  margin:20px 0;
}

.summary-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  padding:8px 0;
  overflow-wrap:anywhere;
}

.summary-row span {
  color:var(--muted);
}

.summary-row strong {
  font-weight:400;
  text-align:right;
}

.summary-total {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.summary-total strong {
  font-size:23px;
  font-weight:500;
  letter-spacing:-1px;
}

.payment-methods {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.method {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:8px;
  min-height:90px;
}

.method[aria-pressed=true] {
  background:var(--accent-panel);
  border-color:var(--accent-border);
  color:var(--accent);
}

.method .icon {
  width:23px;
  height:23px;
}

.method small {
  font-size:7px;
  color:var(--muted);
}

.presets {
  display:flex;
  gap:8px;
  margin-bottom:18px;
}

.presets button {
  flex:1;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 4px;
  font-size:9px;
  min-height:40px;
}

.invoice-mark {
  display:grid;
  place-items:center;
  margin:15px auto 20px;
  background:var(--accent-panel);
  width:65px;
  height:65px;
  border-radius:20px;
}

.invoice-mark .icon {
  width:28px;
  height:28px;
}

.invoice-amount {
  text-align:center;
  font-size:32px;
  letter-spacing:-1px;
}

.invoice-status {
  text-align:center;
  font-size:9px;
  color:var(--muted);
  margin:8px 0 22px;
}

.invoice-link {
  margin:10px 0;
}

.copy-link {
  word-break:break-all;
  font-size:8px;
  color:var(--muted);
  display:block;
  text-align:center;
  padding:12px;
}

.toast {
  position:fixed;
  bottom:115px;
  left:50%;
  z-index:20;
  transform:translate(-50%,10px);
  opacity:0;
  pointer-events:none;
  max-width:calc(100% - 32px);
  width:max-content;
  padding:13px 18px;
  background:#e4edda;
  color:#1c2612;
  border-radius:12px;
  font-size:10px;
  transition:opacity 180ms ease,transform 180ms var(--ease-out);
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0);
}

.digits {
  display:inline-flex;
  align-items:baseline;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  letter-spacing:inherit;
}

.digit-slot {
  display:inline-block;
  width:1ch;
  position:relative;
  height:1.18em;
  line-height:1.18;
  overflow:hidden;
  vertical-align:bottom;
}

.digit-track {
  display:block;
}

.digit-track>span {
  display:block;
  height:1.18em;
  line-height:1.18;
}

.digit-static {
  display:inline-block;
  min-width:.25em;
}

.premium-list {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin:12px 0;
}

.premium-list button {
  min-height:44px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:10px;
  font-size:10px;
}

.premium-list button[aria-pressed=true] {
  border-color:var(--accent);
  color:var(--accent);
}

.loading {
  opacity:.65;
  pointer-events:none;
}

.busy-label {
  display:inline-block;
  width:10px;
  height:10px;
  border:1px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .75s linear infinite;
  margin-right:8px;
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

@media(hover:hover) and (pointer:fine) {
  button:hover:not(:disabled) {
    background-color:#2c3227;
  }
  .primary:hover:not(:disabled),.light:hover:not(:disabled) {
    background-color:var(--accent-hover);
  }
  .new-order:hover,.platform.telegram:hover,.service-card:hover:not(:disabled) {
    border-color:var(--accent-border);
  }
  .action-row:hover {
    background:var(--raised);
  }
}

@media(max-width:640px) {
  .shell {
    padding:0 20px 130px;
  }
  .header {
    height:90px;
    margin-bottom:27px;
  }
  .brand {
    font-size:34px;
  }
  .header-right .live {
    display:none;
  }
  .header-right {
    gap:0;
  }
  .intro {
    padding-bottom:27px;
  }
  .intro h1 {
    font-size:29px;
    letter-spacing:-1.1px;
  }
  .intro .muted {
    font-size:9px;
  }
  .orb {
    width:108px;
    height:135px;
    margin:0 -12px 0 0;
  }
  .orb span {
    font-size:56px;
  }
  .orbit {
    width:112px;
    height:63px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.2px;
  }
  .dashboard-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .balance-card {
    padding:22px;
    border-radius:20px;
  }
  .balance-value {
    font-size:37px;
    margin:24px 0;
  }
  .balance-card .caption {
    max-width:none;
  }
  .new-order {
    padding:18px 20px;
    flex-direction:row-reverse;
    align-items:center;
    gap:12px;
    min-height:103px;
  }
  .new-order .eyebrow {
    margin:0 0 5px;
    font-size:7px;
  }
  .new-order h2 {
    font-size:17px;
  }
  .new-order p {
    font-size:8px;
    margin-top:5px;
  }
  .tile-icon {
    flex-shrink:0;
    width:39px;
    height:39px;
  }
  .section-head {
    margin-top:28px;
  }
  .section-head h2 {
    font-size:13px;
  }
  .section-head>.caption {
    display:none;
  }
  .platforms {
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .platform.telegram {
    grid-column:span 2;
    min-height:95px;
    display:grid;
    grid-template-columns:40px 1fr;
    gap:2px 13px;
    padding:18px;
  }
  .platform.telegram .platform-logo {
    grid-row:span 2;
    align-self:center;
    margin:0;
  }
  .platform.telegram strong {
    align-self:end;
  }
  .platform.telegram .platform-description {
    margin:0;
    font-size:8px;
  }
  .platform.telegram .end {
    right:18px;
    top:37px;
  }
  .platform.upcoming {
    min-height:135px;
    padding:16px;
  }
  .platform-description {
    font-size:7px;
  }
  .platform-logo {
    height:24px;
    margin-bottom:10px;
  }
  .platform strong {
    font-size:11px;
  }
  .help-strip {
    padding:15px 12px;
    gap:10px;
  }
  .help-strip strong {
    font-size:10px;
  }
  .help-strip small {
    font-size:7px;
  }
  .help-icon {
    width:34px;
    height:36px;
    flex-shrink:0;
  }
  .navigation {
    width:calc(100% - 32px);
    max-width:430px;
    bottom:max(15px,var(--safe-bottom),env(safe-area-inset-bottom));
    border-radius:20px;
  }
  .service-grid {
    grid-template-columns:1fr;
  }
  .service-card {
    min-height:150px;
  }
  .catalog-tools {
    align-items:stretch;
    flex-direction:column;
  }
  .search {
    max-width:none;
  }
  .order-row {
    padding:16px 12px;
    gap:9px;
  }
  .order-mark {
    min-width:32px;
    height:36px;
  }
  .order-mark .icon {
    width:17px;
    height:17px;
  }
  .order-row strong {
    font-size:9px;
  }
  .order-row small {
    font-size:7px;
  }
  .order-meta .status {
    font-size:6px;
    max-width:108px;
  }
  .order-row .amount {
    font-size:9px;
  }
  .order-row>div:nth-child(2) {
    min-width:0;
  }
  .profile-card {
    padding:25px 16px;
  }
  .profile-balance {
    font-size:30px;
  }
  .action-row {
    font-size:10px;
    padding:17px 15px;
    gap:12px;
  }
  .profile-card h2 {
    overflow-wrap:anywhere;
  }
  dialog {
    width:100%;
    max-width:520px;
    margin:auto auto 0;
    max-height:calc(100dvh - max(32px,var(--safe-top)));
    border-radius:25px 25px 0 0;
    padding:12px 22px max(28px,var(--safe-bottom),env(safe-area-inset-bottom));
  }
  .sheet-handle {
    display:block;
    width:33px;
    height:4px;
    border-radius:4px;
    background:#454a40;
    margin:0 auto 14px;
  }
  #sheet-title {
    font-size:21px;
  }
  .summary-total strong {
    font-size:21px;
  }
  .connection {
    font-size:8px;
  }
  .text-button {
    font-size:8px;
  }
}

@media(max-width:360px) {
  .shell {
    padding-inline:15px;
  }
  .intro h1 {
    font-size:26px;
  }
  .orb {
    width:80px;
    opacity:.7;
  }
  .orbit {
    width:90px;
  }
  .card-bottom {
    gap:5px;
  }
  .balance-card .caption {
    font-size:7px;
    max-width:100px;
  }
  .method {
    font-size:7px;
  }
  .action-row {
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  button:active:not(:disabled) {
    transform:none;
  }
  .toast {
    transform:translateX(-50%);
  }
  .orb {
    transform:none!important;
  }
}