:root { color: #26332b; background: #f7f7f1; font-family: ui-rounded, "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; } .shell { max-width: 1160px; margin: 0 auto; padding: 54px 26px; } h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.05em; } h2 { margin: 0; font-size: 19px; } .eyebrow { color: #6f7f72; font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 10px; } .login-card, .panel { border: 1px solid #dbe1d5; border-radius: 24px; background: #fffefa; box-shadow: 0 16px 45px rgba(43, 57, 43, .08); } .login-card { max-width: 490px; padding: 44px; margin: 11vh auto; } .login-card > p { color: #69756b; line-height: 1.7; } form { display: grid; gap: 15px; margin-top: 26px; } label { display: grid; gap: 7px; font-weight: 700; font-size: 14px; } input, select { border: 1px solid #cfd7ca; background: #fff; border-radius: 11px; padding: 12px; font: inherit; } button { border: 0; border-radius: 12px; padding: 12px 17px; background: #98dc58; color: #26332b; font: inherit; font-weight: 800; cursor: pointer; } button:hover { filter: brightness(.96); } button.quiet { background: transparent; border: 1px solid #d4dbcf; } header { display: flex; align-items: end; justify-content: space-between; gap: 20px; } .user { display: flex; align-items: center; gap: 12px; color: #657269; font-size: 14px; } .notice { margin: 28px 0; padding: 16px 20px; border-radius: 14px; background: #eeecff; color: #5e5a7c; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } .stats article { min-height: 120px; border-radius: 20px; padding: 23px; background: #ecf9df; display: grid; align-content: center; gap: 5px; } .stats article:nth-child(2) { background: #fff0e5; } .stats article:nth-child(3) { background: #e7f5fb; } .stats strong { font-size: 28px; } .stats span { color: #657269; font-size: 14px; } .grid { display: grid; grid-template-columns: 1.45fr .9fr; gap: 18px; } .panel { padding: 24px; } .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .job-list, .activity { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .job { padding: 17px; border: 1px solid #e0e5db; border-radius: 14px; display: flex; justify-content: space-between; gap: 12px; } .job strong, .job span { display: block; } .job span, .activity time { color: #748077; font-size: 13px; margin-top: 5px; } .badge { align-self: start; border-radius: 999px; background: #ecf9df; padding: 6px 10px; color: #40631f; font-size: 12px; font-weight: 800; white-space: nowrap; } .activity li { border-bottom: 1px solid #edf0e9; padding: 0 0 13px; color: #566158; } .activity time { display: block; } dialog { width: min(450px, calc(100vw - 28px)); border: 0; border-radius: 20px; padding: 26px; box-shadow: 0 20px 70px #0004; } dialog::backdrop { background: #20302488; } .actions { display: flex; justify-content: end; gap: 10px; margin-top: 6px; } .inline-form { grid-template-columns: 1fr 1.3fr auto; align-items: end; } .error { min-height: 20px; color: #b43d35; margin: 0; font-size: 14px; } .hint { color: #637069; font-size: 14px; } @media (max-width: 760px) { .shell { padding: 30px 16px; } header, .job { align-items: start; flex-direction: column; } .stats, .grid, .inline-form { grid-template-columns: 1fr; } .login-card { padding: 30px; } }