:root {
  --zmtip-ink: #17233d;
  --zmtip-muted: #66738b;
  --zmtip-soft: #edf3ff;
  --zmtip-paper: #ffffff;
  --zmtip-line: rgba(53, 99, 255, 0.14);
  --zmtip-green: #3563ff;
  --zmtip-green-dark: #244de0;
  --zmtip-lime: #ddfc3d;
  --zmtip-orange: #ff775c;
  --zmtip-blue: #3563ff;
  --zmtip-red: #ea4d5e;
  --zmtip-success: #15b979;
  --zmtip-purple: #8066f6;
  --zmtip-canvas: #f4f7ff;
  --zmtip-shadow: 0 22px 60px rgba(45, 78, 150, 0.12);
  --zmtip-shadow-small: 0 10px 28px rgba(45, 78, 150, 0.09);
  --zmtip-shadow-border:
    0 0 0 1px rgba(53, 99, 255, 0.1),
    0 2px 3px -2px rgba(42, 72, 140, 0.14),
    0 10px 28px rgba(45, 78, 150, 0.07);
  --zmtip-shadow-border-hover:
    0 0 0 1px rgba(53, 99, 255, 0.2),
    0 3px 5px -2px rgba(42, 72, 140, 0.18),
    0 16px 36px rgba(45, 78, 150, 0.11);
}

.zmt-ip-blueprint-planner-page {
  background: var(--zmtip-canvas);
}

/* Break out of the theme's article container: this tool is a viewport workspace. */
body.zmt-ip-blueprint-planner-page > main.container,
body.zmt-ip-blueprint-planner-page .content-wrap,
body.zmt-ip-blueprint-planner-page .content-layout,
body.zmt-ip-blueprint-planner-page .page-article,
body.zmt-ip-blueprint-planner-page .wp-posts-content {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

body.zmt-ip-blueprint-planner-page > main.container {
  margin-top: 0;
}

body.zmt-ip-blueprint-planner-page .page-article {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.zmtip-shell,
.zmtip-shell * {
  box-sizing: border-box;
}

.zmtip-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto 80px;
  padding: clamp(12px, 1.35vw, 24px);
  color: var(--zmtip-ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.zmtip-shell h1,
.zmtip-shell h2,
.zmtip-shell h3,
.zmtip-shell h4,
.zmtip-shell p {
  margin-top: 0;
}

.zmtip-shell h1,
.zmtip-shell h2,
.zmtip-shell h3,
.zmtip-shell h4 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.zmtip-shell p {
  text-wrap: pretty;
}

.zmtip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.78fr);
  gap: clamp(24px, 2.4vw, 42px);
  max-height: 360px;
  min-height: 208px;
  margin-bottom: 18px;
  padding: 24px 28px;
  overflow: hidden;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 8%, rgba(221, 252, 61, 0.44), transparent 24%),
    radial-gradient(circle at 68% 92%, rgba(128, 102, 246, 0.16), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #eef4ff 58%, #f8ffdf 100%);
  box-shadow: var(--zmtip-shadow);
  color: var(--zmtip-ink);
  opacity: 1;
  transform: translateY(0);
  transition-property: max-height, min-height, margin-bottom, padding-top, padding-bottom, opacity, transform, border-width;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-hero-copy {
  align-self: center;
  max-width: 900px;
}

.zmtip-hero-copy > .zmtip-hero-actions {
  margin-top: 18px;
  flex-wrap: nowrap;
}

.zmtip-eyebrow,
.zmtip-step > header > span,
.zmtip-blueprint-cover > span,
.zmtip-blueprint-module > header small {
  color: var(--zmtip-blue);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.zmtip-hero h1 {
  max-width: 850px;
  margin: 9px 0 12px;
  font-size: clamp(46px, 4.1vw, 64px);
  line-height: 1;
}

.zmtip-hero-title > p {
  max-width: 740px;
  margin-bottom: 0;
  color: var(--zmtip-muted);
  line-height: 1.6;
}

.zmtip-hero-title > p strong,
.zmtip-hero-title > p span {
  display: block;
}

.zmtip-hero-title > p strong {
  color: var(--zmtip-ink);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.45;
}

.zmtip-hero-title > p span {
  max-width: 720px;
  margin-top: 4px;
  font-size: clamp(13px, 0.95vw, 15px);
}

.zmtip-hero-actions,
.zmtip-command-actions,
.zmtip-material-actions,
.zmtip-blueprint-actions,
.zmtip-export-actions,
.zmtip-step-actions,
.zmtip-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zmtip-hero-map {
  align-self: center;
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--zmtip-shadow-border);
  backdrop-filter: blur(14px);
}

.zmtip-hero-map-head > span,
.zmtip-projects-head span,
.zmtip-command [data-zmtip-project-kicker],
.zmtip-summary > header span,
.zmtip-route-result span,
.zmtip-data-grid article > span,
.zmtip-method-grid article > span {
  display: block;
  color: var(--zmtip-muted);
  font-size: 12px;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zmtip-hero-map-head > span {
  color: var(--zmtip-blue);
}

.zmtip-hero-map-head > strong {
  display: block;
  margin: 3px 0 9px;
  font-size: 16px;
  line-height: 1.4;
}

.zmtip-hero-map ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zmtip-hero-map li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 7px 9px;
  border: 0;
  border-radius: 13px;
  background: #f7f9ff;
  color: var(--zmtip-ink);
}

.zmtip-hero-map li:nth-child(2) { background: #f4f0ff; }
.zmtip-hero-map li:nth-child(3) { background: #fff2ed; }
.zmtip-hero-map li:nth-child(4) { background: #effbf5; }

.zmtip-hero-map li > b {
  color: var(--zmtip-blue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.zmtip-hero-map li:nth-child(2) > b { color: var(--zmtip-purple); }
.zmtip-hero-map li:nth-child(3) > b { color: var(--zmtip-orange); }
.zmtip-hero-map li:nth-child(4) > b { color: var(--zmtip-success); }

.zmtip-hero-map li span,
.zmtip-hero-map li small {
  display: block;
}

.zmtip-hero-map li span {
  font-size: 13px;
  font-weight: 760;
}

.zmtip-hero-map li small {
  margin-top: 2px;
  color: var(--zmtip-muted);
  font-size: 10px;
  font-weight: 560;
}

.zmtip-button,
.zmtip-icon-button,
.zmtip-dialog-close,
.zmtip-project-switcher,
.zmtip-command-more summary,
.zmtip-command-more button,
.zmtip-phase-tabs button,
.zmtip-step-nav button,
.zmtip-project-item,
.zmtip-project-card {
  min-height: 44px;
  border: 0;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition-property: transform, border-color, background-color, color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.zmtip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 740;
  text-decoration: none;
}

.zmtip-button.is-primary {
  background: var(--zmtip-blue);
  color: #fff;
  box-shadow: 0 9px 20px rgba(53, 99, 255, 0.22);
}

.zmtip-button.is-accent {
  background: var(--zmtip-lime);
  color: #17233d;
  box-shadow: 0 9px 20px rgba(179, 211, 24, 0.2);
}

.zmtip-button.is-compact {
  min-height: 40px;
  padding: 0 14px 0 12px;
  gap: 5px;
}

.zmtip-button.is-secondary {
  border-color: transparent;
  background: #fff;
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
}

.zmtip-hero .zmtip-button.is-secondary,
.zmtip-button.is-ghost {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
}

.zmtip-command .zmtip-button.is-ghost {
  border-color: transparent;
  background: #f8faff;
  box-shadow: 0 0 0 1px rgba(53, 99, 255, 0.1);
  color: var(--zmtip-muted);
}

@media (hover: hover) {
  .zmtip-button:hover,
  .zmtip-icon-button:hover,
  .zmtip-dialog-close:hover {
    transform: translateY(-1px);
  }

  .zmtip-button.is-secondary:hover,
  .zmtip-button.is-accent:hover,
  .zmtip-icon-button:hover,
  .zmtip-dialog-close:hover {
    box-shadow: var(--zmtip-shadow-border-hover);
  }

  .zmtip-dialog-close:hover {
    background: #fff;
    color: var(--zmtip-ink);
  }

  .zmtip-button.is-primary:hover { background: #244de0; }
}

.zmtip-button:active,
.zmtip-icon-button:active,
.zmtip-dialog-close:active,
.zmtip-project-switcher:active,
.zmtip-command-more summary:active,
.zmtip-command-more button:active,
.zmtip-phase-tabs button:active,
.zmtip-step-nav button:active,
.zmtip-project-item:active,
.zmtip-project-card:active {
  transform: scale(0.96);
}

.zmtip-shell button:focus-visible,
.zmtip-shell a:focus-visible,
.zmtip-shell input:focus-visible,
.zmtip-shell textarea:focus-visible,
.zmtip-shell select:focus-visible,
.zmtip-shell summary:focus-visible {
  outline: 3px solid rgba(53, 99, 255, 0.34);
  outline-offset: 3px;
}

.zmtip-button:disabled,
.zmtip-icon-button:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.zmtip-gate {
  max-width: 620px;
  margin: 70px auto;
  padding: 48px;
  border: 1px solid var(--zmtip-line);
  border-radius: 26px;
  background: var(--zmtip-paper);
  box-shadow: var(--zmtip-shadow);
  text-align: center;
}

.zmtip-gate > span {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--zmtip-lime);
}

.zmtip-app {
  display: block;
}

.zmtip-workspace,
.zmtip-summary {
  border: 0;
  background: var(--zmtip-paper);
  box-shadow: var(--zmtip-shadow-border);
}

.zmtip-projects-head,
.zmtip-command,
.zmtip-summary > header,
.zmtip-material header,
.zmtip-direction-card > header > div,
.zmtip-blueprint-head,
.zmtip-blueprint-module > header,
.zmtip-pillar-grid article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.zmtip-projects-head strong {
  display: block;
  margin: 3px 0 0;
  font-size: 25px;
  line-height: 1.2;
}

.zmtip-projects-head > div > span,
.zmtip-projects-head > div > small {
  display: block;
  color: var(--zmtip-blue);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.zmtip-projects-head > div > small {
  margin-top: 6px;
  color: var(--zmtip-muted);
  font-weight: 650;
  letter-spacing: 0;
}

.zmtip-icon-button {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
  font-size: 21px;
}

.zmtip-project-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  margin: 2px -4px 0;
  padding: 4px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 99, 255, 0.22) transparent;
}

.zmtip-project-item {
  width: 100%;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--zmtip-ink);
  text-align: left;
}

.zmtip-project-item strong,
.zmtip-project-item small,
.zmtip-project-card strong,
.zmtip-project-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zmtip-project-item small,
.zmtip-project-card small {
  margin-top: 5px;
  color: var(--zmtip-muted);
}

.zmtip-project-item:hover,
.zmtip-project-item.is-active,
.zmtip-project-card:hover,
.zmtip-project-card.is-active {
  border-color: rgba(53, 99, 255, 0.24);
  background: #f8faff;
}

.zmtip-project-card.is-active {
  background: #f7f9ff;
  box-shadow:
    inset 4px 0 0 var(--zmtip-lime),
    0 0 0 2px var(--zmtip-blue),
    0 12px 28px rgba(53, 99, 255, 0.14);
}

.zmtip-project-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 86px;
  padding: 13px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
  text-align: left;
}

.zmtip-project-card > .zmtip-project-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #e6edff, #f3efff);
  color: var(--zmtip-blue);
  font-weight: 780;
}

.zmtip-project-card:nth-child(3n + 2) > .zmtip-project-avatar { background: #fff0ea; color: var(--zmtip-orange); }
.zmtip-project-card:nth-child(3n) > .zmtip-project-avatar { background: #effbf5; color: var(--zmtip-success); }

.zmtip-project-card-copy > em {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  color: var(--zmtip-muted);
  font-size: 10px;
  font-style: normal;
}

.zmtip-project-card-copy > em b {
  padding: 3px 6px;
  border-radius: 99px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  font-size: 10px;
  font-weight: 760;
}

.zmtip-project-card-copy > em span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmtip-project-state {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--zmtip-blue);
}

.zmtip-project-state > i {
  grid-area: 1 / 1;
  font-style: normal;
  font-weight: 780;
  transition-property: opacity, transform, filter;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-project-state > .is-check {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

.zmtip-project-card.is-active .zmtip-project-state > .is-arrow {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

.zmtip-project-card.is-active .zmtip-project-state > .is-check {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.zmtip-project-empty {
  padding: 30px 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 8%, rgba(221, 252, 61, 0.36), transparent 28%),
    #fff;
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-muted);
  text-align: center;
}

.zmtip-project-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 15px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  font-size: 25px;
}

.zmtip-project-empty strong,
.zmtip-project-empty p {
  display: block;
  margin: 6px 0 0;
}

.zmtip-project-empty p {
  font-size: 11px;
  line-height: 1.55;
}

.zmtip-project-empty .zmtip-button {
  width: 100%;
  margin-top: 16px;
}

.zmtip-project-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.zmtip-project-note span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #e4ecff;
  color: var(--zmtip-blue);
  font-size: 10px;
}

.zmtip-project-note p {
  margin: 0;
  color: var(--zmtip-muted);
  font-size: 10px;
  line-height: 1.5;
}

.zmtip-project-note b {
  display: block;
  color: var(--zmtip-ink);
  font-size: 11px;
}

.zmtip-project-drawer {
  inset: 0 auto 0 0;
  width: min(390px, 34vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translateX(-100%);
  transition-property: opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-project-drawer[open] {
  display: block;
}

.zmtip-project-drawer[open].is-visible {
  opacity: 1;
  transform: translateX(0);
}

.zmtip-project-drawer::backdrop {
  background: rgba(31, 48, 91, 0.24);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition-property: opacity;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.zmtip-project-drawer.is-visible::backdrop {
  opacity: 1;
}

.zmtip-project-drawer-inner {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 16px;
  height: 100%;
  padding: 24px;
  overflow: hidden;
  border-radius: 0 28px 28px 0;
  background:
    radial-gradient(circle at 88% 5%, rgba(221, 252, 61, 0.42), transparent 23%),
    linear-gradient(160deg, #ffffff 0%, #f6f8ff 68%, #eef4ff 100%);
  box-shadow: 18px 0 54px rgba(35, 61, 124, 0.18);
}

.zmtip-project-drawer-new {
  width: 100%;
  min-height: 50px;
  gap: 7px;
}

.zmtip-project-search {
  position: relative;
  display: block;
}

.zmtip-project-search[hidden] {
  display: none;
}

.zmtip-project-search svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--zmtip-muted);
  stroke-linecap: round;
  stroke-width: 1.7;
  transform: translateY(-50%);
  pointer-events: none;
}

.zmtip-project-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px 0 43px;
  border: 1px solid rgba(53, 99, 255, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--zmtip-ink);
  font: inherit;
  font-size: 13px;
  outline: 0;
  transition-property: border-color, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.zmtip-project-search input:focus {
  border-color: var(--zmtip-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(53, 99, 255, 0.12);
}

.zmtip-workspace {
  min-width: 0;
  min-height: calc(100vh - 32px);
  border-radius: 24px;
  overflow: clip;
}

.zmtip-command {
  min-height: 94px;
  padding: 14px clamp(18px, 1.7vw, 28px);
  border-bottom: 1px solid var(--zmtip-line);
  background: #fff;
}

.zmtip-blueprint-head h3 {
  margin: 4px 0 5px;
}

.zmtip-blueprint-head p {
  margin: 0;
  color: var(--zmtip-muted);
  font-size: 13px;
}

.zmtip-project-context {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.zmtip-project-switcher {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  width: clamp(300px, 29vw, 410px);
  min-height: 64px;
  padding: 9px 10px 9px 9px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #f7f9ff, #ffffff);
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
  text-align: left;
}

.zmtip-project-switcher-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--zmtip-blue), var(--zmtip-purple));
  color: #fff;
  font-size: 13px;
  font-weight: 820;
  letter-spacing: -0.02em;
  text-transform: none;
  box-shadow: 0 8px 18px rgba(53, 99, 255, 0.2);
}

.zmtip-project-switcher-copy {
  display: block;
  min-width: 0;
}

.zmtip-project-switcher-copy > small,
.zmtip-project-switcher-copy > strong,
.zmtip-project-switcher-copy > em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmtip-project-switcher-copy > small {
  color: var(--zmtip-blue);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.zmtip-project-switcher-copy > strong {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.3;
}

.zmtip-project-switcher-copy > em {
  margin-top: 1px;
  color: var(--zmtip-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.zmtip-project-switcher-caret {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  transition-property: background-color, transform;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.zmtip-project-switcher-caret svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.zmtip-project-switcher[aria-expanded="true"] {
  background: #f3f6ff;
  box-shadow: 0 0 0 2px rgba(53, 99, 255, 0.22), 0 14px 32px rgba(53, 99, 255, 0.1);
}

.zmtip-project-switcher[aria-expanded="true"] .zmtip-project-switcher-caret {
  background: var(--zmtip-blue);
  color: #fff;
  transform: rotate(180deg);
}

.zmtip-command-new {
  min-height: 52px;
  padding-right: 17px;
  padding-left: 15px;
  white-space: nowrap;
}

.zmtip-project-actions {
  flex-wrap: nowrap;
  align-items: center;
}

.zmtip-shell:not(.has-active-project) .zmtip-project-actions {
  display: none;
}

.zmtip-command-more {
  position: relative;
}

.zmtip-command-more summary {
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 5px;
  place-items: center;
  border-radius: 14px;
  background: #f8faff;
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-muted);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: 0.08em;
  list-style: none;
}

.zmtip-command-more summary::-webkit-details-marker {
  display: none;
}

.zmtip-command-more > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 176px;
  padding: 7px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(53, 99, 255, 0.1), 0 16px 36px rgba(45, 78, 150, 0.16);
}

.zmtip-command-more button {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #fff2ed;
  color: #c94832;
  font-size: 13px;
  font-weight: 720;
  text-align: left;
}

.zmtip-workspace-empty {
  display: grid;
  min-height: 520px;
  padding: 72px 28px;
  place-items: center;
  place-content: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(221, 252, 61, 0.23), transparent 20%),
    radial-gradient(circle at 72% 68%, rgba(128, 102, 246, 0.1), transparent 22%),
    linear-gradient(160deg, #ffffff, #f8faff);
  text-align: center;
}

.zmtip-shell.has-active-project .zmtip-workspace-empty {
  display: none;
}

.zmtip-shell:not(.has-active-project) .zmtip-phase-tabs,
.zmtip-shell:not(.has-active-project) .zmtip-view {
  display: none;
}

.zmtip-workspace-empty-mark {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #e7edff, #f4f0ff);
  box-shadow: 0 13px 28px rgba(53, 99, 255, 0.13);
  color: var(--zmtip-blue);
  font-size: 34px;
}

.zmtip-workspace-empty h2 {
  max-width: 700px;
  margin: 8px 0 12px;
  font-size: clamp(29px, 2.8vw, 40px);
}

.zmtip-workspace-empty > p {
  max-width: 680px;
  margin: 0 0 24px;
  color: var(--zmtip-muted);
  font-size: 15px;
  line-height: 1.8;
}

.zmtip-workspace-empty > .zmtip-button {
  min-height: 52px;
  padding: 0 24px;
}

.zmtip-workspace-empty > div {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.zmtip-workspace-empty > div span {
  padding: 6px 10px;
  border-radius: 99px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  font-size: 11px;
  font-weight: 720;
}

.zmtip-workspace-empty > div span:nth-child(2) { background: #f3efff; color: var(--zmtip-purple); }
.zmtip-workspace-empty > div span:nth-child(3) { background: #fff1ed; color: var(--zmtip-orange); }

.zmtip-workspace-empty > small {
  max-width: 560px;
  margin-top: 14px;
  color: var(--zmtip-muted);
  font-size: 11px;
}

[data-zmtip-save-status] {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 22px;
  font-variant-numeric: tabular-nums;
}

[data-zmtip-save-status]::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #9aa29c;
  box-shadow: 0 0 0 4px rgba(154, 162, 156, 0.1);
  content: "";
  transition-property: background-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

[data-zmtip-save-status][data-mode="saved"]::before,
[data-zmtip-save-status][data-mode="ready"]::before {
  background: var(--zmtip-success);
  box-shadow: 0 0 0 4px rgba(21, 185, 121, 0.11);
}

[data-zmtip-save-status][data-mode="saving"]::before {
  background: var(--zmtip-orange);
  box-shadow: 0 0 0 4px rgba(243, 109, 63, 0.12);
  transform: scale(1.14);
}

[data-zmtip-save-status][data-mode="error"]::before {
  background: var(--zmtip-red);
  box-shadow: 0 0 0 4px rgba(183, 67, 60, 0.12);
}

.zmtip-phase-tabs {
  position: sticky;
  z-index: 16;
  top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--zmtip-line);
  background: rgba(248, 250, 255, 0.94);
  backdrop-filter: blur(18px);
}

.zmtip-phase-tabs button {
  --zmtip-phase-color: var(--zmtip-blue);
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--zmtip-muted);
  text-align: left;
  box-shadow: 0 0 0 1px rgba(53, 99, 255, 0.08);
}

.zmtip-phase-tabs button:nth-child(2) { --zmtip-phase-color: var(--zmtip-purple); }
.zmtip-phase-tabs button:nth-child(3) { --zmtip-phase-color: var(--zmtip-orange); }

.zmtip-phase-index {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #edf3ff;
  color: var(--zmtip-phase-color);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zmtip-phase-index i,
.zmtip-phase-index b {
  grid-area: 1 / 1;
  font-style: normal;
  transition-property: opacity, transform, filter;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-phase-index b {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

.zmtip-phase-copy strong,
.zmtip-phase-copy small {
  display: block;
}

.zmtip-phase-copy strong {
  color: var(--zmtip-ink);
  font-size: 14px;
}

.zmtip-phase-copy small {
  margin-top: 3px;
  color: var(--zmtip-muted);
  font-size: 10px;
}

.zmtip-phase-tabs button > em {
  padding: 4px 7px;
  border-radius: 99px;
  background: #f1f4fa;
  color: var(--zmtip-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 720;
  white-space: nowrap;
}

.zmtip-phase-tabs button.is-active {
  background: #edf3ff;
  box-shadow: 0 0 0 2px var(--zmtip-phase-color), 0 9px 20px rgba(53, 99, 255, 0.1);
  color: var(--zmtip-phase-color);
}

.zmtip-phase-tabs button:nth-child(2).is-active { background: #f3efff; }
.zmtip-phase-tabs button:nth-child(3).is-active { background: #fff1ed; }
.zmtip-phase-tabs button.is-active .zmtip-phase-index { background: var(--zmtip-phase-color); color: #fff; }
.zmtip-phase-tabs button.is-active > em { background: var(--zmtip-phase-color); color: #fff; }
.zmtip-phase-tabs button.is-complete:not(.is-active) .zmtip-phase-index { background: var(--zmtip-success); color: #fff; }
.zmtip-phase-tabs button.is-complete:not(.is-active) .zmtip-phase-index i { opacity: 0; filter: blur(4px); transform: scale(0.25); }
.zmtip-phase-tabs button.is-complete:not(.is-active) .zmtip-phase-index b { opacity: 1; filter: blur(0); transform: scale(1); }
.zmtip-phase-tabs button.is-complete:not(.is-active) > em { background: #e9f9f1; color: #078b58; }

.zmtip-view {
  display: none;
}

.zmtip-view.is-active {
  display: block;
}

.zmtip-interview-layout {
  display: grid;
  grid-template-columns: clamp(176px, 14vw, 204px) minmax(620px, 1fr) clamp(270px, 21vw, 312px);
  min-height: 720px;
}

.zmtip-step-nav {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 112px);
  padding: 22px 13px;
  overflow: auto;
  border-right: 1px solid var(--zmtip-line);
  background: #f8faff;
  scrollbar-width: thin;
}

.zmtip-summary > span {
  display: block;
  color: var(--zmtip-green);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zmtip-step-nav button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  width: 100%;
  margin-bottom: 4px;
  min-height: 62px;
  padding: 10px;
  border-radius: 14px;
  background: transparent;
  color: var(--zmtip-muted);
  text-align: left;
}

.zmtip-step-nav button > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  grid-row: 1 / span 2;
  border-radius: 9px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.zmtip-step-nav button b {
  color: inherit;
  font-size: 14px;
}

.zmtip-step-nav button small {
  margin-top: 3px;
  font-size: 11px;
}

.zmtip-step-nav button.is-active {
  background: #edf3ff;
  box-shadow: inset 4px 0 0 var(--zmtip-blue), 0 0 0 1px rgba(53, 99, 255, 0.13);
  color: var(--zmtip-green-dark);
}

.zmtip-step-nav button.is-active > span { background: var(--zmtip-blue); color: #fff; }
.zmtip-step-nav button.is-complete:not(.is-active) > span { background: #e9f9f1; color: var(--zmtip-success); }

.zmtip-form {
  min-width: 0;
  padding: clamp(28px, 2.6vw, 46px);
  background: #fbfcff;
}

.zmtip-step > header {
  margin-bottom: 28px;
}

.zmtip-step > header > span {
  color: var(--zmtip-green);
}

.zmtip-step > header h3 {
  margin: 9px 0 8px;
  font-size: clamp(25px, 2.2vw, 35px);
  line-height: 1.18;
}

.zmtip-step > header p {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--zmtip-muted);
  line-height: 1.7;
}

.zmtip-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.zmtip-field-grid > .is-wide {
  grid-column: 1 / -1;
}

.zmtip-form label > span,
.zmtip-form legend,
.zmtip-dialog label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--zmtip-ink);
  font-size: 14px;
  font-weight: 740;
}

.zmtip-field-grid > label,
.zmtip-field-grid > fieldset,
.zmtip-material-import > label {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--zmtip-shadow-border);
  transition-property: background-color, box-shadow, transform;
  transition-duration: 170ms;
  transition-timing-function: ease-out;
}

.zmtip-field-grid > label:has(input:focus, textarea:focus, select:focus),
.zmtip-field-grid > fieldset:has(input:focus),
.zmtip-material-import > label:has(textarea:focus) {
  background: #f7f9ff;
  box-shadow: 0 0 0 2px rgba(53, 99, 255, 0.2), 0 14px 32px rgba(53, 99, 255, 0.1);
}

.zmtip-field-grid > label.is-filled::after,
.zmtip-material-import > label.is-filled::after {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zmtip-success);
  box-shadow: 0 0 0 4px rgba(21, 185, 121, 0.1);
  content: "";
}

.zmtip-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.zmtip-form textarea,
.zmtip-form select,
.zmtip-dialog input,
.zmtip-dialog textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(53, 99, 255, 0.16);
  border-radius: 14px;
  background: #f8faff;
  color: var(--zmtip-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.zmtip-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.zmtip-form textarea:hover,
.zmtip-form select:hover,
.zmtip-dialog input:hover,
.zmtip-dialog textarea:hover {
  border-color: rgba(53, 99, 255, 0.38);
  background: #fff;
}

.zmtip-form textarea,
.zmtip-dialog textarea {
  min-height: 112px;
}

.zmtip-form input:focus,
.zmtip-form textarea:focus,
.zmtip-form select:focus,
.zmtip-dialog input:focus,
.zmtip-dialog textarea:focus {
  border-color: var(--zmtip-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(53, 99, 255, 0.12);
}

.zmtip-form input:disabled,
.zmtip-form textarea:disabled,
.zmtip-form select:disabled {
  border-color: rgba(102, 115, 139, 0.12);
  background: #f1f4fa;
  color: #8c98ad;
  cursor: not-allowed;
}

.zmtip-form fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
}

.zmtip-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.zmtip-checks label,
.zmtip-fact label {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid rgba(53, 99, 255, 0.14);
  border-radius: 13px;
  background: #fff;
  color: var(--zmtip-ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition-property: border-color, background-color, color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.zmtip-checks label:has(input:checked),
.zmtip-fact label:has(input:checked),
.zmtip-activation-checks > label:has(input:checked) {
  border-color: rgba(53, 99, 255, 0.42);
  background: #edf3ff;
  box-shadow: 0 0 0 3px rgba(53, 99, 255, 0.1);
  color: var(--zmtip-green-dark);
}

.zmtip-checks input,
.zmtip-fact input,
.zmtip-activation-checks input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1.5px solid #aab8d2;
  border-radius: 6px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  cursor: pointer;
  transition-property: border-color, background-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.zmtip-checks input:checked,
.zmtip-fact input:checked,
.zmtip-activation-checks input:checked {
  border-color: var(--zmtip-blue);
  background-color: var(--zmtip-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.3 11.5 13 4.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.zmtip-fact input[type="radio"] {
  border-radius: 50%;
}

.zmtip-fact input[type="radio"]:checked {
  border: 6px solid var(--zmtip-blue);
  background-color: #fff;
  background-image: none;
}

.zmtip-checks label:has(input:focus-visible),
.zmtip-fact label:has(input:focus-visible),
.zmtip-activation-checks > label:has(input:focus-visible) {
  outline: 3px solid rgba(53, 99, 255, 0.28);
  outline-offset: 2px;
}

.zmtip-checks input:focus-visible,
.zmtip-fact input:focus-visible,
.zmtip-activation-checks input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
}

@media (hover: hover) {
  .zmtip-checks label:hover,
  .zmtip-fact label:hover,
  .zmtip-activation-checks > label:hover {
    border-color: rgba(53, 99, 255, 0.35);
    background: #f8faff;
  }
}

/* Interview field system: question, guidance, answer and completion state. */
.zmtip-form {
  background:
    radial-gradient(circle at 100% 0, rgba(128, 102, 246, 0.07), transparent 24%),
    linear-gradient(180deg, #fcfdff 0%, #f7f9ff 100%);
}

.zmtip-step > header {
  position: relative;
  margin-bottom: 32px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(53, 99, 255, 0.1);
}

.zmtip-step > header > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf3ff;
  color: var(--zmtip-blue);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.zmtip-step > header h3 {
  max-width: 780px;
  margin: 12px 0 9px;
  font-size: clamp(30px, 2.35vw, 40px);
  line-height: 1.15;
  text-wrap: balance;
}

.zmtip-step > header p {
  max-width: 760px;
  color: #71809a;
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.zmtip-step-completion {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f5fb;
  color: #7d8aa2;
  font-size: 11px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition-property: background-color, color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.zmtip-step-completion.is-complete {
  background: #e7f9f0;
  box-shadow: 0 0 0 1px rgba(21, 185, 121, 0.14);
  color: #078b58;
}

.zmtip-field-grid {
  gap: 18px;
}

.zmtip-field-group {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
  margin: 12px 0 -2px;
  padding-top: 4px;
}

.zmtip-field-group:first-child {
  margin-top: 0;
}

.zmtip-field-group-icon,
.zmtip-field-icon,
.zmtip-choice-icon {
  display: inline-grid;
  place-items: center;
  color: var(--zmtip-field-accent, var(--zmtip-blue));
}

.zmtip-field-group-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--zmtip-field-soft, #edf3ff);
}

.zmtip-field-group-icon svg {
  width: 16px;
  height: 16px;
}

.zmtip-field-group > div {
  min-width: 0;
}

.zmtip-field-group b,
.zmtip-field-group small {
  display: block;
}

.zmtip-field-group b {
  color: var(--zmtip-ink);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.28;
}

.zmtip-field-group small {
  margin-top: 2px;
  color: #8491a8;
  font-size: 12px;
  line-height: 1.45;
  text-wrap: pretty;
}

.zmtip-field-group[data-zmtip-tone="blue"],
.zmtip-question-card[data-zmtip-tone="blue"] { --zmtip-field-accent: #3563ff; --zmtip-field-soft: #edf3ff; }
.zmtip-field-group[data-zmtip-tone="violet"],
.zmtip-question-card[data-zmtip-tone="violet"] { --zmtip-field-accent: #8066f6; --zmtip-field-soft: #f2efff; }
.zmtip-field-group[data-zmtip-tone="green"],
.zmtip-question-card[data-zmtip-tone="green"] { --zmtip-field-accent: #15b979; --zmtip-field-soft: #eaf9f2; }
.zmtip-field-group[data-zmtip-tone="orange"],
.zmtip-question-card[data-zmtip-tone="orange"] { --zmtip-field-accent: #f49a36; --zmtip-field-soft: #fff5e7; }
.zmtip-field-group[data-zmtip-tone="coral"],
.zmtip-question-card[data-zmtip-tone="coral"] { --zmtip-field-accent: #ff725e; --zmtip-field-soft: #fff0ec; }

.zmtip-field-grid > .zmtip-question-card,
.zmtip-material-import > .zmtip-question-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fcfdff 100%);
  box-shadow:
    0 0 0 1px rgba(53, 99, 255, 0.1),
    0 2px 5px rgba(42, 72, 140, 0.04),
    0 12px 28px rgba(45, 78, 150, 0.055);
  transition-property: background-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-field-grid > .zmtip-question-card:has(input:focus, textarea:focus, select:focus),
.zmtip-material-import > .zmtip-question-card:has(textarea:focus) {
  background: linear-gradient(145deg, #ffffff 0%, var(--zmtip-field-soft, #f7f9ff) 180%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--zmtip-field-accent, #3563ff) 25%, transparent),
    0 8px 18px rgba(53, 99, 255, 0.08),
    0 20px 44px rgba(45, 78, 150, 0.1);
  transform: translateY(-1px);
}

.zmtip-field-grid > .zmtip-question-card.is-filled::after,
.zmtip-material-import > .zmtip-question-card.is-filled::after {
  content: none;
}

.zmtip-field-head {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  margin-bottom: 7px;
}

.zmtip-field-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--zmtip-field-soft, #edf3ff);
}

.zmtip-field-icon svg {
  width: 19px;
  height: 19px;
}

.zmtip-field-title {
  min-width: 0;
  color: var(--zmtip-ink);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.42;
  text-wrap: balance;
}

.zmtip-field-status {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  color: #078b58;
  font-size: 11px;
  font-weight: 760;
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transform: scale(0.25);
  transform-origin: right center;
  transition-property: opacity, filter, transform;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.zmtip-question-card.is-filled .zmtip-field-status {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.zmtip-field-status-icon {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #dff8eb;
}

.zmtip-field-status-icon svg {
  width: 12px;
  height: 12px;
}

.zmtip-field-hint {
  min-height: 20px;
  margin: 0 0 12px;
  color: #7a879e;
  font-size: 12px;
  line-height: 1.6;
  text-wrap: pretty;
}

.zmtip-question-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.zmtip-question-card textarea,
.zmtip-question-card select {
  min-height: 54px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: #f7f9ff;
  box-shadow: inset 0 0 0 1px rgba(53, 99, 255, 0.13);
  color: var(--zmtip-ink);
  font-size: 16px;
  line-height: 1.7;
  transition-property: background-color, box-shadow, color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.zmtip-question-card textarea {
  min-height: 104px;
  resize: vertical;
}

.zmtip-question-card.is-reflection textarea {
  min-height: 136px;
}

.zmtip-question-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.zmtip-question-card textarea:hover,
.zmtip-question-card select:hover {
  background: #fbfcff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zmtip-field-accent, #3563ff) 42%, transparent);
}

.zmtip-question-card input:focus,
.zmtip-question-card textarea:focus,
.zmtip-question-card select:focus {
  background: #fff;
  box-shadow:
    inset 0 0 0 1.5px var(--zmtip-field-accent, #3563ff),
    0 0 0 4px color-mix(in srgb, var(--zmtip-field-accent, #3563ff) 12%, transparent);
}

.zmtip-question-card input::placeholder,
.zmtip-question-card textarea::placeholder {
  color: #9aa8c0;
  opacity: 1;
}

.zmtip-field-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 20px;
  margin-top: 7px;
  color: #93a0b5;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.zmtip-question-card .zmtip-checks {
  gap: 10px;
}

.zmtip-question-card .zmtip-checks label {
  display: grid;
  grid-template-columns: 20px 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: #f7f9ff;
  box-shadow: inset 0 0 0 1px rgba(53, 99, 255, 0.12);
  color: var(--zmtip-ink);
}

.zmtip-question-card .zmtip-checks label:has(input:checked) {
  background: var(--zmtip-field-soft, #edf3ff);
  box-shadow:
    inset 0 0 0 1.5px var(--zmtip-field-accent, #3563ff),
    0 0 0 3px color-mix(in srgb, var(--zmtip-field-accent, #3563ff) 10%, transparent);
  color: var(--zmtip-ink);
}

.zmtip-question-card .zmtip-checks input {
  width: 20px;
  min-width: 20px;
  height: 20px;
}

.zmtip-choice-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #fff;
}

.zmtip-choice-icon svg {
  width: 14px;
  height: 14px;
}

.zmtip-choice-copy {
  min-width: 0;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
}

.zmtip-question-card .zmtip-checks label:has(input:checked) .zmtip-choice-icon {
  background: #fff;
}

.zmtip-question-card .zmtip-checks label:active {
  transform: scale(0.96);
}

.zmtip-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.zmtip-followups {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}

.zmtip-followups:not(:empty) {
  padding: 18px;
  border-left: 4px solid var(--zmtip-orange);
  border-radius: 0 14px 14px 0;
  background: #fff2ed;
}

.zmtip-followups header p {
  margin: 4px 0 0;
  color: var(--zmtip-muted);
  font-size: 12px;
}

.zmtip-material-import,
.zmtip-material,
.zmtip-route-result,
.zmtip-direction-card,
.zmtip-blueprint-module {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--zmtip-shadow-border);
}

.zmtip-material-import {
  margin-bottom: 18px;
  padding: 18px;
}

.zmtip-material-actions {
  margin-top: 12px;
}

.zmtip-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px dashed #aeb9b0;
  border-radius: 14px;
  background: #fafbf9;
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
}

.zmtip-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}

.zmtip-material-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 24px;
}

.zmtip-material {
  padding: 16px;
}

.zmtip-material header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zmtip-material header > div > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--zmtip-soft);
  color: var(--zmtip-green);
  font-weight: 800;
}

.zmtip-material header strong,
.zmtip-material header small {
  display: block;
  max-width: 540px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmtip-material header small {
  margin-top: 3px;
  color: var(--zmtip-muted);
  font-size: 11px;
}

.zmtip-facts {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.zmtip-fact {
  padding: 13px;
  border-radius: 12px;
  background: #f8faff;
}

.zmtip-fact p {
  margin-bottom: 9px;
  line-height: 1.65;
}

.zmtip-fact > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.zmtip-step-actions {
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--zmtip-line);
}

.zmtip-form-footer {
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--zmtip-line);
}

.zmtip-form-footer > div {
  min-width: 170px;
  color: var(--zmtip-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.zmtip-form-footer .zmtip-progress {
  width: 170px;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6ecf8;
}

.zmtip-form-footer .zmtip-progress > i {
  display: block;
  width: 16.666%;
  height: 100%;
  border-radius: inherit;
  background: var(--zmtip-green);
  transition: width 240ms ease;
}

.zmtip-progress {
  min-width: 170px;
}

.zmtip-progress span {
  display: block;
  margin-bottom: 7px;
  color: var(--zmtip-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.zmtip-progress i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6ecf8;
}

.zmtip-progress b {
  display: block;
  width: 16.666%;
  height: 100%;
  border-radius: inherit;
  background: var(--zmtip-green);
  transition: width 240ms ease;
}

.zmtip-summary {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 116px);
  margin: 20px 20px 20px 0;
  padding: 17px;
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  scrollbar-width: thin;
}

.zmtip-live-summary {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.zmtip-live-summary article {
  padding: 11px;
  border-radius: 11px;
  background: var(--zmtip-soft);
}

.zmtip-live-summary article.is-filled {
  background: #effbf5;
}

.zmtip-live-summary span {
  color: var(--zmtip-green);
  font-size: 11px;
  font-weight: 750;
}

.zmtip-live-summary p {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--zmtip-muted);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.zmtip-summary-rule {
  margin-top: 16px;
  padding: 13px;
  border-radius: 12px;
  background: #fff2ed;
}

.zmtip-summary-rule b {
  color: #d85235;
  font-size: 12px;
}

.zmtip-summary-rule p {
  margin: 5px 0 0;
  color: #8a675e;
  font-size: 11px;
  line-height: 1.55;
}

.zmtip-directions,
.zmtip-blueprint-workspace,
.zmtip-view[data-zmtip-view-panel="directions"],
.zmtip-view[data-zmtip-view-panel="blueprint"] {
  padding: clamp(22px, 3.2vw, 44px);
}

.zmtip-directions > header,
.zmtip-blueprint-head,
.zmtip-section-head {
  margin-bottom: 24px;
}

.zmtip-directions > header h3 {
  margin-bottom: 8px;
  font-size: clamp(27px, 2.6vw, 40px);
}

.zmtip-directions > header p {
  color: var(--zmtip-muted);
}

.zmtip-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.zmtip-section-head > div:first-child > span {
  color: var(--zmtip-green);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.zmtip-section-head h3 {
  margin: 7px 0;
  font-size: clamp(26px, 2.6vw, 40px);
}

.zmtip-section-head p {
  color: var(--zmtip-muted);
  line-height: 1.65;
}

.zmtip-route-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  overflow: hidden;
  background: var(--zmtip-line);
}

.zmtip-route-result:empty {
  display: none;
}

.zmtip-route-result > div {
  padding: 18px;
  background: #f8faff;
}

.zmtip-route-result strong {
  display: block;
  margin: 6px 0;
  font-size: 20px;
}

.zmtip-route-result p {
  margin: 0;
  color: var(--zmtip-muted);
  font-size: 12px;
  line-height: 1.55;
}

.zmtip-route-result label {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.zmtip-route-result label small {
  color: var(--zmtip-muted);
}

.zmtip-route-result select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(53, 99, 255, 0.18);
  border-radius: 10px;
  background: #fff;
  color: var(--zmtip-ink);
  font: inherit;
  font-size: 12px;
}

.zmtip-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.zmtip-direction-grid.is-generating::before {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px solid rgba(53, 99, 255, 0.16);
  border-radius: 13px;
  background: #faffdf;
  color: var(--zmtip-green-dark);
  content: "正在整理事实、假设和 11 个蓝图模块。可以离开页面，稍后回到历史版本查看。";
  font-size: 13px;
  line-height: 1.6;
}

.zmtip-direction-card {
  display: flex;
  min-width: 0;
  padding: 20px;
  flex-direction: column;
  box-shadow: var(--zmtip-shadow-border);
  transition-property: transform, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

@media (hover: hover) {
  .zmtip-direction-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--zmtip-shadow-border-hover);
  }
}

.zmtip-direction-card.is-selected {
  box-shadow: 0 0 0 2px var(--zmtip-blue), 0 16px 36px rgba(53, 99, 255, 0.14);
}

.zmtip-direction-card > header > div span {
  color: var(--zmtip-green);
  font-size: 12px;
  font-weight: 760;
}

.zmtip-direction-card > header > div strong {
  font-size: 31px;
  font-variant-numeric: tabular-nums;
}

.zmtip-direction-card > header > div small {
  color: var(--zmtip-muted);
  font-size: 11px;
}

.zmtip-direction-card h4 {
  margin: 14px 0 8px;
  font-size: 20px;
  line-height: 1.35;
}

.zmtip-direction-card > header > p {
  min-height: 42px;
  color: var(--zmtip-muted);
  font-size: 13px;
  line-height: 1.6;
}

.zmtip-direction-card dl,
.zmtip-pillar-grid dl {
  margin: 14px 0;
}

.zmtip-direction-card dl > div,
.zmtip-pillar-grid dl > div {
  padding: 9px 0;
  border-top: 1px solid #edf0eb;
}

.zmtip-direction-card dt,
.zmtip-pillar-grid dt {
  color: var(--zmtip-muted);
  font-size: 11px;
}

.zmtip-direction-card dd,
.zmtip-pillar-grid dd {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.zmtip-score-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 16px;
}

.zmtip-score-list > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 26px;
  gap: 8px;
  align-items: center;
  color: var(--zmtip-muted);
  font-size: 11px;
}

.zmtip-score-list i {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6ecf8;
}

.zmtip-score-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--zmtip-green);
}

.zmtip-score-list em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zmtip-direction-card details {
  margin-bottom: 16px;
  color: var(--zmtip-muted);
  font-size: 12px;
}

.zmtip-direction-card summary {
  min-height: 40px;
  padding: 10px 0;
  color: var(--zmtip-green-dark);
  font-weight: 700;
  cursor: pointer;
}

.zmtip-direction-detail b {
  display: block;
  margin-top: 9px;
  color: var(--zmtip-ink);
}

.zmtip-direction-card > .zmtip-button {
  width: 100%;
  margin-top: auto;
}

.zmtip-blueprint-head {
  align-items: flex-start;
}

.zmtip-blueprint {
  width: min(100%, 1360px);
  max-width: none;
  margin: 0 auto;
}

.zmtip-blueprint-cover {
  position: relative;
  min-height: 330px;
  margin-bottom: 20px;
  padding: clamp(30px, 5vw, 68px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 15%, rgba(221, 252, 61, 0.48), transparent 25%),
    radial-gradient(circle at 72% 86%, rgba(128, 102, 246, 0.16), transparent 28%),
    linear-gradient(140deg, #ffffff, #edf3ff 72%, #f9ffdf);
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-ink);
}

.zmtip-blueprint-cover h2 {
  max-width: 760px;
  margin: 22px 0 14px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.08;
}

.zmtip-blueprint-cover > p {
  max-width: 690px;
  color: var(--zmtip-muted);
  font-size: 16px;
  line-height: 1.7;
}

.zmtip-blueprint-cover > div {
  position: absolute;
  right: clamp(30px, 5vw, 68px);
  bottom: clamp(30px, 5vw, 50px);
  left: clamp(30px, 5vw, 68px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  border-top: 1px solid rgba(53, 99, 255, 0.16);
  padding-top: 16px;
}

.zmtip-blueprint-cover i {
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--zmtip-lime);
  color: #1d2b14;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.zmtip-blueprint-cover small {
  color: var(--zmtip-muted);
}

.zmtip-blueprint-cover.is-edit {
  min-height: 220px;
}

.zmtip-blueprint-module {
  margin-bottom: 16px;
  padding: clamp(22px, 3.4vw, 42px);
  break-inside: avoid;
}

.zmtip-blueprint-module > header {
  justify-content: flex-start;
  margin-bottom: 21px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--zmtip-line);
}

.zmtip-blueprint-module > header > span {
  display: grid;
  width: 45px;
  min-width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  background: var(--zmtip-green);
  color: #fff;
  font-size: 12px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.zmtip-blueprint-module > header small {
  color: var(--zmtip-green);
}

.zmtip-blueprint-module > header h3 {
  margin: 4px 0 0;
  font-size: clamp(23px, 2.5vw, 34px);
}

.zmtip-module-conclusion {
  padding: 18px;
  border-left: 4px solid var(--zmtip-lime);
  border-radius: 0 13px 13px 0;
  background: #faffdf;
  font-size: 16px;
  line-height: 1.75;
}

.zmtip-evidence-grid,
.zmtip-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.zmtip-evidence-grid article,
.zmtip-method-grid article,
.zmtip-data-grid article {
  min-width: 0;
  padding: 15px;
  border-radius: 13px;
  background: var(--zmtip-soft);
}

.zmtip-evidence-grid article[data-kind="fact"],
.zmtip-evidence-grid article.is-fact {
  background: #effbf5;
}

.zmtip-evidence-grid article[data-kind="assumption"],
.zmtip-evidence-grid article.is-assumption {
  background: #fff2ed;
}

.zmtip-evidence-grid h4 {
  margin-bottom: 10px;
  font-size: 13px;
}

.zmtip-blueprint ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.zmtip-blueprint li {
  margin-bottom: 5px;
  color: #4f5f7a;
  line-height: 1.55;
}

.zmtip-data-grid,
.zmtip-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.zmtip-data-grid article > p,
.zmtip-method-grid article > p {
  margin: 7px 0 0;
  color: #4f5f7a;
  line-height: 1.65;
}

.zmtip-pillar-grid article {
  padding: 18px;
  border: 0;
  border-radius: 15px;
  box-shadow: var(--zmtip-shadow-border);
}

.zmtip-pillar-grid header {
  justify-content: flex-start;
}

.zmtip-pillar-grid header > span {
  color: var(--zmtip-orange);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zmtip-pillar-grid h4 {
  margin: 0 0 4px;
}

.zmtip-pillar-grid small {
  color: var(--zmtip-muted);
}

.zmtip-topic-table {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--zmtip-line);
  border-radius: 14px;
}

.zmtip-topic-row {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.3fr) minmax(130px, 0.7fr) minmax(210px, 1.2fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-top: 1px solid var(--zmtip-line);
}

.zmtip-topic-row.is-head {
  border-top: 0;
  background: #edf3ff;
  color: var(--zmtip-muted);
  font-size: 11px;
}

.zmtip-topic-row > span {
  color: var(--zmtip-green);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.zmtip-topic-row b,
.zmtip-topic-row small,
.zmtip-topic-row em {
  display: block;
}

.zmtip-topic-row small {
  margin-top: 4px;
  color: var(--zmtip-muted);
  font-size: 11px;
  line-height: 1.5;
}

.zmtip-topic-row em {
  color: #43516c;
  font-size: 12px;
  font-style: normal;
}

.zmtip-topic-row p {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.55;
}

.zmtip-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.zmtip-roadmap > article {
  padding: 19px;
  border: 0;
  border-radius: 15px;
  box-shadow: var(--zmtip-shadow-border);
}

.zmtip-roadmap > article > span {
  color: var(--zmtip-green);
  font-size: 11px;
  font-weight: 760;
}

.zmtip-roadmap h4 {
  margin: 9px 0;
  font-size: 21px;
}

.zmtip-roadmap > article > p {
  min-height: 64px;
  color: var(--zmtip-muted);
  line-height: 1.6;
}

.zmtip-roadmap > article > div section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--zmtip-line);
}

.zmtip-roadmap strong {
  font-size: 12px;
}

.zmtip-blueprint-module.is-edit textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--zmtip-line);
  border-radius: 13px;
  background: #fff;
  color: var(--zmtip-ink);
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.zmtip-module-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zmtip-module-edit-grid .is-wide {
  grid-column: 1 / -1;
}

.zmtip-module-edit-grid label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--zmtip-muted);
  font-size: 12px;
  font-weight: 700;
}

.zmtip-blueprint-module.is-edit textarea.is-json {
  background: #f1f4ff;
  color: #26375d;
  font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.zmtip-blueprint-disclaimer {
  padding: 24px;
  color: var(--zmtip-muted);
  font-size: 12px;
  text-align: center;
}

.zmtip-empty-state,
.zmtip-empty-inline {
  grid-column: 1 / -1;
  padding: 46px 24px;
  border: 1px dashed rgba(53, 99, 255, 0.28);
  border-radius: 17px;
  background: #f8faff;
  color: var(--zmtip-muted);
  text-align: center;
}

.zmtip-empty-state > span {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 50%;
  background: #e7eeff;
  color: var(--zmtip-green);
  font-weight: 800;
}

.zmtip-empty-state h4 {
  margin-bottom: 7px;
  color: var(--zmtip-ink);
  font-size: 20px;
}

.zmtip-empty-state p,
.zmtip-empty-inline {
  margin-bottom: 0;
  line-height: 1.65;
}

.zmtip-empty-inline {
  padding: 22px;
}

.zmtip-skeleton {
  height: 62px;
  border-radius: 13px;
  background: linear-gradient(90deg, #e8eefb 20%, #f8faff 48%, #e8eefb 78%);
  background-size: 240% 100%;
  animation: zmtip-shimmer 1.3s linear infinite;
}

.zmtip-toast {
  position: fixed;
  z-index: 99999;
  right: 22px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 17px;
  border-radius: 13px;
  background: var(--zmtip-blue);
  box-shadow: var(--zmtip-shadow);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.zmtip-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.zmtip-toast.is-error {
  background: var(--zmtip-red);
}

.zmtip-dialog {
  width: min(620px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--zmtip-paper);
  box-shadow: 0 30px 90px rgba(30, 51, 102, 0.26);
}

.zmtip-dialog::backdrop {
  background: rgba(23, 35, 65, 0.48);
  backdrop-filter: blur(4px);
}

.zmtip-dialog .zmtip-button.is-ghost {
  border-color: var(--zmtip-line);
  background: transparent;
  color: var(--zmtip-muted);
}

.zmtip-dialog form {
  padding: 25px;
}

.zmtip-dialog form > header {
  position: relative;
  padding-right: 52px;
}

.zmtip-dialog-close {
  position: absolute;
  top: -5px;
  right: 0;
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0 2px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  background: #f3f6ff;
  box-shadow: var(--zmtip-shadow-border);
  color: var(--zmtip-muted);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.zmtip-dialog h2,
.zmtip-dialog h3 {
  margin-bottom: 7px;
  font-size: 26px;
}

.zmtip-dialog form > p {
  color: var(--zmtip-muted);
  line-height: 1.6;
}

.zmtip-dialog label {
  display: block;
  margin: 14px 0;
}

.zmtip-dialog menu {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin: 22px 0 0;
  padding: 0;
}

.zmtip-dialog > header,
.zmtip-dialog > div,
.zmtip-dialog > footer {
  margin-right: 25px;
  margin-left: 25px;
}

.zmtip-dialog > header {
  margin-top: 25px;
}

.zmtip-dialog > footer,
.zmtip-dialog form > footer {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 22px;
  padding: 18px 0 25px;
  border-top: 1px solid var(--zmtip-line);
}

.zmtip-activation-checks {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.zmtip-activation-checks > label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--zmtip-line);
  border-radius: 13px;
  cursor: pointer;
}

.zmtip-activation-checks input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.zmtip-activation-checks b,
.zmtip-activation-checks small {
  display: block;
}

.zmtip-activation-checks small {
  margin-top: 5px;
  color: var(--zmtip-muted);
  line-height: 1.55;
}

.zmtip-version-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.zmtip-version-list button {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--zmtip-line);
  border-radius: 12px;
  background: #fff;
  color: var(--zmtip-ink);
  text-align: left;
}

.zmtip-version-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.zmtip-version-row > span {
  color: var(--zmtip-green);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zmtip-version-row strong,
.zmtip-version-row small {
  display: block;
}

.zmtip-version-row small {
  margin-top: 3px;
  color: var(--zmtip-muted);
}

.zmtip-version-row > i {
  color: var(--zmtip-muted);
  font-size: 12px;
  font-style: normal;
}

.zmtip-focus-button[aria-pressed="true"] {
  background: #edf3ff;
  box-shadow: inset 0 0 0 1px rgba(53, 99, 255, 0.18);
  color: var(--zmtip-green-dark);
}

.zmtip-desktop-required {
  display: none;
}

.zmtip-shell.has-active-project .zmtip-hero {
  grid-template-columns: 1fr;
  min-height: 112px;
  max-height: 128px;
  padding: 18px 24px;
}

.zmtip-shell.has-active-project .zmtip-hero-copy {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
}

.zmtip-shell.has-active-project .zmtip-hero-title { min-width: 0; }
.zmtip-shell.has-active-project .zmtip-hero h1 { max-width: none; margin: 3px 0 0; font-size: clamp(32px, 2.6vw, 40px); }
.zmtip-shell.has-active-project .zmtip-hero-title > p,
.zmtip-shell.has-active-project .zmtip-hero-map { display: none; }
.zmtip-shell.has-active-project .zmtip-hero-actions { flex: 0 0 auto; margin-top: 0; flex-wrap: nowrap; }

.zmtip-phase-tabs button:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(53, 99, 255, 0.2);
  content: "";
}

.zmtip-phase-tabs button.is-complete:not(:last-child)::after {
  background: rgba(21, 185, 121, 0.56);
}

.zmtip-form input::placeholder,
.zmtip-form textarea::placeholder,
.zmtip-dialog input::placeholder,
.zmtip-dialog textarea::placeholder {
  color: #95a2bb;
}

.zmtip-form textarea {
  resize: none;
}

.zmtip-form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%233563ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

@media (hover: hover) {
  .zmtip-project-switcher:hover {
    background: #fff;
    box-shadow: var(--zmtip-shadow-border-hover);
    transform: translateY(-1px);
  }

  .zmtip-project-card:hover:not(.is-active) {
    border-color: transparent;
    background: #fff;
    box-shadow: var(--zmtip-shadow-border-hover);
    transform: translateY(-1px);
  }

  .zmtip-phase-tabs button:hover:not(.is-active) {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(53, 99, 255, 0.2), 0 8px 18px rgba(53, 99, 255, 0.08);
  }
}

.zmtip-shell.is-focus-mode .zmtip-hero {
  max-height: 0;
  min-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.zmtip-shell.is-focus-mode {
  padding-top: 10px;
}

.zmtip-step.is-entering > header,
.zmtip-view.is-entering > .zmtip-section-head {
  animation: zmtip-enter 280ms cubic-bezier(0.2, 0, 0, 1) both;
}

.zmtip-step.is-entering > .zmtip-field-grid,
.zmtip-step.is-entering > .zmtip-material-import,
.zmtip-view.is-entering > .zmtip-route-result,
.zmtip-view.is-entering > .zmtip-direction-grid,
.zmtip-view.is-entering > .zmtip-blueprint {
  animation: zmtip-enter 320ms 70ms cubic-bezier(0.2, 0, 0, 1) both;
}

.zmtip-dialog[open] {
  animation: zmtip-dialog-enter 220ms cubic-bezier(0.2, 0, 0, 1) both;
}

.zmtip-dialog[open]::backdrop {
  animation: zmtip-backdrop-enter 180ms ease-out both;
}

.zmtip-shell li,
.zmtip-shell small,
.zmtip-shell dd {
  text-wrap: pretty;
}

@keyframes zmtip-enter {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes zmtip-dialog-enter {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px) scale(0.985); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes zmtip-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zmtip-shimmer {
  to { background-position: -240% 0; }
}

@media screen and (max-width: 1179px) {
  .zmtip-shell {
    width: 100%;
    min-height: 72vh;
    margin: 0;
    padding: 22px;
  }

  .zmtip-shell > .zmtip-hero,
  .zmtip-shell > .zmtip-gate,
  .zmtip-shell > .zmtip-app,
  .zmtip-shell > .zmtip-dialog,
  .zmtip-shell > .zmtip-project-drawer,
  .zmtip-shell > .zmtip-toast {
    display: none !important;
  }

  .zmtip-desktop-required {
    display: grid;
    max-width: 620px;
    min-height: 420px;
    margin: 8vh auto 0;
    padding: 48px;
    place-content: center;
    border-radius: 26px;
    background:
      radial-gradient(circle at 82% 12%, rgba(221, 252, 61, 0.5), transparent 27%),
      linear-gradient(145deg, #fff, #edf3ff);
    box-shadow: var(--zmtip-shadow);
    text-align: center;
  }

  .zmtip-desktop-required > span {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 18px;
    background: var(--zmtip-blue);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
  }

  .zmtip-desktop-required h1 {
    margin-bottom: 12px;
    font-size: 30px;
  }

  .zmtip-desktop-required p {
    max-width: 470px;
    margin: 0 auto;
    color: var(--zmtip-muted);
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zmtip-shell *,
  .zmtip-shell *::before,
  .zmtip-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  @page { size: A4; margin: 14mm; }
  body.zmt-ip-blueprint-planner-page { background: #fff !important; }
  body.zmt-ip-blueprint-planner-page > *:not(.site):not(#page),
  .zmt-ip-blueprint-planner-page header:not(.zmtip-blueprint-module > header),
  .zmt-ip-blueprint-planner-page footer:not(.zmtip-blueprint-disclaimer),
  .zmtip-hero,
  .zmtip-desktop-required,
  .zmtip-projects,
  .zmtip-project-drawer,
  .zmtip-command,
  .zmtip-phase-tabs,
  .zmtip-blueprint-head,
  .zmtip-view:not([data-zmtip-view-panel="blueprint"]),
  .zmtip-toast,
  .zmtip-dialog {
    display: none !important;
  }
  .zmtip-shell, .zmtip-app, .zmtip-workspace, .zmtip-blueprint-workspace, [data-zmtip-view-panel="blueprint"], .zmtip-blueprint {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  [data-zmtip-view-panel="blueprint"] { display: block !important; }
  .zmtip-blueprint-cover { min-height: 245mm; border-radius: 0; break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .zmtip-blueprint-module { margin: 0 0 8mm; padding: 7mm; border-color: #d7ddd8; border-radius: 0; box-shadow: none; break-inside: avoid-page; }
  .zmtip-blueprint-module > header { display: flex !important; break-after: avoid-page; }
  .zmtip-blueprint-module h3, .zmtip-blueprint-module h4, .zmtip-topic-row, .zmtip-pillar-grid article, .zmtip-roadmap > article { break-inside: avoid-page; }
  .zmtip-topic-table { overflow: visible; }
  .zmtip-topic-row { grid-template-columns: 8mm 1.35fr 0.7fr 1.2fr; min-width: 0; padding: 3mm; }
  .zmtip-evidence-grid, .zmtip-method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zmtip-roadmap { grid-template-columns: 1fr; }
  .zmtip-blueprint-disclaimer { display: block !important; }
  .zmtip-blueprint-module.is-edit { display: none !important; }
}