:root {
  --ink: #18332f;
  --ink-soft: #5f706d;
  --forest: #173f38;
  --forest-2: #24594f;
  --mint: #dfeee8;
  --mint-light: #f2f8f5;
  --cream: #f6f2e9;
  --amber: #d78b3a;
  --amber-light: #fff1dc;
  --red: #b64d47;
  --red-light: #fbe9e7;
  --white: #ffffff;
  --line: #dfe6e2;
  --shadow: 0 18px 55px rgba(27, 54, 49, 0.11);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: var(--ink); background: #f5f7f5; }
body { margin: 0; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.eyebrow { margin: 0 0 8px; color: var(--amber); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.login-page {
  min-height: 100vh;
  padding: 36px clamp(24px, 5vw, 80px);
  background:
    radial-gradient(circle at 12% 15%, rgba(222, 238, 232, .9), transparent 30%),
    linear-gradient(135deg, #f7f4ec 0%, #f5f8f5 48%, #e8f1ed 100%);
}
.login-brand, .sidebar-brand { display: flex; align-items: center; gap: 12px; }
.login-brand strong, .sidebar-brand strong { display: block; font-size: 18px; letter-spacing: .06em; }
.login-brand span, .sidebar-brand span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 12px; }
.brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
  background: #f7f3e9;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark.small { width: 42px; height: 42px; border-radius: 10px; }
.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .6fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
  min-height: calc(100vh - 120px);
  max-width: 1280px;
  margin: 0 auto;
}
.login-copy h1 { margin: 0; max-width: 680px; font-family: Georgia, "Songti SC", serif; font-size: clamp(46px, 6vw, 78px); line-height: 1.12; letter-spacing: -.035em; }
.login-copy > p:not(.eyebrow) { max-width: 620px; margin: 28px 0; color: var(--ink-soft); font-size: 17px; line-height: 1.9; }
.feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 45px; }
.feature-list div { border-top: 1px solid rgba(24, 51, 47, .18); padding-top: 15px; }
.feature-list b { display: block; margin-bottom: 9px; color: var(--amber); font-family: Georgia, serif; font-size: 22px; }
.feature-list span { font-size: 13px; font-weight: 700; }
.login-card {
  display: grid;
  gap: 18px;
  padding: 38px;
  border: 1px solid #dde4df;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(27, 54, 49, .12);
}
.login-card h2 { margin: 0; font-size: 28px; }
.login-card p { margin: 8px 0 0; font-size: 13px; }
label { display: grid; gap: 8px; }
label > span { color: #445d58; font-size: 13px; font-weight: 700; }
input, textarea, select {
  width: 100%;
  border: 1px solid #d5dfdb;
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input, select { height: 43px; padding: 0 13px; }
textarea { min-height: 105px; padding: 12px 13px; line-height: 1.65; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #5f9488; box-shadow: 0 0 0 3px rgba(76, 132, 119, .12); }
input:disabled, textarea:disabled, select:disabled { color: #6c7976; background: #f2f4f3; cursor: not-allowed; }
.button {
  min-height: 40px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 750;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--forest); box-shadow: 0 8px 18px rgba(23, 63, 56, .17); }
.button.primary:hover { background: var(--forest-2); }
.button.secondary { border-color: var(--line); color: var(--ink); background: #fff; }
.button.danger { color: var(--red); background: var(--red-light); }
.button.wide { width: 100%; margin-top: 4px; }
.form-error { min-height: 18px; color: var(--red); }

.app-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 24px 18px;
  color: #f7fbf9;
  background: var(--forest);
}
.sidebar-brand { padding: 0 8px 22px; }
.sidebar-brand .brand-mark { background: #f7f3e9; box-shadow: none; }
.sidebar-brand strong { color: #fff; }
.sidebar-brand span { color: #9eb7b1; }
.main-nav { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  color: #c9d8d4;
  background: transparent;
  text-align: left;
  font-weight: 700;
}
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.1); }
.nav-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; font-size: 12px; }
.record-list-wrap { min-height: 0; flex: 1; padding-top: 22px; overflow: hidden; }
.section-caption { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 9px; color: #9eb7b1; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.icon-button { width: 27px; height: 27px; border: 0; border-radius: 8px; color: #fff; background: rgba(255,255,255,.12); font-size: 20px; line-height: 1; }
.record-list { display: grid; gap: 5px; max-height: calc(100vh - 350px); overflow: auto; scrollbar-width: thin; }
.record-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 9px; border: 0; border-radius: 11px; color: #d5e1de; background: transparent; text-align: left; }
.record-item:hover, .record-item.active { background: rgba(255,255,255,.1); }
.record-avatar { display: block; width: 38px; height: 38px; overflow: hidden; border: 1px solid #d3ddd6; border-radius: 11px; background: #edf3ee; }
.record-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.record-item strong, .record-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-item strong { color: #fff; font-size: 13px; }
.record-item small { margin-top: 3px; color: #9eb7b1; font-size: 10px; }
.risk-dot { width: 7px; height: 7px; border-radius: 50%; background: #72b69d; }
.risk-dot.medium { background: #e1a453; }
.risk-dot.high { background: #df6f68; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 7px 0; border-top: 1px solid rgba(255,255,255,.1); }
.user-chip { display: flex; min-width: 0; align-items: center; gap: 9px; }
.avatar-button {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d3ddd6;
  border-radius: 12px;
  background: #edf3ee;
}
.avatar-button::after {
  content: "换";
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--forest);
  font-size: 7px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .18s ease, transform .18s ease;
}
.avatar-button:hover::after, .avatar-button:focus-visible::after { opacity: 1; transform: scale(1); }
.avatar-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.user-chip strong, .user-chip span { display: block; }
.user-chip strong { max-width: 110px; overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-chip div span { margin-top: 2px; color: #9eb7b1; font-size: 10px; }
.text-button { padding: 6px; border: 0; color: #9eb7b1; background: transparent; font-size: 11px; }

.workspace { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(20px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 247, .92);
}
.topbar h2 { margin: 2px 0 0; font-size: 20px; }
.breadcrumb { margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.save-state { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; }
.save-state span { width: 7px; height: 7px; border-radius: 50%; background: #6ea88f; }
.save-state.saving span { background: #e4a751; animation: pulse 1s infinite; }
.save-state.error span { background: var(--red); }
@keyframes pulse { 50% { opacity: .35; } }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 21px; }
.content { max-width: 1440px; margin: 0 auto; padding: 28px clamp(20px, 3vw, 42px) 60px; }

.empty-state { display: grid; min-height: 62vh; place-items: center; text-align: center; }
.empty-card { max-width: 480px; padding: 42px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.empty-symbol { display: grid; width: 64px; height: 64px; margin: 0 auto 18px; place-items: center; border-radius: 20px; color: var(--forest); background: var(--mint); font-family: Georgia, serif; font-size: 30px; }
.empty-card h2 { margin: 0 0 10px; }
.empty-card p { margin: 0 0 22px; color: var(--ink-soft); line-height: 1.8; }

.record-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 25px;
  padding: 28px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(120deg, #173f38 0%, #285c51 100%);
  box-shadow: var(--shadow);
}
.record-hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -95px; top: -145px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025); }
.hero-person { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.hero-avatar { display: block; width: 64px; height: 64px; flex: 0 0 auto; overflow: hidden; border-radius: 20px; background: #edf3ee; }
.hero-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-person h1 { margin: 3px 0 6px; font-size: 28px; }
.hero-person p { margin: 0; color: #c5d7d2; font-size: 13px; }
.hero-side { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; }
.code-box { min-width: 160px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.08); }
.code-box span { display: block; color: #b9cec8; font-size: 10px; }
.code-box button { margin: 5px 0 0; padding: 0; border: 0; color: #fff; background: transparent; font-family: Consolas, monospace; font-size: 19px; font-weight: 900; letter-spacing: .08em; }
.progress-ring { --progress: 0; position: relative; display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: conic-gradient(#e7bd78 calc(var(--progress) * 1%), rgba(255,255,255,.14) 0); }
.progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #28594f; }
.progress-ring div { position: relative; z-index: 1; text-align: center; }
.progress-ring strong { display: block; font-size: 17px; }
.progress-ring span { color: #b9cec8; font-size: 9px; }

.record-tabs { display: flex; gap: 8px; margin: 23px 0; overflow-x: auto; }
.tab-button { flex: 0 0 auto; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: #fff; font-size: 12px; font-weight: 800; }
.tab-button.active { border-color: var(--forest); color: #fff; background: var(--forest); }
.tab-button .tab-status { display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #b8c3c0; vertical-align: 1px; }
.tab-button .tab-status.met { background: #7fc2a6; }
.tab-button .tab-status.improve { background: #e3a451; }
.tab-button .tab-status.risk { background: #df6f68; }

.panel { margin-bottom: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 30px rgba(27,54,49,.045); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-head h3 { margin: 0; font-size: 18px; }
.panel-head p { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.section-number { display: inline-grid; width: 29px; height: 29px; margin-right: 10px; place-items: center; border-radius: 9px; color: var(--forest); background: var(--mint); font-family: Georgia, serif; font-size: 13px; vertical-align: -2px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.question-list { display: grid; gap: 16px; }
.question-label { display: flex; gap: 10px; align-items: flex-start; }
.question-label b { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #467164; background: var(--mint-light); font-size: 11px; }
.question-label span { padding-top: 4px; line-height: 1.65; }
.employee-materials { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.material-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.material-section-head strong { display: block; color: var(--forest); font-size: 13px; }
.material-section-head span { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.material-section-head em { flex: 0 0 auto; padding: 5px 9px; border-radius: 99px; color: #7a603d; background: var(--amber-light); font-size: 9px; font-style: normal; font-weight: 800; }
.material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.material-grid.daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.material-card { display: flex; min-width: 0; flex-direction: column; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfa; }
.material-card.complete { border-color: #bcd7c8; background: #f6fbf8; }
.material-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.material-card-head strong { display: block; font-size: 11px; }
.material-card-head span { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.material-card-head i { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; color: #8b6a3d; background: var(--amber-light); font-size: 8px; font-style: normal; font-weight: 800; }
.material-card.complete .material-card-head i { color: #397062; background: var(--mint); }
.material-files { display: flex; min-height: 28px; flex-wrap: wrap; gap: 6px; align-items: center; }
.material-upload { align-self: flex-start; cursor: pointer; }
.material-upload span { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px dashed #aab7ad; border-radius: 8px; color: var(--forest); font-size: 9px; font-weight: 800; }
.material-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.focus-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-left: 3px solid var(--amber); border-radius: 0 11px 11px 0; background: var(--amber-light); color: #6b5437; font-size: 12px; line-height: 1.7; }
.focus-callout strong { flex: 0 0 auto; }
.first-day-sop {
  border-color: #d7e0d8;
  background:
    linear-gradient(180deg, rgba(245, 248, 245, .72), #fff 220px),
    #fff;
}
.sop-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.sop-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #ead7b3;
  border-radius: 12px;
  background: #fff8eb;
  color: #765936;
  font-size: 11px;
  line-height: 1.7;
}
.sop-check-card,
.sop-columns > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}
.sop-check-card strong,
.sop-columns h4 {
  display: block;
  margin: 0 0 10px;
  color: var(--forest);
  font-size: 13px;
}
.sop-check-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sop-check-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.65;
}
.sop-check-list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 3px;
  width: 7px;
  height: 7px;
  border: 1px solid #8fb29a;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(143, 178, 154, .12);
}
.sop-timeline {
  display: grid;
  gap: 0;
  margin: 4px 0 18px;
  padding: 5px 0;
}
.sop-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid #edf0ed;
}
.sop-timeline-item:last-child { border-bottom: 0; }
.sop-timeline-item::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
}
.sop-timeline-item::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: -4px;
  left: 6px;
  width: 1px;
  background: #dfe5df;
}
.sop-timeline-item:last-child::after { display: none; }
.sop-timeline-item time {
  color: #8a663b;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 800;
}
.sop-timeline-item strong,
.sop-timeline-item small {
  display: block;
}
.sop-timeline-item strong {
  color: var(--ink);
  font-size: 13px;
}
.sop-timeline-item small {
  margin-top: 3px;
  color: var(--forest);
  font-size: 10px;
  font-weight: 800;
}
.sop-timeline-item p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.7;
}
.sop-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sop-risk {
  border-color: #f0c7c3;
  background: #fffafa;
}
.sop-risk .sop-check-list li::before {
  border-color: #d58a84;
  box-shadow: 0 0 0 3px rgba(213, 138, 132, .12);
}

.metric-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.metric-table th, .metric-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.metric-table tr:last-child td { border-bottom: 0; }
.metric-table th { color: #5c6f6a; background: #f5f8f6; font-size: 11px; }
.metric-table td { font-size: 12px; }
.metric-table input, .metric-table select { min-width: 110px; height: 37px; font-size: 12px; }
.target-pill { display: inline-block; padding: 5px 9px; border-radius: 99px; color: #397062; background: var(--mint); font-weight: 800; white-space: nowrap; }
.task-grid { display: grid; gap: 10px; }
.panel-actions { display: flex; align-items: center; gap: 10px; }
.button.compact { min-height: 32px; padding: 0 12px; font-size: 10px; }
.task-card { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfa; }
.task-row { display: grid; grid-template-columns: 36px minmax(0, 1.25fr) minmax(0, 1fr) 120px 46px; gap: 10px; align-items: center; }
.task-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #8a663b; background: var(--amber-light); font-family: Georgia, serif; font-weight: 800; }
.task-row input, .task-row select { height: 39px; }
.task-delete { padding: 0; border: 0; color: var(--red); background: transparent; font-size: 10px; cursor: pointer; }
.task-attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0 46px; }
.attachment-list { display: flex; flex: 1; flex-wrap: wrap; gap: 7px; min-width: 0; }
.attachment-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border: 1px solid #d9dfda; border-radius: 8px; background: #fff; font-size: 10px; }
.attachment-chip a { max-width: 220px; overflow: hidden; color: var(--forest); text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip small { color: var(--ink-soft); font-size: 8px; }
.attachment-chip button { padding: 0; border: 0; color: var(--red); background: transparent; cursor: pointer; }
.attachment-empty { color: var(--ink-soft); font-size: 9px; }
.attachment-upload { flex: 0 0 auto; cursor: pointer; }
.attachment-upload span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px dashed #aab7ad; border-radius: 8px; color: var(--forest); font-size: 9px; font-weight: 800; }
.attachment-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.attachment-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 9px; }
.task-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.task-empty strong { font-size: 12px; }
.task-empty p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; }
.comment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.comment-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfb; }
.comment-card.department { border-top: 3px solid var(--amber); }
.comment-card.hr { border-top: 3px solid #4f887a; }
.comment-card label > span { margin-bottom: 2px; }
.signature-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.status-row { display: flex; align-items: center; gap: 12px; }
.status-row label { min-width: 180px; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 20px; }
.stage-roadmap { display: grid; gap: 0; }
.roadmap-item { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.roadmap-item:last-child { border-bottom: 0; }
.roadmap-index { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--forest); background: var(--mint); font-family: Georgia, serif; font-weight: 900; }
.roadmap-item h4 { margin: 0; font-size: 14px; }
.roadmap-item p { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }
.status-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border-radius: 99px; color: #62716e; background: #edf1ef; font-size: 10px; font-weight: 800; }
.status-badge.met, .status-badge.low { color: #31705d; background: #dff1e9; }
.status-badge.improve, .status-badge.medium { color: #885f2e; background: #fff0da; }
.status-badge.risk, .status-badge.high { color: #994641; background: #fbe6e4; }
.stat-stack { display: grid; gap: 12px; }
.stat-card { padding: 18px; border-radius: 14px; background: var(--mint-light); }
.stat-card.amber { background: var(--amber-light); }
.stat-card span { display: block; color: var(--ink-soft); font-size: 11px; }
.stat-card strong { display: block; margin-top: 7px; font-size: 23px; }
.audit-list { display: grid; gap: 0; }
.audit-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.audit-item:last-child { border: 0; }
.audit-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #81ad9f; }
.audit-item p { margin: 0; line-height: 1.5; }
.audit-item time { color: var(--ink-soft); white-space: nowrap; }

.final-grid { display: grid; gap: 16px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice-card { position: relative; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card span { display: flex; min-height: 54px; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: #fff; text-align: center; font-size: 12px; font-weight: 750; }
.choice-card input:checked + span { border-color: #5a8d81; color: var(--forest); background: var(--mint); box-shadow: 0 0 0 2px rgba(76,132,119,.08); }
.choice-card input:disabled + span { opacity: .65; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.danger-zone p { margin: 0; color: var(--ink-soft); font-size: 11px; }

.handbook-hero { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: 34px; border-radius: 22px; color: #fff; background: linear-gradient(125deg, #173f38, #396b5f); box-shadow: var(--shadow); }
.handbook-hero h1 { max-width: 750px; margin: 5px 0 9px; font-family: Georgia, "Songti SC", serif; font-size: clamp(30px, 4vw, 50px); line-height: 1.2; }
.handbook-hero p { max-width: 700px; margin: 0; color: #c5d7d2; line-height: 1.8; }
.version-stamp { padding: 12px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(255,255,255,.08); text-align: center; }
.version-stamp strong, .version-stamp span { display: block; }
.version-stamp strong { font-size: 18px; }
.version-stamp span { margin-top: 4px; color: #c5d7d2; font-size: 10px; }
.handbook-nav { display: flex; gap: 8px; margin: 22px 0; overflow-x: auto; }
.handbook-stage { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; }
.stage-summary { padding: 22px; border-radius: 16px; color: #fff; background: var(--forest); }
.stage-summary b { color: #e8bd79; font-family: Georgia, serif; font-size: 37px; }
.stage-summary h3 { margin: 14px 0 6px; }
.stage-summary p { margin: 0; color: #bed1cc; font-size: 12px; line-height: 1.7; }
.signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.signal-card { padding: 15px; border-radius: 12px; }
.signal-card.good { color: #315f54; background: #e5f2ec; }
.signal-card.bad { color: #824844; background: #fae9e7; }
.signal-card strong { display: block; margin-bottom: 7px; font-size: 12px; }
.signal-card p { margin: 0; font-size: 11px; line-height: 1.65; }
.response-list { display: grid; gap: 11px; }
.response-item { display: grid; grid-template-columns: .85fr 1.2fr 1.2fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.response-item > div { padding: 13px; border-right: 1px solid var(--line); font-size: 11px; line-height: 1.65; }
.response-item > div:last-child { border-right: 0; }
.response-item strong { color: var(--forest); }

.dialog { width: min(680px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 21px; color: var(--ink); box-shadow: 0 30px 90px rgba(17,43,38,.28); }
.dialog::backdrop { background: rgba(17,43,38,.62); }
.dialog form { padding: 26px; }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dialog-head h2 { margin: 0; }
.dialog-close { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--ink-soft); background: #eef2f0; font-size: 22px; }
.dialog-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; color: #73593a; background: var(--amber-light); font-size: 11px; line-height: 1.6; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.avatar-dialog { width: min(610px, calc(100% - 30px)); }
.avatar-editor { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.avatar-preview {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 1px solid #d8e0da;
  border-radius: 34px;
  background: #edf3ee;
  box-shadow: 0 14px 30px rgba(21, 50, 35, .1);
}
.avatar-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-copy strong { display: block; font-family: Georgia, "Songti SC", serif; font-size: 17px; }
.avatar-editor-copy p { margin: 8px 0 17px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.avatar-file-button { position: relative; display: inline-flex; width: max-content; align-items: center; cursor: pointer; }
.avatar-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.avatar-editor-copy small { display: block; margin-top: 9px; color: var(--ink-soft); font-size: 9px; }
.avatar-actions { align-items: center; }
.dialog-action-spacer { flex: 1; }
.danger-dialog { width: min(520px, calc(100% - 30px)); }
.delete-record-copy { margin: 0 0 20px; color: var(--ink-soft); font-size: 12px; line-height: 1.75; }
.delete-record-copy strong { color: var(--red); }
.danger-note { color: #8a3d37; background: #fbe9e7; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 17px; border-radius: 11px; color: #fff; background: var(--forest); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }

@media (max-width: 1050px) {
  .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid { grid-template-columns: 1fr; }
  .record-hero { grid-template-columns: 1fr; }
  .hero-side { justify-content: flex-start; }
  .handbook-stage { grid-template-columns: 1fr; }
  .stage-summary { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; }
  .stage-summary h3 { margin: 0; }
  .stage-summary p { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .login-grid { grid-template-columns: 1fr; padding: 50px 0; }
  .login-copy { text-align: center; }
  .login-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .feature-list { text-align: left; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: -290px; width: 270px; transition: left .25s; box-shadow: 20px 0 60px rgba(0,0,0,.22); }
  .sidebar.open { left: 0; }
  .mobile-menu { display: block; }
  .topbar { justify-content: flex-start; }
  .topbar-actions { margin-left: auto; }
  .save-state { display: none; }
  .comment-grid, .signature-row { grid-template-columns: 1fr 1fr; }
  .material-grid, .material-grid.daily-grid { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: 36px 1fr auto; }
  .task-row > :nth-child(3), .task-row > :nth-child(4) { grid-column: 2 / 4; }
  .task-row > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .task-attachment-row { align-items: flex-start; flex-direction: column; margin-left: 0; }
  .response-item { grid-template-columns: 1fr; }
  .response-item > div { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 580px) {
  .login-page { padding: 22px 16px; }
  .login-grid { gap: 25px; }
  .login-copy h1 { font-size: 42px; }
  .feature-list { grid-template-columns: 1fr; margin-top: 25px; }
  .login-card { padding: 25px 20px; }
  .topbar { min-height: 68px; padding: 11px 15px; }
  .topbar h2 { font-size: 16px; }
  .topbar-actions .button { padding: 0 11px; font-size: 11px; }
  .content { padding: 18px 13px 45px; }
  .record-hero { padding: 20px; }
  .hero-side { flex-wrap: wrap; }
  .panel { padding: 18px 15px; }
  .form-grid.two, .form-grid.four, .comment-grid, .signature-row, .choice-grid, .signal-grid, .sop-summary-grid, .sop-columns { grid-template-columns: 1fr; }
  .sop-timeline-item { grid-template-columns: 1fr; gap: 5px; }
  .material-section-head { flex-direction: column; }
  .metric-table { display: block; overflow-x: auto; }
  .status-row, .danger-zone { align-items: stretch; flex-direction: column; }
  .handbook-hero { grid-template-columns: 1fr; padding: 25px 20px; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .record-tabs, .button, .icon-button, .danger-zone, .toast { display: none !important; }
  .app-shell { display: block; }
  .content { max-width: none; padding: 0; }
  .record-hero, .handbook-hero { color: #111; background: #fff; box-shadow: none; border: 1px solid #bbb; }
  .record-hero p, .handbook-hero p { color: #444; }
  .panel { break-inside: avoid; box-shadow: none; border-color: #bbb; }
  input, textarea, select { border-color: #bbb; color: #111; background: #fff !important; }
}

/* Stitch redesign: Quiet Growth */
:root {
  --ink: #1a1c1b;
  --ink-soft: #5c635e;
  --forest: #102d1b;
  --forest-2: #244735;
  --mint: #d9e6da;
  --mint-light: #f1f5f1;
  --cream: #f6f2e9;
  --line: #d9ddd8;
  --paper: #f5f5f3;
  --shadow: 0 4px 24px rgba(27, 48, 34, .055);
  --radius: 18px;
}

html { background: var(--paper); }
body { background: var(--paper); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(58, 112, 82, .24);
  outline-offset: 2px;
}
.button { min-height: 44px; border-radius: 9px; }
.button.light { color: var(--forest); background: #d8efdc; }
.button.light:hover { background: #c9e6cf; }
.text-link { padding: 4px 0; border: 0; color: var(--forest); background: transparent; font-size: 12px; font-weight: 800; }

.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  padding: 22px 14px 18px;
  color: var(--ink);
  background: #fbfbf9;
  border-right: 1px solid var(--line);
}
.sidebar-brand { padding: 0 8px 24px; }
.sidebar-brand .brand-mark { background: #f7f3e9; border: 1px solid #e1ddd1; border-radius: 9px; }
.sidebar-brand strong { color: var(--ink); font-family: Georgia, "Songti SC", serif; }
.sidebar-brand span { color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
.main-nav { gap: 4px; padding: 12px 0 18px; border-top: 0; border-bottom-color: var(--line); }
.nav-item {
  position: relative;
  min-height: 52px;
  padding: 9px 12px 9px 14px;
  border-radius: 0 11px 11px 0;
  color: #454d48;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-item:hover { color: var(--forest); background: #f1f4f0; }
.nav-item.active {
  color: var(--forest);
  background: #edf2ed;
  box-shadow: inset 3px 0 var(--forest);
}
.nav-item.active::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(215, 139, 58, .1);
}
.nav-icon {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d5dcd6;
  border-radius: 10px;
  color: #315f4d;
  background: linear-gradient(145deg, #fff 0%, #f6f8f5 100%);
  box-shadow: 0 3px 9px rgba(21, 50, 35, .055);
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-icon svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover .nav-icon {
  border-color: #b9c8bc;
  transform: translateY(-1px);
  box-shadow: 0 5px 13px rgba(21, 50, 35, .08);
}
.nav-item.active .nav-icon {
  border-color: var(--forest);
  color: #fff;
  background: var(--forest);
  box-shadow: 0 6px 14px rgba(16, 45, 27, .18);
}
.section-caption { color: #788079; }
.icon-button { color: var(--forest); background: #e7ede7; }
.record-list { max-height: calc(100vh - 390px); }
.record-item { color: var(--ink); }
.record-item:hover, .record-item.active { background: #edf2ed; }
.record-item strong { color: var(--ink); }
.record-item small { color: var(--ink-soft); }
.record-avatar { background: #edf3ee; }
.sidebar-footer { border-top-color: var(--line); }
.user-chip > span { background: #edf3ee; }
.user-chip strong { color: var(--ink); }
.user-chip div span, .text-button { color: var(--ink-soft); }
.user-chip select {
  display: block;
  max-width: 145px;
  margin-top: 3px;
  padding: 2px 20px 2px 0;
  border: 0;
  color: var(--ink-soft);
  background: transparent;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.user-chip select:focus { outline: 1px solid var(--line); outline-offset: 2px; }
.user-chip select.single-role { pointer-events: none; appearance: none; }
.user-chip small {
  display: block;
  max-width: 145px;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar {
  min-height: 70px;
  padding: 12px clamp(20px, 3vw, 40px);
  background: rgba(249,249,247,.97);
  backdrop-filter: none;
}
.topbar h2 { font-family: Georgia, "Songti SC", serif; font-size: 19px; }
.breadcrumb { letter-spacing: .04em; }
.content { max-width: 1400px; padding-top: 30px; }

.record-hero {
  overflow: visible;
  grid-template-columns: minmax(0, 1fr) minmax(430px, auto);
  align-items: center;
  padding: 8px 0 28px;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.record-hero::after { display: none; }
.hero-avatar { width: 76px; height: 76px; border: 3px solid #fff; border-radius: 18px; background: #edf3ee; box-shadow: 0 12px 30px rgba(27, 54, 49, .12); }
.hero-person h1 { margin: 0; color: #0d1f14; font-family: Georgia, "Songti SC", serif; font-size: 30px; }
.hero-person p { margin-top: 7px; color: var(--ink-soft); }
.hero-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; color: #7a817c; font-size: 11px; }
.status-badge.stage { color: #8a5c14; background: #fff4d8; }
.hero-side {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.code-box { min-width: 145px; padding: 8px 13px; border-color: var(--line); background: #f2f3f1; }
.code-box span { color: var(--ink-soft); }
.code-box button { color: var(--forest); font-size: 15px; }
.hero-progress-card { min-width: 210px; }
.hero-progress-copy { display: flex; align-items: end; justify-content: space-between; }
.hero-progress-copy span, .hero-risk > span { color: var(--ink-soft); font-size: 11px; }
.hero-progress-copy strong { color: var(--forest); font-family: Georgia, serif; font-size: 24px; }
.hero-progress-track, .metric-progress-track { height: 7px; margin: 8px 0; overflow: hidden; border-radius: 99px; background: #e8eae7; }
.hero-progress-track i, .metric-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--forest); }
.hero-progress-card small { color: #808681; font-size: 10px; }
.hero-risk { display: grid; align-content: center; min-width: 125px; padding-left: 20px; border-left: 1px solid var(--line); }
.hero-risk strong { margin-top: 7px; font-size: 11px; }
.hero-risk strong.low { color: #39715b; }
.hero-risk strong.medium { color: #a9650b; }
.hero-risk strong.high { color: var(--red); }
.relationship-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.relationship-summary > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 165px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8f5;
}
.relationship-summary b {
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--forest);
  background: #e4ece4;
  font-size: 9px;
}
.relationship-summary span strong,
.relationship-summary span small { display: block; }
.relationship-summary span strong { font-size: 11px; }
.relationship-summary span small { margin-top: 2px; color: var(--ink-soft); font-size: 9px; }
.relationship-summary > i { color: var(--ink-soft); font-style: normal; font-size: 9px; }

.journey-panel {
  position: relative;
  margin-bottom: 28px;
  padding: 25px 28px 21px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.journey-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.journey-title { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--ink); background: transparent; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 700; }
.journey-title.active { color: var(--forest); }
.journey-legend { display: flex; gap: 16px; color: #838984; font-size: 10px; }
.journey-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #e3e5e2; }
.journey-legend .done::before { background: var(--forest); }
.journey-legend .doing::before { border: 2px solid var(--forest); background: #fff; }
.journey-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 25px; }
.journey-track::before { content: ""; position: absolute; top: 17px; left: 9%; right: 9%; height: 2px; background: #e5e7e4; }
.journey-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 0 8px; border: 0; color: #9a9f9b; background: transparent; text-align: center; }
.journey-step i { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #e2e5e1; border-radius: 50%; background: #f5f6f4; font-style: normal; font-size: 10px; }
.journey-step strong { margin-top: 7px; font-size: 13px; }
.journey-step span, .journey-step small { font-size: 9px; }
.journey-step.done, .journey-step.doing, .journey-step.risk { color: var(--forest); }
.journey-step.done i { color: #fff; border-color: var(--forest); background: var(--forest); }
.journey-step.doing i { border: 7px solid #dbe9dd; outline: 2px solid #abc2ae; background: var(--forest); color: transparent; }
.journey-step.risk i { color: var(--red); border-color: #e7bbb7; background: var(--red-light); }
.journey-step.active strong { text-decoration: underline; text-underline-offset: 4px; }
.journey-final { position: absolute; right: 26px; bottom: 12px; padding: 0; border: 0; color: #7d847f; background: transparent; font-size: 10px; }
.journey-final.active { color: var(--forest); font-weight: 800; }

.next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin-bottom: 28px;
  padding: 18px 20px;
  border-radius: 14px;
  color: #fff;
  background: var(--forest);
  box-shadow: 0 10px 24px rgba(16,45,27,.14);
}
.next-action-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: rgba(255,255,255,.11); font-size: 20px; }
.next-action span { display: block; color: #b8caba; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.next-action strong { display: block; margin-top: 3px; font-size: 16px; }
.next-action p { margin: 4px 0 0; color: #c4d2c6; font-size: 10px; }

.overview-dashboard { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(275px, .72fr); gap: 22px; align-items: start; }
.overview-main, .overview-rail { display: grid; gap: 20px; }
.overview-dashboard .panel { margin: 0; box-shadow: var(--shadow); }
.panel { border-color: var(--line); }
.panel-head h3, .rail-title h3 { font-family: Georgia, "Songti SC", serif; }
.metric-progress-list { display: grid; gap: 20px; }
.metric-progress > div:first-child { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; }
.metric-progress > div:first-child span { color: var(--forest); font-weight: 800; }
.metric-progress-track i.attention { background: #e79518; }
.metric-progress small { color: #858b86; font-size: 10px; }
.todo-list { display: grid; gap: 12px; }
.todo-item { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; width: 100%; min-height: 66px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; }
.todo-item:hover { border-color: #a9b5ac; box-shadow: var(--shadow); }
.todo-item > i { width: 19px; height: 19px; border: 1px solid #9ca49e; border-radius: 5px; }
.todo-item > i.done { border-color: var(--forest); background: var(--forest); box-shadow: inset 0 0 0 4px #fff; }
.todo-item span strong, .todo-item span small { display: block; }
.todo-item span strong { font-size: 12px; }
.todo-item span small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.todo-item em, .role-status-list em { padding: 5px 8px; border-radius: 6px; color: #646b66; background: #eff1ee; font-style: normal; font-size: 9px; }
.todo-item em.delayed, .role-status-list em.pending { color: #a9650b; background: #fff3dd; }
.todo-item em.done, .role-status-list em.done { color: #326a53; background: #e1f0e4; }
.activity-timeline { display: grid; gap: 0; }
.activity-item { position: relative; display: grid; grid-template-columns: 17px 100px 1fr; padding: 0 0 22px; }
.activity-item::before { content: ""; position: absolute; top: 10px; bottom: 0; left: 5px; width: 1px; background: #dfe3df; }
.activity-item:last-child::before { display: none; }
.activity-item > i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 5px #fff; }
.activity-item time { color: var(--ink-soft); font-size: 10px; }
.activity-item strong { font-size: 12px; }
.activity-item p { grid-column: 3; margin: 4px 0 0; color: var(--ink-soft); font-size: 10px; }
.rail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rail-title > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--forest); background: #edf2ed; font-size: 11px; font-weight: 900; }
.rail-title h3 { margin: 0; font-size: 16px; }
.care-card { border-left: 3px solid #d49a37; }
.care-card.high { border-left-color: var(--red); }
.care-card p { padding: 13px; border: 1px solid #f0dfb7; border-radius: 10px; color: #76552c; background: #fffaf0; font-size: 11px; line-height: 1.75; }
.role-status-list { display: grid; gap: 16px; }
.role-status-list > div { display: grid; grid-template-columns: 31px 1fr auto; gap: 10px; align-items: center; }
.role-status-list i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--forest); font-style: normal; font-size: 9px; font-weight: 900; }
.role-status-list span strong, .role-status-list span small { display: block; }
.role-status-list span strong { font-size: 11px; }
.role-status-list span small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.compact-basic dl { display: grid; gap: 12px; margin: 0 0 15px; }
.compact-basic dl div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid #eceeeb; font-size: 10px; }
.compact-basic dt { color: var(--ink-soft); }
.compact-basic dd { margin: 0; color: var(--ink); text-align: right; }
.milestone-card > div:not(.rail-title) { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin-top: 13px; }
.milestone-card > div > i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--forest); background: #f0f2ef; font-style: normal; font-size: 9px; font-weight: 900; }
.milestone-card strong, .milestone-card small { display: block; }
.milestone-card strong { font-size: 10px; }
.milestone-card small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.basic-editor { margin-top: 22px; padding: 0; overflow: hidden; }
.basic-editor summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 15px 22px; cursor: pointer; list-style: none; }
.basic-editor summary::-webkit-details-marker { display: none; }
.basic-editor summary span:first-child strong, .basic-editor summary span:first-child small { display: block; }
.basic-editor summary span:first-child small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.basic-editor summary > span:last-child { color: var(--forest); font-size: 11px; font-weight: 800; }
.basic-editor-body { display: grid; gap: 18px; padding: 22px; border-top: 1px solid var(--line); }
.basic-editor-body > .button { justify-self: end; }

@media (max-width: 1120px) {
  .record-hero { grid-template-columns: 1fr; }
  .hero-side { justify-self: stretch; }
  .overview-dashboard { grid-template-columns: 1fr; }
  .overview-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .journey-track { min-width: 740px; }
  .journey-panel { overflow-x: auto; }
  .journey-head { position: sticky; left: 0; z-index: 2; min-width: 340px; padding-bottom: 4px; background: #fff; }
  .journey-final { position: sticky; left: 0; right: auto; bottom: auto; display: block; width: max-content; margin-top: 14px; }
  .hero-side { grid-template-columns: 1fr; }
  .hero-risk { padding: 0; border-left: 0; }
  .overview-rail { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .avatar-editor { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .avatar-file-button { margin: 0 auto; }
  .avatar-actions { flex-wrap: wrap; }
  .avatar-actions .dialog-action-spacer { display: none; }
  .avatar-actions .button { flex: 1 1 45%; }
  .record-hero { padding-top: 0; }
  .hero-person { align-items: flex-start; }
  .hero-avatar { width: 58px; height: 58px; border-radius: 14px; }
  .hero-person h1 { font-size: 23px; }
  .hero-side { padding: 15px; }
  .code-box { min-width: 0; }
  .journey-panel { margin-left: -2px; margin-right: -2px; padding: 20px 16px; }
  .journey-head { min-width: 330px; }
  .journey-title { flex: 0 0 auto; white-space: nowrap; font-size: 16px; }
  .journey-legend { gap: 8px; }
  .next-action { grid-template-columns: auto 1fr; }
  .next-action .button { grid-column: 1 / -1; width: 100%; }
  .activity-item { grid-template-columns: 17px 78px 1fr; }
  .todo-item { grid-template-columns: auto 1fr; }
  .todo-item em { grid-column: 2; justify-self: start; }
  #print-button { display: none; }
  #top-add-record { white-space: nowrap; }
}

@media print {
  .journey-final, .next-action .button, .basic-editor summary > span:last-child { display: none !important; }
  .journey-panel, .next-action, .overview-dashboard .panel { box-shadow: none; }
  .overview-dashboard { grid-template-columns: 1.6fr .8fr; }
}