@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
    color-scheme: light;
    --bg: #f1eadf;
    --panel: #fffaf3;
    --panel-soft: #f4e9d7;
    --ink: #10251d;
    --muted: #66756d;
    --line: #d9c5a8;
    --brand: #0f3a2f;
    --brand-deep: #0a2a22;
    --brand-soft: #1a5645;
    --accent: #d68a3a;
    --accent-soft: #f2c484;
    --mint: #2f9973;
    --blue: #4b87b3;
    --warn: #b84a3a;
    --shadow: none;
    --table-line: rgba(217, 197, 168, 0.38);
    --table-line-soft: rgba(217, 197, 168, 0.22);
}

/* Reference dashboard final overrides. Keep this block after legacy dashboard
   styles so the report layout is not overwritten by older .task-row rules. */
.index-page.report-page {
    background: #fff;
}

.index-page.report-page .report-header {
    height: 96px;
    padding: 18px 36px 8px;
}

.index-page.report-page .report-header h1 {
    font-size: 42px;
    font-weight: 850;
    line-height: 1;
}

.index-page.report-page .report-header p {
    margin-top: 10px;
    color: #065dbc;
    font-size: 24px;
    font-weight: 750;
}

.index-page.report-page .report-header-actions {
    gap: 8px;
    padding-top: 8px;
}

.index-page.report-page .report-header-icon {
    width: 22px;
    height: 22px;
}

.index-page.report-page .report-add-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #b8cdfa;
    border-radius: 8px;
    background: #fff;
}

.index-page.report-page .report-add-button img {
    width: 21px;
    height: 21px;
}

.index-page.report-page .report-dashboard {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.1fr) minmax(0, 0.98fr);
    gap: 16px;
    height: calc(100dvh - 96px);
    min-height: 0;
    overflow: hidden;
    padding: 0 6px 14px;
}

.index-page.report-page .report-side {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    overflow: hidden;
}

.index-page.report-page .report-group {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 58px 14px 14px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--tone) 36%, #dce8ff);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 60px rgba(49, 92, 157, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.index-page.report-page .report-group-title {
    top: 10px;
    left: 31px;
    min-width: 232px;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0 28px 0 54px;
    background: color-mix(in srgb, var(--tone) 14%, #fff);
}

.index-page.report-page .report-group-icon {
    position: absolute;
    left: 10px;
    width: 42px;
    height: 42px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(145deg, color-mix(in srgb, var(--tone) 62%, #fff) 0%, var(--tone) 88%);
}

.index-page.report-page .report-group-icon::before,
.index-page.report-page .report-group-icon::after {
    display: none;
}

.index-page.report-page .report-group-icon img {
    width: 25px;
    height: 25px;
}

.index-page.report-page .report-group-title h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.index-page.report-page .report-card-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: 9px;
    min-height: 0;
    overflow: hidden;
}

.index-page.report-page .is-compact-group .report-card-list {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.index-page.report-page .report-task-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 18px 20px 18px 28px !important;
    border: 1px solid color-mix(in srgb, var(--tone) 28%, #dae7ff) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 10px 28px rgba(49, 92, 157, 0.09) !important;
}

.index-page.report-page .report-task-copy dl {
    display: grid;
    gap: 9px;
    margin: 0;
}

.index-page.report-page .report-task-copy div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
}

.index-page.report-page .report-task-copy dt {
    color: #005fff;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}

.index-page.report-page .report-task-copy dd {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #071a55;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-page.report-page .report-task-copy div:first-child dd {
    font-size: 20px;
    font-weight: 850;
    line-height: 1.22;
}

.index-page.report-page .report-progress-block {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.index-page.report-page .report-progress-block > span {
    color: #263861;
    font-size: 13px;
    font-weight: 800;
}

.index-page.report-page .report-progress-ring {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border: 7px solid transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(var(--progress-status-color, var(--tone)) var(--progress-percent), #eceff4 0) border-box !important;
    color: #071a55 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.index-page.report-page .report-task-card.is-compact {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 9px 16px !important;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dl {
    gap: 3px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy div {
    grid-template-columns: 74px minmax(0, 1fr);
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dt {
    font-size: 12px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dd {
    font-size: 13px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy div:first-child dd {
    font-size: 16px;
}

.index-page.report-page .report-task-card.is-compact .report-progress-ring {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-width: 6px !important;
    font-size: 15px !important;
}

.index-page.report-page .report-core-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 58px;
    align-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 88px 36px 42px;
}

.index-page.report-page .report-core-panel::before {
    inset: 26px -8px 4px;
    border: 16px solid rgba(43, 105, 240, 0.08);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 48%, rgba(234, 242, 255, 0.62) 70%, rgba(255, 255, 255, 0.2) 100%);
}

.index-page.report-page .report-core-panel::after {
    inset: 46px 4px 24px;
    border-color: rgba(43, 105, 240, 0.46);
    border-top-color: rgba(43, 105, 240, 0.74);
}

.index-page.report-page .report-target-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.5), transparent 28%),
        linear-gradient(145deg, #6c8cff 0%, #2b69f0 86%);
}

.index-page.report-page .report-target-icon::before,
.index-page.report-page .report-target-icon::after {
    display: none;
}

.index-page.report-page .report-target-icon img {
    width: 38px;
    height: 38px;
}

.index-page.report-page .report-core-head h2 {
    font-size: 30px;
    font-weight: 850;
}

.index-page.report-page .report-core-head p {
    font-size: 15px;
    font-weight: 650;
}

.index-page.report-page .report-task-card.is-core {
    grid-template-columns: minmax(0, 1fr) 122px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 18px 22px 18px 28px !important;
}

.index-page.report-page .report-task-card.is-core .report-task-copy div {
    grid-template-columns: 92px minmax(0, 1fr);
}

.index-page.report-page .report-core-chart {
    margin-top: 22px;
}

@media (max-width: 1280px) {
    .index-page.report-page {
        overflow: hidden;
    }

    .index-page.report-page .report-dashboard {
        grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.1fr) minmax(0, 0.98fr);
    }

    .index-page.report-page .report-core-panel {
        order: initial;
        min-height: 0;
    }
}

.index-page.report-page .report-core-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-height: 0;
    overflow: hidden;
}

/* Secondary-screen base overrides. The EOF guard block wins over legacy rules. */
body.popup-page,
body.detail-page {
    --ui-bg: #f6f8fd;
    --ui-panel: rgba(255, 255, 255, 0.92);
    --ui-line: #dbe6fa;
    --ui-line-strong: #b8cdfa;
    --ui-ink: #071a55;
    --ui-muted: #52617f;
    --ui-blue: #2b69f0;
    --ui-blue-deep: #173e9b;
    --ui-blue-soft: #eef4ff;
    --ui-teal: #19a7a1;
    --ui-danger: #d94848;
    color: var(--ui-ink) !important;
    background: linear-gradient(180deg, #fff 0%, #f6f8fd 52%, #eef4ff 100%) !important;
}

body.popup-page::before,
body.detail-page::before {
    display: none !important;
}

.popup-page h1,
.popup-page h2,
.detail-page h1,
.detail-page h2,
.popup-page strong,
.detail-page strong {
    color: var(--ui-ink);
    letter-spacing: 0;
}

.popup-page .topbar,
.detail-topbar {
    border: 1px solid var(--ui-line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 18px 48px rgba(43, 105, 240, 0.1) !important;
}

.popup-page .topbar::before,
.popup-page .topbar::after,
.detail-topbar::before,
.detail-topbar::after,
.form-section::before,
.created-card::before {
    display: none !important;
}

.popup-page .topbar {
    width: calc(100% - 24px) !important;
    margin-top: 12px !important;
}

.popup-page .topbar h1,
.detail-topbar h1 {
    color: var(--ui-ink) !important;
    text-shadow: none !important;
}

.task-hero-period,
.task-hero-progress > div,
.task-hero-summary > div,
.task-hero-overview-button,
.task-hero-save-button,
.detail-icon-button,
.activity-deliverable {
    border-color: var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.task-hero-progress span,
.task-hero-summary span,
.goal-progress-item > span,
.activity-detail-list span,
.activity-step-detail-list > span,
.section-title-row span,
.minimap-empty,
.progress-history-row,
.flow-plan dd,
.flow-plan-timing span {
    color: var(--ui-muted) !important;
}

.task-hero-progress strong,
.task-hero-summary strong,
.goal-progress-item strong,
.goal-progress-unit,
.activity-card-head strong,
.activity-step-detail strong,
.progress-history-row strong,
.flow-plan-main strong,
.flow-plan-timing strong {
    color: var(--ui-ink) !important;
}

.popup-layout,
.detail-brief-layout,
.detail-layout,
.detail-full-layout {
    width: calc(100% - 24px) !important;
}

.form-section,
.created-card,
.goal-card,
.detail-minimap-panel,
.detail-activity-panel,
.detail-summary,
.detail-narrative,
.detail-flow,
.progress-history,
.activity-card,
.flow-goal-node,
.flow-plan,
.bulk-dialog,
.roadmap-detail-dialog,
.basic-overview-body article,
.roadmap-detail-body article {
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    background: var(--ui-panel) !important;
    box-shadow: 0 14px 38px rgba(43, 105, 240, 0.08) !important;
}

.form-section {
    padding: 18px !important;
}

.area-kicker,
.goal-card-head,
.goal-index-label,
.goal-header-progress,
.basic-overview-body h3,
.roadmap-detail-body h3,
.bulk-dialog-head h2,
.detail-panel-head h2,
.detail-summary span,
.flow-plan dt,
.flow-step-section > span,
.section-title-row h2,
.bulk-toolbar span,
.step-panel-head span,
.history-head h2 {
    color: var(--ui-blue) !important;
}

.goal-card-head,
.detail-panel-head,
.bulk-dialog-head,
.history-head,
.plan-table-head,
.step-table-head,
.bulk-plan-head {
    border-color: var(--ui-line) !important;
    background: linear-gradient(90deg, #f4f8ff 0%, #fff 52%, #f1f7ff 100%) !important;
}

.goal-index-label::before,
.minimap-goal-title span,
.activity-goal-label span,
.flow-goal-index {
    background: var(--ui-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(43, 105, 240, 0.12) !important;
}

.popup-page input,
.popup-page select,
.popup-page textarea,
.popup-page .basic-info-grid summary,
.bulk-dialog input,
.bulk-dialog select,
.bulk-dialog textarea,
.range-button,
.bulk-plan-row .range-button,
.range-picker-head button,
.range-picker-actions button {
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

.popup-page input:focus,
.popup-page select:focus,
.popup-page textarea:focus,
.bulk-dialog input:focus,
.bulk-dialog select:focus,
.bulk-dialog textarea:focus {
    border-color: var(--ui-blue) !important;
    box-shadow: 0 0 0 3px rgba(43, 105, 240, 0.12) !important;
}

.popup-page .form-grid,
.popup-page .form-grid label,
.plan-table,
.plan-table-head span,
.plan-card,
.plan-order-controls,
.plan-card label,
.range-field,
.plan-delete-button,
.step-panel,
.step-panel-head,
.step-table-head,
.step-table-head span,
.step-list,
.step-row,
.step-row label,
.step-row .range-field,
.bulk-plan-shell,
.bulk-plan-row,
.bulk-plan-row label,
.bulk-plan-row > .range-field,
.bulk-wbs-cell,
.bulk-result-detail,
.progress-history-head,
.progress-history-row,
.detail-summary > div,
.activity-detail-list,
.activity-step-detail-list,
.activity-goal-label {
    border-color: var(--ui-line) !important;
}

.plan-card,
.step-row,
.bulk-plan-row,
.activity-card,
.minimap-goal {
    background: #fff !important;
}

.plan-card:nth-child(even),
.step-row:nth-child(even),
.bulk-plan-row:nth-child(even) {
    background: #f9fbff !important;
}

.step-panel,
.bulk-wbs-cell,
.activity-card-head span,
.activity-status,
.activity-status.is-todo {
    background: #f2f6ff !important;
    color: var(--ui-blue-deep) !important;
}

.assignee-menu,
.context-menu,
.range-popover {
    border-color: var(--ui-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(43, 105, 240, 0.14) !important;
}

.check-option,
.popup-page .form-grid .check-option,
.goal-bulk-button,
.goal-add-button,
.ghost,
.popup-page .ghost,
.compact-button,
.bulk-actions .ghost {
    border-color: var(--ui-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ui-blue) !important;
}

.check-option:has(input:checked),
.goal-bulk-button:hover,
.goal-add-button:hover,
.ghost:hover,
.popup-page .ghost:hover,
.compact-button:hover,
.bulk-actions .ghost:hover,
.context-menu button:hover,
.minimap-goal:hover,
.minimap-goal.is-selected,
.range-button:hover,
.bulk-plan-row .range-button:hover {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.icon-button,
.primary,
.popup-page .primary,
.bulk-actions .primary,
.team-manager-add .primary {
    border-color: var(--ui-blue) !important;
    border-radius: 8px !important;
    background: var(--ui-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(43, 105, 240, 0.18) !important;
}

.delete-icon-button,
.bulk-pdf-button,
.activity-deliverable-pdf {
    color: var(--ui-danger) !important;
}

.delete-icon-button:hover,
.bulk-pdf-button:hover,
.activity-deliverable-pdf:hover {
    border-color: var(--ui-danger) !important;
    background: #fff4f4 !important;
    color: var(--ui-danger) !important;
}

.bulk-link-button,
.activity-deliverable {
    border-color: rgba(43, 105, 240, 0.28) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.bulk-link-button.has-link,
.bulk-link-button:hover,
.activity-deliverable:hover {
    border-color: var(--ui-blue) !important;
    background: #fff !important;
    color: var(--ui-blue-deep) !important;
}

.range-field.is-derived .range-button,
.bulk-plan-row .range-field.is-derived .range-button,
.minimap-plan-dot.is-done,
.activity-step.is-done,
.activity-status.is-done {
    border-color: rgba(25, 167, 161, 0.36) !important;
    background: rgba(25, 167, 161, 0.12) !important;
    color: #0f8d88 !important;
}

.minimap-plan-dot.is-active,
.activity-step.is-active,
.activity-status.is-active {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue) !important;
    color: #fff !important;
}

.minimap-plan-dot.is-delayed,
.activity-step.is-delayed,
.activity-status.is-delayed {
    border-color: var(--ui-danger) !important;
    background: var(--ui-danger) !important;
    color: #fff !important;
}

.activity-card {
    border-left-width: 5px !important;
    border-left-color: var(--ui-line-strong) !important;
}

.activity-card.is-done,
.flow-plan-done {
    border-left-color: var(--ui-teal) !important;
}

.activity-card.is-active,
.flow-plan-active {
    border-left-color: var(--ui-blue) !important;
}

.activity-card.is-delayed,
.flow-plan-delayed {
    border-left-color: var(--ui-danger) !important;
    background: #fffafa !important;
}

.flow-goal-node {
    border-top-color: var(--ui-blue) !important;
}

.flow-goal-node::after,
.flow-plan-list::before,
.flow-plan::before {
    background: var(--ui-line) !important;
}

.created-card {
    width: min(760px, calc(100% - 40px)) !important;
    margin: 80px auto !important;
    padding: 36px !important;
}

.created-card h1 {
    color: var(--ui-ink) !important;
    letter-spacing: 0 !important;
}

.created-card p:not(.area-kicker) {
    color: var(--ui-muted) !important;
}

.created-card .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1180px) {
    .popup-page .topbar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .detail-page {
        min-width: 320px !important;
    }

    .detail-brief-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .detail-page-brief {
        height: auto !important;
        overflow: auto !important;
    }
}

/* Unified report tone for secondary screens. */
body.popup-page,
body.detail-page {
    --screen-bg: #f6f8fd;
    --screen-panel: rgba(255, 255, 255, 0.9);
    --screen-panel-solid: #fff;
    --screen-line: #dbe6fa;
    --screen-line-strong: #b8cdfa;
    --screen-ink: #071a55;
    --screen-muted: #52617f;
    --screen-blue: #2b69f0;
    --screen-blue-deep: #173e9b;
    --screen-blue-soft: #eef4ff;
    --screen-teal: #19a7a1;
    --screen-orange: #f08b32;
    --screen-purple: #8366e8;
    --screen-danger: #d94848;
    color: var(--screen-ink);
    background:
        linear-gradient(180deg, #fff 0%, #f6f8fd 48%, #eef4ff 100%);
}

body.popup-page::before,
body.detail-page::before {
    display: none;
}

.popup-page h1,
.popup-page h2,
.detail-page h1,
.detail-page h2 {
    color: var(--screen-ink);
    letter-spacing: 0;
}

.popup-page .topbar,
.detail-topbar {
    border: 1px solid var(--screen-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--screen-ink);
    box-shadow: 0 18px 48px rgba(43, 105, 240, 0.1);
}

.popup-page .topbar::before,
.popup-page .topbar::after,
.detail-topbar::before,
.detail-topbar::after {
    display: none;
}

.popup-page .topbar {
    grid-template-columns: minmax(260px, 1fr) minmax(340px, auto) minmax(300px, 1fr);
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 12px 18px;
}

.popup-page .topbar h1,
.detail-topbar h1 {
    color: var(--screen-ink);
    font-weight: 850;
    letter-spacing: 0;
    text-shadow: none;
}

.popup-page .topbar h1 {
    font-size: 28px;
}

.task-hero-period,
.task-hero-progress > div,
.task-hero-summary > div,
.task-hero-overview-button,
.task-hero-save-button {
    border-color: var(--screen-line);
    background: var(--screen-blue-soft);
    color: var(--screen-blue-deep);
}

.task-hero-period {
    border: 1px solid var(--screen-line-strong);
    border-radius: 10px;
    color: var(--screen-blue);
}

.task-hero-progress > div {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.task-hero-progress span,
.task-hero-summary span,
.goal-progress-item > span {
    color: var(--screen-muted);
}

.task-hero-progress strong,
.task-hero-summary strong,
.goal-progress-item strong,
.goal-progress-unit {
    color: var(--screen-ink);
}

.goal-progress-item:first-child,
.task-hero-summary > div {
    border-right-color: var(--screen-line);
}

.task-hero-overview-button {
    min-height: 36px;
    border-radius: 8px;
    color: var(--screen-blue);
}

.task-hero-overview-button:hover,
.task-hero-save-button:hover {
    border-color: var(--screen-blue);
    background: #fff;
    color: var(--screen-blue);
}

.task-hero-save-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 8px;
}

.popup-layout {
    width: calc(100% - 24px);
    padding-top: 12px;
}

.entry-form {
    gap: 14px;
}

.form-section,
.created-card,
.detail-minimap-panel,
.detail-activity-panel,
.detail-summary,
.detail-narrative,
.flow-goal-node,
.flow-plan,
.progress-history {
    border: 1px solid var(--screen-line);
    border-radius: 16px;
    background: var(--screen-panel);
    box-shadow: 0 14px 38px rgba(43, 105, 240, 0.08);
}

.form-section::before,
.created-card::before {
    display: none;
}

.form-section {
    padding: 18px;
}

.area-kicker {
    color: var(--screen-blue);
    letter-spacing: 0;
    text-transform: none;
}

.popup-page input,
.popup-page select,
.popup-page textarea,
.popup-page .basic-info-grid summary,
.bulk-dialog input,
.bulk-dialog select,
.bulk-dialog textarea {
    border: 1px solid var(--screen-line);
    border-radius: 8px;
    background: #fff;
    color: var(--screen-ink);
    box-shadow: none;
}

.popup-page input,
.popup-page select,
.popup-page textarea {
    padding: 9px 10px;
}

.popup-page input:focus,
.popup-page select:focus,
.popup-page textarea:focus,
.bulk-dialog input:focus,
.bulk-dialog select:focus,
.bulk-dialog textarea:focus {
    border-color: var(--screen-blue);
    box-shadow: 0 0 0 3px rgba(43, 105, 240, 0.12);
}

.popup-page .form-grid,
.compact-goal-grid,
.basic-info-grid,
.bulk-plan-shell,
.progress-history-table {
    border-color: var(--screen-line);
}

.popup-page .form-grid label,
.bulk-plan-row label,
.bulk-plan-row > .range-field,
.bulk-wbs-cell,
.bulk-result-detail,
.progress-history-head,
.progress-history-row {
    border-color: rgba(219, 230, 250, 0.9);
}

.popup-page .form-grid label {
    color: var(--screen-muted);
}

.assignee-dropdown summary {
    color: var(--screen-ink);
}

.assignee-dropdown summary::after {
    color: var(--screen-blue);
}

.assignee-menu,
.context-menu,
.range-popover {
    border-color: var(--screen-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(43, 105, 240, 0.14);
}

.check-option,
.popup-page .form-grid .check-option {
    border-color: var(--screen-line);
    border-radius: 8px;
    background: #fff;
    color: var(--screen-ink);
}

.check-option:has(input:checked) {
    border-color: var(--screen-blue);
    background: var(--screen-blue-soft);
    color: var(--screen-blue-deep);
}

.basic-overview-body article,
.roadmap-detail-body article,
.activity-step-detail {
    border-color: var(--screen-line);
    border-radius: 12px;
    background: #fff;
}

.basic-overview-body h3,
.roadmap-detail-body h3,
.bulk-dialog-head h2,
.goal-card-head,
.goal-index-label,
.step-panel-head span,
.bulk-toolbar span,
.history-head h2,
.detail-panel-head h2 {
    color: var(--screen-blue);
}

.basic-overview-body p,
.roadmap-detail-body p {
    color: var(--screen-ink);
}

.goal-list {
    gap: 18px;
}

.goal-card {
    border: 1px solid var(--screen-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(43, 105, 240, 0.08);
}

.goal-card-head {
    min-height: 56px;
    padding: 12px 16px;
    border-bottom-color: var(--screen-line);
    background: linear-gradient(90deg, #f7faff 0%, #fff 48%, #f2f8ff 100%);
}

.goal-index-label::before {
    background: var(--screen-blue);
    box-shadow: 0 0 0 4px rgba(43, 105, 240, 0.12);
}

.goal-header-title,
.goal-header-progress {
    color: var(--screen-ink);
}

.goal-header-owner {
    color: var(--screen-muted);
}

.goal-bulk-button,
.goal-add-button,
.delete-icon-button,
.icon-button,
.small-icon-button,
.compact-button,
.bulk-link-button,
.bulk-pdf-button,
.range-picker-head button,
.range-picker-actions button,
.context-menu button {
    border-radius: 8px;
}

.goal-bulk-button,
.goal-add-button {
    border: 1px solid var(--screen-line);
    background: #fff;
    color: var(--screen-blue);
}

.goal-bulk-button:hover,
.goal-add-button:hover {
    border-color: var(--screen-blue);
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.icon-button,
.primary,
.popup-page .primary,
.bulk-actions .primary,
.team-manager-add .primary {
    border-color: var(--screen-blue);
    background: var(--screen-blue);
    color: #fff;
    box-shadow: 0 8px 20px rgba(43, 105, 240, 0.18);
}

.icon-button:hover,
.primary:hover,
.popup-page .primary:hover,
.bulk-actions .primary:hover,
.team-manager-add .primary:hover {
    border-color: var(--screen-blue-deep);
    background: var(--screen-blue-deep);
    color: #fff;
}

.ghost,
.popup-page .ghost,
.compact-button,
.bulk-actions .ghost {
    border-color: var(--screen-line);
    background: #fff;
    color: var(--screen-blue);
}

.ghost:hover,
.popup-page .ghost:hover,
.compact-button:hover,
.bulk-actions .ghost:hover {
    border-color: var(--screen-blue);
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.delete-icon-button {
    color: var(--screen-danger);
}

.delete-icon-button:hover {
    background: #fff1f1;
    color: var(--screen-danger);
}

.goal-roadmap {
    padding: 18px 16px 16px;
}

.goal-roadmap-empty {
    border-color: var(--screen-line);
    border-radius: 12px;
    background: #f8fbff;
    color: var(--screen-muted);
}

.plan-table {
    border-top-color: var(--screen-line);
}

.plan-table-head,
.bulk-plan-head,
.step-table-head,
.progress-history-head,
.history-head {
    background: #f2f6ff;
}

.plan-table-head span,
.step-table-head span,
.bulk-plan-head span {
    border-color: var(--screen-line);
    color: var(--screen-blue);
}

.plan-card,
.step-row,
.bulk-plan-row {
    border-color: var(--screen-line);
    background: #fff;
}

.plan-card:nth-child(even),
.step-row:nth-child(even),
.bulk-plan-row:nth-child(even) {
    background: #f9fbff;
}

.plan-table-head span,
.plan-order-controls,
.plan-card label,
.range-field,
.plan-delete-button,
.step-row label,
.step-row .range-field,
.step-panel-head,
.step-list,
.step-table-head,
.step-table-head span {
    border-color: var(--screen-line);
}

.plan-order-controls .plan-order-button {
    color: var(--screen-blue);
}

.plan-order-controls .plan-order-button:hover {
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.range-button,
.bulk-plan-row .range-button,
.range-picker-head button,
.range-picker-actions button {
    border-color: var(--screen-line);
    background: #fff;
    color: var(--screen-ink);
}

.range-button:hover,
.bulk-plan-row .range-button:hover,
.range-picker-head button:hover,
.range-picker-actions button:hover {
    border-color: var(--screen-blue);
    background: var(--screen-blue-soft);
}

.range-button small,
.pdf-upload-row small,
.bulk-goal-grid label,
.bulk-plan-row label {
    color: var(--screen-muted);
}

.range-field.is-derived .range-button,
.bulk-plan-row .range-field.is-derived .range-button {
    border-color: rgba(25, 167, 161, 0.28);
    background: rgba(25, 167, 161, 0.09);
    color: #0f7e79;
}

.range-days button {
    border-radius: 7px;
    background: #fff;
}

.range-days button:hover,
.range-days .is-between {
    background: var(--screen-blue-soft);
}

.range-days .is-start,
.range-days .is-end {
    background: var(--screen-blue);
    color: #fff;
}

.step-panel {
    border-top-color: var(--screen-line);
    background: #f7faff;
}

.step-panel-head {
    background: #f2f6ff;
}

.bulk-dialog,
.roadmap-detail-dialog {
    border-color: var(--screen-line);
    border-radius: 18px;
    background: #fff;
    color: var(--screen-ink);
    box-shadow: 0 28px 84px rgba(43, 105, 240, 0.2);
}

.bulk-dialog::backdrop,
.roadmap-detail-dialog::backdrop {
    background: rgba(7, 26, 85, 0.28);
}

.bulk-dialog-head {
    border-bottom-color: var(--screen-line);
}

.bulk-panel,
.basic-info-panel,
.team-manager-panel,
.deliverable-link-panel,
.roadmap-detail-panel {
    background: #fff;
}

.team-manager-row,
.team-manager-add {
    border-color: var(--screen-line);
}

.bulk-wbs-cell {
    background: #f2f6ff;
    color: var(--screen-blue-deep);
}

.bulk-plan-row.is-step {
    background: #f3fbfb;
}

.bulk-plan-row.is-selected {
    outline-color: rgba(43, 105, 240, 0.45);
    background: var(--screen-blue-soft);
}

.bulk-link-button {
    border-color: rgba(43, 105, 240, 0.28);
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.bulk-link-button.has-link,
.bulk-link-button:hover {
    border-color: var(--screen-blue);
    background: #fff;
    color: var(--screen-blue-deep);
}

.bulk-pdf-button {
    border-color: rgba(217, 72, 72, 0.26);
    background: #fff4f4;
    color: var(--screen-danger);
}

.bulk-pdf-button.has-pdf,
.bulk-pdf-button:hover {
    border-color: var(--screen-danger);
    background: #fff;
    color: var(--screen-danger);
}

.context-menu button {
    color: var(--screen-ink);
}

.context-menu button:hover {
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.detail-page {
    min-width: 1024px;
}

.detail-topbar {
    width: calc(100vw - 24px);
    margin-top: 12px;
    padding: 14px 18px;
}

.detail-topbar h1 {
    font-size: clamp(24px, 2vw, 32px);
}

.detail-icon-button,
.activity-deliverable {
    border-color: var(--screen-line);
    border-radius: 8px;
    background: var(--screen-blue-soft);
    color: var(--screen-blue);
}

.detail-icon-button:hover,
.activity-deliverable:hover {
    border-color: var(--screen-blue);
    background: #fff;
    color: var(--screen-blue);
}

.detail-brief-layout {
    width: calc(100vw - 24px);
    height: calc(100vh - 86px);
    gap: 16px;
    margin-top: 12px;
}

.detail-panel-head {
    min-height: 70px;
    border-bottom-color: var(--screen-line);
    background: linear-gradient(90deg, #f4f8ff 0%, #fff 52%, #f1f7ff 100%);
}

.detail-panel-head > strong {
    color: var(--screen-blue);
}

.minimap-goal {
    border-color: var(--screen-line);
    border-radius: 12px;
    background: #fff;
}

.minimap-goal:hover,
.minimap-goal.is-selected {
    border-color: var(--screen-blue);
    background: var(--screen-blue-soft);
    box-shadow: inset 4px 0 0 var(--screen-blue), 0 10px 24px rgba(43, 105, 240, 0.1);
}

.minimap-goal.has-current {
    border-color: rgba(43, 105, 240, 0.42);
    background: #f8fbff;
    box-shadow: inset 4px 0 0 var(--screen-blue);
}

.minimap-goal-title span,
.activity-goal-label span,
.flow-goal-index {
    background: var(--screen-blue);
    color: #fff;
}

.minimap-goal-title strong,
.activity-card-head strong,
.activity-step-detail strong {
    color: var(--screen-ink);
}

.minimap-plan-dot,
.activity-step {
    border-color: var(--screen-line);
    background: #fff;
    color: var(--screen-muted);
}

.minimap-plan-dot.is-done,
.activity-step.is-done,
.activity-status.is-done {
    border-color: rgba(25, 167, 161, 0.36);
    background: rgba(25, 167, 161, 0.12);
    color: #0f8d88;
}

.minimap-plan-dot.is-active,
.activity-step.is-active,
.activity-status.is-active {
    border-color: var(--screen-blue);
    background: var(--screen-blue);
    color: #fff;
}

.minimap-plan-dot.is-delayed,
.activity-step.is-delayed,
.activity-status.is-delayed {
    border-color: var(--screen-danger);
    background: var(--screen-danger);
    color: #fff;
}

.activity-card {
    border: 1px solid var(--screen-line);
    border-left: 5px solid var(--screen-line-strong);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(43, 105, 240, 0.08);
}

.activity-card.is-done {
    border-left-color: var(--screen-teal);
}

.activity-card.is-active {
    border-left-color: var(--screen-blue);
}

.activity-card.is-delayed {
    border-left-color: var(--screen-danger);
    background: #fffafa;
}

.activity-goal-label {
    border-bottom-color: var(--screen-line);
}

.activity-goal-label strong {
    color: var(--screen-blue);
}

.activity-card-head span,
.activity-status,
.activity-status.is-todo {
    background: #f2f6ff;
    color: var(--screen-blue-deep);
}

.activity-detail-list,
.activity-step-detail-list {
    border-top-color: var(--screen-line);
}

.activity-detail-list span,
.activity-step-detail-list > span,
.activity-step-detail li b,
.activity-step-detail small,
.minimap-empty {
    color: var(--screen-muted);
}

.activity-detail-list p,
.activity-step-detail li {
    color: var(--screen-ink);
}

.activity-deliverable-pdf {
    border-color: rgba(217, 72, 72, 0.24);
    background: #fff4f4;
    color: var(--screen-danger);
}

.activity-deliverable-pdf:hover {
    border-color: var(--screen-danger);
    background: #fff;
    color: var(--screen-danger);
}

.detail-full-layout {
    width: calc(100vw - 24px);
}

.detail-summary {
    overflow: hidden;
}

.detail-summary > div {
    border-right-color: var(--screen-line);
    background: #fff;
}

.detail-summary span,
.flow-plan dt,
.flow-step-section > span,
.section-title-row h2 {
    color: var(--screen-blue);
}

.detail-summary strong,
.progress-history-row strong {
    color: var(--screen-ink);
}

.detail-flow {
    border: 1px solid var(--screen-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(43, 105, 240, 0.08);
}

.flow-goal-node {
    border-top-color: var(--screen-blue);
}

.flow-goal-node::after,
.flow-plan-list::before,
.flow-plan::before {
    background: var(--screen-line);
}

.flow-plan {
    border-left-color: var(--screen-line-strong);
}

.flow-plan-type,
.flow-plan-status {
    border-color: var(--screen-line);
    background: #f8fbff;
    color: var(--screen-blue);
}

.flow-plan-done {
    border-left-color: var(--screen-teal);
}

.flow-plan-active {
    border-left-color: var(--screen-blue);
    background: #f8fbff;
}

.flow-plan-delayed {
    border-left-color: var(--screen-danger);
    background: #fff8f8;
}

.flow-empty,
.detail-empty {
    border-color: var(--screen-line);
    color: var(--screen-muted);
}

.progress-history {
    overflow: hidden;
}

.progress-history-head,
.progress-history-row {
    border-bottom-color: var(--screen-line);
}

.created-card {
    width: min(760px, calc(100% - 40px));
    margin: 80px auto;
    padding: 36px;
    text-align: left;
}

.created-card .area-kicker {
    color: var(--screen-blue);
    font-size: 13px;
    font-weight: 850;
}

.created-card h1 {
    margin-top: 10px;
    color: var(--screen-ink);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 850;
    letter-spacing: 0;
}

.created-card p:not(.area-kicker) {
    color: var(--screen-muted);
}

.created-card .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .popup-page .topbar {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .task-hero-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto auto;
        justify-content: stretch;
    }

    .detail-page {
        min-width: 320px;
    }

    .detail-topbar,
    .detail-layout,
    .detail-full-layout,
    .detail-brief-layout {
        width: calc(100% - 24px);
    }

    .detail-brief-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .detail-page-brief {
        height: auto;
        overflow: auto;
    }
}

@media (max-width: 760px) {
    .popup-page .topbar h1,
    .detail-topbar h1 {
        font-size: 22px;
    }

    .task-hero-summary {
        grid-template-columns: 1fr;
    }

    .task-hero-progress > div {
        flex-wrap: wrap;
        justify-content: center;
    }

    .created-card .form-actions {
        display: grid;
    }
}

/* Responsive report scale. Reference 1 is the base; larger/taller screens grow
   the board, and smaller browser windows compress without introducing scroll. */
.index-page.report-page {
    --report-header-h: clamp(78px, 10dvh, 112px);
    --report-page-pad-x: clamp(6px, 0.9dvh, 16px);
    --report-gap: clamp(8px, 1.45dvh, 16px);
    --report-group-top: clamp(42px, 6.2dvh, 60px);
    --report-group-pad-x: clamp(10px, 1.4dvh, 16px);
    --report-group-pad-bottom: clamp(8px, 1.2dvh, 14px);
    --report-card-pad-y: clamp(8px, 1.55dvh, 18px);
    --report-card-pad-x: clamp(13px, 2dvh, 28px);
    --report-card-gap: clamp(5px, 1dvh, 9px);
    --report-header-title: clamp(32px, 4.7dvh, 48px);
    --report-header-subtitle: clamp(18px, 2.65dvh, 26px);
    --report-date-size: clamp(15px, 2.1dvh, 20px);
    --report-group-title-size: clamp(19px, 2.55dvh, 25px);
    --report-label-size: clamp(11px, 1.45dvh, 15px);
    --report-title-size: clamp(15px, 2.05dvh, 20px);
    --report-body-size: clamp(12px, 1.65dvh, 16px);
    --report-ring-size: clamp(48px, 7dvh, 72px);
    --report-ring-border: clamp(5px, 0.75dvh, 7px);
    --report-icon-size: clamp(34px, 4.8dvh, 44px);
    --report-icon-glyph: clamp(20px, 2.8dvh, 26px);
    --report-core-icon: clamp(52px, 7.4dvh, 70px);
    --report-core-icon-glyph: clamp(30px, 4dvh, 39px);
    --report-core-title: clamp(24px, 3.35dvh, 32px);
    --report-core-subtitle: clamp(12px, 1.65dvh, 15px);
}

.index-page.report-page .report-header {
    height: var(--report-header-h) !important;
    padding: clamp(10px, 1.9dvh, 24px) clamp(16px, 3.8dvh, 36px) 6px !important;
}

.index-page.report-page .report-header h1 {
    font-size: var(--report-header-title) !important;
    line-height: 1 !important;
}

.index-page.report-page .report-header p {
    margin-top: clamp(4px, 0.9dvh, 10px) !important;
    font-size: var(--report-header-subtitle) !important;
    line-height: 1.08 !important;
}

.index-page.report-page .report-date {
    font-size: var(--report-date-size) !important;
}

.index-page.report-page .report-header-icon {
    width: clamp(17px, 2.3dvh, 22px) !important;
    height: clamp(17px, 2.3dvh, 22px) !important;
}

.index-page.report-page .report-add-button {
    width: clamp(30px, 4dvh, 38px) !important;
    min-width: clamp(30px, 4dvh, 38px) !important;
    height: clamp(30px, 4dvh, 38px) !important;
}

.index-page.report-page .report-dashboard {
    height: calc(100dvh - var(--report-header-h)) !important;
    gap: var(--report-gap) !important;
    padding: 0 var(--report-page-pad-x) clamp(6px, 1.2dvh, 14px) !important;
    overflow: hidden !important;
}

.index-page.report-page .report-side {
    gap: var(--report-gap) !important;
    overflow: hidden !important;
}

.index-page.report-page .report-group {
    padding:
        var(--report-group-top)
        var(--report-group-pad-x)
        var(--report-group-pad-bottom) !important;
    overflow: hidden !important;
}

.index-page.report-page .report-group-title {
    top: clamp(6px, 1.1dvh, 10px) !important;
    left: clamp(16px, 3.1dvh, 31px) !important;
    min-width: clamp(190px, 25dvh, 232px) !important;
    height: clamp(38px, 5.1dvh, 48px) !important;
    min-height: clamp(38px, 5.1dvh, 48px) !important;
    padding-left: clamp(46px, 6dvh, 54px) !important;
}

.index-page.report-page .report-group-title h2 {
    font-size: var(--report-group-title-size) !important;
    white-space: nowrap !important;
}

.index-page.report-page .report-group-icon {
    width: var(--report-icon-size) !important;
    height: var(--report-icon-size) !important;
}

.index-page.report-page .report-group-icon img {
    width: var(--report-icon-glyph) !important;
    height: var(--report-icon-glyph) !important;
}

.index-page.report-page .report-card-list,
.index-page.report-page .report-core-list {
    gap: var(--report-card-gap) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.index-page.report-page .report-task-card,
.index-page.report-page .report-task-card.is-core,
.index-page.report-page .report-task-card.is-compact {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.index-page.report-page .report-task-card {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 11dvh, 116px) !important;
    padding:
        var(--report-card-pad-y)
        clamp(12px, 2.1dvh, 20px)
        var(--report-card-pad-y)
        var(--report-card-pad-x) !important;
}

.index-page.report-page .report-task-card.is-core {
    grid-template-columns: minmax(0, 1fr) clamp(82px, 11.5dvh, 122px) !important;
}

.index-page.report-page .report-task-card.is-compact {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 8.6dvh, 86px) !important;
    padding:
        clamp(6px, 0.95dvh, 9px)
        clamp(10px, 1.7dvh, 16px) !important;
}

.index-page.report-page .report-task-copy,
.index-page.report-page .report-task-copy dl,
.index-page.report-page .report-task-copy div {
    min-width: 0 !important;
    overflow: hidden !important;
}

.index-page.report-page .report-task-copy dl {
    gap: clamp(2px, 0.75dvh, 8px) !important;
}

.index-page.report-page .report-task-copy div {
    grid-template-columns: clamp(62px, 9.5dvh, 92px) minmax(0, 1fr) !important;
    align-items: center !important;
}

.index-page.report-page .report-task-copy dt {
    font-size: var(--report-label-size) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
}

.index-page.report-page .report-task-copy dd {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: var(--report-body-size) !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.index-page.report-page .report-task-copy div:first-child dd {
    font-size: var(--report-title-size) !important;
    line-height: 1.14 !important;
}

.index-page.report-page .report-progress-block {
    gap: clamp(2px, 0.65dvh, 6px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.index-page.report-page .report-progress-block > span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(10px, 1.4dvh, 13px) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.index-page.report-page .report-progress-ring {
    width: var(--report-ring-size) !important;
    min-width: var(--report-ring-size) !important;
    height: var(--report-ring-size) !important;
    min-height: var(--report-ring-size) !important;
    border-width: var(--report-ring-border) !important;
    font-size: clamp(14px, 2.1dvh, 20px) !important;
}

.index-page.report-page .report-task-card.is-compact .report-progress-ring {
    width: clamp(42px, 5.8dvh, 56px) !important;
    min-width: clamp(42px, 5.8dvh, 56px) !important;
    height: clamp(42px, 5.8dvh, 56px) !important;
    min-height: clamp(42px, 5.8dvh, 56px) !important;
    font-size: clamp(12px, 1.65dvh, 15px) !important;
}

.index-page.report-page .report-core-panel {
    grid-template-rows: auto minmax(0, 1fr) clamp(32px, 5.7dvh, 58px) !important;
    padding:
        clamp(54px, 9.2dvh, 88px)
        clamp(20px, 3.7dvh, 36px)
        clamp(28px, 4.6dvh, 42px) !important;
}

.index-page.report-page .report-core-head {
    margin-bottom: clamp(8px, 1.6dvh, 18px) !important;
}

.index-page.report-page .report-target-icon {
    width: var(--report-core-icon) !important;
    height: var(--report-core-icon) !important;
    margin-bottom: clamp(8px, 1.5dvh, 14px) !important;
}

.index-page.report-page .report-target-icon img {
    width: var(--report-core-icon-glyph) !important;
    height: var(--report-core-icon-glyph) !important;
}

.index-page.report-page .report-core-head h2 {
    font-size: var(--report-core-title) !important;
    line-height: 1.08 !important;
}

.index-page.report-page .report-core-head p {
    margin-top: clamp(7px, 1.25dvh, 14px) !important;
    font-size: var(--report-core-subtitle) !important;
    line-height: 1.2 !important;
}

.index-page.report-page .report-core-chart {
    height: clamp(30px, 5.7dvh, 58px) !important;
    margin-top: clamp(6px, 1.1dvh, 18px) !important;
}

@media (max-height: 820px) {
    .index-page.report-page .report-header {
        height: 82px !important;
        padding-top: 12px !important;
        padding-bottom: 6px !important;
    }

    .index-page.report-page .report-header h1 {
        font-size: 36px !important;
    }

    .index-page.report-page .report-header p {
        margin-top: 6px !important;
        font-size: 20px !important;
    }

    .index-page.report-page .report-dashboard {
        height: calc(100dvh - 82px) !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
    }

    .index-page.report-page .report-side {
        gap: 12px !important;
    }

    .index-page.report-page .report-group {
        padding: 48px 12px 10px !important;
        border-radius: 18px !important;
    }

    .index-page.report-page .report-group-title {
        top: 8px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .index-page.report-page .report-group-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .index-page.report-page .report-group-icon img {
        width: 21px !important;
        height: 21px !important;
    }

    .index-page.report-page .report-group-title h2 {
        font-size: 20px !important;
    }

    .index-page.report-page .report-task-card {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        padding: 10px 14px 10px 18px !important;
    }

    .index-page.report-page .report-task-copy dl {
        gap: 5px !important;
    }

    .index-page.report-page .report-task-copy div {
        grid-template-columns: 78px minmax(0, 1fr) !important;
    }

    .index-page.report-page .report-task-copy dt {
        font-size: 13px !important;
    }

    .index-page.report-page .report-task-copy dd {
        font-size: 14px !important;
    }

    .index-page.report-page .report-task-copy div:first-child dd {
        font-size: 17px !important;
    }

    .index-page.report-page .report-progress-ring {
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        border-width: 6px !important;
        font-size: 16px !important;
    }

    .index-page.report-page .report-progress-block > span {
        font-size: 11px !important;
    }

    .index-page.report-page .report-core-panel {
        grid-template-rows: auto minmax(0, 1fr) 40px !important;
        padding: 70px 28px 34px !important;
    }

    .index-page.report-page .report-target-icon {
        width: 54px !important;
        height: 54px !important;
        margin-bottom: 10px !important;
    }

    .index-page.report-page .report-target-icon img {
        width: 30px !important;
        height: 30px !important;
    }

    .index-page.report-page .report-core-head {
        margin-bottom: 12px !important;
    }

    .index-page.report-page .report-core-head h2 {
        font-size: 24px !important;
    }

    .index-page.report-page .report-core-head p {
        margin-top: 8px !important;
        font-size: 13px !important;
    }

    .index-page.report-page .report-task-card.is-core {
        grid-template-columns: minmax(0, 1fr) 94px !important;
        padding: 10px 14px 10px 18px !important;
    }

    .index-page.report-page .report-core-chart {
        height: 40px !important;
        margin-top: 8px !important;
    }
}

.report-page {
    --report-ink: #071a55;
    --report-blue: #2b69f0;
    --report-orange: #ff8628;
    --report-teal: #17aaa6;
    --report-purple: #5d5ff0;
    --report-line: #cfe0ff;
    --report-panel: rgba(255, 255, 255, 0.82);
    min-height: 100dvh;
    overflow: hidden;
    color: var(--report-ink);
    background: #ffffff;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.report-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 420px 120px at 22% 7%, rgba(205, 219, 241, 0.48) 0%, rgba(224, 234, 249, 0.32) 42%, transparent 72%),
        radial-gradient(ellipse 470px 130px at 88% 0%, rgba(215, 227, 247, 0.46) 0%, rgba(235, 242, 253, 0.34) 46%, transparent 72%),
        radial-gradient(ellipse 430px 120px at 13% 104%, rgba(220, 230, 248, 0.46) 0%, rgba(238, 244, 254, 0.34) 46%, transparent 74%),
        radial-gradient(ellipse 430px 120px at 88% 104%, rgba(216, 228, 247, 0.48) 0%, rgba(238, 244, 254, 0.36) 46%, transparent 74%);
    opacity: 0.96;
}

.report-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(135deg, transparent 0 21%, rgba(225, 234, 249, 0.18) 21% 29%, transparent 29% 100%),
        linear-gradient(135deg, transparent 0 74%, rgba(225, 234, 249, 0.16) 74% 81%, transparent 81% 100%);
    opacity: 0.72;
}

.report-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px 8px;
}

.report-header h1 {
    margin: 0;
    color: #071a55;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.report-header p {
    margin: 10px 0 0;
    color: #0759b6;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

.report-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
}

.report-date {
    color: #25386e;
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.report-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(43, 105, 240, 0.32);
    border-radius: 8px;
    background: #fff;
    color: #2b69f0;
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(43, 105, 240, 0.14);
}

.report-dashboard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.12fr) minmax(340px, 1fr);
    gap: 24px;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 8px 12px 20px;
}

.report-side {
    display: grid;
    align-content: stretch;
    gap: 14px;
    min-width: 0;
}

.report-group {
    --tone: var(--report-blue);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 58px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--tone) 28%, #d9e6ff);
    border-radius: 24px;
    background: var(--report-panel);
    box-shadow:
        0 18px 46px rgba(42, 85, 158, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.report-tone-blue {
    --tone: var(--report-blue);
}

.report-tone-orange {
    --tone: var(--report-orange);
}

.report-tone-teal {
    --tone: var(--report-teal);
}

.report-tone-purple {
    --tone: var(--report-purple);
}

.report-group-title {
    position: absolute;
    top: 8px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    min-height: 50px;
    padding: 0 28px 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 13%, #ffffff);
    cursor: context-menu;
}

.report-group-title h2 {
    color: #071a55;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.report-group-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 68%, #fff), var(--tone));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--tone) 28%, transparent);
}

.report-group-icon::before,
.report-group-icon::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: #fff;
}

.report-group-icon::before {
    top: 12px;
    left: 15px;
    width: 14px;
    height: 14px;
    box-shadow: -9px 5px 0 -3px rgba(255, 255, 255, 0.9), 9px 5px 0 -3px rgba(255, 255, 255, 0.9);
}

.report-group-icon::after {
    left: 10px;
    bottom: 10px;
    width: 24px;
    height: 11px;
}

.report-card-list {
    display: grid;
    gap: 8px;
    min-height: 0;
}

.report-task-card {
    --ring-color: var(--tone);
    --ring-track: #e7eaf0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 10px;
    align-items: center;
    min-height: 106px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--tone) 20%, #dbe7ff);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 26px rgba(52, 92, 151, 0.11);
    cursor: pointer;
}

.report-page .report-task-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 10px;
    align-items: center;
    min-height: 106px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--tone) 20%, #dbe7ff);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
}

.report-page .report-task-card:nth-child(even) {
    background: rgba(255, 255, 255, 0.9);
}

.report-task-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(52, 92, 151, 0.16);
}

.report-task-card.is-active {
    border-color: color-mix(in srgb, var(--tone) 58%, #ffffff);
    background: color-mix(in srgb, var(--tone) 7%, #ffffff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 16%, transparent), 0 16px 34px rgba(52, 92, 151, 0.17);
}

.report-task-card.task-row-delayed {
    background: color-mix(in srgb, #fff 86%, #fff0ec);
}

.report-task-copy {
    min-width: 0;
}

.report-task-copy dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.report-task-copy div {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    min-width: 0;
}

.report-task-copy dt {
    color: #0759e8;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.report-task-copy dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #071a55;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-task-copy div:first-child dd {
    font-size: 24px;
    font-weight: 600;
    line-height: 26px;
}

.report-progress-block {
    display: grid;
    justify-items: center;
    gap: 5px;
}

.report-progress-block > span {
    color: #263861;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.report-progress-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
    border: 7px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(var(--ring-color) var(--progress-percent), var(--ring-track) 0) border-box;
    color: #071a55;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}

.report-progress-ring.has-delay {
    --ring-color: var(--tone);
    color: #071a55;
}

.is-compact-group {
    padding-top: 56px;
}

.report-task-card.is-compact {
    min-height: 76px;
    padding: 10px 14px;
    grid-template-columns: minmax(0, 1fr) 72px;
}

.report-page .report-task-card.is-compact {
    min-height: 76px;
    padding: 10px 14px;
    grid-template-columns: minmax(0, 1fr) 72px;
}

.report-task-card.is-compact .report-task-copy dl {
    gap: 4px;
}

.report-task-card.is-compact .report-task-copy div {
    grid-template-columns: 70px minmax(0, 1fr);
}

.report-task-card.is-compact .report-task-copy dt,
.report-task-card.is-compact .report-progress-block > span {
    font-size: 13px;
}

.report-task-card.is-compact .report-task-copy dd {
    font-size: 16px;
}

.report-task-card.is-compact .report-task-copy div:first-child dd {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.report-task-card.is-compact .report-progress-ring {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    border-width: 6px;
    font-size: 16px;
}

.report-core-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 122px 44px 82px;
}

.report-core-panel::before {
    content: "";
    position: absolute;
    inset: 28px 2px;
    border: 16px solid rgba(43, 105, 240, 0.08);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 58%, rgba(236, 244, 255, 0.68) 59% 100%);
    box-shadow:
        inset 0 0 0 1px rgba(43, 105, 240, 0.12),
        0 24px 80px rgba(43, 105, 240, 0.13);
}

.report-core-panel::after {
    content: "";
    position: absolute;
    inset: 48px 20px;
    border: 2px solid rgba(43, 105, 240, 0.38);
    border-top-color: rgba(43, 105, 240, 0.7);
    border-radius: 50%;
    transform: rotate(-13deg);
}

.report-orbit span {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--report-blue);
    box-shadow: 0 8px 18px rgba(43, 105, 240, 0.25);
}

.report-orbit span:nth-child(1) {
    top: 84px;
    left: 44px;
}

.report-orbit span:nth-child(2) {
    top: 84px;
    right: 44px;
}

.report-orbit span:nth-child(3) {
    bottom: 88px;
    left: 24px;
    background: var(--report-teal);
}

.report-orbit span:nth-child(4) {
    right: 32px;
    bottom: 68px;
    background: var(--report-purple);
}

.report-core-head,
.report-core-list,
.report-core-chart {
    position: relative;
    z-index: 3;
}

.report-core-head {
    display: grid;
    justify-items: center;
    margin-bottom: 22px;
    text-align: center;
}

.report-target-icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: linear-gradient(145deg, #668cff, #2b69f0);
    box-shadow: 0 18px 34px rgba(43, 105, 240, 0.24);
}

.report-target-icon::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
}

.report-target-icon::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 20px;
    height: 20px;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
}

.report-core-head h2 {
    color: #071a55;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.report-core-head h2::after {
    content: "";
    display: block;
    width: min(310px, 100%);
    height: 2px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, rgba(43, 105, 240, 0.48), transparent);
}

.report-core-head p {
    margin: 14px 0 0;
    color: #34436f;
    font-size: 15px;
    font-weight: 600;
}

.report-core-list {
    display: grid;
    gap: 10px;
}

.report-task-card.is-core {
    min-height: 124px;
    padding: 18px 24px;
    border-radius: 18px;
}

.report-page .report-task-card.is-core {
    min-height: 124px;
    padding: 18px 24px;
    border-radius: 18px;
}

.report-task-card.is-core .report-task-copy div {
    grid-template-columns: 88px minmax(0, 1fr);
}

.report-task-card.is-core .report-task-copy dd {
    font-size: 20px;
}

.report-task-card.is-core .report-task-copy div:first-child dd {
    font-size: 24px;
    font-weight: 600;
    line-height: 26px;
}

.report-task-card.is-core .report-progress-ring {
    width: 74px;
    min-width: 74px;
    height: 74px;
    min-height: 74px;
    font-size: 20px;
}

.report-core-chart {
    height: 58px;
    margin: 18px 48px 0;
    border-bottom: 2px solid rgba(43, 105, 240, 0.38);
}

.report-core-chart::before {
    content: "";
    position: absolute;
    inset: 8px 0 0;
    background:
        linear-gradient(145deg, transparent 7%, rgba(43, 105, 240, 0.55) 7% 9%, transparent 9% 27%, rgba(43, 105, 240, 0.55) 27% 29%, transparent 29% 48%, rgba(43, 105, 240, 0.55) 48% 50%, transparent 50% 70%, rgba(43, 105, 240, 0.55) 70% 72%, transparent 72% 100%);
    clip-path: polygon(0 80%, 18% 58%, 31% 74%, 45% 35%, 67% 58%, 84% 44%, 100% 8%, 100% 100%, 0 100%);
    opacity: 0.62;
}

.report-core-chart span {
    position: absolute;
    bottom: 3px;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--report-blue);
    box-shadow: 0 6px 14px rgba(43, 105, 240, 0.22);
}

.report-core-chart span:nth-child(1) { left: 7%; bottom: 14px; }
.report-core-chart span:nth-child(2) { left: 26%; bottom: 4px; }
.report-core-chart span:nth-child(3) { left: 43%; bottom: 32px; }
.report-core-chart span:nth-child(4) { left: 67%; bottom: 16px; }
.report-core-chart span:nth-child(5) { right: 5%; bottom: 44px; }

@media (max-width: 1280px) {
    .report-page {
        overflow: auto;
    }

    .report-dashboard {
        grid-template-columns: 1fr;
        padding-inline: 18px;
    }

    .report-core-panel {
        order: -1;
        min-height: 720px;
    }
}

@media (max-width: 760px) {
    .report-header {
        display: grid;
        gap: 14px;
        padding: 22px 18px 8px;
    }

    .report-header h1 {
        font-size: 32px;
    }

    .report-header p {
        font-size: 18px;
    }

    .report-task-card,
    .report-task-card.is-core {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .report-progress-block {
        justify-items: start;
        grid-template-columns: auto auto;
        align-items: center;
    }

    .report-core-panel {
        min-height: auto;
        padding: 96px 16px 72px;
    }

    .report-core-panel::before,
    .report-core-panel::after {
        inset-inline: -70px;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(214, 138, 58, 0.18), transparent 24%),
        radial-gradient(circle at top right, rgba(47, 153, 115, 0.12), transparent 22%),
        linear-gradient(180deg, #f6efe6 0%, var(--bg) 100%);
    font-family: Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(15, 58, 47, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 58, 47, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 82%);
}

.index-page {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.topbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    width: min(1720px, calc(100% - 44px));
    margin: 26px auto 0;
    overflow: hidden;
    padding: 20px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background:
        radial-gradient(circle at 12% 18%, rgba(242, 196, 132, 0.18), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.10), transparent 18%),
        linear-gradient(145deg, var(--brand-deep) 0%, var(--brand) 52%, var(--brand-soft) 100%);
    color: #f7f0e4;
    box-shadow: 0 28px 70px rgba(15, 58, 47, 0.22);
}

.topbar::before {
    content: "";
    position: absolute;
    inset: auto -6% -46% auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 196, 132, 0.22), transparent 68%);
    pointer-events: none;
}

.topbar::after {
    content: "";
    position: absolute;
    top: -90px;
    right: 80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(242, 196, 132, 0.16);
    pointer-events: none;
}

.topbar > div {
    position: relative;
    z-index: 1;
}

.topbar > div:first-child {
    min-width: 0;
}

.topbar-org-label {
    margin: 0 0 7px;
    color: rgba(255, 244, 230, 0.72);
    font-size: 13px;
    font-weight: 900;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 9px 14px;
    border: 1px solid rgba(242, 196, 132, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 244, 230, 0.86);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-soft);
    box-shadow: 0 0 0 6px rgba(242, 196, 132, 0.12);
}

h1,
h2 {
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.topbar h1 {
    color: #f4efe6;
}

.index-page .topbar {
    flex: 0 0 48px;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-bottom: 1px solid #135643;
    border-radius: 0;
    background: linear-gradient(#37a184 0%, #29724f 18%, #07412e 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.index-page .topbar::before,
.index-page .topbar::after {
    display: none;
}

.topbar-left,
.topbar-stats,
.topbar-actions {
    position: relative;
    z-index: 1;
}

.topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}

.index-page .topbar h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.25), 1px -1px rgba(0, 0, 0, 0.25), -1px 1px rgba(0, 0, 0, 0.25), 1px 1px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.index-page .topbar h1 span {
    color: rgba(255, 255, 255, 0.74);
}

.index-page .topbar h1 b {
    color: rgba(255, 255, 255, 0.58);
    font-weight: 900;
}

.index-page .topbar-stats {
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 48px;
    border-bottom: 1px solid #135643;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(90deg, #093023 20%, #074833 50%, #093023 80%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: translateX(-50%);
}

.index-page .topbar-stats::before,
.index-page .topbar-stats::after {
    content: "";
    position: absolute;
    top: 0;
    width: 36px;
    height: 30px;
    pointer-events: none;
}

.index-page .topbar-stats::before {
    left: -35px;
    border-top-right-radius: 20px;
    box-shadow: 18px 0 #093023;
}

.index-page .topbar-stats::after {
    right: -35px;
    border-top-left-radius: 20px;
    box-shadow: -18px 0 #093023;
}

.topbar-quarter,
.topbar-stat {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    color: rgba(238, 234, 227, 0.94);
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.25), 1px -1px rgba(0, 0, 0, 0.25), -1px 1px rgba(0, 0, 0, 0.25), 1px 1px rgba(0, 0, 0, 0.25);
}

.topbar-quarter {
    margin-right: 4px;
}

.topbar-stat {
    gap: 4px;
    padding: 2px 7px 3px;
    border: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.topbar-stat span {
    color: #f4efe6;
}

.topbar-stat strong {
    color: #ffdb3a;
    font-size: 20px;
    font-weight: 950;
}

.topbar-stat-active strong {
    color: #00c896;
}

.topbar-stat-holding strong {
    color: #ff9f0a;
}

.topbar-stat-completed strong {
    color: rgba(238, 234, 227, 0.9);
}

.topbar-stat-issue strong {
    color: #ff5252;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

.topbar-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1.5px solid #1a4d42;
    border-radius: 50%;
    background: linear-gradient(#0d3f34 0%, #051f19 100%);
    color: #cef1eb;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 1px #000, 0 2px 2px rgba(0, 0, 0, 0.6);
}

.topbar-icon-button:hover {
    border-color: #36816d;
    background: linear-gradient(#115244 0%, #072b23 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px #000, 0 0 8px rgba(36, 204, 158, 0.4), 0 4px 8px rgba(0, 0, 0, 0.7);
}

h1 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 900;
    line-height: 1.12;
}

h2 {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
}

.today {
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid rgba(242, 196, 132, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f4efe6;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.layout {
    width: min(1720px, calc(100% - 44px));
    margin: 0 auto;
    padding: 22px 0 40px;
}

.index-page .layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: calc(100% - 24px);
    padding: 12px 0;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric {
    min-height: 116px;
    padding: 16px;
    border: 1px solid rgba(214, 193, 163, 0.78);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 225, 0.94) 100%);
    color: #173328;
    box-shadow: none;
}

.metric span {
    display: block;
    color: rgba(23, 51, 40, 0.68);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.metric strong {
    display: block;
    margin-top: 7px;
    color: #173328;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.metric.urgent {
    background: linear-gradient(180deg, rgba(255, 246, 232, 0.98) 0%, rgba(250, 236, 208, 0.96) 100%);
    border-color: rgba(214, 138, 58, 0.42);
}

.metric.urgent strong {
    color: #b96820;
}

.workspace {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.panel,
.board {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(217, 197, 168, 0.58);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.62);
    box-shadow: var(--shadow);
}

.panel::before,
.board::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #edd6af 38%, var(--mint) 100%);
    opacity: 0.9;
}

.panel {
    padding: 22px 20px 20px;
}

.stack {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.two-col,
.task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

input,
select,
textarea,
button,
.ghost {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d7c4a7;
    border-radius: 14px;
}

input,
select,
textarea {
    padding: 12px 14px;
    background: #fffdf8;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #8b938e;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(47, 153, 115, 0.12);
}

textarea {
    resize: vertical;
}

button,
.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(255, 253, 248, 0.74);
    color: #244638;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.ghost:hover {
    transform: translateY(-1px);
    border-color: var(--mint);
    color: var(--mint);
}

.primary {
    border-color: var(--brand);
    background: linear-gradient(145deg, var(--brand-deep) 0%, var(--brand) 100%);
    color: #f4efe6;
    box-shadow: 0 12px 28px rgba(15, 58, 47, 0.2);
}

.primary:hover {
    color: #f4efe6;
    border-color: rgba(214, 138, 58, 0.42);
    background: linear-gradient(145deg, var(--brand) 0%, var(--brand-soft) 100%);
}

.filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px 150px 88px 88px;
    gap: 10px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(251, 244, 234, 0.64);
}

.task-list {
    display: grid;
    gap: 0;
}

.task {
    padding: 16px;
    border-bottom: 1px solid #ecdfcc;
    background: transparent;
}

.task:nth-child(even) {
    background: rgba(251, 244, 234, 0.54);
}

.task:hover {
    background: #f5ecdf;
}

.task:last-child {
    border-bottom: 0;
}

.task-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.title-input {
    border-color: transparent;
    padding-left: 0;
    background: transparent;
    color: #10251d;
    font-size: 18px;
    font-weight: 900;
}

.title-input:focus {
    border-color: var(--brand-soft);
    padding-left: 10px;
    background: #fffdf8;
}

.badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.priority-높음 {
    border: 1px solid #f0bb75;
    background: #fff2df;
    color: #b96820;
}

.priority-보통 {
    border: 1px solid #b8d3e4;
    background: #eef6fb;
    color: #3d7198;
}

.priority-낮음 {
    border: 1px solid #a5cbb6;
    background: #eef7f1;
    color: #2d6a4f;
}

.progress {
    height: 8px;
    margin: 12px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #efe3cf;
}

.progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(242, 196, 132, 0.96), rgba(47, 153, 115, 0.88));
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.actions button {
    width: 86px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(68px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.chip {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #efe3cf;
    color: #315243;
    font-size: 12px;
    font-weight: 900;
}

.chip.active {
    border-color: var(--brand);
    background: linear-gradient(145deg, var(--brand-deep) 0%, var(--brand) 100%);
    color: #f4efe6;
    box-shadow: 0 10px 22px rgba(15, 58, 47, 0.16);
}

.danger {
    min-height: 34px;
    border-color: #e8b7a2;
    background: #fff1ec;
    color: var(--warn);
}

.danger:hover {
    border-color: var(--warn);
    color: var(--warn);
}

.empty {
    padding: 48px 16px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.area-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 40px;
}

.index-page .area-board {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    align-items: stretch;
    gap: 16px 24px;
}

.split-board {
    position: relative;
}

.split-board::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(15, 58, 47, 0.2) 12%, rgba(214, 138, 58, 0.34) 50%, rgba(15, 58, 47, 0.16) 88%, transparent);
    transform: translateX(-50%);
}

.area-column {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.index-page .area-column {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    min-height: 0;
}

.area-panel,
.form-section,
.created-card {
    position: relative;
    border: 1px solid rgba(217, 197, 168, 0.58);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.62);
    box-shadow: var(--shadow);
}

.area-panel,
.created-card {
    overflow: hidden;
}

.index-page .area-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.index-page .area-head {
    padding: 12px 20px 10px;
}

.index-page .area-panel::before {
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #e6c18a 34%, var(--mint) 100%);
}

.form-section {
    overflow: visible;
}

.area-panel::before,
.form-section::before,
.created-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #edd6af 38%, var(--mint) 100%);
}

.area-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(217, 197, 168, 0.62);
    background:
        linear-gradient(90deg, rgba(242, 196, 132, 0.24), rgba(255, 253, 248, 0.76) 36%, rgba(47, 153, 115, 0.1) 100%);
}

.area-kicker {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: #9b8668;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.area-kicker span {
    color: #6f766f;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

.area-title-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: context-menu;
}

.area-title-row::after {
    display: none;
}

.area-title-row h2 {
    color: var(--brand-soft);
    font-size: 20px;
    letter-spacing: -0.02em;
}

.period-selector {
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(217, 197, 168, 0.58);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.68);
    transform: translateY(-50%);
}

.period-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 1000;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.period-option:hover,
.period-option.is-active {
    background: var(--brand);
    color: #fffaf3;
}

.area-count {
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 58, 47, 0.06);
    color: var(--muted);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.45;
}

.icon-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-color: var(--brand);
    border-radius: 4px;
    background: var(--brand);
    color: #f4efe6;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.icon-button:hover {
    color: #f4efe6;
    background: var(--brand-soft);
}

.small-icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 20px;
}

.delete-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--warn);
    font-size: 20px;
    font-weight: 900;
}

.delete-icon-button:hover {
    background: #fff1ec;
    color: var(--warn);
    transform: none;
}

.delete-icon-button[hidden] {
    display: none;
}

.area-task-list {
    display: grid;
}

.index-page .area-task-list {
    display: grid;
    grid-auto-rows: calc(100% / 6);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: rgba(15, 58, 47, 0.28) transparent;
    scrollbar-width: thin;
}

.index-page .area-task-list::-webkit-scrollbar {
    width: 8px;
}

.index-page .area-task-list::-webkit-scrollbar-track {
    background: transparent;
}

.index-page .area-task-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(15, 58, 47, 0.24);
}

.area-empty {
    padding: 34px 16px;
}

.task-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 104px;
    padding: 30px 22px;
    border-bottom: 1px solid #ecdfcc;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.index-page .task-row {
    grid-template-columns: 78px minmax(0, 1fr) minmax(190px, auto);
    min-height: 0;
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.index-page .task-row-main,
.index-page .task-row-badges,
.index-page .plan-actual-compare {
    min-width: 0;
}

.index-page .task-row-title-line {
    flex-wrap: wrap;
}

.index-page .task-row-pm {
    white-space: normal;
}

.task-row-progress-mark {
    --ring-color: var(--mint);
    --ring-track: rgba(217, 197, 168, 0.42);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        linear-gradient(rgba(255, 250, 243, 0.98), rgba(255, 250, 243, 0.98)) padding-box,
        conic-gradient(var(--ring-color) var(--progress-percent), var(--ring-track) 0) border-box;
    color: var(--brand);
    font-size: 17px;
    font-weight: 1000;
    line-height: 1;
    border: 5px solid transparent;
    box-shadow: 0 0 0 6px rgba(255, 253, 248, 0.72);
}

.task-row:nth-child(even) {
    background: rgba(251, 244, 234, 0.46);
}

.task-row.is-active {
    z-index: 1;
    background: linear-gradient(90deg, rgba(47, 153, 115, 0.14) 0%, rgba(242, 196, 132, 0.14) 48%, rgba(255, 253, 248, 0.38) 100%);
    box-shadow: inset 5px 0 0 var(--brand), inset 0 0 0 1px rgba(47, 153, 115, 0.18);
}

.task-row.is-active .task-row-progress-mark {
    --ring-color: var(--brand);
    --ring-track: rgba(15, 58, 47, 0.18);
    background:
        linear-gradient(var(--brand), var(--brand)) padding-box,
        conic-gradient(var(--ring-color) var(--progress-percent), var(--ring-track) 0) border-box;
    color: #fffaf3;
    box-shadow: 0 0 0 7px rgba(15, 58, 47, 0.12);
}

.task-row.is-active .task-row-title {
    color: var(--brand-deep);
}

.task-row-delayed {
    background: rgba(255, 241, 236, 0.52);
}

.task-row-progress-mark.has-delay {
    --ring-color: var(--warn);
    --ring-track: rgba(184, 74, 58, 0.18);
    background:
        linear-gradient(rgba(255, 250, 243, 0.98), rgba(255, 250, 243, 0.98)) padding-box,
        conic-gradient(var(--ring-color) var(--progress-percent), var(--ring-track) 0) border-box;
    color: var(--warn);
}

.task-row:last-child {
    border-bottom: 0;
}

.task-row-title-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.task-row-subline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.task-row-subline span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: 14px;
    background: rgba(102, 117, 109, 0.34);
    vertical-align: -0.12em;
}

.task-row-title {
    min-width: 0;
    color: var(--ink);
    font-size: 24px;
    font-weight: 850;
    line-height: 1.28;
}

.task-row-pm {
    color: var(--muted);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.task-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.task-row-risk {
    color: var(--warn);
}

.task-row-structure {
    color: rgba(102, 117, 109, 0.66);
}

.task-row-state {
    color: var(--brand);
    font-weight: 900;
}

.task-row-done {
    color: var(--mint);
}

.task-row-active {
    color: #b86b1f;
}

.task-row-empty-plan {
    color: rgba(102, 117, 109, 0.74);
}

.task-row-badges {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0;
}

.plan-actual-compare {
    display: grid;
    gap: 6px;
    width: max-content;
    min-width: 0;
}

.compare-row {
    display: grid;
    grid-template-columns: 34px 28px 24px 15px 10px 28px 24px 15px;
    align-items: baseline;
    gap: 3px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.compare-label {
    color: rgba(102, 117, 109, 0.82);
    font-size: 12px;
    font-weight: 1000;
}

.compare-metric {
    color: rgba(102, 117, 109, 0.76);
    font-size: 12px;
    font-weight: 900;
}

.compare-unit {
    color: rgba(102, 117, 109, 0.72);
    font-size: 12px;
    font-weight: 900;
}

.compare-divider {
    color: rgba(102, 117, 109, 0.34);
    font-weight: 800;
    text-align: center;
}

.compare-row strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 1000;
    text-align: right;
}

.compare-plan .compare-label {
    color: #7d6b50;
}

.compare-actual .compare-label {
    color: var(--brand);
}

.plan-actual-compare.has-delay .compare-actual strong {
    color: var(--warn);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #a5cbb6;
    background: #eef7f1;
    color: #2d6a4f;
    font-size: 12px;
    font-weight: 900;
}

.health-관리필요,
.status-주의 {
    border-color: #f0bb75;
    background: #fff2df;
    color: #b96820;
}

.health-위험,
.status-위험 {
    border-color: #e8b7a2;
    background: #fff1ec;
    color: var(--warn);
}

.health-보류,
.status-보류 {
    border-color: #cfc4b4;
    background: #eee4d6;
    color: #6f5b3e;
}

.health-완료,
.status-완료 {
    border-color: #b8d3e4;
    background: #eef6fb;
    color: #3d7198;
}

.context-menu {
    position: fixed;
    z-index: 20;
    width: 132px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.98);
    box-shadow: 0 14px 34px rgba(15, 58, 47, 0.14);
}

.context-menu button {
    width: 100%;
    min-height: 32px;
    justify-content: flex-start;
    padding: 7px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}

.context-menu button:hover {
    background: rgba(244, 233, 215, 0.72);
    color: var(--brand);
    transform: none;
}

.popup-page .topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, auto) minmax(260px, 1fr);
    align-items: center;
    width: calc(100% - 12px);
    max-width: none;
    margin-top: 8px;
    padding: 12px 18px;
    box-shadow: 0 12px 32px rgba(15, 58, 47, 0.16);
}

.task-hero-main {
    display: flex;
    align-items: center;
    min-width: 220px;
}

.task-hero-period {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 244, 230, 0.08);
    color: rgba(255, 244, 230, 0.82);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
}

.popup-page .topbar h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 28px;
    line-height: 1;
}

.task-hero-progress,
.task-hero-summary {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    align-items: center;
    min-width: 0;
}

.task-hero-progress {
    grid-template-columns: minmax(0, auto);
    justify-content: center;
}

.task-hero-summary {
    grid-template-columns: minmax(108px, 130px) minmax(108px, 140px) minmax(118px, 150px) auto 34px 34px;
    justify-content: end;
    column-gap: 8px;
    white-space: nowrap;
}

.task-hero-progress > div,
.task-hero-summary > div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 2px 12px;
    border-right: 1px solid rgba(242, 196, 132, 0.22);
}

.task-hero-progress > div {
    min-height: 34px;
    gap: 0;
    padding: 7px 12px;
    border-right: 0;
    border-radius: 3px;
    background: rgba(8, 19, 16, 0.58);
}

.goal-progress-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 14px;
    border-right: 0;
}

.goal-progress-item:first-child {
    padding-left: 4px;
    border-right: 1px solid rgba(242, 196, 132, 0.26);
}

.goal-progress-item:last-child {
    padding-right: 4px;
}

.task-hero-progress > div:last-child,
.task-hero-summary > div:last-of-type {
    border-right: 0;
}

.task-hero-progress span,
.task-hero-summary span {
    flex: 0 0 auto;
    color: rgba(255, 244, 230, 0.72);
    font-size: 12px;
    font-weight: 900;
}

.task-hero-progress strong,
.task-hero-summary strong {
    display: block;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    color: #fff7e8;
    font-size: 15px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-hero-progress strong {
    color: #fff7e8;
    font-size: 19px;
    letter-spacing: 0;
}

.goal-progress-item > span {
    color: rgba(255, 244, 230, 0.68);
    font-size: 14px;
}

.goal-progress-item strong {
    font-size: 20px;
}

.goal-progress-unit {
    margin-left: 1px;
    color: rgba(255, 244, 230, 0.82);
    font-size: 14px;
    font-weight: 900;
}

.task-hero-overview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 14px;
    border: 1px solid rgba(242, 196, 132, 0.38);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.1);
    color: #fff7e8;
    font-size: 14px;
    font-weight: 1000;
    white-space: nowrap;
}

.task-hero-overview-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-hero-overview-button:hover {
    background: rgba(255, 253, 248, 0.18);
    transform: none;
}

.task-hero-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(242, 196, 132, 0.38);
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.1);
    color: #fff7e8;
}

.task-hero-save-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.task-hero-save-button:hover {
    background: rgba(255, 253, 248, 0.18);
    transform: none;
}

.popup-layout {
    width: calc(100% - 12px);
    max-width: none;
    padding-top: 10px;
}

.entry-form {
    display: grid;
    gap: 8px;
}

.form-section {
    padding: 12px 12px 10px;
}

.section-head {
    margin-bottom: 6px;
}

.section-head.with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.nested-head {
    margin-top: 18px;
    margin-bottom: 12px;
    padding-top: 14px;
    border-top: 1px solid #ecdfcc;
}

.section-side-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.basic-overview-body {
    display: grid;
    gap: 12px;
}

.basic-overview-body article {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--table-line-soft);
    background: rgba(251, 244, 234, 0.3);
}

.basic-overview-body h3 {
    color: var(--brand);
    font-size: 15px;
    font-weight: 1000;
}

.basic-overview-body p {
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.55;
    white-space: pre-wrap;
}

.form-grid {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--table-line);
}

.form-grid + .form-grid {
    margin-top: 12px;
}

.basic-info-grid {
    grid-template-columns:
        minmax(320px, 1.45fr)
        minmax(140px, 0.56fr)
        minmax(140px, 0.56fr)
        minmax(160px, 0.68fr)
        minmax(160px, 0.68fr)
        minmax(180px, 0.78fr);
}

.basic-info-grid textarea {
    min-height: 92px;
}

.popup-page .basic-info-grid label {
    gap: 3px;
    padding: 6px 8px;
}

.popup-page .basic-info-grid input,
.popup-page .basic-info-grid select,
.popup-page .basic-info-grid textarea,
.popup-page .basic-info-grid summary {
    min-height: 32px;
    padding-block: 2px;
}

.basic-info-grid .title-field {
    grid-column: 1;
    grid-row: 1;
}

.basic-info-grid .assignee-field {
    grid-column: 4;
    grid-row: 1;
}

.basic-info-grid .performing-field {
    grid-column: 5;
    grid-row: 1;
}

.basic-info-grid .collaboration-field {
    grid-column: 1 / span 2;
    grid-row: 2;
}

.basic-info-grid .project-start-field {
    grid-column: 2;
    grid-row: 1;
}

.basic-info-grid .project-end-field {
    grid-column: 3;
    grid-row: 1;
}

.basic-info-grid .note-field {
    grid-column: 3 / span 3;
    grid-row: 3;
}

.basic-info-grid .note-field textarea {
    min-height: 92px;
}

.basic-info-grid .purpose-field {
    grid-column: 1 / -1;
    grid-row: 2;
}

.basic-info-grid .kpi-field {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.basic-info-grid .kpi-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
}

.basic-info-grid .routine-check-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(47, 109, 246, 0.22);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.86));
    color: #075bcb;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.popup-page .basic-info-grid .routine-check-control input {
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin: 0;
    padding: 0 !important;
    border-radius: 4px !important;
    accent-color: #2f6df6;
}

.compact-goal-grid label {
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 34px;
}

.compact-goal-grid {
    grid-template-columns: minmax(320px, 1.7fr) minmax(320px, 1.4fr) minmax(220px, 0.9fr);
}

.popup-page .compact-goal-grid label {
    padding-top: 3px;
    padding-bottom: 3px;
}

.compact-goal-grid input,
.compact-goal-grid select {
    min-height: 28px;
}

.popup-page .form-grid label {
    gap: 7px;
    padding: 10px 12px;
    border-right: 1px solid var(--table-line-soft);
    border-bottom: 1px solid var(--table-line);
    background: transparent;
}

.popup-page .form-grid label:last-child {
    border-right: 0;
}

.popup-page input,
.popup-page select,
.popup-page textarea {
    min-height: 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 0;
    box-shadow: none;
}

.assignee-dropdown {
    position: relative;
    min-width: 0;
}

.assignee-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 4px 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.assignee-dropdown summary::-webkit-details-marker {
    display: none;
}

.assignee-dropdown summary::after {
    content: "⌄";
    color: var(--brand);
    font-size: 15px;
    font-weight: 1000;
}

.assignee-dropdown[open] summary::after {
    transform: rotate(180deg);
}

.assignee-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(2, minmax(86px, 1fr));
    align-items: start;
    gap: 4px;
    width: min(320px, 90vw);
    max-height: min(360px, 62vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.98);
    box-shadow: 0 14px 34px rgba(15, 58, 47, 0.14);
}

.collaboration-menu {
    grid-template-columns: minmax(180px, 1fr);
    width: min(280px, 90vw);
    max-height: min(340px, 62vh);
}

.collaboration-option-list {
    display: grid;
    grid-column: 1 / -1;
    gap: 5px;
}

.member-option-list {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(86px, 1fr));
    gap: 4px;
}

.collaboration-manage-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 30px;
    margin-top: 4px;
    padding-block: 6px;
}

.check-option {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid var(--table-line-soft);
    border-radius: 999px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
}

.check-option input {
    width: 13px;
    min-width: 13px;
    height: 13px;
    min-height: 13px;
    margin: 0;
    padding: 0;
}

.popup-page .form-grid .check-option {
    gap: 5px;
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid var(--table-line-soft);
    border-radius: 999px;
}

.popup-page input:focus,
.popup-page select:focus,
.popup-page textarea:focus {
    box-shadow: inset 0 -2px 0 rgba(47, 153, 115, 0.28);
}

.popup-page input[type="date"].is-empty {
    color: transparent;
}

.popup-page input[type="date"].is-empty::-webkit-datetime-edit {
    color: transparent;
}

.popup-page input[type="date"].is-empty:focus,
.popup-page input[type="date"].is-empty:focus::-webkit-datetime-edit {
    color: var(--ink);
}

.compact-button {
    width: auto;
    min-height: 32px;
    padding: 6px 12px;
    white-space: nowrap;
}

.goal-add-button {
    min-width: 34px;
    min-height: 24px;
    padding: 2px 6px;
    border-color: transparent;
    background: transparent;
    color: #6f766f;
    font-size: 12px;
    font-weight: 900;
}

.goal-add-button:hover {
    border-color: rgba(47, 153, 115, 0.18);
    background: rgba(47, 153, 115, 0.05);
    color: var(--brand);
    transform: none;
}

.goal-list {
    display: grid;
    gap: 30px;
}

.goal-add-row {
    display: flex;
    justify-content: flex-end;
    padding: 8px 4px 0;
}

.goal-card {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

.goal-card.is-roadmap-focus {
    animation: roadmap-focus 0.9s ease;
}

@keyframes roadmap-focus {
    0%,
    100% {
        background: transparent;
    }
    35% {
        background: rgba(47, 153, 115, 0.1);
    }
}

.goal-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 28px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 42px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid rgba(217, 197, 168, 0.5);
    background: transparent;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
}

.goal-title-handle {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    cursor: context-menu;
    user-select: none;
}

.goal-index-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--brand);
    font-weight: 1000;
}

.goal-index-label::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(47, 153, 115, 0.12);
}

.goal-header-title {
    min-width: 0;
    color: #b45f18;
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.25;
}

.goal-header-owner {
    color: #42584f;
    font-size: 15px;
    white-space: nowrap;
}

.goal-header-progress {
    color: #b45f18;
    font-size: 15px;
    font-weight: 1000;
    white-space: nowrap;
}

.goal-meta-fields {
    display: none;
}

.goal-bulk-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin-left: 3px;
    padding: 0;
    border-color: transparent;
    border-radius: 4px;
    background: transparent;
    color: #8c978f;
    font-size: 16px;
    font-weight: 1000;
    white-space: nowrap;
}

.goal-bulk-button:hover {
    border-color: rgba(47, 153, 115, 0.18);
    background: rgba(47, 153, 115, 0.06);
    color: var(--brand);
    transform: none;
}

.goal-view-actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 4px 0;
}

.goal-roadmap {
    display: grid;
    gap: 0;
    padding: 18px 8px 10px;
}

.goal-roadmap-empty {
    padding: 18px;
    border: 1px dashed rgba(217, 197, 168, 0.72);
    color: var(--muted);
    font-size: 15px;
    font-weight: 900;
    text-align: center;
}

.process-roadmap-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--plan-count, 1), minmax(136px, 1fr));
    gap: 18px;
    align-items: start;
    padding: 28px 4px 18px;
}

.process-roadmap-line + .process-roadmap-line {
    margin-top: 18px;
}

.process-roadmap-line::before {
    content: "";
    position: absolute;
    top: 54px;
    right: 9%;
    left: 9%;
    height: 10px;
    border-radius: 999px;
    background: rgba(217, 197, 168, 0.45);
}

.process-roadmap-line:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 54px;
    right: 9%;
    width: 10px;
    height: calc(100% + 18px);
    border-radius: 999px;
    background: rgba(217, 197, 168, 0.45);
}

.process-roadmap-line.is-reverse:not(:last-child)::after {
    right: auto;
    left: 9%;
}

.process-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 4px 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: center;
}

.process-node:hover .process-marker {
    transform: translateY(-2px);
}

.process-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 4px solid #b9aa90;
    border-radius: 50%;
    background: #fffdf8;
    color: var(--ink);
    font-size: 23px;
    font-weight: 1000;
    line-height: 1;
    box-shadow: 0 0 0 7px rgba(255, 253, 248, 0.86);
    transition: transform 0.16s ease;
}

.process-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 48px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.26;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.process-timing {
    display: grid;
    gap: 3px;
    min-height: 40px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.28;
}

.process-timing-range,
.process-timing-duration {
    display: block;
}

.process-timing-duration {
    font-weight: 1000;
}

.process-status {
    min-width: 58px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(217, 197, 168, 0.28);
    color: #6b6256;
    font-size: 14px;
    font-weight: 1000;
}

.process-node.is-complete .process-marker {
    border-color: #9fcab9;
    background: #e2eee8;
    color: #2f9973;
}

.process-node.is-complete .process-timing {
    color: #5f7f73;
}

.process-node.is-active .process-marker {
    border-color: #0b4a3a;
    background: #0b4a3a;
    color: #fffdf8;
}

.process-node.is-active .process-timing {
    color: #0b4a3a;
}

.process-node.is-delayed .process-marker {
    border-color: #ba5d3a;
    background: #ba5d3a;
    color: #fffdf8;
}

.process-node.is-delayed .process-timing {
    color: #ba5d3a;
}

.process-node.is-active .process-status {
    background: rgba(47, 153, 115, 0.12);
    color: var(--brand);
}

.roadmap-detail-dialog {
    width: min(720px, calc(100vw - 28px));
    padding: 0;
    border: 1px solid rgba(217, 197, 168, 0.92);
    border-radius: 7px;
    background: #fffdf8;
    color: var(--ink);
}

.roadmap-detail-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.dialog-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.roadmap-detail-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.roadmap-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.3;
    white-space: nowrap;
}

.roadmap-detail-meta span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 10px;
    background: rgba(217, 197, 168, 0.88);
    vertical-align: -1px;
}

.roadmap-detail-body h3 {
    color: var(--muted);
    font-size: 12px;
    font-weight: 1000;
}

.roadmap-detail-body {
    display: grid;
    gap: 10px;
}

.roadmap-detail-body article {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--table-line-soft);
    background: rgba(251, 244, 234, 0.32);
}

.roadmap-detail-body article[hidden] {
    display: none;
}

.roadmap-detail-body p {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    white-space: pre-wrap;
}

.roadmap-detail-link-row {
    display: flex;
    justify-content: flex-start;
}

.roadmap-detail-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 11px;
    border: 1px solid rgba(47, 153, 115, 0.34);
    border-radius: 999px;
    background: rgba(47, 153, 115, 0.1);
    color: var(--brand);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.roadmap-detail-link:hover {
    background: rgba(47, 153, 115, 0.16);
    border-color: rgba(47, 153, 115, 0.52);
}

.roadmap-step-list {
    display: grid;
    gap: 8px;
}

.roadmap-step-item {
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(217, 197, 168, 0.72);
    background: #fffdf8;
}

.roadmap-step-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.roadmap-step-number,
.roadmap-step-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
}

.roadmap-step-number {
    min-width: 42px;
    padding: 3px 8px;
    background: rgba(217, 197, 168, 0.28);
    color: #6b6256;
}

.roadmap-step-main strong {
    overflow: hidden;
    color: var(--brand);
    font-size: 14px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roadmap-step-status {
    min-width: 42px;
    padding: 3px 9px;
    background: rgba(217, 197, 168, 0.28);
    color: #6b6256;
}

.roadmap-step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-left: 50px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.roadmap-step-result {
    margin: 0;
    padding-left: 50px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.roadmap-step-item.is-complete .roadmap-step-status {
    background: rgba(47, 153, 115, 0.12);
    color: #2f9973;
}

.roadmap-step-item.is-active .roadmap-step-status {
    background: rgba(47, 153, 115, 0.12);
    color: var(--brand);
}

.roadmap-step-item.is-delayed .roadmap-step-status {
    background: rgba(186, 93, 58, 0.12);
    color: #ba5d3a;
}

.goal-context-menu {
    z-index: 1200;
}

.plan-list {
    display: grid;
    gap: 0;
}

.plan-card {
    display: grid;
    grid-template-columns:
        46px
        minmax(150px, 1.2fr)
        minmax(96px, 0.72fr)
        minmax(86px, 0.7fr)
        minmax(142px, 0.95fr)
        minmax(142px, 0.95fr)
        minmax(320px, 3fr)
        minmax(140px, 1.1fr)
        minmax(44px, 0.32fr);
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--table-line);
    border-radius: 4px;
    background: transparent;
}

.plan-table {
    display: none;
    overflow-x: auto;
    margin-top: 14px;
    border-top: 1px solid var(--table-line);
    border-left: 0;
}

.plan-table-head {
    display: grid;
    grid-template-columns:
        46px
        minmax(150px, 1.2fr)
        minmax(96px, 0.72fr)
        minmax(86px, 0.7fr)
        minmax(142px, 0.95fr)
        minmax(142px, 0.95fr)
        minmax(320px, 3fr)
        minmax(140px, 1.1fr)
        minmax(44px, 0.32fr);
    min-width: 1180px;
    background: rgba(244, 233, 215, 0.24);
}

.plan-table-head span,
.plan-order-controls,
.plan-card label,
.range-field,
.plan-delete-button {
    min-width: 0;
    padding: 9px 10px;
    border-right: 1px solid var(--table-line-soft);
}

.plan-table-head span:last-child,
.plan-delete-button {
    border-right: 0;
}

.plan-table-head span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.plan-card {
    min-width: 1180px;
}

.plan-card label,
.range-field {
    display: block;
}

.plan-order-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
}

.plan-order-controls .plan-order-button {
    width: 22px;
    min-width: 22px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.plan-order-controls .plan-order-button:hover {
    background: rgba(47, 153, 115, 0.08);
    color: var(--brand);
    transform: none;
}

.plan-order-controls .plan-order-button:disabled {
    color: rgba(102, 117, 109, 0.32);
    cursor: default;
}

.plan-order-controls .plan-order-button:disabled:hover {
    background: transparent;
}

.plan-card .field-label {
    display: none;
}

.plan-card input,
.plan-card select,
.plan-card textarea,
.step-row input {
    width: 100%;
    min-height: 34px;
}

.plan-card textarea {
    line-height: 1.45;
    resize: vertical;
}

.deliverable-field {
    display: grid;
    gap: 5px;
}

.pdf-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
}

.pdf-upload-row input[type="file"] {
    min-height: 26px;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
}

.pdf-upload-row small {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-upload-row small.has-file {
    color: var(--brand);
}

.range-field {
    position: relative;
}

.range-button {
    display: grid;
    align-content: center;
    gap: 3px;
    width: 100%;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.72);
    color: var(--ink);
    text-align: left;
}

.range-button:hover {
    border-color: rgba(47, 153, 115, 0.42);
    background: rgba(255, 250, 243, 0.96);
    transform: none;
}

.range-button span {
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.2;
}

.range-button small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.step-row .range-button {
    min-height: 32px;
    padding: 4px 6px;
}

.step-row .range-button span {
    font-size: 12px;
    white-space: nowrap;
}

.step-row .range-button small {
    display: none;
}

.range-field.is-derived .range-button {
    border-color: transparent;
    background: rgba(47, 153, 115, 0.07);
    color: var(--brand);
    cursor: default;
}

.range-field.is-derived .range-button:hover {
    border-color: transparent;
    background: rgba(47, 153, 115, 0.07);
}

.range-popover {
    position: fixed;
    z-index: 4000;
    width: 266px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(217, 197, 168, 0.95);
    border-radius: 6px;
    background: #fffaf3;
    box-shadow: 0 18px 40px rgba(18, 55, 42, 0.28);
}

.range-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.range-picker-head button,
.range-picker-actions button {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--table-line);
    border-radius: 4px;
    background: #fffdf8;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
}

.range-picker-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 1000;
}

.range-weekdays,
.range-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.range-weekdays span {
    padding: 4px 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.range-days button {
    min-width: 0;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #fffaf3;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.range-days button:hover {
    background: rgba(47, 153, 115, 0.11);
    transform: none;
}

.range-days .is-outside {
    color: rgba(102, 117, 109, 0.34);
}

.range-days .is-between {
    background: rgba(47, 153, 115, 0.13);
}

.range-days .is-start,
.range-days .is-end {
    background: var(--brand);
    color: #fff;
}

.range-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 9px;
}

.plan-delete-button {
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    font-size: 18px;
}

.step-panel {
    position: relative;
    grid-column: 1 / -1;
    padding: 0 0 10px 46px;
    border-top: 1px solid var(--table-line-soft);
    background: rgba(244, 233, 215, 0.12);
}

.step-panel[hidden] {
    display: none;
}

.step-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-right: 1px solid var(--table-line-soft);
    border-bottom: 1px solid var(--table-line-soft);
}

.step-panel-head span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 1000;
}

.step-table-head {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr) 44px;
    min-width: 704px;
    border-right: 1px solid var(--table-line-soft);
    background: rgba(244, 233, 215, 0.26);
}

.step-table-head span {
    padding: 8px 10px;
    border-right: 1px solid var(--table-line-soft);
    border-bottom: 1px solid var(--table-line-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.step-table-head span:last-child {
    border-right: 0;
}

.step-list {
    display: grid;
    min-width: 704px;
    border-right: 1px solid var(--table-line-soft);
}

.step-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr) 44px;
    min-width: 0;
    border-bottom: 1px solid var(--table-line-soft);
    background: rgba(255, 253, 248, 0.58);
}

.step-row label,
.step-row .range-field {
    display: block;
    min-width: 0;
    padding: 8px 10px;
    border-right: 1px solid var(--table-line-soft);
}

.step-row .field-label {
    display: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.step-row input {
    background: transparent;
}

.step-row > label:first-of-type input {
    color: var(--ink);
    font-weight: 1000;
}

.step-delete-button {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
}

.step-delete-button[hidden] {
    display: none;
}

.plan-table-actions {
    display: none;
    justify-content: flex-end;
    padding-top: 8px;
}

.bulk-dialog {
    width: calc(100vw - 16px);
    height: min(920px, calc(100vh - 34px));
    max-height: calc(100vh - 34px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 250, 243, 0.98);
    color: var(--ink);
    box-shadow: 0 28px 84px rgba(15, 58, 47, 0.26);
}

.bulk-dialog::backdrop {
    background: rgba(16, 37, 29, 0.34);
}

.team-manager-dialog {
    width: min(560px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 48px));
}

.basic-info-dialog {
    width: min(1180px, calc(100vw - 40px));
    max-height: min(540px, calc(100vh - 48px));
}

.basic-info-panel {
    display: grid;
    gap: 12px;
    max-height: min(540px, calc(100vh - 48px));
    padding: 14px;
    overflow: visible;
}

.bulk-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 10px;
    height: 100%;
    max-height: calc(100vh - 34px);
    padding: 12px;
    overflow: hidden;
}

.bulk-dialog-head,
.bulk-toolbar,
.bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bulk-dialog-head {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--table-line);
}

.bulk-dialog-head h2 {
    color: var(--brand);
}

.team-manager-panel {
    display: grid;
    gap: 10px;
    max-height: min(560px, calc(100vh - 48px));
    padding: 14px;
    overflow: hidden;
}

.team-manager-list {
    display: grid;
    gap: 6px;
    max-height: 270px;
    overflow-y: auto;
    padding-right: 2px;
}

.team-manager-row,
.team-manager-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 58px;
    gap: 6px;
    align-items: center;
}

.team-manager-add {
    grid-template-columns: minmax(0, 1fr) 72px;
    padding-top: 8px;
    border-top: 1px solid var(--table-line);
}

.team-manager-row button,
.team-manager-add button {
    min-height: 32px;
    padding-inline: 10px;
}

.bulk-goal-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 0.6fr) minmax(300px, 1.4fr);
    gap: 8px;
}

.bulk-goal-grid label,
.bulk-plan-row label {
    gap: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.bulk-dialog input,
.bulk-dialog select,
.bulk-dialog textarea {
    min-height: 32px;
    border: 1px solid rgba(217, 197, 168, 0.74);
    border-radius: 4px;
    background: #fffdf8;
    padding: 5px 8px;
}

.bulk-toolbar {
    min-height: 32px;
}

.bulk-toolbar span {
    color: var(--brand);
    font-size: 13px;
    font-weight: 1000;
}

.bulk-plan-shell {
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid var(--table-line);
    border-left: 1px solid var(--table-line-soft);
}

.bulk-plan-head,
.bulk-plan-row {
    display: grid;
    grid-template-columns:
        minmax(75px, 0.46fr)
        minmax(158px, 1.1fr)
        minmax(210px, 1.36fr)
        minmax(83px, 0.54fr)
        minmax(74px, 0.46fr)
        minmax(152px, 0.86fr)
        minmax(152px, 0.86fr)
        minmax(320px, 2.02fr)
        minmax(86px, 0.48fr);
    min-width: 0;
}

.bulk-plan-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4eadc;
}

.bulk-plan-head span {
    padding: 6px 8px;
    border-right: 1px solid var(--table-line-soft);
    border-bottom: 1px solid var(--table-line);
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.bulk-plan-row {
    border-bottom: 1px solid var(--table-line-soft);
    background: rgba(255, 253, 248, 0.7);
}

.bulk-plan-row:nth-child(even) {
    background: rgba(251, 244, 234, 0.48);
}

.bulk-plan-row label,
.bulk-plan-row > .range-field,
.bulk-wbs-cell,
.bulk-row-delete {
    min-width: 0;
    padding: 0;
    border-right: 1px solid var(--table-line-soft);
}

.bulk-wbs-cell {
    display: flex;
    align-items: center;
    padding: 0 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    background: rgba(244, 233, 215, 0.28);
}

.bulk-plan-row .field-label {
    display: none;
}

.bulk-plan-row .range-field {
    display: block;
}

.bulk-plan-row label:has([data-bulk-deliverable]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
}

.bulk-plan-row input,
.bulk-plan-row select,
.bulk-plan-row textarea {
    width: 100%;
    min-height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 6px;
    box-shadow: none;
}

.bulk-link-button,
.bulk-pdf-button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 28px;
    padding: 0 5px;
    border: 1px solid rgba(184, 74, 58, 0.34);
    border-radius: 4px;
    background: rgba(184, 74, 58, 0.08);
    color: var(--warn);
    font-size: 10px;
    font-weight: 1000;
    white-space: nowrap;
}

.bulk-link-button {
    border-color: rgba(47, 153, 115, 0.34);
    background: rgba(47, 153, 115, 0.08);
    color: var(--brand);
}

.bulk-link-button.has-link {
    border-color: rgba(47, 153, 115, 0.58);
    background: rgba(47, 153, 115, 0.16);
    color: var(--brand-deep);
}

.bulk-link-button:hover {
    border-color: rgba(47, 153, 115, 0.58);
    background: rgba(47, 153, 115, 0.13);
    color: var(--brand-deep);
}

.bulk-pdf-button:hover {
    border-color: rgba(184, 74, 58, 0.56);
    background: rgba(184, 74, 58, 0.13);
    color: var(--warn);
}

.bulk-pdf-button.has-pdf {
    border-color: rgba(184, 74, 58, 0.58);
    background: rgba(184, 74, 58, 0.16);
    color: var(--warn);
}

.deliverable-link-dialog {
    max-width: min(560px, calc(100vw - 32px));
}

.deliverable-link-panel {
    display: grid;
    gap: 16px;
    min-width: min(520px, calc(100vw - 48px));
    padding: 18px;
}

.deliverable-link-form {
    display: grid;
    gap: 12px;
}

.bulk-plan-row .range-button {
    min-height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 6px;
}

.bulk-plan-row .range-button span {
    white-space: nowrap;
}

.bulk-plan-row .range-field.is-derived .range-button {
    background: rgba(47, 153, 115, 0.07);
    color: var(--brand);
}

.bulk-plan-row textarea {
    min-height: 30px;
    line-height: 1.3;
    overflow: hidden;
    resize: none;
    white-space: pre-wrap;
}

.bulk-result-detail {
    grid-column: 1 / -1;
    border-right: 1px solid var(--table-line-soft);
    border-top: 1px solid rgba(217, 197, 168, 0.34);
    background: rgba(255, 253, 248, 0.42);
}

.bulk-result-detail summary {
    min-height: 28px;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}

.bulk-result-detail[open] summary {
    color: var(--brand);
}

.bulk-result-detail textarea {
    min-height: 54px;
    border-top: 1px solid rgba(217, 197, 168, 0.28);
    padding: 8px 10px;
}

.bulk-plan-row.is-step {
    background: rgba(238, 247, 241, 0.72);
}

.bulk-plan-row.is-selected {
    outline: 2px solid rgba(47, 153, 115, 0.46);
    outline-offset: -2px;
    background: rgba(47, 153, 115, 0.13);
}

.bulk-plan-row.is-selected .bulk-wbs-cell {
    background: rgba(47, 153, 115, 0.2);
}

.bulk-plan-row.is-step [data-bulk-work-type] {
    visibility: hidden;
}

.bulk-plan-row.is-step [data-bulk-step-title] {
    padding-left: 36px;
}

.bulk-row-delete {
    display: none;
}

.bulk-context-menu {
    z-index: 1400;
    width: 152px;
    max-height: min(260px, calc(100vh - 16px));
    overflow-y: auto;
}

.bulk-actions {
    justify-content: flex-end;
    padding-top: 4px;
}

.bulk-actions > * {
    width: auto;
    min-width: 120px;
}

.detail-page {
    min-width: 1024px;
}

.detail-page-brief {
    height: 100vh;
    overflow: hidden;
}

.detail-topbar,
.detail-layout {
    width: calc(100vw - 32px);
    max-width: none;
    margin-inline: auto;
}

.detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.10), transparent 18%),
        linear-gradient(145deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-soft) 100%);
    color: #f7f0e4;
}

.detail-topbar h1 {
    color: #f4efe6;
    font-size: clamp(21px, 1.65vw, 28px);
    line-height: 1.15;
}

.detail-actions {
    display: flex;
    gap: 6px;
}

.detail-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid rgba(242, 196, 132, 0.52);
    border-radius: 50%;
    background: rgba(255, 250, 243, 0.86);
    color: var(--brand);
    cursor: pointer;
}

.detail-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detail-icon-button:hover {
    background: #fffaf3;
    color: var(--brand-deep);
}

.detail-brief-layout {
    display: grid;
    grid-template-columns: minmax(292px, 0.58fr) minmax(0, 1.72fr);
    gap: 14px;
    width: calc(100vw - 32px);
    height: calc(100vh - 70px);
    margin: 8px auto 0;
    min-height: 0;
}

.detail-minimap-panel,
.detail-activity-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--table-line);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.62);
    box-shadow: var(--shadow);
}

.detail-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--table-line-soft);
    background:
        linear-gradient(90deg, rgba(242, 196, 132, 0.2), rgba(255, 253, 248, 0.72) 44%, rgba(47, 153, 115, 0.08));
}

.detail-panel-head h2 {
    margin: 2px 0 0;
    color: var(--brand);
    font-size: 22px;
    font-weight: 1000;
    line-height: 1.25;
}

.detail-panel-head h2 span {
    margin-left: 8px;
    color: var(--warn);
    font-size: 14px;
    font-weight: 1000;
}

.detail-panel-head > strong {
    color: var(--ink);
    font-size: 19px;
    font-weight: 1000;
    white-space: nowrap;
}

.minimap-goal-list {
    display: grid;
    gap: 7px;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

.minimap-goal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(217, 197, 168, 0.56);
    background: rgba(255, 253, 248, 0.48);
    color: inherit;
    font: inherit;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.minimap-goal-main {
    display: grid;
    align-content: start;
    justify-items: stretch;
    gap: 8px;
    min-width: 0;
    width: 100%;
    min-height: 96px;
    padding: 12px 11px 12px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.minimap-goal:hover {
    border-color: rgba(47, 153, 115, 0.34);
    background: rgba(255, 253, 248, 0.78);
}

.minimap-goal:has(.minimap-goal-main:focus-visible) {
    outline: 3px solid rgba(47, 153, 115, 0.24);
    outline-offset: 2px;
}

.minimap-goal.has-current {
    border-color: rgba(47, 153, 115, 0.58);
    background: rgba(47, 153, 115, 0.08);
    box-shadow: inset 4px 0 0 var(--brand);
}

.minimap-goal.is-selected {
    border-color: var(--brand);
    background: rgba(47, 153, 115, 0.14);
    box-shadow: inset 4px 0 0 var(--brand), 0 8px 18px rgba(15, 58, 47, 0.1);
    transform: translateX(2px);
}

.minimap-deliverable-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 86px;
    max-width: 112px;
    padding: 12px 12px 12px 0;
}

.minimap-deliverable-actions.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.minimap-deliverable-button,
.minimap-deliverable-more {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid rgba(43, 105, 240, 0.22);
    border-radius: 8px;
    background: #fff;
    color: var(--ui-blue);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

.minimap-deliverable-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.minimap-deliverable-button:hover,
.minimap-deliverable-button:focus-visible {
    border-color: var(--ui-blue);
    background: var(--ui-blue);
    color: #fff;
}

.minimap-deliverable-more {
    background: var(--ui-blue-soft);
    color: var(--ui-blue-deep);
}

.minimap-goal-title {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    width: 100%;
}

.minimap-goal-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--brand);
    color: #fffaf3;
    font-size: 12px;
    font-weight: 1000;
}

.minimap-goal-title strong {
    overflow: hidden;
    color: var(--brand-deep);
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.minimap-plan-track {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: start;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding-left: 31px;
    padding-right: 6px;
}

.minimap-plan-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(191, 174, 145, 0.9);
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.76);
    color: var(--ink);
    font-size: 10px;
    font-weight: 1000;
}

.minimap-plan-dot.is-done {
    border-color: rgba(47, 153, 115, 0.38);
    background: rgba(47, 153, 115, 0.12);
    color: var(--mint);
}

.minimap-plan-dot.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fffaf3;
}

.minimap-plan-dot.is-delayed {
    border-color: var(--warn);
    background: var(--warn);
    color: #fffaf3;
}

.minimap-plan-dot.is-current {
    box-shadow: 0 0 0 4px rgba(255, 253, 248, 0.92), 0 0 0 7px rgba(15, 58, 47, 0.16);
    transform: scale(1.04);
}

.minimap-empty {
    margin: 8px 0 0 34px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 12px;
    overflow: auto;
}

.activity-card {
    flex: 0 0 auto;
    min-height: 0;
    padding: 14px 16px;
    border-left: 4px solid var(--line);
    border-bottom: 1px solid var(--table-line-soft);
    background: rgba(255, 253, 248, 0.5);
}

.activity-card[hidden],
.activity-filter-empty[hidden] {
    display: none;
}

.activity-goal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(217, 197, 168, 0.44);
}

.activity-goal-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 25px;
    border-radius: 999px;
    background: var(--brand);
    color: #fffaf3;
    font-size: 14px;
    font-weight: 1000;
}

.activity-goal-label strong {
    overflow: hidden;
    color: #b45c0d;
    font-size: 17px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-card.is-done {
    border-left-color: var(--mint);
}

.activity-card.is-active {
    border-left-color: var(--brand);
}

.activity-card.is-delayed {
    border-left-color: var(--warn);
    background: rgba(255, 241, 236, 0.48);
}

.activity-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.activity-card-head span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(217, 197, 168, 0.35);
    color: #7d6b50;
    font-size: 14px;
    font-weight: 1000;
}

.activity-card-head strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 22px;
    font-weight: 1000;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-card-head em {
    font-style: normal;
}

.activity-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(47, 153, 115, 0.12);
    color: var(--brand);
    font-size: 14px;
    font-weight: 1000;
    white-space: nowrap;
}

.activity-status.is-done {
    background: rgba(47, 153, 115, 0.14);
    color: var(--mint);
}

.activity-status.is-active {
    background: var(--brand);
    color: #fffaf3;
}

.activity-status.is-delayed {
    background: rgba(184, 74, 58, 0.13);
    color: var(--warn);
}

.activity-status.is-todo {
    background: rgba(217, 197, 168, 0.34);
    color: #7d6b50;
}

.activity-detail-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(217, 197, 168, 0.3);
}

.activity-detail-list > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.activity-detail-list span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.45;
}

.activity-detail-list p {
    overflow: hidden;
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    white-space: pre-wrap;
}

.activity-deliverable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid rgba(47, 153, 115, 0.34);
    border-radius: 50%;
    background: rgba(47, 153, 115, 0.08);
    color: var(--brand);
    text-decoration: none;
}

.activity-deliverable-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.activity-deliverable svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.activity-deliverable-compact {
    width: 26px;
    height: 26px;
    min-width: 26px;
}

.activity-deliverable-compact svg {
    width: 14px;
    height: 14px;
}

.activity-deliverable-pdf {
    border-color: rgba(184, 74, 58, 0.32);
    background: rgba(184, 74, 58, 0.08);
    color: var(--warn);
}

.activity-deliverable:hover {
    background: rgba(47, 153, 115, 0.14);
    border-color: rgba(47, 153, 115, 0.58);
    color: var(--brand-deep);
}

.activity-deliverable-pdf:hover {
    border-color: rgba(184, 74, 58, 0.56);
    background: rgba(184, 74, 58, 0.13);
    color: var(--warn);
}

.activity-result {
    color: var(--brand-deep);
}

.activity-step-detail-list {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(217, 197, 168, 0.3);
}

.activity-step-detail-list > span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.45;
}

.activity-step-detail-list > div {
    display: grid;
    gap: 7px;
}

.activity-step-detail {
    padding: 8px 10px;
    border: 1px solid rgba(217, 197, 168, 0.42);
    border-left: 3px solid rgba(191, 174, 145, 0.82);
    background: rgba(255, 250, 243, 0.64);
}

.activity-step-detail.is-week-dimmed {
    opacity: 0.42;
    filter: grayscale(0.28);
}

.activity-step-detail.is-week-focus {
    border-color: rgba(47, 153, 115, 0.52);
    border-left-width: 5px;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 8px 18px rgba(15, 58, 47, 0.08);
}

.activity-step-detail.is-done {
    border-left-color: var(--mint);
}

.activity-step-detail.is-active {
    border-left-color: var(--brand);
}

.activity-step-detail.is-delayed {
    border-left-color: var(--warn);
    background: rgba(255, 241, 236, 0.5);
}

.activity-step-detail.is-week-focus.is-active {
    border-left-color: var(--brand);
}

.activity-step-detail.is-week-focus.is-done {
    border-left-color: var(--mint);
}

.activity-step-detail > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.activity-step-detail em {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(217, 197, 168, 0.35);
    color: #7d6b50;
    font-size: 12px;
    font-style: normal;
    font-weight: 1000;
}

.activity-step-detail strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 1000;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-step-detail small {
    color: var(--brand);
    font-size: 12px;
    font-weight: 1000;
    white-space: nowrap;
}

.activity-step-detail.is-done small {
    color: var(--mint);
}

.activity-step-detail.is-delayed small {
    color: var(--warn);
}

.activity-step-detail ul {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.activity-step-detail li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    min-width: 0;
}

.activity-step-detail li span {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.activity-step-detail li b {
    color: var(--muted);
    font-size: 12px;
    font-weight: 1000;
}

.activity-step-detail a {
    width: fit-content;
    color: var(--brand);
    font-weight: 1000;
    text-decoration: none;
}

.activity-step-detail a:hover {
    text-decoration: underline;
}

.activity-step-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.activity-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(217, 197, 168, 0.32);
    color: var(--muted);
    font-size: 11px;
    font-weight: 1000;
}

.activity-step.is-done {
    background: rgba(47, 153, 115, 0.14);
    color: var(--mint);
}

.activity-step.is-active {
    background: var(--brand);
    color: #fffaf3;
}

.activity-step.is-delayed {
    background: var(--warn);
    color: #fffaf3;
}

.detail-layout {
    display: grid;
    gap: 14px;
    padding: 14px 0 32px;
}

.detail-summary,
.detail-narrative {
    border: 1px solid var(--table-line);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.58);
}

.detail-summary {
    display: grid;
    grid-template-columns: 160px 120px 120px 140px 120px minmax(220px, 1fr);
}

.detail-summary > div {
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--table-line-soft);
}

.detail-summary > div:last-child {
    border-right: 0;
}

.detail-summary span {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
}

.detail-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 15px;
}

.detail-narrative {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 1.2fr);
}

.detail-narrative article {
    min-height: 116px;
    padding: 14px;
    border-right: 1px solid var(--table-line-soft);
}

.detail-narrative article:last-child {
    border-right: 0;
}

.detail-narrative h2 {
    font-size: 16px;
}

.detail-narrative p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
}

.detail-flow {
    overflow-x: auto;
    padding: 20px 6px 22px;
}

.progress-history {
    padding: 0;
}

.history-details {
    display: block;
}

.history-details summary {
    list-style: none;
}

.history-details summary::-webkit-details-marker {
    display: none;
}

.history-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px 9px;
    border-bottom: 1px solid var(--table-line-soft);
    background: rgba(244, 233, 215, 0.42);
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.history-head h2 {
    margin: 0;
    color: var(--brand);
    font-size: 14px;
    font-weight: 1000;
}

.history-toggle {
    position: absolute;
    right: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 1000;
}

.history-details:not([open]) .history-toggle {
    transform: rotate(180deg);
}

.section-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.section-title-row h2 {
    font-size: 16px;
}

.section-title-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.progress-history-table {
    display: grid;
    border-top: 1px solid var(--table-line);
    overflow-x: auto;
}

.progress-history-head,
.progress-history-row {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 110px 90px 120px;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid var(--table-line-soft);
}

.goal-progress-history-row {
    grid-template-columns:
        minmax(220px, 1.15fr)
        repeat(var(--goal-history-columns, 1), minmax(104px, 0.58fr))
        minmax(90px, 0.46fr);
    min-width: max-content;
}

.progress-history-head {
    background: rgba(244, 233, 215, 0.26);
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
}

.progress-history-row {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.progress-history-row strong {
    color: var(--ink);
}

.goal-progress-history-table .progress-history-head span:not(:first-child),
.goal-progress-history-table .progress-history-row strong {
    text-align: center;
}

.flow-track {
    display: grid;
    grid-template-columns: repeat(var(--goal-count, 1), minmax(330px, 1fr));
    align-items: flex-start;
    gap: clamp(18px, 2vw, 34px);
    min-width: min(100%, calc(var(--goal-count, 1) * 330px + (var(--goal-count, 1) - 1) * 18px));
}

.flow-goal {
    position: relative;
    min-width: 0;
}

.flow-goal-node {
    position: relative;
    min-height: 88px;
    padding: 14px 16px;
    border-top: 3px solid var(--brand);
    border-bottom: 1px solid var(--table-line);
    background: rgba(255, 250, 243, 0.74);
}

.flow-goal-node::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -22px;
    width: 1px;
    height: 22px;
    background: var(--table-line);
}

.flow-goal-index {
    display: block;
    color: #8a6b3d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.flow-goal h2 {
    margin: 6px 0 0;
    font-size: 17px;
    line-height: 1.35;
}

.flow-goal p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.flow-plan-list {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0 0 0 18px;
    list-style: none;
}

.flow-plan-list::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 14px;
    width: 1px;
    background: var(--table-line);
}

.flow-plan {
    position: relative;
    padding: 11px 12px 12px;
    border-left: 3px solid var(--line);
    border-bottom: 1px solid var(--table-line-soft);
    background: rgba(255, 250, 243, 0.42);
}

.flow-plan::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 20px;
    width: 10px;
    height: 1px;
    background: var(--table-line);
}

.flow-plan-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.flow-plan-main strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
}

.flow-plan-title {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.flow-plan-type {
    justify-self: start;
    padding: 3px 7px;
    border: 1px solid var(--table-line);
    border-radius: 999px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
}

.flow-plan-status-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.flow-plan-timing {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    color: var(--ink);
    white-space: nowrap;
}

.flow-plan-timing span {
    color: rgba(102, 117, 109, 0.66);
    font-size: 11px;
    font-weight: 800;
}

.flow-plan-timing strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 1000;
}

.flow-plan-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--table-line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.flow-plan dl {
    display: grid;
    gap: 5px;
    margin: 10px 0 0;
}

.flow-plan dl div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
}

.flow-plan dt,
.flow-plan dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}

.flow-plan dt {
    color: var(--brand);
    font-weight: 900;
}

.flow-plan dd {
    color: var(--muted);
    font-weight: 700;
    white-space: pre-wrap;
}

.flow-step-section {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--table-line-soft);
}

.flow-step-section > span {
    display: block;
    margin-bottom: 6px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 1000;
}

.flow-step-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flow-step {
    padding: 8px 9px;
    border-left: 3px solid var(--line);
    background: rgba(244, 233, 215, 0.18);
}

.flow-step > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.flow-step strong {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.35;
}

.flow-step > div span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.flow-step dl {
    margin-top: 6px;
}

.flow-plan-done {
    border-left-color: var(--mint);
}

.flow-plan-active {
    border-left-color: var(--accent);
    background: rgba(242, 196, 132, 0.14);
}

.flow-plan-delayed {
    border-left-color: var(--warn);
    background: rgba(184, 74, 58, 0.08);
}

.flow-plan-done .flow-plan-status {
    border-color: rgba(47, 153, 115, 0.34);
    color: var(--mint);
}

.flow-plan-active .flow-plan-status {
    border-color: rgba(214, 138, 58, 0.42);
    color: #b86b1f;
}

.flow-plan-delayed .flow-plan-status {
    border-color: rgba(184, 74, 58, 0.38);
    color: var(--warn);
}

.flow-empty {
    margin-top: 22px;
    padding: 15px 16px;
    border-left: 3px solid var(--table-line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.detail-empty {
    padding: 22px;
    color: var(--muted);
    font-weight: 800;
    text-align: center;
}

.created-card {
    width: min(720px, calc(100% - 40px));
    margin: 80px auto;
    padding: 32px;
}

.created-card h1 {
    color: var(--ink);
    font-size: clamp(28px, 4vw, 42px);
}

.created-card p:not(.area-kicker) {
    margin: 12px 0 24px;
    color: var(--muted);
    font-weight: 800;
}

@media (max-width: 1180px) {
    .workspace {
        grid-template-columns: 1fr;
    }

    .popup-page .topbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .task-hero-progress {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    .task-hero-summary {
        min-width: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

    .area-board {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .split-board::before {
        display: none;
    }
}

@media (max-width: 980px) {
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* True merged-cell Gantt table. */
.gantt-page .gantt-grid {
    grid-template-columns:
        minmax(54px, 0.6fr)
        minmax(76px, 0.8fr)
        minmax(96px, 1fr)
        minmax(68px, 0.62fr)
        minmax(0, 6fr) !important;
}

.gantt-page .gantt-head-cell,
.gantt-page .gantt-merge-cell,
.gantt-page .gantt-leaf-cell {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-right: 1px solid rgba(219, 230, 250, 0.86);
    border-bottom: 1px solid rgba(219, 230, 250, 0.86);
}

.gantt-page .gantt-head-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(250, 253, 255, 0.96));
    color: #075bcb;
    font-size: 12px;
    font-weight: 950;
}

.gantt-page .gantt-head-cell.is-goal { grid-column: 1; grid-row: 1; }
.gantt-page .gantt-head-cell.is-plan { grid-column: 2; grid-row: 1; }
.gantt-page .gantt-head-cell.is-step { grid-column: 3; grid-row: 1; }
.gantt-page .gantt-head-cell.is-period { grid-column: 4; grid-row: 1; }
.gantt-page .gantt-time-head { grid-column: 5; grid-row: 1; }

.gantt-page .gantt-merge-cell {
    display: flex;
    align-items: flex-start;
    padding: 4px 8px 0;
    background: rgba(242, 247, 255, 0.58);
    color: #075bcb;
    font-size: clamp(9px, 1dvh, 12px);
    font-weight: 1000;
    line-height: 1.22;
}

.gantt-page .gantt-merge-cell.is-goal {
    grid-column: 1;
    background: rgba(236, 245, 255, 0.78);
}

.gantt-page .gantt-merge-cell.is-plan {
    grid-column: 2;
    background: rgba(248, 251, 255, 0.86);
    color: #071a55;
}

.gantt-page .gantt-leaf-cell {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.82);
    color: #284a80;
    font-size: clamp(9px, 1dvh, 12px);
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-page .gantt-leaf-cell.is-step {
    grid-column: 3;
}

.gantt-page .gantt-leaf-cell.is-period {
    grid-column: 4;
    justify-content: flex-end;
    color: #58729f;
    font-size: clamp(8px, 0.94dvh, 11px);
    font-weight: 850;
}

.gantt-page .gantt-time-row {
    grid-column: 5;
}

@media (max-width: 980px) {
    .gantt-page .gantt-grid {
        grid-template-columns:
            minmax(46px, 0.62fr)
            minmax(66px, 0.82fr)
            minmax(82px, 1fr)
            minmax(58px, 0.62fr)
            minmax(0, 4fr) !important;
    }

    .gantt-page .gantt-head-cell,
    .gantt-page .gantt-merge-cell,
    .gantt-page .gantt-leaf-cell {
        padding-inline: 5px;
    }
}

/* Reference-style compact merged Gantt. */
.gantt-page {
    background: #f7fbff !important;
}

.gantt-page .gantt-layout {
    padding: 8px 10px 10px !important;
}

.gantt-page .gantt-board {
    border: 2px solid #2b69f0 !important;
    border-radius: 0 0 12px 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.gantt-page .gantt-grid {
    grid-template-columns:
        minmax(50px, 0.58fr)
        minmax(72px, 0.78fr)
        minmax(92px, 1fr)
        minmax(64px, 0.58fr)
        minmax(0, 6.3fr) !important;
    grid-template-rows: 42px repeat(var(--gantt-row-count), minmax(0, 1fr)) !important;
    background: #fff !important;
}

.gantt-page .gantt-head-cell,
.gantt-page .gantt-time-head {
    border-right: 1px solid #2b69f0 !important;
    border-bottom: 2px solid #2b69f0 !important;
    background: #2f6df6 !important;
    color: #fff !important;
}

.gantt-page .gantt-head-cell {
    justify-content: center !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.gantt-page .gantt-time-head span {
    border-left: 1px solid rgba(255, 255, 255, 0.36) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.gantt-page .gantt-merge-cell,
.gantt-page .gantt-leaf-cell,
.gantt-page .gantt-time-row {
    border-right: 1px solid rgba(47, 109, 246, 0.42) !important;
    border-bottom: 1px solid rgba(47, 109, 246, 0.34) !important;
    background: #fff !important;
}

.gantt-page .gantt-merge-cell {
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 7px !important;
    color: #071a55 !important;
    font-size: clamp(8px, 1.04dvh, 12px) !important;
    font-weight: 1000 !important;
    text-align: center !important;
}

.gantt-page .gantt-merge-cell.is-goal {
    background: #f8fbff !important;
    color: #075bcb !important;
}

.gantt-page .gantt-merge-cell.is-plan {
    background: #fff !important;
}

.gantt-page .gantt-leaf-cell {
    justify-content: center !important;
    padding: 0 6px !important;
    color: #071a55 !important;
    font-size: clamp(8px, 1.02dvh, 12px) !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.gantt-page .gantt-leaf-cell.is-period {
    justify-content: center !important;
    color: #25386e !important;
    font-size: clamp(7px, 0.92dvh, 10px) !important;
}

.gantt-page .gantt-time-row {
    background:
        linear-gradient(90deg, rgba(47, 109, 246, 0.08) 1px, transparent 1px),
        #fff !important;
    background-size: 6.25% 100% !important;
}

.gantt-page .gantt-time-row.is-goal {
    background-color: #fbfdff !important;
}

.gantt-page .gantt-month-line {
    background: rgba(47, 109, 246, 0.22) !important;
}

.gantt-page .gantt-bar {
    height: clamp(5px, 34%, 14px) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.gantt-page .gantt-bar span {
    right: 5px !important;
    font-size: 8px !important;
    font-weight: 1000 !important;
}

.gantt-page .gantt-bar.is-done {
    background: #31b7aa !important;
}

.gantt-page .gantt-bar.is-active {
    background: #2f6df6 !important;
}

.gantt-page .gantt-bar.is-delayed {
    background: #ff6b5f !important;
}

.gantt-page .gantt-bar.is-todo {
    background: #9ec0fb !important;
}

/* Plan-level Gantt: steps are rendered as multiple bars in one task row. */
.gantt-page .gantt-grid {
    grid-template-columns:
        minmax(62px, 0.78fr)
        minmax(126px, 1.45fr)
        minmax(64px, 0.62fr)
        minmax(0, 6.4fr) !important;
    grid-template-rows: 42px repeat(var(--gantt-row-count), minmax(18px, clamp(18px, 2.05dvh, 32px))) !important;
    align-content: start !important;
}

.gantt-page .gantt-head-cell.is-goal { grid-column: 1 !important; grid-row: 1 !important; }
.gantt-page .gantt-head-cell.is-plan { grid-column: 2 !important; grid-row: 1 !important; }
.gantt-page .gantt-head-cell.is-period { grid-column: 3 !important; grid-row: 1 !important; }
.gantt-page .gantt-time-head { grid-column: 4 !important; grid-row: 1 !important; }

.gantt-page .gantt-merge-cell.is-goal {
    grid-column: 1 !important;
}

.gantt-page .gantt-merge-cell.is-plan {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.gantt-page .gantt-leaf-cell.is-period {
    grid-column: 3 !important;
}

.gantt-page .gantt-time-row {
    grid-column: 4 !important;
}

.gantt-page .gantt-bar.is-segment {
    height: clamp(6px, 40%, 16px) !important;
    min-width: 5px !important;
}

.gantt-page .gantt-bar.is-segment span {
    display: none !important;
}

@media (max-width: 980px) {
    .gantt-page .gantt-grid {
        grid-template-columns:
            minmax(48px, 0.72fr)
            minmax(88px, 1.2fr)
            minmax(54px, 0.58fr)
            minmax(0, 4.8fr) !important;
    }
}

@media (max-width: 720px) {
    .topbar,
    .layout {
        width: calc(100% - 30px);
    }

    .topbar {
        display: grid;
        padding: 18px 16px;
    }

    h1 {
        font-size: 24px;
    }

    .metrics,
    .two-col,
    .task-grid,
    .filters,
    .quick-actions,
    .area-head,
    .task-row,
    .basic-info-grid {
        grid-template-columns: 1fr;
    }

    .basic-info-grid .title-field,
    .basic-info-grid .project-start-field,
    .basic-info-grid .project-end-field,
    .basic-info-grid .assignee-field,
    .basic-info-grid .performing-field,
    .basic-info-grid .collaboration-field,
    .basic-info-grid .note-field,
    .basic-info-grid .purpose-field,
    .basic-info-grid .kpi-field {
        grid-column: auto;
        grid-row: auto;
    }

    .team-manager-row {
        grid-template-columns: minmax(0, 1fr) 56px 56px;
    }

    .team-manager-add {
        grid-template-columns: minmax(0, 1fr) 64px;
    }

    .detail-page {
        min-width: 320px;
    }

    .detail-topbar,
    .detail-layout {
        width: calc(100% - 30px);
    }

    .detail-topbar,
    .detail-summary,
    .detail-narrative,
    .progress-history-head,
    .progress-history-row {
        grid-template-columns: 1fr;
    }

    .detail-topbar {
        display: grid;
    }

    .detail-summary > div,
    .detail-narrative article {
        border-right: 0;
        border-bottom: 1px solid var(--table-line-soft);
    }

    .plan-table-head {
        display: none;
    }

    .plan-table {
        border-left: 0;
    }

    .plan-card {
        min-width: 0;
        grid-template-columns: 1fr;
        border-top: 1px solid rgba(217, 197, 168, 0.72);
    }

    .plan-card label,
    .plan-card .range-field {
        display: grid;
        gap: 4px;
        border-left: 1px solid rgba(217, 197, 168, 0.54);
    }

    .plan-card .field-label {
        display: inline;
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
    }

    .step-table-head {
        display: none;
    }

    .step-list {
        min-width: 0;
        border-right: 0;
    }

    .step-panel {
        padding: 10px;
        overflow: visible;
    }

    .step-panel-head {
        border-right: 0;
    }

    .step-row {
        grid-template-columns: 1fr;
        border-top: 1px solid rgba(217, 197, 168, 0.72);
    }

    .step-row label,
    .step-row .range-field {
        display: grid;
        gap: 4px;
        border-right: 0;
        border-bottom: 1px solid var(--table-line-soft);
    }

    .step-row .field-label {
        display: inline;
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
    }

    .step-delete-button {
        min-height: 34px;
    }

    .task-row-badges,
    .section-head.with-action {
        justify-content: flex-start;
    }

    .bulk-panel {
        padding: 16px;
    }

    .bulk-dialog-head,
    .bulk-toolbar,
    .bulk-actions,
    .bulk-goal-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .bulk-plan-head {
        display: none;
    }

    .bulk-plan-shell {
        border-left: 0;
    }

    .bulk-plan-row {
        min-width: 0;
        grid-template-columns: 1fr;
        border: 1px solid var(--table-line-soft);
        border-bottom: 0;
    }

    .bulk-plan-row label,
    .bulk-plan-row > .range-field,
    .bulk-wbs-cell {
        display: grid;
        gap: 4px;
        border-right: 0;
        border-bottom: 1px solid var(--table-line-soft);
    }

    .bulk-plan-row .field-label {
        display: inline;
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
    }

    .bulk-row-delete {
        min-height: 34px;
        border-right: 0;
    }

    .bulk-actions > * {
        width: 100%;
    }

    .process-roadmap-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-roadmap-line::before {
        display: none;
    }

    .process-roadmap-line::after {
        display: none;
    }

    .roadmap-step-main {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .roadmap-step-status {
        grid-column: 2;
        justify-self: start;
    }

    .roadmap-step-meta {
        padding-left: 0;
    }

    .roadmap-step-result {
        padding-left: 0;
    }

    .process-title {
        min-height: auto;
    }
}

/* Final report-dashboard lock: this must stay at the end of the stylesheet. */
.index-page.report-page {
    background: #fff;
}

.index-page.report-page .report-header {
    height: 96px;
    padding: 18px 36px 8px;
}

.index-page.report-page .report-header h1 {
    font-size: 42px;
    font-weight: 850;
    line-height: 1;
}

.index-page.report-page .report-header p {
    margin-top: 10px;
    color: #065dbc;
    font-size: 24px;
    font-weight: 750;
}

.index-page.report-page .report-header-actions {
    gap: 8px;
    padding-top: 8px;
}

.index-page.report-page .report-header-icon {
    width: 22px;
    height: 22px;
}

.index-page.report-page .report-add-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #b8cdfa;
    border-radius: 8px;
    background: #fff;
}

.index-page.report-page .report-add-button img {
    width: 21px;
    height: 21px;
}

.index-page.report-page .report-dashboard {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.1fr) minmax(0, 0.98fr);
    gap: 16px;
    height: calc(100dvh - 96px);
    min-height: 0;
    overflow: hidden;
    padding: 0 6px 14px;
}

.index-page.report-page .report-side {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    overflow: hidden;
}

.index-page.report-page .report-group {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 58px 14px 14px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--tone) 36%, #dce8ff);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 60px rgba(49, 92, 157, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.index-page.report-page .report-group-title {
    top: 10px;
    left: 31px;
    min-width: 232px;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0 28px 0 54px;
    background: color-mix(in srgb, var(--tone) 14%, #fff);
}

.index-page.report-page .report-group-icon {
    position: absolute;
    left: 10px;
    width: 42px;
    height: 42px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), transparent 28%),
        linear-gradient(145deg, color-mix(in srgb, var(--tone) 62%, #fff) 0%, var(--tone) 88%);
}

.index-page.report-page .report-group-icon::before,
.index-page.report-page .report-group-icon::after {
    display: none;
}

.index-page.report-page .report-group-icon img {
    width: 25px;
    height: 25px;
}

.index-page.report-page .report-group-title h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.index-page.report-page .report-card-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    flex: 1 1 auto;
    gap: 9px;
    min-height: 0;
    overflow: hidden;
}

.index-page.report-page .is-compact-group .report-card-list {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.index-page.report-page .report-task-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 18px 20px 18px 28px !important;
    border: 1px solid color-mix(in srgb, var(--tone) 28%, #dae7ff) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 10px 28px rgba(49, 92, 157, 0.09) !important;
}

.index-page.report-page .report-task-copy dl {
    display: grid;
    gap: 9px;
    margin: 0;
}

.index-page.report-page .report-task-copy div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
}

.index-page.report-page .report-task-copy dt {
    color: #005fff;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}

.index-page.report-page .report-task-copy dd {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #071a55;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-page.report-page .report-task-copy div:first-child dd {
    font-size: 20px;
    font-weight: 850;
    line-height: 1.22;
}

.index-page.report-page .report-progress-block {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.index-page.report-page .report-progress-block > span {
    color: #263861;
    font-size: 13px;
    font-weight: 800;
}

.index-page.report-page .report-progress-ring {
    width: 72px !important;
    min-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border: 7px solid transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        conic-gradient(var(--progress-status-color, var(--tone)) var(--progress-percent), #eceff4 0) border-box !important;
    color: #071a55 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.index-page.report-page .report-task-card.is-compact {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 9px 16px !important;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dl {
    gap: 3px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy div {
    grid-template-columns: 74px minmax(0, 1fr);
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dt {
    font-size: 12px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy dd {
    font-size: 13px;
}

.index-page.report-page .report-task-card.is-compact .report-task-copy div:first-child dd {
    font-size: 16px;
}

.index-page.report-page .report-task-card.is-compact .report-progress-ring {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-width: 6px !important;
    font-size: 15px !important;
}

.index-page.report-page .report-core-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 58px;
    align-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 88px 36px 42px;
}

.index-page.report-page .report-core-panel::before {
    inset: 26px -8px 4px;
    border: 16px solid rgba(43, 105, 240, 0.08);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 48%, rgba(234, 242, 255, 0.62) 70%, rgba(255, 255, 255, 0.2) 100%);
}

.index-page.report-page .report-core-panel::after {
    inset: 46px 4px 24px;
    border-color: rgba(43, 105, 240, 0.46);
    border-top-color: rgba(43, 105, 240, 0.74);
}

.index-page.report-page .report-target-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.5), transparent 28%),
        linear-gradient(145deg, #6c8cff 0%, #2b69f0 86%);
}

.index-page.report-page .report-target-icon::before,
.index-page.report-page .report-target-icon::after {
    display: none;
}

.index-page.report-page .report-target-icon img {
    width: 38px;
    height: 38px;
}

.index-page.report-page .report-core-head h2 {
    font-size: 30px;
    font-weight: 850;
}

.index-page.report-page .report-core-head p {
    font-size: 15px;
    font-weight: 650;
}

.index-page.report-page .report-task-card.is-core {
    grid-template-columns: minmax(0, 1fr) 122px !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 18px 22px 18px 28px !important;
}

.index-page.report-page .report-task-card.is-core .report-task-copy div {
    grid-template-columns: 92px minmax(0, 1fr);
}

.index-page.report-page .report-core-chart {
    margin-top: 22px;
}

.index-page.report-page .report-core-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-height: 0;
    overflow: hidden;
}

/* EOF secondary-screen priority guard. */
body.popup-page,
body.detail-page {
    --ui-bg: #f6f8fd;
    --ui-panel: rgba(255, 255, 255, 0.92);
    --ui-line: #dbe6fa;
    --ui-line-strong: #b8cdfa;
    --ui-ink: #071a55;
    --ui-muted: #52617f;
    --ui-blue: #2b69f0;
    --ui-blue-deep: #173e9b;
    --ui-blue-soft: #eef4ff;
    --ui-teal: #19a7a1;
    --ui-danger: #d94848;
    color: var(--ui-ink) !important;
    background: linear-gradient(180deg, #fff 0%, #f6f8fd 52%, #eef4ff 100%) !important;
}

body.popup-page::before,
body.detail-page::before,
.popup-page .topbar::before,
.popup-page .topbar::after,
.detail-topbar::before,
.detail-topbar::after,
.form-section::before,
.created-card::before {
    display: none !important;
}

.popup-page .topbar,
.detail-topbar,
.form-section,
.created-card,
.goal-card,
.detail-minimap-panel,
.detail-activity-panel,
.detail-summary,
.detail-narrative,
.detail-flow,
.progress-history,
.activity-card,
.flow-goal-node,
.flow-plan,
.bulk-dialog,
.roadmap-detail-dialog,
.basic-overview-body article,
.roadmap-detail-body article {
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    background: var(--ui-panel) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 14px 38px rgba(43, 105, 240, 0.08) !important;
}

.popup-page .topbar,
.detail-topbar {
    width: calc(100% - 24px) !important;
    margin-top: 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 18px 48px rgba(43, 105, 240, 0.1) !important;
}

.popup-page h1,
.popup-page h2,
.detail-page h1,
.detail-page h2,
.popup-page strong,
.detail-page strong,
.popup-page .topbar h1,
.detail-topbar h1 {
    color: var(--ui-ink) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.task-hero-period,
.task-hero-progress > div,
.task-hero-summary > div,
.task-hero-overview-button,
.task-hero-save-button,
.detail-icon-button,
.activity-deliverable,
.goal-bulk-button,
.goal-add-button,
.ghost,
.popup-page .ghost,
.compact-button,
.bulk-actions .ghost {
    border-color: var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.task-hero-progress span,
.task-hero-summary span,
.goal-progress-item > span,
.activity-detail-list span,
.activity-step-detail-list > span,
.section-title-row span,
.minimap-empty,
.progress-history-row,
.flow-plan dd,
.flow-plan-timing span,
.pdf-upload-row small {
    color: var(--ui-muted) !important;
}

.task-hero-progress strong,
.task-hero-summary strong,
.goal-progress-item strong,
.goal-progress-unit,
.activity-card-head strong,
.activity-step-detail strong,
.progress-history-row strong,
.flow-plan-main strong,
.flow-plan-timing strong {
    color: var(--ui-ink) !important;
}

.popup-layout,
.detail-brief-layout,
.detail-layout,
.detail-full-layout {
    width: calc(100% - 24px) !important;
}

body.embedded-task-form {
    min-height: 100dvh;
    overflow: auto;
    background: #f6f8fd !important;
}

body.embedded-task-form .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100% !important;
    margin: 0 !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 28px rgba(43, 105, 240, 0.1) !important;
}

body.embedded-task-form .popup-layout {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
}

body.embedded-task-form .entry-form {
    padding-bottom: 18px;
}

.form-section {
    padding: 18px !important;
}

.area-kicker,
.goal-card-head,
.goal-index-label,
.goal-header-progress,
.basic-overview-body h3,
.roadmap-detail-body h3,
.bulk-dialog-head h2,
.detail-panel-head h2,
.detail-summary span,
.flow-plan dt,
.flow-step-section > span,
.section-title-row h2,
.bulk-toolbar span,
.step-panel-head span,
.history-head h2 {
    color: var(--ui-blue) !important;
}

.goal-card-head,
.detail-panel-head,
.bulk-dialog-head,
.history-head,
.plan-table-head,
.step-table-head,
.bulk-plan-head {
    border-color: var(--ui-line) !important;
    background: linear-gradient(90deg, #f4f8ff 0%, #fff 52%, #f1f7ff 100%) !important;
}

.goal-index-label::before,
.minimap-goal-title span,
.activity-goal-label span,
.flow-goal-index {
    background: var(--ui-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(43, 105, 240, 0.12) !important;
}

.popup-page input,
.popup-page select,
.popup-page textarea,
.popup-page .basic-info-grid summary,
.bulk-dialog input,
.bulk-dialog select,
.bulk-dialog textarea,
.range-button,
.bulk-plan-row .range-button,
.range-picker-head button,
.range-picker-actions button {
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
    box-shadow: none !important;
}

.popup-page input:focus,
.popup-page select:focus,
.popup-page textarea:focus,
.bulk-dialog input:focus,
.bulk-dialog select:focus,
.bulk-dialog textarea:focus {
    border-color: var(--ui-blue) !important;
    box-shadow: 0 0 0 3px rgba(43, 105, 240, 0.12) !important;
}

.popup-page .form-grid,
.popup-page .form-grid label,
.plan-table,
.plan-table-head span,
.plan-card,
.plan-order-controls,
.plan-card label,
.range-field,
.plan-delete-button,
.step-panel,
.step-panel-head,
.step-table-head,
.step-table-head span,
.step-list,
.step-row,
.step-row label,
.step-row .range-field,
.bulk-plan-shell,
.bulk-plan-row,
.bulk-plan-row label,
.bulk-plan-row > .range-field,
.bulk-wbs-cell,
.bulk-result-detail,
.progress-history-head,
.progress-history-row,
.detail-summary > div,
.activity-detail-list,
.activity-step-detail-list,
.activity-goal-label {
    border-color: var(--ui-line) !important;
}

.plan-card,
.step-row,
.bulk-plan-row,
.activity-card,
.minimap-goal {
    background: #fff !important;
}

.plan-card:nth-child(even),
.step-row:nth-child(even),
.bulk-plan-row:nth-child(even) {
    background: #f9fbff !important;
}

.step-panel,
.bulk-wbs-cell,
.activity-card-head span,
.activity-status,
.activity-status.is-todo {
    background: #f2f6ff !important;
    color: var(--ui-blue-deep) !important;
}

.assignee-menu,
.context-menu,
.range-popover {
    border-color: var(--ui-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(43, 105, 240, 0.14) !important;
}

.check-option,
.popup-page .form-grid .check-option {
    border-color: var(--ui-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--ui-ink) !important;
}

.check-option:has(input:checked),
.goal-bulk-button:hover,
.goal-add-button:hover,
.ghost:hover,
.popup-page .ghost:hover,
.compact-button:hover,
.bulk-actions .ghost:hover,
.context-menu button:hover,
.minimap-goal:hover,
.minimap-goal.is-selected,
.range-button:hover,
.bulk-plan-row .range-button:hover {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.icon-button,
.primary,
.popup-page .primary,
.bulk-actions .primary,
.team-manager-add .primary {
    border-color: var(--ui-blue) !important;
    border-radius: 8px !important;
    background: var(--ui-blue) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(43, 105, 240, 0.18) !important;
}

.delete-icon-button,
.bulk-pdf-button,
.activity-deliverable-pdf {
    color: var(--ui-danger) !important;
}

.delete-icon-button:hover,
.bulk-pdf-button:hover,
.activity-deliverable-pdf:hover {
    border-color: var(--ui-danger) !important;
    background: #fff4f4 !important;
    color: var(--ui-danger) !important;
}

.bulk-link-button,
.activity-deliverable {
    border-color: rgba(43, 105, 240, 0.28) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.bulk-link-button.has-link,
.bulk-link-button:hover,
.activity-deliverable:hover {
    border-color: var(--ui-blue) !important;
    background: #fff !important;
    color: var(--ui-blue-deep) !important;
}

.range-field.is-derived .range-button,
.bulk-plan-row .range-field.is-derived .range-button,
.minimap-plan-dot.is-done,
.activity-step.is-done,
.activity-status.is-done {
    border-color: rgba(25, 167, 161, 0.36) !important;
    background: rgba(25, 167, 161, 0.12) !important;
    color: #0f8d88 !important;
}

.minimap-plan-dot.is-active,
.activity-step.is-active,
.activity-status.is-active {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue) !important;
    color: #fff !important;
}

.minimap-plan-dot.is-delayed,
.activity-step.is-delayed,
.activity-status.is-delayed {
    border-color: var(--ui-danger) !important;
    background: var(--ui-danger) !important;
    color: #fff !important;
}

.activity-card {
    border-left-width: 5px !important;
    border-left-color: var(--ui-line-strong) !important;
}

.activity-card.is-done,
.flow-plan-done {
    border-left-color: var(--ui-teal) !important;
}

.activity-card.is-active,
.flow-plan-active {
    border-left-color: var(--ui-blue) !important;
}

.activity-card.is-delayed,
.flow-plan-delayed {
    border-left-color: var(--ui-danger) !important;
    background: #fffafa !important;
}

.flow-goal-node {
    border-top-color: var(--ui-blue) !important;
}

.flow-goal-node::after,
.flow-plan-list::before,
.flow-plan::before {
    background: var(--ui-line) !important;
}

.created-card {
    width: min(760px, calc(100% - 40px)) !important;
    margin: 80px auto !important;
    padding: 36px !important;
}

.created-card h1 {
    color: var(--ui-ink) !important;
    letter-spacing: 0 !important;
}

.created-card p:not(.area-kicker) {
    color: var(--ui-muted) !important;
}

.created-card .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1180px) {
    .popup-page .topbar {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .detail-page {
        min-width: 320px !important;
    }

    .detail-brief-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .detail-page-brief {
        height: auto !important;
        overflow: auto !important;
    }
}

/* Detail-screen legacy color cleanup: color-only overrides. */
.popup-page .process-roadmap-line::before,
.popup-page .process-roadmap-line::after {
    background: var(--ui-line) !important;
}

.popup-page .process-title,
.popup-page .goal-header-title,
.detail-page .activity-goal-label strong,
.detail-page .minimap-goal-title strong,
.detail-page .flow-goal h2 {
    color: var(--ui-blue-deep) !important;
}

.popup-page .process-marker {
    border-color: var(--ui-line-strong) !important;
    background: #fff !important;
    color: var(--ui-blue) !important;
}

.popup-page .process-node.is-active .process-marker,
.popup-page .roadmap-step-item.is-complete .roadmap-step-status,
.popup-page .roadmap-step-item.is-active .roadmap-step-status,
.detail-page .minimap-plan-dot.is-done,
.detail-page .minimap-plan-dot.is-active,
.detail-page .activity-step.is-done,
.detail-page .activity-step.is-active,
.detail-page .activity-status.is-done,
.detail-page .activity-status.is-active,
.detail-page .roadmap-step-item.is-complete .roadmap-step-status,
.detail-page .roadmap-step-item.is-active .roadmap-step-status {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue) !important;
    color: #fff !important;
}

.popup-page .process-node.is-complete .process-marker {
    border-color: var(--ui-blue) !important;
    background: #fff !important;
    color: var(--ui-blue) !important;
}

.popup-page .process-node.is-complete .process-timing,
.popup-page .process-node.is-active .process-timing,
.popup-page .process-node.is-active .process-status,
.detail-page .flow-plan-done .flow-plan-status,
.detail-page .flow-plan-active .flow-plan-status,
.detail-page .activity-step-detail.is-done small,
.detail-page .activity-step-detail.is-active small {
    color: var(--ui-blue) !important;
}

.popup-page .process-node.is-active .process-status {
    background: var(--ui-blue-soft) !important;
}

.popup-page .process-node.is-waiting .process-status,
.popup-page .roadmap-step-item.is-waiting .roadmap-step-status,
.detail-page .activity-status.is-todo,
.detail-page .minimap-plan-dot.is-todo,
.detail-page .activity-step.is-todo,
.detail-page .flow-plan-todo .flow-plan-status,
.detail-page .roadmap-step-item.is-todo .roadmap-step-status {
    border-color: var(--ui-line-strong) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.popup-page .process-node.is-delayed .process-marker,
.popup-page .roadmap-step-item.is-delayed .roadmap-step-status {
    border-color: var(--ui-danger) !important;
    background: var(--ui-danger) !important;
    color: #fff !important;
}

.popup-page .process-node.is-delayed .process-timing {
    color: var(--ui-danger) !important;
}

.popup-page .range-field.is-derived .range-button,
.popup-page .bulk-plan-row .range-field.is-derived .range-button,
.detail-page .activity-step-detail.is-week-focus {
    border-color: rgba(43, 105, 240, 0.32) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue-deep) !important;
}

.detail-page .activity-card.is-done,
.detail-page .activity-card.is-active,
.detail-page .activity-step-detail.is-done,
.detail-page .activity-step-detail.is-active,
.detail-page .flow-plan-done,
.detail-page .flow-plan-active {
    border-left-color: var(--ui-blue) !important;
}

.popup-page .bulk-link-button,
.popup-page .bulk-link-button.has-link,
.popup-page .bulk-link-button:hover,
.popup-page .roadmap-detail-link,
.popup-page .roadmap-detail-link:hover,
.detail-page .activity-deliverable,
.detail-page .activity-deliverable:hover {
    border-color: var(--ui-blue) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

/* Work history and bulk editor table cleanup. */
.popup-page .progress-history,
.detail-page .progress-history {
    border-color: var(--ui-line) !important;
    background: #fff !important;
}

.popup-page .progress-history-table,
.detail-page .progress-history-table {
    border-top-color: var(--ui-line) !important;
}

.popup-page .progress-history-head,
.popup-page .progress-history-row,
.detail-page .progress-history-head,
.detail-page .progress-history-row {
    border-bottom-color: var(--ui-line) !important;
}

.popup-page .progress-history-head,
.detail-page .progress-history-head {
    background: #f2f6ff !important;
    color: var(--ui-blue) !important;
}

.popup-page .progress-history-row,
.detail-page .progress-history-row {
    background: #fff !important;
    color: var(--ui-muted) !important;
}

.popup-page .progress-history-row:nth-child(even),
.detail-page .progress-history-row:nth-child(even) {
    background: #f9fbff !important;
}

.popup-page .progress-history-row strong,
.detail-page .progress-history-row strong {
    color: var(--ui-ink) !important;
}

.popup-page .goal-progress-history-table .progress-history-row strong,
.popup-page .goal-progress-history-table .progress-history-head span:not(:first-child),
.detail-page .goal-progress-history-table .progress-history-row strong,
.detail-page .goal-progress-history-table .progress-history-head span:not(:first-child) {
    color: var(--ui-blue-deep) !important;
}

.popup-page .bulk-plan-row input,
.popup-page .bulk-plan-row select,
.popup-page .bulk-plan-row textarea,
.popup-page .bulk-plan-row .range-button,
.popup-page .bulk-plan-row .bulk-link-button,
.popup-page .bulk-plan-row .bulk-pdf-button {
    border-radius: 0 !important;
}

.popup-page .bulk-plan-row input,
.popup-page .bulk-plan-row select,
.popup-page .bulk-plan-row textarea,
.popup-page .bulk-plan-row .range-button {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Popup topbar legacy background cleanup. */
.popup-page .popup-topbar,
.popup-page header.topbar.popup-topbar {
    border-color: var(--ui-line) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--ui-ink) !important;
    box-shadow: 0 18px 48px rgba(43, 105, 240, 0.1) !important;
}

.popup-page .popup-topbar *,
.popup-page header.topbar.popup-topbar * {
    text-shadow: none !important;
}

.popup-page .task-hero-period,
.popup-page .task-hero-progress > div,
.popup-page .task-hero-summary > div,
.popup-page .task-hero-overview-button,
.popup-page .task-hero-save-button {
    border-color: var(--ui-line) !important;
    background: var(--ui-blue-soft) !important;
    color: var(--ui-blue) !important;
}

.popup-page .goal-progress-item,
.popup-page .goal-progress-item:first-child,
.popup-page .task-hero-summary > div,
.popup-page .task-hero-progress > div,
.popup-page .task-hero-progress > div:last-child,
.popup-page .task-hero-summary > div:last-of-type {
    border-right-color: var(--ui-line) !important;
}

.popup-page .task-hero-progress span,
.popup-page .task-hero-summary span,
.popup-page .goal-progress-item > span {
    color: var(--ui-muted) !important;
}

.popup-page .task-hero-progress strong,
.popup-page .task-hero-summary strong,
.popup-page .goal-progress-item strong,
.popup-page .goal-progress-unit {
    color: var(--ui-ink) !important;
}

.popup-page .task-hero-save-button svg {
    stroke: var(--ui-blue) !important;
}

/* Secondary pages final visual refresh.
   Keep this last so old beige/green detail-page styles cannot leak through. */
html:has(body.popup-page),
html:has(body.detail-page) {
    min-height: 100%;
    background:
        radial-gradient(ellipse 34dvh 24dvh at -7dvh 18dvh, rgba(218, 234, 255, 0.72), transparent 68%),
        radial-gradient(ellipse 30dvh 22dvh at calc(100% + 4dvh) 20dvh, rgba(255, 232, 213, 0.42), transparent 68%),
        radial-gradient(ellipse 32dvh 23dvh at -5dvh calc(100% + 1dvh), rgba(212, 246, 246, 0.48), transparent 68%),
        radial-gradient(ellipse 32dvh 23dvh at calc(100% + 4dvh) calc(100% + 2dvh), rgba(226, 226, 255, 0.52), transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 46%, #eef5ff 100%) !important;
}

body.popup-page,
body.detail-page {
    --bg: #f7fbff;
    --panel: rgba(255, 255, 255, 0.94);
    --panel-soft: #eef4ff;
    --ink: #071a55;
    --muted: #52617f;
    --line: #dbe6fa;
    --brand: #2b69f0;
    --brand-deep: #173e9b;
    --brand-soft: #5f93ff;
    --accent: #ff7a2a;
    --accent-soft: #ffe6d4;
    --mint: #19a7a1;
    --blue: #2b69f0;
    --warn: #d94848;
    --shadow: 0 18px 48px rgba(43, 105, 240, 0.1);
    --table-line: rgba(219, 230, 250, 0.86);
    --table-line-soft: rgba(219, 230, 250, 0.58);
    --ui-bg: #f7fbff;
    --ui-panel: rgba(255, 255, 255, 0.94);
    --ui-line: #dbe6fa;
    --ui-line-strong: #b8cdfa;
    --ui-ink: #071a55;
    --ui-muted: #52617f;
    --ui-blue: #2b69f0;
    --ui-blue-deep: #173e9b;
    --ui-blue-soft: #eef4ff;
    --ui-teal: #19a7a1;
    --ui-danger: #d94848;
    min-height: 100dvh !important;
    margin: 0 !important;
    position: relative !important;
    isolation: isolate !important;
    background:
        radial-gradient(ellipse 34dvh 24dvh at -7dvh 18dvh, rgba(218, 234, 255, 0.72), transparent 68%),
        radial-gradient(ellipse 30dvh 22dvh at calc(100% + 4dvh) 20dvh, rgba(255, 232, 213, 0.42), transparent 68%),
        radial-gradient(ellipse 32dvh 23dvh at -5dvh calc(100% + 1dvh), rgba(212, 246, 246, 0.48), transparent 68%),
        radial-gradient(ellipse 32dvh 23dvh at calc(100% + 4dvh) calc(100% + 2dvh), rgba(226, 226, 255, 0.52), transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 46%, #eef5ff 100%) !important;
    color: var(--ui-ink) !important;
}

body.popup-page::before,
body.detail-page::before {
    content: "";
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(126deg, transparent 0 5%, rgba(52, 116, 242, 0.18) 13%, rgba(197, 222, 255, 0.22) 24%, rgba(255, 255, 255, 0.08) 34%, transparent 48%),
        linear-gradient(118deg, transparent 0 10%, rgba(151, 213, 232, 0.2) 20%, rgba(241, 252, 255, 0.22) 34%, transparent 54%),
        linear-gradient(12deg, transparent 0 50%, rgba(113, 143, 240, 0.16) 60%, rgba(238, 242, 255, 0.2) 76%, transparent 94%);
    background-size: 46vw 34vh, 48vw 30vh, 42vw 28vh;
    background-position: -7vw 5vh, 46vw 1vh, 68vw calc(100% - 22vh);
    background-repeat: no-repeat;
    filter: blur(8px);
}

body.popup-page > *,
body.detail-page > * {
    position: relative;
    z-index: 1;
}

.popup-layout,
.detail-brief-layout,
.detail-layout,
.detail-full-layout {
    min-height: calc(100dvh - 116px) !important;
    background: transparent !important;
}

.popup-page .topbar,
.popup-page header.topbar.popup-topbar,
.detail-topbar {
    border-color: rgba(184, 205, 250, 0.82) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 18px 48px rgba(43, 105, 240, 0.1) !important;
}

.popup-page .form-section,
.popup-page .goal-card,
.popup-page .created-card,
.detail-page .detail-summary,
.detail-page .detail-narrative,
.detail-page .detail-flow,
.detail-page .detail-minimap-panel,
.detail-page .detail-activity-panel,
.detail-page .activity-card,
.detail-page .flow-goal-node,
.detail-page .flow-plan,
.popup-page .basic-overview-body article,
.popup-page .roadmap-detail-body article,
.popup-page .progress-history,
.detail-page .progress-history {
    border-color: rgba(184, 205, 250, 0.82) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 14px 38px rgba(43, 105, 240, 0.08) !important;
}

.popup-page .form-grid label,
.popup-page .plan-card,
.popup-page .bulk-plan-row,
.popup-page .range-button,
.popup-page .assignee-menu,
.popup-page .range-popover,
.popup-page .collaboration-menu,
.detail-page .activity-detail-list,
.detail-page .activity-step-detail-list,
.detail-page .progress-history-row,
.detail-page .flow-plan,
.detail-page .detail-empty {
    border-color: rgba(219, 230, 250, 0.86) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--ui-ink) !important;
}

.popup-page .goal-card-head,
.popup-page .plan-table-head,
.popup-page .step-table-head,
.popup-page .bulk-plan-head,
.popup-page .history-head,
.detail-page .detail-panel-head,
.detail-page .progress-history-head {
    border-color: rgba(219, 230, 250, 0.92) !important;
    background: linear-gradient(90deg, #f4f8ff 0%, #ffffff 52%, #eef6ff 100%) !important;
}

.popup-page .empty-plan-placeholder,
.popup-page .detail-empty,
.detail-page .detail-empty {
    border-color: rgba(184, 205, 250, 0.58) !important;
    background: rgba(247, 251, 255, 0.86) !important;
    color: var(--ui-muted) !important;
}

.project-list-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    min-height: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse at 12% 8%, rgba(216, 235, 255, 0.72), transparent 28%),
        radial-gradient(ellipse at 88% 12%, rgba(229, 240, 255, 0.78), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
    color: #071a55;
}

.project-list-page .project-list-topbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    min-height: 80px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(196, 215, 248, 0.72) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 18px 42px rgba(37, 75, 140, 0.08) !important;
}

.project-list-title h1 {
    margin: 0;
    color: #062563;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.08;
}

.project-list-stats {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.project-list-stats > div {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.project-list-stats > div + div::before {
    content: "";
    position: absolute;
    left: -9px;
    width: 1px;
    height: 14px;
    background: rgba(142, 166, 211, 0.42);
}

.project-list-stats span {
    color: #54688d;
    font-size: 14px;
    font-weight: 850;
}

.project-list-stats strong {
    color: #0a2e7a;
    font-size: 19px;
    font-weight: 950;
}

.project-list-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.project-list-add-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding-inline: 14px;
}

.project-list-add-button img,
.project-list-add-button svg {
    width: 17px;
    height: 17px;
}

.project-list-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px 18px 24px;
}

.project-list-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(189, 211, 250, 0.84);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 22px 58px rgba(43, 105, 240, 0.08);
}

.project-list-head,
.project-list-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) minmax(120px, 0.62fr) minmax(120px, 0.72fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) minmax(94px, 0.42fr) 154px;
    align-items: center;
    gap: 10px;
}

.project-list-head {
    min-height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(202, 220, 252, 0.9);
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(250, 253, 255, 0.94));
    color: #075bcb;
    font-size: 13px;
    font-weight: 900;
}

.project-list-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.project-list-body::-webkit-scrollbar {
    display: none;
}

.project-list-row {
    min-height: 72px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(218, 230, 251, 0.86);
    color: #071a55;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.project-list-row:last-child {
    border-bottom: 0;
}

.project-list-row:hover {
    background: rgba(244, 249, 255, 0.92);
}

.project-list-row:focus-visible {
    outline: 2px solid rgba(43, 105, 240, 0.5);
    outline-offset: -2px;
    background: rgba(244, 249, 255, 0.96);
}

.project-list-row.is-missing-performing {
    background:
        linear-gradient(90deg, rgba(47, 109, 246, 0.08), transparent 22%),
        rgba(255, 255, 255, 0.9);
}

.project-list-name {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.project-list-name strong {
    overflow: hidden;
    color: #071a55;
    font-size: 17px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list-name span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #647596;
    font-size: 12px;
    font-weight: 750;
}

.project-list-status {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(47, 109, 246, 0.18);
    border-radius: 999px;
    background: rgba(238, 244, 255, 0.95);
    color: #2f6df6;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.project-list-status.is-complete {
    border-color: rgba(25, 167, 161, 0.24);
    background: rgba(231, 249, 247, 0.95);
    color: #178b86;
}

/* Basic info popup: keep the form compact by ending the main row at collaboration team. */
.popup-page .basic-info-dialog {
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    height: auto !important;
    max-height: min(650px, calc(100vh - 48px)) !important;
}

.popup-page .basic-info-panel {
    max-height: min(650px, calc(100vh - 48px)) !important;
    overflow: visible !important;
}

.popup-page .basic-info-grid {
    grid-template-columns:
        minmax(300px, 1.45fr)
        minmax(132px, 0.56fr)
        minmax(132px, 0.56fr)
        minmax(150px, 0.68fr)
        minmax(150px, 0.68fr)
        minmax(170px, 0.78fr) !important;
}

.popup-page .basic-info-grid textarea {
    min-height: 92px !important;
}

.popup-page .basic-info-grid .title-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.popup-page .basic-info-grid .assignee-field {
    grid-column: 4 !important;
    grid-row: 1 !important;
}

.popup-page .basic-info-grid .performing-field {
    grid-column: 5 !important;
    grid-row: 1 !important;
}

.popup-page .basic-info-grid .collaboration-field {
    grid-column: 1 / span 2 !important;
    grid-row: 2 !important;
}

.popup-page .basic-info-grid .project-start-field {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.popup-page .basic-info-grid .project-end-field {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.popup-page .basic-info-grid .purpose-field {
    grid-column: 3 / -1 !important;
    grid-row: 2 !important;
}

.popup-page .basic-info-grid .kpi-field {
    grid-column: 1 / span 2 !important;
    grid-row: 3 !important;
}

.popup-page .basic-info-grid .note-field {
    grid-column: 3 / span 3 !important;
    grid-row: 3 !important;
}

.popup-page .basic-info-grid .purpose-field textarea {
    min-height: 92px !important;
}

.popup-page .basic-info-grid .kpi-field textarea,
.popup-page .basic-info-grid .note-field textarea {
    min-height: 88px !important;
}

.project-list-status.is-holding {
    border-color: rgba(107, 119, 140, 0.24);
    background: rgba(240, 243, 248, 0.95);
    color: #5b677c;
}

.project-list-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 26px;
    padding: 4px 9px;
    overflow: hidden;
    border: 1px solid rgba(199, 216, 248, 0.8);
    border-radius: 999px;
    background: rgba(242, 247, 255, 0.95);
    color: #21447c;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list-pill.is-empty {
    border-color: rgba(255, 152, 74, 0.28);
    background: rgba(255, 245, 237, 0.94);
    color: #c05718;
}

.project-list-pill.is-routine {
    border-color: rgba(99, 98, 238, 0.24);
    background: rgba(240, 241, 255, 0.95);
    color: #4d4bd7;
}

.project-list-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.project-core-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid rgba(47, 109, 246, 0.24);
    border-radius: 9px;
    background: rgba(242, 247, 255, 0.95);
    color: #075bcb;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.project-core-check input {
    width: 15px;
    min-width: 15px;
    height: 15px;
    min-height: 15px;
    margin: 0;
    accent-color: #2f6df6;
}

.project-core-check:has(input:checked) {
    border-color: rgba(47, 109, 246, 0.42);
    background: linear-gradient(135deg, rgba(226, 238, 255, 0.98), rgba(255, 255, 255, 0.92));
    color: #043f9f;
}

.project-list-empty {
    padding: 48px 18px;
    color: #54688d;
    font-size: 15px;
    font-weight: 850;
    text-align: center;
}

.project-archive-panel {
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(189, 211, 250, 0.84);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 38px rgba(43, 105, 240, 0.06);
}

.project-archive-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 16px;
    color: #21447c;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.project-archive-panel summary strong {
    color: #0a2e7a;
    font-size: 17px;
    font-weight: 950;
}

.project-archive-body {
    max-height: 210px;
    overflow: auto;
    border-top: 1px solid rgba(202, 220, 252, 0.78);
    scrollbar-width: none;
}

.project-archive-body::-webkit-scrollbar {
    display: none;
}

.project-archive-row {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(260px, 1fr) minmax(220px, 0.8fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(218, 230, 251, 0.76);
    color: #071a55;
}

.project-archive-row:last-child {
    border-bottom: 0;
}

.project-archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #647596;
    font-size: 12px;
    font-weight: 800;
}

.project-archive-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(242, 247, 255, 0.95);
}

@media (max-width: 980px) {
    .project-list-page .project-list-topbar {
        grid-template-columns: 1fr;
    }

    .project-list-stats,
    .project-list-actions {
        justify-self: stretch;
    }

    .project-list-actions {
        justify-content: flex-end;
    }

    .project-list-head {
        display: none;
    }

    .project-list-row {
        grid-template-columns: 1fr;
        gap: 7px;
        align-items: start;
    }

    .project-list-row-actions {
        justify-content: flex-start;
    }

    .project-archive-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* Keep roadmap goal content on a single fixed left grid; artifacts float right. */
.detail-page .minimap-goal {
    position: relative !important;
    display: block !important;
    min-height: 96px !important;
    padding: 0 !important;
    transform: none !important;
}

.detail-page .minimap-goal:hover,
.detail-page .minimap-goal.is-selected {
    transform: none !important;
}

.detail-page .minimap-goal-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-content: start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 96px !important;
    padding: 12px 112px 12px 12px !important;
}

.detail-page .minimap-goal-title {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    justify-content: start !important;
    justify-items: start !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

.detail-page .minimap-plan-track {
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 0 0 31px !important;
}

.detail-page .minimap-deliverable-actions {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-content: center !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
}

.detail-page .minimap-deliverable-actions.is-empty {
    display: none !important;
}

/* Detail issue board: left panel is split into goals and a compact issue workspace. */
.detail-page .detail-minimap-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.detail-page .detail-arrow-scroll {
    position: relative !important;
    min-height: 0 !important;
}

.detail-page .detail-goal-scroll {
    flex: 0 1 560px !important;
    max-height: calc((96px * 5) + 64px) !important;
    min-height: 260px !important;
}

.detail-page .detail-issue-panel {
    display: flex !important;
    flex: 1 1 220px !important;
    flex-direction: column !important;
    min-height: 170px !important;
    margin: 8px 12px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(184, 205, 250, 0.82) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 12px 28px rgba(43, 105, 240, 0.07) !important;
}

.detail-page .detail-issue-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    padding: 9px 12px 8px !important;
    border-bottom: 1px solid rgba(219, 230, 250, 0.92) !important;
    background: linear-gradient(90deg, #f4f8ff 0%, #ffffff 62%, #eef6ff 100%) !important;
}

.detail-page .detail-issue-head h2 {
    margin: 1px 0 0 !important;
    color: #075bcb !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
}

.detail-page .detail-issue-add {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(47, 109, 246, 0.26) !important;
    border-radius: 8px !important;
    background: rgba(242, 247, 255, 0.96) !important;
    color: #2f6df6 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
}

.detail-page .detail-issue-add:hover,
.detail-page .detail-issue-add:focus-visible {
    background: #2f6df6 !important;
    color: #fff !important;
}

.detail-page .detail-issue-scroll {
    flex: 1 1 auto !important;
}

.detail-page .minimap-goal-list,
.detail-page .detail-issue-list {
    height: 100% !important;
    overflow: auto !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
}

.detail-page .minimap-goal-list::-webkit-scrollbar,
.detail-page .detail-issue-list::-webkit-scrollbar {
    display: none !important;
}

.detail-page .detail-issue-list {
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 10px 12px 34px !important;
}

.detail-page .detail-issue-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 5px 8px !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(184, 205, 250, 0.86) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #071a55 !important;
    text-align: left !important;
    cursor: pointer !important;
}

.detail-page .detail-issue-card:hover,
.detail-page .detail-issue-card:focus-visible {
    border-color: rgba(47, 109, 246, 0.48) !important;
    box-shadow: 0 10px 22px rgba(43, 105, 240, 0.1) !important;
}

.detail-page .detail-issue-card span {
    grid-row: span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: rgba(47, 109, 246, 0.1) !important;
    color: #075bcb !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.detail-page .detail-issue-card .issue-status-등록 {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #075bcb !important;
}

.detail-page .detail-issue-card .issue-status-검토 {
    background: rgba(255, 134, 40, 0.14) !important;
    color: #d76d11 !important;
}

.detail-page .detail-issue-card .issue-status-진행 {
    background: rgba(43, 105, 240, 0.13) !important;
    color: #075bcb !important;
}

.detail-page .detail-issue-card .issue-status-완료 {
    background: rgba(22, 165, 111, 0.14) !important;
    color: #0f8a5f !important;
}

.detail-page .detail-issue-card .issue-status-보류 {
    background: rgba(95, 111, 139, 0.14) !important;
    color: #52617f !important;
}

.detail-page .detail-issue-card strong {
    overflow: hidden !important;
    color: #071a55 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.detail-page .detail-issue-card small {
    overflow: hidden !important;
    color: #58729f !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.detail-page .detail-issue-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 88px !important;
    border: 1px dashed rgba(184, 205, 250, 0.72) !important;
    border-radius: 12px !important;
    background: rgba(247, 251, 255, 0.72) !important;
    color: #6680aa !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.detail-page .detail-scroll-arrow {
    position: absolute !important;
    left: 50% !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    width: clamp(22px, 2.7dvh, 28px) !important;
    height: clamp(16px, 2.1dvh, 22px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateX(-50%) !important;
    cursor: pointer !important;
}

.detail-page .detail-scroll-arrow.is-up {
    top: 4px !important;
}

.detail-page .detail-scroll-arrow.is-down {
    bottom: 4px !important;
}

.detail-page .detail-scroll-arrow span {
    width: 0 !important;
    height: 0 !important;
    border-right: clamp(8px, 1dvh, 11px) solid transparent !important;
    border-left: clamp(8px, 1dvh, 11px) solid transparent !important;
    border-top: clamp(10px, 1.25dvh, 13px) solid #050b18 !important;
}

.detail-page .detail-scroll-arrow.is-up span {
    border-top: 0 !important;
    border-bottom: clamp(10px, 1.25dvh, 13px) solid #050b18 !important;
}

.detail-page .detail-scroll-arrow[hidden] {
    display: none !important;
}

.detail-issue-modal[hidden] {
    display: none !important;
}

.detail-issue-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    background: rgba(4, 16, 41, 0.42) !important;
}

.detail-issue-form {
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow: auto !important;
    border: 1px solid rgba(184, 205, 250, 0.9) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 26px 70px rgba(5, 24, 68, 0.22) !important;
}

.detail-issue-form-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid rgba(219, 230, 250, 0.92) !important;
}

.detail-issue-form-head h2 {
    margin: 2px 0 0 !important;
    color: #062563 !important;
    font-size: 24px !important;
    font-weight: 1000 !important;
}

.detail-issue-form-head button {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: #e34646 !important;
    font-size: 26px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.detail-issue-form-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 16px 18px !important;
}

.detail-issue-form-grid label {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: #071a55 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.detail-issue-form-grid label.is-wide {
    grid-column: 1 / -1 !important;
}

.detail-issue-form-grid input,
.detail-issue-form-grid select,
.detail-issue-form-grid textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(184, 205, 250, 0.84) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #071a55 !important;
    font: inherit !important;
    font-weight: 750 !important;
}

.detail-issue-form-grid input,
.detail-issue-form-grid select {
    height: 38px !important;
    padding: 0 10px !important;
}

.detail-issue-form-grid textarea {
    min-height: 82px !important;
    padding: 10px !important;
    resize: vertical !important;
}

.detail-issue-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 0 18px 18px !important;
}

.detail-issue-form-actions button {
    min-width: 76px !important;
    height: 38px !important;
    border: 1px solid rgba(184, 205, 250, 0.86) !important;
    border-radius: 10px !important;
    background: rgba(242, 247, 255, 0.95) !important;
    color: #075bcb !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.detail-issue-form-actions .detail-issue-save {
    border-color: #2f6df6 !important;
    background: #2f6df6 !important;
    color: #fff !important;
}

.detail-issue-form-actions .detail-issue-delete {
    margin-right: auto !important;
    border-color: rgba(227, 70, 70, 0.22) !important;
    background: rgba(255, 242, 242, 0.96) !important;
    color: #d33232 !important;
}

/* Goal cards should keep their natural card height; extra roadmap space stays blank. */
.detail-page .minimap-goal-list {
    align-content: start !important;
    align-items: start !important;
    grid-auto-rows: auto !important;
    padding-bottom: 34px !important;
}

.detail-page .minimap-goal,
.detail-page .minimap-goal-main {
    height: auto !important;
}

/* Keep the goal bulk editor table reachable on narrower popup aspect ratios. */
@media (min-width: 901px) {
    .popup-page .bulk-dialog {
        width: min(1502px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .popup-page .bulk-panel {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .popup-page .bulk-plan-shell {
        --bulk-plan-grid-min: 1420px;
        width: 100% !important;
        min-width: 0 !important;
        overflow: auto !important;
        scrollbar-gutter: stable both-edges;
    }

    .popup-page .bulk-plan-head,
    .popup-page .bulk-plan-list,
    .popup-page .bulk-plan-row {
        min-width: var(--bulk-plan-grid-min) !important;
    }

    .popup-page .bulk-plan-head,
    .popup-page .bulk-plan-row {
        grid-template-columns:
            76px
            190px
            220px
            96px
            96px
            164px
            164px
            320px
            94px !important;
    }

    .popup-page .bulk-result-detail {
        display: none !important;
    }
}

.popup-page .bulk-result-detail {
    display: none !important;
}

/* Core chart points are HTML dots so SVG non-uniform scaling cannot distort them. */
.index-page.report-page .report-core-chart {
    position: relative !important;
}

.index-page.report-page .report-core-chart svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

.index-page.report-page .report-core-chart span {
    position: absolute !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    box-sizing: border-box !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: #2f6df6 !important;
    box-shadow: 0 5px 12px rgba(43, 105, 240, 0.24) !important;
    transform: translate(-50%, 50%) !important;
}

.index-page.report-page .report-core-chart span:nth-of-type(1) { left: 19.5% !important; bottom: 24px !important; }
.index-page.report-page .report-core-chart span:nth-of-type(2) { left: 32.9% !important; bottom: -16px !important; }
.index-page.report-page .report-core-chart span:nth-of-type(3) { left: 50% !important; bottom: 42px !important; }
.index-page.report-page .report-core-chart span:nth-of-type(4) { left: 70.5% !important; bottom: 16px !important; }
.index-page.report-page .report-core-chart span:nth-of-type(5) { left: 87.9% !important; bottom: 73px !important; }

/* Actual browser-history navigation for detail and popup screens. */
.history-nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: max-content !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.history-nav-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #2b69f0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.history-nav-button span {
    display: block !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    transform: translateY(-1px);
}

.history-nav-button:hover,
.history-nav-button:focus-visible {
    background: rgba(43, 105, 240, 0.1) !important;
    color: #173e9b !important;
}

.history-nav-button:disabled {
    opacity: 0.34 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.popup-page .task-hero-summary {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.popup-page .task-hero-summary > .history-nav {
    flex: 0 0 auto !important;
}

.popup-page .task-hero-summary > .task-hero-overview-button {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    justify-content: center !important;
    padding-inline: 10px !important;
    box-sizing: border-box !important;
}

.detail-topbar > div:first-child,
.popup-page .task-hero-main,
.project-list-title,
.gantt-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.detail-topbar > div:first-child h1,
.popup-page .task-hero-main h1,
.project-list-title h1,
.gantt-title h1 {
    min-width: 0 !important;
}

.project-list-title {
    display: grid !important;
    grid-template-columns: minmax(0, auto) auto !important;
    justify-content: start !important;
}

.project-list-title .area-kicker {
    grid-column: 1 / -1 !important;
}

.detail-topbar .history-nav-button,
.popup-page .task-hero-main .history-nav-button,
.project-list-title .history-nav-button,
.gantt-title .history-nav-button {
    color: currentColor !important;
}

/* No-scroll Gantt view. */
.gantt-page {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 12% 8%, rgba(216, 235, 255, 0.72), transparent 28%),
        radial-gradient(ellipse at 88% 12%, rgba(229, 240, 255, 0.78), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    color: #071a55;
}

.gantt-topbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    height: 68px;
    min-height: 68px;
    padding: 10px 14px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid rgba(184, 205, 250, 0.82);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 32px rgba(43, 105, 240, 0.08);
}

.gantt-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gantt-title h1 {
    margin: 0;
    overflow: hidden;
    color: #071a55;
    font-size: 28px;
    font-weight: 1000;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-title span,
.gantt-summary div {
    border: 1px solid rgba(199, 216, 248, 0.78);
    border-radius: 8px;
    background: rgba(240, 246, 255, 0.92);
}

.gantt-title span {
    flex: 0 0 auto;
    padding: 6px 10px;
    color: #2f6df6;
    font-size: 14px;
    font-weight: 950;
}

.gantt-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gantt-summary div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 86px;
    height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
}

.gantt-summary span {
    color: #54688d;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.gantt-summary strong {
    overflow: hidden;
    color: #071a55;
    font-size: 15px;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gantt-actions button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(47, 109, 246, 0.26);
    border-radius: 10px;
    background: rgba(242, 247, 255, 0.96);
    color: #2f6df6;
    cursor: pointer;
}

.gantt-actions svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gantt-layout {
    height: calc(100dvh - 68px);
    padding: 10px 12px 12px;
    box-sizing: border-box;
    overflow: hidden;
}

.gantt-board {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(184, 205, 250, 0.86);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(43, 105, 240, 0.08);
}

.gantt-grid {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-rows: 38px repeat(var(--gantt-row-count), minmax(0, 1fr));
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.gantt-tree-head,
.gantt-time-head,
.gantt-tree-row,
.gantt-time-row {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid rgba(219, 230, 250, 0.86);
}

.gantt-tree-head,
.gantt-time-head {
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(250, 253, 255, 0.96));
}

.gantt-tree-head {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.05fr) 92px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-right: 1px solid rgba(219, 230, 250, 0.86);
    color: #075bcb;
    font-size: 12px;
    font-weight: 950;
}

.gantt-tree-head b,
.gantt-tree-head em,
.gantt-tree-row b,
.gantt-tree-row em {
    font-style: normal;
}

.gantt-time-head,
.gantt-time-row {
    position: relative;
}

.gantt-time-head span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--left);
    display: grid;
    place-items: center;
    width: var(--width);
    min-width: 0;
    border-left: 1px solid rgba(184, 205, 250, 0.46);
    color: #075bcb;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.gantt-tree-row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.05fr) 92px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-right: 1px solid rgba(219, 230, 250, 0.86);
}

.gantt-tree-row span,
.gantt-tree-row strong,
.gantt-tree-row b,
.gantt-tree-row em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt-tree-row span {
    color: #2f6df6;
    font-size: clamp(10px, 1.05dvh, 13px);
    font-weight: 950;
}

.gantt-tree-row strong,
.gantt-tree-row b {
    color: #071a55;
    font-size: clamp(10px, 1.2dvh, 15px);
    font-weight: 950;
}

.gantt-tree-row b {
    color: #284a80;
    font-weight: 850;
}

.gantt-tree-row em {
    color: #58729f;
    font-size: clamp(9px, 1dvh, 12px);
    font-weight: 850;
    text-align: right;
}

.gantt-tree-row.is-goal {
    background: rgba(242, 247, 255, 0.78);
}

.gantt-tree-row span:empty,
.gantt-tree-row strong:empty {
    visibility: hidden;
}

.gantt-tree-row.is-plan {
    background: rgba(255, 255, 255, 0.9);
}

.gantt-tree-row.is-step {
    background: rgba(248, 251, 255, 0.78);
}

.gantt-tree-row.is-goal strong {
    color: #075bcb;
}

.gantt-tree-row.is-goal span {
    color: #075bcb;
    font-weight: 1000;
}

.gantt-tree-row.is-step strong {
    color: #7a8aaa;
    font-weight: 800;
}

.gantt-time-row {
    background:
        linear-gradient(90deg, rgba(245, 249, 255, 0.74), rgba(255, 255, 255, 0.88));
}

.gantt-time-row.is-goal {
    background: rgba(242, 247, 255, 0.48);
}

.gantt-month-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--left);
    width: 1px;
    background: rgba(184, 205, 250, 0.4);
}

.gantt-bar {
    position: absolute;
    top: 50%;
    left: var(--left);
    width: var(--width);
    min-width: 4px;
    height: clamp(8px, 42%, 18px);
    border-radius: 999px;
    background: #2f6df6;
    box-shadow: 0 7px 16px rgba(43, 105, 240, 0.18);
    transform: translateY(-50%);
}

.gantt-bar span {
    position: absolute;
    top: 50%;
    right: 7px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(-50%);
}

.gantt-bar.is-parent {
    height: clamp(6px, 32%, 14px);
    background: rgba(47, 109, 246, 0.34);
    box-shadow: none;
}

.gantt-bar.is-done {
    background: #9aa3af;
}

.gantt-bar.is-active {
    background: #2f9973;
}

.gantt-bar.is-delayed {
    background: #ef6b4a;
}

.gantt-bar.is-todo {
    background: #9ebbf4;
}

.gantt-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    color: #6680aa;
    font-size: 14px;
    font-weight: 900;
}

@media (max-width: 980px) {
    .gantt-topbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gantt-summary {
        display: none;
    }

    .gantt-grid {
        grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    }

    .gantt-tree-head,
    .gantt-tree-row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) 72px;
        padding-inline: 8px;
    }
}

/* Final Gantt density guard: cap row height, shrink by row count, keep marks readable. */
.gantt-page .gantt-grid {
    --gantt-row-height: min(36px, calc((100dvh - 132px) / var(--gantt-row-count))) !important;
    --gantt-cell-font: min(15px, calc(var(--gantt-row-height) * 0.58)) !important;
    --gantt-period-font: min(13px, calc(var(--gantt-row-height) * 0.5)) !important;
    --gantt-bar-height: min(22px, calc(var(--gantt-row-height) * 0.8)) !important;
    grid-template-columns:
        minmax(62px, 0.78fr)
        minmax(126px, 1.45fr)
        minmax(64px, 0.62fr)
        minmax(0, 6.4fr) !important;
    grid-template-rows: 42px repeat(var(--gantt-row-count), minmax(0, var(--gantt-row-height))) !important;
    align-content: start !important;
}

.gantt-page .gantt-merge-cell,
.gantt-page .gantt-leaf-cell {
    font-size: var(--gantt-cell-font) !important;
    line-height: 1.06 !important;
}

.gantt-page .gantt-leaf-cell.is-period {
    font-size: var(--gantt-period-font) !important;
}

.gantt-page .gantt-bar,
.gantt-page .gantt-bar.is-segment {
    height: var(--gantt-bar-height) !important;
    min-width: 10px !important;
    border-radius: 5px !important;
}

.gantt-page .gantt-bar span {
    font-size: min(11px, calc(var(--gantt-row-height) * 0.42)) !important;
}

/* Two-level year/month timeline header. */
.gantt-page .gantt-time-head {
    background: #2f6df6 !important;
}

.gantt-page .gantt-time-head .gantt-year-head,
.gantt-page .gantt-time-head .gantt-month-head {
    position: absolute !important;
    left: var(--left) !important;
    width: var(--width) !important;
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-left: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #fff !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.gantt-page .gantt-time-head .gantt-year-head {
    top: 0 !important;
    bottom: auto !important;
    height: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.36) !important;
    background: rgba(28, 91, 228, 0.72) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.gantt-page .gantt-time-head .gantt-month-head {
    top: 20px !important;
    bottom: 0 !important;
    height: auto !important;
    background: rgba(47, 109, 246, 0.96) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

/* Gantt topbar mirrors the roadmap/edit header. */
.gantt-page .gantt-topbar {
    grid-template-columns: minmax(280px, 1fr) minmax(300px, auto) minmax(520px, auto) !important;
    gap: 12px !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 9px 14px !important;
}

.gantt-page .task-hero-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.gantt-page .task-hero-main h1 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #071a55 !important;
    font-size: 28px !important;
    font-weight: 1000 !important;
    line-height: 1.08 !important;
}

.gantt-page .task-hero-main h1 > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.gantt-page .task-hero-period {
    flex: 0 0 auto !important;
    max-width: 150px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(199, 216, 248, 0.92) !important;
    border-radius: 8px !important;
    background: rgba(240, 246, 255, 0.96) !important;
    color: #2f6df6 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.gantt-page .task-hero-progress,
.gantt-page .task-hero-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.gantt-page .goal-progress-overview {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    overflow: hidden !important;
    border: 1px solid rgba(199, 216, 248, 0.76) !important;
    border-radius: 8px !important;
    background: rgba(240, 246, 255, 0.96) !important;
}

.gantt-page .goal-progress-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    padding: 0 12px !important;
    border-right: 1px solid rgba(199, 216, 248, 0.76) !important;
    box-sizing: border-box !important;
}

.gantt-page .goal-progress-item:last-child {
    border-right: 0 !important;
}

.gantt-page .goal-progress-item span,
.gantt-page .task-hero-summary > div span {
    color: #54688d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.gantt-page .goal-progress-item strong,
.gantt-page .task-hero-summary > div strong,
.gantt-page .goal-progress-unit {
    color: #071a55 !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.gantt-page .task-hero-summary > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 128px !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(199, 216, 248, 0.76) !important;
    border-radius: 8px !important;
    background: rgba(240, 246, 255, 0.96) !important;
    box-sizing: border-box !important;
}

.gantt-page .task-hero-summary > div strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.gantt-page .task-hero-overview-button {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(199, 216, 248, 0.86) !important;
    border-radius: 8px !important;
    background: rgba(240, 246, 255, 0.96) !important;
    color: #2f6df6 !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.gantt-page .task-hero-overview-button svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
}

.gantt-page .task-hero-save-button {
    flex: 0 0 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 1px solid rgba(199, 216, 248, 0.86) !important;
    border-radius: 9px !important;
    background: rgba(240, 246, 255, 0.96) !important;
    color: #2f6df6 !important;
}

.gantt-page .task-hero-save-button svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Timeline-first Gantt body: left side keeps goals, tasks live under their bars. */
.gantt-page .gantt-grid {
    --gantt-row-height: min(46px, calc((100dvh - 132px) / var(--gantt-row-count))) !important;
    --gantt-cell-font: min(15px, calc(var(--gantt-row-height) * 0.42)) !important;
    --gantt-bar-height: min(9px, calc(var(--gantt-row-height) * 0.22)) !important;
    grid-template-columns: minmax(150px, 0.82fr) minmax(0, 6.9fr) !important;
    grid-template-rows: 42px repeat(var(--gantt-row-count), minmax(0, var(--gantt-row-height))) !important;
}

.gantt-page .gantt-head-cell.is-goal {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.gantt-page .gantt-head-cell.is-plan,
.gantt-page .gantt-head-cell.is-period,
.gantt-page .gantt-merge-cell.is-plan,
.gantt-page .gantt-leaf-cell.is-period {
    display: none !important;
}

.gantt-page .gantt-time-head {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.gantt-page .gantt-merge-cell.is-goal {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(184, 205, 250, 0.86) !important;
    background: rgba(246, 250, 255, 0.88) !important;
    color: #075bcb !important;
    font-size: var(--gantt-cell-font) !important;
    font-weight: 1000 !important;
    line-height: 1.16 !important;
    overflow-wrap: normal !important;
    text-wrap: pretty !important;
    white-space: normal !important;
    word-break: keep-all !important;
}

.gantt-page .gantt-time-row {
    grid-column: 2 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    background:
        radial-gradient(circle, rgba(78, 101, 138, 0.26) 1px, transparent 1.3px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(250, 253, 255, 0.92), rgba(255, 255, 255, 0.84)) !important;
}

.gantt-page .gantt-grid.has-today .gantt-time-row::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--today-left) !important;
    width: 1px !important;
    background: rgba(236, 45, 45, 0.78) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.54), 0 0 8px rgba(236, 45, 45, 0.16) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.gantt-page .gantt-bar,
.gantt-page .gantt-bar.is-segment {
    top: 34% !important;
    height: var(--gantt-bar-height) !important;
    min-width: 14px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
    z-index: 2 !important;
}

.gantt-page .gantt-bar::before,
.gantt-page .gantt-bar::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: min(13px, max(7px, calc(var(--gantt-row-height) * 0.28))) !important;
    height: min(13px, max(7px, calc(var(--gantt-row-height) * 0.28))) !important;
    box-sizing: border-box !important;
    border: 3px solid currentColor !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 3px 8px rgba(43, 105, 240, 0.18) !important;
    transform: translate(-50%, -50%) !important;
}

.gantt-page .gantt-bar::before {
    left: 0 !important;
}

.gantt-page .gantt-bar::after {
    left: 100% !important;
}

.gantt-page .gantt-bar.is-done {
    color: #9aa3af !important;
}

.gantt-page .gantt-bar.is-active {
    color: #2f9973 !important;
}

.gantt-page .gantt-bar.is-delayed {
    color: #ef6b4a !important;
}

.gantt-page .gantt-bar.is-todo {
    color: #9ebbf4 !important;
}

.gantt-page .gantt-task-label {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: auto !important;
    left: 0 !important;
    width: clamp(122px, 13vw, 280px) !important;
    max-width: clamp(122px, 13vw, 280px) !important;
    padding: 2px 7px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #071a55 !important;
    font-size: min(12px, calc(var(--gantt-row-height) * 0.3)) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
    z-index: 4 !important;
}

.gantt-page .gantt-today-line {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    z-index: 40 !important;
    min-width: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.gantt-page .gantt-today-line::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--today-left) !important;
    width: 1px !important;
    background: rgba(236, 45, 45, 0.88) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.64), 0 0 8px rgba(236, 45, 45, 0.2) !important;
}

.gantt-page .gantt-today-line span {
    position: absolute !important;
    top: 2px !important;
    left: var(--today-left) !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 43px !important;
    min-height: 16px !important;
    padding: 1px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 5px !important;
    background: rgba(239, 68, 68, 0.95) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 7px rgba(106, 26, 26, 0.2) !important;
}

/* Detailed schedule markers: actual/plan points, early dotted tails, delayed waves. */
.gantt-page .gantt-grid {
    --gantt-bar-height: min(6px, calc(var(--gantt-row-height) * 0.15)) !important;
}

.gantt-page .gantt-time-row.is-goal-start,
.gantt-page .gantt-merge-cell.is-goal.is-goal-start {
    border-top: 3px solid rgba(47, 109, 246, 0.46) !important;
}

.gantt-page .gantt-bar,
.gantt-page .gantt-bar.is-segment {
    background: transparent !important;
    color: #2f6df6 !important;
}

.gantt-page .gantt-bar::before,
.gantt-page .gantt-bar::after {
    content: none !important;
}

.gantt-page .gantt-line-solid,
.gantt-page .gantt-line-tail,
.gantt-page .gantt-line-wave {
    position: absolute !important;
    top: 50% !important;
    display: block !important;
    height: var(--gantt-bar-height) !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.gantt-page .gantt-line-solid {
    left: 0 !important;
    right: 0 !important;
    background: currentColor !important;
}

.gantt-page .gantt-line-tail,
.gantt-page .gantt-line-wave {
    display: none !important;
}

.gantt-page .is-schedule-early .gantt-line-solid {
    right: calc(100% - var(--done-pct)) !important;
}

.gantt-page .is-schedule-early .gantt-line-tail {
    display: block !important;
    left: var(--done-pct) !important;
    right: 0 !important;
    height: 0 !important;
    border-top: max(1px, calc(var(--gantt-bar-height) * 0.45)) dotted currentColor !important;
    background: transparent !important;
}

.gantt-page .is-schedule-late-done .gantt-line-solid {
    right: calc(100% - var(--plan-pct)) !important;
}

.gantt-page .is-schedule-late-done .gantt-line-wave {
    display: block !important;
    left: var(--plan-pct) !important;
    right: 0 !important;
    height: 10px !important;
    background: url("data:image/svg+xml,%3Csvg width='24' height='10' viewBox='0 0 24 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q3 0 6 5 T12 5 T18 5 T24 5' fill='none' stroke='%23ef6b4a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center / 24px 10px repeat-x !important;
}

.gantt-page .gantt-point {
    position: absolute !important;
    top: 50% !important;
    display: block !important;
    width: min(12px, max(7px, calc(var(--gantt-row-height) * 0.26))) !important;
    height: min(12px, max(7px, calc(var(--gantt-row-height) * 0.26))) !important;
    box-sizing: border-box !important;
    border: 3px solid currentColor !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 3px 8px rgba(43, 105, 240, 0.18) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.gantt-page .gantt-point.is-start {
    left: 0 !important;
}

.gantt-page .gantt-point.is-plan {
    left: var(--plan-pct) !important;
}

.gantt-page .gantt-point.is-done {
    left: var(--done-pct) !important;
    background: currentColor !important;
    border-color: currentColor !important;
    box-shadow: 0 4px 10px color-mix(in srgb, currentColor 30%, transparent) !important;
}

.gantt-page .is-schedule-actual-only .gantt-point.is-plan,
.gantt-page .is-schedule-on-time .gantt-point.is-plan,
.gantt-page .is-schedule-late .gantt-point.is-done,
.gantt-page .is-schedule-todo .gantt-point.is-done,
.gantt-page .is-schedule-active .gantt-point.is-done {
    display: none !important;
}

.gantt-page .gantt-bar.is-schedule-on-time,
.gantt-page .gantt-bar.is-schedule-actual-only {
    color: #9aa3af !important;
}

.gantt-page .gantt-bar.is-schedule-early {
    color: #9aa3af !important;
}

.gantt-page .gantt-bar.is-schedule-late,
.gantt-page .gantt-bar.is-schedule-late-done {
    color: #ef6b4a !important;
}

.gantt-page .gantt-bar.is-schedule-active {
    color: #2f9973 !important;
}

.gantt-page .gantt-bar.is-schedule-todo {
    color: #9ebbf4 !important;
}

.gantt-page .gantt-bar.is-done,
.gantt-page .gantt-bar.is-segment.is-done {
    color: #9aa3af !important;
}

.gantt-page .gantt-bar.is-done .gantt-line-solid,
.gantt-page .gantt-bar.is-segment.is-done .gantt-line-solid {
    right: 0 !important;
}

.gantt-page .gantt-bar.is-done .gantt-line-tail,
.gantt-page .gantt-bar.is-done .gantt-line-wave,
.gantt-page .gantt-bar.is-segment.is-done .gantt-line-tail,
.gantt-page .gantt-bar.is-segment.is-done .gantt-line-wave {
    display: none !important;
}

.gantt-page .gantt-task-label {
    display: block !important;
    top: calc(50% + 7px) !important;
    right: auto !important;
    left: 50% !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 2px 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #06184f !important;
    font-size: min(12px, max(8px, calc(var(--gantt-row-height) * 0.3))) !important;
    line-height: 1.05 !important;
    box-shadow: 0 1px 4px rgba(43, 105, 240, 0.1) !important;
    transform: translateX(-50%) !important;
    z-index: 80 !important;
}

.gantt-page .gantt-bar .gantt-task-label,
.gantt-page .gantt-bar.is-segment .gantt-task-label {
    display: block !important;
}

/* Final override for the basic-info dialog after broad bulk-dialog sizing rules. */
.popup-page .bulk-dialog.basic-info-dialog {
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    height: auto !important;
    max-height: min(650px, calc(100vh - 48px)) !important;
}

.popup-page .bulk-dialog.basic-info-dialog .basic-info-panel {
    max-height: min(650px, calc(100vh - 48px)) !important;
}
.management-layout {
    display: block;
    width: min(1180px, calc(100% - 44px));
    margin: 24px auto 60px;
}

.management-section {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(255, 250, 243, 0.82);
}

.management-section-head,
.inline-create-form,
.management-name-form,
.management-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.management-section-head {
    justify-content: space-between;
    margin-bottom: 18px;
}

.inline-create-form input,
.management-name-form input {
    min-width: 220px;
}

.management-table {
    display: grid;
    gap: 8px;
}

.management-table-head,
.management-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 120px 120px 140px;
    align-items: center;
    gap: 12px;
}

.management-table-head {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.management-row {
    padding: 10px;
    border: 1px solid var(--table-line);
    border-radius: 4px;
    background: #fffaf3;
}

.management-row.is-inactive {
    opacity: 0.62;
}

.task-management-layout {
    width: min(1480px, calc(100% - 44px));
}

.task-create-form {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(170px, 220px) minmax(150px, 190px) minmax(150px, auto);
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.management-guidance {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.management-row.is-draft,
.management-row.is-unpublishable {
    border-color: #f1c27d;
    background: #fff7e8;
}

.task-management-table .management-table-head,
.task-management-table .management-row {
    grid-template-columns: minmax(260px, 1fr) minmax(170px, 230px) minmax(130px, 170px) 82px 76px;
}

.management-task-title {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}

.management-task-title strong,
.management-task-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.management-task-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.management-draft-note {
    color: #a45c13;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.checkbox-control input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
}

.compact-checkbox {
    justify-content: center;
}

.task-create-actions {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.task-create-actions .compact-button,
.task-management-table .compact-button {
    justify-self: stretch;
    min-width: 0;
}

.task-management-layout .compact-button,
.task-management-layout .primary,
.task-management-layout .ghost,
.task-management-layout button,
.task-management-layout a.compact-button {
    color: #111827 !important;
}

.task-management-layout .primary {
    border-color: #111827 !important;
    background: #f8fafc !important;
}

.task-management-layout .primary:hover,
.task-management-layout .compact-button:hover,
.task-management-layout .ghost:hover {
    border-color: #111827 !important;
    background: #e5e7eb !important;
    color: #111827 !important;
}

.task-save-all-button {
    width: auto;
    min-width: 112px;
}

.status-pill {
    display: inline-flex;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.status-pill.is-active {
    background: rgba(47, 153, 115, 0.14);
    color: #16664c;
}

.status-pill.is-inactive {
    background: rgba(102, 117, 109, 0.14);
    color: var(--muted);
}

.organization-management-layout {
    display: grid;
    gap: 18px;
    width: min(1500px, calc(100% - 44px));
}

.organization-management-section {
    min-width: 0;
}

.organization-management-status {
    padding: 11px 14px;
    border: 1px solid rgba(184, 66, 66, 0.28);
    border-radius: 6px;
    background: #fff2f2;
    color: #9a2f2f;
    font-size: 13px;
    font-weight: 800;
}

.organization-management-status[hidden] {
    display: none;
}

.organization-management-status[data-status-type="success"] {
    border-color: rgba(47, 153, 115, 0.25);
    background: #effaf5;
    color: #16664c;
}

.organization-operation-checks [data-operation-checks-summary] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(31, 95, 142, 0.18);
    border-radius: 6px;
    background: #eef7fb;
    color: #1f5f8e;
    font-size: 13px;
}

.organization-inline-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 920px);
}

.organization-inline-form input,
.organization-inline-form select {
    min-width: 0;
}

.organization-grid-list {
    display: grid;
    gap: 8px;
}

.organization-management-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--table-line);
    border-radius: 4px;
    background: #fffaf3;
}

.organization-management-row-content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.organization-management-row-content strong,
.organization-management-row-content span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-management-row-content span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.organization-management-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.organization-history-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(111, 132, 154, 0.22);
    border-radius: 6px;
    background: #f8fbff;
}

.organization-history-panel[hidden] {
    display: none;
}

.organization-history-panel strong {
    color: var(--text);
    font-size: 14px;
}

.organization-history-list {
    display: grid;
    gap: 6px;
}

.organization-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(111, 132, 154, 0.2);
    border-radius: 4px;
    background: #ffffff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.organization-history-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organization-history-empty {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .task-create-form,
    .task-management-table .management-table-head,
    .task-management-table .management-row {
        grid-template-columns: 1fr;
    }

    .task-management-table .management-table-head {
        display: none;
    }

    .organization-inline-form,
    .organization-management-row {
        grid-template-columns: 1fr;
    }

    .organization-management-actions {
        justify-content: stretch;
    }
}