:root {
  --bg: #0b0d10;
  --card: #161a20;
  --card2: #1d232b;
  --border: #2a313c;
  --accent: #f7c500;
  --text: #f5f7fa;
  --muted: #8b95a3;
  --green: #22c55e;
  --red: #ef4444;
  --blue: #b8d1ff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; padding: 16px 16px 100px; display: flex; flex-direction: column; gap: 14px; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.5; }
.small { font-size: 12px; }
.green { color: var(--green); }
.red { color: var(--red); }
.link { color: var(--accent); font-size: 14px; text-align: center; }

/* banner */
.banner { border-radius: 14px; background: linear-gradient(135deg, #1a1f27, #0d1015); border: 1px solid var(--border); padding: 30px 16px; text-align: center; }
.banner .tag { font-size: 26px; }
.banner h1 { font-size: 26px; letter-spacing: 3px; font-style: italic; margin-top: 8px;
  border: 2px solid var(--accent); display: block; margin: 8px auto 0; padding: 8px 18px; transform: skew(-8deg); }

/* steps & buttons */
.step { display: flex; align-items: center; gap: 10px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #111; font-weight: 800; display: grid; place-items: center; }
.btn { border: none; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }
.btn-primary { background: linear-gradient(180deg, #2a2f37, #171b21); color: var(--accent); border: 1px solid #3a414d; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-blue { background: var(--blue); color: #16345e; }

/* profile head */
.profile-head { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.name { font-size: 19px; font-weight: 800; }
.ids { color: var(--muted); font-size: 12px; margin-top: 3px; }
.icon-btn { background: var(--card2); border: none; border-radius: 10px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }

/* level card */
.level-card { background: var(--card); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.row-between { display: flex; justify-content: space-between; gap: 10px; }
.level-big { font-size: 26px; font-weight: 800; color: var(--muted); }
.btn-topup { background: linear-gradient(90deg, #0f9d58, #0b7a44); color: #fff; border: none; border-radius: 8px; padding: 9px 14px; font-weight: 800; font-size: 12px; cursor: pointer; }
.hint { color: var(--muted); font-size: 10px; margin-top: 6px; max-width: 150px; text-align: right; }
.progress { height: 10px; border-radius: 999px; background: #232a33; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), #ffd75e); }

/* tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px 10px; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }

/* bottom nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #10141a; border-top: 1px solid #232a33; display: flex; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
.bottom-nav button { flex: 1; background: #1b2129; border: none; border-radius: 12px; margin: 0 3px; padding: 12px 2px; color: var(--muted); font-weight: 700; font-size: 11px; cursor: pointer; }
.bottom-nav button.active { background: #9fe8bb; color: #123c26; }

/* generic cards/lists for part 2 */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; background: var(--card2); border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
h1.title { font-size: 24px; }
h2.title { font-size: 18px; }

/* level rows */
.level-row { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); margin-bottom: 10px; cursor: pointer; text-align: left; color: var(--text); }
.level-row.dim { opacity: .45; }
.level-row.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); opacity: 1; }
.level-row .lt { font-weight: 800; }
.level-row .ls { color: var(--muted); font-size: 12px; margin-top: 3px; }
.price { font-size: 20px; font-weight: 800; }

/* podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 18px 0 6px; }
.podium .col { width: 31%; text-align: center; }
.podium .pname { font-size: 12px; font-weight: 700; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.podium .pprofit { color: var(--green); font-size: 11px; margin-bottom: 6px; }
.podium .bar { border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #22c55e, #15803d); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; }

/* carousel */
.car-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.car-btn { width: 46px; height: 46px; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); color: #fff; font-size: 18px; cursor: pointer; }
.dots { display: flex; gap: 6px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: #3a414d; }
.dots span.on { background: var(--accent); }
.guide-body p { margin-bottom: 10px; }
.guide-body h3 { margin: 12px 0 6px; font-size: 15px; }

/* assets grid */
.assets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assets button { background: #101720; border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 12px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }

/* time grid */
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.times button { background: #2e5b3f; border: 1px solid #3f7a54; color: #eafff0; border-radius: 10px; padding: 14px; font-weight: 800; cursor: pointer; }

/* analysis */
.term { background: #0d1117; border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.9; color: #c9d1d9; min-height: 260px; }
.term .val { color: #fff; font-weight: 700; }
.term .acc { color: var(--accent); font-weight: 700; }

/* result */
.result-banner { border-radius: 14px; padding: 34px 10px; text-align: center; font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: 2px; }
.result-banner.BUY { background: linear-gradient(135deg, #052e16, #14532d); color: #4ade80; border: 1px solid #16a34a; }
.result-banner.SELL { background: linear-gradient(135deg, #450a0a, #7f1d1d); color: #f87171; border: 1px solid #dc2626; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; }
.kv b { text-align: right; }
.sect { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; margin: 10px 0 4px; }

/* fixes */
.level-row { width: 100%; }
.tile-center { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }