:root { --ink:#111111; --muted:#676b73; --line:#dedfe3; --soft:#f0f1f3; --canvas:#f5f5f6; --purple:#a100ff; --purple-dark:#7500c0; --purple-soft:#f3e5fb; --blue:#006fc9; --blue-soft:#e6f1fa; --green:#11845b; --amber:#b56500; --red:#c43f4c; --safe:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; }
html { background:#e6e6e8; }
body { margin:0; min-height:100vh; background:#e6e6e8; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Arial,sans-serif; letter-spacing:0; }
button,input,textarea { font:inherit; letter-spacing:0; } 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 #d8d8dc; }
.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:8px; padding:0; border:0; background:transparent; }.brand img { width:84px; height:27px; object-fit:contain; object-position:left center; }.brand span { padding-left:8px; border-left:1px solid #c7c8cc; color:#4e5055; font-size:7px; font-weight:800; white-space:nowrap; }
.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(--purple); color:#fff; font-size:8px; line-height:1; }.top-actions b { right:-3px; top:-3px; }.top-actions .mini-avatar { border-radius:2px; background:#111; color:#fff; font-size:8px; font-weight:900; }
.page { display:none; min-height:calc(100vh - 122px); }.page.active { display:block; }
.today-head { min-height:91px; padding:17px 14px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; color:#fff; background:#111; border-bottom:4px solid var(--purple); }.today-head > div > span,.page-head span,.section-title span,.profile-head span { color:#c872ff; font-size:8px; font-weight:900; }.today-head h1 { margin:4px 0; font-size:22px; line-height:1.2; }.today-head h1 b { font-weight:inherit; }.today-head p { margin:0; color:#b9bbc0; font-size:9px; }.status-button { height:30px; padding:0 8px; display:flex; align-items:center; gap:5px; border:1px solid #4a4a4d; border-radius:3px; background:#242426; color:#fff; font-size:8px; }.status-button svg { width:12px; color:#71d09f; }
.delivery-pulse { background:#fff; border-bottom:1px solid var(--line); }.delivery-pulse header { padding:11px 13px 5px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.delivery-pulse header span,.delivery-pulse header strong { display:block; }.delivery-pulse header span { color:var(--purple-dark); font-size:7px; font-weight:900; }.delivery-pulse header strong { margin-top:2px; font-size:14px; }.delivery-pulse header button { padding:0; border:0; background:transparent; color:var(--purple-dark); font-size:8px; font-weight:800; }.delivery-pulse > p { margin:0; padding:0 13px 9px; color:var(--muted); font-size:9px; line-height:1.45; }.pulse-grid,.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); background:#fff; }.pulse-grid div,.metric-grid div { min-width:0; padding:9px 8px; border-right:1px solid var(--line); }.pulse-grid div:last-child,.metric-grid div:last-child { border-right:0; }.pulse-grid strong,.metric-grid strong { display:block; font-size:13px; font-variant-numeric:tabular-nums; }.pulse-grid span,.metric-grid span { display:block; margin-top:2px; color:var(--muted); font-size:7px; }.pulse-grid .amber strong,.metric-grid .amber strong { color:var(--amber); }.pulse-grid .green strong,.metric-grid .green strong { color:var(--green); }
.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; font-size:15px; }.section-title button { padding:0; border:0; background:transparent; color:var(--purple-dark); font-size:8px; font-weight:700; }
.priority-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; }.priority-row time { color:#25262a; font-size:8px; font-weight:900; }.priority-bar { align-self:stretch; width:3px; background:var(--purple); }.priority-bar.blue { background:var(--blue); }.priority-bar.amber { background:var(--amber); }.priority-bar.green { background:var(--green); }.priority-copy { min-width:0; }.priority-copy em,.priority-copy strong,.priority-copy small { display:block; }.priority-copy em { color:var(--purple-dark); font-size:7px; font-style:normal; font-weight:900; }.priority-copy strong { margin:2px 0; font-size:10px; line-height:1.3; }.priority-copy small { color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.priority-row > b { padding:3px 5px; background:var(--purple-soft); color:var(--purple-dark); font-size:7px; }.priority-row > b.blue { background:var(--blue-soft); color:var(--blue); }.priority-row > b.amber { background:#fbefdd; color:var(--amber); }.priority-row > b.green { background:#e4f3ec; color:var(--green); }
.schedule-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; }.schedule-row time { color:#555a62; font-size:8px; font-weight:700; }.schedule-row strong,.schedule-row small { display:block; }.schedule-row strong { font-size:9px; }.schedule-row small { margin-top:2px; color:var(--muted); font-size:7px; }.schedule-row em { color:var(--purple-dark); font-size:7px; font-style:normal; font-weight:900; }
.ai-brief { width:calc(100% - 20px); min-height:55px; margin:9px 10px 0; padding:8px 10px; display:grid; grid-template-columns:31px 1fr 15px; gap:9px; align-items:center; border:1px solid #d6b4e9; border-radius:3px; background:#fff; text-align:left; }.ai-mark { width:31px; height:31px; display:grid; place-items:center; background:#111; color:var(--purple); font-size:23px; font-weight:900; }.ai-brief b,.ai-brief small { display:block; }.ai-brief b { font-size:10px; }.ai-brief small { margin-top:3px; color:var(--muted); font-size:8px; }.ai-brief svg { width:14px; color:var(--purple-dark); }
.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; 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(--purple-dark); font-size:8px; font-weight:800; }.page-head svg { width:14px; }.page-head .compose { border-color:#111; background:#111; 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:#111; background:#111; color:#fff; font-weight:800; }
.engagement-card { background:#fff; border-bottom:1px solid var(--line); }.engagement-card > button { width:100%; padding:10px 12px 7px; display:grid; grid-template-columns:38px 1fr auto; gap:9px; border:0; background:#fff; text-align:left; }.engagement-code { width:38px; height:35px; padding:3px; display:grid; place-items:center; border-top:3px solid var(--purple); background:#111; color:#fff; font-size:6px; font-weight:900; overflow-wrap:anywhere; text-align:center; }.engagement-copy { min-width:0; }.engagement-copy em,.engagement-copy strong,.engagement-copy small { display:block; }.engagement-copy em { color:var(--purple-dark); font-size:7px; font-style:normal; font-weight:900; }.engagement-copy strong { margin:3px 0; font-size:10px; line-height:1.25; }.engagement-copy small { color:var(--muted); font-size:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.engagement-card > button > b { padding:3px 5px; background:var(--purple-soft); color:var(--purple-dark); font-size:7px; }.progress-line { margin:0 12px 6px 59px; 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(--purple); }.progress-line small { color:var(--muted); font-size:7px; }.engagement-card footer { padding:0 12px 8px 59px; display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:7px; }.engagement-card footer time { color:var(--purple-dark); font-weight:900; }
.asset-row { width:100%; padding:9px 13px; display:grid; grid-template-columns:40px 1fr 12px; gap:8px; align-items:center; border:0; border-top:1px solid var(--soft); background:#fff; text-align:left; }.asset-row > b { padding:4px 2px; border:1px solid #d0a7e6; color:var(--purple-dark); font-size:7px; text-align:center; }.asset-row strong,.asset-row small { display:block; }.asset-row strong { font-size:9px; }.asset-row small { margin-top:2px; color:var(--muted); font-size:7px; }.asset-row svg { width:11px; color:#9ca0a8; }
.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:#111; }
.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-top:3px solid var(--purple); background:#ececef; color:#111; font-size:8px; font-weight:900; }.mail-row.unread .mail-avatar { background:#111; 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:var(--purple-soft); color:var(--purple-dark); }.mail-copy small svg { width:9px; }.mail-star { padding:0; border:0; background:#fff; }.mail-star svg { width:14px; color:#9ca0a8; }.mail-star.active svg { color:var(--purple-dark); fill:var(--purple-dark); }.empty { padding:35px 15px; text-align:center; color:var(--muted); font-size:9px; }
.profile-head { padding:17px 13px; display:grid; grid-template-columns:44px 1fr 28px; gap:10px; align-items:center; color:#fff; background:#111; border-bottom:4px solid var(--purple); }.profile-avatar { width:44px; height:44px; display:grid; place-items:center; background:#fff; color:#111; font-size:14px; font-weight:900; }.profile-head h1 { margin:3px 0 2px; font-size:18px; }.profile-head p { margin:0; color:#b9bbc0; font-size:8px; }.profile-head button { width:28px; height:28px; padding:0; border:0; background:transparent; color:#fff; }.profile-head svg { width:17px; }.assignment-strip { padding:11px 12px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; background:#fff; border-bottom:1px solid var(--line); }.assignment-strip span,.assignment-strip strong,.assignment-strip small { display:block; }.assignment-strip span { color:var(--purple-dark); font-size:7px; font-weight:900; }.assignment-strip strong { margin-top:3px; font-size:9px; }.assignment-strip small { margin-top:2px; color:var(--muted); font-size:7px; }.assignment-strip button { height:26px; padding:0 8px; border:1px solid #111; border-radius:3px; background:#fff; font-size:8px; font-weight:800; }.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; 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(--purple-dark); }.profile-menu button > svg:last-child { width:11px; color:#9ca0a8; }.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:#70747b; }.bottom-nav button.active { color:var(--purple-dark); }.bottom-nav button > span { height:20px; position:relative; }.bottom-nav svg { width:19px; height:19px; stroke-width:1.9; }.bottom-nav em { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:7px; 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; font-size:12px; }.detail-hero { padding:18px 14px; color:#fff; background:#111; border-bottom:4px solid var(--purple); }.detail-hero span { color:#c872ff; 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:#bcbec3; 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; 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:#4c5057; 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(--purple); }.detail-action { width:calc(100% - 26px); height:39px; margin:13px; border:0; border-radius:3px; background:#111; 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-top:3px solid var(--purple); background:#111; 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:#3f4349; 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:#f9f9fa; text-align:left; }.attachment svg { width:14px; color:var(--purple-dark); }.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:#111; border-bottom:4px solid var(--purple); }.person-card > div { width:50px; height:50px; margin:0 auto; display:grid; place-items:center; background:#fff; color:#111; font-size:16px; font-weight:900; }.person-card h1 { margin:8px 0 3px; font-size:19px; }.person-card p { margin:0; color:#bcbec3; 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(17,17,17,.62); }.action-sheet { position:relative; width:min(540px,100%); padding:14px 13px calc(14px + var(--safe)); background:#fff; }.action-sheet h2 { margin:0 0 8px; 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:#f9f9fa; 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:#111; background:#111; 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:#111; 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,24,30,.16); } }