:root { color-scheme: light; font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif; --navy:#2f7369; --blue:#2f7369; --ink:#27322e; --muted:#707a74; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 90% 8%, #ffe8d6 0, transparent 25%), radial-gradient(circle at 8% 82%, #dfeee6 0, transparent 28%), linear-gradient(145deg, #f6f4ee, #fbfaf7 52%, #efeee8); }
.hidden { display: none !important; }
.mobile-shell { width: min(100%, 620px); min-height: 100vh; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom)); }
.mobile-brand { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px 2px 24px; }
.mobile-logo { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, #ffb547, #f26b21); box-shadow: 0 10px 25px #f26b2138; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 700; }
.mobile-brand p,.mobile-kicker { margin: 0 0 4px; color: #b25c2d; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.mobile-brand h1 { margin: 0; font-size: 24px; }
.mobile-logout { border: 1px solid #d3dceb; border-radius: 999px; padding: 8px 12px; color: #526079; background: #ffffffb8; }
.mobile-card,.mobile-welcome { border: 1px solid #dedfd8; border-radius: 24px; background: #fffefbf2; box-shadow: 0 24px 60px #49483e1c; }
.mobile-login { padding: 28px 24px; }
.mobile-login h2,.mobile-welcome h2 { margin: 6px 0 8px; font-size: 25px; }
.mobile-login > p:not(.mobile-kicker),.mobile-welcome > p:last-child,.mobile-footnote { color: var(--muted); line-height: 1.65; }
.mobile-login form { display: grid; gap: 14px; margin-top: 24px; }
.mobile-login label { display: grid; gap: 7px; color: #526079; font-size: 13px; font-weight: 800; }
.mobile-login input { width: 100%; height: 50px; border: 1px solid #d6d7d0; border-radius: 14px; padding: 0 14px; background: white; font: inherit; outline: 0; }
.mobile-login input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #2f736918; }
.mobile-login button,.mobile-install { min-height: 50px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #3f8277, #28685f); box-shadow: 0 12px 26px #2f73692b; font: inherit; font-weight: 900; }
.mobile-status { min-height: 22px; margin-bottom: 0; color: #c33d32 !important; }
.mobile-welcome { padding: 22px; }
.mobile-workspaces { display: grid; gap: 12px; margin-top: 16px; }
.mobile-workspace { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; width: 100%; border: 1px solid #dedfd8; border-radius: 20px; padding: 17px; text-align: left; color: inherit; background: #fffefbf2; box-shadow: 0 10px 26px #49483e12; }
.mobile-workspace:active { transform: scale(.985); }
.mobile-workspace i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: var(--blue); background: #e8f3ef; font-style: normal; font-weight: 900; }
.mobile-workspace strong { display: block; margin-bottom: 4px; font-size: 17px; }
.mobile-workspace strong em { display: inline-flex; margin-left: 8px; border-radius: 999px; padding: 3px 7px; color: var(--blue); background: #e8f3ef; font-size: 10px; font-style: normal; vertical-align: 2px; }
.mobile-workspace small { color: var(--muted); font-size: 12px; }
.mobile-workspace b { color: #8b98ab; font-size: 22px; }
.mobile-install { width: 100%; margin-top: 18px; background: var(--navy); }
.mobile-footnote { margin: 20px 8px 0; text-align: center; font-size: 12px; }
@media (min-width: 700px) { .mobile-shell { padding-top: 42px; } }