:root { --blue:#005bac; --blue-dark:#003c78; --cyan:#00a7b5; --teal:#008b83; --green:#16855b; --red:#c63d4f; --amber:#b87500; --ink:#17202b; --muted:#687481; --line:#dce2e8; --soft:#eef2f5; --canvas:#f4f6f8; --safe:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; }
html { background:#e8edf1; }
body { margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; color:var(--ink); background:#e8edf1; letter-spacing:0; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.app-shell,.detail-view { width:min(540px,100%); min-height:100vh; margin:0 auto; background:var(--canvas); position:relative; border-inline:1px solid #d9e0e5; }
.app-shell { padding-bottom:calc(64px + var(--safe)); }
.top-bar { position:sticky; z-index:30; top:0; height:58px; padding:7px 13px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); }
.brand { min-width:0; display:flex; align-items:center; gap:9px; padding:0; border:0; background:transparent; }
.brand img { width:94px; height:auto; display:block; }
.brand span { padding-left:9px; border-left:1px solid var(--line); color:var(--blue); font-size:9px; font-weight:800; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:6px; }
.top-actions button { width:30px; height:30px; padding:0; border:0; background:transparent; display:grid; place-items:center; position:relative; }
.top-actions svg { width:18px; height:18px; }
.top-actions b,.bottom-nav b { position:absolute; display:grid; place-items:center; min-width:15px; height:15px; padding:0 3px; border-radius:10px; background:var(--red); color:#fff; font-size:8px; line-height:1; }
.top-actions b { right:-3px; top:-3px; }
.top-actions .mini-avatar { overflow:hidden; padding:0; border-radius:50%; background:var(--blue); color:#fff; font-size:8px; font-weight:800; }.top-actions .mini-avatar img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 24%; }
.page { display:none; min-height:calc(100vh - 122px); }
.page.active { display:block; }
.today-head { min-height:91px; padding:17px 14px 13px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; color:#fff; background:var(--blue-dark); }
.today-head > div > span,.page-head span,.section-title span,.profile-head span { color:#72d7dc; font-size:8px; font-weight:800; }
.today-head h1 { margin:4px 0 4px; font-size:22px; line-height:1.2; }
.today-head p { margin:0; color:#c8d7e6; font-size:9px; }
.check-button { height:30px; display:flex; align-items:center; gap:5px; padding:0 8px; border:1px solid #5c7c9c; border-radius:4px; background:transparent; color:#fff; font-size:8px; }
.check-button svg { width:13px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border-bottom:1px solid var(--line); }
.metric-grid div { min-width:0; padding:10px 8px; border-right:1px solid var(--line); }
.metric-grid div:last-child { border-right:0; }
.metric-grid strong { display:block; color:var(--blue-dark); font-size:14px; font-variant-numeric:tabular-nums; }
.metric-grid span { display:block; margin-top:2px; color:var(--muted); font-size:8px; }
.metric-grid .red strong { color:var(--red); }.metric-grid .green strong { color:var(--green); }.metric-grid .teal strong { color:var(--teal); }
.alert-strip { width:calc(100% - 20px); min-height:55px; margin:9px 10px 0; padding:8px 10px; display:grid; grid-template-columns:31px 1fr auto 13px; gap:8px; align-items:center; border:1px solid #f0c8cf; border-radius:5px; background:#fff; text-align:left; }
.alert-icon { width:31px; height:31px; display:grid; place-items:center; background:#faeaed; color:var(--red); }
.alert-icon svg { width:16px; }.alert-strip > span b,.alert-strip > span small { display:block; }.alert-strip > span b { font-size:10px; }.alert-strip > span small { margin-top:3px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.alert-strip em { color:var(--red); font-size:8px; font-style:normal; font-weight:800; }.alert-strip > svg { width:12px; color:#a5afb8; }
.section-block { margin-top:9px; background:#fff; border-block:1px solid var(--line); }
.section-block.flush { margin-top:0; }
.section-title { padding:11px 13px 7px; display:flex; align-items:flex-end; justify-content:space-between; }
.section-title h2 { margin:2px 0 0; color:var(--blue-dark); font-size:15px; }
.section-title button { padding:0; border:0; background:transparent; color:var(--muted); font-size:8px; }
.focus-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:34px 3px 1fr auto; gap:8px; align-items:start; border:0; border-top:1px solid var(--soft); background:#fff; text-align:left; }
.focus-row time { color:var(--blue-dark); font-size:8px; font-weight:800; }.focus-bar { align-self:stretch; width:3px; background:var(--blue); }.focus-bar.teal { background:var(--teal); }.focus-bar.red { background:var(--red); }.focus-bar.amber { background:var(--amber); }
.focus-copy { min-width:0; }.focus-copy em { display:block; color:var(--blue); font-size:7px; font-style:normal; font-weight:800; }.focus-copy strong { display:block; margin:2px 0; font-size:10px; line-height:1.3; }.focus-copy small { display:block; color:var(--muted); font-size:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.focus-row > b { padding:3px 5px; background:#e6f0f8; color:var(--blue); font-size:7px; }.focus-row > b.red { background:#faeaed; color:var(--red); }.focus-row > b.teal { background:#e0f4f2; color:var(--teal); }.focus-row > b.amber { background:#fbf0dc; color:var(--amber); }
.agenda-row { width:100%; padding:8px 13px; display:grid; grid-template-columns:37px 1fr auto; gap:9px; border:0; border-top:1px solid var(--soft); background:#fff; text-align:left; }.agenda-row time { color:var(--muted); font-size:8px; font-weight:700; }.agenda-row strong,.agenda-row small { display:block; }.agenda-row strong { font-size:9px; }.agenda-row small { margin-top:2px; color:var(--muted); font-size:7px; }.agenda-row em { color:var(--teal); font-size:7px; font-style:normal; font-weight:800; }
.news-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:49px 1fr auto 12px; gap:7px; align-items:center; border:0; border-top:1px solid var(--soft); background:#fff; text-align:left; }.news-row > span { color:var(--blue); font-size:7px; font-weight:800; }.news-row strong { font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.news-row small { color:var(--muted); font-size:7px; }.news-row svg { width:11px; color:#a4adb6; }
.page-head { padding:15px 13px 11px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }.page-head h1 { margin:3px 0 0; color:var(--blue-dark); font-size:21px; }.page-head button { height:29px; padding:0 8px; display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--blue); font-size:8px; font-weight:800; }.page-head svg { width:14px; }.page-head .compose { border-color:var(--blue); background:var(--blue); color:#fff; }
.filter-rail { padding:8px 10px; display:flex; gap:5px; overflow-x:auto; background:#fff; border-bottom:1px solid var(--line); scrollbar-width:none; }.filter-rail::-webkit-scrollbar { display:none; }.filter-rail button { flex:0 0 auto; height:25px; padding:0 9px; border:1px solid var(--line); border-radius:3px; background:#fff; color:var(--muted); font-size:8px; }.filter-rail button.active { border-color:var(--blue); background:var(--blue); color:#fff; font-weight:800; }
.work-card { background:#fff; border-bottom:1px solid var(--line); }.work-card > button { width:100%; padding:10px 12px 7px; display:grid; grid-template-columns:35px 1fr auto; gap:9px; border:0; background:#fff; text-align:left; }.work-code { width:35px; height:35px; padding:3px; display:grid; place-items:center; background:var(--blue-dark); color:#fff; font-size:7px; font-weight:900; overflow-wrap:anywhere; text-align:center; }.work-copy { min-width:0; }.work-copy em { display:block; color:var(--blue); font-size:7px; font-style:normal; font-weight:800; }.work-copy strong { display:block; margin:3px 0; font-size:10px; line-height:1.25; }.work-copy small { display:block; color:var(--muted); font-size:7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.work-card > button > b { padding:3px 5px; background:#e5f4f2; color:var(--teal); font-size:7px; }.progress-line { margin:0 12px 6px 56px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }.progress-line > span { height:3px; background:var(--soft); }.progress-line i { display:block; height:100%; background:var(--cyan); }.progress-line small { color:var(--muted); font-size:7px; }.work-card footer { padding:0 12px 8px 56px; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:7px; }.work-card footer time { color:var(--blue); font-weight:800; }
.support-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:33px 1fr 12px; gap:8px; align-items:center; border:0; border-top:1px solid var(--soft); background:#fff; text-align:left; }.support-row > b { padding:4px 2px; background:#e7f0f8; color:var(--blue); font-size:7px; text-align:center; }.support-row strong,.support-row small { display:block; }.support-row strong { font-size:9px; }.support-row small { margin-top:2px; color:var(--muted); font-size:7px; }.support-row svg { width:11px; color:#a4adb6; }
.search-field { height:36px; margin:9px 10px 6px; padding:0 9px; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:3px; }.search-field svg { width:14px; color:var(--muted); }.search-field input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:9px; }.mail-summary { padding:0 12px 7px; display:flex; gap:16px; color:var(--muted); font-size:8px; }.mail-summary b { color:var(--blue-dark); }
.mail-row { display:grid; grid-template-columns:1fr 25px; background:#fff; border-bottom:1px solid var(--line); }.mail-open { width:100%; padding:9px 8px 9px 12px; display:grid; grid-template-columns:30px 1fr; gap:9px; border:0; background:#fff; text-align:left; }.mail-avatar { width:30px; height:30px; display:grid; place-items:center; background:#e6ebef; color:var(--blue-dark); font-size:8px; font-weight:900; }.mail-row.unread .mail-avatar { background:var(--blue); color:#fff; }.mail-copy { min-width:0; }.mail-copy > span { display:flex; justify-content:space-between; gap:8px; }.mail-copy strong { font-size:9px; }.mail-copy time { color:var(--muted); font-size:7px; }.mail-copy h3 { margin:2px 0; font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mail-copy p { margin:0; color:var(--muted); font-size:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.mail-copy small { display:flex; gap:5px; align-items:center; margin-top:4px; color:var(--muted); font-size:7px; }.mail-copy small b { padding:2px 4px; background:#e8f1f8; color:var(--blue); }.mail-copy small svg { width:9px; }.mail-star { padding:0; border:0; background:#fff; }.mail-star svg { width:14px; color:#9ca6af; }.mail-star.active svg { color:#d09219; fill:#d09219; }.empty { padding:35px 15px; text-align:center; color:var(--muted); font-size:9px; }
.profile-head { padding:16px 13px; display:grid; grid-template-columns:44px 1fr 28px; gap:10px; align-items:center; color:#fff; background:var(--blue-dark); }.profile-avatar { width:44px; height:44px; overflow:hidden; display:grid; place-items:center; border-radius:8px; background:#fff; color:var(--blue); font-size:14px; font-weight:900; }.profile-avatar img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 24%; }.profile-head h1 { margin:3px 0 2px; font-size:18px; }.profile-head p { margin:0; color:#c6d6e4; font-size:8px; }.profile-head button { width:28px; height:28px; border:0; background:transparent; color:#fff; }.profile-head svg { width:17px; }.identity-strip { padding:10px 12px; display:grid; grid-template-columns:1fr 1fr auto; gap:9px; align-items:center; background:#fff; border-bottom:1px solid var(--line); }.identity-strip span { display:block; color:var(--muted); font-size:7px; }.identity-strip strong { display:block; margin-top:3px; font-size:8px; }.identity-strip svg { width:22px; color:var(--teal); }.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border-bottom:1px solid var(--line); }.profile-stats div { padding:9px 11px; border-right:1px solid var(--line); }.profile-stats div:last-child { border-right:0; }.profile-stats strong { display:block; color:var(--blue-dark); font-size:12px; }.profile-stats span { display:block; margin-top:2px; color:var(--muted); font-size:7px; }.profile-menu { margin-top:9px; border-top:1px solid var(--line); background:#fff; }.profile-menu button { width:100%; padding:10px 12px; display:grid; grid-template-columns:24px 1fr 12px; gap:9px; align-items:center; border:0; border-bottom:1px solid var(--soft); background:#fff; text-align:left; }.profile-menu button > svg:first-child { width:16px; color:var(--blue); }.profile-menu button > svg:last-child { width:11px; color:#9ca6af; }.profile-menu strong,.profile-menu small { display:block; }.profile-menu strong { font-size:9px; }.profile-menu small { margin-top:2px; color:var(--muted); font-size:7px; }
.bottom-nav { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); width:min(540px,100%); height:calc(60px + var(--safe)); padding:4px 3px var(--safe); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:rgba(255,255,255,.98); border-top:1px solid var(--line); }.bottom-nav button { min-width:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:#78838d; }.bottom-nav button.active { color:var(--blue); }.bottom-nav button > span { height:20px; position:relative; }.bottom-nav svg { width:19px; height:19px; stroke-width:1.9; }.bottom-nav em { font-size:8px; font-style:normal; }.bottom-nav b { right:-10px; top:-6px; }
.detail-view { position:fixed; z-index:60; inset:0; overflow-y:auto; }.detail-view[hidden],.sheet-layer[hidden] { display:none; }.detail-view > header { position:sticky; z-index:2; top:0; height:53px; padding:0 7px; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); }.detail-view > header button { height:40px; padding:0; border:0; background:transparent; }.detail-view > header svg { width:18px; }.detail-view > header h2 { margin:0; text-align:center; color:var(--blue-dark); font-size:12px; }.detail-hero { padding:18px 14px; color:#fff; background:var(--blue-dark); }.detail-hero span { color:#70d2d9; font-size:8px; font-weight:800; }.detail-hero h1 { margin:5px 0 7px; font-size:20px; line-height:1.3; }.detail-hero p { margin:0; color:#c8d7e4; font-size:9px; line-height:1.55; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); background:#fff; border-bottom:1px solid var(--line); }.detail-grid div { min-width:0; padding:10px 12px; border-right:1px solid var(--line); border-top:1px solid var(--soft); }.detail-grid div:nth-child(2n) { border-right:0; }.detail-grid small { display:block; color:var(--muted); font-size:7px; }.detail-grid strong { display:block; margin-top:3px; font-size:8px; overflow-wrap:anywhere; line-height:1.4; }.detail-block { padding:13px 14px; background:#fff; border-bottom:1px solid var(--line); }.detail-block h3 { margin:0 0 7px; color:var(--blue-dark); font-size:11px; }.detail-block ul { list-style:none; margin:0; padding:0; }.detail-block li { position:relative; padding:7px 0 7px 14px; border-top:1px solid var(--soft); color:#4d5965; font-size:9px; line-height:1.45; }.detail-block li:first-child { border-top:0; }.detail-block li::before { content:""; position:absolute; left:0; top:11px; width:5px; height:5px; background:var(--cyan); }.detail-action { width:calc(100% - 26px); height:39px; margin:13px; border:0; border-radius:3px; background:var(--blue); color:#fff; font-size:9px; font-weight:800; }.mail-detail { padding:16px 14px; background:#fff; }.mail-detail-sender { display:flex; gap:9px; align-items:center; }.mail-detail-sender > span { width:34px; height:34px; display:grid; place-items:center; background:var(--blue); color:#fff; font-size:9px; font-weight:900; }.mail-detail-sender strong,.mail-detail-sender small { display:block; }.mail-detail-sender strong { font-size:10px; }.mail-detail-sender small { margin-top:2px; color:var(--muted); font-size:8px; }.mail-detail h1 { margin:16px 0 12px; font-size:17px; line-height:1.35; }.mail-detail > p { margin:0; white-space:pre-line; color:#3f4b56; font-size:10px; line-height:1.75; }.attachment { width:100%; margin-top:10px; padding:8px; display:grid; grid-template-columns:25px 1fr 14px; gap:8px; align-items:center; border:1px solid var(--line); border-radius:3px; background:#f8fafb; text-align:left; }.attachment svg { width:14px; color:var(--blue); }.attachment strong,.attachment small { display:block; }.attachment strong { font-size:8px; }.attachment small { margin-top:2px; color:var(--muted); font-size:7px; }.person-card { padding:20px 14px; text-align:center; color:#fff; background:var(--blue-dark); }.person-card > img { width:58px; height:58px; margin:0 auto; display:block; object-fit:cover; object-position:center 24%; border:2px solid rgba(255,255,255,.75); border-radius:12px; background:#fff; }.person-card h1 { margin:8px 0 3px; font-size:19px; }.person-card p { margin:0; color:#c8d7e4; font-size:9px; }
.sheet-layer { position:fixed; z-index:80; inset:0; display:flex; align-items:flex-end; justify-content:center; }.sheet-scrim { position:absolute; inset:0; border:0; background:rgba(0,31,63,.58); }.action-sheet { position:relative; width:min(540px,100%); padding:14px 13px calc(14px + var(--safe)); background:#fff; }.action-sheet h2 { margin:0 0 8px; color:var(--blue-dark); font-size:17px; }.action-sheet label { display:block; margin:7px 0 3px; color:var(--muted); font-size:8px; }.action-sheet input,.action-sheet textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:3px; outline:0; background:#f8fafb; font-size:9px; }.action-sheet textarea { min-height:80px; resize:none; }.action-sheet > div { margin-top:9px; display:grid; grid-template-columns:1fr auto; gap:7px; }.action-sheet button { height:36px; border:1px solid var(--line); background:#fff; font-size:9px; }.action-sheet button:last-child { padding:0 18px; border-color:var(--blue); background:var(--blue); color:#fff; font-weight:800; }.toast { position:fixed; z-index:100; left:50%; bottom:calc(72px + var(--safe)); max-width:calc(100% - 34px); padding:8px 11px; transform:translate(-50%,10px); border-radius:3px; background:var(--blue-dark); color:#fff; font-size:8px; opacity:0; pointer-events:none; transition:.18s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:541px) { .app-shell,.detail-view { box-shadow:0 18px 55px rgba(24,45,66,.16); } }