/* ===== Home (ultra premium design) + tab bar ===== */
.hm-screen .ax-screen-bg { background: radial-gradient(90% 50% at 100% 0%, rgba(30,110,255,.22), transparent 70%), radial-gradient(80% 40% at 0% 100%, rgba(30,90,200,.12), transparent 70%), linear-gradient(180deg, #071022, #050a16 60%, #04080f); }
.hm-screen .ax-nav.ax-solid { background: rgba(6,12,26,.78); }
.hm-brand { display: inline-flex; align-items: center; gap: 10px; padding-left: 6px; }
.hm-brand img { width: 44px; height: auto; filter: drop-shadow(0 0 10px rgba(60,150,255,.5)); }
.hm-brand span { font: 600 15px/1 var(--tx-font-display); letter-spacing: .42em; color: #fff; }
.hm-me { width: 42px; height: 42px; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, #3fd0ff, #2f6bff); display: grid; place-items: center; box-shadow: 0 0 18px rgba(47,140,255,.45); }
.hm-me span { width: 100%; height: 100%; border-radius: 50%; background: #08101f; display: grid; place-items: center; font: 700 14px/1 var(--tx-font); color: #fff; }
.hm-top { position: relative; padding-top: 6px; }
.hm-wave { position: absolute; right: -16px; top: 4px; width: 58%; max-width: 300px; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.hm-top > *:not(.hm-wave) { position: relative; z-index: 1; }
.hm-kicker { font: 600 13px/1 var(--tx-font); letter-spacing: .06em; text-transform: uppercase; color: rgba(190,205,235,.62); margin: 6px 2px 10px; }
.hm-title { margin: 0 0 16px; font: 800 36px/1.08 var(--tx-font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.hm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(14,24,46,.78); border: 1px solid rgba(120,160,230,.18); color: #fff; font: 600 14px/1 var(--tx-font); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hm-chip i { width: 8px; height: 8px; border-radius: 50%; background: #34d058; box-shadow: 0 0 8px #34d058; }
.hm-chip svg { width: 16px; height: 16px; color: #9fb4ff; }
.hm-chip b { color: #b3c3ff; font-weight: 600; }
.hm-hero { position: relative; border-radius: 22px; padding: 22px 20px 18px; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(105deg, rgba(10,20,42,.92) 0%, rgba(10,22,48,.72) 55%, rgba(12,40,90,.25) 100%);
  border: 1px solid rgba(70,140,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(40,120,255,.18); }
.hm-hero-t { font: 800 26px/1.15 var(--tx-font-display); letter-spacing: -.02em; color: #fff; margin-bottom: 18px; }
.hm-coach { display: flex; align-items: center; gap: 12px; }
.hm-coach .ax-avatar { box-shadow: 0 0 0 2px #3d8bff, 0 0 14px rgba(61,139,255,.5); }
.hm-coach b { display: block; font: 600 16px/1.2 var(--tx-font); color: #fff; }
.hm-coach small { font-size: 13px; color: rgba(190,205,235,.7); }
.hm-coach i { width: 1px; height: 36px; background: rgba(150,180,240,.25); margin: 0 6px; }
.hm-coach-chat { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20,32,60,.8); border: 1px solid rgba(140,170,230,.25); flex: none; }
.hm-coach-chat svg { width: 22px; height: 22px; }
.hm-card { display: block; position: relative; border-radius: 22px; padding: 18px; margin-bottom: 14px; color: #fff; transition: transform .16s var(--tx-ease);
  background: linear-gradient(180deg, #0d1628, #0a1220); border: 1px solid rgba(110,150,220,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -24px rgba(0,0,0,.9); }
.hm-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hm-card-h h2 { margin: 0; font: 700 20px/1.2 var(--tx-font-display); letter-spacing: -.01em; color: #fff; }
.hm-card-h a { display: inline-flex; align-items: center; gap: 4px; font: 500 15px/1 var(--tx-font); color: rgba(200,215,240,.8); }
.hm-card-h a svg, .hm-sec a svg { width: 16px; height: 16px; stroke-width: 2.4; }
.hm-month-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.hm-month-col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2px 4px; transition: transform .16s var(--tx-ease); }
.hm-month-col + .hm-month-col { border-left: 1px solid rgba(130,160,220,.14); }
.hm-month-col b { margin-top: 12px; font: 800 24px/1 var(--tx-font-display); letter-spacing: -.02em; color: #fff; }
.hm-month-col span { margin-top: 5px; font-size: 14px; color: rgba(190,205,235,.7); }
.hm-month .ax-ring circle { stroke-width: 8; }
.hm-bonus { display: flex; align-items: center; gap: 16px; }
.hm-gift { width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center; color: #4fd6ff; background: linear-gradient(145deg, #13305e, #0c1f40); border: 1px solid rgba(80,160,255,.35); box-shadow: 0 0 18px rgba(40,140,255,.3); }
.hm-gift svg { width: 30px; height: 30px; }
.hm-bonus-main { flex: 1; min-width: 0; }
.hm-bonus-l { font-size: 14px; color: rgba(190,205,235,.75); }
.hm-bonus-n { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; margin: 4px 0 12px; }
.hm-bonus-n b { font: 800 25px/1 var(--tx-font-display); letter-spacing: -.02em; color: #fff; }
.hm-bonus-n span { font-size: 13.5px; color: rgba(190,205,235,.8); }
.hm-bar { height: 9px; border-radius: 5px; background: rgba(120,150,210,.16); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2f8cff, #3fd0ff); box-shadow: 0 0 10px rgba(63,208,255,.7); }
.hm-bonus-f { display: flex; justify-content: space-between; margin-top: 9px; font-size: 13.5px; color: rgba(200,215,240,.85); }
.hm-sec { display: flex; align-items: center; justify-content: space-between; margin: 24px 2px 12px; }
.hm-sec h2 { margin: 0; font: 800 22px/1.2 var(--tx-font-display); letter-spacing: -.02em; color: #fff; }
.hm-sec a { display: inline-flex; align-items: center; gap: 4px; font: 600 16px/1 var(--tx-font); color: #3fc3ff; }
.hm-up { display: flex; align-items: center; gap: 14px; padding: 14px; }
.hm-up:active, .hm-month-col:active { transform: scale(.98); }
.hm-date { width: 50px; height: 54px; border-radius: 13px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(24,34,58,.9); border: 1px solid rgba(120,150,210,.14); }
.hm-date b { font: 800 20px/1 var(--tx-font-display); color: #fff; }
.hm-date small { font: 600 11px/1 var(--tx-font); color: rgba(190,205,235,.75); margin-top: 4px; letter-spacing: .04em; }
.hm-date-bolt svg { width: 24px; height: 24px; color: #ffc65c; }
.hm-up-main { flex: 1; min-width: 0; }
.hm-up-main b { display: block; font: 700 17px/1.25 var(--tx-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-up-main small { display: block; margin-top: 3px; font-size: 14px; color: rgba(190,205,235,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tag { flex: none; padding: 7px 14px; border-radius: 999px; font: 600 14px/1 var(--tx-font); }
.hm-gold { color: #ffcf6b; border: 1.5px solid rgba(255,190,80,.7); background: rgba(255,180,60,.08); }
.hm-violet { color: #c9b5ff; border: 1.5px solid rgba(160,130,255,.6); background: rgba(140,110,255,.08); }
.hm-chev { width: 18px; height: 18px; color: rgba(190,205,235,.55); flex: none; stroke-width: 2.4; }
.hm-agency-row { display: flex; align-items: center; gap: 18px; }
.hm-big { font: 800 30px/1 var(--tx-font-display); color: #fff; letter-spacing: -.03em; }
.hm-muted { font-size: 13.5px; color: rgba(190,205,235,.72); margin-top: 4px; }
.hm-muted b { color: #fff; }
.hm-screen .ax-home-tiles { background: linear-gradient(180deg, #0d1628, #0a1220); border-color: rgba(110,150,220,.16); }

/* Tab bar (all screens): navy glass, blue active icon with a dot */
.tx-tabs { background: rgba(10,17,32,.82); border-color: rgba(110,150,220,.18); border-radius: 30px; }
.tx-tab-ind { display: none; }
.tx-tab { color: rgba(190,205,235,.62); font: 600 11px/1 var(--tx-font); gap: 5px; }
.tx-tab svg { width: 26px; height: 26px; }
.tx-tab.tx-on { color: #3d9bff; }
.tx-tab.tx-on svg { stroke: #3d9bff; fill: rgba(61,155,255,.9); filter: drop-shadow(0 0 8px rgba(61,155,255,.6)); }
.tx-tab.tx-on::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3d9bff; box-shadow: 0 0 8px #3d9bff; }
.tx-tab .tx-badge { top: 2px; background: #ff3b30; }

.hm-updated { display: flex; align-items: center; gap: 8px; margin: -2px 2px 12px; padding: 10px 14px; border-radius: 14px; background: rgba(14,24,46,.78); border: 1px solid rgba(110,150,220,.18); font-size: 13.5px; color: rgba(200,215,240,.85); }
.hm-updated svg { width: 16px; height: 16px; color: #3fc3ff; flex: none; }
.hm-updated b { color: #fff; font-weight: 600; }