:root {
    --ink: #14202b;
    --muted: #53616f;
    --paper: #f6f7f9;
    --line: #dce2e8;
    --green: #087f83;
    --green2: #075e62;
    --purple: #6c2bd9;
    --blue: #1167d8;
    --orange: #d96b0b;
    --red: #b42332;
    --lime: #fff;
}

.top {
    background: #082b2c;
    height: 110px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #08a9b2, #1167d8, #6c2bd9, #d62976, #ec7a08) 1;
}
.brand { gap: 16px; flex: 0 0 auto; }
.brand img { display: block; width: 108px; height: 88px; object-fit: contain; }
.brand > .brand-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; width: auto; height: auto; border-radius: 0; background: transparent; color: #fff; font-size: 25px; line-height: 1; }
.brand-text strong { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.brand small { color: #60e5e1; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.top nav { gap: 8px; }
.top nav a { color: #fff; font-size: 19px; font-weight: 600; padding: 14px 15px; }
.top nav a:hover, .top nav a:focus-visible { background: #0c4749; color: #fff; }
.account-link { color: #fff; font-size: 18px; font-weight: 700; text-decoration-color: #54d7d4; text-underline-offset: 3px; }
.account-link:hover { color: #7fe7e4; }
.link { color: #fff; font-size: 18px; font-weight: 750; text-decoration: underline; text-decoration-color: #f0a13b; text-underline-offset: 3px; }
.btn.primary { background: var(--green); border-color: var(--green); }
.btn.primary:hover { background: var(--green2); }
.btn.danger { border-color: var(--red); color: var(--red); }

.approval-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.approval-item:first-of-type { border-top: 0; }
.task-name { font-size: 16px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.task-meta span { background: #eef8f8; color: #174f52; border-radius: 999px; padding: 4px 9px; font-size: 12px; }
.approval-item p { margin: 9px 0 0; color: var(--muted); }

.user-editor-list { margin-top: 26px; border-top: 1px solid var(--line); }
.user-editor { border-bottom: 1px solid var(--line); }
.user-editor summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 4px; cursor: pointer; }
.user-editor summary small { display: block; color: var(--muted); margin-top: 2px; }
.edit-user-form { padding: 5px 4px 22px; }
.badge.warn { background: #fff0dc; color: #8a4800; }

.audit-legend { border-top: 4px solid var(--purple); }
.legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 18px; }
.legend-grid div { display: flex; flex-direction: column; }
.legend-grid code, .audit-code { color: var(--purple); }
.legend-grid span { font-size: 12px; color: var(--muted); }
.audit-code { display: block; margin-top: 3px; font-size: 11px; }
.project-editor > summary, .nested-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; }
.project-editor > summary { font-size: 20px; }
.project-editor summary small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; font-weight: 500; }
.project-editor-body { display: grid; gap: 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.editor-section { padding-top: 24px; border-top: 1px solid var(--line); }
.nested-editor { border: 1px solid var(--line); border-radius: 12px; margin: 9px 0; padding: 13px 15px; }
.nested-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.span-two { grid-column: span 2; }
.result-editor-list { display: grid; gap: 8px; margin-top: 18px; }
.result-editor-row { display: grid; grid-template-columns: minmax(0,1fr) 150px auto; gap: 10px; align-items: center; }
.overdue-card { border-top: 4px solid var(--red); background: #fff7f5; }
.overdue-card .eyebrow { color: var(--red); }
.overdue-form { padding: 16px 0; border-top: 1px solid #f0d4cf; }
.day-summary-card { border-top: 4px solid var(--blue); }
.result-form optgroup { font-weight: 800; }
.summary-heading { margin-top: 34px; margin-bottom: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.project-picker { border-top: 4px solid var(--blue); }
.selected-project-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 22px; }
.selected-project-head small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; font-weight: 500; }

@media (max-width: 800px) {
    .top { height: auto; }
    .brand img { width: 76px; height: 60px; }
    .brand > .brand-text { display: none; }
    .top nav a { font-size: 15px; padding: 9px 11px; }
    .who { margin-left: auto; }
    .legend-grid { grid-template-columns: 1fr; }
    .approval-item { display: grid; }
    .edit-user-form { grid-template-columns: 1fr; }
    .span-two { grid-column: auto; }
    .result-editor-row { grid-template-columns: 1fr; }
}