.logout { padding: 4px; border: 0; background: transparent; color: #818aa1; font-size: 18px; }
.login-screen { position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 70% 20%, #342d70 0, transparent 35%), #171b2e; display: grid; place-items: center; padding: 20px; }
.login-screen.hidden { display: none; }
.login-card { background: #fff; width: min(390px, 100%); border-radius: 18px; padding: 34px; box-shadow: 0 30px 90px #090b1766; }
.login-card h2 { font-size: 25px; margin: 18px 0 5px; }
.login-card > p:not(.error) { color: var(--muted); margin: 0 0 25px; }
.login-card button { width: 100%; padding: 11px; }
.login-logo { color: #fff; display: grid; }
.admin-dialog { width: min(900px, calc(100vw - 30px)); }
.admin-content { padding: 25px; }
.admin-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 28px; }
.admin-layout h3 { margin: 0 0 16px; }
.user-form { background: #f8f9fc; padding: 20px; border-radius: 12px; }
.user-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.user-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; padding: 13px; border-bottom: 1px solid var(--line); }
.user-row:last-child { border: 0; }
.user-row .avatar { color: #fff; }
.user-meta b, .user-meta small { display: block; }
.user-meta small { color: var(--muted); margin-top: 3px; }
.user-controls { display: flex; align-items: center; gap: 7px; }
.role-badge { border-radius: 20px; padding: 5px 8px; background: #f0efff; color: #6253e6; font-size: 10px; }
.role-badge.user { background: #eff6ff; color: #2563eb; }
.state-button.off { color: #16a34a; }
.state-button.on { color: #dc2626; }
.inactive { opacity: .5; }
@media (max-width: 700px) { .admin-layout { grid-template-columns: 1fr; } .admin-dialog { max-height: 90vh; } .admin-content { overflow: auto; max-height: 90vh; } }
.actions { align-items: center; flex-wrap: wrap; }
.actions select { padding: 8px 30px 8px 10px; }
.scale-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f7f8fb; }
.scale-switch button { border: 0; padding: 5px 9px; background: transparent; }
.scale-switch button.active { background: #fff; color: var(--primary); box-shadow: 0 1px 5px #17203318; }
.period-head { flex: none; display: grid; place-items: center; border-right: 1px solid var(--line); color: #657086; font-size: 11px; text-transform: capitalize; }
.context-menu { display: none; position: fixed; z-index: 80; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 15px 45px #1720332b; }
.context-menu.show { display: grid; }
.context-menu button { border: 0; text-align: left; }
.context-menu button:hover { background: #f3f1ff; color: var(--primary); }
:root { --col-number: 52px; --col-task: 220px; --col-owner: 160px; --col-start: 125px; --col-end: 125px; --col-predecessor: 170px; --table-content-width: 852px; --table-width: 852px; }
.gantt-wrap { grid-template-columns: var(--table-width) minmax(900px, 1fr); grid-template-rows: 76px auto; }
.gantt-wrap > .task-head { grid-column: 1; grid-row: 1; z-index: 30; }
.gantt-wrap > .timeline-head { grid-column: 2; grid-row: 1; z-index: 4; }
.gantt-wrap > .task-list { grid-column: 1; grid-row: 2; z-index: 25; width: var(--table-width); overflow: hidden; background: #fff; box-shadow: 5px 0 12px #1720330d; }
.gantt-wrap > .timeline { grid-column: 2; grid-row: 2; z-index: 1; }
.task-head, .task-row { grid-template-columns: var(--col-number) var(--col-task) var(--col-owner) var(--col-start) var(--col-end) var(--col-predecessor); padding: 0; }
.task-head { overflow: hidden; z-index: 30; width: var(--table-width); isolation: isolate; background: #fafbfc; box-shadow: 5px 0 12px #1720330d; }
.timeline-head { z-index: 5; overflow: hidden; }
.task-head > span, .task-row > * { min-width: 0; padding: 0 12px; }
.task-row time { color: #737d91; font-size: 11px; white-space: nowrap; }
.task-list .task-row { position: relative; z-index: 1; background: #fff; }
.task-list .task-row:hover { background: #fafaff; }
.column-head { height: 100%; position: relative; display: flex; align-items: center; gap: 5px; border-right: 1px solid var(--line); }
.column-head:last-child { border-right: 0; }
.filter-head { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; background: #fafbfc; }
.filter-head > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.filter-head select { width: 100%; min-width: 0; height: 28px; padding: 3px 5px; border-radius: 6px; border-color: #d8dce6; background: #fff; color: #505a70; font-size: 10px; line-height: 1; text-transform: none; letter-spacing: 0; }
.timeline-head .day-head { padding-top: 21px; }
.timeline-head .period-head { height: 76px; }
.column-head:nth-child(6) { padding-right: 36px; }
.column-resizer { position: absolute; z-index: 12; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.column-resizer::after { content: ''; position: absolute; top: 9px; bottom: 9px; left: 3px; width: 2px; border-radius: 2px; background: transparent; }
.column-resizer:hover::after, body.resizing .column-resizer::after { background: var(--primary); }
body.resizing { cursor: col-resize; user-select: none; }
.scale-picker { position: relative; }
#scaleButton { min-width: 155px; display: flex; justify-content: space-between; gap: 5px; }
.scale-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 155px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 12px 35px #17203326; }
.scale-menu.show { display: grid; }
.scale-menu .scale { display: flex; justify-content: space-between; border: 0; text-align: left; }
.scale-menu .scale span { visibility: hidden; color: var(--primary); }
.scale-menu .scale.active { color: var(--primary); background: #f3f1ff; }
.scale-menu .scale.active span { visibility: visible; }
.pane-resizer { position: sticky; left: calc(var(--table-width) - 5px); grid-column: 1; grid-row: 1 / 3; justify-self: end; z-index: 40; width: 10px; cursor: col-resize; touch-action: none; }
.pane-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: #dfe3eb; }
.pane-resizer:hover::after, body.resizing .pane-resizer::after { width: 3px; background: var(--primary); }
.pane-toggle { position: absolute; z-index: 22; right: 9px; top: 50%; transform: translateY(-50%); width: 24px; height: 28px; padding: 0; border-radius: 7px; background: #fff; color: var(--primary); font-size: 19px; line-height: 1; box-shadow: 0 2px 8px #17203318; }
.gantt-wrap.table-collapsed { grid-template-columns: 48px minmax(900px, 1fr); }
.table-collapsed .task-head, .table-collapsed .task-list { width: 48px; overflow: hidden; }
.table-collapsed .task-head > *:not(.pane-toggle), .table-collapsed .task-list .task-row > * { visibility: hidden; }
.table-collapsed .pane-toggle { right: 11px; }
.table-collapsed .pane-resizer { left: 43px; cursor: default; }
.column-picker { position: relative; }
.column-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 12px 35px #17203326; }
.column-menu.show { display: grid; }
.column-menu label { flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 7px; cursor: pointer; }
.column-menu input { margin: 0; }
.hide-number .task-head > .column-head:nth-child(1), .hide-number .task-row > :nth-child(1),
.hide-task .task-head > .column-head:nth-child(2), .hide-task .task-row > :nth-child(2),
.hide-owner .task-head > .column-head:nth-child(3), .hide-owner .task-row > :nth-child(3),
.hide-start .task-head > .column-head:nth-child(4), .hide-start .task-row > :nth-child(4),
.hide-end .task-head > .column-head:nth-child(5), .hide-end .task-row > :nth-child(5),
.hide-predecessor .task-head > .column-head:nth-child(6), .hide-predecessor .task-row > :nth-child(6) { display: none; }
.type-icon { width: 12px; flex: none; font-style: normal; font-size: 11px; text-align: center; }
.task-name.type-epic span { font-weight: 750; }
.bar.type-epic { height: 12px; top: 23px; border-radius: 3px; }
.bar.type-subtask { height: 18px; top: 20px; }
.bar.milestone { width: 18px !important; min-width: 18px; height: 18px; top: 20px; border-radius: 2px; transform: rotate(45deg); overflow: visible; z-index: 4; }
.dependency-layer { position: absolute; inset: 0 auto auto 0; z-index: 2; pointer-events: none; overflow: visible; }
.dependency-path { fill: none; stroke: #687386; stroke-width: 1.6; stroke-linejoin: round; }
.dependency-start { fill: #687386; }
.timeline .bar { z-index: 4; }
.wide-field { grid-column: 1 / -1; }
.number-head, .row-number { justify-content: center; text-align: center; color: #8a93a7; }
.row-number { font-size: 11px; font-variant-numeric: tabular-nums; }
.predecessor-head { align-items: center; }
.predecessor-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.predecessor { display: flex; align-items: center; color: #667085; font-size: 11px; overflow: hidden; }
.predecessor-input { width: 100%; height: 30px; padding: 4px 7px; border: 1px solid transparent; background: transparent; color: #667085; font: inherit; text-align: center; }
.predecessor-input:hover, .predecessor-input:focus { border-color: #d8dce6; background: #fff; }
.epic-toggle { width: 20px; height: 22px; flex: none; padding: 0; border: 0; background: transparent; color: var(--primary); font-size: 20px; line-height: 1; }
.date-cell { display: flex; align-items: center; overflow: hidden; }
.inline-date { width: 100%; min-width: 0; height: 30px; padding: 3px 4px; border: 1px solid transparent; background: transparent; color: #737d91; font-size: 11px; }
.inline-date:hover, .inline-date:focus { border-color: #d8dce6; background: #fff; }
.inline-date:disabled { opacity: .65; cursor: not-allowed; }
.dependency-dim { opacity: .22; }
.task-row.dependency-highlight { background: #f2f0ff; box-shadow: inset 3px 0 var(--primary); }
.bar-row.dependency-highlight .bar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }