:root { --ink: #18282b; --muted: #6d7d83; --line: #d9e1e3; --paper: #ffffff; --canvas: #f3f7f7; --green: #1b6b57; --green-soft: #e9f3f0; --yellow: #9a690d; --red: #b13e3e; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Arial, "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px clamp(20px, 5vw, 68px); }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin: 0 0 5px; }
.topbar h1 { font-size: 17px; letter-spacing: .02em; margin: 0; }
.topbar-right, .page-nav, .mode-switch { display: flex; align-items: center; gap: 3px; }
.page-nav button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 9px 10px; }
.page-nav button.active { border-color: var(--green); color: var(--green); font-weight: 700; }
.mode-switch { background: #edf1f1; padding: 3px; }
.mode-switch button { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; font-size: 13px; }
.mode-switch button.active { background: var(--paper); box-shadow: 0 1px 2px #cbd5d7; color: var(--ink); }
.content { max-width: 1190px; margin: 0 auto; padding: 34px 30px 62px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.page-heading h2 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.045em; margin: 0; }
.page-heading p:not(.week) { color: var(--muted); margin: 7px 0 0; }
.week { color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin: 0 0 8px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; margin-bottom: 30px; }
.summary-strip div { background: var(--paper); padding: 13px 17px; }
.summary-strip strong { display: block; font-size: 23px; font-weight: 700; }.summary-strip span { color: var(--muted); font-size: 13px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 266px; gap: 30px; }.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }.section-heading h3, .side-panel h3, .report h3, .email-preview h3 { font-size: 15px; margin: 0; }.section-heading span { color: var(--muted); font-size: 12px; }
.project-group { margin-top: 22px; }.project-group h4 { color: var(--green); font-size: 12px; letter-spacing: .04em; margin: 0 0 6px; }.table-wrap { overflow-x: auto; }table { border-collapse: collapse; min-width: 680px; width: 100%; }th { color: var(--muted); font-size: 11px; font-weight: 700; padding: 9px 8px; text-align: left; }td { border-top: 1px solid var(--line); font-size: 13px; padding: 13px 8px; vertical-align: top; }tbody tr { transition: background .15s ease; }tbody tr:hover, tbody tr.selected { background: var(--green-soft); }tbody tr { cursor: pointer; }td strong { font-weight: 700; }td small { color: var(--muted); display: block; font-size: 11px; margin-top: 3px; }.status { align-items: center; display: inline-flex; gap: 6px; white-space: nowrap; }.status i { background: var(--green); border-radius: 50%; height: 8px; width: 8px; }.status.yellow { color: var(--yellow); }.status.yellow i { background: var(--yellow); }.status.red { color: var(--red); }.status.red i { background: var(--red); }.status.gray { color: var(--muted); }.status.gray i { background: var(--muted); }
.key-points { color: var(--ink); line-height: 1.55; margin: 0; padding-left: 17px; }.key-points li + li { margin-top: 3px; }.selected-note .key-points { color: var(--muted); font-size: 12px; margin: 7px 0; }
.side-panel { border-left: 1px solid var(--line); min-height: 310px; padding-left: 24px; }.attention { border-top: 1px solid var(--line); margin-top: 13px; padding-top: 12px; }.attention strong { font-size: 13px; }.attention p, .selected-note p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 5px 0; }.selected-note { background: var(--paper); border: 1px solid var(--line); margin-top: 24px; padding: 13px; }.selected-note span { color: var(--muted); display: block; font-size: 11px; margin-bottom: 4px; }.selected-note b { color: var(--ink); }
form .eyebrow { margin-top: 0; }form label { color: var(--muted); display: block; font-size: 12px; margin-top: 14px; }form input, form select, form textarea { background: var(--paper); border: 1px solid #cbd6d8; color: var(--ink); margin-top: 5px; padding: 8px; width: 100%; }form textarea { min-height: 75px; resize: vertical; }
.new-project { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; }.new-project h3 { font-size: 14px; margin: 0; }.new-project .secondary-action { margin-top: 15px; width: 100%; }
.primary-action, .secondary-action { border: 1px solid var(--green); font-size: 13px; padding: 10px 13px; white-space: nowrap; }.primary-action { background: var(--green); color: white; }.secondary-action { background: var(--paper); color: var(--green); }.side-panel .primary-action { margin-top: 16px; width: 100%; }
.draft-page { max-width: 1000px; }.draft-heading { border-bottom: 1px solid var(--line); padding-bottom: 24px; }.draft-actions { align-self: center; }.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 30px; }.report { background: var(--paper); border: 1px solid var(--line); }.report section { border-bottom: 1px solid var(--line); padding: 20px; }.report section:last-child { border-bottom: 0; }.report p { color: var(--muted); margin: 8px 0 0; }.report ul { margin: 10px 0 0; padding-left: 19px; }.report li { margin: 7px 0; line-height: 1.55; }.email-preview { border-left: 1px solid var(--line); height: fit-content; padding-left: 23px; }.email-preview p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.6; }.email-preview b { color: var(--ink); }.toast { background: var(--ink); bottom: 24px; box-shadow: 0 7px 20px #2736383d; color: white; left: 50%; padding: 11px 15px; position: fixed; transform: translateX(-50%); z-index: 10; }
@media (max-width: 760px) { .topbar, .topbar-right, .page-heading { align-items: flex-start; flex-direction: column; }.topbar { padding: 18px 20px; }.content { padding: 26px 20px 48px; }.workspace-grid, .report-layout { grid-template-columns: 1fr; }.side-panel, .email-preview { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }.summary-strip { grid-template-columns: 1fr; }.page-nav { order: 2; }.mode-switch { order: 1; } }