:root{
  --bg:#131419;
  --card:#1e2027;
  --card-2:#23262e;
  --fg: var(--tg-theme-text-color,#f3f4f6);
  --hint:#8b9099;
  --accent:#ff8c3d;
  --accent-2:#f56f1e;
  --accent-soft:rgba(255,140,61,.12);
  --accent-line:rgba(255,140,61,.5);
  --ok:#34c759;
  --border:rgba(255,255,255,.07);
  --radius:18px;
  --radius-sm:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;color:var(--fg);
  background:
    radial-gradient(120% 55% at 50% -8%, #2c2218 0%, rgba(44,34,24,0) 55%),
    var(--bg);
  background-attachment:fixed;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  padding-bottom:88px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#screen{padding:18px 16px 8px;max-width:680px;margin:0 auto}

h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:6px 0 16px}
h2{font-size:17px;font-weight:700;margin:0 0 10px}
.hint{color:var(--hint);font-size:13px}
.center{text-align:center}

/* Cards */
.card{
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;margin:0 0 14px;
}

/* Rows */
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--border);font-size:15px}
.row:last-child{border-bottom:0}
.row:first-child{padding-top:2px}
.row b{font-weight:700}

.big{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:15px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em;
  margin:10px 0 0;cursor:pointer;
  box-shadow:0 6px 18px rgba(245,111,30,.26);
  transition:transform .08s ease,opacity .15s ease;
}
.btn:active{transform:scale(.985)}
.btn.secondary{
  background:transparent;border:1.5px solid var(--accent-line);
  color:var(--accent);box-shadow:none;
}
.btn.ghost{
  background:var(--card-2);border:1px solid var(--border);
  color:var(--fg);box-shadow:none;
}

/* Inputs */
input,select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);color:var(--fg);font-size:15px;margin-top:6px;
  appearance:none;-webkit-appearance:none;outline:none}
input:focus,select:focus{border-color:var(--accent-line)}
select{
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%238b9099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}

/* Hero (dashboard balance) */
.hero{
  background:linear-gradient(135deg,#ff8c3d,#f5611e);
  border-radius:var(--radius);padding:22px;margin:0 0 14px;
  box-shadow:0 10px 30px rgba(245,97,30,.28);color:#fff;
}
.hero-label{margin:0;font-size:13px;opacity:.9;font-weight:600}
.hero-balance{margin:6px 0 18px;font-size:36px;font-weight:800;letter-spacing:-.02em}
.hero-actions{display:flex;gap:10px}
.hero-actions .btn{margin:0;flex:1;width:auto;padding:13px;
  background:rgba(255,255,255,.18);box-shadow:none;font-weight:700;color:#fff}
.hero-actions .btn.secondary{background:#fff;color:var(--accent-2);border:0}

/* Stat grid */
.stat-grid{display:flex;gap:12px;margin:0 0 14px}
.stat{flex:1;background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px;text-align:center}
.stat .num{font-size:24px;font-weight:800;letter-spacing:-.02em}
.stat .lbl{color:var(--hint);font-size:12px;margin-top:4px}

/* Badges */
.badge{display:inline-block;padding:5px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
  font-size:13px;font-weight:700}
.badge.green{background:rgba(52,199,89,.14);color:var(--ok)}

/* Tabbar */
#tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;
  background:rgba(19,20,25,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom,0);z-index:40}
#tabbar button{flex:1;background:none;border:0;color:var(--hint);
  padding:9px 2px 8px;font-size:11px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:color .15s ease}
#tabbar button.active{color:var(--accent)}
#tabbar .ico{font-size:20px;line-height:1}

/* QR */
.qr{background:#fff;padding:14px;border-radius:16px;display:inline-block;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}