:root {
  --bg: #0b0d10;
  --surface: #15181d;
  --surface-soft: #1b1f26;
  --surface-muted: #23262c;
  --ink: #ffffff;
  --muted: #9aa3af;
  --muted-strong: #d1d5db;
  --line: #2b3038;
  --line-strong: #3a3f47;
  --teal: #b1fa63;
  --teal-soft: #182215;
  --accent: #fe7733;
  --accent-soft: #2a1a12;
  --primary-rgb: 177, 250, 99;
  --primary-top: #b1fa63;
  --primary-fg: #101216;
  --primary-shadow: rgba(177, 250, 99, 0.18);
  --gold: #b1fa63;
  --gold-deep: #86c94b;
  --gold-light: #dbffa8;
  --gold-soft: #1f2b17;
  --burgundy: #fe7733;
  --burgundy-deep: #c95422;
  --red: #ff6b5f;
  --red-soft: #301916;
  --amber: #fe7733;
  --amber-soft: #2c1a10;
  --green: #b1fa63;
  --green-soft: #1f2b17;
  --blue: #d1d5db;
  --blue-soft: #20242b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 18px 42px rgba(0, 0, 0, 0.26);
  --shadow-strong: 0 26px 72px rgba(0, 0, 0, 0.48);
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* System-wide Google baseline: the login surface follows the same visual language as every module. */
body[data-theme="google"] .login-screen {
  min-height: 100dvh;
  padding: 32px 20px;
  background: #f8fafd;
  color: #202124;
  font-family: "Google Sans", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body[data-theme="google"] .login-card {
  width: min(460px, 100%);
  padding: 40px 42px 36px;
  border: 1px solid #dadce0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 8px 24px rgba(60, 64, 67, .08);
}

body[data-theme="google"] .login-brand {
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e8eaed;
}

body[data-theme="google"] .login-brand .brand-mark {
  width: 48px;
  height: 48px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

body[data-theme="google"] .login-brand .brand-mark img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

body[data-theme="google"] .login-brand .brand-title {
  color: #202124;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
}

body[data-theme="google"] .login-brand .brand-subtitle {
  margin-top: 3px;
  color: #5f6368;
  font-size: 13px;
}

body[data-theme="google"] .login-heading {
  margin: 28px 0 22px;
}

body[data-theme="google"] .login-heading .eyebrow {
  color: #1a73e8;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
}

body[data-theme="google"] .login-heading h1 {
  margin-top: 7px;
  color: #202124;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}

body[data-theme="google"] .auth-helper {
  margin-top: 10px;
  color: #5f6368;
  font-size: 15px;
  line-height: 1.65;
}

body[data-theme="google"] .feishu-login-button {
  min-height: 50px;
  gap: 11px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #3c4043;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

body[data-theme="google"] .feishu-login-button:hover:not(:disabled) {
  border-color: #c7cacf;
  background: #f8fafd;
  color: #202124;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
  transform: none;
}

body[data-theme="google"] .feishu-login-button:focus-visible {
  outline: 3px solid rgba(26, 115, 232, .2);
  outline-offset: 2px;
}

body[data-theme="google"] .feishu-login-status {
  margin: 11px 0 20px;
  color: #5f6368;
  font-size: 13px;
}

body[data-theme="google"] .legacy-login {
  margin-top: 2px;
  border-top-color: #e8eaed;
}

body[data-theme="google"] .legacy-login summary {
  padding: 18px 4px 3px;
  color: #5f6368;
  font-size: 14px;
  font-weight: 500;
}

body[data-theme="google"] .legacy-login summary:hover {
  color: #1a73e8;
}

body[data-theme="google"] .legacy-login-fields {
  padding-top: 20px;
}

body[data-theme="google"] .login-field {
  gap: 8px;
  margin-bottom: 16px;
}

body[data-theme="google"] .login-field span,
body[data-theme="google"] .login-check {
  color: #3c4043;
  font-size: 14px;
}

body[data-theme="google"] .login-field .input {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  color: #202124;
  font-size: 15px;
}

body[data-theme="google"] .login-field .input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .14);
}

body[data-theme="google"] .auth-actions .button,
body[data-theme="google"] .auth-toggle {
  min-height: 46px;
  border-radius: 8px;
  font-size: 14px;
}

body[data-theme="google"] .login-error {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 560px) {
  body[data-theme="google"] .login-screen { padding: 16px; }
  body[data-theme="google"] .login-card { padding: 30px 24px 26px; border-radius: 14px; }
  body[data-theme="google"] .login-heading h1 { font-size: 27px; }
  body[data-theme="google"] .auth-helper { font-size: 14px; }
}

/* Capability training center */
.capability-center {
  --cap-ink: #172118;
  --cap-muted: #667064;
  --cap-line: #dde4dc;
  --cap-paper: #f6f8f4;
  --cap-green: #346b42;
  --cap-lime: #d9f36a;
  display: grid;
  gap: 18px;
  color: var(--cap-ink);
}

.capability-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 186px;
  padding: 30px 34px;
  border: 1px solid #243027;
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 12%, rgba(217, 243, 106, .22), transparent 25%),
    linear-gradient(132deg, #121a14 0%, #263729 100%);
  color: #f7faf5;
  box-shadow: 0 18px 45px rgba(18, 26, 20, .14);
}

.capability-hero::after {
  position: absolute;
  right: -76px;
  bottom: -122px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .025), 0 0 0 84px rgba(255, 255, 255, .02);
  content: "";
}

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

.capability-kicker,
.capability-section > header span,
.capability-focus-copy > span,
.capability-next-card > span,
.capability-scenario header span,
.capability-impact-hero > div > span {
  display: block;
  margin-bottom: 8px;
  color: #86a48c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.capability-hero h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 650;
  letter-spacing: -.04em;
}

.capability-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: rgba(247, 250, 245, .72);
  font-size: 14px;
  line-height: 1.75;
}

.capability-pilot-badge {
  display: grid;
  min-width: 220px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px);
}

.capability-pilot-badge span,
.capability-pilot-badge small {
  color: rgba(247, 250, 245, .6);
  font-size: 11px;
}

.capability-pilot-badge strong {
  margin: 7px 0 5px;
  font-size: 16px;
}

.capability-notice {
  padding: 12px 16px;
  border: 1px solid #c7da9d;
  border-radius: 12px;
  background: #f3f9df;
  color: #365321;
  font-size: 13px;
  font-weight: 700;
}

.capability-access-block,
.capability-binding-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border: 1px solid #d8e0d4;
  border-radius: 14px;
  background: #f7f9f5;
}

.capability-access-block > div,
.capability-binding-bridge > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.capability-access-block > div > span,
.capability-binding-bridge > div > span {
  color: #8a7042;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
}

.capability-access-block > div > strong,
.capability-binding-bridge > div > strong {
  color: #3e493a;
  font-size: 13px;
}

.capability-access-block > div > small,
.capability-binding-bridge > div > small {
  color: #737d70;
  font-size: 9px;
  line-height: 1.5;
}

.capability-access-block {
  border-color: #e6c5b8;
  background: #fff5f0;
  box-shadow: inset 3px 0 #c86d4e;
}

.capability-access-block > div > span {
  color: #a75c43;
}

.capability-data-explanation {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin-top: -8px;
  padding: 10px 13px;
  border: 1px solid #dce4d8;
  border-radius: 12px;
  background: #f7faf5;
}

.capability-data-explanation > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #e7efdd;
  color: #5e7848;
  font-size: 10px;
  font-weight: 900;
}

.capability-data-explanation > div {
  display: grid;
  gap: 3px;
}

.capability-data-explanation strong {
  color: #40503d;
  font-size: 10px;
}

.capability-data-explanation p {
  margin: 0;
  color: #748071;
  font-size: 9px;
  line-height: 1.5;
}

.capability-data-explanation.is-demo {
  border-color: #e8d3aa;
  background: #fffaf0;
}

.capability-data-explanation.is-demo > span {
  background: #f5e5c8;
  color: #966527;
}

.capability-data-explanation.is-locked {
  border-color: #ead1c6;
  background: #fff7f3;
}

.capability-data-explanation.is-locked > span {
  background: #f6e2da;
  color: #9a5745;
}

.capability-guide-link {
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #5d7546;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.capability-guide-center {
  display: grid;
  grid-template-columns: minmax(240px, .68fr) minmax(0, 1.32fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #b9ca9e;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 12%, rgba(217, 243, 106, .15), transparent 26%),
    linear-gradient(135deg, #203027 0%, #314339 38%, #f8faf5 38%, #f8faf5 100%);
  box-shadow: 0 14px 34px rgba(35, 50, 38, .08);
}

.capability-guide-intro {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px 14px;
  color: #f7faf5;
}

.capability-guide-intro > span,
.capability-guide-steps > header span {
  color: #bddb71;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-guide-intro h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.02em;
}

.capability-guide-intro > p {
  margin: 0;
  color: rgba(247, 250, 245, .68);
  font-size: 9px;
  line-height: 1.55;
}

.capability-guide-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
}

.capability-guide-progress > div {
  display: grid;
}

.capability-guide-progress > div strong {
  font-size: 17px;
}

.capability-guide-progress > div span,
.capability-guide-progress small {
  color: rgba(247, 250, 245, .58);
  font-size: 7px;
}

.capability-guide-progress > i,
.capability-guide-mini-progress > i {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.capability-guide-progress > i > b,
.capability-guide-mini-progress > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #d6ee78;
}

.capability-guide-progress > small {
  grid-column: 2;
}

.capability-guide-current {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  background: #f3f7e9;
  color: #354432;
}

.capability-guide-current > span {
  color: #718357;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
}

.capability-guide-current > strong {
  font-size: 11px;
}

.capability-guide-current > small {
  color: #71806e;
  font-size: 8px;
  line-height: 1.45;
}

.capability-guide-current .button {
  justify-self: start;
  margin-top: 3px;
}

.capability-guide-demo-button {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(217, 243, 106, .28);
  border-radius: 10px;
  background: rgba(217, 243, 106, .08);
  color: #f7faf5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capability-guide-demo-button > span {
  color: #d8ef8f;
  font-size: 7px;
  font-weight: 850;
}

.capability-guide-demo-button > strong {
  font-size: 10px;
}

.capability-guide-demo-button > small {
  color: rgba(247, 250, 245, .55);
  font-size: 7px;
}

.capability-guide-steps {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px;
}

.capability-guide-steps > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.capability-guide-steps > header > div {
  display: grid;
  gap: 3px;
}

.capability-guide-steps > header span {
  color: #76886a;
}

.capability-guide-steps > header strong {
  color: #3f4f3c;
  font-size: 12px;
}

.capability-guide-steps > header > button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid #7b8a77;
  background: transparent;
  color: #6c7b68;
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.capability-guide-steps ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-guide-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid #e0e6dd;
  border-radius: 10px;
  background: #fff;
}

.capability-guide-steps li.is-current {
  border-color: #a6bb75;
  background: #f6f9ed;
  box-shadow: inset 3px 0 #9db55d;
}

.capability-guide-steps li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: #edf1ea;
  color: #6e7b6a;
  font-size: 8px;
  font-weight: 850;
}

.capability-guide-steps li.is-done > span {
  background: #dcebdd;
  color: #35643d;
}

.capability-guide-steps li > div {
  display: grid;
  gap: 3px;
}

.capability-guide-steps li strong {
  color: #435140;
  font-size: 9px;
}

.capability-guide-steps li small {
  color: #7d897a;
  font-size: 8px;
  line-height: 1.4;
}

.capability-guide-steps li > em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e2efe2;
  color: #3b6b42;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.capability-guide-center.is-collapsed {
  grid-template-columns: minmax(0, 1fr) 180px auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  background: linear-gradient(135deg, #25352b, #33483a);
  color: #f7faf5;
}

.capability-guide-center.is-collapsed > div:first-child {
  display: grid;
  gap: 3px;
}

.capability-guide-center.is-collapsed > div:first-child > span {
  color: #c3dc80;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-guide-center.is-collapsed > div:first-child > strong {
  font-size: 11px;
}

.capability-guide-center.is-collapsed > div:first-child > small {
  color: rgba(247, 250, 245, .58);
  font-size: 8px;
}

.capability-guide-mini-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.capability-guide-mini-progress > span {
  color: #d9e9b2;
  font-size: 8px;
  font-weight: 800;
}

.capability-demo-tour-backdrop {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 19, 15, .64);
  backdrop-filter: blur(6px);
}

.capability-demo-tour {
  display: grid;
  gap: 14px;
  width: min(560px, calc(100vw - 28px));
  padding: 20px;
  border: 1px solid #51604f;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.capability-demo-tour > header,
.capability-demo-tour > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capability-demo-tour > header > div {
  display: grid;
  gap: 4px;
}

.capability-demo-tour > header span {
  color: #6e8158;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-demo-tour > header strong {
  color: #354432;
  font-size: 14px;
}

.capability-demo-tour-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.capability-demo-tour-track i {
  height: 4px;
  border-radius: 999px;
  background: #e1e7dd;
}

.capability-demo-tour-track i.is-done,
.capability-demo-tour-track i.is-current {
  background: #89a653;
}

.capability-demo-tour-content {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 128px;
  padding: 18px;
  border-radius: 14px;
  background: #f3f7ed;
}

.capability-demo-tour-content > span {
  display: grid;
  height: 50px;
  place-items: center;
  border-radius: 13px;
  background: #2c4030;
  color: #d9f36a;
  font-size: 15px;
  font-weight: 850;
}

.capability-demo-tour-content h3 {
  margin: 3px 0 8px;
  color: #344331;
  font-size: 17px;
}

.capability-demo-tour-content p {
  margin: 0;
  color: #687565;
  font-size: 10px;
  line-height: 1.65;
}

.capability-demo-tour-safety {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #ead7b4;
  border-radius: 10px;
  background: #fff9ed;
}

.capability-demo-tour-safety > span {
  display: grid;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #f2dfbc;
  color: #8a6025;
  font-size: 9px;
  font-weight: 900;
}

.capability-demo-tour-safety > div {
  display: grid;
  gap: 3px;
}

.capability-demo-tour-safety strong {
  color: #674d2a;
  font-size: 9px;
}

.capability-demo-tour-safety small {
  color: #8a7657;
  font-size: 8px;
}

.capability-demo-tour > footer > div {
  display: flex;
  gap: 7px;
}

.capability-help-button::before {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  margin-right: 5px;
  border-radius: 50%;
  background: #dfecc6;
  color: #526b3c;
  content: "?";
  font-size: 9px;
  font-weight: 900;
}

.capability-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.capability-summary-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 19px 20px;
  border: 1px solid var(--cap-line);
  border-radius: 17px;
  background: #fff;
}

.capability-summary-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #8b968a;
  content: "";
}

.capability-summary-card.tone-orange::before { background: #dc8b45; }
.capability-summary-card.tone-blue::before { background: #5b78bf; }
.capability-summary-card.tone-green::before { background: #5a925f; }
.capability-summary-card.tone-ink::before { background: #26342a; }

.capability-summary-card > span {
  color: var(--cap-muted);
  font-size: 12px;
  font-weight: 700;
}

.capability-summary-card strong {
  align-self: end;
  font-size: 28px;
  line-height: 1;
}

.capability-summary-card small {
  color: #8a9388;
  font-size: 11px;
}

.capability-workspace-nav {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce3da;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 10px 28px rgba(33, 48, 37, .05);
}

.capability-nav-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.capability-nav-groups > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e0e6de;
  border-radius: 12px;
  background: #f6f8f4;
  color: #465244;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.capability-nav-groups > button:hover {
  border-color: #bac8a4;
  background: #f0f4e8;
  transform: translateY(-1px);
}

.capability-nav-groups > button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e6ece2;
  color: #52664d;
  font-size: 13px;
  font-weight: 850;
}

.capability-nav-groups > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.capability-nav-groups strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-nav-groups small {
  overflow: hidden;
  color: #879183;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-nav-groups em {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #e8ede5;
  color: #758171;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.capability-nav-groups > button.active {
  border-color: #2c3e30;
  background: linear-gradient(135deg, #1f2d23, #3b503d);
  color: #f7faf4;
  box-shadow: 0 8px 18px rgba(31, 45, 35, .16);
}

.capability-nav-groups > button.active > span:first-child {
  background: #d7ec78;
  color: #2d3c2e;
}

.capability-nav-groups > button.active small {
  color: rgba(247, 250, 244, .62);
}

.capability-nav-groups > button.active em {
  background: rgba(255, 255, 255, .12);
  color: #dff17a;
}

.capability-nav-pages {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 6px 7px 6px 13px;
  border: 1px solid #2c3e30;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f2d23, #3b503d);
  box-shadow: 0 8px 18px rgba(31, 45, 35, .12);
}

.capability-nav-pages > div:first-child {
  display: grid;
  gap: 2px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.capability-nav-pages > div:first-child span {
  color: rgba(247, 250, 244, .58);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}

.capability-nav-pages > div:first-child strong {
  color: #f7faf4;
  font-size: 11px;
}

.capability-nav-pages > div:last-child {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
}

.capability-nav-pages > div:last-child::-webkit-scrollbar {
  display: none;
}

.capability-nav-pages button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(247, 250, 244, .76);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.capability-nav-pages button:hover {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
  color: #ffffff;
}

.capability-nav-pages button.active {
  border-color: #dff18c;
  background: #d7ec78;
  color: #2d3c2e;
  box-shadow: 0 3px 10px rgba(18, 28, 20, .18);
}

.capability-nav-pages button em {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  background: #d8614e;
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.capability-view-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 15px;
  border: 1px solid #d9e2d6;
  border-radius: 14px;
  background-color: #f5f8f3;
}

.capability-view-context.is-person {
  border-color: #c7d79f;
  background-color: #f2f7e7;
  box-shadow: inset 3px 0 #9dbb4f;
}

.capability-view-context > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.capability-view-context > div:first-child > span,
.capability-view-context-actions label > span {
  color: #75876d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-view-context > div:first-child > strong {
  overflow: hidden;
  color: #314331;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-view-context > div:first-child > small {
  color: #6f7c6b;
  font-size: 9px;
  line-height: 1.4;
}

.capability-view-context-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  gap: 8px;
}

.capability-view-context-actions label {
  display: grid;
  gap: 5px;
}

.capability-view-context-actions select {
  min-width: 220px;
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid #cfd9cb;
  border-radius: 9px;
  background-color: #fff;
  color: #354534;
  font: inherit;
  font-size: 10px;
}

.capability-workspace {
  display: grid;
  gap: 16px;
}

.capability-today-grid,
.capability-coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  gap: 14px;
}

.capability-focus-card,
.capability-next-card,
.capability-section,
.capability-impact-hero,
.capability-metric-card {
  border: 1px solid var(--cap-line);
  border-radius: 18px;
  background: #fff;
}

.capability-focus-card {
  padding: 22px;
}

.capability-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf0ec;
}

.capability-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #e6eddf;
  color: #35533a;
  font-size: 14px;
  font-weight: 800;
}

.capability-person-row > div:nth-child(2),
.capability-review-person > div {
  display: grid;
  gap: 4px;
}

.capability-person-row span,
.capability-review-person span,
.capability-team-list article span {
  color: var(--cap-muted);
  font-size: 11px;
}

.capability-person-score {
  display: grid;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}

.capability-person-score strong {
  font-size: 22px;
}

.capability-focus-copy {
  padding: 22px 0 16px;
}

.capability-focus-copy h3,
.capability-next-card h3,
.capability-section > header h3,
.capability-scenario h3,
.capability-impact-hero h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.02em;
}

.capability-focus-copy p,
.capability-next-card p,
.capability-impact-hero p {
  margin: 8px 0 0;
  color: var(--cap-muted);
  font-size: 13px;
  line-height: 1.7;
}

.capability-stage-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.capability-stage-track span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #969e94;
  font-size: 10px;
  font-weight: 700;
}

.capability-stage-track span::before {
  position: absolute;
  top: 12px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #e4e9e2;
  content: "";
}

.capability-stage-track span:first-child::before {
  display: none;
}

.capability-stage-track i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid #dbe2d9;
  border-radius: 50%;
  background: #fff;
  color: #a3aaa1;
  font-size: 10px;
  font-style: normal;
}

.capability-stage-track span.done,
.capability-stage-track span.active {
  color: #36543b;
}

.capability-stage-track span.done::before,
.capability-stage-track span.active::before {
  background: #8bb06e;
}

.capability-stage-track span.done i {
  border-color: #648f52;
  background: #648f52;
  color: #fff;
}

.capability-stage-track span.active i {
  border-color: #90ad46;
  background: #f5fadf;
  color: #456022;
  box-shadow: 0 0 0 4px rgba(144, 173, 70, .12);
}

.capability-next-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: linear-gradient(145deg, #eef4e8, #fbfcf9);
}

.capability-next-card > div {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 24px;
}

.capability-next-card > div strong {
  font-size: 30px;
}

.capability-next-card > div span {
  color: var(--cap-muted);
  font-size: 11px;
}

.capability-section {
  padding: 22px;
}

.capability-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.capability-section > header small {
  color: var(--cap-muted);
  font-size: 11px;
}

.capability-assignment-list,
.capability-review-list,
.capability-coaching-log,
.capability-team-list {
  display: grid;
  gap: 9px;
}

.capability-assignment {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 140px;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid #e5e9e3;
  border-radius: 14px;
  background: #fbfcfa;
}

.capability-assignment.is-active {
  border-color: #bdd0a5;
  background: #f8fbf2;
}

.capability-assignment.is-risk {
  border-color: #efc2ad;
  background: #fff9f6;
}

.capability-assignment-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #edf1eb;
  color: #6e786c;
  font-size: 10px;
  font-weight: 800;
}

.capability-assignment.is-done .capability-assignment-index {
  background: #dcebd7;
  color: #3b6b40;
}

.capability-assignment-main {
  min-width: 0;
}

.capability-assignment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.capability-assignment-meta span,
.capability-assignment-meta em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf0ec;
  color: #687166;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.capability-assignment-meta em {
  margin-left: auto;
}

.capability-assignment-meta em.is-active { background: #e8f0d2; color: #48612c; }
.capability-assignment-meta em.is-risk { background: #f9e4db; color: #a04e2c; }
.capability-assignment-meta em.is-done { background: #dcebdd; color: #35643d; }

.capability-assignment h4,
.capability-review-content h4 {
  margin: 0;
  font-size: 14px;
}

.capability-assignment p,
.capability-review-content p,
.capability-coaching-log p {
  margin: 5px 0 0;
  color: var(--cap-muted);
  font-size: 11px;
  line-height: 1.55;
}

.capability-assignment-main > small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #667b5d;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-progress {
  overflow: hidden;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: #e6ebe4;
}

.capability-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #718f55;
}

.capability-assignment-action {
  display: grid;
  justify-items: end;
  gap: 9px;
}

.capability-assignment-action > span {
  color: var(--cap-muted);
  font-size: 10px;
}

.capability-assignment-action .button,
.capability-review-actions .button,
.capability-scenario-feedback .button {
  min-height: 31px;
  padding: 0 11px;
  font-size: 10px;
}

.capability-scenario {
  overflow: hidden;
  border: 1px solid #2e3d31;
  border-radius: 18px;
  background: #172019;
  color: #f7faf5;
  box-shadow: 0 18px 45px rgba(17, 28, 20, .18);
}

.capability-scenario > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.capability-scenario header span {
  color: #b8d760;
}

.capability-scenario .icon-button {
  color: #fff;
}

.capability-scenario-dialogue {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 24px;
}

.capability-ai-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--cap-lime);
  color: #223018;
  font-size: 11px;
  font-weight: 900;
}

.capability-scenario-dialogue p {
  margin: 0;
  padding: 13px 15px;
  border-radius: 4px 14px 14px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.65;
}

.capability-scenario-question {
  padding: 0 24px 24px 73px;
}

.capability-scenario-question > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}

.capability-scenario-options {
  display: grid;
  gap: 8px;
}

.capability-scenario-options button {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .77);
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
}

.capability-scenario-options button:hover {
  border-color: rgba(217, 243, 106, .58);
  background: rgba(217, 243, 106, .08);
  color: #fff;
}

.capability-scenario-feedback {
  margin: 0 24px 24px 73px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
}

.capability-scenario-feedback.is-correct {
  border: 1px solid rgba(217, 243, 106, .42);
}

.capability-scenario-feedback.is-wrong {
  border: 1px solid rgba(239, 139, 94, .42);
}

.capability-scenario-feedback p {
  margin: 7px 0 12px;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  line-height: 1.6;
}

.capability-team-list article,
.capability-review-list > article {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e6eae4;
  border-radius: 13px;
  background: #fbfcfa;
}

.capability-team-list article {
  grid-template-columns: 38px minmax(130px, 1fr) minmax(135px, .75fr) 70px;
}

.capability-team-gap,
.capability-team-rate {
  display: grid;
  gap: 3px;
}

.capability-team-gap strong {
  font-size: 11px;
}

.capability-team-rate {
  text-align: right;
}

.capability-team-rate strong {
  font-size: 17px;
}

.capability-coach-principle {
  padding: 22px;
  border-radius: 18px;
  background: #213026;
  color: #f7faf5;
}

.capability-coach-principle > span {
  color: #a9bbab;
  font-size: 11px;
  font-weight: 800;
}

.capability-coach-principle ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.capability-coach-principle li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
}

.capability-coach-principle i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: var(--cap-lime);
  font-style: normal;
  font-weight: 800;
}

.capability-review-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.capability-review-list > article {
  grid-template-columns: 165px minmax(0, 1fr) auto;
}

.capability-review-list > article.is-overdue {
  border-color: #e5ab93;
  background: #fff7f3;
  box-shadow: inset 3px 0 0 #c66a43;
}

.capability-review-list > article.is-due-soon {
  border-color: #e4c98a;
  background: #fffaf0;
  box-shadow: inset 3px 0 0 #c7932c;
}

.capability-review-list > article.is-on-time {
  border-color: #cad8bd;
}

.capability-review-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.capability-review-content > span {
  color: #6f7b6c;
  font-size: 10px;
  font-weight: 750;
}

.capability-review-time {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.capability-review-time span {
  padding: 4px 7px;
  border-radius: 7px;
  background: #edf2e9;
  color: #66755f;
  font-size: 9px;
  font-weight: 700;
}

.capability-review-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.capability-review-actions > em {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #4f604a;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.capability-review-actions > em small {
  color: #7b8778;
  font-size: 8px;
  font-weight: 650;
}

.capability-review-actions > em.is-overdue,
.capability-review-actions > em.is-overdue small {
  color: #a74d2d;
}

.capability-review-actions > em.is-due-soon,
.capability-review-actions > em.is-due-soon small {
  color: #96661f;
}

.capability-review-actions > em.is-retrain,
.capability-review-actions > em.is-retrain small {
  color: #7a5948;
}

.capability-coaching-log article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid #edf0ec;
}

.capability-coaching-log article:first-child {
  border-top: 0;
}

.capability-coaching-log article > span {
  align-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8eee4;
  color: #496147;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.capability-coaching-log small {
  display: block;
  margin-top: 6px;
  color: #7c877a;
  font-size: 10px;
}

.capability-track-overview {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--cap-line);
  border-radius: 18px;
  background: linear-gradient(145deg, #1b2820, #2c3d30);
  color: #f7faf5;
}

.capability-track-overview > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.capability-track-overview > header span {
  display: block;
  margin-bottom: 7px;
  color: #b9d866;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-track-overview h3 {
  margin: 0;
  font-size: 20px;
}

.capability-track-overview > header p {
  max-width: 550px;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  line-height: 1.65;
}

.capability-track-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.capability-track-switch button {
  display: grid;
  gap: 7px;
  min-height: 64px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .72);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capability-track-switch button:hover {
  border-color: rgba(217, 243, 106, .35);
  background: rgba(217, 243, 106, .07);
}

.capability-track-switch button.active {
  border-color: #cce66f;
  background: #d9f36a;
  color: #233019;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
}

.capability-track-switch button > span {
  font-size: 11px;
  font-weight: 800;
}

.capability-track-switch em {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .68);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.capability-track-switch button.active em {
  background: rgba(35, 48, 25, .12);
  color: #3d5428;
}

.capability-track-mission {
  margin: -5px 0 18px;
  padding: 12px 14px;
  border-left: 3px solid #9ab75a;
  border-radius: 0 10px 10px 0;
  background: #f2f6ed;
  color: #566451;
  font-size: 11px;
  line-height: 1.65;
}

.capability-catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.capability-catalog-grid article {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 17px;
  border: 1px solid #e2e7df;
  border-radius: 14px;
  background: linear-gradient(155deg, #fafbf9, #f2f5ef);
}

.capability-catalog-grid article > span,
.capability-catalog-grid article > small {
  color: #788276;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.capability-catalog-grid h4 {
  margin: 12px 0 0;
  font-size: 14px;
}

.capability-catalog-grid p {
  margin: 8px 0 18px;
  color: var(--cap-muted);
  font-size: 10px;
  line-height: 1.65;
}

.capability-catalog-grid article > small {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #dfe5dc;
}

.capability-catalog-grid article > strong {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.6;
}

.capability-matrix-wrap {
  overflow-x: auto;
}

.capability-matrix {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

.capability-matrix th,
.capability-matrix td {
  padding: 12px 10px;
  border-bottom: 1px solid #e7ebe5;
  color: #636e62;
  font-size: 10px;
  text-align: center;
}

.capability-matrix th {
  background: #f5f7f3;
  color: #707a6f;
  font-weight: 800;
}

.capability-matrix th:first-child,
.capability-matrix td:first-child,
.capability-matrix th:last-child,
.capability-matrix td:last-child {
  text-align: left;
}

.capability-matrix td:first-child {
  display: grid;
  gap: 3px;
}

.capability-matrix td:first-child span {
  color: #8a9388;
  font-size: 9px;
}

.capability-level {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
}

.capability-level.level-1 { background: #f2e6e1; color: #a45f44; }
.capability-level.level-2 { background: #f5eed9; color: #91712e; }
.capability-level.level-3 { background: #e8eedf; color: #597043; }
.capability-level.level-4 { background: #d9e9d7; color: #35633a; }
.capability-level.level-5 { background: #263b2a; color: #e2f281; }

.capability-impact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.capability-impact-hero > div:first-child {
  max-width: 620px;
}

.capability-evidence-chain {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px;
  border-radius: 12px;
  background: #f0f4ed;
  white-space: nowrap;
}

.capability-evidence-chain span {
  color: #4f654f;
  font-size: 10px;
  font-weight: 750;
}

.capability-evidence-chain i {
  color: #9ba698;
  font-style: normal;
}

.capability-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.capability-metric-card {
  padding: 20px;
}

.capability-metric-card header,
.capability-metric-value,
.capability-metric-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.capability-metric-card header span,
.capability-metric-card header em,
.capability-metric-labels span {
  color: #7a8478;
  font-size: 9px;
  font-style: normal;
}

.capability-metric-card header em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf1ea;
}

.capability-metric-card h3 {
  margin: 16px 0 12px;
  font-size: 14px;
}

.capability-metric-value strong {
  font-size: 30px;
  letter-spacing: -.04em;
}

.capability-metric-value span {
  color: #4c744d;
  font-size: 10px;
  font-weight: 800;
}

.capability-metric-scale {
  overflow: hidden;
  height: 7px;
  margin: 16px 0 6px;
  border-radius: 999px;
  background: #e7ece4;
}

.capability-metric-scale i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #739b58, #b5cf5a);
}

.capability-metric-card p {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid #edf0ec;
  color: var(--cap-muted);
  font-size: 10px;
  line-height: 1.6;
}

.capability-validation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.capability-validation-grid article {
  display: grid;
  gap: 7px;
  padding: 17px;
  border-radius: 13px;
  background: #f4f6f2;
}

.capability-validation-grid article > span {
  color: #8e998b;
  font-size: 9px;
  font-weight: 900;
}

.capability-validation-grid strong {
  font-size: 13px;
}

.capability-validation-grid p {
  min-height: 32px;
  margin: 0;
  color: var(--cap-muted);
  font-size: 10px;
  line-height: 1.55;
}

.capability-validation-grid em {
  color: #49684b;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.capability-empty {
  padding: 30px;
  border: 1px dashed #ccd4ca;
  border-radius: 13px;
  color: #7e887c;
  font-size: 12px;
  text-align: center;
}

.capability-unassigned {
  display: grid;
  justify-items: start;
  min-height: 280px;
  padding: 34px;
  border: 1px solid var(--cap-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(185, 216, 102, .18), transparent 28%),
    linear-gradient(145deg, #fbfcf9, #eef3e9);
}

.capability-unassigned > span {
  color: #76904e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-unassigned h3 {
  margin: 22px 0 8px;
  font-size: 24px;
}

.capability-unassigned p {
  max-width: 620px;
  margin: 0;
  color: var(--cap-muted);
  font-size: 12px;
  line-height: 1.75;
}

.capability-unassigned > div {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 34px;
  color: #536250;
  font-size: 11px;
}

.capability-unassigned > div strong {
  color: #2f4932;
}

.capability-unassigned > .button {
  justify-self: center;
  margin-top: 4px;
}

.capability-subject-empty {
  min-height: 240px;
  border-color: #cfdbc8;
  background-color: #f3f7ee;
}

.capability-management-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.capability-onboarding-overview {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid #cbd8c4;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(190, 220, 108, .18), transparent 28%),
    linear-gradient(135deg, #213027, #314337);
  color: #f7faf5;
}

.capability-onboarding-overview > div {
  display: grid;
  gap: 6px;
}

.capability-onboarding-overview > div > span {
  color: #b9d866;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-onboarding-overview > div > strong {
  font-size: 17px;
}

.capability-onboarding-overview > div > small {
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
}

.capability-onboarding-overview ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-onboarding-overview li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
}

.capability-onboarding-overview li i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: rgba(255, 255, 255, .6);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.capability-onboarding-overview li span {
  display: grid;
  gap: 3px;
  color: rgba(255, 255, 255, .64);
  font-size: 9px;
}

.capability-onboarding-overview li strong {
  color: #fff;
  font-size: 12px;
}

.capability-onboarding-overview li.is-done i {
  border-color: #b8d866;
  background: #b8d866;
  color: #26321f;
}

.capability-onboarding-overview li.is-active {
  border-color: rgba(184, 216, 102, .4);
  background: rgba(184, 216, 102, .1);
}

.capability-onboarding-overview li.is-active i {
  border-color: #b8d866;
  color: #d8ef9b;
}

.capability-binding-bridge {
  border-color: #cfdcc9;
  background: #f2f7ef;
}

.capability-binding-bridge > div > span {
  color: #5e7d5a;
}

.capability-profile-list,
.capability-candidate-list,
.capability-diagnostic-list {
  display: grid;
  gap: 8px;
}

.capability-profile-list > article {
  display: grid;
  grid-template-columns: 40px minmax(180px, 1.4fr) minmax(76px, .45fr) minmax(130px, .75fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #edf0ec;
}

.capability-profile-list > article:first-child {
  border-top: 0;
}

.capability-profile-identity,
.capability-profile-list > article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.capability-profile-identity span,
.capability-profile-list small {
  color: #788276;
  font-size: 10px;
}

.capability-profile-source {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  font-weight: 750;
}

.capability-profile-source.is-demo {
  background: #fff1d7;
  color: #8a6126;
}

.capability-profile-source.is-directory {
  background: #e1f0e2;
  color: #376b3e;
}

.capability-profile-list > article > div > strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-profile-list > article > em {
  padding: 5px 8px;
  border-radius: 999px;
  background: #edf1ea;
  color: #657063;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.capability-profile-list > article > em.is-done {
  background: #dcebdd;
  color: #35643d;
}

.capability-profile-list > article > em.capability-onboarding-status.is-ready {
  background: #dcebdd;
  color: #35643d;
}

.capability-profile-list > article > em.capability-onboarding-status.is-account,
.capability-profile-list > article > em.capability-onboarding-status.is-diagnostic,
.capability-profile-list > article > em.capability-onboarding-status.is-path {
  background: #fff0d8;
  color: #8e5a20;
}

.capability-profile-list > article > em.capability-onboarding-status.is-demo {
  background: #edf0ec;
  color: #687166;
}

.capability-candidate-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-candidate-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .7fr) minmax(150px, .7fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #dfe6db;
  border-radius: 13px;
  background: #f7faf5;
}

[data-capability-route-target] {
  scroll-margin-top: 18px;
}

[data-capability-route-target].is-capability-guide-target {
  animation: capabilityGuideTargetPulse 2.2s ease-out;
}

@keyframes capabilityGuideTargetPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(53, 105, 65, .38);
  }

  32% {
    box-shadow: 0 0 0 6px rgba(53, 105, 65, .18);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(53, 105, 65, 0);
  }
}

.capability-candidate-toolbar > label {
  display: grid;
  gap: 5px;
}

.capability-candidate-toolbar > label > span,
.capability-candidate-batch > span {
  color: #748071;
  font-size: 9px;
  font-weight: 800;
}

.capability-candidate-toolbar input,
.capability-candidate-toolbar select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #d6ded3;
  border-radius: 9px;
  background: #fff;
  color: #273329;
  font: inherit;
  font-size: 10px;
  box-sizing: border-box;
}

.capability-candidate-batch {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px;
  align-items: center;
}

.capability-candidate-batch > span {
  grid-column: 1 / -1;
  text-align: right;
}

.capability-candidate-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
  color: #697667;
  font-size: 9px;
}

.capability-candidate-result small {
  color: #8a9487;
}

.capability-candidate-list > article {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e4e9e1;
  border-radius: 13px;
  background: #f8faf6;
}

.capability-candidate-list > article.is-selected {
  border-color: #9ab268;
  background: #f4f8e9;
  box-shadow: 0 0 0 2px rgba(154, 178, 104, .12);
}

.capability-candidate-check {
  align-self: center;
}

.capability-candidate-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6f8f45;
}

.capability-candidate-list > article > div,
.capability-candidate-list label {
  display: grid;
  gap: 5px;
}

.capability-candidate-list > article > div > span,
.capability-candidate-list label > span {
  overflow: hidden;
  color: #788276;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-candidate-list > article > div > small {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
}

.capability-candidate-list > article > div > small.is-linked {
  background: #e1f0e2;
  color: #376b3e;
}

.capability-candidate-list > article > div > small.is-unlinked {
  background: #fff0d8;
  color: #8e5a20;
}

.capability-candidate-more {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.capability-candidate-list select,
.capability-diagnostic-list select {
  min-height: 36px;
  padding: 0 32px 0 10px;
  border: 1px solid #d8dfd5;
  border-radius: 9px;
  background: #fff;
  color: #253027;
  font: inherit;
  font-size: 11px;
}

.capability-diagnostic-panel {
  border-color: #bfd081;
  box-shadow: 0 18px 42px rgba(47, 70, 38, .1);
}

.capability-onboarding-panel {
  border-color: #aebf75;
  background: linear-gradient(180deg, #fff 0%, #fbfcf5 100%);
  box-shadow: 0 18px 42px rgba(47, 70, 38, .1);
}

.capability-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.capability-onboarding-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid #e3e8df;
  border-radius: 12px;
  background: #f8faf6;
}

.capability-onboarding-steps li i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #d7dfd2;
  border-radius: 50%;
  color: #82907e;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.capability-onboarding-steps li span {
  display: grid;
  gap: 3px;
}

.capability-onboarding-steps li strong {
  color: #40503d;
  font-size: 11px;
}

.capability-onboarding-steps li small {
  color: #808b7e;
  font-size: 9px;
  line-height: 1.4;
}

.capability-onboarding-steps li.is-done {
  border-color: #c9d8c1;
  background: #f0f6ed;
}

.capability-onboarding-steps li.is-done i {
  border-color: #73945d;
  background: #73945d;
  color: #fff;
}

.capability-onboarding-steps li.is-active {
  border-color: #b7cb75;
  background: #f5f9e6;
  box-shadow: inset 0 0 0 1px rgba(159, 186, 88, .12);
}

.capability-onboarding-steps li.is-active i {
  border-color: #8fae4e;
  color: #516d27;
  box-shadow: 0 0 0 4px rgba(159, 186, 88, .12);
}

.capability-onboarding-person {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #f1f5ee;
}

.capability-onboarding-person > div {
  display: grid;
  gap: 4px;
}

.capability-onboarding-person > div > span {
  color: #778374;
  font-size: 10px;
}

.capability-onboarding-person > em {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.capability-onboarding-person > em.is-linked {
  background: #dcebdd;
  color: #35643d;
}

.capability-onboarding-person > em.is-unlinked {
  background: #fff0d8;
  color: #8e5a20;
}

.capability-diagnostic-guide {
  margin: -3px 0 15px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #f1f6df;
  color: #526434;
  font-size: 11px;
  line-height: 1.6;
}

.capability-diagnostic-list > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #edf0ec;
}

.capability-diagnostic-list > label:first-child {
  border-top: 0;
}

.capability-diagnostic-list label > span {
  display: grid;
  gap: 5px;
}

.capability-diagnostic-list small {
  color: #727e70;
  font-size: 10px;
  line-height: 1.55;
}

.capability-diagnostic-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8df;
}

.capability-diagnostic-submit > span {
  max-width: 600px;
  color: #71806d;
  font-size: 10px;
  line-height: 1.6;
}

.capability-evidence-form-panel,
.capability-review-form-panel {
  border-color: #c9d6b1;
  box-shadow: 0 18px 42px rgba(47, 70, 38, .08);
}

.capability-evidence-standard {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-left: 3px solid #9fba58;
  border-radius: 4px 11px 11px 4px;
  background: #f3f7e8;
}

.capability-evidence-standard span,
.capability-review-evidence article > span {
  color: #76836b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.capability-evidence-standard strong {
  color: #3e5237;
  font-size: 11px;
  line-height: 1.6;
}

.capability-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.capability-form-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
}

.capability-form-grid label > span {
  color: #536050;
  font-size: 10px;
  font-weight: 750;
}

.capability-form-grid label > span em {
  color: #b15e3d;
  font-size: 9px;
  font-style: normal;
}

.capability-form-wide {
  grid-column: 1 / -1;
}

.capability-form-grid input,
.capability-form-grid select,
.capability-form-grid textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #d7ded4;
  border-radius: 10px;
  outline: none;
  background: #fbfcfa;
  color: #263027;
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.capability-form-grid textarea {
  resize: vertical;
}

.capability-form-grid input:focus,
.capability-form-grid select:focus,
.capability-form-grid textarea:focus {
  border-color: #8fae4e;
  box-shadow: 0 0 0 3px rgba(159, 186, 88, .14);
}

.capability-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid #e4e9e1;
}

.capability-form-submit > span {
  max-width: 620px;
  color: #72806f;
  font-size: 10px;
  line-height: 1.6;
}

.capability-evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.capability-evidence-meta span,
.capability-evidence-meta a {
  padding: 4px 7px;
  border-radius: 7px;
  background: #eef3e9;
  color: #52664d;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.capability-evidence-meta a {
  background: #e7eef8;
  color: #496589;
}

.capability-review-evidence {
  display: grid;
  grid-template-columns: .8fr .8fr 1.6fr;
  gap: 8px;
  margin-bottom: 16px;
}

.capability-review-evidence article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 78px;
  padding: 13px;
  border-radius: 11px;
  background: #f3f6f0;
}

.capability-review-evidence article > strong {
  color: #3f4d3e;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.6;
}

.capability-review-sla {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #cfdac8;
  border-radius: 11px;
  background: #f2f6ef;
}

.capability-review-sla > span {
  color: #71806d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
}

.capability-review-sla > strong {
  color: #3d5739;
  font-size: 12px;
}

.capability-review-sla > small {
  color: #758173;
  font-size: 9px;
  text-align: right;
}

.capability-review-sla.is-overdue {
  border-color: #e2a68c;
  background: #fff4ef;
}

.capability-review-sla.is-overdue > strong {
  color: #a74d2d;
}

.capability-review-sla.is-due-soon {
  border-color: #dfc481;
  background: #fff9ec;
}

.capability-review-sla.is-due-soon > strong {
  color: #92611c;
}

.capability-lesson-panel {
  border-color: #b9cb83;
  background: linear-gradient(180deg, #fff 0%, #fbfcf7 100%);
  box-shadow: 0 20px 48px rgba(47, 70, 38, .1);
}

.capability-lesson-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 14px;
  margin-bottom: 14px;
}

.capability-lesson-hero > div,
.capability-lesson-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 22px;
  border-radius: 14px;
}

.capability-lesson-hero > div {
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 243, 106, .2), transparent 30%),
    linear-gradient(145deg, #17231a, #2c3c2f);
  color: #f7faf5;
}

.capability-lesson-hero span,
.capability-lesson-case-grid article > span,
.capability-lesson-panel form > header span {
  color: #91a883;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-lesson-hero h4 {
  max-width: 720px;
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.capability-lesson-hero p {
  margin: 0;
  color: rgba(247, 250, 245, .62);
  font-size: 10px;
  line-height: 1.6;
}

.capability-lesson-hero aside {
  background: #eff5dc;
  color: #3a4e34;
}

.capability-lesson-hero aside span {
  color: #718158;
}

.capability-lesson-hero aside strong {
  font-size: 12px;
  line-height: 1.7;
}

.capability-lesson-framework {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.capability-lesson-framework article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  padding: 14px;
  border: 1px solid #e2e8de;
  border-radius: 12px;
  background: #fff;
}

.capability-lesson-framework article > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: #dff079;
  color: #394429;
  font-size: 9px;
  font-weight: 900;
}

.capability-lesson-framework article > div {
  display: grid;
  gap: 5px;
}

.capability-lesson-framework strong {
  font-size: 11px;
}

.capability-lesson-framework p,
.capability-lesson-case-grid p {
  margin: 0;
  color: #707b6d;
  font-size: 9px;
  line-height: 1.6;
}

.capability-lesson-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 20px;
}

.capability-lesson-case-grid article {
  padding: 17px;
  border-radius: 13px;
}

.capability-lesson-case-grid article.is-good {
  border: 1px solid #d8e5bd;
  background: #f3f7e8;
}

.capability-lesson-case-grid article.is-risk {
  border: 1px solid #efdbd1;
  background: #fcf3ee;
}

.capability-lesson-case-grid article.is-risk > span {
  color: #b16a4c;
}

.capability-lesson-case-grid h4 {
  margin: 8px 0 6px;
  font-size: 12px;
}

.capability-lesson-panel form {
  padding-top: 18px;
  border-top: 1px solid #e2e8df;
}

.capability-lesson-panel form > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.capability-lesson-panel form > header h4 {
  margin: 3px 0 0;
  font-size: 15px;
}

.capability-lesson-panel form > header small {
  color: #798575;
  font-size: 9px;
}

.capability-learning-questions {
  display: grid;
  gap: 9px;
}

.capability-learning-questions fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #e0e6dd;
  border-radius: 12px;
  background: #fff;
}

.capability-learning-questions legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  color: #334032;
  font-size: 11px;
  font-weight: 750;
}

.capability-learning-questions legend span {
  color: #819079;
  font-size: 9px;
}

.capability-learning-questions label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f6f8f4;
  color: #5c675a;
  font-size: 10px;
  line-height: 1.55;
  cursor: pointer;
}

.capability-learning-questions label:has(input:checked) {
  background: #edf5d5;
  color: #34492f;
}

.capability-learning-questions input {
  margin-top: 2px;
  accent-color: #6d8d40;
}

.capability-learning-feedback {
  display: flex;
  gap: 10px;
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.55;
}

.capability-learning-feedback.is-passed {
  background: #eaf3d9;
  color: #3d5b35;
}

.capability-learning-feedback.is-retry {
  background: #fbebe4;
  color: #8b4d34;
}

.capability-profile-actions {
  display: flex !important;
  gap: 6px !important;
}

.capability-profile-actions .button {
  white-space: nowrap;
}

.capability-archive-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  border: 1px solid #29372d;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%, rgba(217, 243, 106, .16), transparent 24%),
    linear-gradient(140deg, #152019, #2a3b2d);
  color: #f7faf5;
}

.capability-archive-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.capability-archive-person .capability-avatar {
  width: 48px;
  height: 48px;
  background: #d9f36a;
  color: #26311f;
}

.capability-archive-person > div {
  display: grid;
  gap: 4px;
}

.capability-archive-person > div > span,
.capability-archive-switch > span,
.capability-archive-privacy > span {
  color: #a2b99a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-archive-person h3 {
  margin: 0;
  font-size: 20px;
}

.capability-archive-person p {
  margin: 0;
  color: rgba(247, 250, 245, .6);
  font-size: 10px;
}

.capability-archive-switch,
.capability-archive-privacy {
  display: grid;
  gap: 6px;
  min-width: 230px;
}

.capability-archive-switch select {
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 11px;
}

.capability-archive-privacy {
  justify-items: end;
}

.capability-archive-privacy strong {
  font-size: 11px;
}

.capability-archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .65fr);
  gap: 12px;
}

.capability-archive-ability-list {
  display: grid;
  gap: 5px;
}

.capability-archive-ability-list article {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1.4fr) 74px;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f6f8f4;
}

.capability-archive-ability-list article.is-focus {
  background: #eff5dc;
  box-shadow: inset 3px 0 #9fb94f;
}

.capability-archive-ability-list article > div:first-child {
  display: grid;
  gap: 3px;
}

.capability-archive-ability-list strong {
  font-size: 11px;
}

.capability-archive-ability-list article > div:first-child span,
.capability-archive-ability-list em small {
  color: #7b8678;
  font-size: 9px;
}

.capability-archive-level-bar {
  position: relative;
  overflow: visible;
  height: 7px;
  border-radius: 999px;
  background: #dfe5dc;
}

.capability-archive-level-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #658653, #b6d25e);
}

.capability-archive-level-bar b {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: #2e4031;
  transform: translateX(-1px);
}

.capability-archive-ability-list em {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  color: #344434;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.capability-archive-baseline > strong {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e5efcf;
  color: #496239;
  font-size: 9px;
}

.capability-archive-baseline h4 {
  margin: 16px 0 7px;
  font-size: 16px;
}

.capability-archive-baseline > p {
  margin: 0;
  color: #6d786a;
  font-size: 10px;
  line-height: 1.65;
}

.capability-archive-baseline dl {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid #e4e9e1;
}

.capability-archive-baseline dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
}

.capability-archive-baseline dt {
  color: #818c7e;
}

.capability-archive-baseline dd {
  margin: 0;
  color: #3d493c;
  font-weight: 700;
  text-align: right;
}

.capability-archive-path {
  display: grid;
  gap: 7px;
}

.capability-archive-path > article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e9e2;
  border-radius: 11px;
  background: #fafbf9;
}

.capability-archive-path > article.is-active {
  border-color: #c4d18d;
  background: #f5f8e9;
}

.capability-archive-path > article.is-risk {
  border-color: #ecd4c9;
  background: #fdf5f1;
}

.capability-archive-path > article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #e7ece4;
  color: #657061;
  font-size: 9px;
  font-weight: 850;
}

.capability-archive-path > article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.capability-archive-path small {
  color: #7c8779;
  font-size: 9px;
}

.capability-archive-path strong {
  font-size: 11px;
}

.capability-archive-path p {
  overflow: hidden;
  margin: 0;
  color: #707a6d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-archive-path > article > em {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #4d604b;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.capability-archive-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.capability-archive-record-list {
  display: grid;
  gap: 6px;
}

.capability-archive-record-list > article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 0;
  border-top: 1px solid #edf0ec;
}

.capability-archive-record-list > article:first-child {
  border-top: 0;
}

.capability-archive-record-list > article > span {
  align-self: start;
  padding: 5px 6px;
  border-radius: 7px;
  background: #e8eee4;
  color: #536451;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.capability-archive-record-list > article > span.is-good {
  background: #e6f0d5;
  color: #416039;
}

.capability-archive-record-list > article > span.is-risk {
  background: #fae8df;
  color: #995136;
}

.capability-archive-record-list > article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.capability-archive-record-list strong {
  font-size: 10px;
  line-height: 1.5;
}

.capability-archive-record-list p {
  margin: 0;
  color: #737e71;
  font-size: 9px;
  line-height: 1.5;
}

.capability-archive-record-list small {
  color: #90998e;
  font-size: 8px;
}

.capability-dashboard-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 26px;
  border: 1px solid #29372d;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(217, 243, 106, .18), transparent 25%),
    linear-gradient(140deg, #142019, #2b3c2f);
  color: #f7faf5;
}

.capability-dashboard-hero > div > span,
.capability-dashboard-hero aside > span {
  color: #a6bd9d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.capability-dashboard-hero h3 {
  margin: 7px 0;
  font-size: 23px;
}

.capability-dashboard-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(247, 250, 245, .63);
  font-size: 11px;
  line-height: 1.65;
}

.capability-dashboard-hero aside {
  display: grid;
  gap: 5px;
  min-width: 250px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}

.capability-dashboard-hero aside strong {
  font-size: 12px;
}

.capability-dashboard-hero aside small {
  color: rgba(247, 250, 245, .55);
  font-size: 9px;
}

.capability-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .65fr);
  gap: 12px;
  align-items: start;
}

.capability-dashboard-alerts {
  display: grid;
  gap: 7px;
}

.capability-dashboard-alerts > article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e4e9e1;
  border-radius: 11px;
  background: #fafbf9;
}

.capability-dashboard-alerts > article.tone-warning {
  border-color: #eadfae;
  background: #fcfaef;
}

.capability-dashboard-alerts > article.tone-active {
  border-color: #ccd9e8;
  background: #f3f7fb;
}

.capability-dashboard-alerts > article.tone-risk {
  border-color: #ecd3c7;
  background: #fcf4ef;
}

.capability-dashboard-alerts > article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #e7ece4;
  color: #647260;
  font-size: 9px;
  font-weight: 850;
}

.capability-dashboard-alerts article > div {
  display: grid;
  gap: 3px;
}

.capability-dashboard-alerts strong {
  font-size: 11px;
}

.capability-dashboard-alerts p,
.capability-dashboard-healthy p,
.capability-dashboard-principle p {
  margin: 0;
  color: #758072;
  font-size: 9px;
  line-height: 1.5;
}

.capability-dashboard-healthy {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: #eff5e3;
}

.capability-dashboard-healthy > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #759251;
  color: #fff;
}

.capability-dashboard-principle ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-dashboard-principle li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid #edf0ec;
}

.capability-dashboard-principle li:first-child {
  border-top: 0;
}

.capability-dashboard-principle li > span {
  color: #8a987f;
  font-size: 9px;
  font-weight: 850;
}

.capability-dashboard-principle li > div {
  display: grid;
  gap: 3px;
}

.capability-dashboard-principle strong {
  font-size: 10px;
}

.capability-dashboard-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.capability-dashboard-track-grid > article {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #e3e8e0;
  border-radius: 12px;
  background: #f8faf7;
  opacity: .7;
}

.capability-dashboard-track-grid > article.has-people {
  background: #fff;
  opacity: 1;
}

.capability-dashboard-track-grid header,
.capability-dashboard-track-grid header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.capability-dashboard-track-grid header > div {
  justify-content: flex-start;
}

.capability-dashboard-track-grid header strong {
  font-size: 11px;
}

.capability-dashboard-track-grid header span {
  padding: 3px 5px;
  border-radius: 999px;
  background: #e9eee6;
  color: #758171;
  font-size: 8px;
}

.capability-dashboard-track-grid header em {
  color: #536351;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.capability-dashboard-track-bar {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: #e3e8e0;
}

.capability-dashboard-track-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6e8f55, #bdd563);
}

.capability-dashboard-track-grid dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
}

.capability-dashboard-track-grid dl > div {
  display: grid;
  gap: 3px;
}

.capability-dashboard-track-grid dt {
  color: #8b9588;
  font-size: 8px;
}

.capability-dashboard-track-grid dd {
  margin: 0;
  color: #3e4a3d;
  font-size: 10px;
  font-weight: 800;
}

.capability-dashboard-gap-list {
  display: grid;
  gap: 6px;
}

.capability-dashboard-gap-list > article {
  display: grid;
  grid-template-columns: 30px minmax(145px, .8fr) minmax(180px, 1.2fr) 110px auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #e5e9e2;
  border-radius: 11px;
  background: #fafbf9;
}

.capability-dashboard-gap-list > article > span {
  color: #82907d;
  font-size: 9px;
  font-weight: 850;
}

.capability-dashboard-gap-list > article > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.capability-dashboard-gap-list strong {
  font-size: 11px;
}

.capability-dashboard-gap-list small {
  color: #7c8779;
  font-size: 9px;
}

.capability-dashboard-gap-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: #e3e8e0;
}

.capability-dashboard-gap-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #db8a62, #d8c85f);
}

.capability-dashboard-gap-list > article > em {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #4b5949;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.capability-program-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid #29372d;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(217, 243, 106, .17), transparent 25%),
    linear-gradient(140deg, #152019, #2b3d2f);
  color: #f7faf5;
}

.capability-program-hero > div > span,
.capability-program-overview > header span,
.capability-program-result-strip span {
  color: #9fb497;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-program-hero h3 {
  margin: 7px 0 5px;
  font-size: 22px;
}

.capability-program-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(247, 250, 245, .62);
  font-size: 10px;
  line-height: 1.65;
}

.capability-program-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.capability-program-list {
  display: grid;
  gap: 7px;
}

.capability-program-list > button {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid #e2e7df;
  border-radius: 11px;
  background: #f8faf7;
  color: #354034;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capability-program-list > button.active {
  border-color: #aebe75;
  background: #f1f6df;
  box-shadow: inset 3px 0 #8fac49;
}

.capability-program-list button > span,
.capability-program-list button > small {
  color: #7b8778;
  font-size: 8px;
}

.capability-program-list button > strong {
  font-size: 11px;
  line-height: 1.45;
}

.capability-program-list button > i,
.capability-program-stages article > i,
.capability-program-member-progress > i {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: #dfe5dc;
}

.capability-program-list button > i > b,
.capability-program-stages article > i > b,
.capability-program-member-progress > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #688854, #b9d15c);
}

.capability-program-detail {
  display: grid;
  gap: 12px;
}

.capability-program-overview > p {
  margin: 0 0 16px;
  color: #667363;
  font-size: 11px;
  line-height: 1.7;
}

.capability-program-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.capability-program-meta article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 10px;
  background: #f3f6f0;
}

.capability-program-meta span {
  color: #808b7d;
  font-size: 8px;
}

.capability-program-meta strong {
  font-size: 10px;
  line-height: 1.45;
}

.capability-program-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.capability-program-stages article {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #e4e9e1;
  border-radius: 11px;
  background: #f8faf7;
}

.capability-program-stages article.is-active {
  border-color: #d3ddaa;
  background: #f5f8e9;
}

.capability-program-stages article.is-done {
  border-color: #b9cc8d;
  background: #edf5db;
}

.capability-program-stages article > span {
  color: #84917f;
  font-size: 8px;
  font-weight: 850;
}

.capability-program-stages strong {
  font-size: 11px;
}

.capability-program-stages em {
  color: #6f7b6c;
  font-size: 9px;
  font-style: normal;
}

.capability-program-member-list {
  display: grid;
  gap: 7px;
}

.capability-program-member-list > article {
  display: grid;
  grid-template-columns: 38px minmax(180px, 1fr) minmax(150px, .8fr) 90px auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid #edf0ec;
}

.capability-program-member-list > article:first-child {
  border-top: 0;
}

.capability-program-member-list > article > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.capability-program-member-list strong {
  font-size: 10px;
}

.capability-program-member-list small,
.capability-program-member-progress > span {
  color: #7d887a;
  font-size: 8px;
}

.capability-program-member-progress {
  display: grid;
  gap: 4px;
}

.capability-program-member-list > article > em {
  padding: 5px 7px;
  border-radius: 999px;
  background: #e9eee6;
  color: #5d6b5a;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.capability-program-member-list > article > em.is-risk {
  background: #fae6dc;
  color: #9a5035;
}

.capability-program-member-list > article > em.is-active {
  background: #e7eef7;
  color: #506b8a;
}

.capability-program-result-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 100px 20px 100px auto;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  border: 1px solid #cbd7b4;
  border-radius: 14px;
  background: #f1f6e5;
}

.capability-program-result-strip > div {
  display: grid;
  gap: 4px;
}

.capability-program-result-strip strong {
  color: #3d5138;
  font-size: 11px;
}

.capability-program-result-strip > i {
  color: #87977b;
  font-style: normal;
  text-align: center;
}

.capability-program-participants {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid #dfe5dc;
  border-radius: 12px;
}

.capability-program-participants legend {
  padding: 0 7px;
  color: #4f5c4d;
  font-size: 10px;
  font-weight: 800;
}

.capability-program-participants legend em {
  color: #a35a3d;
  font-size: 8px;
  font-style: normal;
}

.capability-program-participants > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.capability-program-participants label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: #f5f7f3;
  cursor: pointer;
}

.capability-program-participants input {
  margin-top: 2px;
  accent-color: #6f8e48;
}

.capability-program-participants label > span {
  display: grid;
  gap: 3px;
}

.capability-program-participants strong {
  font-size: 10px;
}

.capability-program-participants small {
  color: #7d887a;
  font-size: 8px;
}

.capability-certification-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  padding: 24px 26px;
  border: 1px solid #29372d;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(217, 243, 106, .18), transparent 25%),
    linear-gradient(140deg, #142019, #2b3d2f);
  color: #f7faf5;
}

.capability-certification-hero > div > span,
.capability-certification-hero aside > span {
  color: #a3ba9b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.capability-certification-hero h3 {
  margin: 7px 0;
  font-size: 23px;
}

.capability-certification-hero p {
  max-width: 690px;
  margin: 0;
  color: rgba(247, 250, 245, .63);
  font-size: 10px;
  line-height: 1.65;
}

.capability-certification-hero aside {
  display: grid;
  gap: 5px;
  min-width: 280px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}

.capability-certification-hero aside strong {
  font-size: 10px;
  line-height: 1.5;
}

.capability-certification-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.capability-certification-levels article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid #dfe6d8;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbfcf9, #f0f5e8);
}

.capability-certification-levels article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #26372a;
  color: #d9f36a;
  font-size: 13px;
  font-weight: 850;
}

.capability-certification-levels h4 {
  margin: 4px 0 0;
  font-size: 14px;
}

.capability-certification-levels p {
  margin: 0;
  color: #697566;
  font-size: 10px;
  line-height: 1.6;
}

.capability-certification-levels small {
  margin-top: auto;
  color: #84907f;
  font-size: 8px;
}

.capability-certification-levels article > strong {
  color: #42543f;
  font-size: 9px;
  line-height: 1.55;
}

.capability-certification-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, .55fr);
  gap: 12px;
  align-items: start;
}

.capability-certification-readiness {
  display: grid;
  gap: 7px;
}

.capability-certification-readiness > article {
  display: grid;
  grid-template-columns: 38px minmax(150px, .8fr) minmax(230px, 1.3fr) 50px auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid #edf0ec;
}

.capability-certification-readiness > article:first-child {
  border-top: 0;
}

.capability-certification-person {
  display: grid;
  gap: 3px;
}

.capability-certification-person strong {
  font-size: 10px;
}

.capability-certification-person span {
  color: #7d887a;
  font-size: 8px;
}

.capability-certification-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.capability-certification-checks span {
  padding: 4px 6px;
  border-radius: 999px;
  background: #eef1ec;
  color: #899486;
  font-size: 8px;
}

.capability-certification-checks span.done {
  background: #e4efd1;
  color: #49633e;
}

.capability-certification-readiness > article > em {
  color: #788275;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.capability-certification-readiness > article > em.is-ready {
  color: #4e6c3e;
}

.capability-certification-rules ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-certification-rules li {
  padding: 11px 12px;
  border-left: 3px solid #d28a68;
  border-radius: 4px 9px 9px 4px;
  background: #fbf3ee;
  color: #6f5548;
  font-size: 9px;
  line-height: 1.55;
}

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

.capability-certificate-grid > article {
  overflow: hidden;
  padding: 18px;
  border: 1px solid #b9ca8c;
  border-radius: 14px;
  background:
    radial-gradient(circle at 95% 5%, rgba(217, 243, 106, .25), transparent 28%),
    linear-gradient(145deg, #fbfcf7, #eef4df);
}

.capability-certificate-grid article > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.capability-certificate-grid header span,
.capability-certificate-grid header em {
  color: #718164;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .08em;
}

.capability-certificate-grid article > div {
  margin: 24px 0;
}

.capability-certificate-grid article > div > span {
  color: #47603f;
  font-size: 24px;
  font-weight: 850;
}

.capability-certificate-grid h4 {
  margin: 5px 0;
  font-size: 15px;
}

.capability-certificate-grid p {
  margin: 0;
  color: #71806d;
  font-size: 9px;
}

.capability-certificate-grid dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid #dce4cf;
}

.capability-certificate-grid dl > div {
  display: grid;
  gap: 3px;
}

.capability-certificate-grid dt {
  color: #84917f;
  font-size: 8px;
}

.capability-certificate-grid dd {
  margin: 0;
  color: #42513f;
  font-size: 9px;
  font-weight: 750;
}

.capability-resource-hero,
.capability-resource-recommended {
  padding: 22px 24px;
  border: 1px solid #29372d;
  border-radius: 18px;
  background: linear-gradient(140deg, #152019, #2b3d2f);
  color: #f7faf5;
}
.capability-resource-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.capability-resource-hero span,.capability-resource-recommended header span { color:#a3ba9b;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-resource-hero h3,.capability-resource-recommended h3 { margin:7px 0 5px;font-size:21px; }
.capability-resource-hero p { max-width:680px;margin:0;color:rgba(247,250,245,.63);font-size:10px;line-height:1.65; }
.capability-resource-recommended { background:#eef4df;color:#344331;border-color:#cad7ae; }
.capability-resource-recommended > div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px; }
.capability-resource-recommended button,.capability-resource-grid button { display:grid;gap:6px;padding:14px;border:1px solid #dfe6d8;border-radius:11px;background:#fff;color:#354034;font:inherit;text-align:left;cursor:pointer; }
.capability-resource-recommended button span,.capability-resource-grid button span,.capability-resource-grid button small { color:#7a8875;font-size:8px; }
.capability-resource-recommended button strong,.capability-resource-grid button strong { font-size:11px; }
.capability-resource-recommended button small,.capability-resource-grid button p { margin:0;color:#73806f;font-size:9px;line-height:1.55; }
.capability-resource-toolbar { display:grid;gap:8px;padding:12px;border:1px solid var(--cap-line);border-radius:13px;background:#f4f7f1; }
.capability-resource-toolbar > input { min-height:39px;padding:0 12px;border:1px solid #d8dfd5;border-radius:9px;background:#fff;font:inherit;font-size:11px; }
.capability-resource-toolbar > div { display:flex;gap:5px;overflow-x:auto; }
.capability-resource-toolbar button { flex:0 0 auto;padding:7px 10px;border:0;border-radius:8px;background:#e7ece4;color:#657260;font:inherit;font-size:9px;cursor:pointer; }
.capability-resource-toolbar button.active { background:#26382a;color:#d9f36a; }
.capability-resource-layout { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:12px;align-items:start; }
.capability-resource-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.capability-resource-grid button.active { border-color:#aabe73;background:#f2f7e1;box-shadow:inset 3px 0 #8eaa48; }
.capability-resource-detail > p { color:#667363;font-size:10px;line-height:1.65; }
.capability-resource-abilities { display:flex;flex-wrap:wrap;gap:5px; }
.capability-resource-abilities span { padding:5px 7px;border-radius:999px;background:#eaf1da;color:#506244;font-size:8px; }
.capability-resource-detail h4 { margin:17px 0 8px;font-size:11px; }
.capability-resource-detail ol { display:grid;gap:7px;margin:0;padding-left:20px;color:#5f6e5b;font-size:10px;line-height:1.5; }
.capability-resource-owner { display:grid;gap:3px;margin-top:17px;padding:12px;border-radius:10px;background:#f3f6f0; }
.capability-resource-owner span,.capability-resource-owner small { color:#83907e;font-size:8px; }
.capability-resource-owner strong { font-size:10px; }
.capability-resource-assign { display:grid;gap:8px;margin-top:12px; }
.capability-resource-assign select { min-height:38px;padding:0 10px;border:1px solid #d7ded4;border-radius:9px;background:#fff;font:inherit;font-size:10px; }
.capability-impact-actions { display:flex;justify-content:flex-end; }
.capability-impact-evaluation-layout { display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;align-items:start; }
.capability-impact-evaluation-list { display:grid;gap:7px; }
.capability-impact-evaluation-list button { display:grid;gap:5px;padding:12px;border:1px solid #e1e6de;border-radius:10px;background:#f8faf7;color:#354034;font:inherit;text-align:left;cursor:pointer; }
.capability-impact-evaluation-list button.active { border-color:#aebe75;background:#f1f6df;box-shadow:inset 3px 0 #8fac49; }
.capability-impact-evaluation-list span,.capability-impact-evaluation-list small { color:#7c8879;font-size:8px; }
.capability-impact-evaluation-list strong { font-size:10px;line-height:1.45; }
.capability-evaluation-levels { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.capability-evaluation-levels article { display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:start;padding:13px;border:1px solid #e3e8e0;border-radius:11px;background:#f8faf7; }
.capability-evaluation-levels article>span { display:grid;width:27px;height:27px;place-items:center;border-radius:8px;background:#26382a;color:#d9f36a;font-size:8px;font-weight:850; }
.capability-evaluation-levels article>div { display:grid;gap:3px; }
.capability-evaluation-levels strong { font-size:10px; }
.capability-evaluation-levels small { color:#7c8779;font-size:8px;line-height:1.4; }
.capability-evaluation-levels em { color:#3f513c;font-size:16px;font-style:normal;font-weight:850; }
.capability-evaluation-levels article>i { grid-column:1/-1;overflow:hidden;height:5px;border-radius:999px;background:#dfe5dc; }
.capability-evaluation-levels article>i>b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6d8d54,#bad25d); }
.capability-evaluation-conclusion { display:grid;gap:7px;margin-top:14px;padding:15px;border-left:3px solid #9eb74f;border-radius:4px 11px 11px 4px;background:#f1f6e2; }
.capability-evaluation-conclusion span,.capability-evaluation-decision span { color:#798873;font-size:8px;font-weight:800; }
.capability-evaluation-conclusion strong { color:#3e5039;font-size:11px;line-height:1.65; }
.capability-evaluation-conclusion p { margin:0;color:#6d7869;font-size:9px;line-height:1.55; }
.capability-evaluation-decision { display:grid;grid-template-columns:.6fr 1.5fr .5fr;gap:8px;margin-top:10px; }
.capability-evaluation-decision>div { display:grid;gap:5px;padding:12px;border-radius:10px;background:#f4f6f2; }
.capability-evaluation-decision strong { font-size:9px;line-height:1.5; }
.capability-calendar-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border:1px solid #314035;border-radius:18px;background:linear-gradient(135deg,#17231b,#314634);color:#f6faf3; }
.capability-calendar-hero>div>span { color:#b7cb91;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-calendar-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-calendar-hero p { max-width:680px;margin:0;color:rgba(247,250,245,.65);font-size:10px;line-height:1.65; }
.capability-calendar-strip { display:grid;grid-template-columns:repeat(14,minmax(54px,1fr));gap:6px;overflow-x:auto;padding:10px;border:1px solid var(--cap-line);border-radius:14px;background:#f4f7f1; }
.capability-calendar-strip article { display:grid;gap:5px;min-width:54px;padding:10px 7px;border:1px solid #e0e6dc;border-radius:10px;background:#fff;text-align:center; }
.capability-calendar-strip article.today { border-color:#9db75a;background:#eff5db;box-shadow:inset 0 -3px #9db75a; }
.capability-calendar-strip span { color:#84907f;font-size:8px; }
.capability-calendar-strip strong { color:#3d4d3a;font-size:10px; }
.capability-calendar-strip em { color:#819363;font-size:8px;font-style:normal;font-weight:800; }
.capability-calendar-layout { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,.7fr);gap:12px;align-items:start; }
.capability-reminder-list { display:grid;gap:8px; }
.capability-reminder-list>article { display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px;border:1px solid #e1e6de;border-left:3px solid #9aae78;border-radius:10px;background:#fafbf9; }
.capability-reminder-list>article.is-high { border-left-color:#d9a64a; }
.capability-reminder-list>article.is-overdue { border-color:#eccac3;border-left-color:#c76554;background:#fff8f6; }
.capability-reminder-list>article.is-done { border-left-color:#afbbb0;opacity:.62; }
.capability-reminder-list>article>div:nth-child(2) { display:grid;gap:4px; }
.capability-reminder-list>article>div:nth-child(2)>span,.capability-reminder-list>article>em { color:#7c8978;font-size:8px;font-style:normal; }
.capability-reminder-list h4 { margin:0;color:#3c493a;font-size:10px; }
.capability-reminder-list p { margin:0;color:#788375;font-size:9px;line-height:1.5; }
.capability-reminder-date { display:grid;gap:3px;padding:8px 5px;border-radius:9px;background:#edf2e8;text-align:center; }
.capability-reminder-date strong { color:#435440;font-size:10px; }
.capability-reminder-date span { color:#84917f;font-size:8px; }
.capability-reminder-actions { display:flex;gap:6px; }
.capability-reminder-actions .button { white-space:nowrap; }
.capability-calendar-rhythm ol { display:grid;gap:8px;margin:0;padding:0;list-style:none; }
.capability-calendar-rhythm li { display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:center;padding:11px;border-radius:10px;background:#f2f5ef; }
.capability-calendar-rhythm li span { display:grid;height:28px;place-items:center;border-radius:8px;background:#2d4030;color:#d9f36a;font-size:8px;font-weight:850; }
.capability-calendar-rhythm li strong { color:#52604f;font-size:9px;line-height:1.45; }
.capability-briefing-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;border:1px solid #d6deca;border-radius:18px;background:linear-gradient(135deg,#f4f7ec,#e8efda);color:#344331; }
.capability-briefing-hero>div:first-child>span { color:#526c35;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-briefing-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-briefing-hero p { max-width:650px;margin:0;color:#586657;font-size:10px;line-height:1.65; }
.capability-briefing-actions { display:grid;gap:8px;justify-items:end; }
.capability-briefing-actions>span { color:#5b6a56;font-size:9px;font-weight:800; }
.capability-briefing-grid { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr);gap:12px;align-items:start; }
.capability-briefing-summary>p { margin:0;color:#667263;font-size:11px;line-height:1.8; }
.capability-briefing-summary>p strong { padding:0 3px;color:#334530;font-size:15px; }
.capability-briefing-decision { display:grid;gap:6px;margin-top:14px;padding:14px;border-left:3px solid #91aa52;border-radius:4px 11px 11px 4px;background:#f0f5df; }
.capability-briefing-decision span,.capability-briefing-decision small { color:#76836f;font-size:8px; }
.capability-briefing-decision strong { color:#3f503a;font-size:10px;line-height:1.6; }
.capability-briefing-next ol { display:grid;gap:8px;margin:0;padding:0;list-style:none; }
.capability-briefing-next li { display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;padding:10px;border-radius:10px;background:#f5f7f3; }
.capability-briefing-next li span { display:grid;height:27px;place-items:center;border-radius:8px;background:#324433;color:#d9f36a;font-size:8px;font-weight:850; }
.capability-briefing-next li strong { color:#52604e;font-size:9px;line-height:1.55; }
.capability-briefing-people,.capability-briefing-gaps { display:grid;gap:8px; }
.capability-briefing-people>article { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid #e1e6de;border-radius:10px;background:#fafbf9; }
.capability-briefing-people>article>div { display:grid;gap:4px; }
.capability-briefing-people strong { color:#435040;font-size:10px; }
.capability-briefing-people small { color:#7c8878;font-size:8px; }
.capability-briefing-gaps>article { display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:11px;border-radius:10px;background:#f3f6f0; }
.capability-briefing-gaps>article>span { color:#8a987f;font-size:8px;font-weight:850; }
.capability-briefing-gaps>article>div { display:grid;gap:3px; }
.capability-briefing-gaps strong { color:#465442;font-size:9px; }
.capability-briefing-gaps small { color:#7c8878;font-size:8px; }
.capability-briefing-gaps em { color:#667b48;font-size:9px;font-style:normal;font-weight:850; }
.capability-talent-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;border:1px solid #2d3b31;border-radius:18px;background:linear-gradient(135deg,#17231b,#344838);color:#f6faf3; }
.capability-talent-hero>div>span,.capability-talent-hero aside>span { color:#adc58b;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-talent-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-talent-hero p { max-width:650px;margin:0;color:rgba(247,250,245,.66);font-size:10px;line-height:1.65; }
.capability-talent-hero aside { display:grid;gap:5px;min-width:220px;padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.06); }
.capability-talent-hero aside strong { font-size:12px; }
.capability-talent-hero aside small { color:rgba(247,250,245,.58);font-size:8px; }
.capability-talent-matrix { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.capability-talent-matrix>article { display:grid;align-content:start;gap:9px;min-height:132px;padding:12px;border:1px solid #dfe5dc;border-radius:11px;background:#f7f9f5; }
.capability-talent-matrix>article.is-star { border-color:#9db45f;background:#eff5dc;box-shadow:inset 0 3px #94ad50; }
.capability-talent-matrix>article.is-watch { background:#faf8f4; }
.capability-talent-matrix>article>header { display:flex;justify-content:space-between;gap:8px; }
.capability-talent-matrix>article>header strong { color:#41503e;font-size:10px; }
.capability-talent-matrix>article>header span { color:#869181;font-size:8px; }
.capability-talent-matrix>article>div { display:grid;gap:6px; }
.capability-talent-matrix>article>div>small { color:#a0aaa0;font-size:8px; }
.capability-talent-matrix button { display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:7px;border:0;border-radius:9px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer; }
.capability-talent-matrix button>span:last-child { display:grid;gap:3px; }
.capability-talent-matrix button strong { color:#435040;font-size:9px; }
.capability-talent-matrix button small { color:#7f8b7a;font-size:8px; }
.capability-talent-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:12px;align-items:start; }
.capability-talent-bench { display:grid;gap:8px; }
.capability-talent-bench>article { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid #e0e6dd;border-radius:10px;background:#fafbf9; }
.capability-talent-bench>article>div { display:grid;gap:4px; }
.capability-talent-bench strong { color:#435040;font-size:10px; }
.capability-talent-bench p { margin:0;color:#788475;font-size:8px;line-height:1.5; }
.capability-talent-bench em { padding:5px 7px;border-radius:999px;background:#edf3dd;color:#647a43;font-size:8px;font-style:normal;font-weight:800; }
.capability-talent-form { display:grid;gap:9px; }
.capability-talent-form label { display:grid;gap:5px; }
.capability-talent-form label>span { color:#758271;font-size:8px;font-weight:800; }
.capability-talent-form>div { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.capability-talent-form input,.capability-talent-form select,.capability-talent-form textarea { width:100%;min-height:38px;padding:8px 10px;border:1px solid #d8dfd5;border-radius:9px;background:#fff;color:#3f4d3c;font:inherit;font-size:10px;box-sizing:border-box; }
.capability-governance-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;border:1px solid #3a453e;border-radius:18px;background:linear-gradient(135deg,#202925,#39463f);color:#f7faf5; }
.capability-governance-hero>div>span,.capability-governance-hero aside>span { color:#b9c8aa;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-governance-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-governance-hero p { max-width:660px;margin:0;color:rgba(247,250,245,.65);font-size:10px;line-height:1.65; }
.capability-governance-hero aside { display:grid;gap:5px;min-width:250px;padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.06); }
.capability-governance-hero aside strong { font-size:11px;line-height:1.45; }
.capability-governance-hero aside small { color:rgba(247,250,245,.58);font-size:8px; }
.capability-governance-layout { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.75fr);gap:12px;align-items:start; }
.capability-governance-checks { display:grid;gap:8px; }
.capability-governance-checks>article { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #dfe5dc;border-radius:10px;background:#fafbf9; }
.capability-governance-checks>article>span { display:grid;height:32px;place-items:center;border-radius:9px;background:#e8f0dd;color:#648044;font-size:10px;font-weight:850; }
.capability-governance-checks>article.has-risk>span { background:#fae9e3;color:#aa5547; }
.capability-governance-checks>article>div { display:grid;gap:4px; }
.capability-governance-checks strong { color:#435040;font-size:10px; }
.capability-governance-checks small { color:#7c8878;font-size:8px; }
.capability-governance-form { display:grid;gap:9px; }
.capability-governance-form label { display:grid;gap:5px; }
.capability-governance-form label>span { color:#758271;font-size:8px;font-weight:800; }
.capability-governance-form>div { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.capability-governance-form input,.capability-governance-form textarea { width:100%;min-height:38px;padding:8px 10px;border:1px solid #d8dfd5;border-radius:9px;background:#fff;color:#3f4d3c;font:inherit;font-size:10px;box-sizing:border-box; }
.capability-governance-form .capability-governance-check { display:grid;grid-template-columns:18px 1fr;gap:7px;align-items:center;padding:9px;border-radius:9px;background:#f2f5ef; }
.capability-governance-form .capability-governance-check input { width:16px;min-height:16px;padding:0; }
.capability-governance-permissions { display:grid;gap:8px; }
.capability-governance-permissions>article { display:grid;grid-template-columns:90px repeat(3,minmax(0,1fr));gap:12px;align-items:start;padding:12px;border:1px solid #e0e6dd;border-radius:10px;background:#fafbf9; }
.capability-governance-permissions>article>strong { color:#3f503c;font-size:10px; }
.capability-governance-permissions>article>div { display:grid;gap:4px; }
.capability-governance-permissions span { color:#879282;font-size:8px;font-weight:800; }
.capability-governance-permissions p { margin:0;color:#626f5f;font-size:9px;line-height:1.5; }
.capability-governance-audit { display:grid;gap:7px; }
.capability-governance-audit>article { display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px;border-bottom:1px solid #e6eae3; }
.capability-governance-audit>article>span,.capability-governance-audit>article>em { color:#84907f;font-size:8px;font-style:normal; }
.capability-governance-audit>article>div { display:grid;gap:4px; }
.capability-governance-audit strong { color:#42503f;font-size:9px; }
.capability-governance-audit p { margin:0;color:#748070;font-size:8px;line-height:1.5; }
.capability-launch-hero { display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:center;padding:24px;border:1px solid #35443a;border-radius:18px;background:radial-gradient(circle at 82% 18%,rgba(190,220,108,.18),transparent 30%),linear-gradient(135deg,#1f2c24,#34463a);color:#f7faf5; }
.capability-launch-hero>div { display:grid;gap:7px; }
.capability-launch-hero>div>span { color:#bad66f;font-size:9px;font-weight:850;letter-spacing:.12em; }
.capability-launch-hero h3 { margin:0;font-size:23px; }
.capability-launch-hero p { max-width:720px;margin:0;color:rgba(247,250,245,.68);font-size:10px;line-height:1.65; }
.capability-launch-actions { display:flex;gap:8px;margin-top:9px; }
.capability-launch-actions .button.secondary { border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#f7faf5; }
.capability-launch-hero>aside { display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:5px 12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07); }
.capability-launch-hero>aside>span,.capability-launch-hero>aside>small { color:rgba(247,250,245,.62);font-size:8px; }
.capability-launch-hero>aside>strong { font-size:16px; }
.capability-launch-hero>aside>small { grid-column:1/-1;line-height:1.45; }
.capability-launch-progress { grid-column:2;grid-row:1/3;display:grid;width:70px;height:70px;place-items:center;border-radius:50%;background:conic-gradient(#b8d866 var(--launch-progress),rgba(255,255,255,.12) 0); }
.capability-launch-progress::before { content:"";grid-area:1/1;width:54px;height:54px;border-radius:50%;background:#2d3d32; }
.capability-launch-progress i { grid-area:1/1;z-index:1;color:#fff;font-size:12px;font-style:normal;font-weight:850; }
.capability-launch-layout { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:12px;align-items:start; }
.capability-launch-gates { display:grid;gap:8px; }
.capability-launch-gates>article { display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #e2e7df;border-radius:11px;background:#fafbf9; }
.capability-launch-gates>article>span { display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:#fff0d8;color:#8e5a20;font-size:9px;font-weight:850; }
.capability-launch-gates>article.is-passed>span { background:#dcebdd;color:#35643d; }
.capability-launch-gates>article>div { display:grid;gap:4px; }
.capability-launch-gates strong { color:#40503e;font-size:10px; }
.capability-launch-gates small { color:#7b8877;font-size:8px;line-height:1.45; }
.capability-launch-blockers { display:grid;gap:8px; }
.capability-launch-blockers>button { display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;width:100%;padding:11px;border:1px solid #ead9d2;border-radius:10px;background:#fff9f6;text-align:left;cursor:pointer; }
.capability-launch-blockers>button>span:first-child { display:grid;height:27px;place-items:center;border-radius:8px;background:#f8e2da;color:#a65145;font-size:10px;font-weight:900; }
.capability-launch-blockers>button>span:last-child { display:grid;gap:4px; }
.capability-launch-blockers strong { color:#60463f;font-size:9px; }
.capability-launch-blockers small { color:#8c756f;font-size:8px;line-height:1.45; }
.capability-launch-clear { display:grid;justify-items:center;gap:6px;padding:24px 10px;text-align:center; }
.capability-launch-clear>span { display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:#dcebdd;color:#35643d;font-size:16px;font-weight:900; }
.capability-launch-clear strong { color:#3f503c;font-size:11px; }
.capability-launch-clear small { color:#7d8979;font-size:8px; }
.capability-launch-waves { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.capability-launch-waves>article { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border:1px solid #e0e6dd;border-radius:11px;background:#fafbf9; }
.capability-launch-waves>article>div:first-child { display:grid;gap:3px; }
.capability-launch-waves>article>div:first-child span { color:#84907f;font-size:8px; }
.capability-launch-waves>article>div:first-child strong { color:#40503e;font-size:11px; }
.capability-launch-waves dl { grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0; }
.capability-launch-waves dl>div { display:grid;gap:3px;padding:6px;border-radius:7px;background:#f0f4ed;text-align:center; }
.capability-launch-waves dt { color:#879383;font-size:7px; }
.capability-launch-waves dd { margin:0;color:#435240;font-size:11px;font-weight:850; }
.capability-launch-waves em { align-self:start;padding:4px 6px;border-radius:999px;background:#edf0ec;color:#687166;font-size:8px;font-style:normal;font-weight:800; }
.capability-launch-waves>article.is-ready em { background:#dcebdd;color:#35643d; }
.capability-launch-waves>article.is-working em { background:#fff0d8;color:#8e5a20; }
.capability-launch-cadence { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.capability-launch-cadence>article { display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #e1e6de;border-radius:10px;background:#fafbf9; }
.capability-launch-cadence>article>span { display:grid;height:36px;place-items:center;border-radius:9px;background:#eaf1db;color:#5f7640;font-size:9px;font-weight:850; }
.capability-launch-cadence>article>div { display:grid;gap:4px; }
.capability-launch-cadence strong { color:#41503e;font-size:10px; }
.capability-launch-cadence p { margin:0;color:#778374;font-size:8px;line-height:1.45; }
.capability-planning-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;border:1px solid #cbd8ae;border-radius:18px;background:linear-gradient(135deg,#f3f7e8,#e6efcf);color:#344331; }
.capability-planning-hero>div>span,.capability-planning-hero aside>span { color:#526c35;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-planning-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-planning-hero p { max-width:660px;margin:0;color:#586657;font-size:10px;line-height:1.65; }
.capability-planning-hero aside { display:grid;gap:5px;min-width:220px;padding:14px;border:1px solid #c7d4a8;border-radius:12px;background:rgba(255,255,255,.58); }
.capability-planning-hero aside strong { color:#3d5037;font-size:19px; }
.capability-planning-hero aside small { color:#5b6a56;font-size:8px; }
.capability-planning-roadmap { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.capability-planning-roadmap>article { display:grid;align-content:start;gap:9px;min-height:210px;padding:11px;border-radius:12px;background:#f3f6f0; }
.capability-planning-roadmap>article>header { display:flex;align-items:center;justify-content:space-between; }
.capability-planning-roadmap>article>header strong { color:#354733;font-size:13px; }
.capability-planning-roadmap>article>header span { color:#84907f;font-size:8px; }
.capability-planning-roadmap>article>div { display:grid;gap:7px; }
.capability-planning-roadmap>article>div>small { color:#98a294;font-size:8px; }
.capability-planning-roadmap section { display:grid;gap:6px;padding:11px;border:1px solid #dce3d7;border-radius:10px;background:#fff; }
.capability-planning-roadmap section.is-active { border-color:#9eb65f;box-shadow:inset 3px 0 #9eb65f; }
.capability-planning-roadmap section>span { color:#7f8c79;font-size:8px; }
.capability-planning-roadmap h4 { margin:0;color:#42513e;font-size:10px;line-height:1.45; }
.capability-planning-roadmap p { margin:0;color:#788475;font-size:8px;line-height:1.45; }
.capability-planning-roadmap footer { display:flex;align-items:center;justify-content:space-between;gap:6px; }
.capability-planning-roadmap footer em { color:#7f8a7b;font-size:8px;font-style:normal; }
.capability-planning-budget { display:grid;gap:4px; }
.capability-planning-budget>i { overflow:hidden;height:5px;border-radius:999px;background:#e0e6dc; }
.capability-planning-budget>i>b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69894f,#bdd564); }
.capability-planning-budget small { color:#82907d;font-size:8px; }
.capability-planning-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);gap:12px;align-items:start; }
.capability-demand-list { display:grid;gap:8px; }
.capability-demand-list>article { display:grid;grid-template-columns:minmax(0,1fr) 230px auto;gap:12px;align-items:center;padding:13px;border:1px solid #dfe5dc;border-left:3px solid #9cae84;border-radius:10px;background:#fafbf9; }
.capability-demand-list>article.is-high { border-left-color:#d9a24b; }
.capability-demand-list>article>div:first-child { display:grid;gap:5px; }
.capability-demand-list>article>div:first-child>span,.capability-demand-list>article>div:first-child>small { color:#7d8978;font-size:8px;line-height:1.45; }
.capability-demand-list h4 { margin:0;color:#40503d;font-size:10px; }
.capability-demand-list p { margin:0;color:#6f7c6b;font-size:9px;line-height:1.55; }
.capability-demand-list dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0; }
.capability-demand-list dl>div { display:grid;gap:3px; }
.capability-demand-list dt { color:#8a9585;font-size:7px; }
.capability-demand-list dd { margin:0;color:#546350;font-size:8px;font-weight:750; }
.capability-demand-list>article>em { color:#6f854c;font-size:8px;font-style:normal;font-weight:800; }
.capability-demand-form { display:grid;gap:9px; }
.capability-demand-form label { display:grid;gap:5px; }
.capability-demand-form label>span { color:#758271;font-size:8px;font-weight:800; }
.capability-demand-form>div { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.capability-demand-form input,.capability-demand-form select,.capability-demand-form textarea { width:100%;min-height:38px;padding:8px 10px;border:1px solid #d8dfd5;border-radius:9px;background:#fff;color:#3f4d3c;font:inherit;font-size:10px;box-sizing:border-box; }
.capability-delivery-hero { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 24px;border:1px solid #2e3d32;border-radius:18px;background:linear-gradient(135deg,#17231b,#324737);color:#f7faf5; }
.capability-delivery-hero>div>span,.capability-delivery-hero aside>span { color:#aec591;font-size:9px;font-weight:850;letter-spacing:.1em; }
.capability-delivery-hero h3 { margin:7px 0 5px;font-size:21px; }
.capability-delivery-hero p { max-width:650px;margin:0;color:rgba(247,250,245,.66);font-size:10px;line-height:1.65; }
.capability-delivery-hero aside { display:grid;gap:5px;min-width:220px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06); }
.capability-delivery-hero aside strong { font-size:14px; }
.capability-delivery-hero aside small { color:rgba(247,250,245,.58);font-size:8px; }
.capability-session-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.capability-session-grid>article { display:grid;align-content:start;gap:9px;padding:14px;border:1px solid #dfe5dc;border-radius:12px;background:#fafbf9; }
.capability-session-grid>article.is-open { border-color:#a9bd73;box-shadow:inset 0 3px #9db45f; }
.capability-session-grid>article.is-ended { opacity:.7; }
.capability-session-grid>article>header,.capability-session-grid>article>footer { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.capability-session-grid>article>header span,.capability-session-grid>article>header em,.capability-session-grid>article>footer>span { color:#7d8978;font-size:8px;font-style:normal; }
.capability-session-grid h4 { margin:0;color:#3f4e3c;font-size:11px;line-height:1.45; }
.capability-session-grid>article>p { margin:0;color:#748071;font-size:9px; }
.capability-session-grid dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0; }
.capability-session-grid dl>div { display:grid;gap:3px; }
.capability-session-grid dt { color:#899485;font-size:7px; }
.capability-session-grid dd { margin:0;color:#536050;font-size:8px;line-height:1.4; }
.capability-session-capacity { display:grid;gap:4px; }
.capability-session-capacity>i { overflow:hidden;height:5px;border-radius:999px;background:#dfe5dc; }
.capability-session-capacity>i>b { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c8b53,#bcd363); }
.capability-session-capacity small { color:#84907f;font-size:8px; }
.capability-session-quality { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
.capability-session-quality>div { display:grid;gap:3px;padding:7px;border-radius:8px;background:#eef2ea; }
.capability-session-quality span { color:#84907f;font-size:7px; }
.capability-session-quality strong { color:#4a5b46;font-size:9px; }
.capability-session-roster { display:grid;gap:5px;padding-top:9px;border-top:1px solid #e2e7df; }
.capability-session-roster>strong { color:#64715f;font-size:8px; }
.capability-session-roster>div { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:7px;background:#f0f3ed; }
.capability-session-roster span { color:#687564;font-size:8px; }
.capability-session-roster button { padding:4px 7px;border:0;border-radius:6px;background:#334734;color:#dff06f;font:inherit;font-size:7px;cursor:pointer; }
.capability-delivery-layout { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.7fr);gap:12px;align-items:start; }
.capability-instructor-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.capability-instructor-grid>article { display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px;border:1px solid #e0e6dd;border-radius:10px;background:#fafbf9; }
.capability-instructor-grid>article>div { display:grid;gap:4px; }
.capability-instructor-grid>article>div>span { color:#7e8b79;font-size:8px; }
.capability-instructor-grid h4 { margin:0;color:#42503f;font-size:10px; }
.capability-instructor-grid p { margin:0;color:#748070;font-size:8px;line-height:1.5; }
.capability-instructor-grid dl { grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;padding-top:8px;border-top:1px solid #e3e8e0; }
.capability-instructor-grid dl>div { display:grid;gap:3px; }
.capability-instructor-grid dt { color:#8b9686;font-size:7px; }
.capability-instructor-grid dd { margin:0;color:#4d5d49;font-size:9px;font-weight:800; }
.capability-delivery-create details { margin-top:14px;padding-top:12px;border-top:1px solid #e1e6de; }
.capability-delivery-create summary { color:#556552;font-size:9px;font-weight:800;cursor:pointer; }
.capability-session-form { display:grid;gap:9px;margin-top:9px; }
.capability-session-form label { display:grid;gap:5px; }
.capability-session-form label>span { color:#758271;font-size:8px;font-weight:800; }
.capability-session-form>div { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.capability-session-form input,.capability-session-form select { width:100%;min-height:38px;padding:8px 10px;border:1px solid #d8dfd5;border-radius:9px;background:#fff;color:#3f4d3c;font:inherit;font-size:10px;box-sizing:border-box; }
.capability-feedback-panel>div { display:grid;gap:8px; }
.capability-feedback-panel form { display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(100px,.65fr)) minmax(220px,1.5fr) auto;gap:9px;align-items:end;padding:12px;border:1px solid #dfe5dc;border-radius:11px;background:#fafbf9; }
.capability-feedback-panel form>div { display:grid;gap:4px;align-self:center; }
.capability-feedback-panel form>div strong { color:#42503f;font-size:10px; }
.capability-feedback-panel form>div span { color:#7e897a;font-size:8px; }
.capability-feedback-panel label { display:grid;gap:5px; }
.capability-feedback-panel label>span { color:#788574;font-size:8px;font-weight:800; }
.capability-feedback-panel select,.capability-feedback-panel textarea { width:100%;min-height:37px;padding:7px 9px;border:1px solid #d8dfd5;border-radius:8px;background:#fff;color:#42503f;font:inherit;font-size:9px;box-sizing:border-box; }
.capability-feedback-insights { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.capability-feedback-insights>article { display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:12px;border:1px solid #e0e6dd;border-radius:10px;background:#fafbf9; }
.capability-feedback-insights>article>span { display:grid;height:36px;place-items:center;border-radius:9px;background:#eaf1db;color:#5f7640;font-size:10px;font-weight:850; }
.capability-feedback-insights>article>div { display:grid;gap:4px; }
.capability-feedback-insights strong { color:#42503f;font-size:9px; }
.capability-feedback-insights p { margin:0;color:#6f7c6b;font-size:9px;line-height:1.5; }
.capability-feedback-insights small { color:#84907f;font-size:8px; }

/* Capability contrast contract: every light-on-dark workspace surface keeps
   a solid fallback when gradients are unavailable or a theme flattens them. */
.capability-hero,
.capability-track-overview,
.capability-archive-hero,
.capability-dashboard-hero,
.capability-program-hero,
.capability-certification-hero,
.capability-resource-hero,
.capability-calendar-hero,
.capability-talent-hero,
.capability-governance-hero,
.capability-launch-hero,
.capability-delivery-hero,
.capability-guide-intro,
.capability-guide-center.is-collapsed {
  background-color: #1d2b21;
  color: #f7faf5;
}

.capability-nav-groups > button.active {
  background-color: #26372b;
  color: #f7faf4;
}

.capability-briefing-hero,
.capability-planning-hero,
.capability-lesson-hero,
.capability-certification-levels article {
  background-color: #f2f6e9;
  color: #344331;
}

.capability-impact-hero > div > span {
  color: #4e7059;
}

@media (max-width: 1180px) {
  .capability-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-track-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-metric-grid {
    grid-template-columns: 1fr;
  }

  .capability-candidate-list {
    grid-template-columns: 1fr;
  }

  .capability-candidate-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-guide-center {
    grid-template-columns: 1fr;
    background: #f8faf5;
  }

  .capability-guide-intro {
    border-radius: 12px;
    background: linear-gradient(135deg, #203027, #314339);
  }

  .capability-guide-center.is-collapsed {
    grid-template-columns: minmax(0, 1fr) 150px auto auto;
    background: linear-gradient(135deg, #25352b, #33483a);
  }

  .capability-impact-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .capability-calendar-layout {
    grid-template-columns: 1fr;
  }

  .capability-briefing-grid {
    grid-template-columns: 1fr;
  }

  .capability-talent-layout {
    grid-template-columns: 1fr;
  }

  .capability-governance-layout {
    grid-template-columns: 1fr;
  }

  .capability-launch-layout {
    grid-template-columns: 1fr;
  }

  .capability-launch-waves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-planning-roadmap {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .capability-planning-layout {
    grid-template-columns:1fr;
  }

  .capability-session-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .capability-delivery-layout {
    grid-template-columns:1fr;
  }

  .capability-feedback-panel form {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .capability-feedback-panel form>div,
  .capability-feedback-comment {
    grid-column:1/-1;
  }
}

@media (max-width: 820px) {
  .capability-hero,
  .capability-today-grid,
  .capability-coach-grid {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .capability-hero {
    flex-direction: column;
  }

  .capability-launch-hero {
    grid-template-columns: 1fr;
  }

  .capability-launch-hero > aside {
    max-width: 330px;
  }

  .capability-pilot-badge {
    width: 100%;
  }

  .capability-nav-groups {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .capability-nav-groups::-webkit-scrollbar {
    display: none;
  }

  .capability-nav-groups > button {
    flex: 0 0 190px;
  }

  .capability-nav-pages {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .capability-view-context {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-access-block,
  .capability-binding-bridge {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-data-explanation {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .capability-data-explanation > button {
    grid-column: 2;
    justify-self: start;
  }

  .capability-guide-center.is-collapsed {
    grid-template-columns: minmax(0, 1fr) 120px auto;
  }

  .capability-guide-center.is-collapsed > .capability-guide-link {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .capability-onboarding-overview {
    grid-template-columns: 1fr;
  }

  .capability-onboarding-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-view-context-actions {
    width: 100%;
  }

  .capability-view-context-actions label {
    flex: 1 1 auto;
  }

  .capability-view-context-actions select {
    width: 100%;
  }

  .capability-assignment {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .capability-assignment-action {
    grid-column: 2;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: stretch;
  }

  .capability-review-list > article {
    grid-template-columns: 1fr;
  }

  .capability-review-evidence {
    grid-template-columns: 1fr;
  }

  .capability-lesson-framework {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-archive-record-grid {
    grid-template-columns: 1fr;
  }

  .capability-dashboard-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-program-layout {
    grid-template-columns: 1fr;
  }

  .capability-certification-grid {
    grid-template-columns: 1fr;
  }

  .capability-resource-layout {
    grid-template-columns: 1fr;
  }

  .capability-impact-evaluation-layout {
    grid-template-columns: 1fr;
  }

  .capability-program-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-program-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-profile-list > article {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .capability-profile-list > article > div:not(.capability-profile-identity) {
    grid-column: 2;
  }

  .capability-profile-list > article > .capability-profile-actions {
    grid-column: 3;
  }

  .capability-profile-list > article > em,
  .capability-profile-list > article > button {
    grid-column: 3;
  }

  .capability-track-overview > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .capability-review-actions {
    justify-content: flex-end;
  }

  .capability-catalog-grid,
  .capability-validation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .capability-hero {
    padding: 24px;
  }

  .capability-summary-grid,
  .capability-management-summary,
  .capability-review-summary,
  .capability-catalog-grid,
  .capability-validation-grid {
    grid-template-columns: 1fr;
  }

  .capability-onboarding-overview ol,
  .capability-onboarding-steps {
    grid-template-columns: 1fr;
  }

  .capability-guide-steps li {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  .capability-guide-steps li > .button,
  .capability-guide-steps li > em {
    grid-column: 2;
    justify-self: start;
  }

  .capability-guide-center.is-collapsed {
    grid-template-columns: 1fr;
  }

  .capability-guide-mini-progress {
    max-width: 220px;
  }

  .capability-demo-tour > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-demo-tour > footer > div {
    justify-content: flex-end;
  }

  .capability-demo-tour-content {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px;
  }

  .capability-demo-tour-content > span {
    height: 40px;
  }

  .capability-launch-waves,
  .capability-launch-cadence {
    grid-template-columns: 1fr;
  }

  .capability-launch-gates > article,
  .capability-launch-cadence > article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .capability-launch-gates > article .button,
  .capability-launch-cadence > article .button {
    grid-column: 2;
    justify-self: start;
  }

  .capability-launch-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-onboarding-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .capability-onboarding-person > em {
    grid-column: 2;
    width: fit-content;
  }

  .capability-review-sla {
    grid-template-columns: 1fr;
  }

  .capability-review-sla > small {
    text-align: left;
  }

  .capability-track-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-workspace-nav {
    padding: 8px;
    border-radius: 15px;
  }

  .capability-nav-groups > button {
    flex-basis: 164px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 8px 9px;
  }

  .capability-nav-groups > button > span:first-child {
    width: 30px;
    height: 30px;
  }

  .capability-nav-pages {
    grid-template-columns: 1fr;
    padding-left: 7px;
  }

  .capability-nav-pages > div:first-child {
    display: none;
  }

  .capability-view-context-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-team-list article {
    grid-template-columns: 38px 1fr;
  }

  .capability-team-gap,
  .capability-team-rate {
    grid-column: 2;
    text-align: left;
  }

  .capability-stage-track {
    overflow-x: auto;
    grid-template-columns: repeat(5, 72px);
  }

  .capability-candidate-list > article,
  .capability-diagnostic-list > label {
    grid-template-columns: 1fr;
  }

  .capability-candidate-toolbar {
    grid-template-columns: 1fr;
  }

  .capability-candidate-batch {
    grid-template-columns: 1fr;
  }

  .capability-candidate-batch > span {
    grid-column: auto;
    text-align: left;
  }

  .capability-candidate-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .capability-candidate-check {
    justify-self: start;
  }

  .capability-diagnostic-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-form-grid {
    grid-template-columns: 1fr;
  }

  .capability-form-wide {
    grid-column: auto;
  }

  .capability-form-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-lesson-hero,
  .capability-lesson-case-grid,
  .capability-lesson-framework,
  .capability-archive-grid,
  .capability-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .capability-dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-program-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-certification-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-resource-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-calendar-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-briefing-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-talent-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-governance-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-planning-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-delivery-hero {
    align-items:stretch;
    flex-direction:column;
  }

  .capability-briefing-actions {
    justify-items:stretch;
  }

  .capability-certification-hero aside {
    min-width: 0;
  }

  .capability-program-meta,
  .capability-program-participants > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-dashboard-hero aside {
    min-width: 0;
  }

  .capability-archive-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-archive-switch,
  .capability-archive-privacy {
    justify-items: stretch;
    min-width: 0;
  }

  .capability-archive-ability-list article,
  .capability-archive-path > article {
    grid-template-columns: 1fr;
  }

  .capability-archive-path > article > em {
    justify-items: start;
  }

  .capability-dashboard-alerts > article,
  .capability-dashboard-gap-list > article {
    grid-template-columns: 1fr;
  }

  .capability-dashboard-track-grid {
    grid-template-columns: 1fr;
  }

  .capability-program-list,
  .capability-program-stages,
  .capability-program-meta,
  .capability-program-participants > div,
  .capability-program-member-list > article,
  .capability-program-result-strip {
    grid-template-columns: 1fr;
  }

  .capability-certification-levels,
  .capability-certificate-grid,
  .capability-certification-readiness > article {
    grid-template-columns: 1fr;
  }

  .capability-resource-recommended > div,
  .capability-resource-grid,
  .capability-evaluation-levels,
  .capability-evaluation-decision {
    grid-template-columns: 1fr;
  }

  .capability-reminder-list>article {
    grid-template-columns:48px minmax(0,1fr);
  }

  .capability-reminder-list>article>em,
  .capability-reminder-actions {
    grid-column:2;
  }

  .capability-reminder-actions {
    flex-wrap:wrap;
  }

  .capability-briefing-people>article {
    grid-template-columns:34px minmax(0,1fr);
  }

  .capability-briefing-people>article>.button {
    grid-column:2;
    justify-self:start;
  }

  .capability-talent-matrix {
    grid-template-columns:1fr;
  }

  .capability-talent-bench>article {
    grid-template-columns:34px minmax(0,1fr);
  }

  .capability-talent-bench>article>em {
    grid-column:2;
    justify-self:start;
  }

  .capability-governance-permissions>article,
  .capability-governance-audit>article {
    grid-template-columns:1fr;
  }

  .capability-planning-roadmap {
    grid-template-columns:1fr;
  }

  .capability-demand-list>article {
    grid-template-columns:1fr;
  }

  .capability-session-grid,
  .capability-instructor-grid {
    grid-template-columns:1fr;
  }

  .capability-feedback-panel form,
  .capability-feedback-insights {
    grid-template-columns:1fr;
  }

  .capability-feedback-panel form>div,
  .capability-feedback-comment {
    grid-column:auto;
  }

  .capability-scenario-question {
    padding-left: 24px;
  }

  .capability-scenario-feedback {
    margin-left: 24px;
  }

  .capability-evidence-chain {
    overflow-x: auto;
    max-width: 100%;
  }
}

.app-loading-screen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: var(--bg);
}

.app-loading-screen[hidden] { display: none; }

.app-loading-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 16px;
  min-width: min(360px, calc(100vw - 48px));
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(15, 23, 42, .10);
}

.app-loading-card > div:nth-child(2) { display: grid; gap: 3px; }
.app-loading-card strong { color: var(--ink); font-size: 18px; letter-spacing: .02em; }
.app-loading-card span, .app-loading-card p { color: var(--muted); font-size: 13px; }
.app-loading-card p { grid-column: 1 / -1; margin: 0; text-align: center; }
.app-loading-card i {
  grid-column: 1 / -1;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}
.app-loading-card i::after {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary-top);
  content: "";
  animation: app-loading-slide 1.05s ease-in-out infinite;
}

@keyframes app-loading-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-card i::after { animation: none; transform: translateX(70%); }
}

/* Local prototype: long-form knowledge navigation */
.knowledge-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
}

.knowledge-list {
  min-height: 0;
  flex: 1 1 auto;
}

.knowledge-drawer-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.knowledge-drawer-header > div {
  display: grid;
  gap: 2px;
}

.knowledge-drawer-header strong {
  color: var(--ink);
  font-size: 16px;
}

.knowledge-doc-button {
  padding-right: 42px;
}

.knowledge-doc-menu {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
}

.knowledge-doc-menu summary {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  list-style: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.knowledge-doc-menu summary::-webkit-details-marker {
  display: none;
}

.knowledge-doc-menu summary:hover,
.knowledge-doc-menu[open] summary {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.knowledge-doc-menu-popover {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 116px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(30, 41, 59, 0.16);
}

.knowledge-doc-menu .knowledge-doc-delete {
  position: static;
  width: 100%;
  opacity: 1;
  pointer-events: auto;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  text-align: left;
  line-height: 1.2;
}

.knowledge-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.knowledge-reader-title {
  min-width: 0;
}

.knowledge-reader-title h3,
.knowledge-reader-title span,
.knowledge-reader-title .eyebrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-reader-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.knowledge-reader-actions .button {
  min-height: 34px;
  padding: 6px 10px;
}

.knowledge-articles-trigger {
  display: none;
}

.knowledge-toc-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 72;
  display: flex;
  width: min(380px, calc(100vw - 24px));
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 28px));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.knowledge-toc-drawer.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.knowledge-toc-drawer .knowledge-drawer-header {
  display: flex;
}

.knowledge-toc-title {
  margin: 0;
  padding: 10px 11px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.knowledge-toc-list {
  display: grid;
  min-height: 0;
  gap: 3px;
  overflow-y: auto;
  padding-right: 3px;
}

.knowledge-toc-link {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.knowledge-toc-link.level-3 {
  padding-left: 24px;
  color: var(--muted);
  font-size: 12px;
}

.knowledge-toc-link:hover {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

.knowledge-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 68;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.knowledge-drawer-backdrop[hidden] {
  display: none;
}

.knowledge-back-to-top {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  min-width: 66px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(var(--primary-rgb), 0.42);
  border-radius: 999px;
  background: var(--primary-top);
  box-shadow: 0 10px 26px var(--primary-shadow), 0 2px 8px rgba(15, 23, 42, 0.16);
  color: var(--primary-fg);
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, visibility 0.18s ease;
}

.knowledge-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.knowledge-back-to-top:hover {
  box-shadow: 0 14px 32px var(--primary-shadow), 0 3px 10px rgba(15, 23, 42, 0.20);
  transform: translateY(-2px);
}

.knowledge-back-to-top:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), 0.22);
  outline-offset: 3px;
}

.knowledge-back-to-top-icon {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.knowledge-back-to-top-label {
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.markdown-rendered h2[id],
.markdown-rendered h3[id] {
  scroll-margin-top: 116px;
}

@media (max-width: 1120px) {
  .knowledge-sidebar {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 72;
    width: min(390px, calc(100vw - 24px));
    height: auto;
    max-height: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 28px));
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .knowledge-sidebar.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .knowledge-sidebar .knowledge-drawer-header {
    display: flex;
  }

  .knowledge-articles-trigger {
    display: inline-flex;
  }

  .knowledge-reader-header {
    top: 0;
  }

  .knowledge-doc-menu .knowledge-doc-delete {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 720px) {
  .knowledge-reader-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
  }

  .knowledge-reader-header h3 {
    margin-bottom: 2px;
    font-size: 17px;
  }

  .knowledge-reader-title .eyebrow,
  .knowledge-reader-title > span {
    display: none;
  }

  .knowledge-reader-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-reader-actions .button {
    justify-content: center;
  }

  .knowledge-toc-drawer,
  .knowledge-sidebar {
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .knowledge-back-to-top {
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .knowledge-back-to-top-label {
    display: none;
  }

  .markdown-rendered h2[id],
  .markdown-rendered h3[id] {
    scroll-margin-top: 124px;
  }
}

/* Role-first capability workspace */
.capability-personal-shell {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent, #6f8f66) 24%, var(--border));
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent, #6f8f66) 13%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow-sm);
}

.capability-personal-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.capability-personal-identity > .capability-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  font-size: 20px;
}

.capability-personal-identity > div {
  min-width: 0;
}

.capability-personal-identity > div > span,
.capability-personal-start article > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.capability-personal-identity h2 {
  margin: 4px 0 2px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}

.capability-personal-identity p {
  margin: 0;
  color: var(--muted);
}

.capability-personal-identity > button {
  margin-left: auto;
}

.capability-personal-start {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) repeat(3, minmax(110px, .7fr));
  gap: 10px;
}

.capability-personal-start > article,
.capability-personal-start > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent, #6f8f66) 8%);
}

.capability-personal-start > article {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent, #6f8f66) 18%);
}

.capability-personal-start strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
}

.capability-personal-start article > strong {
  font-size: 20px;
}

.capability-personal-start small,
.capability-personal-start > div > span {
  color: var(--muted);
  line-height: 1.5;
}

.capability-personal-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
}

.capability-personal-nav button {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}

.capability-personal-nav button:hover,
.capability-personal-nav button.active {
  border-color: color-mix(in srgb, var(--accent, #6f8f66) 62%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, var(--accent, #6f8f66) 18%);
  color: var(--text);
}

.capability-team-mode-actions {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 10px;
}

.capability-diagnostic-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.capability-diagnostic-overview > div {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent, #6f8f66) 10%);
}

.capability-diagnostic-overview strong {
  color: var(--text);
  font-size: 20px;
}

.capability-diagnostic-overview span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.capability-diagnostic-groups {
  display: grid;
  gap: 20px;
}

.capability-diagnostic-case {
  display: grid;
  gap: 12px;
}

.capability-diagnostic-group {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #6f8f66 18%);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, #6f8f66 6%);
}

.capability-diagnostic-group.is-manager {
  border-color: color-mix(in srgb, #3b6bdc 30%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, #3b6bdc 6%);
}

.capability-diagnostic-group legend {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, #6f8f66 22%);
  color: var(--text);
}

.capability-diagnostic-group legend > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #294c34;
  color: #f7faf5;
  font-size: 11px;
  font-weight: 850;
}

.capability-diagnostic-group legend div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  min-width: 0;
}

.capability-diagnostic-group legend strong {
  font-size: 15px;
  line-height: 1.4;
}

.capability-diagnostic-group legend small {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.capability-diagnostic-question {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, #6f8f66 16%);
  border-left: 3px solid color-mix(in srgb, #294c34 58%, var(--border));
  border-radius: 12px;
  background: var(--surface);
}

.capability-diagnostic-question > header {
  display: grid;
  gap: 7px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}

.capability-diagnostic-question-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.capability-diagnostic-question-meta em {
  flex: 0 0 auto;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-top, #3b6bdc) 10%, var(--surface));
  color: var(--primary-top, #3b6bdc);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-diagnostic-question-meta span {
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-diagnostic-question h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 720;
  line-height: 1.65;
  letter-spacing: -.01em;
}

.capability-diagnostic-question > header small {
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
  font-size: 11px;
  font-weight: 550;
}

.capability-diagnostic-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.capability-diagnostic-option {
  display: grid;
  grid-template-columns: 17px 25px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 60px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.capability-diagnostic-option:hover {
  border-color: color-mix(in srgb, var(--primary-top, #3b6bdc) 38%, var(--border));
  background: color-mix(in srgb, var(--surface) 93%, var(--primary-top, #3b6bdc) 7%);
  transform: translateY(-1px);
}

.capability-diagnostic-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary-top, #3b6bdc) 66%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, var(--primary-top, #3b6bdc) 12%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-top, #3b6bdc) 12%, transparent);
}

.capability-diagnostic-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--primary-top, #3b6bdc) 22%, transparent);
  outline-offset: 2px;
}

.capability-diagnostic-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary-top, #3b6bdc);
}

.capability-diagnostic-option > span {
  display: flex;
  width: 22px;
  height: auto;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 58%, var(--muted));
  font-size: 10px;
  font-weight: 850;
}

.capability-diagnostic-option:has(input:checked) > span {
  color: #294c34;
}

.capability-diagnostic-option > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.capability-diagnostic-reasoning,
.capability-diagnostic-evidence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent, #6f8f66) 38%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent, #6f8f66) 6%);
}

.capability-diagnostic-reasoning > span,
.capability-diagnostic-evidence > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.capability-diagnostic-reasoning em,
.capability-diagnostic-evidence em {
  color: var(--accent, #6f8f66);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-diagnostic-reasoning strong,
.capability-diagnostic-evidence strong {
  margin-top: 4px;
  color: var(--text);
}

.capability-diagnostic-reasoning small,
.capability-diagnostic-evidence small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.capability-diagnostic-reasoning textarea,
.capability-diagnostic-evidence textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.capability-diagnostic-reasoning {
  border-color: color-mix(in srgb, #3b6bdc 34%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, #3b6bdc 6%);
}

.capability-diagnostic-evidence {
  gap: 9px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.capability-diagnostic-evidence > span {
  gap: 3px;
}

.capability-diagnostic-evidence strong {
  margin-top: 0;
  font-size: 14px;
  font-weight: 750;
}

.capability-diagnostic-evidence small {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.6;
}

.capability-diagnostic-reasoning em {
  color: #3b6bdc;
}

.capability-diagnostic-reasoning textarea,
.capability-diagnostic-evidence textarea {
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
}

.capability-diagnostic-requirement {
  color: var(--muted) !important;
  font-weight: 600;
}

.capability-diagnostic-question.is-invalid,
.capability-diagnostic-reasoning.is-invalid,
.capability-diagnostic-evidence.is-invalid {
  outline: 2px solid color-mix(in srgb, #c43d3d 56%, transparent);
  background: color-mix(in srgb, var(--surface) 91%, #c43d3d 9%);
}

.capability-diagnostic-question.is-invalid .capability-diagnostic-option {
  border-color: color-mix(in srgb, #c43d3d 42%, var(--border));
}

.capability-diagnostic-question [aria-invalid="true"],
.capability-diagnostic-reasoning [aria-invalid="true"],
.capability-diagnostic-evidence [aria-invalid="true"] {
  border-color: #c43d3d;
  box-shadow: 0 0 0 3px rgba(196, 61, 61, .12);
}

.capability-diagnostic-feedback {
  position: sticky;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #6f8f66) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent, #6f8f66) 6%);
  box-shadow: 0 8px 24px rgba(35, 48, 34, .12);
}

.capability-diagnostic-feedback span {
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.capability-diagnostic-feedback strong {
  flex: 0 0 auto;
  color: var(--accent, #6f8f66);
  font-size: 12px;
}

.capability-diagnostic-feedback[data-tone="error"] {
  border-color: rgba(196, 61, 61, .42);
  background: color-mix(in srgb, var(--surface) 90%, #c43d3d 10%);
}

.capability-diagnostic-feedback[data-tone="error"] strong {
  color: #b33333;
}

.capability-diagnostic-feedback[data-tone="saving"] {
  border-color: rgba(54, 104, 199, .38);
  background: color-mix(in srgb, var(--surface) 91%, #3668c7 9%);
}

.capability-diagnostic-feedback[data-tone="saving"] strong {
  color: #3668c7;
}

.capability-question-bank-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr);
  gap: 28px;
  align-items: center;
  padding: 32px 34px;
  border: 1px solid color-mix(in srgb, var(--accent, #6f8f66) 34%, var(--border));
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, rgba(192, 223, 98, .16), transparent 30%),
    linear-gradient(135deg, #132319, #253d2c);
  color: #fff;
}

.capability-question-bank-hero > div > span,
.capability-question-bank-controls > header span,
.capability-question-bank-group > header span {
  color: #a9c5af;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
}

.capability-question-bank-hero h3 {
  margin: 8px 0 10px;
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.035em;
}

.capability-question-bank-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  line-height: 1.85;
}

.capability-question-bank-hero aside {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.capability-question-bank-hero aside span,
.capability-question-bank-hero aside small {
  color: rgba(255, 255, 255, .62);
}

.capability-question-bank-hero aside strong {
  font-size: 20px;
}

.capability-question-bank-controls {
  margin-top: 16px;
}

.capability-question-bank-controls > header,
.capability-question-bank-group > header {
  align-items: flex-start;
}

.capability-question-bank-track-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.capability-question-bank-track-list button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.capability-question-bank-track-list button strong {
  font-size: 13px;
}

.capability-question-bank-track-list button small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-question-bank-track-list button.active {
  border-color: #294c34;
  background: #294c34;
  color: #fff;
  box-shadow: 0 7px 18px rgba(20, 48, 29, .16);
}

.capability-question-bank-track-list button.active small {
  color: rgba(255, 255, 255, .68);
}

.capability-question-bank-role-list {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.capability-question-bank-role-list button {
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.capability-question-bank-role-list button.active {
  border-color: color-mix(in srgb, var(--accent, #6f8f66) 60%, var(--border));
  background: color-mix(in srgb, var(--surface) 82%, #c0df62 18%);
  color: #1d3b26;
}

.capability-question-bank-summary {
  margin-top: 16px;
}

.capability-question-bank-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #6f8f66) 32%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, #c0df62 6%);
}

.capability-question-bank-guide strong {
  margin-right: 4px;
  color: #294c34;
}

.capability-question-bank-guide span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
  font-size: 11px;
  font-weight: 650;
}

.capability-question-bank-groups {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.capability-question-bank-group > header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.capability-question-bank-group > header > small {
  max-width: 430px;
  line-height: 1.6;
  text-align: right;
}

.capability-question-bank-list {
  display: grid;
  gap: 12px;
}

.capability-question-bank-item {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}

.capability-question-bank-item > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.capability-question-bank-item > header div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.capability-question-bank-item > header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.capability-question-bank-item > header small {
  color: color-mix(in srgb, var(--text) 74%, var(--muted));
  font-size: 12px;
  font-weight: 700;
}

.capability-question-bank-item > header > em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, #c0df62 18%);
  color: #294c34;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.capability-question-bank-item > h4 {
  margin: 12px 0 14px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
}

.capability-question-bank-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.capability-question-bank-options > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.capability-question-bank-options > div > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.capability-question-bank-options > div > strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.capability-question-bank-options > div > em {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.capability-question-bank-options > .score-5 {
  border-color: color-mix(in srgb, #4f8b59 42%, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, #6da877 8%);
}

.capability-question-bank-options > .score-5 > em {
  background: #294c34;
  color: #fff;
}

.capability-question-bank-options > .score-4 > em {
  background: color-mix(in srgb, var(--surface) 76%, #c0df62 24%);
  color: #294c34;
}

.capability-question-bank-followup,
.capability-question-bank-evidence {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid #6f8f66;
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--surface) 92%, #c0df62 8%);
}

.capability-question-bank-followup span,
.capability-question-bank-evidence span {
  color: #57724f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
}

.capability-question-bank-followup strong,
.capability-question-bank-evidence strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
}

.capability-question-bank-followup p,
.capability-question-bank-evidence p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.capability-question-bank-evidence {
  margin-top: 14px;
  border-left-color: #cf9b43;
  background: color-mix(in srgb, var(--surface) 94%, #eac87b 6%);
}

@media (max-width: 960px) {
  .capability-personal-start {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-personal-start > article {
    grid-column: 1 / -1;
  }

  .capability-diagnostic-question,
  .capability-diagnostic-reasoning,
  .capability-diagnostic-evidence {
    grid-template-columns: 1fr;
  }

  .capability-diagnostic-options {
    grid-template-columns: 1fr;
  }

  .capability-question-bank-hero {
    grid-template-columns: 1fr;
  }

  .capability-question-bank-track-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-question-bank-options {
    grid-template-columns: 1fr;
  }

  .capability-diagnostic-feedback {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .capability-personal-identity {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .capability-personal-identity > button {
    width: 100%;
    margin-left: 0;
  }

  .capability-personal-start,
  .capability-diagnostic-overview {
    grid-template-columns: 1fr;
  }

  .capability-personal-start > article {
    grid-column: auto;
  }

  .capability-personal-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-diagnostic-question h4 {
    font-size: 16px;
  }

  .capability-diagnostic-option > strong {
    font-size: 13px;
  }

  .capability-question-bank-hero {
    padding: 24px 20px;
  }

  .capability-question-bank-track-list {
    grid-template-columns: 1fr;
  }

  .capability-question-bank-role-list {
    align-items: stretch;
    flex-direction: column;
  }

  .capability-question-bank-group > header > small {
    max-width: none;
    text-align: left;
  }

  .capability-question-bank-options > div {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .capability-question-bank-options > div > em {
    grid-column: 2;
    width: fit-content;
  }

  .capability-diagnostic-group {
    padding: 14px 10px;
  }

  .capability-diagnostic-question {
    padding: 15px 12px;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(177, 250, 99, 0.05) 0%, transparent 32%),
    linear-gradient(180deg, #050607 0%, var(--bg) 360px);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0;
}

body[data-theme="light"] {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-soft: #fbfaf6;
  --surface-muted: #f1eee6;
  --ink: #22211d;
  --muted: #6f6b63;
  --muted-strong: #4d4942;
  --line: #ded8cb;
  --line-strong: #c9c0af;
  --teal: #12625d;
  --teal-soft: #e7f1ef;
  --accent: #b8872e;
  --accent-soft: #f4ead8;
  --primary-rgb: 18, 98, 93;
  --primary-top: #12625d;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(18, 98, 93, 0.16);
  --gold: #b8872e;
  --gold-soft: #f4ead8;
  --red: #b43d35;
  --red-soft: #f7e3e0;
  --amber: #c26f19;
  --amber-soft: #f8ead7;
  --green: #34795a;
  --green-soft: #e3f0e8;
  --blue: #395f8f;
  --blue-soft: #e5ebf4;
  --shadow: 0 16px 40px rgba(30, 25, 18, 0.08);
  --shadow-strong: 0 16px 34px rgba(55, 43, 25, 0.16);
  background: var(--bg);
}

body[data-theme="neutral"] {
  --bg: #edf4f6;
  --surface: #ffffff;
  --surface-soft: #f6fafb;
  --surface-muted: #e3eef2;
  --ink: #1f2d35;
  --muted: #60737d;
  --muted-strong: #374b55;
  --line: #d4e0e5;
  --line-strong: #9fb6c0;
  --teal: #3f7184;
  --teal-soft: #dce9ee;
  --accent: #e85a4f;
  --accent-soft: #fbe0dc;
  --primary-rgb: 63, 113, 132;
  --primary-top: #5d8798;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(63, 113, 132, 0.18);
  --gold: #e85a4f;
  --gold-deep: #b7463f;
  --gold-light: #f2a096;
  --gold-soft: #f3d2ca;
  --burgundy: #e85a4f;
  --burgundy-deep: #b6463e;
  --red: #e85a4f;
  --red-soft: #f5d2cc;
  --amber: #e85a4f;
  --amber-soft: #f3d2ca;
  --green: #3f7184;
  --green-soft: #dce9ee;
  --blue: #8e9ca3;
  --blue-soft: #dbe3e5;
  --shadow: 0 14px 34px rgba(46, 46, 46, 0.09);
  --shadow-strong: 0 18px 46px rgba(46, 46, 46, 0.18);
  background:
    radial-gradient(circle at 88% 0%, rgba(232, 90, 79, 0.08), transparent 26%),
    linear-gradient(135deg, rgba(63, 113, 132, 0.18), transparent 38%),
    linear-gradient(180deg, #f7fbfc 0%, var(--bg) 380px);
}

body[data-theme="neutral"] .sidebar {
  gap: 18px;
  padding: 20px 16px;
  border-right: 0;
  background:
    linear-gradient(180deg, #19303a 0%, #2f5d70 100%);
  color: #f7fbfc;
}

body[data-theme="neutral"] .brand-block {
  padding: 8px 6px 16px;
  border-bottom-color: rgba(243, 247, 248, 0.18);
}

body[data-theme="neutral"] .brand-mark {
  width: 44px;
  height: 44px;
  border-color: rgba(232, 90, 79, 0.5);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 90, 79, 0.16);
}

body[data-theme="neutral"] .brand-mark img {
  width: 30px;
  height: 30px;
  mix-blend-mode: multiply;
}

body[data-theme="neutral"] .brand-title {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
}

body[data-theme="neutral"] .brand-subtitle {
  color: rgba(243, 247, 248, 0.72);
}

body[data-theme="neutral"] .nav-button {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.76);
}

body[data-theme="neutral"] .nav-button:hover,
body[data-theme="neutral"] .nav-button.active {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(243, 247, 248, 0.10);
  color: #f3f7f8;
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background: var(--accent);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.86);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background: rgba(232, 90, 79, 0.28);
}

body[data-theme="neutral"] .sidebar-footer {
  border-top-color: rgba(243, 247, 248, 0.18);
  color: rgba(243, 247, 248, 0.56);
}

body[data-theme="neutral"] .sidebar-theme {
  color: rgba(243, 247, 248, 0.38);
}

body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(243, 247, 248, 0.58);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
}

body[data-theme="neutral"] .sidebar-theme-option.active {
  border-bottom-color: var(--accent);
}

body[data-theme="neutral"] .login-screen {
  background: var(--bg);
}

body[data-theme="neutral"] .login-brand .brand-mark {
  border-color: var(--line-strong);
  background: #f5c8bf;
}

body[data-theme="neutral"] .login-brand .brand-title {
  color: var(--ink);
}

body[data-theme="neutral"] .login-brand .brand-subtitle {
  color: var(--muted);
}

body[data-theme="neutral"] .login-card {
  background: rgba(244, 231, 220, 0.96);
}

body[data-theme="neutral"] .app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
}

body[data-theme="neutral"] .main {
  padding: 22px 28px 40px;
}

body[data-theme="neutral"] .eyebrow {
  color: var(--accent);
  font-weight: 750;
}

body[data-theme="neutral"] .presence-pill,
body[data-theme="neutral"] .project-state-pill,
body[data-theme="neutral"] .account-pill {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
}

body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background: var(--teal-soft);
  color: var(--teal);
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-radius: 6px;
  border-color: rgba(232, 90, 79, 0.18);
  background: linear-gradient(180deg, #6f94a3, var(--teal));
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  transform: none;
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="neutral"] .button.ghost {
  background: transparent;
  color: var(--teal);
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  background: var(--red);
  color: #ffffff;
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-theme-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .section-header {
  background:
    linear-gradient(90deg, rgba(63, 113, 132, 0.10), rgba(232, 90, 79, 0.035) 56%, transparent 78%),
    var(--surface);
}

body[data-theme="neutral"] .section-body {
  background: transparent;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center {
  background:
    linear-gradient(135deg, rgba(86, 124, 141, 0.08), transparent 48%),
    var(--surface);
}

body[data-theme="neutral"] .kpi-card::before {
  background: linear-gradient(90deg, var(--teal), var(--accent));
}

body[data-theme="neutral"] .kpi-card::after {
  border-color: rgba(232, 90, 79, 0.28);
}

body[data-theme="neutral"] .phase-card::before {
  background: var(--teal);
}

body[data-theme="neutral"] .phase-card.event::before,
body[data-theme="neutral"] .phase-card.gold::before,
body[data-theme="neutral"] .phase-card.warn::before {
  background: var(--accent);
}

body[data-theme="neutral"] .kpi-card.good,
body[data-theme="neutral"] .phase-card.good {
  background:
    linear-gradient(135deg, rgba(86, 124, 141, 0.11), transparent 46%),
    var(--surface);
}

body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn {
  background:
    linear-gradient(135deg, rgba(184, 124, 93, 0.12), transparent 46%),
    var(--surface);
}

body[data-theme="neutral"] .kpi-card.bad {
  background:
    linear-gradient(135deg, rgba(232, 90, 79, 0.10), transparent 46%),
    var(--surface);
}

body[data-theme="neutral"] .kpi-card.info {
  background:
    linear-gradient(135deg, rgba(142, 156, 163, 0.12), transparent 46%),
    var(--surface);
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  background: var(--surface-soft);
}

body[data-theme="neutral"] .project-scale span,
body[data-theme="neutral"] .phase-outputs span,
body[data-theme="neutral"] .code-chip,
body[data-theme="neutral"] .source-chip,
body[data-theme="neutral"] .guide-source-list span,
body[data-theme="neutral"] .org-tags span {
  background: var(--surface);
  color: var(--muted-strong);
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold {
  background: var(--gold-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(86, 124, 141, 0.13);
}

body[data-theme="neutral"] .table-wrap,
body[data-theme="neutral"] .guide-table-wrap,
body[data-theme="neutral"] .md-table-wrap,
body[data-theme="neutral"] .task-filter-menu,
body[data-theme="neutral"] .metric-floating-tooltip,
body[data-theme="neutral"] .modal {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background: var(--surface-soft);
  color: var(--muted-strong);
}

body[data-theme="neutral"] .task-filter-arrow {
  border-top-color: var(--muted-strong);
}

body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover {
  background: #eadbcc;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active {
  background: linear-gradient(90deg, rgba(86, 124, 141, 0.14), rgba(232, 90, 79, 0.06) 68%, transparent);
}

body[data-theme="neutral"] .guide-button,
body[data-theme="neutral"] .knowledge-doc-button,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-module-item {
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  background: rgba(244, 231, 220, 0.96);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: var(--teal);
  background: linear-gradient(90deg, rgba(86, 124, 141, 0.10), transparent 46%), var(--surface);
}

body[data-theme="neutral"] .guide-landing-cadence {
  border-left-color: var(--gold-deep);
}

body[data-theme="neutral"] .guide-block-risk {
  background: linear-gradient(90deg, rgba(232, 90, 79, 0.10), transparent 46%), var(--surface);
}

body[data-theme="neutral"] .guide-block-template {
  background: linear-gradient(90deg, rgba(201, 184, 167, 0.20), transparent 46%), var(--surface);
}

body[data-theme="neutral"] .pill {
  background: var(--surface);
  font-weight: 700;
}

body[data-theme="neutral"] .pill.good {
  border-color: rgba(86, 124, 141, 0.28);
  background: var(--green-soft);
  color: var(--green);
}

body[data-theme="neutral"] .pill.warn {
  border-color: rgba(184, 124, 93, 0.28);
  background: var(--amber-soft);
  color: var(--amber);
}

body[data-theme="neutral"] .pill.bad {
  border-color: rgba(232, 90, 79, 0.28);
  background: var(--red-soft);
  color: var(--red);
}

body[data-theme="neutral"] .pill.info {
  border-color: rgba(142, 156, 163, 0.32);
  background: var(--blue-soft);
  color: var(--blue);
}

body[data-theme="neutral"] .permission-save-button.is-saved {
  background: var(--teal);
  color: #ffffff;
}

body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(86, 124, 141, 0.26);
  background: rgba(86, 124, 141, 0.10);
  color: var(--teal);
}

body[data-theme="neutral"] .knowledge-doc-delete {
  background: var(--red-soft);
}

body[data-theme="neutral"] .knowledge-doc-delete:hover {
  background: #f2bdb6;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 14px;
  border-right: 1px solid rgba(var(--primary-rgb), 0.28);
  background:
    linear-gradient(180deg, #111418 0%, #23262c 100%);
  color: #ffffff;
  backdrop-filter: blur(18px);
}

body[data-theme="light"] .sidebar {
  gap: 18px;
  padding: 20px 16px;
  border-right: 0;
  background: #25241f;
  color: #f5efe2;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.24);
}

body[data-theme="light"] .brand-block {
  padding: 8px 6px 16px;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(var(--primary-rgb), 0.55);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(145deg, var(--gold-light), var(--gold));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(177, 250, 99, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.46);
  font-weight: 760;
}

.brand-mark img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body[data-theme="light"] .brand-mark {
  width: 44px;
  height: 44px;
  border-color: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: #25241f;
  box-shadow: none;
}

body[data-theme="light"] .brand-mark img {
  width: 30px;
  height: 30px;
  filter: invert(88%) sepia(19%) saturate(586%) hue-rotate(356deg) brightness(98%) contrast(92%);
  mix-blend-mode: normal;
}

.brand-title,
.brand-subtitle {
  margin: 0;
}

.brand-title {
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.brand-subtitle {
  margin-top: 3px;
  color: rgba(209, 213, 219, 0.72);
  font-size: 12px;
}

body[data-theme="light"] .brand-title {
  font-size: 16px;
  color: #f5efe2;
  letter-spacing: 0;
}

body[data-theme="light"] .brand-subtitle {
  color: rgba(245, 239, 226, 0.68);
}

.anniversary-countdown {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 13px 14px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.anniversary-countdown::after {
  content: "";
  position: absolute;
  top: -28px;
  right: -22px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.16);
  pointer-events: none;
}

.anniversary-countdown-label {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.anniversary-countdown-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  line-height: 1;
}

.anniversary-countdown-value strong {
  color: var(--gold-light);
  font-size: 31px;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.anniversary-countdown-value span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 720;
}

.anniversary-countdown small {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.anniversary-countdown.is-today .anniversary-countdown-value strong {
  font-size: 22px;
  letter-spacing: 0;
}

.anniversary-countdown.is-past .anniversary-countdown-value strong {
  font-size: 18px;
  letter-spacing: 0;
}

body[data-theme="google"] .anniversary-countdown {
  border-color: #d7e3f8;
  background-color: #e8f0fe;
  color: #174ea6;
  box-shadow: none;
}

body[data-theme="google"] .anniversary-countdown::after {
  background-color: rgba(26, 115, 232, 0.08);
}

body[data-theme="google"] .anniversary-countdown-label {
  color: #5f6368;
}

body[data-theme="google"] .anniversary-countdown-value strong {
  color: #1a73e8;
}

body[data-theme="google"] .anniversary-countdown-value span {
  color: #174ea6;
}

body[data-theme="google"] .anniversary-countdown small {
  color: #6b778c;
}

body[data-palette="midnight"] .anniversary-countdown {
  border-color: #343a43;
  background-color: #202329;
  box-shadow: none;
}

body[data-palette="midnight"] .anniversary-countdown::after {
  background-color: rgba(177, 250, 99, 0.09);
}

body[data-palette="midnight"] .anniversary-countdown-value strong {
  color: #b1fa63;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 76% 18%, rgba(var(--primary-rgb), 0.22), transparent 30%),
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.16), transparent 38%),
    linear-gradient(180deg, #fffdf9, var(--bg));
}

body[data-theme="light"] .login-screen {
  background: var(--bg);
}

body[data-theme="light"] .login-brand .brand-mark {
  border-color: var(--line-strong);
  background: #25241f;
}

body[data-theme="light"] .login-brand .brand-title {
  color: var(--ink);
}

body[data-theme="light"] .login-brand .brand-subtitle {
  color: var(--muted);
}

.login-card {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.login-brand .brand-mark {
  border-color: rgba(var(--primary-rgb), 0.55);
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
}

.login-brand .brand-title {
  color: var(--ink);
}

.login-brand .brand-subtitle {
  color: var(--muted);
}

.login-heading {
  margin: 22px 0 18px;
}

.login-heading h1 {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 1.2;
}

.auth-helper {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.login-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.login-field span,
.login-check {
  color: var(--muted);
  font-size: 13px;
}

.login-field .input {
  min-height: 42px;
}

.register-member-preview {
  display: grid;
  gap: 3px;
  margin: -3px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 13px;
}

.register-member-preview span { color: var(--muted); }
.register-member-preview.valid { border-color: rgba(22, 163, 74, .3); background: rgba(22, 163, 74, .08); }
.register-member-preview.invalid { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); }

.login-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
}

.login-check input {
  width: 16px;
  height: 16px;
}

.login-error {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--red-soft);
  border-radius: 6px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 13px;
}

.login-error[data-type="success"] {
  border-color: rgba(80, 107, 88, 0.24);
  background: var(--green-soft);
  color: var(--green);
}

.login-error[data-type="pending"] {
  border-color: rgba(150, 104, 61, 0.24);
  background: var(--amber-soft);
  color: var(--amber);
}

.login-submit {
  width: 100%;
  justify-content: center;
  min-height: 42px;
}

.auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.auth-toggle {
  min-height: 42px;
  white-space: nowrap;
}

.feishu-login-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #1f6658;
  border-radius: 8px;
  background: #1d6154;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.feishu-login-button:hover:not(:disabled) {
  background: #174e44;
  box-shadow: 0 6px 18px rgba(23, 78, 68, 0.18);
  transform: translateY(-1px);
}

.feishu-login-button:focus-visible {
  outline: 3px solid rgba(51, 112, 255, 0.25);
  outline-offset: 2px;
}

.feishu-login-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.feishu-login-mark {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.feishu-login-mark i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 7px 2px 7px 2px;
}

.feishu-login-mark i:nth-child(1) { left: 1px; top: 1px; background: #34c3ff; }
.feishu-login-mark i:nth-child(2) { right: 1px; top: 1px; background: #3370ff; transform: rotate(90deg); }
.feishu-login-mark i:nth-child(3) { left: 1px; bottom: 1px; background: #00d6b9; transform: rotate(270deg); }
.feishu-login-mark i:nth-child(4) { right: 1px; bottom: 1px; background: #7b67ee; transform: rotate(180deg); }

.feishu-login-status {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.legacy-login {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.legacy-login summary {
  padding: 17px 2px 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.legacy-login summary::-webkit-details-marker { display: none; }
.legacy-login summary::after { content: "  ▾"; }
.legacy-login[open] summary::after { content: "  ▴"; }

.legacy-login-fields {
  padding-top: 18px;
}

.login-card[data-auth-mode="feishu-bind"] .feishu-login-button,
.login-card[data-auth-mode="feishu-bind"] .feishu-login-status,
.login-card[data-auth-mode="register"] .feishu-login-button,
.login-card[data-auth-mode="register"] .feishu-login-status {
  display: none;
}

.login-card[data-auth-mode="feishu-bind"] .legacy-login,
.login-card[data-auth-mode="register"] .legacy-login {
  border-top: 0;
}

.login-card[data-auth-mode="feishu-bind"] .legacy-login summary,
.login-card[data-auth-mode="register"] .legacy-login summary {
  display: none;
}

body[data-theme="light"] .login-screen,
body[data-theme="google"] .login-screen {
  background: #f5f8f7;
}

body[data-theme="light"] .login-card,
body[data-theme="google"] .login-card {
  width: min(500px, 100%);
  padding: 40px 42px;
  border-color: #dce5e2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(25, 56, 49, 0.08);
}

body[data-theme="light"] .login-heading h1,
body[data-theme="google"] .login-heading h1 {
  font-size: 32px;
  color: #1f312d;
}

@media (max-width: 560px) {
  body[data-theme="light"] .login-card,
  body[data-theme="google"] .login-card {
    padding: 28px 22px;
  }
}

.nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(209, 213, 219, 0.76);
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body[data-theme="light"] .nav-button {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(245, 239, 226, 0.78);
}

.nav-button:hover,
.nav-button.active {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.16), rgba(255, 255, 255, 0.05));
  color: #ffffff;
}

body[data-theme="light"] .nav-button:hover,
body[data-theme="light"] .nav-button.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-button.active {
  box-shadow: inset 3px 0 0 var(--gold);
}

body[data-theme="light"] .nav-button.active {
  box-shadow: none;
}

.nav-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--teal);
  font-size: 12px;
  font-weight: 760;
}

body[data-theme="light"] .nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4d8a0;
}

.nav-button:hover .nav-icon,
.nav-button.active .nav-icon {
  background: rgba(177, 250, 99, 0.18);
  color: #dbffa8;
}

body[data-theme="light"] .nav-button:hover .nav-icon,
body[data-theme="light"] .nav-button.active .nav-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #f4d8a0;
}

.nav-count {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: rgba(209, 213, 219, 0.86);
  font-size: 11px;
  text-align: center;
}

body[data-theme="light"] .nav-count {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  color: rgba(245, 239, 226, 0.86);
}

.sidebar-footer {
  padding: 12px 10px 4px;
  border-top: 1px solid rgba(var(--primary-rgb), 0.24);
  color: rgba(209, 213, 219, 0.56);
  font-size: 12px;
  line-height: 1.6;
}

body[data-theme="light"] .sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(245, 239, 226, 0.56);
}

.sidebar-footer p {
  margin: 0;
}

.sidebar-theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: rgba(209, 213, 219, 0.38);
  font-size: 12px;
  line-height: 1;
}

.sidebar-theme-option {
  min-height: 18px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(209, 213, 219, 0.56);
  font-size: 12px;
  font-weight: 650;
}

.sidebar-theme-option:hover,
.sidebar-theme-option.active {
  color: #ffffff;
}

.sidebar-theme-option.active {
  border-bottom-color: var(--gold);
}

body[data-theme="light"] .sidebar-theme {
  color: rgba(245, 239, 226, 0.36);
}

body[data-theme="light"] .sidebar-theme-option {
  color: rgba(245, 239, 226, 0.52);
}

body[data-theme="light"] .sidebar-theme-option:hover,
body[data-theme="light"] .sidebar-theme-option.active {
  color: #fff;
}

body[data-theme="light"] .sidebar-theme-option.active {
  border-bottom-color: #f4d8a0;
}

body[data-theme="light"] .app-shell {
  grid-template-columns: 264px minmax(0, 1fr);
}

body[data-theme="light"] .main {
  padding: 22px 28px 40px;
}

body[data-theme="light"] .topbar {
  margin-bottom: 18px;
}

body[data-theme="light"] .topbar h1 {
  font-size: 28px;
}

body[data-theme="light"] .eyebrow {
  color: var(--gold);
  font-weight: 700;
}

body[data-theme="light"] .presence-pill,
body[data-theme="light"] .project-state-pill {
  border-color: #d7cfbf;
  border-radius: 6px;
  background: #fffaf0;
  color: #4b463c;
}

body[data-theme="light"] .account-pill {
  border-color: #d7cfbf;
  border-radius: 6px;
  background: #fff;
}

body[data-theme="light"] .account-avatar {
  background: var(--gold-soft);
  color: #6c4b17;
}

body[data-theme="light"] .button,
body[data-theme="light"] .icon-button {
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-weight: 650;
  box-shadow: none;
}

body[data-theme="light"] .button:hover,
body[data-theme="light"] .icon-button:hover {
  transform: none;
  box-shadow: none;
}

body[data-theme="light"] .button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="light"] .button.ghost {
  background: transparent;
  color: var(--teal);
}

body[data-theme="light"] .button.danger {
  background: var(--red);
  color: #fff;
}

body[data-theme="light"] .view-root {
  gap: 16px;
}

body[data-theme="light"] .section {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="light"] .section-header {
  padding: 16px 18px;
  background: transparent;
}

body[data-theme="light"] .section-body {
  padding: 16px 18px;
}

body[data-theme="light"] .kpi-card {
  min-height: 122px;
  padding: 14px;
  background: var(--surface-soft);
  box-shadow: none;
}

body[data-theme="light"] .kpi-card::before,
body[data-theme="light"] .kpi-card::after,
body[data-theme="light"] .phase-card::before {
  content: none;
}

body[data-theme="light"] .kpi-card.good {
  border-color: #bfd8c9;
  background: var(--green-soft);
}

body[data-theme="light"] .kpi-card.warn {
  border-color: #ead0a5;
  background: var(--amber-soft);
}

body[data-theme="light"] .kpi-card.bad {
  border-color: #e5b8b2;
  background: var(--red-soft);
}

body[data-theme="light"] .kpi-card.gold {
  border-color: #dcc38f;
  background: var(--gold-soft);
}

body[data-theme="light"] .kpi-card.info {
  border-color: #c8d6dc;
  background: #eef5f7;
}

body[data-theme="light"] .project-scale {
  background: var(--surface-soft);
}

body[data-theme="light"] .project-scale span {
  background: #fff;
}

body[data-theme="light"] .project-scale strong {
  background: var(--gold-soft);
  color: #6c4b17;
}

body[data-theme="light"] .phase-card {
  padding: 13px;
  background: #fff;
  box-shadow: none;
}

body[data-theme="light"] .phase-card.warn {
  border-color: #ead0a5;
  background: #fffaf1;
}

body[data-theme="light"] .phase-card.good {
  border-color: #bfd8c9;
  background: #f5fbf7;
}

body[data-theme="light"] .phase-card.event,
body[data-theme="light"] .phase-card.gold {
  border-color: #d7ba74;
  background: #fff7e4;
}

body[data-theme="light"] .phase-card p,
body[data-theme="light"] .phase-outputs span {
  color: #4b4740;
}

body[data-theme="light"] .phase-event {
  background: #f1dcaa;
  color: #6c4b17;
}

body[data-theme="light"] .phase-outputs span {
  background: var(--surface-soft);
}

body[data-theme="light"] .input,
body[data-theme="light"] .select,
body[data-theme="light"] .textarea {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #fff;
}

body[data-theme="light"] .input:focus,
body[data-theme="light"] .select:focus,
body[data-theme="light"] .textarea:focus,
body[data-theme="light"] .table-filter-control:focus {
  border-color: var(--line-strong);
  box-shadow: none;
}

body[data-theme="light"] .summary-strip > div {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

body[data-theme="light"] .table-wrap {
  border-color: var(--line);
}

body[data-theme="light"] th,
body[data-theme="light"] .task-header-row th,
body[data-theme="light"] .metrics-group-header,
body[data-theme="light"] .guide-table th {
  background: var(--surface-soft);
  color: #4d4942;
}

body[data-theme="light"] .task-header-row th {
  box-shadow: 0 1px 0 var(--line), 0 8px 16px rgba(48, 39, 25, 0.06);
}

body[data-theme="light"] .task-filter-arrow {
  border-top-color: #8f846f;
}

body[data-theme="light"] .task-filter-menu {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 16px 34px rgba(55, 43, 25, 0.16);
}

body[data-theme="light"] .table-filter-control {
  border-color: var(--line-strong);
  background: #fff;
}

body[data-theme="light"] .task-filter-option:hover,
body[data-theme="light"] .task-filter-option.is-selected {
  background: #f5ead2;
}

body[data-theme="light"] .task-filter-option.is-selected,
body[data-theme="light"] .task-head-cell.is-active .task-head-label {
  color: var(--accent);
}

body[data-theme="light"] .task-group-row td {
  background: #f7f3ea;
}

body[data-theme="light"] .task-phase-add {
  border-color: #d8c8a6;
  background: #fffaf0;
  color: var(--accent);
}

body[data-theme="light"] tbody tr:hover {
  background: #fbfaf6;
}

body[data-theme="light"] .tooltip-dot {
  border-color: #eee7dc;
  background: #fbfaf7;
  color: #b9aa96;
}

body[data-theme="light"] .code-chip,
body[data-theme="light"] .source-chip,
body[data-theme="light"] .guide-source-list span,
body[data-theme="light"] .org-tags span {
  background: var(--surface-soft);
  color: #5c5448;
}

body[data-theme="light"] .metric-floating-tooltip {
  border-color: #e5dccb;
  border-radius: 7px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 16px 45px rgba(30, 26, 20, 0.16);
}

body[data-theme="light"] .metric-floating-tooltip p,
body[data-theme="light"] .detail-section p {
  color: #4b4740;
}

body[data-theme="light"] .metrics-group,
body[data-theme="light"] .ai-training-hero,
body[data-theme="light"] .ai-enterprise-nav,
body[data-theme="light"] .ai-enterprise-detail,
body[data-theme="light"] .ai-playbook-nav,
body[data-theme="light"] .ai-playbook-detail,
body[data-theme="light"] .ai-task-panel,
body[data-theme="light"] .permission-nav-order,
body[data-theme="light"] .permission-approval,
body[data-theme="light"] .permission-console,
body[data-theme="light"] .permission-role-manager,
body[data-theme="light"] .permission-theme-manager,
body[data-theme="light"] .permission-online-panel,
body[data-theme="light"] .permission-card {
  background: #fff;
  box-shadow: none;
}

body[data-theme="light"] .pill {
  background: #fff;
  font-weight: 650;
}

body[data-theme="light"] .pill.good {
  border-color: #b9d8c8;
  background: var(--green-soft);
}

body[data-theme="light"] .pill.warn {
  border-color: #ead0a5;
  background: var(--amber-soft);
}

body[data-theme="light"] .pill.bad {
  border-color: #e4b6b0;
  background: var(--red-soft);
}

body[data-theme="light"] .pill.info {
  border-color: #c2cde0;
  background: var(--blue-soft);
}

body[data-theme="light"] .pill.gold {
  border-color: #dcc38f;
  background: var(--gold-soft);
  color: #6c4b17;
}

body[data-theme="light"] .quick-card:hover {
  border-color: #d8c8a6;
  box-shadow: 0 10px 24px rgba(48, 39, 25, 0.07);
}

body[data-theme="light"] .org-node.primary,
body[data-theme="light"] .org-node.gold,
body[data-theme="light"] .growth-center {
  background: var(--surface-soft);
}

body[data-theme="light"] .guide-sidebar,
body[data-theme="light"] .knowledge-sidebar,
body[data-theme="light"] .permission-account-list,
body[data-theme="light"] .permission-role-card,
body[data-theme="light"] .permission-online-list,
body[data-theme="light"] .permission-modules {
  background: var(--surface-soft);
}

body[data-theme="light"] .guide-button,
body[data-theme="light"] .knowledge-doc-button,
body[data-theme="light"] .guide-deliverable-card,
body[data-theme="light"] .permission-approval-item,
body[data-theme="light"] .permission-account-row,
body[data-theme="light"] .permission-online-row,
body[data-theme="light"] .permission-module-item {
  background: #fff;
}

body[data-theme="light"] .guide-button.active,
body[data-theme="light"] .knowledge-doc-button.active {
  background: #fff8e8;
  box-shadow: inset 3px 0 0 var(--gold);
}

body[data-theme="light"] .guide-reader-header,
body[data-theme="light"] .knowledge-reader-header {
  background: rgba(255, 253, 248, 0.96);
}

body[data-theme="light"] .guide-mission,
body[data-theme="light"] .guide-block-deliverable,
body[data-theme="light"] .markdown-rendered blockquote {
  border-left-color: var(--gold);
  background: #fff8e8;
}

body[data-theme="light"] .guide-block-risk {
  background: #fff8f4;
}

body[data-theme="light"] .guide-block-template {
  background: #fffaf0;
}

body[data-theme="light"] .guide-deliverable-card:hover {
  background: #fffaf0;
}

body[data-theme="light"] .guide-list-block li::marker {
  color: var(--gold);
}

body[data-theme="light"] .permission-save-button.is-saved {
  background: var(--teal);
  color: #fff;
}

body[data-theme="light"] .permission-save-notice.success {
  border-color: #dcc38f;
  background: var(--gold-soft);
  color: #6c4b17;
}

body[data-theme="light"] .knowledge-doc-delete {
  background: #fff8f6;
}

body[data-theme="light"] .knowledge-doc-delete:hover {
  background: #fff1ed;
}

.main {
  min-width: 0;
  padding: 22px 30px 42px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

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

.topbar h1 {
  overflow: hidden;
  margin: 2px 0 0;
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.managed-project-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
}

.managed-project-selector > button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.managed-project-selector > button:hover,
.managed-project-selector > button[aria-expanded="true"] {
  background: rgba(var(--primary-rgb), 0.11);
  color: var(--primary-top);
}

.managed-project-selector > button span {
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 150ms ease;
}

.managed-project-selector > button[aria-expanded="true"] span {
  transform: rotate(180deg) translateY(1px);
}

.managed-project-selector > button:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), 0.2);
}

.managed-project-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  left: -8px;
  width: 280px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.18), 0 3px 10px rgba(31, 41, 55, 0.08);
}

.managed-project-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  text-align: left;
  cursor: pointer;
}

.managed-project-menu-item:hover {
  background: rgba(var(--primary-rgb), 0.08);
}

.managed-project-menu-item.active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary-top);
}
.managed-project-menu-item.is-archived { color: var(--muted); opacity: .72; }
.managed-project-menu-item > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.managed-project-menu-item > span small { padding: 2px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 10px; white-space: nowrap; }

.managed-project-menu-item strong {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
  background: var(--primary-top);
  color: var(--primary-fg);
  font-size: 12px;
}

.managed-project-name-help {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.managed-project-name-help strong {
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: 12px;
  white-space: nowrap;
}

.managed-project-name-help.is-over-limit,
.managed-project-name-help.is-over-limit strong {
  color: var(--red);
}

.input.is-over-limit {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(182, 70, 67, 0.12);
}

.budget-approval-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.budget-approval-summary div {
  display: grid;
  gap: 4px;
}

.budget-approval-summary span {
  color: var(--muted);
  font-size: 12px;
}

.budget-approval-summary strong {
  color: var(--ink);
  font-size: 15px;
}

@media (max-width: 700px) {
  .budget-approval-summary {
    grid-template-columns: 1fr;
  }
}

.eyebrow {
  margin: 0;
  color: var(--teal);
  font-size: 12px;
  font-weight: 760;
}

.topbar-actions,
.toolbar,
.table-actions,
.form-actions,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-actions {
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.presence-pill,
.project-state-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
}

.project-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8b4aa;
  box-shadow: 0 0 0 3px rgba(184, 180, 170, 0.18);
}

.project-state-pill.online .project-state-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(80, 107, 88, 0.14);
}

.project-state-pill.offline,
.project-state-pill.local {
  background: var(--surface-soft);
  color: var(--muted);
}

.project-state-pill.protected {
  border-color: #e8b84c;
  background: #fff8e5;
  color: #7a5200;
}

.project-state-pill.protected .project-state-dot {
  background: #e8a317;
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.16);
}

.project-state-pill.conflict {
  border-color: #ef9b92;
  background: #fff0ee;
  color: #b3261e;
}

.project-state-pill.conflict .project-state-dot {
  background: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.14);
}

.presence-pill[hidden] {
  display: none !important;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8b4aa;
  box-shadow: 0 0 0 3px rgba(184, 180, 170, 0.18);
}

.presence-pill.online .presence-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(80, 107, 88, 0.14);
}

.presence-pill.offline {
  background: var(--surface-soft);
  color: var(--muted);
}

.presence-pill.offline .presence-dot {
  background: #b8b4aa;
  box-shadow: 0 0 0 3px rgba(184, 180, 170, 0.18);
}

.presence-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(340px, 86vw);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.presence-pill:hover .presence-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.presence-tooltip::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 20px;
  width: 18px;
  height: 18px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: var(--surface);
  transform: rotate(45deg);
}

.presence-tooltip-title {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.presence-tooltip p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

.presence-viewer-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.presence-viewer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.presence-viewer-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.presence-viewer-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
}

.presence-viewer-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.presence-viewer-row em {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}

.account-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.account-info {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.account-info strong {
  max-width: 96px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}

.account-info span {
  max-width: 136px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
}

.button,
.icon-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--primary-top), var(--teal));
  color: var(--primary-fg);
  font-weight: 720;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.button {
  padding: 7px 13px;
}

.button:hover,
.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.button.secondary:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  box-shadow: 0 8px 20px rgba(55, 29, 26, 0.08);
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--teal);
}

.button.danger {
  background: linear-gradient(180deg, #c84c47, var(--red));
  color: #fff;
}

.button.login-submit {
  min-height: 42px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.icon-button {
  width: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
}

.view-root {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.project-plan-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.project-plan-tabs button { padding: 8px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-strong); font-weight: 650; cursor: pointer; }
.project-plan-tabs button:hover { color: var(--primary); }
.project-plan-tabs button.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }

.section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(33, 22, 22, 0.035), 0 12px 30px rgba(55, 29, 26, 0.045);
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.08), transparent 44%),
    var(--surface);
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.section-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.section-desc {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.section-body {
  padding: 18px 20px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--primary-rgb), 0.13), transparent 42%),
    linear-gradient(180deg, var(--surface), #f9f3ec);
  box-shadow: var(--shadow);
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), rgba(var(--primary-rgb), 0.64));
}

.kpi-card::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}

.kpi-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kpi-value {
  margin: 8px 0 0;
  font-size: 29px;
  font-weight: 780;
  line-height: 1.05;
}

.kpi-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.kpi-card.good {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(80, 107, 88, 0.08), transparent 46%),
    var(--surface);
}

.kpi-card.good::before {
  background: linear-gradient(90deg, var(--green), rgba(80, 107, 88, 0.24));
}

.kpi-card.warn {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(150, 104, 61, 0.09), transparent 46%),
    var(--surface);
}

.kpi-card.warn::before {
  background: linear-gradient(90deg, var(--amber), rgba(150, 104, 61, 0.24));
}

.kpi-card.bad {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(167, 58, 53, 0.08), transparent 46%),
    var(--surface);
}

.kpi-card.bad::before {
  background: linear-gradient(90deg, var(--red), rgba(167, 58, 53, 0.24));
}

.kpi-card.gold {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), transparent 46%),
    var(--surface);
}

.kpi-card.gold::before {
  background: linear-gradient(90deg, var(--gold), rgba(var(--primary-rgb), 0.28));
}

.kpi-card.info {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(93, 98, 112, 0.08), transparent 46%),
    var(--surface);
}

.kpi-card.info::before {
  background: linear-gradient(90deg, var(--blue), rgba(93, 98, 112, 0.22));
}

.project-scale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.project-scale span,
.project-scale strong {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: center;
}

.project-scale span {
  background: var(--surface);
  color: var(--muted);
}

.project-scale strong {
  background: rgba(var(--primary-rgb), 0.075);
  color: var(--teal);
}

.phase-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.phase-card {
  position: relative;
  overflow: hidden;
  min-width: 180px;
  padding: 14px 13px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), transparent 48%),
    var(--surface);
  box-shadow: 0 1px 2px rgba(33, 22, 22, 0.035);
}

.phase-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(var(--primary-rgb), 0.58);
}

.phase-card.warn {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(150, 104, 61, 0.08), transparent 48%),
    var(--surface);
}

.phase-card.warn::before {
  background: var(--amber);
}

.phase-card.good {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(80, 107, 88, 0.07), transparent 48%),
    var(--surface);
}

.phase-card.good::before {
  background: var(--green);
}

.phase-card.event,
.phase-card.gold {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent 48%),
    var(--surface);
}

.phase-card.event::before,
.phase-card.gold::before {
  background: var(--teal);
}

.phase-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.phase-range {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.phase-card h3 {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.phase-card p {
  margin: 8px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.55;
}

.phase-event {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--teal);
  font-size: 12px;
  font-weight: 760;
}

.phase-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.phase-outputs span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-strong);
  font-size: 11px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 16px;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.toolbar {
  justify-content: space-between;
  margin-bottom: 12px;
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.input,
.select {
  min-height: 34px;
  padding: 6px 10px;
}

.textarea {
  min-height: 92px;
  padding: 8px 10px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus,
.table-filter-control:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.42);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.09);
}

.filters .input {
  width: min(280px, 42vw);
}

.filters .select {
  width: 150px;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.summary-strip > div {
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.summary-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.summary-strip strong {
  font-size: 22px;
  line-height: 1;
}

.section-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.ai-training-section .section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-training-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.11), transparent 52%),
    var(--surface-soft);
}

.ai-training-hero h3,
.ai-subsection-head h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.ai-training-hero p,
.ai-subsection-head p,
.ai-enterprise-detail p,
.ai-enterprise-block p,
.ai-playbook-detail header p,
.ai-detail-block p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.ai-training-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
}

.ai-training-metric {
  min-height: 108px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.ai-training-metric span,
.ai-training-metric small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-training-metric strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 24px;
  line-height: 1;
}

.ai-enterprise-map,
.ai-playbook,
.ai-task-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-enterprise-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ai-enterprise-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-enterprise-nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.ai-enterprise-nav-item:hover,
.ai-enterprise-nav-item.active {
  border-color: rgba(var(--primary-rgb), 0.24);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.14), transparent);
}

.ai-enterprise-nav-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.ai-enterprise-nav-item strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

.ai-enterprise-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-enterprise-detail header h4 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}

.ai-enterprise-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-enterprise-block {
  min-height: 180px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.ai-enterprise-block h5 {
  margin: 0 0 10px;
  font-size: 14px;
}

.ai-enterprise-block p {
  font-size: 14px;
}

.ai-playbook-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ai-playbook-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-playbook-nav-item {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.ai-playbook-nav-item:hover,
.ai-playbook-nav-item.active {
  border-color: rgba(var(--primary-rgb), 0.22);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.12), transparent);
}

.ai-playbook-nav-item strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.ai-playbook-nav-item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-playbook-detail {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ai-playbook-detail header h4 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 0;
}

.ai-detail-block {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.ai-detail-block h5 {
  margin: 0 0 10px;
  font-size: 14px;
}

.ai-detail-block p {
  font-size: 14px;
}

.ai-detail-block ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.75;
}

.ai-detail-block li + li {
  margin-top: 7px;
}

.ai-task-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 13px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  z-index: 1;
}

.task-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.task-table-wrap {
  position: relative;
  overflow: visible;
}

.task-header-row th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  box-shadow: 0 1px 0 var(--line), 0 8px 18px rgba(0, 0, 0, 0.18);
  overflow: visible;
  vertical-align: middle;
  z-index: 20;
}

.task-header-row th:hover,
.task-header-row th:focus-within {
  z-index: 60;
}

.task-title-head {
  min-width: 260px;
}

.task-head-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
}

.task-head-cell.action {
  justify-content: space-between;
  gap: 8px;
}

.task-head-label {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
}

.task-head-cell.is-active .task-head-label {
  color: var(--accent);
}

.task-filter-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(209, 213, 219, 0.48);
  transform: translateY(1px);
}

.task-head-cell.is-active .task-filter-arrow {
  border-top-color: var(--accent);
}

.task-filter-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 150px;
  max-width: 240px;
  max-height: 290px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
}

.task-filter-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 12px;
}

.task-head-cell:hover .task-filter-menu,
.task-head-cell:focus-within .task-filter-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.task-search-menu {
  width: 260px;
  max-width: 260px;
}

.table-filter-control {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.table-filter-control,
.task-search-control {
  padding: 5px 7px;
}

.task-filter-option {
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.task-filter-option:hover,
.task-filter-option.is-selected {
  background: rgba(var(--primary-rgb), 0.075);
}

.task-filter-option.is-selected {
  color: var(--accent);
  font-weight: 750;
}

.task-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 4px;
}

.task-action-head {
  min-width: 132px;
}

.task-table .task-action-head,
.task-table tbody tr:not(.task-group-row) > td:last-child {
  position: sticky;
  right: 0;
  z-index: 12;
  min-width: 132px;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--line);
}

.task-table .task-action-head {
  z-index: 32;
  background: var(--surface-soft);
}

.task-table tbody tr:not(.task-group-row):hover > td:last-child,
.task-table tr.is-selected td:last-child {
  background: var(--surface-soft);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.task-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.task-import-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 115, 232, 0.22);
  border-radius: 12px;
  background: rgba(26, 115, 232, 0.08);
  color: var(--text);
}

.task-import-notice strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
}

.task-import-notice span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.task-batch-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.task-batch-select input,
.task-select-cell input {
  accent-color: var(--accent);
}

.task-batch-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.task-batch-summary strong,
.task-batch-summary span {
  display: inline;
  min-width: 0;
}

.task-batch-summary strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.task-batch-summary span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.task-batch-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.task-select-head,
.task-select-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.task-select-cell input {
  width: 15px;
  height: 15px;
}

.task-table tr.is-selected td {
  background: rgba(var(--primary-rgb), 0.08);
}

.task-batch-edit-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.task-batch-edit-summary strong {
  color: var(--text);
  font-size: 14px;
}

.task-batch-edit-summary span {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
}

.task-batch-edit-summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-batch-delete-warning {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(198, 40, 40, 0.24);
  border-radius: 10px;
  background: rgba(198, 40, 40, 0.08);
}

.task-batch-delete-warning strong {
  color: var(--danger);
  font-size: 14px;
}

.task-batch-delete-warning span {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
}

.task-batch-delete-list {
  max-height: 42vh;
  overflow: auto;
  padding: 6px 4px 6px 0;
}

.task-batch-delete-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-batch-delete-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.task-batch-delete-list li strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-batch-delete-list li em {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.task-batch-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 650;
}

.task-batch-delete-confirm input {
  accent-color: var(--danger);
}

.task-group-row td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.07), rgba(255, 255, 255, 0));
}

.task-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
}

.task-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.task-group-title .phase-range {
  flex: 0 0 auto;
  line-height: 1.2;
}

.task-group-title strong {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}

.task-group-goal {
  min-width: 0;
  padding-left: 8px;
  overflow: hidden;
  border-left: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-phase-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 166px;
}

.task-phase-add {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 9px;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--accent);
  white-space: nowrap;
}

.task-empty-row td {
  padding: 13px 14px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}

tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #fbf7f1;
}

.cell-title {
  max-width: 320px;
  font-weight: 700;
}

.cell-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tooltip-wrap {
  position: relative;
  display: inline-block;
  padding-right: 18px;
}

.tooltip-dot {
  position: absolute;
  top: -8px;
  right: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: rgba(55, 29, 26, 0.44);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
}

.code-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
}

.metric-floating-tooltip {
  position: fixed;
  z-index: 100;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.98);
  color: var(--ink);
  box-shadow: var(--shadow-strong);
  pointer-events: none;
}

.metric-floating-tooltip p {
  margin: 7px 0 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
}

.metrics-groups {
  display: grid;
  gap: 16px;
}

.metrics-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(33, 22, 22, 0.035);
}

.metrics-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.metrics-group.collapsed .metrics-group-header {
  border-bottom: 0;
}

.metrics-group-header h3 {
  margin: 0;
  font-size: 16px;
}

.metrics-group-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.metrics-group-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-top: 1px;
}

.metric-collapse-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.metric-collapse-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

.metrics-group-header:hover .metric-collapse-label,
.metrics-group-header:focus-visible .metric-collapse-label {
  color: var(--accent);
}

.metrics-group-header:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.24);
  outline-offset: -2px;
}

.metrics-table-wrap {
  border: 0;
  border-radius: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.pill.good {
  border-color: rgba(80, 107, 88, 0.26);
  background: rgba(80, 107, 88, 0.07);
  color: var(--green);
}

.pill.warn {
  border-color: rgba(150, 104, 61, 0.26);
  background: rgba(150, 104, 61, 0.08);
  color: var(--amber);
}

.pill.bad {
  border-color: rgba(185, 66, 62, 0.26);
  background: rgba(185, 66, 62, 0.06);
  color: var(--red);
}

.pill.info {
  border-color: rgba(93, 98, 112, 0.24);
  background: rgba(93, 98, 112, 0.07);
  color: var(--blue);
}

.pill.gold {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.11);
  color: var(--gold);
}

.progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
}

.progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.progress-bar.warn {
  background: var(--amber);
}

.progress-bar.bad {
  background: var(--red);
}

.metric-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metric-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px;
  align-items: center;
  gap: 10px;
}

.metric-label {
  color: var(--muted);
  font-size: 13px;
}

.metric-value {
  font-weight: 750;
  text-align: right;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 74px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.timeline-date {
  color: var(--muted);
  font-size: 12px;
}

.timeline-name {
  font-weight: 700;
}

.empty-state {
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.62);
  z-index: 200;
}

.modal {
  width: min(980px, 100%);
  max-height: min(88vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 3px 0 0;
}

.record-form {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 20px;
}

.record-form.detail-view {
  display: block;
}

.record-form.import-view {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.record-form > .full {
  grid-column: 1 / -1;
}

.task-import-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.4fr) auto;
  align-items: end;
  gap: 10px;
}

.task-import-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-import-toolbar label span,
.task-import-summary span {
  color: var(--muted);
  font-size: 12px;
}

.task-import-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.task-import-summary strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 14px;
}

.task-import-select-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.task-import-error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(198, 40, 40, 0.22);
  border-radius: 8px;
  background: rgba(198, 40, 40, 0.08);
  color: var(--danger);
  font-size: 12px;
  font-weight: 650;
}

.task-import-list {
  display: grid;
  gap: 10px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 4px;
}

.task-import-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.task-import-item:hover {
  border-color: rgba(var(--primary-rgb), 0.38);
  background: var(--surface-soft);
  box-shadow: var(--shadow);
}

.task-import-item input {
  margin-top: 5px;
  accent-color: var(--accent);
}

.task-import-main {
  min-width: 0;
}

.task-import-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-import-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-import-main p {
  margin: 7px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.task-import-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-import-meta span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.2;
}

.plan-import-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.plan-import-panel div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.plan-import-panel strong,
.plan-import-rules strong,
.plan-import-errors strong,
.plan-import-preview-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
}

.plan-import-panel span,
.plan-import-rules li,
.plan-import-errors span,
.plan-import-preview-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.plan-import-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
}

.plan-import-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.plan-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.plan-import-summary div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.plan-import-summary span {
  color: var(--muted);
  font-size: 12px;
}

.plan-import-summary strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.plan-import-summary .has-error {
  border-color: rgba(198, 40, 40, 0.24);
  background: rgba(198, 40, 40, 0.06);
}

.plan-import-summary .has-error strong {
  color: var(--danger);
}

.plan-import-rules,
.plan-import-errors,
.plan-import-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.plan-import-rules ol,
.plan-import-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.plan-import-rules li + li,
.plan-import-errors li + li {
  margin-top: 4px;
}

.plan-import-errors {
  border-color: rgba(198, 40, 40, 0.24);
  background: rgba(198, 40, 40, 0.06);
}

.plan-import-errors li span {
  color: var(--danger);
  font-weight: 740;
}

.plan-import-errors li strong {
  color: var(--text);
  font-size: 12px;
}

.plan-import-preview {
  display: grid;
  gap: 10px;
}

.plan-import-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-import-preview-item {
  grid-template-columns: auto minmax(0, 1fr);
  cursor: default;
}

.plan-import-preview-item:hover {
  background: var(--surface);
  box-shadow: none;
}

.account-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.account-summary-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--accent);
  font-size: 17px;
  font-weight: 850;
}

.account-summary strong,
.account-summary span {
  display: block;
}

.account-summary strong {
  font-size: 16px;
}

.account-summary span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.account-binding-panel.current-account-binding {
  margin-top: 0;
}

.account-form-error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(185, 66, 62, 0.24);
  border-radius: 7px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 13px;
}

.detail-head,
.detail-section {
  margin-bottom: 14px;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.detail-meta {
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.detail-meta span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.detail-meta strong {
  font-size: 14px;
  line-height: 1.35;
}

.detail-section {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.detail-section h3 {
  margin: 0 0 9px;
  font-size: 15px;
}

.detail-section p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.65;
}

.detail-section ul {
  margin: 0;
  padding-left: 18px;
}

.detail-section li {
  margin: 6px 0;
  line-height: 1.55;
}

.task-record-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.task-record-identity { display: grid; align-content: center; gap: 10px; }
.task-record-identity > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.task-record-identity p { margin: 0; color: var(--muted-strong); font-size: 14px; font-weight: 650; }
.task-record-health { display: grid; gap: 14px; }
.task-record-pills { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.task-record-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; }
.task-record-progress > span { color: var(--muted); font-size: 12px; }
.task-record-progress > strong { font-size: 18px; }
.task-record-progress > div { grid-column: 1 / -1; }
.task-record-progress .cell-sub { display: none; }
.task-record-meta-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.task-record-meta-card { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.task-record-meta-card > h3 { margin: 0 0 12px; font-size: 14px; }
.task-record-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-record-meta-grid .detail-meta { min-height: 58px; background: var(--surface-soft); }
.task-record-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.task-record-content-grid .detail-section { margin: 0; min-height: 116px; }
.task-record-content-grid .task-record-deliverable,
.task-record-content-grid .task-record-attachments { grid-column: 1 / -1; }
.task-record-content-grid .task-record-deliverable { border-left: 4px solid var(--primary-top); }
.record-form.detail-view > .form-actions { justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .task-record-overview,
  .task-record-meta-layout,
  .task-record-content-grid { grid-template-columns: 1fr; }
  .task-record-pills { justify-content: flex-start; }
  .task-record-content-grid .task-record-deliverable,
  .task-record-content-grid .task-record-attachments { grid-column: auto; }
}

.detail-note {
  margin-top: 8px !important;
  color: var(--muted) !important;
  font-size: 13px;
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-chip {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.form-field-help {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.form-hint {
  color: var(--muted);
  font-size: 12px;
}

.form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.tiny-button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.tiny-button.danger {
  border-color: rgba(185, 66, 62, 0.24);
  color: var(--red);
}

.table-actions .tiny-button.budget-approved-action:disabled {
  cursor: not-allowed;
  border-color: var(--line);
  background: var(--surface-muted);
  color: var(--muted);
  opacity: 1;
  box-shadow: none;
  filter: none;
}

.budget-table {
  min-width: 1080px;
}

.budget-table th:first-child,
.budget-table td:first-child {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
}

.budget-table .budget-name-button,
.budget-table td:first-child .cell-sub {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.budget-table .budget-action-head,
.budget-table .budget-action-cell {
  width: 100px;
  min-width: 100px;
}

.budget-table-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.budget-table-actions .tiny-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.budget-table tfoot td {
  border-top: 2px solid var(--line-strong);
  background: var(--surface-soft);
}

.budget-total-row td {
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.budget-total-row td:first-child {
  display: table-cell;
}

.budget-total-row td:first-child strong,
.budget-total-row td:first-child small {
  display: block;
}

.budget-total-row td:first-child strong {
  color: var(--primary-top);
  font-size: 14px;
}

.budget-total-row td:first-child small,
.budget-total-note {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.budget-total-row td:nth-child(3) strong,
.budget-total-row td:nth-child(4) strong,
.budget-total-row td:nth-child(5) strong,
.budget-total-row td:nth-child(6) strong {
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.budget-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.budget-detail-meta .detail-meta {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.budget-adjustment-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(var(--primary-rgb), .22);
  border-radius: 13px;
  background: rgba(var(--primary-rgb), .035);
}

.budget-adjustment-pending,
.budget-adjustment-clear {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.budget-adjustment-pending {
  background: rgba(245, 158, 11, .13);
  color: #b45309;
}

.budget-adjustment-clear {
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary-top);
}

.budget-adjustment-summary,
.budget-adjustment-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.budget-adjustment-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.budget-adjustment-summary > div,
.budget-adjustment-preview > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--surface-soft);
}

.budget-adjustment-summary span,
.budget-adjustment-preview span {
  color: var(--muted);
  font-size: 11px;
}

.budget-adjustment-summary strong,
.budget-adjustment-preview strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-adjustment-summary strong.is-added { color: var(--primary-top); }
.budget-adjustment-summary strong.is-reduced { color: #b45309; }
.budget-adjustment-preview .is-result { background: rgba(var(--primary-rgb), .1); }

.budget-adjustment-current {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 10px;
  background: rgba(245, 158, 11, .07);
}

.budget-adjustment-current > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.budget-adjustment-current span,
.budget-adjustment-current small { color: var(--muted); }
.budget-adjustment-current p { margin: 0; color: var(--muted-strong); line-height: 1.6; }

.budget-adjustment-history {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.budget-adjustment-history table {
  width: 100%;
  min-width: 780px;
  font-size: 12px;
}

.budget-adjustment-history th,
.budget-adjustment-history td {
  padding: 9px 10px;
  vertical-align: top;
}

.budget-adjustment-history td span,
.budget-adjustment-history td small { display: block; }
.budget-adjustment-history td small { margin-top: 4px; color: var(--muted); }

.budget-adjustment-request-detail {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.budget-adjustment-request-detail h3 { margin: 0; color: var(--ink); font-size: 14px; }
.budget-adjustment-request-detail p { margin: 0 0 4px; color: var(--muted-strong); line-height: 1.65; }

.budget-execution-section {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.budget-execution-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.budget-execution-heading span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.budget-execution-heading h3,
.budget-result-section h3,
.budget-attachment-section h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 17px;
}

.budget-execution-rate {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary-top);
  font-size: 12px;
  white-space: nowrap;
}

.budget-execution-rate.is-over,
.budget-execution-summary .is-over strong {
  color: var(--red);
}

.budget-execution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.budget-execution-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--surface-soft);
}

.budget-execution-summary span {
  color: var(--muted);
  font-size: 11px;
}

.budget-execution-summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-execution-baseline,
.budget-execution-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.budget-execution-ledger {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.budget-execution-ledger table {
  width: 100%;
  min-width: 840px;
  font-size: 12px;
}

.budget-execution-ledger th,
.budget-execution-ledger td {
  padding: 9px 10px;
  vertical-align: top;
}

.budget-execution-ledger td small {
  display: block;
  max-width: 220px;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.budget-execution-attachments {
  display: grid;
  gap: 4px;
  min-width: 110px;
}

.budget-execution-attachments a {
  overflow: hidden;
  color: #2563eb;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-result-section {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.budget-result-section p {
  margin: 8px 0 0;
  color: var(--muted-strong);
  line-height: 1.7;
}

.budget-attachment-section {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.attachment-viewer {
  display: grid;
  gap: 8px;
}

.attachment-viewer:not(.is-compact) a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.attachment-viewer a > span {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attachment-viewer .attachment-image-link {
  justify-content: flex-start;
}

.attachment-viewer .attachment-image-link img {
  width: 72px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface-soft);
}

.attachment-viewer.is-compact .attachment-image-link img {
  width: 42px;
  height: 34px;
}

.attachment-viewer:not(.is-compact) a:hover {
  border-color: rgba(var(--primary-rgb), .35);
  color: #1d4ed8;
}

.attachment-viewer:not(.is-compact) strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer:not(.is-compact) small {
  flex: 0 0 auto;
  color: inherit;
}

.attachment-viewer.is-compact {
  min-width: 110px;
  gap: 4px;
}

.attachment-viewer.is-compact a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  color: #2563eb;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.attachment-viewer.is-compact strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-viewer.is-compact small {
  flex: 0 0 auto;
  font-size: 10px;
}

.attachment-viewer a:hover strong {
  text-decoration: underline;
}

.attachment-viewer-empty {
  margin: 0;
  color: var(--muted);
}

.record-attachment-section {
  margin: 0;
}

@media (max-width: 800px) {
  .budget-detail-meta,
  .budget-execution-summary,
  .budget-adjustment-summary,
  .budget-adjustment-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .budget-detail-meta,
  .budget-execution-summary,
  .budget-adjustment-summary,
  .budget-adjustment-preview {
    grid-template-columns: 1fr;
  }
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.quick-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--primary-rgb), 0.24);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.quick-card h3 {
  margin: 0;
  font-size: 14px;
}

.quick-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.org-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.org-principle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.org-principle strong {
  flex: 0 0 auto;
}

.org-principle span {
  color: var(--muted-strong);
  line-height: 1.55;
}

.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-directory-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.org-directory-toolbar .input { min-width: min(360px, 100%); flex: 1; }
.org-directory-groups { display: grid; gap: 14px; }
.org-department-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); overflow: hidden; }
.org-department-card > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface); }
.org-department-card > header span { display: block; color: var(--muted); font-size: 11px; }
.org-department-card > header h3 { margin: 3px 0 0; font-size: 16px; }
.org-department-card > header strong { color: var(--primary); font-size: 13px; }
.org-person-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.org-person-card { display: flex; gap: 10px; min-width: 0; padding: 12px; background: var(--surface); }
.org-person-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 700; }
.org-person-card h4 { margin: 0; font-size: 14px; }
.org-person-card h4 small { color: var(--muted); font-weight: 400; }
.org-person-card p { margin: 4px 0; color: var(--muted-strong); font-size: 12px; }
.org-person-card div > span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.person-select { min-height: 42px; }
.person-combobox { position: relative; }
.person-combobox .person-select { width: 100%; padding-right: 130px; }
.person-search-hint { position: absolute; top: 50%; right: 12px; color: var(--muted); font-size: 11px; pointer-events: none; transform: translateY(-50%); }
.person-combobox .person-select:focus + .person-search-hint,
.person-combobox .person-select:not(:placeholder-shown) + .person-search-hint { display: none; }
.person-options-panel { position: absolute; z-index: 50; top: calc(100% + 5px); right: 0; left: 0; display: grid; grid-template-columns: minmax(120px, 36%) minmax(0, 1fr); height: 320px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); box-shadow: 0 12px 30px rgba(15, 23, 42, .18); }
.person-options-panel[hidden] { display: none; }
.person-options-departments { overflow-y: auto; padding: 6px; border-right: 1px solid var(--line); background: var(--surface-soft); }
.person-options-departments > strong { display: block; padding: 7px 8px; color: var(--muted); font-size: 11px; }
.person-options-departments button { display: flex; justify-content: space-between; gap: 6px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-strong); text-align: left; cursor: pointer; }
.person-options-departments button:hover, .person-options-departments button.active { background: rgba(var(--primary-rgb), .11); color: var(--primary); }
.person-options-departments button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-options-departments button small { color: var(--muted); }
.person-options-members { overflow-y: auto; padding: 6px; }
.person-option-group + .person-option-group { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.person-option-group > strong { display: block; padding: 6px 9px; color: var(--muted); font-size: 11px; }
.person-option-group button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.person-option-group button:hover { background: rgba(var(--primary-rgb), .10); color: var(--primary); }
.person-option-group button small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.person-options-empty { padding: 18px; color: var(--muted); text-align: center; }
.person-combobox.is-multiple { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 42px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.person-combobox.is-multiple .person-select { flex: 1 1 180px; min-height: 30px; padding: 3px 4px; border: 0; box-shadow: none; }
.person-combobox.is-multiple .person-search-hint { display: none; }
.person-multi-values { display: contents; }
.person-multi-values > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; background: rgba(var(--primary-rgb), .11); color: var(--primary); font-size: 12px; }
.person-multi-values > span.is-legacy { background: rgba(217, 119, 6, .11); color: #b45309; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .28); }
.person-multi-values > span.is-invalid { background: rgba(220, 38, 38, .11); color: #dc2626; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .28); }
.person-multi-values button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--primary-rgb), .12); color: inherit; line-height: 1; cursor: pointer; }
.person-selection-rule { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.person-combobox.is-multiple .person-selection-rule { flex: 1 0 100%; margin: 0; padding: 0 4px 2px; }
.person-combobox.has-legacy-person .person-selection-rule { color: #b45309; font-weight: 600; }
.person-combobox.has-invalid-person .person-selection-rule { color: #dc2626; font-weight: 600; }
.person-combobox:not(.is-multiple).has-invalid-person .person-select,
.person-combobox.is-multiple.has-invalid-person { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .10); }
.department-plan-save-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(220, 38, 38, .25); border-radius: 10px; background: rgba(220, 38, 38, .07); color: #b91c1c; font-size: 13px; line-height: 1.5; }

.attachment-field { display: grid; gap: 10px; }
.attachment-list { display: grid; gap: 8px; }
.attachment-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.attachment-item a { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.attachment-item a > span { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.attachment-item img { width: 58px; height: 44px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; background: var(--surface); }
.attachment-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item small { flex: 0 0 auto; color: inherit; }
.attachment-item > button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }
.attachment-item > button:hover { background: rgba(220, 38, 38, .1); color: #dc2626; }
.attachment-actions { display: flex; align-items: center; gap: 10px; }
.attachment-upload-button { position: relative; flex: 0 0 auto; padding-right: 12px; padding-left: 12px; font-size: 11px; white-space: nowrap; cursor: pointer; }
.attachment-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-link-entry { min-width: 0; flex: 1; display: flex; gap: 8px; }
.attachment-link-entry .input { min-width: 0; }
.attachment-link-entry .button { flex: 0 0 auto; padding-right: 12px; padding-left: 12px; font-size: 11px; white-space: nowrap; }
.attachment-help, .attachment-status { color: var(--muted); }
.attachment-status:not(:empty) { color: var(--primary); }
@media (max-width: 720px) { .attachment-actions, .attachment-link-entry { align-items: stretch; flex-direction: column; } }
.required-mark { margin-left: 4px; color: #dc2626; font-weight: 700; }
.department-plan-item-row { cursor: pointer; transition: background-color .15s ease; }
.department-plan-item-row:hover, .department-plan-item-row:focus { background: rgba(var(--primary-rgb), .055); outline: none; }
.department-plan-item-row td:nth-child(2) strong,
.department-plan-item-row td:nth-child(2) small {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.department-plan-item-row td:nth-child(2) strong { color: var(--primary); }
.department-plan-item-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  white-space: nowrap;
}
.department-plan-item-title strong {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.department-plan-item-title .key-milestone-badge {
  flex: 0 0 auto;
  margin-left: 0;
  white-space: nowrap;
  word-break: keep-all;
}
.collaborator-cell { display: flex; align-items: center; gap: 4px; width: max-content; max-width: 180px; white-space: nowrap; }
.collaborator-cell span, .collaborator-cell b { display: inline-block; padding: 3px 7px; border-radius: 999px; background: rgba(var(--primary-rgb), .09); color: var(--primary); font-size: 12px; font-weight: 650; line-height: 1.25; }
.collaborator-cell b { background: var(--surface-soft); color: var(--muted-strong); }
.collaborator-empty { color: var(--muted); }
.plan-meta-chip { display: inline-flex; align-items: center; width: max-content; max-width: 150px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted-strong); font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.plan-meta-chip.department { background: rgba(100, 116, 139, .1); color: var(--ink); }
.plan-meta-chip.date { border-color: rgba(var(--primary-rgb), .18); background: rgba(var(--primary-rgb), .07); color: var(--primary); font-variant-numeric: tabular-nums; }
.department-chip {
  --department-rgb: 100, 116, 139;
  --department-ink: #475569;
  max-width: 100%;
  border-color: rgba(var(--department-rgb), .25) !important;
  background: rgba(var(--department-rgb), .11) !important;
  color: var(--department-ink) !important;
}
.department-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.department-chip.is-compact { min-height: 19px; padding: 2px 6px; font-size: 10px; }
.department-tone-executive { --department-rgb: 124, 58, 237; --department-ink: #6d28d9; }
.department-tone-brand { --department-rgb: 37, 99, 235; --department-ink: #1d4ed8; }
.department-tone-product { --department-rgb: 8, 145, 178; --department-ink: #0e7490; }
.department-tone-collaboration { --department-rgb: 219, 39, 119; --department-ink: #be185d; }
.department-tone-commerce { --department-rgb: 234, 88, 12; --department-ink: #c2410c; }
.department-tone-live { --department-rgb: 220, 38, 38; --department-ink: #b91c1c; }
.department-tone-design { --department-rgb: 147, 51, 234; --department-ink: #7e22ce; }
.department-tone-content { --department-rgb: 192, 38, 211; --department-ink: #a21caf; }
.department-tone-private { --department-rgb: 13, 148, 136; --department-ink: #0f766e; }
.department-tone-service { --department-rgb: 2, 132, 199; --department-ink: #0369a1; }
.department-tone-finance { --department-rgb: 22, 163, 74; --department-ink: #15803d; }
.department-tone-supply { --department-rgb: 202, 138, 4; --department-ink: #a16207; }
.department-tone-offline { --department-rgb: 225, 29, 72; --department-ink: #be123c; }
.department-tone-data { --department-rgb: 14, 116, 144; --department-ink: #0e7490; }
.department-tone-people { --department-rgb: 79, 70, 229; --department-ink: #4338ca; }
body[data-theme="dark"] .department-chip,
body[data-palette="midnight"] .department-chip {
  border-color: rgba(var(--department-rgb), .5) !important;
  background: rgba(var(--department-rgb), .22) !important;
  color: #f8fafc !important;
}
body[data-theme="dark"] .attachment-viewer a,
body[data-theme="dark"] .attachment-item a,
body[data-theme="dark"] .budget-execution-attachments a,
body[data-palette="midnight"] .attachment-viewer a,
body[data-palette="midnight"] .attachment-item a,
body[data-palette="midnight"] .budget-execution-attachments a { color: #60a5fa; }
.form-checkbox { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); cursor: pointer; }
.form-checkbox input { width: 18px; height: 18px; accent-color: var(--primary); }
.form-checkbox span { color: var(--muted-strong); font-size: 13px; }
.key-milestone-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 3px 7px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.tiny-button.report-button { border-color: var(--primary-top); background: var(--primary-top); color: #fff; }
.tiny-button.report-button:hover { filter: brightness(.94); }
.work-report-form .attachment-field { min-height: 120px; }
.person-option-group button:disabled { opacity: .42; cursor: default; }
.member-batch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.member-batch-bar label { display: inline-flex; align-items: center; gap: 6px; }
.member-batch-bar .select { width: auto; min-width: 150px; }
.member-table-wrap table { min-width: 1640px; }
.member-table-wrap td small { display: block; margin-top: 3px; color: var(--muted); }
.member-account-link { display: grid; gap: 2px; min-width: 110px; }
.member-account-link strong { font-size: 12px; }
.member-account-link small { color: var(--green); font-size: 10px; }
.member-account-link.pending small { color: var(--amber); }
.member-feishu-binding { display: flex; align-items: center; gap: 8px; min-width: 210px; }
.member-feishu-binding .tiny-button { flex: 0 0 auto; }
.member-feishu-status { min-width: 145px; }
.member-feishu-status strong { white-space: nowrap; }
.member-binding-actions { min-width: 150px; flex-wrap: wrap; }
.feishu-directory-sync-form { grid-template-columns: 1fr; }
.feishu-sync-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.feishu-sync-summary article { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.feishu-sync-summary article span { color: var(--muted); font-size: 12px; }
.feishu-sync-summary article strong { font-size: 26px; line-height: 1; }
.feishu-sync-summary article.is-added strong { color: var(--green); }
.feishu-sync-summary article.is-updated strong { color: var(--primary); }
.feishu-sync-summary article.is-departed strong { color: var(--red); }
.feishu-sync-notice { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.feishu-sync-notice strong { font-size: 13px; }
.feishu-sync-notice span { color: var(--muted-strong); font-size: 12px; line-height: 1.6; }
.feishu-sync-change-group { display: grid; gap: 8px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.feishu-sync-change-group.has-risk { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); }
.feishu-sync-change-group h3 { margin: 0; font-size: 14px; }
.feishu-sync-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 180px; overflow-y: auto; }
.feishu-sync-item { display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px; background: var(--surface-soft); }
.feishu-sync-item strong { font-size: 12px; }
.feishu-sync-item span, .feishu-sync-empty { color: var(--muted); font-size: 11px; line-height: 1.5; }
.feishu-sync-confirm { margin: 0; }
@media (max-width: 760px) {
  .feishu-sync-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feishu-sync-list { grid-template-columns: 1fr; }
}
.binding-member-summary { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.binding-member-summary span { color: var(--muted); font-size: 12px; }
.invite-link-value { min-height: 110px; word-break: break-all; }
.member-management-section > .section-header { border-bottom: 0; }
.admin-console-head { display: block; margin-bottom: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-console-head h2 { margin: 3px 0 5px; font-size: 24px; }
.admin-console-head p { margin: 0; color: var(--muted); font-size: 13px; }
.managed-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.managed-project-card { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.managed-project-card.is-archived { border-style: dashed; background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft)); opacity: .78; }
.managed-project-card.is-archived h3 { color: var(--muted-strong); }
.managed-project-card header, .managed-project-card footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.managed-project-card header > div { display: flex; gap: 9px; align-items: center; min-width: 0; }
.managed-project-card h3 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.managed-project-card > p { min-height: 44px; margin: 0; color: var(--muted-strong); line-height: 1.65; }
.managed-project-auth { display: grid; gap: 5px; padding: 10px 12px; border-radius: 8px; background: var(--surface-soft); }
.managed-project-auth strong { font-size: 11px; color: var(--muted); }
.managed-project-auth span { color: var(--text); font-size: 12px; line-height: 1.55; }
.managed-project-card footer { padding-top: 11px; border-top: 1px solid var(--line); }
.managed-project-card footer small { color: var(--muted); }
.managed-project-account-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.managed-project-account-options label { display: flex; gap: 8px; align-items: flex-start; padding: 9px; border-radius: 7px; background: var(--surface); cursor: pointer; }
.managed-project-account-options label > span { display: grid; gap: 2px; }
.managed-project-account-options small { color: var(--muted); }
.managed-project-delete-form { max-width: 880px; }
.managed-project-delete-warning,
.managed-project-delete-blocker,
.managed-project-delete-reference-note,
.managed-project-delete-no-budget { display: grid; gap: 6px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.managed-project-delete-warning { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .07); }
.managed-project-delete-warning strong,
.managed-project-delete-blocker strong { color: var(--red); }
.managed-project-delete-warning span,
.managed-project-delete-reference-note span,
.managed-project-delete-no-budget span { color: var(--muted-strong); font-size: 12px; line-height: 1.6; }
.managed-project-delete-impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.managed-project-delete-impact article { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.managed-project-delete-impact article.budget { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .07); }
.managed-project-delete-impact span { color: var(--muted); font-size: 11px; }
.managed-project-delete-impact strong { color: var(--text); font-size: 22px; }
.managed-project-delete-impact small { color: var(--muted-strong); font-size: 10px; line-height: 1.45; }
.managed-project-delete-blocker { border-color: rgba(239, 68, 68, .32); background: rgba(239, 68, 68, .08); }
.managed-project-delete-blocker p { margin: 0; color: var(--muted-strong); font-size: 12px; line-height: 1.65; }
.managed-project-delete-reference-note { border-color: rgba(var(--primary-rgb), .28); background: rgba(var(--primary-rgb), .07); }
.managed-project-delete-references { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.managed-project-delete-references li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 7px; background: var(--surface); }
.managed-project-delete-references li strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.managed-project-delete-references li span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.managed-project-delete-confirm { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); cursor: pointer; }
.managed-project-delete-confirm.budget { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .07); }
.managed-project-delete-confirm input { margin-top: 3px; }
.managed-project-delete-confirm span { display: grid; gap: 3px; }
.managed-project-delete-confirm strong { color: var(--text); font-size: 13px; }
.managed-project-delete-confirm small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.managed-project-delete-no-budget { border-color: rgba(22, 163, 74, .25); background: rgba(22, 163, 74, .06); }
.managed-project-delete-no-budget strong { color: #15803d; }
@media (max-width: 760px) { .managed-project-delete-impact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .managed-project-grid, .managed-project-account-options { grid-template-columns: 1fr; } }
.member-tabs { display: flex; gap: 28px; padding: 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.member-tabs button { position: relative; padding: 16px 2px; border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: default; }
.member-tabs button[data-member-directory-tab] { cursor: pointer; }
.member-tabs button[data-member-directory-tab]:hover { color: var(--primary-top); }
.member-tabs button.active { color: var(--primary-top); font-weight: 700; }
.member-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary-top); }
.member-split-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 650px; }
.member-department-sidebar { padding: 18px 14px; border-right: 1px solid var(--line); background: var(--surface); }
.member-department-search { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; }
.member-department-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.member-department-tree { display: grid; gap: 5px; }
.member-tree-company, .member-tree-node, .member-tree-leaf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-strong); text-align: left; cursor: pointer; }
.member-tree-company:hover, .member-tree-node:hover, .member-tree-leaf:hover, .member-tree-company.active, .member-tree-node.active, .member-tree-leaf.active { background: rgba(var(--primary-rgb), .10); color: var(--primary-top); }
.member-tree-company strong, .member-tree-node strong, .member-tree-leaf strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.member-tree-company em, .member-tree-node em, .member-tree-leaf em { color: var(--muted); font-size: 11px; font-style: normal; }
.member-tree-children { display: grid; gap: 2px; }
.member-tree-leaf { padding-left: 26px; }
.member-list-panel { min-width: 0; padding: 20px; }
.member-list-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.member-list-heading > div { display: flex; align-items: baseline; gap: 18px; }
.member-list-heading h3 { margin: 0; font-size: 20px; }
.member-list-heading span { color: var(--muted); }
.member-list-heading strong { margin-left: 6px; color: var(--text); font-size: 18px; }
.member-linking-assistant { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(220px, .8fr) auto auto; gap: 10px; align-items: center; margin-bottom: 14px; padding: 14px; border: 1px solid rgba(var(--primary-rgb), .28); border-radius: 10px; background: rgba(var(--primary-rgb), .07); }
.member-linking-assistant-copy { display: grid; gap: 3px; }
.member-linking-assistant-copy strong { color: var(--text); font-size: 14px; }
.member-linking-assistant-copy span { color: var(--muted-strong); font-size: 12px; line-height: 1.45; }
.member-linking-assistant .button { min-height: 42px; white-space: nowrap; }
.member-name-cell { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.member-name-cell .org-person-avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
.department-directory-body { padding: 20px; }
.department-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.department-summary-grid article { display: grid; gap: 4px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.department-summary-grid span { color: var(--muted); font-size: 12px; font-weight: 700; }
.department-summary-grid strong { color: var(--text); font-size: 24px; line-height: 1.2; }
.department-summary-grid small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.department-directory-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 160px 180px auto; gap: 10px; align-items: center; margin-bottom: 14px; }
.department-directory-table table { min-width: 1480px; }
.department-directory-table code { color: var(--muted-strong); font-size: 11px; white-space: nowrap; }
.department-name-cell { display: grid; gap: 3px; min-width: 220px; }
.department-name-cell strong { color: var(--text); font-size: 13px; }
.department-name-cell small { color: var(--muted); font-size: 11px; }
.department-name-cell em { color: var(--primary-top); font-size: 10px; font-style: normal; }
.department-level-1 .department-name-cell { padding-left: 0; }
.department-level-2 .department-name-cell { padding-left: 18px; }
.department-level-1 .department-name-cell strong { font-size: 14px; }
.department-leader-cell { display: grid; gap: 4px; min-width: 180px; }
.department-leader-cell strong { color: var(--text); font-size: 12px; }
.department-leader-cell strong.is-missing { color: var(--amber); }
.department-leader-cell a { color: var(--primary-top); font-size: 11px; text-decoration: none; }
.department-leader-cell small { color: var(--muted); font-size: 10px; }
.department-leader-cell .pill { width: fit-content; }
.department-headcount { display: grid; gap: 3px; min-width: 150px; }
.department-headcount strong { font-size: 18px; }
.department-headcount span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.department-auto-types { display: flex; flex-wrap: wrap; gap: 4px; min-width: 180px; }
.department-auto-types span { padding: 3px 6px; border-radius: 999px; background: rgba(var(--primary-rgb), .09); color: var(--primary-top); font-size: 10px; }
.department-auto-types em { color: var(--amber); font-size: 11px; font-style: normal; }
.department-data-warning { display: inline-flex; max-width: 170px; padding: 5px 8px; border-radius: 7px; background: var(--amber-soft); color: var(--amber); font-size: 10px; line-height: 1.45; }
.department-row-actions { min-width: 180px; flex-wrap: nowrap; }
.department-editor-form { max-width: 760px; }
.member-editor-form { max-width: 760px; }
.member-editor-note { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(var(--primary-rgb), .25); border-radius: 9px; background: rgba(var(--primary-rgb), .06); }
.member-editor-note strong { color: var(--text); font-size: 13px; }
.member-editor-note span { color: var(--muted-strong); font-size: 12px; line-height: 1.55; }
.department-workforce-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }

/* 管理后台宽表必须在内容区内完整可访问，覆盖 Google 主题的通用 overflow: visible。 */
.member-table-wrap,
.department-directory-table,
body[data-theme="google"] .member-table-wrap,
body[data-theme="google"] .department-directory-table {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable;
}
.department-workforce-options label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px; background: var(--surface); color: var(--muted-strong); font-size: 12px; cursor: pointer; }
.department-workforce-options input { width: 16px; height: 16px; accent-color: var(--primary); }
.department-editor-note { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(var(--primary-rgb), .25); border-radius: 9px; background: rgba(var(--primary-rgb), .06); }
.department-editor-note strong { color: var(--primary-top); font-size: 12px; }
.department-editor-note span { color: var(--muted-strong); font-size: 11px; line-height: 1.6; }
.department-delete-form { max-width: 680px; }
.department-delete-warning { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid rgba(239, 68, 68, .3); border-radius: 10px; background: rgba(239, 68, 68, .07); }
.department-delete-warning strong { color: var(--red); }
.department-delete-warning span { color: var(--muted-strong); font-size: 12px; line-height: 1.6; }
.department-delete-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.department-delete-impact article { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.department-delete-impact span { color: var(--muted); font-size: 11px; }
.department-delete-impact strong { color: var(--text); font-size: 24px; }
.department-delete-impact small { color: var(--muted-strong); font-size: 10px; }
.button.danger-button { border-color: var(--red); background: var(--red); color: #fff; }
.button.danger-button:hover { filter: brightness(.94); }
@media (max-width: 980px) {
  .department-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .department-directory-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .department-summary-grid, .department-directory-toolbar, .department-delete-impact { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .member-linking-assistant { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .member-linking-assistant { grid-template-columns: 1fr; }
}
.department-plan-section { width: 100%; max-width: none; }
.department-plan-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 560px; border-top: 1px solid var(--line); }
.department-plan-layout.is-sidebar-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
.department-plan-nav { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px; border-right: 1px solid var(--line); background: var(--surface-soft); }
.department-plan-nav-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.department-plan-nav-head > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; flex: 1; }
.department-plan-nav-head strong { font-size: 13px; }
.department-plan-nav-head span { color: var(--muted); font-size: 11px; }
.department-plan-nav-head > button { display: grid; flex: 0 0 26px; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted-strong); font-size: 20px; line-height: 1; cursor: pointer; }
.department-plan-nav-head > button:hover { border-color: var(--primary-top); color: var(--primary-top); }
.department-plan-layout.is-sidebar-collapsed .department-plan-nav { padding: 9px; }
.department-plan-layout.is-sidebar-collapsed .department-plan-nav-head > div,
.department-plan-layout.is-sidebar-collapsed .department-plan-nav > .select,
.department-plan-layout.is-sidebar-collapsed .department-plan-nav > .input,
.department-plan-layout.is-sidebar-collapsed .department-plan-nav-list { display: none; }
.department-plan-layout.is-sidebar-collapsed .department-plan-nav-head { justify-content: center; }
.department-plan-nav .input, .department-plan-nav .select { min-height: 34px; font-size: 12px; }
.department-plan-nav-list {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 5px;
  overflow: visible;
}
.department-plan-nav-list button { position: relative; display: grid; grid-template-rows: minmax(18px, auto) auto; gap: 5px; min-width: 0; min-height: 57px; padding: 10px 10px 10px 13px; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: var(--muted-strong); text-align: left; cursor: pointer; transition: background .14s ease, color .14s ease, box-shadow .14s ease; }
.department-plan-nav-list button::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.department-plan-nav-list button:hover { background: rgba(var(--primary-rgb), .06); color: var(--text); }
.department-plan-nav-list button.active { background: var(--surface); color: var(--text); box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.department-plan-nav-list button.active::before { background: var(--primary-top); }
.department-plan-nav-list button > span { overflow: hidden; font-size: 12px; font-weight: 720; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.department-plan-nav-list button small { color: var(--muted); font-size: 10px; font-weight: 500; }
.department-plan-nav-list button.active small { color: var(--muted-strong); }
.department-plan-nav-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.department-plan-department-text { min-width: 0; overflow: hidden; color: inherit; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; }
.department-plan-nav-meta .department-plan-department-text { flex: 0 1 auto; color: var(--muted); font-size: 10px; font-weight: 500; }
.department-plan-nav-meta small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.department-plan-content { min-width: 0; padding: 14px; overflow: hidden; }
.department-plan-detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.department-plan-detail-head .section-actions { justify-content: flex-end; align-self: flex-start; margin-left: auto; }
.department-plan-detail-head p { color: var(--muted); }
.department-plan-detail-head h3 { margin: 5px 0; font-size: 21px; }
.department-plan-detail-head p { margin: 0; font-size: 13px; }
.department-plan-detail-meta { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; }
.department-plan-meta-label { color: var(--muted); font-weight: 650; }
.department-plan-detail-meta .department-plan-department-text { color: var(--muted-strong); font-weight: 650; }
.department-plan-meta-separator { width: 1px; height: 16px; margin: 0 2px; background: var(--line); }
.department-plan-autosave {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
}
.department-plan-autosave > span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.department-plan-autosave > div { display: grid; gap: 2px; }
.department-plan-autosave strong { color: var(--ink); font-size: 13px; }
.department-plan-autosave small { font-size: 12px; line-height: 1.5; }
.department-plan-autosave[data-state="saving"] > span { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.department-plan-autosave[data-state="saved"] > span { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.department-plan-autosave[data-state="blocked"] > span { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.department-plan-table { width: 100%; max-width: 100%; overflow: visible !important; }
.department-plan-table table { width: 100%; min-width: 0; table-layout: fixed; font-size: 11px; }
.department-plan-table th, .department-plan-table td { padding-right: 6px; padding-left: 6px; overflow: hidden; }
.department-plan-table th { font-size: 11px; }
.department-plan-table th:nth-child(1), .department-plan-table td:nth-child(1) { width: 68px; }
.department-plan-table th:nth-child(2), .department-plan-table td:nth-child(2) { width: 180px; }
.department-plan-table th:nth-child(3), .department-plan-table td:nth-child(3) { width: 64px; }
.department-plan-table th:nth-child(4), .department-plan-table td:nth-child(4) { width: 98px; }
.department-plan-table th:nth-child(5), .department-plan-table td:nth-child(5) { width: 72px; }
.department-plan-table th:nth-child(6), .department-plan-table td:nth-child(6) { width: 82px; }
.department-plan-table th:nth-child(7), .department-plan-table td:nth-child(7) { width: 52px; }
.department-plan-table th:nth-child(8), .department-plan-table td:nth-child(8) { width: 48px; }
.department-plan-table th:nth-child(9), .department-plan-table td:nth-child(9) { width: 66px; }
.department-plan-table td small { display: block; max-width: 168px; margin-top: 4px; color: var(--muted); }
.department-plan-table .code-chip { max-width: 100%; padding-right: 5px; padding-left: 5px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.department-plan-table .collaborator-cell { max-width: 100%; gap: 3px; overflow: hidden; }
.department-plan-table .collaborator-cell span,
.department-plan-table .collaborator-cell b { padding: 2px 5px; font-size: 10px; }
.department-plan-table .plan-meta-chip { max-width: 100%; padding: 3px 5px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.department-plan-table .pill { max-width: 100%; padding-right: 5px; padding-left: 5px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.department-plan-receiver {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.department-plan-receiver-cell { display: grid; gap: 3px; min-width: 0; }
.department-plan-receiver-cell > small {
  display: block;
  max-width: 100%;
  margin-top: 0 !important;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.department-plan-table td:nth-child(8) .cell-sub { margin-top: 3px; font-size: 10px; }

.my-plans-section { width: 100%; max-width: none; }
.my-plans-header { align-items: flex-end; }
.my-plan-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.my-plan-summary article {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 16px 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
.my-plan-summary article::after {
  position: absolute;
  right: -18px;
  bottom: -24px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .08);
  content: "";
}
.my-plan-summary article.is-attention { border-color: rgba(245, 158, 11, .3); background: var(--amber-soft); }
.my-plan-summary article.is-danger { border-color: rgba(239, 68, 68, .28); background: rgba(239, 68, 68, .06); }
.my-plan-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.my-plan-summary strong { color: var(--text); font-size: 28px; line-height: 1; }
.my-plan-summary small { color: var(--muted); font-size: 10px; }
.my-plan-toolbar {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 160px 140px 140px auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--surface-soft);
}
.my-plan-toolbar .input,
.my-plan-toolbar .select { min-height: 36px; font-size: 11px; }
.my-plan-toolbar .button { min-height: 36px; padding: 7px 12px; white-space: nowrap; }
.my-plan-search { position: relative; display: block; }
.my-plan-search > span { position: absolute; top: 50%; left: 12px; z-index: 1; color: var(--muted); transform: translateY(-50%); }
.my-plan-search .input { width: 100%; padding-left: 31px; }
.my-plan-table { border-radius: 0 0 12px 12px; }
.my-plan-table table { min-width: 1040px; }
.my-plan-table th:nth-child(1) { width: 28%; }
.my-plan-table th:nth-child(2) { width: 20%; }
.my-plan-table th:nth-child(3) { width: 14%; }
.my-plan-table th:nth-child(4) { width: 11%; }
.my-plan-table th:nth-child(5) { width: 15%; }
.my-plan-table th:nth-child(6) { width: 12%; }
.my-plan-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.my-plan-work-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; min-width: 250px; }
.my-plan-work-item .code-chip { grid-row: 1 / span 3; align-self: start; }
.my-plan-work-item strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.my-plan-work-item small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.my-plan-work-item em { color: var(--primary-top); font-size: 9px; font-style: normal; font-weight: 750; }
.my-plan-source-list { display: grid; gap: 7px; min-width: 170px; }
.my-plan-source { display: grid; gap: 3px; min-width: 150px; }
.my-plan-source > span { width: fit-content; padding: 2px 6px; border-radius: 999px; background: rgba(var(--primary-rgb), .1); color: var(--primary-top); font-size: 9px; font-weight: 750; }
.my-plan-source strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.my-plan-source small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.my-plan-source-list > em { color: var(--muted-strong); font-size: 9px; font-style: normal; font-weight: 700; }
.my-plan-role-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.my-plan-role { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid rgba(var(--primary-rgb), .18); border-radius: 999px; background: rgba(var(--primary-rgb), .08); color: var(--primary-top); font-size: 10px; font-weight: 750; white-space: nowrap; }
.my-plan-role.owner { border-color: rgba(22, 163, 74, .22); background: rgba(22, 163, 74, .08); color: #15803d; }
.my-plan-role.reviewer { border-color: rgba(245, 158, 11, .24); background: rgba(245, 158, 11, .09); color: #b45309; }
.my-plan-role.requester { border-color: rgba(99, 102, 241, .22); background: rgba(99, 102, 241, .08); color: #4f46e5; }
.my-plan-due { display: grid; gap: 4px; justify-items: start; }
.my-plan-due small { color: #dc2626; font-size: 9px; font-weight: 750; }
.my-plan-progress { display: grid; gap: 7px; min-width: 120px; }
.my-plan-progress .pill { width: fit-content; }
.my-plan-progress > small { max-width: 150px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.my-plan-sync-warning { width: fit-content; padding: 3px 6px; border-radius: 999px; background: rgba(245, 158, 11, .12); color: #a16207; font-size: 9px; font-weight: 750; white-space: nowrap; }
.my-plan-actions { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 5px; min-width: 150px; }
.my-plan-actions .my-plan-locate { grid-column: 1 / -1; color: var(--primary-top); }
.my-plan-location-path {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}
.my-plan-location-path b { color: var(--muted); }
.my-plan-location-path strong { color: var(--text); }
.my-plan-location-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(var(--primary-rgb), .07); color: var(--muted-strong); font-size: 11px; line-height: 1.55; }
tr.is-my-plan-target { position: relative; animation: my-plan-target-pulse 1.05s ease-in-out 3; }
tr.is-my-plan-target td { background: rgba(var(--primary-rgb), .13) !important; }
@keyframes my-plan-target-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .16); }
  50% { box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), .5), 0 0 18px rgba(var(--primary-rgb), .18); }
}

@media (max-width: 1500px) {
  .department-plan-detail-head { align-items: stretch; flex-direction: column; }
  .department-plan-detail-head .section-actions { justify-content: flex-end; align-self: flex-end; margin-left: auto; }
}

@media (max-width: 1180px) {
  .my-plan-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-plan-toolbar { grid-template-columns: minmax(240px, 1fr) repeat(3, 135px); }
  .my-plan-toolbar .button { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 720px) {
  .my-plans-header { align-items: stretch; }
  .my-plan-summary { grid-template-columns: 1fr 1fr; }
  .my-plan-summary article { min-height: 92px; padding: 13px; }
  .my-plan-toolbar { grid-template-columns: 1fr; }
  .my-plan-toolbar .button { grid-column: auto; justify-self: stretch; }
}

.org-row {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.org-middle {
  max-width: 760px;
}

.org-node,
.org-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.org-node {
  width: min(520px, 100%);
  padding: 15px;
  text-align: center;
}

.org-node.primary {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.07), transparent 48%),
    var(--surface);
}

.org-node.gold {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), transparent 48%),
    var(--surface);
}

.org-node h3,
.org-group h3,
.growth-center-head h3 {
  margin: 0;
  font-size: 17px;
}

.org-node p,
.org-group p,
.growth-center-head p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.org-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.org-tags span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
}

.org-connector {
  width: 1px;
  height: 24px;
  background: var(--line-strong);
}

.growth-center {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.11), transparent 48%),
    var(--surface-soft);
}

.growth-center-head {
  max-width: 780px;
  margin: 0 auto 14px;
  text-align: center;
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.org-group {
  padding: 14px;
}

.org-block {
  margin-top: 12px;
}

.org-block strong {
  display: block;
  margin-bottom: 7px;
  color: var(--muted-strong);
  font-size: 13px;
}

.org-block ul {
  margin: 0;
  padding-left: 18px;
}

.org-block li {
  margin: 5px 0;
  color: var(--muted-strong);
  line-height: 1.45;
}

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

.mechanism-item {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.mechanism-item strong {
  display: block;
  margin-bottom: 5px;
}

.mechanism-item span {
  color: var(--muted);
  line-height: 1.5;
}

.guide-section .section-body {
  padding: 0;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  min-height: calc(100vh - 210px);
}

.guide-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.guide-sidebar-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.guide-list {
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.guide-button {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.guide-button.active {
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.035));
  box-shadow: inset 3px 0 0 var(--teal);
}

.guide-button strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.guide-button span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.guide-reader {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.guide-reader-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(6px);
}

.guide-reader-header h3 {
  margin: 3px 0;
  font-size: 24px;
}

.guide-reader-header span {
  color: var(--muted);
  font-size: 12px;
}

.guide-source-list {
  display: flex;
  justify-content: flex-end;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 420px;
}

.guide-source-list span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.guide-content {
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.guide-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.guide-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.guide-block h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.guide-block p {
  margin: 0;
  color: var(--muted-strong);
  line-height: 1.7;
}

.guide-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.guide-block-title h4 {
  margin: 0;
}

.guide-block-title span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.guide-mission {
  border-left: 4px solid var(--teal);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.055), transparent 46%), var(--surface);
}

.guide-landing-cadence {
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.06), transparent 52%), var(--surface);
}

.guide-landing-markdown {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.guide-landing-markdown h1,
.guide-landing-markdown h2,
.guide-landing-markdown h3,
.guide-landing-markdown h4 {
  color: var(--ink);
}

.guide-landing-markdown h2 {
  margin-top: 0;
  font-size: 20px;
}

.guide-landing-markdown h3 {
  font-size: 16px;
}

.guide-landing-markdown p {
  margin: 10px 0;
}

.guide-block-cadence {
  border-left: 4px solid var(--blue);
  background: linear-gradient(90deg, rgba(93, 98, 112, 0.055), transparent 46%), var(--surface);
}

.guide-block-risk {
  border-left: 4px solid var(--red);
  background: linear-gradient(90deg, rgba(167, 58, 53, 0.05), transparent 46%), var(--surface);
}

.guide-block-template {
  border-left: 4px solid var(--amber);
  background: linear-gradient(90deg, rgba(150, 104, 61, 0.055), transparent 46%), var(--surface);
}

.guide-block-deliverable {
  border-left: 4px solid var(--teal);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.055), transparent 46%), var(--surface);
}

.guide-deliverable-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.guide-deliverable-card {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.guide-deliverable-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: #fbf7f1;
}

.guide-deliverable-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.guide-deliverable-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.guide-block-note {
  margin-top: 10px !important;
  color: var(--muted) !important;
  font-size: 12px;
}

.guide-detail-table {
  min-width: 720px;
}

.guide-list-block {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-strong);
  line-height: 1.55;
}

.guide-list-block li::marker {
  color: var(--teal);
}

.guide-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.guide-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
}

.guide-table th,
.guide-table td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.guide-table th {
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
}

.guide-table tr:last-child td {
  border-bottom: 0;
}

.permission-body {
  display: grid;
  gap: 14px;
}

.permission-create,
.permission-nav-order,
.permission-approval,
.permission-role-manager,
.permission-theme-manager,
.permission-online-panel,
.permission-console,
.permission-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.permission-create {
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.permission-create h3,
.permission-approval h3,
.permission-role-manager h3,
.permission-theme-manager h3,
.permission-online-panel h3,
.permission-console h3,
.permission-card h3 {
  margin: 0;
  font-size: 18px;
}

.permission-create p,
.permission-approval p,
.permission-role-manager p,
.permission-theme-manager p,
.permission-online-panel p,
.permission-console p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.permission-nav-order {
  display: grid;
  gap: 12px;
  align-items: start;
}

.permission-nav-order-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.permission-nav-order-summary-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-nav-order h3 {
  margin: 0;
  font-size: 18px;
}

.permission-nav-order p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.nav-order-panel {
  display: grid;
  gap: 10px;
}

.nav-order-list {
  display: grid;
  gap: 7px;
}

.nav-order-item {
  display: grid;
  grid-template-columns: 24px 34px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  cursor: grab;
  user-select: none;
}

.nav-order-item:active {
  cursor: grabbing;
}

.nav-order-item.is-dragging {
  opacity: 0.52;
  border-style: dashed;
  background: var(--surface-soft);
}

.nav-order-handle {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.nav-order-index {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.nav-order-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 760;
}

.nav-order-item strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.permission-create-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 10px;
}

.permission-role-manager {
  display: grid;
  gap: 12px;
}

.permission-role-header,
.permission-online-header,
.permission-approval-header,
.permission-console-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.permission-approval-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}

.permission-role-create {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 260px) auto;
  gap: 10px;
}

.permission-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.permission-role-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.permission-role-card.is-locked {
  border-style: dashed;
}

.permission-role-card-head {
  display: grid;
  gap: 10px;
}

.permission-role-card-head strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.permission-role-card-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.permission-role-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.permission-role-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-online-header-actions,
.permission-console-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-role-toggle {
  color: var(--accent);
}

.permission-role-content {
  display: grid;
  gap: 12px;
}

.permission-fields.compact {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.permission-role-card .permission-switches {
  margin-top: 0;
}

.permission-role-card .permission-modules {
  margin-top: 0;
}

.permission-role-card .permission-modules-title {
  display: grid;
  justify-content: stretch;
  gap: 4px;
}

.permission-role-card .permission-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.permission-role-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.permission-theme-manager {
  display: grid;
  gap: 12px;
}

.permission-theme-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.permission-theme-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-theme-content {
  display: grid;
  gap: 12px;
}

.permission-theme-list {
  display: grid;
  gap: 8px;
}

.permission-theme-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.permission-theme-main strong,
.permission-theme-main span,
.permission-theme-name span,
.permission-theme-check span {
  display: block;
}

.permission-theme-main strong {
  color: var(--ink);
  font-size: 14px;
}

.permission-theme-main span,
.permission-theme-name span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.permission-theme-name {
  display: grid;
  gap: 5px;
}

.permission-theme-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.permission-theme-check input {
  width: 15px;
  height: 15px;
}

.permission-theme-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-online-panel {
  display: grid;
  gap: 12px;
}

.permission-online-content,
.permission-console-body {
  display: grid;
  gap: 12px;
}

.permission-online-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.permission-online-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.permission-online-row strong,
.permission-online-row span {
  display: block;
}

.permission-online-row strong {
  color: var(--ink);
  font-size: 14px;
}

.permission-online-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.permission-online-duration {
  display: grid;
  gap: 3px;
  min-width: 116px;
  text-align: right;
}

.permission-online-duration span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 760;
}

.permission-approval-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.permission-sync-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(177, 250, 99, 0.22);
  border-radius: 12px;
  background: rgba(177, 250, 99, 0.08);
  color: var(--muted);
}

.permission-sync-notice strong {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 13px;
}

.permission-sync-notice span {
  font-size: 13px;
  line-height: 1.5;
}

.permission-sync-notice.success {
  border-color: rgba(47, 125, 94, 0.24);
  background: rgba(47, 125, 94, 0.08);
}

.permission-sync-notice.warning {
  border-color: rgba(181, 112, 51, 0.26);
  background: rgba(181, 112, 51, 0.1);
}

.permission-approval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.permission-approval-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.permission-approval-password {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(177, 250, 99, 0.28);
  border-radius: 8px;
  background: rgba(177, 250, 99, 0.09);
}

.permission-approval-password span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.permission-approval-password code {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.permission-approval-main strong {
  color: var(--ink);
  font-size: 14px;
}

.permission-approval-main span,
.permission-account-list-summary,
.permission-empty,
.permission-account-meta-line {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.permission-approval-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.permission-approval-role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.permission-approval-role span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.permission-approval-role .select {
  min-height: 30px;
  min-width: 180px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 7px;
  font-size: 12px;
}

.permission-console {
  display: grid;
  gap: 14px;
}

.permission-console-controls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(130px, 160px);
  gap: 8px;
}

.permission-console-layout {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.permission-account-list {
  display: grid;
  gap: 8px;
  max-height: 640px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.permission-account-list-summary {
  padding: 0 2px 2px;
}

.permission-account-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.permission-account-row:hover,
.permission-account-row.active {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.10), var(--surface));
}

.permission-account-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.11);
  color: var(--teal);
  font-size: 14px;
  font-weight: 800;
}

.permission-account-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.permission-account-text strong,
.permission-account-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-account-text strong {
  color: var(--ink);
  font-size: 13px;
}

.permission-account-text small {
  color: var(--muted);
  font-size: 12px;
}

.permission-account-detail {
  min-width: 0;
}

.permission-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.permission-empty-panel {
  display: grid;
  min-height: 220px;
  place-items: center;
}

.permission-card {
  background: var(--surface);
}

.permission-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.permission-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.permission-account-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-account-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
}

.permission-save-button.is-saved {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: var(--teal);
  color: #fff;
}

.permission-save-notice {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.permission-save-notice.success {
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--teal);
}

.permission-save-notice.error {
  border: 1px solid rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}

.account-binding-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.account-binding-panel > div,
.account-binding-member { display: grid; gap: 4px; min-width: 0; }
.account-binding-panel span,
.account-binding-panel small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-binding-panel.linked { border-color: rgba(22, 163, 74, .25); background: rgba(22, 163, 74, .06); }
.account-binding-panel.conflict { border-color: rgba(239, 68, 68, .25); background: rgba(239, 68, 68, .06); }

.permission-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.permission-fields label,
.permission-switches label {
  display: grid;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

.permission-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
}

.permission-switches label,
.permission-module-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.permission-modules {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.permission-modules-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.permission-modules-title span {
  color: var(--muted);
  font-size: 12px;
}

.permission-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.permission-module-item {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 13px;
}

.knowledge-section .section-body {
  padding: 0;
}

.knowledge-category-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.knowledge-category-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.knowledge-category-drag-handle {
  color: var(--muted);
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  touch-action: none;
}

.knowledge-order-edit-toggle.active {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.knowledge-category-drag-handle:active,
.knowledge-doc-drag-handle:active {
  cursor: grabbing;
}

.knowledge-category-button.is-dragging,
.knowledge-doc-row.is-dragging {
  opacity: 0.46;
}

.knowledge-category-button:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.knowledge-category-button.active {
  border-color: rgba(var(--primary-rgb), 0.22);
  background: rgba(var(--primary-rgb), 0.09);
  color: var(--primary);
}

.knowledge-category-button strong {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.10);
  color: currentColor;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: calc(100vh - 188px);
}

.knowledge-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.knowledge-list {
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.knowledge-doc-row {
  position: relative;
}

.knowledge-doc-drag-handle {
  position: absolute;
  top: 21px;
  left: 7px;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-size: 15px;
  line-height: 1;
  touch-action: none;
}

.knowledge-doc-drag-handle:hover,
.knowledge-doc-drag-handle:focus-visible {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.knowledge-doc-button {
  width: 100%;
  padding: 10px 58px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.knowledge-doc-button.active {
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.035));
  box-shadow: inset 3px 0 0 var(--teal);
}

.knowledge-doc-button strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.knowledge-doc-button span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledge-doc-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  pointer-events: none;
  padding: 4px 7px;
  border: 1px solid rgba(185, 66, 62, 0.24);
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 11px;
  line-height: 1;
  transition: opacity 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.knowledge-doc-row:hover .knowledge-doc-delete,
.knowledge-doc-row:focus-within .knowledge-doc-delete {
  opacity: 1;
  pointer-events: auto;
}

.knowledge-doc-delete:hover {
  border-color: #fca5a5;
  background: #fee2e2;
}

.knowledge-reader {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.knowledge-reader-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(6px);
}

.knowledge-reader-header h3 {
  margin: 3px 0 6px;
  font-size: 20px;
}

.knowledge-reader-header span {
  color: var(--muted);
  font-size: 12px;
}

.knowledge-source-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--primary-rgb), 0.045);
}

.knowledge-source-panel > div {
  min-width: 0;
}

.knowledge-source-panel strong,
.knowledge-source-panel span {
  display: block;
}

.knowledge-source-panel strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.knowledge-source-panel span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.knowledge-source-link {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 6px;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.knowledge-source-link:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.knowledge-attachment-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.knowledge-page-gallery {
  padding: 0 28px 42px;
}

.knowledge-page-gallery > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.05);
}

.knowledge-page-gallery > header strong {
  color: var(--ink);
  font-size: 14px;
}

.knowledge-page-gallery > header span {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
}

.knowledge-page-gallery-list {
  display: grid;
  gap: 20px;
}

.knowledge-page-sheet {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6f1e8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.knowledge-page-sheet figcaption {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.knowledge-page-sheet img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.markdown-rendered {
  padding: 22px 28px 40px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.78;
}

.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
  margin: 24px 0 10px;
  line-height: 1.35;
}

.markdown-rendered h1 {
  margin-top: 0;
  font-size: 26px;
}

.markdown-rendered h2 {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 21px;
}

.markdown-rendered h3 {
  font-size: 17px;
}

.markdown-rendered h4 {
  font-size: 15px;
}

.markdown-rendered p {
  margin: 9px 0;
}

.markdown-rendered ul,
.markdown-rendered ol {
  margin: 9px 0 14px;
  padding-left: 22px;
}

.markdown-rendered li {
  margin: 5px 0;
}

.markdown-rendered blockquote {
  margin: 14px 0;
  padding: 10px 13px;
  border-left: 3px solid var(--teal);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.055), transparent 46%), var(--surface);
  color: var(--muted-strong);
}

.markdown-rendered code {
  padding: 1px 4px;
  border-radius: 4px;
  background: #f1e9df;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.markdown-rendered pre {
  overflow-x: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.markdown-rendered pre code {
  padding: 0;
  background: transparent;
}

.md-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.md-table th,
.md-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.md-table th {
  background: var(--surface-soft);
}

body[data-theme="dark"] .login-screen {
  background:
    linear-gradient(135deg, rgba(177, 250, 99, 0.08), transparent 38%),
    linear-gradient(180deg, #050607, var(--bg));
}

body[data-theme="dark"] .login-card {
  background: rgba(21, 24, 29, 0.96);
  box-shadow: var(--shadow-strong);
}

body[data-theme="dark"] .login-brand .brand-mark img {
  mix-blend-mode: multiply;
}

body[data-theme="dark"] .section {
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="dark"] .section-header {
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.12), transparent 44%),
    var(--surface);
}

body[data-theme="dark"] .presence-pill,
body[data-theme="dark"] .project-state-pill,
body[data-theme="dark"] .summary-strip > div,
body[data-theme="dark"] .detail-meta,
body[data-theme="dark"] .detail-section,
body[data-theme="dark"] .quick-card,
body[data-theme="dark"] .org-principle,
body[data-theme="dark"] .org-node,
body[data-theme="dark"] .org-group,
body[data-theme="dark"] .mechanism-item,
body[data-theme="dark"] .permission-create,
body[data-theme="dark"] .permission-nav-order,
body[data-theme="dark"] .permission-approval,
body[data-theme="dark"] .permission-role-manager,
body[data-theme="dark"] .permission-theme-manager,
body[data-theme="dark"] .permission-online-panel,
body[data-theme="dark"] .permission-console,
body[data-theme="dark"] .permission-card {
  background: var(--surface);
  border-color: var(--line);
}

body[data-theme="dark"] .button.secondary,
body[data-theme="dark"] .tiny-button {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
}

body[data-theme="dark"] .button.secondary:hover,
body[data-theme="dark"] .tiny-button:hover {
  background: var(--surface-muted);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .kpi-card {
  background:
    linear-gradient(145deg, rgba(var(--primary-rgb), 0.16), transparent 42%),
    var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="dark"] .kpi-card.good {
  background:
    linear-gradient(135deg, rgba(120, 161, 129, 0.10), transparent 46%),
    var(--surface);
}

body[data-theme="dark"] .kpi-card.warn {
  background:
    linear-gradient(135deg, rgba(208, 160, 95, 0.11), transparent 46%),
    var(--surface);
}

body[data-theme="dark"] .kpi-card.bad {
  background:
    linear-gradient(135deg, rgba(208, 107, 98, 0.11), transparent 46%),
    var(--surface);
}

body[data-theme="dark"] .kpi-card.info {
  background:
    linear-gradient(135deg, rgba(146, 152, 170, 0.10), transparent 46%),
    var(--surface);
}

body[data-theme="dark"] .project-scale {
  background: var(--surface-soft);
}

body[data-theme="dark"] .project-scale span,
body[data-theme="dark"] .phase-outputs span {
  background: var(--surface);
  color: var(--muted-strong);
}

body[data-theme="dark"] .project-scale strong,
body[data-theme="dark"] .phase-event {
  background: rgba(177, 250, 99, 0.13);
  color: #dbffa8;
}

body[data-theme="dark"] .phase-card {
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.09), transparent 48%),
    var(--surface);
}

body[data-theme="dark"] .phase-card.warn {
  background:
    linear-gradient(135deg, rgba(208, 160, 95, 0.10), transparent 48%),
    var(--surface);
}

body[data-theme="dark"] .phase-card.good {
  background:
    linear-gradient(135deg, rgba(120, 161, 129, 0.09), transparent 48%),
    var(--surface);
}

body[data-theme="dark"] .phase-card.event,
body[data-theme="dark"] .phase-card.gold,
body[data-theme="dark"] .org-node.primary,
body[data-theme="dark"] .org-node.gold,
body[data-theme="dark"] .growth-center {
  background:
    linear-gradient(135deg, rgba(177, 250, 99, 0.09), transparent 48%),
    var(--surface);
}

body[data-theme="dark"] .input,
body[data-theme="dark"] .select,
body[data-theme="dark"] .textarea,
body[data-theme="dark"] .table-filter-control {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
}

body[data-theme="dark"] .input::placeholder,
body[data-theme="dark"] .textarea::placeholder {
  color: #6f7885;
}

body[data-theme="dark"] .table-wrap,
body[data-theme="dark"] .guide-table-wrap,
body[data-theme="dark"] .md-table-wrap {
  border-color: var(--line);
  background: var(--surface);
}

body[data-theme="dark"] th,
body[data-theme="dark"] .task-header-row th,
body[data-theme="dark"] .metrics-group-header,
body[data-theme="dark"] .guide-table th,
body[data-theme="dark"] .md-table th {
  background: var(--surface-soft);
  color: var(--muted-strong);
}

body[data-theme="dark"] tbody tr:hover,
body[data-theme="dark"] .guide-deliverable-card:hover,
body[data-theme="dark"] .quick-card:hover {
  background: var(--surface-soft);
}

body[data-theme="dark"] .task-group-row td {
  background: linear-gradient(90deg, rgba(177, 250, 99, 0.08), rgba(21, 24, 29, 0));
}

body[data-theme="dark"] .task-filter-menu,
body[data-theme="dark"] .metric-floating-tooltip,
body[data-theme="dark"] .modal {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-strong);
}

body[data-theme="dark"] .account-pill,
body[data-theme="dark"] .account-summary {
  border-color: var(--line);
  background: var(--surface);
}

body[data-theme="dark"] .tooltip-dot {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted-strong);
}

body[data-theme="dark"] .guide-sidebar,
body[data-theme="dark"] .knowledge-sidebar,
body[data-theme="dark"] .permission-account-list,
body[data-theme="dark"] .permission-role-card,
body[data-theme="dark"] .permission-online-list,
body[data-theme="dark"] .permission-modules,
body[data-theme="dark"] .guide-reader,
body[data-theme="dark"] .guide-landing-markdown,
body[data-theme="dark"] .knowledge-reader {
  background: var(--surface-soft);
}

body[data-theme="dark"] .guide-button,
body[data-theme="dark"] .knowledge-doc-button,
body[data-theme="dark"] .guide-deliverable-card,
body[data-theme="dark"] .nav-order-item,
body[data-theme="dark"] .permission-approval-item,
body[data-theme="dark"] .permission-account-row,
body[data-theme="dark"] .permission-online-row,
body[data-theme="dark"] .permission-module-item {
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="dark"] .permission-account-row:hover,
body[data-theme="dark"] .permission-account-row.active {
  background: linear-gradient(90deg, rgba(177, 250, 99, 0.11), var(--surface));
}

body[data-theme="dark"] .guide-button.active,
body[data-theme="dark"] .knowledge-doc-button.active {
  background: linear-gradient(90deg, rgba(177, 250, 99, 0.14), rgba(177, 250, 99, 0.05));
  box-shadow: inset 3px 0 0 var(--gold);
}

body[data-theme="dark"] .guide-reader-header,
body[data-theme="dark"] .knowledge-reader-header {
  background: rgba(21, 24, 29, 0.96);
}

body[data-theme="dark"] .guide-mission,
body[data-theme="dark"] .guide-block-deliverable,
body[data-theme="dark"] .markdown-rendered blockquote {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(177, 250, 99, 0.08), transparent 46%), var(--surface);
}

body[data-theme="dark"] .guide-block-risk {
  background: linear-gradient(90deg, rgba(208, 107, 98, 0.09), transparent 46%), var(--surface);
}

body[data-theme="dark"] .guide-block-template {
  background: linear-gradient(90deg, rgba(254, 119, 51, 0.09), transparent 46%), var(--surface);
}

body[data-theme="dark"] .metric-floating-tooltip p,
body[data-theme="dark"] .detail-section p,
body[data-theme="dark"] .markdown-rendered blockquote {
  color: var(--muted-strong);
}

body[data-theme="dark"] .markdown-rendered code {
  background: var(--surface-muted);
  color: var(--muted-strong);
}

body[data-theme="dark"] .markdown-rendered pre {
  background: var(--surface-soft);
}

body[data-theme="dark"] .knowledge-doc-delete {
  border-color: rgba(208, 107, 98, 0.34);
  background: rgba(208, 107, 98, 0.12);
  color: #e28d83;
}

body[data-theme="dark"] .knowledge-doc-delete:hover {
  background: rgba(208, 107, 98, 0.20);
}

body[data-theme="dark"] .empty-state {
  background: var(--surface-soft);
}

/* Neutral executive theme: restrained blue structure with quiet terracotta accents. */
body[data-theme="neutral"] {
  --bg: #eef3f5;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --surface-muted: #e8f0f3;
  --ink: #17252e;
  --muted: #667984;
  --muted-strong: #324650;
  --line: #d9e3e8;
  --line-strong: #9fb1ba;
  --teal: #245468;
  --teal-soft: #dfeaec;
  --accent: #b8644f;
  --accent-soft: #f4e2dc;
  --primary-rgb: 36, 84, 104;
  --primary-top: #315f70;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(36, 84, 104, 0.14);
  --gold: #b8644f;
  --gold-deep: #924d3f;
  --gold-light: #d99b8d;
  --gold-soft: #f4e2dc;
  --burgundy: #b8644f;
  --burgundy-deep: #924d3f;
  --red: #b8644f;
  --red-soft: #f4e2dc;
  --amber: #a96d51;
  --amber-soft: #f1e4da;
  --green: #245468;
  --green-soft: #dfeaec;
  --blue: #567c8d;
  --blue-soft: #e1ebef;
  --shadow: 0 1px 2px rgba(23, 37, 46, 0.04), 0 16px 36px rgba(23, 37, 46, 0.075);
  --shadow-strong: 0 24px 60px rgba(23, 37, 46, 0.16);
  background:
    radial-gradient(circle at 92% 0%, rgba(184, 100, 79, 0.045), transparent 26%),
    linear-gradient(135deg, rgba(36, 84, 104, 0.10), transparent 36%),
    linear-gradient(180deg, #f9fbfc 0%, var(--bg) 380px);
}

body[data-theme="neutral"] .sidebar {
  border-right: 0;
  background: linear-gradient(180deg, #102733 0%, #183947 100%);
  color: #f8fafb;
}

body[data-theme="neutral"] .brand-mark {
  border-color: rgba(184, 100, 79, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(184, 100, 79, 0.16);
}

body[data-theme="neutral"] .brand-subtitle,
body[data-theme="neutral"] .sidebar-footer {
  color: rgba(248, 250, 251, 0.62);
}

body[data-theme="neutral"] .nav-button {
  color: rgba(248, 250, 251, 0.76);
}

body[data-theme="neutral"] .nav-button:hover,
body[data-theme="neutral"] .nav-button.active {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .nav-icon {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 251, 0.82);
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background: rgba(184, 100, 79, 0.22);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 251, 0.86);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background: rgba(184, 100, 79, 0.24);
}

body[data-theme="neutral"] .sidebar-theme,
body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(248, 250, 251, 0.58);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
}

body[data-theme="neutral"] .sidebar-theme-option.active {
  border-bottom-color: var(--accent);
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .section-header {
  background: linear-gradient(90deg, rgba(36, 84, 104, 0.055), transparent 58%), var(--surface);
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center {
  background: var(--surface);
}

body[data-theme="neutral"] .kpi-card::before,
body[data-theme="neutral"] .phase-card::before {
  background: var(--teal);
}

body[data-theme="neutral"] .kpi-card.gold::before,
body[data-theme="neutral"] .phase-card.event::before,
body[data-theme="neutral"] .phase-card.gold::before,
body[data-theme="neutral"] .phase-card.warn::before {
  background: var(--accent);
}

body[data-theme="neutral"] .kpi-card::after {
  border-color: rgba(36, 84, 104, 0.14);
  opacity: 0.28;
}

body[data-theme="neutral"] .kpi-card.good,
body[data-theme="neutral"] .phase-card.good,
body[data-theme="neutral"] .kpi-card.info {
  background: linear-gradient(135deg, rgba(36, 84, 104, 0.035), transparent 42%), var(--surface);
}

body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn,
body[data-theme="neutral"] .kpi-card.bad {
  background: linear-gradient(135deg, rgba(184, 100, 79, 0.045), transparent 42%), var(--surface);
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: rgba(36, 84, 104, 0.2);
  background: var(--teal);
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  transform: none;
  background: #1e4859;
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  border-color: rgba(184, 100, 79, 0.25);
  background: var(--accent);
  color: #ffffff;
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  background: var(--surface-soft);
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold {
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 84, 104, 0.10);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background: var(--surface-soft);
  color: var(--muted-strong);
}

body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover {
  background: #f4f8fa;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active {
  background: linear-gradient(90deg, rgba(36, 84, 104, 0.08), transparent);
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  background: rgba(255, 255, 255, 0.96);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: var(--teal);
  background: linear-gradient(90deg, rgba(36, 84, 104, 0.055), transparent 48%), var(--surface);
}

body[data-theme="neutral"] .guide-block-risk,
body[data-theme="neutral"] .guide-block-template {
  background: linear-gradient(90deg, rgba(184, 100, 79, 0.055), transparent 48%), var(--surface);
}

body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(184, 100, 79, 0.22);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .eyebrow,
body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em {
  color: var(--accent);
}

body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice {
  border-color: rgba(184, 100, 79, 0.22);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .project-scale strong {
  border: 1px solid rgba(184, 100, 79, 0.18);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .nav-button.active {
  background: linear-gradient(90deg, rgba(184, 100, 79, 0.18), rgba(255, 255, 255, 0.07));
}

/* Neutral Mediterranean theme: Aegean blue structure, whitewashed workspace, terracotta action signals. */
body[data-theme="neutral"] {
  --bg: #edf7f7;
  --surface: #ffffff;
  --surface-soft: #f6fbfa;
  --surface-muted: #e0f0ee;
  --ink: #15313d;
  --muted: #637a83;
  --muted-strong: #2d4d59;
  --line: #d1e4e4;
  --line-strong: #9fc8ca;
  --teal: #0b6f86;
  --teal-soft: #d9eeee;
  --accent: #d66a42;
  --accent-soft: #f8dfd1;
  --primary-rgb: 11, 111, 134;
  --primary-top: #1589a3;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(11, 111, 134, 0.16);
  --gold: #d66a42;
  --gold-deep: #a64f31;
  --gold-light: #ee9c74;
  --gold-soft: #f8dfd1;
  --burgundy: #b75a39;
  --burgundy-deep: #8f4228;
  --red: #c95f3b;
  --red-soft: #f8dfd1;
  --amber: #d66a42;
  --amber-soft: #f8dfd1;
  --green: #6f8a5e;
  --green-soft: #e4eddc;
  --blue: #2c8aa0;
  --blue-soft: #dceff1;
  --shadow: 0 1px 2px rgba(21, 49, 61, 0.04), 0 16px 36px rgba(21, 49, 61, 0.08);
  --shadow-strong: 0 24px 58px rgba(21, 49, 61, 0.18);
  background:
    linear-gradient(135deg, rgba(42, 157, 176, 0.13), transparent 34%),
    linear-gradient(180deg, #fbfdfc 0%, var(--bg) 390px);
}

body[data-theme="neutral"] .sidebar {
  border-right: 0;
  background: linear-gradient(180deg, #063247 0%, #0a5f7c 56%, #07475f 100%);
  color: #fbfdfc;
}

body[data-theme="neutral"] .brand-mark {
  border-color: rgba(214, 106, 66, 0.34);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(214, 106, 66, 0.12), 0 12px 28px rgba(2, 31, 48, 0.18);
}

body[data-theme="neutral"] .brand-title {
  color: #ffffff;
}

body[data-theme="neutral"] .login-screen {
  background:
    linear-gradient(135deg, rgba(11, 111, 134, 0.16), transparent 34%),
    linear-gradient(180deg, #fbfdfc 0%, var(--bg) 100%);
}

body[data-theme="neutral"] .login-card {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-strong);
}

body[data-theme="neutral"] .login-brand .brand-mark {
  border-color: rgba(214, 106, 66, 0.26);
  background: #ffffff;
}

body[data-theme="neutral"] .login-brand .brand-title {
  color: var(--ink);
}

body[data-theme="neutral"] .login-brand .brand-subtitle {
  color: var(--muted);
}

body[data-theme="neutral"] .brand-subtitle,
body[data-theme="neutral"] .sidebar-footer {
  color: rgba(251, 253, 252, 0.66);
}

body[data-theme="neutral"] .nav-button {
  color: rgba(251, 253, 252, 0.78);
}

body[data-theme="neutral"] .nav-button:hover,
body[data-theme="neutral"] .nav-button.active {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  background: linear-gradient(90deg, rgba(214, 106, 66, 0.24), rgba(255, 255, 255, 0.08));
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .nav-icon {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(251, 253, 252, 0.84);
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background: rgba(214, 106, 66, 0.26);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(251, 253, 252, 0.90);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background: rgba(214, 106, 66, 0.28);
}

body[data-theme="neutral"] .sidebar-theme,
body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(251, 253, 252, 0.60);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
}

body[data-theme="neutral"] .sidebar-theme-option.active {
  border-bottom-color: var(--accent);
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .main {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 260px),
    transparent;
}

body[data-theme="neutral"] .topbar {
  border-bottom-color: rgba(11, 111, 134, 0.10);
}

body[data-theme="neutral"] .section-header {
  background:
    linear-gradient(90deg, rgba(11, 111, 134, 0.07), transparent 54%),
    var(--surface);
  box-shadow: inset 4px 0 0 rgba(214, 106, 66, 0.78);
}

body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .eyebrow {
  color: var(--accent);
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center,
body[data-theme="neutral"] .ai-enterprise-card,
body[data-theme="neutral"] .ai-enterprise-rail-card,
body[data-theme="neutral"] .ai-playbook-nav-item,
body[data-theme="neutral"] .ai-roadmap-row,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  border-color: var(--line);
  background: var(--surface);
}

body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .permission-card {
  border-top: 2px solid rgba(11, 111, 134, 0.28);
}

body[data-theme="neutral"] .summary-strip > div:nth-child(2n),
body[data-theme="neutral"] .quick-card:nth-child(2n),
body[data-theme="neutral"] .detail-meta:nth-child(2n),
body[data-theme="neutral"] .permission-card:nth-child(2n) {
  border-top-color: rgba(214, 106, 66, 0.42);
}

body[data-theme="neutral"] .kpi-card::before,
body[data-theme="neutral"] .phase-card::before {
  background: var(--teal);
}

body[data-theme="neutral"] .kpi-card.gold::before,
body[data-theme="neutral"] .phase-card.event::before,
body[data-theme="neutral"] .phase-card.gold::before,
body[data-theme="neutral"] .phase-card.warn::before {
  background: var(--accent);
}

body[data-theme="neutral"] .kpi-card::after {
  border-color: rgba(11, 111, 134, 0.18);
  opacity: 0.22;
}

body[data-theme="neutral"] .kpi-card.good,
body[data-theme="neutral"] .phase-card.good,
body[data-theme="neutral"] .kpi-card.info {
  background: linear-gradient(135deg, rgba(11, 111, 134, 0.045), transparent 42%), var(--surface);
}

body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn,
body[data-theme="neutral"] .kpi-card.bad {
  background: linear-gradient(135deg, rgba(214, 106, 66, 0.06), transparent 42%), var(--surface);
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: rgba(11, 111, 134, 0.24);
  background: var(--teal);
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  transform: none;
  background: #085a70;
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

body[data-theme="neutral"] .button.secondary:hover,
body[data-theme="neutral"] .tiny-button:hover {
  border-color: rgba(214, 106, 66, 0.34);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  border-color: rgba(214, 106, 66, 0.30);
  background: var(--accent);
  color: #ffffff;
}

body[data-theme="neutral"] .button.danger:hover,
body[data-theme="neutral"] .tiny-button.danger:hover {
  background: #bd5a38;
}

body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background: var(--teal-soft);
  color: var(--teal);
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  background: var(--surface-soft);
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold {
  border: 1px solid rgba(214, 106, 66, 0.20);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(11, 111, 134, 0.12);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background: #f3faf9;
  color: var(--muted-strong);
}

body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover,
body[data-theme="neutral"] .ai-enterprise-card:hover {
  background: #f0f8f8;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active {
  background: linear-gradient(90deg, rgba(11, 111, 134, 0.09), transparent);
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  background: rgba(255, 255, 255, 0.97);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: var(--teal);
  background: linear-gradient(90deg, rgba(11, 111, 134, 0.06), transparent 48%), var(--surface);
}

body[data-theme="neutral"] .guide-block-risk,
body[data-theme="neutral"] .guide-block-template {
  background: linear-gradient(90deg, rgba(214, 106, 66, 0.065), transparent 48%), var(--surface);
}

body[data-theme="neutral"] .pill {
  border-color: var(--line);
  background: #ffffff;
  color: var(--muted-strong);
}

body[data-theme="neutral"] .pill.good {
  border-color: rgba(111, 138, 94, 0.24);
  background: var(--green-soft);
  color: #496b3e;
}

body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(214, 106, 66, 0.24);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em,
body[data-theme="neutral"] .ai-enterprise-card h4,
body[data-theme="neutral"] .ai-enterprise-rail-card strong,
body[data-theme="neutral"] .permission-role-card-head strong {
  color: var(--accent);
}

body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice,
body[data-theme="neutral"] .permission-save-button.is-saved {
  border-color: rgba(214, 106, 66, 0.24);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .knowledge-doc-delete {
  border-color: rgba(214, 106, 66, 0.28);
  background: var(--accent-soft);
  color: var(--gold-deep);
}

body[data-theme="neutral"] .knowledge-doc-delete:hover {
  background: #f4c9b5;
}

body[data-theme="neutral"] .metric-card,
body[data-theme="neutral"] .metric-detail-card,
body[data-theme="neutral"] .approval-card,
body[data-theme="neutral"] .risk-card,
body[data-theme="neutral"] .budget-card,
body[data-theme="neutral"] .product-card,
body[data-theme="neutral"] .meeting-card {
  border-color: var(--line);
  background: var(--surface);
}

/* Neutral IMG_1746 theme: flat Deep Teal, Aqua Alloy, Blush Coral, Peach Shell, Mist Porcelain, Shadow Ink. */
body[data-theme="neutral"] {
  --bg: #fdf2f0;
  --surface: #ffffff;
  --surface-soft: #fff8f7;
  --surface-muted: #f7e4e0;
  --ink: #1f1f1f;
  --muted: #687579;
  --muted-strong: #36494d;
  --line: #eadbd8;
  --line-strong: #cbb7b2;
  --teal: #0e7c86;
  --teal-soft: #d8eeee;
  --accent: #f26d6d;
  --accent-soft: #ffe1dc;
  --primary-rgb: 14, 124, 134;
  --primary-top: #2aa9a9;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(14, 124, 134, 0.18);
  --gold: #ffb5a7;
  --gold-deep: #a94343;
  --gold-light: #ffb5a7;
  --gold-soft: #ffe9e5;
  --burgundy: #f26d6d;
  --burgundy-deep: #b44949;
  --red: #f26d6d;
  --red-soft: #ffe1dc;
  --amber: #ffb5a7;
  --amber-soft: #fff0ed;
  --green: #0e7c86;
  --green-soft: #d8eeee;
  --blue: #2aa9a9;
  --blue-soft: #ddf3f2;
  --shadow: 0 1px 2px rgba(31, 31, 31, 0.04), 0 18px 42px rgba(14, 124, 134, 0.10);
  --shadow-strong: 0 28px 64px rgba(31, 31, 31, 0.16);
  background: #fdf2f0;
}

body[data-theme="neutral"] .sidebar {
  border-right: 0;
  background: #0e7c86;
  color: #ffffff;
}

body[data-theme="neutral"] .brand-mark {
  border-color: rgba(255, 181, 167, 0.46);
  background: #fdf2f0;
  box-shadow: 0 0 0 1px rgba(255, 181, 167, 0.18), 0 12px 30px rgba(31, 31, 31, 0.22);
}

body[data-theme="neutral"] .brand-title {
  color: #ffffff;
}

body[data-theme="neutral"] .brand-subtitle,
body[data-theme="neutral"] .sidebar-footer {
  color: rgba(255, 255, 255, 0.68);
}

body[data-theme="neutral"] .login-screen {
  background: #fdf2f0;
}

body[data-theme="neutral"] .login-card {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-strong);
}

body[data-theme="neutral"] .login-brand .brand-mark {
  border-color: rgba(14, 124, 134, 0.22);
  background: #fdf2f0;
}

body[data-theme="neutral"] .login-brand .brand-title {
  color: var(--ink);
}

body[data-theme="neutral"] .login-brand .brand-subtitle {
  color: var(--muted);
}

body[data-theme="neutral"] .nav-button {
  color: rgba(255, 255, 255, 0.80);
}

body[data-theme="neutral"] .nav-button:hover,
body[data-theme="neutral"] .nav-button.active {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  background: rgba(242, 109, 109, 0.24);
  box-shadow: inset 3px 0 0 #ffb5a7;
}

body[data-theme="neutral"] .nav-icon {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background: rgba(255, 181, 167, 0.28);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.92);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background: rgba(242, 109, 109, 0.30);
}

body[data-theme="neutral"] .sidebar-theme,
body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(255, 255, 255, 0.62);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
}

body[data-theme="neutral"] .sidebar-theme-option.active {
  border-bottom-color: #ffb5a7;
}

body[data-theme="neutral"] .main {
  background: transparent;
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .section-header {
  background: #fff8f7;
  box-shadow: inset 4px 0 0 #f26d6d;
}

body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .eyebrow,
body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em,
body[data-theme="neutral"] .ai-enterprise-card h4,
body[data-theme="neutral"] .ai-enterprise-rail-card strong,
body[data-theme="neutral"] .permission-role-card-head strong {
  color: #f26d6d;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center,
body[data-theme="neutral"] .ai-enterprise-card,
body[data-theme="neutral"] .ai-enterprise-rail-card,
body[data-theme="neutral"] .ai-playbook-nav-item,
body[data-theme="neutral"] .ai-roadmap-row,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  background: var(--surface-soft);
}

body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .permission-card {
  border-top: 2px solid rgba(42, 169, 169, 0.34);
}

body[data-theme="neutral"] .summary-strip > div:nth-child(2n),
body[data-theme="neutral"] .quick-card:nth-child(2n),
body[data-theme="neutral"] .detail-meta:nth-child(2n),
body[data-theme="neutral"] .permission-card:nth-child(2n) {
  border-top-color: rgba(242, 109, 109, 0.48);
}

body[data-theme="neutral"] .kpi-card::before,
body[data-theme="neutral"] .phase-card::before {
  background: #0e7c86;
}

body[data-theme="neutral"] .kpi-card.gold::before,
body[data-theme="neutral"] .phase-card.event::before,
body[data-theme="neutral"] .phase-card.gold::before,
body[data-theme="neutral"] .phase-card.warn::before {
  background: #f26d6d;
}

body[data-theme="neutral"] .kpi-card::after {
  border-color: rgba(42, 169, 169, 0.20);
  opacity: 0.22;
}

body[data-theme="neutral"] .kpi-card.good,
body[data-theme="neutral"] .phase-card.good,
body[data-theme="neutral"] .kpi-card.info {
  background: #ffffff;
}

body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn,
body[data-theme="neutral"] .kpi-card.bad {
  background: #ffffff;
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: rgba(14, 124, 134, 0.28);
  background: #0e7c86;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  transform: none;
  background: #0a6670;
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

body[data-theme="neutral"] .button.secondary:hover,
body[data-theme="neutral"] .tiny-button:hover {
  border-color: rgba(242, 109, 109, 0.32);
  background: #ffe9e5;
  color: #a94343;
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  border-color: rgba(242, 109, 109, 0.30);
  background: #f26d6d;
  color: #ffffff;
}

body[data-theme="neutral"] .button.danger:hover,
body[data-theme="neutral"] .tiny-button.danger:hover {
  background: #d95858;
}

body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background: #ddf3f2;
  color: #0e7c86;
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold,
body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice,
body[data-theme="neutral"] .permission-save-button.is-saved,
body[data-theme="neutral"] .knowledge-doc-delete {
  border-color: rgba(242, 109, 109, 0.26);
  background: #ffe1dc;
  color: #a94343;
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line);
  background: #ffffff;
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: #0e7c86;
  box-shadow: 0 0 0 3px rgba(42, 169, 169, 0.16);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background: #fff8f7;
  color: var(--muted-strong);
}

body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover,
body[data-theme="neutral"] .ai-enterprise-card:hover {
  background: #fff3f0;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active {
  background: #ddf3f2;
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 #f26d6d;
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  background: rgba(255, 255, 255, 0.97);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: #0e7c86;
  background: #ffffff;
}

body[data-theme="neutral"] .guide-block-risk,
body[data-theme="neutral"] .guide-block-template {
  background: #ffe1dc;
}

body[data-theme="neutral"] .pill {
  border-color: var(--line);
  background: #ffffff;
  color: var(--muted-strong);
}

body[data-theme="neutral"] .pill.good {
  border-color: rgba(14, 124, 134, 0.22);
  background: #ddf3f2;
  color: #0e7c86;
}

body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(242, 109, 109, 0.26);
  background: #ffe1dc;
  color: #a94343;
}

/* Keep the neutral shell flat without stripping semantic component backgrounds. */
body[data-theme="neutral"],
body[data-theme="neutral"] .app-shell,
body[data-theme="neutral"] .main,
body[data-theme="neutral"] .sidebar {
  background-image: none !important;
}

body[data-theme="neutral"] {
  --bg: #f4f1ed;
  --surface: #ffffff;
  --surface-soft: #f7f5f2;
  --surface-muted: #ece6df;
  --ink: #2e2e2e;
  --muted: #747d82;
  --muted-strong: #4c575c;
  --line: #ddd4ca;
  --line-strong: #c9b8a7;
  --teal: #567c8d;
  --teal-soft: #e3ebee;
  --accent: #e85a4f;
  --accent-soft: #fbe1de;
  --primary-rgb: 86, 124, 141;
  --primary-top: #567c8d;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(86, 124, 141, 0.16);
  --gold: #c9b8a7;
  --gold-deep: #786959;
  --gold-light: #d9cdc0;
  --gold-soft: #f1ebe5;
  --burgundy: #e85a4f;
  --burgundy-deep: #a83d35;
  --red: #e85a4f;
  --red-soft: #fbe1de;
  --amber: #c9b8a7;
  --amber-soft: #f1ebe5;
  --green: #567c8d;
  --green-soft: #e3ebee;
  --blue: #567c8d;
  --blue-soft: #e3ebee;
  --shadow: 0 1px 2px rgba(46, 46, 46, 0.04), 0 16px 38px rgba(46, 46, 46, 0.075);
  --shadow-strong: 0 28px 64px rgba(46, 46, 46, 0.14);
  background-color: var(--bg);
}

body[data-theme="neutral"] .sidebar {
  border-right: 0;
  background-color: #2e2e2e;
  color: #ffffff;
}

body[data-theme="neutral"] .brand-mark {
  border-color: rgba(201, 184, 167, 0.48);
  background-color: #f4f1ed;
  box-shadow: 0 0 0 1px rgba(201, 184, 167, 0.20), 0 12px 30px rgba(46, 46, 46, 0.20);
}

body[data-theme="neutral"] .brand-title {
  color: #ffffff;
}

body[data-theme="neutral"] .brand-subtitle,
body[data-theme="neutral"] .sidebar-footer {
  color: rgba(255, 255, 255, 0.66);
}

body[data-theme="neutral"] .login-screen {
  background-color: var(--bg);
}

body[data-theme="neutral"] .login-card {
  border-color: var(--line);
  background-color: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-strong);
}

body[data-theme="neutral"] .login-brand .brand-mark {
  border-color: rgba(86, 124, 141, 0.24);
  background-color: #f4f1ed;
}

body[data-theme="neutral"] .login-brand .brand-title {
  color: var(--ink);
}

body[data-theme="neutral"] .login-brand .brand-subtitle {
  color: var(--muted);
}

body[data-theme="neutral"] .nav-button {
  color: rgba(255, 255, 255, 0.76);
}

body[data-theme="neutral"] .nav-button:hover,
body[data-theme="neutral"] .nav-button.active {
  background-color: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  background-color: #567c8d;
  box-shadow: inset 3px 0 0 #e85a4f;
}

body[data-theme="neutral"] .nav-icon {
  background-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.84);
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background-color: rgba(232, 90, 79, 0.22);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background-color: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.90);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background-color: rgba(46, 46, 46, 0.18);
}

body[data-theme="neutral"] .sidebar-theme,
body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(255, 255, 255, 0.58);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
}

body[data-theme="neutral"] .sidebar-theme-option.active {
  border-bottom-color: #e85a4f;
}

body[data-theme="neutral"] .main {
  background-color: transparent;
}

body[data-theme="neutral"] .topbar {
  border-bottom-color: rgba(201, 184, 167, 0.42);
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: var(--line);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .section-header {
  background-color: #f7f5f2;
  box-shadow: inset 4px 0 0 #e85a4f;
}

body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .eyebrow,
body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em,
body[data-theme="neutral"] .ai-enterprise-card h4,
body[data-theme="neutral"] .ai-enterprise-rail-card strong,
body[data-theme="neutral"] .permission-role-card-head strong {
  color: #e85a4f;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center,
body[data-theme="neutral"] .ai-enterprise-card,
body[data-theme="neutral"] .ai-enterprise-rail-card,
body[data-theme="neutral"] .ai-playbook-nav-item,
body[data-theme="neutral"] .ai-roadmap-row,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block,
body[data-theme="neutral"] .metric-card,
body[data-theme="neutral"] .metric-detail-card,
body[data-theme="neutral"] .approval-card,
body[data-theme="neutral"] .risk-card,
body[data-theme="neutral"] .budget-card,
body[data-theme="neutral"] .product-card,
body[data-theme="neutral"] .meeting-card {
  border-color: var(--line);
  background-color: #ffffff;
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block {
  background-color: var(--surface-soft);
}

body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .permission-card {
  border-top: 2px solid rgba(86, 124, 141, 0.36);
}

body[data-theme="neutral"] .summary-strip > div:nth-child(2n),
body[data-theme="neutral"] .quick-card:nth-child(2n),
body[data-theme="neutral"] .detail-meta:nth-child(2n),
body[data-theme="neutral"] .permission-card:nth-child(2n) {
  border-top-color: rgba(201, 184, 167, 0.76);
}

body[data-theme="neutral"] .kpi-card::before,
body[data-theme="neutral"] .phase-card::before {
  background-color: #567c8d;
}

body[data-theme="neutral"] .kpi-card.gold::before,
body[data-theme="neutral"] .phase-card.event::before,
body[data-theme="neutral"] .phase-card.gold::before,
body[data-theme="neutral"] .phase-card.warn::before {
  background-color: #e85a4f;
}

body[data-theme="neutral"] .kpi-card::after {
  border-color: rgba(86, 124, 141, 0.18);
  opacity: 0.20;
}

body[data-theme="neutral"] .kpi-card.good,
body[data-theme="neutral"] .phase-card.good,
body[data-theme="neutral"] .kpi-card.info,
body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn,
body[data-theme="neutral"] .kpi-card.bad {
  background-color: #ffffff;
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: rgba(86, 124, 141, 0.32);
  background-color: #567c8d;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  transform: none;
  background-color: #486b7a;
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: var(--line);
  background-color: #ffffff;
  color: var(--ink);
}

body[data-theme="neutral"] .button.secondary:hover,
body[data-theme="neutral"] .tiny-button:hover {
  border-color: rgba(86, 124, 141, 0.38);
  background-color: #e3ebee;
  color: #2e2e2e;
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  border-color: rgba(232, 90, 79, 0.34);
  background-color: #e85a4f;
  color: #ffffff;
}

body[data-theme="neutral"] .button.danger:hover,
body[data-theme="neutral"] .tiny-button.danger:hover {
  background-color: #cf4a40;
}

body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background-color: #e3ebee;
  color: #567c8d;
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold,
body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice,
body[data-theme="neutral"] .permission-save-button.is-saved,
body[data-theme="neutral"] .knowledge-doc-delete {
  border-color: rgba(232, 90, 79, 0.28);
  background-color: #fbe1de;
  color: #a83d35;
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line);
  background-color: #ffffff;
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: #567c8d;
  box-shadow: 0 0 0 3px rgba(86, 124, 141, 0.14);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background-color: #f7f5f2;
  color: var(--muted-strong);
}

body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover,
body[data-theme="neutral"] .ai-enterprise-card:hover {
  background-color: #f7f5f2;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active {
  background-color: #e3ebee;
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 #e85a4f;
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  background-color: rgba(255, 255, 255, 0.97);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: #567c8d;
  background-color: #ffffff;
}

body[data-theme="neutral"] .guide-block-risk,
body[data-theme="neutral"] .guide-block-template {
  background-color: #fbe1de;
}

body[data-theme="neutral"] .pill {
  border-color: var(--line);
  background-color: #ffffff;
  color: var(--muted-strong);
}

body[data-theme="neutral"] .pill.good {
  border-color: rgba(86, 124, 141, 0.28);
  background-color: #e3ebee;
  color: #486b7a;
}

body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(232, 90, 79, 0.28);
  background-color: #fbe1de;
  color: #a83d35;
}

/* Neutral contrast update: make it clearly different from the light theme. No gradients. */
body[data-theme="neutral"] {
  --bg: #ded6ce;
  --surface: #fffdfb;
  --surface-soft: #eee7df;
  --surface-muted: #d8cec3;
  --ink: #2e2e2e;
  --muted: #68737a;
  --muted-strong: #445158;
  --line: #c9b8a7;
  --line-strong: #a89684;
  --teal: #567c8d;
  --teal-soft: #dfe8ec;
  --accent: #e85a4f;
  --accent-soft: #f8d8d5;
  --primary-rgb: 86, 124, 141;
  --primary-top: #567c8d;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(46, 46, 46, 0.16);
  --gold: #c9b8a7;
  --gold-deep: #6f6255;
  --gold-light: #ded6ce;
  --gold-soft: #eee7df;
  --burgundy: #e85a4f;
  --burgundy-deep: #9f3f38;
  --red: #e85a4f;
  --red-soft: #f8d8d5;
  --amber: #c9b8a7;
  --amber-soft: #eee7df;
  --green: #567c8d;
  --green-soft: #dfe8ec;
  --blue: #567c8d;
  --blue-soft: #dfe8ec;
  --shadow: 0 1px 2px rgba(46, 46, 46, 0.05), 0 18px 42px rgba(46, 46, 46, 0.105);
  --shadow-strong: 0 28px 64px rgba(46, 46, 46, 0.18);
  background-color: var(--bg);
}

body[data-theme="neutral"] .sidebar {
  background-color: #2e2e2e;
}

body[data-theme="neutral"] .topbar {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(86, 124, 141, 0.34);
  border-radius: 14px;
  background-color: #567c8d;
  color: #ffffff;
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .topbar h1 {
  color: #ffffff;
}

body[data-theme="neutral"] .topbar .eyebrow {
  color: #f1ebe5;
}

body[data-theme="neutral"] .topbar .presence-pill,
body[data-theme="neutral"] .topbar .account-pill,
body[data-theme="neutral"] .topbar .button.secondary {
  border-color: rgba(255, 255, 255, 0.26);
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body[data-theme="neutral"] .topbar .presence-dot {
  background-color: #c9b8a7;
}

body[data-theme="neutral"] .topbar .account-avatar {
  background-color: #f1ebe5;
  color: #567c8d;
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card {
  border-color: rgba(201, 184, 167, 0.88);
  background-color: var(--surface);
}

body[data-theme="neutral"] .section-header {
  border-bottom-color: rgba(201, 184, 167, 0.62);
  background-color: #eee7df;
  box-shadow: inset 4px 0 0 #567c8d;
}

body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .eyebrow,
body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em,
body[data-theme="neutral"] .ai-enterprise-card h4,
body[data-theme="neutral"] .ai-enterprise-rail-card strong,
body[data-theme="neutral"] .permission-role-card-head strong {
  color: #567c8d;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .org-node.primary,
body[data-theme="neutral"] .org-node.gold,
body[data-theme="neutral"] .growth-center,
body[data-theme="neutral"] .ai-enterprise-card,
body[data-theme="neutral"] .ai-enterprise-rail-card,
body[data-theme="neutral"] .ai-playbook-nav-item,
body[data-theme="neutral"] .ai-roadmap-row,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block,
body[data-theme="neutral"] .metric-card,
body[data-theme="neutral"] .metric-detail-card,
body[data-theme="neutral"] .approval-card,
body[data-theme="neutral"] .risk-card,
body[data-theme="neutral"] .budget-card,
body[data-theme="neutral"] .product-card,
body[data-theme="neutral"] .meeting-card {
  border-color: rgba(201, 184, 167, 0.82);
  background-color: #fffdfb;
}

body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block,
body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  background-color: #eee7df;
}

body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .permission-card {
  border-top-color: #567c8d;
}

body[data-theme="neutral"] .summary-strip > div:nth-child(2n),
body[data-theme="neutral"] .quick-card:nth-child(2n),
body[data-theme="neutral"] .detail-meta:nth-child(2n),
body[data-theme="neutral"] .permission-card:nth-child(2n) {
  border-top-color: #c9b8a7;
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: rgba(86, 124, 141, 0.32);
  background-color: #567c8d;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button {
  border-color: rgba(201, 184, 167, 0.88);
  background-color: #fffdfb;
}

body[data-theme="neutral"] .button.secondary:hover,
body[data-theme="neutral"] .tiny-button:hover,
body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover,
body[data-theme="neutral"] .ai-enterprise-card:hover {
  background-color: #eee7df;
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger {
  border-color: rgba(232, 90, 79, 0.36);
  background-color: #e85a4f;
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold,
body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice,
body[data-theme="neutral"] .permission-save-button.is-saved,
body[data-theme="neutral"] .knowledge-doc-delete,
body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(232, 90, 79, 0.32);
  background-color: #f8d8d5;
  color: #9f3f38;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active,
body[data-theme="neutral"] .pill.good,
body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background-color: #dfe8ec;
  color: #486b7a;
}

/* Neutral Google workspace upgrade: calmer hierarchy, crisp surfaces, no gradients. */
body[data-theme="neutral"] {
  --bg: #eef2f4;
  --surface: #ffffff;
  --surface-soft: #f7f9fa;
  --surface-muted: #edf3f5;
  --ink: #202124;
  --muted: #69757c;
  --muted-strong: #3f4a50;
  --line: #dde5e9;
  --line-strong: #b9c7ce;
  --teal: #567c8d;
  --teal-soft: #e7f0f3;
  --accent: #e85a4f;
  --accent-soft: #fde7e4;
  --primary-rgb: 86, 124, 141;
  --primary-top: #567c8d;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(86, 124, 141, 0.16);
  --gold: #c9b8a7;
  --gold-deep: #75685b;
  --gold-light: #e6ddd4;
  --gold-soft: #f4efea;
  --burgundy: #e85a4f;
  --burgundy-deep: #a33f38;
  --red: #e85a4f;
  --red-soft: #fde7e4;
  --amber: #c9b8a7;
  --amber-soft: #f4efea;
  --green: #567c8d;
  --green-soft: #e7f0f3;
  --blue: #567c8d;
  --blue-soft: #e7f0f3;
  --shadow: 0 1px 2px rgba(32, 33, 36, 0.06), 0 12px 28px rgba(32, 33, 36, 0.07);
  --shadow-strong: 0 22px 56px rgba(32, 33, 36, 0.16);
  background-color: var(--bg);
}

body[data-theme="neutral"],
body[data-theme="neutral"] .app-shell,
body[data-theme="neutral"] .main,
body[data-theme="neutral"] .sidebar {
  background-image: none !important;
}

body[data-theme="neutral"] .app-shell,
body[data-theme="neutral"] .main {
  background-color: var(--bg);
}

body[data-theme="neutral"] .sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #202124;
  box-shadow: none;
}

body[data-theme="neutral"] .brand-block {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body[data-theme="neutral"] .brand-mark {
  border: 1px solid rgba(201, 184, 167, 0.46);
  background-color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .brand-title {
  color: #ffffff;
  letter-spacing: 0;
}

body[data-theme="neutral"] .brand-subtitle,
body[data-theme="neutral"] .sidebar-footer {
  color: rgba(255, 255, 255, 0.62);
}

body[data-theme="neutral"] .sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

body[data-theme="neutral"] .sidebar-theme {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="neutral"] .sidebar-theme-option {
  color: rgba(255, 255, 255, 0.72);
}

body[data-theme="neutral"] .sidebar-theme-option:hover,
body[data-theme="neutral"] .sidebar-theme-option.active {
  color: #ffffff;
  text-decoration-color: #c9b8a7;
}

body[data-theme="neutral"] .nav-button {
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.76);
}

body[data-theme="neutral"] .nav-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-button.active {
  background-color: #567c8d;
  color: #ffffff;
  box-shadow: inset 3px 0 0 #c9b8a7;
}

body[data-theme="neutral"] .nav-icon {
  background-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
}

body[data-theme="neutral"] .nav-button:hover .nav-icon,
body[data-theme="neutral"] .nav-button.active .nav-icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-theme="neutral"] .nav-count {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}

body[data-theme="neutral"] .nav-button.active .nav-count {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body[data-theme="neutral"] .topbar {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-top: 5px solid #567c8d;
  border-radius: 10px;
  background-color: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .topbar h1 {
  color: var(--ink);
  letter-spacing: 0;
}

body[data-theme="neutral"] .topbar .eyebrow {
  color: #567c8d;
}

body[data-theme="neutral"] .topbar .presence-pill,
body[data-theme="neutral"] .topbar .account-pill,
body[data-theme="neutral"] .topbar .button.secondary {
  border-color: var(--line);
  background-color: #f8fafb;
  color: var(--ink);
  box-shadow: none;
}

body[data-theme="neutral"] .topbar .presence-pill:hover,
body[data-theme="neutral"] .topbar .account-pill:hover,
body[data-theme="neutral"] .topbar .button.secondary:hover {
  border-color: var(--line-strong);
  background-color: #eef3f5;
}

body[data-theme="neutral"] .topbar .presence-dot {
  background-color: #567c8d;
}

body[data-theme="neutral"] .topbar .account-avatar {
  background-color: #e7f0f3;
  color: #456878;
}

body[data-theme="neutral"] .section,
body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .detail-section,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .org-principle,
body[data-theme="neutral"] .org-node,
body[data-theme="neutral"] .org-group,
body[data-theme="neutral"] .mechanism-item,
body[data-theme="neutral"] .metrics-group,
body[data-theme="neutral"] .ai-training-hero,
body[data-theme="neutral"] .ai-enterprise-nav,
body[data-theme="neutral"] .ai-enterprise-detail,
body[data-theme="neutral"] .ai-playbook-nav,
body[data-theme="neutral"] .ai-playbook-detail,
body[data-theme="neutral"] .ai-task-panel,
body[data-theme="neutral"] .permission-create,
body[data-theme="neutral"] .permission-nav-order,
body[data-theme="neutral"] .permission-approval,
body[data-theme="neutral"] .permission-role-manager,
body[data-theme="neutral"] .permission-online-panel,
body[data-theme="neutral"] .permission-console,
body[data-theme="neutral"] .permission-card,
body[data-theme="neutral"] .project-scale,
body[data-theme="neutral"] .guide-sidebar,
body[data-theme="neutral"] .knowledge-sidebar,
body[data-theme="neutral"] .permission-account-list,
body[data-theme="neutral"] .permission-role-card,
body[data-theme="neutral"] .permission-online-list,
body[data-theme="neutral"] .permission-modules,
body[data-theme="neutral"] .guide-reader,
body[data-theme="neutral"] .guide-landing-markdown,
body[data-theme="neutral"] .knowledge-reader,
body[data-theme="neutral"] .ai-enterprise-block,
body[data-theme="neutral"] .ai-detail-block,
body[data-theme="neutral"] .metric-card,
body[data-theme="neutral"] .metric-detail-card,
body[data-theme="neutral"] .approval-card,
body[data-theme="neutral"] .risk-card,
body[data-theme="neutral"] .budget-card,
body[data-theme="neutral"] .product-card,
body[data-theme="neutral"] .meeting-card {
  border-color: var(--line);
  background-color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .section {
  border-radius: 10px;
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] .section-header {
  border-bottom-color: var(--line);
  background-color: #f8fafb;
  box-shadow: inset 4px 0 0 #567c8d;
}

body[data-theme="neutral"] .section-body {
  background-color: #ffffff;
}

body[data-theme="neutral"] .section-kicker,
body[data-theme="neutral"] .eyebrow,
body[data-theme="neutral"] .task-head-cell.is-active .task-head-label,
body[data-theme="neutral"] .task-filter-option.is-selected,
body[data-theme="neutral"] .metric-collapse-icon,
body[data-theme="neutral"] .guide-list-block li::marker,
body[data-theme="neutral"] .presence-viewer-row em,
body[data-theme="neutral"] .ai-enterprise-card h4,
body[data-theme="neutral"] .ai-enterprise-rail-card strong,
body[data-theme="neutral"] .permission-role-card-head strong {
  color: #567c8d;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card,
body[data-theme="neutral"] .ai-enterprise-card,
body[data-theme="neutral"] .ai-enterprise-rail-card,
body[data-theme="neutral"] .ai-playbook-nav-item,
body[data-theme="neutral"] .ai-roadmap-row,
body[data-theme="neutral"] .guide-deliverable-card,
body[data-theme="neutral"] .permission-account-row,
body[data-theme="neutral"] .permission-online-row,
body[data-theme="neutral"] .permission-approval-item,
body[data-theme="neutral"] .nav-order-item,
body[data-theme="neutral"] .approval-card,
body[data-theme="neutral"] .risk-card,
body[data-theme="neutral"] .budget-card,
body[data-theme="neutral"] .product-card,
body[data-theme="neutral"] .meeting-card {
  border-radius: 8px;
}

body[data-theme="neutral"] .kpi-card,
body[data-theme="neutral"] .phase-card {
  border-top: 3px solid #567c8d;
}

body[data-theme="neutral"] .kpi-card.warn,
body[data-theme="neutral"] .phase-card.warn,
body[data-theme="neutral"] .kpi-card.bad {
  border-top-color: #e85a4f;
  background-color: #fff8f7;
}

body[data-theme="neutral"] .summary-strip > div,
body[data-theme="neutral"] .quick-card,
body[data-theme="neutral"] .detail-meta,
body[data-theme="neutral"] .permission-card {
  border-top-color: var(--line);
}

body[data-theme="neutral"] .summary-strip > div:nth-child(2n),
body[data-theme="neutral"] .quick-card:nth-child(2n),
body[data-theme="neutral"] .detail-meta:nth-child(2n),
body[data-theme="neutral"] .permission-card:nth-child(2n) {
  border-top-color: var(--line);
}

body[data-theme="neutral"] .button,
body[data-theme="neutral"] .icon-button {
  border-color: #567c8d;
  background-color: #567c8d;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="neutral"] .button:hover,
body[data-theme="neutral"] .icon-button:hover {
  border-color: #456878;
  background-color: #456878;
}

body[data-theme="neutral"] .button.secondary,
body[data-theme="neutral"] .tiny-button,
body[data-theme="neutral"] .button.ghost {
  border-color: var(--line);
  background-color: #ffffff;
  color: var(--ink);
  box-shadow: none;
}

body[data-theme="neutral"] .button.secondary:hover,
body[data-theme="neutral"] .tiny-button:hover,
body[data-theme="neutral"] .button.ghost:hover,
body[data-theme="neutral"] tbody tr:hover,
body[data-theme="neutral"] .guide-deliverable-card:hover,
body[data-theme="neutral"] .quick-card:hover,
body[data-theme="neutral"] .ai-enterprise-card:hover {
  border-color: var(--line-strong);
  background-color: #eef3f5;
}

body[data-theme="neutral"] .button.danger,
body[data-theme="neutral"] .tiny-button.danger,
body[data-theme="neutral"] .knowledge-doc-delete {
  border-color: #e85a4f;
  background-color: #e85a4f;
  color: #ffffff;
}

body[data-theme="neutral"] .button.danger:hover,
body[data-theme="neutral"] .tiny-button.danger:hover,
body[data-theme="neutral"] .knowledge-doc-delete:hover {
  border-color: #c94d43;
  background-color: #c94d43;
}

body[data-theme="neutral"] .input,
body[data-theme="neutral"] .select,
body[data-theme="neutral"] .textarea,
body[data-theme="neutral"] .table-filter-control {
  border-color: var(--line);
  background-color: #ffffff;
  color: var(--ink);
}

body[data-theme="neutral"] .input:focus,
body[data-theme="neutral"] .select:focus,
body[data-theme="neutral"] .textarea:focus,
body[data-theme="neutral"] .table-filter-control:focus {
  border-color: #567c8d;
  box-shadow: 0 0 0 3px rgba(86, 124, 141, 0.15);
}

body[data-theme="neutral"] .table-wrap,
body[data-theme="neutral"] .guide-table-wrap,
body[data-theme="neutral"] .md-table-wrap,
body[data-theme="neutral"] .task-filter-menu,
body[data-theme="neutral"] .metric-floating-tooltip,
body[data-theme="neutral"] .modal {
  border-color: var(--line);
  background-color: #ffffff;
  box-shadow: var(--shadow);
}

body[data-theme="neutral"] th,
body[data-theme="neutral"] .task-header-row th,
body[data-theme="neutral"] .metrics-group-header,
body[data-theme="neutral"] .guide-table th,
body[data-theme="neutral"] .md-table th {
  border-bottom-color: var(--line);
  background-color: #f1f4f6;
  color: #3f4a50;
}

body[data-theme="neutral"] .task-group-row td,
body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active,
body[data-theme="neutral"] .permission-account-row:hover,
body[data-theme="neutral"] .permission-account-row.active,
body[data-theme="neutral"] .pill.good,
body[data-theme="neutral"] .account-avatar,
body[data-theme="neutral"] .permission-account-avatar,
body[data-theme="neutral"] .account-summary-avatar {
  background-color: #e7f0f3;
  color: #456878;
}

body[data-theme="neutral"] .guide-button,
body[data-theme="neutral"] .knowledge-doc-button,
body[data-theme="neutral"] .permission-module-item {
  border-color: var(--line);
  background-color: #ffffff;
}

body[data-theme="neutral"] .guide-button.active,
body[data-theme="neutral"] .knowledge-doc-button.active {
  box-shadow: inset 3px 0 0 #567c8d;
}

body[data-theme="neutral"] .guide-reader-header,
body[data-theme="neutral"] .knowledge-reader-header {
  border-bottom-color: var(--line);
  background-color: rgba(255, 255, 255, 0.98);
}

body[data-theme="neutral"] .guide-mission,
body[data-theme="neutral"] .guide-block-deliverable,
body[data-theme="neutral"] .markdown-rendered blockquote {
  border-left-color: #567c8d;
  background-color: #f8fafb;
}

body[data-theme="neutral"] .guide-block-risk,
body[data-theme="neutral"] .guide-block-template,
body[data-theme="neutral"] .pill.warn,
body[data-theme="neutral"] .pill.bad,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  border-color: rgba(232, 90, 79, 0.24);
  background-color: #fff2f0;
  color: #a33f38;
}

body[data-theme="neutral"] .pill,
body[data-theme="neutral"] .code-chip,
body[data-theme="neutral"] .source-chip,
body[data-theme="neutral"] .guide-source-list span,
body[data-theme="neutral"] .org-tags span {
  border-color: var(--line);
  background-color: #f8fafb;
  color: var(--muted-strong);
}

body[data-theme="neutral"] .project-scale strong,
body[data-theme="neutral"] .phase-event,
body[data-theme="neutral"] .pill.gold,
body[data-theme="neutral"] .task-phase-add,
body[data-theme="neutral"] .permission-approval-password,
body[data-theme="neutral"] .permission-sync-notice,
body[data-theme="neutral"] .permission-save-button.is-saved {
  border-color: rgba(86, 124, 141, 0.24);
  background-color: #e7f0f3;
  color: #456878;
}

body[data-theme="neutral"] .permission-save-button.is-saved,
body[data-theme="neutral"] .permission-save-notice.success,
body[data-theme="neutral"] .permission-sync-notice.success {
  box-shadow: 0 0 0 3px rgba(86, 124, 141, 0.10);
}

/* Google Drive inspired theme: light rail, blue active pills, crisp enterprise workspace. */
body[data-theme="google"] {
  --bg: #f8fbff;
  --surface: #ffffff;
  --surface-soft: #f8fafd;
  --surface-muted: #edf2fa;
  --ink: #202124;
  --muted: #5f6368;
  --muted-strong: #3c4043;
  --line: #e0e6ef;
  --line-strong: #c8d4e3;
  --teal: #1a73e8;
  --teal-soft: #e8f0fe;
  --accent: #fbbc04;
  --accent-soft: #fff7df;
  --primary-rgb: 26, 115, 232;
  --primary-top: #1a73e8;
  --primary-fg: #ffffff;
  --primary-shadow: rgba(26, 115, 232, 0.14);
  --gold: #fbbc04;
  --gold-deep: #b06000;
  --gold-light: #fde293;
  --gold-soft: #fff7df;
  --burgundy: #ea4335;
  --burgundy-deep: #b3261e;
  --red: #ea4335;
  --red-soft: #fce8e6;
  --amber: #fbbc04;
  --amber-soft: #fff7df;
  --green: #34a853;
  --green-soft: #e6f4ea;
  --blue: #1a73e8;
  --blue-soft: #e8f0fe;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 8px 22px rgba(60, 64, 67, 0.06);
  --shadow-strong: 0 18px 48px rgba(60, 64, 67, 0.18);
  background-color: var(--bg);
  color: var(--ink);
}

body[data-theme="google"],
body[data-theme="google"] .app-shell,
body[data-theme="google"] .main,
body[data-theme="google"] .sidebar {
  background-image: none !important;
}

body[data-theme="google"] .app-shell,
body[data-theme="google"] .main {
  background-color: var(--bg);
}

body[data-theme="google"] .main {
  padding: 18px 24px 40px;
}

body[data-theme="google"] .sidebar {
  gap: 14px;
  padding: 18px 14px;
  border-right: 1px solid #e5eaf2;
  background-color: #f8fbff;
  color: #3c4043;
  box-shadow: none;
}

body[data-theme="google"] .brand-block {
  padding-bottom: 16px;
  border-bottom-color: #e5eaf2;
}

body[data-theme="google"] .brand-mark {
  border: 1px solid #e0e6ef;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.10);
}

body[data-theme="google"] .brand-title {
  color: #202124;
  letter-spacing: 0;
}

body[data-theme="google"] .brand-subtitle,
body[data-theme="google"] .sidebar-footer {
  color: #5f6368;
}

body[data-theme="google"] .nav-button {
  min-height: 39px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #3c4043;
}

body[data-theme="google"] .nav-button:hover {
  background-color: #edf2fa;
  color: #174ea6;
}

body[data-theme="google"] .nav-button.active {
  background-color: #c2e7ff;
  color: #174ea6;
  box-shadow: none;
}

body[data-theme="google"] .nav-icon {
  border-radius: 8px;
  background-color: transparent;
  color: #5f6368;
}

body[data-theme="google"] .nav-button:hover .nav-icon,
body[data-theme="google"] .nav-button.active .nav-icon {
  background-color: rgba(255, 255, 255, 0.56);
  color: #174ea6;
}

body[data-theme="google"] .nav-count {
  background-color: #edf2fa;
  color: #5f6368;
}

body[data-theme="google"] .nav-button.active .nav-count {
  background-color: rgba(255, 255, 255, 0.62);
  color: #174ea6;
}

body[data-theme="google"] .sidebar-footer {
  border-top-color: #e5eaf2;
}

body[data-theme="google"] .sidebar-theme {
  color: #9aa0a6;
}

body[data-theme="google"] .sidebar-theme-option {
  color: #5f6368;
}

body[data-theme="google"] .sidebar-theme-option:hover,
body[data-theme="google"] .sidebar-theme-option.active {
  color: #1a73e8;
}

body[data-theme="google"] .sidebar-theme-option.active {
  border-bottom-color: #1a73e8;
}

body[data-theme="google"] .topbar {
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 14px 0 12px;
  border-bottom: 1px solid #e5eaf2;
}

body[data-theme="google"] .topbar h1 {
  margin-top: 4px;
  color: #202124;
  font-size: 30px;
  letter-spacing: 0;
}

body[data-theme="google"] .eyebrow {
  color: #1a73e8;
}

body[data-theme="google"] .topbar-actions {
  gap: 10px;
}

@media (min-width: 1121px) and (max-width: 1380px) {
  .topbar {
    gap: 10px;
  }

  .topbar h1,
  body[data-theme="google"] .topbar h1 {
    font-size: 25px;
  }

  .topbar-actions,
  body[data-theme="google"] .topbar-actions {
    gap: 5px;
  }

  .topbar-actions .presence-pill,
  .topbar-actions .project-state-pill,
  .topbar-actions .notification-trigger,
  .topbar-actions .button {
    padding-right: 8px;
    padding-left: 8px;
  }

  .topbar-actions .account-info span {
    display: none;
  }
}

body[data-theme="google"] .presence-pill,
body[data-theme="google"] .project-state-pill,
body[data-theme="google"] .account-pill,
body[data-theme="google"] .topbar .button.secondary {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: #edf2fa;
  color: #3c4043;
  box-shadow: none;
}

body[data-theme="google"] .presence-pill:hover,
body[data-theme="google"] .project-state-pill:hover,
body[data-theme="google"] .account-pill:hover,
body[data-theme="google"] .topbar .button.secondary:hover {
  border-color: #d3dce9;
  background-color: #e8f0fe;
}

body[data-theme="google"] .presence-dot {
  background-color: #34a853;
}

body[data-theme="google"] .account-avatar,
body[data-theme="google"] .permission-account-avatar,
body[data-theme="google"] .account-summary-avatar {
  background-color: #d3e3fd;
  color: #174ea6;
}

body[data-theme="google"] .section,
body[data-theme="google"] .kpi-card,
body[data-theme="google"] .phase-card,
body[data-theme="google"] .summary-strip > div,
body[data-theme="google"] .detail-meta,
body[data-theme="google"] .detail-section,
body[data-theme="google"] .quick-card,
body[data-theme="google"] .org-principle,
body[data-theme="google"] .org-node,
body[data-theme="google"] .org-group,
body[data-theme="google"] .mechanism-item,
body[data-theme="google"] .metrics-group,
body[data-theme="google"] .ai-training-hero,
body[data-theme="google"] .ai-enterprise-nav,
body[data-theme="google"] .ai-enterprise-detail,
body[data-theme="google"] .ai-playbook-nav,
body[data-theme="google"] .ai-playbook-detail,
body[data-theme="google"] .ai-task-panel,
body[data-theme="google"] .permission-create,
body[data-theme="google"] .permission-nav-order,
body[data-theme="google"] .permission-approval,
body[data-theme="google"] .permission-role-manager,
body[data-theme="google"] .permission-theme-manager,
body[data-theme="google"] .permission-online-panel,
body[data-theme="google"] .permission-console,
body[data-theme="google"] .permission-card,
body[data-theme="google"] .project-scale,
body[data-theme="google"] .guide-sidebar,
body[data-theme="google"] .knowledge-sidebar,
body[data-theme="google"] .permission-account-list,
body[data-theme="google"] .permission-role-card,
body[data-theme="google"] .permission-online-list,
body[data-theme="google"] .permission-modules,
body[data-theme="google"] .guide-reader,
body[data-theme="google"] .guide-landing-markdown,
body[data-theme="google"] .knowledge-reader,
body[data-theme="google"] .ai-enterprise-block,
body[data-theme="google"] .ai-detail-block,
body[data-theme="google"] .metric-card,
body[data-theme="google"] .metric-detail-card,
body[data-theme="google"] .approval-card,
body[data-theme="google"] .risk-card,
body[data-theme="google"] .budget-card,
body[data-theme="google"] .product-card,
body[data-theme="google"] .meeting-card {
  border-color: #e0e6ef;
  background-color: #ffffff;
  box-shadow: none;
}

body[data-theme="google"] .section {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

body[data-theme="google"] .section-header {
  position: relative;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom-color: #e5eaf2;
  background-color: #ffffff;
  box-shadow: inset 4px 0 0 #1a73e8;
}

body[data-theme="google"] .section-header::before {
  content: none !important;
  display: none !important;
}

body[data-theme="google"] .section-header > :not(.section-actions) {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-theme="google"] .section-header .section-actions {
  flex: 0 0 auto;
}

body[data-theme="google"] .section-title,
body[data-theme="google"] .section-desc {
  max-width: none;
}

body[data-theme="google"] .section-body {
  background-color: #ffffff;
}

body[data-theme="google"] .section-kicker,
body[data-theme="google"] .task-head-cell.is-active .task-head-label,
body[data-theme="google"] .task-filter-option.is-selected,
body[data-theme="google"] .metric-collapse-icon,
body[data-theme="google"] .guide-list-block li::marker,
body[data-theme="google"] .presence-viewer-row em,
body[data-theme="google"] .ai-enterprise-card h4,
body[data-theme="google"] .ai-enterprise-rail-card strong,
body[data-theme="google"] .permission-role-card-head strong {
  color: #1a73e8;
}

body[data-theme="google"] .kpi-card,
body[data-theme="google"] .phase-card,
body[data-theme="google"] .summary-strip > div,
body[data-theme="google"] .quick-card,
body[data-theme="google"] .detail-meta,
body[data-theme="google"] .permission-card,
body[data-theme="google"] .ai-enterprise-card,
body[data-theme="google"] .ai-enterprise-rail-card,
body[data-theme="google"] .ai-playbook-nav-item,
body[data-theme="google"] .ai-roadmap-row,
body[data-theme="google"] .guide-deliverable-card,
body[data-theme="google"] .permission-account-row,
body[data-theme="google"] .permission-online-row,
body[data-theme="google"] .permission-approval-item,
body[data-theme="google"] .nav-order-item,
body[data-theme="google"] .approval-card,
body[data-theme="google"] .risk-card,
body[data-theme="google"] .budget-card,
body[data-theme="google"] .product-card,
body[data-theme="google"] .meeting-card {
  border-radius: 12px;
}

body[data-theme="google"] .kpi-card,
body[data-theme="google"] .phase-card,
body[data-theme="google"] .ai-enterprise-card {
  background-color: #f8fbff;
}

body[data-theme="google"] .kpi-card.good,
body[data-theme="google"] .phase-card.good {
  border-color: #cce8d5;
  background-color: #f3fbf5;
}

body[data-theme="google"] .kpi-card.warn,
body[data-theme="google"] .phase-card.warn {
  border-color: #fde293;
  background-color: #fffaf0;
}

body[data-theme="google"] .kpi-card.bad,
body[data-theme="google"] .risk-card {
  border-color: #fad2cf;
  background-color: #fff7f6;
}

body[data-theme="google"] .button,
body[data-theme="google"] .icon-button {
  border-color: #1a73e8;
  border-radius: 999px;
  background-color: #1a73e8;
  color: #ffffff;
  box-shadow: none;
}

body[data-theme="google"] .button:hover,
body[data-theme="google"] .icon-button:hover {
  border-color: #174ea6;
  background-color: #174ea6;
}

body[data-theme="google"] .button.secondary,
body[data-theme="google"] .tiny-button,
body[data-theme="google"] .button.ghost {
  border-color: #d3dce9;
  background-color: #ffffff;
  color: #3c4043;
  box-shadow: none;
}

body[data-theme="google"] .button.secondary:hover,
body[data-theme="google"] .tiny-button:hover,
body[data-theme="google"] .button.ghost:hover,
body[data-theme="google"] tbody tr:hover,
body[data-theme="google"] .guide-deliverable-card:hover,
body[data-theme="google"] .quick-card:hover,
body[data-theme="google"] .ai-enterprise-card:hover {
  border-color: #c2d7f7;
  background-color: #f1f5fb;
}

body[data-theme="google"] .button.danger,
body[data-theme="google"] .tiny-button.danger,
body[data-theme="google"] .knowledge-doc-delete {
  border-color: #ea4335;
  background-color: #ea4335;
  color: #ffffff;
}

body[data-theme="google"] .button.danger:hover,
body[data-theme="google"] .tiny-button.danger:hover,
body[data-theme="google"] .knowledge-doc-delete:hover {
  border-color: #c5221f;
  background-color: #c5221f;
}

body[data-theme="google"] .input,
body[data-theme="google"] .select,
body[data-theme="google"] .textarea,
body[data-theme="google"] .table-filter-control {
  border-color: #d3dce9;
  border-radius: 8px;
  background-color: #ffffff;
  color: #202124;
}

body[data-theme="google"] .input:focus,
body[data-theme="google"] .select:focus,
body[data-theme="google"] .textarea:focus,
body[data-theme="google"] .table-filter-control:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}

body[data-theme="google"] .table-wrap,
body[data-theme="google"] .guide-table-wrap,
body[data-theme="google"] .md-table-wrap,
body[data-theme="google"] .task-filter-menu,
body[data-theme="google"] .metric-floating-tooltip,
body[data-theme="google"] .modal {
  border-color: #e0e6ef;
  background-color: #ffffff;
  box-shadow: var(--shadow);
}

body[data-theme="google"] th,
body[data-theme="google"] .task-header-row th,
body[data-theme="google"] .metrics-group-header,
body[data-theme="google"] .guide-table th,
body[data-theme="google"] .md-table th {
  border-bottom-color: #e5eaf2;
  background-color: #f8fafd;
  color: #3c4043;
}

body[data-theme="google"] table {
  border-collapse: separate;
  border-spacing: 0;
  background-color: #ffffff;
  color: #202124;
  font-size: 13px;
}

body[data-theme="google"] .table-wrap,
body[data-theme="google"] .guide-table-wrap,
body[data-theme="google"] .md-table-wrap {
  overflow: visible;
  border-color: #dfe6f1;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

body[data-theme="google"] th,
body[data-theme="google"] .task-header-row th,
body[data-theme="google"] .guide-table th,
body[data-theme="google"] .md-table th {
  padding: 9px 12px;
  border-right: 0;
  border-bottom: 1px solid #dfe6f1;
  background-color: #f8fafd;
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: none;
}

body[data-theme="google"] .task-header-row th {
  top: 0;
  box-shadow: 0 1px 0 #dfe6f1;
}

body[data-theme="google"] .task-header-row th:hover,
body[data-theme="google"] .task-header-row th:focus-within {
  background-color: #edf2fa;
}

body[data-theme="google"] .task-head-cell {
  min-height: 24px;
  gap: 4px;
}

body[data-theme="google"] .task-head-label {
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

body[data-theme="google"] .task-head-cell.is-active .task-head-label {
  color: #1a73e8;
}

body[data-theme="google"] .task-filter-arrow {
  border-left-width: 4px;
  border-right-width: 4px;
  border-top-width: 5px;
  border-top-color: #bdc1c6;
}

body[data-theme="google"] .task-head-cell.is-active .task-filter-arrow {
  border-top-color: #1a73e8;
}

body[data-theme="google"] td {
  border-bottom-color: #e5eaf2;
}

body[data-theme="google"] tbody tr:hover td {
  background-color: #f8fafd;
}

body[data-theme="google"] .task-filter-menu {
  border-color: #dfe6f1;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 6px 18px rgba(60, 64, 67, 0.16);
}

body[data-theme="google"] .task-group-row td {
  background: #e6f4ea;
  color: #137333;
}

body[data-theme="google"] .guide-button.active,
body[data-theme="google"] .knowledge-doc-button.active,
body[data-theme="google"] .permission-account-row:hover,
body[data-theme="google"] .permission-account-row.active,
body[data-theme="google"] .pill.good {
  background-color: #e6f4ea;
  color: #137333;
}

body[data-theme="google"] .task-group-title strong,
body[data-theme="google"] .task-group-title .phase-range,
body[data-theme="google"] .task-group-goal {
  color: #137333;
}

body[data-theme="google"] .task-group-goal {
  border-left-color: rgba(19, 115, 51, 0.22);
}

body[data-theme="google"] .guide-button,
body[data-theme="google"] .knowledge-doc-button,
body[data-theme="google"] .permission-module-item {
  border-color: #e0e6ef;
  background-color: #ffffff;
}

body[data-theme="google"] .guide-button.active,
body[data-theme="google"] .knowledge-doc-button.active {
  border-color: #c2e7ff;
  background-color: #e8f0fe;
  color: #174ea6;
  box-shadow: inset 4px 0 0 #1a73e8;
}

body[data-theme="google"] .guide-reader-header,
body[data-theme="google"] .knowledge-reader-header {
  border-bottom-color: #e5eaf2;
  background-color: rgba(255, 255, 255, 0.98);
}

body[data-theme="google"] .guide-mission,
body[data-theme="google"] .guide-block-deliverable,
body[data-theme="google"] .markdown-rendered blockquote {
  border-left-color: #1a73e8;
  background-color: #f8fafd;
}

body[data-theme="google"] .guide-block-risk,
body[data-theme="google"] .pill.bad {
  border-color: #fad2cf;
  background-color: #fce8e6;
  color: #b3261e;
}

body[data-theme="google"] .guide-block-template,
body[data-theme="google"] .pill.warn {
  border-color: #fde293;
  background-color: #fff7df;
  color: #b06000;
}

body[data-theme="google"] .pill,
body[data-theme="google"] .code-chip,
body[data-theme="google"] .source-chip,
body[data-theme="google"] .guide-source-list span,
body[data-theme="google"] .org-tags span {
  border-color: #d3dce9;
  background-color: #ffffff;
  color: #3c4043;
}

body[data-theme="google"] .project-scale strong,
body[data-theme="google"] .phase-event,
body[data-theme="google"] .pill.gold,
body[data-theme="google"] .task-phase-add,
body[data-theme="google"] .permission-approval-password,
body[data-theme="google"] .permission-sync-notice,
body[data-theme="google"] .permission-save-button.is-saved,
body[data-theme="google"] .permission-save-notice.success,
body[data-theme="google"] .permission-sync-notice.success {
  border-color: #c2e7ff;
  background-color: #e8f0fe;
  color: #174ea6;
}

body[data-theme="google"] .login-screen {
  background-color: #f8fbff;
}

body[data-theme="google"] .login-card {
  border-color: #e0e6ef;
  background-color: #ffffff;
  box-shadow: var(--shadow-strong);
}

body[data-theme="google"] .login-brand .brand-title {
  color: #202124;
}

body[data-theme="google"] .login-brand .brand-subtitle {
  color: #5f6368;
}

/* Google theme button typography audit: smaller, lighter, less bulky. */
body[data-theme="google"] .button,
body[data-theme="google"] .icon-button,
body[data-theme="google"] .tiny-button,
body[data-theme="google"] .presence-pill,
body[data-theme="google"] .project-state-pill,
body[data-theme="google"] .account-pill,
body[data-theme="google"] .task-phase-add,
body[data-theme="google"] .table-filter-control,
body[data-theme="google"] .guide-button,
body[data-theme="google"] .knowledge-doc-button,
body[data-theme="google"] .permission-module-item,
body[data-theme="google"] .nav-order-item,
body[data-theme="google"] .permission-save-button,
body[data-theme="google"] .permission-role-actions .button {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

body[data-theme="google"] .button,
body[data-theme="google"] .presence-pill,
body[data-theme="google"] .project-state-pill,
body[data-theme="google"] .account-pill,
body[data-theme="google"] .topbar .button.secondary {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body[data-theme="google"] .button {
  padding-right: 12px;
  padding-left: 12px;
}

body[data-theme="google"] .presence-pill,
body[data-theme="google"] .project-state-pill {
  gap: 6px;
  padding-right: 11px;
  padding-left: 10px;
}

body[data-theme="google"] .account-pill {
  gap: 7px;
  padding-right: 10px;
  padding-left: 6px;
}

body[data-theme="google"] .account-info strong {
  font-size: 11px;
  font-weight: 650;
}

body[data-theme="google"] .account-info span {
  font-size: 10px;
  font-weight: 500;
}

body[data-theme="google"] .nav-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-theme="google"] .nav-icon {
  font-size: 11px;
  font-weight: 650;
}

body[data-theme="google"] .nav-count {
  min-width: 22px;
  font-size: 11px;
  font-weight: 600;
}

body[data-theme="google"] .sidebar-theme-option,
body[data-theme="google"] .pill,
body[data-theme="google"] .code-chip,
body[data-theme="google"] .source-chip,
body[data-theme="google"] .guide-source-list span,
body[data-theme="google"] .org-tags span {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0;
}

body[data-theme="google"] .tiny-button {
  min-height: 28px;
  padding: 5px 9px;
}

body[data-theme="google"] .task-phase-add {
  min-height: 28px;
  padding: 5px 9px;
}

body[data-theme="google"] .guide-button strong,
body[data-theme="google"] .knowledge-doc-button strong {
  font-size: 12px;
  font-weight: 650;
}

body[data-theme="google"] .guide-button span,
body[data-theme="google"] .knowledge-doc-button span {
  font-size: 10px;
  font-weight: 500;
}

body[data-theme="google"] .icon-button {
  width: 32px;
  min-height: 32px;
  font-size: 17px;
}

/* Shared control scale: keep all themes as light as the approved Google theme. */
.button,
.icon-button,
.tiny-button,
.presence-pill,
.account-pill,
.task-phase-add,
.table-filter-control,
.guide-button,
.knowledge-doc-button,
.permission-module-item,
.nav-order-item,
.permission-save-button,
.permission-role-actions .button {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.button,
.presence-pill,
.account-pill,
.topbar .button.secondary {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.button {
  padding-right: 12px;
  padding-left: 12px;
}

.presence-pill {
  gap: 6px;
  padding-right: 11px;
  padding-left: 10px;
}

.account-pill {
  gap: 7px;
  padding-right: 10px;
  padding-left: 6px;
}

.account-info strong {
  font-size: 11px;
  font-weight: 650;
}

.account-info span {
  font-size: 10px;
  font-weight: 500;
}

.nav-button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-icon {
  font-size: 11px;
  font-weight: 650;
}

.nav-count {
  min-width: 22px;
  font-size: 11px;
  font-weight: 600;
}

.sidebar-theme-option,
.pill,
.code-chip,
.source-chip,
.guide-source-list span,
.org-tags span {
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0;
}

.tiny-button,
.task-phase-add {
  min-height: 28px;
  padding: 5px 9px;
}

.guide-button strong,
.knowledge-doc-button strong {
  font-size: 12px;
  font-weight: 650;
}

.guide-button span,
.knowledge-doc-button span {
  font-size: 10px;
  font-weight: 500;
}

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

/* Midnight palette: same Google layout, IMG_1744 colors only. */
body[data-palette="midnight"] {
  --bg: #0b0c0f;
  --surface: #23262c;
  --surface-soft: #2b2e35;
  --surface-muted: #3a3f47;
  --ink: #ffffff;
  --muted: #aeb5bf;
  --muted-strong: #d1d5db;
  --line: #3a3f47;
  --line-strong: #555c68;
  --teal: #b1fa63;
  --teal-soft: #26351f;
  --accent: #fe7733;
  --accent-soft: #3b2116;
  --primary-rgb: 177, 250, 99;
  --primary-top: #b1fa63;
  --primary-fg: #101216;
  --primary-shadow: rgba(177, 250, 99, 0.18);
  --gold: #b1fa63;
  --gold-deep: #8ed94d;
  --gold-light: #d8ffad;
  --gold-soft: #26351f;
  --burgundy: #fe7733;
  --burgundy-deep: #c95422;
  --red: #fe7733;
  --red-soft: #3b2116;
  --amber: #fe7733;
  --amber-soft: #3b2116;
  --green: #b1fa63;
  --green-soft: #26351f;
  --blue: #d1d5db;
  --blue-soft: #2b2e35;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.36), 0 16px 42px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 24px 68px rgba(0, 0, 0, 0.46);
  background-color: var(--bg);
  color: var(--ink);
}

body[data-palette="midnight"],
body[data-palette="midnight"] .app-shell,
body[data-palette="midnight"] .main,
body[data-palette="midnight"] .login-screen {
  background-color: #0b0c0f;
  color: #ffffff;
}

body[data-palette="midnight"] .sidebar {
  border-right-color: #2f343b;
  background-color: #15171c;
  color: #d1d5db;
}

body[data-palette="midnight"] .brand-block,
body[data-palette="midnight"] .sidebar-footer,
body[data-palette="midnight"] .topbar,
body[data-palette="midnight"] .section-header,
body[data-palette="midnight"] .guide-reader-header,
body[data-palette="midnight"] .knowledge-reader-header {
  border-color: #3a3f47;
}

body[data-palette="midnight"] .brand-mark,
body[data-palette="midnight"] .login-brand .brand-mark {
  border-color: #b1fa63;
  background-color: #b1fa63;
  box-shadow: none;
}

body[data-palette="midnight"] .brand-title,
body[data-palette="midnight"] .login-brand .brand-title,
body[data-palette="midnight"] .topbar h1,
body[data-palette="midnight"] .section-title,
body[data-palette="midnight"] h1,
body[data-palette="midnight"] h2,
body[data-palette="midnight"] h3,
body[data-palette="midnight"] h4 {
  color: #ffffff;
}

body[data-palette="midnight"] .brand-subtitle,
body[data-palette="midnight"] .login-brand .brand-subtitle,
body[data-palette="midnight"] .sidebar-footer,
body[data-palette="midnight"] .section-desc,
body[data-palette="midnight"] .muted,
body[data-palette="midnight"] p {
  color: #aeb5bf;
}

body[data-palette="midnight"] .eyebrow,
body[data-palette="midnight"] .section-kicker,
body[data-palette="midnight"] .task-head-cell.is-active .task-head-label,
body[data-palette="midnight"] .task-filter-option.is-selected,
body[data-palette="midnight"] .metric-collapse-icon,
body[data-palette="midnight"] .guide-list-block li::marker,
body[data-palette="midnight"] .presence-viewer-row em,
body[data-palette="midnight"] .ai-enterprise-card h4,
body[data-palette="midnight"] .ai-enterprise-rail-card strong,
body[data-palette="midnight"] .permission-role-card-head strong {
  color: #b1fa63;
}

body[data-palette="midnight"] .nav-button {
  color: #d1d5db;
}

body[data-palette="midnight"] .nav-button:hover {
  background-color: #2b2e35;
  color: #ffffff;
}

body[data-palette="midnight"] .nav-button.active {
  background-color: #26351f;
  color: #b1fa63;
}

body[data-palette="midnight"] .nav-icon,
body[data-palette="midnight"] .nav-count {
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .nav-button:hover .nav-icon,
body[data-palette="midnight"] .nav-button.active .nav-icon,
body[data-palette="midnight"] .nav-button.active .nav-count {
  background-color: rgba(177, 250, 99, 0.13);
  color: #b1fa63;
}

body[data-palette="midnight"] .sidebar-theme,
body[data-palette="midnight"] .sidebar-theme-option {
  color: #aeb5bf;
}

body[data-palette="midnight"] .sidebar-theme-option:hover,
body[data-palette="midnight"] .sidebar-theme-option.active {
  color: #b1fa63;
}

body[data-palette="midnight"] .sidebar-theme-option.active {
  border-bottom-color: #b1fa63;
}

body[data-palette="midnight"] .section,
body[data-palette="midnight"] .kpi-card,
body[data-palette="midnight"] .phase-card,
body[data-palette="midnight"] .summary-strip > div,
body[data-palette="midnight"] .detail-meta,
body[data-palette="midnight"] .detail-section,
body[data-palette="midnight"] .quick-card,
body[data-palette="midnight"] .org-principle,
body[data-palette="midnight"] .org-node,
body[data-palette="midnight"] .org-group,
body[data-palette="midnight"] .mechanism-item,
body[data-palette="midnight"] .metrics-group,
body[data-palette="midnight"] .ai-training-hero,
body[data-palette="midnight"] .ai-enterprise-nav,
body[data-palette="midnight"] .ai-enterprise-detail,
body[data-palette="midnight"] .ai-playbook-nav,
body[data-palette="midnight"] .ai-playbook-detail,
body[data-palette="midnight"] .ai-task-panel,
body[data-palette="midnight"] .permission-create,
body[data-palette="midnight"] .permission-nav-order,
body[data-palette="midnight"] .permission-approval,
body[data-palette="midnight"] .permission-role-manager,
body[data-palette="midnight"] .permission-theme-manager,
body[data-palette="midnight"] .permission-online-panel,
body[data-palette="midnight"] .permission-console,
body[data-palette="midnight"] .permission-card,
body[data-palette="midnight"] .project-scale,
body[data-palette="midnight"] .guide-sidebar,
body[data-palette="midnight"] .knowledge-sidebar,
body[data-palette="midnight"] .permission-account-list,
body[data-palette="midnight"] .permission-role-card,
body[data-palette="midnight"] .permission-online-list,
body[data-palette="midnight"] .permission-modules,
body[data-palette="midnight"] .guide-reader,
body[data-palette="midnight"] .guide-landing-markdown,
body[data-palette="midnight"] .knowledge-reader,
body[data-palette="midnight"] .ai-enterprise-block,
body[data-palette="midnight"] .ai-detail-block,
body[data-palette="midnight"] .metric-card,
body[data-palette="midnight"] .metric-detail-card,
body[data-palette="midnight"] .approval-card,
body[data-palette="midnight"] .risk-card,
body[data-palette="midnight"] .budget-card,
body[data-palette="midnight"] .product-card,
body[data-palette="midnight"] .meeting-card,
body[data-palette="midnight"] .login-card {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .section-header,
body[data-palette="midnight"] .section-body,
body[data-palette="midnight"] .guide-reader-header,
body[data-palette="midnight"] .knowledge-reader-header {
  background-color: #23262c;
}

body[data-palette="midnight"] .section-header {
  box-shadow: inset 4px 0 0 #b1fa63;
}

body[data-palette="midnight"] .topbar,
body[data-palette="midnight"] .presence-pill,
body[data-palette="midnight"] .account-pill,
body[data-palette="midnight"] .topbar .button.secondary {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .presence-dot {
  background-color: #b1fa63;
}

body[data-palette="midnight"] .account-avatar,
body[data-palette="midnight"] .permission-account-avatar,
body[data-palette="midnight"] .account-summary-avatar {
  background-color: #26351f;
  color: #b1fa63;
}

body[data-palette="midnight"] .button,
body[data-palette="midnight"] .icon-button {
  border-color: #b1fa63;
  background-color: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .button:hover,
body[data-palette="midnight"] .icon-button:hover {
  border-color: #d8ffad;
  background-color: #d8ffad;
}

body[data-palette="midnight"] .button.secondary,
body[data-palette="midnight"] .tiny-button,
body[data-palette="midnight"] .button.ghost {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .button.secondary:hover,
body[data-palette="midnight"] .tiny-button:hover,
body[data-palette="midnight"] .button.ghost:hover,
body[data-palette="midnight"] tbody tr:hover,
body[data-palette="midnight"] .guide-deliverable-card:hover,
body[data-palette="midnight"] .quick-card:hover,
body[data-palette="midnight"] .ai-enterprise-card:hover {
  border-color: #555c68;
  background-color: #2b2e35;
}

body[data-palette="midnight"] .button.danger,
body[data-palette="midnight"] .tiny-button.danger,
body[data-palette="midnight"] .knowledge-doc-delete {
  border-color: #fe7733;
  background-color: #fe7733;
  color: #101216;
}

body[data-palette="midnight"] .input,
body[data-palette="midnight"] .select,
body[data-palette="midnight"] .textarea,
body[data-palette="midnight"] .table-filter-control {
  border-color: #3a3f47;
  background-color: #15171c;
  color: #ffffff;
}

body[data-palette="midnight"] .input:focus,
body[data-palette="midnight"] .select:focus,
body[data-palette="midnight"] .textarea:focus,
body[data-palette="midnight"] .table-filter-control:focus {
  border-color: #b1fa63;
  box-shadow: 0 0 0 3px rgba(177, 250, 99, 0.14);
}

body[data-palette="midnight"] table,
body[data-palette="midnight"] .table-wrap,
body[data-palette="midnight"] .guide-table-wrap,
body[data-palette="midnight"] .md-table-wrap,
body[data-palette="midnight"] .task-filter-menu,
body[data-palette="midnight"] .metric-floating-tooltip,
body[data-palette="midnight"] .modal {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] th,
body[data-palette="midnight"] .task-header-row th,
body[data-palette="midnight"] .metrics-group-header,
body[data-palette="midnight"] .guide-table th,
body[data-palette="midnight"] .md-table th {
  border-bottom-color: #3a3f47;
  background-color: #2b2e35;
  color: #d1d5db;
}

body[data-palette="midnight"] td {
  border-bottom-color: #3a3f47;
}

body[data-palette="midnight"] .task-group-row td,
body[data-palette="midnight"] .guide-button.active,
body[data-palette="midnight"] .knowledge-doc-button.active,
body[data-palette="midnight"] .permission-account-row:hover,
body[data-palette="midnight"] .permission-account-row.active,
body[data-palette="midnight"] .pill.good {
  border-color: rgba(177, 250, 99, 0.26);
  background-color: #26351f;
  color: #b1fa63;
}

body[data-palette="midnight"] .task-head-label,
body[data-palette="midnight"] .pill,
body[data-palette="midnight"] .code-chip,
body[data-palette="midnight"] .source-chip,
body[data-palette="midnight"] .guide-source-list span,
body[data-palette="midnight"] .org-tags span {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .task-filter-arrow {
  border-top-color: #d1d5db;
}

body[data-palette="midnight"] .task-head-cell.is-active .task-filter-arrow {
  border-top-color: #b1fa63;
}

body[data-palette="midnight"] .guide-mission,
body[data-palette="midnight"] .guide-block-deliverable,
body[data-palette="midnight"] .markdown-rendered blockquote {
  border-left-color: #b1fa63;
  background-color: #2b2e35;
}

body[data-palette="midnight"] .guide-block-risk,
body[data-palette="midnight"] .guide-block-template,
body[data-palette="midnight"] .pill.warn,
body[data-palette="midnight"] .pill.bad,
body[data-palette="midnight"] .permission-save-notice.success,
body[data-palette="midnight"] .permission-sync-notice.success {
  border-color: rgba(254, 119, 51, 0.28);
  background-color: #3b2116;
  color: #fe7733;
}

/* Midnight contrast pass: keep the Google layout, but make chips and status blocks read clearly. */
body[data-palette="midnight"] .code-chip,
body[data-palette="midnight"] .pill.gold,
body[data-palette="midnight"] .task-phase-add,
body[data-palette="midnight"] .permission-approval-password,
body[data-palette="midnight"] .permission-sync-notice,
body[data-palette="midnight"] .permission-save-button.is-saved {
  border-color: #b1fa63;
  background: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .pill.good,
body[data-palette="midnight"] .guide-button.active,
body[data-palette="midnight"] .knowledge-doc-button.active,
body[data-palette="midnight"] .permission-account-row.active,
body[data-palette="midnight"] .permission-account-row:hover {
  border-color: #b1fa63;
  background: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .pill.warn,
body[data-palette="midnight"] .pill.bad,
body[data-palette="midnight"] .button.danger,
body[data-palette="midnight"] .tiny-button.danger,
body[data-palette="midnight"] .knowledge-doc-delete {
  border-color: #fe7733;
  background: #fe7733;
  color: #101216;
}

body[data-palette="midnight"] .pill.info,
body[data-palette="midnight"] .source-chip,
body[data-palette="midnight"] .guide-source-list span,
body[data-palette="midnight"] .org-tags span,
body[data-palette="midnight"] .task-head-label {
  border-color: #555c68;
  background: #15171c;
  color: #ffffff;
}

body[data-palette="midnight"] .task-head-cell.is-active .task-head-label,
body[data-palette="midnight"] .task-filter-option.is-selected {
  border-color: #b1fa63;
  background: #26351f;
  color: #b1fa63;
}

body[data-palette="midnight"] .task-group-row td {
  border-color: #b1fa63;
  background: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .task-group-title strong,
body[data-palette="midnight"] .task-group-title .phase-range,
body[data-palette="midnight"] .task-group-goal {
  color: #101216;
}

body[data-palette="midnight"] .task-group-goal {
  border-left-color: rgba(16, 18, 22, 0.28);
}

body[data-palette="midnight"] .task-group-row .task-phase-add {
  border-color: rgba(16, 18, 22, 0.32);
  background: #101216;
  color: #b1fa63;
}

body[data-palette="midnight"] .kpi-card.good,
body[data-palette="midnight"] .phase-card.good,
body[data-palette="midnight"] .kpi-card.gold,
body[data-palette="midnight"] .phase-card.gold,
body[data-palette="midnight"] .phase-card.event,
body[data-palette="midnight"] .kpi-card.info {
  border-color: rgba(177, 250, 99, 0.34);
  background: #23262c;
  box-shadow: inset 0 3px 0 #b1fa63;
}

body[data-palette="midnight"] .kpi-card.warn,
body[data-palette="midnight"] .phase-card.warn,
body[data-palette="midnight"] .kpi-card.bad,
body[data-palette="midnight"] .risk-card,
body[data-palette="midnight"] .approval-card {
  border-color: rgba(254, 119, 51, 0.38);
  background: #23262c;
  box-shadow: inset 0 3px 0 #fe7733;
}

body[data-palette="midnight"] .kpi-card.good::before,
body[data-palette="midnight"] .phase-card.good::before,
body[data-palette="midnight"] .kpi-card.gold::before,
body[data-palette="midnight"] .phase-card.gold::before,
body[data-palette="midnight"] .phase-card.event::before,
body[data-palette="midnight"] .kpi-card.info::before {
  background: #b1fa63;
}

body[data-palette="midnight"] .kpi-card.warn::before,
body[data-palette="midnight"] .phase-card.warn::before,
body[data-palette="midnight"] .kpi-card.bad::before {
  background: #fe7733;
}

body[data-palette="midnight"] .guide-block-risk,
body[data-palette="midnight"] .guide-block-template,
body[data-palette="midnight"] .guide-mission,
body[data-palette="midnight"] .guide-block-deliverable,
body[data-palette="midnight"] .markdown-rendered blockquote {
  color: #ffffff;
}

body[data-palette="midnight"] .guide-block-risk,
body[data-palette="midnight"] .guide-block-template {
  border-left-color: #fe7733;
  background: #3b2116;
}

body[data-palette="midnight"] .guide-block-risk p,
body[data-palette="midnight"] .guide-block-risk li,
body[data-palette="midnight"] .guide-block-template p,
body[data-palette="midnight"] .guide-block-template li {
  color: #ffd8c5;
}

body[data-palette="midnight"] .guide-mission p,
body[data-palette="midnight"] .guide-mission li,
body[data-palette="midnight"] .guide-block-deliverable p,
body[data-palette="midnight"] .guide-block-deliverable li,
body[data-palette="midnight"] .markdown-rendered blockquote p {
  color: #e9ffd4;
}

/* Midnight hover pass: override inherited Google light hover states across dense modules. */
body[data-palette="midnight"] .presence-pill:hover,
body[data-palette="midnight"] .account-pill:hover,
body[data-palette="midnight"] .topbar .button.secondary:hover,
body[data-palette="midnight"] .button.secondary:hover,
body[data-palette="midnight"] .tiny-button:hover,
body[data-palette="midnight"] .button.ghost:hover,
body[data-palette="midnight"] .input:hover,
body[data-palette="midnight"] .select:hover,
body[data-palette="midnight"] .textarea:hover,
body[data-palette="midnight"] .table-filter-control:hover,
body[data-palette="midnight"] .task-header-row th:hover,
body[data-palette="midnight"] .task-header-row th:focus-within,
body[data-palette="midnight"] .task-filter-option:hover,
body[data-palette="midnight"] .guide-deliverable-card:hover,
body[data-palette="midnight"] .quick-card:hover,
body[data-palette="midnight"] .ai-enterprise-card:hover,
body[data-palette="midnight"] .ai-enterprise-nav-item:hover,
body[data-palette="midnight"] .ai-playbook-nav-item:hover,
body[data-palette="midnight"] .permission-module-item:hover,
body[data-palette="midnight"] .permission-theme-item:hover,
body[data-palette="midnight"] .permission-online-row:hover,
body[data-palette="midnight"] .permission-approval-item:hover,
body[data-palette="midnight"] .permission-account-row:hover:not(.active),
body[data-palette="midnight"] .nav-order-item:hover,
body[data-palette="midnight"] .metric-card:hover,
body[data-palette="midnight"] .metric-detail-card:hover,
body[data-palette="midnight"] .approval-card:hover,
body[data-palette="midnight"] .risk-card:hover,
body[data-palette="midnight"] .budget-card:hover,
body[data-palette="midnight"] .product-card:hover,
body[data-palette="midnight"] .meeting-card:hover,
body[data-palette="midnight"] .knowledge-doc-button:hover:not(.active),
body[data-palette="midnight"] .guide-button:hover:not(.active),
body[data-palette="midnight"] .presence-viewer-row:hover {
  border-color: #555c68;
  background-color: #2b2e35;
  color: #ffffff;
}

body[data-palette="midnight"] tbody tr:hover td {
  background-color: #2b2e35;
  color: #ffffff;
}

body[data-palette="midnight"] .task-filter-option.is-selected:hover,
body[data-palette="midnight"] .ai-enterprise-nav-item.active,
body[data-palette="midnight"] .ai-enterprise-nav-item.active:hover,
body[data-palette="midnight"] .ai-playbook-nav-item.active,
body[data-palette="midnight"] .ai-playbook-nav-item.active:hover {
  border-color: #b1fa63;
  background-color: #26351f;
  color: #b1fa63;
}

body[data-palette="midnight"] .guide-button.active,
body[data-palette="midnight"] .guide-button.active:hover,
body[data-palette="midnight"] .knowledge-doc-button.active,
body[data-palette="midnight"] .knowledge-doc-button.active:hover,
body[data-palette="midnight"] .permission-account-row.active,
body[data-palette="midnight"] .permission-account-row.active:hover,
body[data-palette="midnight"] .pill.good,
body[data-palette="midnight"] .pill.good:hover {
  border-color: #b1fa63;
  background: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .task-group-row:hover td,
body[data-palette="midnight"] .task-group-row:hover .task-group-title strong,
body[data-palette="midnight"] .task-group-row:hover .task-group-title .phase-range,
body[data-palette="midnight"] .task-group-row:hover .task-group-goal {
  background: #b1fa63;
  color: #101216;
}

body[data-palette="midnight"] .button:hover,
body[data-palette="midnight"] .icon-button:hover {
  color: #101216;
}

body[data-palette="midnight"] .button.danger:hover,
body[data-palette="midnight"] .tiny-button.danger:hover,
body[data-palette="midnight"] .knowledge-doc-delete:hover {
  border-color: #ff9a66;
  background: #ff9a66;
  color: #101216;
}

body[data-palette="midnight"] .task-filter-menu,
body[data-palette="midnight"] .presence-tooltip,
body[data-palette="midnight"] .presence-tooltip::before,
body[data-palette="midnight"] .metric-floating-tooltip {
  border-color: #555c68;
  background-color: #23262c;
  color: #d1d5db;
}

body[data-palette="midnight"] .guide-button,
body[data-palette="midnight"] .knowledge-doc-button {
  border-color: #3a3f47;
  background-color: #23262c;
  color: #ffffff;
}

body[data-palette="midnight"] .guide-button span,
body[data-palette="midnight"] .knowledge-doc-button span {
  color: #aeb5bf;
}

body[data-palette="midnight"] .guide-button:hover:not(.active),
body[data-palette="midnight"] .knowledge-doc-button:hover:not(.active) {
  border-color: #555c68;
  background-color: #2b2e35;
  color: #ffffff;
}

body[data-palette="midnight"] .guide-button.active span,
body[data-palette="midnight"] .knowledge-doc-button.active span {
  color: #101216;
}

@media (max-width: 1120px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .view-title-row {
    flex-wrap: nowrap;
  }


  .kpi-grid,
  .dashboard-grid,
  .split-grid,
  .quick-grid,
  .project-scale,
  .summary-strip,
  .org-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-training-hero {
    grid-template-columns: 1fr;
  }

  .ai-training-metrics {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .ai-enterprise-layout {
    grid-template-columns: 1fr;
  }

  .ai-enterprise-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ai-playbook-layout {
    grid-template-columns: 1fr;
  }

  .ai-playbook-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .org-middle,
  .org-row,
  .org-principle {
    flex-direction: column;
    align-items: stretch;
  }

  .knowledge-layout {
    grid-template-columns: 1fr;
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .guide-list {
    max-height: 280px;
  }

  .guide-reader-header {
    position: static;
    flex-direction: column;
  }

  .guide-source-list {
    justify-content: flex-start;
    max-width: none;
  }

  .guide-two-column {
    grid-template-columns: 1fr;
  }

  .guide-deliverable-list {
    grid-template-columns: 1fr;
  }

  .permission-create,
  .permission-nav-order,
  .permission-create-fields,
  .permission-role-create,
  .permission-role-grid,
  .permission-theme-item,
  .permission-console-layout,
  .permission-console-controls,
  .permission-fields,
  .permission-module-grid {
    grid-template-columns: 1fr;
  }

  .permission-card-header,
  .account-binding-panel,
  .permission-role-header,
  .permission-nav-order-summary,
  .permission-online-header,
  .permission-role-card-head,
  .permission-approval-header,
  .permission-console-header,
  .permission-approval-item,
  .permission-online-row {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .permission-card-actions,
  .permission-role-actions,
  .permission-approval-actions {
    justify-content: stretch;
  }

  .permission-online-duration {
    text-align: left;
  }

  .knowledge-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .knowledge-source-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-source-link {
    text-align: center;
  }

  .knowledge-attachment-actions {
    display: grid;
    width: 100%;
  }

  .knowledge-page-gallery {
    padding: 0 14px 30px;
  }

  .knowledge-page-gallery > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .knowledge-list {
    max-height: 280px;
  }

  .knowledge-doc-delete {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 720px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .anniversary-countdown {
    min-height: 72px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 13px;
  }

  .anniversary-countdown-label {
    align-self: end;
  }

  .anniversary-countdown-value {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .anniversary-countdown-value strong {
    font-size: 28px;
  }

  .anniversary-countdown small {
    align-self: start;
  }

  .sidebar-footer {
    display: none;
  }

  .main {
    padding: 18px 14px 28px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
  }

  .presence-pill {
    flex: 1 1 100%;
    justify-content: center;
  }

  .account-pill {
    flex: 1 1 100%;
    justify-content: center;
  }

  .button {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .auth-actions {
    grid-template-columns: 1fr;
  }

  .nav-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
  }

  .section-actions {
    width: 100%;
    justify-content: stretch;
  }

  .filters .input,
  .filters .select {
    width: 100%;
  }

  .record-form {
    grid-template-columns: 1fr;
  }

  .org-person-grid { grid-template-columns: 1fr; }
  .member-split-layout { grid-template-columns: 1fr; }
  .member-department-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .member-list-panel { padding: 14px; }
  .department-plan-detail-head { flex-direction: column; }
  .department-plan-layout { grid-template-columns: 1fr; }
  .department-plan-layout.is-sidebar-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
  .department-plan-nav { border-right: 0; border-bottom: 1px solid var(--line); }

  .detail-meta-grid {
    grid-template-columns: 1fr;
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }

  .ai-training-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-enterprise-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
  }

  .ai-enterprise-nav-item {
    min-width: 0;
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: 50px;
  }

  .ai-enterprise-nav-item span {
    display: none;
  }

  .ai-enterprise-detail {
    min-height: 0;
    padding: 16px;
  }

  .ai-enterprise-detail header h4 {
    font-size: 20px;
  }

  .ai-enterprise-detail-grid {
    grid-template-columns: 1fr;
  }

  .ai-enterprise-block {
    min-height: 0;
    padding: 14px;
  }

  .ai-training-hero {
    padding: 14px;
  }

  .ai-training-metric {
    min-height: 64px;
    padding: 11px;
  }

  .ai-training-metric strong {
    font-size: 21px;
  }

  .ai-training-metric small {
    display: none;
  }

  .ai-playbook-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
  }

  .ai-playbook-nav-item {
    min-width: 128px;
    padding: 9px 10px;
  }

  .ai-playbook-nav-item span {
    display: none;
  }

  .ai-playbook-detail {
    min-height: 0;
    padding: 16px;
  }

  .ai-playbook-detail header h4 {
    font-size: 18px;
  }

  .ai-detail-block ol {
    line-height: 1.65;
  }

  .ai-subsection-head {
    flex-direction: column;
  }
}

/* Keep the local knowledge-navigation prototype above legacy responsive rules. */
body[data-theme] .knowledge-section {
  overflow: visible;
}

@media (max-width: 1120px) {
  .knowledge-sidebar {
    border: 1px solid var(--line);
    background: var(--surface);
  }

  .knowledge-sidebar .knowledge-list {
    max-height: none;
  }
}

/* Task tables keep their original adaptive layout; only actions use 2 × 2. */
.task-table-wrap {
  overflow: visible;
}

.task-table {
  min-width: 100%;
}

.task-table .task-action-head,
.task-table tbody tr:not(.task-group-row) > td:last-child {
  width: 132px;
  min-width: 132px !important;
}

.task-table .table-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 42px) !important;
  align-items: center;
  justify-content: start;
  gap: 6px !important;
}

.task-table .table-actions .tiny-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  padding-right: 0;
  padding-left: 0;
}

.tasks-task-table .table-actions .tiny-button {
  min-height: 28px;
  padding: 4px 0;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.tasks-task-table .task-operation-actions {
  display: flex !important;
  align-items: center;
  width: 100%;
  gap: 4px !important;
}

.tasks-task-table .task-operation-actions > .tiny-button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.task-action-more {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.task-action-more > summary {
  display: grid;
  min-height: 28px;
  padding: 4px 2px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
  list-style: none;
  white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.task-action-more > summary::-webkit-details-marker {
  display: none;
}

.task-action-more > summary::after {
  margin-left: 2px;
  color: var(--muted);
  content: "⌄";
}

.task-action-more[open] > summary {
  border-color: rgba(var(--primary-rgb), .35);
  color: var(--primary-top);
  background: rgba(var(--primary-rgb), .06);
}

.tasks-task-table .task-operation-actions > .tiny-button,
.task-action-more > summary {
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.tasks-task-table .task-operation-actions > .tiny-button:hover,
.task-action-more > summary:hover {
  border-color: rgba(var(--primary-rgb), .36);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), .13);
  transform: translateY(-1px);
}

.task-action-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 80;
  display: grid;
  width: 78px;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}

.task-action-more.opens-upward .task-action-popover {
  top: auto;
  bottom: calc(100% + 5px);
  transform-origin: right bottom;
}

.tasks-task-table .task-action-popover .tiny-button {
  width: 100%;
  min-width: 0;
}

.task-action-more[open] .task-action-popover {
  animation: compact-action-menu-enter .14s ease-out;
}

body .tiny-button.report-button {
  border-color: var(--primary-top) !important;
  background: var(--primary-top) !important;
  color: #fff !important;
}

.department-plan-table .table-actions {
  display: grid;
  grid-template-columns: repeat(2, 31px);
  gap: 3px;
}

.department-plan-table .table-actions .tiny-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  min-width: 31px;
  min-height: 26px;
  padding: 4px 0;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
}

.department-plan-table td:last-child {
  position: relative;
  overflow: visible;
}

.department-plan-table .department-plan-operation-actions {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 4px;
}

.department-plan-table .department-plan-operation-actions > .tiny-button,
.department-plan-table .department-plan-operation-actions > .department-plan-action-more {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

.department-plan-table .department-plan-action-more > summary {
  min-height: 26px;
  padding: 4px 1px;
  font-size: 9px;
}

.department-plan-table .department-plan-action-popover {
  width: 78px;
}

.department-plan-table .department-plan-action-popover .tiny-button {
  width: 100%;
  min-width: 0;
}

/* Compact plan workspace: essential information fits without horizontal scrolling. */
.task-compact-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(105px, 1fr)) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.task-compact-filters .input,
.task-compact-filters .select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  font-size: 12px;
}

.task-filter-result {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.compact-task-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.compact-task-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.compact-task-table th,
.compact-task-table td {
  padding: 7px 7px;
}

.compact-task-table .task-group-head {
  gap: 10px;
  min-height: 34px;
  padding: 4px 10px;
}

.compact-task-table .task-group-row > td {
  padding: 0;
}

.compact-task-table .task-group-title {
  gap: 6px;
}

.compact-task-table .task-group-title strong {
  font-size: 12px;
}

.compact-task-table .task-group-title .phase-range,
.compact-task-table .task-group-goal {
  font-size: 11px;
}

.compact-task-table .task-phase-meta {
  gap: 4px;
  min-width: 0;
}

.compact-task-table .task-phase-meta .pill {
  min-height: 19px;
  padding: 1px 6px;
  font-size: 10px;
}

body[data-theme] .compact-task-table .task-phase-add {
  min-height: 22px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  line-height: 1.1;
}

.compact-task-table .task-select-head,
.compact-task-table .task-select-cell {
  width: 34px;
  min-width: 34px;
  padding-right: 4px;
  padding-left: 4px;
}

.compact-task-table .task-col-id { width: 116px; }
.compact-task-table .task-col-id .code-chip {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.compact-task-table .task-col-name { width: 290px; }
.compact-task-table .task-col-module { width: 110px; }
.compact-task-table .task-col-people { width: 190px; }
.tasks-task-table .task-col-people { width: 150px; }
.compact-task-table .task-col-due { width: 120px; }
.compact-task-table .task-col-execution { width: 180px; }
.compact-task-table .task-action-head,
.compact-task-table .task-col-actions {
  position: static !important;
  width: 100px;
  min-width: 100px !important;
  box-shadow: none !important;
}

.task-name-button {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 760;
  line-height: 1.4;
  text-align: left;
}

.task-name-button:hover,
.task-name-button:focus-visible {
  color: var(--primary-top);
}

.tasks-task-table .task-name-button {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tasks-task-table .task-name-heading {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.tasks-task-table .task-name-heading .task-name-button { flex: 0 1 auto; }
.tasks-task-table .task-name-heading .key-milestone-badge { flex: 0 0 auto; margin-left: 0; }

.compact-task-table .task-col-name .cell-sub {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 2px;
  line-height: 1.35;
}

.task-people-cell {
  display: grid;
  gap: 3px;
}

.task-people-cell > div {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.task-meta-label {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.task-people-cell .collaborator-cell {
  min-width: 0;
  max-width: 138px;
  overflow: hidden;
}

.task-execution-cell {
  display: grid;
  gap: 5px;
}

.task-execution-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.task-execution-pills .pill {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 10px;
}

.task-execution-cell .progress {
  height: 6px;
}

.task-execution-cell .cell-sub {
  margin-top: 2px;
  font-size: 10px;
}

.compact-task-table .table-actions {
  grid-template-columns: repeat(2, 42px) !important;
  justify-content: end;
  gap: 5px !important;
}

@media (max-width: 1280px) {
  .section-body {
    padding: 14px;
  }

  .section .summary-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .section .summary-strip > div {
    min-height: 56px;
    padding: 8px 9px;
  }

  .section .summary-strip .summary-label {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .section .summary-strip strong {
    font-size: 18px;
  }

  .task-compact-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-compact-filters .input {
    grid-column: span 2;
  }

  .task-batch-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 9px 10px;
  }

  .task-batch-summary span {
    display: none;
  }

  .task-batch-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .compact-task-table-wrap {
    border: 0;
    background: transparent;
  }

  .compact-task-table,
  .compact-task-table tbody {
    display: block;
    width: 100%;
  }

  .compact-task-table thead {
    display: none;
  }

  .compact-task-table tbody {
    display: grid;
    gap: 8px;
  }

  .compact-task-table tbody tr:not(.task-group-row):not(.task-empty-row) {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 96px;
    grid-template-areas:
      "select id actions"
      "select name actions"
      "select module due"
      "select people people"
      "select execution execution";
    gap: 7px 10px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }

  .compact-task-table tbody tr.no-task-selection {
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas:
      "id actions"
      "name actions"
      "module due"
      "people people"
      "execution execution";
  }

  .compact-task-table tbody tr.is-selected {
    border-color: rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.06);
  }

  .compact-task-table tbody tr:not(.task-group-row):not(.task-empty-row) > td {
    display: block;
    width: auto;
    min-width: 0 !important;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .compact-task-table .task-select-cell { grid-area: select; }
  .compact-task-table .task-col-id { grid-area: id; }
  .compact-task-table .task-col-name { grid-area: name; }
  .compact-task-table .task-col-module { grid-area: module; }
  .compact-task-table .task-col-people { grid-area: people; }
  .compact-task-table .task-col-due { grid-area: due; justify-self: end; }
  .compact-task-table .task-col-execution { grid-area: execution; }
  .compact-task-table .task-col-actions { grid-area: actions; justify-self: end; }

  .compact-task-table .task-select-cell {
    padding-top: 2px !important;
    text-align: left;
  }

  .compact-task-table .task-name-button {
    font-size: 15px;
  }

  .compact-task-table .task-col-name .cell-sub {
    -webkit-line-clamp: 2;
  }

  .task-people-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }

  .task-people-cell .collaborator-cell {
    max-width: calc(100% - 38px);
  }

  .task-execution-cell {
    grid-template-columns: minmax(0, auto) minmax(120px, 1fr);
    align-items: center;
    padding-top: 7px;
    border-top: 1px solid var(--line);
  }

  .compact-task-table .task-group-row,
  .compact-task-table .task-empty-row {
    display: block;
  }

  .compact-task-table .task-group-row td,
  .compact-task-table .task-empty-row td {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .compact-task-table .task-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 9px;
  }

  .compact-task-table .task-group-title {
    flex-wrap: wrap;
    white-space: normal;
  }

  .compact-task-table .task-group-goal {
    display: none;
  }

  .compact-task-table .task-phase-meta {
    min-width: 0;
  }
}

/* Return analysis: customer recovery, root-cause analysis and rectification loop. */
.return-section-header {
  align-items: center;
}

.return-section-header .section-title {
  margin-top: 4px;
}

.return-methodology-link {
  white-space: nowrap;
}

.return-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.return-section {
  min-width: 0;
  max-width: 100%;
}

.return-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 24px;
  align-items: center;
  min-height: 178px;
  padding: 26px 28px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 10%, rgba(var(--primary-rgb), 0.18), transparent 30%),
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), transparent 54%),
    var(--surface);
}

.return-hero::after {
  content: "";
  position: absolute;
  right: 150px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border: 42px solid rgba(var(--primary-rgb), 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.return-hero-copy {
  position: relative;
  z-index: 1;
}

.return-hero-copy > span,
.return-ledger-heading > div > span,
.return-analysis-heading > div > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.return-hero-copy h3 {
  max-width: 720px;
  margin: 8px 0 10px;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.18;
}

.return-hero-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.return-hero-health {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: end;
  padding: 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 16px;
  background: rgba(var(--primary-rgb), 0.08);
  text-align: right;
}

.return-hero-health span,
.return-hero-health small {
  color: var(--muted);
  font-size: 12px;
}

.return-hero-health strong {
  margin: 4px 0;
  color: var(--primary);
  font-size: 48px;
  line-height: 1;
}

.return-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.return-kpi-card {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(30, 32, 28, 0.045);
}

.return-kpi-card > span,
.return-kpi-card > small {
  color: var(--muted);
  font-size: 12px;
}

.return-kpi-card > strong {
  font-size: 25px;
  line-height: 1.12;
}

.return-kpi-card.good {
  border-color: rgba(34, 197, 94, 0.25);
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), transparent 52%), var(--surface);
}

.return-kpi-card.warn {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), transparent 52%), var(--surface);
}

.return-kpi-card.money {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.1), transparent 52%), var(--surface);
}

.return-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 14px;
}

.return-analysis-card,
.return-ledger-panel {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}

.return-analysis-card {
  min-height: 264px;
  padding: 18px;
}

.return-analysis-heading,
.return-ledger-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.return-analysis-heading h3,
.return-ledger-heading h3 {
  margin: 4px 0 0;
  font-size: 17px;
}

.return-analysis-heading > small,
.return-ledger-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.return-reason-bars,
.return-priority-list {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.return-reason-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
}

.return-reason-row > div:first-child {
  display: grid;
  gap: 2px;
}

.return-reason-row strong {
  font-size: 13px;
}

.return-reason-row span {
  color: var(--muted);
  font-size: 11px;
}

.return-bar-track {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.08);
}

.return-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--teal));
}

.return-priority-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.return-priority-list button:last-child {
  border-bottom: 0;
}

.return-priority-list button:hover strong {
  color: var(--primary);
}

.return-priority-list button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.return-priority-list strong,
.return-priority-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.return-priority-list small,
.return-priority-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.return-priority-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.return-priority-icon.warn {
  background: rgba(245, 158, 11, 0.14);
  color: #a16207;
}

.return-priority-icon.bad {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.return-ledger-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.return-ledger-heading {
  padding: 17px 18px 12px;
}

.return-ledger-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.return-ledger-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.return-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  margin: 0;
  padding: 0 18px 10px;
  scrollbar-width: thin;
}

.return-toolbar .filters {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: max-content;
}

.return-toolbar .filters .input {
  flex: 0 0 250px;
  width: 250px;
}

.return-toolbar .filters .select {
  flex: 0 0 104px;
  width: 104px;
}

.return-toolbar .filters .input,
.return-toolbar .filters .select {
  height: 30px;
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-color: rgba(95, 99, 104, 0.2);
  border-radius: 7px;
  background: rgba(95, 99, 104, 0.035);
  font-size: 11px;
  box-shadow: none;
}

.return-table-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  user-select: none;
  border-width: 1px 0 0;
  border-radius: 0;
  contain: inline-size layout paint;
}

.return-table {
  width: 2260px;
  min-width: 2260px;
  table-layout: fixed;
  transform: translate3d(0, 0, 0);
  transform-origin: left top;
  will-change: transform;
}

.return-col-user { width: 190px; }
.return-col-order { width: 200px; }
.return-col-product { width: 280px; }
.return-col-month { width: 110px; }
.return-col-channel { width: 130px; }
.return-col-risk { width: 100px; }
.return-col-status { width: 125px; }
.return-col-return { width: 155px; }
.return-col-reason { width: 300px; }
.return-col-owner { width: 230px; }
.return-col-relationship { width: 230px; }
.return-col-actions { width: 180px; }

.return-table th,
.return-table td {
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 14px;
  vertical-align: top;
}

.return-order-cell,
.return-month-cell,
.return-channel-cell,
.return-risk-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.return-order-cell strong,
.return-month-cell strong,
.return-channel-cell strong {
  font-size: 12px;
  white-space: nowrap;
}

.return-order-cell span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.return-product-cell > strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.return-table th {
  background: var(--surface-soft);
  white-space: nowrap;
}

.return-table tr.is-overdue td:first-child {
  box-shadow: inset 3px 0 0 #ef4444;
}

.return-table tbody tr[data-return-row-detail] {
  cursor: pointer;
}

.return-table tbody tr[data-return-row-detail]:hover td,
.return-table tbody tr[data-return-row-detail]:focus-visible td {
  background: rgba(var(--primary-rgb), 0.045);
}

.return-table tbody tr[data-return-row-detail]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.return-customer-cell,
.return-product-cell,
.return-money-cell,
.return-reason-cell,
.return-owner-cell,
.return-relationship-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.return-customer-cell strong,
.return-product-cell strong,
.return-money-cell strong,
.return-reason-cell strong,
.return-owner-cell strong,
.return-relationship-cell strong {
  font-size: 13px;
}

.return-customer-cell span,
.return-product-cell span,
.return-money-cell span,
.return-reason-cell span,
.return-owner-cell span,
.return-relationship-cell span,
.return-customer-cell small,
.return-product-cell small,
.return-money-cell small,
.return-reason-cell small,
.return-owner-cell small,
.return-relationship-cell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.return-customer-cell em {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #a16207;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.return-detail-link {
  max-width: 100%;
  width: fit-content;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.return-detail-link > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.return-detail-link:hover,
.return-detail-link:focus-visible {
  color: var(--primary);
}

.return-money-cell strong {
  color: var(--primary);
  font-size: 15px;
}

.return-reason-cell {
  max-width: 300px;
}

.return-status-cell {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.return-overdue-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.09);
  color: #b91c1c;
  font-size: 11px;
  font-weight: 750;
}

.return-table-actions {
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.modal:has(.return-editor-form) {
  width: min(1160px, 100%);
}

.modal:has(.return-detail-form) {
  width: min(900px, 100%);
}

.return-editor-form,
.return-detail-form {
  grid-template-columns: 1fr;
  gap: 14px;
}

.return-detail-form {
  gap: 20px;
  --return-accent: #2962ff;
  --return-accent-soft: rgba(41, 98, 255, 0.075);
  --return-divider: rgba(95, 99, 104, 0.16);
}

.return-form-section {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.return-form-section > header {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.07), transparent 52%);
}

.return-form-section > header h3 {
  margin: 0;
  font-size: 15px;
}

.return-form-section > header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.return-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 15px;
}

.return-form-grid > .full {
  grid-column: 1 / -1;
}

.return-editor-form input[readonly] {
  background: #f3f5f8;
  color: #596579;
  cursor: default;
}

.return-readonly-field {
  align-content: start;
}

.return-detail-stage {
  display: grid;
  gap: 12px;
}

.return-detail-foundation {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.return-detail-foundation .return-detail-section {
  border: 1px solid var(--return-divider);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

.return-detail-section > header {
  display: block;
  padding: 15px 18px;
  border-bottom: 0;
  background: transparent;
}

.return-detail-section-index {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 3px;
  border-radius: 0;
  background: transparent;
  color: var(--return-accent);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.return-detail-section > header > div {
  min-width: 0;
}

.return-detail-section > header h3 {
  font-size: 15px;
  font-weight: 700;
}

.return-detail-section > header p {
  margin-top: 3px;
  font-size: 12px;
}

.return-detail-section .return-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  padding: 4px 20px 22px;
}

.return-detail-section .return-readonly-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.return-detail-section .return-readonly-field > label {
  color: #5f6368;
  font-size: 12px;
  font-weight: 500;
}

.return-readonly-value {
  min-height: 21px;
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.return-readonly-value.is-multiline {
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(95, 99, 104, 0.055);
  font-weight: 500;
  white-space: pre-wrap;
}

.return-readonly-media {
  min-height: 46px;
}

.return-detail-section .return-readonly-field.is-emphasis {
  background: transparent;
}

.return-detail-section .return-readonly-field.is-emphasis .return-readonly-value {
  color: var(--return-accent);
  font-weight: 750;
}

.return-detail-section .return-readonly-field.is-empty {
  background: transparent;
}

.return-detail-section .return-readonly-field.is-empty .return-readonly-value {
  color: var(--muted);
  font-weight: 500;
}

.return-detail-foundation .return-detail-section .return-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 30px;
  padding: 4px 20px 22px;
}

.return-detail-foundation .return-readonly-value {
  font-size: 14px;
  font-weight: 650;
}

.return-detail-deep {
  gap: 12px;
}

.return-detail-deep .return-detail-section {
  border: 1px solid var(--return-divider);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

.return-detail-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}

.return-detail-disclosure > summary::-webkit-details-marker {
  display: none;
}

.return-detail-disclosure > summary > div {
  flex: 1;
  min-width: 0;
}

.return-detail-hero .code-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: rgba(95, 99, 104, 0.07);
  color: #5f6368;
}

.return-detail-disclosure > summary h3,
.return-detail-disclosure > summary p {
  margin: 0;
}

.return-detail-disclosure > summary h3 {
  font-size: 15px;
  font-weight: 700;
}

.return-detail-disclosure > summary p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.return-detail-section-chevron {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid #5f6368;
  border-bottom: 2px solid #5f6368;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.return-detail-disclosure[open] > summary {
  background: rgba(41, 98, 255, 0.035);
}

.return-detail-disclosure[open] > summary .return-detail-section-chevron {
  transform: rotate(225deg);
}

.return-action-summary {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.06);
}

.return-action-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.return-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--return-divider);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.return-detail-hero > div:first-child {
  display: grid;
  gap: 5px;
}

.return-detail-hero h3,
.return-detail-hero p {
  margin: 0;
}

.return-detail-hero h3 {
  font-size: 18px;
  font-weight: 750;
}

.return-detail-hero p {
  color: var(--muted);
  font-size: 12px;
}

.return-detail-quickfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.return-detail-quickfacts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(95, 99, 104, 0.065);
  color: #787b86;
  font-size: 10px;
}

.return-detail-quickfacts strong {
  color: var(--return-accent);
  font-size: 11px;
  font-weight: 750;
}

.return-detail-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.return-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.return-detail-grid > section,
.return-attachments-card,
.return-history-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.return-detail-form .return-history-card {
  overflow: hidden;
  border-color: var(--return-divider);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.045);
}

.return-detail-grid > section > h3,
.return-attachments-card > h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.return-detail-copy {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.return-detail-copy strong {
  margin-top: 4px;
  font-size: 12px;
}

.return-detail-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.return-voice-card {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 14px;
  background: rgba(var(--primary-rgb), 0.06);
}

.return-voice-card > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.return-voice-card blockquote {
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.65;
}

.return-attachments-card,
.return-history-card {
  margin-top: 14px;
}

.return-history-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.return-detail-form .return-history-card {
  padding: 9px 11px;
  background: var(--surface);
}

.return-history-card > summary::-webkit-details-marker {
  display: none;
}

.return-history-card > summary span {
  display: grid;
  gap: 3px;
}

.return-history-card > summary em {
  color: var(--return-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.return-history-card > summary strong {
  font-size: 15px;
}

.return-history-card > summary small {
  color: var(--muted);
  font-size: 11px;
}

.return-history-card ol {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.return-history-card li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 16px;
}

.return-history-card li::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: var(--line);
}

.return-history-card li:last-child::before {
  display: none;
}

.return-history-card li > i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border: 3px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 50%;
  background: var(--primary);
}

.return-history-card li > div {
  display: grid;
  gap: 3px;
}

.return-history-card li p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.return-history-card li small {
  color: var(--muted);
  font-size: 11px;
}

.return-detail-actions {
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .return-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .return-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 900px) {
  .return-hero,
  .return-analytics-grid,
  .return-detail-grid {
    grid-template-columns: 1fr;
  }

  .return-hero-health {
    justify-items: start;
    text-align: left;
  }

  .return-hero::after {
    display: none;
  }

  .return-detail-section .return-form-grid,
  .return-detail-foundation .return-detail-section .return-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .return-section-header .section-actions,
  .return-detail-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .return-methodology-link {
    justify-content: center;
  }

  .return-hero {
    padding: 20px;
  }

  .return-kpi-grid,
  .return-form-grid {
    grid-template-columns: 1fr;
  }

  .return-detail-section .return-form-grid {
    grid-template-columns: 1fr;
  }

  .return-detail-foundation {
    padding: 0;
  }

  .return-detail-foundation .return-detail-section .return-form-grid {
    padding-left: 20px;
  }

  .return-kpi-card {
    min-height: 96px;
  }

  .return-reason-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .return-detail-badges {
    justify-content: flex-start;
  }

  .return-detail-quickfacts {
    align-items: stretch;
    flex-direction: column;
  }

  .return-history-card > summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Account identity: uploaded avatars and methodology reading acknowledgements */
.account-avatar,
.account-summary-avatar,
.permission-account-avatar,
.knowledge-reader-avatar {
  overflow: hidden;
}

.account-avatar img,
.account-summary-avatar img,
.permission-account-avatar img,
.knowledge-reader-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.account-avatar-editor > div:first-child {
  display: grid;
  gap: 4px;
}

.account-avatar-editor strong,
.account-avatar-editor small {
  display: block;
}

.account-avatar-editor small,
.account-password-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.account-avatar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.account-avatar-upload {
  cursor: pointer;
}

.account-password-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.knowledge-readers {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.knowledge-readers-summary {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  min-width: 56px;
}

.knowledge-readers-summary strong {
  color: var(--ink);
  font-size: 12px;
}

.knowledge-readers-summary span,
.knowledge-readers-empty {
  color: var(--muted);
  font-size: 11px;
}

.knowledge-reader-people {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.knowledge-reader-person {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  max-width: 148px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.knowledge-reader-person > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-reader-avatar {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .account-avatar-editor,
  .account-password-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .account-avatar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .account-avatar-actions .button {
    justify-content: center;
  }

  .knowledge-reader-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-readers {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding: 9px 14px;
  }

  .knowledge-readers-summary {
    display: flex;
    gap: 6px;
  }

  .knowledge-reader-people {
    width: 100%;
  }
}

/* Login attention notifications */
.user-notification-center {
  position: relative;
  z-index: 88;
}

.notification-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.notification-trigger:hover,
.notification-trigger[aria-expanded="true"] {
  border-color: rgba(var(--primary-rgb), 0.34);
  background: rgba(var(--primary-rgb), 0.08);
}

.notification-bell {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--primary);
  font-size: 10px;
}

.notification-count {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: min(430px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 20px 54px rgba(20, 33, 55, 0.22);
  transform-origin: top right;
}

.notification-panel.open {
  animation: notification-panel-in 0.18s ease-out;
}

@keyframes notification-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notification-panel-header,
.notification-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
}

.notification-panel-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.notification-panel-header > div {
  display: grid;
  gap: 2px;
}

.notification-panel-header strong {
  color: var(--ink);
  font-size: 15px;
}

.notification-panel-header span {
  color: var(--muted);
  font-size: 12px;
}

.notification-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.notification-list {
  display: grid;
  max-height: min(520px, calc(100vh - 210px));
  overflow-y: auto;
}

.notification-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 transparent;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item:hover {
  background: var(--surface-soft);
}

.notification-item.danger {
  box-shadow: inset 3px 0 0 #ef4444;
}

.notification-item.warning {
  box-shadow: inset 3px 0 0 #f59e0b;
}

.notification-item.info {
  box-shadow: inset 3px 0 0 var(--primary);
}

.notification-item-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
}

.notification-item.danger .notification-item-mark {
  background: #fff1f2;
  color: #dc2626;
}

.notification-item.warning .notification-item-mark {
  background: #fffbeb;
  color: #d97706;
}

.notification-item-content {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.notification-item-content strong,
.notification-item-content p,
.notification-item-content span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-content strong {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.notification-item-content p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-item-content span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.notification-item > .tiny-button {
  margin-top: 1px;
  white-space: nowrap;
}

.notification-panel-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.notification-panel-footer .button {
  min-height: 30px;
  padding: 5px 10px;
}

.notification-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 34px 20px;
  color: var(--muted);
  text-align: center;
}

.notification-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(38, 151, 89, 0.12);
  color: #25854c;
  font-size: 18px;
  font-weight: 800;
}

.notification-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.notification-empty p {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 720px) {
  .user-notification-center {
    flex: 1 1 auto;
  }

  .notification-trigger {
    width: 100%;
    justify-content: center;
  }

  .notification-panel {
    position: fixed;
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .notification-list {
    max-height: calc(100vh - 220px);
  }

  .notification-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .notification-item > .tiny-button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .section .summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-compact-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-compact-filters .input,
  .task-filter-result {
    grid-column: 1 / -1;
  }

  .task-filter-result {
    justify-content: space-between;
  }

  .task-batch-bar {
    grid-template-columns: 1fr;
  }

  .task-batch-summary,
  .task-batch-actions {
    grid-column: 1;
    justify-content: flex-start;
  }

  .compact-task-table tbody tr:not(.task-group-row):not(.task-empty-row) {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
      "select id"
      "select name"
      "select module"
      "select due"
      "select people"
      "select execution"
      "select actions";
  }

  .compact-task-table tbody tr.no-task-selection {
    grid-template-columns: 1fr;
    grid-template-areas: "id" "name" "module" "due" "people" "execution" "actions";
  }

  .compact-task-table .task-col-due,
  .compact-task-table .task-col-actions {
    justify-self: start;
  }

  .task-people-cell,
  .task-execution-cell {
    grid-template-columns: 1fr;
  }

  .compact-task-table .task-group-head {
    grid-template-columns: 1fr;
  }

  .compact-task-table .task-phase-meta {
    justify-content: flex-start;
  }
}

/* 作业指南 · 关键成果标准模板库 */
.outcome-body {
  display: grid;
  gap: 18px;
}

.outcome-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.outcome-summary-grid article {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.065), transparent 58%), var(--surface);
}

.outcome-summary-grid span,
.outcome-summary-grid small {
  display: block;
  color: var(--muted);
}

.outcome-summary-grid span {
  font-size: 12px;
  font-weight: 720;
}

.outcome-summary-grid strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: 25px;
}

.outcome-summary-grid small {
  font-size: 11px;
  line-height: 1.45;
}

.outcome-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(170px, 0.75fr) minmax(150px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.outcome-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 720;
}

.outcome-category-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.outcome-category-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.outcome-category-button strong {
  font-size: 12px;
  line-height: 1.35;
}

.outcome-category-button span {
  display: grid;
  flex: 0 0 auto;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.outcome-category-button:hover,
.outcome-category-button.active {
  border-color: rgba(var(--primary-rgb), 0.42);
  background: rgba(var(--primary-rgb), 0.085);
}

.outcome-category-button.active {
  box-shadow: inset 3px 0 0 var(--teal);
}

.outcome-groups {
  display: grid;
  gap: 16px;
}

.outcome-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.outcome-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.outcome-group-header h3 {
  margin: 2px 0 4px;
  font-size: 18px;
}

.outcome-group-header span {
  color: var(--muted);
  font-size: 12px;
}

.outcome-group-header > strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
}

.outcome-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.outcome-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.outcome-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 20px rgba(35, 27, 27, 0.06);
}

.outcome-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.outcome-type,
.outcome-file-type {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 760;
}

.outcome-file-types {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.outcome-type {
  background: rgba(var(--primary-rgb), 0.09);
  color: var(--primary);
}

.outcome-file-type {
  border: 1px solid var(--line);
  color: var(--muted);
}

.outcome-file-type.excel {
  border-color: rgba(24, 128, 56, 0.28);
  background: rgba(24, 128, 56, 0.08);
  color: #137333;
}

.outcome-card h4 {
  margin: 11px 0 7px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.outcome-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 58px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.outcome-reference {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.outcome-card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
}

.excel-download {
  border-color: rgba(24, 128, 56, 0.28) !important;
  color: #137333 !important;
}

.excel-download:hover {
  background: rgba(24, 128, 56, 0.08) !important;
}

.outcome-card-actions .button {
  min-height: 32px;
  padding: 6px 9px;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
}

.outcome-template-loading {
  padding: 50px 20px;
  color: var(--muted);
  text-align: center;
}

.outcome-template-toolbar {
  position: sticky;
  top: -18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -18px -20px 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.outcome-template-toolbar > div:first-child {
  min-width: 0;
}

.outcome-template-toolbar strong,
.outcome-template-toolbar span {
  display: block;
}

.outcome-template-toolbar span {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome-template-toolbar > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.outcome-template-toolbar .button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
  text-decoration: none;
}

.outcome-template-markdown {
  padding: 12px 4px 28px;
}

.outcome-template-markdown h1:first-child {
  margin-top: 4px;
}

@media (max-width: 1120px) {
  .outcome-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outcome-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .outcome-summary-grid,
  .outcome-toolbar,
  .outcome-card-grid {
    grid-template-columns: 1fr;
  }

  .outcome-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outcome-group-header,
  .outcome-template-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .outcome-template-toolbar > div:last-child,
  .outcome-card-actions {
    grid-template-columns: 1fr;
  }

  .outcome-template-toolbar > div:last-child {
    display: grid;
  }
}

/* Keep data-safety states visible across every visual theme. */
body .project-state-pill.protected {
  border-color: #e8b84c;
  background: #fff8e5;
  color: #7a5200;
}

body .project-state-pill.conflict {
  border-color: #ef9b92;
  background: #fff0ee;
  color: #b3261e;
}

/* Single-line task command bar with on-demand overview and advanced filters. */
.task-plan-section > .section-body {
  position: relative;
  padding-top: 8px;
}

.task-plan-section > .section-body > .summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-plan-section > .section-body > .summary-strip > div {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  min-height: 54px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.task-plan-section > .section-body > .summary-strip > div:first-child,
.task-plan-section > .section-body > .summary-strip > div:last-child {
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid var(--line);
}

.task-plan-section > .section-body > .summary-strip .summary-label {
  margin: 0 0 4px;
  font-size: 11px;
}

.task-plan-section > .section-body > .summary-strip strong {
  font-size: 19px;
}

.task-command-bar {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  margin: 0 0 8px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.task-command-bar.has-selection {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.04);
}

.task-command-search {
  flex: 1 1 280px;
  width: auto;
  min-width: 180px;
  max-width: 390px;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.task-command-more {
  position: static;
  flex: 0 0 auto;
}

.task-command-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  list-style: none;
  white-space: nowrap;
  cursor: pointer;
}

.task-command-more > summary::-webkit-details-marker {
  display: none;
}

.task-command-more > summary::after {
  color: var(--muted);
  content: "⌄";
  font-size: 11px;
  line-height: 1;
}

.task-command-more[open] > summary {
  border-color: rgba(var(--primary-rgb), 0.32);
  color: var(--primary);
}

.task-command-more[open] > summary::after {
  transform: rotate(180deg);
}

.task-command-more > summary b {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-top);
  color: #fff;
  font-size: 9px;
}

.task-command-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 6px;
  left: 6px;
  z-index: 80;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
}

.task-command-popover .summary-strip {
  margin: 0;
  padding: 2px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.task-command-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 6px;
  margin-top: 0;
}

.task-command-filter-grid .select,
.task-command-filter-grid .tiny-button {
  min-height: 30px;
  font-size: 11px;
}

.task-command-count {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 2px 7px;
  font-size: 10px;
}

.task-command-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.task-command-selection {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-command-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  white-space: nowrap;
}

.task-command-actions .tiny-button {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 10px;
}

@media (max-width: 1280px) {
  .task-command-bar {
    flex-wrap: wrap;
  }

  .task-command-search {
    max-width: none;
  }

  .task-command-selection {
    flex: 1 1 140px;
  }

  .task-command-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .task-command-search {
    flex-basis: 100%;
  }

  .task-command-selection {
    display: none;
  }

  .task-command-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .task-command-filter-grid {
    grid-template-columns: 1fr;
  }

  .task-command-popover .summary-strip > div {
    flex: 1 1 42%;
  }

  .task-plan-section > .section-body > .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Minimal plan-table trial, disabled after restoring the unified-plan-5 baseline. */
@media (min-width: 1281px) and (max-width: 0px) {
  .compact-task-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
  }

  .compact-task-table {
    border-collapse: collapse;
    background: var(--surface);
  }

  .compact-task-table th,
  .compact-task-table td {
    height: auto;
    padding: 6px 7px;
    border-right: 0;
    border-left: 0;
  }

  .compact-task-table thead th {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.02em;
  }

  .compact-task-table tbody tr:not(.task-group-row):not(.task-empty-row) > td {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    vertical-align: middle;
  }

  .compact-task-table tbody tr:not(.task-group-row):not(.task-empty-row):hover > td {
    background: rgba(var(--primary-rgb), 0.025);
  }

  body[data-theme] .compact-task-table .task-group-row > td {
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft) !important;
  }

  .compact-task-table .task-group-head {
    min-height: 30px;
    padding: 3px 8px;
  }

  .compact-task-table .task-group-title {
    gap: 6px;
  }

  .compact-task-table .task-group-title strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 720;
  }

  .compact-task-table .task-group-title .phase-range,
  .compact-task-table .task-group-goal {
    color: var(--muted);
    font-size: 11px;
  }

  .compact-task-table .task-group-goal {
    padding-left: 7px;
    border-left-color: var(--line);
  }

  .compact-task-table .task-phase-meta .pill {
    min-height: 16px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 10px;
  }

  body[data-theme] .compact-task-table .task-phase-add {
    min-height: 19px !important;
    padding: 1px 6px !important;
    border-color: var(--line) !important;
    border-radius: 4px;
    background: var(--surface) !important;
    color: var(--primary) !important;
    font-size: 11px !important;
  }

  .compact-task-table .code-chip {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 650;
  }

  .compact-task-table .task-name-button {
    font-size: 13px;
    font-weight: 680;
    line-height: 1.25;
  }

  .compact-task-table .task-col-name .cell-sub {
    -webkit-line-clamp: 1;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
  }

  .compact-task-table .key-milestone-badge {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    font-size: 10px;
    font-weight: 760;
  }

  .compact-task-table tr.is-key-milestone > td:first-child {
    box-shadow: none !important;
  }

  .compact-task-table .plan-meta-chip,
  .compact-task-table .plan-meta-chip.department,
  .compact-task-table .plan-meta-chip.date {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 620;
  }

  .compact-task-table .plan-meta-chip.date {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .compact-task-table .task-people-cell {
    gap: 1px;
  }

  .compact-task-table .task-people-cell > div {
    gap: 4px;
  }

  .compact-task-table .task-meta-label {
    flex-basis: 28px;
    width: 28px;
    height: 16px;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
  }

  .compact-task-table .collaborator-cell span,
  .compact-task-table .collaborator-cell b {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 620;
  }

  .compact-task-table .task-execution-cell {
    gap: 3px;
  }

  .compact-task-table .task-execution-pills {
    gap: 7px;
    flex-wrap: nowrap;
  }

  .compact-task-table .task-execution-pills .pill {
    min-height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 620;
  }

  .compact-task-table .task-execution-pills .pill::before {
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-radius: 50%;
    background: var(--muted);
    content: "";
  }

  .compact-task-table .task-execution-pills .pill.good::before { background: #86efac; }
  .compact-task-table .task-execution-pills .pill.warn::before { background: #facc15; }
  .compact-task-table .task-execution-pills .pill.bad::before { background: #fb7185; }
  .compact-task-table .task-execution-pills .pill.info::before { background: #67e8f9; }
  .compact-task-table .task-execution-pills .pill.gold::before { background: #fbbf24; }

  .compact-task-table .task-execution-cell .progress {
    height: 3px;
    background: var(--surface-muted);
  }

  .compact-task-table .task-execution-cell .cell-sub {
    margin-top: 0;
    font-size: 10px;
  }

  .compact-task-table .task-col-actions {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .compact-task-table .table-actions {
    grid-template-columns: repeat(2, 38px) !important;
    gap: 3px !important;
  }

  .compact-task-table .table-actions .tiny-button {
    width: 38px;
    min-width: 38px;
    min-height: 20px;
    padding: 1px 0;
    border-radius: 4px;
    font-size: 10px;
  }
}

/* Compact task-plan controls: one efficient toolbar stack without repeated headings. */
.task-plan-section .task-plan-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.task-plan-section .project-plan-tabs {
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 7px;
  background: var(--surface-soft);
}

.task-plan-section .project-plan-tabs button {
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 12px;
}

.task-plan-section .project-plan-tabs button.active {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.task-plan-section .task-plan-topbar .section-actions {
  width: auto;
}

.task-plan-section .task-plan-topbar .button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

.task-plan-section > .section-body {
  padding: 10px 14px 14px;
}

.task-plan-section .summary-strip {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  margin: 0 0 8px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.task-plan-section .summary-strip > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.task-plan-section .summary-strip > div:first-child {
  padding-left: 3px;
}

.task-plan-section .summary-strip > div:last-child {
  border-right: 0;
}

.task-plan-section .summary-label {
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
}

.task-plan-section .summary-strip strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.task-plan-section .task-compact-filters {
  grid-template-columns: minmax(210px, 1.7fr) repeat(5, minmax(96px, 1fr)) auto;
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px;
  border-radius: 8px;
}

.task-plan-section .task-compact-filters .input,
.task-plan-section .task-compact-filters .select {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.task-plan-section .task-filter-result .pill {
  min-height: 24px;
  padding: 2px 7px;
  font-size: 10px;
}

.task-plan-section .task-batch-bar {
  min-height: 34px;
  gap: 8px;
  margin: 0 0 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--surface);
}

.task-plan-section .task-batch-bar.has-selection {
  border-color: rgba(var(--primary-rgb), 0.28);
  background: rgba(var(--primary-rgb), 0.045);
}

.task-plan-section .task-batch-select,
.task-plan-section .task-batch-summary strong {
  font-size: 11px;
}

.task-plan-section .task-batch-summary span {
  display: none;
}

.task-plan-section .task-batch-actions {
  gap: 5px;
}

.task-plan-section .task-batch-actions .tiny-button {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 10px;
}

@media (max-width: 1280px) {
  .task-plan-section .task-plan-topbar {
    align-items: stretch;
  }

  .task-plan-section .summary-strip {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .task-plan-section .task-compact-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-plan-section .task-compact-filters .input {
    grid-column: span 2;
  }

  .task-plan-section .task-batch-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .task-plan-section .task-plan-topbar {
    flex-direction: column;
  }

  .task-plan-section .project-plan-tabs,
  .task-plan-section .project-plan-tabs button {
    width: 100%;
  }

  .task-plan-section .summary-strip > div {
    flex: 1 1 42%;
    padding: 0 8px;
  }

  .task-plan-section .task-compact-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-plan-section .task-compact-filters .input,
  .task-plan-section .task-filter-result {
    grid-column: 1 / -1;
  }
}
/* Product selection workspace */
.product-workspace-header {
  align-items: flex-end;
}

.product-month-picker {
  display: grid;
  gap: 7px;
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-month-picker .input {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.product-entry-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.product-entry-intro > div {
  display: grid;
  gap: 5px;
}

.product-entry-intro h3,
.product-channel-current h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.product-entry-intro p,
.product-channel-current p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.product-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-channel-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 150px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.product-channel-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-top);
  box-shadow: 0 18px 38px var(--primary-shadow);
}

.product-channel-mark {
  display: inline-grid;
  width: 50px;
  height: 50px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--primary-rgb), .34);
  border-radius: 14px;
  color: var(--primary-top);
  font-size: 20px;
  font-weight: 800;
  background: rgba(var(--primary-rgb), .09);
}

.product-channel-copy {
  display: grid;
  gap: 8px;
}

.product-channel-copy strong {
  font-size: 19px;
}

.product-channel-copy small,
.product-channel-count small,
.product-channel-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.product-channel-count {
  display: grid;
  min-width: 66px;
  text-align: right;
}

.product-channel-count b {
  color: var(--primary-top);
  font-size: 30px;
  line-height: 1;
}

.product-channel-meta {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.product-channel-meta b {
  color: var(--primary-top);
  font-size: 18px;
}

.product-channel-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.product-channel-current {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-channel-current > div {
  display: grid;
  gap: 3px;
}

.product-channel-current h3 {
  font-size: 20px;
}

.product-channel-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  padding-bottom: 2px;
  overflow-x: auto;
}

.product-channel-tabs button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  cursor: pointer;
}

.product-channel-tabs button.active {
  border-color: var(--primary-top);
  color: var(--primary-fg);
  font-weight: 800;
  background: var(--primary-top);
}

.product-list-toolbar {
  margin-bottom: 14px;
}

.product-list-toolbar .filters {
  flex: 1;
}

.product-list-toolbar #productQueryInput {
  min-width: min(430px, 100%);
}

.product-selection-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
}

.product-selection-table {
  min-width: 1420px;
}

.product-selection-table th:first-child,
.product-selection-table td:first-child {
  width: 88px;
}

.product-selection-table td {
  vertical-align: top;
}

.product-photo-thumb,
.product-photo-placeholder {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.product-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-photo-placeholder {
  color: var(--muted);
}

.product-photo-placeholder span {
  align-self: end;
  font-size: 18px;
  font-weight: 800;
}

.product-photo-placeholder small {
  align-self: start;
  font-size: 10px;
}

.product-table-stack {
  display: grid;
  min-width: 150px;
  max-width: 260px;
  gap: 5px;
}

.product-table-stack strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.product-table-stack small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.product-value-cell {
  min-width: 210px;
}

.product-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  width: 116px;
  gap: 0 3px;
}

.product-score strong {
  font-size: 21px;
}

.product-score span,
.product-score small,
.product-score-empty {
  color: var(--muted);
  font-size: 10px;
}

.product-score small {
  grid-column: 1 / -1;
}

.product-score.good strong { color: var(--green); }
.product-score.warn strong { color: var(--amber); }
.product-score.bad strong { color: var(--red); }

@media (max-width: 900px) {
  .product-workspace-header,
  .product-entry-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .product-month-picker {
    width: 100%;
  }

  .product-channel-grid {
    grid-template-columns: 1fr;
  }

  .product-channel-detail-head {
    grid-template-columns: 1fr auto;
  }

  .product-channel-detail-head > #productChannelBack {
    grid-column: 1 / -1;
    justify-self: start;
  }

}

@media (max-width: 560px) {
  .product-channel-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .product-channel-count {
    grid-column: 2;
    text-align: left;
  }

  .product-channel-meta {
    grid-column: 1 / -1;
  }

  .product-channel-detail-head {
    grid-template-columns: 1fr;
  }

  .product-channel-current {
    align-items: flex-start;
  }

}

/* Product workspace compact single-screen layout */
.product-workspace-header {
  padding-bottom: 14px;
}

.product-month-picker {
  min-width: 156px;
}

.product-month-picker .select {
  min-height: 36px;
  color: var(--ink);
  font-weight: 700;
}

.product-channel-tabs-top {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

.product-channel-tabs-top button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
}

.product-channel-tabs-top button small {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  background: var(--surface);
}

.product-channel-tabs-top button.active small {
  color: var(--primary-top);
  background: var(--primary-fg);
}

.product-channel-detail-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-bottom: 8px;
}

.product-channel-current h3 {
  font-size: 17px;
}

.product-channel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-methodology-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--primary-rgb), .24);
  border-radius: 6px;
  color: var(--primary-top);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  background: rgba(var(--primary-rgb), .07);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.product-methodology-link:hover {
  border-color: rgba(var(--primary-rgb), .44);
  background: rgba(var(--primary-rgb), .12);
  transform: translateY(-1px);
}

.product-methodology-link:focus-visible {
  outline: 3px solid rgba(var(--primary-rgb), .18);
  outline-offset: 2px;
}

.product-methodology-link span {
  font-size: 13px;
  line-height: 1;
}

.product-channel-current p {
  font-size: 11px;
  line-height: 1.4;
}

.product-list-toolbar {
  min-height: 36px;
  margin-bottom: 8px;
}

.product-list-toolbar .input,
.product-list-toolbar .select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 12px;
}

.product-list-toolbar #productQueryInput {
  min-width: min(320px, 100%);
}

.product-list-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.product-list-actions .tiny-button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.product-batch-bar {
  display: flex;
  align-items: center;
  min-height: 34px;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-batch-bar.is-idle {
  background: transparent;
}

.product-batch-bar.has-selection {
  border-color: rgba(var(--primary-rgb), .25);
  background: rgba(var(--primary-rgb), .055);
}

.product-batch-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.product-batch-select input,
.product-select-cell input {
  accent-color: var(--primary-top);
}

.product-batch-bar > strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-batch-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

.product-batch-actions .tiny-button {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 10px;
  white-space: nowrap;
}

.product-selection-table-wrap {
  overflow-x: hidden;
}

.product-selection-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 11px;
}

.product-selection-table th,
.product-selection-table td {
  padding: 6px 7px;
}

.product-selection-table .product-col-select { width: 34px; }
.product-selection-table .product-col-photo { width: 72px; }
.product-selection-table .product-col-name { width: 14%; }
.product-selection-table .product-col-role { width: 9%; }
.product-selection-table .product-col-targetUser { width: 14%; }
.product-selection-table .product-col-coreSellingPoint { width: 16%; }
.product-selection-table .product-col-priceBand { width: 13%; }
.product-selection-table .product-col-score { width: 7%; }
.product-selection-table .product-col-selectionStatus { width: 8%; }
.product-selection-table .product-col-actions { width: 108px; }

.product-select-cell {
  text-align: center;
}

.product-select-cell input {
  width: 14px;
  height: 14px;
}

.product-selection-table tr.is-selected td {
  background: rgba(var(--primary-rgb), .07);
}

.product-selection-table .table-actions {
  flex-wrap: nowrap;
  gap: 4px;
}

.product-selection-table .tiny-button {
  min-height: 26px;
  padding: 3px 6px;
  font-size: 10px;
  white-space: nowrap;
}

.product-photo-thumb,
.product-photo-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.product-photo-placeholder span {
  align-self: center;
  font-size: 14px;
}

.product-table-stack {
  min-width: 0;
  max-width: none;
  gap: 2px;
}

.product-table-stack strong {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-table-stack small {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-role-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.product-role-cell .pill {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-value-cell {
  min-width: 0;
}

.product-score {
  width: auto;
  gap: 0 2px;
}

.product-score strong {
  font-size: 16px;
}

.product-score small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-decision-cell {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.product-decision-cell .pill {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 6px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-decision-cell small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .product-selection-table-wrap {
    overflow-x: auto;
  }

  .product-selection-table {
    min-width: 980px;
  }
}

/* Product actions, gallery uploader and detail view */
.product-selection-table .product-col-actions {
  width: 108px;
  padding-right: 4px;
  padding-left: 4px;
}

.product-selection-table .table-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
}

.product-selection-table .product-operation-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-selection-table .tiny-button {
  min-width: 0;
  width: auto;
  flex: 1 1 0;
  padding-right: 3px;
  padding-left: 3px;
  font-size: 9px;
}

.product-selection-table .product-operation-actions .tiny-button {
  flex: 1 1 0;
  min-height: 26px;
}

.product-action-more {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.product-action-more > summary {
  display: grid;
  min-height: 26px;
  padding: 3px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  list-style: none;
  white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.product-action-more > summary::-webkit-details-marker {
  display: none;
}

.product-action-more > summary::after {
  margin-left: 2px;
  color: var(--muted);
  content: "⌄";
}

.product-action-more[open] > summary {
  border-color: rgba(var(--primary-rgb), .35);
  color: var(--primary-top);
  background: rgba(var(--primary-rgb), .06);
}

.product-selection-table .product-operation-actions > .tiny-button,
.product-action-more > summary {
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.product-selection-table .product-operation-actions > .tiny-button:hover,
.product-action-more > summary:hover {
  border-color: rgba(var(--primary-rgb), .36);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), .13);
  transform: translateY(-1px);
}

.product-action-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 80;
  display: grid;
  width: 78px;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}

.product-selection-table .product-action-popover .tiny-button {
  width: 100%;
  min-height: 26px;
}

.product-action-more[open] .product-action-popover {
  animation: compact-action-menu-enter .14s ease-out;
}

@keyframes compact-action-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-batch-edit-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.product-batch-edit-summary strong,
.product-batch-delete-warning strong {
  color: var(--ink);
  font-size: 14px;
}

.product-batch-edit-summary span,
.product-batch-edit-summary em,
.product-batch-delete-warning span {
  color: var(--muted-strong);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

.product-batch-edit-summary em {
  color: var(--muted);
}

.product-batch-delete-warning {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(198, 40, 40, .24);
  border-radius: 10px;
  background: rgba(198, 40, 40, .08);
}

.product-batch-delete-warning strong {
  color: var(--red);
}

.product-batch-delete-list {
  max-height: 42vh;
  overflow: auto;
  padding: 6px 4px 6px 0;
}

.product-batch-delete-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-batch-delete-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.product-batch-delete-list li strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-batch-delete-list li em {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.product-batch-delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 650;
}

.product-batch-delete-confirm input {
  accent-color: var(--red);
}

.product-action-empty {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.product-name-link {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}

.product-name-link:hover {
  color: var(--primary-top);
  text-decoration: none;
}

.product-image-field {
  display: grid;
  gap: 10px;
}

.product-image-grid {
  display: grid;
  grid-template-columns: repeat(5, 92px);
  gap: 10px;
}

.product-image-list {
  display: contents;
}

.product-image-item,
.product-image-add {
  position: relative;
  display: grid;
  width: 92px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-soft);
}

.product-image-item a,
.product-image-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.product-image-item img {
  object-fit: cover;
}

.product-image-item > button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  background: rgba(0, 0, 0, .66);
  cursor: pointer;
}

.product-image-cover-badge {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--primary-fg);
  font-size: 9px;
  font-weight: 800;
  background: var(--primary-top);
}

.product-image-add {
  gap: 2px;
  border-style: dashed;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.product-image-add:hover {
  border-color: var(--primary-top);
  color: var(--primary-top);
  background: rgba(var(--primary-rgb), .07);
}

.product-image-add span {
  align-self: end;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.product-image-add small {
  align-self: start;
  font-size: 10px;
}

.product-image-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.product-detail-form {
  gap: 14px;
}

.product-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, .92fr);
  align-items: center;
  gap: 24px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--line);
}

.product-detail-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
}

.product-detail-gallery a,
.product-detail-gallery-empty {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  background: var(--surface-soft);
}

.product-detail-gallery a.is-cover {
  border-color: rgba(var(--primary-rgb), .38);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .08);
}

.product-detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-gallery a span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 5px;
  color: var(--primary-fg);
  font-size: 9px;
  font-weight: 800;
  background: var(--primary-top);
}

.product-detail-gallery-empty {
  grid-column: 1 / -1;
  min-height: 190px;
  aspect-ratio: auto;
}

.product-detail-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.product-detail-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.product-detail-heading {
  display: grid;
  gap: 8px;
}

.product-detail-title h3,
.product-detail-section h3 {
  margin: 0;
  color: var(--ink);
}

.product-detail-title h3 {
  font-size: 25px;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.product-detail-section p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.product-detail-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.product-detail-identity span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  background: var(--surface);
}

.product-detail-selling-point {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-left: 3px solid var(--primary-top);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--primary-rgb), .07);
}

.product-detail-selling-point span {
  color: var(--primary-top);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.product-detail-selling-point strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.65;
}

.product-detail-section {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.product-detail-section h3 {
  font-size: 14px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-detail-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-detail-grid > div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 7px;
  background: var(--surface);
}

.product-detail-grid span,
.product-detail-score-grid span {
  color: var(--muted);
  font-size: 10px;
}

.product-detail-grid strong,
.product-detail-score-grid strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}

.product-detail-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-detail-score-head > strong,
.product-detail-score-result strong {
  color: var(--primary-top);
  font-size: 18px;
}

.product-detail-score-head h3 {
  margin-bottom: 3px;
}

.product-detail-score-head p,
.product-rating-history-head p,
.product-rating-form-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.product-detail-score-result {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 4px;
}

.product-detail-score-result strong {
  font-size: 28px;
}

.product-detail-score-result span {
  color: var(--muted);
  font-size: 12px;
}

.product-detail-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.product-detail-score-grid > div {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 7px;
  background: var(--surface);
}

.modal:has(.product-detail-form),
.modal:has(.product-rating-form) {
  width: min(1120px, 100%);
}

.product-rating-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-rating-add-button {
  min-height: 32px;
  padding: 7px 13px;
  white-space: nowrap;
}

.product-rating-permission-note {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface);
}

.product-rating-history-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.product-rating-history {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 11px;
}

.product-rating-history th,
.product-rating-history td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.product-rating-history th {
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 800;
  background: var(--surface-soft);
}

.product-rating-history tbody tr:last-child td {
  border-bottom: 0;
}

.product-rating-history tr.is-history {
  opacity: .65;
}

.product-rating-history td:nth-child(7) {
  width: 28%;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rating-history .pill {
  white-space: nowrap;
}

.product-rating-breakdown-button {
  padding: 0;
  border: 0;
  color: var(--primary-top);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  background: var(--surface);
}

.product-rating-breakdown-button:hover {
  text-decoration: underline;
}

.product-rating-record-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-rating-record-meta > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-rating-record-meta span {
  color: var(--muted);
  font-size: 10px;
}

.product-rating-record-meta strong {
  color: var(--ink);
  font-size: 12px;
}

.product-rating-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 92px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}

.product-rating-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.product-rating-empty span {
  font-size: 11px;
}

.product-rating-form-intro {
  padding: 12px 14px;
  border-left: 3px solid var(--primary-top);
  border-radius: 0 9px 9px 0;
  background: rgba(var(--primary-rgb), .07);
}

.product-rating-form-intro strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13px;
}

.product-rating-identity-value {
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-rating-identity-value strong {
  font-size: 12px;
}

.product-rating-identity-value small,
.product-rating-weight-field small {
  color: var(--muted);
  font-size: 10px;
}

.product-rating-weight-field > div {
  width: min(360px, 100%);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.product-rating-score-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.product-rating-score-fields label {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.product-rating-score-fields label > span {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 750;
}

.product-rating-score-fields .select {
  min-height: 36px;
}

.product-rating-weight-manager {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.product-rating-weight-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product-rating-weight-manager-head h3 {
  margin-bottom: 4px;
}

.product-rating-weight-manager-head p,
.product-rating-weight-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.product-rating-weight-manager-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.product-rating-weight-manager-actions .button {
  min-height: 32px;
  padding: 7px 12px;
  white-space: nowrap;
}

.product-rating-weight-content {
  display: grid;
  gap: 14px;
}

.product-rating-weight-content[hidden] {
  display: none;
}

.product-rating-weight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-rating-weight-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.product-rating-weight-grid label > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.product-rating-weight-grid strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rating-weight-grid small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-rating-weight-grid .input {
  flex: 0 0 58px;
  width: 58px;
  min-height: 34px;
  padding: 5px 7px;
  text-align: center;
}

@media (max-width: 760px) {
  .product-image-grid {
    grid-template-columns: repeat(3, 82px);
  }

  .product-image-item,
  .product-image-add {
    width: 82px;
  }

  .product-detail-grid.compact,
  .product-detail-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-rating-score-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-rating-weight-manager-head {
    align-items: stretch;
    flex-direction: column;
  }

  .product-rating-weight-manager-actions {
    justify-content: flex-start;
  }

  .product-rating-weight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .product-detail-hero {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Methodology navigation: stable tabs and compact article rows. */
.knowledge-category-bar {
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  overflow-x: visible;
}

.knowledge-category-button {
  flex: 0 0 auto;
  min-width: 98px;
  justify-content: space-between;
}

.knowledge-category-button > span {
  min-width: 0;
}

.knowledge-category-button > strong {
  flex: 0 0 auto;
}

.knowledge-category-button:focus {
  outline: none;
}

.knowledge-category-button:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.16);
}

.knowledge-list {
  align-content: start;
  grid-auto-rows: max-content;
}

.knowledge-doc-row {
  min-width: 0;
}

.knowledge-doc-button {
  height: 70px;
  min-height: 70px;
  overflow: hidden;
  padding-left: 11px;
  padding-right: 46px;
}

.knowledge-doc-row.is-order-editing .knowledge-doc-button {
  padding-left: 40px;
}

.knowledge-doc-button strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.knowledge-doc-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .knowledge-category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .knowledge-category-bar::-webkit-scrollbar {
    display: none;
  }
}

.plan-completion-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tiny-button.acceptance-button,
.button.acceptance-pass-button {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.tiny-button.acceptance-button:hover,
.button.acceptance-pass-button:hover {
  filter: brightness(0.94);
}

.acceptance-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.acceptance-status-badge.rejected {
  border-color: #fecaca;
  background: #fff1f2;
  color: #be123c;
}

.acceptance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.acceptance-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.acceptance-summary span {
  color: var(--muted);
  font-size: 11px;
}

.acceptance-summary strong {
  color: var(--ink);
  font-size: 13px;
}

.acceptance-current-request {
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  background: #fff7ed;
  color: #9a3412;
}

.acceptance-current-request p {
  margin: 6px 0 0;
  line-height: 1.6;
}

.work-report-acceptance-hint {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.55;
}

.acceptance-actions {
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .acceptance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.late-completion-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.task-record-meta-card > .late-completion-badge {
  margin-top: 12px;
}

tr.plan-timing-completed > td:first-child {
  box-shadow: inset 3px 0 0 #22c55e !important;
}

tr.plan-timing-overdue > td:first-child {
  box-shadow: inset 3px 0 0 #ef4444 !important;
}

tr.plan-timing-due-soon > td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b !important;
}

@media (max-width: 1280px) {
  .compact-task-table tbody tr.plan-timing-completed {
    border-left: 3px solid #22c55e !important;
  }

  .compact-task-table tbody tr.plan-timing-overdue {
    border-left: 3px solid #ef4444 !important;
  }

  .compact-task-table tbody tr.plan-timing-due-soon {
    border-left: 3px solid #f59e0b !important;
  }

  .compact-task-table tbody tr.plan-timing-completed > td:first-child,
  .compact-task-table tbody tr.plan-timing-overdue > td:first-child,
  .compact-task-table tbody tr.plan-timing-due-soon > td:first-child {
    box-shadow: none !important;
  }
}

/* Goal and performance center */
.performance-center {
  display: grid;
  gap: 18px;
}

.performance-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
  gap: 24px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--primary-rgb), .16), transparent 30%),
    linear-gradient(135deg, var(--surface), var(--surface-soft));
  box-shadow: var(--shadow);
}

.performance-hero::after {
  position: absolute;
  right: -60px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 50%;
  content: "";
}

.performance-hero-copy,
.performance-cycle-control {
  position: relative;
  z-index: 1;
}

.performance-hero-copy {
  display: grid;
  align-content: center;
  gap: 7px;
}

.performance-hero-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.04em;
}

.performance-hero-copy p {
  max-width: 660px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.7;
}

.performance-cycle-control {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(var(--primary-rgb), .18);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.performance-cycle-control > label,
.performance-department-select > label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.performance-cycle-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  color: var(--muted);
  font-size: 11px;
}

.performance-access-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.performance-access-note > div {
  display: grid;
  gap: 3px;
}

.performance-access-note strong {
  color: var(--ink);
  font-size: 13px;
}

.performance-access-note span:not(.pill) {
  color: var(--muted);
  font-size: 12px;
}

.performance-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.performance-tabs button {
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.performance-tabs button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.performance-tabs button.active {
  background: var(--primary-top);
  color: var(--primary-fg);
  box-shadow: 0 5px 16px var(--primary-shadow);
}

.performance-content {
  display: grid;
  gap: 18px;
}

.performance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.performance-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr);
  gap: 16px;
}

.performance-objective-stack {
  display: grid;
  gap: 10px;
}

.performance-objective-summary {
  display: grid;
  grid-template-columns: 46px minmax(220px, 1fr) auto minmax(150px, 210px);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.performance-objective-code {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(var(--primary-rgb), .34);
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--primary-top);
  font-size: 13px;
  font-weight: 800;
}

.performance-objective-summary-main {
  display: grid;
  gap: 4px;
}

.performance-objective-summary-main strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.performance-objective-summary-main span {
  color: var(--muted);
  font-size: 11px;
}

.performance-objective-summary-health {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.performance-objective-summary-progress .cell-sub,
.performance-kr-progress .cell-sub {
  text-align: right;
}

.performance-evidence-list {
  display: grid;
  gap: 9px;
}

.performance-evidence-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.performance-evidence-list article span {
  color: var(--muted);
  font-size: 11px;
}

.performance-evidence-list article strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--ink);
  font-size: 22px;
}

.performance-evidence-list article small {
  color: var(--muted-strong);
  font-size: 11px;
}

.performance-principle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.performance-principle-strip article {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-right: 1px solid var(--line);
}

.performance-principle-strip article:last-child {
  border-right: 0;
}

.performance-principle-strip strong {
  color: var(--primary-top);
  font-size: 12px;
}

.performance-principle-strip span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.performance-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px;
}

.performance-section-head > div:first-child {
  display: grid;
  gap: 5px;
}

.performance-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -.02em;
}

.performance-section-head p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.performance-okr-list {
  display: grid;
  gap: 15px;
}

.performance-okr-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.performance-okr-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.performance-okr-title {
  display: flex;
  align-items: start;
  gap: 13px;
  min-width: 0;
}

.performance-okr-title > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--primary-top);
  color: var(--primary-fg);
  font-size: 12px;
  font-weight: 900;
}

.performance-okr-title > div {
  display: grid;
  gap: 5px;
}

.performance-okr-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
}

.performance-okr-title p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.performance-okr-actions,
.performance-kr-health {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.performance-okr-meta {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.performance-okr-meta strong {
  color: var(--ink);
}

.performance-kr-list {
  display: grid;
}

.performance-kr-row {
  display: grid;
  grid-template-columns: 66px minmax(260px, 1.4fr) minmax(120px, .55fr) auto minmax(120px, .5fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

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

.performance-kr-row:hover {
  background: var(--surface-soft);
}

.performance-kr-code {
  color: var(--primary-top);
  font-size: 11px;
  font-weight: 800;
}

.performance-kr-result,
.performance-kr-owner {
  display: grid;
  gap: 4px;
}

.performance-kr-result strong,
.performance-kr-owner strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}

.performance-kr-result span,
.performance-kr-result small,
.performance-kr-owner span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.performance-assignment-surface {
  display: grid;
  gap: 18px;
}

.performance-assignment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.performance-style-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.performance-style-switch button {
  min-height: 30px;
  padding: 6px 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
}

.performance-style-switch button:hover {
  color: var(--ink);
}

.performance-style-switch button.active {
  background: var(--surface);
  color: var(--primary-top);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.performance-tv-statusbar {
  display: none;
}

.performance-cascade-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.performance-cascade-summary article {
  position: relative;
  display: grid;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.performance-cascade-summary article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary-top);
  content: "";
}

.performance-cascade-summary article.is-complete::before {
  background: #16a34a;
}

.performance-cascade-summary article.is-warning::before {
  background: #f59e0b;
}

.performance-cascade-summary article > span,
.performance-cascade-summary article > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-cascade-summary article > strong {
  color: var(--ink);
  font-size: 25px;
  line-height: 1.1;
}

.performance-cascade-summary article > strong em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.performance-cascade-lane-head {
  display: grid;
  grid-template-columns: minmax(245px, .86fr) 32px minmax(230px, .76fr) 32px minmax(300px, 1.2fr);
  align-items: stretch;
  gap: 8px;
  padding: 0 18px;
}

.performance-cascade-lane-head > div {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 3px;
  padding: 11px 13px;
  border-top: 2px solid rgba(var(--primary-rgb), .45);
  background: var(--surface-soft);
}

.performance-cascade-lane-head > div:nth-of-type(2) {
  border-top-color: #d97706;
}

.performance-cascade-lane-head > div:nth-of-type(3) {
  border-top-color: #64748b;
}

.performance-cascade-lane-head > div > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.performance-cascade-lane-head strong {
  color: var(--ink);
  font-size: 12px;
}

.performance-cascade-lane-head small {
  color: var(--muted);
  font-size: 9px;
}

.performance-cascade-lane-head > i {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--muted);
  font-style: normal;
}

.performance-cascade-lane-head > i::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(var(--primary-rgb), .32);
  content: "";
}

.performance-cascade-lane-head > i > span {
  position: relative;
  z-index: 1;
  padding: 2px 3px;
  background: var(--surface);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.performance-cascade-list {
  display: grid;
  gap: 16px;
}

.performance-cascade-objective {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.performance-cascade-objective-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(160px, 220px);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), .1), transparent 52%),
    var(--surface-soft);
}

.performance-cascade-objective-code {
  display: grid;
  min-width: 43px;
  height: 32px;
  padding: 0 9px;
  place-items: center;
  border-radius: 6px;
  background: var(--primary-top);
  color: var(--primary-fg);
  font-size: 11px;
  font-weight: 900;
}

.performance-cascade-objective-head > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.performance-cascade-objective-head > div:nth-child(2) > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-cascade-objective-head small,
.performance-cascade-objective-progress > span {
  color: var(--muted);
  font-size: 10px;
}

.performance-cascade-objective-progress {
  display: grid;
  gap: 5px;
}

.performance-cascade-objective-progress .cell-sub {
  text-align: right;
}

.performance-cascade-kr-list {
  display: grid;
}

.performance-cascade-row {
  display: grid;
  grid-template-columns: minmax(245px, .86fr) 32px minmax(230px, .76fr) 32px minmax(300px, 1.2fr);
  align-items: stretch;
  gap: 8px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

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

.performance-cascade-row:nth-child(even) {
  background: color-mix(in srgb, var(--surface-soft) 52%, transparent);
}

.performance-cascade-kr {
  position: relative;
  display: grid;
  align-self: center;
  align-content: start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary-top);
  border-radius: 8px;
  background: var(--surface);
}

.performance-cascade-kr > header,
.performance-cascade-department-card > header,
.performance-cascade-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.performance-cascade-kr > header > span:first-child {
  color: var(--primary-top);
  font-size: 11px;
  font-weight: 900;
}

.performance-cascade-kr > strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.performance-cascade-kr > p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
}

.performance-cascade-kr > p b {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .06em;
}

.performance-cascade-kr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 10px;
}

.performance-cascade-kr-meta span::before {
  margin-right: 4px;
  color: var(--primary-top);
  content: "·";
}

.performance-cascade-kr-progress {
  display: grid;
  gap: 7px;
}

.performance-cascade-kr-progress > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.performance-cascade-link {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 44px;
}

.performance-cascade-link::before {
  position: absolute;
  top: 50%;
  right: -9px;
  left: -9px;
  height: 1px;
  transform: translateY(-.5px);
  background: rgba(var(--primary-rgb), .45);
  content: "";
}

.performance-cascade-link::after {
  display: none;
}

.performance-cascade-link.is-branch::before {
  right: -12px;
  left: -9px;
  background: #5b8cff;
}

.performance-cascade-row.has-support-action > .performance-cascade-kr,
.performance-cascade-row.has-support-action > .performance-cascade-column.is-accountable {
  transform: translateY(-19px);
}

.performance-cascade-row.has-support-action > .performance-cascade-link::before {
  top: calc(50% - 19px);
}

.performance-cascade-link.is-branch::after {
  display: none;
}

.performance-cascade-column {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 8px;
}

.performance-cascade-column.is-accountable {
  align-self: stretch;
  align-content: center;
}

.performance-cascade-column.is-support {
  align-self: stretch;
  align-content: center;
}

.performance-cascade-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 23px;
}

.performance-cascade-column-title > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.performance-cascade-column-title > small {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.performance-cascade-department-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.performance-cascade-department-card.is-accountable {
  border-color: rgba(217, 119, 6, .42);
  border-top: 3px solid #d97706;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, .08), transparent 54%),
    var(--surface);
}

.performance-cascade-department-card > header > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.performance-cascade-department-card > header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-cascade-department-card > p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.55;
}

.performance-cascade-department-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.performance-cascade-department-card dl > div {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 7px;
}

.performance-cascade-department-card dt {
  color: var(--muted);
  font-size: 9px;
}

.performance-cascade-department-card dd {
  margin: 0;
  color: var(--muted-strong);
  font-size: 10px;
  line-height: 1.45;
}

.performance-cascade-card-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.performance-cascade-support-list {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 9px;
  padding-left: 18px;
}

.performance-cascade-support-list::after {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 1px;
  transform: translateY(-.5px);
  background: #5b8cff;
  content: "";
}

.performance-cascade-department-card.is-support-node::before,
.performance-cascade-support-list > .performance-cascade-empty-support::before {
  --support-connector-vertical-start: 0%;
  --support-connector-vertical-size: 100%;
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -18px;
  width: 19px;
  background-color: transparent;
  background-image:
    linear-gradient(#5b8cff, #5b8cff),
    linear-gradient(#5b8cff, #5b8cff) !important;
  background-position:
    3px 50%,
    3px var(--support-connector-vertical-start);
  background-repeat: no-repeat;
  background-size:
    16px 1px,
    1px var(--support-connector-vertical-size);
  content: "";
  pointer-events: none;
}

.performance-cascade-support-list > :first-child::before {
  --support-connector-vertical-start: 100%;
  --support-connector-vertical-size: 50%;
}

.performance-cascade-support-list > :last-child::before {
  --support-connector-vertical-start: 0%;
  --support-connector-vertical-size: 50%;
}

.performance-cascade-support-list[data-support-count="1"] > :only-child::before {
  --support-connector-vertical-size: 0%;
}

.performance-cascade-department-card.role-r {
  border-left: 3px solid #2563eb;
}

.performance-cascade-department-card.role-c {
  border-left: 3px solid #d97706;
}

.performance-cascade-department-card.role-i {
  border-left: 3px solid #64748b;
}

.performance-cascade-missing,
.performance-cascade-empty-support {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 112px;
  gap: 5px;
  padding: 12px;
  border: 1px dashed #f59e0b;
  border-radius: 9px;
  background: rgba(245, 158, 11, .07);
  text-align: center;
}

.performance-cascade-missing strong {
  color: var(--ink);
  font-size: 11px;
}

.performance-cascade-missing span,
.performance-cascade-empty-support {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.performance-cascade-missing .tiny-button {
  justify-self: center;
  margin-top: 3px;
}

.performance-cascade-empty-support {
  min-height: 74px;
  border-color: var(--line);
  background: var(--surface-soft);
}

.performance-cascade-add-support {
  width: 100%;
  padding: 7px 9px;
  border: 1px dashed rgba(var(--primary-rgb), .32);
  border-radius: 8px;
  background: transparent;
  color: var(--primary-top);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
}

.performance-cascade-add-support:hover {
  border-style: solid;
  background: rgba(var(--primary-rgb), .08);
}

.performance-raci-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.performance-raci-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.performance-department-select {
  display: grid;
  min-width: 220px;
  gap: 6px;
}

.performance-department-goal {
  overflow: hidden;
  border: 1px solid rgba(var(--primary-rgb), .25);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), .08), transparent 45%),
    var(--surface);
  box-shadow: var(--shadow);
}

.performance-department-goal > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.performance-department-goal > header > div:first-child {
  display: grid;
  gap: 6px;
}

.performance-department-goal h3 {
  max-width: 920px;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.5;
}

.performance-department-goal p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.performance-department-goal-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr);
}

.performance-department-goal-grid > div {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

.performance-department-goal-grid > div + div {
  border-left: 1px solid var(--line);
}

.performance-department-goal-grid > div > strong {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
}

.performance-linked-krs {
  display: grid;
  gap: 7px;
}

.performance-linked-krs span {
  display: flex;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.45;
}

.performance-linked-krs b {
  color: var(--primary-top);
  white-space: nowrap;
}

.performance-department-goal ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.performance-department-goal li {
  padding-left: 4px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.6;
}

.performance-department-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.performance-department-lower {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(440px, 1.25fr);
  gap: 16px;
}

.performance-department-assignments {
  display: grid;
  align-content: start;
  gap: 9px;
}

.performance-department-assignments article {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.performance-department-assignments article > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.performance-department-assignments strong {
  color: var(--ink);
  font-size: 12px;
}

.performance-department-assignments p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 11px;
  line-height: 1.55;
}

.performance-department-assignments small {
  color: var(--muted);
  font-size: 10px;
}

.performance-kpi-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.performance-kpi-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.performance-kpi-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.performance-kpi-card > header > span:first-child {
  color: var(--primary-top);
  font-size: 10px;
  font-weight: 800;
}

.performance-kpi-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.performance-kpi-card p {
  min-height: 48px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.performance-kpi-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.performance-kpi-card dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border-radius: 7px;
  background: var(--surface);
}

.performance-kpi-card dt {
  color: var(--muted);
  font-size: 9px;
}

.performance-kpi-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-kpi-card > small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.performance-kpi-guardrail {
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 7px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 9px;
  line-height: 1.5;
}

.performance-kpi-card > .tiny-button {
  justify-self: start;
}

.performance-form {
  max-width: 920px;
}

.performance-assignment-surface.is-tradingview {
  --surface: #ffffff;
  --surface-soft: #f8f9fd;
  --line: #e0e3eb;
  --ink: #131722;
  --muted: #787b86;
  --muted-strong: #434651;
  --primary-top: #2962ff;
  --primary-fg: #fff;
  --primary-rgb: 41, 98, 255;
  --gold-soft: rgba(242, 184, 75, .12);
  --shadow: none;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e0e3eb;
  border-radius: 7px;
  background: #ffffff;
  color: #131722;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.performance-assignment-surface.is-tradingview > .performance-section-head {
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid #e0e3eb;
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-section-head h3 {
  color: #131722;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.performance-assignment-surface.is-tradingview .performance-section-head p {
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .eyebrow {
  color: #5b8cff;
  font-size: 8px;
  letter-spacing: .16em;
}

.performance-assignment-surface.is-tradingview .performance-style-switch {
  border-color: #d6d9e0;
  border-radius: 4px;
  background: #f0f3fa;
}

.performance-assignment-surface.is-tradingview .performance-style-switch button {
  border-radius: 3px;
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-style-switch button:hover {
  color: #131722;
}

.performance-assignment-surface.is-tradingview .performance-style-switch button.active {
  background: #2962ff;
  color: #fff;
  box-shadow: none;
}

.performance-assignment-surface.is-tradingview .button {
  min-height: 36px;
  border-color: #2962ff;
  border-radius: 4px;
  background: #2962ff;
  box-shadow: none;
  color: #fff;
}

.performance-assignment-surface.is-tradingview .tiny-button {
  border-color: #d6d9e0;
  border-radius: 3px;
  background: #ffffff;
  color: #434651;
}

.performance-assignment-surface.is-tradingview .tiny-button:hover {
  border-color: #2962ff;
  color: #2962ff;
}

.performance-assignment-surface.is-tradingview .performance-tv-statusbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(150px, .7fr));
  border-bottom: 1px solid #e0e3eb;
  background: #f8f9fd;
}

.performance-tv-statusbar > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 13px;
  border-right: 1px solid #e0e3eb;
  color: #787b86;
  font-size: 9px;
}

.performance-tv-statusbar > div:last-child {
  border-right: 0;
}

.performance-tv-statusbar > div > span:not(.performance-tv-live-dot) {
  flex: 0 0 auto;
}

.performance-tv-statusbar > div > strong {
  overflow: hidden;
  color: #434651;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-tv-statusbar > div > strong.is-positive {
  color: #26a69a;
}

.performance-tv-statusbar > div > strong.is-caution {
  color: #f2b84b;
}

.performance-tv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #26a69a;
  box-shadow: 0 0 0 3px rgba(38, 166, 154, .12);
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary {
  gap: 1px;
  padding: 0;
  border-bottom: 1px solid #e0e3eb;
  background: #e0e3eb;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article {
  gap: 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article::before {
  inset: auto 0 0;
  width: auto;
  height: 2px;
  background: #2962ff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article.is-complete::before {
  background: #26a69a;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article.is-warning::before {
  background: #f2b84b;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article > span,
.performance-assignment-surface.is-tradingview .performance-cascade-summary article > small {
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-summary article > strong {
  color: #131722;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 21px;
  font-weight: 550;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head {
  gap: 8px;
  padding: 11px 16px 0;
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > div {
  padding: 8px 11px;
  border-top: 0;
  border-bottom: 1px solid #d6d9e0;
  background: transparent;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > div:nth-of-type(1) {
  border-bottom-color: #2962ff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > div:nth-of-type(2) {
  border-bottom-color: #f2b84b;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > div:nth-of-type(3) {
  border-bottom-color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > div > span {
  color: #5b8cff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head strong {
  color: #131722;
  font-weight: 550;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head small,
.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > i {
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > i::before {
  background: #c5c9d2;
}

.performance-assignment-surface.is-tradingview .performance-cascade-lane-head > i > span {
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-list {
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(rgba(224, 227, 235, .52) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 227, 235, .52) 1px, transparent 1px),
    #f8f9fd;
  background-size: 28px 28px;
}

.performance-assignment-surface.is-tradingview .performance-cascade-objective {
  border-color: #d6d9e0;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: none;
}

.performance-assignment-surface.is-tradingview .performance-cascade-objective-head {
  padding: 11px 13px;
  border-bottom-color: #e0e3eb;
  background: #f0f3fa;
}

.performance-assignment-surface.is-tradingview .performance-cascade-objective-code {
  min-width: 38px;
  height: 28px;
  border-radius: 3px;
  background: #2962ff;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.performance-assignment-surface.is-tradingview .performance-cascade-objective-head > div:nth-child(2) > strong {
  color: #131722;
  font-weight: 550;
}

.performance-assignment-surface.is-tradingview .performance-cascade-objective-head small,
.performance-assignment-surface.is-tradingview .performance-cascade-objective-progress > span {
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-row {
  padding: 14px 13px;
  border-bottom-color: #e0e3eb;
  background: rgba(255, 255, 255, .82);
}

.performance-assignment-surface.is-tradingview .performance-cascade-row:nth-child(even) {
  background: rgba(248, 249, 253, .9);
}

.performance-assignment-surface.is-tradingview .performance-cascade-kr {
  padding: 12px;
  border-color: #d6d9e0;
  border-left-color: #2962ff;
  border-radius: 4px;
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-kr > header > span:first-child {
  color: #5b8cff;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.performance-assignment-surface.is-tradingview .performance-cascade-kr > strong,
.performance-assignment-surface.is-tradingview .performance-cascade-department-card > p {
  color: #131722;
  font-weight: 550;
}

.performance-assignment-surface.is-tradingview .performance-cascade-kr > p,
.performance-assignment-surface.is-tradingview .performance-cascade-department-card dd {
  color: #434651;
}

.performance-assignment-surface.is-tradingview .performance-cascade-kr > p b,
.performance-assignment-surface.is-tradingview .performance-cascade-kr-meta,
.performance-assignment-surface.is-tradingview .performance-cascade-department-card dt {
  color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-link::before {
  background: #5b8cff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-link::after {
  border-left-color: #2962ff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-link.is-branch::before {
  background: #5b8cff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card {
  border-color: #d6d9e0;
  border-radius: 4px;
  background: #ffffff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card.is-accountable {
  border-color: #e8d6a4;
  border-top-color: #f2b84b;
  background: #fffcf4;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card.role-r {
  border-left-color: #2962ff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card.role-c {
  border-left-color: #f2b84b;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card.role-i {
  border-left-color: #787b86;
}

.performance-assignment-surface.is-tradingview .performance-cascade-department-card > header strong {
  color: #131722;
}

.performance-assignment-surface.is-tradingview .performance-cascade-missing {
  border-color: #e8d6a4;
  border-radius: 4px;
  background: rgba(242, 184, 75, .06);
}

.performance-assignment-surface.is-tradingview .performance-cascade-empty-support {
  border-color: #d6d9e0;
  border-radius: 4px;
  background: #f8f9fd;
}

.performance-assignment-surface.is-tradingview .performance-cascade-add-support {
  border-color: #d6d9e0;
  border-radius: 3px;
  color: #5b8cff;
}

.performance-assignment-surface.is-tradingview .performance-cascade-add-support:hover {
  border-color: #2962ff;
  background: rgba(41, 98, 255, .08);
}

.performance-assignment-surface.is-tradingview .performance-raci-legend {
  border: 0;
  border-top: 1px solid #e0e3eb;
  border-radius: 0;
  background: #f8f9fd;
}

.performance-assignment-surface.is-tradingview .performance-raci-legend > span {
  color: #787b86;
}

@media (max-width: 1280px) {
  .performance-assignment-surface.is-tradingview .performance-tv-statusbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-tv-statusbar > div:nth-child(2) {
    border-right: 0;
  }

  .performance-tv-statusbar > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e0e3eb;
  }

  .performance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-overview-layout,
  .performance-department-lower {
    grid-template-columns: 1fr;
  }

  .performance-kpi-cards {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    overflow-x: auto;
  }

  .performance-kr-row {
    grid-template-columns: 58px minmax(240px, 1fr) minmax(110px, .45fr) auto;
  }

  .performance-kr-progress {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 1180px) {
  .performance-cascade-lane-head {
    display: none;
  }

  .performance-cascade-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .performance-cascade-link,
  .performance-cascade-link.is-branch {
    grid-column: 1;
    width: 100%;
    height: 30px;
    min-height: 30px;
  }

  .performance-cascade-link::before,
  .performance-cascade-link.is-branch::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: auto;
    transform: none;
  }

  .performance-cascade-row.has-support-action > .performance-cascade-kr,
  .performance-cascade-row.has-support-action > .performance-cascade-column.is-accountable {
    transform: none;
  }

  .performance-cascade-row.has-support-action > .performance-cascade-link::before {
    top: 0;
  }

  .performance-cascade-column.is-support {
    grid-column: 1;
    padding-top: 0;
  }
}

@media (max-width: 900px) {
  .performance-hero {
    grid-template-columns: 1fr;
  }

  .performance-assignment-actions {
    align-items: stretch;
    justify-content: flex-start;
  }

  .performance-cascade-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-cascade-objective-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .performance-cascade-objective-progress {
    grid-column: 2;
  }

  .performance-cascade-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .performance-cascade-link,
  .performance-cascade-link.is-branch {
    grid-column: 1;
    min-height: 30px;
  }

  .performance-cascade-link::before,
  .performance-cascade-link.is-branch::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: auto;
  }

  .performance-cascade-link::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(50% - 4px);
    width: 0;
    height: 0;
    border: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid var(--primary-top);
  }

  .performance-cascade-link.is-branch::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border: 0;
  }

  .performance-cascade-column.is-support {
    grid-column: 1;
    padding-top: 0;
  }

  .performance-objective-summary {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .performance-objective-summary-progress {
    grid-column: 2 / -1;
  }

  .performance-principle-strip,
  .performance-department-goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-principle-strip article:nth-child(2) {
    border-right: 0;
  }

  .performance-principle-strip article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .performance-department-goal-grid > div + div {
    border-left: 0;
  }

  .performance-department-goal-grid > div:nth-child(2) {
    border-left: 1px solid var(--line);
  }

  .performance-okr-card > header,
  .performance-department-goal > header,
  .performance-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .performance-okr-actions {
    justify-content: flex-start;
  }

  .performance-kr-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .performance-kr-owner,
  .performance-kr-progress {
    grid-column: 2 / -1;
  }

  .performance-kr-health {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 640px) {
  .performance-hero {
    padding: 18px;
  }

  .performance-assignment-actions {
    flex-direction: column;
  }

  .performance-style-switch {
    align-self: flex-start;
  }

  .performance-assignment-surface.is-tradingview .performance-tv-statusbar {
    grid-template-columns: 1fr;
  }

  .performance-tv-statusbar > div,
  .performance-tv-statusbar > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #e0e3eb;
  }

  .performance-tv-statusbar > div:last-child {
    border-bottom: 0;
  }

  .performance-cascade-summary,
  .performance-cascade-support-list {
    grid-template-columns: 1fr;
  }

  .performance-cascade-objective-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 13px;
  }

  .performance-cascade-objective-head > div:nth-child(2) > strong {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  .performance-cascade-objective-progress {
    grid-column: 1 / -1;
  }

  .performance-cascade-row {
    padding: 13px;
  }

  .performance-cascade-column-title,
  .performance-cascade-department-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .performance-cascade-column-title > small {
    text-align: left;
  }

  .performance-cascade-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .performance-access-note,
  .performance-department-goal > header {
    align-items: stretch;
    flex-direction: column;
  }

  .performance-summary-grid,
  .performance-principle-strip,
  .performance-department-goal-grid {
    grid-template-columns: 1fr;
  }

  .performance-principle-strip article,
  .performance-principle-strip article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .performance-principle-strip article:last-child {
    border-bottom: 0;
  }

  .performance-department-goal-grid > div:nth-child(2) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .performance-objective-summary {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .performance-objective-summary-health,
  .performance-objective-summary-progress {
    grid-column: 2;
  }

  .performance-okr-meta {
    grid-template-columns: 1fr 1fr;
  }

  .performance-okr-meta > div {
    grid-column: 1 / -1;
  }

  .performance-kr-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .performance-kr-code,
  .performance-kr-result,
  .performance-kr-owner,
  .performance-kr-health,
  .performance-kr-progress {
    grid-column: 1;
    grid-row: auto;
  }

  .performance-kr-health {
    justify-content: flex-start;
  }

  .performance-department-select {
    min-width: 0;
  }
}

/* Launch mobile shell: keep navigation compact and content immediately visible. */
@media (max-width: 720px) {
  .app-shell {
    display: block;
  }

  .sidebar,
  body[data-theme="light"] .sidebar,
  body[data-theme="neutral"] .sidebar,
  body[data-theme="google"] .sidebar,
  body[data-palette="midnight"] .sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 9px 12px 8px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.1);
  }

  .sidebar .brand-block {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .sidebar .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .sidebar .brand-title {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .brand-subtitle {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar .anniversary-countdown {
    display: flex;
    min-width: 82px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
  }

  .sidebar .anniversary-countdown-label,
  .sidebar .anniversary-countdown > small {
    display: none;
  }

  .sidebar .anniversary-countdown-value {
    display: flex;
    grid-row: auto;
    grid-column: auto;
    align-items: baseline;
    gap: 3px;
    margin: 0;
  }

  .sidebar .anniversary-countdown-value strong {
    font-size: 20px;
    line-height: 1;
  }

  .sidebar .nav-list {
    grid-column: 1 / -1;
    display: flex;
    flex: none;
    flex-direction: row;
    gap: 6px;
    width: 100%;
    max-height: none;
    padding: 0 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .nav-list::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .sidebar .nav-button,
  body[data-theme="light"] .sidebar .nav-button {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    gap: 7px;
    padding: 6px 10px;
    white-space: nowrap;
  }

  .main {
    padding: 14px 12px 28px;
  }

  .topbar {
    gap: 10px;
  }

  .topbar-actions {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .topbar-actions > *,
  .topbar-actions .button,
  .topbar-actions .presence-pill,
  .topbar-actions .account-pill {
    flex: 0 0 auto;
    width: auto;
  }

  .notification-panel {
    position: fixed;
    top: 112px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 128px);
  }
}

/* BRAND LOGO COLOR LOCK
   Keep the official black artwork on white across every product theme. */
.brand-mark,
.login-brand .brand-mark,
body[data-theme] .brand-mark,
body[data-theme] .login-brand .brand-mark,
body[data-palette] .brand-mark,
body[data-palette] .login-brand .brand-mark {
  border-color: #dce1e6;
  background: #ffffff;
  background-image: none;
  box-shadow: 0 1px 2px rgba(32, 36, 40, 0.10);
}

.brand-mark img,
body[data-theme] .brand-mark img,
body[data-theme] .login-brand .brand-mark img,
body[data-palette] .brand-mark img,
body[data-palette] .login-brand .brand-mark img {
  filter: none;
  mix-blend-mode: normal;
}

/* CAPABILITY TYPOGRAPHY READABILITY CONTRACT
   Business content never relies on micro type. Eyebrows, compact statuses and
   sequence numbers use 11px; supporting copy uses 12px; item titles use 13px. */
.capability-center {
  font-size: 13px;
}

.capability-center p,
.capability-center small {
  font-size: 12px !important;
  line-height: 1.6;
}

.capability-center input,
.capability-center select,
.capability-center textarea {
  font-size: 13px !important;
  line-height: 1.5;
}

.capability-center form label > span,
.capability-center th,
.capability-center td,
.capability-center dt,
.capability-center dd,
.capability-center summary,
.capability-center a,
.capability-center button:not(.icon-button) {
  font-size: 12px !important;
}

.capability-center .capability-nav-groups strong,
.capability-center .capability-nav-pages > div:first-child strong {
  font-size: 13px !important;
}

.capability-center .capability-nav-groups small,
.capability-center .capability-nav-groups em,
.capability-center .capability-nav-pages > div:first-child span,
.capability-center .capability-nav-pages button em {
  font-size: 11px !important;
}

.capability-center :is(
  .capability-access-block,
  .capability-binding-bridge,
  .capability-data-explanation,
  .capability-guide-center,
  .capability-demo-tour,
  .capability-assignment,
  .capability-scenario,
  .capability-team-list,
  .capability-review-list,
  .capability-coaching-log,
  .capability-catalog-grid,
  .capability-validation-grid,
  .capability-onboarding-overview,
  .capability-profile-list,
  .capability-candidate-list,
  .capability-onboarding-steps,
  .capability-evidence-standard,
  .capability-review-evidence,
  .capability-lesson-framework,
  .capability-lesson-case-grid,
  .capability-archive-ability-list,
  .capability-archive-path,
  .capability-archive-record-list,
  .capability-dashboard-alerts,
  .capability-dashboard-principle,
  .capability-dashboard-track-grid,
  .capability-dashboard-gap-list,
  .capability-program-list,
  .capability-program-meta,
  .capability-program-stages,
  .capability-program-member-list,
  .capability-program-result-strip,
  .capability-program-participants,
  .capability-certification-levels,
  .capability-certification-readiness,
  .capability-certificate-grid,
  .capability-resource-recommended,
  .capability-resource-grid,
  .capability-resource-detail,
  .capability-impact-evaluation-list,
  .capability-evaluation-levels,
  .capability-evaluation-conclusion,
  .capability-evaluation-decision,
  .capability-reminder-list,
  .capability-calendar-rhythm,
  .capability-briefing-decision,
  .capability-briefing-next,
  .capability-briefing-people,
  .capability-briefing-gaps,
  .capability-talent-matrix,
  .capability-talent-bench,
  .capability-governance-checks,
  .capability-governance-permissions,
  .capability-governance-audit,
  .capability-launch-gates,
  .capability-launch-blockers,
  .capability-launch-clear,
  .capability-launch-waves,
  .capability-launch-cadence,
  .capability-planning-roadmap,
  .capability-demand-list,
  .capability-session-grid,
  .capability-session-quality,
  .capability-session-roster,
  .capability-instructor-grid,
  .capability-feedback-panel,
  .capability-feedback-insights
) :is(strong, h4) {
  font-size: 13px !important;
  line-height: 1.55;
}

.capability-center :is(
  .capability-access-block,
  .capability-binding-bridge,
  .capability-data-explanation,
  .capability-guide-center,
  .capability-demo-tour,
  .capability-assignment-meta,
  .capability-review-time,
  .capability-coaching-log,
  .capability-catalog-grid,
  .capability-validation-grid,
  .capability-onboarding-overview,
  .capability-profile-list,
  .capability-candidate-list,
  .capability-onboarding-steps,
  .capability-evidence-standard,
  .capability-evidence-meta,
  .capability-review-evidence,
  .capability-review-sla,
  .capability-lesson-framework,
  .capability-lesson-case-grid,
  .capability-archive-ability-list,
  .capability-archive-path,
  .capability-archive-record-list,
  .capability-dashboard-alerts,
  .capability-dashboard-principle,
  .capability-dashboard-track-grid,
  .capability-dashboard-gap-list,
  .capability-program-list,
  .capability-program-meta,
  .capability-program-stages,
  .capability-program-member-list,
  .capability-program-result-strip,
  .capability-program-participants,
  .capability-certification-levels,
  .capability-certification-readiness,
  .capability-certificate-grid,
  .capability-resource-recommended,
  .capability-resource-grid,
  .capability-resource-detail,
  .capability-impact-evaluation-list,
  .capability-evaluation-levels,
  .capability-evaluation-conclusion,
  .capability-evaluation-decision,
  .capability-calendar-strip,
  .capability-reminder-list,
  .capability-calendar-rhythm,
  .capability-briefing-decision,
  .capability-briefing-next,
  .capability-briefing-people,
  .capability-briefing-gaps,
  .capability-talent-matrix,
  .capability-talent-bench,
  .capability-governance-checks,
  .capability-governance-permissions,
  .capability-governance-audit,
  .capability-launch-gates,
  .capability-launch-blockers,
  .capability-launch-waves,
  .capability-launch-cadence,
  .capability-planning-roadmap,
  .capability-demand-list,
  .capability-session-grid,
  .capability-session-quality,
  .capability-session-roster,
  .capability-instructor-grid,
  .capability-feedback-panel,
  .capability-feedback-insights
) :is(span, em) {
  font-size: 11px !important;
}

.capability-center .capability-dashboard-gap-list strong,
.capability-center .capability-dashboard-track-grid header strong {
  font-size: 14px !important;
}

.capability-center .capability-dashboard-gap-list small,
.capability-center .capability-dashboard-gap-list > article > em,
.capability-center .capability-dashboard-track-grid dt,
.capability-center .capability-dashboard-track-grid dd {
  font-size: 12px !important;
}

.capability-center .capability-dashboard-track-grid dt {
  color: #596657;
  font-weight: 700;
}

.capability-center .capability-dashboard-track-grid dd {
  color: #263629;
  font-weight: 850;
}

/* AI practice governance, publishing and multi-round role play */
.capability-practice-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid #26362a;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, rgba(217, 243, 106, .2), transparent 28%),
    linear-gradient(135deg, #142018, #2b3e2c);
  color: #f7faf5;
}

.capability-practice-hero > div > span,
.capability-practice-preview > header span,
.capability-practice-preview > section > span,
.capability-practice-preview-rounds section > span {
  color: #a8c482;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .11em;
}

.capability-practice-hero h3 {
  margin: 8px 0 7px;
  font-size: 28px;
  letter-spacing: -.03em;
}

.capability-practice-hero p {
  max-width: 700px;
  margin: 0;
  color: rgba(247, 250, 245, .7);
  font-size: 14px;
  line-height: 1.75;
}

.capability-practice-hero aside {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: rgba(255, 255, 255, .065);
}

.capability-practice-hero aside span,
.capability-practice-hero aside small {
  color: rgba(247, 250, 245, .62);
  font-size: 11px;
}

.capability-practice-hero aside strong {
  font-size: 19px;
}

.capability-practice-track-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.capability-practice-track-filter button,
.capability-practice-difficulty-filter button,
.capability-practice-scenario-list button,
.capability-practice-review-releases button {
  border: 1px solid #dce4db;
  border-radius: 12px;
  background: #f9faf8;
  color: #243026;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.capability-practice-track-filter button {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
}

.capability-practice-track-filter button small,
.capability-practice-scenario-list small,
.capability-practice-review-releases small {
  color: #748073;
  font-size: 11px;
}

.capability-practice-track-filter button.active,
.capability-practice-difficulty-filter button.active,
.capability-practice-scenario-list button.active,
.capability-practice-review-releases button.active {
  border-color: #466b4c;
  background: #eaf1e7;
  box-shadow: inset 0 0 0 1px #466b4c;
}

.capability-practice-difficulty-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.capability-practice-difficulty-filter button {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 750;
}

.capability-practice-bank-layout,
.capability-practice-publish-layout,
.capability-practice-review-layout {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.8fr);
  gap: 16px;
  align-items: start;
}

.capability-practice-publish-layout {
  grid-template-columns: minmax(500px, 1.25fr) minmax(380px, 1fr);
}

.capability-practice-scenario-list,
.capability-practice-review-releases {
  display: grid;
  gap: 8px;
  max-height: 760px;
  overflow: auto;
}

.capability-practice-scenario-list button,
.capability-practice-review-releases button {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
}

.capability-practice-scenario-list button > span,
.capability-practice-review-releases button > span {
  color: #66816a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.capability-practice-preview {
  overflow: hidden;
  border: 1px solid #d7e0d5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(27, 45, 30, .08);
}

.capability-practice-preview > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #e7ece5;
}

.capability-practice-preview h3 {
  margin: 7px 0 0;
  font-size: 21px;
}

.capability-practice-preview > header > div:last-child {
  display: grid;
  min-width: 100px;
  text-align: right;
}

.capability-practice-preview > header em {
  color: #5e7b62;
  font-size: 11px;
  font-style: normal;
}

.capability-practice-preview > header small {
  color: #7c877b;
}

.capability-practice-preview > section {
  padding: 17px 24px;
  background: #f4f7f2;
}

.capability-practice-preview > section p {
  margin: 7px 0 0;
  color: #3d493e;
  line-height: 1.7;
}

.capability-practice-preview-rounds {
  display: grid;
  gap: 1px;
  background: #e7ece5;
}

.capability-practice-preview-rounds section {
  padding: 18px 24px;
  background: #fff;
}

.capability-practice-preview-rounds section > strong {
  display: block;
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.55;
}

.capability-practice-preview-rounds ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability-practice-preview-rounds li {
  display: grid;
  grid-template-columns: 25px 1fr 42px;
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f7f8f6;
  color: #536052;
  font-size: 12px;
}

.capability-practice-preview-rounds li.is-standard {
  background: #edf4e8;
  color: #263c2a;
}

.capability-practice-preview-rounds li i,
.capability-scenario-options button i {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 7px;
  background: #e5ebe3;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.capability-practice-preview-rounds li em {
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

.capability-practice-preview > footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 16px 24px;
  background: #f8faf7;
}

.capability-practice-preview > footer div {
  display: grid;
  gap: 4px;
}

.capability-practice-preview > footer span {
  color: #778176;
  font-size: 10px;
}

.capability-practice-preview > footer strong {
  font-size: 12px;
}

.capability-practice-preview.is-compact .capability-practice-preview-rounds li {
  display: none;
}

.capability-practice-bank-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid #dbe5d7;
  border-radius: 13px;
  background: #f4f8f0;
  color: #5b6659;
  font-size: 12px;
}

.capability-practice-publish-form {
  display: grid;
  gap: 15px;
}

.capability-practice-publish-feedback {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #dce5d9;
  border-radius: 12px;
  background: #f7f9f6;
}

.capability-practice-publish-feedback span {
  grid-row: 1 / span 2;
  padding: 4px 8px;
  border-radius: 99px;
  background: #e8ede6;
  color: #627060;
  font-size: 10px;
  font-weight: 850;
}

.capability-practice-publish-feedback strong {
  font-size: 13px;
}

.capability-practice-publish-feedback small {
  color: #738071;
  font-size: 11px;
}

.capability-practice-publish-feedback[data-tone="saving"] {
  border-color: #c8d7e8;
  background: #f1f6fb;
}

.capability-practice-publish-feedback[data-tone="saving"] span {
  background: #dceaf8;
  color: #355d80;
}

.capability-practice-publish-feedback[data-tone="success"] {
  border-color: #b9d8b8;
  background: #eef7ec;
}

.capability-practice-publish-feedback[data-tone="success"] span {
  background: #d5ecd2;
  color: #2f6838;
}

.capability-practice-publish-feedback[data-tone="error"] {
  border-color: #edc4b5;
  background: #fff4ef;
}

.capability-practice-publish-feedback[data-tone="error"] span {
  background: #f7ded5;
  color: #93472c;
}

.capability-practice-publish-dates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.capability-practice-audience {
  margin: 0;
  padding: 14px;
  border: 1px solid #dfe6dd;
  border-radius: 13px;
}

.capability-practice-audience legend {
  padding: 0 7px;
  font-size: 13px;
  font-weight: 850;
}

.capability-practice-audience legend small {
  margin-left: 5px;
  color: #7d877c;
  font-weight: 500;
}

.capability-practice-audience-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f1f6ed;
  color: #667264;
  font-size: 11px;
}

.capability-practice-audience-note strong {
  color: #304c36;
}

.capability-practice-audience > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.capability-practice-audience label {
  display: grid;
  grid-template-columns: auto 32px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-radius: 10px;
  background: #f7f9f6;
}

.capability-practice-audience label > span:last-child {
  display: grid;
}

.capability-practice-audience label strong {
  display: flex;
  align-items: center;
  gap: 6px;
}

.capability-practice-audience label strong em {
  padding: 2px 6px;
  border-radius: 99px;
  background: #def08c;
  color: #365125;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.capability-practice-audience label small {
  color: #778176;
  font-size: 10px;
}

.capability-practice-publication-list,
.capability-practice-attempt-list,
.capability-personal-practice-list {
  display: grid;
  gap: 9px;
}

.capability-practice-publication-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(310px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dfe5dd;
  border-radius: 13px;
  background: #fff;
}

.capability-practice-publication-list > article > div:first-child,
.capability-personal-practice-list > article > div:first-child {
  display: grid;
  gap: 4px;
}

.capability-practice-publication-list span,
.capability-practice-publication-list small,
.capability-personal-practice-list span,
.capability-personal-practice-list small {
  color: #728071;
  font-size: 11px;
}

.capability-practice-publication-list dl,
.capability-personal-practice-list dl,
.capability-practice-review-summary dl {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  margin: 0;
}

.capability-practice-publication-list dl div,
.capability-personal-practice-list dl div,
.capability-practice-review-summary dl div {
  display: grid;
  gap: 2px;
}

.capability-practice-publication-list dt,
.capability-personal-practice-list dt,
.capability-practice-review-summary dt {
  color: #7b867a;
  font-size: 10px;
}

.capability-practice-publication-list dd,
.capability-personal-practice-list dd,
.capability-practice-review-summary dd {
  margin: 0;
  font-size: 16px;
  font-weight: 850;
}

.capability-practice-publication-list > article > em {
  color: #44634a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.capability-practice-publication-list > article.is-latest {
  border-color: #94bd8e;
  box-shadow: 0 0 0 2px rgba(92, 144, 83, .12);
}

.capability-practice-publication-status {
  display: inline-flex;
  justify-content: center;
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 99px;
}

.capability-practice-publication-status.is-published {
  background: #e0f1dc;
  color: #2f6c39;
}

.capability-practice-publication-status.is-paused {
  background: #ecefec;
  color: #687168;
}

.capability-practice-publication-list > article.is-paused {
  opacity: .62;
}

.capability-practice-review-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid #2c3e30;
  border-radius: 17px;
  background: #18221a;
  color: #f7faf5;
}

.capability-practice-review-summary h3 {
  margin: 6px 0;
}

.capability-practice-review-summary p {
  margin: 0;
  color: rgba(255, 255, 255, .65);
  font-size: 12px;
}

.capability-practice-attempt-list > article {
  padding: 15px;
  border: 1px solid #dfe5dd;
  border-radius: 13px;
  background: #fff;
}

.capability-practice-attempt-list > article > header {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
}

.capability-practice-attempt-list header > div {
  display: grid;
}

.capability-practice-attempt-list header small {
  color: #788277;
}

.capability-practice-attempt-list header > em,
.capability-practice-result > div:first-child > em {
  font-style: normal;
  font-weight: 850;
}

.capability-practice-attempt-list header > em.is-pass {
  color: #397448;
}

.capability-practice-attempt-list header > em.is-retry {
  color: #a0572c;
}

.capability-practice-attempt-context {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #8eaf55;
  border-radius: 0 9px 9px 0;
  background: #f4f7f0;
}

.capability-practice-attempt-context span,
.capability-practice-attempt-context p {
  margin: 0;
  color: #6f7b6d;
  font-size: 10px;
}

.capability-practice-dimensions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.capability-practice-dimensions > span {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  padding: 9px 10px 11px;
  border-radius: 9px;
  background: #f2f5f0;
  font-size: 10px;
}

.capability-practice-dimensions i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #84a74e;
}

.capability-practice-dimensions em {
  font-style: normal;
  font-weight: 850;
}

.capability-practice-attempt-list details {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e6ebe4;
}

.capability-practice-attempt-list summary {
  color: #426449;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.capability-practice-attempt-list details > div {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0eb;
  font-size: 11px;
}

.capability-practice-attempt-list details > div strong {
  display: grid;
  gap: 4px;
}

.capability-practice-attempt-list details > div strong small {
  color: #657964;
  font-weight: 500;
  line-height: 1.5;
}

.capability-personal-practice-list > article {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px solid #dce5da;
  border-radius: 14px;
  background: #f8faf7;
}

.capability-personal-practice-list > article.is-done {
  border-color: #c6d9bc;
  background: #f0f6eb;
}

.capability-personal-practice-list > article > em {
  color: #3c7247;
  font-style: normal;
  font-weight: 850;
}

.capability-personal-practice-list > article > em.is-retry {
  color: #a0572c;
}

.capability-practice-session > header p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
}

.capability-practice-session-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 0;
}

.capability-practice-session-progress i {
  overflow: hidden;
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
}

.capability-practice-session-progress b {
  display: block;
  height: 100%;
  background: var(--cap-lime);
}

.capability-practice-session-progress span {
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
}

.capability-practice-context-form {
  display: grid;
  gap: 17px;
  margin: 20px 24px 24px 73px;
  padding: 20px;
  border: 1px solid rgba(217, 243, 106, .34);
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
}

.capability-practice-context-form > div:first-child > span {
  color: #cfe978;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.capability-practice-context-form h4 {
  margin: 5px 0 4px;
  color: #fff;
  font-size: 19px;
}

.capability-practice-context-form p {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 1.65;
}

.capability-practice-context-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.capability-practice-context-grid label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 750;
}

.capability-practice-context-grid input,
.capability-practice-context-grid textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  outline: none;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  font: inherit;
  font-weight: 500;
  resize: vertical;
}

.capability-practice-context-grid input:focus,
.capability-practice-context-grid textarea:focus {
  border-color: rgba(217, 243, 106, .72);
}

.capability-practice-context-form > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.capability-practice-context-form small {
  color: rgba(255, 255, 255, .52);
}

.capability-scenario-dialogue.is-opening > div {
  padding: 14px 16px;
  border-radius: 4px 14px 14px;
  background: rgba(255, 255, 255, .08);
}

.capability-scenario-dialogue.is-opening > div strong {
  display: block;
  margin-bottom: 5px;
}

.capability-scenario-dialogue.is-opening p {
  padding: 0;
  background: transparent;
}

.capability-scenario-dialogue.is-opening small {
  display: block;
  margin-top: 8px;
  color: #d8e5d4;
  line-height: 1.55;
}

.capability-practice-dialogue-history {
  display: grid;
  gap: 7px;
  margin: 0 24px 20px 73px;
}

.capability-practice-dialogue-history article {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  font-size: 11px;
}

.capability-practice-dialogue-history article > div {
  display: grid;
  grid-template-columns: 110px 1fr 38px;
  gap: 10px;
}

.capability-practice-dialogue-history article > p {
  display: flex;
  gap: 7px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  line-height: 1.55;
}

.capability-practice-dialogue-history article > p i {
  flex: none;
  color: #d9f36a;
  font-style: normal;
  font-weight: 850;
}

.capability-practice-dialogue-history span,
.capability-practice-dialogue-history em {
  color: rgba(255, 255, 255, .55);
  font-style: normal;
}

.capability-scenario-question > span {
  display: block;
  margin-bottom: 7px;
  color: #b8d760;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.capability-practice-session .capability-scenario-question > strong {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.55;
}

.capability-practice-session .capability-scenario-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-practice-session .capability-scenario-options button {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: start;
  min-height: 66px;
  font-size: 13px;
}

.capability-practice-order-note {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .52);
  font-size: 11px;
  line-height: 1.5;
}

.capability-practice-final-form {
  display: grid;
  gap: 11px;
  padding: 0 24px 24px 73px;
}

.capability-practice-final-form > span {
  color: #b8d760;
  font-size: 10px;
  font-weight: 850;
}

.capability-practice-final-form h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.capability-practice-answer-framework {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.capability-practice-answer-framework span {
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(217, 243, 106, .12);
  color: #dff18e;
  font-size: 11px;
  font-weight: 800;
}

.capability-practice-answer-framework i {
  color: rgba(255, 255, 255, .34);
  font-style: normal;
}

.capability-practice-final-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
}

.capability-practice-final-form textarea:focus {
  border-color: rgba(217, 243, 106, .7);
}

.capability-practice-final-form > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.capability-practice-final-form small {
  color: rgba(255, 255, 255, .55);
}

.capability-practice-result {
  display: grid;
  gap: 14px;
  margin: 0 24px 24px 73px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .075);
}

.capability-practice-result.is-pass {
  border: 1px solid rgba(217, 243, 106, .45);
}

.capability-practice-result.is-retry {
  border: 1px solid rgba(254, 119, 51, .45);
}

.capability-practice-result > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.capability-practice-result > div:first-child > strong {
  font-size: 30px;
}

.capability-practice-result .capability-practice-dimensions > span {
  background: rgba(255, 255, 255, .08);
}

.capability-practice-result article p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .capability-practice-track-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capability-practice-bank-layout,
  .capability-practice-publish-layout,
  .capability-practice-review-layout {
    grid-template-columns: 1fr;
  }

  .capability-practice-publication-list > article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .capability-practice-hero,
  .capability-practice-review-summary,
  .capability-personal-practice-list > article {
    grid-template-columns: 1fr;
  }

  .capability-practice-track-filter,
  .capability-practice-audience > div,
  .capability-practice-publish-dates,
  .capability-practice-dimensions,
  .capability-practice-session .capability-scenario-options,
  .capability-practice-context-grid {
    grid-template-columns: 1fr;
  }

  .capability-practice-final-form,
  .capability-scenario-question,
  .capability-practice-context-form {
    padding-left: 20px;
  }

  .capability-practice-dialogue-history,
  .capability-practice-result,
  .capability-practice-context-form {
    margin-left: 20px;
  }

  .capability-practice-context-form > div:last-child {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Grouped primary navigation */
.nav-list {
  display: block;
  min-height: 0;
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-desktop-groups {
  display: grid;
  gap: 4px;
}

.nav-mobile-navigation {
  display: none;
}

.nav-group {
  border-radius: 9px;
  transition: background-color 0.18s ease;
}

.nav-group.is-open {
  background: rgba(255, 255, 255, 0.035);
}

.nav-group-toggle {
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(245, 239, 226, 0.74);
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.nav-group-toggle:hover,
.nav-group.has-active > .nav-group-toggle {
  color: #ffffff;
}

.nav-group-toggle:hover {
  background: rgba(255, 255, 255, 0.075);
}

.nav-group-heading,
.nav-group-trailing,
.nav-item-main {
  display: flex;
  min-width: 0;
  align-items: center;
}

.nav-group-heading {
  padding-left: 4px;
}

.nav-group-heading strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-trailing {
  gap: 6px;
}

.nav-group-chevron {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: rgba(245, 239, 226, 0.52);
  font-size: 19px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.16s ease;
}

.nav-group.is-open .nav-group-chevron {
  color: rgba(245, 239, 226, 0.9);
  transform: rotate(90deg);
}

.nav-group-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.22s ease, opacity 0.16s ease;
}

.nav-group-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.nav-group-panel-inner {
  display: grid;
  min-height: 0;
  gap: 2px;
  margin: 0 5px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: padding 0.2s ease, margin 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.nav-group-panel.is-open .nav-group-panel-inner {
  margin: 2px 5px 6px;
  padding: 4px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.14);
}

.nav-child-button,
body[data-theme="light"] .nav-child-button {
  position: relative;
  min-height: 33px;
  padding: 5px 8px 5px 14px;
  border-radius: 7px;
  font-size: 12px;
}

.nav-item-main {
  gap: 8px;
  overflow: hidden;
}

.nav-item-main i {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.42;
}

.nav-child-button.active .nav-item-main i {
  opacity: 0.9;
}

.nav-item-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-child-button .nav-count {
  min-width: 20px;
  padding: 1px 5px;
  font-size: 10px;
}

body[data-theme="neutral"] .nav-group.is-open,
body[data-palette="midnight"] .nav-group.is-open {
  background: rgba(255, 255, 255, 0.035);
}

body[data-theme="neutral"] .nav-group-toggle,
body[data-palette="midnight"] .nav-group-toggle {
  color: rgba(255, 255, 255, 0.74);
}

body[data-theme="neutral"] .nav-group-toggle:hover,
body[data-theme="neutral"] .nav-group.has-active > .nav-group-toggle,
body[data-palette="midnight"] .nav-group-toggle:hover,
body[data-palette="midnight"] .nav-group.has-active > .nav-group-toggle {
  color: #ffffff;
}

body[data-theme="google"] .nav-group.is-open {
  background: #f0f5fb;
}

body[data-theme="google"] .nav-group-toggle {
  color: #3c4043;
}

body[data-theme="google"] .nav-group-toggle:hover,
body[data-theme="google"] .nav-group.has-active > .nav-group-toggle {
  background: #edf2fa;
  color: #3c4043;
}

body[data-theme="google"] .nav-group-chevron {
  color: #78818d;
}

body[data-theme="google"] .nav-group-panel.is-open .nav-group-panel-inner {
  margin: 0 0 6px;
  padding: 4px 5px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

body[data-theme="google"] .nav-child-button,
body[data-theme="google"] .nav-child-button.active {
  border-radius: 8px;
}

@media (max-width: 720px) {
  .sidebar .nav-list,
  body[data-theme="light"] .sidebar .nav-list,
  body[data-theme="neutral"] .sidebar .nav-list,
  body[data-theme="google"] .sidebar .nav-list,
  body[data-palette="midnight"] .sidebar .nav-list {
    display: block;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .nav-desktop-groups {
    display: none;
  }

  .nav-mobile-navigation {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .nav-mobile-groups,
  .nav-mobile-panel {
    display: flex;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-mobile-groups::-webkit-scrollbar,
  .nav-mobile-panel::-webkit-scrollbar {
    display: none;
  }

  .nav-mobile-group-toggle {
    display: flex;
    min-height: 31px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    background: transparent;
    color: rgba(245, 239, 226, 0.74);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
  }

  .nav-mobile-group-toggle.is-open,
  .nav-mobile-group-toggle.has-active {
    border-color: rgba(244, 216, 160, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  .nav-mobile-panels {
    min-width: 0;
  }

  .nav-mobile-panel {
    display: none;
  }

  .nav-mobile-panel.is-open {
    display: flex;
  }

  .sidebar .nav-mobile-panel .nav-child-button,
  body[data-theme="light"] .sidebar .nav-mobile-panel .nav-child-button {
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
  }

  .sidebar .nav-mobile-panel .nav-item-main i {
    display: none;
  }

  body[data-theme="google"] .nav-mobile-group-toggle {
    border-color: #dfe6ef;
    color: #5f6368;
  }

  body[data-theme="google"] .nav-mobile-group-toggle.is-open,
  body[data-theme="google"] .nav-mobile-group-toggle.has-active {
    border-color: #a9c7f7;
    background: #d3e3fd;
    color: #174ea6;
  }

  body[data-theme="google"] .sidebar .nav-mobile-panel .nav-child-button {
    border-color: #dfe6ef;
  }

  body[data-palette="midnight"] .nav-mobile-group-toggle.is-open,
  body[data-palette="midnight"] .nav-mobile-group-toggle.has-active {
    border-color: rgba(177, 250, 99, 0.28);
    background: rgba(177, 250, 99, 0.1);
    color: #b1fa63;
  }
}

/* Final Google login overrides intentionally live last to prevent legacy theme fallbacks. */
body[data-theme="google"] .login-screen {
  background: #f8fafd;
}

body[data-theme="google"] .login-card {
  width: min(460px, 100%);
  padding: 40px 42px 36px;
  border-color: #dadce0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 8px 24px rgba(60, 64, 67, .08);
}

body[data-theme="google"] .login-heading h1 {
  color: #202124;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
}

body[data-theme="google"] .login-card .feishu-login-button,
body[data-theme="google"] .login-card .feishu-login-button:disabled {
  border-color: #dadce0;
  background: #ffffff;
  color: #3c4043;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

body[data-theme="google"] .login-card .feishu-login-button:hover:not(:disabled) {
  border-color: #c7cacf;
  background: #f8fafd;
  color: #202124;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
}

.permission-advanced-settings {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.permission-advanced-settings > summary {
  padding: 16px 18px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.permission-advanced-settings-body {
  display: grid;
  gap: 18px;
  padding: 0 18px 18px;
}

.member-access-directory {
  margin: 0;
}

.member-access-table-wrap td {
  vertical-align: middle;
}

.table-cell-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-theme="google"] .permission-advanced-settings {
  border-color: #dfe3e8;
  background: #ffffff;
}

body[data-theme="google"] .permission-advanced-settings > summary {
  color: #5f6368;
}

@media (max-width: 560px) {
  body[data-theme="google"] .login-card { padding: 30px 24px 26px; }
  body[data-theme="google"] .login-heading h1 { font-size: 27px; }
}