:root { --account-ink: #1b2a33; --account-gold: #a77d48; --account-paper: #f5f1e9; --account-muted: #64717b; }
.account-page { min-height: 100vh; margin: 0; background: linear-gradient(120deg, #ece5d8 0%, #e6edf0 48%, #d8e0db 100%); color: var(--account-ink); font-family: Georgia, "Times New Roman", serif; }
.auth-shell { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(360px, 460px); gap: clamp(36px, 8vw, 132px); align-items: center; width: min(1080px, calc(100% - 40px)); min-height: calc(100vh - 80px); margin: auto; padding: 54px 0; }
.auth-intro { padding: 26px 0; }
.auth-kicker { display: block; color: var(--account-gold); font-family: "Segoe UI", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.auth-intro h1, .profile-shell h1 { margin: 16px 0; font-size: clamp(36px, 4vw, 58px); font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.auth-intro p, .profile-shell header p { max-width: 490px; color: #485864; font-family: "Segoe UI", sans-serif; font-size: 17px; line-height: 1.8; }
.auth-points { display: grid; gap: 14px; margin-top: 34px; color: #3a4a55; font-family: "Segoe UI", sans-serif; }
.auth-points i { width: 22px; color: var(--account-gold); }
.auth-card, .profile-card { border: 1px solid rgba(77, 66, 51, .2); border-radius: 8px; background: rgba(255, 253, 248, .87); box-shadow: 0 22px 55px rgba(27, 42, 51, .14); padding: 38px; }
.auth-card h2 { margin: 8px 0 26px; font-size: 30px; font-weight: 600; letter-spacing: 0; }
.social-login { display: grid; gap: 10px; }
.social-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid #d8d4cb; border-radius: 5px; color: #26323e; font-family: "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; }
.social-button:hover { border-color: var(--account-gold); background: #fff; color: #26323e; }
.social-button i { width: 16px; text-align: center; font-size: 17px; }.google i { color: #d34a38; }.wechat i { color: #20a75a; }.facebook i { color: #3167ae; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: #77828a; font-family: "Segoe UI", sans-serif; font-size: 12px; }.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #e1ddd4; }
.auth-form { display: grid; gap: 17px; font-family: "Segoe UI", sans-serif; }.auth-form label { display: grid; gap: 7px; color: #3a4750; font-size: 13px; font-weight: 700; }.auth-form input, .auth-form select { min-height: 46px; border: 1px solid #d4d1ca; border-radius: 4px; background: #fffefa; color: var(--account-ink); font: inherit; padding: 0 13px; }.auth-form input:focus, .auth-form select:focus { border-color: var(--account-gold); box-shadow: 0 0 0 3px rgba(167, 125, 72, .14); outline: 0; }.auth-form input:disabled { color: #76828a; background: #f1eee7; }
.auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--account-gold); border-radius: 4px; background: var(--account-gold); color: #fff; cursor: pointer; font-family: "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; }.auth-submit:hover { background: #8c6639; }
.auth-message { margin: 0 0 18px; border-radius: 4px; padding: 10px 12px; font-family: "Segoe UI", sans-serif; font-size: 13px; }.auth-message.error { background: #fae9e6; color: #9b382b; }.auth-message.success { background: #e7f2e8; color: #2d7040; }.auth-switch { margin: 24px 0 0; color: var(--account-muted); font-family: "Segoe UI", sans-serif; font-size: 13px; text-align: center; }.auth-switch a { color: #76501f; font-weight: 700; }
.profile-shell { width: min(700px, calc(100% - 40px)); margin: auto; padding: 68px 0; }.profile-shell header { margin-bottom: 28px; }.profile-shell h1 { font-size: 43px; }.profile-card { display: grid; grid-template-columns: 118px 1fr; gap: 30px; align-items: start; }.profile-preview { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; overflow: hidden; border: 3px solid #d9be8c; border-radius: 50%; background: var(--account-gold); color: #fff; font: 42px Georgia, serif; }.profile-preview img { width: 100%; height: 100%; object-fit: cover; }.profile-avatar-picker { position: relative; cursor: pointer; }.profile-avatar-picker:hover { border-color: #9b6f35; }.avatar-picker-edit { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #354957; font: 13px "Segoe UI", sans-serif; }.avatar-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }.field-help { margin: -7px 0 0; color: var(--account-muted); font-size: 12px; }.logout-form { grid-column: 2; }.logout-form button { border: 0; background: transparent; color: #8d3b32; cursor: pointer; font-family: "Segoe UI", sans-serif; font-size: 13px; font-weight: 700; padding: 8px 0; }
.role-badge { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; border: 1px solid #d9be8c; border-radius: 4px; padding: 6px 9px; color: #6b4d24; background: #fffaf0; font: 700 13px "Segoe UI", sans-serif; }.role-badge i { width: 15px; text-align: center; }.role-admin { border-color: #475a65; color: #263a45; background: #edf2f1; }.role-workspace { margin-top: 28px; border-top: 1px solid rgba(77, 66, 51, .25); padding: 28px 0; }.role-workspace h2 { margin: 7px 0 20px; font-size: 24px; font-weight: 600; }.material-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }.material-form label { display: grid; gap: 6px; min-width: 190px; color: #3a4750; font: 700 13px "Segoe UI", sans-serif; }.material-form input, .material-form select { min-height: 42px; border: 1px solid #d4d1ca; border-radius: 4px; background: #fffefa; padding: 7px; font: 13px "Segoe UI", sans-serif; }.material-form .auth-submit { min-height: 42px; padding: 0 14px; }.workspace-status { width: 100%; margin: 0; color: #566671; font: 13px "Segoe UI", sans-serif; }.material-list { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }.material-list li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e4ded3; padding: 10px 2px; color: #485864; font: 13px "Segoe UI", sans-serif; }.material-list li > span { display: grid; gap: 3px; flex: 1; }.material-list small { color: #7a858b; }.material-list a { color: #76501f; font-weight: 700; text-decoration: none; }.empty-material { color: #7a858b; }.user-list { display: grid; margin-top: 18px; border-top: 1px solid #e4ded3; }.user-list p { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: center; margin: 0; border-bottom: 1px solid #e4ded3; padding: 10px 2px; font: 13px "Segoe UI", sans-serif; }.user-list span { color: #687780; overflow-wrap: anywhere; }.user-list b { color: #76501f; font-size: 12px; text-transform: uppercase; }
@media (max-width: 760px) { .auth-shell { grid-template-columns: 1fr; gap: 20px; width: min(100% - 28px, 480px); padding: 32px 0; }.auth-intro { padding: 0; }.auth-intro h1 { font-size: 38px; }.auth-points { display: none; }.auth-card, .profile-card { padding: 25px; }.profile-shell { width: min(100% - 28px, 520px); padding: 40px 0; }.profile-card { grid-template-columns: 1fr; }.profile-preview { width: 82px; height: 82px; font-size: 31px; }.logout-form { grid-column: auto; }.material-form { align-items: stretch; }.material-form label, .material-form .auth-submit { width: 100%; }.user-list p { grid-template-columns: 1fr auto; }.user-list span { grid-column: 1 / -1; grid-row: 2; } }