:root {
    font-family: Inter, Segoe UI, sans-serif;
    color: #17233f;
    background: #f4f7fb;
    --theme-primary: #3048d8;
    --theme-primary-dark: #21339f;
    --theme-navy: #111b38;
    --theme-text: #17233f;
    --theme-muted: #687793;
    --theme-surface: #ffffff;
    --theme-background: #f4f7fb;
    --theme-border: #e3e8f1;
    --theme-soft: #f7f9fc;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--theme-background); }
a { color: inherit; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 248px; flex-direction: column; border-right: 1px solid var(--theme-border); background: var(--theme-surface); }
.sidebar-brand { display: grid; gap: .45rem; padding: 1.3rem 1.15rem 1rem; border-bottom: 1px solid var(--theme-border); }
.sidebar-brand img { width: 166px; height: auto; object-fit: contain; object-position: left center; }
.sidebar-brand span { color: var(--theme-navy); font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.sidebar-nav { display: grid; gap: .2rem; padding: 1.2rem .75rem; }
.nav-section { margin: .75rem .7rem .35rem; color: #98a3b7; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: .75rem; border-radius: .55rem; color: #53617a; padding: .72rem .7rem; text-decoration: none; font-size: .9rem; font-weight: 600; }
.nav-item:hover, .nav-item:focus-visible { background: #eef1ff; color: var(--theme-primary); outline: none; }
.nav-icon { display: inline-grid; width: 1.35rem; place-items: center; color: #71809c; font-size: 1.1rem; }
.nav-item:hover .nav-icon, .nav-item:focus-visible .nav-icon { color: var(--theme-primary); }
.sidebar-footer { display: grid; gap: .25rem; margin-top: auto; border-top: 1px solid var(--theme-border); padding: 1rem 1.15rem 1.3rem; color: var(--theme-navy); font-size: .78rem; font-weight: 800; }
.sidebar-footer small { color: var(--theme-muted); font-size: .67rem; font-weight: 500; line-height: 1.4; }
.app-main { min-width: 0; width: calc(100% - 248px); margin-left: 248px; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 4.2rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text);
    padding: .75rem 2rem;
}
.topbar-context, .topbar-actions { display: flex; align-items: center; gap: .65rem; }
.topbar-context { color: var(--theme-muted); font-size: .82rem; font-weight: 600; }
.topbar-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #3cc58a; }
.topbar-actions { margin-left: auto; }
.user-chip { color: var(--theme-navy); font-size: .84rem; font-weight: 700; }
.menu-button, .sidebar-toggle, .sidebar-backdrop { display: none; }
.link-button { border: 0; background: transparent; color: var(--theme-primary); cursor: pointer; font: inherit; font-weight: 700; }
.content { width: 100%; margin: 0 auto; padding: 1.45rem clamp(1rem, 2.8vw, 3rem); }
.public-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.hero { max-width: 900px; }
.eyebrow { color: #2b7a78; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
h1 { margin: .35rem 0 .55rem; font-size: clamp(1.65rem, 2.2vw, 2.3rem); line-height: 1.08; letter-spacing: -.025em; }
h2 { margin-top: 0; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; }
p { color: #587086; line-height: 1.6; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin: 2rem 0; }
.card, .panel { border: 1px solid var(--theme-border); border-radius: .75rem; background: var(--theme-surface); padding: 1rem; box-shadow: 0 6px 18px rgba(34, 48, 82, .04); }
.card { display: grid; gap: .5rem; }
.card strong { font-size: 1.45rem; color: #12304a; }
.card span { color: #587086; }
.summary-grid .card { min-height: 6rem; }
.portfolio-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 1.35rem 0; }
.portfolio-metric { display: grid; gap: .22rem; min-height: 6.5rem; border: 1px solid var(--theme-border); border-radius: .75rem; background: var(--theme-surface); padding: .9rem; box-shadow: 0 6px 18px rgba(34, 48, 82, .04); }
.portfolio-metric > span, .portfolio-metric small { color: var(--theme-muted); font-size: .74rem; }
.portfolio-metric > span { font-weight: 700; }
.portfolio-metric strong { color: #12304a; font-size: 1.5rem; line-height: 1.1; }
.portfolio-metric.success { border-color: #b7dfce; background: #fbfefc; }
.portfolio-metric.success strong { color: #15803d; }
.portfolio-metric.warning { border-color: #f0d58b; background: #fffdf5; }
.portfolio-metric.warning strong { color: #b45309; }
.portfolio-metric.accent { border-color: #c9d4ff; background: #fbfcff; }
.portfolio-metric.accent strong { color: var(--theme-primary-dark); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.portfolio-panel { display: grid; gap: .85rem; min-height: 15rem; }
.portfolio-panel h2 { margin-bottom: 0; }
.portfolio-note { margin: auto 0 0; border-top: 1px solid #e7edf3; padding-top: .7rem; color: var(--theme-muted); font-size: .78rem; line-height: 1.45; }
.portfolio-health-list { display: grid; gap: .75rem; }
.portfolio-health-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; }
.portfolio-health-list span { display: flex; align-items: center; gap: .45rem; color: #36536b; font-size: .84rem; }
.portfolio-health-list strong { color: #12304a; font-size: .95rem; }
.health-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.health-dot.controlled, .health-bar .controlled { background: #38a169; }
.health-dot.attention, .health-bar .attention { background: #f6ad2f; }
.health-dot.high-risk, .health-bar .high-risk { background: #e05252; }
.health-bar { grid-column: 1 / -1; display: block; height: .45rem; overflow: hidden; border-radius: 999px; background: #edf1f4; }
.health-bar i, .capacity-compare b i { display: block; height: 100%; border-radius: inherit; }
.capacity-compare { display: grid; gap: .85rem; }
.capacity-compare > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; }
.capacity-compare span { color: #36536b; font-size: .84rem; }
.capacity-compare strong { color: #12304a; font-size: .9rem; }
.capacity-compare b { grid-column: 1 / -1; display: block; height: .7rem; overflow: hidden; border-radius: 999px; background: #edf1f4; }
.capacity-compare .plan { background: #4e83df; }
.capacity-compare .actual { background: #43aa75; }
.portfolio-figure { color: var(--theme-primary-dark); font-size: .88rem; font-weight: 800; }
.upcoming-milestones { display: grid; }
.upcoming-milestones a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #e7edf3; padding: .65rem 0; color: inherit; text-decoration: none; }
.upcoming-milestones a:first-child { border-top: 0; padding-top: 0; }
.upcoming-milestones a:hover strong, .upcoming-milestones a:focus-visible strong { color: var(--theme-primary); }
.upcoming-milestones span { display: grid; gap: .15rem; min-width: 0; }
.upcoming-milestones strong { overflow: hidden; color: #12304a; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-milestones small, .upcoming-milestones time { color: var(--theme-muted); font-size: .74rem; }
.upcoming-milestones time { flex: 0 0 auto; font-weight: 700; }
.portfolio-task-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.portfolio-task-stats > div { display: grid; gap: .28rem; border-radius: .6rem; background: #f5f8fb; padding: .75rem; }
.portfolio-task-stats span { color: var(--theme-muted); font-size: .72rem; }
.portfolio-task-stats strong { color: #12304a; font-size: 1.25rem; }
.portfolio-task-stats .task-overdue { background: #fff0ec; }
.portfolio-task-stats .task-overdue strong { color: #b64033; }
.button { display: inline-block; border: 0; border-radius: .5rem; background: var(--theme-primary); color: white; padding: .58rem .85rem; font-size: .88rem; text-decoration: none; font-weight: 700; box-shadow: 0 5px 12px rgba(48, 72, 216, .14); cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.button:hover, .button:focus-visible { background: var(--theme-primary-dark); color: white; }
.button:hover { transform: translateY(-1px); }
.auth-card { width: min(520px, 100%); margin: 0 auto; border: 1px solid var(--theme-border); border-radius: 1.15rem; background: var(--theme-surface); padding: clamp(2rem, 5vw, 3.4rem); box-shadow: 0 20px 60px rgba(37, 53, 91, .1); }
.auth-brand { display: block; width: min(330px, 100%); height: auto; margin: 0 auto 2.2rem; }
.form-stack, .form-grid { display: grid; gap: .7rem; margin-top: 1rem; }
.form-grid { grid-template-columns: repeat(2, 1fr); }
label { display: grid; gap: .25rem; color: #34526a; font-size: .88rem; font-weight: 600; }
input, select { width: 100%; min-height: 2.35rem; border: 1px solid #cbd9e3; border-radius: .45rem; padding: .48rem .62rem; font: inherit; font-size: .88rem; }
input[type="checkbox"] { width: 1rem; min-height: 1rem; accent-color: var(--theme-primary); }
textarea { width: 100%; min-height: 5rem; border: 1px solid #cbd9e3; border-radius: .45rem; padding: .55rem .62rem; font: inherit; font-size: .88rem; resize: vertical; }
.alert { margin: 1rem 0; border-radius: .6rem; background: #fff1e8; color: #8c461d; padding: .8rem 1rem; }
.page-heading { display: flex; justify-content: space-between; margin-bottom: .85rem; }
.page-heading p { margin: .35rem 0 0; }
.project-page-heading { align-items: center; }
.project-tabs { display: flex; gap: .35rem; margin: .25rem 0 1.15rem; overflow-x: auto; border-bottom: 1px solid var(--theme-border); scrollbar-width: thin; }
.project-tab { position: relative; flex: 0 0 auto; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--theme-muted); padding: .75rem 1rem .7rem; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.project-tab:hover { color: var(--theme-primary); background: #f7f9ff; }
.project-tab:focus-visible { z-index: 1; outline: 3px solid rgba(48, 72, 216, .24); outline-offset: -3px; }
.project-tab.active { border-bottom-color: var(--theme-primary); color: var(--theme-primary-dark); }
.project-tab-content { min-height: 20rem; }
.project-tab-content > .panel, .project-tab-content > .dashboard-panel, .project-tab-content > .kanban-board { margin-bottom: 1rem; }
.project-summary-finance { margin-top: 1rem; }
.project-create-panel { display: grid; gap: 1rem; margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.inline-link { display: block; padding: .15rem 0 0; font-size: .76rem; text-align: left; }
.money-input { display: flex; align-items: stretch; }
.money-input > span { display: inline-grid; min-width: 2rem; place-items: center; border: 1px solid #cbd9e3; border-right: 0; border-radius: .45rem 0 0 .45rem; background: #f4f7fb; color: #36536b; font-weight: 800; }
.money-input input { min-width: 0; border-radius: 0 .45rem .45rem 0; }
.quick-create-box { display: grid; gap: .7rem; border: 1px solid #c9d4ff; border-radius: .65rem; background: #f7f9ff; padding: .8rem; }
.quick-create-box > div:first-child { display: grid; gap: .15rem; }
.quick-create-box small, .field-label small, .field-help { color: var(--theme-muted); font-size: .76rem; font-weight: 500; }
.quick-create-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: .65rem; }
.project-team-picker { display: grid; gap: .45rem; }
.field-label { display: flex; align-items: baseline; gap: .45rem; color: #34526a; font-size: .88rem; font-weight: 700; }
.member-check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .45rem; }
.member-check { display: flex; min-height: 3rem; align-items: center; gap: .55rem; border: 1px solid #dce6ee; border-radius: .55rem; background: #f8fafc; padding: .45rem .55rem; cursor: pointer; }
.member-check:has(input:checked) { border-color: #9ba9f4; background: #eef1ff; }
.member-check > span { display: grid; gap: .12rem; min-width: 0; }
.member-check strong { overflow: hidden; color: #12304a; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.member-check small { overflow: hidden; color: var(--theme-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.task-create-panel { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.task-form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) minmax(9rem, 1fr); gap: .65rem .75rem; margin-top: .15rem; }
.task-form-grid > label:first-child { grid-column: span 2; }
.task-type-picker { display: inline-flex; align-items: center; justify-content: start; gap: .2rem; width: fit-content; padding: .25rem .35rem; border: 1px solid #d8e1e8; border-radius: .55rem; background: #f8fafc; color: #587086; font-size: .78rem; }
.task-type-picker > span { margin-right: .2rem; padding-left: .15rem; }
.task-type-picker button { min-height: 2.15rem; border: 1px solid #d8e1e8; border-radius: .42rem; background: #fff; color: #587086; cursor: pointer; font: inherit; padding: .35rem .55rem; }
.task-type-picker button.active { border-color: #4f35d5; background: #eef1ff; color: #3524ae; font-weight: 700; }
.task-form-grid input, .task-form-grid select { min-height: 2.15rem; padding-top: .38rem; padding-bottom: .38rem; }
.task-form-grid textarea { min-height: 4.25rem; }
.task-form-grid > .button { grid-column: 1 / -1; justify-self: end; min-width: 10rem; }
.task-create-hint { color: var(--theme-muted); font-size: .8rem; }
.field-wide { grid-column: 1 / -1; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.project-card { display: grid; gap: .8rem; border: 1px solid #dce6ee; border-radius: 1rem; background: white; padding: 1.4rem; box-shadow: 0 12px 30px rgba(25, 50, 74, .06); }
.project-card h2, .project-card p { margin: 0; }
.project-card-heading, .project-card-metrics, .member-add { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.project-card-metrics { color: #587086; font-size: .9rem; }
.status { display: inline-block; border-radius: 999px; background: #e3f2ef; color: #286b67; padding: .25rem .6rem; font-size: .75rem; font-weight: 700; }
.secondary-button { background: #edf1ff; color: var(--theme-primary-dark); box-shadow: none; }
.secondary-button:hover, .secondary-button:focus-visible { background: #dce3ff; color: var(--theme-primary-dark); }
.text-button { border: 0; background: transparent; color: #9a4f44; cursor: pointer; font: inherit; }
.member-add { margin-bottom: 1rem; }
.member-add { align-items: end; }
.member-add label { flex: 1; min-width: 10rem; }
.kanban-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .35rem 0 -.75rem; color: var(--theme-muted); font-size: .78rem; font-weight: 700; }
.kanban-toolbar > div { display: flex; gap: .35rem; }
.kanban-new-button { border: 1px solid #c9d4ff; border-radius: .42rem; background: #f7f9ff; color: var(--theme-primary-dark); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; padding: .32rem .5rem; }
.kanban-new-button:hover, .kanban-new-button:focus-visible { background: #e9edff; }
.dashboard-actions, .project-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dashboard-actions { flex-wrap: wrap; }
.dashboard-actions > div:last-child { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.dashboard-actions .button { margin: 0; }
.project-summary-panel { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.project-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.project-table-heading h2 { margin: .3rem 0 0; }
.project-table-heading p { margin: .35rem 0 0; font-size: .86rem; }
.project-table-wrap { overflow-x: auto; border: 1px solid var(--theme-border); border-radius: .55rem; }
.project-summary-table { width: 100%; min-width: 66rem; border-collapse: collapse; table-layout: fixed; font-size: .78rem; }
.project-summary-table th, .project-summary-table td { padding: .62rem .7rem; border-bottom: 1px solid #e7edf3; text-align: left; vertical-align: middle; white-space: nowrap; }
.project-summary-table th { background: #f5f8fb; color: #587086; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.project-summary-table tbody tr:last-child td { border-bottom: 0; }
.project-summary-table tbody tr:hover { background: #fafbff; }
.project-summary-table th:nth-child(1), .project-summary-table td:nth-child(1) { width: 19%; }
.project-summary-table th:nth-child(2), .project-summary-table td:nth-child(2) { width: 14%; }
.project-summary-table th:nth-child(3), .project-summary-table td:nth-child(3) { width: 11%; }
.project-summary-table th:nth-child(4), .project-summary-table td:nth-child(4) { width: 9%; }
.project-summary-table th:nth-child(5), .project-summary-table td:nth-child(5) { width: 8%; }
.project-summary-table th:nth-child(6), .project-summary-table td:nth-child(6) { width: 12%; }
.project-summary-table th:nth-child(7), .project-summary-table td:nth-child(7) { width: 9%; }
.project-summary-table th:nth-child(8), .project-summary-table td:nth-child(8) { width: 8%; }
.project-summary-table th:nth-child(9), .project-summary-table td:nth-child(9) { width: 8%; }
.project-summary-table th:nth-child(10), .project-summary-table td:nth-child(10) { width: 7%; }
.project-name-cell { overflow: hidden; text-overflow: ellipsis; }
.project-member-count { display: block; margin-top: .18rem; color: #8491a7; font-size: .68rem; }
.project-name-cell a, .table-action { color: var(--theme-primary-dark); font-weight: 800; text-decoration: none; }
.project-name-cell a:hover, .project-name-cell a:focus-visible, .table-action:hover, .table-action:focus-visible { text-decoration: underline; }
.table-status, .table-risk { display: inline-block; border-radius: 999px; padding: .2rem .45rem; font-size: .68rem; font-weight: 700; }
.table-status { background: #e3f2ef; color: #286b67; }
.table-status.on-hold { background: #fff1ce; color: #8a6815; }
.table-status.closed { background: #eef1f5; color: #687793; }
.table-risk.low { background: #e3f2ef; color: #286b67; }
.table-risk.medium { background: #fff1ce; color: #8a6815; }
.table-risk.high { background: #ffe7e1; color: #a64d3e; }
.table-empty { display: grid; gap: .25rem; padding: 1rem; border: 1px dashed #cbd9e3; border-radius: .55rem; color: #587086; font-size: .86rem; }
.table-empty strong { color: var(--theme-navy); }
.dashboard-panel { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.project-dashboard-heading h2 { margin: .35rem 0 0; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.dashboard-metrics div { display: grid; gap: .3rem; border-radius: .75rem; background: #f5f8fb; padding: .9rem; }
.risk-surface { position: relative; overflow: hidden; }
.risk-surface::before { position: absolute; inset: 0 auto 0 0; width: .3rem; content: ""; background: #2f9e8f; }
.risk-surface-medium { border-color: #f0d58b; background: #fffdf5; }
.risk-surface-medium::before { background: #d49b1f; }
.risk-surface-high { border-color: #e9b1a8; background: #fff9f7; }
.risk-surface-high::before { background: #c45145; }
.metric-risk-medium { background: #fff1ce !important; box-shadow: inset 0 0 0 1px #f0d58b; }
.metric-risk-high { background: #ffe7e1 !important; box-shadow: inset 0 0 0 1px #e9b1a8; }
.dashboard-metrics strong { color: #12304a; font-size: 1.35rem; }
.dashboard-metrics span { color: #587086; font-size: .8rem; }
.risk { border-radius: 999px; padding: .35rem .7rem; font-size: .75rem; font-weight: 700; }
.risk.low { background: #e3f2ef; color: #286b67; }
.risk.medium { background: #fff1ce; color: #8a6815; }
.risk.high { background: #ffe7e1; color: #a64d3e; }
.risk-note { margin: 0; }
.timeline-panel { overflow: hidden; }
.timeline-forms { display: grid; gap: 1rem; margin: 1rem 0 1.25rem; }
.inline-form { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.inline-form label { display: grid; gap: .3rem; min-width: 10rem; flex: 1; }
.timeline-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: .25rem 0 .65rem; color: #587086; font-size: .78rem; }
.timeline-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.timeline-quick-create { border: 1px solid #c9d4ff; border-radius: .45rem; background: #fff; color: #3524ae; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; padding: .32rem .5rem; }
.timeline-quick-create:hover, .timeline-quick-create:focus-visible { background: #eef1ff; }
.timeline-toolbar > span { color: #12304a; font-weight: 700; }
.timeline-toolbar small { margin-left: auto; }
.timeline-zoom { display: inline-flex; padding: .15rem; border: 1px solid #dce5eb; border-radius: .55rem; background: #f6f8fa; }
.timeline-zoom button { border: 0; border-radius: .38rem; background: transparent; color: #587086; cursor: pointer; font: inherit; padding: .28rem .55rem; }
.timeline-zoom button.active { background: #4f35d5; color: #fff; box-shadow: 0 1px 3px rgba(43, 28, 139, .24); }
.timeline-today-button { border: 1px solid #c9d4ff; border-radius: .48rem; background: #eef1ff; color: #3524ae; cursor: pointer; font: inherit; font-weight: 700; padding: .35rem .65rem; }
.timeline-today-button:hover, .timeline-today-button:focus-visible { background: #dfe5ff; }
.timeline-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .2rem 0 .75rem; color: #587086; font-size: .75rem; }
.timeline-legend span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 1px solid #e0e8ed; border-radius: 999px; background: #f8fafc; white-space: nowrap; }
.timeline-interaction-hint { margin: -.15rem 0 .7rem; color: #587086; font-size: .76rem; }
.timeline-interaction-hint strong { color: #36536b; }
.legend-swatch { display: inline-block; width: .8rem; height: .45rem; border-radius: 999px; }
.legend-swatch.pending { background: #94a3b8; }
.legend-swatch.in-progress { background: #4f46e5; }
.legend-swatch.completed { background: #16a34a; }
.legend-diamond { color: #d97706; font-size: .9rem; }
.timeline-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #d8e1e8; border-radius: .65rem; background: #fff; scrollbar-width: thin; }
.timeline-grid { position: relative; --timeline-task-width: 20rem; --timeline-cell-width: 2.65rem; width: max(100%, calc(var(--timeline-task-width) + var(--timeline-days) * var(--timeline-cell-width))); min-width: calc(var(--timeline-task-width) + var(--timeline-days) * var(--timeline-cell-width)); }
.timeline-zoom-week { --timeline-cell-width: 1.45rem; }
.timeline-zoom-month { --timeline-cell-width: .82rem; }
.timeline-header, .timeline-row, .milestone-row { display: flex; min-width: 100%; align-items: stretch; }
.timeline-header { position: sticky; top: 0; z-index: 3; color: #587086; font-size: .72rem; text-transform: uppercase; border-bottom: 1px solid #d8e1e8; background: #f7fafc; }
.timeline-row { min-height: 3.9rem; border-bottom: 1px solid #edf1f4; font-size: .86rem; }
.timeline-task-column { position: sticky; left: 0; z-index: 3; display: flex; width: var(--timeline-task-width); min-width: var(--timeline-task-width); max-width: var(--timeline-task-width); flex-direction: column; justify-content: center; gap: .2rem; padding: .5rem .7rem; border-right: 1px solid #d8e1e8; background: #fff; box-sizing: border-box; box-shadow: 7px 0 10px rgba(36, 59, 79, .04); }
.timeline-header .timeline-task-column { z-index: 5; background: #f7fafc; }
.timeline-task-heading { display: flex; min-width: 0; align-items: center; gap: .4rem; }
.timeline-phase-toggle { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border: 0; border-radius: .25rem; background: #e7edf3; color: #36536b; cursor: pointer; font: inherit; font-size: .78rem; line-height: 1; padding: 0; }
.timeline-phase-toggle:hover, .timeline-phase-toggle:focus-visible { background: #dbe5ed; color: #12304a; }
.timeline-milestone-status { margin-left: auto; border: 0; background: transparent; color: #587086; cursor: pointer; font: inherit; font-size: .66rem; font-weight: 700; padding: .15rem; }
.timeline-milestone-status:hover, .timeline-milestone-status:focus-visible { color: #3524ae; text-decoration: underline; }
.timeline-task-column strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #12304a; }
.timeline-task-column > span { color: #6b8091; font-size: .72rem; text-transform: none; }
.timeline-task-column.timeline-child { padding-left: 1.55rem; }
.timeline-id { flex: 0 0 auto; color: #91a1ad !important; font-size: .58rem !important; font-weight: 700; letter-spacing: .04em; }
.timeline-phase-row .timeline-task-column { background: #f7fafc; }
.timeline-phase-row .timeline-task-column strong { font-weight: 800; }
.timeline-phase-row .timeline-bar { height: .85rem; }
.timeline-calendar { position: relative; width: calc(var(--timeline-days) * var(--timeline-cell-width)); min-width: calc(var(--timeline-days) * var(--timeline-cell-width)); flex: 1 0 calc(var(--timeline-days) * var(--timeline-cell-width)); }
.timeline-scale { display: grid; grid-template-rows: 1.55rem 2.1rem; }
.timeline-months, .timeline-days { display: grid; grid-template-columns: repeat(var(--timeline-days), minmax(var(--timeline-cell-width), 1fr)); }
.timeline-months span { display: flex; align-items: center; padding-left: .4rem; border-right: 1px solid #d8e1e8; color: #36536b; font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
.timeline-day { display: grid; place-items: center; align-content: center; gap: .08rem; min-height: 3.1rem; border-right: 1px solid #e4edf2; font-size: .7rem; text-transform: none; }
.timeline-day b { color: #12304a; font-size: .78rem; }
.timeline-day small { color: #7890a0; font-size: .62rem; text-transform: uppercase; }
.timeline-day.weekend { background: #f4f7f9; }
.timeline-track { align-self: stretch; min-height: 3.9rem; background-color: #fff; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--timeline-days) - 1px), #e4edf2 calc(100% / var(--timeline-days) - 1px), #e4edf2 calc(100% / var(--timeline-days))); }
.timeline-zoom-week .timeline-track, .timeline-zoom-month .timeline-track { background-image: none; }
.timeline-scale-grid { position: absolute; inset: 0; z-index: 0; display: flex; }
.timeline-scale-grid span { display: block; height: 100%; box-sizing: border-box; border-right: 1px solid #e4edf2; }
.timeline-today-line { position: absolute; top: 0; bottom: 0; z-index: 1; border-left: 2px solid #e05252; opacity: .65; pointer-events: none; }
.timeline-today-line.timeline-today-focus { animation: timeline-today-pulse 1.25s ease-out; }
@keyframes timeline-today-pulse { 0% { border-left-width: 2px; box-shadow: 0 0 0 0 rgba(224, 82, 82, .55); opacity: .65; } 35% { border-left-width: 4px; box-shadow: 0 0 0 7px rgba(224, 82, 82, 0); opacity: 1; } 100% { border-left-width: 2px; box-shadow: 0 0 0 10px rgba(224, 82, 82, 0); opacity: .65; } }
.timeline-bar { position: absolute; top: 50%; z-index: 2; display: flex; min-width: max(.9rem, calc(80% / var(--timeline-days))); height: .78rem; overflow: hidden; align-items: center; border-radius: 999px; transform: translateY(-50%); box-shadow: 0 2px 5px rgba(25, 40, 75, .14); cursor: grab; touch-action: none; }
.timeline-bar::before, .timeline-bar::after { position: absolute; z-index: 3; top: 0; bottom: 0; width: .45rem; content: ""; cursor: ew-resize; }
.timeline-bar::before { left: 0; }
.timeline-bar::after { right: 0; }
.timeline-bar.timeline-item-dragging { cursor: grabbing; opacity: .8; box-shadow: 0 0 0 3px rgba(79, 70, 229, .2), 0 4px 10px rgba(25, 40, 75, .2); }
.timeline-bar.pending { background: #94a3b8; }
.timeline-bar.in-progress { background: #4f46e5; }
.timeline-bar.completed { background: #16a34a; }
.timeline-bar.phase { border-radius: .25rem; }
.timeline-progress { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .35); }
.timeline-bar b { position: relative; z-index: 1; margin-left: .35rem; color: #fff; font-size: .6rem; }
.timeline-dependency-layer { position: absolute; inset: 0 auto auto 0; z-index: 1; overflow: visible; pointer-events: none; }
.timeline-dependency-layer path { fill: none; stroke: #7a8d9c; stroke-width: 1.5; stroke-dasharray: 2 1; vector-effect: non-scaling-stroke; }
.timeline-dependency-layer marker path { fill: #7a8d9c; stroke: none; }
.timeline-status { font-weight: 700; }
.timeline-status.pending { color: #64748b; }
.timeline-status.in-progress { color: #4338ca; }
.timeline-status.completed { color: #15803d; }
.timeline-sequence { position: absolute; top: 50%; right: .35rem; display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 50%; background: #fff1ce; font-size: .7rem; transform: translateY(-50%); }
.sequence-warning { color: #b45309; font-weight: 700; }
.sequence-ok { color: #15803d; }
.timeline-sequence-alert { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: .25rem 0 .7rem; padding: .55rem .7rem; border: 1px solid #f5d486; border-radius: .55rem; background: #fff9e8; color: #8b5e00; font-size: .8rem; }
.timeline-reschedule-list { display: grid; width: 100%; gap: .35rem; margin-top: .15rem; }
.timeline-reschedule-list > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding-top: .35rem; border-top: 1px solid rgba(180, 116, 0, .16); }
.milestone-row { min-height: 3.4rem; border-top: 1px dashed #d8e1e8; font-size: .86rem; }
.milestone-track { min-height: 3.4rem; }
.milestone-marker { position: absolute; top: 50%; color: #d97706; font-size: 1.05rem; line-height: 1; cursor: grab; touch-action: none; transform: translate(-50%, -50%); }
.milestone-marker.timeline-item-dragging { cursor: grabbing; color: #b45309; filter: drop-shadow(0 0 3px rgba(217, 119, 6, .45)); }
.timeline-edit-panel { display: grid; gap: .8rem; margin-top: 1rem; padding: 1rem; border: 1px solid #d8e1e8; border-radius: .7rem; background: #f8fafc; }
.timeline-edit-panel h3 { margin: .25rem 0 0; color: #12304a; font-size: 1rem; }
.timeline-edit-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.timeline-edit-form label { display: grid; gap: .3rem; color: #587086; font-size: .78rem; }
.timeline-edit-form label:first-child { grid-column: span 2; }
.timeline-edit-actions { display: flex; align-items: end; gap: .6rem; }
.timeline-task-edit { overflow: hidden; border: 0; background: transparent; color: #12304a; cursor: pointer; font: inherit; font-weight: 700; text-align: left; text-decoration: underline dotted transparent; text-overflow: ellipsis; white-space: nowrap; }
.timeline-task-edit:hover, .timeline-task-edit:focus-visible { color: #4f35d5; text-decoration-color: currentColor; }
.dependency-list { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; font-size: .85rem; }
.dependency-list span { padding: .4rem .6rem; background: #eef3f6; border-radius: .5rem; }
.cost-panel { display: grid; gap: 1rem; }
.cost-metrics { grid-template-columns: repeat(4, 1fr); }
.rate-list { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .85rem; }
.rate-list span { padding: .4rem .6rem; background: #eef3f6; border-radius: .5rem; }
.operations-panel { display: grid; gap: 1rem; }
.report-filters { max-width: 32rem; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.table-wrap th, .table-wrap td { padding: .65rem; border-bottom: 1px solid #d8e1e8; text-align: left; }
.table-wrap th { color: #587086; font-size: .78rem; text-transform: uppercase; }
.restore-box { display: grid; gap: .4rem; padding: 1rem; background: #f5f8fb; border-radius: .75rem; }
.timer-panel { display: grid; gap: .7rem; }
.timer-panel > div:first-child p { margin: .35rem 0; }
.task-time-budget { margin: -.15rem 0 0; color: #36536b; font-size: .8rem; }
.task-time-budget strong { color: var(--theme-primary-dark); }
.timer-controls { display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; gap: .55rem; align-items: center; }
.timer-running { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stop-button { background: #a64d3e; }
.week-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.week-heading h2 { margin: 0; }
.week-total { display: grid; gap: .25rem; margin: 1.5rem 0; }
.week-total strong { color: #12304a; font-size: 2rem; }
.week-total span { color: #587086; }
.time-list { display: grid; }
.time-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #e4edf2; padding: 1rem 0; }
.time-row > div:first-child { display: grid; gap: .25rem; }
.time-row small { color: #587086; }
.time-row-end { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.kanban-column { min-height: 15rem; border: 1px solid #dce6ee; border-radius: 1rem; background: #edf3f7; padding: 1rem; }
.kanban-column > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.kanban-column h2 { margin: 0; font-size: 1rem; }
.task-card { display: grid; gap: .65rem; margin-bottom: .75rem; border: 1px solid #dce6ee; border-radius: .75rem; background: white; padding: 1rem; box-shadow: 0 5px 15px rgba(25, 50, 74, .05); }
.task-card.phase-card { border-color: #b9c4f1; background: #f8f9ff; }
.task-card-top, .task-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.task-card-top { flex-wrap: wrap; }
.task-card small { color: #587086; }
.task-type-badge { border-radius: 999px; padding: .2rem .5rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.task-type-badge.task { background: #e7edf3; color: #36536b; }
.task-type-badge.phase { background: #e6e9ff; color: #3524ae; }
.edit-work-button { margin-right: auto; color: var(--theme-primary-dark); }
.editing-work-panel { border-color: #9ba9f4; box-shadow: 0 0 0 3px rgba(48, 72, 216, .1); }
.work-form-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: .75rem; }
.work-form-actions .button { min-width: 10rem; }
.priority { border-radius: 999px; padding: .2rem .5rem; font-size: .7rem; font-weight: 700; }
.priority.high { background: #ffe7e1; color: #a64d3e; }
.priority.medium { background: #fff1ce; color: #8a6815; }
.priority.low { background: #e3f2ef; color: #286b67; }
.user-list { display: grid; gap: .75rem; }
.user-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e4edf2; padding: 1rem 0; }
.user-row div { display: grid; gap: .25rem; }
.user-row small { color: #587086; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 16px 0 30px rgba(25, 40, 75, .12); }
    .app-main { width: 100%; margin-left: 0; }
    .menu-button { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; color: var(--theme-primary); cursor: pointer; font-size: 1.2rem; }
    .menu-button:hover { background: #eef1ff; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(17, 27, 56, .3); }
    .sidebar-toggle:checked ~ .sidebar { transform: translateX(0); }
    .sidebar-toggle:checked ~ .sidebar-backdrop { display: block; }
}

@media (max-width: 700px) {
    .topbar { gap: .75rem; padding: .7rem 1rem; }
    .topbar-context { display: none; }
    .user-chip { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .summary-grid { grid-template-columns: 1fr; }
    .portfolio-metrics, .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-metrics { margin: 1rem 0; }
    .form-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .kanban-board { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .timer-controls { grid-template-columns: 1fr; }
    .dashboard-actions, .project-dashboard-heading { align-items: flex-start; flex-direction: column; }
    .kanban-toolbar { align-items: flex-start; flex-direction: column; margin-bottom: 0; }
    .kanban-toolbar > div { width: 100%; }
    .kanban-new-button { flex: 1; }
    .dashboard-actions > div:last-child { width: 100%; justify-content: flex-start; gap: .75rem; }
    .dashboard-actions .button { margin: 0; }
    .project-table-heading { align-items: flex-start; flex-direction: column; }
    .project-table-heading .button { width: 100%; text-align: center; }
    .quick-create-fields { grid-template-columns: 1fr; }
    .quick-create-fields .button { width: 100%; }
    .member-check-list { grid-template-columns: 1fr; }
    .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
    .week-heading { align-items: flex-start; flex-direction: column; }
    .time-row { align-items: flex-start; flex-direction: column; }
    .time-row-end { width: 100%; justify-content: space-between; }
    .content { padding: 1.5rem 1rem 2rem; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .project-page-heading { gap: .7rem; }
    .project-tabs { margin-right: -.25rem; margin-left: -.25rem; padding: 0 .25rem; }
    .project-tab { padding-right: .75rem; padding-left: .75rem; }
    .task-form-grid { grid-template-columns: 1fr; }
    .task-form-grid > label:first-child { grid-column: auto; }
    .task-form-grid > .button, .work-form-actions { width: 100%; }
    .work-form-actions { align-items: stretch; flex-direction: column; }
    .work-form-actions .button { width: 100%; }
    .timeline-grid { --timeline-task-width: 12rem; --timeline-cell-width: 2.35rem; min-width: calc(var(--timeline-task-width) + var(--timeline-days) * var(--timeline-cell-width)); }
    .timeline-zoom-week { --timeline-cell-width: 1.3rem; }
    .timeline-zoom-month { --timeline-cell-width: .75rem; }
    .timeline-legend { gap: .55rem .8rem; }
    .timeline-toolbar small { width: 100%; margin-left: 0; }
    .timeline-edit-form { grid-template-columns: 1fr; }
    .timeline-edit-form label:first-child { grid-column: auto; }
    .auth-card { padding: 2rem 1.35rem; }
    .auth-brand { margin-bottom: 1.5rem; }
}