:root { font-family: Inter, system-ui, sans-serif; color: #17211b; background: #f4f6f2; }
* { box-sizing: border-box; } body { margin: 0; } .shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; }
aside { padding: 32px 22px; background: #163d2c; color: white; } .brand { color: white; font-size: 1.35rem; font-weight: 800; text-decoration: none; }
nav { display: grid; gap: 8px; margin-top: 48px; } nav a { color: #c8dace; padding: 12px; border-radius: 9px; text-decoration: none; } nav a.active, nav a:hover { color: white; background: #24583f; }
.account-panel { display: grid; gap: 8px; margin-top: 36px; font-size: .85rem; overflow-wrap: anywhere; } .account-panel a { color: white; }
main { width: min(960px, 100%); padding: 56px clamp(24px, 6vw, 72px); } header { margin-bottom: 28px; } h1 { margin: 4px 0; font-size: 2.4rem; } h2 { margin-top: 30px; } .eyebrow { margin: 0; color: #4d8063; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.quick-capture { display: grid; grid-template-columns: minmax(220px, 1fr) 130px 140px auto auto; gap: 10px; padding: 16px; background: white; border-radius: 14px; box-shadow: 0 8px 28px #183d2a12; } input, select, button { border: 1px solid #ccd6cf; border-radius: 9px; padding: 12px; font: inherit; } button { background: #2f7250; color: white; border: 0; font-weight: 700; cursor: pointer; }
.success { color: #247044; } .task-list { display: grid; gap: 9px; } .task-card { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 12px; background: white; padding: 16px; border-radius: 12px; } .task-card.is-completed .task-body { opacity: .55; text-decoration: line-through; } .task-actions { display: flex; flex-wrap: wrap; gap: 6px; } button.complete-action { background: #2f7250; } button.secondary { background: #edf1ee; color: #315341; } .edit-task { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 130px 160px auto auto; gap: 8px; } small { display: block; color: #718077; margin-top: 4px; } .badge { background: #edf1ee; padding: 5px 9px; border-radius: 99px; font-size: .82rem; } .priority-high, .priority-critical { color: #a72c2c; background: #fdeaea; }
.attention-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 24px; } .attention { display: grid; gap: 5px; padding: 18px; color: #26372d; background: white; text-decoration: none; border-radius: 12px; border-top: 4px solid #8ba698; } .attention strong { font-size: 2rem; } .attention.danger { border-color: #cf4c4c; } .attention.today { border-color: #e2ad36; } .attention.waiting { border-color: #7b69c7; } .attention.done { border-color: #45a267; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; } .view-tabs a { padding: 8px 12px; border-radius: 99px; color: #385544; background: #e6ece8; text-decoration: none; } .view-tabs a.active { color: white; background: #2f7250; }
.auth-card { width: min(520px, 100%); margin: 30px auto; padding: 26px; background: white; border-radius: 16px; box-shadow: 0 8px 28px #183d2a12; } .auth-card form, .auth-card label { display: grid; gap: 8px; } .auth-card form { gap: 16px; } .auth-card label.check { display: flex; align-items: center; } .validation-message, .validation-errors { color: #b72d2d; } .invite-card { margin-left: 0; } .invite-result { display: grid; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #dce3de; } .user-list { display: grid; gap: 8px; } .user-list article { display: flex; justify-content: space-between; background: white; padding: 14px; border-radius: 10px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .project-grid article, .empty { background: white; border-radius: 12px; padding: 20px; } .project-grid h2 { margin: 0; }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } aside { padding: 18px; } nav { display: flex; flex-wrap: wrap; margin-top: 16px; } main { padding: 30px 18px; } .quick-capture, .edit-task { grid-template-columns: 1fr; } .task-card { grid-template-columns: auto 1fr; } .task-actions, .badge { grid-column: 2; } .attention-grid { grid-template-columns: repeat(2, 1fr); } }