/* Tech console skin: a graphite control surface around the warm drawing canvas. */
:root {
  --tech-ink: #142629;
  --tech-muted: #718184;
  --tech-line: #cbd8d6;
  --tech-chrome: #0f1718;
  --tech-chrome-2: #182426;
  --tech-chrome-3: #213133;
  --tech-cyan: #62d6c4;
  --tech-cyan-deep: #197b72;
  --tech-amber: #e0ae55;
  --tech-coral: #c97562;
  --tech-paper: #fbfcf8;
  --tech-surface: #f2f6f4;
  --tech-shadow: 0 18px 46px rgba(12, 29, 30, .16);
}

body.tech-workspace {
  color: var(--tech-ink);
  background: #d9e3e0;
  font-family: "Inter", "SF Pro Text", "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* Author display rules must not override the native hidden contract. */
body.tech-workspace [hidden] {
  display: none !important;
}

body.tech-workspace .app-shell {
  background: #d9e3e0;
}

body.tech-workspace .topbar {
  position: relative;
  z-index: 2;
  height: 64px;
  padding: 0 22px;
  gap: 22px;
  color: #edf7f3;
  background: var(--tech-chrome);
  border-bottom: 1px solid #2d4242;
  box-shadow: 0 5px 20px rgba(8, 19, 20, .2);
}

body.tech-workspace .topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--tech-cyan) 22%, var(--tech-amber) 76%, transparent 96%);
  opacity: .62;
  content: "";
  pointer-events: none;
}

body.tech-workspace .brand-lockup {
  min-width: 218px;
  gap: 10px;
}

body.tech-workspace .brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid #4ea99d;
  border-radius: 8px;
  color: var(--tech-cyan);
  background: #172426;
  box-shadow: inset 0 0 0 1px rgba(224, 174, 85, .24), 0 0 18px rgba(98, 214, 196, .1);
  font-family: "STKaiti", "KaiTi", serif;
}

body.tech-workspace .brand-mark::before,
body.tech-workspace .brand-mark::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--tech-amber);
  content: "";
  opacity: .9;
}

body.tech-workspace .brand-mark::before { top: 3px; right: 3px; border-left: 0; border-bottom: 0; }
body.tech-workspace .brand-mark::after { bottom: 3px; left: 3px; border-top: 0; border-right: 0; }
body.tech-workspace .brand-name { color: #f2f8f5; font-size: 15px; letter-spacing: .02em; }
body.tech-workspace .brand-subtitle { color: #8fa3a0; letter-spacing: .04em; }

body.tech-workspace .document-title-wrap {
  max-width: 360px;
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid #2d4242;
}

body.tech-workspace .status-dot {
  flex: 0 0 7px;
  background: var(--tech-cyan);
  box-shadow: 0 0 0 3px rgba(98, 214, 196, .15), 0 0 12px rgba(98, 214, 196, .42);
}

body.tech-workspace .document-title-wrap input {
  color: #edf7f3;
  caret-color: var(--tech-cyan);
}

body.tech-workspace .document-title-wrap input::selection { color: #0e1a1b; background: var(--tech-cyan); }
body.tech-workspace .top-actions { gap: 6px; }
body.tech-workspace .top-actions .ghost-btn { color: #9db0ad; }
body.tech-workspace .top-actions .ghost-btn:hover { color: #f1faf6; background: #1d2d2e; }
body.tech-workspace .top-actions .outline-btn,
body.tech-workspace .top-actions .account-btn {
  color: #d8e8e3;
  background: #162325;
  border-color: #344b4b;
}
body.tech-workspace .top-actions .outline-btn:hover,
body.tech-workspace .top-actions .account-btn:hover {
  color: #fff;
  background: #223536;
  border-color: #5a9d94;
}
body.tech-workspace .top-actions .primary-btn {
  color: #0e2221;
  background: var(--tech-cyan);
  border-color: var(--tech-cyan);
  box-shadow: 0 0 0 1px rgba(98, 214, 196, .12), 0 5px 14px rgba(47, 155, 140, .2);
}
body.tech-workspace .top-actions .primary-btn:hover {
  color: #0a1818;
  background: #8be4d5;
  border-color: #8be4d5;
}
body.tech-workspace .top-actions .action-divider { background: #304343; }
body.tech-workspace .subscription-cta { border-color: #3e6966; background: #1b3536; color: #e9f6f1; }
body.tech-workspace .subscription-cta:hover { border-color: var(--tech-cyan); background: #244544; }
body.tech-workspace .subscription-cta.pro { border-color: #729a76; background: #294135; color: #eef8ed; }
body.tech-workspace .account-avatar { background: #2a8b80; color: #071615; }
body.tech-workspace .account-btn em { background: #253b3c; color: #b8d3ce; }

body.tech-workspace .workspace { background: var(--tech-chrome-2); }

body.tech-workspace .tool-rail {
  width: 78px;
  padding: 14px 8px 12px;
  background: var(--tech-chrome);
  border-right: 1px solid #2d4242;
  box-shadow: 5px 0 18px rgba(7, 18, 19, .12);
}

body.tech-workspace .rail-group { gap: 4px; }
body.tech-workspace .rail-tool {
  position: relative;
  height: 51px;
  border-radius: 6px;
  color: #819592;
  font-size: 10px;
  letter-spacing: .02em;
}
body.tech-workspace .rail-tool svg { width: 18px; height: 18px; stroke-width: 1.7; }
body.tech-workspace .rail-tool:hover { color: #e5f1ed; background: #1d2c2e; }
body.tech-workspace .rail-tool.active {
  color: var(--tech-cyan);
  background: #1c3535;
  box-shadow: inset 2px 0 0 var(--tech-cyan), inset 0 0 0 1px rgba(98, 214, 196, .08);
}
body.tech-workspace .rail-tool.active::after {
  position: absolute;
  top: 9px;
  right: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tech-amber);
  box-shadow: 0 0 8px rgba(224, 174, 85, .65);
  content: "";
}
body.tech-workspace .rail-bottom { border-top-color: #2d4242; }

body.tech-workspace .canvas-area {
  background: #d9e3e0;
}

body.tech-workspace .canvas-toolbar {
  height: 50px;
  padding: 0 18px;
  background: #f7faf8;
  border-bottom-color: #c6d4d1;
  box-shadow: 0 2px 8px rgba(31, 57, 56, .05);
}
body.tech-workspace .crumb { color: #758584; font-size: 11px; }
body.tech-workspace .crumb strong { color: #173536; font-weight: 700; }
body.tech-workspace .saved-label { color: var(--tech-cyan-deep); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
body.tech-workspace .toolbar-left { gap: 9px; }
body.tech-workspace .plan-tools { gap: 4px; }
body.tech-workspace .canvas-toolbar .tool-icon-btn,
body.tech-workspace .canvas-toolbar .zoom-btn {
  color: #4e6666;
  background: #f7faf8;
  border-color: #c8d6d3;
}
body.tech-workspace .canvas-toolbar .tool-icon-btn:hover,
body.tech-workspace .canvas-toolbar .zoom-btn:hover {
  color: #155f5a;
  background: #e6f3ef;
  border-color: #75b8ac;
}
body.tech-workspace .canvas-toolbar .plan-tool.active {
  color: #145f59;
  background: #e0f2ed;
  border-color: #65aa9f;
  box-shadow: inset 0 -2px 0 var(--tech-cyan-deep);
}
body.tech-workspace .canvas-toolbar .export-btn {
  color: #0e2221;
  background: #d6eee8;
  border-color: #8bc5b8;
}
body.tech-workspace .canvas-toolbar .export-btn:hover { background: #c0e6dc; border-color: #5aa99b; }
body.tech-workspace .zoom-control { background: #eef4f1; border-color: #c8d6d3; }
body.tech-workspace .zoom-control span { color: #4e6666; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

body.tech-workspace .canvas-scroll {
  padding: 26px;
  background-color: #d9e3e0;
  background-image: linear-gradient(rgba(41, 94, 87, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 94, 87, .045) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.tech-workspace .stage-wrap { filter: drop-shadow(0 15px 27px rgba(24, 49, 47, .14)); }
body.tech-workspace .canvas-stage {
  border: 0;
  border-radius: 4px;
  box-shadow: var(--tech-shadow), inset 0 0 0 1px #9eafac;
  background: var(--tech-paper);
}
body.tech-workspace .canvas-stage::after {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(35, 105, 96, .1);
  border-radius: 2px;
  content: "";
  pointer-events: none;
}
body.tech-workspace .drop-hint { background: rgba(251, 252, 248, .84); color: #69807c; }
body.tech-workspace .drop-hint svg { color: var(--tech-cyan-deep); }
body.tech-workspace .drop-hint strong { color: #315a56; }
body.tech-workspace .canvas-footer {
  height: 32px;
  padding: 0 18px;
  color: #8fa5a0;
  background: var(--tech-chrome-2);
  border-top-color: #2d4242;
}
body.tech-workspace .canvas-footer kbd { color: #c5d8d3; background: #233536; border-color: #405454; }

body.tech-workspace .inspector {
  width: 282px;
  background: #f7faf8;
  border-left-color: #c6d4d1;
  box-shadow: -5px 0 18px rgba(31, 57, 56, .08);
}
body.tech-workspace .inspector-head {
  height: 72px;
  padding: 17px 18px 10px;
  background: #eef5f2;
  border-bottom-color: #cbd8d6;
}
body.tech-workspace .panel-eyebrow { color: #63847f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
body.tech-workspace .inspector h2 { color: #183c3b; font-size: 17px; }
body.tech-workspace .panel-collapse { color: #728985; }
body.tech-workspace .panel-collapse:hover { color: #195e58; background: #dfeee9; }
body.tech-workspace .inspector-body { padding: 17px 18px; }
body.tech-workspace .field label { color: #5f7773; }
body.tech-workspace .field input[type=text],
body.tech-workspace .field textarea,
body.tech-workspace .field input[type=number] {
  color: #173536;
  background: #fbfdfb;
  border-color: #cbd8d6;
}
body.tech-workspace .field input:focus,
body.tech-workspace .field textarea:focus { border-color: #5da99d; box-shadow: 0 0 0 2px rgba(98, 214, 196, .16); }
body.tech-workspace .range-row input { accent-color: var(--tech-cyan-deep); }
body.tech-workspace .range-value { color: #55716c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
body.tech-workspace .layers-section { border-top-color: #cbd8d6; }
body.tech-workspace .section-head { color: #54716d; }
body.tech-workspace .layer-count { color: #34756c; background: #dff0eb; }
body.tech-workspace .layer-item { color: #45625f; }
body.tech-workspace .layer-item:hover { background: #e8f2ef; }
body.tech-workspace .layer-item.selected { color: #145f59; background: #dff1ec; box-shadow: inset 2px 0 0 var(--tech-cyan-deep); }
body.tech-workspace .layer-icon { color: #4f7771; background: #e7f0ed; }
body.tech-workspace .layer-visibility:hover { color: #145f59; background: #d9ece7; }
body.tech-workspace .layer-item.hidden .layer-visibility { color: #a55648; background: #f2dfda; }
body.tech-workspace .inspector-hidden-note { color: #93493d; background: #f8e8e4; border-color: #d8aaa0; }
body.tech-workspace .inspector-hidden-note button { color: #93493d; background: #fff7f5; border-color: #c9978c; }

body.tech-workspace .toast {
  bottom: 44px;
  color: #effaf6;
  background: #142425;
  border: 1px solid #39615d;
  box-shadow: 0 10px 26px rgba(8, 24, 24, .22);
}

/* Keep the analytical tools readable while giving their chrome the same instrument-panel language. */
body.tech-workspace .flystar-dialog,
body.tech-workspace .minggua-dialog,
body.tech-workspace .zeri-dialog,
body.tech-workspace .knowledge-dialog,
body.tech-workspace .knowledge-reader-dialog,
body.tech-workspace .account-dialog,
body.tech-workspace .cloud-projects-dialog {
  border: 1px solid #344c4c;
  border-radius: 7px;
  box-shadow: 0 26px 76px rgba(6, 18, 19, .32);
}
body.tech-workspace .flystar-dialog-head,
body.tech-workspace .minggua-dialog-head,
body.tech-workspace .zeri-dialog-head,
body.tech-workspace .knowledge-dialog-head,
body.tech-workspace .knowledge-reader-head,
body.tech-workspace .account-dialog-head,
body.tech-workspace .cloud-projects-head {
  color: #eff8f4;
  background: var(--tech-chrome-2);
  border-bottom-color: #304747;
}
body.tech-workspace .flystar-dialog-head h2,
body.tech-workspace .minggua-dialog-head h2,
body.tech-workspace .zeri-dialog-head h2,
body.tech-workspace .knowledge-dialog-head h2,
body.tech-workspace .knowledge-reader-head h2,
body.tech-workspace .account-dialog-head h2,
body.tech-workspace .cloud-projects-head h2 { color: #eff8f4; }
body.tech-workspace .flystar-dialog-head .panel-eyebrow,
body.tech-workspace .minggua-dialog-head .panel-eyebrow,
body.tech-workspace .zeri-dialog-head .panel-eyebrow,
body.tech-workspace .knowledge-dialog-head .panel-eyebrow,
body.tech-workspace .knowledge-reader-head .panel-eyebrow,
body.tech-workspace .account-dialog-head .panel-eyebrow,
body.tech-workspace .cloud-projects-head .panel-eyebrow { color: #74b4aa; }
body.tech-workspace .flystar-dialog-head .panel-collapse,
body.tech-workspace .minggua-dialog-head .panel-collapse,
body.tech-workspace .zeri-dialog-head .panel-collapse,
body.tech-workspace .knowledge-dialog-head .panel-collapse,
body.tech-workspace .knowledge-reader-head .panel-collapse,
body.tech-workspace .account-dialog-head .panel-collapse,
body.tech-workspace .cloud-projects-head .panel-collapse { color: #9bb5af; }
body.tech-workspace .flystar-dialog-head .panel-collapse:hover,
body.tech-workspace .minggua-dialog-head .panel-collapse:hover,
body.tech-workspace .zeri-dialog-head .panel-collapse:hover,
body.tech-workspace .knowledge-dialog-head .panel-collapse:hover,
body.tech-workspace .knowledge-reader-head .panel-collapse:hover,
body.tech-workspace .account-dialog-head .panel-collapse:hover,
body.tech-workspace .cloud-projects-head .panel-collapse:hover { color: var(--tech-cyan); background: #243b3c; }
body.tech-workspace .flystar-modal,
body.tech-workspace .minggua-modal,
body.tech-workspace .zeri-modal,
body.tech-workspace .knowledge-modal,
body.tech-workspace .knowledge-reader-modal,
body.tech-workspace .account-modal,
body.tech-workspace .cloud-projects-modal { background: rgba(7, 16, 17, .72); backdrop-filter: blur(7px); }
body.tech-workspace .flystar-form,
body.tech-workspace .minggua-form,
body.tech-workspace .zeri-form { background: #eef5f2; border-color: #cbd8d6; }
body.tech-workspace .flystar-result,
body.tech-workspace .minggua-result,
body.tech-workspace .zeri-result,
body.tech-workspace .knowledge-dialog-body,
body.tech-workspace .knowledge-reader-body,
body.tech-workspace .account-dialog > div:not(.account-dialog-head),
body.tech-workspace .cloud-projects-list { background: #f8fbf9; }
body.tech-workspace .flystar-modal.open { background: #dce7e4; }

body.tech-workspace .account-btn:focus-visible,
body.tech-workspace button:focus-visible,
body.tech-workspace input:focus-visible,
body.tech-workspace select:focus-visible,
body.tech-workspace textarea:focus-visible { outline: 2px solid var(--tech-amber); outline-offset: 2px; }

body.tech-workspace .auth-gate {
  background-color: #d9e3e0;
  background-image: linear-gradient(rgba(41, 94, 87, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 94, 87, .05) 1px, transparent 1px);
  background-size: 24px 24px;
}
body.tech-workspace .auth-panel { border-color: #3b5554; background: #f8fbf9; box-shadow: 0 26px 76px rgba(8, 24, 24, .22); }
body.tech-workspace .auth-brand { border-bottom-color: #cbd8d6; }
body.tech-workspace .auth-brand > span { color: var(--tech-cyan-deep); background: #e4f2ed; border-color: #77b9ad; }
body.tech-workspace .auth-tabs { background: #e1ece9; }
body.tech-workspace .auth-tabs button.active { color: #145f59; background: #f8fbf9; box-shadow: 0 1px 5px rgba(22, 66, 61, .16); }
body.tech-workspace .auth-submit { color: #0e2221; background: var(--tech-cyan); border-color: var(--tech-cyan); }
body.tech-workspace .local-experience,
body.tech-workspace .auth-back { color: #245e58; border-color: #93c7bb; background: #eef8f4; }

body.tech-workspace .cloud-projects-toolbar,
body.tech-workspace .account-overview,
body.tech-workspace .account-plan-status,
body.tech-workspace .promotion-form,
body.tech-workspace .redeem-code-form,
body.tech-workspace .account-utility { background: #eef5f2; border-color: #cbd8d6; }
body.tech-workspace .cloud-projects-toolbar button,
body.tech-workspace .account-dialog .primary-btn,
body.tech-workspace .cloud-projects-dialog .primary-btn { color: #0e2221; background: var(--tech-cyan); border-color: var(--tech-cyan); }
body.tech-workspace .cloud-projects-dialog .outline-btn,
body.tech-workspace .account-dialog .outline-btn { color: #245e58; background: #f8fbf9; border-color: #a8c9c1; }
body.tech-workspace .cloud-projects-item-icon { color: #1b6e67; background: #dff0eb; }
body.tech-workspace .cloud-projects-item.current { border-left: 2px solid var(--tech-cyan-deep); padding-left: 9px; background: #edf8f4; }
body.tech-workspace .cloud-projects-status[data-kind=success] { color: #28765d; }
body.tech-workspace .cloud-projects-status[data-kind=error] { color: #a55648; }

body.tech-workspace.ai-analysis-open { overflow: hidden; }
body.tech-workspace .minggua-dialog { max-height: calc(100% - 36px); }
body.tech-workspace .minggua-dialog-body { min-height: 0; overflow: auto; }
body.tech-workspace .zeri-dialog { height: min(780px, calc(100% - 32px)); max-height: calc(100% - 32px); }
body.tech-workspace .zeri-dialog-body { min-height: 0; overflow: auto; }
body.tech-workspace .report-export-modal { background: rgba(7, 16, 17, .72); backdrop-filter: blur(7px); }
body.tech-workspace .report-export-dialog { max-height: calc(100% - 32px); display: flex; flex-direction: column; border: 1px solid #344c4c; box-shadow: 0 26px 76px rgba(6, 18, 19, .32); }
body.tech-workspace .report-export-head { flex: 0 0 68px; color: #eff8f4; background: var(--tech-chrome-2); border-bottom-color: #304747; }
body.tech-workspace .report-export-head h2 { color: #eff8f4; }
body.tech-workspace .report-export-body { min-height: 0; overflow: auto; background: #f8fbf9; }
body.tech-workspace .report-export-actions { flex: 0 0 62px; background: #eef5f2; border-top-color: #cbd8d6; }
body.tech-workspace .tutorial-dialog { max-height: calc(100vh - 24px); overflow-y: auto; }

@media (max-width: 1700px) and (min-width: 1321px) {
  body.tech-workspace .topbar { padding: 0 16px; gap: 14px; }
  body.tech-workspace .brand-lockup { min-width: 190px; }
  body.tech-workspace .document-title-wrap { min-width: 150px; max-width: 270px; }
  body.tech-workspace .top-actions { min-width: 0; gap: 4px; }
  body.tech-workspace .top-actions .ghost-btn,
  body.tech-workspace .top-actions .subscription-cta,
  body.tech-workspace .top-actions .account-btn { width: 34px; min-width: 34px; max-width: 34px; padding: 0; }
  body.tech-workspace .top-actions .ghost-btn span,
  body.tech-workspace .top-actions .subscription-cta span,
  body.tech-workspace .top-actions .subscription-cta em,
  body.tech-workspace .top-actions .account-name,
  body.tech-workspace .top-actions #accountPlan { display: none; }
  body.tech-workspace .top-actions .outline-btn,
  body.tech-workspace .top-actions .primary-btn { width: auto; min-width: 34px; max-width: none; padding: 0 9px; }
  body.tech-workspace .top-actions .outline-btn span,
  body.tech-workspace .top-actions .primary-btn span { display: inline; }
  body.tech-workspace .top-actions .account-avatar { margin: 0; }
}

@media (max-width: 1320px) and (min-width: 1101px) {
  body.tech-workspace .topbar { padding: 0 16px; gap: 14px; }
  body.tech-workspace .brand-lockup { min-width: 190px; }
  body.tech-workspace .document-title-wrap { min-width: 150px; max-width: 270px; }
  body.tech-workspace .top-actions { min-width: 0; gap: 4px; }
  body.tech-workspace .top-actions .ghost-btn,
  body.tech-workspace .top-actions .outline-btn,
  body.tech-workspace .top-actions .primary-btn,
  body.tech-workspace .top-actions .subscription-cta,
  body.tech-workspace .top-actions .account-btn { width: 34px; min-width: 34px; max-width: 34px; padding: 0; }
  body.tech-workspace .top-actions .ghost-btn span,
  body.tech-workspace .top-actions .outline-btn span,
  body.tech-workspace .top-actions .primary-btn span,
  body.tech-workspace .top-actions .subscription-cta span,
  body.tech-workspace .top-actions .subscription-cta em,
  body.tech-workspace .top-actions .account-name,
  body.tech-workspace .top-actions #accountPlan { display: none; }
  body.tech-workspace .top-actions .account-avatar { margin: 0; }
}

@media (max-width: 1100px) and (min-width: 721px) {
  body.tech-workspace .topbar { padding: 0 12px; gap: 10px; }
  body.tech-workspace .brand-lockup { min-width: 160px; }
  body.tech-workspace .document-title-wrap { min-width: 100px; max-width: 220px; }
  body.tech-workspace .top-actions { min-width: 0; gap: 4px; }
  body.tech-workspace .top-actions .ghost-btn,
  body.tech-workspace .top-actions .outline-btn,
  body.tech-workspace .top-actions .primary-btn,
  body.tech-workspace .top-actions .subscription-cta,
  body.tech-workspace .top-actions .account-btn { width: 32px; min-width: 32px; max-width: 32px; padding: 0; }
  body.tech-workspace .top-actions .ghost-btn span,
  body.tech-workspace .top-actions .outline-btn span,
  body.tech-workspace .top-actions .primary-btn span,
  body.tech-workspace .top-actions .subscription-cta span,
  body.tech-workspace .top-actions .subscription-cta em,
  body.tech-workspace .top-actions .account-name,
  body.tech-workspace .top-actions #accountPlan { display: none; }
  body.tech-workspace .top-actions .account-avatar { margin: 0; }
  body.tech-workspace .canvas-toolbar { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }
  body.tech-workspace .toolbar-left { flex: 0 0 180px; min-width: 0; }
  body.tech-workspace .plan-tools { flex: 0 0 auto; flex-wrap: nowrap; }
  body.tech-workspace .plan-tools .plan-tool { width: 28px; min-width: 28px; height: 29px; }
  body.tech-workspace .toolbar-right { flex: 0 0 auto; margin-left: auto; }
}

@media (max-width: 900px) and (min-width: 721px) {
  body.tech-workspace .brand-lockup { min-width: 138px; }
  body.tech-workspace .document-title-wrap { max-width: 150px; }
}

@media (min-width: 721px) and (max-width: 820px) {
  body.tech-workspace .flystar-modal.open { inset: 64px 0 0; }
}

@media (max-height: 560px) {
  body.tech-workspace .flystar-dialog,
  body.tech-workspace .minggua-dialog,
  body.tech-workspace .zeri-dialog,
  body.tech-workspace .knowledge-dialog,
  body.tech-workspace .knowledge-reader-dialog,
  body.tech-workspace .account-dialog,
  body.tech-workspace .cloud-projects-dialog { max-height: calc(100% - 16px); }
  body.tech-workspace .tutorial-dialog { max-height: calc(100vh - 24px); overflow-y: auto; }
}

@media (max-height: 850px) and (min-width: 721px) {
  body.tech-workspace .tool-rail { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3e6561 transparent; }
  body.tech-workspace .rail-tool { height: 43px; }
  body.tech-workspace .rail-spacer { flex: 0 0 8px; min-height: 8px; }
}

@media (max-height: 700px) and (min-width: 721px) {
  body.tech-workspace .rail-tool { height: 40px; }
  body.tech-workspace .rail-spacer { flex-basis: 5px; min-height: 5px; }
}

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

/* Keep the narrowest overrides after the broader breakpoint rules above. */
@media (max-width: 720px) {
  body.tech-workspace .workspace { overflow: hidden; overflow-x: hidden; }
  body.tech-workspace .topbar { height: 58px; padding: 0 8px; gap: 8px; }
  body.tech-workspace .brand-lockup { min-width: 102px; gap: 7px; }
  body.tech-workspace .brand-mark { width: 29px; height: 29px; font-size: 16px; }
  body.tech-workspace .brand-name { font-size: 12px; }
  body.tech-workspace .document-title-wrap { min-width: 0; max-width: none; padding-left: 7px; }
  body.tech-workspace .tool-rail { width: 60px; flex: 0 0 60px; padding: 9px 5px; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; scrollbar-width: thin; scrollbar-color: #3e6561 transparent; }
  body.tech-workspace .rail-spacer { flex: 0 0 12px; min-height: 12px; }
  body.tech-workspace .rail-tool { height: 46px; }
  body.tech-workspace .canvas-area { min-width: 0; flex: 1 1 auto; }
  body.tech-workspace .canvas-toolbar { min-width: 0; padding: 0 10px; overflow-x: auto; justify-content: flex-start; }
  body.tech-workspace .toolbar-left { flex: 0 0 auto; }
  body.tech-workspace .toolbar-right { flex: 0 0 auto; margin-left: auto; }
  body.tech-workspace .canvas-scroll { padding: 16px; }
  body.tech-workspace .inspector { width: 220px; min-width: 220px; }
  body.tech-workspace .flystar-modal.open { inset: 58px 0 0; }
  body.tech-workspace .cloud-projects-modal,
  body.tech-workspace .knowledge-modal,
  body.tech-workspace .knowledge-reader-modal,
  body.tech-workspace .account-modal { padding: 8px; }
  body.tech-workspace .top-actions .account-btn { width: 34px; min-width: 34px; max-width: 34px; padding: 0 5px; }
  body.tech-workspace .top-actions .account-name,
  body.tech-workspace .top-actions #accountPlan { display: none; }
}

@media (max-width: 520px) {
  body.tech-workspace .topbar { gap: 4px; }
  body.tech-workspace .brand-lockup { min-width: 94px; }
  body.tech-workspace .brand-subtitle { display: none; }
  body.tech-workspace .top-actions { min-width: 0; overflow: hidden; }
  body.tech-workspace .top-actions .ghost-btn,
  body.tech-workspace .top-actions .action-divider,
  body.tech-workspace .top-actions #knowledgeBtn,
  body.tech-workspace .top-actions #helpBtn { display: none; }
  body.tech-workspace .top-actions .outline-btn,
  body.tech-workspace .top-actions .primary-btn { width: 30px; min-width: 30px; padding: 0; }
  body.tech-workspace .top-actions .primary-btn span,
  body.tech-workspace .top-actions .outline-btn span { display: none; }
  body.tech-workspace .document-title-wrap { min-width: 0; flex: 1; }
  body.tech-workspace .toolbar-right { gap: 5px; }
  body.tech-workspace .toolbar-right #fitBtn { display: none; }
  body.tech-workspace .inspector { flex-basis: 210px; width: 210px; }
}

@media (max-width: 360px) {
  body.tech-workspace .top-actions { gap: 1px; }
  body.tech-workspace .brand-lockup { min-width: 88px; }
}

body.tech-workspace .inspector {
  min-height: 0;
}
body.tech-workspace .inspector-content {
  min-height: 0;
  flex: 1;
}
body.tech-workspace .inspector.is-collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-left: 0;
  box-shadow: none;
}
body.tech-workspace #inspectorRestoreBtn:not([hidden]) {
  color: #145f59;
  background: #e0f2ed;
  border-color: #65aa9f;
}
body.tech-workspace #inspectorRestoreBtn[hidden] {
  display: none;
}

@media (max-width: 1440px) {
  body.tech-workspace .workspace {
    overflow: hidden;
    overflow-x: hidden;
  }
  body.tech-workspace .canvas-area {
    min-width: 0;
    flex: 1 1 auto;
  }
  body.tech-workspace .canvas-toolbar {
    min-width: 0;
  }
  body.tech-workspace .inspector {
    position: fixed;
    z-index: 12;
    top: 64px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(282px, calc(100vw - 86px));
    min-width: 0;
    max-width: calc(100vw - 86px);
    transform: translateX(0);
  }
  body.tech-workspace .inspector.is-collapsed {
    transform: translateX(100%);
    pointer-events: none;
  }
}

@media (min-width: 1101px) and (max-width: 1440px) {
  body.tech-workspace.inspector-open .environment-hud { right: 300px; }
}

@media (max-width: 1100px) {
  body.tech-workspace.inspector-open .environment-hud {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 720px) {
  body.tech-workspace .workspace {
    overflow: hidden;
    overflow-x: hidden;
  }
  body.tech-workspace .canvas-area {
    min-width: 0;
    flex: 1 1 auto;
  }
  body.tech-workspace .canvas-toolbar {
    min-width: 0;
  }
  body.tech-workspace .inspector {
    position: fixed;
    z-index: 12;
    top: 58px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(282px, calc(100vw - 68px));
    min-width: 0;
    max-width: calc(100vw - 68px);
    transform: translateX(0);
  }
  body.tech-workspace .inspector.is-collapsed {
    transform: translateX(100%);
    pointer-events: none;
  }
  body.tech-workspace.inspector-open .environment-hud,
  body.tech-workspace.inspector-open .environment-scene-shell {
    visibility: hidden;
    pointer-events: none;
  }
}