@import url("tokens.css");
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #dfe6ea; color: var(--text); }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; }
.app {
  width: min(100vw, 430px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 20px 50px rgba(0,0,0,.12);
}
.page { display: none; height: 100%; overflow: hidden; padding-bottom: calc(76px + var(--safe-b)); }
.page.on { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page[data-page="login"], .page.no-tab { padding-bottom: 24px; }
.app.has-tabs .page.no-tab { padding-bottom: calc(76px + var(--safe-b)); }

/* status bar mimic */
.sb { height: 12px; }

/* teal hero */
.hero {
  background: radial-gradient(120% 80% at 90% -10%, rgba(255,255,255,.22), transparent 50%), var(--teal);
  color: #fff;
  padding: 18px 20px 28px;
  position: relative;
  overflow: hidden;
}
.hero:after {
  content: "";
  position: absolute; right: -40px; top: -50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.hero-row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.brand-mini { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.logo-sq {
  width: 32px; height: 32px; border-radius: 9px; background: transparent;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.logo-sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-sq.lg { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.lang-switch {
  display: flex; background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px;
  font-size: 11px; font-weight: 700;
}
.lang-switch b { padding: 5px 10px; border-radius: 999px; opacity: .75; cursor: pointer; }
.lang-switch b.on { background: #fff; color: var(--teal); opacity: 1; }
.topbar .lang-switch { background: #eef2f4; }
.topbar .lang-switch b { color: var(--muted); }
.topbar .lang-switch b.on { background: #fff; color: var(--teal); }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; font-size: 20px; }

/* login */
.login-hero { min-height: 210px; padding-top: 22px; text-align: center; }
.login-hero h1 { margin: 16px 0 6px; font-size: 28px; font-weight: 800; }
.login-hero p { margin: 0; opacity: .9; font-size: 13px; }
.sheet {
  background: var(--bg); margin-top: -18px; border-radius: 22px 22px 0 0;
  padding: 18px 18px 28px; position: relative; z-index: 2; min-height: 62vh;
}
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; background: #eef2f4; border-radius: 14px; padding: 4px; margin-bottom: 18px;
}
.tabs button { height: 40px; border-radius: 11px; font-weight: 700; color: var(--muted); }
.tabs button.on { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.label { font-size: 12px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.field, .field-row {
  background: #eef2f4; border-radius: 14px; min-height: 48px;
  display: flex; align-items: center; padding: 0 14px; gap: 8px;
}
.field input, .field-row input { border: 0; background: none; outline: none; width: 100%; font-size: 15px; color: var(--text); }
.otp { letter-spacing: 6px; font-weight: 700; font-size: 18px; }
.prefix { color: var(--muted); font-weight: 700; padding-right: 8px; border-right: 1px solid #d5dde1; }
.ghost-btn { color: var(--teal); font-weight: 700; font-size: 12px; white-space: nowrap; }
.ghost-btn:disabled { opacity: .45; }
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.ok-mini { color: var(--teal); font-size: 12px; font-weight: 700; }
.btn {
  width: 100%; height: 52px; border-radius: 26px; background: var(--teal); color: #fff;
  font-weight: 800; font-size: 16px; margin-top: 18px; box-shadow: 0 8px 18px rgba(14,163,125,.28);
  transition: transform .15s, opacity .15s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; }
.btn.sub { background: #fff; color: var(--text); box-shadow: none; border: 1px solid var(--line); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 14px; }
.check input { margin-top: 2px; }
.foot-safe { text-align: center; color: var(--muted); font-size: 11px; margin-top: 18px; line-height: 1.4; }

/* cards */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; transition: box-shadow .2s; }
.balance-card { margin: -18px 16px 12px; position: relative; z-index: 2; }
.balance-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.balance-num { font-size: 34px; font-weight: 800; margin: 4px 0 10px; }
.wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.wallet-row .btn { height: 40px; margin: 0; padding: 0 18px; width: auto; }
.stats3 { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }
.stats3 b { display: block; font-size: 13px; }
.stats3 span { color: var(--muted); font-size: 11px; }
.announce {
  margin: 0 16px 14px; background: #fff8e8; border-radius: 12px; padding: 10px 12px;
  font-size: 12px; color: #9a7a2a; display: flex; gap: 8px; align-items: center;
}
.sec { padding: 0 16px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 10px; }
.sec-h h2 { margin: 0; font-size: 18px; }
.sec-h a, .link { color: var(--muted); font-size: 12px; font-weight: 600; }
.seg { display: flex; gap: 18px; margin-bottom: 12px; font-size: 13px; color: var(--muted); font-weight: 700; }
.seg span { padding-bottom: 6px; cursor: pointer; }
.seg span.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--teal); }

.task { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.task .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 20px;
}
.task .ico.blue { background: #e8f1ff; color: #3b7cff; }
.task .ico.gold { background: #fff3d8; color: var(--gold); }
.task .ico.pur { background: #f1ecff; color: #7a63e6; }
.task .ico.green { background: var(--teal-s); color: var(--teal); }
.task h3 { margin: 0 0 2px; font-size: 15px; }
.task p { margin: 0; font-size: 12px; color: var(--muted); }
.pill {
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.pill.blue { background: #e8f1ff; color: #3b7cff; }
.pill.gold { background: #fff3d8; color: #c48a10; }
.pill.green { background: var(--teal-s); color: var(--teal); }
.pill.red { background: var(--red-s); color: var(--red); }
.pill.gray { background: #eef1f3; color: var(--muted); }
.task-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.task-foot b { color: var(--gold); }
.bar { height: 4px; background: #eef2f4; border-radius: 4px; margin-top: 10px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #7ee0c4); width: 0; transition: width .35s; }

/* tabbar — pinned, always visible except login */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 430px);
  bottom: 0;
  height: calc(64px + var(--safe-b)); padding: 6px 4px var(--safe-b);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  box-shadow: 0 -1px 0 rgba(16,40,48,.06), 0 -10px 28px rgba(16,40,48,.06);
  z-index: 40;
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #98a2ab; font-size: 10px; font-weight: 700; letter-spacing: .01em;
  position: relative; min-height: 52px;
}
.tabbar button i { font-size: 22px; line-height: 1; }
.tabbar button .ico-fill { display: none; }
.tabbar button.on { color: var(--teal); }
.tabbar button.on .ico-line { display: none; }
.tabbar button.on .ico-fill { display: block; }
.tabbar button.on:after {
  content: ""; width: 12px; height: 3px; border-radius: 99px;
  background: var(--teal); position: absolute; top: 2px;
}
.app.is-login .tabbar { display: none; }

/* nav pages */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px; font-weight: 800; font-size: 17px;
  background: var(--bg);
}
.topbar.teal { background: var(--teal); color: #fff; }
.back { width: 32px; height: 32px; display: grid; place-items: center; font-size: 24px; }

.navy {
  background: var(--navy); color: #fff; border-radius: var(--r); padding: 16px;
}
.steps { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin-top: 12px; }
.steps .dot { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.12); margin: 0 auto 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.steps span { font-size: 10px; opacity: .8; }

.tier { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.tier + .tier { border-top: 1px solid var(--line); }
.tier .lv {
  width: 36px; height: 36px; border-radius: 50%; background: #eef2f4; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #6b7780;
}
.tier.on { background: #f3fbf8; margin: 0 -12px; padding: 12px; border-radius: 14px; border-top: 0; }
.tier .amt { margin-left: auto; color: var(--gold); font-weight: 800; }
.warn {
  background: #fff4f0; color: #c46a4a; border-radius: 12px; padding: 12px; font-size: 12px; line-height: 1.45; margin: 12px 0;
}

.upload {
  border: 1.5px dashed #c9e8de; background: #f4fbf8; border-radius: 16px; min-height: 140px;
  display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 12px; cursor: pointer;
}
.upload b { display: block; color: var(--text); font-size: 14px; margin: 6px 0 2px; }
.shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot-prev { background: var(--navy); border-radius: 14px; color: #fff; padding: 12px; font-size: 11px; min-height: 140px; }
.shot-prev .big { font-size: 16px; font-weight: 800; margin-top: 18px; }

.timeline { position: relative; padding-left: 22px; }
.timeline:before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #e6ecee; }
.tl { position: relative; padding: 0 0 16px; }
.tl:before {
  content: ""; position: absolute; left: -19px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #d9e1e4; border: 2px solid #fff; box-shadow: 0 0 0 2px #d9e1e4;
}
.tl.ok:before { background: var(--teal); box-shadow: 0 0 0 2px #c9efe4; }
.tl.wait:before { background: var(--gold); box-shadow: 0 0 0 2px #f8e3b0; }
.tl h4 { margin: 0; font-size: 14px; }
.tl p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.hist { margin-bottom: 10px; }
.hist .row { display: flex; justify-content: space-between; align-items: flex-start; }
.hist .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.reason-box { background: var(--red-s); color: #b64a4a; border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-top: 8px; }

/* checkin */
.check-hero { padding-bottom: 36px; }
.check-hero .big { font-size: 36px; font-weight: 800; }
.stair { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; margin: 8px 0 14px; }
.stair .d { background: #f3f5f7; border-radius: 12px; padding: 8px 2px; font-size: 10px; }
.stair .d.on { background: #fff6e0; outline: 2px solid #f0c45a; }
.stair .d.gift { background: #fff6e0; }
.stair b { display: block; font-size: 11px; margin-top: 4px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal .wd { font-size: 11px; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal .day { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.cal .day.ok { background: var(--teal); color: #fff; }
.cal .day.miss { background: #fdeeee; color: #d38a8a; }
.cal .day.today { outline: 2px solid var(--teal); outline-offset: 1px; }
.legend { display: flex; gap: 14px; justify-content: center; font-size: 11px; color: var(--muted); margin-top: 10px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }

/* invite */
.poster {
  background: radial-gradient(90% 80% at 90% 0, rgba(255,255,255,.16), transparent 46%), var(--teal);
  color: #fff; border-radius: 20px; padding: 18px; position: relative; overflow: hidden;
}
.poster h2 { font-size: 24px; margin: 14px 0 16px; line-height: 1.35; }
.poster-box { background: #fff; color: var(--text); border-radius: 16px; padding: 14px; display: flex; justify-content: space-between; align-items: center; }
.poster-box .code { font-size: 26px; font-weight: 800; }
.qr { width: 86px; height: 86px; background: #fff; border-radius: 8px; }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 8px; }
.share-grid button { color: var(--muted); font-size: 11px; font-weight: 700; }
.share-ico { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; font-size: 22px; }
.share-ico.wa { background: #e8f8ef; color: #25d366; }
.share-ico.fb { background: #e8f0ff; color: #1877f2; }
.share-ico.cp { background: #eef2f4; color: #6b7780; }
.share-ico.dl { background: #f1ecff; color: #7a63e6; }

/* profile */
.avatar {
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--teal);
  display: grid; place-items: center; font-weight: 800; font-size: 22px;
}
.menu { overflow: hidden; }
.menu a, .menu button.row, .menu div.row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 4px;
  background: none; text-align: left; font-size: 14px; font-weight: 600;
}
.menu > a > i, .menu > button.row > i, .menu > div.row > i {
  width: 22px; font-size: 20px; color: var(--teal); text-align: center;
}
.menu .right i { font-size: 18px; color: #c3ced4; }
.menu a + a, .menu button.row + a, .menu a + button.row, .menu div.row + a { border-top: 1px solid #f0f3f5; }
.menu .right { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.badge { background: #f4c2c2; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; font-size: 10px; display: grid; place-items: center; }
.logout { display: block; width: 100%; text-align: center; color: var(--red); font-weight: 700; margin: 16px 0; }

/* agent */
.meter { height: 6px; background: rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold); }
.kpi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.delta.up { color: var(--teal); font-size: 12px; }
.delta.down { color: var(--red); font-size: 12px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 10px; }
.chart span { flex: 1; background: #d7efe7; border-radius: 8px 8px 4px 4px; position: relative; }
.chart span.on { background: var(--teal); }
.chart span b { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); font-weight: 600; }
.quick3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.quick3 button { background: #fff; border-radius: 16px; padding: 14px 8px; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); }

.chips { display: flex; gap: 8px; overflow: auto; padding-bottom: 4px; }
.chips button { background: #eef2f4; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.chips button.on { background: var(--teal-s); color: var(--teal); }
.tree-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.tree-item .av { width: 34px; height: 34px; border-radius: 50%; background: #eef1ff; color: #6a74d6; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.tree-kids { padding-left: 28px; }

/* toast / modal */
.toast {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(12px);
  background: #1c2b33; color: #fff; padding: 10px 16px; border-radius: 16px; font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 50;
  max-width: calc(100% - 40px); text-align: center; line-height: 1.4;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.dev { background: #0b8c6b; bottom: auto; top: 18px; }
.modal {
  position: absolute; inset: 0; background: rgba(16, 28, 34, .45); display: none; align-items: center; justify-content: center; z-index: 45;
}
.modal.on { display: flex; }
.modal-card {
  background: #fff; width: calc(100% - 36px); max-width: 360px; margin: 0; border-radius: 22px; padding: 22px 20px 18px; text-align: left;
}
.modal-head {
  background: linear-gradient(180deg, #1ec59a, #0ea37d); height: 92px; margin: -22px -20px 16px; border-radius: 22px 22px 0 0;
  display: grid; place-items: center; color: #fff;
}
.modal-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 14px; }

canvas#posterCanvas { position: absolute; left: -9999px; }

.daily-frame { width: 100%; height: 210px; border: 0; border-radius: 14px; background: #0d2230; margin-bottom: 12px; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 13px; }
.empty i { display: block; font-size: 28px; color: #c5d0d6; margin-bottom: 8px; }
.skeleton { background: linear-gradient(90deg, #eef2f4, #f7f9fa, #eef2f4); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; height: 72px; margin-bottom: 10px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.quick3 button { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quick3 button i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: var(--teal-s); color: var(--teal); }
.tree-item + .tree-item { border-top: 1px solid #f0f3f5; }
.app.dark { --bg: #122026; --card: #1b2c33; --text: #e8eef0; --muted: #8fa0a8; --line: #2a3c44; background: #0c161b; }
.app.dark .hero { filter: saturate(1.05); }
.cal-nav { background: none; color: var(--text); font-size: 20px; width: 32px; height: 32px; }
.fixed-cta { position: sticky; bottom: 12px; padding-top: 8px; }
.space { height: 12px; }
.tiny { font-size: 11px; color: var(--muted); }
select.plain { border: 0; background: #eef2f4; width: 100%; height: 48px; border-radius: 14px; padding: 0 12px; }
.hidden { display: none !important; }