:root {
  color-scheme: light;
  --ink: #182230;
  --muted: #627184;
  --navy: #123554;
  --blue: #1c658c;
  --sky: #e8f2f7;
  --line: #d9e2e8;
  --canvas: #f5f7f8;
  --surface: #ffffff;
  --idea: #e7c36a;
  --document: #5d9ec2;
  --development: #347e78;
  --danger: #9a422f;
  --radius: 10px;
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .65rem 1rem; z-index: 5; }
.skip-link:focus { top: 1rem; }
.dashboard { width: min(1440px, calc(100% - 3rem)); margin: 0 auto; padding: 2.5rem 0 4rem; }
.page-header { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; border-bottom: 5px solid var(--navy); padding-bottom: 1.5rem; }
.eyebrow, .section-kicker { margin: 0 0 .4rem; color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.04em; line-height: 1.08; }
h2 { margin-bottom: 0; font-size: 1.3rem; }
.page-description, .section-caption, .source-status { color: var(--muted); margin-bottom: 0; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.source-status { font-size: .82rem; text-align: right; max-width: 20rem; }
.button { border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-weight: 700; padding: .65rem .9rem; white-space: nowrap; }
.button-secondary { background: var(--navy); color: #fff; }
.button:hover { background: #0d2b45; }
.button:focus-visible, .filter-button:focus-visible { outline: 3px solid #f1bb42; outline-offset: 2px; }
.definition-bar { align-items: baseline; background: #eef6fa; border: 0; border-left: 3px solid #9ec6dd; display: flex; gap: 1.25rem; margin: 1rem 0 2rem; padding: .55rem .75rem; }
.definition-bar h2 { font-size: .85rem; white-space: nowrap; }
.definition-bar dl { display: flex; flex: 1; flex-wrap: wrap; gap: .3rem 1.25rem; margin: 0; }
.definition-bar dl div { align-items: baseline; display: flex; gap: .35rem; }
.definition-bar dt { color: var(--navy); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.definition-bar dd { color: var(--muted); font-size: .75rem; line-height: 1.4; margin: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-caption { font-size: .82rem; }
.brand-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.brand-card { background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.brand-card-header { align-items: baseline; background: var(--navy); color: #fff; display: flex; justify-content: space-between; padding: .75rem 1rem; }
.brand-card-header h3 { font-size: 1rem; margin: 0; }
.brand-total { color: #cfdfeb; font-size: .78rem; }
.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stage-cell { border-right: 1px solid var(--line); min-height: 5.5rem; padding: .8rem .75rem; }
.stage-cell:last-child { border-right: 0; }
.stage-label { color: var(--muted); display: block; font-size: .73rem; font-weight: 700; }
.stage-number { display: block; font-size: 1.75rem; font-weight: 800; margin-top: .35rem; }
.stage-dot { border-radius: 50%; display: inline-block; height: .5rem; margin-right: .35rem; width: .5rem; }
.idea { background: var(--idea); }.document { background: var(--document); }.development { background: var(--development); }
.projects-section { margin-top: 3.25rem; }
.project-heading { align-items: center; }
.brand-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.filter-button { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: .82rem; padding: .4rem .75rem; }
.filter-button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.data-message { background: #fff5e7; border-left: 4px solid #d58a25; color: #684011; margin-bottom: 1rem; padding: .75rem 1rem; font-size: .9rem; }
.project-table-wrap { background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
table { border-collapse: collapse; min-width: 760px; width: 100%; }
th { background: #eef3f5; color: #536477; font-size: .74rem; letter-spacing: .05em; padding: .7rem 1rem; text-align: left; }
td { border-top: 1px solid var(--line); font-size: .88rem; padding: .9rem 1rem; vertical-align: top; }
td.project-name { font-weight: 700; min-width: 20rem; }.muted { color: var(--muted); }.date-cell { white-space: nowrap; }
.brand-tag { background: var(--sky); color: var(--navy); display: inline-block; font-weight: 800; min-width: 2.5rem; padding: .18rem .4rem; text-align: center; }
.status-tag { border-radius: 999px; display: inline-block; font-size: .78rem; font-weight: 700; padding: .25rem .55rem; white-space: nowrap; }
.status-development { background: #dfeeea; color: #22675f; }.status-sit { background: #dcebf5; color: #23618c; }.status-done { background: #edf0f2; color: #485663; }.status-waiting { background: #f8ecd2; color: #7a5611; }
.empty-row { color: var(--muted); padding: 2rem; text-align: center; }
@media (max-width: 950px) { .brand-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.definition-bar { grid-template-columns: 1fr; }.definition-bar dl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dashboard { width: min(100% - 1.5rem, 1440px); padding-top: 1.5rem; }.page-header, .section-heading { align-items: flex-start; flex-direction: column; }.header-actions { align-items: flex-start; flex-direction: column; }.source-status { text-align: left; }.brand-summary { grid-template-columns: 1fr; }.definition-bar dl { grid-template-columns: 1fr; }.brand-filters { justify-content: flex-start; } }

.brand-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-counts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .85rem; }
.status-counts li { align-items: center; background: #f2f6f7; border: 1px solid var(--line); color: var(--muted); display: flex; font-size: .78rem; gap: .5rem; justify-content: space-between; padding: .35rem .5rem; }
.status-counts strong { color: var(--ink); font-size: .95rem; }
.status-paused { background: #f0e8e4; color: #7e5142; }
table { min-width: 1300px; }
.timeline-cell { min-width: 930px; padding: .65rem 1rem; }
.project-timeline { display: grid; gap: .2rem; grid-template-columns: repeat(12, minmax(4.7rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.project-timeline li { border-left: 1px solid var(--line); min-height: 3.3rem; padding: .35rem .35rem .35rem .5rem; position: relative; }
.project-timeline li:first-child { border-left: 0; }
.project-timeline li::before { background: #c7d2d8; border-radius: 50%; content: ''; height: .45rem; left: -.25rem; position: absolute; top: .55rem; width: .45rem; }
.project-timeline li:first-child::before { left: 0; }
.project-timeline span { color: var(--muted); display: block; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.project-timeline strong { color: var(--ink); display: block; font-size: .78rem; margin-top: .28rem; white-space: nowrap; }
.project-timeline .is-set::before { background: var(--blue); }
.project-timeline .is-current { background: #e7f2ec; }
.project-timeline .is-current::before { background: var(--development); box-shadow: 0 0 0 3px #cfe4da; }
.project-timeline .is-pending strong { color: #98a4ad; font-weight: 500; }
@media (max-width: 950px) { .brand-summary { grid-template-columns: 1fr; } }
.brand-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-counts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: .85rem; }
.status-counts li { align-items: center; background: #f2f6f7; border: 1px solid var(--line); color: var(--muted); display: flex; font-size: .78rem; gap: .5rem; justify-content: space-between; padding: .35rem .5rem; }
.status-counts strong { color: var(--ink); font-size: .95rem; }
.status-paused { background: #f0e8e4; color: #7e5142; }
table { min-width: 1300px; }
.timeline-cell { min-width: 930px; padding: .65rem 1rem; }
.project-timeline { display: grid; gap: .2rem; grid-template-columns: repeat(12, minmax(4.7rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.project-timeline li { border-left: 1px solid var(--line); min-height: 3.3rem; padding: .35rem .35rem .35rem .5rem; position: relative; }
.project-timeline li:first-child { border-left: 0; }
.project-timeline li::before { background: #c7d2d8; border-radius: 50%; content: ''; height: .45rem; left: -.25rem; position: absolute; top: .55rem; width: .45rem; }
.project-timeline li:first-child::before { left: 0; }
.project-timeline span { color: var(--muted); display: block; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.project-timeline strong { color: var(--ink); display: block; font-size: .78rem; margin-top: .28rem; white-space: nowrap; }
.project-timeline .is-set::before { background: var(--blue); }
.project-timeline .is-current { background: #e7f2ec; }
.project-timeline .is-current::before { background: var(--development); box-shadow: 0 0 0 3px #cfe4da; }
.project-timeline .is-pending strong { color: #98a4ad; font-weight: 500; }
@media (max-width: 950px) { .brand-summary { grid-template-columns: 1fr; } }
.brand-card-body { align-items: center; display: flex; gap: 1rem; padding: 1rem; }
.status-pie { align-items: center; border-radius: 50%; display: flex; flex: 0 0 auto; height: 9.5rem; justify-content: center; position: relative; width: 9.5rem; }
.status-pie::after { background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); content: ''; inset: 2.15rem; position: absolute; }
.status-pie span { color: var(--navy); font-size: 1.45rem; font-weight: 800; line-height: 1; position: relative; text-align: center; z-index: 1; }
.status-pie small { color: var(--muted); display: block; font-size: .7rem; font-weight: 700; margin-top: .2rem; }
.status-counts { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
.status-counts li { min-width: 0; }
.status-label { align-items: center; display: flex; gap: .35rem; min-width: 0; }
.status-swatch { background: var(--status-color); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: .55rem; width: .55rem; }
.autonomy-section { margin-top: 3.25rem; }
.autonomy-overview { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
.autonomy-card { background: var(--surface); border: 1px solid var(--line); padding: 1.1rem 1.25rem; }
.autonomy-card h3 { color: var(--navy); font-size: 1.1rem; margin: 0; }
.autonomy-card h3 span { color: var(--blue); font-size: .85rem; margin-left: .3rem; }
.autonomy-label { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 .35rem; }
.autonomy-description { color: var(--muted); font-size: .84rem; line-height: 1.45; margin: .45rem 0 0; }
.autonomy-list { display: grid; gap: .6rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.autonomy-list li { align-items: center; background: #f5f8f9; border-left: 3px solid var(--blue); display: grid; gap: .45rem 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: .65rem .75rem; }
.autonomy-list strong { margin-left: .5rem; }
.autonomy-list small { color: var(--muted); font-size: .76rem; grid-column: 1 / -1; }
.autonomy-pie-card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-start; padding: 1.1rem 1.25rem; }
.autonomy-pie-card h3 { color: var(--navy); font-size: 1.1rem; margin: 0; }
.autonomy-pie-card h3 span { color: var(--blue); font-size: .85rem; margin-left: .3rem; }
.autonomy-chart-content { align-items: center; display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.autonomy-pie { align-items: center; border-radius: 50%; display: flex; flex: 0 0 auto; height: 9rem; justify-content: center; position: relative; width: 9rem; }
.autonomy-pie::after { background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); content: ''; inset: 2rem; position: absolute; }
.autonomy-pie span { color: var(--navy); font-size: 1.4rem; font-weight: 800; line-height: 1; position: relative; text-align: center; z-index: 1; }
.autonomy-pie small { color: var(--muted); display: block; font-size: .7rem; font-weight: 700; margin-top: .2rem; }
.autonomy-pie-legend { display: grid; flex: 1; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.autonomy-pie-legend li { align-items: center; background: #f2f6f7; border: 1px solid var(--line); display: flex; font-size: .82rem; justify-content: space-between; padding: .5rem .6rem; }
.autonomy-pie-legend li > span { align-items: center; display: flex; gap: .35rem; }
.autonomy-pie-legend strong { color: var(--ink); font-size: 1rem; }
.autonomy-ongoing { --status-color: #6366f1; }
.autonomy-completed { --status-color: #84cc16; }
@media (max-width: 950px) { .autonomy-overview { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .brand-card-body { align-items: stretch; flex-direction: column; }.status-pie { align-self: center; }.status-counts { grid-template-columns: 1fr; max-height: none; }.autonomy-chart-content { align-items: stretch; flex-direction: column; }.autonomy-pie { align-self: center; }.autonomy-list li { grid-template-columns: 1fr; }.autonomy-list .status-tag { justify-self: start; } }