:root {
  --bg:
    var(--tg-theme-bg-color,#f4f5f7);

  --card:
    var(--tg-theme-secondary-bg-color,#fff);

  --text:
    var(--tg-theme-text-color,#111318);

  --hint:
    var(--tg-theme-hint-color,#7c818b);

  --accent:
    var(--tg-theme-button-color,#111318);

  --accent-text:
    var(--tg-theme-button-text-color,#fff);

  --link:
    var(--tg-theme-link-color,#3978f6);

  --danger:#e5484d;
  --success:#22a06b;
  --warning:#e69500;

  --radius:22px;
  --shadow:
    0 12px 35px rgba(0,0,0,.06);
}

* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body {
  margin:0;
  min-height:100%;
}

body {
  background:
    radial-gradient(
      circle at top right,
      color-mix(
        in srgb,
        var(--link) 10%,
        transparent
      ),
      transparent 34%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Tahoma,
    sans-serif;

  padding:
    env(safe-area-inset-top)
    0
    calc(
      92px +
      env(safe-area-inset-bottom)
    );
}

button,
input {
  font:inherit;
}

button {
  cursor:pointer;
}

.hidden {
  display:none !important;
}

.topbar {
  min-height:74px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 16px;

  position:sticky;
  top:0;
  z-index:20;

  background:
    color-mix(
      in srgb,
      var(--bg) 88%,
      transparent
    );

  backdrop-filter:
    blur(22px);
}

.brand-box {
  display:flex;
  align-items:center;
  gap:11px;
}

.logo {
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      var(--text),
      color-mix(
        in srgb,
        var(--text) 55%,
        var(--link)
      )
    );

  color:var(--bg);

  font-weight:900;
  font-size:21px;

  box-shadow:var(--shadow);
}

.brand {
  font-weight:900;
  font-size:20px;
  letter-spacing:-.4px;
}

.muted {
  color:var(--hint);
  font-size:12px;
}

.role-badge {
  padding:7px 11px;

  border-radius:999px;

  background:
    color-mix(
      in srgb,
      var(--link) 13%,
      transparent
    );

  color:var(--link);

  font-size:11px;
  font-weight:800;
}

.page {
  padding:8px 15px 18px;
  animation:
    pageIn .18s ease;
}

@keyframes pageIn {
  from {
    opacity:.3;
    transform:
      translateY(5px);
  }

  to {
    opacity:1;
    transform:none;
  }
}

.page-title {
  margin:
    7px 2px 15px;
}

.page-title h1 {
  margin:0 0 4px;
  font-size:23px;
}

.hero {
  position:relative;
  overflow:hidden;

  min-height:166px;

  padding:23px;

  border-radius:28px;

  background:
    linear-gradient(
      140deg,
      #0c0e13,
      #292d37
    );

  color:#fff;

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.15);
}

.hero::after {
  content:"";

  position:absolute;

  width:170px;
  height:170px;

  left:-50px;
  bottom:-90px;

  border-radius:50%;

  background:
    rgba(255,255,255,.08);
}

.hero-label {
  opacity:.68;
  font-size:12px;
}

.hero-value {
  font-weight:900;
  font-size:29px;
  margin-top:7px;
}

.hero-footer {
  margin-top:24px;

  display:flex;
  justify-content:space-between;
  gap:12px;

  font-size:12px;
  opacity:.8;
}

.quick-grid,
.stats-grid {
  display:grid;
  grid-template-columns:
    repeat(2,1fr);
  gap:10px;

  margin-top:13px;
}

.quick-card,
.stat-card {
  border:0;

  min-height:103px;

  padding:15px;

  border-radius:20px;

  background:var(--card);
  color:var(--text);

  text-align:right;

  box-shadow:var(--shadow);
}

.quick-icon {
  font-size:24px;
  margin-bottom:11px;
}

.quick-card strong {
  display:block;
}

.quick-card small {
  display:block;
  margin-top:4px;
  color:var(--hint);
}

.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:
    22px 3px
    11px;
}

.section-header h2 {
  margin:0;
  font-size:18px;
}

.link-button {
  border:0;
  background:none;
  color:var(--link);
  font-weight:700;
}

.list {
  display:grid;
  gap:10px;
}

.card {
  border-radius:var(--radius);
  background:var(--card);
  padding:16px;
  box-shadow:var(--shadow);
}

.account-top,
.row-between {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.account-user {
  font-size:16px;
  font-weight:900;
}

.status {
  padding:6px 9px;
  border-radius:999px;

  font-size:10px;
  font-weight:900;
}

.status.active {
  color:var(--success);
  background:
    color-mix(
      in srgb,
      var(--success) 12%,
      transparent
    );
}

.status.disabled,
.status.failed {
  color:var(--danger);
  background:
    color-mix(
      in srgb,
      var(--danger) 12%,
      transparent
    );
}

.status.pending,
.status.reserved,
.status.processing {
  color:var(--warning);
  background:
    color-mix(
      in srgb,
      var(--warning) 13%,
      transparent
    );
}

.progress {
  height:8px;
  border-radius:999px;
  overflow:hidden;

  margin-top:17px;

  background:
    color-mix(
      in srgb,
      var(--hint) 14%,
      transparent
    );
}

.progress-value {
  height:100%;
  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--link),
      #66a3ff
    );
}

.traffic-row {
  display:flex;
  justify-content:space-between;

  margin-top:9px;

  font-size:11px;
  color:var(--hint);
}

.actions {
  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:8px;

  margin-top:14px;
}

.primary-button,
.secondary-button,
.danger-button {
  border:0;

  min-height:44px;

  border-radius:14px;

  padding:0 13px;

  font-weight:800;
}

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

.secondary-button {
  background:
    color-mix(
      in srgb,
      var(--text) 7%,
      transparent
    );

  color:var(--text);
}

.danger-button {
  background:
    color-mix(
      in srgb,
      var(--danger) 12%,
      transparent
    );

  color:var(--danger);
}

.search {
  width:100%;

  border:0;
  outline:none;

  min-height:49px;

  padding:0 16px;

  border-radius:17px;

  background:var(--card);
  color:var(--text);

  box-shadow:var(--shadow);

  margin-bottom:12px;
}

.info-grid {
  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:9px;
}

.info-box {
  padding:13px;
  border-radius:16px;

  background:
    color-mix(
      in srgb,
      var(--text) 4%,
      transparent
    );
}

.info-box small {
  color:var(--hint);
  display:block;
  margin-bottom:5px;
}

.info-box strong {
  font-size:13px;
  overflow-wrap:anywhere;
}

.menu-card {
  overflow:hidden;
  padding:0;
}

.menu-item {
  width:100%;

  border:0;
  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--hint) 12%,
      transparent
    );

  background:transparent;
  color:var(--text);

  display:grid;
  grid-template-columns:
    40px 1fr 20px;

  gap:6px;

  text-align:right;

  align-items:center;

  padding:13px;
  min-height:69px;
}

.menu-item:last-child {
  border-bottom:0;
}

.menu-item strong {
  display:block;
}

.menu-item small {
  display:block;
  color:var(--hint);
  margin-top:3px;
}

.stat-value {
  font-size:20px;
  font-weight:900;
  margin-top:7px;
}

.stat-label {
  font-size:11px;
  color:var(--hint);
}

.empty {
  text-align:center;
  padding:30px 15px;
  color:var(--hint);
}

.loading-screen {
  min-height:62vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:10px;
}

.spinner {
  width:34px;
  height:34px;

  border:
    3px solid
    color-mix(
      in srgb,
      var(--hint) 17%,
      transparent
    );

  border-top-color:
    var(--text);

  border-radius:50%;

  animation:
    spin .7s linear infinite;
}

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

.error-card {
  margin:40px 16px;

  padding:27px;

  text-align:center;

  border-radius:24px;

  background:var(--card);
}

.error-icon {
  width:49px;
  height:49px;

  display:grid;
  place-items:center;

  margin:
    0 auto 12px;

  border-radius:50%;

  background:
    color-mix(
      in srgb,
      var(--danger) 12%,
      transparent
    );

  color:var(--danger);

  font-size:24px;
  font-weight:900;
}

.bottom-nav {
  position:fixed;

  right:9px;
  left:9px;

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  height:67px;

  z-index:50;

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  background:
    color-mix(
      in srgb,
      var(--card) 94%,
      transparent
    );

  backdrop-filter:
    blur(25px);

  border-radius:23px;

  box-shadow:
    0 10px 40px
    rgba(0,0,0,.12);

  overflow:hidden;
}

.nav-item {
  border:0;
  background:transparent;
  color:var(--hint);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:3px;
}

.nav-item.active {
  color:var(--text);
}

.nav-item span {
  font-size:19px;
}

.nav-item small {
  font-size:10px;
}

.toast {
  position:fixed;

  left:20px;
  right:20px;

  bottom:
    calc(
      88px +
      env(safe-area-inset-bottom)
    );

  z-index:100;

  padding:13px 16px;

  border-radius:15px;

  background:#111318;
  color:#fff;

  text-align:center;

  font-size:12px;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.22);
}

.code {
  direction:ltr;
  text-align:left;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}

.tag {
  display:inline-block;

  padding:5px 8px;

  border-radius:999px;

  background:
    color-mix(
      in srgb,
      var(--link) 10%,
      transparent
    );

  color:var(--link);

  font-size:10px;
  font-weight:800;
}

@media(min-width:700px) {
  #main,
  .topbar {
    max-width:720px;
    margin:auto;
  }

  .bottom-nav {
    max-width:700px;
    margin:auto;
  }
}