:root { color: #1c334e; background: #ecf0ec; font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #ecf0ec; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(100, 146, 87, .48); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: grid; place-items: center; }
.mobile-frame { width: min(100vw, 390px); height: 844px; position: relative; overflow: hidden; background: #fcfbf8; box-shadow: 0 16px 44px rgba(40, 51, 39, .18); }
.landing { background: #fcfbf8; }
.hero-art { position: absolute; width: 100%; height: 535px; top: -30px; right: 0; object-fit: cover; object-position: center top; }
.landing > header, .hero-copy, .role-area, .landing footer { position: absolute; z-index: 1; }
.landing > header { top: 25px; left: 25px; }
.brand-logo { width: 221px; height: auto; display: block; }
.hero-copy { top: 178px; left: 29px; right: 27px; }
.eyebrow { margin: 0 0 11px; color: #708368; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.hero-copy h1, .workspace-title h1 { margin: 0 0 17px; color: #19314e; font-family: "Songti SC", "STSong", serif; font-size: 38px; line-height: 1.18; letter-spacing: .02em; }
.hero-copy > p:not(.eyebrow) { margin: 0 0 24px; color: #5b6572; font-size: 16px; line-height: 1.7; }
.primary-button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 16px; color: #fff; background: #315b86; box-shadow: 0 10px 22px rgba(49,91,134,.2); font-size: 18px; font-weight: 750; }
.primary-button:hover { background: #274f79; }
.invite-link { display: block; margin: 13px auto 0; padding: 0 0 2px; border: 0; border-bottom: 1px solid #8995a1; color: #315b86; background: transparent; font-size: 14px; }
.role-area { right: 28px; bottom: 184px; left: 28px; text-align: center; }
.role-picker { display: grid; grid-template-columns: repeat(var(--role-count, 1), 1fr); overflow: hidden; border: 1px solid #b8c2b6; border-radius: 18px; background: rgba(255,255,255,.9); }
.role-picker:has(.role-choice:nth-child(2)) { --role-count: 3; }
.role-choice { min-height: 55px; padding: 7px 3px; border: 0; border-right: 1px solid #d1d7cf; color: #354153; background: transparent; font-size: 15px; font-weight: 650; }
.role-choice:last-child { border-right: 0; }
.role-choice.is-active { color: #56804d; background: #fff; box-shadow: inset 0 0 0 2px #79a063; }
.role-summary { margin: 14px 0 0; color: #707a83; font-size: 14px; }
.landing footer { right: 0; bottom: 130px; left: 0; color: #7a8585; text-align: center; font-size: 12px; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; align-items: end; background: rgba(21,35,48,.47); }
.modal-card { width: min(100%, 390px); margin: 0 auto; padding: 24px 24px 29px; border-radius: 25px 25px 0 0; background: #fffdf9; box-shadow: 0 -12px 32px rgba(25,42,55,.18); }
.modal-card h2 { margin: 0 0 8px; color: #203956; font-size: 25px; }
.modal-card > p:not(.form-message) { margin: 0 0 17px; color: #69737c; font-size: 13px; line-height: 1.6; }
.close { float: right; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #546373; background: #eef2ed; font-size: 25px; line-height: 1; }
.invite-card label, .auth-card label:not(.agreement) { display: block; margin-top: 14px; color: #3d4a59; font-size: 14px; font-weight: 700; }
.invite-card input, .auth-card input:not([type="checkbox"]) { width: 100%; min-height: 48px; margin-top: 8px; padding: 0 13px; border: 1px solid #d6ddd3; border-radius: 12px; color: #203956; background: #fff; font-size: 15px; }
.invite-card .primary-button { margin-top: 18px; }
.form-message { min-height: 20px; margin: 11px 0 -2px; color: #a43d4b; font-size: 13px; }
.form-message.success { color: #4a7d48; }
.auth-tabs { display: flex; gap: 24px; margin: 0 45px 15px 0; border-bottom: 1px solid #e0e3de; }
.auth-tabs button { padding: 5px 0 10px; border: 0; border-bottom: 3px solid transparent; color: #808991; background: transparent; font-size: 19px; font-weight: 750; }
.auth-tabs button.is-active { color: #203956; border-color: #769d61; }
.modal-help { margin: 0 0 13px; color: #69737c; font-size: 13px; line-height: 1.6; }
.role-picker--compact { border-radius: 13px; }
.role-picker--compact .role-choice { min-height: 48px; font-size: 14px; }
.agreement { display: flex; align-items: flex-start; gap: 7px; margin: 17px 0; color: #6f7880; font-size: 12px; line-height: 1.45; }
.agreement input { margin: 2px 0 0; accent-color: #638e58; }
.workspace { overflow-y: auto; padding-bottom: 30px; background: #fbfcfa; }
.workspace-header { height: 72px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 10px 15px 4px; border-bottom: 1px solid #edf0ea; background: #fffefa; }
.workspace-header button { width: 40px; height: 40px; border: 0; border-radius: 50%; color: #34506d; background: transparent; font-size: 25px; }
.workspace-logo { justify-self: center; width: 178px; max-height: 51px; object-fit: contain; }
.workspace-title { padding: 22px 28px 16px; background: #fffefa; }
.workspace-title p { margin: 0 0 8px; color: #6e8b5f; font-size: 13px; font-weight: 750; letter-spacing: .06em; }
.workspace-title h1 { margin-bottom: 7px; font-size: 29px; }
.workspace-title span { color: #7b858e; font-size: 13px; }
.primary-task { margin: 18px 20px; padding: 21px 18px 17px; border: 1px solid #d5e1d2; border-radius: 20px; background: #f4f8f0; }
.primary-task p { margin: 0 0 7px; color: #738b6a; font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.primary-task h2 { margin: 0 0 6px; color: #213a58; font-size: 21px; }
.primary-task > span { color: #6e7881; font-size: 13px; }
.primary-task button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 14px 0 16px; border: 0; border-radius: 12px; color: #fff; background: #477a4b; font-size: 15px; font-weight: 750; }
.primary-task button:disabled { background: #6e926c; }
.module-section { margin: 0 20px; }
.module-section > div { display: flex; align-items: baseline; justify-content: space-between; padding: 0 5px 9px; }
.module-section h2 { margin: 0; color: #263b52; font-size: 17px; }
.module-section > div span { color: #909993; font-size: 12px; }
.module-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto 15px; align-items: center; gap: 7px; width: 100%; min-height: 68px; padding: 9px 3px; border: 0; border-top: 1px solid #e6ebe3; color: inherit; background: #fff; text-align: left; }
.module-dot { width: 33px; height: 33px; border-radius: 11px; background: #edf4e9; }
.module-row strong, .module-row small { display: block; }
.module-row strong { color: #2d3f53; font-size: 15px; }
.module-row small { margin-top: 3px; color: #78828a; font-size: 12px; line-height: 1.35; }
.module-row em { color: #729065; font-size: 11px; font-style: normal; white-space: nowrap; }
.module-row b { color: #89949b; font-size: 23px; font-weight: 400; }
.data-note { margin: 22px 20px 0; padding: 12px 13px; border-radius: 12px; color: #66766b; background: #f1f5ed; font-size: 12px; line-height: 1.5; }
@media (max-width: 390px) { .mobile-frame { box-shadow: none; } }
@media (max-height: 730px) { .mobile-frame { height: 730px; } .hero-copy { top: 150px; } .role-area { bottom: 108px; } .landing footer { bottom: 60px; } }