/* Tian Xin Island — one responsive web surface over the shared mini-program. */
:root {
  --mint-900:#695449; --mint-700:#38756b; --mint-500:#8dcbbd;
  --mint-300:#bfe5d9; --mint-100:#e7f4ee; --mint-50:#f4faf6; --mint-blue:#d6eee5;
  --cream:#fbf7ef; --surface:#fffdf8; --sand:#f0e6d7; --coffee:#695449;
  --ink:#51463c; --muted:#827366; --line:#e5ded2;
  --web-header-height:76px; --web-nav-safe-bottom:env(safe-area-inset-bottom,0px);
  --motion-fast:140ms; --motion-base:220ms; --motion-ease:cubic-bezier(.2,.7,.2,1);
}
html { background:var(--cream); scroll-padding-top:calc(var(--web-header-height) + 20px); }
body.web-preview {
  margin:0; color:var(--ink); font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(ellipse at 95% 72%,#e6f2e980,transparent 58%),var(--cream);
  -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
.web-preview *, .web-preview *::before, .web-preview *::after { box-sizing:border-box; }
.web-preview #app { width:100%; max-width:1180px; margin:0 auto; min-height:calc(100dvh - var(--web-header-height)); }
.web-header {
  display:flex; align-items:center; gap:24px; height:var(--web-header-height); padding:0 max(28px,env(safe-area-inset-right),calc((100vw - 1124px)/2)) 0 max(28px,env(safe-area-inset-left),calc((100vw - 1124px)/2));
  position:sticky; top:0; z-index:100; background:#fbf7eff2; border-bottom:1px solid #e5ded2a6; backdrop-filter:blur(18px);
}
.web-brand { display:flex; align-items:center; gap:12px; color:var(--coffee); text-decoration:none; flex-shrink:0; }
.web-brand img { display:block; width:42px; height:42px; border:2px solid #fffdf8; border-radius:50%; }
.web-brand>span { font-size:20px; font-weight:650; line-height:1.3; letter-spacing:1px; }
.web-brand small { display:block; color:var(--muted); font-size:8px; letter-spacing:2px; margin-top:4px; font-weight:500; }
.web-primary-nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.web-primary-nav a { display:flex; align-items:center; justify-content:center; min-width:80px; min-height:44px; padding:10px 18px; border:1px solid transparent; border-radius:12px; color:var(--muted); text-decoration:none; font-size:14px; white-space:nowrap; transition:background-color .18s,color .18s; }
.web-primary-nav a.active,.web-primary-nav a[aria-current=page] { color:var(--mint-700); background:var(--mint-100); border-color:#c8e4d8; font-weight:600; }
.web-location { display:flex; align-items:center; gap:10px; min-width:0; }
.web-location>span { display:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; color:var(--muted); }
.web-header button { background:transparent; color:var(--mint-700); min-height:44px; padding:8px 10px; font:inherit; font-size:13px; border:0; border-radius:10px; white-space:nowrap; cursor:pointer; }
#replay-welcome { padding-right:0; }
#replay-welcome span { margin-left:5px; }
.web-header [hidden],[hidden].web-welcome,#welcome-continue[hidden] { display:none!important; }
body:has(.island-account) .web-primary-nav { display:none; }
body:has(.island-account) .web-location { margin-left:auto; }
.web-preview #app>.page,.web-preview #app>block>.page { min-height:calc(100dvh - var(--web-header-height)); padding:32px 28px 48px; background:transparent; }
.web-preview #app>.home.home-page { padding:32px 28px 48px; background:transparent; }
.web-preview #app :is(.page-title,.data-title) { color:var(--coffee); font-weight:650; letter-spacing:.3px; line-height:1.4; }
.web-preview #app .page-title { font-size:27px; }
.web-preview #app .page-desc { font-size:14px; line-height:1.7; color:var(--muted); margin-top:8px; }
.web-preview #app .section-title { font-size:18px; font-weight:600; color:var(--coffee); }
.web-preview #app .card { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:24px; box-shadow:0 4px 20px #69544903; }
.web-preview #app :is(input,textarea,select) { font:inherit; color:var(--ink); }
.web-preview #app :is(.input,.textarea,.picker-box) { border:1px solid var(--line); background:var(--surface); border-radius:12px; min-height:48px; padding:13px 15px; }
.web-preview #app textarea { line-height:1.7; resize:vertical; max-width:100%; }
.web-preview #app .field-label { font-size:14px; margin-top:22px; margin-bottom:9px; font-weight:550; }
.web-preview #app .field-error { font-size:13px; }
.web-preview #app :is(input,textarea):focus-visible { outline:2px solid var(--mint-700); outline-offset:2px; box-shadow:0 0 0 5px #bfe5d930; }
.web-preview :is(button,[role=button],a):focus-visible { outline:2px solid var(--mint-700); outline-offset:3px; }
.web-preview #app .row-between { gap:14px; min-width:0; }
.web-preview #app .row-between>text,.web-preview #app .button-row>* { min-width:0; overflow-wrap:anywhere; }
.web-preview #app .page:not(.home-page) :is(.primary-btn,.soft-btn,.ghost-btn,.danger-btn) { min-height:48px; font-size:14px; border-radius:12px; padding:12px 18px; line-height:1.6; }
.web-preview #app .page:not(.home-page) .primary-btn { background:var(--mint-700); color:var(--surface); border:1px solid var(--mint-700); box-shadow:0 4px 14px #38756b0b; }
.web-preview #app .page:not(.home-page) .soft-btn { background:var(--mint-100); color:var(--mint-700); border:1px solid #cfe4d8; }
.web-preview #app .page:not(.home-page) .ghost-btn { background:var(--surface); color:var(--coffee); border:1px solid var(--line); }
.web-preview #app .page:not(.home-page) .danger-btn { border:1px solid #ebcfc6; background:#fcf1ed; color:#9a4f3e; }
.web-preview #app .empty { font-size:14px; line-height:1.8; padding:40px 20px; }
.web-preview #app :is(.section-heading,.desk-heading)>text:first-child { color:var(--coffee); font-weight:600; }
.web-preview #app>.page:is(.points-apply,.commerce-page,.rules-page,.rank-page,.detail-page,.countdown-page) { max-width:860px; margin:0 auto; }
.web-preview #app>.page:is(.profile-page,.reward-page,.news-page) { max-width:980px; margin:0 auto; }
.web-preview #app .filter-row { flex-wrap:wrap; gap:8px; }
.web-preview #app .filter-row :is(button,.filter,[role=button]) { min-height:44px; display:flex; align-items:center; justify-content:center; font-size:13px; padding:10px 16px; }
.web-preview #app .filter-row .active { background:var(--mint-100); color:var(--mint-700); }
/* Data uses the same warm canvas and water mint accents. */
.web-preview #app .data-title { font-size:30px; }
.web-preview #app .data-eyebrow { font-size:11px; }
.web-preview #app .data-subtitle { font-size:14px; }
.web-preview #app .data-status { font-size:13px; }
.web-preview #app .data-status button,.web-preview #app .douyin-footer button,.web-preview #app .data-checkin { min-height:44px; }
.web-preview #app .data-calendar { min-height:48px; font-size:14px; padding:12px 16px; }
.web-preview #app .data-dashboard { gap:22px; }
.web-preview #app :is(.douyin-panel,.weibo-panel) { border-radius:22px; padding:26px; }
.web-preview #app .douyin-panel { background:linear-gradient(135deg,#e0f2e9,#f5f7eb); }
.web-preview #app .weibo-panel { background:var(--surface); }
.web-preview #app .platform-meta { font-size:12px; }
.web-preview #app .platform-meta>view { font-size:16px; }
.web-preview #app .weibo-metric { padding:20px; min-height:154px; border-radius:16px; background:#fbf8f1; }
.web-preview #app .metric-card-head { font-size:14px; }
.web-preview #app .weibo-number>text:first-child { font-size:34px; }
.web-preview #app .metric-comparison { font-size:12px; }
.web-preview #app .douyin-number>text:first-child { font-size:56px; }
.web-preview #app .data-note>text { font-size:12px; }
.web-preview #app .data-note>text:first-child { font-size:14px; }
/* A calm workbench with clear actions, including on smaller screens. */
.web-preview .admin-exit-bar { background:#fffdf8f5; border-top:1px solid var(--line); backdrop-filter:blur(16px); z-index:40; }
.web-preview .admin-page .admin-head { background:linear-gradient(110deg,#f1e5d2,#fffaf0); border:1px solid var(--line); box-shadow:none; border-radius:22px; padding:24px; gap:18px; }
.web-preview .admin-page .admin-nickname { color:var(--coffee); font-size:15px; line-height:1.6; }
.web-preview .admin-page .user-total-card { background:linear-gradient(115deg,#dcefe5,#eff5e9); border:1px solid #cfe5da; border-radius:18px; padding:22px 24px; }
.web-preview .admin-page .user-total-number { font-size:36px; font-variant-numeric:tabular-nums; color:var(--mint-700); }
.web-preview .admin-page .desk-frequent button { padding:20px 22px; border-radius:18px; }
.web-preview .admin-page .desk-heading { gap:12px; align-items:center; }
.web-preview .admin-page .desk-heading>text:first-child { font-size:17px; }
.web-preview .admin-page .desk-inbox,.web-preview .admin-page .desk-list { border-color:var(--line); background:var(--surface); border-radius:14px; }
.web-preview .admin-page .desk-inbox-row,.web-preview .admin-page .desk-list .work-task { padding:16px; min-height:52px; }
.web-preview .admin-page .desk-grid .work-task { padding:18px; min-height:66px; border-radius:14px; }
.web-preview .admin-page .admin-task-head { position:sticky; top:var(--web-header-height); z-index:25; background:#fbf7eff5; backdrop-filter:blur(16px); padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:22px; gap:14px; }
.web-preview .admin-page .admin-task-head>text { font-size:22px; font-weight:600; color:var(--coffee); }
.web-preview .admin-page .focus-actions { max-width:1124px; border:1px solid var(--line); background:#fffdf8f5; backdrop-filter:blur(16px); padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; box-shadow:0 -6px 24px #345e430a; }
.web-preview .admin-page .review-reason-panel { max-width:580px; margin:auto; inset:24px 16px; height:fit-content; max-height:calc(100dvh - 48px); z-index:1400; border-radius:22px; padding:26px; background:var(--surface); }
.web-preview .admin-page .admin-exit-bar { max-width:1180px; padding:12px 28px calc(12px + env(safe-area-inset-bottom)); }
/* Responsive image viewers, selectors and consistent modal colors. */
.web-preview :is(.news-image-modal,.album-preview,.proof-modal) { z-index:1500; }
.web-preview :is(.news-image-modal,.album-preview,.proof-modal) button { max-width:720px; margin-left:auto; margin-right:auto; }
.web-preview .proof-modal .proof-tools { max-width:900px; width:100%; margin-left:auto; margin-right:auto; }
.web-preview :is(.news-image-modal,.album-preview) img { object-fit:contain; max-height:calc(100dvh - 110px); }
.web-preview .avatar-crop-panel { max-width:440px; width:100%; border:1px solid var(--line); background:var(--surface); }
.web-preview .choice-panel { max-width:600px; margin:0 auto; background:var(--surface); border:1px solid var(--line); box-shadow:0 -8px 40px #244d3614; }
.web-preview .choice-option { min-height:52px; font-size:15px; }
.web-preview .choice-close { min-width:44px; min-height:44px; width:44px; height:44px; line-height:44px; }
.web-preview .choice-calendar-heading button,.web-preview .choice-calendar-footer button,.web-preview .choice-back,.web-preview .choice-search button { min-height:44px; min-width:44px; }
.web-preview .choice-option.is-selected { background:var(--mint-100); color:var(--mint-700); }
.web-preview .choice-search { background:var(--cream); border-color:var(--line); }
.web-preview .choice-check,.web-preview .choice-back { color:var(--mint-700); }
.web-preview .choice-day { min-height:44px; color:var(--coffee); }
.web-preview .choice-day.is-selected { background:var(--mint-700); color:var(--surface); }
.web-preview .choice-calendar-heading button,.web-preview .choice-calendar-footer button { background:var(--mint-100); color:var(--mint-700); }
.web-preview .preview-dialog { background:var(--surface); color:var(--coffee); max-width:400px; padding:26px; }
.web-preview .preview-dialog h2 { font-size:20px; font-weight:600; }
.web-preview .dialog-actions button,.web-preview .choice-close,.web-preview .choice-cancel { background:var(--sand); color:var(--coffee); }
.web-preview .dialog-actions .confirm { background:var(--mint-700); color:var(--surface); }
.web-preview #feedback { max-width:480px; margin:0 auto; background:var(--coffee); color:var(--surface); bottom:24px; transform:translateY(6px); transition:opacity 170ms,transform 170ms var(--motion-ease); }
.web-preview #feedback.visible { transform:translateY(0); }
.web-preview #app .account-notice { font-size:13px; line-height:1.7; color:var(--mint-700); padding:12px 15px; border-radius:12px; background:var(--mint-100); margin:14px 0; }
.web-preview .rank-row,.web-preview .history-record,.web-preview .manage-item { scroll-margin-top:calc(var(--web-header-height) + 20px); }
.web-preview #app .screen-tabs { top:calc(var(--web-header-height) + 10px); padding:6px; border:1px solid var(--line); border-radius:16px; background:#f3ede2f5; backdrop-filter:blur(12px); gap:4px; }
.web-preview #app .screen-tabs button { border-radius:11px; min-height:44px; }
.web-preview #app .screen-tabs .selected { color:var(--mint-700); background:var(--surface); box-shadow:0 2px 7px #3a725308; }
.web-preview #app .province-grid { gap:14px; }
.web-preview #app .province-grid button { border-radius:18px; }
.web-preview #app .filter-row,.web-preview #app .screen-tabs { scrollbar-width:none; }
.web-preview .island-account { min-height:calc(100dvh - var(--web-header-height)); }
.web-preview:has(.island-account) #app { max-width:none; }
/* The supplied island art is the background; text and controls remain readable. */
.web-welcome { position:fixed; inset:0; z-index:1600; display:flex; align-items:center; overflow-y:auto; isolation:isolate; color:var(--coffee); background:linear-gradient(135deg,#fcf5e7,#f7f2e5 52%,#e0f1e8); }
.web-welcome::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#fcf5e7 2%,#fcf5e7f2 24%,#fbf4e4b8 43%,transparent 73%); }
.welcome-panel { position:relative; z-index:2; width:40%; max-width:460px; margin:44px auto 44px clamp(32px,8vw,130px); }
.welcome-eyebrow { font-size:11px; letter-spacing:3px; color:var(--mint-700); font-weight:600; }
.welcome-copy h1 { font-size:clamp(36px,4.4vw,64px); line-height:1.3; letter-spacing:1px; margin:24px 0; font-weight:600; color:var(--coffee); }
.welcome-copy p { font-size:16px; line-height:1.9; color:var(--muted); margin:0; }
.welcome-actions { display:flex; flex-direction:column; width:100%; max-width:350px; margin-top:40px; gap:12px; text-align:center; }
.welcome-actions button { width:100%; min-height:52px; padding:14px 20px; border-radius:15px; border:1px solid #e1dccf; font:inherit; font-size:15px; background:#fffdf8d9; color:var(--mint-700); cursor:pointer; }
.welcome-actions button:first-child { display:flex; align-items:center; justify-content:space-between; border-color:#bedecf; background:linear-gradient(110deg,#c4e9d9,#a9ddca); color:#315f53; font-weight:600; box-shadow:0 8px 24px #38756b0b; }
.welcome-actions #welcome-continue { min-height:40px; padding:8px 12px; border:0; background:transparent; font-size:13px; }
.welcome-actions small { display:none; }
.welcome-visual { position:absolute; inset:0 0 0 auto; z-index:0; width:75%; height:100%; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 28%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%); }
.welcome-art { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Reading sizes and touch areas are explicit on compact business screens. */
.web-preview .reward-head>text { font-size:26px; }
.web-preview .summary-label,.web-preview .summary-stats text,.web-preview .network-note,.web-preview .network-balances text:last-child { font-size:13px; }
.web-preview .reward-service-list>view { min-height:50px; font-size:15px; }
.web-preview .records-head text { font-size:18px; }
.web-preview .detail-row view text { font-size:14px; }
.web-preview .detail-row view text+text { font-size:13px; }
.web-preview .summary-stats>view { min-height:44px; }
.web-preview .report-toolbar { flex-wrap:wrap; }
.web-preview .report-date-controls button { min-width:44px; min-height:44px; }
.web-preview .report-date-controls .choice-trigger { min-height:44px; font-size:13px; }
.web-preview .report-history-button { min-height:44px; font-size:13px; }
.web-preview .report-history-button text,.web-preview .report-subtitle,.web-preview .report-date,.web-preview .report-date>text,.web-preview .report-status,.web-preview .report-footer>text { font-size:12px; }
.web-preview .report-title { font-size:20px; }
.web-preview .stat-label,.web-preview .report-columns,.web-preview .metric-name>text:first-child { font-size:13px; }
.web-preview .metric-name>text:last-child { font-size:11px; }
.web-preview .report-row { min-height:48px; }
.web-preview .report-current { font-size:15px; }
.web-preview .report-previous,.web-preview .report-delta { font-size:12px; }
.web-preview :is(.preview-dialog,.choice-panel) { overscroll-behavior:contain; }
.web-preview .preview-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
@media (max-width:999px), (pointer:coarse) {
  .web-preview #app input:not([type=checkbox]):not([type=range]),.web-preview #app textarea,.web-preview .choice-search input { font-size:16px; }
  .web-preview .web-brand,.web-preview .web-header button { min-height:44px; }
  .web-preview .web-header button { min-width:44px; }
}
html[data-keyboard-open] .web-preview #app .bottom-tabs { visibility:hidden; pointer-events:none; }
html[data-keyboard-open] .web-preview :is(.choice-overlay,.avatar-crop-overlay,.news-image-modal,.album-preview,.proof-modal) { top:var(--web-visual-top,0px); bottom:auto; height:var(--web-visual-height,100dvh); }
html[data-keyboard-open] .web-preview .choice-panel { max-height:calc(var(--web-visual-height,100dvh) - 12px); }
html[data-keyboard-open] .web-preview .choice-options { max-height:calc(var(--web-visual-height,100dvh) - 220px); min-height:52px; }
html[data-keyboard-open] .web-preview #feedback { bottom:calc(var(--web-keyboard-inset,0px) + 12px); }

/* Movement acknowledges interaction; it never changes navigation geometry. */
.web-preview :is(button,[role=button],a) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.web-preview :is(button,[role=button],.web-brand) { transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-base),transform var(--motion-fast) var(--motion-ease),opacity var(--motion-fast); }
.web-preview :is(button,[role=button]):not(:disabled):active { transform:translateY(1px); transition-duration:80ms; }
.web-preview :is(input,textarea,select) { transition:border-color var(--motion-fast),box-shadow var(--motion-fast); }
.web-preview .native-switch { transition:background-color var(--motion-base); }
.web-preview .native-switch:after { transition:left var(--motion-base) var(--motion-ease); }
.web-preview .native-switch:checked { background:var(--mint-700); }
@media (min-width:1000px) {
  .web-preview #app .bottom-tabs { display:none!important; }
  .web-preview #app .tab-space { padding-bottom:48px; }
  .web-preview #app .data-dashboard { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .web-preview #app .data-bottom { margin-top:28px; }
  .web-preview .admin-page .admin-exit-bar { display:flex; justify-content:flex-end; }
  .web-preview .admin-page .admin-exit-bar button { width:auto; min-width:180px; margin:0; }
  .web-preview .admin-page .focus-proofs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .web-preview .admin-page .focus-proofs img { height:430px; grid-column:auto; object-fit:contain; }
  .web-preview .admin-page .focus-proofs img:only-child { grid-column:1/-1; height:560px; }
  .web-preview .shop-page .goods-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .web-preview .screen-page .province-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .web-preview .photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .web-preview .photo-grid img { height:220px; }
  .web-preview .news-photo-grid.single img { max-height:420px; object-fit:contain; background:var(--cream); }
}
@media (min-width:700px) {
  .web-preview .choice-panel { bottom:auto; top:50%; transform:translateY(-50%); border-radius:24px; padding:20px 26px 24px; max-height:85dvh; }
  .web-preview .choice-options { max-height:50dvh; }
  .web-preview .choice-handle { display:none; }
}
@media (max-width:999px) {
  :root { --web-header-height:64px; }
  .web-header { padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left)); gap:16px; }
  .web-primary-nav { display:none; }
  .web-location { flex:1; justify-content:center; }
  .web-location>span { display:block; }
  .web-brand small { display:none; }
  .web-brand>span { font-size:18px; }
  .web-brand img { width:36px; height:36px; }
  .web-preview #app>.page,.web-preview #app>.home.home-page { padding:28px max(24px,env(safe-area-inset-right)) calc(104px + var(--web-nav-safe-bottom)) max(24px,env(safe-area-inset-left)); }
  .web-preview #app .bottom-tabs { position:fixed; inset:auto max(18px,env(safe-area-inset-right)) calc(10px + var(--web-nav-safe-bottom)) max(18px,env(safe-area-inset-left)); transform:none; z-index:80; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:0; width:auto; max-width:600px; height:70px; min-height:70px; max-height:70px; margin:0 auto; padding:5px; border:1px solid #e1dccf; border-radius:21px; background:#fffdf8f5; box-shadow:0 6px 28px #375c4810; backdrop-filter:blur(18px); }
  .web-preview #app .bottom-tabs .bottom-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:none; width:100%; min-width:0; height:58px; min-height:58px; max-height:58px; margin:0; padding:3px 0; border:1px solid transparent; border-radius:16px; background:transparent; color:var(--muted); font-family:inherit; font-size:12px; font-weight:500; line-height:17px; letter-spacing:0; text-align:center; overflow:hidden; cursor:pointer; }
  .web-preview #app .bottom-tabs .bottom-tab>text { display:block; width:100%; height:17px; min-height:17px; max-height:17px; margin:0; padding:0; font-size:12px; font-weight:500; line-height:17px; letter-spacing:0; white-space:nowrap; text-align:center; }
  .web-preview #app .bottom-tabs .bottom-tab-icon { display:flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; min-width:32px; min-height:32px; max-width:32px; max-height:32px; margin:0; padding:0; border:0; border-radius:0; background:transparent; transition:transform 180ms; }
  .web-preview #app .bottom-tabs .bottom-tab-icon img { display:block; width:32px; height:32px; min-width:32px; min-height:32px; max-width:32px; max-height:32px; margin:0; border:0; border-radius:0; object-fit:contain!important; }
  .web-preview #app .bottom-tabs .bottom-tab-icon>text { display:block; font-size:17px; line-height:32px; }
  .web-preview #app .bottom-tabs .bottom-tab.active { border-color:var(--mint-300); background:var(--mint-100); color:var(--mint-700); }
  .web-preview #app .bottom-tabs .bottom-tab.active>text { background:transparent; color:var(--mint-700); font-weight:500; }
  .web-preview #app .bottom-tabs .bottom-tab:active { transform:none; }
  .web-preview #app .bottom-tabs .bottom-tab:active .bottom-tab-icon { transform:scale(.94); }
  .web-preview #feedback { bottom:98px; }
  .web-preview #app .data-dashboard { grid-template-columns:minmax(0,1fr); }
  .web-preview #app .douyin-number>text:first-child { font-size:48px; }
  .web-preview .screen-page .province-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .welcome-panel { width:43%; margin-left:6vw; }
  .welcome-copy h1 { font-size:38px; }
  .welcome-copy p { font-size:14px; }
  .welcome-eyebrow { font-size:10px; letter-spacing:2px; }
  .welcome-visual { width:85%; }
  .welcome-actions { margin-top:30px; }
}
@media (max-width:699px) {
  :root { --web-header-height:60px; }
  .web-header { padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)); gap:10px; }
  .web-brand { gap:8px; }
  .web-brand>span { font-size:16px; }
  .web-brand img { width:32px; height:32px; }
  .web-header button { font-size:12px; padding:8px 6px; }
  #replay-welcome span { display:none; }
  .web-location { gap:4px; }
  .web-location>span { font-size:12px; max-width:108px; }
  .web-preview #app>.page,.web-preview #app>.home.home-page { padding:24px max(18px,env(safe-area-inset-right)) calc(104px + var(--web-nav-safe-bottom)) max(18px,env(safe-area-inset-left)); }
  .web-preview #app .page-title { font-size:23px; }
  .web-preview #app .page-desc { font-size:13px; }
  .web-preview #app .card { padding:20px; border-radius:18px; }
  .web-preview #app input:not([type=checkbox]):not([type=range]),.web-preview #app textarea { font-size:16px; }
  .web-preview #app .home-profile { padding:5px; border:0; min-height:44px; }
  .web-preview #app .home-quick-stats { margin-top:18px; }
  .web-preview #app .data-title { font-size:26px; }
  .web-preview #app .data-subtitle { font-size:13px; }
  .web-preview #app :is(.douyin-panel,.weibo-panel) { padding:20px; border-radius:20px; }
  .web-preview #app .weibo-metrics { gap:12px; }
  .web-preview #app .weibo-metric { padding:16px; min-height:130px; }
  .web-preview #app .weibo-number>text:first-child { font-size:29px; }
  .web-preview #app .metric-card-head { font-size:13px; }
  .web-preview #app .metric-comparison { font-size:12px; }
  .web-preview .admin-page .admin-head { padding:20px; gap:12px; }
  .web-preview .admin-page .admin-head .page-title { font-size:21px; }
  .web-preview .admin-page .desk-section { margin:24px 0; }
  .web-preview .admin-page .desk-heading>text:first-child { font-size:16px; }
  .web-preview .admin-page .admin-task-head>text { font-size:19px; }
  .web-preview .admin-page .admin-task-head>button { min-height:44px; }
  .web-preview .admin-page .focus-actions { left:8px; right:8px; padding:14px 12px calc(14px + env(safe-area-inset-bottom)); }
  .web-preview .admin-page .review-reason-panel { padding:22px; max-height:calc(100dvh - 32px); inset:16px; }
  .web-preview #app .button-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .web-preview #app .history-search { flex-wrap:wrap; }
  .web-preview #app .history-search .input { min-width:120px; }
  .web-preview .choice-panel { padding-left:20px; padding-right:20px; }
  .web-preview .screen-page .province-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .web-welcome { align-items:stretch; }
  .web-welcome::after { background:linear-gradient(180deg,#fcf5e7 1%,#fcf5e7e6 18%,transparent 42%,transparent 63%,#f8f2e4e6 83%,#f8f2e4); }
  .welcome-panel { width:calc(100% - 48px); max-width:none; margin:max(30px,env(safe-area-inset-top)) 24px max(22px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100dvh - 52px); }
  .welcome-copy h1 { font-size:34px; line-height:1.35; margin:14px 0; }
  .welcome-copy p { font-size:13px; }
  .welcome-eyebrow { font-size:10px; letter-spacing:2px; }
  .welcome-visual { inset:16% 0 15%; width:100%; height:69%; mask-image:linear-gradient(180deg,transparent,#000 18%,#000 84%,transparent); -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 84%,transparent); }
  .welcome-art { object-fit:contain; }
  .welcome-actions { align-self:center; max-width:380px; margin:240px 0 0; gap:10px; }
  .welcome-actions button { min-height:48px; font-size:14px; padding:13px 18px; border-radius:14px; }
  .welcome-actions #welcome-continue { min-height:36px; }
}
@media (max-width:359px) {
  .web-header { padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left)); gap:4px; }
  .web-brand { gap:6px; }
  .web-brand>span { font-size:15px; }
  .web-brand img { width:28px; height:28px; }
  .web-location>span { max-width:65px; }
  .web-preview #app>.page,.web-preview #app>.home.home-page { padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); }
  .welcome-copy h1 { font-size:29px; }
}
@media (max-height:600px) and (min-width:700px) {
  .welcome-panel { margin-top:22px; margin-bottom:22px; }
  .welcome-copy h1 { font-size:32px; margin:14px 0; }
  .welcome-copy p { font-size:13px; }
  .welcome-actions { margin-top:22px; gap:8px; }
  .welcome-actions button { min-height:44px; padding:11px 16px; font-size:13px; }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:999px) {
  :root { --web-header-height:52px; }
  .web-preview #app .bottom-tabs { height:56px; min-height:56px; max-height:56px; padding:4px; bottom:calc(6px + var(--web-nav-safe-bottom)); border-radius:17px; }
  .web-preview #app .bottom-tabs .bottom-tab { flex-direction:row; gap:8px; height:46px; min-height:46px; max-height:46px; border-radius:13px; }
  .web-preview #app .bottom-tabs .bottom-tab>text { width:auto; }
  .web-preview #app .bottom-tabs .bottom-tab-icon,.web-preview #app .bottom-tabs .bottom-tab-icon img { width:28px; min-width:28px; max-width:28px; height:28px; min-height:28px; max-height:28px; flex-basis:28px; }
  .web-preview #app>.page,.web-preview #app>.home.home-page { padding-top:20px; padding-bottom:calc(82px + var(--web-nav-safe-bottom)); }
  .web-preview .choice-panel { max-height:calc(100dvh - 16px); overflow-y:auto; }
  .web-preview .choice-options { flex-shrink:0; max-height:140px; }
  .web-preview .choice-heading { margin-bottom:12px; }
  .web-preview .choice-calendar-grid { gap:2px; }
  .web-preview .choice-day { min-height:44px; height:44px; line-height:44px; }
}

@media (hover:hover) {
  .web-primary-nav a:hover { background:var(--mint-100); color:var(--mint-700); }
  .web-preview #app :is(.feature-card,.home-countdown,.screen-summary,.work-task,.settings-row):hover { transform:translateY(-2px); box-shadow:0 6px 18px #69544909; }
  .web-preview #app :is(.feature-card,.home-countdown,.screen-summary,.work-task,.settings-row):active { transform:translateY(0); }
  .web-preview #app :is(.settings-row,.project-option,.province-grid button):hover { background:var(--mint-100); }
  .web-preview :is(.primary-btn,.home-primary,.welcome-actions button:first-child):hover { box-shadow:0 6px 18px #38756b1a; filter:brightness(1.025); }
}
@media (prefers-reduced-motion:reduce) {
  .web-preview *,.web-preview *::before,.web-preview *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:0s!important; scroll-behavior:auto!important; }
  .web-preview #app :is(.feature-card,.home-countdown,.screen-summary,.work-task,.settings-row):hover,.web-preview :is(button,[role=button]):not(:disabled):active { transform:none!important; }
}
/* Dedicated collector-only installations retain their explicit limited mode. */
.metrics-only #welcome-register,.metrics-only #welcome-login,.metrics-only .web-primary-nav { display:none!important; }
body.web-preview.metrics-only #app>.page:has(.bottom-tabs) { padding-bottom:32px; }

/* The admin workspace owns its spacing; only review actions stay fixed. */
.web-preview #app>.admin-overview { display:block; width:100%; max-width:880px; margin:0 auto; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); }
.web-preview #app>.admin-editor { padding:24px 18px calc(32px + env(safe-area-inset-bottom)); }
.web-preview #app>.admin-editor:has(.focus-actions) { padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
.web-preview .admin-page .admin-task-head { position:static; flex-direction:row; align-items:flex-start; padding:0 0 18px; margin-bottom:20px; background:transparent; backdrop-filter:none; gap:14px; }
.web-preview .admin-page .admin-exit-bar { position:static; width:100%; max-width:none; padding:24px 0 0; background:transparent; border:0; backdrop-filter:none; transform:none; }
.web-preview:has(.admin-page) #replay-welcome { display:none; }
.web-preview:has(.admin-overview) .web-location>span { display:none; }
@media(max-width:999px) { .web-preview:has(.admin-page) .web-location { flex:initial; margin-left:auto; } }

@media(min-width:900px),(min-width:760px) and (max-height:500px) {
 .web-preview #app>.admin-overview { max-width:1120px; padding:22px 28px 24px; }
 .web-preview:has(.admin-page) { --web-header-height:60px; }
 .web-preview:has(.admin-page) .web-brand img { width:34px; height:34px; }
 .web-preview:has(.admin-page) .web-brand>span { font-size:17px; }
 .web-preview:has(.admin-page) .web-brand small { font-size:7px; margin-top:2px; }
}
/* The homepage has its own compact grid instead of enlarged phone dimensions. */
.web-preview #app>.home.home-page { max-width:1120px; min-height:calc(100dvh - var(--web-header-height)); padding:22px 28px 32px; }
.web-preview:has(.home-page) { --web-header-height:64px; }
.web-preview:has(.home-page) .web-brand img { width:34px; height:34px; }
.web-preview:has(.home-page) .web-brand>span { font-size:17px; }
@media(max-width:699px) { .web-preview #app>.home.home-page { padding:20px 16px calc(100px + env(safe-area-inset-bottom)); } }
@media(min-width:700px) and (max-width:999px) { .web-preview #app>.home.home-page { padding-bottom:calc(100px + env(safe-area-inset-bottom)); } }
/* Editing controls stay touchable without enlarging the desktop workspace. */
.web-preview .admin-page .desk-fast-switch button,.web-preview .admin-page .today-editor .entry-batch-toggle { min-height:44px; }
@media(max-width:899px),(pointer:coarse) {
 .admin-overview .console-tabs>button,.admin-overview .console-footer>button { min-height:44px; }
 .web-preview .admin-page .public-event-delete { min-height:44px; min-width:44px; }
}
@media(max-width:359px) { .web-preview .today-editor-heading { flex-direction:column; gap:10px; align-items:flex-start; } }

.web-preview:has(.home-page) .web-location>span{display:none}
.web-preview:has(.home-page) .web-location{flex:initial;margin-left:auto}
.web-preview #app .feature-unavailable{display:grid;place-items:center;text-align:center;color:var(--muted);min-height:calc(100dvh - var(--web-header-height));padding:32px}