:root { --navy:#001e50; --navy2:#0b2e5c; --blue:#0068b5; --cyan:#00a7df; --ice:#dff3fa; --green:#16855b; --red:#c43845; --amber:#b36a00; --ink:#141c26; --muted:#687482; --line:#d9e0e6; --soft:#edf1f4; --canvas:#f2f4f6; --safe:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; }
html { background:#e5e9ed; }
body { margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; color:var(--ink); background:#e5e9ed; 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; position:relative; background:var(--canvas); border-inline:1px solid #d4dae0; }
.app-shell { padding-bottom:calc(64px + var(--safe)); }
.top-bar { position:sticky; z-index:30; top:0; height:58px; padding:6px 13px; display:flex; justify-content:space-between; align-items:center; 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:88px; height:30px; object-fit:contain; object-position:left center; }.brand span { padding-left:9px; border-left:1px solid var(--line); color:var(--navy); font-size:9px; font-weight:800; }
.top-actions { display:flex; align-items:center; gap:5px; }.top-actions button { width:30px; height:30px; padding:0; display:grid; place-items:center; position:relative; border:0; background:transparent; }.top-actions svg { width:18px; height:18px; }.top-actions b,.bottom-nav b { position:absolute; min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center; border-radius:9px; background:var(--red); color:#fff; font-size:8px; line-height:1; }.top-actions b { right:-3px; top:-3px; }.top-actions .mini-avatar { border-radius:2px; background:var(--navy); color:#fff; font-size:8px; font-weight:900; }
.page { display:none; min-height:calc(100vh - 122px); }.page.active { display:block; }
.today-head { min-height:88px; padding:15px 14px 12px; display:flex; justify-content:space-between; gap:12px; color:#fff; background:var(--navy); border-bottom:3px solid var(--cyan); }.shift-copy > span,.page-head span,.section-title span,.profile-head span { color:#68d4f0; font-size:8px; font-weight:800; }.today-head h1 { margin:4px 0; font-size:22px; }.today-head p { margin:0; color:#c8d7e6; font-size:9px; }.today-head p b { color:#fff; }.shift-badge { flex:0 0 auto; min-width:54px; padding:6px 7px; border:1px solid #47678e; border-radius:2px; background:#0d315f; color:#fff; text-align:center; }.shift-badge svg { width:14px; }.shift-badge span,.shift-badge small { display:block; }.shift-badge span { margin-top:1px; font-size:8px; font-weight:800; }.shift-badge small { color:#a9bfd2; font-size:7px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:#fff; border-bottom:1px solid var(--line); }.metric-grid.dark { background:#0b2a51; color:#fff; border-bottom-color:#25456d; }.metric-grid div { min-width:0; padding:10px 8px; border-right:1px solid var(--line); }.metric-grid.dark div { border-right-color:#29466a; }.metric-grid div:last-child { border-right:0; }.metric-grid strong { display:block; color:var(--navy); font-size:14px; font-variant-numeric:tabular-nums; }.metric-grid.dark strong { color:#fff; }.metric-grid span { display:block; margin-top:2px; color:var(--muted); font-size:8px; }.metric-grid.dark span { color:#aebfd0; }.metric-grid .cyan strong { color:var(--cyan); }.metric-grid .green strong { color:#54c38f; }.metric-grid .amber strong { color:#f1aa3c; }
.alert-strip { width:calc(100% - 20px); min-height:54px; margin:9px 10px 0; padding:8px 10px; display:grid; grid-template-columns:31px 1fr auto 12px; gap:8px; align-items:center; border:1px solid #ead3aa; border-left:4px solid var(--amber); border-radius:2px; background:#fff; text-align:left; }.alert-icon { width:28px; height:28px; display:grid; place-items:center; background:#fbf0dc; color:var(--amber); }.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(--amber); font-size:7px; font-style:normal; font-weight:800; }.alert-strip > svg { width:11px; color:#9fa9b3; }
.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(--navy); font-size:15px; }.section-title button { padding:0; border:0; background:transparent; color:var(--blue); 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(--navy); font-size:8px; font-weight:900; }.focus-bar { align-self:stretch; width:3px; background:var(--blue); }.focus-bar.cyan { background:var(--cyan); }.focus-bar.amber { background:var(--amber); }.focus-bar.red { background:var(--red); }.focus-copy { min-width:0; }.focus-copy em,.focus-copy strong,.focus-copy small { display:block; }.focus-copy em { color:var(--blue); font-size:7px; font-style:normal; font-weight:900; }.focus-copy strong { margin:2px 0; font-size:10px; line-height:1.3; }.focus-copy small { color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.focus-row > b { padding:3px 5px; background:#e6f0f8; color:var(--blue); font-size:7px; }.focus-row > b.amber { background:#fbf0dc; color:var(--amber); }.focus-row > b.red { background:#fae9eb; color:var(--red); }.focus-row > b.cyan { background:var(--ice); color:var(--blue); }
.agenda-row { width:100%; padding:8px 13px; display:grid; grid-template-columns:38px 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(--blue); font-size:7px; font-style:normal; font-weight:900; }
.news-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:38px 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:900; }.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:#a2acb5; }
.page-head { padding:15px 13px 11px; display:flex; justify-content:space-between; align-items:center; background:#fff; border-bottom:1px solid var(--line); }.page-head h1 { margin:3px 0 0; color:var(--navy); 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:2px; background:#fff; color:var(--blue); font-size:8px; font-weight:800; }.page-head svg { width:14px; }.page-head .compose { border-color:var(--navy); background:var(--navy); 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:2px; background:#fff; color:var(--muted); font-size:8px; }.filter-rail button.active { border-color:var(--navy); background:var(--navy); 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:37px 1fr auto; gap:9px; border:0; background:#fff; text-align:left; }.work-code { width:37px; height:34px; padding:3px; display:grid; place-items:center; border-left:3px solid var(--cyan); background:var(--navy); color:#fff; font-size:7px; font-weight:900; overflow-wrap:anywhere; text-align:center; }.work-copy { min-width:0; }.work-copy em,.work-copy strong,.work-copy small { display:block; }.work-copy em { color:var(--blue); font-size:7px; font-style:normal; font-weight:900; }.work-copy strong { margin:3px 0; font-size:10px; line-height:1.25; }.work-copy small { color:var(--muted); font-size:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.work-card > button > b { padding:3px 5px; background:#e2f3f8; color:var(--blue); font-size:7px; }.progress-line { margin:0 12px 6px 58px; 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 58px; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:7px; }.work-card footer time { color:var(--blue); font-weight:900; }
.support-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:34px 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; border:1px solid #b9d7e9; 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:#a2acb5; }
.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:2px; }.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(--navy); }
.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; border-left:3px solid var(--cyan); background:#e7ebef; color:var(--navy); font-size:8px; font-weight:900; }.mail-row.unread .mail-avatar { background:var(--navy); 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; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.mail-copy p { margin:0; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.mail-copy small { display:flex; align-items:center; gap:5px; margin-top:4px; color:var(--muted); font-size:7px; }.mail-copy small b { padding:2px 4px; background:#e7f1f8; 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:#d09019; fill:#d09019; }.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(--navy); border-bottom:3px solid var(--cyan); }.profile-avatar { width:44px; height:44px; display:grid; place-items:center; background:#fff; color:var(--navy); font-size:14px; font-weight:900; }.profile-head h1 { margin:3px 0 2px; font-size:18px; }.profile-head p { margin:0; color:#c7d7e7; font-size:8px; }.profile-head button { width:28px; height:28px; padding:0; 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(--blue); }.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(--navy); 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:#77828d; }.bottom-nav button.active { color:var(--navy); }.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(--navy); font-size:12px; }.detail-hero { padding:18px 14px; color:#fff; background:var(--navy); border-bottom:3px solid var(--cyan); }.detail-hero span { color:#70d7ee; font-size:8px; font-weight:900; }.detail-hero h1 { margin:5px 0 7px; font-size:20px; line-height:1.3; }.detail-hero p { margin:0; color:#c8d7e5; 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; line-height:1.4; overflow-wrap:anywhere; }.detail-block { padding:13px 14px; background:#fff; border-bottom:1px solid var(--line); }.detail-block h3 { margin:0 0 7px; color:var(--navy); 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:#4c5863; 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:6px; height:3px; background:var(--cyan); }.detail-action { width:calc(100% - 26px); height:39px; margin:13px; border:0; border-radius:2px; background:var(--navy); 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; border-left:3px solid var(--cyan); background:var(--navy); 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:2px; 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(--navy); border-bottom:3px solid var(--cyan); }.person-card > div { width:50px; height:50px; margin:0 auto; display:grid; place-items:center; background:#fff; color:var(--navy); font-size:16px; font-weight:900; }.person-card h1 { margin:8px 0 3px; font-size:19px; }.person-card p { margin:0; color:#c8d7e5; 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,30,80,.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(--navy); 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:2px; 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(--navy); background:var(--navy); 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:2px; background:var(--navy); 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(14,35,62,.18); } }
.top-actions .mini-avatar #miniInitials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mini-avatar img, .profile-avatar img, .person-card > div img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.mini-avatar.has-avatar, .profile-avatar.has-avatar, .person-card > div.has-avatar { padding: 0; overflow: hidden; background: transparent; }