:root {
  --ink: #1c2430;
  --muted: #5c6b7a;
  --line: #d5ddd8;
  --paper: #f4f7f5;
  --card: #fff;
  --green: #0c6b4d;
  --green-dark: #084936;
  --warn: #8a4b08;
  --danger: #8d2b2b;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { background: var(--green); color: white; border: 0; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
button.ghost { background: transparent; color: var(--green-dark); border: 1px solid var(--line); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
a { color: var(--green-dark); }
header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 20px; background: var(--green-dark); color: white; }
header a.brand { color: white; font-size: 18px; font-weight: 700; text-decoration: none; }
header nav { display: flex; gap: 8px; flex-wrap: wrap; }
header nav a { color: white; text-decoration: none; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 8px 12px; }
header nav a.on { background: white; color: var(--green-dark); border-color: white; }
header button { background: transparent; border: 1px solid rgba(255,255,255,.35); color: white; }
a.ghost { display: inline-block; background: transparent; color: var(--green-dark); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
label { display: block; margin: 10px 0 4px; color: var(--muted); }
input, select, textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: white; }
textarea { min-height: 90px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.draft.ok { color: var(--green-dark); }
.control-line { display: flex; flex-direction: column; align-items: stretch; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field-head > label { flex: 1 1 auto; min-width: 0; }
.saved-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 10px 0 4px;
  color: var(--green);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.saved-mark[hidden] { display: none !important; }
.saved-mark time { font-weight: 400; color: var(--muted); }
.saved-mark.pending { color: var(--muted); font-weight: 400; }
.saved-mark.fail { color: var(--danger); font-weight: 600; }
.saved-mark.pending .tick,
.saved-mark.fail .tick { display: none; }
.field.check .control-line { flex-direction: row; align-items: center; gap: 8px; }
.field.check input[type="checkbox"] { width: auto; }
.field.inline { flex: 1; min-width: 180px; }
.field.inline .control-line { flex-direction: row; align-items: center; gap: 8px; }
.field.inline input { width: auto; flex: 1; min-width: 0; }
.field.inline .saved-mark { margin: 0; white-space: nowrap; }
.error { color: var(--danger); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 99px; background: #e5f3ec; color: var(--green-dark); font-size: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.login { max-width: 420px; margin: 8vh auto; }
h1, h2, h3 { margin: 0 0 8px; }
.section-title { margin-top: 18px; }
.guide { background: #f3faf6; border: 1px solid #b7d7c8; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.guide h2 { font-size: 16px; }
.guide p { margin: 4px 0; }
.rail { list-style: none; margin: 8px 0 0; padding: 0; }
.rail li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; margin: 6px 0; }
.rail .n { width: 28px; height: 28px; border-radius: 50%; background: #e5f3ec; color: var(--green-dark); display: grid; place-items: center; font-size: 13px; }
.rail .now { background: var(--green); color: white; }
.rail .done { background: var(--green-dark); color: white; }
.wizard { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.phase-col { min-width: 168px; }
.phase-col p { margin: 0 0 4px; font-size: 12px; }
.phase-col a, .phase-col button { display: block; width: 100%; text-align: left; margin-top: 4px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; text-decoration: none; }
.phase-col a.on, .phase-col button.on { background: var(--green); color: white; border-color: var(--green); }
.stage { border-left: 4px solid var(--green); }
main.board { max-width: 1480px; }
.flow { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 8px; }
.flow-col { border-radius: 10px; padding: 10px; border: 1px solid var(--line); min-width: 0; }
.flow-col.now { outline: 2px solid var(--green); }
.flow-col h3 { margin: 0; font-size: 14px; }
.flow-col .sub { margin: 2px 0 0; font-size: 12px; }
.tone-1 { background: #e7f6ee; }
.tone-2 { background: #e5f4f2; }
.tone-3 { background: #e8f0fb; }
.tone-4 { background: #f3eef8; }
.tone-5 { background: #f8f1e6; }
.tone-6 { background: #f8eef3; }
.flow-step { background: white; border-radius: 8px; padding: 8px; margin-top: 8px; }
.flow-step .role { font-size: 11px; font-weight: 700; color: var(--green-dark); }
.flow-step p { margin: 4px 0; font-size: 13px; }
.flow-step button { margin: 6px 6px 0 0; }
details.card summary { cursor: pointer; }
.field-editor { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.options { margin: 8px 0 8px 12px; }
code { font-size: 12px; }
main.chart-page { max-width: none; padding: 12px 16px 28px; }
.board-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 14px; }
.board-head h1 { margin-bottom: 4px; }
.solution-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
a.solution-card, button.solution-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; text-decoration: none; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
a.solution-card strong, button.solution-card strong { font-size: 16px; }
a.solution-card:hover, button.solution-card:hover { border-color: var(--green); box-shadow: 0 0 0 2px rgba(12,107,77,.18); }
.chart-tools { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.view-switch { display: inline-flex; }
.view-switch a, .view-switch button { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 12px; text-decoration: none; }
.view-switch a:first-child, .view-switch button:first-child { border-radius: 6px 0 0 6px; }
.view-switch a:last-child, .view-switch button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.view-switch a.on, .view-switch button.on { background: var(--green-dark); color: white; border-color: var(--green-dark); }
.doc-card { min-width: 0; }
.doc-scroll { overflow-x: auto; }
.doc-table { min-width: 980px; }
.doc-table th { font-size: 12px; color: var(--muted); background: #f7faf8; position: sticky; top: 0; }
.doc-table td small, .who small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.doc-table .who { margin-bottom: 6px; }
.doc-table .seat-name { background: #eef3f1; color: var(--ink); }
.doc-table tr.doc-row { cursor: pointer; }
.doc-table tr.now { background: #fff6e8; }
.doc-table tr.now td:first-child { box-shadow: inset 3px 0 0 #b45309; }
.doc-table tr.phase-row td { background: #eef3f1; font-weight: 700; font-size: 13px; }
.doc-table tr.hot td { background: #f3faf6; }
.doc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.doc-filters a, .doc-filters button { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; text-decoration: none; }
.doc-filters a.on, .doc-filters button.on { background: var(--green-dark); color: white; border-color: var(--green-dark); }
.mine-act { color: #8a4b08; font-weight: 700; }
.doc-config { margin-top: 14px; }
.doc-config summary { cursor: pointer; font-weight: 700; }
.doc-config input[type="checkbox"] { width: auto; }
.act-picks { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.act-picks label { display: flex; gap: 4px; align-items: center; margin: 0; color: var(--ink); font-size: 12px; }
.org-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
a.org-row, button.org-row { display: grid; grid-template-columns: 110px 1fr auto minmax(120px, 220px); gap: 10px; align-items: center; width: 100%; text-align: left; text-decoration: none; background: white; color: var(--ink); border: 1px solid var(--line); }
a.org-row:hover, button.org-row:hover { border-color: var(--green); }
.org-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(200px, 280px); gap: 16px; }
@media (max-width: 800px) { .org-grid, a.org-row, button.org-row { grid-template-columns: 1fr; } }
.org-media { display: block; max-width: 180px; max-height: 120px; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: white; }
#add-person select { width: auto; min-width: 280px; flex: 1; }
input[type="file"] { width: 100%; }
button.danger { background: var(--danger); }
.soft { display: inline-block; margin-left: 6px; background: #eef1f3; color: var(--muted); border-radius: 99px; padding: 0 6px; font-size: 11px; }
.step-label { display: block; font-size: 13px; }
.dep { display: block; font-size: 12px; margin: 2px 0; }
.dep.met { color: var(--green-dark); }
.dep.unmet { color: var(--warn); }
.dep em { font-style: normal; color: var(--muted); }
.chart { background: linear-gradient(#f3f8fb, #f7faf8 90px); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 28px; }
.chart-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.chart-top h1 { font-size: 20px; }
.chart-top .subhead { margin: 0; color: var(--muted); }
.sol-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.principles { width: min(440px, 40%); background: #fff8e6; border: 1px solid #ead9a4; border-radius: 10px; padding: 8px 12px; font-size: 12px; }
.principles h2 { font-size: 13px; }
.principles ol { margin: 4px 0 0; padding-left: 18px; }
.chart-scroll { overflow-x: auto; padding-bottom: 8px; }
.chart-grid { min-width: 1360px; display: grid; grid-template-columns: 176px repeat(6, minmax(176px, 1fr)); gap: 6px; align-items: start; }
.work { display: grid; grid-template-columns: minmax(280px, 380px) minmax(320px, 1fr); gap: 12px; margin-bottom: 12px; align-items: start; }
@media (max-width: 900px) { .work { grid-template-columns: 1fr; } }
.you-card.yours { border-color: #b45309; box-shadow: inset 0 0 0 2px #b45309; }
.yours-line { font-weight: 700; color: #8a4b08; }
.assign { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.assign h3 { font-size: 15px; }
.assign-row { margin: 8px 0 12px; }
.assign select { width: auto; min-width: 160px; }
.seat-chip { display: inline-flex; gap: 4px; align-items: center; margin: 2px 6px 2px 0; background: #eef3f1; border-radius: 99px; padding: 2px 4px 2px 8px; font-size: 12px; }
.seat-chip button { padding: 2px 8px; }
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.todo button { display: block; width: 100%; text-align: left; background: transparent; color: var(--ink); border: 0; padding: 0; }
.todo button small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.todo li.now button strong { color: #8a4b08; }
.todo li.done { opacity: .72; }
.mark-done { color: var(--green-dark); font-weight: 700; }
.mark-now { color: #b45309; font-weight: 700; }
.mark-later { color: #9aa7b2; }
.seat-name { display: block; margin-top: 3px; background: rgba(255,255,255,.2); border-radius: 4px; padding: 1px 4px; }
.seat-name.mine { background: #fff3d6; color: #6a3b04; font-weight: 700; }
.seat-warn { display: inline-block; margin-top: 4px; background: #fff3d6; color: #8a4b08; border-radius: 4px; padding: 1px 5px; font-weight: 700; font-size: 11px; }
em.here { display: inline-block; margin-bottom: 4px; background: #b45309; color: white; font-style: normal; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 6px; }
.cell.cell-live { box-shadow: inset 0 0 0 3px #b45309; }
button.node.live-now { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,.4); background: #fff7ed; }
button.node.diamond.live-now { background: #f7b4c0; }
.band { margin-top: 8px; }
.phase-head { position: relative; border-radius: 10px; padding: 8px 10px; }
.phase-head h2 { margin: 0; font-size: 13px; }
.phase-head p { margin: 2px 0 0; font-size: 11px; }
.phase-head.now, .cell.now, button.status-card.now { box-shadow: inset 0 0 0 2px #084936; }
.head-1 { background: #8fd4a8; }
.head-2 { background: #7dcec4; }
.head-3 { background: #8eb4e3; }
.head-4 { background: #c3a6de; }
.head-5 { background: #f0c08a; }
.head-6 { background: #f0a9c0; }
.role-label { position: sticky; left: 0; z-index: 3; border-radius: 8px; padding: 8px; font-size: 11px; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; min-height: 72px; }
.role-label b { font-size: 11px; letter-spacing: .02em; }
.role-label.plain { background: #eef3f1; color: var(--ink); }
.lane-partner { background: #1b7a45; color: white; }
.lane-pd { background: #2c6eab; color: white; }
.lane-pm { background: #6d4b96; color: white; }
.lane-mel { background: #d4782f; color: white; }
.lane-approver { background: #c45468; color: white; }
.cell { border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 52px; }
button.node { width: 100%; text-align: left; background: white; color: var(--ink); border: 1px solid rgba(20,40,30,.12); border-radius: 8px; padding: 8px; font-size: 12px; line-height: 1.35; }
button.node small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
button.node.dash { border-style: dashed; background: #fbfaff; }
button.node.wide { min-height: 64px; background: #f4fff8; }
button.node.stop { background: #fdecec; }
button.node.go { background: #e9f8ef; }
button.node.diamond { width: 132px; height: 132px; margin: 2px auto; padding: 0; border: 0; border-radius: 4px; background: #f7d0d8; color: #6e2432; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: flex; align-items: center; justify-content: center; }
button.node.diamond span { width: 88px; text-align: center; font-weight: 700; font-size: 11px; }
button.node.diamond small { display: none; }
button.node:hover, button.node:focus-visible, button.node.hot { border-color: #0c6b4d; box-shadow: 0 0 0 2px rgba(12,107,77,.28); position: relative; z-index: 1; }
button.node.on { box-shadow: inset 0 0 0 2px #0c6b4d; }
button.node.diamond:hover, button.node.diamond.hot, button.node.diamond.on { filter: brightness(.96); box-shadow: none; }
.gate { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.branches { display: flex; flex-direction: column; gap: 4px; }
button.chip, button.status-card, button.pcm-card { display: block; width: 100%; text-align: left; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.35; }
button.chip { margin: 0; }
button.chip:hover, button.status-card:hover, button.pcm-card:hover, button.chip.hot, button.status-card.hot, button.pcm-card.hot { border-color: var(--green); }
button.status-card strong, button.pcm-card strong { display: block; font-size: 12px; }
button.status-card.done { background: #f3faf6; }
#chart-tip { position: fixed; z-index: 40; width: 340px; max-height: min(72vh, 540px); overflow: auto; background: white; color: var(--ink); border: 1px solid #b7d7c8; border-radius: 12px; box-shadow: 0 12px 40px rgba(28,36,48,.18); padding: 12px 14px; }
#chart-tip[hidden] { display: none; }
#chart-tip h3 { font-size: 15px; margin: 2px 0 6px; }
#chart-tip h4 { font-size: 12px; margin: 10px 0 4px; color: var(--green-dark); }
#chart-tip p, #chart-tip li { font-size: 13px; }
#chart-tip ul { margin: 0; padding-left: 16px; }
#chart-tip .kicker { font-size: 11px; font-weight: 700; color: var(--green-dark); margin: 0; }
.st { display: inline-block; padding: 1px 6px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.st-empty { background: #eef1f3; color: #5c6b7a; }
.st-work { background: #fff3d6; color: #8a4b08; }
.st-done { background: #e5f3ec; color: #084936; }
.st-stop { background: #fde8e8; color: #8d2b2b; }
.st-wait { background: #e8f0fb; color: #214e8a; }