...
Parent must be position:relative. transform-origin set to top center.
*/
.t-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 6px;
min-width: 140px;
box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
transform-origin: top center;
transform: scale(var(--dropdown-pre-scale));
opacity: 0;
pointer-events: none;
transition:
transform var(--dropdown-open-dur) var(--dropdown-ease),
opacity var(--dropdown-open-dur) var(--dropdown-ease);
will-change: transform, opacity;
z-index: 200;
}
.t-dropdown[data-open="true"] {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
.t-dropdown[data-open="false"] {
transform: scale(var(--dropdown-closing-scale));
opacity: 0;
pointer-events: none;
transition:
transform var(--dropdown-close-dur) var(--dropdown-ease),
opacity var(--dropdown-close-dur) var(--dropdown-ease);
}
/* ── P6: Text states swap (submit button loading) ──
Usage:
提交成功后显示 ✓ 打勾动画，比 alert 更优雅。
*/
.t-success-icon { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; }
.t-success-icon[data-show="true"] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(40, 28, 20, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: t-success-bg-in 0.3s ease forwards; }
.t-success-icon[data-show="false"] { display: none; }
@keyframes t-success-bg-in {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes t-success-bg-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.85); }
}
.t-success-circle {
width: 72px; height: 72px; border-radius: 50%;
background: #fff; box-shadow: 0 4px 24px rgba(139,99,71,.25);
display: flex; align-items: center; justify-content: center;
}
.t-success-check {
width: 40px; height: 40px;
}
.t-success-check .check-path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
stroke: #16a34a;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
animation: t-check-draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes t-check-draw {
to { stroke-dashoffset: 0; }
}
.t-success-ring {
stroke: #e8f5e9;
stroke-width: 4;
fill: none;
transform-origin: center;
animation: t-ring-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes t-ring-pop {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.t-success-label {
font-size: 14px; font-weight: 600; color: #5c4033;
animation: t-success-label-in 0.3s ease 0.3s both;
}
@keyframes t-success-label-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── t-sheet: wrapper for overlay + panel (slide-up sheets) ── */
.t-sheet {
display: none;
}
.t-sheet[data-open="true"] {
display: flex;
}
/* ── P3: Panel reveal (from below) ──
Usage:
...
Slides up from below with opacity + blur fade.
*/
@keyframes t-panel-in {
from { transform: translateY(calc(var(--panel-dist, 40px))); opacity: 0; filter: blur(var(--panel-blur)); }
to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.t-panel {
transform: translateY(var(--panel-dist, 40px));
opacity: 0;
filter: blur(var(--panel-blur));
pointer-events: none;
transition:
transform var(--panel-close-dur) var(--panel-ease),
opacity var(--panel-close-dur) var(--panel-ease),
filter var(--panel-close-dur) var(--panel-ease),
visibility 0ms;
visibility: hidden;
will-change: transform, opacity, filter;
}
.t-sheet[data-open="true"] .t-panel {
transform: translateY(0);
opacity: 1;
filter: blur(0);
pointer-events: auto;
transition:
transform var(--panel-open-dur) var(--panel-ease),
opacity var(--panel-open-dur) var(--panel-ease),
filter var(--panel-open-dur) var(--panel-ease),
visibility 0ms var(--panel-open-dur);
visibility: visible;
}
/* hotGoodsDetail 全屏：直接 display 控制，不用 t-sheet 动画 */
#hotGoodsDetailOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 9600;
align-items: stretch;
}
#hotGoodsDetailOverlay.open {
display: flex !important;
width: 100vw !important;
height: 100vh !important;
}
#hotGoodsDetailPanel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
Toggle data-active to switch.
*/
.t-icon-swap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 80px;
min-height: 24px;
}
.t-icon-swap > * {
position: absolute;
transition:
opacity var(--icon-swap-dur) var(--icon-swap-ease),
filter var(--icon-swap-dur) var(--icon-swap-ease),
transform var(--icon-swap-dur) var(--icon-swap-ease);
will-change: opacity, filter, transform;
}
.t-icon-swap .icon-text {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
.t-icon-swap .icon-spinner {
opacity: 0;
filter: blur(var(--icon-swap-blur));
transform: scale(var(--icon-swap-start-scale));
font-size: 18px;
}
.t-icon-swap[data-active="spinner"] .icon-text {
opacity: 0;
filter: blur(var(--icon-swap-blur));
transform: scale(var(--icon-swap-start-scale));
}
.t-icon-swap[data-active="spinner"] .icon-spinner {
opacity: 1;
filter: blur(0);
transform: scale(1);
animation: spin 0.7s linear infinite;
}
/* ── Number pop-in (score badge) ──
Usage:
85
JS: remove .is-animating → change text → reflow → add .is-animating
*/
@keyframes t-digit-pop-in {
0% { transform: translateY(calc(var(--digit-distance) * 1)); opacity: 0; filter: blur(var(--digit-blur, 2px)); }
100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
display: inline-flex;
align-items: baseline;
}
.t-digit {
display: inline-block;
will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit:nth-child(1) { animation-delay: calc(var(--digit-stagger) * 0); }
.t-digit-group.is-animating .t-digit:nth-child(2) { animation-delay: calc(var(--digit-stagger) * 1); }
.t-digit-group.is-animating .t-digit:nth-child(3) { animation-delay: calc(var(--digit-stagger) * 2); }
/* ── Page slide (tab switching) ──
Usage:
Slides left (forward) or right (back) with blur.
*/
@keyframes t-page-enter {
from { transform: translateX(var(--enter-x, 20px)); opacity: 0; filter: blur(var(--page-slide-blur)); }
to { transform: translateX(0); opacity: 1; filter: blur(0); }
}
@keyframes t-page-exit {
from { transform: translateX(0); opacity: 1; filter: blur(0); }
to { transform: translateX(var(--exit-x, -20px)); opacity: 0; filter: blur(var(--page-slide-blur)); }
}
.t-page {
animation: t-page-exit var(--page-slide-dur) var(--page-slide-ease) both;
}
.t-page.is-entering {
animation: t-page-enter var(--page-slide-dur) var(--page-slide-ease) both;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.t-badge, .t-badge-dot,
.t-dropdown, .t-panel,
.t-text-swap, .t-icon-swap > *,
.t-digit-group.is-animating .t-digit,
.t-page, .t-page.is-entering,
.t-modal, .t-modal-overlay { animation: none !important; transition: none !important; }
}
/* ================================================================
LEGACY ANIMATIONS (kept for boot sequence)
================================================================ */
/* Boot sequence: fade + slide up, staggered */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.boot-1 { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.1s; }
.boot-2 { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.25s; }
.boot-3 { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.4s; }
.boot-4 { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.55s; }
.boot-5 { animation: fadeSlideUp 0.4s ease both; animation-delay: 0.7s; }
/* Card entrance: slide up on appear */
@keyframes cardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.card-in { animation: cardIn 0.3s ease both; }
/* 点赞心脏动画 */
@keyframes heart-pop {
0% { transform: scale(1); }
30% { transform: scale(1.55); }
60% { transform: scale(0.9); }
80% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes heart-shake {
0%,100% { transform: rotate(0deg); }
20% { transform: rotate(-15deg) scale(1.4); }
40% { transform: rotate(12deg) scale(1.2); }
60% { transform: rotate(-8deg) scale(1.1); }
80% { transform: rotate(5deg) scale(1.05); }
}
@keyframes heart-unlike {
0% { transform: scale(1); }
40% { transform: scale(0.7); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.heart-pop { animation: heart-pop 0.55s ease both; }
.heart-shake { animation: heart-shake 0.55s ease both; }
.heart-unlike { animation: heart-unlike 0.4s ease both; }
@keyframes avatar-appear {
from { transform: scale(0) translateX(-6px); opacity: 0; }
to { transform: scale(1) translateX(0); opacity: 1; }
}
.avatar-pop { animation: avatar-appear 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
/* 点赞按钮上方 +1 飞起 */
@keyframes float-up {
0% { opacity:0; transform: translateY(8px) scale(0.7); }
18% { opacity:1; transform: translateY(-2px) scale(1.15); }
100% { opacity:0; transform: translateY(-32px) scale(1); }
}
/* 上方头像堆涟漪（从按钮中心散开） */
@keyframes avatar-ripple {
0% { box-shadow: 0 0 0 0 rgba(224,36,94,.45); }
100% { box-shadow: 0 0 0 14px rgba(224,36,94,0); }
}
/* Typing caret */
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.caret {
display: inline-block;
width: 8px; height: 16px;
background: #1a1a1a;
vertical-align: middle;
margin-left: 2px;
animation: blink 1s step-end infinite;
}
.caret-blue { background: #2563eb; }
/* Breathing pulse (status dot) */
@keyframes breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.pulse { animation: breathe 2.5s ease-in-out infinite; }
/* Loading dots */
@keyframes load1 { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes load2 { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes load3 { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.ldots::after { content: ''; display: inline-block; }
.ldots { font-family: monospace; letter-spacing: 1px; }
.ldots[data-v="0"]::after { content: ' '; animation: load1 1.2s ease infinite; }
.ldots[data-v="1"]::after { content: '. '; animation: load1 1.2s ease 0.2s infinite; }
.ldots[data-v="2"]::after { content: '.. '; animation: load2 1.2s ease 0.4s infinite; }
.ldots[data-v="3"]::after { content: '...'; animation: load3 1.2s ease 0.6s infinite; }
/* Button press feedback */
.btn:active { transform: scale(0.97); }
.btn { transition: transform 0.1s, background 0.15s, opacity 0.15s; }
/* Hover nudge for links/chips */
a:hover, .chip:hover { opacity: 0.75; }
/* Type card hover lift */
.type-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.type-card { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
/* 首页信息流 */
.home-section { margin-bottom: 20px; }
.home-section-title { font-size: 13px; font-weight: 600; color: #5c4033; margin-bottom: 8px; padding-left: 2px; }
.home-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: pointer; transition: transform .15s; }
.home-card:active { transform: scale(.98); }
.home-card-urgent { border-left: 3px solid #dc2626; }
/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #e5e7eb; border-top-color: #6b7280; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 4px; }
/* Page transition: slide left */
@keyframes slideLeft { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.slide-left { animation: slideLeft 0.25s ease both; }
/* Success flash */
@keyframes flashGreen { 0%, 100% { background: #fff; } 30% { background: #f0fdf4; } }
.flash-ok { animation: flashGreen 0.6s ease; }
/* Error flash (warm border) */
@keyframes flashRed {
0%, 100% { border-color: #8b6347; }
40% { border-color: #dc2626; background: rgba(220,38,38,0.05); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* === TYPOGRAPHY === */
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: -0.3px; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-muted { color: #9ca3af; }
.text-center { text-align: center; }
/* === LAYOUT === */
:root {
/* 内容区标准间距（列表/导航栏与topbar的距离） */
--content-gap: 14px;
}
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.w-full { width: 100%; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
/* === LOGIN BOOT SEQUENCE === */
.boot-screen {
min-height: 100vh;
background: #faf3eb;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
color: #5c4033;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.boot-logo {
width: 56px; height: 56px;
background: #f5e6d3;
border: 1px solid #d4b896;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
margin-bottom: 32px;
white-space: pre;
}
.boot-line {
font-size: 12px;
color: #a08060;
margin-bottom: 6px;
letter-spacing: 0.5px;
white-space: pre;
}
.boot-line .ok { color: #16a34a; }
.boot-line .err { color: #dc2626; }
.boot-progress {
width: 200px; height: 2px;
background: #d4b896;
border-radius: 1px;
margin-top: 20px;
overflow: hidden;
}
.boot-bar {
height: 100%;
background: #a08060;
border-radius: 1px;
transition: width 0.3s ease;
}
.boot-caret { display: inline-block; width: 7px; height: 13px; background: #a08060; vertical-align: middle; animation: blink 1s step-end infinite; margin-left: 2px; }
/* === RESPONSIVE === */
@media (max-width: 400px) {
.topbar { padding: 10px 12px; }
.tab-btn { font-size: 12px; padding: 10px 0; }
.type-card { padding: 12px 8px; }
.type-card .icon { font-size: 22px; }
}
/* 隐藏"即将上线"的disabled遮罩，让文字可见 */
.type-card.disabled {
opacity: 0.55;
}
/* === 问题录入 === */
.btn-add-problem{width:100%;padding:10px;border:1.5px dashed #d4b896;border-radius:8px;background:#faf3eb;color:#8b6347;font-size:13px;cursor:pointer;margin-top:14px}
.btn-add-problem:active{background:#f0ebe3}
.problem-row{background:#faf6f2;border:1px solid #e8d5c4;border-radius:10px;padding:14px;margin-bottom:12px;position:relative}
.problem-row .row-delete{position:absolute;top:10px;right:10px;color:#b8956a;font-size:16px;cursor:pointer}
.problem-row textarea{width:100%;border:1px solid #d4b896;border-radius:8px;padding:10px 12px;font-size:13px;resize:vertical;min-height:70px;box-sizing:border-box;margin-top:8px;background:#fff;color:#3d2b1f}
.prob-category-row{margin-bottom:12px;margin-top:12px}
.prob-cat-select{width:100%;border:1px solid #d4b896;border-radius:8px;padding:9px 12px;font-size:13px;background:#fff;color:#3d2b1f}
.urgency-section{margin-top:14px}
.urgency-label{font-size:12px;color:#8b6347;font-weight:600;margin-bottom:7px;display:block}
.urgency-row{display:flex;gap:6px;flex-wrap:wrap}
.urgency-btn{
flex:1;padding:7px 4px;border:1px solid #e8d5c4;border-radius:20px;
background:#fff;font-size:12px;cursor:pointer;color:#8b6347;
display:flex;align-items:center;justify-content:center;gap:4px;
transition:all .15s;min-width:0;white-space:nowrap
}
.urgency-btn .u-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.urgency-btn.selected{background:#8b6347;color:#fff;border-color:#8b6347;font-weight:600}
.urgency-btn.selected .u-dot{background:#fff!important}
.u-dot-low{background:#16a34a}
.u-dot-normal{background:#ca8a04}
.u-dot-high{background:#ea580c}
.u-dot-critical{background:#dc2626}
.problem-row .due-date-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.problem-row .due-date-row label{font-size:12px;color:#8b6347;font-weight:600;white-space:nowrap}
.problem-row .due-date-row input{flex:1;border:1px solid #d4b896;border-radius:8px;padding:9px 12px;font-size:12px;background:#fff;color:#3d2b1f}
.problem-row .assignee-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.problem-row .assignee-row label{font-size:12px;color:#8b6347;font-weight:600;white-space:nowrap}
.problem-row .assignee-row select{flex:1;border:1px solid #d4b896;border-radius:8px;padding:9px 12px;font-size:12px;background:#fff;color:#3d2b1f}
/* === 学习计划时间轴 === */
.study-plan-timeline-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-bottom:2px}
.study-plan-timeline-wrap::-webkit-scrollbar{height:0}
.study-plan-timeline{display:flex;align-items:flex-start;gap:0;min-width:max-content;padding:4px 0}
.tl-phase{display:flex;flex-direction:column;align-items:center;min-width:100px;position:relative}
.tl-phase + .tl-phase::before{content:'';position:absolute;top:16px;left:-12px;width:24px;height:2px;background:#e8d5c4;z-index:0}
.tl-phase.active + .tl-phase::before,.tl-phase.completed + .tl-phase::before{background:#8b6347}
.tl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;position:relative;z-index:1;transition:all .2s;border:2.5px solid #e8d5c4;background:#fff;color:#c4b8a8}
.tl-phase.active .tl-dot{border-color:#8b6347;background:#8b6347;color:#fff;box-shadow:0 0 0 4px rgba(139,99,71,.18);transform:scale(1.15)}
.tl-phase.completed .tl-dot{border-color:#16a34a;background:#16a34a;color:#fff}
.tl-phase.pending .tl-dot{opacity:.6}
.tl-phase-info{text-align:center;margin-top:8px;max-width:100px}
.tl-phase-name{font-size:12px;font-weight:600;color:#5c4033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-phase.active .tl-phase-name{color:#8b6347}
.tl-phase.completed .tl-phase-name{color:#16a34a}
.tl-phase-deadline{font-size:10px;color:#b0a090;margin-top:2px;white-space:nowrap}
.tl-phase-target{font-size:11px;color:#a08060;margin-top:4px;max-width:90px;line-height:1.4;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-confirm-btn{margin-top:8px;background:#8b6347;color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;transition:background .15s;white-space:nowrap}
.tl-confirm-btn:active{background:#6b4a35}
.tl-confirm-btn:disabled{background:#c4b8a8;cursor:not-allowed}
.study-plan-empty{text-align:center;padding:16px;font-size:12px;color:#b0a090}
/* v2026-06-25 块2: 设备自适应 - 设备差异显示不同登录按钮
* 手机端(max-width: 768px): login + 人脸/指纹(扫码是死结)
* 电脑端(min-width: 769px): login + 微信扫码(本机用账号密码,跨设备扫码更优) */
.desktop-only { display: flex; }
.mobile-only { display: none; }
@media (max-width: 768px) {
.desktop-only { display: none !important; }
.mobile-only { display: flex !important; }
}
/* CSS block 2 */
.sub-badge { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:white;font-size:10px;font-weight:700;padding:0 4px;margin-left:4px }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes popIn { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUpToast { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* CSS block 3 */
#mainPage > *:not(.topbar):not(.tabs) {
max-width: 540px;
margin: 0 auto;
padding: 0 12px;
}
/* === 主滚动容器 === */
.app-layout {
position: fixed !important;
top: calc(56px + env(safe-area-inset-top)) !important;
height: calc(100vh - 56px - 62px - env(safe-area-inset-top)) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 540px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
box-sizing: border-box !important;
}
html{height:100%;overflow:hidden}
body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Helvetica,Arial,sans-serif;background:#faf3eb;color:#5c4033;font-size:14px;-webkit-font-smoothing:antialiased}
#home-tab.tab-content { flex: none !important; overflow: visible !important; height: auto !important; min-height: 0 !important; padding-top: 0 !important; }
.tab-content { display: none; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.tab-content.active { display: flex; scroll-padding-bottom: 80px; }
/* === 我的页面：mine-tab 填满剩余空间并内部滚动，子tab sticky 贴顶 === */
#mine-tab.tab-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 14px; padding-bottom: 80px; overscroll-behavior: contain; }
/* v2026-06-14: profilePanel 是 mine-tab 的 flex child,默认 flex-shrink:1 会压缩内容不滚;改成 shrink:0 让 panel 撑出真实高度触发滚动 */
#mine-tab.tab-content > div { flex-shrink: 0; }
#mineSubTabs { position: sticky; top: 0; z-index: 99; flex-shrink: 0; background: #fff; display: none; }
#mine-tab.active #mineSubTabs { display: block; }
/* === 待审批页面 === */
#pending-tab.tab-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 14px; }
/* === 待审批专属 sub-tab 样式（v2026-06-08 视觉重做） ===
背景：白底；未选：浅米色；选中：浅米色 + 棕色下边线 + 棕色文字
不再使用 #8b6347 实底大色块，避免与下方白色大圆角卡片冲突
*/
#pending-tab .sub-tab-btn {
background: #faf3eb;
color: #a08060;
border-radius: 10px;
font-weight: 500;
height: 40px;
transition: background .15s, color .15s;
}
#pending-tab .sub-tab-btn.active {
background: #fff;
color: #5c4033;
font-weight: 700;
box-shadow: inset 0 -3px 0 #8b6347;
}
#pending-tab .sub-tab-btn:active {
background: #f0e6dc;
}
/* === 历史记录筛选栏 === */
.filter-bar {
background: #fff;
border: 1px solid #e8d5c4;
border-radius: 10px;
padding: 12px;
/* margin-top 由各面板 inline 单独控制，避免叠加 */
}
.filter-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.filter-row:last-child { margin-bottom: 0; }
.filter-select, .filter-input {
flex: 1;
height: 36px;
padding: 0 10px;
border: 1px solid #d4b896;
border-radius: 8px;
background: #faf3eb;
color: #5c4033;
font-size: 13px;
outline: none;
}
.filter-select:focus, .filter-input:focus {
border-color: #8b6347;
}
.btn-filter-apply {
width: 100%;
height: 38px;
background: #8b6347;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
margin-top: 4px;
}
.btn-filter-apply:active { background: #6b4a35; }
/* === 审批卡片新样式（参考考试卡片） === */
.approval-card {
background: #fff;
border-radius: 14px;
padding: 14px 16px 12px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
cursor: pointer;
border: 1px solid rgba(232,213,196,.6);
}
.ac-top {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.ac-type-tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
flex-shrink: 0;
}
.ac-title {
font-size: 14px;
font-weight: 700;
color: #3d2b1f;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ac-status {
font-size: 12px;
padding: 2px 9px;
border-radius: 10px;
background: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
font-weight: 600;
flex-shrink: 0;
}
.ac-detail-btn {
background: none;
border: none;
color: #b0a090;
font-size: 12px;
cursor: pointer;
padding: 2px 4px;
flex-shrink: 0;
}
.ac-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
margin-bottom: 10px;
}
.ac-info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
border-bottom: 1px solid #f5efe6;
}
.ac-info-label { color: #b0a090; font-size: 12px; }
.ac-info-value { color: #5c4033; font-size: 13px; font-weight: 600; }
.ac-info-blue { color: #1d4ed8; }
.ac-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.ac-btn-approve {
flex: 1;
height: 42px;
background: #16a34a;
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.ac-btn-approve:active { background: #15803d; }
.ac-btn-reject {
flex: 1;
height: 42px;
background: #fff;
color: #dc2626;
border: 1.5px solid #dc2626;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.ac-btn-reject:active { background: #fef2f2; }
/* === 公告卡片新样式（参考审批卡片） === */
.ann-card {
background: #fff;
border-radius: 14px;
padding: 14px 16px 12px;
margin-bottom: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
cursor: pointer;
border: 1px solid rgba(232,213,196,.6);
}
.ann-top {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.ann-type-tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
flex-shrink: 0;
}
.ann-title {
font-size: 14px;
font-weight: 600;
color: #3d2b1f;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ann-pinned {
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
background: #8b6347;
color: #fff;
font-weight: 700;
flex-shrink: 0;
}
.ann-meta {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #b0a090;
}
.ann-meta-sep { color: #d4c4b0; }
.ann-confirm-tag { color: #f97316; font-weight: 600; }
/* 公告横滚单行 ticker（无标题版） */
.ann-ticker-wrap {
display: flex; align-items: center; gap: 0;
background: #fff; border-radius: 10px;
padding: 8px 12px; margin-bottom: 8px;
}
.ann-ticker-track {
flex: 1; height: 24px; overflow: hidden; position: relative; min-width: 0;
}
.ann-ticker-inner {
transition: transform 0.25s ease;
}
.ann-ticker-item {
height: 24px; display: flex; align-items: center; gap: 4px;
white-space: nowrap; overflow: hidden; cursor: pointer;
}
.ann-ticker-item:active { opacity: 0.7; }
.ann-ticker-title {
font-size: 13px; font-weight: 600; color: #333; flex-shrink: 0; line-height: 1;
}
.ann-ticker-title.urgent { color: #dc2626; }
.ann-ticker-sep { color: #d4c4b0; font-size: 12px; flex-shrink: 0; line-height: 1; }
.ann-ticker-content {
font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; line-height: 1;
}
.ann-ticker-tags { display: flex; gap: 3px; flex-shrink: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; }
.ann-ticker-tags::-webkit-scrollbar { display: none; }
.ann-ticker-tag {
font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; line-height: 1;
}
.ann-ticker-time {
font-size: 11px; color: #bbb; flex-shrink: 0; line-height: 1;
}
.ann-ticker-all {
font-size: 13px; color: #8b6347; font-weight: 600;
flex-shrink: 0; cursor: pointer; white-space: nowrap; padding-left: 8px;
}
/* 公告列表 sheet */
.ann-list-item {
display: flex; align-items: center; gap: 10px; padding: 14px 16px;
border-bottom: 1px solid #f5f0ea; cursor: pointer; background: #faf3eb;
}
.ann-list-item:active { background: #f0ebe3; }
.ann-list-item:last-child { border-bottom: none; }
.ann-list-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.ann-list-dot.read { background: transparent; border: 2px solid #d4c8bc; }
/* --- 我的 tab 子标签 --- */
.mine-sub-tabs {
display: flex;
background: transparent;
border: 1px solid #e8d5c4;
border-radius: 10px;
margin-bottom: 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none; /* Firefox */
-webkit-overflow-scrolling: touch;
/* sticky 吸附在顶部，跟随页面滚动但不会超出 topbar */
position: sticky;
top: calc(env(safe-area-inset-top) + 58px + var(--content-gap));
z-index: 10;
/* 移除 margin-top，padding 调整间距 */
margin-top: var(--content-gap);
background: transparent;
}
/* Chrome/Safari 隐藏滚动条 */
.mine-sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-btn {
flex: 0 0 auto;
height: 38px;
padding: 0 12px;
border: none;
background: #fff;
color: #a08060;
font-size: 13px;
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
}
.sub-tab-btn.active {
background: #8b6347;
color: #fff;
font-weight: 600;
}
/* 「更多」按钮：右侧带分隔 + 图标风格（v2026-06-08 mine 重构） */
.sub-tab-btn.mine-more-btn {
margin-left: auto; /* 推到最右 */
color: #8b6347;
font-weight: 600;
background: #faf3eb;
display: flex;
align-items: center;
gap: 4px;
border-left: 1px solid #e8d5c4;
border-radius: 0 10px 10px 0;
padding: 0 14px;
}
.sub-tab-btn.mine-more-btn.active {
background: #8b6347;
color: #fff;
border-left-color: #8b6347;
}
.sub-tab-btn.mine-more-btn:active {
background: #f0e6dc;
}
/* sheet 内「设置」单列卡片横向布局（覆盖默认 column） */
.apply-type-card[onclick*="settings"][style*="flex-direction:row"] {
flex-direction: row;
align-items: center;
gap: 12px;
min-height: 64px;
}
.progress-tab-btn {
flex: 1;
height: 28px;
border: none;
background: transparent;
color: #888;
font-size: 12px;
cursor: pointer;
border-radius: 6px;
transition: background .15s, color .15s;
padding: 0 8px;
}
.progress-tab-btn.active {
background: #fff;
color: #8b6347;
font-weight: 600;
}
/* --- 历史卡片 --- */
.history-card {
background: #fff;
border: 1px solid #e8d5c4;
border-radius: 10px;
padding: 14px;
margin-bottom: 10px;
cursor: pointer;
transition: box-shadow .18s, transform .18s;
}
.history-card:active { transform: scale(.99); }
.history-card:hover { box-shadow: 0 3px 10px rgba(139,99,71,.1); border-color: #d4b896; }
.history-card-header {
display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px;
}
.history-card-title { font-size: 14px; font-weight: 600; color: #5c4033; }
.history-card-meta {
display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #a08060; margin-top: 6px;
}
.history-card-score {
font-size: 22px; font-weight: 700; color: #8b6347; line-height: 1;
}
.history-detail-row {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #e8d5c4;
}
/* --- 详情面板 --- */
.detail-panel {
background: #fff;
border: 1px solid #e8d5c4;
border-radius: 10px;
padding: 14px;
margin-bottom: 12px;
}
.detail-back {
display: flex; align-items: center; gap: 4px;
background: none; border: none; color: #8b6347;
font-size: 13px; cursor: pointer; margin-bottom: 12px; padding: 0;
}
.detail-section { margin-bottom: 14px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-label { font-size: 11px; color: #a08060; margin-bottom: 3px; }
.detail-value { font-size: 13px; color: #5c4033; }
.detail-divider { border: none; border-top: 1px solid #e8d5c4; margin: 12px 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.photo-grid img {
width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: 6px; cursor: pointer; border: 1px solid #e8d5c4;
transition: opacity .15s;
}
.photo-grid img:hover { opacity: .8; }
.step-list { display: flex; flex-direction: column; gap: 8px; }
.step-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 12px;
}
.step-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #d4b896; flex-shrink: 0; margin-top: 4px;
}
.step-dot.approved { background: #16a34a; }
.step-dot.rejected { background: #dc2626; }
.step-dot.pending { background: #d4b896; }
.step-info { flex: 1; }
.step-name { font-size: 13px; font-weight: 600; color: #5c4033; }
.step-role { font-size: 11px; color: #a08060; }
.step-status { font-size: 11px; }
.step-status.approved { color: #16a34a; }
.step-status.rejected { color: #dc2626; }
.step-status.pending { color: #a08060; }
/* --- 数据看板 --- */
.stats-kpi-row { display: flex; gap: 10px; margin: 10px 0; }
.stats-kpi-card { flex: 1; background: #fff; border: 1px solid #e8d5c4; border-radius: 10px; padding: 14px; text-align: center; }
.stats-kpi-num { font-size: 26px; font-weight: 700; color: #5c4033; }
.stats-kpi-label { font-size: 11px; color: #a08060; margin-top: 4px; }
.coverage-bar-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.coverage-bar-bg { flex: 1; height: 8px; background: #f0e0cc; border-radius: 4px; overflow: hidden; }
.coverage-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.coverage-pct { font-size: 14px; font-weight: 700; min-width: 42px; text-align: right; }
.section-title { font-size: 13px; font-weight: 600; color: #5c4033; margin-bottom: 6px; }
.rank-store-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5efe6; }
.rank-num { font-size: 12px; font-weight: 700; color: #c4a882; min-width: 18px; text-align: center; }
.rank-name { flex: 1; font-size: 13px; color: #5c4033; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { font-size: 15px; font-weight: 700; min-width: 36px; text-align: right; }
.item-stat-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.item-stat-name { font-size: 12px; color: #5c4033; min-width: 70px; }
.item-stat-bar-bg { flex: 1; height: 6px; background: #f0e0cc; border-radius: 3px; overflow: hidden; }
.item-stat-bar-fill { height: 100%; border-radius: 3px; }
.item-stat-pct { font-size: 12px; font-weight: 600; min-width: 38px; text-align: right; }
/* --- 评分×销售关联分析 --- */
.correl-card { background: #fff; border: 1px solid #e8d5c4; border-radius: 10px; padding: 12px; margin-top: 14px; animation: fadeInUp 0.3s ease both; }
.correl-corr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.correl-corr-label { font-size: 12px; color: #8b6914; font-weight: 600; }
.correl-corr-val { font-size: 16px; font-weight: 700; color: #8b6914; }
.correl-corr-desc { font-size: 11px; color: #a08060; }
.correl-quadrant { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.correl-quad { background: #fdf6ee; border-radius: 8px; padding: 10px; overflow: hidden; }
.correl-quad-title { font-size: 11px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.correl-quad-title.high { color: #4caf50; }
.correl-quad-title.gap { color: #ff9800; }
.correl-quad-title.blind { color: #2196f3; }
.correl-quad-title.low { color: #f44336; }
.correl-store-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid #f0e0cc; font-size: 11px; }
.correl-store-row:last-child { border-bottom: none; }
.correl-store-name { color: #5c4033; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 4px; }
.correl-score { font-weight: 700; color: #8b6914; min-width: 28px; text-align: right; }
.correl-sales { color: #4caf50; font-weight: 600; min-width: 40px; text-align: right; }
.correl-no-data { text-align: center; padding: 16px; color: #a08060; font-size: 12px; }
/* --- 问题追踪 --- */
.task-card { background: #fff; border: 1px solid #e8d5c4; border-radius: 10px; padding: 12px; margin-bottom: 10px; animation: fadeInUp 0.3s ease both; }
.task-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.task-store { flex: 1; font-size: 12px; color: #5c4033; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-date { font-size: 11px; color: #a08060; }
.task-content { font-size: 13px; color: #5c4033; line-height: 1.5; margin-bottom: 8px; }
.task-footer { display: flex; align-items: center; justify-content: space-between; }
.task-insp { font-size: 11px; color: #a08060; }
.task-fixed-at { font-size: 11px; color: #16a34a; }
.btn-fix { background: #5c4033; color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000; }
.modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 12px; padding: 20px; width: 280px; z-index: 1000; }
.modal-title { font-size: 15px; font-weight: 600; color: #5c4033; margin-bottom: 12px; text-align: center; }
.modal-body { }
/* --- 排期 --- */
.schedule-card { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e8d5c4; border-radius: 10px; padding: 12px; margin-bottom: 8px; animation: fadeInUp 0.3s ease both; }
.schedule-left { min-width: 44px; text-align: center; }
.schedule-date { font-size: 13px; font-weight: 700; color: #5c4033; }
.schedule-today { font-size: 10px; color: #fff; background: #8b6347; border-radius: 4px; padding: 1px 4px; margin-top: 2px; }
.schedule-body { flex: 1; min-width: 0; }
.schedule-store { font-size: 13px; color: #5c4033; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-done-insp { font-size: 11px; color: #16a34a; margin-top: 2px; }
.sched-menu { position: absolute; right: 8px; top: 36px; background: #fff; border: 1px solid #e8d5c4; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 100; overflow: hidden; min-width: 110px; }
.sched-menu-item { padding: 9px 14px; font-size: 13px; color: #5c4033; cursor: pointer; transition: background 0.15s; }
.sched-menu-item:hover { background: #f5efe8; }
.sched-menu-item.danger { color: #dc2626; }
.sched-menu-item.danger:hover { background: #fef2f2; }
.sched-menu-btn { font-size: 18px; color: #a08060; cursor: pointer; padding: 2px 6px; user-select: none; }
.schedule-card { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e8d5c4; border-radius: 10px; padding: 12px; margin-bottom: 8px; animation: fadeInUp 0.3s ease both; }