/* 以截图的 402 CSS 像素宽度为基准，原图资源均保留三倍分辨率。 */
:root {
  font-size: min(0.2487562189vw, 1.3930348259px);
  --background: #161823;
  --card: #1f212b;
  --foreground: #fff;
  --muted: #8d8e95;
  --accent: #00fac7;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--background); color: var(--foreground); font-size: 14rem; }
button, input { font: inherit; }
button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 1.5rem solid var(--accent); outline-offset: 4rem; }
button:active { opacity: .75; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }

/* 应用采用三行布局，仅中间区域滚动；横向大屏下保持手机比例。 */
.app { position: relative; display: grid; grid-template-rows: 56rem minmax(0, 1fr) 83rem; width: 402rem; height: 100%; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--background); }
.app-header { position: relative; z-index: 5; background: var(--background); }
.toolbar { position: absolute; top: 12rem; left: 8rem; right: 8rem; height: 32rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 6rem; white-space: nowrap; font-size: 18rem; line-height: 32rem; font-weight: 600; letter-spacing: .1rem; }
.brand-logo { width: 32rem; height: 32rem; border-radius: 50%; }
.toolbar-actions { display: flex; align-items: center; gap: 8rem; }
.notification-button, .notification-button img { width: 32rem; height: 32rem; }
.mini-controls { position: relative; width: 76rem; height: 32rem; }
.mini-controls > img { width: 76rem; height: 32rem; }
.mini-controls button { position: absolute; top: 0; bottom: 0; width: 50%; border-radius: 16rem; }
.more-button { left: 0; }
.close-button { right: 0; }
.more-menu { position: absolute; right: 8rem; top: 49rem; min-width: 132rem; padding: 5rem; background: #2b2d38; border: 1rem solid #373944; border-radius: 9rem; box-shadow: 0 6rem 20rem #0004; }
.more-menu button { display: block; width: 100%; padding: 10rem; text-align: left; font-size: 13rem; border-radius: 5rem; }
.more-menu button:hover { background: #ffffff0c; }

.content-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.content-scroll::-webkit-scrollbar { display: none; }
.mine-page { padding: 21.333rem 8.667rem 13.333rem; }
.profile { display: flex; align-items: center; min-height: 53.333rem; gap: 12.667rem; margin-bottom: 10.333rem; }
.avatar { flex: 0 0 auto; width: 53.333rem; height: 53.333rem; border-radius: 50%; object-fit: cover; }
.profile-details { flex: 1; min-width: 0; padding-top: 1rem; }
.nickname { display: flex; align-items: center; height: 23rem; font-size: 17.333rem; line-height: 23rem; font-weight: 600; white-space: nowrap; }
.nickname img { width: 43.667rem; height: 22rem; flex-shrink: 0; }
.nickname > span { overflow: hidden; text-overflow: ellipsis; }
.followers { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8rem; margin-top: 7rem; color: var(--muted); font-size: 12.667rem; line-height: 18rem; }
.followers > span { white-space: nowrap; }
.card { background: var(--card); border-radius: 9rem; }
.card h1, .card h2 { font-size: 16rem; line-height: 22rem; font-weight: 600; }
.earnings-card { height: 115.333rem; padding: 17.333rem; margin-bottom: 8.667rem; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; }
.finance-link { display: flex; align-items: center; gap: 3rem; color: var(--muted); font-size: 15rem; line-height: 22rem; }
.finance-link svg { width: 10rem; height: 18rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.earnings-grid { display: grid; grid-template-columns: 102rem 127rem minmax(0, 1fr); margin-top: 13rem; }
.earning { min-width: 0; }
.earning-label { display: flex; align-items: center; gap: 4rem; color: var(--muted); font-size: 12.667rem; line-height: 18rem; white-space: nowrap; }
.help-button { display: flex; align-items: center; justify-content: center; width: 11.667rem; height: 11.667rem; flex: 0 0 11.667rem; border: 1.333rem solid #6b6d77; border-radius: 50%; color: #6b6d77; font-size: 10rem; line-height: 1; font-weight: 600; }
.amount { display: flex; align-items: baseline; margin-top: 5rem; white-space: nowrap; font-size: 18.667rem; line-height: 25rem; font-weight: 400; font-variant-numeric: lining-nums; letter-spacing: -.25rem; }
.currency { margin-right: 0; font-size: 15.333rem; letter-spacing: -.7rem; }
.amount.is-compact { font-size: 14rem; }
.amount.is-compact .currency { font-size: 12rem; }
.amount.is-long { font-size: 10.333rem; letter-spacing: -.4rem; }
.amount.is-long .currency { margin-right: 0; font-size: 9rem; }

/* 功能图标直接使用截图原始图形，受众分析单独以高亮线稿呈现。 */
.feature-card { height: 122rem; margin-bottom: 8.667rem; padding: 17.333rem; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12.333rem -9rem 0; }
.feature { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 8rem; }
.feature img, .feature > svg { display: block; width: 28rem; height: 28rem; }
.feature span { white-space: nowrap; font-size: 13rem; line-height: 18rem; font-weight: 400; }
.audience-icon { stroke: #d1d2d6; stroke-width: 5; stroke-linejoin: round; }
.notice-banner { width: 100%; height: 79.333rem; object-fit: fill; border-radius: 14rem; }

.bottom-nav { z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--background); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2rem; align-self: start; padding-top: 5.333rem; color: #a6a7af; }
.nav-item > img, .nav-item > svg { display: block; width: 28rem; height: 28rem; }
.nav-item span { font-size: 10.667rem; line-height: 16rem; }
.nav-item.is-active { color: var(--accent); }
.nav-item .nav-alternate { display: none; }
#home-tab.is-active .nav-original, #task-tab.is-active .nav-original, #mine-tab:not(.is-active) .nav-original { display: none; }
#home-tab.is-active .nav-alternate, #task-tab.is-active .nav-alternate, #mine-tab:not(.is-active) .nav-alternate { display: block; }
.nav-alternate { fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.inactive-star { fill: currentColor; stroke-width: 1; }
.inactive-star .star-eyes { fill: none; stroke: var(--background); stroke-width: 4; stroke-linecap: round; }

/* 任务页只承担金额编辑；保存和返回行为均在本地完成。 */
.home-page, .task-page { padding: 21.333rem 8.667rem; }
.editor-card { padding: 7rem 17.333rem 17.333rem; }
.amount-field { display: block; padding: 15rem 0; border-bottom: 1rem solid #ffffff0c; }
.amount-field > span:first-child { display: block; margin-bottom: 10rem; color: var(--muted); font-size: 13rem; }
.input-wrap { display: flex; align-items: baseline; gap: 3rem; font-size: 19rem; }
.input-wrap > span { font-size: 15rem; }
.input-wrap input { width: 100%; min-width: 0; padding: 3rem 0; border: 0; border-radius: 0; outline: none; color: white; background: transparent; font-size: 23rem; caret-color: var(--accent); }
.input-wrap input[aria-invalid="true"] { color: #ff8f97; }
.amount-hint { min-height: 30rem; margin-top: 13rem; color: var(--muted); font-size: 11rem; line-height: 16rem; }
.amount-hint.is-error { color: #ff8f97; }
.return-button { width: 100%; min-height: 42rem; margin-top: 10rem; background: var(--accent); border-radius: 7rem; color: #161823; font-size: 14rem; font-weight: 600; }

/* 人员设置沿用金额编辑样式，头像选择保留原生文件控件的键盘可访问性。 */
.avatar-field, .profile-field { display: block; padding: 15rem 0; border-bottom: 1rem solid #ffffff0c; }
.field-label, .profile-field > span { display: block; margin-bottom: 10rem; color: var(--muted); font-size: 13rem; }
.avatar-picker { display: flex; align-items: center; gap: 17rem; }
.avatar-preview { width: 64rem; height: 64rem; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10rem; }
.avatar-upload { position: relative; padding: 7rem 13rem; border: 1rem solid #00fac744; border-radius: 5rem; color: var(--accent); background: #00fac70a; font-size: 12rem; cursor: pointer; }
.avatar-upload:focus-within { outline: 1.5rem solid var(--accent); outline-offset: 3rem; }
.avatar-reset { color: var(--muted); font-size: 11rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.profile-field > input { width: 100%; min-width: 0; padding: 3rem 0; border: 0; border-radius: 0; background: transparent; color: white; font-size: 18rem; line-height: 26rem; caret-color: var(--accent); }
.profile-field > input[aria-invalid="true"] { color: #ff8f97; }
.toast { position: absolute; z-index: 20; bottom: 105rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: 330rem; padding: 10rem 16rem; border-radius: 7rem; background: #05060ce8; color: #fff; font-size: 12rem; line-height: 18rem; text-align: center; pointer-events: none; }
.notification-dialog { width: 320rem; max-width: calc(100vw - 32rem); margin: auto; padding: 20rem; border: 1rem solid #373944; border-radius: 12rem; background: var(--card); color: var(--foreground); }
.notification-dialog::backdrop { background: #0007; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { font-size: 16rem; font-weight: 600; }
.dialog-heading button { width: 26rem; height: 26rem; color: var(--muted); font-size: 25rem; line-height: 26rem; }
.notification-dialog > p { padding: 28rem 0; color: var(--muted); font-size: 13rem; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  button { transition: opacity .12s ease; }
}