@import url("./tokens.css");

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #0B1220;
  color: var(--text);
}

/* Cute illustration background (subtle) */
.cute-bg{
  background:
    radial-gradient(120px 120px at 18% 12%, rgba(255,176,32,.14), rgba(255,176,32,0) 60%),
    radial-gradient(160px 160px at 78% 18%, rgba(43,182,115,.16), rgba(43,182,115,0) 60%),
    radial-gradient(220px 220px at 50% 92%, rgba(76,125,255,.10), rgba(76,125,255,0) 60%),
    var(--bg);
}
a{ color: inherit; text-decoration: none; }
button, input, select, textarea{ font: inherit; }

.stage{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
  /* scale phone to fit viewport height on small screens */
  --phone-scale: min(1, calc((100vh - 32px) / var(--phone-h)));
}

.phone{
  width: var(--phone-w);
  height: var(--phone-h);
  background: rgba(10,10,12,.98);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  padding: 11px; /* inner screen inset to avoid spilling past rounded corners */
  display: flex;
  flex-direction: column;
  transform: scale(var(--phone-scale));
  transform-origin: center;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  /* iPhone-like bezel without affecting layout */
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone:before{
  /* Dynamic Island */
  content:"";
  position:absolute;
  top: 10px;
  left:50%;
  transform: translateX(-50%);
  width: 124px;
  height: 34px;
  border-radius: 18px;
  background: rgba(10,10,12,.98);
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.phone:after{
  /* camera dot */
  content:"";
  position:absolute;
  top: 22px;
  left: calc(50% + 42px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  z-index: 61;
  pointer-events: none;
}

.nav{
  height: calc(var(--nav-h) + var(--status-h));
  padding-top: var(--status-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 var(--s-2);
  padding-top: var(--status-h);
  border-top-left-radius: 34px;
  border-top-right-radius: 34px;
}
.nav.wide{
  grid-template-columns: 112px 1fr 72px;
}
.nav .title{
  text-align: center;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav .iconbtn{
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap; /* prevent Chinese per-char wrapping */
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav .iconbtn.txt{
  width: auto;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--fs-13);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav .iconbtn.ghost{
  border: none;
  background: transparent;
}

.content{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
}
.content{
  scrollbar-width: none; /* Firefox */
}
.content::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.content.no-tab{ }
.content.no-nav{ }

.tabbar{
  position: relative;
  height: var(--tab-h);
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-bottom-left-radius: 34px;
  border-bottom-right-radius: 34px;
}
.tab{
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: var(--fs-12);
  color: var(--muted);
}
.tab .dot{
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(230,236,244,1);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}
.tab.active{ color: var(--primary); font-weight: var(--fw-600); }
.tab.active .dot{ border-color: rgba(43,182,115,.45); background: rgba(43,182,115,.10); }

.pad{ padding: var(--s-4); }
.row{ display: flex; align-items: center; gap: var(--s-2); }
.row, .col{ min-width: 0; }
.col{ display: flex; flex-direction: column; gap: var(--s-2); }
.between{ justify-content: space-between; }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(16,24,40,.06);
}
.card.pad{ padding: var(--s-4); }

.btn{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap; /* keep button text horizontal */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn:active{ transform: translateY(1px); }
.btn.primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.ghost{ background: transparent; }
.btn.danger{ background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.small{ padding: 7px 10px; font-size: var(--fs-13); }
.btn.block{ width: 100%; }

.chip{
  padding: 7px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(230,236,244,1);
  background: #fff;
  font-size: var(--fs-13);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip.on{ border-color: rgba(43,182,115,.45); background: rgba(43,182,115,.10); color: var(--primary); font-weight: var(--fw-600); }

.search{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-pill);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.search input{
  border: none;
  outline: none;
  width: 100%;
  font-size: var(--fs-14);
}

.list{
  display: flex;
  flex-direction: column;
}
.list .item{
  padding: 14px var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.list .item:last-child{ border-bottom: none; }
.item .meta{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.item .meta .t{ font-weight: var(--fw-600); }
.item .meta .d{ color: var(--muted); font-size: var(--fs-13); }
.arrow{ color: rgba(138,151,166,.9); }

/* text helpers to prevent overflow */
.clamp1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h1,.h2,.h3,.p{ overflow-wrap: anywhere; }

.tag{
  font-size: var(--fs-12);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(17,24,39,.06);
  color: var(--muted);
}
.badge{
  font-size: var(--fs-12);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(230,236,244,1);
  background: #fff;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.ok{ border-color: rgba(43,182,115,.45); background: rgba(43,182,115,.10); color: var(--primary); }
.badge.wait{ border-color: rgba(255,176,32,.45); background: rgba(255,176,32,.12); color: #9A5A00; }
.badge.no{ border-color: rgba(255,77,79,.35); background: rgba(255,77,79,.10); color: var(--danger); }

.hr{ height: 1px; background: var(--line); margin: var(--s-3) 0; }
.muted{ color: var(--muted); }
.muted2{ color: rgba(138,151,166,.95); }
.h1{ font-size: var(--fs-20); font-weight: var(--fw-600); }
.h2{ font-size: var(--fs-18); font-weight: var(--fw-600); }
.h3{ font-size: var(--fs-16); font-weight: var(--fw-600); }
.p{ font-size: var(--fs-14); line-height: 1.55; }
.small{ font-size: var(--fs-13); }

/* In-app notice (common app tip style) */
.notice{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(43,182,115,.28);
  background: rgba(43,182,115,.10);
}
.notice .nicon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(43,182,115,.18);
  color: var(--primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.notice .ntitle{
  font-weight: var(--fw-600);
  font-size: var(--fs-13);
  line-height: 1.25;
}
.notice .ntext{
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.45;
}

/* Discover rankings */
.rank-wrap{
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  margin-top: 12px;
  margin-bottom: 12px; /* separator spacing before topics/feed */
}
.rank-section{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,.05);
}
.section-gap{
  height: 12px;
  width: 100%;
}
.divider{
  height: 1px;
  background: rgba(238,242,247,1);
  margin: 10px 0;
}
.rank-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.rank-viewport{
  /* show exactly 3 cards without internal scroll */
  overflow: hidden;
}

.scroll-y{
  overscroll-behavior: contain;
}
.scroll-y::-webkit-scrollbar{
  width: 6px;
}
.scroll-y::-webkit-scrollbar-thumb{
  background: rgba(17,24,39,.18);
  border-radius: 999px;
}
.scroll-y::-webkit-scrollbar-track{
  background: transparent;
}

/* Horizontal scroll (hide bar, keep scroll) */
.hscroll{
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.rank-card{
  padding: 12px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(16,24,40,.06);
  cursor: pointer;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%; /* force single-column full-width cards */
}
.rank-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(43,182,115,.14), rgba(255,176,32,.12));
  border: 1px solid rgba(230,236,244,1);
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}
.rank-main{
  min-width: 0;
  flex: 1;
}
.rank-arrow{
  flex: 0 0 auto;
  color: rgba(138,151,166,.9);
  font-size: 18px;
  line-height: 1;
}
.rank-card .rt{ font-weight: var(--fw-600); font-size: 15px; line-height: 1.2; }
.rank-card .rd{ margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }

/* Map mock */
.map{
  position: relative;
  height: 100%;
  background: var(--map-bg);
  overflow: hidden;
}
.map svg{ width: 100%; height: 100%; display: block; }
.marker{
  position: absolute;
  transform: translate(-50%,-100%);
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.96);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,24,40,.10);
  user-select: none;
}
.marker .ic{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(17,24,39,.06);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.marker .nm{ font-size: var(--fs-12); color: var(--text); font-weight: var(--fw-600); }
.marker.sel{ transform: translate(-50%,-100%) scale(1.06); border-color: rgba(43,182,115,.45); }
.marker.sel{ box-shadow: var(--shadow-float); }
.fabcol{
  position: absolute;
  right: 12px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
.fab{
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16,24,40,.10);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drawer */
.drawer{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  background: rgba(255,255,255,.98);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  z-index: 6;
  overflow: hidden;
  transition: height .18s ease;
}
.drawer .handle{
  height: 28px;
  display: grid;
  place-items: center;
}
.drawer .handle:before{
  content:"";
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #E5E7EB;
}
.drawer .body{
  height: calc(100% - 28px);
  overflow: auto;
}
.drawer.mini{ height: 92px; }
.drawer.half{ height: 48%; }
.drawer.full{ height: 78%; }

/* Bottom sheet modal */
.mask{
  position: absolute;
  inset: 11px;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 20;
  border-radius: 34px;
}
.mask.show{ display: block; }
.sheet{
  position: absolute;
  left: 11px; right: 11px;
  bottom: -100%;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  z-index: 21;
  transition: bottom .18s ease;
}
.sheet.show{ bottom: 0; }
.sheet .shandle{
  height: 28px;
  display: grid;
  place-items: center;
}
.sheet .shandle:before{
  content:"";
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #E5E7EB;
}
.sheet .sbody{ padding: var(--s-4); max-height: 70vh; overflow: auto; }

/* Toast */
.toast{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(11px + 88px);
  background: rgba(17,24,39,.88);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs-13);
  display: none;
  z-index: 50;
}
.toast.show{ display:block; }

/* Status toggle (for demo) */
.statusbar{
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  padding: 10px var(--s-4);
  background: rgba(247,249,252,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.statusbar .chip{ font-size: 12px; padding: 6px 10px; }

.state{ display:none; }
.state.show{ display:block; }

/* Placeholder */
.ph{
  background: linear-gradient(135deg, rgba(43,182,115,.14), rgba(255,176,32,.12));
  border-radius: 14px;
  border: 1px solid var(--line);
}
.ph.ill{
  background: #fff;
  border: 1px solid rgba(230,236,244,1);
  overflow: hidden;
}

/* Images */
img{
  max-width: 100%;
  height: auto;
}
.imgfill{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}